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

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

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

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

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