@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/lib/app-sidebar/app-sidebar.scss

@@ -1,415 +0,0 @@
-.viking-app-sidebar-host {
-  display: contents;
-
-  /* Theme-driven sidebar — Viking tokens only (THEME.md) */
-  --sidebar-accent: var(--viking-accent-strong, var(--color-primary-container));
-  --sidebar-border: var(--viking-border, var(--border-layout));
-  --sidebar-bg: var(--viking-surface);
-  --sidebar-hover-bg: color-mix(in srgb, var(--viking-accent) 6%, transparent);
-  --sidebar-active-bg: linear-gradient(
-    90deg,
-    color-mix(in srgb, var(--viking-accent) 12%, transparent) 0%,
-    color-mix(in srgb, var(--viking-accent) 3%, transparent) 100%
-  );
-  --sidebar-active-border: var(--viking-accent, var(--color-primary));
-}
-
-html[data-theme='light'] .viking-app-sidebar-host {
-  --sidebar-accent: var(--viking-accent, var(--color-primary));
-  --sidebar-border: var(--viking-border, var(--border-layout));
-  --sidebar-bg: var(--viking-surface);
-  --sidebar-hover-bg: color-mix(in srgb, var(--viking-accent) 5%, transparent);
-  --sidebar-active-bg: linear-gradient(
-    90deg,
-    color-mix(in srgb, var(--viking-accent) 8%, transparent) 0%,
-    color-mix(in srgb, var(--viking-accent) 2%, transparent) 100%
-  );
-  --sidebar-active-border: var(--viking-accent, var(--color-primary));
-}
-
-.dashboard-sidebar {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background: var(--sidebar-bg);
-  border-bottom: 1px solid var(--sidebar-border);
-  flex-shrink: 0;
-  height: auto;
-  position: sticky;
-  top: var(--viking-navbar-height, var(--navbar-height, 64px));
-  z-index: 40;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-
-  &.dragging {
-    transition: none;
-    user-select: none;
-  }
-}
-
-.resize-handle {
-  position: absolute;
-  right: -4px;
-  top: 0;
-  bottom: 0;
-  width: 16px;
-  cursor: col-resize;
-  z-index: 10;
-  background: transparent;
-  display: none;
-  align-items: center;
-  justify-content: center;
-
-  &::after {
-    content: '';
-    height: 24px;
-    width: 0px;
-    border-left: 1px solid var(--text-muted);
-    border-right: 1px solid var(--text-muted);
-    opacity: 0.3;
-    border-radius: 0px;
-    transition:
-      opacity 0.2s,
-      border-color 0.2s;
-  }
-
-  &:hover::after,
-  &:active::after {
-    opacity: 1;
-    border-left-color: var(--sidebar-accent);
-    border-right-color: var(--sidebar-accent);
-  }
-}
-
-.sidebar-brand {
-  padding: var(--viking-space-1-5) var(--viking-space-2);
-  display: flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  border-bottom: 1px solid var(--sidebar-border);
-  cursor: pointer;
-  justify-content: space-between;
-  transition: background 0.2s;
-
-  .collapse-toggle-btn {
-    display: none;
-  }
-
-  &:hover {
-    background: var(--sidebar-hover-bg);
-  }
-
-  .brand-icon {
-    color: var(--sidebar-accent);
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: visible !important;
-    line-height: 1;
-    flex-shrink: 0;
-  }
-
-  .brand-title {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 800;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--text-color);
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .collapse-toggle-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--viking-space-1);
-    border-radius: 50%;
-    transition: var(--transition-smooth);
-
-    &:hover {
-      background: var(--sidebar-hover-bg);
-      color: var(--text-color);
-    }
-  }
-}
-
-.sidebar-scroll-container {
-  flex: 1;
-  overflow-x: auto;
-  overflow-y: hidden;
-  display: flex;
-  flex-direction: column;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    height: 0;
-    width: 0;
-  }
-
-  &::-webkit-scrollbar {
-    width: 0px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: color-mix(in srgb, var(--viking-text) 8%, transparent);
-    border-radius: 0;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: color-mix(in srgb, var(--viking-text) 15%, transparent);
-  }
-}
-
-html[data-theme='light'] .viking-app-sidebar-host {
-  .sidebar-scroll-container::-webkit-scrollbar-thumb {
-    background: color-mix(in srgb, var(--viking-text) 8%, transparent);
-  }
-  .sidebar-scroll-container::-webkit-scrollbar-thumb:hover {
-    background: color-mix(in srgb, var(--viking-text) 15%, transparent);
-  }
-}
-
-.sidebar-footer {
-  display: none;
-  padding: var(--viking-space-2);
-  border-top: 1px solid var(--sidebar-border);
-}
-
-.system-health {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 1rem;
-  color: var(--text-muted);
-  font-weight: 600;
-  text-decoration: none;
-  white-space: nowrap;
-
-  .health-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: var(--color-success);
-    box-shadow: 0 0 8px var(--color-success);
-    flex-shrink: 0;
-    animation: pulse-glow 2s infinite;
-  }
-
-  &.degraded {
-    .health-dot {
-      background-color: var(--color-warning);
-      box-shadow: 0 0 8px var(--color-warning);
-      animation: pulse-glow-warning 2s infinite;
-    }
-  }
-}
-
-@keyframes pulse-glow {
-  0% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 40%, transparent);
-  }
-  70% {
-    box-shadow: 0 0 0 6px transparent;
-  }
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
-
-@keyframes pulse-glow-warning {
-  0% {
-    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
-  }
-}
-
-@media (min-width: 901px) {
-  .dashboard-sidebar:not(.collapsed) {
-    width: var(--viking-sidebar-width, 256px);
-  }
-
-  .dashboard-sidebar {
-    border-right: 1px solid var(--sidebar-border);
-    border-bottom: none;
-    height: calc(100vh - var(--viking-navbar-height, 64px));
-    position: sticky;
-    top: var(--viking-navbar-height, 64px);
-  }
-
-  .sidebar-brand {
-    padding: var(--viking-space-3);
-
-    .collapse-toggle-btn {
-      display: flex;
-    }
-  }
-
-  .resize-handle {
-    display: flex;
-  }
-
-  .sidebar-scroll-container {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  .sidebar-footer {
-    display: block;
-  }
-
-  .dashboard-sidebar.collapsed {
-    width: 64px;
-
-    .brand-title,
-    .brand-icon,
-    .viking-sidebar-nav-label,
-    .viking-sidebar-nav-tree,
-    .health-text {
-      display: none !important;
-    }
-
-    .sidebar-brand {
-      padding: var(--viking-space-3) var(--viking-space-1);
-      justify-content: center;
-    }
-
-    .viking-sidebar-nav-link a {
-      justify-content: center;
-      padding: var(--viking-space-1);
-      border-left: 3px solid transparent;
-
-      &.viking-sidebar-nav-link-active {
-        border-left-color: var(--sidebar-active-border);
-      }
-    }
-
-    .sidebar-footer {
-      display: flex;
-      justify-content: center;
-      padding: var(--viking-space-3) 0;
-    }
-  }
-}
-
-.search-results-list {
-  padding: var(--viking-space-2);
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-
-  .search-results-header {
-    font-size: 1rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--text-muted);
-    margin-bottom: 8px;
-  }
-
-  .search-result-item {
-    display: flex;
-    align-items: center;
-    gap: var(--viking-space-1);
-    padding: var(--viking-space-1) var(--viking-space-2);
-    border-radius: var(--viking-radius);
-    background: color-mix(in srgb, var(--viking-surface-alt) 40%, transparent);
-    border: 1px solid var(--viking-border-subtle);
-    cursor: pointer;
-    transition: var(--viking-transition-interactive);
-
-    &:hover {
-      background: var(--sidebar-hover-bg);
-      border-color: var(--sidebar-accent);
-
-      .result-title {
-        color: var(--sidebar-accent);
-      }
-    }
-
-    .result-icon {
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-      color: var(--text-muted);
-    }
-
-    .result-details {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      flex: 1;
-    }
-
-    .result-title {
-      font-size: 1rem;
-      font-weight: 600;
-      color: var(--text-color);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      transition: color 0.2s;
-    }
-
-    .result-snippet {
-      font-size: 1rem;
-      color: var(--text-muted);
-      margin-top: 0px;
-      line-height: 1.3;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .result-type {
-      font-size: 1rem;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      margin-top: 8px;
-    }
-
-    mark.search-highlight {
-      background: color-mix(in srgb, var(--viking-accent) 25%, transparent);
-      color: var(--viking-accent);
-      font-weight: 700;
-      border-radius: 0px;
-      padding: 0 0px;
-
-      :host-context(html[data-theme='light']) & {
-        background: color-mix(in srgb, var(--viking-accent) 15%, transparent);
-        color: var(--viking-accent);
-      }
-    }
-  }
-
-  .search-no-results {
-    font-size: 1rem;
-    color: var(--text-muted);
-    text-align: center;
-    padding: 16px 0;
-  }
-}

package/src/lib/app-sidebar/app-sidebar.ts

@@ -1,29 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  input,
-  output,
-} from "@angular/core";
-
-/**
- * viking-app-sidebar — dashboard sidebar shell styles (project nav markup inside).
- * Width is driven by the `--viking-sidebar-width` CSS variable on the host.
- */
-@Component({
-  selector: "viking-app-sidebar",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    class: "viking-app-sidebar-host",
-    "[style.--viking-sidebar-width.px]": "collapsed() ? null : width()",
-  },
-  template: `<ng-content />`,
-  styleUrl: "./app-sidebar.scss",
-})
-export class VikingAppSidebar {
-  readonly collapsed = input<boolean>(false);
-  readonly dragging = input<boolean>(false);
-  readonly width = input<number>(260);
-  readonly resizeStart = output<MouseEvent>();
-}

package/src/lib/auth-panel/auth-panel.spec.ts

@@ -1,132 +0,0 @@
-import { Component } from "@angular/core";
-import { TestBed, ComponentFixture } from "@angular/core/testing";
-import { describe, it, expect } from "vitest";
-import { VikingAuthPanel } from "./auth-panel";
-import { VikingField } from "../field/field";
-import { VikingInput } from "../input/input";
-
-@Component({
-  imports: [VikingAuthPanel, VikingField, VikingInput],
-  template: `
-    <viking-auth-panel
-      title="Sign In"
-      subtitle="Enter credentials"
-      [showSocial]="true"
-      [socialLoading]="loading"
-      (googleSignIn)="onGoogle()"
-      (appleSignIn)="onApple()"
-    >
-      <viking-field label="Email">
-        <viking-input placeholder="Email" />
-      </viking-field>
-      <a vikingAuthLinks href="/forgot">Forgot password?</a>
-      <p vikingAuthFooter>Need help?</p>
-    </viking-auth-panel>
-  `,
-})
-class AuthPanelHost {
-  loading = false;
-  googleCalled = false;
-  appleCalled = false;
-  onGoogle = (): void => {
-    this.googleCalled = true;
-  };
-  onApple = (): void => {
-    this.appleCalled = true;
-  };
-}
-
-describe("viking-auth-panel", () => {
-  const render = async (): Promise<ComponentFixture<AuthPanelHost>> => {
-    const fixture = TestBed.createComponent(AuthPanelHost);
-    fixture.detectChanges();
-    await fixture.whenStable();
-    return fixture;
-  };
-
-  it("renders accessible sign-in structure with title and subtitle", async () => {
-    const fixture = await render();
-    const panel = fixture.nativeElement.querySelector(
-      ".viking-auth-panel",
-    ) as HTMLElement;
-    expect(panel.getAttribute("aria-labelledby")).toBe("viking-auth-title");
-    expect(
-      fixture.nativeElement.querySelector("#viking-auth-title")?.textContent,
-    ).toContain("Sign In");
-    expect(
-      fixture.nativeElement.querySelector(".viking-auth-subtitle")?.textContent,
-    ).toContain("Enter credentials");
-  });
-
-  it("projects form body, links, and footer slots", async () => {
-    const fixture = await render();
-    expect(fixture.nativeElement.querySelector("viking-field")).toBeTruthy();
-    expect(
-      fixture.nativeElement.querySelector("[vikingAuthLinks]")?.textContent,
-    ).toContain("Forgot password?");
-    expect(
-      fixture.nativeElement.querySelector("[vikingAuthFooter]")?.textContent,
-    ).toContain("Need help?");
-  });
-
-  it("emits googleSignIn and appleSignIn from social buttons", async () => {
-    const fixture = await render();
-    const buttons = fixture.nativeElement.querySelectorAll(
-      ".viking-auth-social viking-button viking-button-wc",
-    ) as NodeListOf<HTMLElement>;
-    expect(buttons.length).toBe(2);
-    buttons[0].dispatchEvent(
-      new CustomEvent("viking-press", {
-        bubbles: true,
-        composed: true,
-        detail: new MouseEvent("click"),
-      }),
-    );
-    buttons[1].dispatchEvent(
-      new CustomEvent("viking-press", {
-        bubbles: true,
-        composed: true,
-        detail: new MouseEvent("click"),
-      }),
-    );
-    fixture.detectChanges();
-    expect(fixture.componentInstance.googleCalled).toBe(true);
-    expect(fixture.componentInstance.appleCalled).toBe(true);
-  });
-
-  it("hides social row when showSocial is false", async () => {
-    @Component({
-      imports: [VikingAuthPanel],
-      template: `<viking-auth-panel title="Sign In" [showSocial]="false" />`,
-    })
-    class NoSocialHost {}
-
-    const fixture = TestBed.createComponent(NoSocialHost);
-    fixture.detectChanges();
-    expect(
-      fixture.nativeElement.querySelector(".viking-auth-social"),
-    ).toBeNull();
-  });
-
-  it("disables social buttons while socialLoading is true", async () => {
-    @Component({
-      imports: [VikingAuthPanel],
-      template: `<viking-auth-panel
-        title="Sign In"
-        [socialLoading]="true"
-        [showSocial]="true"
-      />`,
-    })
-    class LoadingHost {}
-
-    const fixture = TestBed.createComponent(LoadingHost);
-    fixture.detectChanges();
-    await fixture.whenStable();
-    const buttons = fixture.nativeElement.querySelectorAll(
-      ".viking-auth-social viking-button viking-button-wc",
-    ) as NodeListOf<HTMLElement>;
-    expect(buttons[0].shadowRoot?.querySelector("button")?.disabled).toBe(true);
-    expect(buttons[1].shadowRoot?.querySelector("button")?.disabled).toBe(true);
-    expect(buttons[0].getAttribute("aria-busy")).toBe("true");
-  });
-});