@dataengineeringformachinelearning/viking-ui 1.0.2 → 3.0.0-alpha.4

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

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

@@ -0,0 +1 @@
+export * from "./web/index";

package/src/lib/accordion/accordion.ts

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

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

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