@surfnet/curve-angular 0.2.0

package/dist/fesm2022/surfnet-curve-angular.mjs

@@ -0,0 +1,4237 @@
+import * as i0 from '@angular/core';
+import { runInInjectionContext, inject, Injector, ElementRef, PLATFORM_ID, DestroyRef, HostAttributeToken, effect, input, ChangeDetectionStrategy, Component, Directive, InjectionToken, computed, signal, forwardRef, booleanAttribute, linkedSignal, output, model, viewChild, numberAttribute, HOST_TAG_NAME, REQUEST, DOCUMENT, afterNextRender, Injectable, untracked, Renderer2 } from '@angular/core';
+import * as i1 from '@spartan-ng/brain/avatar';
+import { BrnAvatar, BrnAvatarFallback, BrnAvatarImage } from '@spartan-ng/brain/avatar';
+import { isPlatformBrowser, isPlatformServer, NgTemplateOutlet } from '@angular/common';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as i2$1 from '@ng-icons/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorDotsThree, phosphorCaretRight, phosphorCheck, phosphorCircle, phosphorCaretDown, phosphorCaretUp, phosphorCaretUpDown, phosphorX, phosphorSidebarSimple } from '@ng-icons/phosphor-icons/regular';
+import * as i1$1 from '@angular/router';
+import { RouterLink } from '@angular/router';
+import * as i1$2 from '@spartan-ng/brain/button';
+import { BrnButton } from '@spartan-ng/brain/button';
+import { cva } from 'class-variance-authority';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
+import * as i1$3 from '@spartan-ng/brain/field';
+import { BrnFieldControlDescribedBy, BrnField, BrnFieldA11yService } from '@spartan-ng/brain/field';
+import { FlexRenderDirective, createAngularTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/angular-table';
+import * as i1$4 from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuItemCheckbox, CdkMenuGroup, CdkMenuItem, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { createMenuPosition, injectCustomClassSettable, injectExposesStateProvider, injectExposedSideProvider } from '@spartan-ng/brain/core';
+import * as i1$5 from '@spartan-ng/brain/label';
+import { BrnLabel } from '@spartan-ng/brain/label';
+import * as i1$6 from '@spartan-ng/brain/separator';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import * as i1$7 from '@spartan-ng/brain/input';
+import { BrnInput } from '@spartan-ng/brain/input';
+import * as i1$8 from '@spartan-ng/brain/textarea';
+import { BrnTextarea } from '@spartan-ng/brain/textarea';
+import { provideBrnDialogDefaultOptions, BrnDialog } from '@spartan-ng/brain/dialog';
+import * as i2 from '@spartan-ng/brain/popover';
+import { provideBrnPopoverConfig, BrnPopover, BrnPopoverContent } from '@spartan-ng/brain/popover';
+import * as i1$9 from '@spartan-ng/brain/select';
+import { BrnSelect, BrnSelectScrollDown, BrnSelectScrollUp, BrnSelectContent, BrnSelectGroup, BrnSelectItem, BrnSelectLabel, BrnSelectMultiple, BrnSelectPlaceholder, BrnSelectSeparator, BrnSelectTrigger, BrnSelectValue, BrnSelectValueTemplate, BrnSelectValues } from '@spartan-ng/brain/select';
+import * as i1$a from '@spartan-ng/brain/sheet';
+import { BrnSheetOverlay, BrnSheet, BrnSheetClose, BrnSheetDescription, BrnSheetContent, BrnSheetTitle, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
+import * as i1$b from '@spartan-ng/brain/tooltip';
+import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
+
+function hlm(...inputs) {
+    return twMerge(clsx(inputs));
+}
+// Global map to track class managers per element
+const elementClassManagers = new WeakMap();
+// Global mutation observer for all elements
+let globalObserver = null;
+const observedElements = new Set();
+let sourceCounter = 0;
+/**
+ * This function dynamically adds and removes classes for a given element without requiring
+ * the a class binding (e.g. `[class]="..."`) which may interfere with other class bindings.
+ *
+ * 1. This will merge the existing classes on the element with the new classes.
+ * 2. It will also remove any classes that were previously added by this function but are no longer present in the new classes.
+ * 3. Multiple calls to this function on the same element will be merged efficiently.
+ */
+function classes(computed, options = {}) {
+    runInInjectionContext(options.injector ?? inject(Injector), () => {
+        const elementRef = options.elementRef ?? inject(ElementRef);
+        const platformId = inject(PLATFORM_ID);
+        const destroyRef = inject(DestroyRef);
+        const baseClasses = inject(new HostAttributeToken('class'), { optional: true });
+        const element = elementRef.nativeElement;
+        // Create unique identifier for this source
+        const sourceId = sourceCounter++;
+        // Get or create the class manager for this element
+        let manager = elementClassManagers.get(element);
+        if (!manager) {
+            // Initialize base classes from variation (host attribute 'class')
+            const initialBaseClasses = new Set();
+            if (baseClasses) {
+                toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
+            }
+            manager = {
+                element,
+                sources: new Map(),
+                baseClasses: initialBaseClasses,
+                isUpdating: false,
+                nextOrder: 0,
+                hasInitialized: false,
+                restoreRafId: null,
+                transitionsSuppressed: false,
+                previousTransition: '',
+                previousTransitionPriority: '',
+            };
+            elementClassManagers.set(element, manager);
+            // Setup global observer if needed and register this element
+            setupGlobalObserver(platformId);
+            observedElements.add(element);
+            // Suppress transitions until the first effect writes correct classes and
+            // the browser has painted them. This prevents CSS transition animations
+            // during hydration when classes change from SSR state to client state.
+            if (isPlatformBrowser(platformId)) {
+                manager.previousTransition = element.style.getPropertyValue('transition');
+                manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
+                element.style.setProperty('transition', 'none', 'important');
+                manager.transitionsSuppressed = true;
+            }
+        }
+        // Assign order once at registration time
+        const sourceOrder = manager.nextOrder++;
+        function updateClasses() {
+            // Get the new classes from the computed function
+            const newClasses = toClassList(computed());
+            // Update this source's classes, keeping the original order
+            manager.sources.set(sourceId, {
+                classes: new Set(newClasses),
+                order: sourceOrder,
+            });
+            // Update the element
+            updateElement(manager);
+            // Re-enable transitions after the first effect writes correct classes.
+            // Deferred to next animation frame so the browser paints the class change
+            // with transitions disabled first, then re-enables them.
+            if (manager.transitionsSuppressed) {
+                manager.transitionsSuppressed = false;
+                manager.restoreRafId = requestAnimationFrame(() => {
+                    manager.restoreRafId = null;
+                    restoreTransitionSuppression(manager);
+                });
+            }
+        }
+        // Register cleanup with DestroyRef
+        destroyRef.onDestroy(() => {
+            if (manager.restoreRafId !== null) {
+                cancelAnimationFrame(manager.restoreRafId);
+                manager.restoreRafId = null;
+            }
+            if (manager.transitionsSuppressed) {
+                manager.transitionsSuppressed = false;
+                restoreTransitionSuppression(manager);
+            }
+            // Remove this source from the manager
+            manager.sources.delete(sourceId);
+            // If no more sources, clean up the manager
+            if (manager.sources.size === 0) {
+                cleanupManager(element);
+            }
+            else {
+                // Update element without this source's classes
+                updateElement(manager);
+            }
+        });
+        /**
+         * We need this effect to track changes to the computed classes. Ideally, we would use
+         * afterRenderEffect here, but that doesn't run in SSR contexts, so we use a standard
+         * effect which works in both browser and SSR.
+         */
+        effect(updateClasses);
+    });
+}
+function restoreTransitionSuppression(manager) {
+    const prev = manager.previousTransition;
+    if (prev) {
+        manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
+    }
+    else {
+        manager.element.style.removeProperty('transition');
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+function setupGlobalObserver(platformId) {
+    if (isPlatformBrowser(platformId) && !globalObserver) {
+        // Create single global observer that watches the entire document
+        globalObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    const element = mutation.target;
+                    const manager = elementClassManagers.get(element);
+                    // Only process elements we're managing
+                    if (manager && observedElements.has(element)) {
+                        if (manager.isUpdating)
+                            continue; // Ignore changes we're making
+                        // Update base classes to include any externally added classes
+                        const currentClasses = toClassList(element.className);
+                        const allSourceClasses = new Set();
+                        // Collect all classes from all sources
+                        for (const source of manager.sources.values()) {
+                            for (const className of source.classes) {
+                                allSourceClasses.add(className);
+                            }
+                        }
+                        // Any classes not from sources become new base classes
+                        manager.baseClasses.clear();
+                        for (const className of currentClasses) {
+                            if (!allSourceClasses.has(className)) {
+                                manager.baseClasses.add(className);
+                            }
+                        }
+                        updateElement(manager);
+                    }
+                }
+            }
+        });
+        // Start observing the entire document for class attribute changes
+        globalObserver.observe(document, {
+            attributes: true,
+            attributeFilter: ['class'],
+            subtree: true, // Watch all descendants
+        });
+    }
+}
+function updateElement(manager) {
+    if (manager.isUpdating)
+        return; // Prevent recursive updates
+    manager.isUpdating = true;
+    // Handle initialization: capture base classes after first source registration
+    if (!manager.hasInitialized && manager.sources.size > 0) {
+        // Get current classes on element (may include SSR classes)
+        const currentClasses = toClassList(manager.element.className);
+        // Get all classes that will be applied by sources
+        const allSourceClasses = new Set();
+        for (const source of manager.sources.values()) {
+            source.classes.forEach((className) => allSourceClasses.add(className));
+        }
+        // Only consider classes as "base" if they're not produced by any source
+        // This prevents SSR-rendered classes from being preserved as base classes
+        currentClasses.forEach((className) => {
+            if (!allSourceClasses.has(className)) {
+                manager.baseClasses.add(className);
+            }
+        });
+        manager.hasInitialized = true;
+    }
+    // Get classes from all sources, sorted by registration order (later takes precedence)
+    const sortedSources = Array.from(manager.sources.entries()).sort(([, a], [, b]) => a.order - b.order);
+    const allSourceClasses = [];
+    for (const [, source] of sortedSources) {
+        allSourceClasses.push(...source.classes);
+    }
+    // Combine base classes with all source classes, ensuring base classes take precedence
+    const classesToApply = allSourceClasses.length > 0 || manager.baseClasses.size > 0
+        ? hlm([...allSourceClasses, ...manager.baseClasses])
+        : '';
+    // Apply the classes to the element
+    if (manager.element.className !== classesToApply) {
+        manager.element.className = classesToApply;
+    }
+    manager.isUpdating = false;
+}
+function cleanupManager(element) {
+    // Remove from global tracking
+    observedElements.delete(element);
+    elementClassManagers.delete(element);
+    // If no more elements being tracked, cleanup global observer
+    if (observedElements.size === 0 && globalObserver) {
+        globalObserver.disconnect();
+        globalObserver = null;
+    }
+}
+// Cache for parsed class lists to avoid repeated string operations
+const classListCache = new Map();
+function toClassList(className) {
+    // For simple string inputs, use cache to avoid repeated parsing
+    if (typeof className === 'string' && classListCache.has(className)) {
+        return classListCache.get(className);
+    }
+    const result = clsx(className)
+        .split(' ')
+        .filter((c) => c.length > 0);
+    // Cache string results, but limit cache size to prevent memory growth
+    if (typeof className === 'string' && classListCache.size < 1000) {
+        classListCache.set(className, result);
+    }
+    return result;
+}
+
+const _c0$9 = ["*", [["", "hlmAvatarImage", ""], ["", "brnAvatarImage", ""]], [["", "hlmAvatarFallback", ""], ["", "brnAvatarFallback", ""]]];
+const _c1 = ["*", "[hlmAvatarImage],[brnAvatarImage]", "[hlmAvatarFallback],[brnAvatarFallback]"];
+function HlmAvatar_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵprojection(0, 1);
+} }
+function HlmAvatar_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵprojection(0, 2);
+} }
+class HlmAvatar extends BrnAvatar {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => 'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 group/avatar after:border-border relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten');
+    }
+    static ɵfac = function HlmAvatar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmAvatar)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmAvatar, selectors: [["hlm-avatar"]], hostAttrs: ["data-slot", "avatar"], hostVars: 1, hostBindings: function HlmAvatar_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-size", ctx.size());
+        } }, inputs: { size: [1, "size"] }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1, decls: 3, vars: 1, template: function HlmAvatar_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$9);
+            i0.ɵɵconditionalCreate(0, HlmAvatar_Conditional_0_Template, 1, 0)(1, HlmAvatar_Conditional_1_Template, 1, 0);
+            i0.ɵɵprojection(2);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx._image()?.canShow() ? 0 : 1);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmAvatar, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-avatar',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'data-slot': 'avatar',
+                    '[attr.data-size]': 'size()',
+                },
+                template: `
+    @if (_image()?.canShow()) {
+      <ng-content select="[hlmAvatarImage],[brnAvatarImage]" />
+    } @else {
+      <ng-content select="[hlmAvatarFallback],[brnAvatarFallback]" />
+    }
+    <ng-content />
+  `,
+            }]
+    }], () => [], { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmAvatar, { className: "HlmAvatar", filePath: "lib/ui/avatar/src/lib/hlm-avatar.ts", lineNumber: 22 }); })();
+
+class HlmAvatarBadge {
+    constructor() {
+        classes(() => [
+            'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+            'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>ng-icon]:hidden',
+            'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>ng-icon]:text-[calc(var(--spacing)*2)]',
+            'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>ng-icon]:text-[calc(var(--spacing)*2)]',
+        ]);
+    }
+    static ɵfac = function HlmAvatarBadge_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmAvatarBadge)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmAvatarBadge, selectors: [["", "hlmAvatarBadge", ""], ["hlm-avatar-badge"]], hostAttrs: ["data-slot", "avatar-badge"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmAvatarBadge, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmAvatarBadge],hlm-avatar-badge',
+                host: {
+                    'data-slot': 'avatar-badge',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmAvatarFallback {
+    constructor() {
+        classes(() => 'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs');
+    }
+    static ɵfac = function HlmAvatarFallback_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmAvatarFallback)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmAvatarFallback, selectors: [["", "hlmAvatarFallback", ""]], hostAttrs: ["data-slot", "avatar-fallback"], exportAs: ["avatarFallback"], features: [i0.ɵɵHostDirectivesFeature([i1.BrnAvatarFallback])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmAvatarFallback, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmAvatarFallback]',
+                exportAs: 'avatarFallback',
+                hostDirectives: [BrnAvatarFallback],
+                host: {
+                    'data-slot': 'avatar-fallback',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmAvatarGroup {
+    constructor() {
+        classes(() => '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2');
+    }
+    static ɵfac = function HlmAvatarGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmAvatarGroup)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmAvatarGroup, selectors: [["", "hlmAvatarGroup", ""], ["hlm-avatar-group"]], hostAttrs: ["data-slot", "avatar-group"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmAvatarGroup, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmAvatarGroup],hlm-avatar-group',
+                host: {
+                    'data-slot': 'avatar-group',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmAvatarGroupCount {
+    constructor() {
+        classes(() => 'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>ng-icon]:text-base group-has-data-[size=lg]/avatar-group:[&>ng-icon]:text-xl group-has-data-[size=sm]/avatar-group:[&>ng-icon]:text-xs');
+    }
+    static ɵfac = function HlmAvatarGroupCount_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmAvatarGroupCount)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmAvatarGroupCount, selectors: [["", "hlmAvatarGroupCount", ""], ["hlm-avatar-group-count"]], hostAttrs: ["data-slot", "avatar-group-count"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmAvatarGroupCount, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmAvatarGroupCount],hlm-avatar-group-count',
+                host: {
+                    'data-slot': 'avatar-group-count',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmAvatarImage {
+    canShow = inject(BrnAvatarImage).canShow;
+    constructor() {
+        classes(() => 'rounded-full aspect-square size-full object-cover');
+    }
+    static ɵfac = function HlmAvatarImage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmAvatarImage)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmAvatarImage, selectors: [["img", "hlmAvatarImage", ""]], hostAttrs: ["data-slot", "avatar-image"], exportAs: ["avatarImage"], features: [i0.ɵɵHostDirectivesFeature([i1.BrnAvatarImage])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmAvatarImage, [{
+        type: Directive,
+        args: [{
+                selector: 'img[hlmAvatarImage]',
+                exportAs: 'avatarImage',
+                hostDirectives: [BrnAvatarImage],
+                host: {
+                    'data-slot': 'avatar-image',
+                },
+            }]
+    }], () => [], null); })();
+
+const HlmAvatarImports = [
+    HlmAvatar,
+    HlmAvatarBadge,
+    HlmAvatarFallback,
+    HlmAvatarGroup,
+    HlmAvatarGroupCount,
+    HlmAvatarImage,
+];
+
+class HlmBreadcrumb {
+    ariaLabel = input('breadcrumb', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    static ɵfac = function HlmBreadcrumb_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmBreadcrumb)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmBreadcrumb, selectors: [["", "hlmBreadcrumb", ""]], hostAttrs: ["data-slot", "breadcrumb", "role", "navigation"], hostVars: 1, hostBindings: function HlmBreadcrumb_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("aria-label", ctx.ariaLabel());
+        } }, inputs: { ariaLabel: [1, "aria-label", "ariaLabel"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmBreadcrumb, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmBreadcrumb]',
+                host: {
+                    'data-slot': 'breadcrumb',
+                    role: 'navigation',
+                    '[attr.aria-label]': 'ariaLabel()',
+                },
+            }]
+    }], null, { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] }); })();
+
+const defaultConfig$4 = {
+    size: 'base',
+};
+const HlmIconConfigToken = new InjectionToken('HlmIconConfig');
+function provideHlmIconConfig(config) {
+    return { provide: HlmIconConfigToken, useValue: { ...defaultConfig$4, ...config } };
+}
+function injectHlmIconConfig() {
+    return inject(HlmIconConfigToken, { optional: true }) ?? defaultConfig$4;
+}
+
+class HlmIcon {
+    _config = injectHlmIconConfig();
+    size = input(this._config.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _computedSize = computed(() => {
+        const size = this.size();
+        switch (size) {
+            case 'xs':
+                return '12px';
+            case 'sm':
+                return '16px';
+            case 'base':
+                return '24px';
+            case 'lg':
+                return '32px';
+            case 'xl':
+                return '48px';
+            default: {
+                return size;
+            }
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = function HlmIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmIcon)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmIcon, selectors: [["ng-icon", "hlmIcon", ""], ["ng-icon", "hlm", ""]], hostVars: 2, hostBindings: function HlmIcon_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵstyleProp("--ng-icon__size", ctx._computedSize());
+        } }, inputs: { size: [1, "size"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmIcon, [{
+        type: Directive,
+        args: [{
+                selector: 'ng-icon[hlmIcon], ng-icon[hlm]',
+                host: {
+                    '[style.--ng-icon__size]': '_computedSize()',
+                },
+            }]
+    }], null, { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+
+const HlmIconImports = [HlmIcon, NgIcon];
+
+class HlmBreadcrumbEllipsis {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Screen reader only text for the ellipsis */
+    srOnlyText = input('More', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "srOnlyText" }] : /* istanbul ignore next */ []));
+    _computedClass = computed(() => hlm('size-5 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex items-center justify-center', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = function HlmBreadcrumbEllipsis_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmBreadcrumbEllipsis)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmBreadcrumbEllipsis, selectors: [["hlm-breadcrumb-ellipsis"]], inputs: { userClass: [1, "class", "userClass"], srOnlyText: [1, "srOnlyText"] }, features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorDotsThree })])], decls: 4, vars: 3, consts: [["data-slot", "breadcrumb-ellipsis", "role", "presentation", "aria-hidden", "true"], ["hlm", "", "size", "sm", "name", "phosphorDotsThree"], [1, "sr-only"]], template: function HlmBreadcrumbEllipsis_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "span", 0);
+            i0.ɵɵelement(1, "ng-icon", 1);
+            i0.ɵɵelementStart(2, "span", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx._computedClass());
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.srOnlyText());
+        } }, dependencies: [NgIcon, HlmIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmBreadcrumbEllipsis, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-breadcrumb-ellipsis',
+                imports: [NgIcon, HlmIcon],
+                providers: [provideIcons({ phosphorDotsThree })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      [class]="_computedClass()"
+    >
+      <ng-icon hlm size="sm" name="phosphorDotsThree" />
+      <span class="sr-only">{{ srOnlyText() }}</span>
+    </span>
+  `,
+            }]
+    }], null, { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], srOnlyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "srOnlyText", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmBreadcrumbEllipsis, { className: "HlmBreadcrumbEllipsis", filePath: "lib/ui/breadcrumb/src/lib/hlm-breadcrumb-ellipsis.ts", lineNumber: 25 }); })();
+
+class HlmBreadcrumbItem {
+    constructor() {
+        classes(() => 'gap-1.5 inline-flex items-center');
+    }
+    static ɵfac = function HlmBreadcrumbItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmBreadcrumbItem)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmBreadcrumbItem, selectors: [["", "hlmBreadcrumbItem", ""]], hostAttrs: ["data-slot", "breadcrumb-item"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmBreadcrumbItem, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmBreadcrumbItem]',
+                host: {
+                    'data-slot': 'breadcrumb-item',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmBreadcrumbLink {
+    /** The link to navigate to the page. */
+    link = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "link" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => 'hover:text-foreground transition-colors');
+    }
+    static ɵfac = function HlmBreadcrumbLink_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmBreadcrumbLink)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmBreadcrumbLink, selectors: [["", "hlmBreadcrumbLink", ""]], hostAttrs: ["data-slot", "breadcrumb-link"], inputs: { link: [1, "link"] }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$1.RouterLink, inputs: ["target", "target", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "state", "state", "info", "info", "relativeTo", "relativeTo", "preserveFragment", "preserveFragment", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl", "routerLink", "link"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmBreadcrumbLink, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmBreadcrumbLink]',
+                hostDirectives: [
+                    {
+                        directive: RouterLink,
+                        inputs: [
+                            'target',
+                            'queryParams',
+                            'fragment',
+                            'queryParamsHandling',
+                            'state',
+                            'info',
+                            'relativeTo',
+                            'preserveFragment',
+                            'skipLocationChange',
+                            'replaceUrl',
+                            'routerLink: link',
+                        ],
+                    },
+                ],
+                host: {
+                    'data-slot': 'breadcrumb-link',
+                },
+            }]
+    }], () => [], { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }] }); })();
+
+class HlmBreadcrumbList {
+    constructor() {
+        classes(() => 'text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center wrap-break-word');
+    }
+    static ɵfac = function HlmBreadcrumbList_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmBreadcrumbList)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmBreadcrumbList, selectors: [["", "hlmBreadcrumbList", ""]], hostAttrs: ["data-slot", "breadcrumb-list"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmBreadcrumbList, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmBreadcrumbList]',
+                host: {
+                    'data-slot': 'breadcrumb-list',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmBreadcrumbPage {
+    constructor() {
+        classes(() => 'text-foreground font-normal');
+    }
+    static ɵfac = function HlmBreadcrumbPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmBreadcrumbPage)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmBreadcrumbPage, selectors: [["", "hlmBreadcrumbPage", ""]], hostAttrs: ["data-slot", "breadcrumb-page", "role", "link", "aria-disabled", "true", "aria-current", "page"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmBreadcrumbPage, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmBreadcrumbPage]',
+                host: {
+                    'data-slot': 'breadcrumb-page',
+                    role: 'link',
+                    'aria-disabled': 'true',
+                    'aria-current': 'page',
+                },
+            }]
+    }], () => [], null); })();
+
+const _c0$8 = ["*"];
+function HlmBreadcrumbSeparator_ProjectionFallback_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ng-icon", 0);
+} }
+class HlmBreadcrumbSeparator {
+    constructor() {
+        classes(() => '[&>ng-icon]:text-[calc(var(--spacing)*3.5)] [&>ng-icon]:flex');
+    }
+    static ɵfac = function HlmBreadcrumbSeparator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmBreadcrumbSeparator)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmBreadcrumbSeparator, selectors: [["", "hlmBreadcrumbSeparator", ""]], hostAttrs: ["data-slot", "breadcrumb-separator", "role", "presentation", "aria-hidden", "true"], features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorCaretRight })])], ngContentSelectors: _c0$8, decls: 2, vars: 0, consts: [["name", "phosphorCaretRight"]], template: function HlmBreadcrumbSeparator_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0, 0, null, HlmBreadcrumbSeparator_ProjectionFallback_0_Template, 1, 0);
+        } }, dependencies: [NgIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmBreadcrumbSeparator, [{
+        type: Component,
+        args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: '[hlmBreadcrumbSeparator]',
+                imports: [NgIcon],
+                providers: [provideIcons({ phosphorCaretRight })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'data-slot': 'breadcrumb-separator',
+                    role: 'presentation',
+                    'aria-hidden': 'true',
+                },
+                template: `
+    <ng-content>
+      <ng-icon name="phosphorCaretRight" />
+    </ng-content>
+  `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmBreadcrumbSeparator, { className: "HlmBreadcrumbSeparator", filePath: "lib/ui/breadcrumb/src/lib/hlm-breadcrumb-separator.ts", lineNumber: 23 }); })();
+
+const HlmBreadcrumbImports = [
+    HlmBreadcrumb,
+    HlmBreadcrumbEllipsis,
+    HlmBreadcrumbSeparator,
+    HlmBreadcrumbItem,
+    HlmBreadcrumbLink,
+    HlmBreadcrumbPage,
+    HlmBreadcrumbList,
+];
+/**
+ * @deprecated Use `HlmBreadcrumbImports` instead.
+ */
+const HlmBreadCrumbImports = HlmBreadcrumbImports;
+
+const defaultConfig$3 = {
+    variant: 'default',
+    size: 'default',
+};
+const BrnButtonConfigToken = new InjectionToken('BrnButtonConfig');
+function provideBrnButtonConfig(config) {
+    return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig$3, ...config } };
+}
+function injectBrnButtonConfig() {
+    return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig$3;
+}
+
+const variantClasses = {
+    default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+    outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
+    secondary: 'bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',
+    ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+    destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+    link: 'text-link underline-offset-4 hover:underline',
+};
+const sizeClasses = {
+    default: 'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+    xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)]",
+    sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+    lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+    icon: 'size-9',
+    'icon-xs': "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)]",
+    'icon-sm': 'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
+    'icon-lg': 'size-10',
+};
+const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0", {
+    variants: {
+        variant: variantClasses,
+        size: sizeClasses,
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+class HlmButton {
+    _config = injectBrnButtonConfig();
+    _additionalClasses = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_additionalClasses" }] : /* istanbul ignore next */ []));
+    variant = input(this._config.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input(this._config.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => [
+            buttonVariants({ variant: this.variant(), size: this.size() }),
+            this._additionalClasses(),
+        ]);
+    }
+    setClass(classes) {
+        this._additionalClasses.set(classes);
+    }
+    static ɵfac = function HlmButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmButton)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmButton, selectors: [["button", "hlmBtn", ""], ["a", "hlmBtn", ""]], hostAttrs: ["data-slot", "button"], inputs: { variant: [1, "variant"], size: [1, "size"] }, exportAs: ["hlmBtn"], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$2.BrnButton, inputs: ["disabled", "disabled"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmButton, [{
+        type: Directive,
+        args: [{
+                selector: 'button[hlmBtn], a[hlmBtn]',
+                exportAs: 'hlmBtn',
+                hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
+                host: { 'data-slot': 'button' },
+            }]
+    }], () => [], { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+
+const HlmButtonImports = [HlmButton];
+
+const defaultConfig$2 = {
+    size: 'default',
+};
+const HlmCardConfigToken = new InjectionToken('HlmCardConfig');
+function provideHlmCardConfig(config) {
+    return { provide: HlmCardConfigToken, useValue: { ...defaultConfig$2, ...config } };
+}
+function injectHlmCardConfig() {
+    return inject(HlmCardConfigToken, { optional: true }) ?? defaultConfig$2;
+}
+
+class HlmCard {
+    _defaultConfig = injectHlmCardConfig();
+    size = input(this._defaultConfig.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => 'ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col');
+    }
+    static ɵfac = function HlmCard_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCard)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmCard, selectors: [["", "hlmCard", ""], ["hlm-card"]], hostAttrs: ["data-slot", "card"], hostVars: 1, hostBindings: function HlmCard_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-size", ctx.size());
+        } }, inputs: { size: [1, "size"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCard, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmCard],hlm-card',
+                host: {
+                    'data-slot': 'card',
+                    '[attr.data-size]': 'size()',
+                },
+            }]
+    }], () => [], { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+
+class HlmCardAction {
+    constructor() {
+        classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
+    }
+    static ɵfac = function HlmCardAction_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCardAction)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmCardAction, selectors: [["", "hlmCardAction", ""]], hostAttrs: ["data-slot", "card-action"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCardAction, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmCardAction]',
+                host: { 'data-slot': 'card-action' },
+            }]
+    }], () => [], null); })();
+
+class HlmCardContent {
+    constructor() {
+        classes(() => 'px-(--card-spacing)');
+    }
+    static ɵfac = function HlmCardContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCardContent)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmCardContent, selectors: [["", "hlmCardContent", ""]], hostAttrs: ["data-slot", "card-content"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCardContent, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmCardContent]',
+                host: { 'data-slot': 'card-content' },
+            }]
+    }], () => [], null); })();
+
+class HlmCardDescription {
+    constructor() {
+        classes(() => 'text-muted-foreground text-sm');
+    }
+    static ɵfac = function HlmCardDescription_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCardDescription)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmCardDescription, selectors: [["", "hlmCardDescription", ""]], hostAttrs: ["data-slot", "card-description"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCardDescription, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmCardDescription]',
+                host: { 'data-slot': 'card-description' },
+            }]
+    }], () => [], null); })();
+
+class HlmCardFooter {
+    constructor() {
+        classes(() => 'rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing) flex items-center');
+    }
+    static ɵfac = function HlmCardFooter_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCardFooter)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmCardFooter, selectors: [["", "hlmCardFooter", ""], ["hlm-card-footer"]], hostAttrs: ["data-slot", "card-footer"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCardFooter, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmCardFooter],hlm-card-footer',
+                host: { 'data-slot': 'card-footer' },
+            }]
+    }], () => [], null); })();
+
+class HlmCardHeader {
+    constructor() {
+        classes(() => 'gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]');
+    }
+    static ɵfac = function HlmCardHeader_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCardHeader)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmCardHeader, selectors: [["", "hlmCardHeader", ""], ["hlm-card-header"]], hostAttrs: ["data-slot", "card-header"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCardHeader, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmCardHeader],hlm-card-header',
+                host: { 'data-slot': 'card-header' },
+            }]
+    }], () => [], null); })();
+
+class HlmCardTitle {
+    constructor() {
+        classes(() => 'text-base leading-normal font-medium group-data-[size=sm]/card:text-sm');
+    }
+    static ɵfac = function HlmCardTitle_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCardTitle)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmCardTitle, selectors: [["", "hlmCardTitle", ""]], hostAttrs: ["data-slot", "card-title"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCardTitle, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmCardTitle]',
+                host: { 'data-slot': 'card-title' },
+            }]
+    }], () => [], null); })();
+
+const HlmCardImports = [
+    HlmCard,
+    HlmCardAction,
+    HlmCardContent,
+    HlmCardDescription,
+    HlmCardFooter,
+    HlmCardHeader,
+    HlmCardTitle,
+];
+
+function HlmCheckbox_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 1);
+    i0.ɵɵelement(1, "ng-icon", 2);
+    i0.ɵɵelementEnd();
+} }
+const HLM_CHECKBOX_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmCheckbox),
+    multi: true,
+};
+class HlmCheckbox {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary data-[matches-spartan-invalid=true]:aria-checked:border-primary data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 peer shrink-0 cursor-default outline-none disabled:cursor-not-allowed disabled:opacity-50', this.userClass(), this._errorStateClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    /** Used to set the id on the underlying brn element. */
+    inputId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /** Used to set the aria-label attribute on the underlying brn element. */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Used to set the aria-labelledby attribute on the underlying brn element. */
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** Used to set the aria-describedby attribute on the underlying brn element. */
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** The checked state of the checkbox. */
+    checkedInput = input(false, { ...(ngDevMode ? { debugName: "checkedInput" } : /* istanbul ignore next */ {}), alias: 'checked',
+        transform: booleanAttribute });
+    checked = linkedSignal(this.checkedInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Emits when checked state changes. */
+    checkedChange = output();
+    /**
+     * The indeterminate state of the checkbox.
+     * For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked.
+     */
+    indeterminate = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** The name attribute of the checkbox. */
+    name = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox is required. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the checkbox is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether to force the checkbox into an invalid state. */
+    forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _brnCheckbox = viewChild.required(BrnCheckbox);
+    _spartanInvalid = computed(() => this.forceInvalid() || this._brnCheckbox().spartanInvalid?.(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : /* istanbul ignore next */ []));
+    _errorStateClass = computed(() => this._spartanInvalid()
+        ? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+        : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_errorStateClass" }] : /* istanbul ignore next */ []));
+    _onChange;
+    _onTouched;
+    _handleChange(value) {
+        if (this._disabled())
+            return;
+        this.checked.set(value);
+        this.checkedChange.emit(value);
+        this._onChange?.(value);
+    }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        this.checked.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    static ɵfac = function HlmCheckbox_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCheckbox)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmCheckbox, selectors: [["hlm-checkbox"]], viewQuery: function HlmCheckbox_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx._brnCheckbox, BrnCheckbox, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostAttrs: ["data-slot", "checkbox", 1, "contents", "peer"], hostVars: 3, hostBindings: function HlmCheckbox_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("aria-label", null)("aria-labelledby", null)("data-disabled", ctx._disabled() ? "" : null);
+        } }, inputs: { userClass: [1, "class", "userClass"], inputId: [1, "inputId"], ariaLabel: [1, "aria-label", "ariaLabel"], ariaLabelledby: [1, "aria-labelledby", "ariaLabelledby"], ariaDescribedby: [1, "aria-describedby", "ariaDescribedby"], checkedInput: [1, "checked", "checkedInput"], indeterminate: [1, "indeterminate"], name: [1, "name"], required: [1, "required"], disabled: [1, "disabled"], forceInvalid: [1, "forceInvalid"] }, outputs: { checkedChange: "checkedChange", indeterminate: "indeterminateChange" }, features: [i0.ɵɵProvidersFeature([HLM_CHECKBOX_VALUE_ACCESSOR], [provideIcons({ phosphorCheck })]), i0.ɵɵHostDirectivesFeature([i1$3.BrnFieldControlDescribedBy])], decls: 2, vars: 13, consts: [[3, "indeterminateChange", "checkedChange", "touched", "id", "name", "checked", "indeterminate", "disabled", "required", "aria-label", "aria-labelledby", "aria-describedby", "forceInvalid"], [1, "flex", "items-center", "justify-center", "text-current", "transition-none"], ["hlm", "", "size", "14px", "name", "phosphorCheck"]], template: function HlmCheckbox_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "brn-checkbox", 0);
+            i0.ɵɵtwoWayListener("indeterminateChange", function HlmCheckbox_Template_brn_checkbox_indeterminateChange_0_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.indeterminate, $event) || (ctx.indeterminate = $event); return $event; });
+            i0.ɵɵlistener("checkedChange", function HlmCheckbox_Template_brn_checkbox_checkedChange_0_listener($event) { return ctx._handleChange($event); })("touched", function HlmCheckbox_Template_brn_checkbox_touched_0_listener() { return ctx._onTouched?.(); });
+            i0.ɵɵconditionalCreate(1, HlmCheckbox_Conditional_1_Template, 2, 0, "span", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx._computedClass());
+            i0.ɵɵproperty("id", ctx.inputId())("name", ctx.name())("checked", ctx.checked());
+            i0.ɵɵtwoWayProperty("indeterminate", ctx.indeterminate);
+            i0.ɵɵproperty("disabled", ctx._disabled())("required", ctx.required());
+            i0.ɵɵariaProperty("aria-label", ctx.ariaLabel())("aria-labelledby", ctx.ariaLabelledby())("aria-describedby", ctx.ariaDescribedby());
+            i0.ɵɵproperty("forceInvalid", ctx.forceInvalid());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.checked() || ctx.indeterminate() ? 1 : -1);
+        } }, dependencies: [BrnCheckbox, NgIcon, HlmIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCheckbox, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-checkbox',
+                imports: [BrnCheckbox, NgIcon, HlmIcon],
+                providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
+                viewProviders: [provideIcons({ phosphorCheck })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                hostDirectives: [BrnFieldControlDescribedBy],
+                host: {
+                    class: 'contents peer',
+                    'data-slot': 'checkbox',
+                    '[attr.aria-label]': 'null',
+                    '[attr.aria-labelledby]': 'null',
+                    '[attr.data-disabled]': '_disabled() ? "" : null',
+                },
+                template: `
+    <brn-checkbox
+      [id]="inputId()"
+      [name]="name()"
+      [class]="_computedClass()"
+      [checked]="checked()"
+      [(indeterminate)]="indeterminate"
+      [disabled]="_disabled()"
+      [required]="required()"
+      [aria-label]="ariaLabel()"
+      [aria-labelledby]="ariaLabelledby()"
+      [aria-describedby]="ariaDescribedby()"
+      [forceInvalid]="forceInvalid()"
+      (checkedChange)="_handleChange($event)"
+      (touched)="_onTouched?.()"
+    >
+      @if (checked() || indeterminate()) {
+        <span class="flex items-center justify-center text-current transition-none">
+          <ng-icon hlm size="14px" name="phosphorCheck" />
+        </span>
+      }
+    </brn-checkbox>
+  `,
+            }]
+    }], null, { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }], _brnCheckbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCheckbox), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmCheckbox, { className: "HlmCheckbox", filePath: "lib/ui/checkbox/src/lib/hlm-checkbox.ts", lineNumber: 68 }); })();
+
+const HlmCheckboxImports = [HlmCheckbox];
+
+class HlmTableContainer {
+    constructor() {
+        classes(() => 'relative w-full overflow-x-auto');
+    }
+    static ɵfac = function HlmTableContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTableContainer)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTableContainer, selectors: [["div", "hlmTableContainer", ""]], hostAttrs: ["data-slot", "table-container"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTableContainer, [{
+        type: Directive,
+        args: [{
+                selector: 'div[hlmTableContainer]',
+                host: { 'data-slot': 'table-container' },
+            }]
+    }], () => [], null); })();
+/**
+ * Directive to apply Shadcn-like styling to a <table> element.
+ */
+class HlmTable {
+    constructor() {
+        classes(() => 'w-full caption-bottom text-sm');
+    }
+    static ɵfac = function HlmTable_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTable)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTable, selectors: [["table", "hlmTable", ""]], hostAttrs: ["data-slot", "table"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTable, [{
+        type: Directive,
+        args: [{
+                selector: 'table[hlmTable]',
+                host: { 'data-slot': 'table' },
+            }]
+    }], () => [], null); })();
+/**
+ * Directive to apply Shadcn-like styling to a <thead> element
+ * within an HlmTable context.
+ */
+class HlmTHead {
+    constructor() {
+        classes(() => '[&_tr]:border-b');
+    }
+    static ɵfac = function HlmTHead_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTHead)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTHead, selectors: [["thead", "hlmTHead", ""], ["thead", "hlmTableHeader", ""]], hostAttrs: ["data-slot", "table-header"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTHead, [{
+        type: Directive,
+        args: [{
+                selector: 'thead[hlmTHead],thead[hlmTableHeader]',
+                host: { 'data-slot': 'table-header' },
+            }]
+    }], () => [], null); })();
+/**
+ * Directive to apply Shadcn-like styling to a <tbody> element
+ * within an HlmTable context.
+ */
+class HlmTBody {
+    constructor() {
+        classes(() => '[&_tr:last-child]:border-0');
+    }
+    static ɵfac = function HlmTBody_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTBody)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTBody, selectors: [["tbody", "hlmTBody", ""], ["tbody", "hlmTableBody", ""]], hostAttrs: ["data-slot", "table-body"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTBody, [{
+        type: Directive,
+        args: [{
+                selector: 'tbody[hlmTBody],tbody[hlmTableBody]',
+                host: { 'data-slot': 'table-body' },
+            }]
+    }], () => [], null); })();
+/**
+ * Directive to apply Shadcn-like styling to a <tfoot> element
+ * within an HlmTable context.
+ */
+class HlmTFoot {
+    constructor() {
+        classes(() => 'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0');
+    }
+    static ɵfac = function HlmTFoot_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTFoot)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTFoot, selectors: [["tfoot", "hlmTFoot", ""], ["tfoot", "hlmTableFooter", ""]], hostAttrs: ["data-slot", "table-footer"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTFoot, [{
+        type: Directive,
+        args: [{
+                selector: 'tfoot[hlmTFoot],tfoot[hlmTableFooter]',
+                host: { 'data-slot': 'table-footer' },
+            }]
+    }], () => [], null); })();
+/**
+ * Directive to apply Shadcn-like styling to a <tr> element
+ * within an HlmTable context.
+ */
+class HlmTr {
+    constructor() {
+        classes(() => 'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50');
+    }
+    static ɵfac = function HlmTr_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTr)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTr, selectors: [["tr", "hlmTr", ""], ["tr", "hlmTableRow", ""]], hostAttrs: ["data-slot", "table-row"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTr, [{
+        type: Directive,
+        args: [{
+                selector: 'tr[hlmTr],tr[hlmTableRow]',
+                host: { 'data-slot': 'table-row' },
+            }]
+    }], () => [], null); })();
+/**
+ * Directive to apply Shadcn-like styling to a <th> element
+ * within an HlmTable context.
+ */
+class HlmTh {
+    constructor() {
+        classes(() => 'text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0');
+    }
+    static ɵfac = function HlmTh_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTh)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTh, selectors: [["th", "hlmTh", ""], ["th", "hlmTableHead", ""]], hostAttrs: ["data-slot", "table-head"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTh, [{
+        type: Directive,
+        args: [{
+                selector: 'th[hlmTh],th[hlmTableHead]',
+                host: { 'data-slot': 'table-head' },
+            }]
+    }], () => [], null); })();
+/**
+ * Directive to apply Shadcn-like styling to a <td> element
+ * within an HlmTable context.
+ */
+class HlmTd {
+    constructor() {
+        classes(() => 'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0');
+    }
+    static ɵfac = function HlmTd_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTd)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTd, selectors: [["td", "hlmTd", ""], ["td", "hlmTableCell", ""]], hostAttrs: ["data-slot", "table-cell"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTd, [{
+        type: Directive,
+        args: [{
+                selector: 'td[hlmTd],td[hlmTableCell]',
+                host: { 'data-slot': 'table-cell' },
+            }]
+    }], () => [], null); })();
+/**
+ * Directive to apply Shadcn-like styling to a <caption> element
+ * within an HlmTable context.
+ */
+class HlmCaption {
+    constructor() {
+        classes(() => 'text-muted-foreground mt-4 text-sm');
+    }
+    static ɵfac = function HlmCaption_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmCaption)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmCaption, selectors: [["caption", "hlmCaption", ""], ["caption", "hlmTableCaption", ""]], hostAttrs: ["data-slot", "table-caption"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmCaption, [{
+        type: Directive,
+        args: [{
+                selector: 'caption[hlmCaption],caption[hlmTableCaption]',
+                host: { 'data-slot': 'table-caption' },
+            }]
+    }], () => [], null); })();
+
+const HlmTableImports = [
+    HlmCaption,
+    HlmTableContainer,
+    HlmTable,
+    HlmTBody,
+    HlmTd,
+    HlmTFoot,
+    HlmTh,
+    HlmTHead,
+    HlmTr,
+];
+
+const _forTrack0 = ($index, $item) => $item.id;
+function HlmDataTableContent_For_4_For_2_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const headerContent_r1 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", headerContent_r1, " ");
+} }
+function HlmDataTableContent_For_4_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, HlmDataTableContent_For_4_For_2_Conditional_1_ng_container_0_Template, 2, 1, "ng-container", 6);
+} if (rf & 2) {
+    const header_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("flexRender", header_r2.column.columnDef.header)("flexRenderProps", header_r2.getContext());
+} }
+function HlmDataTableContent_For_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th", 5);
+    i0.ɵɵconditionalCreate(1, HlmDataTableContent_For_4_For_2_Conditional_1_Template, 1, 2, "ng-container");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const header_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!header_r2.isPlaceholder ? 1 : -1);
+} }
+function HlmDataTableContent_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 3);
+    i0.ɵɵrepeaterCreate(1, HlmDataTableContent_For_4_For_2_Template, 2, 1, "th", 5, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const headerGroup_r3 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(headerGroup_r3.headers);
+} }
+function HlmDataTableContent_Conditional_6_For_1_For_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const cellContent_r4 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", cellContent_r4, " ");
+} }
+function HlmDataTableContent_Conditional_6_For_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 7);
+    i0.ɵɵtemplate(1, HlmDataTableContent_Conditional_6_For_1_For_2_ng_container_1_Template, 2, 1, "ng-container", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cell_r5 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("flexRender", cell_r5.column.columnDef.cell)("flexRenderProps", cell_r5.getContext());
+} }
+function HlmDataTableContent_Conditional_6_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 3);
+    i0.ɵɵrepeaterCreate(1, HlmDataTableContent_Conditional_6_For_1_For_2_Template, 2, 2, "td", 7, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r6 = ctx.$implicit;
+    i0.ɵɵattribute("data-state", row_r6.getIsSelected() ? "selected" : null);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(row_r6.getVisibleCells());
+} }
+function HlmDataTableContent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, HlmDataTableContent_Conditional_6_For_1_Template, 3, 1, "tr", 3, _forTrack0);
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r6.table().getRowModel().rows);
+} }
+function HlmDataTableContent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 3)(1, "td", 8);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("colspan", ctx_r6.columns().length);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r6.noResultsLabel(), " ");
+} }
+/**
+ * Renders a TanStack table instance into the styled helm `table` directives. Mirrors React's
+ * `DataTableContent`: header groups, body rows (with `data-state="selected"` per selected
+ * row), and an empty-state row when there are no rows.
+ *
+ * String / primitive header and cell defs are rendered as inert escaped text by `*flexRender`
+ * (matching React's `flexRender` of a string node); component cell defs created with
+ * `flexRenderComponent()` are mounted in place. To render markup, return a
+ * `flexRenderComponent()` rather than an HTML string — raw strings are never parsed as HTML.
+ */
+class HlmDataTableContent {
+    /** The TanStack table instance, e.g. from `injectDataTable`. */
+    table = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+    /** The column defs — used to span the empty-state row across all columns. */
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Content shown in the body when there are no rows. */
+    noResultsLabel = input('No results.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultsLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = function HlmDataTableContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDataTableContent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDataTableContent, selectors: [["hlm-data-table-content"]], hostAttrs: ["data-slot", "data-table-content", 1, "block", "overflow-hidden", "rounded-md", "border"], inputs: { table: [1, "table"], columns: [1, "columns"], noResultsLabel: [1, "noResultsLabel"] }, decls: 8, vars: 1, consts: [["hlmTableContainer", ""], ["hlmTable", ""], ["hlmTableHeader", ""], ["hlmTableRow", ""], ["hlmTableBody", ""], ["hlmTableHead", ""], [4, "flexRender", "flexRenderProps"], ["hlmTableCell", ""], ["hlmTableCell", "", 1, "h-24", "text-center"]], template: function HlmDataTableContent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "table", 1)(2, "thead", 2);
+            i0.ɵɵrepeaterCreate(3, HlmDataTableContent_For_4_Template, 3, 0, "tr", 3, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "tbody", 4);
+            i0.ɵɵconditionalCreate(6, HlmDataTableContent_Conditional_6_Template, 2, 0)(7, HlmDataTableContent_Conditional_7_Template, 3, 2, "tr", 3);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.table().getHeaderGroups());
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.table().getRowModel().rows.length ? 6 : 7);
+        } }, dependencies: [HlmTableContainer, HlmTable, HlmTBody, HlmTd, HlmTh, HlmTHead, HlmTr, FlexRenderDirective], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDataTableContent, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-data-table-content',
+                imports: [HlmTableImports, FlexRenderDirective],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'data-slot': 'data-table-content',
+                    class: 'block overflow-hidden rounded-md border',
+                },
+                template: `
+    <div hlmTableContainer>
+      <table hlmTable>
+        <thead hlmTableHeader>
+          @for (headerGroup of table().getHeaderGroups(); track headerGroup.id) {
+            <tr hlmTableRow>
+              @for (header of headerGroup.headers; track header.id) {
+                <th hlmTableHead>
+                  @if (!header.isPlaceholder) {
+                    <ng-container
+                      *flexRender="
+                        header.column.columnDef.header;
+                        props: header.getContext();
+                        let headerContent
+                      "
+                    >
+                      {{ headerContent }}
+                    </ng-container>
+                  }
+                </th>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody hlmTableBody>
+          @if (table().getRowModel().rows.length) {
+            @for (row of table().getRowModel().rows; track row.id) {
+              <tr hlmTableRow [attr.data-state]="row.getIsSelected() ? 'selected' : null">
+                @for (cell of row.getVisibleCells(); track cell.id) {
+                  <td hlmTableCell>
+                    <ng-container
+                      *flexRender="
+                        cell.column.columnDef.cell;
+                        props: cell.getContext();
+                        let cellContent
+                      "
+                    >
+                      {{ cellContent }}
+                    </ng-container>
+                  </td>
+                }
+              </tr>
+            }
+          } @else {
+            <tr hlmTableRow>
+              <td hlmTableCell [attr.colspan]="columns().length" class="h-24 text-center">
+                {{ noResultsLabel() }}
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+            }]
+    }], null, { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], noResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsLabel", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmDataTableContent, { className: "HlmDataTableContent", filePath: "lib/ui/data-table/src/lib/hlm-data-table-content.ts", lineNumber: 78 }); })();
+
+/**
+ * Selection summary plus Previous / Next paging controls. Mirrors React's
+ * `DataTablePagination`.
+ */
+class HlmDataTablePagination {
+    /** The TanStack table instance, e.g. from `injectDataTable`. */
+    table = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+    /** Label for the "previous page" button. */
+    previousLabel = input('Previous', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
+    /** Label for the "next page" button. */
+    nextLabel = input('Next', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    /** Builds the selection-summary text from the selected and total row counts. */
+    selectionLabel = input((selectedCount, totalCount) => `${selectedCount} of ${totalCount} row(s) selected.`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = function HlmDataTablePagination_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDataTablePagination)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDataTablePagination, selectors: [["hlm-data-table-pagination"]], hostAttrs: ["data-slot", "data-table-pagination", 1, "flex", "items-center", "justify-end", "gap-2", "py-4"], inputs: { table: [1, "table"], previousLabel: [1, "previousLabel"], nextLabel: [1, "nextLabel"], selectionLabel: [1, "selectionLabel"] }, decls: 7, vars: 5, consts: [[1, "text-muted-foreground", "flex-1", "text-sm"], [1, "flex", "gap-2"], ["hlmBtn", "", "variant", "outline", "size", "sm", 3, "click", "disabled"]], template: function HlmDataTablePagination_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtext(1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "div", 1)(3, "button", 2);
+            i0.ɵɵlistener("click", function HlmDataTablePagination_Template_button_click_3_listener() { return ctx.table().previousPage(); });
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 2);
+            i0.ɵɵlistener("click", function HlmDataTablePagination_Template_button_click_5_listener() { return ctx.table().nextPage(); });
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.selectionLabel()(ctx.table().getFilteredSelectedRowModel().rows.length, ctx.table().getFilteredRowModel().rows.length), " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", !ctx.table().getCanPreviousPage());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.previousLabel(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", !ctx.table().getCanNextPage());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.nextLabel(), " ");
+        } }, dependencies: [HlmButton], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDataTablePagination, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-data-table-pagination',
+                imports: [HlmButton],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'data-slot': 'data-table-pagination',
+                    class: 'flex items-center justify-end gap-2 py-4',
+                },
+                template: `
+    <div class="text-muted-foreground flex-1 text-sm">
+      {{
+        selectionLabel()(
+          table().getFilteredSelectedRowModel().rows.length,
+          table().getFilteredRowModel().rows.length
+        )
+      }}
+    </div>
+    <div class="flex gap-2">
+      <button
+        hlmBtn
+        variant="outline"
+        size="sm"
+        [disabled]="!table().getCanPreviousPage()"
+        (click)="table().previousPage()"
+      >
+        {{ previousLabel() }}
+      </button>
+      <button
+        hlmBtn
+        variant="outline"
+        size="sm"
+        [disabled]="!table().getCanNextPage()"
+        (click)="table().nextPage()"
+      >
+        {{ nextLabel() }}
+      </button>
+    </div>
+  `,
+            }]
+    }], null, { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], selectionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLabel", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmDataTablePagination, { className: "HlmDataTablePagination", filePath: "lib/ui/data-table/src/lib/hlm-data-table-pagination.ts", lineNumber: 48 }); })();
+
+/**
+ * Layout wrapper for data-table controls (filter inputs, column toggles, actions). Mirrors
+ * React's `DataTableToolbar` — a styled flex row above the table.
+ */
+class HlmDataTableToolbar {
+    constructor() {
+        classes(() => 'flex items-center gap-2 py-4');
+    }
+    static ɵfac = function HlmDataTableToolbar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDataTableToolbar)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDataTableToolbar, selectors: [["", "hlmDataTableToolbar", ""]], hostAttrs: ["data-slot", "data-table-toolbar"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDataTableToolbar, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDataTableToolbar]',
+                host: { 'data-slot': 'data-table-toolbar' },
+            }]
+    }], () => [], null); })();
+
+/** Apply a TanStack `Updater` (value or `(old) => new`) to a writable signal. */
+function applyUpdater(state) {
+    return (updater) => state.set(typeof updater === 'function' ? updater(state()) : updater);
+}
+/**
+ * Angular analog of React's `useDataTable`. Wraps `createAngularTable` with the core,
+ * sorted, filtered and paginated row models and manages sorting, column-filter,
+ * column-visibility, row-selection and pagination state with signals.
+ *
+ * Must be called from an injection context (a component constructor or field initializer),
+ * since `createAngularTable` injects. Pass an options factory so reactive `data` re-renders
+ * the table:
+ *
+ * ```ts
+ * readonly table = injectDataTable(() => ({ data: this.data(), columns }));
+ * ```
+ */
+function injectDataTable(options) {
+    const initial = options();
+    const sorting = signal(initial.initialSorting ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
+    const columnFilters = signal(initial.initialColumnFilters ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnFilters" }] : /* istanbul ignore next */ []));
+    const columnVisibility = signal(initial.initialColumnVisibility ?? {}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnVisibility" }] : /* istanbul ignore next */ []));
+    const rowSelection = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
+    const pagination = signal(initial.initialPagination ?? { pageIndex: 0, pageSize: 10 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    return createAngularTable(() => {
+        const { data, columns, getRowId } = options();
+        return {
+            data,
+            columns,
+            getRowId,
+            state: {
+                sorting: sorting(),
+                columnFilters: columnFilters(),
+                columnVisibility: columnVisibility(),
+                rowSelection: rowSelection(),
+                pagination: pagination(),
+            },
+            onSortingChange: applyUpdater(sorting),
+            onColumnFiltersChange: applyUpdater(columnFilters),
+            onColumnVisibilityChange: applyUpdater(columnVisibility),
+            onRowSelectionChange: applyUpdater(rowSelection),
+            onPaginationChange: applyUpdater(pagination),
+            getCoreRowModel: getCoreRowModel(),
+            getSortedRowModel: getSortedRowModel(),
+            getFilteredRowModel: getFilteredRowModel(),
+            getPaginationRowModel: getPaginationRowModel(),
+        };
+    });
+}
+
+const HlmDataTableImports = [
+    HlmDataTableContent,
+    HlmDataTablePagination,
+    HlmDataTableToolbar,
+];
+
+class HlmDropdownMenu {
+    _host = inject(CdkMenu);
+    _state = signal('open', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    _side = signal('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_side" }] : /* istanbul ignore next */ []));
+    sideOffset = input(1, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    constructor() {
+        classes(() => 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 my-[--spacing(var(--side-offset))] min-w-[8rem] origin-top overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md');
+        this.setSideWithDarkMagic();
+        // this is a best effort, but does not seem to work currently
+        // TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+        this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+    }
+    setSideWithDarkMagic() {
+        /**
+         * This is an ugly workaround to at least figure out the correct side of where a submenu
+         * will appear and set the attribute to the host accordingly
+         *
+         * First of all we take advantage of the menu stack not being aware of the root
+         * object immediately after it is added. This code executes before the root element is added,
+         * which means the stack is still empty and the peek method returns undefined.
+         */
+        const isRoot = this._host.menuStack.peek() === undefined;
+        setTimeout(() => {
+            // our menu trigger directive leaves the last position used for use immediately after opening
+            // we can access it here and determine the correct side.
+            // eslint-disable-next-line
+            const ps = this._host._parentTrigger._spartanLastPosition;
+            if (!ps) {
+                // if we have no last position we default to the most likely option
+                // I hate that we have to do this and hope we can revisit soon and improve
+                this._side.set(isRoot ? 'top' : 'left');
+                return;
+            }
+            const side = isRoot ? ps.originY : ps.originX === 'end' ? 'right' : 'left';
+            this._side.set(side);
+        });
+    }
+    static ɵfac = function HlmDropdownMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenu)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenu, selectors: [["", "hlmDropdownMenu", ""], ["hlm-dropdown-menu"]], hostAttrs: ["data-slot", "dropdown-menu"], hostVars: 4, hostBindings: function HlmDropdownMenu_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-state", ctx._state())("data-side", ctx._side());
+            i0.ɵɵstyleProp("--side-offset", ctx.sideOffset());
+        } }, inputs: { sideOffset: [1, "sideOffset"] }, features: [i0.ɵɵHostDirectivesFeature([i1$4.CdkMenu])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenu, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenu],hlm-dropdown-menu',
+                hostDirectives: [CdkMenu],
+                host: {
+                    'data-slot': 'dropdown-menu',
+                    '[attr.data-state]': '_state()',
+                    '[attr.data-side]': '_side()',
+                    '[style.--side-offset]': 'sideOffset()',
+                },
+            }]
+    }], () => [], { sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }] }); })();
+
+class HlmDropdownMenuCheckbox {
+    _cdkMenuItem = inject(CdkMenuItemCheckbox);
+    checked = input(this._cdkMenuItem.checked, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(this._cdkMenuItem.disabled, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        classes(() => 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:ps-2 has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:pe-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:[&>hlm-dropdown-menu-checkbox-indicator]:start-auto has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:[&>hlm-dropdown-menu-checkbox-indicator]:end-2');
+    }
+    static ɵfac = function HlmDropdownMenuCheckbox_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuCheckbox)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuCheckbox, selectors: [["", "hlmDropdownMenuCheckbox", ""]], hostAttrs: ["data-slot", "dropdown-menu-checkbox-item"], hostVars: 2, hostBindings: function HlmDropdownMenuCheckbox_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-disabled", ctx.disabled() ? "" : null)("data-checked", ctx.checked() ? "" : null);
+        } }, inputs: { checked: [1, "checked"], disabled: [1, "disabled"] }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$4.CdkMenuItemCheckbox, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuItemChecked", "checked"], outputs: ["cdkMenuItemTriggered", "triggered"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuCheckbox, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuCheckbox]',
+                hostDirectives: [
+                    {
+                        directive: CdkMenuItemCheckbox,
+                        inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+                        outputs: ['cdkMenuItemTriggered: triggered'],
+                    },
+                ],
+                host: {
+                    'data-slot': 'dropdown-menu-checkbox-item',
+                    '[attr.data-disabled]': 'disabled() ? "" : null',
+                    '[attr.data-checked]': 'checked() ? "" : null',
+                },
+            }]
+    }], () => [], { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] }); })();
+
+class HlmDropdownMenuCheckboxIndicator {
+    constructor() {
+        classes(() => 'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100');
+    }
+    static ɵfac = function HlmDropdownMenuCheckboxIndicator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuCheckboxIndicator)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDropdownMenuCheckboxIndicator, selectors: [["hlm-dropdown-menu-checkbox-indicator"]], features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorCheck })])], decls: 1, vars: 0, consts: [["name", "phosphorCheck", 1, "text-base"]], template: function HlmDropdownMenuCheckboxIndicator_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "ng-icon", 0);
+        } }, dependencies: [NgIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuCheckboxIndicator, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-dropdown-menu-checkbox-indicator',
+                imports: [NgIcon],
+                providers: [provideIcons({ phosphorCheck })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: ` <ng-icon class="text-base" name="phosphorCheck" /> `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmDropdownMenuCheckboxIndicator, { className: "HlmDropdownMenuCheckboxIndicator", filePath: "lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-checkbox-indicator.ts", lineNumber: 13 }); })();
+
+class HlmDropdownMenuGroup {
+    constructor() {
+        classes(() => 'block');
+    }
+    static ɵfac = function HlmDropdownMenuGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuGroup)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuGroup, selectors: [["", "hlmDropdownMenuGroup", ""], ["hlm-dropdown-menu-group"]], hostAttrs: ["data-slot", "dropdown-menu-group"], features: [i0.ɵɵHostDirectivesFeature([i1$4.CdkMenuGroup])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuGroup, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuGroup],hlm-dropdown-menu-group',
+                hostDirectives: [CdkMenuGroup],
+                host: {
+                    'data-slot': 'dropdown-menu-group',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmDropdownMenuItem {
+    _isButton = inject(HOST_TAG_NAME) === 'button';
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        classes(() => "hover:bg-accent focus-visible:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:!text-destructive [&_ng-icon:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_svg:not([class*='text-'])]:text-base");
+    }
+    static ɵfac = function HlmDropdownMenuItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuItem)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuItem, selectors: [["", "hlmDropdownMenuItem", ""], ["hlm-dropdown-menu-item"]], hostAttrs: ["data-slot", "dropdown-menu-item"], hostVars: 4, hostBindings: function HlmDropdownMenuItem_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("disabled", ctx._isButton && ctx.disabled() ? "" : null)("data-disabled", ctx.disabled() ? "" : null)("data-variant", ctx.variant())("data-inset", ctx.inset() ? "" : null);
+        } }, inputs: { disabled: [1, "disabled"], variant: [1, "variant"], inset: [1, "inset"] }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$4.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled"], outputs: ["cdkMenuItemTriggered", "triggered"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuItem, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuItem],hlm-dropdown-menu-item',
+                hostDirectives: [
+                    {
+                        directive: CdkMenuItem,
+                        inputs: ['cdkMenuItemDisabled: disabled'],
+                        outputs: ['cdkMenuItemTriggered: triggered'],
+                    },
+                ],
+                host: {
+                    'data-slot': 'dropdown-menu-item',
+                    '[attr.disabled]': '_isButton && disabled() ? "" : null',
+                    '[attr.data-disabled]': 'disabled() ? "" : null',
+                    '[attr.data-variant]': 'variant()',
+                    '[attr.data-inset]': 'inset() ? "" : null',
+                },
+            }]
+    }], () => [], { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
+
+class HlmDropdownMenuItemSubIndicator {
+    constructor() {
+        classes(() => 'ms-auto size-4');
+    }
+    static ɵfac = function HlmDropdownMenuItemSubIndicator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuItemSubIndicator)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDropdownMenuItemSubIndicator, selectors: [["hlm-dropdown-menu-item-sub-indicator"]], features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorCaretRight })])], decls: 1, vars: 0, consts: [["name", "phosphorCaretRight", 1, "text-base", "rtl:rotate-180"]], template: function HlmDropdownMenuItemSubIndicator_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "ng-icon", 0);
+        } }, dependencies: [NgIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuItemSubIndicator, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-dropdown-menu-item-sub-indicator',
+                imports: [NgIcon],
+                providers: [provideIcons({ phosphorCaretRight })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: ` <ng-icon name="phosphorCaretRight" class="text-base rtl:rotate-180" /> `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmDropdownMenuItemSubIndicator, { className: "HlmDropdownMenuItemSubIndicator", filePath: "lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-item-sub-indicator.ts", lineNumber: 13 }); })();
+
+class HlmDropdownMenuLabel {
+    constructor() {
+        classes(() => 'block px-2 py-1.5 text-sm font-medium data-[inset]:pl-8');
+    }
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = function HlmDropdownMenuLabel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuLabel)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuLabel, selectors: [["", "hlmDropdownMenuLabel", ""], ["hlm-dropdown-menu-label"]], hostAttrs: ["data-slot", "dropdown-menu-label"], hostVars: 1, hostBindings: function HlmDropdownMenuLabel_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-inset", ctx.inset() ? "" : null);
+        } }, inputs: { inset: [1, "inset"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuLabel, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuLabel],hlm-dropdown-menu-label',
+                host: {
+                    'data-slot': 'dropdown-menu-label',
+                    '[attr.data-inset]': 'inset() ? "" : null',
+                },
+            }]
+    }], () => [], { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
+
+class HlmDropdownMenuRadio {
+    _cdkMenuItem = inject(CdkMenuItemRadio);
+    checked = input(this._cdkMenuItem.checked, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(this._cdkMenuItem.disabled, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        classes(() => 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50');
+    }
+    static ɵfac = function HlmDropdownMenuRadio_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuRadio)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuRadio, selectors: [["", "hlmDropdownMenuRadio", ""]], hostAttrs: ["data-slot", "dropdown-menu-radio-item"], hostVars: 2, hostBindings: function HlmDropdownMenuRadio_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-disabled", ctx.disabled() ? "" : null)("data-checked", ctx.checked() ? "" : null);
+        } }, inputs: { checked: [1, "checked"], disabled: [1, "disabled"] }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$4.CdkMenuItemRadio, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuItemChecked", "checked"], outputs: ["cdkMenuItemTriggered", "triggered"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuRadio, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuRadio]',
+                hostDirectives: [
+                    {
+                        directive: CdkMenuItemRadio,
+                        inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+                        outputs: ['cdkMenuItemTriggered: triggered'],
+                    },
+                ],
+                host: {
+                    'data-slot': 'dropdown-menu-radio-item',
+                    '[attr.data-disabled]': 'disabled() ? "" : null',
+                    '[attr.data-checked]': 'checked() ? "" : null',
+                },
+            }]
+    }], () => [], { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] }); })();
+
+class HlmDropdownMenuRadioIndicator {
+    constructor() {
+        classes(() => 'pointer-events-none absolute start-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100');
+    }
+    static ɵfac = function HlmDropdownMenuRadioIndicator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuRadioIndicator)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDropdownMenuRadioIndicator, selectors: [["hlm-dropdown-menu-radio-indicator"]], features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorCircle })])], decls: 1, vars: 0, consts: [["name", "phosphorCircle", 1, "text-[0.5rem]", "*:[svg]:fill-current"]], template: function HlmDropdownMenuRadioIndicator_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "ng-icon", 0);
+        } }, dependencies: [NgIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuRadioIndicator, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-dropdown-menu-radio-indicator',
+                imports: [NgIcon],
+                providers: [provideIcons({ phosphorCircle })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: ` <ng-icon name="phosphorCircle" class="text-[0.5rem] *:[svg]:fill-current" /> `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmDropdownMenuRadioIndicator, { className: "HlmDropdownMenuRadioIndicator", filePath: "lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-radio-indicator.ts", lineNumber: 13 }); })();
+
+class HlmDropdownMenuSeparator {
+    constructor() {
+        classes(() => 'bg-border -mx-1 my-1 block h-px');
+    }
+    static ɵfac = function HlmDropdownMenuSeparator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuSeparator)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuSeparator, selectors: [["", "hlmDropdownMenuSeparator", ""], ["hlm-dropdown-menu-separator"]], hostAttrs: ["data-slot", "dropdown-menu-separator"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuSeparator, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator',
+                host: {
+                    'data-slot': 'dropdown-menu-separator',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmDropdownMenuShortcut {
+    constructor() {
+        classes(() => 'text-muted-foreground ml-auto text-xs tracking-widest');
+    }
+    static ɵfac = function HlmDropdownMenuShortcut_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuShortcut)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuShortcut, selectors: [["", "hlmDropdownMenuShortcut", ""], ["hlm-dropdown-menu-shortcut"]], hostAttrs: ["data-slot", "dropdown-menu-shortcut"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuShortcut, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuShortcut],hlm-dropdown-menu-shortcut',
+                host: {
+                    'data-slot': 'dropdown-menu-shortcut',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmDropdownMenuSub {
+    _host = inject(CdkMenu);
+    _state = signal('open', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    _side = signal('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_side" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.setSideWithDarkMagic();
+        // this is a best effort, but does not seem to work currently
+        // TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+        this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+        classes(() => 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-top overflow-hidden rounded-md border p-1 shadow-lg');
+    }
+    setSideWithDarkMagic() {
+        /**
+         * This is an ugly workaround to at least figure out the correct side of where a submenu
+         * will appear and set the attribute to the host accordingly
+         *
+         * First of all we take advantage of the menu stack not being aware of the root
+         * object immediately after it is added. This code executes before the root element is added,
+         * which means the stack is still empty and the peek method returns undefined.
+         */
+        const isRoot = this._host.menuStack.peek() === undefined;
+        setTimeout(() => {
+            // our menu trigger directive leaves the last position used for use immediately after opening
+            // we can access it here and determine the correct side.
+            // eslint-disable-next-line
+            const ps = this._host._parentTrigger._spartanLastPosition;
+            if (!ps) {
+                // if we have no last position we default to the most likely option
+                // I hate that we have to do this and hope we can revisit soon and improve
+                this._side.set(isRoot ? 'top' : 'left');
+                return;
+            }
+            const side = isRoot ? ps.originY : ps.originX === 'end' ? 'right' : 'left';
+            this._side.set(side);
+        });
+    }
+    static ɵfac = function HlmDropdownMenuSub_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuSub)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuSub, selectors: [["", "hlmDropdownMenuSub", ""], ["hlm-dropdown-menu-sub"]], hostAttrs: ["data-slot", "dropdown-menu-sub"], hostVars: 2, hostBindings: function HlmDropdownMenuSub_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-state", ctx._state())("data-side", ctx._side());
+        } }, features: [i0.ɵɵHostDirectivesFeature([i1$4.CdkMenu])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuSub, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuSub],hlm-dropdown-menu-sub',
+                hostDirectives: [CdkMenu],
+                host: {
+                    'data-slot': 'dropdown-menu-sub',
+                    '[attr.data-state]': '_state()',
+                    '[attr.data-side]': '_side()',
+                },
+            }]
+    }], () => [], null); })();
+
+const defaultConfig$1 = {
+    align: 'start',
+    side: 'bottom',
+};
+const HlmDropdownMenuConfigToken = new InjectionToken('HlmDropdownMenuConfig');
+function provideHlmDropdownMenuConfig(config) {
+    return { provide: HlmDropdownMenuConfigToken, useValue: { ...defaultConfig$1, ...config } };
+}
+function injectHlmDropdownMenuConfig() {
+    return inject(HlmDropdownMenuConfigToken, { optional: true }) ?? defaultConfig$1;
+}
+
+class HlmDropdownMenuTrigger {
+    _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+    _config = injectHlmDropdownMenuConfig();
+    align = input(this._config.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    side = input(this._config.side, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    _menuPosition = computed(() => createMenuPosition(this.align(), this.side()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_menuPosition" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // once the trigger opens we wait until the next tick and then grab the last position
+        // used to position the menu. we store this in our trigger which the brnMenu directive has
+        // access to through DI
+        this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() => setTimeout(() => 
+        // eslint-disable-next-line
+        (this._cdkTrigger._spartanLastPosition = // eslint-disable-next-line
+            this._cdkTrigger.overlayRef._positionStrategy._lastPosition)));
+        effect(() => {
+            this._cdkTrigger.menuPosition = this._menuPosition();
+        });
+    }
+    static ɵfac = function HlmDropdownMenuTrigger_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDropdownMenuTrigger)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDropdownMenuTrigger, selectors: [["", "hlmDropdownMenuTrigger", ""]], hostAttrs: ["data-slot", "dropdown-menu-trigger"], inputs: { align: [1, "align"], side: [1, "side"] }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$4.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "hlmDropdownMenuTrigger", "cdkMenuTriggerData", "hlmDropdownMenuTriggerData"], outputs: ["cdkMenuOpened", "hlmDropdownMenuOpened", "cdkMenuClosed", "hlmDropdownMenuClosed"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDropdownMenuTrigger, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmDropdownMenuTrigger]',
+                hostDirectives: [
+                    {
+                        directive: CdkMenuTrigger,
+                        inputs: [
+                            'cdkMenuTriggerFor: hlmDropdownMenuTrigger',
+                            'cdkMenuTriggerData: hlmDropdownMenuTriggerData',
+                        ],
+                        outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
+                    },
+                ],
+                host: {
+                    'data-slot': 'dropdown-menu-trigger',
+                },
+            }]
+    }], () => [], { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }] }); })();
+
+const HlmDropdownMenuImports = [
+    HlmDropdownMenu,
+    HlmDropdownMenuCheckbox,
+    HlmDropdownMenuCheckboxIndicator,
+    HlmDropdownMenuGroup,
+    HlmDropdownMenuItem,
+    HlmDropdownMenuItemSubIndicator,
+    HlmDropdownMenuLabel,
+    HlmDropdownMenuRadio,
+    HlmDropdownMenuRadioIndicator,
+    HlmDropdownMenuSeparator,
+    HlmDropdownMenuShortcut,
+    HlmDropdownMenuSub,
+    HlmDropdownMenuTrigger,
+];
+
+const fieldVariants = cva('data-[matches-spartan-invalid=true]:text-destructive gap-3 group/field flex w-full', {
+    variants: {
+        orientation: {
+            vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+            horizontal: [
+                'flex-row items-center',
+                '*:data-[slot=field-label]:flex-auto',
+                'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            ],
+            responsive: [
+                'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto',
+                '@md/field-group:*:data-[slot=field-label]:flex-auto',
+                '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            ],
+        },
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+    },
+});
+class HlmField {
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => fieldVariants({ orientation: this.orientation() }));
+    }
+    static ɵfac = function HlmField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmField)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmField, selectors: [["", "hlmField", ""], ["hlm-field"]], hostAttrs: ["role", "group", "data-slot", "field"], hostVars: 1, hostBindings: function HlmField_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-orientation", ctx.orientation());
+        } }, inputs: { orientation: [1, "orientation"] }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$3.BrnField, inputs: ["data-invalid", "data-invalid", "forceInvalid", "forceInvalid"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmField, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmField],hlm-field',
+                hostDirectives: [{ directive: BrnField, inputs: ['data-invalid', 'forceInvalid'] }],
+                host: {
+                    role: 'group',
+                    'data-slot': 'field',
+                    '[attr.data-orientation]': 'orientation()',
+                },
+            }]
+    }], () => [], { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] }); })();
+
+class HlmFieldContent {
+    constructor() {
+        classes(() => 'gap-1 group/field-content flex flex-1 flex-col leading-snug');
+    }
+    static ɵfac = function HlmFieldContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldContent)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmFieldContent, selectors: [["", "hlmFieldContent", ""], ["hlm-field-content"]], hostAttrs: ["data-slot", "field-content"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldContent, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmFieldContent],hlm-field-content',
+                host: { 'data-slot': 'field-content' },
+            }]
+    }], () => [], null); })();
+
+class HlmFieldDescription {
+    static _id = 0;
+    _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+    id = input(`hlm-field-description-${HlmFieldDescription._id++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    _registeredId;
+    _cleanup = this._a11y
+        ? effect(() => {
+            const a11y = this._a11y;
+            if (!a11y)
+                return;
+            const id = this.id();
+            if (this._registeredId && this._registeredId !== id) {
+                a11y.unregisterDescription(this._registeredId);
+            }
+            if (this._registeredId !== id) {
+                a11y.registerDescription(id);
+                this._registeredId = id;
+            }
+        })
+        : null;
+    constructor() {
+        classes(() => [
+            'text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance',
+            'last:mt-0 nth-last-2:-mt-1',
+            '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        ]);
+    }
+    ngOnDestroy() {
+        this._cleanup?.destroy();
+        if (this._registeredId) {
+            this._a11y?.unregisterDescription(this._registeredId);
+        }
+    }
+    static ɵfac = function HlmFieldDescription_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldDescription)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmFieldDescription, selectors: [["", "hlmFieldDescription", ""], ["hlm-field-description"]], hostAttrs: ["data-slot", "field-description"], hostVars: 1, hostBindings: function HlmFieldDescription_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("id", ctx.id());
+        } }, inputs: { id: [1, "id"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldDescription, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmFieldDescription],hlm-field-description',
+                host: {
+                    'data-slot': 'field-description',
+                    '[attr.id]': 'id()',
+                },
+            }]
+    }], () => [], { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] }); })();
+
+const _c0$7 = ["*"];
+function HlmFieldError_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵprojection(0);
+} }
+class HlmFieldError {
+    static _id = 0;
+    _field = inject(BrnField, { optional: true });
+    _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+    _registeredId;
+    _hasParentField = !!this._field;
+    /** The unique ID for the field error. If none is supplied, it will be auto-generated. */
+    id = input(`hlm-field-error-${HlmFieldError._id++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * The name of the specific validator error key to match (e.g. 'required').
+     * When omitted, the error is shown if any validation error is present.
+     */
+    validator = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validator" }] : /* istanbul ignore next */ []));
+    /** Forces the error message to be visible regardless of the control's validation state. */
+    forceShow = input(false, { ...(ngDevMode ? { debugName: "forceShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _display = computed(() => !this._hasParentField || this.forceShow() || this._hasError(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_display" }] : /* istanbul ignore next */ []));
+    _hasError = computed(() => {
+        const errors = this._field?.errors();
+        if (!errors)
+            return false;
+        const validator = this.validator();
+        const spartanInvalid = this._field?.controlState()?.spartanInvalid;
+        if (!spartanInvalid)
+            return false;
+        return validator ? validator in errors : Object.keys(errors).length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasError" }] : /* istanbul ignore next */ []));
+    _cleanup = this._a11y
+        ? effect(() => {
+            const a11y = this._a11y;
+            if (!a11y)
+                return;
+            const id = this.id();
+            const hasError = this._hasError();
+            if (this._registeredId && (this._registeredId !== id || !hasError)) {
+                a11y.unregisterError(this._registeredId);
+                this._registeredId = undefined;
+            }
+            if (hasError && this._registeredId !== id) {
+                a11y.registerError(id);
+                this._registeredId = id;
+            }
+        })
+        : null;
+    constructor() {
+        classes(() => 'text-destructive text-sm font-normal');
+    }
+    ngOnDestroy() {
+        this._cleanup?.destroy();
+        if (this._registeredId) {
+            this._a11y?.unregisterError(this._registeredId);
+        }
+    }
+    static ɵfac = function HlmFieldError_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldError)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmFieldError, selectors: [["hlm-field-error"]], hostAttrs: ["role", "alert", "data-slot", "field-error"], hostVars: 2, hostBindings: function HlmFieldError_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵdomProperty("hidden", !ctx._display());
+            i0.ɵɵattribute("id", ctx.id());
+        } }, inputs: { id: [1, "id"], validator: [1, "validator"], forceShow: [1, "forceShow"] }, ngContentSelectors: _c0$7, decls: 1, vars: 1, template: function HlmFieldError_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵconditionalCreate(0, HlmFieldError_Conditional_0_Template, 1, 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx._display() ? 0 : -1);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldError, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-field-error',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    role: 'alert',
+                    'data-slot': 'field-error',
+                    '[attr.id]': 'id()',
+                    '[hidden]': '!_display()',
+                },
+                template: `
+    @if (_display()) {
+      <ng-content />
+    }
+  `,
+            }]
+    }], () => [], { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], forceShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceShow", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmFieldError, { className: "HlmFieldError", filePath: "lib/ui/field/src/lib/hlm-field-error.ts", lineNumber: 31 }); })();
+
+class HlmFieldGroup {
+    constructor() {
+        classes(() => 'gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col');
+    }
+    static ɵfac = function HlmFieldGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldGroup)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmFieldGroup, selectors: [["", "hlmFieldGroup", ""], ["hlm-field-group"]], hostAttrs: ["data-slot", "field-group"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldGroup, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmFieldGroup],hlm-field-group',
+                host: { 'data-slot': 'field-group' },
+            }]
+    }], () => [], null); })();
+
+class HlmLabel {
+    constructor() {
+        classes(() => 'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed');
+    }
+    static ɵfac = function HlmLabel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmLabel)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmLabel, selectors: [["", "hlmLabel", ""]], hostAttrs: ["data-slot", "label"], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$5.BrnLabel, inputs: ["id", "id", "for", "for"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmLabel, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmLabel]',
+                hostDirectives: [{ directive: BrnLabel, inputs: ['id', 'for'] }],
+                host: { 'data-slot': 'label' },
+            }]
+    }], () => [], null); })();
+
+const HlmLabelImports = [HlmLabel];
+
+class HlmFieldLabel {
+    constructor() {
+        classes(() => [
+            'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit',
+            'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        ]);
+    }
+    static ɵfac = function HlmFieldLabel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldLabel)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmFieldLabel, selectors: [["", "hlmFieldLabel", ""], ["hlm-field-label"]], hostAttrs: ["data-slot", "field-label"], features: [i0.ɵɵHostDirectivesFeature([HlmLabel])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldLabel, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmFieldLabel],hlm-field-label',
+                hostDirectives: [HlmLabel],
+                host: { 'data-slot': 'field-label' },
+            }]
+    }], () => [], null); })();
+
+class HlmFieldLegend {
+    variant = input('legend', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => 'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base');
+    }
+    static ɵfac = function HlmFieldLegend_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldLegend)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmFieldLegend, selectors: [["legend", "hlmFieldLegend", ""]], hostAttrs: ["data-slot", "field-legend"], hostVars: 1, hostBindings: function HlmFieldLegend_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-variant", ctx.variant());
+        } }, inputs: { variant: [1, "variant"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldLegend, [{
+        type: Directive,
+        args: [{
+                selector: 'legend[hlmFieldLegend]',
+                host: {
+                    'data-slot': 'field-legend',
+                    '[attr.data-variant]': 'variant()',
+                },
+            }]
+    }], () => [], { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
+
+const hlmSeparatorClass = 'inline-flex shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch';
+class HlmSeparator {
+    constructor() {
+        classes(() => hlmSeparatorClass);
+    }
+    static ɵfac = function HlmSeparator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSeparator)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSeparator, selectors: [["", "hlmSeparator", ""], ["hlm-separator"]], hostAttrs: ["data-slot", "separator"], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$6.BrnSeparator, inputs: ["orientation", "orientation", "decorative", "decorative"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSeparator, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSeparator],hlm-separator',
+                hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+                host: {
+                    'data-slot': 'separator',
+                },
+            }]
+    }], () => [], null); })();
+
+const HlmSeparatorImports = [HlmSeparator];
+
+const _c0$6 = ["*"];
+class HlmFieldSeparator {
+    constructor() {
+        classes(() => '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative');
+    }
+    static ɵfac = function HlmFieldSeparator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldSeparator)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmFieldSeparator, selectors: [["hlm-field-separator"]], hostAttrs: ["data-slot", "field-separator"], ngContentSelectors: _c0$6, decls: 3, vars: 0, consts: [[1, "absolute", "inset-0", "top-1/2"], ["data-slot", "field-separator-content", 1, "text-muted-foreground", "px-2", "bg-background", "relative", "mx-auto", "block", "w-fit"]], template: function HlmFieldSeparator_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelement(0, "hlm-separator", 0);
+            i0.ɵɵelementStart(1, "span", 1);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelementEnd();
+        } }, dependencies: [HlmSeparator], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldSeparator, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-field-separator',
+                imports: [HlmSeparator],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: { 'data-slot': 'field-separator' },
+                template: `
+    <hlm-separator class="absolute inset-0 top-1/2" />
+    <span
+      data-slot="field-separator-content"
+      class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+    >
+      <ng-content />
+    </span>
+  `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmFieldSeparator, { className: "HlmFieldSeparator", filePath: "lib/ui/field/src/lib/hlm-field-separator.ts", lineNumber: 20 }); })();
+
+class HlmFieldSet {
+    constructor() {
+        classes(() => 'gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col');
+    }
+    static ɵfac = function HlmFieldSet_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldSet)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmFieldSet, selectors: [["fieldset", "hlmFieldSet", ""]], hostAttrs: ["data-slot", "field-set"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldSet, [{
+        type: Directive,
+        args: [{
+                selector: 'fieldset[hlmFieldSet]',
+                host: { 'data-slot': 'field-set' },
+            }]
+    }], () => [], null); })();
+
+class HlmFieldTitle {
+    constructor() {
+        classes(() => 'gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center');
+    }
+    static ɵfac = function HlmFieldTitle_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmFieldTitle)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmFieldTitle, selectors: [["", "hlmFieldTitle", ""], ["hlm-field-title"]], hostAttrs: ["data-slot", "field-label"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmFieldTitle, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmFieldTitle],hlm-field-title',
+                host: { 'data-slot': 'field-label' },
+            }]
+    }], () => [], null); })();
+
+const HlmFieldImports = [
+    HlmField,
+    HlmFieldContent,
+    HlmFieldDescription,
+    HlmFieldError,
+    HlmFieldGroup,
+    HlmFieldLabel,
+    HlmFieldLegend,
+    HlmFieldSeparator,
+    HlmFieldSet,
+    HlmFieldTitle,
+];
+
+class HlmInput {
+    constructor() {
+        classes(() => 'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50');
+    }
+    static ɵfac = function HlmInput_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmInput)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmInput, selectors: [["", "hlmInput", ""]], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$7.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, i1$3.BrnFieldControlDescribedBy])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmInput, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmInput]',
+                hostDirectives: [
+                    { directive: BrnInput, inputs: ['id', 'forceInvalid'] },
+                    BrnFieldControlDescribedBy,
+                ],
+            }]
+    }], () => [], null); })();
+
+const HlmInputImports = [HlmInput];
+
+class HlmInputGroup {
+    constructor() {
+        classes(() => 'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto');
+    }
+    static ɵfac = function HlmInputGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmInputGroup)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmInputGroup, selectors: [["", "hlmInputGroup", ""], ["hlm-input-group"]], hostAttrs: ["data-slot", "input-group", "role", "group"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmInputGroup, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmInputGroup],hlm-input-group',
+                host: {
+                    'data-slot': 'input-group',
+                    role: 'group',
+                },
+            }]
+    }], () => [], null); })();
+
+const inputGroupAddonVariants$1 = cva("text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] flex cursor-text items-center justify-center select-none", {
+    variants: {
+        align: {
+            'inline-start': 'ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem] order-first',
+            'inline-end': 'pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem] order-last',
+            'block-start': 'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+            'block-end': 'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+class HlmInputGroupAddon {
+    align = input('inline-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => inputGroupAddonVariants$1({ align: this.align() }));
+    }
+    static ɵfac = function HlmInputGroupAddon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmInputGroupAddon)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmInputGroupAddon, selectors: [["", "hlmInputGroupAddon", ""], ["hlm-input-group-addon"]], hostAttrs: ["role", "group", "data-slot", "input-group-addon"], hostVars: 1, hostBindings: function HlmInputGroupAddon_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-align", ctx.align());
+        } }, inputs: { align: [1, "align"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmInputGroupAddon, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmInputGroupAddon],hlm-input-group-addon',
+                host: {
+                    role: 'group',
+                    'data-slot': 'input-group-addon',
+                    '[attr.data-align]': 'align()',
+                },
+            }]
+    }], () => [], { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] }); })();
+
+const inputGroupAddonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)]",
+            sm: '',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>ng-icon]:p-0',
+            'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+class HlmInputGroupButton {
+    size = input('xs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => inputGroupAddonVariants({ size: this.size() }));
+    }
+    static ɵfac = function HlmInputGroupButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmInputGroupButton)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmInputGroupButton, selectors: [["button", "hlmInputGroupButton", ""]], hostVars: 2, hostBindings: function HlmInputGroupButton_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵdomProperty("type", ctx.type());
+            i0.ɵɵattribute("data-size", ctx.size());
+        } }, inputs: { size: [1, "size"], type: [1, "type"] }, features: [i0.ɵɵProvidersFeature([
+                provideBrnButtonConfig({
+                    variant: 'ghost',
+                }),
+            ]), i0.ɵɵHostDirectivesFeature([{ directive: HlmButton, inputs: ["variant", "variant"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmInputGroupButton, [{
+        type: Directive,
+        args: [{
+                selector: 'button[hlmInputGroupButton]',
+                providers: [
+                    provideBrnButtonConfig({
+                        variant: 'ghost',
+                    }),
+                ],
+                hostDirectives: [
+                    {
+                        directive: HlmButton,
+                        inputs: ['variant'],
+                    },
+                ],
+                host: {
+                    '[attr.data-size]': 'size()',
+                    '[type]': 'type()',
+                },
+            }]
+    }], () => [], { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] }); })();
+
+class HlmInputGroupInput {
+    constructor() {
+        classes(() => `rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1`);
+    }
+    static ɵfac = function HlmInputGroupInput_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmInputGroupInput)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmInputGroupInput, selectors: [["input", "hlmInputGroupInput", ""]], hostAttrs: ["data-slot", "input-group-control"], features: [i0.ɵɵHostDirectivesFeature([HlmInput])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmInputGroupInput, [{
+        type: Directive,
+        args: [{
+                selector: 'input[hlmInputGroupInput]',
+                hostDirectives: [HlmInput],
+                host: { 'data-slot': 'input-group-control' },
+            }]
+    }], () => [], null); })();
+
+class HlmInputGroupText {
+    constructor() {
+        classes(() => "text-muted-foreground gap-2 text-sm [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] flex items-center [&_ng-icon]:pointer-events-none");
+    }
+    static ɵfac = function HlmInputGroupText_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmInputGroupText)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmInputGroupText, selectors: [["", "hlmInputGroupText", ""], ["hlm-input-group-text"]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmInputGroupText, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmInputGroupText],hlm-input-group-text',
+            }]
+    }], () => [], null); })();
+
+class HlmTextarea {
+    constructor() {
+        classes(() => 'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50');
+    }
+    static ɵfac = function HlmTextarea_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTextarea)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTextarea, selectors: [["", "hlmTextarea", ""]], hostAttrs: ["data-slot", "textarea"], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$8.BrnTextarea, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, i1$3.BrnFieldControlDescribedBy])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTextarea, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmTextarea]',
+                hostDirectives: [
+                    { directive: BrnTextarea, inputs: ['id', 'forceInvalid'] },
+                    BrnFieldControlDescribedBy,
+                ],
+                host: { 'data-slot': 'textarea' },
+            }]
+    }], () => [], null); })();
+
+const HlmTextareaImports = [HlmTextarea];
+
+class HlmInputGroupTextarea {
+    constructor() {
+        classes(() => 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1 resize-none');
+    }
+    static ɵfac = function HlmInputGroupTextarea_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmInputGroupTextarea)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmInputGroupTextarea, selectors: [["textarea", "hlmInputGroupTextarea", ""]], hostAttrs: ["data-slot", "input-group-control"], features: [i0.ɵɵHostDirectivesFeature([HlmTextarea])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmInputGroupTextarea, [{
+        type: Directive,
+        args: [{
+                selector: 'textarea[hlmInputGroupTextarea]',
+                hostDirectives: [HlmTextarea],
+                host: { 'data-slot': 'input-group-control' },
+            }]
+    }], () => [], null); })();
+
+const HlmInputGroupImports = [
+    HlmInputGroup,
+    HlmInputGroupAddon,
+    HlmInputGroupButton,
+    HlmInputGroupInput,
+    HlmInputGroupText,
+    HlmInputGroupTextarea,
+];
+
+class HlmSelect {
+    constructor() {
+        classes(() => 'block');
+    }
+    static ɵfac = function HlmSelect_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelect)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelect, selectors: [["", "hlmSelect", ""], ["hlm-select"]], hostAttrs: ["data-slot", "select"], features: [i0.ɵɵProvidersFeature([
+                provideBrnPopoverConfig({
+                    align: 'start',
+                    sideOffset: 6,
+                }),
+                provideBrnDialogDefaultOptions({
+                    autoFocus: 'first-heading',
+                }),
+            ]), i0.ɵɵHostDirectivesFeature([{ directive: i1$9.BrnSelect, inputs: ["disabled", "disabled", "value", "value", "isItemEqualToValue", "isItemEqualToValue", "itemToString", "itemToString"], outputs: ["valueChange", "valueChange"] }, { directive: i2.BrnPopover, inputs: ["align", "align", "autoFocus", "autoFocus", "closeDelay", "closeDelay", "closeOnOutsidePointerEvents", "closeOnOutsidePointerEvents", "sideOffset", "sideOffset", "state", "state", "offsetX", "offsetX", "restoreFocus", "restoreFocus"], outputs: ["stateChanged", "stateChanged", "closed", "closed"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelect, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSelect],hlm-select',
+                providers: [
+                    provideBrnPopoverConfig({
+                        align: 'start',
+                        sideOffset: 6,
+                    }),
+                    provideBrnDialogDefaultOptions({
+                        autoFocus: 'first-heading',
+                    }),
+                ],
+                hostDirectives: [
+                    {
+                        directive: BrnSelect,
+                        inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+                        outputs: ['valueChange'],
+                    },
+                    {
+                        directive: BrnPopover,
+                        inputs: [
+                            'align',
+                            'autoFocus',
+                            'closeDelay',
+                            'closeOnOutsidePointerEvents',
+                            'sideOffset',
+                            'state',
+                            'offsetX',
+                            'restoreFocus',
+                        ],
+                        outputs: ['stateChanged', 'closed'],
+                    },
+                ],
+                host: { 'data-slot': 'select' },
+            }]
+    }], () => [], null); })();
+
+class HlmSelectScrollDown {
+    constructor() {
+        classes(() => "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] sticky bottom-0 w-full data-hidden:hidden");
+    }
+    static ɵfac = function HlmSelectScrollDown_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectScrollDown)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSelectScrollDown, selectors: [["hlm-select-scroll-down"]], features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorCaretDown })]), i0.ɵɵHostDirectivesFeature([i1$9.BrnSelectScrollDown])], decls: 1, vars: 0, consts: [["name", "phosphorCaretDown"]], template: function HlmSelectScrollDown_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "ng-icon", 0);
+        } }, dependencies: [NgIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectScrollDown, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-select-scroll-down',
+                imports: [NgIcon],
+                providers: [provideIcons({ phosphorCaretDown })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                hostDirectives: [BrnSelectScrollDown],
+                template: ` <ng-icon name="phosphorCaretDown" /> `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSelectScrollDown, { className: "HlmSelectScrollDown", filePath: "lib/ui/select/src/lib/hlm-select-scroll-down.ts", lineNumber: 15 }); })();
+
+class HlmSelectScrollUp {
+    constructor() {
+        classes(() => "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] sticky top-0 w-full data-hidden:hidden");
+    }
+    static ɵfac = function HlmSelectScrollUp_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectScrollUp)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSelectScrollUp, selectors: [["hlm-select-scroll-up"]], features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorCaretUp })]), i0.ɵɵHostDirectivesFeature([i1$9.BrnSelectScrollUp])], decls: 1, vars: 0, consts: [["name", "phosphorCaretUp"]], template: function HlmSelectScrollUp_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "ng-icon", 0);
+        } }, dependencies: [NgIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectScrollUp, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-select-scroll-up',
+                imports: [NgIcon],
+                providers: [provideIcons({ phosphorCaretUp })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                hostDirectives: [BrnSelectScrollUp],
+                template: ` <ng-icon name="phosphorCaretUp" /> `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSelectScrollUp, { className: "HlmSelectScrollUp", filePath: "lib/ui/select/src/lib/hlm-select-scroll-up.ts", lineNumber: 15 }); })();
+
+const _c0$5 = ["*"];
+function HlmSelectContent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "hlm-select-scroll-up");
+} }
+function HlmSelectContent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "hlm-select-scroll-down");
+} }
+class HlmSelectContent {
+    _computedListboxClasses = computed(() => hlm('flex flex-col'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedListboxClasses" }] : /* istanbul ignore next */ []));
+    showScroll = input(false, { ...(ngDevMode ? { debugName: "showScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        classes(() => 'bg-popover no-scrollbar text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 max-h-72 min-w-36 flex-col rounded-md shadow-md ring-1 duration-100 relative flex w-(--brn-select-width) overflow-x-hidden overflow-y-auto');
+    }
+    static ɵfac = function HlmSelectContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectContent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSelectContent, selectors: [["hlm-select-content"]], inputs: { showScroll: [1, "showScroll"] }, features: [i0.ɵɵHostDirectivesFeature([i1$9.BrnSelectContent])], ngContentSelectors: _c0$5, decls: 4, vars: 4, consts: [["role", "listbox"]], template: function HlmSelectContent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵconditionalCreate(0, HlmSelectContent_Conditional_0_Template, 1, 0, "hlm-select-scroll-up");
+            i0.ɵɵelementStart(1, "div", 0);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(3, HlmSelectContent_Conditional_3_Template, 1, 0, "hlm-select-scroll-down");
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.showScroll() ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx._computedListboxClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showScroll() ? 3 : -1);
+        } }, dependencies: [HlmSelectScrollUp, HlmSelectScrollDown], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectContent, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-select-content',
+                imports: [HlmSelectScrollUp, HlmSelectScrollDown],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                hostDirectives: [BrnSelectContent],
+                template: `
+    @if (showScroll()) {
+      <hlm-select-scroll-up />
+    }
+
+    <div role="listbox" [class]="_computedListboxClasses()">
+      <ng-content />
+    </div>
+
+    @if (showScroll()) {
+      <hlm-select-scroll-down />
+    }
+  `,
+            }]
+    }], () => [], { showScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScroll", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSelectContent, { className: "HlmSelectContent", filePath: "lib/ui/select/src/lib/hlm-select-content.ts", lineNumber: 33 }); })();
+
+class HlmSelectGroup {
+    constructor() {
+        classes(() => 'scroll-my-1 p-1');
+    }
+    static ɵfac = function HlmSelectGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectGroup)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectGroup, selectors: [["", "hlmSelectGroup", ""], ["hlm-select-group"]], hostAttrs: ["data-slot", "select-group"], features: [i0.ɵɵHostDirectivesFeature([i1$9.BrnSelectGroup])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectGroup, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSelectGroup],hlm-select-group',
+                hostDirectives: [{ directive: BrnSelectGroup }],
+                host: { 'data-slot': 'select-group' },
+            }]
+    }], () => [], null); })();
+
+const _c0$4 = ["*"];
+function HlmSelectItem_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ng-icon", 0);
+} }
+class HlmSelectItem {
+    _brnSelectItem = inject(BrnSelectItem);
+    _active = this._brnSelectItem.active;
+    constructor() {
+        classes(() => 'data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0');
+    }
+    static ɵfac = function HlmSelectItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectItem)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSelectItem, selectors: [["hlm-select-item"]], hostAttrs: ["data-slot", "select-item"], features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorCheck })]), i0.ɵɵHostDirectivesFeature([{ directive: i1$9.BrnSelectItem, inputs: ["id", "id", "disabled", "disabled", "value", "value"] }])], ngContentSelectors: _c0$4, decls: 2, vars: 1, consts: [["name", "phosphorCheck", "aria-hidden", "true", 1, "absolute", "end-2", "flex", "items-center", "justify-center", "text-[calc(var(--spacing)*4)]"]], template: function HlmSelectItem_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+            i0.ɵɵconditionalCreate(1, HlmSelectItem_Conditional_1_Template, 1, 0, "ng-icon", 0);
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx._active() ? 1 : -1);
+        } }, dependencies: [NgIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectItem, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-select-item',
+                imports: [NgIcon],
+                providers: [provideIcons({ phosphorCheck })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                hostDirectives: [{ directive: BrnSelectItem, inputs: ['id', 'disabled', 'value'] }],
+                host: { 'data-slot': 'select-item' },
+                template: `
+    <ng-content />
+    @if (_active()) {
+      <ng-icon
+        name="phosphorCheck"
+        class="absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*4)]"
+        aria-hidden="true"
+      />
+    }
+  `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSelectItem, { className: "HlmSelectItem", filePath: "lib/ui/select/src/lib/hlm-select-item.ts", lineNumber: 25 }); })();
+
+class HlmSelectLabel {
+    constructor() {
+        classes(() => 'text-muted-foreground px-2 py-1.5 text-xs flex');
+    }
+    static ɵfac = function HlmSelectLabel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectLabel)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectLabel, selectors: [["", "hlmSelectLabel", ""], ["hlm-select-label"]], hostAttrs: ["data-slot", "select-label"], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$9.BrnSelectLabel, inputs: ["id", "id"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectLabel, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSelectLabel],hlm-select-label',
+                hostDirectives: [{ directive: BrnSelectLabel, inputs: ['id'] }],
+                host: { 'data-slot': 'select-label' },
+            }]
+    }], () => [], null); })();
+
+class HlmSelectMultiple {
+    constructor() {
+        classes(() => 'block');
+    }
+    static ɵfac = function HlmSelectMultiple_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectMultiple)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectMultiple, selectors: [["", "hlmSelectMultiple", ""], ["hlm-select-multiple"]], hostAttrs: ["data-slot", "select"], features: [i0.ɵɵProvidersFeature([
+                provideBrnPopoverConfig({
+                    align: 'start',
+                    sideOffset: 6,
+                }),
+                provideBrnDialogDefaultOptions({
+                    autoFocus: 'first-heading',
+                }),
+            ]), i0.ɵɵHostDirectivesFeature([{ directive: i1$9.BrnSelectMultiple, inputs: ["disabled", "disabled", "value", "value", "isItemEqualToValue", "isItemEqualToValue", "itemToString", "itemToString"], outputs: ["valueChange", "valueChange"] }, { directive: i2.BrnPopover, inputs: ["align", "align", "autoFocus", "autoFocus", "closeDelay", "closeDelay", "closeOnOutsidePointerEvents", "closeOnOutsidePointerEvents", "sideOffset", "sideOffset", "state", "state", "offsetX", "offsetX", "restoreFocus", "restoreFocus"], outputs: ["stateChanged", "stateChanged", "closed", "closed"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectMultiple, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSelectMultiple],hlm-select-multiple',
+                providers: [
+                    provideBrnPopoverConfig({
+                        align: 'start',
+                        sideOffset: 6,
+                    }),
+                    provideBrnDialogDefaultOptions({
+                        autoFocus: 'first-heading',
+                    }),
+                ],
+                hostDirectives: [
+                    {
+                        directive: BrnSelectMultiple,
+                        inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+                        outputs: ['valueChange'],
+                    },
+                    {
+                        directive: BrnPopover,
+                        inputs: [
+                            'align',
+                            'autoFocus',
+                            'closeDelay',
+                            'closeOnOutsidePointerEvents',
+                            'sideOffset',
+                            'state',
+                            'offsetX',
+                            'restoreFocus',
+                        ],
+                        outputs: ['stateChanged', 'closed'],
+                    },
+                ],
+                host: { 'data-slot': 'select' },
+            }]
+    }], () => [], null); })();
+
+class HlmSelectPlaceholder {
+    constructor() {
+        classes(() => "gap-2 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] flex items-center data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0");
+    }
+    static ɵfac = function HlmSelectPlaceholder_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectPlaceholder)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectPlaceholder, selectors: [["", "hlmSelectPlaceholder", ""], ["hlm-select-placeholder"]], hostAttrs: ["data-slot", "select-placeholder"], features: [i0.ɵɵHostDirectivesFeature([i1$9.BrnSelectPlaceholder])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectPlaceholder, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSelectPlaceholder],hlm-select-placeholder',
+                hostDirectives: [BrnSelectPlaceholder],
+                host: { 'data-slot': 'select-placeholder' },
+            }]
+    }], () => [], null); })();
+
+class HlmSelectPortal {
+    static ɵfac = function HlmSelectPortal_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectPortal)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectPortal, selectors: [["", "hlmSelectPortal", ""]], features: [i0.ɵɵHostDirectivesFeature([{ directive: i2.BrnPopoverContent, inputs: ["context", "context", "class", "class"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectPortal, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSelectPortal]',
+                hostDirectives: [{ directive: BrnPopoverContent, inputs: ['context', 'class'] }],
+            }]
+    }], null, null); })();
+
+class HlmSelectSeparator {
+    constructor() {
+        classes(() => 'bg-border -mx-1 my-1 h-px pointer-events-none');
+    }
+    static ɵfac = function HlmSelectSeparator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectSeparator)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectSeparator, selectors: [["", "hlmSelectSeparator", ""], ["hlm-select-separator"]], hostAttrs: ["data-slot", "select-separator"], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$9.BrnSelectSeparator, inputs: ["orientation", "orientation"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectSeparator, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSelectSeparator],hlm-select-separator',
+                hostDirectives: [{ directive: BrnSelectSeparator, inputs: ['orientation'] }],
+                host: { 'data-slot': 'select-separator' },
+            }]
+    }], () => [], null); })();
+
+const _c0$3 = ["*"];
+class HlmSelectTrigger {
+    static _id = 0;
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-1.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    buttonId = input(`hlm-select-trigger-${HlmSelectTrigger._id++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether to force the trigger into an invalid state. */
+    forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = function HlmSelectTrigger_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectTrigger)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSelectTrigger, selectors: [["hlm-select-trigger"]], inputs: { userClass: [1, "class", "userClass"], buttonId: [1, "buttonId"], size: [1, "size"], forceInvalid: [1, "forceInvalid"] }, features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorCaretUpDown })])], ngContentSelectors: _c0$3, decls: 3, vars: 5, consts: [["brnSelectTrigger", "", "brnFieldControlDescribedBy", "", "data-slot", "select-trigger", 3, "forceInvalid", "id"], ["name", "phosphorCaretUpDown", 1, "text-muted-foreground", "text-[calc(var(--spacing)*4)]", "ms-auto"]], template: function HlmSelectTrigger_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵelement(2, "ng-icon", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx._computedClass());
+            i0.ɵɵproperty("forceInvalid", ctx.forceInvalid())("id", ctx.buttonId());
+            i0.ɵɵattribute("data-size", ctx.size());
+        } }, dependencies: [NgIcon, BrnSelectTrigger, BrnFieldControlDescribedBy], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectTrigger, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-select-trigger',
+                imports: [NgIcon, BrnSelectTrigger, BrnFieldControlDescribedBy],
+                providers: [provideIcons({ phosphorCaretUpDown })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <button
+      brnSelectTrigger
+      brnFieldControlDescribedBy
+      [forceInvalid]="forceInvalid()"
+      [id]="buttonId()"
+      [class]="_computedClass()"
+      [attr.data-size]="size()"
+      data-slot="select-trigger"
+    >
+      <ng-content />
+      <ng-icon
+        name="phosphorCaretUpDown"
+        class="text-muted-foreground text-[calc(var(--spacing)*4)] ms-auto"
+      />
+    </button>
+  `,
+            }]
+    }], null, { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSelectTrigger, { className: "HlmSelectTrigger", filePath: "lib/ui/select/src/lib/hlm-select-trigger.ts", lineNumber: 40 }); })();
+
+class HlmSelectValue {
+    _brnSelectValue = inject(BrnSelectValue);
+    _hidden = this._brnSelectValue.hidden;
+    constructor() {
+        classes(() => 'data-hidden:hidden');
+    }
+    static ɵfac = function HlmSelectValue_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectValue)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectValue, selectors: [["", "hlmSelectValue", ""], ["hlm-select-value"]], hostVars: 1, hostBindings: function HlmSelectValue_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-slot", !ctx._hidden() ? "select-value" : null);
+        } }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$9.BrnSelectValue, inputs: ["placeholder", "placeholder"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectValue, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSelectValue],hlm-select-value',
+                hostDirectives: [{ directive: BrnSelectValue, inputs: ['placeholder'] }],
+                host: { '[attr.data-slot]': '!_hidden() ? "select-value" : null' },
+            }]
+    }], () => [], null); })();
+
+class HlmSelectValueTemplate {
+    static ɵfac = function HlmSelectValueTemplate_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectValueTemplate)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectValueTemplate, selectors: [["", "hlmSelectValueTemplate", ""]], features: [i0.ɵɵHostDirectivesFeature([i1$9.BrnSelectValueTemplate])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectValueTemplate, [{
+        type: Directive,
+        args: [{ selector: '[hlmSelectValueTemplate]', hostDirectives: [BrnSelectValueTemplate] }]
+    }], null, null); })();
+
+class HlmSelectValues {
+    static ɵfac = function HlmSelectValues_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectValues)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectValues, selectors: [["", "hlmSelectValues", ""]], features: [i0.ɵɵHostDirectivesFeature([i1$9.BrnSelectValues])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectValues, [{
+        type: Directive,
+        args: [{ selector: '[hlmSelectValues]', hostDirectives: [BrnSelectValues] }]
+    }], null, null); })();
+
+class HlmSelectValuesContent {
+    constructor() {
+        classes(() => 'gap-2 flex');
+    }
+    static ɵfac = function HlmSelectValuesContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectValuesContent)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectValuesContent, selectors: [["", "hlmSelectValuesContent", ""], ["hlm-select-values-content"]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectValuesContent, [{
+        type: Directive,
+        args: [{ selector: '[hlmSelectValuesContent],hlm-select-values-content' }]
+    }], () => [], null); })();
+
+const HlmSelectImports = [
+    HlmSelect,
+    HlmSelectContent,
+    HlmSelectGroup,
+    HlmSelectItem,
+    HlmSelectLabel,
+    HlmSelectMultiple,
+    HlmSelectPlaceholder,
+    HlmSelectPortal,
+    HlmSelectScrollDown,
+    HlmSelectScrollUp,
+    HlmSelectSeparator,
+    HlmSelectTrigger,
+    HlmSelectValue,
+    HlmSelectValues,
+    HlmSelectValuesContent,
+    HlmSelectValueTemplate,
+];
+
+const defaultConfig = {
+    sidebarWidth: '16rem',
+    sidebarWidthMobile: '18rem',
+    sidebarWidthIcon: '3rem',
+    sidebarCookieName: 'sidebar_state',
+    sidebarCookieMaxAge: 60 * 60 * 24 * 7, // 7 days in seconds
+    sidebarKeyboardShortcut: 'b',
+    mobileBreakpoint: '768px',
+    closeMobileSidebarOnMenuButtonClick: false,
+};
+const HlmSidebarConfigToken = new InjectionToken('HlmSidebarConfig');
+function provideHlmSidebarConfig(config) {
+    return { provide: HlmSidebarConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+function injectHlmSidebarConfig() {
+    return inject(HlmSidebarConfigToken, { optional: true }) ?? defaultConfig;
+}
+
+class HlmSidebarService {
+    _platformId = inject(PLATFORM_ID);
+    _request = inject(REQUEST, { optional: true });
+    _config = injectHlmSidebarConfig();
+    _document = inject(DOCUMENT);
+    _window = this._document.defaultView;
+    _open = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+    _openMobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_openMobile" }] : /* istanbul ignore next */ []));
+    _isMobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
+    _variant = signal('sidebar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_variant" }] : /* istanbul ignore next */ []));
+    _mediaQuery = null;
+    open = this._open.asReadonly();
+    openMobile = this._openMobile.asReadonly();
+    isMobile = this._isMobile.asReadonly();
+    variant = this._variant.asReadonly();
+    state = computed(() => this._open() ? 'expanded' : 'collapsed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        this.restoreStateFromCookie();
+        afterNextRender(() => {
+            if (!this._window)
+                return;
+            // Initialize MediaQueryList
+            this._mediaQuery = this._window.matchMedia(`(max-width: ${this._config.mobileBreakpoint})`);
+            this._isMobile.set(this._mediaQuery.matches);
+            // Add media query listener
+            const mediaQueryHandler = (e) => {
+                this._isMobile.set(e.matches);
+                // If switching from mobile to desktop, close mobile sidebar
+                if (!e.matches)
+                    this._openMobile.set(false);
+            };
+            this._mediaQuery.addEventListener('change', mediaQueryHandler);
+            // Add keyboard shortcut listener
+            const keydownHandler = (event) => {
+                if (event.key === this._config.sidebarKeyboardShortcut &&
+                    (event.ctrlKey || event.metaKey)) {
+                    event.preventDefault();
+                    this.toggleSidebar();
+                }
+            };
+            this._window.addEventListener('keydown', keydownHandler);
+            // Add resize listener with debounce
+            let resizeTimeout;
+            const resizeHandler = () => {
+                if (!this._window)
+                    return;
+                if (resizeTimeout)
+                    this._window.clearTimeout(resizeTimeout);
+                resizeTimeout = this._window.setTimeout(() => {
+                    if (this._mediaQuery)
+                        this._isMobile.set(this._mediaQuery.matches);
+                }, 100);
+            };
+            this._window.addEventListener('resize', resizeHandler);
+            // Cleanup listeners on destroy
+            destroyRef.onDestroy(() => {
+                if (!this._window)
+                    return;
+                if (this._mediaQuery)
+                    this._mediaQuery.removeEventListener('change', mediaQueryHandler);
+                this._window.removeEventListener('keydown', keydownHandler);
+                this._window.removeEventListener('resize', resizeHandler);
+                if (resizeTimeout)
+                    this._window.clearTimeout(resizeTimeout);
+            });
+        });
+    }
+    setOpen(open) {
+        this._open.set(open);
+        this._document.cookie = `${this._config.sidebarCookieName}=${open}; path=/; max-age=${this._config.sidebarCookieMaxAge}`;
+    }
+    setOpenMobile(open) {
+        if (this._isMobile()) {
+            this._openMobile.set(open);
+        }
+    }
+    setVariant(variant) {
+        this._variant.set(variant);
+    }
+    toggleSidebar() {
+        if (this._isMobile()) {
+            this._openMobile.update((value) => !value);
+        }
+        else {
+            this.setOpen(!this._open());
+        }
+    }
+    restoreStateFromCookie() {
+        const cookieString = isPlatformServer(this._platformId)
+            ? this._request?.headers.get('cookie')
+            : this._document.cookie;
+        if (!cookieString)
+            return;
+        const prefix = `${this._config.sidebarCookieName}=`;
+        const cookieValue = cookieString
+            .split(';')
+            .map((c) => c.trim())
+            .find((c) => c.startsWith(prefix))
+            ?.slice(prefix.length);
+        if (cookieValue !== undefined) {
+            this._open.set(cookieValue === 'true');
+        }
+    }
+    static ɵfac = function HlmSidebarService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: HlmSidebarService, factory: HlmSidebarService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [], null); })();
+
+class HlmSheetOverlay {
+    _classSettable = injectCustomClassSettable({ optional: true, host: true });
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('bg-black/10 supports-backdrop-filter:backdrop-blur-xs transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const classValue = this._computedClass();
+            untracked(() => this._classSettable?.setClassToCustomElement(classValue));
+        });
+    }
+    static ɵfac = function HlmSheetOverlay_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetOverlay)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSheetOverlay, selectors: [["", "hlmSheetOverlay", ""], ["hlm-sheet-overlay"]], inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$a.BrnSheetOverlay])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetOverlay, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSheetOverlay],hlm-sheet-overlay',
+                hostDirectives: [BrnSheetOverlay],
+            }]
+    }], () => [], { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] }); })();
+
+const _c0$2 = ["*"];
+class HlmSheet extends BrnSheet {
+    static ɵfac = /*@__PURE__*/ (() => { let ɵHlmSheet_BaseFactory; return function HlmSheet_Factory(__ngFactoryType__) { return (ɵHlmSheet_BaseFactory || (ɵHlmSheet_BaseFactory = i0.ɵɵgetInheritedFactory(HlmSheet)))(__ngFactoryType__ || HlmSheet); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSheet, selectors: [["hlm-sheet"]], exportAs: ["hlmSheet"], features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: BrnDialog,
+                    useExisting: forwardRef(() => BrnSheet),
+                },
+                {
+                    provide: BrnSheet,
+                    useExisting: forwardRef(() => HlmSheet),
+                },
+                provideBrnDialogDefaultOptions({
+                // add custom options here
+                }),
+            ]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$2, decls: 2, vars: 0, template: function HlmSheet_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelement(0, "hlm-sheet-overlay");
+            i0.ɵɵprojection(1);
+        } }, dependencies: [HlmSheetOverlay], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheet, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-sheet',
+                exportAs: 'hlmSheet',
+                imports: [HlmSheetOverlay],
+                providers: [
+                    {
+                        provide: BrnDialog,
+                        useExisting: forwardRef(() => BrnSheet),
+                    },
+                    {
+                        provide: BrnSheet,
+                        useExisting: forwardRef(() => HlmSheet),
+                    },
+                    provideBrnDialogDefaultOptions({
+                    // add custom options here
+                    }),
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <hlm-sheet-overlay />
+    <ng-content />
+  `,
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSheet, { className: "HlmSheet", filePath: "lib/ui/sheet/src/lib/hlm-sheet.ts", lineNumber: 29 }); })();
+
+class HlmSheetClose {
+    static ɵfac = function HlmSheetClose_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetClose)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSheetClose, selectors: [["button", "hlmSheetClose", ""]], hostAttrs: ["data-slot", "sheet-close"], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$a.BrnSheetClose, inputs: ["delay", "delay"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetClose, [{
+        type: Directive,
+        args: [{
+                selector: 'button[hlmSheetClose]',
+                hostDirectives: [{ directive: BrnSheetClose, inputs: ['delay'] }],
+                host: { 'data-slot': 'sheet-close' },
+            }]
+    }], null, null); })();
+
+const _c0$1 = ["*"];
+function HlmSheetContent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 0)(1, "span", 1);
+    i0.ɵɵtext(2, "Close");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "ng-icon", 2);
+    i0.ɵɵelementEnd();
+} }
+class HlmSheetContent {
+    _stateProvider = injectExposesStateProvider({ host: true });
+    _sideProvider = injectExposedSideProvider({ host: true });
+    state = this._stateProvider.state ?? signal('closed');
+    _renderer = inject(Renderer2);
+    _element = inject(ElementRef);
+    showCloseButton = input(true, { ...(ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        classes(() => [
+            'bg-popover text-popover-foreground fixed flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+            'data-open:animate-in data-closed:animate-out',
+            'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
+            'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
+            'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
+            'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
+        ]);
+        effect(() => {
+            this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+        });
+    }
+    static ɵfac = function HlmSheetContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetContent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSheetContent, selectors: [["hlm-sheet-content"]], hostAttrs: ["data-slot", "sheet-content"], hostVars: 2, hostBindings: function HlmSheetContent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-side", ctx._sideProvider.side())("data-state", ctx.state());
+        } }, inputs: { showCloseButton: [1, "showCloseButton"] }, features: [i0.ɵɵProvidersFeature([provideIcons({ phosphorX })])], ngContentSelectors: _c0$1, decls: 2, vars: 1, consts: [["hlmBtn", "", "variant", "ghost", "size", "icon-sm", "hlmSheetClose", "", 1, "absolute", "end-4", "top-4"], [1, "sr-only"], ["hlm", "", "size", "sm", "name", "phosphorX"]], template: function HlmSheetContent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+            i0.ɵɵconditionalCreate(1, HlmSheetContent_Conditional_1_Template, 4, 0, "button", 0);
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showCloseButton() ? 1 : -1);
+        } }, dependencies: [HlmIcon, i2$1.NgIcon, HlmButton, HlmSheetClose], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetContent, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-sheet-content',
+                imports: [HlmIconImports, HlmButton, HlmSheetClose],
+                providers: [provideIcons({ phosphorX })],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'data-slot': 'sheet-content',
+                    '[attr.data-side]': '_sideProvider.side()',
+                    '[attr.data-state]': 'state()',
+                },
+                template: `
+    <ng-content />
+
+    @if (showCloseButton()) {
+      <button hlmBtn variant="ghost" size="icon-sm" class="absolute end-4 top-4" hlmSheetClose>
+        <span class="sr-only">Close</span>
+        <ng-icon hlm size="sm" name="phosphorX" />
+      </button>
+    }
+  `,
+            }]
+    }], () => [], { showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSheetContent, { className: "HlmSheetContent", filePath: "lib/ui/sheet/src/lib/hlm-sheet-content.ts", lineNumber: 42 }); })();
+
+class HlmSheetDescription {
+    constructor() {
+        classes(() => 'text-muted-foreground text-sm');
+    }
+    static ɵfac = function HlmSheetDescription_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetDescription)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSheetDescription, selectors: [["", "hlmSheetDescription", ""]], hostAttrs: ["data-slot", "sheet-description"], features: [i0.ɵɵHostDirectivesFeature([i1$a.BrnSheetDescription])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetDescription, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSheetDescription]',
+                hostDirectives: [BrnSheetDescription],
+                host: { 'data-slot': 'sheet-description' },
+            }]
+    }], () => [], null); })();
+
+class HlmSheetFooter {
+    constructor() {
+        classes(() => 'gap-2 p-4 mt-auto flex flex-col');
+    }
+    static ɵfac = function HlmSheetFooter_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetFooter)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSheetFooter, selectors: [["", "hlmSheetFooter", ""], ["hlm-sheet-footer"]], hostAttrs: ["data-slot", "sheet-footer"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetFooter, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSheetFooter],hlm-sheet-footer',
+                host: { 'data-slot': 'sheet-footer' },
+            }]
+    }], () => [], null); })();
+
+class HlmSheetHeader {
+    constructor() {
+        classes(() => 'gap-1.5 p-4 flex flex-col');
+    }
+    static ɵfac = function HlmSheetHeader_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetHeader)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSheetHeader, selectors: [["", "hlmSheetHeader", ""], ["hlm-sheet-header"]], hostAttrs: ["data-slot", "sheet-header"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetHeader, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSheetHeader],hlm-sheet-header',
+                host: { 'data-slot': 'sheet-header' },
+            }]
+    }], () => [], null); })();
+
+class HlmSheetPortal {
+    static ɵfac = function HlmSheetPortal_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetPortal)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSheetPortal, selectors: [["", "hlmSheetPortal", ""]], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$a.BrnSheetContent, inputs: ["context", "context", "class", "class"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetPortal, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSheetPortal]',
+                hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
+            }]
+    }], null, null); })();
+
+class HlmSheetTitle {
+    constructor() {
+        classes(() => 'text-foreground font-medium');
+    }
+    static ɵfac = function HlmSheetTitle_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetTitle)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSheetTitle, selectors: [["", "hlmSheetTitle", ""]], hostAttrs: ["data-slot", "sheet-title"], features: [i0.ɵɵHostDirectivesFeature([i1$a.BrnSheetTitle])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetTitle, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSheetTitle]',
+                hostDirectives: [BrnSheetTitle],
+                host: { 'data-slot': 'sheet-title' },
+            }]
+    }], () => [], null); })();
+
+class HlmSheetTrigger {
+    static ɵfac = function HlmSheetTrigger_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSheetTrigger)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSheetTrigger, selectors: [["button", "hlmSheetTrigger", ""]], hostAttrs: ["data-slot", "sheet-trigger"], features: [i0.ɵɵHostDirectivesFeature([{ directive: i1$a.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSheetTrigger, [{
+        type: Directive,
+        args: [{
+                selector: 'button[hlmSheetTrigger]',
+                hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
+                host: { 'data-slot': 'sheet-trigger' },
+            }]
+    }], null, null); })();
+
+const HlmSheetImports = [
+    HlmSheet,
+    HlmSheetClose,
+    HlmSheetContent,
+    HlmSheetDescription,
+    HlmSheetFooter,
+    HlmSheetHeader,
+    HlmSheetOverlay,
+    HlmSheetPortal,
+    HlmSheetTitle,
+    HlmSheetTrigger,
+];
+
+const _c0 = ["*"];
+function HlmSidebar_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵprojection(0);
+} }
+function HlmSidebar_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function HlmSidebar_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, HlmSidebar_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 2);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const contentContainer_r1 = i0.ɵɵreference(1);
+    i0.ɵɵproperty("ngTemplateOutlet", contentContainer_r1);
+} }
+function HlmSidebar_Conditional_3_hlm_sheet_content_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function HlmSidebar_Conditional_3_hlm_sheet_content_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "hlm-sheet-content", 5)(1, "div", 6);
+    i0.ɵɵtemplate(2, HlmSidebar_Conditional_3_hlm_sheet_content_1_ng_container_2_Template, 1, 0, "ng-container", 2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    const contentContainer_r1 = i0.ɵɵreference(1);
+    i0.ɵɵstyleProp("--sidebar-width", ctx_r2.sidebarWidthMobile());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", contentContainer_r1);
+} }
+function HlmSidebar_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "hlm-sheet", 3);
+    i0.ɵɵlistener("stateChanged", function HlmSidebar_Conditional_3_Template_hlm_sheet_stateChanged_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2._sidebarService.setOpenMobile($event === "open")); });
+    i0.ɵɵtemplate(1, HlmSidebar_Conditional_3_hlm_sheet_content_1_Template, 3, 3, "hlm-sheet-content", 4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("side", ctx_r2.side())("state", ctx_r2._sidebarService.openMobile() ? "open" : "closed");
+} }
+function HlmSidebar_Conditional_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function HlmSidebar_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 7);
+    i0.ɵɵelementStart(1, "div", 8)(2, "div", 9);
+    i0.ɵɵtemplate(3, HlmSidebar_Conditional_4_ng_container_3_Template, 1, 0, "ng-container", 2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    const contentContainer_r1 = i0.ɵɵreference(1);
+    i0.ɵɵclassMap(ctx_r2._sidebarGapComputedClass());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2._sidebarContainerComputedClass());
+    i0.ɵɵattribute("data-side", ctx_r2._dataSide());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", contentContainer_r1);
+} }
+class HlmSidebar {
+    _sidebarService = inject(HlmSidebarService);
+    _config = injectHlmSidebarConfig();
+    sidebarWidthMobile = input(this._config.sidebarWidthMobile, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarWidthMobile" }] : /* istanbul ignore next */ []));
+    side = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    variant = input(this._sidebarService.variant(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    collapsible = input('offcanvas', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    _sidebarGapComputedClass = computed(() => hlm('transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sidebarGapComputedClass" }] : /* istanbul ignore next */ []));
+    sidebarContainerClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarContainerClass" }] : /* istanbul ignore next */ []));
+    _sidebarContainerComputedClass = computed(() => hlm('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex', this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', this.sidebarContainerClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sidebarContainerComputedClass" }] : /* istanbul ignore next */ []));
+    _dataSlot = computed(() => {
+        return !this._sidebarService.isMobile() ? 'sidebar' : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dataSlot" }] : /* istanbul ignore next */ []));
+    _collapsibleAndNonMobile = computed(() => {
+        return this.collapsible() !== 'none' && !this._sidebarService.isMobile();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_collapsibleAndNonMobile" }] : /* istanbul ignore next */ []));
+    _dataState = computed(() => {
+        return this._collapsibleAndNonMobile() ? this._sidebarService.state() : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dataState" }] : /* istanbul ignore next */ []));
+    _dataCollapsible = computed(() => {
+        if (this._collapsibleAndNonMobile()) {
+            return this._sidebarService.state() === 'collapsed' ? this.collapsible() : '';
+        }
+        return undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dataCollapsible" }] : /* istanbul ignore next */ []));
+    _dataVariant = computed(() => {
+        return this._collapsibleAndNonMobile() ? this.variant() : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dataVariant" }] : /* istanbul ignore next */ []));
+    _dataSide = computed(() => {
+        return this._collapsibleAndNonMobile() ? this.side() : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dataSide" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sync variant input with service
+        effect(() => {
+            this._sidebarService.setVariant(this.variant());
+        });
+        classes(() => {
+            if (this.collapsible() === 'none') {
+                return hlm('bg-sidebar text-sidebar-foreground flex h-svh w-(--sidebar-width) flex-col');
+            }
+            else if (this._sidebarService.isMobile()) {
+                return '';
+            }
+            else {
+                return hlm('group peer text-sidebar-foreground hidden md:block');
+            }
+        });
+    }
+    static ɵfac = function HlmSidebar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebar)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSidebar, selectors: [["hlm-sidebar"]], hostVars: 5, hostBindings: function HlmSidebar_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-slot", ctx._dataSlot())("data-state", ctx._dataState())("data-collapsible", ctx._dataCollapsible())("data-variant", ctx._dataVariant())("data-side", ctx._dataSide());
+        } }, inputs: { sidebarWidthMobile: [1, "sidebarWidthMobile"], side: [1, "side"], variant: [1, "variant"], collapsible: [1, "collapsible"], sidebarContainerClass: [1, "sidebarContainerClass"] }, ngContentSelectors: _c0, decls: 5, vars: 1, consts: [["contentContainer", ""], [3, "side", "state"], [4, "ngTemplateOutlet"], [3, "stateChanged", "side", "state"], ["data-slot", "sidebar", "data-sidebar", "sidebar", "data-mobile", "true", "class", "bg-sidebar text-sidebar-foreground h-svh w-(--sidebar-width) p-0 [&>button]:hidden", 3, "--sidebar-width", 4, "hlmSheetPortal"], ["data-slot", "sidebar", "data-sidebar", "sidebar", "data-mobile", "true", 1, "bg-sidebar", "text-sidebar-foreground", "h-svh", "w-(--sidebar-width)", "p-0", "[&>button]:hidden"], [1, "flex", "h-full", "w-full", "flex-col"], ["data-slot", "sidebar-gap"], ["data-slot", "sidebar-container"], ["data-sidebar", "sidebar", "data-slot", "sidebar-inner", 1, "bg-sidebar", "group-data-[variant=floating]:ring-sidebar-border", "group-data-[variant=floating]:rounded-lg", "group-data-[variant=floating]:shadow-sm", "group-data-[variant=floating]:ring-1", "flex", "size-full", "flex-col"]], template: function HlmSidebar_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵtemplate(0, HlmSidebar_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(2, HlmSidebar_Conditional_2_Template, 1, 1, "ng-container")(3, HlmSidebar_Conditional_3_Template, 2, 2, "hlm-sheet", 1)(4, HlmSidebar_Conditional_4_Template, 4, 6);
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.collapsible() === "none" ? 2 : ctx._sidebarService.isMobile() ? 3 : 4);
+        } }, dependencies: [NgTemplateOutlet, HlmSheet, HlmSheetContent, HlmSheetPortal], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebar, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-sidebar',
+                imports: [NgTemplateOutlet, HlmSheetImports],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    '[attr.data-slot]': '_dataSlot()',
+                    '[attr.data-state]': '_dataState()',
+                    '[attr.data-collapsible]': '_dataCollapsible()',
+                    '[attr.data-variant]': '_dataVariant()',
+                    '[attr.data-side]': '_dataSide()',
+                },
+                template: `
+    <ng-template #contentContainer>
+      <ng-content />
+    </ng-template>
+
+    @if (collapsible() === 'none') {
+      <ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+    } @else if (_sidebarService.isMobile()) {
+      <hlm-sheet
+        [side]="side()"
+        [state]="_sidebarService.openMobile() ? 'open' : 'closed'"
+        (stateChanged)="_sidebarService.setOpenMobile($event === 'open')"
+      >
+        <hlm-sheet-content
+          *hlmSheetPortal="let ctx"
+          data-slot="sidebar"
+          data-sidebar="sidebar"
+          data-mobile="true"
+          class="bg-sidebar text-sidebar-foreground h-svh w-(--sidebar-width) p-0 [&>button]:hidden"
+          [style.--sidebar-width]="sidebarWidthMobile()"
+        >
+          <div class="flex h-full w-full flex-col">
+            <ng-container *ngTemplateOutlet="contentContainer" />
+          </div>
+        </hlm-sheet-content>
+      </hlm-sheet>
+    } @else {
+      <!-- Sidebar gap on desktop -->
+      <div data-slot="sidebar-gap" [class]="_sidebarGapComputedClass()"></div>
+      <div
+        data-slot="sidebar-container"
+        [attr.data-side]="_dataSide()"
+        [class]="_sidebarContainerComputedClass()"
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+        >
+          <ng-container *ngTemplateOutlet="contentContainer" />
+        </div>
+      </div>
+    }
+  `,
+            }]
+    }], () => [], { sidebarWidthMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidthMobile", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], sidebarContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainerClass", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSidebar, { className: "HlmSidebar", filePath: "lib/ui/sidebar/src/lib/hlm-sidebar.ts", lineNumber: 65 }); })();
+
+class HlmSidebarContent {
+    constructor() {
+        classes(() => 'no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden');
+    }
+    static ɵfac = function HlmSidebarContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarContent)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarContent, selectors: [["", "hlmSidebarContent", ""], ["hlm-sidebar-content"]], hostAttrs: ["data-slot", "sidebar-content", "data-sidebar", "content"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarContent, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSidebarContent],hlm-sidebar-content',
+                host: {
+                    'data-slot': 'sidebar-content',
+                    'data-sidebar': 'content',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarFooter {
+    constructor() {
+        classes(() => 'gap-2 p-2 flex flex-col');
+    }
+    static ɵfac = function HlmSidebarFooter_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarFooter)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarFooter, selectors: [["", "hlmSidebarFooter", ""], ["hlm-sidebar-footer"]], hostAttrs: ["data-slot", "sidebar-footer", "data-sidebar", "footer"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarFooter, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSidebarFooter],hlm-sidebar-footer',
+                host: {
+                    'data-slot': 'sidebar-footer',
+                    'data-sidebar': 'footer',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarGroup {
+    constructor() {
+        classes(() => 'p-2 relative flex w-full min-w-0 flex-col');
+    }
+    static ɵfac = function HlmSidebarGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarGroup)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarGroup, selectors: [["", "hlmSidebarGroup", ""], ["hlm-sidebar-group"]], hostAttrs: ["data-slot", "sidebar-group", "data-sidebar", "group"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarGroup, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSidebarGroup],hlm-sidebar-group',
+                host: {
+                    'data-slot': 'sidebar-group',
+                    'data-sidebar': 'group',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarGroupAction {
+    constructor() {
+        classes(() => 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 w-5 rounded-md p-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>ng-icon]:shrink-0');
+    }
+    static ɵfac = function HlmSidebarGroupAction_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarGroupAction)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarGroupAction, selectors: [["button", "hlmSidebarGroupAction", ""]], hostAttrs: ["data-slot", "sidebar-group-action", "data-sidebar", "group-action"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarGroupAction, [{
+        type: Directive,
+        args: [{
+                selector: 'button[hlmSidebarGroupAction]',
+                host: {
+                    'data-slot': 'sidebar-group-action',
+                    'data-sidebar': 'group-action',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarGroupContent {
+    constructor() {
+        classes(() => 'text-sm w-full');
+    }
+    static ɵfac = function HlmSidebarGroupContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarGroupContent)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarGroupContent, selectors: [["div", "hlmSidebarGroupContent", ""]], hostAttrs: ["data-slot", "sidebar-group-content", "data-sidebar", "group-content"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarGroupContent, [{
+        type: Directive,
+        args: [{
+                selector: 'div[hlmSidebarGroupContent]',
+                host: {
+                    'data-slot': 'sidebar-group-content',
+                    'data-sidebar': 'group-content',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarGroupLabel {
+    constructor() {
+        classes(() => 'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex shrink-0 items-center outline-hidden [&>ng-icon]:shrink-0');
+    }
+    static ɵfac = function HlmSidebarGroupLabel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarGroupLabel)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarGroupLabel, selectors: [["div", "hlmSidebarGroupLabel", ""], ["button", "hlmSidebarGroupLabel", ""]], hostAttrs: ["data-slot", "sidebar-group-label", "data-sidebar", "group-label"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarGroupLabel, [{
+        type: Directive,
+        args: [{
+                selector: 'div[hlmSidebarGroupLabel], button[hlmSidebarGroupLabel]',
+                host: {
+                    'data-slot': 'sidebar-group-label',
+                    'data-sidebar': 'group-label',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarHeader {
+    constructor() {
+        classes(() => 'gap-2 p-2 flex flex-col');
+    }
+    static ɵfac = function HlmSidebarHeader_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarHeader)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarHeader, selectors: [["", "hlmSidebarHeader", ""], ["hlm-sidebar-header"]], hostAttrs: ["data-slot", "sidebar-header", "data-sidebar", "header"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarHeader, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSidebarHeader],hlm-sidebar-header',
+                host: {
+                    'data-slot': 'sidebar-header',
+                    'data-sidebar': 'header',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarInput {
+    constructor() {
+        classes(() => 'bg-background h-8 w-full shadow-none');
+    }
+    static ɵfac = function HlmSidebarInput_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarInput)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarInput, selectors: [["input", "hlmSidebarInput", ""]], hostAttrs: ["data-slot", "sidebar-input", "data-sidebar", "input"], features: [i0.ɵɵHostDirectivesFeature([HlmInput])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarInput, [{
+        type: Directive,
+        args: [{
+                selector: 'input[hlmSidebarInput]',
+                hostDirectives: [HlmInput],
+                host: {
+                    'data-slot': 'sidebar-input',
+                    'data-sidebar': 'input',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarInset {
+    constructor() {
+        classes(() => 'bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 relative flex w-full flex-1 flex-col');
+    }
+    static ɵfac = function HlmSidebarInset_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarInset)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarInset, selectors: [["main", "hlmSidebarInset", ""]], hostAttrs: ["data-slot", "sidebar-inset"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarInset, [{
+        type: Directive,
+        args: [{
+                selector: 'main[hlmSidebarInset]',
+                host: { 'data-slot': 'sidebar-inset' },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarMenu {
+    constructor() {
+        classes(() => 'gap-1 flex w-full min-w-0 flex-col');
+    }
+    static ɵfac = function HlmSidebarMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenu)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarMenu, selectors: [["ul", "hlmSidebarMenu", ""]], hostAttrs: ["data-slot", "sidebar-menu", "data-sidebar", "menu"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenu, [{
+        type: Directive,
+        args: [{
+                selector: 'ul[hlmSidebarMenu]',
+                host: {
+                    'data-slot': 'sidebar-menu',
+                    'data-sidebar': 'menu',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarMenuAction {
+    showOnHover = input(false, { ...(ngDevMode ? { debugName: "showOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        classes(() => [
+            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>ng-icon]:shrink-0',
+            this.showOnHover() &&
+                'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0',
+        ]);
+    }
+    static ɵfac = function HlmSidebarMenuAction_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenuAction)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarMenuAction, selectors: [["button", "hlmSidebarMenuAction", ""]], hostAttrs: ["data-slot", "sidebar-menu-action", "data-sidebar", "menu-action"], inputs: { showOnHover: [1, "showOnHover"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenuAction, [{
+        type: Directive,
+        args: [{
+                selector: 'button[hlmSidebarMenuAction]',
+                host: {
+                    'data-slot': 'sidebar-menu-action',
+                    'data-sidebar': 'menu-action',
+                },
+            }]
+    }], () => [], { showOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnHover", required: false }] }] }); })();
+
+class HlmSidebarMenuBadge {
+    constructor() {
+        classes(() => 'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute end-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden');
+    }
+    static ɵfac = function HlmSidebarMenuBadge_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenuBadge)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarMenuBadge, selectors: [["", "hlmSidebarMenuBadge", ""], ["hlm-sidebar-menu-badge"]], hostAttrs: ["data-slot", "sidebar-menu-badge", "data-sidebar", "menu-badge"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenuBadge, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSidebarMenuBadge],hlm-sidebar-menu-badge',
+                host: {
+                    'data-slot': 'sidebar-menu-badge',
+                    'data-sidebar': 'menu-badge',
+                },
+            }]
+    }], () => [], null); })();
+
+const DEFAULT_TOOLTIP_SVG_CLASS = 'bg-foreground fill-foreground z-50 block size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]';
+const DEFAULT_TOOLTIP_CONTENT_CLASSES = hlm('data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance');
+const tooltipPositionVariants = cva('absolute', {
+    variants: {
+        position: {
+            top: 'bottom-0 left-[calc(50%-5px)] translate-y-full',
+            bottom: '-top-2.5 left-[calc(50%-5px)] translate-y-0 rotate-180',
+            left: '-end-2.5 top-[calc(50%-5px)] translate-y-0 rotate-270 rtl:-rotate-270',
+            right: '-start-2.5 top-[calc(50%-5px)] translate-y-0 rotate-90 rtl:-rotate-90',
+        },
+    },
+});
+class HlmTooltip {
+    static ɵfac = function HlmTooltip_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmTooltip)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmTooltip, selectors: [["", "hlmTooltip", ""]], features: [i0.ɵɵProvidersFeature([
+                provideBrnTooltipDefaultOptions({
+                    svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+                    tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+                    arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
+                }),
+            ]), i0.ɵɵHostDirectivesFeature([{ directive: i1$b.BrnTooltip, inputs: ["brnTooltip", "hlmTooltip", "position", "position", "hideDelay", "hideDelay", "showDelay", "showDelay", "tooltipDisabled", "tooltipDisabled"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmTooltip, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmTooltip]',
+                providers: [
+                    provideBrnTooltipDefaultOptions({
+                        svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+                        tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+                        arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
+                    }),
+                ],
+                hostDirectives: [
+                    {
+                        directive: BrnTooltip,
+                        inputs: ['brnTooltip: hlmTooltip', 'position', 'hideDelay', 'showDelay', 'tooltipDisabled'],
+                    },
+                ],
+            }]
+    }], null, null); })();
+
+const HlmTooltipImports = [HlmTooltip];
+
+const sidebarMenuButtonVariants = cva('ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-start text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_ng-icon]:shrink-0 [&_ng-icon]:text-[calc(var(--spacing)*4)] [&>span:last-child]:truncate', {
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline: 'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+class HlmSidebarMenuButton {
+    _config = injectHlmSidebarConfig();
+    _sidebarService = inject(HlmSidebarService);
+    _brnTooltip = inject(BrnTooltip);
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    isActive = input(false, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    closeMobileSidebarOnClick = input(this._config.closeMobileSidebarOnMenuButtonClick, { ...(ngDevMode ? { debugName: "closeMobileSidebarOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _isTooltipHidden = computed(() => this._sidebarService.state() !== 'collapsed' || this._sidebarService.isMobile(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isTooltipHidden" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => sidebarMenuButtonVariants({ variant: this.variant(), size: this.size() }));
+        effect(() => this._brnTooltip.mutableTooltipDisabled.set(this._isTooltipHidden()));
+    }
+    onClick() {
+        if (this.closeMobileSidebarOnClick()) {
+            this._sidebarService.setOpenMobile(false);
+        }
+    }
+    static ɵfac = function HlmSidebarMenuButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenuButton)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarMenuButton, selectors: [["button", "hlmSidebarMenuButton", ""], ["a", "hlmSidebarMenuButton", ""]], hostAttrs: ["data-slot", "sidebar-menu-button", "data-sidebar", "menu-button"], hostVars: 2, hostBindings: function HlmSidebarMenuButton_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function HlmSidebarMenuButton_click_HostBindingHandler() { return ctx.onClick(); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-size", ctx.size())("data-active", ctx.isActive());
+        } }, inputs: { variant: [1, "variant"], size: [1, "size"], isActive: [1, "isActive"], closeMobileSidebarOnClick: [1, "closeMobileSidebarOnClick"] }, features: [i0.ɵɵProvidersFeature([
+                provideBrnTooltipDefaultOptions({
+                    showDelay: 150,
+                    hideDelay: 0,
+                    tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+                    svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+                    arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
+                    position: 'right',
+                }),
+            ]), i0.ɵɵHostDirectivesFeature([{ directive: i1$b.BrnTooltip, inputs: ["brnTooltip", "tooltip"] }])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenuButton, [{
+        type: Directive,
+        args: [{
+                selector: 'button[hlmSidebarMenuButton], a[hlmSidebarMenuButton]',
+                providers: [
+                    provideBrnTooltipDefaultOptions({
+                        showDelay: 150,
+                        hideDelay: 0,
+                        tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+                        svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+                        arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
+                        position: 'right',
+                    }),
+                ],
+                hostDirectives: [
+                    {
+                        directive: BrnTooltip,
+                        inputs: ['brnTooltip: tooltip'],
+                    },
+                ],
+                host: {
+                    'data-slot': 'sidebar-menu-button',
+                    'data-sidebar': 'menu-button',
+                    '[attr.data-size]': 'size()',
+                    '[attr.data-active]': 'isActive()',
+                    '(click)': 'onClick()',
+                },
+            }]
+    }], () => [], { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], closeMobileSidebarOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeMobileSidebarOnClick", required: false }] }] }); })();
+
+class HlmSidebarMenuItem {
+    constructor() {
+        classes(() => 'group/menu-item relative');
+    }
+    static ɵfac = function HlmSidebarMenuItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenuItem)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarMenuItem, selectors: [["li", "hlmSidebarMenuItem", ""]], hostAttrs: ["data-slot", "sidebar-menu-item", "data-sidebar", "menu-item"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenuItem, [{
+        type: Directive,
+        args: [{
+                selector: 'li[hlmSidebarMenuItem]',
+                host: {
+                    'data-slot': 'sidebar-menu-item',
+                    'data-sidebar': 'menu-item',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSkeleton {
+    constructor() {
+        classes(() => 'bg-muted rounded-md block motion-safe:animate-pulse');
+    }
+    static ɵfac = function HlmSkeleton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSkeleton)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSkeleton, selectors: [["", "hlmSkeleton", ""], ["hlm-skeleton"]], hostAttrs: ["data-slot", "skeleton"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSkeleton, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSkeleton],hlm-skeleton',
+                host: {
+                    'data-slot': 'skeleton',
+                },
+            }]
+    }], () => [], null); })();
+
+const HlmSkeletonImports = [HlmSkeleton];
+
+function HlmSidebarMenuSkeleton_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "hlm-skeleton", 0);
+} }
+function HlmSidebarMenuSkeleton_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "hlm-skeleton", 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("--skeleton-width", ctx_r0._width);
+} }
+class HlmSidebarMenuSkeleton {
+    showIcon = input(false, { ...(ngDevMode ? { debugName: "showIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _width = `${Math.floor(Math.random() * 40) + 50}%`;
+    constructor() {
+        classes(() => 'h-8 gap-2 rounded-md px-2 flex items-center');
+    }
+    static ɵfac = function HlmSidebarMenuSkeleton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenuSkeleton)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSidebarMenuSkeleton, selectors: [["hlm-sidebar-menu-skeleton"], ["div", "hlmSidebarMenuSkeleton", ""]], hostAttrs: ["data-slot", "sidebar-menu-skeleton", "data-sidebar", "menu-skeleton"], inputs: { showIcon: [1, "showIcon"] }, decls: 2, vars: 1, consts: [["data-sidebar", "menu-skeleton-icon", 1, "size-4", "rounded-md"], ["data-sidebar", "menu-skeleton-text", 1, "h-4", "max-w-(--skeleton-width)", "flex-1", 3, "--skeleton-width"], ["data-sidebar", "menu-skeleton-text", 1, "h-4", "max-w-(--skeleton-width)", "flex-1"]], template: function HlmSidebarMenuSkeleton_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, HlmSidebarMenuSkeleton_Conditional_0_Template, 1, 0, "hlm-skeleton", 0)(1, HlmSidebarMenuSkeleton_Conditional_1_Template, 1, 2, "hlm-skeleton", 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.showIcon() ? 0 : 1);
+        } }, dependencies: [HlmSkeleton], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenuSkeleton, [{
+        type: Component,
+        args: [{
+                selector: 'hlm-sidebar-menu-skeleton,div[hlmSidebarMenuSkeleton]',
+                imports: [HlmSkeletonImports],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'data-slot': 'sidebar-menu-skeleton',
+                    'data-sidebar': 'menu-skeleton',
+                },
+                template: `
+    @if (showIcon()) {
+      <hlm-skeleton data-sidebar="menu-skeleton-icon" class="size-4 rounded-md" />
+    } @else {
+      <hlm-skeleton
+        data-sidebar="menu-skeleton-text"
+        class="h-4 max-w-(--skeleton-width) flex-1"
+        [style.--skeleton-width]="_width"
+      />
+    }
+  `,
+            }]
+    }], () => [], { showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSidebarMenuSkeleton, { className: "HlmSidebarMenuSkeleton", filePath: "lib/ui/sidebar/src/lib/hlm-sidebar-menu-skeleton.ts", lineNumber: 26 }); })();
+
+class HlmSidebarMenuSub {
+    constructor() {
+        classes(() => 'border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px flex min-w-0 flex-col');
+    }
+    static ɵfac = function HlmSidebarMenuSub_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenuSub)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarMenuSub, selectors: [["ul", "hlmSidebarMenuSub", ""]], hostAttrs: ["data-slot", "sidebar-menu-sub", "data-sidebar", "menu-sub"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenuSub, [{
+        type: Directive,
+        args: [{
+                selector: 'ul[hlmSidebarMenuSub]',
+                host: {
+                    'data-slot': 'sidebar-menu-sub',
+                    'data-sidebar': 'menu-sub',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarMenuSubButton {
+    _sidebarService = inject(HlmSidebarService);
+    _config = injectHlmSidebarConfig();
+    closeMobileSidebarOnClick = input(this._config.closeMobileSidebarOnMenuButtonClick, { ...(ngDevMode ? { debugName: "closeMobileSidebarOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    isActive = input(false, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        classes(() => 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>ng-icon]:text-[calc(var(--spacing)*4)] flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>ng-icon]:shrink-0 [&>span:last-child]:truncate');
+    }
+    onClick() {
+        if (this.closeMobileSidebarOnClick()) {
+            this._sidebarService.setOpenMobile(false);
+        }
+    }
+    static ɵfac = function HlmSidebarMenuSubButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenuSubButton)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarMenuSubButton, selectors: [["a", "hlmSidebarMenuSubButton", ""], ["button", "hlmSidebarMenuSubButton", ""]], hostAttrs: ["data-slot", "sidebar-menu-sub-button", "data-sidebar", "menu-sub-button"], hostVars: 2, hostBindings: function HlmSidebarMenuSubButton_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function HlmSidebarMenuSubButton_click_HostBindingHandler() { return ctx.onClick(); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-active", ctx.isActive())("data-size", ctx.size());
+        } }, inputs: { closeMobileSidebarOnClick: [1, "closeMobileSidebarOnClick"], size: [1, "size"], isActive: [1, "isActive"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenuSubButton, [{
+        type: Directive,
+        args: [{
+                selector: 'a[hlmSidebarMenuSubButton], button[hlmSidebarMenuSubButton]',
+                host: {
+                    'data-slot': 'sidebar-menu-sub-button',
+                    'data-sidebar': 'menu-sub-button',
+                    '[attr.data-active]': 'isActive()',
+                    '[attr.data-size]': 'size()',
+                    '(click)': 'onClick()',
+                },
+            }]
+    }], () => [], { closeMobileSidebarOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeMobileSidebarOnClick", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }] }); })();
+
+class HlmSidebarMenuSubItem {
+    constructor() {
+        classes(() => 'group/menu-sub-item relative');
+    }
+    static ɵfac = function HlmSidebarMenuSubItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarMenuSubItem)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarMenuSubItem, selectors: [["li", "hlmSidebarMenuSubItem", ""]], hostAttrs: ["data-slot", "sidebar-menu-sub-item", "data-sidebar", "menu-sub-item"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarMenuSubItem, [{
+        type: Directive,
+        args: [{
+                selector: 'li[hlmSidebarMenuSubItem]',
+                host: {
+                    'data-slot': 'sidebar-menu-sub-item',
+                    'data-sidebar': 'menu-sub-item',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarRail {
+    _sidebarService = inject(HlmSidebarService);
+    ariaLabel = input('Toggle Sidebar', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    constructor() {
+        classes(() => [
+            'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
+            'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+            '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+            'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+            '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+            '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        ]);
+    }
+    onClick() {
+        this._sidebarService.toggleSidebar();
+    }
+    static ɵfac = function HlmSidebarRail_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarRail)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarRail, selectors: [["button", "hlmSidebarRail", ""]], hostAttrs: ["data-sidebar", "rail", "data-slot", "sidebar-rail", "tabindex", "-1"], hostVars: 1, hostBindings: function HlmSidebarRail_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function HlmSidebarRail_click_HostBindingHandler() { return ctx.onClick(); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-label", ctx.ariaLabel());
+        } }, inputs: { ariaLabel: [1, "aria-label", "ariaLabel"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarRail, [{
+        type: Directive,
+        args: [{
+                selector: 'button[hlmSidebarRail]',
+                host: {
+                    'data-sidebar': 'rail',
+                    'data-slot': 'sidebar-rail',
+                    '[attr.aria-label]': 'ariaLabel()',
+                    tabindex: '-1',
+                    '(click)': 'onClick()',
+                },
+            }]
+    }], () => [], { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] }); })();
+
+class HlmSidebarSeparator {
+    constructor() {
+        classes(() => 'bg-sidebar-border mx-2 w-auto');
+    }
+    static ɵfac = function HlmSidebarSeparator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarSeparator)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarSeparator, selectors: [["", "hlmSidebarSeparator", ""], ["hlm-sidebar-separator"]], hostAttrs: ["data-slot", "sidebar-separator", "data-sidebar", "separator"], features: [i0.ɵɵHostDirectivesFeature([HlmSeparator])] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarSeparator, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSidebarSeparator],hlm-sidebar-separator',
+                hostDirectives: [HlmSeparator],
+                host: {
+                    'data-slot': 'sidebar-separator',
+                    'data-sidebar': 'separator',
+                },
+            }]
+    }], () => [], null); })();
+
+class HlmSidebarTrigger {
+    _sidebarService = inject(HlmSidebarService);
+    srOnlyText = input('Toggle Sidebar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "srOnlyText" }] : /* istanbul ignore next */ []));
+    _onClick() {
+        this._sidebarService.toggleSidebar();
+    }
+    static ɵfac = function HlmSidebarTrigger_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarTrigger)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSidebarTrigger, selectors: [["button", "hlmSidebarTrigger", ""]], hostAttrs: ["data-slot", "sidebar-trigger", "data-sidebar", "trigger"], hostBindings: function HlmSidebarTrigger_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function HlmSidebarTrigger_click_HostBindingHandler() { return ctx._onClick(); });
+        } }, inputs: { srOnlyText: [1, "srOnlyText"] }, features: [i0.ɵɵProvidersFeature([
+                provideIcons({ phosphorSidebarSimple }),
+                provideBrnButtonConfig({ variant: 'ghost', size: 'icon-sm' }),
+            ]), i0.ɵɵHostDirectivesFeature([{ directive: HlmButton, inputs: ["variant", "variant", "size", "size"] }])], decls: 3, vars: 1, consts: [["name", "phosphorSidebarSimple"], [1, "sr-only"]], template: function HlmSidebarTrigger_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "ng-icon", 0);
+            i0.ɵɵelementStart(1, "span", 1);
+            i0.ɵɵtext(2);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.srOnlyText());
+        } }, dependencies: [NgIcon], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarTrigger, [{
+        type: Component,
+        args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: 'button[hlmSidebarTrigger]',
+                imports: [NgIcon],
+                providers: [
+                    provideIcons({ phosphorSidebarSimple }),
+                    provideBrnButtonConfig({ variant: 'ghost', size: 'icon-sm' }),
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+                host: {
+                    'data-slot': 'sidebar-trigger',
+                    'data-sidebar': 'trigger',
+                    '(click)': '_onClick()',
+                },
+                template: `
+    <ng-icon name="phosphorSidebarSimple" />
+    <span class="sr-only">{{ srOnlyText() }}</span>
+  `,
+            }]
+    }], null, { srOnlyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "srOnlyText", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HlmSidebarTrigger, { className: "HlmSidebarTrigger", filePath: "lib/ui/sidebar/src/lib/hlm-sidebar-trigger.ts", lineNumber: 27 }); })();
+
+class HlmSidebarWrapper {
+    _config = injectHlmSidebarConfig();
+    sidebarWidth = input(this._config.sidebarWidth, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : /* istanbul ignore next */ []));
+    sidebarWidthIcon = input(this._config.sidebarWidthIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarWidthIcon" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full');
+    }
+    static ɵfac = function HlmSidebarWrapper_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSidebarWrapper)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSidebarWrapper, selectors: [["", "hlmSidebarWrapper", ""], ["hlm-sidebar-wrapper"]], hostAttrs: ["data-slot", "sidebar-wrapper"], hostVars: 4, hostBindings: function HlmSidebarWrapper_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵstyleProp("--sidebar-width", ctx.sidebarWidth())("--sidebar-width-icon", ctx.sidebarWidthIcon());
+        } }, inputs: { sidebarWidth: [1, "sidebarWidth"], sidebarWidthIcon: [1, "sidebarWidthIcon"] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSidebarWrapper, [{
+        type: Directive,
+        args: [{
+                selector: '[hlmSidebarWrapper],hlm-sidebar-wrapper',
+                host: {
+                    'data-slot': 'sidebar-wrapper',
+                    '[style.--sidebar-width]': 'sidebarWidth()',
+                    '[style.--sidebar-width-icon]': 'sidebarWidthIcon()',
+                },
+            }]
+    }], () => [], { sidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidth", required: false }] }], sidebarWidthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidthIcon", required: false }] }] }); })();
+
+const HlmSidebarImports = [
+    HlmSidebar,
+    HlmSidebarContent,
+    HlmSidebarFooter,
+    HlmSidebarGroup,
+    HlmSidebarGroupAction,
+    HlmSidebarGroupContent,
+    HlmSidebarGroupLabel,
+    HlmSidebarHeader,
+    HlmSidebarInput,
+    HlmSidebarInset,
+    HlmSidebarMenu,
+    HlmSidebarMenuSkeleton,
+    HlmSidebarMenuAction,
+    HlmSidebarMenuBadge,
+    HlmSidebarMenuButton,
+    HlmSidebarMenuItem,
+    HlmSidebarMenuSub,
+    HlmSidebarMenuSubButton,
+    HlmSidebarRail,
+    HlmSidebarSeparator,
+    HlmSidebarTrigger,
+    HlmSidebarWrapper,
+    HlmSidebarMenuSubItem,
+];
+
+/*
+ * Public API surface of @surfnet/curve-angular.
+ * Re-export each helm component (and the shared utils) added via the Spartan CLI.
+ * NOTE: there are a few components that we don't export: [icon, sheet, skeleton, tooltip],
+ * because these are out of scope for now. They are included in the code because the
+ * components that we do export depend on them (and they can't be consumed from a package).
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HLM_CHECKBOX_VALUE_ACCESSOR, HlmAvatar, HlmAvatarBadge, HlmAvatarFallback, HlmAvatarGroup, HlmAvatarGroupCount, HlmAvatarImage, HlmAvatarImports, HlmBreadCrumbImports, HlmBreadcrumb, HlmBreadcrumbEllipsis, HlmBreadcrumbImports, HlmBreadcrumbItem, HlmBreadcrumbLink, HlmBreadcrumbList, HlmBreadcrumbPage, HlmBreadcrumbSeparator, HlmButton, HlmButtonImports, HlmCaption, HlmCard, HlmCardAction, HlmCardContent, HlmCardDescription, HlmCardFooter, HlmCardHeader, HlmCardImports, HlmCardTitle, HlmCheckbox, HlmCheckboxImports, HlmDataTableContent, HlmDataTableImports, HlmDataTablePagination, HlmDataTableToolbar, HlmDropdownMenu, HlmDropdownMenuCheckbox, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuGroup, HlmDropdownMenuImports, HlmDropdownMenuItem, HlmDropdownMenuItemSubIndicator, HlmDropdownMenuLabel, HlmDropdownMenuRadio, HlmDropdownMenuRadioIndicator, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuTrigger, HlmField, HlmFieldContent, HlmFieldDescription, HlmFieldError, HlmFieldGroup, HlmFieldImports, HlmFieldLabel, HlmFieldLegend, HlmFieldSeparator, HlmFieldSet, HlmFieldTitle, HlmInput, HlmInputGroup, HlmInputGroupAddon, HlmInputGroupButton, HlmInputGroupImports, HlmInputGroupInput, HlmInputGroupText, HlmInputGroupTextarea, HlmInputImports, HlmLabel, HlmLabelImports, HlmSelect, HlmSelectContent, HlmSelectGroup, HlmSelectImports, HlmSelectItem, HlmSelectLabel, HlmSelectMultiple, HlmSelectPlaceholder, HlmSelectPortal, HlmSelectScrollDown, HlmSelectScrollUp, HlmSelectSeparator, HlmSelectTrigger, HlmSelectValue, HlmSelectValueTemplate, HlmSelectValues, HlmSelectValuesContent, HlmSeparator, HlmSeparatorImports, HlmSidebar, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupAction, HlmSidebarGroupContent, HlmSidebarGroupLabel, HlmSidebarHeader, HlmSidebarImports, HlmSidebarInput, HlmSidebarInset, HlmSidebarMenu, HlmSidebarMenuAction, HlmSidebarMenuBadge, HlmSidebarMenuButton, HlmSidebarMenuItem, HlmSidebarMenuSkeleton, HlmSidebarMenuSub, HlmSidebarMenuSubButton, HlmSidebarMenuSubItem, HlmSidebarRail, HlmSidebarSeparator, HlmSidebarService, HlmSidebarTrigger, HlmSidebarWrapper, HlmTBody, HlmTFoot, HlmTHead, HlmTable, HlmTableContainer, HlmTableImports, HlmTd, HlmTextarea, HlmTextareaImports, HlmTh, HlmTr, buttonVariants, classes, hlm, hlmSeparatorClass, injectBrnButtonConfig, injectDataTable, injectHlmDropdownMenuConfig, injectHlmSidebarConfig, provideBrnButtonConfig, provideHlmDropdownMenuConfig, provideHlmSidebarConfig };
+//# sourceMappingURL=surfnet-curve-angular.mjs.map