@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/lib/search-palette/search-palette.scss

@@ -1,288 +0,0 @@
-:host {
-  display: contents;
-}
-
-.viking-search-palette-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--viking-z-overlay);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 10vh var(--viking-space-2) var(--viking-space-2);
-  background: var(--viking-overlay-backdrop);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: none;
-  cursor: default;
-  animation: viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-out);
-}
-
-.viking-search-palette {
-  display: flex;
-  flex-direction: column;
-  background: var(--viking-surface-glass, color-mix(in srgb, var(--viking-surface) 82%, transparent));
-  backdrop-filter: blur(var(--viking-surface-glass-blur, 12px));
-  -webkit-backdrop-filter: blur(var(--viking-surface-glass-blur, 12px));
-  border: 1px solid var(--viking-border-strong);
-  border-radius: var(--viking-radius-lg);
-  box-shadow: var(--viking-shadow-lg);
-  overflow: hidden;
-  max-width: 600px;
-  width: 100%;
-  margin: 0 auto;
-  font-family: var(--viking-font-family);
-  color: var(--viking-text);
-  animation: viking-modal-in var(--viking-duration) var(--viking-ease-default);
-  position: relative;
-}
-
-.viking-search-palette::before {
-  content: '';
-  position: absolute;
-  inset: 0 0 auto;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
-    transparent
-  );
-  pointer-events: none;
-  z-index: 1;
-}
-
-.viking-search-palette-header {
-  display: flex;
-  align-items: center;
-  padding: var(--viking-space-2);
-  border-bottom: 1px solid var(--viking-border);
-  gap: var(--viking-space-1);
-  background: color-mix(in srgb, var(--viking-bg) 20%, transparent);
-}
-
-.viking-search-palette-header:focus-within {
-  border-bottom-color: var(--viking-accent);
-  box-shadow: inset 0 -2px 0 var(--viking-accent-soft);
-}
-
-.viking-search-palette-input {
-  flex: 1;
-  background: none;
-  border: none;
-  outline: none;
-  font-size: calc(var(--viking-font-size) * 1.05);
-  color: var(--viking-text);
-  font-family: inherit;
-}
-
-.viking-search-palette-close {
-  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: var(--viking-text-muted);
-  cursor: pointer;
-  padding: var(--viking-space-half);
-  border-radius: var(--viking-radius);
-  transition: var(--viking-transition-interactive);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.viking-search-palette-close:hover {
-  color: var(--viking-text);
-  background: var(--viking-accent-soft);
-}
-
-.viking-search-palette-close:focus-visible {
-  outline: var(--viking-ring-width) solid var(--viking-ring);
-  outline-offset: var(--viking-ring-offset);
-}
-
-.viking-search-palette-close:active {
-  transform: scale(var(--viking-state-active-scale));
-}
-
-.viking-search-palette-body {
-  max-height: 50vh;
-  overflow-y: auto;
-}
-
-.viking-search-palette-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--viking-space-1);
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border-top: 1px solid var(--viking-border);
-  font-size: calc(var(--viking-font-size) * 0.85);
-  color: var(--viking-text-muted);
-}
-
-::ng-deep .viking-search-palette-shortcut {
-  display: inline-flex;
-  align-items: center;
-  gap: calc(var(--viking-space-1) / 2);
-}
-
-::ng-deep .viking-search-palette-shortcut kbd {
-  font-family: inherit;
-  font-size: calc(var(--viking-font-size) * 0.75);
-  padding: 2px 6px;
-  border-radius: calc(var(--viking-radius) / 2);
-  border: 1px solid var(--viking-border);
-  background: var(--viking-surface-alt);
-}
-
-.viking-search-palette-body {
-  padding: var(--viking-space-2);
-}
-
-::ng-deep .viking-search-results {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-}
-
-::ng-deep .viking-search-result {
-  display: flex;
-  align-items: center;
-  min-height: var(--viking-control-height-sm);
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border-radius: var(--viking-radius);
-  background: color-mix(in srgb, var(--viking-surface) 2%, transparent);
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: var(--viking-transition-interactive);
-  gap: var(--viking-space-1);
-  -webkit-tap-highlight-color: transparent;
-}
-
-::ng-deep .viking-search-result.is-selected,
-::ng-deep .viking-search-result.viking-selected,
-::ng-deep .viking-search-result:hover {
-  background: color-mix(in srgb, var(--viking-accent) 5%, transparent);
-  border-color: color-mix(in srgb, var(--viking-accent) 30%, transparent);
-  box-shadow: var(--viking-shadow-sm);
-}
-
-::ng-deep .viking-search-result:focus-visible {
-  outline: var(--viking-ring-width) solid var(--viking-ring);
-  outline-offset: var(--viking-ring-offset);
-}
-
-::ng-deep .viking-search-result-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--viking-text-muted);
-}
-
-::ng-deep .viking-search-result.is-selected .viking-search-result-icon,
-::ng-deep .viking-search-result.viking-selected .viking-search-result-icon,
-::ng-deep .viking-search-result:hover .viking-search-result-icon {
-  color: var(--viking-accent);
-}
-
-::ng-deep .viking-search-result-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--viking-space-1) / 2);
-  overflow: hidden;
-}
-
-::ng-deep .viking-search-result-title {
-  font-size: var(--viking-font-size);
-  font-weight: 600;
-  color: var(--viking-text);
-}
-
-::ng-deep .viking-search-result-snippet {
-  font-size: var(--viking-font-size);
-  color: var(--viking-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-::ng-deep mark.viking-search-highlight {
-  background: color-mix(in srgb, var(--viking-accent) 20%, transparent);
-  color: var(--viking-accent);
-  border-radius: 0;
-  padding: 0;
-  font-weight: 600;
-}
-
-::ng-deep .viking-search-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: calc(var(--viking-space-2) * 2) var(--viking-space-2);
-  text-align: center;
-  color: var(--viking-text-muted);
-}
-
-::ng-deep .viking-search-empty-icon {
-  opacity: 0.5;
-  margin-bottom: var(--viking-space-2);
-}
-
-::ng-deep .viking-search-suggestions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-  padding: var(--viking-space-1);
-}
-
-::ng-deep .viking-search-group-label,
-::ng-deep .viking-search-suggestions-heading {
-  margin: var(--viking-space-1) 0 var(--viking-space-half);
-  padding: 0 var(--viking-space-1);
-  font-size: var(--viking-font-size-2xs, var(--viking-font-size-xs));
-  font-weight: var(--viking-font-weight-semibold, 600);
-  letter-spacing: var(--viking-letter-spacing-caps);
-  text-transform: uppercase;
-  color: var(--viking-text-muted);
-}
-
-::ng-deep .viking-search-suggestions-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-1);
-}
-
-@media (min-width: 481px) {
-  ::ng-deep .viking-search-suggestions-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-::ng-deep .viking-search-suggestion {
-  display: flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  min-height: var(--viking-control-height-sm);
-  padding: var(--viking-space-1) var(--viking-space-2);
-  background: color-mix(in srgb, var(--viking-surface) 2%, transparent);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius);
-  cursor: pointer;
-  transition: var(--viking-transition-interactive);
-  -webkit-tap-highlight-color: transparent;
-}
-
-::ng-deep .viking-search-suggestion:hover {
-  background: color-mix(in srgb, var(--viking-accent) 5%, transparent);
-  border-color: color-mix(in srgb, var(--viking-accent) 30%, transparent);
-  box-shadow: var(--viking-shadow-sm);
-}
-
-::ng-deep .viking-search-suggestion:focus-visible {
-  outline: var(--viking-ring-width) solid var(--viking-ring);
-  outline-offset: var(--viking-ring-offset);
-}

package/src/lib/search-palette/search-palette.ts

@@ -1,114 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  effect,
-  input,
-  model,
-  output,
-  viewChild,
-} from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-import { VikingKbd } from "../kbd/kbd";
-
-/**
- * viking-search-palette — command-palette style search overlay (Product Hunt / Algolia inspired).
- * Project custom result lists into the body slot; ⌘K / Ctrl+K wired by host app static widget.
- */
-@Component({
-  selector: "viking-search-palette",
-  imports: [VikingIcon, VikingKbd],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { "(keydown.escape)": "close()" },
-  template: `
-    @if (open()) {
-      <div
-        class="viking-search-palette-backdrop"
-        role="presentation"
-        tabindex="-1"
-        (click)="close()"
-        (keydown.escape)="close()"
-      >
-        <div
-          class="viking-search-palette"
-          role="dialog"
-          aria-label="Search"
-          tabindex="-1"
-          (click)="$event.stopPropagation()"
-          (keydown)="$event.stopPropagation()"
-        >
-          <div class="viking-search-palette-header">
-            <viking-icon name="search" [size]="24" />
-            <input
-              #queryInput
-              type="text"
-              class="viking-search-palette-input"
-              [placeholder]="placeholder()"
-              [value]="query()"
-              [attr.aria-label]="placeholder()"
-              (input)="onQueryInput($event)"
-            />
-            <button
-              type="button"
-              class="viking-search-palette-close"
-              aria-label="Close search"
-              (click)="close()"
-            >
-              <viking-icon name="x" [size]="20" />
-            </button>
-          </div>
-          <div
-            class="viking-search-palette-body"
-            tabindex="-1"
-            (keydown)="paletteKeydown.emit($event)"
-          >
-            <ng-content />
-          </div>
-          <footer class="viking-search-palette-footer">
-            <ng-content select="[vikingSearchPaletteFooter]" />
-            <span class="viking-search-palette-shortcut">
-              <viking-kbd>{{ modKey() }}</viking-kbd
-              ><viking-kbd>K</viking-kbd> toggle · <viking-kbd>↑</viking-kbd
-              ><viking-kbd>↓</viking-kbd> navigate ·
-              <viking-kbd>Enter</viking-kbd> open ·
-              <viking-kbd>Esc</viking-kbd> close
-            </span>
-          </footer>
-        </div>
-      </div>
-    }
-  `,
-  styleUrl: "./search-palette.scss",
-})
-export class VikingSearchPalette {
-  readonly open = model<boolean>(false);
-  readonly query = model<string>("");
-  readonly placeholder = input<string>("Search...");
-  readonly paletteKeydown = output<KeyboardEvent>();
-
-  private readonly queryInput =
-    viewChild<ElementRef<HTMLInputElement>>("queryInput");
-
-  constructor() {
-    effect(() => {
-      if (this.open()) {
-        queueMicrotask(() => this.queryInput()?.nativeElement.focus());
-      }
-    });
-  }
-
-  protected onQueryInput(event: Event): void {
-    this.query.set((event.target as HTMLInputElement).value);
-  }
-
-  protected close(): void {
-    this.open.set(false);
-  }
-
-  /** Platform modifier label for footer shortcut hint. */
-  protected modKey = (): string =>
-    typeof navigator !== "undefined" &&
-    /Mac|iPhone|iPad/i.test(navigator.platform)
-      ? "⌘"
-      : "Ctrl";
-}

package/src/lib/select/select.ts

@@ -1,292 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  computed,
-  input,
-  model,
-  signal,
-} from "@angular/core";
-import { VikingControl, provideVikingCva } from "../core/cva";
-import { VikingIcon } from "../icon/icon";
-import { VikingSelectOption } from "../../core/types";
-
-export type VikingSelectWidth = "full" | "half";
-
-/**
- * viking-select — custom listbox select.
- * ControlValueAccessor-compatible with full keyboard support.
- */
-@Component({
-  selector: "viking-select",
-  imports: [VikingIcon],
-  providers: [provideVikingCva(VikingSelect)],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    "(document:click)": "onDocumentClick($event)",
-    "[class.viking-select-full]": "width() === 'full'",
-    "[class.viking-select-half]": "width() === 'half'",
-  },
-  template: `
-    <button
-      type="button"
-      class="viking-control viking-select-trigger"
-      [disabled]="disabled() || formDisabled()"
-      [attr.aria-expanded]="open()"
-      [attr.aria-label]="label() || placeholder()"
-      aria-haspopup="listbox"
-      (click)="toggle()"
-      (keydown)="onKeydown($event)"
-    >
-      <span
-        class="viking-select-value"
-        [class.viking-select-placeholder]="!selectedLabel()"
-      >
-        {{ selectedLabel() || placeholder() }}
-      </span>
-      <viking-icon
-        [name]="open() ? 'chevron-up' : 'chevron-down'"
-        [size]="18"
-      />
-    </button>
-    @if (open()) {
-      <div
-        class="viking-select-panel"
-        role="listbox"
-        [attr.aria-label]="label() || placeholder()"
-      >
-        @for (option of options(); track option.label; let index = $index) {
-          <button
-            type="button"
-            role="option"
-            class="viking-select-option"
-            [class.viking-active]="index === activeIndex()"
-            [class.viking-selected]="option.value === value()"
-            [disabled]="option.disabled"
-            [attr.aria-selected]="option.value === value()"
-            (click)="pick(option)"
-            (mouseenter)="activeIndex.set(index)"
-          >
-            <span class="viking-select-option-label">{{ option.label }}</span>
-            @if (option.value === value()) {
-              <viking-icon name="check" [size]="16" />
-            }
-          </button>
-        }
-      </div>
-    }
-  `,
-  styles: [
-    `
-      :host {
-        position: relative;
-        display: block;
-        min-width: 0;
-      }
-      :host(.viking-select-full) {
-        width: 100%;
-      }
-      :host(.viking-select-half) {
-        width: 100%;
-        max-width: var(--viking-select-half-max-width, min(100%, 24rem));
-      }
-      .viking-select-value {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .viking-select-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--viking-space-1);
-        width: 100%;
-        min-height: var(--viking-control-height);
-        padding: 0 var(--viking-space-2);
-        background: var(--viking-surface);
-        border: 1px solid var(--viking-border-strong);
-        border-radius: var(--viking-radius);
-        box-shadow: var(--viking-shadow-sm);
-        color: var(--viking-text);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size);
-        cursor: pointer;
-        transition: var(--viking-transition-interactive);
-        text-align: left;
-      }
-      .viking-select-trigger:hover:not(:disabled) {
-        border-color: var(--viking-accent-strong);
-        box-shadow: var(--viking-shadow-md);
-      }
-      .viking-select-trigger:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-select-trigger:disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-      .viking-select-placeholder {
-        color: var(--viking-text-muted);
-      }
-      .viking-select-panel {
-        position: absolute;
-        top: calc(100% + var(--viking-space-half));
-        left: 0;
-        width: 100%;
-        min-width: 100%;
-        max-width: 100%;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        margin: 0;
-        padding: var(--viking-space-1);
-        background-color: var(
-          --viking-select-panel-bg,
-          var(--viking-surface-raised)
-        );
-        border: 1px solid var(--viking-border-strong);
-        border-radius: var(--viking-radius);
-        box-shadow: var(--viking-shadow-lg);
-        z-index: var(--viking-z-overlay);
-        max-height: 315px;
-        overflow: auto;
-        isolation: isolate;
-        animation: viking-slide-up var(--viking-duration-fast)
-          var(--viking-ease-default);
-      }
-      .viking-select-option {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--viking-space-1);
-        padding: var(--viking-space-1) var(--viking-space-1-5);
-        border: none;
-        background: transparent;
-        text-align: left;
-        width: 100%;
-        min-width: 0;
-        border-radius: var(--viking-radius-sm);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-sm);
-        color: var(--viking-text);
-        cursor: pointer;
-        transition: var(--viking-transition-interactive);
-      }
-      .viking-select-option-label {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .viking-select-option:disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-      .viking-select-option:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: -2px;
-      }
-      .viking-active {
-        background: var(--viking-accent-soft);
-        color: var(--viking-text);
-      }
-      .viking-selected {
-        font-weight: var(--viking-font-weight-semibold);
-        color: var(--viking-accent-strong);
-        background: color-mix(
-          in srgb,
-          var(--viking-accent) 14%,
-          var(--viking-select-panel-bg, var(--viking-surface-raised))
-        );
-      }
-    `,
-  ],
-})
-export class VikingSelect extends VikingControl<unknown> {
-  readonly options = input.required<VikingSelectOption[]>();
-  readonly value = model<unknown>(null);
-  readonly placeholder = input<string>("Select…");
-  readonly label = input<string>("");
-  readonly disabled = input<boolean>(false);
-  readonly width = input<VikingSelectWidth>("half");
-
-  constructor(private readonly host: ElementRef<HTMLElement>) {
-    super();
-  }
-
-  protected readonly open = signal(false);
-  protected readonly activeIndex = signal(0);
-
-  protected readonly selectedLabel = computed(
-    () =>
-      this.options().find((option) => option.value === this.value())?.label ??
-      "",
-  );
-
-  writeValue(value: unknown): void {
-    this.value.set(value);
-  }
-
-  protected toggle = (): void => {
-    this.open.update((value) => !value);
-    if (this.open()) {
-      const index = this.options().findIndex(
-        (option) => option.value === this.value(),
-      );
-      this.activeIndex.set(Math.max(0, index));
-    }
-  };
-
-  protected pick = (option: VikingSelectOption): void => {
-    if (option.disabled) {
-      return;
-    }
-    this.value.set(option.value);
-    this.onChange(option.value);
-    this.onTouched();
-    this.open.set(false);
-  };
-
-  protected onKeydown = (event: KeyboardEvent): void => {
-    const options = this.options();
-    if (!this.open()) {
-      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
-        event.preventDefault();
-        this.toggle();
-      }
-      return;
-    }
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
-        this.activeIndex.update((index) =>
-          Math.min(options.length - 1, index + 1),
-        );
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        this.activeIndex.update((index) => Math.max(0, index - 1));
-        break;
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        this.pick(options[this.activeIndex()]);
-        break;
-      case "Escape":
-        this.open.set(false);
-        break;
-    }
-  };
-
-  protected onDocumentClick = (event: Event): void => {
-    if (
-      this.open() &&
-      !this.host.nativeElement.contains(event.target as Node)
-    ) {
-      this.open.set(false);
-    }
-  };
-}