@dnd-mapp/shared-ui 1.0.0 → 1.1.0

package/README.md

@@ -4,116 +4,84 @@
 ![NPM Version](https://img.shields.io/npm/v/@dnd-mapp/shared-ui)
 ![License: Proprietary](https://img.shields.io/badge/License-Proprietary-red.svg)
 
-The official Angular component library for the **D&D Mapp** platform. This library provides a unified design language and a collection of reusable, accessible UI components built specifically for tabletop gaming applications.
+The official Angular component library for the **D&D Mapp** platform. This library provides a unified design language and high-performance, accessible UI components built specifically for tabletop gaming applications.
 
-## 🏰 Features
-
-- **Angular 21 Native**: Built with the latest signals-based patterns and standalone components.
-- **Tailwind CSS v4**: CSS-first configuration for high-performance styling.
-- **Accessible**: Built with A11y best practices to ensure all players can use the tools.
-- **Design Driven**: Single source of truth for the D&D Mapp brand.
+🏰 **[Explore the Live Storybook](https://dnd-mapp.github.io/shared-ui/)**
 
 ---
 
-## 🧱 UI Components
-
-A collection of high-performance, accessible components. Click on a component name to view its specific documentation, API, and usage examples.
+## ✨ Key Features
 
-| Component                              | Status | Description                                                         |
-|----------------------------------------|--------|---------------------------------------------------------------------|
-| **[Button](src/lib/button/README.md)** | ✅      | Primary action component with support for variants (base, primary). |
-
-> **[!TIP]** ✅ Ready for Production | 🚧 In Development | 🧪 Experimental
+- **Modern Architecture**: Built with **Angular 21** using signals and standalone components.
+- **Next-Gen Styling**: Powered by **Tailwind CSS v4** with a CSS-first configuration.
+- **Layout Integrity**: Specialized components like `Active Marker` prevent Layout Shifts (CLS) during state toggles.
+- **Accessible & Consistent**: A11y-focused components that serve as the single source of truth for the D&D Mapp brand.
 
 ---
 
-## 🚀 Installation
+## 🚀 Getting Started
+
+### 1. Installation
 
-Install the package via pnpm (recommended) or your preferred package manager:
+Install the package via your preferred package manager:
 
 ```bash
 pnpm add @dnd-mapp/shared-ui
 ```
 
-### 1. Global Styles Integration
+### 2. Global Styles
 
-The library requires the shared Tailwind-based styles to function correctly. Add the following import to your application's global CSS file (e.g., `styles.css` or `main.css`):
+Import the library's Tailwind-based styles into your application's global CSS file (e.g., `styles.css`):
 
 ```css
-@import "@dnd-mapp/shared-ui/styles.css";
+@import "@dnd-mapp/shared-ui/assets/styles/main.css";
 ```
 
-### 2. Configuration
-
-Since this library uses **Tailwind CSS v4**, ensure your application is configured to process Tailwind imports. If you are using the Angular CLI with Tailwind support, no additional configuration is typically required beyond the import.
-
----
-
-## 📖 Usage
+> [!NOTE]
+> Ensure your build pipeline is configured to process Tailwind CSS v4 imports.
 
-All components are exported as **Standalone Components**. You can import them directly into your component's `imports` array.
+### 3. Usage
 
-### Example: Using the Button Component
+All components are **Standalone**. Import them directly into your component's `imports` array:
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ButtonComponent } from '@dnd-mapp/shared-ui'; 
+import { Component } from '@angular/core';
+import { ButtonComponent } from '@dnd-mapp/shared-ui';
 
 @Component({
-      selector: 'dma-root',
-      template: `
-        <section>
-            <h1>Encounter Initiative</h1>
-            <button dma-button (click)="onRoll()">Roll for Initiative</button>
-        </section>
-      `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-root', 
+    template: `<button type="button" dma-button="primary">Roll Initiative</button>`,
     imports: [ButtonComponent],
 })
-export class RootComponent {
-  protected onRoll() {
-    console.log('Natural 20!');
-  }
-}
+export class RootComponent {}
 ```
 
 ---
 
-## 🛠 Development & Storybook
-
-If you are contributing to the library or want to explore the components in isolation:
-
-1. **Clone the repo**:
-
-   ```bash
-   git clone https://github.com/dnd-mapp/shared-ui.git
-   ```
-
-2. **Setup environment**:
-
-   This project uses [mise-en-place](https://mise.jdx.dev/) to manage Node.js and pnpm versions.
-
-   ```bash
-   mise install
-   pnpm install
-   ```
+## 🧱 Component Library
 
-3. **Launch Storybook**:
+For detailed API definitions and interactive examples, visit our **[Storybook](https://dnd-mapp.github.io/shared-ui/)** or view the documentation for the specific components below:
 
-   ```bash
-   pnpm storybook
-   ```
+| Component                                                | Status | Description                                                  |
+|----------------------------------------------------------|--------|--------------------------------------------------------------|
+| **[Active Marker](src/lib/nav/active-marker/README.md)** | ✅      | Prevents CLS by reserving space for bold text states.        |
+| **[App Top Bar](src/lib/nav/app-top-bar/README.md)**     | ✅      | Layout-oriented header with `start` and `end` sections.      |
+| **[Button](src/lib/button/README.md)**                   | ✅      | Actions with support for base and primary variants.          |
+| **[Dropdown](src/lib/dropdown/README.md)**               | ✅      | Directive-based overlay system using Angular CDK.            |
+| **[Navbar](src/lib/nav/navbar/README.md)**               | ✅      | Semantic `<nav>` container with standardized flex spacing.   |
+| **[Navbar Brand](src/lib/nav/navbar-brand/README.md)**   | ✅      | A standardized header element for logo and brand identity.   |
+| **[Navbar Link](src/lib/nav/navbar-link/README.md)**     | ✅      | Navigation link with automatic active state and layout lock. |
+| **[Navbar Menu](src/lib/nav/navbar-menu/README.md)**     | ✅      | Specialized dropdown trigger for navigation bars.            |
+| **[Vertical Rule](src/lib/vertical-rule/README.md)**     | ✅      | A layout-stretching divider for content separation.          |
 
-   Navigate to `http://localhost:6006` to view the documentation and component playground.
+> **Legend:**
+> ✅ Production Ready | 🚧 In Development | 🧪 Experimental
 
 ---
 
-## 📜 Available Scripts
+## 🛠 Development
 
-- `pnpm build`: Compiles the library for production.
-- `pnpm test`: Runs unit tests via Karma.
-- `pnpm lint`: Validates TypeScript and Angular logic.
-- `pnpm stylelint`: Validates CSS/Tailwind compliance.
+If you are contributing or wish to run the documentation locally, please refer to the [Main Repository README](https://github.com/dnd-mapp/shared-ui/blob/main/README.md) for environment setup and contribution guidelines.
 
 ---
 
@@ -121,4 +89,4 @@ If you are contributing to the library or want to explore the components in isol
 
 Copyright © 2026 NoNamer777. All rights reserved.
 
-This software is **proprietary**. Unauthorized copying, modification, or distribution is strictly prohibited. Use is subject to the terms in the [LICENSE](https://github.com/dnd-mapp/shared-ui?tab=License-1-ov-file) file.
+Proprietary software. Unauthorized copying or distribution is strictly prohibited. See the [LICENSE](https://github.com/dnd-mapp/shared-ui?tab=License-1-ov-file) for full terms.

package/assets/styles/main.css

@@ -0,0 +1,6 @@
+@reference 'tailwindcss';
+
+html,
+body {
+    @apply text-neutral-900 bg-neutral-100 p-0!;
+}

package/fesm2022/dnd-mapp-shared-ui.mjs

@@ -1,9 +1,16 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component } from '@angular/core';
+import { input, computed, Component, inject, ElementRef, ViewContainerRef, DestroyRef, booleanAttribute, output, Directive, ChangeDetectionStrategy, model } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, debounceTime, filter, from } from 'rxjs';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { RouterLink, Router, isActive } from '@angular/router';
 
 const ButtonColors = {
     PRIMARY: 'primary',
     BASE: 'base',
+    DANGER: 'danger',
 };
 const DEFAULT_BUTTON_COLOR = ButtonColors.BASE;
 function buttonColorAttribute(value) {
@@ -14,29 +21,380 @@ class ButtonComponent {
     color = input(DEFAULT_BUTTON_COLOR, { ...(ngDevMode ? { debugName: "color" } : {}), transform: buttonColorAttribute, alias: 'dma-button' });
     isBase = computed(() => this.color() === ButtonColors.BASE, ...(ngDevMode ? [{ debugName: "isBase" }] : []));
     isPrimary = computed(() => this.color() === ButtonColors.PRIMARY, ...(ngDevMode ? [{ debugName: "isPrimary" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ButtonComponent, isStandalone: true, selector: "button[dma-button]", inputs: { color: { classPropertyName: "color", publicName: "dma-button", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'font-semibold cursor-pointer py-2 px-4 rounded-md'", "class.text-neutral-900": "isBase()", "class.text-neutral-100": "isPrimary()", "class.bg-neutral-100": "isBase()", "class.hover:bg-neutral-200": "isBase()", "class.active:bg-neutral-300": "isBase()", "class.bg-blue-400": "isPrimary()", "class.hover:bg-blue-500": "isPrimary()", "class.active:bg-blue-600": "isPrimary()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    isDanger = computed(() => this.color() === ButtonColors.DANGER, ...(ngDevMode ? [{ debugName: "isDanger" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ButtonComponent, isStandalone: true, selector: "button[dma-button]", inputs: { color: { classPropertyName: "color", publicName: "dma-button", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.text-neutral-900": "isBase()", "class.bg-neutral-100": "isBase()", "class.hover:bg-neutral-200": "isBase()", "class.active:bg-neutral-300": "isBase()", "class.text-neutral-100": "isPrimary()", "class.bg-blue-400": "isPrimary()", "class.hover:bg-blue-500": "isPrimary()", "class.active:bg-blue-600": "isPrimary()", "class.text-red-600": "isDanger()", "class.hover:bg-red-50": "isDanger()", "class.active:bg-red-100": "isDanger()" }, classAttribute: "font-semibold cursor-pointer py-2 px-4 rounded-md" }, ngImport: i0, template: "<div class=\"flex gap-2 items-center justify-center\">\n    <ng-content select=\"dma-leading-icon\" />\n    <ng-content />\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'button[dma-button]',
-                    template: `<ng-content />`,
-                    host: {
-                        '[class]': `'font-semibold cursor-pointer py-2 px-4 rounded-md'`,
+            args: [{ selector: 'button[dma-button]', host: {
+                        'class': 'font-semibold cursor-pointer py-2 px-4 rounded-md',
                         '[class.text-neutral-900]': 'isBase()',
-                        '[class.text-neutral-100]': 'isPrimary()',
                         '[class.bg-neutral-100]': 'isBase()',
                         '[class.hover:bg-neutral-200]': 'isBase()',
                         '[class.active:bg-neutral-300]': 'isBase()',
+                        '[class.text-neutral-100]': 'isPrimary()',
                         '[class.bg-blue-400]': 'isPrimary()',
                         '[class.hover:bg-blue-500]': 'isPrimary()',
                         '[class.active:bg-blue-600]': 'isPrimary()',
+                        '[class.text-red-600]': 'isDanger()',
+                        '[class.hover:bg-red-50]': 'isDanger()',
+                        '[class.active:bg-red-100]': 'isDanger()',
+                    }, imports: [], template: "<div class=\"flex gap-2 items-center justify-center\">\n    <ng-content select=\"dma-leading-icon\" />\n    <ng-content />\n</div>\n" }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "dma-button", required: false }] }] } });
+
+const DEFAULT_DROPDOWN_POSITIONS = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 4,
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4,
+    },
+];
+
+class DropdownAnchorDirective {
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    dropdownContainerTemplateRef = input.required({ ...(ngDevMode ? { debugName: "dropdownContainerTemplateRef" } : {}), alias: 'dmaDropdownAnchor' });
+    positions = input(DEFAULT_DROPDOWN_POSITIONS, ...(ngDevMode ? [{ debugName: "positions" }] : []));
+    toggleOnHover = input(false, { ...(ngDevMode ? { debugName: "toggleOnHover" } : {}), transform: booleanAttribute });
+    dropdownToggle = output();
+    hideScheduler = new Subject();
+    overlayRef = null;
+    constructor() {
+        this.hideScheduler
+            .asObservable()
+            .pipe(debounceTime(100), filter(Boolean), takeUntilDestroyed())
+            .subscribe({
+            next: () => {
+                if (!this.toggleOnHover())
+                    return;
+                this.hide();
+            },
+        });
+    }
+    show() {
+        this.hideScheduler.next(false);
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(this.positions());
+        this.overlayRef = this.overlay.create({
+            positionStrategy: positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            disposeOnNavigation: true,
+            width: getComputedStyle(this.elementRef.nativeElement).width,
+        });
+        this.overlayRef.attach(new TemplatePortal(this.dropdownContainerTemplateRef(), this.viewContainerRef));
+        this.overlayRef
+            .detachments()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => this.hide(),
+        });
+        this.dropdownToggle.emit(true);
+    }
+    scheduleHide(shouldHide) {
+        this.hideScheduler.next(shouldHide);
+    }
+    onClick() {
+        if (this.toggleOnHover())
+            return;
+        this.toggle();
+    }
+    onMouseenter() {
+        if (!this.toggleOnHover())
+            return;
+        this.show();
+    }
+    onMouseleave() {
+        if (!this.toggleOnHover())
+            return;
+        this.hideScheduler.next(true);
+    }
+    toggle() {
+        if (this.overlayRef)
+            this.hide();
+        else
+            this.show();
+    }
+    hide() {
+        if (this.overlayRef === null)
+            return;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.dropdownToggle.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: DropdownAnchorDirective, isStandalone: true, selector: "[dmaDropdownAnchor]", inputs: { dropdownContainerTemplateRef: { classPropertyName: "dropdownContainerTemplateRef", publicName: "dmaDropdownAnchor", isSignal: true, isRequired: true, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, toggleOnHover: { classPropertyName: "toggleOnHover", publicName: "toggleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownToggle: "dropdownToggle" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" } }, exportAs: ["dmaDropdownAnchor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dmaDropdownAnchor]',
+                    exportAs: 'dmaDropdownAnchor',
+                    host: {
+                        '(click)': 'onClick()',
+                        '(mouseenter)': 'onMouseenter()',
+                        '(mouseleave)': 'onMouseleave()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { dropdownContainerTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dmaDropdownAnchor", required: true }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], toggleOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnHover", required: false }] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }] } });
+
+class DropdownContainerComponent {
+    hover = output();
+    onMouseenter() {
+        this.hover.emit(true);
+    }
+    onMouseleave() {
+        this.hover.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DropdownContainerComponent, isStandalone: true, selector: "dma-dropdown-container", outputs: { hover: "hover" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, classAttribute: "block w-full shadow-md border border-neutral-200 rounded-md bg-neutral-50 p-1" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dma-dropdown-container',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'class': 'block w-full shadow-md border border-neutral-200 rounded-md bg-neutral-50 p-1',
+                        '(mouseenter)': 'onMouseenter()',
+                        '(mouseleave)': 'onMouseleave()',
+                    },
+                }]
+        }], propDecorators: { hover: [{ type: i0.Output, args: ["hover"] }] } });
+
+function provideValueAccessor(component) {
+    return {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: component,
+        multi: true,
+    };
+}
+
+class InputComponent {
+    inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    inputSubject = new Subject();
+    ngOnTouched;
+    ngOnChange;
+    constructor() {
+        this.inputSubject
+            .asObservable()
+            .pipe(debounceTime(500), takeUntilDestroyed())
+            .subscribe({
+            next: (value) => this.onChange(value),
+        });
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.ngOnChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.ngOnTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    onInput(value) {
+        this.inputSubject.next(value);
+    }
+    onFocus() {
+        if (!this.ngOnTouched)
+            return;
+        this.ngOnTouched();
+    }
+    onChange(value) {
+        this.value.set(value);
+        if (this.ngOnChange) {
+            this.ngOnChange(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: InputComponent, isStandalone: true, selector: "dma-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { classAttribute: "group" }, providers: [provideValueAccessor(InputComponent)], ngImport: i0, template: "<label class=\"inline-block text-sm text-neutral-900 font-semibold mb-2\" [for]=\"inputId()\">{{ label() }}</label>\n<input\n    class=\"block w-full disabled:opacity-35 border text-neutral-900 group-[.ng-invalid.ng-touched]:text-red-500 border-neutral-300 not-disabled:not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:hover:border-neutral-500 disabled:bg-neutral-300 group-[.ng-invalid.ng-touched]:border-red-500 group-[.ng-valid.ng-touched]:border-green-500 rounded-xl py-2 px-4 not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:focus:outline-blue-400 read-only:outline-0 group-[.ng-invalid.ng-touched]:outline-red-500 group-[.ng-valid.ng-touched]:outline-green-500 disabled:cursor-default read-only:cursor-default\"\n    type=\"text\"\n    #input\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput(input.value)\"\n/>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'group',
+                    }, imports: [], providers: [provideValueAccessor(InputComponent)], template: "<label class=\"inline-block text-sm text-neutral-900 font-semibold mb-2\" [for]=\"inputId()\">{{ label() }}</label>\n<input\n    class=\"block w-full disabled:opacity-35 border text-neutral-900 group-[.ng-invalid.ng-touched]:text-red-500 border-neutral-300 not-disabled:not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:hover:border-neutral-500 disabled:bg-neutral-300 group-[.ng-invalid.ng-touched]:border-red-500 group-[.ng-valid.ng-touched]:border-green-500 rounded-xl py-2 px-4 not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:focus:outline-blue-400 read-only:outline-0 group-[.ng-invalid.ng-touched]:outline-red-500 group-[.ng-valid.ng-touched]:outline-green-500 disabled:cursor-default read-only:cursor-default\"\n    type=\"text\"\n    #input\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput(input.value)\"\n/>\n" }]
+        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
+
+class CircleUserIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CircleUserIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CircleUserIcon, isStandalone: true, selector: "dma-icon[dma-circle-user-icon]", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CircleUserIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-icon[dma-circle-user-icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n    <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n    <path\n        d=\"M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z\"\n    />\n</svg>\n", styles: [":host{display:inline-flex;place-items:center;width:1.5rem;height:1.5rem;flex:0 0}:host svg{display:block;height:100%;fill:currentcolor}\n"] }]
+        }] });
+
+class ActiveMarkerComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
+    inactive = computed(() => !this.active(), ...(ngDevMode ? [{ debugName: "inactive" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActiveMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ActiveMarkerComponent, isStandalone: true, selector: "dma-active-marker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.text-neutral-600": "inactive()", "class.font-normal": "inactive()", "class.font-semibold": "active()" }, classAttribute: "block" }, ngImport: i0, template: "<!--\n    Using an invisible element with the label set to the active state so that\n    the element already takes all the space it needs and doesn't shift other elements around when it becomes active\n-->\n<div class=\"grid grid-cols-1 grid-rows-1 place-items-center\">\n    <span class=\"font-bold invisible col-1 row-1\">{{ label() }}</span>\n    <span class=\"col-1 row-1\">{{ label() }}</span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActiveMarkerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-active-marker', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'block',
+                        '[class.text-neutral-600]': 'inactive()',
+                        '[class.font-normal]': 'inactive()',
+                        '[class.font-semibold]': 'active()',
+                    }, imports: [], template: "<!--\n    Using an invisible element with the label set to the active state so that\n    the element already takes all the space it needs and doesn't shift other elements around when it becomes active\n-->\n<div class=\"grid grid-cols-1 grid-rows-1 place-items-center\">\n    <span class=\"font-bold invisible col-1 row-1\">{{ label() }}</span>\n    <span class=\"col-1 row-1\">{{ label() }}</span>\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+
+const SectionPositions = {
+    START: 'start',
+    END: 'end',
+};
+const DEFAULT_SECTION_POSITION = SectionPositions.START;
+function sectionPositionAttribute(value) {
+    return Object.values(SectionPositions).find((position) => position === value) ?? DEFAULT_SECTION_POSITION;
+}
+
+class AppTopBarSectionComponent {
+    position = input(SectionPositions.START, { ...(ngDevMode ? { debugName: "position" } : {}), transform: sectionPositionAttribute });
+    positionedAtStart = computed(() => this.position() === SectionPositions.START, ...(ngDevMode ? [{ debugName: "positionedAtStart" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppTopBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: AppTopBarSectionComponent, isStandalone: true, selector: "dma-app-top-bar-section", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.grow-1": "positionedAtStart()" }, classAttribute: "flex items-center gap-3" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppTopBarSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dma-app-top-bar-section',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'class': 'flex items-center gap-3',
+                        '[class.grow-1]': 'positionedAtStart()',
                     },
                     imports: [],
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "dma-button", required: false }] }] } });
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+class AppTopBarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppTopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AppTopBarComponent, isStandalone: true, selector: "dma-app-top-bar", host: { classAttribute: "px-3 py-2 flex justify-between items-center border-b border-b-neutral-200 bg-neutral-100" }, ngImport: i0, template: `<ng-content select="dma-app-top-bar-section" />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AppTopBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dma-app-top-bar',
+                    template: `<ng-content select="dma-app-top-bar-section" />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'px-3 py-2 flex justify-between items-center border-b border-b-neutral-200 bg-neutral-100',
+                    },
+                    imports: [],
+                }]
+        }] });
+
+class NavbarBrandComponent {
+    imgSrc = input.required(...(ngDevMode ? [{ debugName: "imgSrc" }] : []));
+    brandName = input.required(...(ngDevMode ? [{ debugName: "brandName" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarBrandComponent, isStandalone: true, selector: "dma-navbar-brand", inputs: { imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: true, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a class=\"flex items-center gap-2\" routerLink=\"/\">\n    <img [src]=\"imgSrc()\" alt=\"Brand logo\" width=\"32\" height=\"32\" />\n    <span class=\"font-semibold text-2xl\">{{ brandName() }}</span>\n</a>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarBrandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-navbar-brand', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<a class=\"flex items-center gap-2\" routerLink=\"/\">\n    <img [src]=\"imgSrc()\" alt=\"Brand logo\" width=\"32\" height=\"32\" />\n    <span class=\"font-semibold text-2xl\">{{ brandName() }}</span>\n</a>\n" }]
+        }], propDecorators: { imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSrc", required: true }] }], brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: true }] }] } });
+
+class NavbarLinkComponent {
+    router = inject(Router);
+    destroyRef = inject(DestroyRef);
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    route = input.required(...(ngDevMode ? [{ debugName: "route" }] : []));
+    isActive;
+    ngOnInit() {
+        this.isActive = isActive(this.route(), this.router, {
+            paths: 'subset',
+            queryParams: 'subset',
+            fragment: 'ignored',
+            matrixParams: 'ignored',
+        });
+    }
+    onClick() {
+        from(this.router.navigateByUrl(this.route())).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarLinkComponent, isStandalone: true, selector: "dma-navbar-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, classAttribute: "block rounded-md p-2 hover:bg-neutral-200 hover:text-neutral-900 active:bg-neutral-300 cursor-pointer" }, ngImport: i0, template: "<a [routerLink]=\"route()\">\n    <dma-active-marker [label]=\"label()\" [active]=\"isActive()\" />\n</a>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ActiveMarkerComponent, selector: "dma-active-marker", inputs: ["label", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-navbar-link', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'block rounded-md p-2 hover:bg-neutral-200 hover:text-neutral-900 active:bg-neutral-300 cursor-pointer',
+                        '(click)': 'onClick()',
+                    }, imports: [RouterLink, ActiveMarkerComponent], template: "<a [routerLink]=\"route()\">\n    <dma-active-marker [label]=\"label()\" [active]=\"isActive()\" />\n</a>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: true }] }] } });
+
+class NavbarMenuComponent {
+    toggleOnHover = input(false, { ...(ngDevMode ? { debugName: "toggleOnHover" } : {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NavbarMenuComponent, isStandalone: true, selector: "dma-navbar-menu", inputs: { toggleOnHover: { classPropertyName: "toggleOnHover", publicName: "toggleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n    type=\"button\"\n    dma-button\n    #anchor=\"dmaDropdownAnchor\"\n    [toggleOnHover]=\"toggleOnHover()\"\n    [dmaDropdownAnchor]=\"dropdownContainer\"\n>\n    <ng-content select=\"dropdown-trigger\" />\n</button>\n\n<ng-template #dropdownContainer>\n    <dma-dropdown-container (hover)=\"anchor.scheduleHide(!$event)\">\n        <ng-content select=\"dropdown-menu\" />\n    </dma-dropdown-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[dma-button]", inputs: ["dma-button"] }, { kind: "directive", type: DropdownAnchorDirective, selector: "[dmaDropdownAnchor]", inputs: ["dmaDropdownAnchor", "positions", "toggleOnHover"], outputs: ["dropdownToggle"], exportAs: ["dmaDropdownAnchor"] }, { kind: "component", type: DropdownContainerComponent, selector: "dma-dropdown-container", outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dma-navbar-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, DropdownAnchorDirective, DropdownContainerComponent, ActiveMarkerComponent], template: "<button\n    type=\"button\"\n    dma-button\n    #anchor=\"dmaDropdownAnchor\"\n    [toggleOnHover]=\"toggleOnHover()\"\n    [dmaDropdownAnchor]=\"dropdownContainer\"\n>\n    <ng-content select=\"dropdown-trigger\" />\n</button>\n\n<ng-template #dropdownContainer>\n    <dma-dropdown-container (hover)=\"anchor.scheduleHide(!$event)\">\n        <ng-content select=\"dropdown-menu\" />\n    </dma-dropdown-container>\n</ng-template>\n" }]
+        }], propDecorators: { toggleOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnHover", required: false }] }] } });
+
+class NavbarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: NavbarComponent, isStandalone: true, selector: "nav[dma-navbar]", host: { classAttribute: "flex items-center gap-4" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'nav[dma-navbar]',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex items-center gap-4',
+                    },
+                    imports: [],
+                }]
+        }] });
+
+class VerticalRuleComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VerticalRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: VerticalRuleComponent, isStandalone: true, selector: "dma-vr", host: { classAttribute: "inline-block h-[stretch] border-s border-s-neutral-500" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VerticalRuleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dma-vr',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'inline-block h-[stretch] border-s border-s-neutral-500',
+                    },
+                    imports: [],
+                }]
+        }] });
 
 /**
  * Public API Surface of @dnd-mapp/shared-ui
@@ -46,5 +404,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonColors, ButtonComponent, DEFAULT_BUTTON_COLOR, buttonColorAttribute };
+export { ActiveMarkerComponent, AppTopBarComponent, AppTopBarSectionComponent, ButtonColors, ButtonComponent, CircleUserIcon, DEFAULT_BUTTON_COLOR, DEFAULT_DROPDOWN_POSITIONS, DEFAULT_SECTION_POSITION, DropdownAnchorDirective, DropdownContainerComponent, InputComponent, NavbarBrandComponent, NavbarComponent, NavbarLinkComponent, NavbarMenuComponent, SectionPositions, VerticalRuleComponent, buttonColorAttribute, sectionPositionAttribute };
 //# sourceMappingURL=dnd-mapp-shared-ui.mjs.map