@lumston/ds-angular 0.0.1 → 0.0.3

package/fesm2022/lumston-ds-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, HostListener, ViewChild, Input, TemplateRef, Directive, output, signal, effect, forwardRef, Renderer2, DestroyRef, ElementRef, model, viewChild, ViewEncapsulation, Injectable, contentChild, untracked } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, HostListener, ViewChild, Input, TemplateRef, Directive, ElementRef, output, signal, effect, forwardRef, Renderer2, DestroyRef, model, viewChild, ViewEncapsulation, untracked, Injectable, contentChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, DOCUMENT } from '@angular/common';
@@ -228,7 +228,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 
 class ButtonComponent {
     constructor() {
+        this._elementRef = inject((ElementRef));
         this.sanitizer = inject(DomSanitizer);
+        /** Host element of this component. Pass directly as `anchorEl` to overlay components like `ls-menu`. */
+        this.nativeElement = this._elementRef.nativeElement;
         this.variant = input('contained', ...(ngDevMode ? [{ debugName: "variant" }] : []));
         this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
@@ -2524,6 +2527,505 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--ls-border-radius-md, 6px);font-family:var(--ls-font-family, \"Nunito\", sans-serif);font-size:14px;line-height:1.5;position:relative;width:100%;box-sizing:border-box}.alert-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.alert-icon svg{width:100%;height:100%}.alert-content{flex:1;min-width:0}.alert-title{font-weight:600;margin-bottom:4px}.alert-message{padding-top:2px;font-weight:400}.alert-close{flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:inherit;opacity:.7;transition:opacity var(--ls-transition-duration, .3s);display:flex;align-items:center;justify-content:center}.alert-close:hover{opacity:1}.alert-default-success{background-color:var(--ls-color-success-light);border-left:4px solid var(--ls-color-success);color:var(--ls-color-success)}.alert-default-error{background-color:var(--ls-color-danger-light);border-left:4px solid var(--ls-color-danger);color:var(--ls-color-danger)}.alert-default-warning{background-color:var(--ls-color-warning-light);border-left:4px solid var(--ls-color-warning);color:var(--ls-color-warning)}.alert-default-info{background-color:var(--ls-color-info-light);border-left:4px solid var(--ls-color-info);color:var(--ls-color-info)}.alert-default-primary{background-color:var(--ls-color-primary-light);border-left:4px solid var(--ls-color-primary);color:var(--ls-color-primary)}.alert-default-secondary{background-color:var(--ls-color-secondary-light);border-left:4px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.alert-filled-success{background-color:var(--ls-color-success);color:#fff}.alert-filled-error{background-color:var(--ls-color-danger);color:#fff}.alert-filled-warning{background-color:var(--ls-color-warning);color:#fff}.alert-filled-info{background-color:var(--ls-color-info);color:#fff}.alert-filled-primary{background-color:var(--ls-color-primary);color:#fff}.alert-filled-secondary{background-color:var(--ls-color-secondary);color:#fff}.alert-outlined-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.alert-outlined-error{background-color:transparent;border:1px solid var(--ls-color-danger);color:var(--ls-color-danger)}.alert-outlined-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.alert-outlined-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.alert-outlined-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.alert-outlined-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.alert[style*=--alert-custom-color]{border-color:var(--alert-custom-color)}.alert-default-success[style*=--alert-custom-color],.alert-default-error[style*=--alert-custom-color],.alert-default-warning[style*=--alert-custom-color],.alert-default-info[style*=--alert-custom-color],.alert-default-primary[style*=--alert-custom-color],.alert-default-secondary[style*=--alert-custom-color]{border-left-color:var(--alert-custom-color);color:var(--alert-custom-color)}.alert-filled-success[style*=--alert-custom-color],.alert-filled-error[style*=--alert-custom-color],.alert-filled-warning[style*=--alert-custom-color],.alert-filled-info[style*=--alert-custom-color],.alert-filled-primary[style*=--alert-custom-color],.alert-filled-secondary[style*=--alert-custom-color]{background-color:var(--alert-custom-color)}.alert-outlined-success[style*=--alert-custom-color],.alert-outlined-error[style*=--alert-custom-color],.alert-outlined-warning[style*=--alert-custom-color],.alert-outlined-info[style*=--alert-custom-color],.alert-outlined-primary[style*=--alert-custom-color],.alert-outlined-secondary[style*=--alert-custom-color]{border-color:var(--alert-custom-color);color:var(--alert-custom-color)}body.dark .alert-default-success{background-color:var(--ls-color-success-dark-light);border-left-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .alert-default-error{background-color:var(--ls-color-danger-dark-light);border-left-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .alert-default-warning{background-color:var(--ls-color-warning-dark-light);border-left-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .alert-default-info{background-color:var(--ls-color-info-dark-light);border-left-color:var(--ls-color-info);color:var(--ls-color-info)}body.dark .alert-default-primary{background-color:var(--ls-color-primary-dark-light);border-left-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .alert-default-secondary{background-color:var(--ls-color-secondary-dark-light);border-left-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}body.dark .alert-outlined-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .alert-outlined-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .alert-outlined-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .alert-outlined-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}body.dark .alert-outlined-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .alert-outlined-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}\n"] }]
         }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconMapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMapping", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], alertTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertTitle", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
 
+/**
+ * Renders an anchored floating menu panel attached to a trigger element.
+ *
+ * Supports both **controlled** and **directive-driven** open modes:
+ * - **Controlled**: bind `[(open)]` and respond to `opened`/`closed` outputs.
+ * - **Directive-driven**: apply `lsMenuTriggerFor` to any host element;
+ *   the directive calls `setAnchorEl()` and `toggle()` automatically.
+ *
+ * Panel position is derived from the anchor element's bounding rect combined
+ * with `anchorOrigin` (attachment point on the trigger) and `transformOrigin`
+ * (attachment point on the panel). Position is recomputed each time the
+ * panel opens via a `setTimeout(0)` deferral to ensure the panel is measured.
+ *
+ * When `disablePortal` is `false` (default), the panel uses `position: fixed`
+ * for viewport-relative placement. When `true`, it uses `position: absolute`.
+ *
+ * Keyboard: `Escape` closes the panel; `ArrowDown`/`ArrowUp` move focus
+ * between enabled `[role="menuitem"]` elements inside the panel.
+ *
+ * @example
+ * ```html
+ * <!-- Controlled -->
+ * <ls-menu [(open)]="isOpen" [anchorEl]="triggerEl">
+ *   <ls-menu-item (itemClick)="onEdit()">Edit</ls-menu-item>
+ * </ls-menu>
+ *
+ * <!-- Directive-driven -->
+ * <button [lsMenuTriggerFor]="myMenu">Open</button>
+ * <ls-menu #myMenu>
+ *   <ls-menu-item>Delete</ls-menu-item>
+ * </ls-menu>
+ * ```
+ */
+class MenuComponent {
+    constructor() {
+        this._document = inject(DOCUMENT);
+        this._destroyRef = inject(DestroyRef);
+        /** Controls the visibility of the menu panel. Supports two-way binding. */
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        /**
+         * Element used to position the menu panel.
+         *
+         * Accepts a native DOM element, an `ElementRef`, or any Angular component
+         * that exposes a `nativeElement: HTMLElement` property (e.g. `ls-button`).
+         * In templates, pass a template reference variable directly:
+         * `[anchorEl]="btn"` where `#btn` is on any element or component.
+         *
+         * When using `lsMenuTriggerFor`, this is set automatically by the directive
+         * via `setAnchorEl()`. When using controlled mode, bind directly.
+         *
+         * @default null
+         */
+        this.anchorEl = input(null, ...(ngDevMode ? [{ debugName: "anchorEl" }] : []));
+        /**
+         * Defines the attachment point on the anchor element.
+         *
+         * Combined with `transformOrigin` to compute the panel's `top`/`left`
+         * position via `getBoundingClientRect()`.
+         *
+         * @default { vertical: 'bottom', horizontal: 'left' }
+         */
+        this.anchorOrigin = input({
+            vertical: 'bottom',
+            horizontal: 'left',
+        }, ...(ngDevMode ? [{ debugName: "anchorOrigin" }] : []));
+        /**
+         * Defines the attachment point on the menu panel surface.
+         *
+         * The panel is translated so this point aligns with `anchorOrigin`.
+         *
+         * @default { vertical: 'top', horizontal: 'left' }
+         */
+        this.transformOrigin = input({
+            vertical: 'top',
+            horizontal: 'left',
+        }, ...(ngDevMode ? [{ debugName: "transformOrigin" }] : []));
+        /**
+         * When `false` (default), the panel uses `position: fixed` for
+         * viewport-relative placement. When `true`, uses `position: absolute`
+         * and renders relative to the nearest positioned ancestor.
+         *
+         * @default false
+         */
+        this.disablePortal = input(false, ...(ngDevMode ? [{ debugName: "disablePortal" }] : []));
+        /**
+         * When `true`, the panel closes automatically after the user activates
+         * a `ls-menu-item` (i.e., a `[role="menuitem"]` element) inside it.
+         *
+         * @default true
+         */
+        this.closeOnClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnClick" }] : []));
+        /**
+         * Emits when the panel's opening animation completes.
+         * Does NOT emit when `open` is set programmatically without animation.
+         */
+        this.opened = output();
+        /**
+         * Emits when the panel's closing animation completes and the panel
+         * is fully hidden. In controlled mode, the host can use this to update
+         * state after the transition finishes.
+         */
+        this.closed = output();
+        /**
+         * Emits when the user clicks the transparent backdrop behind the panel.
+         * The menu closes automatically after this output emits.
+         */
+        this.backdropClick = output();
+        this._panelRef = viewChild('panelRef', ...(ngDevMode ? [{ debugName: "_panelRef" }] : []));
+        this._isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isAnimating" }] : []));
+        this._wasOpen = false;
+        this._previouslyFocused = null;
+        this._savedBodyOverflow = '';
+        this._savedBodyPaddingRight = '';
+        this._resolvedAnchorEl = signal(null, ...(ngDevMode ? [{ debugName: "_resolvedAnchorEl" }] : []));
+        this._repositionHandler = () => this._computeAndApplyPosition();
+        // Manages animation state, scroll lock, focus, and repositioning listeners
+        // when the panel opens or closes.
+        effect(() => {
+            const isOpen = this.open();
+            untracked(() => {
+                if (isOpen) {
+                    this._isAnimating.set(true);
+                    this._previouslyFocused = this._document.activeElement;
+                    this._savedBodyOverflow = this._document.body.style.overflow;
+                    this._savedBodyPaddingRight = this._document.body.style.paddingRight;
+                    const scrollbarWidth = this._getScrollbarWidth();
+                    if (scrollbarWidth > 0) {
+                        this._document.body.style.paddingRight = `${scrollbarWidth}px`;
+                    }
+                    this._document.body.style.overflow = 'hidden';
+                    setTimeout(() => this._panelRef()?.nativeElement.focus(), 0);
+                    window.addEventListener('resize', this._repositionHandler);
+                    window.addEventListener('scroll', this._repositionHandler, true);
+                    this._wasOpen = true;
+                }
+                else if (this._wasOpen) {
+                    this._isAnimating.set(true);
+                    window.removeEventListener('resize', this._repositionHandler);
+                    window.removeEventListener('scroll', this._repositionHandler, true);
+                    this._wasOpen = false;
+                }
+            });
+        });
+        // Computes and applies panel position whenever the panel enters the DOM
+        // or any positioning input changes. Using a separate effect (rather than
+        // setTimeout) guarantees that Angular has already updated the viewChild
+        // signal before this runs, so _panelRef() is always non-null here.
+        effect(() => {
+            const panel = this._panelRef()?.nativeElement;
+            if (!panel)
+                return;
+            this._computeAndApplyPosition();
+        });
+        this._destroyRef.onDestroy(() => {
+            window.removeEventListener('resize', this._repositionHandler);
+            window.removeEventListener('scroll', this._repositionHandler, true);
+            if (this._wasOpen) {
+                this._document.body.style.overflow = this._savedBodyOverflow;
+                this._document.body.style.paddingRight = this._savedBodyPaddingRight;
+                this._previouslyFocused?.focus?.();
+            }
+        });
+    }
+    /** Toggles the panel between open and closed. */
+    toggle() {
+        this.open.set(!this.open());
+    }
+    /**
+     * Sets the anchor element used for panel positioning.
+     * Called automatically by `MenuTriggerDirective`.
+     */
+    setAnchorEl(el) {
+        this._resolvedAnchorEl.set(el);
+    }
+    /** Closes the panel without waiting for a user interaction. */
+    requestClose() {
+        this.open.set(false);
+    }
+    onBackdropClick(event) {
+        this.backdropClick.emit(event);
+        this.open.set(false);
+    }
+    onPanelClick(event) {
+        if (!this.closeOnClick())
+            return;
+        const target = event.target;
+        if (target.closest('[role="menuitem"]') !== null) {
+            this.open.set(false);
+        }
+    }
+    onAnimationEnd() {
+        this._isAnimating.set(false);
+        if (this.open()) {
+            this.opened.emit();
+        }
+        else {
+            this._document.body.style.overflow = this._savedBodyOverflow;
+            this._document.body.style.paddingRight = this._savedBodyPaddingRight;
+            this.closed.emit();
+            this._previouslyFocused?.focus?.();
+            this._previouslyFocused = null;
+        }
+    }
+    onEscape() {
+        if (this.open()) {
+            this.open.set(false);
+        }
+    }
+    onArrowDown(event) {
+        if (!this.open())
+            return;
+        event.preventDefault();
+        this._moveFocus(1);
+    }
+    onArrowUp(event) {
+        if (!this.open())
+            return;
+        event.preventDefault();
+        this._moveFocus(-1);
+    }
+    _computeAndApplyPosition() {
+        const rawAnchor = this.anchorEl() ?? this._resolvedAnchorEl();
+        const panel = this._panelRef()?.nativeElement;
+        if (!rawAnchor || !panel)
+            return;
+        const anchorEl = this._toHTMLElement(rawAnchor);
+        if (!anchorEl)
+            return;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const panelRect = panel.getBoundingClientRect();
+        const ao = this.anchorOrigin();
+        const to = this.transformOrigin();
+        const anchorX = anchorRect.left +
+            (ao.horizontal === 'center'
+                ? anchorRect.width / 2
+                : ao.horizontal === 'right'
+                    ? anchorRect.width
+                    : 0);
+        const anchorY = anchorRect.top +
+            (ao.vertical === 'center'
+                ? anchorRect.height / 2
+                : ao.vertical === 'bottom'
+                    ? anchorRect.height
+                    : 0);
+        const transformX = to.horizontal === 'center'
+            ? panelRect.width / 2
+            : to.horizontal === 'right'
+                ? panelRect.width
+                : 0;
+        const transformY = to.vertical === 'center'
+            ? panelRect.height / 2
+            : to.vertical === 'bottom'
+                ? panelRect.height
+                : 0;
+        panel.style.setProperty('--menu-top', `${anchorY - transformY}px`);
+        panel.style.setProperty('--menu-left', `${anchorX - transformX}px`);
+    }
+    /**
+     * Resolves any supported anchor value to a plain `HTMLElement`.
+     *
+     * Handles: `HTMLElement`, `ElementRef<HTMLElement>`, and objects that expose
+     * a `nativeElement: HTMLElement` property (e.g. `ls-button` component refs).
+     */
+    _toHTMLElement(anchor) {
+        if (!anchor)
+            return null;
+        if (anchor instanceof HTMLElement)
+            return anchor;
+        if (typeof anchor === 'object' &&
+            anchor !== null &&
+            'nativeElement' in anchor) {
+            const el = anchor.nativeElement;
+            return el instanceof HTMLElement ? el : null;
+        }
+        return null;
+    }
+    _moveFocus(direction) {
+        const panel = this._panelRef()?.nativeElement;
+        if (!panel)
+            return;
+        const items = Array.from(panel.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(this._document.activeElement);
+        const nextIndex = currentIndex === -1
+            ? direction === 1
+                ? 0
+                : items.length - 1
+            : (currentIndex + direction + items.length) % items.length;
+        items[nextIndex]?.focus();
+    }
+    _getScrollbarWidth() {
+        return window.innerWidth - this._document.documentElement.clientWidth;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MenuComponent, isStandalone: true, selector: "ls-menu", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: false, transformFunction: null }, anchorOrigin: { classPropertyName: "anchorOrigin", publicName: "anchorOrigin", isSignal: true, isRequired: false, transformFunction: null }, transformOrigin: { classPropertyName: "transformOrigin", publicName: "transformOrigin", isSignal: true, isRequired: false, transformFunction: null }, disablePortal: { classPropertyName: "disablePortal", publicName: "disablePortal", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed", backdropClick: "backdropClick" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:keydown.arrowdown": "onArrowDown($event)", "document:keydown.arrowup": "onArrowUp($event)" } }, viewQueries: [{ propertyName: "_panelRef", first: true, predicate: ["panelRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (open() || _isAnimating()) {
+      <div class="menu-backdrop" (click)="onBackdropClick($event)"></div>
+      <div
+        #panelRef
+        class="menu-panel"
+        [class.menu-panel-inline]="disablePortal()"
+        [class.menu-enter]="open() && _isAnimating()"
+        [class.menu-leave]="!open() && _isAnimating()"
+        role="menu"
+        tabindex="-1"
+        (click)="onPanelClick($event)"
+        (animationend)="onAnimationEnd()">
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.menu-backdrop{position:fixed;inset:0;z-index:var(--ls-menu-z-index);background-color:transparent}.menu-panel{position:fixed;top:var(--menu-top, 0px);left:var(--menu-left, 0px);z-index:calc(var(--ls-menu-z-index) + 1);min-width:10rem;padding:.25rem 0;background-color:#fff;border-radius:var(--ls-border-radius-md);box-shadow:0 4px 24px #0000001f;outline:none}.menu-panel.menu-panel-inline{position:absolute}@keyframes menu-enter-kf{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-leave-kf{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-4px)}}.menu-panel.menu-enter{animation:menu-enter-kf .15s ease-out forwards}.menu-panel.menu-leave{animation:menu-leave-kf .1s ease-in forwards}.menu-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;background:none;border:none;text-align:left;font-family:var(--ls-font-family);font-size:.875rem;color:#3b3f5c;cursor:pointer;transition:background-color var(--ls-transition-duration) ease}.menu-item:hover:not(:disabled){background-color:#f1f2f3}.menu-item:focus-visible{outline:2px solid var(--ls-color-primary);outline-offset:-2px;background-color:#f1f2f3}.menu-item-dense{padding-top:.25rem;padding-bottom:.25rem}.menu-item-no-gutters{padding-inline:0}.menu-item-divider{border-bottom:1px solid #e0e6ed}.menu-item-disabled{color:#888ea8;pointer-events:none;cursor:not-allowed}body.dark .menu-panel{background-color:#1b2e4b;box-shadow:0 4px 24px #0006}body.dark .menu-item{color:#e0e6ed}body.dark .menu-item:hover:not(:disabled){background-color:#253b5e}body.dark .menu-item:focus-visible{background-color:#253b5e}body.dark .menu-item-divider{border-bottom-color:#253b5e}body.dark .menu-item-disabled{color:#506690}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-menu', standalone: true, template: `
+    @if (open() || _isAnimating()) {
+      <div class="menu-backdrop" (click)="onBackdropClick($event)"></div>
+      <div
+        #panelRef
+        class="menu-panel"
+        [class.menu-panel-inline]="disablePortal()"
+        [class.menu-enter]="open() && _isAnimating()"
+        [class.menu-leave]="!open() && _isAnimating()"
+        role="menu"
+        tabindex="-1"
+        (click)="onPanelClick($event)"
+        (animationend)="onAnimationEnd()">
+        <ng-content />
+      </div>
+    }
+  `, styles: [":host{display:contents}.menu-backdrop{position:fixed;inset:0;z-index:var(--ls-menu-z-index);background-color:transparent}.menu-panel{position:fixed;top:var(--menu-top, 0px);left:var(--menu-left, 0px);z-index:calc(var(--ls-menu-z-index) + 1);min-width:10rem;padding:.25rem 0;background-color:#fff;border-radius:var(--ls-border-radius-md);box-shadow:0 4px 24px #0000001f;outline:none}.menu-panel.menu-panel-inline{position:absolute}@keyframes menu-enter-kf{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-leave-kf{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-4px)}}.menu-panel.menu-enter{animation:menu-enter-kf .15s ease-out forwards}.menu-panel.menu-leave{animation:menu-leave-kf .1s ease-in forwards}.menu-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;background:none;border:none;text-align:left;font-family:var(--ls-font-family);font-size:.875rem;color:#3b3f5c;cursor:pointer;transition:background-color var(--ls-transition-duration) ease}.menu-item:hover:not(:disabled){background-color:#f1f2f3}.menu-item:focus-visible{outline:2px solid var(--ls-color-primary);outline-offset:-2px;background-color:#f1f2f3}.menu-item-dense{padding-top:.25rem;padding-bottom:.25rem}.menu-item-no-gutters{padding-inline:0}.menu-item-divider{border-bottom:1px solid #e0e6ed}.menu-item-disabled{color:#888ea8;pointer-events:none;cursor:not-allowed}body.dark .menu-panel{background-color:#1b2e4b;box-shadow:0 4px 24px #0006}body.dark .menu-item{color:#e0e6ed}body.dark .menu-item:hover:not(:disabled){background-color:#253b5e}body.dark .menu-item:focus-visible{background-color:#253b5e}body.dark .menu-item-divider{border-bottom-color:#253b5e}body.dark .menu-item-disabled{color:#506690}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: false }] }], anchorOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorOrigin", required: false }] }], transformOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformOrigin", required: false }] }], disablePortal: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePortal", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], backdropClick: [{ type: i0.Output, args: ["backdropClick"] }], _panelRef: [{ type: i0.ViewChild, args: ['panelRef', { isSignal: true }] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onArrowDown: [{
+                type: HostListener,
+                args: ['document:keydown.arrowdown', ['$event']]
+            }], onArrowUp: [{
+                type: HostListener,
+                args: ['document:keydown.arrowup', ['$event']]
+            }] } });
+
+/**
+ * Interactive item rendered inside an `ls-menu` panel.
+ *
+ * Renders a `<button role="menuitem">` that projects its label via
+ * `<ng-content>`. Visual density, gutters, and a bottom divider are
+ * configurable via inputs. When `disabled` is `true`, the item is not
+ * interactive and the `itemClick` output will not emit.
+ *
+ * @example
+ * ```html
+ * <ls-menu-item [dense]="true" (itemClick)="onEdit($event)">
+ *   Edit
+ * </ls-menu-item>
+ * ```
+ */
+class MenuItemComponent {
+    constructor() {
+        /**
+         * Reduces the vertical padding of the item for compact layouts.
+         *
+         * @default false
+         */
+        this.dense = input(false, ...(ngDevMode ? [{ debugName: "dense" }] : []));
+        /**
+         * Removes left and right padding when `true`.
+         *
+         * @default false
+         */
+        this.disableGutters = input(false, ...(ngDevMode ? [{ debugName: "disableGutters" }] : []));
+        /**
+         * Adds a 1px border at the bottom of the item to act as a visual divider.
+         *
+         * @default false
+         */
+        this.divider = input(false, ...(ngDevMode ? [{ debugName: "divider" }] : []));
+        /**
+         * Prevents interaction. Applies disabled styling, sets `aria-disabled="true"`,
+         * and suppresses the `itemClick` output.
+         *
+         * @default false
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * Emits the originating `MouseEvent` when the user activates the item.
+         * Does NOT emit when `disabled` is `true`.
+         */
+        this.itemClick = output();
+        this._itemClasses = computed(() => {
+            const classes = ['menu-item'];
+            if (this.dense())
+                classes.push('menu-item-dense');
+            if (this.disableGutters())
+                classes.push('menu-item-no-gutters');
+            if (this.divider())
+                classes.push('menu-item-divider');
+            if (this.disabled())
+                classes.push('menu-item-disabled');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "_itemClasses" }] : []));
+    }
+    handleClick(event) {
+        if (this.disabled())
+            return;
+        this.itemClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: MenuItemComponent, isStandalone: true, selector: "ls-menu-item", inputs: { dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, disableGutters: { classPropertyName: "disableGutters", publicName: "disableGutters", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [class]="_itemClasses()"
+      [disabled]="disabled()"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      role="menuitem"
+      (click)="handleClick($event)">
+      <ng-content />
+    </button>
+  `, isInline: true, styles: [":host{display:contents}.menu-backdrop{position:fixed;inset:0;z-index:var(--ls-menu-z-index);background-color:transparent}.menu-panel{position:fixed;top:var(--menu-top, 0px);left:var(--menu-left, 0px);z-index:calc(var(--ls-menu-z-index) + 1);min-width:10rem;padding:.25rem 0;background-color:#fff;border-radius:var(--ls-border-radius-md);box-shadow:0 4px 24px #0000001f;outline:none}.menu-panel.menu-panel-inline{position:absolute}@keyframes menu-enter-kf{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-leave-kf{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-4px)}}.menu-panel.menu-enter{animation:menu-enter-kf .15s ease-out forwards}.menu-panel.menu-leave{animation:menu-leave-kf .1s ease-in forwards}.menu-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;background:none;border:none;text-align:left;font-family:var(--ls-font-family);font-size:.875rem;color:#3b3f5c;cursor:pointer;transition:background-color var(--ls-transition-duration) ease}.menu-item:hover:not(:disabled){background-color:#f1f2f3}.menu-item:focus-visible{outline:2px solid var(--ls-color-primary);outline-offset:-2px;background-color:#f1f2f3}.menu-item-dense{padding-top:.25rem;padding-bottom:.25rem}.menu-item-no-gutters{padding-inline:0}.menu-item-divider{border-bottom:1px solid #e0e6ed}.menu-item-disabled{color:#888ea8;pointer-events:none;cursor:not-allowed}body.dark .menu-panel{background-color:#1b2e4b;box-shadow:0 4px 24px #0006}body.dark .menu-item{color:#e0e6ed}body.dark .menu-item:hover:not(:disabled){background-color:#253b5e}body.dark .menu-item:focus-visible{background-color:#253b5e}body.dark .menu-item-divider{border-bottom-color:#253b5e}body.dark .menu-item-disabled{color:#506690}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-menu-item', standalone: true, template: `
+    <button
+      type="button"
+      [class]="_itemClasses()"
+      [disabled]="disabled()"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      role="menuitem"
+      (click)="handleClick($event)">
+      <ng-content />
+    </button>
+  `, styles: [":host{display:contents}.menu-backdrop{position:fixed;inset:0;z-index:var(--ls-menu-z-index);background-color:transparent}.menu-panel{position:fixed;top:var(--menu-top, 0px);left:var(--menu-left, 0px);z-index:calc(var(--ls-menu-z-index) + 1);min-width:10rem;padding:.25rem 0;background-color:#fff;border-radius:var(--ls-border-radius-md);box-shadow:0 4px 24px #0000001f;outline:none}.menu-panel.menu-panel-inline{position:absolute}@keyframes menu-enter-kf{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-leave-kf{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-4px)}}.menu-panel.menu-enter{animation:menu-enter-kf .15s ease-out forwards}.menu-panel.menu-leave{animation:menu-leave-kf .1s ease-in forwards}.menu-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;background:none;border:none;text-align:left;font-family:var(--ls-font-family);font-size:.875rem;color:#3b3f5c;cursor:pointer;transition:background-color var(--ls-transition-duration) ease}.menu-item:hover:not(:disabled){background-color:#f1f2f3}.menu-item:focus-visible{outline:2px solid var(--ls-color-primary);outline-offset:-2px;background-color:#f1f2f3}.menu-item-dense{padding-top:.25rem;padding-bottom:.25rem}.menu-item-no-gutters{padding-inline:0}.menu-item-divider{border-bottom:1px solid #e0e6ed}.menu-item-disabled{color:#888ea8;pointer-events:none;cursor:not-allowed}body.dark .menu-panel{background-color:#1b2e4b;box-shadow:0 4px 24px #0006}body.dark .menu-item{color:#e0e6ed}body.dark .menu-item:hover:not(:disabled){background-color:#253b5e}body.dark .menu-item:focus-visible{background-color:#253b5e}body.dark .menu-item-divider{border-bottom-color:#253b5e}body.dark .menu-item-disabled{color:#506690}\n"] }]
+        }], propDecorators: { dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], disableGutters: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableGutters", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * Connects any host element to a `MenuComponent` instance, enabling
+ * click-to-toggle behavior without manual open-state management.
+ *
+ * Sets `anchorEl` on the linked `MenuComponent` to the host element
+ * before toggling visibility, so the panel is correctly positioned
+ * relative to the trigger. Also applies `aria-haspopup="menu"` to the
+ * host for accessibility.
+ *
+ * @example
+ * ```html
+ * <button type="button" [lsMenuTriggerFor]="myMenu">Options</button>
+ * <ls-menu #myMenu>
+ *   <ls-menu-item>Delete</ls-menu-item>
+ * </ls-menu>
+ * ```
+ */
+class MenuTriggerDirective {
+    constructor() {
+        /**
+         * The `MenuComponent` instance this directive controls.
+         * Assign a template reference variable of `ls-menu`.
+         */
+        this.lsMenuTriggerFor = input.required(...(ngDevMode ? [{ debugName: "lsMenuTriggerFor" }] : []));
+        this._elementRef = inject((ElementRef));
+    }
+    onClick() {
+        const menu = this.lsMenuTriggerFor();
+        menu.setAnchorEl(this._resolveAnchorElement());
+        menu.toggle();
+    }
+    /**
+     * Resolves the first ancestor element that has a real layout box.
+     *
+     * Angular component hosts commonly use `:host { display: contents }`,
+     * which means the element itself has no bounding box and
+     * `getBoundingClientRect()` returns all zeros. This method walks down
+     * through `display: contents` wrappers until it reaches the first child
+     * that participates in layout, so the menu panel is positioned relative
+     * to the visible trigger element rather than a phantom box.
+     */
+    _resolveAnchorElement() {
+        let el = this._elementRef.nativeElement;
+        while (el.firstElementChild && getComputedStyle(el).display === 'contents') {
+            el = el.firstElementChild;
+        }
+        return el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: MenuTriggerDirective, isStandalone: true, selector: "[lsMenuTriggerFor]", inputs: { lsMenuTriggerFor: { classPropertyName: "lsMenuTriggerFor", publicName: "lsMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: { 'aria-haspopup': 'menu' },
+                    selector: '[lsMenuTriggerFor]',
+                    standalone: true,
+                }]
+        }], propDecorators: { lsMenuTriggerFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "lsMenuTriggerFor", required: true }] }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class ModalActionsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ModalActionsComponent, isStandalone: true, selector: "ls-modal-actions", host: { classAttribute: "modal-actions" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2980,20 +3482,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:contents}.popover-panel{position:fixed;top:var(--popover-top, 0);left:var(--popover-left, 0);z-index:1050;background:var(--ls-color-white, #fff);border:1px solid var(--ls-color-border, #e0e6ed);border-radius:8px;box-shadow:0 4px 16px #0000001f;padding:12px 16px;animation-duration:.15s;animation-fill-mode:both;animation-timing-function:ease-out}.popover-enter{animation-name:popoverFadeIn}.popover-exit{animation-name:popoverFadeOut}@keyframes popoverFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes popoverFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}.popover-arrow{position:absolute;width:10px;height:10px;background:inherit;border:inherit;transform:rotate(45deg);z-index:-1}.popover-arrow-top{bottom:-6px;left:50%;margin-left:-5px;border-top:0;border-left:0}.popover-arrow-bottom{top:-6px;left:50%;margin-left:-5px;border-bottom:0;border-right:0}.popover-arrow-left{right:-6px;top:50%;margin-top:-5px;border-bottom:0;border-left:0}.popover-arrow-right{left:-6px;top:50%;margin-top:-5px;border-top:0;border-right:0}:host-context(body.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important;box-shadow:0 4px 16px #00000080!important}:host-context(.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], autoFlip: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFlip", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onHidden: [{ type: i0.Output, args: ["onHidden"] }], _panelRef: [{ type: i0.ViewChild, args: ['panelRef', { isSignal: true }] }] } });
 
+/**
+ * Renders an accessible pagination bar for navigating a paged data set.
+ *
+ * Supports both **controlled** and **uncontrolled** modes:
+ * - **Controlled**: provide the `page` input and update it in response to
+ *   the `pageChange` output. The component reflects the external value.
+ * - **Uncontrolled**: omit `page`. The component manages its own active
+ *   page via an internal signal, initialized from `defaultPage`.
+ *
+ * When the total page count exceeds 5, a 5-item sliding window is rendered
+ * centered on the active page. Navigation buttons are rendered inside a
+ * `<nav aria-label="pagination">` landmark. Each button receives
+ * `aria-current="page"` (active) or `aria-disabled="true"` (boundary/disabled)
+ * as appropriate.
+ *
+ * @example
+ * ```html
+ * <!-- Uncontrolled -->
+ * <ls-pagination [count]="20" (pageChange)="onPage($event)" />
+ *
+ * <!-- Controlled -->
+ * <ls-pagination
+ *   [count]="20"
+ *   [page]="currentPage"
+ *   (pageChange)="currentPage = $event" />
+ * ```
+ */
 class PaginationComponent {
     constructor() {
+        /**
+         * Total number of pages in the data set.
+         *
+         * Must be a positive integer ≥ 1. Determines both the upper boundary for
+         * navigation and the page window calculation.
+         *
+         * @default 1
+         */
         this.count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : []));
+        /**
+         * Active page index in controlled mode (1-based).
+         *
+         * When provided, the component reflects this value and does not maintain
+         * internal page state. The host is responsible for updating this input in
+         * response to `pageChange` emissions. Pass `undefined` to switch to
+         * uncontrolled mode.
+         *
+         * @default undefined
+         */
         this.page = input(undefined, ...(ngDevMode ? [{ debugName: "page" }] : []));
+        /**
+         * Initial active page used in uncontrolled mode (1-based).
+         *
+         * Consumed once on `ngOnInit`. Has no effect when `page` is provided.
+         *
+         * @default 1
+         */
         this.defaultPage = input(1, ...(ngDevMode ? [{ debugName: "defaultPage" }] : []));
+        /**
+         * Color token applied to the active page item and button hover states.
+         *
+         * @default 'primary'
+         */
         this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        /**
+         * Visual rendering style of page number items and navigation buttons.
+         *
+         * @default 'outlined'
+         */
         this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        /**
+         * Border-radius style applied uniformly to all buttons in the bar.
+         *
+         * @default 'rounded'
+         */
         this.shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+        /**
+         * Physical dimensions (height, font size, padding) of all buttons.
+         *
+         * @default 'medium'
+         */
         this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        /**
+         * Disables all buttons in the pagination bar.
+         *
+         * When `true`, every button receives `disabled` and
+         * `aria-disabled="true"`. The `pageChange` output will not emit.
+         *
+         * @default false
+         */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * Renders a "go to first page" button before the previous-page button.
+         *
+         * The button is automatically disabled and receives `aria-disabled="true"`
+         * when the active page is already the first page.
+         *
+         * @default false
+         */
         this.showFirstButton = input(false, ...(ngDevMode ? [{ debugName: "showFirstButton" }] : []));
+        /**
+         * Renders a "go to last page" button after the next-page button.
+         *
+         * The button is automatically disabled and receives `aria-disabled="true"`
+         * when the active page is already the last page.
+         *
+         * @default false
+         */
         this.showLastButton = input(false, ...(ngDevMode ? [{ debugName: "showLastButton" }] : []));
+        /**
+         * Hides the previous-page navigation button.
+         *
+         * @default false
+         */
         this.hidePrevButton = input(false, ...(ngDevMode ? [{ debugName: "hidePrevButton" }] : []));
+        /**
+         * Hides the next-page navigation button.
+         *
+         * @default false
+         */
         this.hideNextButton = input(false, ...(ngDevMode ? [{ debugName: "hideNextButton" }] : []));
+        /**
+         * Emits the target page number (1-based) when the user activates any
+         * page item or navigation button.
+         *
+         * Does NOT emit when `disabled` is `true` or when the user clicks a
+         * boundary button that is already at its limit (first/last page).
+         * In controlled mode, the host must update the `page` input in response
+         * to this event to reflect the navigation in the UI.
+         */
         this.pageChange = output();
         this._internalPage = signal(1, ...(ngDevMode ? [{ debugName: "_internalPage" }] : []));
         this.activePage = computed(() => this.page() ?? this._internalPage(), ...(ngDevMode ? [{ debugName: "activePage" }] : []));
@@ -3209,11 +3826,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:contents}.pg-icon-left{transform:rotate(90deg)}.pg-icon-right{transform:rotate(-90deg)}.pg-list{display:inline-flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.pg-item{display:inline-flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;transition:all var(--ls-transition-duration) ease;border:2px solid transparent;background:none;outline:none;font-family:var(--ls-font-family);line-height:1;-webkit-user-select:none;user-select:none}.pg-item-sm{padding:.375rem .625rem;font-size:.75rem;min-width:1.75rem;height:1.75rem}.pg-item-md{padding:.5rem .875rem;font-size:.875rem;min-width:2.25rem;height:2.25rem}.pg-item-lg{padding:.625rem 1.25rem;font-size:1rem;min-width:2.75rem;height:2.75rem}.pg-item-rounded{border-radius:var(--ls-border-radius-md)}.pg-item-circular{border-radius:var(--ls-border-radius-full);padding-inline:0}.pg-item-circular.pg-item-sm{width:1.75rem}.pg-item-circular.pg-item-md{width:2.25rem}.pg-item-circular.pg-item-lg{width:2.75rem}.pg-item-disabled,.pg-item[disabled]{cursor:not-allowed;opacity:.6}.pg-item-solid-primary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-primary:not([disabled]):hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-secondary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-secondary:not([disabled]):hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-default{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-default:not([disabled]):hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-outlined-primary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-primary:not([disabled]):hover{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-secondary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-secondary:not([disabled]):hover{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-default{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-default:not([disabled]):hover{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-text-primary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-primary:not([disabled]):hover{background-color:#4361ee1a;color:var(--ls-color-primary)}.pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}.pg-item-text-secondary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-secondary:not([disabled]):hover{background-color:#805dca1a;color:var(--ls-color-secondary)}.pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}.pg-item-text-default{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-default:not([disabled]):hover{background-color:#3b3f5c1a;color:var(--ls-color-dark)}.pg-item-text-default.pg-item-active{color:var(--ls-color-dark)}body.dark .pg-item-solid-primary,body.dark .pg-item-solid-secondary,body.dark .pg-item-solid-default{background-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-solid-primary:not([disabled]):hover,body.dark .pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-secondary:not([disabled]):hover,body.dark .pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-default:not([disabled]):hover,body.dark .pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary,body.dark .pg-item-outlined-secondary,body.dark .pg-item-outlined-default{border-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary:not([disabled]):hover,body.dark .pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-secondary:not([disabled]):hover,body.dark .pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-default:not([disabled]):hover,body.dark .pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-text-primary,body.dark .pg-item-text-secondary,body.dark .pg-item-text-default{color:var(--ls-color-white-dark)}body.dark .pg-item-text-primary:not([disabled]):hover,body.dark .pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}body.dark .pg-item-text-secondary:not([disabled]):hover,body.dark .pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}body.dark .pg-item-text-default:not([disabled]):hover,body.dark .pg-item-text-default.pg-item-active{color:var(--ls-color-white-light)}\n"] }]
         }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], defaultPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPage", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showFirstButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstButton", required: false }] }], showLastButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastButton", required: false }] }], hidePrevButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePrevButton", required: false }] }], hideNextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNextButton", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
+class BreadcrumbComponent {
+    constructor() {
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : []));
+        this.color = input('gray', ...(ngDevMode ? [{ debugName: "color" }] : [])); // El nuevo input de color
+        // Lógica para el color dinámico
+        this._colorStyle = computed(() => {
+            const c = this.color();
+            const value = c === 'primary' ? 'var(--ls-color-primary)' :
+                c === 'secondary' ? 'var(--ls-color-secondary)' : c;
+            return { '--ls-breadcrumb-main-color': value };
+        }, ...(ngDevMode ? [{ debugName: "_colorStyle" }] : []));
+        this._classes = computed(() => {
+            return `ls-breadcrumb ls-breadcrumb--${this.variant()}`;
+        }, ...(ngDevMode ? [{ debugName: "_classes" }] : []));
+        this._isTemplateSeparator = computed(() => {
+            return this.separator() instanceof TemplateRef;
+        }, ...(ngDevMode ? [{ debugName: "_isTemplateSeparator" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: BreadcrumbComponent, isStandalone: true, selector: "ls-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav aria-label="Breadcrumb" [style]="_colorStyle()">
+      <ol [class]="_classes()">
+        @for (item of items(); track item.label; let isLast = $last) {
+          <li class="ls-breadcrumb-item" [class.ls-breadcrumb-item--active]="isLast">
+
+            @if (item.icon) {
+              <ls-icon
+                [name]="$any(item.icon)"
+                iconClass="ls-breadcrumb-icon" />
+            }
+
+            @if (isLast) {
+              <span aria-current="page">{{ item.label }}</span>
+            } @else if (item.url) {
+              <a [href]="item.url">{{ item.label }}</a>
+            } @else {
+              <span>{{ item.label }}</span>
+            }
+          </li>
+
+          @if (!isLast && variant() !== 'arrowed') {
+            <li class="ls-breadcrumb-separator" aria-hidden="true">
+              @if (_isTemplateSeparator()) {
+                <ng-container *ngTemplateOutlet="$any(separator())" />
+              } @else {
+                {{ separator() }}
+              }
+            </li>
+          }
+        }
+      </ol>
+    </nav>
+  `, isInline: true, styles: [":host{display:block;--ls-breadcrumb-main-color: #4361ee}.ls-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--ls-font-family, sans-serif);font-size:.875rem}.ls-breadcrumb-item{display:inline-flex;align-items:center;gap:.5rem;color:#6c757d}.ls-breadcrumb-item a{color:inherit;text-decoration:none!important;transition:color .2s;border:none}.ls-breadcrumb-item a:hover{text-decoration:none!important;color:var(--ls-breadcrumb-main-color)}.ls-breadcrumb-icon{width:1.15rem;height:1.15rem;display:flex;align-items:center;justify-content:center;color:currentColor}.ls-breadcrumb-icon svg{width:100%;height:100%;display:block}.ls-breadcrumb-separator{margin:0 .5rem;color:#888ea8;-webkit-user-select:none;user-select:none}.ls-breadcrumb--default .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--dotted .ls-breadcrumb-separator{font-size:0;display:flex;align-items:center}.ls-breadcrumb--dotted .ls-breadcrumb-separator:before{content:\"\";width:6px;height:6px;background:var(--ls-breadcrumb-main-color);border-radius:50%;display:inline-block}.ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--arrowed{gap:0}.ls-breadcrumb--arrowed .ls-breadcrumb-item{position:relative;background:#e9ecef;padding:.5rem 1rem .5rem 1.5rem;margin-left:-10px;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,12px 50%,0% 0%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.08));color:#515365}.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child{margin-left:0;padding-left:.75rem;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,0% 0%);border-radius:4px 0 0 4px}.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child{padding-right:1.25rem;clip-path:polygon(100% 0%,100% 100%,0% 100%,12px 50%,0% 0%);border-radius:0 4px 4px 0}.ls-breadcrumb--arrowed .ls-breadcrumb-item--active{background:var(--ls-breadcrumb-main-color)!important;color:#fff!important;z-index:10!important}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1){z-index:5}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2){z-index:4}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3){z-index:3}body.dark .ls-breadcrumb-item{color:#bfc9d4}body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#fff!important}body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active){background:#1b2e4b!important;color:#e0e6ed!important}body.dark .ls-breadcrumb-separator{color:#3b3f5c}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ls-icon", inputs: ["name", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, IconComponent], selector: 'ls-breadcrumb', standalone: true, template: `
+    <nav aria-label="Breadcrumb" [style]="_colorStyle()">
+      <ol [class]="_classes()">
+        @for (item of items(); track item.label; let isLast = $last) {
+          <li class="ls-breadcrumb-item" [class.ls-breadcrumb-item--active]="isLast">
+
+            @if (item.icon) {
+              <ls-icon
+                [name]="$any(item.icon)"
+                iconClass="ls-breadcrumb-icon" />
+            }
+
+            @if (isLast) {
+              <span aria-current="page">{{ item.label }}</span>
+            } @else if (item.url) {
+              <a [href]="item.url">{{ item.label }}</a>
+            } @else {
+              <span>{{ item.label }}</span>
+            }
+          </li>
+
+          @if (!isLast && variant() !== 'arrowed') {
+            <li class="ls-breadcrumb-separator" aria-hidden="true">
+              @if (_isTemplateSeparator()) {
+                <ng-container *ngTemplateOutlet="$any(separator())" />
+              } @else {
+                {{ separator() }}
+              }
+            </li>
+          }
+        }
+      </ol>
+    </nav>
+  `, styles: [":host{display:block;--ls-breadcrumb-main-color: #4361ee}.ls-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--ls-font-family, sans-serif);font-size:.875rem}.ls-breadcrumb-item{display:inline-flex;align-items:center;gap:.5rem;color:#6c757d}.ls-breadcrumb-item a{color:inherit;text-decoration:none!important;transition:color .2s;border:none}.ls-breadcrumb-item a:hover{text-decoration:none!important;color:var(--ls-breadcrumb-main-color)}.ls-breadcrumb-icon{width:1.15rem;height:1.15rem;display:flex;align-items:center;justify-content:center;color:currentColor}.ls-breadcrumb-icon svg{width:100%;height:100%;display:block}.ls-breadcrumb-separator{margin:0 .5rem;color:#888ea8;-webkit-user-select:none;user-select:none}.ls-breadcrumb--default .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--dotted .ls-breadcrumb-separator{font-size:0;display:flex;align-items:center}.ls-breadcrumb--dotted .ls-breadcrumb-separator:before{content:\"\";width:6px;height:6px;background:var(--ls-breadcrumb-main-color);border-radius:50%;display:inline-block}.ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--arrowed{gap:0}.ls-breadcrumb--arrowed .ls-breadcrumb-item{position:relative;background:#e9ecef;padding:.5rem 1rem .5rem 1.5rem;margin-left:-10px;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,12px 50%,0% 0%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.08));color:#515365}.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child{margin-left:0;padding-left:.75rem;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,0% 0%);border-radius:4px 0 0 4px}.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child{padding-right:1.25rem;clip-path:polygon(100% 0%,100% 100%,0% 100%,12px 50%,0% 0%);border-radius:0 4px 4px 0}.ls-breadcrumb--arrowed .ls-breadcrumb-item--active{background:var(--ls-breadcrumb-main-color)!important;color:#fff!important;z-index:10!important}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1){z-index:5}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2){z-index:4}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3){z-index:3}body.dark .ls-breadcrumb-item{color:#bfc9d4}body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#fff!important}body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active){background:#1b2e4b!important;color:#e0e6ed!important}body.dark .ls-breadcrumb-separator{color:#3b3f5c}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
 // @lumston/ds-angular — public API surface
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, ButtonComponent, CheckboxComponent, ChipComponent, DropdownComponent, ICON_REGISTRY, IconButtonComponent, IconComponent, LinkComponent, LoaderComponent, LogoComponent, LsDropdownContentDirective, ModalActionsComponent, ModalComponent, ModalContentComponent, ModalStackService, ModalTitleComponent, PaginationComponent, PopoverComponent, ProgressBarComponent, RadioButtonComponent, SliderComponent, SwitchComponent, TagComponent, TextComponent, TooltipComponent };
+export { AlertComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ChipComponent, DropdownComponent, ICON_REGISTRY, IconButtonComponent, IconComponent, LinkComponent, LoaderComponent, LogoComponent, LsDropdownContentDirective, MenuComponent, MenuItemComponent, MenuTriggerDirective, ModalActionsComponent, ModalComponent, ModalContentComponent, ModalStackService, ModalTitleComponent, PaginationComponent, PopoverComponent, ProgressBarComponent, RadioButtonComponent, SliderComponent, SwitchComponent, TagComponent, TextComponent, TooltipComponent };
 //# sourceMappingURL=lumston-ds-angular.mjs.map