@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

package/src/elements/modal/viking-modal.ts

@@ -1,154 +0,0 @@
-import {
-  defineVikingElement,
-  HTMLElementBase,
-  readBooleanAttribute,
-} from "../core/dom";
-import { attachStyles, resetStyles } from "../core/styles";
-
-const styles = `
-${resetStyles}
-
-:host {
-  display: contents;
-}
-
-dialog {
-  width: min(calc(100vw - (var(--viking-space-2) * 2)), 42rem);
-  padding: 0;
-  border: 1px solid var(--viking-border-strong);
-  border-radius: var(--viking-radius-lg);
-  background: var(--viking-surface-recipe);
-  color: var(--viking-text);
-  box-shadow: var(--viking-shadow-lg);
-}
-
-dialog::backdrop {
-  background: var(--viking-overlay-backdrop);
-}
-
-.modal {
-  display: grid;
-  gap: var(--viking-space-3);
-  padding: var(--viking-card-padding);
-}
-
-.header {
-  display: flex;
-  align-items: start;
-  justify-content: space-between;
-  gap: var(--viking-space-2);
-}
-
-.title {
-  margin: 0;
-  color: var(--viking-text);
-  font-size: var(--viking-font-size-lg);
-  line-height: var(--viking-line-height-tight);
-}
-
-.close {
-  display: inline-grid;
-  width: var(--viking-control-height-sm);
-  height: var(--viking-control-height-sm);
-  place-items: center;
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius);
-  background: var(--viking-surface-alt);
-  color: var(--viking-text);
-  cursor: pointer;
-}
-
-.close:focus-visible {
-  outline: var(--viking-ring-width) solid var(--viking-ring);
-  outline-offset: var(--viking-ring-offset);
-}
-`;
-
-export class VikingModal extends HTMLElementBase {
-  static readonly tagName = "viking-modal";
-
-  static get observedAttributes(): string[] {
-    return ["open", "label"];
-  }
-
-  private readonly shadowRootRef: ShadowRoot;
-  private dialog: HTMLDialogElement | null = null;
-
-  constructor() {
-    super();
-    this.shadowRootRef = this.attachShadow({ mode: "open" });
-    attachStyles(this.shadowRootRef, styles);
-  }
-
-  connectedCallback(): void {
-    this.render();
-  }
-
-  attributeChangedCallback(): void {
-    if (this.isConnected) {
-      this.syncOpenState();
-    }
-  }
-
-  open(): void {
-    this.setAttribute("open", "");
-  }
-
-  close(): void {
-    this.removeAttribute("open");
-  }
-
-  private render(): void {
-    const title = this.getAttribute("label") ?? "Dialog";
-    this.shadowRootRef.innerHTML = `
-      <dialog aria-label="${title}">
-        <section class="modal" part="surface">
-          <header class="header">
-            <h2 class="title"><slot name="title">${title}</slot></h2>
-            <button class="close" type="button" aria-label="Close dialog">x</button>
-          </header>
-          <slot></slot>
-          <slot name="footer"></slot>
-        </section>
-      </dialog>
-    `;
-    this.dialog = this.shadowRootRef.querySelector("dialog");
-    this.shadowRootRef
-      .querySelector(".close")
-      ?.addEventListener("click", () => this.close());
-    this.dialog?.addEventListener("close", () => {
-      if (this.hasAttribute("open")) {
-        this.removeAttribute("open");
-      }
-      this.dispatchEvent(
-        new CustomEvent("viking-close", { bubbles: true, composed: true }),
-      );
-    });
-    this.syncOpenState();
-  }
-
-  private syncOpenState(): void {
-    if (!this.dialog) {
-      return;
-    }
-
-    if (readBooleanAttribute(this, "open")) {
-      if (!this.dialog.open && typeof this.dialog.showModal === "function") {
-        this.dialog.showModal();
-      } else if (!this.dialog.open) {
-        this.dialog.setAttribute("open", "");
-      }
-      return;
-    }
-
-    if (this.dialog.open && typeof this.dialog.close === "function") {
-      this.dialog.close();
-    } else {
-      this.dialog.removeAttribute("open");
-    }
-  }
-}
-
-export const registerVikingModal = (): void => {
-  defineVikingElement(VikingModal.tagName, VikingModal);
-};

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./public-api";

package/src/lib/accordion/accordion.ts

@@ -1,126 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Optional,
-  input,
-  model,
-} from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-import { vikingUid } from "../../core/uid";
-
-/**
- * viking-accordion — collapsible content panels.
- * Set exclusive to allow only one open item at a time.
- */
-@Component({
-  selector: "viking-accordion",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: block;
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius);
-        background: var(--viking-surface);
-        overflow: hidden;
-      }
-      :host ::ng-deep viking-accordion-item:not(:last-child) {
-        border-bottom: 1px solid var(--viking-border);
-      }
-    `,
-  ],
-})
-export class VikingAccordion {
-  readonly exclusive = input<boolean>(false);
-
-  private openItem: VikingAccordionItem | null = null;
-
-  /** Called by items when they open, to enforce exclusive mode. */
-  readonly notifyOpened = (item: VikingAccordionItem): void => {
-    if (this.exclusive() && this.openItem && this.openItem !== item) {
-      this.openItem.expanded.set(false);
-    }
-    this.openItem = item;
-  };
-}
-
-/** A single expandable section within viking-accordion. */
-@Component({
-  selector: "viking-accordion-item",
-  imports: [VikingIcon],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <button
-      type="button"
-      class="viking-accordion-trigger"
-      [attr.aria-expanded]="expanded()"
-      [attr.aria-controls]="panelId"
-      (click)="toggle()"
-    >
-      <span class="viking-accordion-heading">{{ heading() }}</span>
-      <viking-icon
-        [name]="expanded() ? 'chevron-up' : 'chevron-down'"
-        [size]="18"
-      />
-    </button>
-    @if (expanded()) {
-      <div class="viking-accordion-panel" [id]="panelId">
-        <ng-content />
-      </div>
-    }
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .viking-accordion-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--viking-space-2);
-        width: 100%;
-        border: none;
-        background: transparent;
-        color: var(--viking-text);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-ui);
-        font-weight: 700;
-        padding: var(--viking-space-2);
-        cursor: pointer;
-        text-align: left;
-        transition: var(--viking-transition);
-      }
-      .viking-accordion-trigger:hover {
-        background: var(--viking-accent-soft);
-      }
-      .viking-accordion-trigger:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: -3px;
-      }
-      .viking-accordion-panel {
-        padding: 0 var(--viking-space-2) var(--viking-space-2);
-        color: var(--viking-text-muted);
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size);
-        line-height: 1.6;
-      }
-    `,
-  ],
-})
-export class VikingAccordionItem {
-  constructor(@Optional() private readonly accordion: VikingAccordion | null) {}
-
-  readonly heading = input.required<string>();
-  readonly expanded = model<boolean>(false);
-
-  protected readonly panelId = vikingUid("viking-accordion-panel");
-
-  protected toggle = (): void => {
-    this.expanded.update((value) => !value);
-    if (this.expanded()) {
-      this.accordion?.notifyOpened(this);
-    }
-  };
-}

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

@@ -1,274 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-.viking-app-header {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  width: 100%;
-  min-height: var(--viking-navbar-height, 64px);
-  background-color: var(--navbar-bg, var(--viking-surface));
-  border-bottom: 1px solid var(--viking-border-strong);
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: var(--viking-space-1) var(--viking-space-2);
-  box-sizing: border-box;
-}
-
-.viking-app-header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.viking-app-header-left {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.viking-app-header-right {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--viking-space-1);
-}
-
-.viking-app-header-center {
-  display: flex;
-  justify-content: center;
-}
-
-.viking-app-header-desktop-nav {
-  display: none;
-  align-items: center;
-  gap: calc(var(--viking-space-1) * 1.33);
-  padding: calc(var(--viking-space-1) / 2) 0;
-}
-
-.viking-app-header-desktop-auth {
-  display: none;
-  align-items: center;
-  gap: var(--viking-space-1);
-}
-
-::ng-deep .viking-app-header-nav-link {
-  position: relative;
-  font-size: var(--viking-font-size) !important;
-  color: var(--nav-link-color, var(--viking-text-muted)) !important;
-  font-weight: 600 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.08em !important;
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease !important;
-  border-radius: var(--viking-radius) var(--viking-radius) 0 0 !important;
-  padding: 0 var(--viking-space-2) !important;
-  height: 40px !important;
-  min-height: 40px !important;
-  line-height: 1 !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: var(--viking-space-1) !important;
-  text-decoration: none;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-
-::ng-deep .viking-app-header-nav-link::before {
-  content: '';
-  position: absolute;
-  inset: auto var(--viking-space-2) 0;
-  height: 2px;
-  border-radius: 2px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--viking-accent) 80%, transparent),
-    transparent
-  );
-  opacity: 0;
-  transform: scaleX(0.4);
-  transition:
-    opacity 0.25s ease,
-    transform 0.25s ease;
-  pointer-events: none;
-}
-
-::ng-deep .viking-app-header-nav-link:hover {
-  color: var(--viking-text) !important;
-  background-color: color-mix(in srgb, var(--viking-accent) 10%, transparent) !important;
-  transform: translateY(-1px);
-}
-
-::ng-deep .viking-app-header-nav-link:hover::before {
-  opacity: 1;
-  transform: scaleX(1);
-}
-
-::ng-deep .viking-app-header-nav-link.active,
-::ng-deep .viking-app-header-nav-link.viking-current {
-  color: var(--viking-text) !important;
-  background-color: color-mix(in srgb, var(--viking-accent) 14%, transparent) !important;
-  box-shadow:
-    inset 0 -2px 0 0 var(--viking-accent),
-    0 0 12px color-mix(in srgb, var(--viking-accent) 18%, transparent) !important;
-}
-
-::ng-deep .viking-app-header-icon-btn {
-  color: var(--viking-text-muted);
-  background: transparent;
-  border: none;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  min-width: 48px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition:
-    color 0.2s ease,
-    transform 0.2s ease,
-    background-color 0.2s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-::ng-deep .viking-app-header-icon-btn:hover {
-  color: var(--viking-text);
-  transform: rotate(15deg);
-  background-color: color-mix(in srgb, var(--viking-accent) 5%, transparent);
-}
-
-::ng-deep .viking-app-header-icon-btn:focus-visible {
-  outline: var(--viking-ring-width) solid var(--viking-ring);
-  outline-offset: 3px;
-}
-
-::ng-deep .viking-app-header-menu-toggle {
-  display: inline-flex !important;
-  width: 40px;
-  height: 40px;
-  min-width: 40px;
-}
-
-::ng-deep .viking-app-header-auth-btn {
-  min-width: auto;
-}
-
-::ng-deep .viking-app-header-auth-btn.viking-app-header-auth-btn-outline {
-  /* Global drakkar button styles from viking-ui.css */
-}
-
-::ng-deep .viking-app-header-auth-btn:hover {
-  transform: translateY(var(--viking-state-hover-lift, -1px));
-}
-
-.viking-app-header-mobile {
-  display: none;
-  flex-direction: column;
-  position: absolute;
-  top: var(--viking-navbar-height, 64px);
-  left: 0;
-  right: 0;
-  background-color: var(--viking-surface);
-  box-shadow: var(--viking-shadow-md);
-  border-bottom: 1px solid var(--viking-border);
-  padding: var(--viking-space-2);
-  box-sizing: border-box;
-  z-index: 49;
-  gap: var(--viking-space-1);
-  transform: translateY(-10px);
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 0.25s ease;
-}
-
-.viking-app-header-mobile.viking-open {
-  transform: translateY(0);
-  opacity: 1;
-  pointer-events: auto;
-  display: flex;
-}
-
-::ng-deep .viking-app-header-mobile-link {
-  width: 100% !important;
-  justify-content: flex-start !important;
-  font-size: var(--viking-font-size) !important;
-  color: var(--viking-text-muted) !important;
-  height: 40px !important;
-  min-height: 40px !important;
-  border-radius: var(--viking-radius) !important;
-  padding: 0 var(--viking-space-2) !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: var(--viking-space-1) !important;
-  text-decoration: none;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-}
-
-::ng-deep .viking-app-header-mobile-link:hover {
-  color: var(--viking-text) !important;
-  background-color: color-mix(in srgb, var(--viking-accent) 5%, transparent) !important;
-}
-
-::ng-deep .viking-app-header-mobile-link.active,
-::ng-deep .viking-app-header-mobile-link.viking-current {
-  color: var(--viking-text) !important;
-  background-color: color-mix(in srgb, var(--viking-accent) 10%, transparent) !important;
-  box-shadow: inset 0 0 0 1px var(--viking-accent) !important;
-}
-
-::ng-deep .viking-app-header-mobile-divider {
-  height: 1px;
-  background-color: var(--viking-border);
-  margin: var(--viking-space-1) 0;
-}
-
-::ng-deep .viking-app-header-brand {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  flex-shrink: 0;
-  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--viking-accent) 60%, transparent));
-  transition: filter 0.3s ease;
-}
-
-::ng-deep .viking-app-header-brand:hover {
-  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--viking-accent) 90%, transparent));
-}
-
-@media (min-width: 768px) {
-  .viking-app-header-desktop-nav {
-    display: flex;
-  }
-
-  .viking-app-header-desktop-auth {
-    display: flex;
-  }
-
-  ::ng-deep .viking-app-header-menu-toggle {
-    display: none !important;
-  }
-
-  .viking-app-header-mobile {
-    display: none !important;
-  }
-}

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

@@ -1,43 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-
-/**
- * viking-app-header — sticky application header with brand, nav, actions, and mobile menu slots.
- * Styles live in the component library so all apps share one navbar implementation.
- */
-@Component({
-  selector: "viking-app-header",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <header class="viking-app-header">
-      <div class="viking-app-header-content">
-        <div class="viking-app-header-left">
-          <ng-content select="[vikingAppHeaderBrand]" />
-        </div>
-        <nav
-          class="viking-app-header-center viking-app-header-desktop-nav"
-          aria-label="Main navigation"
-        >
-          <ng-content select="[vikingAppHeaderNav]" />
-        </nav>
-        <div class="viking-app-header-right">
-          <div class="viking-app-header-desktop-auth">
-            <ng-content select="[vikingAppHeaderAuth]" />
-          </div>
-          <ng-content select="[vikingAppHeaderActions]" />
-        </div>
-      </div>
-      <nav
-        class="viking-app-header-mobile"
-        [class.viking-open]="mobileMenuOpen()"
-        [attr.aria-label]="mobileMenuLabel()"
-      >
-        <ng-content select="[vikingAppHeaderMobile]" />
-      </nav>
-    </header>
-  `,
-  styleUrl: "./app-header.scss",
-})
-export class VikingAppHeader {
-  readonly mobileMenuOpen = input<boolean>(false);
-  readonly mobileMenuLabel = input<string>("Mobile navigation");
-}