@eduboxpro/studio 0.1.14 → 0.1.16

package/fesm2022/eduboxpro-studio.mjs

@@ -1,15 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, viewChild, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, contentChild, model, afterNextRender, HostListener, PLATFORM_ID, Renderer2, Directive } from '@angular/core';
-import * as i1 from '@angular/common';
-import { DOCUMENT, CommonModule, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, PLATFORM_ID, ElementRef, contentChild, viewChild, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, model, afterNextRender, HostListener, Renderer2, Directive } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as LucideIcons from 'lucide-angular';
 import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS } from 'lucide-angular';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
+import * as i1 from '@angular/router';
+import { Router, NavigationEnd, RouterModule, RouterLink, RouterLinkActive } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import * as i1$2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { autoUpdate, offset, flip, shift, arrow, computePosition } from '@floating-ui/dom';
-import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import { filter } from 'rxjs/operators';
 
 /**
  * Injection token for Studio configuration
@@ -839,6 +840,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "<div class=\"studio-badge-wrapper__content\">\n  <ng-content />\n</div>\n\n@if (shouldShowBadge()) {\n  <studio-badge\n    class=\"studio-badge-wrapper__badge\"\n    [variant]=\"dot() ? 'dot' : variant()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n  >\n    {{ badgeContent() }}\n  </studio-badge>\n}\n", styles: [":host{display:inline-flex;position:relative;vertical-align:middle;flex-shrink:0}.studio-badge-wrapper__content{display:flex;align-items:center;justify-content:center}.studio-badge-wrapper__badge{position:absolute;z-index:1;transform-origin:center;transition:transform .2s cubic-bezier(.4,0,.2,1)}:host(.studio-badge-wrapper--top-right) .studio-badge-wrapper__badge{top:0;right:0;transform:translate(50%,-50%)}:host(.studio-badge-wrapper--top-left) .studio-badge-wrapper__badge{top:0;left:0;transform:translate(-50%,-50%)}:host(.studio-badge-wrapper--bottom-right) .studio-badge-wrapper__badge{bottom:0;right:0;transform:translate(50%,50%)}:host(.studio-badge-wrapper--bottom-left) .studio-badge-wrapper__badge{bottom:0;left:0;transform:translate(-50%,50%)}:host(.studio-badge-wrapper--overlap.studio-badge-wrapper--top-right) .studio-badge-wrapper__badge{transform:translate(25%,-25%)}:host(.studio-badge-wrapper--overlap.studio-badge-wrapper--top-left) .studio-badge-wrapper__badge{transform:translate(-25%,-25%)}:host(.studio-badge-wrapper--overlap.studio-badge-wrapper--bottom-right) .studio-badge-wrapper__badge{transform:translate(25%,25%)}:host(.studio-badge-wrapper--overlap.studio-badge-wrapper--bottom-left) .studio-badge-wrapper__badge{transform:translate(-25%,25%)}\n"] }]
         }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], showZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZero", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/**
+ * Bottom Navigation component - Mobile-first navigation component
+ *
+ * @example
+ * <studio-bottom-navigation
+ *   [items]="navItems"
+ *   variant="default"
+ *   showLabels="always"
+ *   (itemClicked)="handleClick($event)"
+ * />
+ */
+class BottomNavigationComponent {
+    router = inject(Router);
+    platformId = inject(PLATFORM_ID);
+    // ========== Items ==========
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : []));
+    // ========== Visual ==========
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    showLabels = input('always', ...(ngDevMode ? [{ debugName: "showLabels" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    elevation = input('sm', ...(ngDevMode ? [{ debugName: "elevation" }] : []));
+    blur = input(false, ...(ngDevMode ? [{ debugName: "blur" }] : []));
+    // ========== FAB ==========
+    showFab = input(false, ...(ngDevMode ? [{ debugName: "showFab" }] : []));
+    fabIcon = input('plus', ...(ngDevMode ? [{ debugName: "fabIcon" }] : []));
+    fabPosition = input('center', ...(ngDevMode ? [{ debugName: "fabPosition" }] : []));
+    fabAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "fabAriaLabel" }] : []));
+    // ========== Behavior ==========
+    fixed = input(false, ...(ngDevMode ? [{ debugName: "fixed" }] : []));
+    hideOnScroll = input(false, ...(ngDevMode ? [{ debugName: "hideOnScroll" }] : []));
+    scrollThreshold = input(10, ...(ngDevMode ? [{ debugName: "scrollThreshold" }] : []));
+    hideOnDesktop = input(false, ...(ngDevMode ? [{ debugName: "hideOnDesktop" }] : []));
+    // ========== Gestures ==========
+    enableSwipeGestures = input(false, ...(ngDevMode ? [{ debugName: "enableSwipeGestures" }] : []));
+    swipeThreshold = input(50, ...(ngDevMode ? [{ debugName: "swipeThreshold" }] : []));
+    enableHapticFeedback = input(false, ...(ngDevMode ? [{ debugName: "enableHapticFeedback" }] : []));
+    // ========== Router ==========
+    routerLinkActiveOptions = input({
+        paths: 'exact',
+        queryParams: 'exact',
+        fragment: 'ignored',
+        matrixParams: 'ignored'
+    }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
+    // ========== Accessibility ==========
+    ariaLabel = input('Bottom navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // ========== Customization ==========
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    // ========== Outputs ==========
+    activeItemChange = output();
+    itemClicked = output();
+    fabClicked = output();
+    swipedLeft = output();
+    swipedRight = output();
+    // ========== State ==========
+    isHidden = signal(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
+    lastScrollY = 0;
+    routerSubscription;
+    touchStartX = 0;
+    touchStartY = 0;
+    isSwiping = false;
+    hostClasses = computed(() => {
+        const classes = ['studio-bottom-navigation'];
+        classes.push(`studio-bottom-navigation--${this.variant()}`);
+        classes.push(`studio-bottom-navigation--${this.size()}`);
+        classes.push(`studio-bottom-navigation--labels-${this.showLabels()}`);
+        if (this.elevation() !== 'none') {
+            classes.push(`studio-bottom-navigation--elevation-${this.elevation()}`);
+        }
+        if (this.blur())
+            classes.push('studio-bottom-navigation--blur');
+        if (this.showFab())
+            classes.push('studio-bottom-navigation--has-fab');
+        if (this.hideOnDesktop())
+            classes.push('studio-bottom-navigation--hide-desktop');
+        if (!this.fixed())
+            classes.push('studio-bottom-navigation--relative');
+        if (this.isHidden())
+            classes.push('studio-bottom-navigation--hidden');
+        if (this.class())
+            classes.push(this.class());
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    visibleItems = computed(() => this.items().filter(item => item.visible !== false), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    centerIndex = computed(() => Math.floor(this.visibleItems().length / 2), ...(ngDevMode ? [{ debugName: "centerIndex" }] : []));
+    iconSize = computed(() => {
+        const sizes = {
+            sm: 20,
+            md: 24,
+            lg: 28
+        };
+        return sizes[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.routerSubscription = this.router.events
+                .pipe(filter(event => event instanceof NavigationEnd))
+                .subscribe(() => { });
+            if (this.hideOnScroll()) {
+                window.addEventListener('scroll', this.handleScroll, { passive: true });
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.routerSubscription?.unsubscribe();
+        if (isPlatformBrowser(this.platformId) && this.hideOnScroll()) {
+            window.removeEventListener('scroll', this.handleScroll);
+        }
+    }
+    handleScroll = () => {
+        const currentScrollY = window.scrollY;
+        if (Math.abs(currentScrollY - this.lastScrollY) < this.scrollThreshold()) {
+            return;
+        }
+        if (currentScrollY > this.lastScrollY && currentScrollY > 100) {
+            this.isHidden.set(true);
+        }
+        else {
+            this.isHidden.set(false);
+        }
+        this.lastScrollY = currentScrollY;
+    };
+    isItemActive(item) {
+        if (this.activeItem()) {
+            return item.id === this.activeItem();
+        }
+        if (item.routerLink && isPlatformBrowser(this.platformId)) {
+            const url = Array.isArray(item.routerLink)
+                ? item.routerLink.join('/')
+                : item.routerLink;
+            return this.router.isActive(url, this.routerLinkActiveOptions());
+        }
+        return false;
+    }
+    shouldShowLabel(item) {
+        const mode = this.showLabels();
+        if (mode === 'never')
+            return false;
+        if (mode === 'always')
+            return true;
+        if (mode === 'selected')
+            return this.isItemActive(item);
+        return true;
+    }
+    onItemClick(item, event) {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.triggerHapticFeedback('light');
+        if (item.command) {
+            item.command(item);
+        }
+        this.activeItemChange.emit(item.id);
+        this.itemClicked.emit(item);
+    }
+    onFabClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.triggerHapticFeedback('medium');
+        this.fabClicked.emit();
+    }
+    onTouchStart(event) {
+        if (!this.enableSwipeGestures())
+            return;
+        const touch = event.touches[0];
+        this.touchStartX = touch.clientX;
+        this.touchStartY = touch.clientY;
+        this.isSwiping = false;
+    }
+    onTouchMove(event) {
+        if (!this.enableSwipeGestures())
+            return;
+        const touch = event.touches[0];
+        const deltaX = Math.abs(touch.clientX - this.touchStartX);
+        const deltaY = Math.abs(touch.clientY - this.touchStartY);
+        if (deltaX > deltaY && deltaX > 10) {
+            this.isSwiping = true;
+        }
+    }
+    onTouchEnd(event) {
+        if (!this.enableSwipeGestures() || !this.isSwiping)
+            return;
+        const touch = event.changedTouches[0];
+        const deltaX = touch.clientX - this.touchStartX;
+        if (Math.abs(deltaX) > this.swipeThreshold()) {
+            if (deltaX > 0) {
+                this.triggerHapticFeedback('light');
+                this.swipedRight.emit();
+            }
+            else {
+                this.triggerHapticFeedback('light');
+                this.swipedLeft.emit();
+            }
+        }
+        this.isSwiping = false;
+    }
+    triggerHapticFeedback(style = 'light') {
+        if (!this.enableHapticFeedback() || !isPlatformBrowser(this.platformId))
+            return;
+        if ('vibrate' in navigator) {
+            const patterns = {
+                light: 10,
+                medium: 20,
+                heavy: [30, 10, 30]
+            };
+            navigator.vibrate(patterns[style]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BottomNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: BottomNavigationComponent, isStandalone: true, selector: "studio-bottom-navigation", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeItem: { classPropertyName: "activeItem", publicName: "activeItem", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, showFab: { classPropertyName: "showFab", publicName: "showFab", isSignal: true, isRequired: false, transformFunction: null }, fabIcon: { classPropertyName: "fabIcon", publicName: "fabIcon", isSignal: true, isRequired: false, transformFunction: null }, fabPosition: { classPropertyName: "fabPosition", publicName: "fabPosition", isSignal: true, isRequired: false, transformFunction: null }, fabAriaLabel: { classPropertyName: "fabAriaLabel", publicName: "fabAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, hideOnDesktop: { classPropertyName: "hideOnDesktop", publicName: "hideOnDesktop", isSignal: true, isRequired: false, transformFunction: null }, enableSwipeGestures: { classPropertyName: "enableSwipeGestures", publicName: "enableSwipeGestures", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null }, enableHapticFeedback: { classPropertyName: "enableHapticFeedback", publicName: "enableHapticFeedback", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemChange: "activeItemChange", itemClicked: "itemClicked", fabClicked: "fabClicked", swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, host: { properties: { "class": "hostClasses()", "attr.role": "\"navigation\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "<div\n  class=\"bottom-navigation__container\"\n  (touchstart)=\"onTouchStart($event)\"\n  (touchmove)=\"onTouchMove($event)\"\n  (touchend)=\"onTouchEnd($event)\"\n>\n  <ng-content select=\"[bottomNavLeft]\" />\n\n  <div class=\"bottom-navigation__items\">\n    @for (item of visibleItems(); track item.id) {\n      @if (!showFab() || fabPosition() !== 'center' || $index !== centerIndex()) {\n        <a\n          class=\"bottom-navigation__item\"\n          [class.bottom-navigation__item--active]=\"isItemActive(item)\"\n          [class.bottom-navigation__item--disabled]=\"item.disabled\"\n          [routerLink]=\"item.routerLink || null\"\n          [queryParams]=\"item.queryParams\"\n          [attr.href]=\"item.href || null\"\n          [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          (click)=\"onItemClick(item, $event)\"\n        >\n          <div class=\"bottom-navigation__icon-wrapper\">\n            <studio-icon\n              [name]=\"item.icon\"\n              [size]=\"iconSize()\"\n              class=\"bottom-navigation__icon\"\n            />\n\n            @if (item.badge) {\n              <studio-badge\n                [value]=\"item.badge\"\n                [color]=\"item.badgeColor || 'primary'\"\n                size=\"sm\"\n                class=\"bottom-navigation__badge\"\n              />\n            }\n          </div>\n\n          @if (shouldShowLabel(item)) {\n            <span class=\"bottom-navigation__label\">{{ item.label }}</span>\n          }\n        </a>\n      } @else {\n        <div class=\"bottom-navigation__fab-spacer\"></div>\n      }\n    }\n  </div>\n\n  <ng-content select=\"[bottomNavRight]\" />\n\n  @if (showFab()) {\n    <button\n      class=\"bottom-navigation__fab\"\n      [class.bottom-navigation__fab--center]=\"fabPosition() === 'center'\"\n      [class.bottom-navigation__fab--end]=\"fabPosition() === 'end'\"\n      [attr.aria-label]=\"fabAriaLabel() || 'Action button'\"\n      (click)=\"onFabClick($event)\"\n    >\n      <studio-icon\n        [name]=\"fabIcon()\"\n        [size]=\"24\"\n      />\n    </button>\n  }\n</div>\n", styles: [":host{position:fixed;bottom:0;left:0;right:0;z-index:var(--studio-z-index-bottom-nav, 1000);display:block;transition:transform .3s ease}:host(.studio-bottom-navigation--hidden){transform:translateY(100%)}:host(.studio-bottom-navigation--relative){position:relative}@media (min-width: 768px){:host(.studio-bottom-navigation--hide-desktop){display:none}}.bottom-navigation__container{position:relative;display:flex;align-items:center;background:var(--studio-bg-primary);border-top:1px solid var(--studio-border-primary);padding-bottom:env(safe-area-inset-bottom,0);transition:all .3s ease}.bottom-navigation__items{flex:1;display:flex;align-items:stretch;justify-content:space-around;gap:.25rem}.bottom-navigation__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--studio-text-secondary);transition:all .15s ease;cursor:pointer;position:relative;border-radius:var(--studio-radius-sm);min-height:56px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bottom-navigation__item:hover:not(.bottom-navigation__item--disabled):not(.bottom-navigation__item--active){background:var(--studio-bg-hover);color:var(--studio-text-primary)}.bottom-navigation__item:active:not(.bottom-navigation__item--disabled){transform:scale(.95)}.bottom-navigation__item--active{color:var(--studio-primary)}.bottom-navigation__item--active .bottom-navigation__icon{transform:scale(1.1)}.bottom-navigation__item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bottom-navigation__icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.bottom-navigation__icon{transition:transform .15s ease}.bottom-navigation__badge{position:absolute;top:-4px;right:-8px}.bottom-navigation__label{font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:opacity .15s ease;margin-top:.25rem}.bottom-navigation__fab-spacer{flex:1;min-width:56px}.bottom-navigation__fab{position:absolute;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--studio-primary);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:all .15s ease;z-index:1}.bottom-navigation__fab--center{left:50%;top:0;transform:translate(-50%) translateY(-50%)}.bottom-navigation__fab--center:hover{transform:translate(-50%) translateY(-50%) scale(1.1);box-shadow:0 6px 16px #0003}.bottom-navigation__fab--center:active{transform:translate(-50%) translateY(-50%) scale(.95)}.bottom-navigation__fab--end{right:16px}.bottom-navigation__fab--end:hover{transform:scale(1.1);box-shadow:0 6px 16px #0003}.bottom-navigation__fab--end:active{transform:scale(.95)}:host(.studio-bottom-navigation--relative) .bottom-navigation__fab--end{top:0;transform:translateY(-50%)}:host(.studio-bottom-navigation--relative) .bottom-navigation__fab--end:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px #0003}:host(.studio-bottom-navigation--relative) .bottom-navigation__fab--end:active{transform:translateY(-50%) scale(.95)}:host:not(.studio-bottom-navigation--relative) .bottom-navigation__fab--end{bottom:calc(16px + env(safe-area-inset-bottom,0))}:host(.studio-bottom-navigation--sm) .bottom-navigation__item{min-height:48px;padding:.375rem .5rem}:host(.studio-bottom-navigation--md) .bottom-navigation__item{min-height:56px;padding:.5rem .75rem}:host(.studio-bottom-navigation--lg) .bottom-navigation__item{min-height:64px;padding:.625rem 1rem}:host(.studio-bottom-navigation--filled) .bottom-navigation__container{background:var(--studio-primary);border-top-color:transparent}:host(.studio-bottom-navigation--filled) .bottom-navigation__item{color:#ffffffb3}:host(.studio-bottom-navigation--filled) .bottom-navigation__item--active{color:#fff}:host(.studio-bottom-navigation--filled) .bottom-navigation__item:hover:not(.bottom-navigation__item--disabled):not(.bottom-navigation__item--active){background:#ffffff1a}:host(.studio-bottom-navigation--minimal) .bottom-navigation__container{background:transparent;border-top:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}:host(.studio-bottom-navigation--labels-selected) .bottom-navigation__item:not(.bottom-navigation__item--active) .bottom-navigation__label{opacity:0;height:0;margin:0}:host(.studio-bottom-navigation--labels-never) .bottom-navigation__label{display:none}:host(.studio-bottom-navigation--elevation-sm) .bottom-navigation__container{box-shadow:0 -2px 4px #0000000d}:host(.studio-bottom-navigation--elevation-md) .bottom-navigation__container{box-shadow:0 -4px 8px #0000001a}:host(.studio-bottom-navigation--elevation-lg) .bottom-navigation__container{box-shadow:0 -8px 16px #00000026}:host(.studio-bottom-navigation--blur) .bottom-navigation__container{background:rgba(var(--studio-bg-primary-rgb),.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}@media (max-width: 640px){.bottom-navigation__label{font-size:.6875rem}:host(.studio-bottom-navigation--sm) .bottom-navigation__item{min-height:44px}}@media (prefers-reduced-motion: reduce){:host,.bottom-navigation__container,.bottom-navigation__item,.bottom-navigation__icon,.bottom-navigation__label,.bottom-navigation__fab{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: BadgeComponent, selector: "studio-badge", inputs: ["variant", "size", "color", "radius", "icon", "iconPosition", "dot", "dotColor", "removable", "href", "target", "disabled", "value", "max", "showZero", "uppercase", "bold", "pulse", "autoColor"], outputs: ["removed", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BottomNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-bottom-navigation', standalone: true, imports: [CommonModule, RouterModule, IconComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': '"navigation"',
+                        '[attr.aria-label]': 'ariaLabel()'
+                    }, template: "<div\n  class=\"bottom-navigation__container\"\n  (touchstart)=\"onTouchStart($event)\"\n  (touchmove)=\"onTouchMove($event)\"\n  (touchend)=\"onTouchEnd($event)\"\n>\n  <ng-content select=\"[bottomNavLeft]\" />\n\n  <div class=\"bottom-navigation__items\">\n    @for (item of visibleItems(); track item.id) {\n      @if (!showFab() || fabPosition() !== 'center' || $index !== centerIndex()) {\n        <a\n          class=\"bottom-navigation__item\"\n          [class.bottom-navigation__item--active]=\"isItemActive(item)\"\n          [class.bottom-navigation__item--disabled]=\"item.disabled\"\n          [routerLink]=\"item.routerLink || null\"\n          [queryParams]=\"item.queryParams\"\n          [attr.href]=\"item.href || null\"\n          [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          (click)=\"onItemClick(item, $event)\"\n        >\n          <div class=\"bottom-navigation__icon-wrapper\">\n            <studio-icon\n              [name]=\"item.icon\"\n              [size]=\"iconSize()\"\n              class=\"bottom-navigation__icon\"\n            />\n\n            @if (item.badge) {\n              <studio-badge\n                [value]=\"item.badge\"\n                [color]=\"item.badgeColor || 'primary'\"\n                size=\"sm\"\n                class=\"bottom-navigation__badge\"\n              />\n            }\n          </div>\n\n          @if (shouldShowLabel(item)) {\n            <span class=\"bottom-navigation__label\">{{ item.label }}</span>\n          }\n        </a>\n      } @else {\n        <div class=\"bottom-navigation__fab-spacer\"></div>\n      }\n    }\n  </div>\n\n  <ng-content select=\"[bottomNavRight]\" />\n\n  @if (showFab()) {\n    <button\n      class=\"bottom-navigation__fab\"\n      [class.bottom-navigation__fab--center]=\"fabPosition() === 'center'\"\n      [class.bottom-navigation__fab--end]=\"fabPosition() === 'end'\"\n      [attr.aria-label]=\"fabAriaLabel() || 'Action button'\"\n      (click)=\"onFabClick($event)\"\n    >\n      <studio-icon\n        [name]=\"fabIcon()\"\n        [size]=\"24\"\n      />\n    </button>\n  }\n</div>\n", styles: [":host{position:fixed;bottom:0;left:0;right:0;z-index:var(--studio-z-index-bottom-nav, 1000);display:block;transition:transform .3s ease}:host(.studio-bottom-navigation--hidden){transform:translateY(100%)}:host(.studio-bottom-navigation--relative){position:relative}@media (min-width: 768px){:host(.studio-bottom-navigation--hide-desktop){display:none}}.bottom-navigation__container{position:relative;display:flex;align-items:center;background:var(--studio-bg-primary);border-top:1px solid var(--studio-border-primary);padding-bottom:env(safe-area-inset-bottom,0);transition:all .3s ease}.bottom-navigation__items{flex:1;display:flex;align-items:stretch;justify-content:space-around;gap:.25rem}.bottom-navigation__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--studio-text-secondary);transition:all .15s ease;cursor:pointer;position:relative;border-radius:var(--studio-radius-sm);min-height:56px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bottom-navigation__item:hover:not(.bottom-navigation__item--disabled):not(.bottom-navigation__item--active){background:var(--studio-bg-hover);color:var(--studio-text-primary)}.bottom-navigation__item:active:not(.bottom-navigation__item--disabled){transform:scale(.95)}.bottom-navigation__item--active{color:var(--studio-primary)}.bottom-navigation__item--active .bottom-navigation__icon{transform:scale(1.1)}.bottom-navigation__item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bottom-navigation__icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.bottom-navigation__icon{transition:transform .15s ease}.bottom-navigation__badge{position:absolute;top:-4px;right:-8px}.bottom-navigation__label{font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:opacity .15s ease;margin-top:.25rem}.bottom-navigation__fab-spacer{flex:1;min-width:56px}.bottom-navigation__fab{position:absolute;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--studio-primary);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:all .15s ease;z-index:1}.bottom-navigation__fab--center{left:50%;top:0;transform:translate(-50%) translateY(-50%)}.bottom-navigation__fab--center:hover{transform:translate(-50%) translateY(-50%) scale(1.1);box-shadow:0 6px 16px #0003}.bottom-navigation__fab--center:active{transform:translate(-50%) translateY(-50%) scale(.95)}.bottom-navigation__fab--end{right:16px}.bottom-navigation__fab--end:hover{transform:scale(1.1);box-shadow:0 6px 16px #0003}.bottom-navigation__fab--end:active{transform:scale(.95)}:host(.studio-bottom-navigation--relative) .bottom-navigation__fab--end{top:0;transform:translateY(-50%)}:host(.studio-bottom-navigation--relative) .bottom-navigation__fab--end:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px #0003}:host(.studio-bottom-navigation--relative) .bottom-navigation__fab--end:active{transform:translateY(-50%) scale(.95)}:host:not(.studio-bottom-navigation--relative) .bottom-navigation__fab--end{bottom:calc(16px + env(safe-area-inset-bottom,0))}:host(.studio-bottom-navigation--sm) .bottom-navigation__item{min-height:48px;padding:.375rem .5rem}:host(.studio-bottom-navigation--md) .bottom-navigation__item{min-height:56px;padding:.5rem .75rem}:host(.studio-bottom-navigation--lg) .bottom-navigation__item{min-height:64px;padding:.625rem 1rem}:host(.studio-bottom-navigation--filled) .bottom-navigation__container{background:var(--studio-primary);border-top-color:transparent}:host(.studio-bottom-navigation--filled) .bottom-navigation__item{color:#ffffffb3}:host(.studio-bottom-navigation--filled) .bottom-navigation__item--active{color:#fff}:host(.studio-bottom-navigation--filled) .bottom-navigation__item:hover:not(.bottom-navigation__item--disabled):not(.bottom-navigation__item--active){background:#ffffff1a}:host(.studio-bottom-navigation--minimal) .bottom-navigation__container{background:transparent;border-top:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}:host(.studio-bottom-navigation--labels-selected) .bottom-navigation__item:not(.bottom-navigation__item--active) .bottom-navigation__label{opacity:0;height:0;margin:0}:host(.studio-bottom-navigation--labels-never) .bottom-navigation__label{display:none}:host(.studio-bottom-navigation--elevation-sm) .bottom-navigation__container{box-shadow:0 -2px 4px #0000000d}:host(.studio-bottom-navigation--elevation-md) .bottom-navigation__container{box-shadow:0 -4px 8px #0000001a}:host(.studio-bottom-navigation--elevation-lg) .bottom-navigation__container{box-shadow:0 -8px 16px #00000026}:host(.studio-bottom-navigation--blur) .bottom-navigation__container{background:rgba(var(--studio-bg-primary-rgb),.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}@media (max-width: 640px){.bottom-navigation__label{font-size:.6875rem}:host(.studio-bottom-navigation--sm) .bottom-navigation__item{min-height:44px}}@media (prefers-reduced-motion: reduce){:host,.bottom-navigation__container,.bottom-navigation__item,.bottom-navigation__icon,.bottom-navigation__label,.bottom-navigation__fab{transition:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItem", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], showFab: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFab", required: false }] }], fabIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fabIcon", required: false }] }], fabPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fabPosition", required: false }] }], fabAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fabAriaLabel", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], hideOnDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnDesktop", required: false }] }], enableSwipeGestures: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSwipeGestures", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], enableHapticFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHapticFeedback", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], activeItemChange: [{ type: i0.Output, args: ["activeItemChange"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], fabClicked: [{ type: i0.Output, args: ["fabClicked"] }], swipedLeft: [{ type: i0.Output, args: ["swipedLeft"] }], swipedRight: [{ type: i0.Output, args: ["swipedRight"] }] } });
+
 /**
  * Button component with multiple variants, sizes, colors and states
  *
@@ -1045,6 +1267,656 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: `<ng-content select="studio-button" />`, styles: [":host{display:inline-flex;align-items:center;position:relative}:host(.studio-button-group--horizontal){flex-direction:row}:host(.studio-button-group--vertical){flex-direction:column}:host(.studio-button-group--spacing-none){gap:0}:host(.studio-button-group--spacing-xs){gap:var(--studio-spacing-xs)}:host(.studio-button-group--spacing-sm){gap:var(--studio-spacing-sm)}:host(.studio-button-group--spacing-md){gap:var(--studio-spacing-md)}:host(.studio-button-group--spacing-lg){gap:var(--studio-spacing-lg)}:host(.studio-button-group--align-start){justify-content:flex-start}:host(.studio-button-group--align-center){justify-content:center}:host(.studio-button-group--align-end){justify-content:flex-end}:host(.studio-button-group--align-stretch){align-items:stretch}:host(.studio-button-group--align-stretch) ::ng-deep studio-button{flex:1}:host(.studio-button-group--full){width:100%}:host(.studio-button-group--full) ::ng-deep studio-button{flex:1}:host(.studio-button-group--attached){gap:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached{margin:0;position:relative}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:0;border-bottom-right-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:0}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached.studio-button--outline:not(:last-child){margin-right:-1px}:host(.studio-button-group--vertical){align-items:stretch}:host(.studio-button-group--vertical) ::ng-deep studio-button{width:100%;justify-content:flex-start}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:var(--studio-radius-sm);border-bottom-right-radius:0;border-top-left-radius:var(--studio-radius-sm);border-bottom-left-radius:0}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:var(--studio-radius-sm);border-top-right-radius:0;border-bottom-right-radius:var(--studio-radius-sm)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--vertical.studio-button-group--full) ::ng-deep studio-button{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
 
+/**
+ * Card component for displaying content in a container
+ *
+ * @example
+ * <studio-card variant="elevated" color="primary">
+ *   <div card-header>Header</div>
+ *   <div card-body>Content</div>
+ *   <div card-footer>Footer</div>
+ * </studio-card>
+ */
+class CardComponent {
+    configService = inject(StudioConfigService);
+    cardDefaults = computed(() => this.configService.config().components?.card, ...(ngDevMode ? [{ debugName: "cardDefaults" }] : []));
+    // Style inputs with config defaults
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    shadowInput = input(undefined, ...(ngDevMode ? [{ debugName: "shadowInput", alias: 'shadow' }] : [{ alias: 'shadow' }]));
+    paddingInput = input(undefined, ...(ngDevMode ? [{ debugName: "paddingInput", alias: 'padding' }] : [{ alias: 'padding' }]));
+    variant = withConfigDefault(this.variantInput, computed(() => this.cardDefaults()?.variant), 'elevated');
+    size = withConfigDefault(this.sizeInput, computed(() => this.cardDefaults()?.size), 'md');
+    color = withConfigDefault(this.colorInput, computed(() => this.cardDefaults()?.color), 'default');
+    radius = withConfigDefault(this.radiusInput, computed(() => this.cardDefaults()?.radius), 'lg');
+    shadow = withConfigDefault(this.shadowInput, computed(() => this.cardDefaults()?.shadow), 'md');
+    padding = withConfigDefault(this.paddingInput, computed(() => this.cardDefaults()?.padding), 'md');
+    // Layout inputs
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    imagePosition = input('top', ...(ngDevMode ? [{ debugName: "imagePosition" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    fullHeight = input(false, ...(ngDevMode ? [{ debugName: "fullHeight" }] : []));
+    // Content inputs
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
+    avatar = input(...(ngDevMode ? [undefined, { debugName: "avatar" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
+    imageAlt = input('', ...(ngDevMode ? [{ debugName: "imageAlt" }] : []));
+    imageFit = input('cover', ...(ngDevMode ? [{ debugName: "imageFit" }] : []));
+    // Visibility inputs
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    showMedia = input(true, ...(ngDevMode ? [{ debugName: "showMedia" }] : []));
+    showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+    divider = input(false, ...(ngDevMode ? [{ debugName: "divider" }] : []));
+    // Interaction inputs
+    hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
+    pressable = input(false, ...(ngDevMode ? [{ debugName: "pressable" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+    target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
+    // Effects
+    blurred = input(false, ...(ngDevMode ? [{ debugName: "blurred" }] : []));
+    blurredFooter = input(false, ...(ngDevMode ? [{ debugName: "blurredFooter" }] : []));
+    animated = input(false, ...(ngDevMode ? [{ debugName: "animated" }] : []));
+    // Outputs
+    clicked = output();
+    headerAction = output();
+    // Template refs
+    headerTemplate = contentChild('cardHeader', ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    headerActionsTemplate = contentChild('cardHeaderActions', ...(ngDevMode ? [{ debugName: "headerActionsTemplate" }] : []));
+    mediaTemplate = contentChild('cardMedia', ...(ngDevMode ? [{ debugName: "mediaTemplate" }] : []));
+    bodyTemplate = contentChild('cardBody', ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : []));
+    footerTemplate = contentChild('cardFooter', ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    // Computed
+    iconSize = computed(() => {
+        const sizeMap = { sm: 18, md: 20, lg: 24 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    hostClasses = computed(() => classNames('studio-card', `studio-card--${this.variant()}`, `studio-card--${this.size()}`, `studio-card--${this.color()}`, `studio-card--radius-${this.radius()}`, `studio-card--shadow-${this.shadow()}`, `studio-card--padding-${this.padding()}`, `studio-card--${this.orientation()}`, this.imagePosition() !== 'top' && `studio-card--image-${this.imagePosition()}`, this.fullWidth() && 'studio-card--full-width', this.fullHeight() && 'studio-card--full-height', this.hoverable() && 'studio-card--hoverable', this.pressable() && 'studio-card--pressable', this.disabled() && 'studio-card--disabled', this.loading() && 'studio-card--loading', this.blurred() && 'studio-card--blurred', this.blurredFooter() && 'studio-card--blurred-footer', this.animated() && 'studio-card--animated', this.divider() && 'studio-card--divider', this.href() && 'studio-card--clickable'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    handleClick(event) {
+        if (this.disabled() || this.loading()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const url = this.href();
+        if (url) {
+            const safeUrl = sanitizeUrl(url);
+            if (safeUrl === '#') {
+                return;
+            }
+            const target = this.target();
+            if (target === '_blank') {
+                window.open(safeUrl, '_blank', 'noopener,noreferrer');
+            }
+            else {
+                window.location.href = safeUrl;
+            }
+        }
+        this.clicked.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: CardComponent, isStandalone: true, selector: "studio-card", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, shadowInput: { classPropertyName: "shadowInput", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, paddingInput: { classPropertyName: "paddingInput", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, imagePosition: { classPropertyName: "imagePosition", publicName: "imagePosition", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showMedia: { classPropertyName: "showMedia", publicName: "showMedia", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, pressable: { classPropertyName: "pressable", publicName: "pressable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, blurred: { classPropertyName: "blurred", publicName: "blurred", isSignal: true, isRequired: false, transformFunction: null }, blurredFooter: { classPropertyName: "blurredFooter", publicName: "blurredFooter", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", headerAction: "headerAction" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "hostClasses()", "attr.href": "href()", "attr.target": "href() ? target() : null", "attr.rel": "href() && target() === \"_blank\" ? \"noopener noreferrer\" : null", "attr.disabled": "disabled() ? \"\" : null" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["cardHeader"], descendants: true, isSignal: true }, { propertyName: "headerActionsTemplate", first: true, predicate: ["cardHeaderActions"], descendants: true, isSignal: true }, { propertyName: "mediaTemplate", first: true, predicate: ["cardMedia"], descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: ["cardBody"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["cardFooter"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="studio-card__container">
+      <!-- Header -->
+      @if (showHeader() && (headerTemplate() || title() || subtitle())) {
+        <div class="studio-card__header">
+          @if (headerTemplate()) {
+            <ng-container *ngTemplateOutlet="headerTemplate()!" />
+          } @else {
+            <div class="studio-card__header-content">
+              @if (avatar()) {
+                <img [src]="avatar()!" alt="" class="studio-card__avatar" />
+              }
+              @if (icon() && !avatar()) {
+                <div class="studio-card__icon-wrapper">
+                  <studio-icon [name]="icon()!" [size]="iconSize()" />
+                </div>
+              }
+              <div class="studio-card__header-text">
+                @if (title()) {
+                  <h3 class="studio-card__title">{{ title() }}</h3>
+                }
+                @if (subtitle()) {
+                  <p class="studio-card__subtitle">{{ subtitle() }}</p>
+                }
+              </div>
+            </div>
+            @if (headerActionsTemplate()) {
+              <div class="studio-card__header-actions">
+                <ng-container *ngTemplateOutlet="headerActionsTemplate()!" />
+              </div>
+            }
+          }
+        </div>
+      }
+
+      <!-- Media -->
+      @if (showMedia() && (mediaTemplate() || image())) {
+        <div class="studio-card__media">
+          @if (mediaTemplate()) {
+            <ng-container *ngTemplateOutlet="mediaTemplate()!" />
+          } @else if (image()) {
+            <img
+              [src]="image()!"
+              [alt]="imageAlt()"
+              class="studio-card__image"
+              [class.studio-card__image--cover]="imageFit() === 'cover'"
+              [class.studio-card__image--contain]="imageFit() === 'contain'"
+            />
+          }
+        </div>
+      }
+
+      <!-- Body -->
+      <div class="studio-card__body">
+        @if (bodyTemplate()) {
+          <ng-container *ngTemplateOutlet="bodyTemplate()!" />
+        } @else {
+          <ng-content />
+        }
+      </div>
+
+      <!-- Footer -->
+      @if (showFooter() && footerTemplate()) {
+        <div class="studio-card__footer">
+          <ng-container *ngTemplateOutlet="footerTemplate()!" />
+        </div>
+      }
+
+      <!-- Loading overlay -->
+      @if (loading()) {
+        <div class="studio-card__loading">
+          <studio-icon name="loader-2" [size]="24" class="studio-card__spinner" />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--studio-font-family);position:relative;transition:all var(--studio-transition-normal)}.studio-card__container{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}:host(.studio-card--sm) .studio-card__container{min-height:8rem}:host(.studio-card--md) .studio-card__container{min-height:12rem}:host(.studio-card--lg) .studio-card__container{min-height:16rem}:host(.studio-card--radius-none) .studio-card__container{border-radius:var(--studio-radius-none)}:host(.studio-card--radius-sm) .studio-card__container{border-radius:var(--studio-radius-sm)}:host(.studio-card--radius-md) .studio-card__container{border-radius:var(--studio-radius-md)}:host(.studio-card--radius-lg) .studio-card__container{border-radius:var(--studio-radius-lg)}:host(.studio-card--radius-xl) .studio-card__container{border-radius:var(--studio-radius-xl)}:host(.studio-card--shadow-none) .studio-card__container{box-shadow:none}:host(.studio-card--shadow-sm) .studio-card__container{box-shadow:var(--studio-shadow-sm)}:host(.studio-card--shadow-md) .studio-card__container{box-shadow:var(--studio-shadow-md)}:host(.studio-card--shadow-lg) .studio-card__container{box-shadow:var(--studio-shadow-lg)}:host(.studio-card--shadow-xl) .studio-card__container{box-shadow:var(--studio-shadow-xl)}:host(.studio-card--elevated.studio-card--default) .studio-card__container{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary)}:host(.studio-card--filled.studio-card--default) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent}:host(.studio-card--outlined.studio-card--default) .studio-card__container{background:transparent;border:2px solid var(--studio-border-primary)}:host(.studio-card--ghost.studio-card--default) .studio-card__container{background:transparent;border:1px solid transparent}:host(.studio-card--elevated.studio-card--primary) .studio-card__container{background:var(--studio-primary-bg);border:1px solid var(--studio-primary)}:host(.studio-card--filled.studio-card--primary) .studio-card__container{background:var(--studio-primary);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--primary) .studio-card__container{background:transparent;border:2px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-card--ghost.studio-card--primary) .studio-card__container{background:var(--studio-primary-bg);border:1px solid transparent;color:var(--studio-primary)}:host(.studio-card--elevated.studio-card--secondary) .studio-card__container{background:var(--studio-bg-primary);border:1px solid var(--studio-text-secondary)}:host(.studio-card--filled.studio-card--secondary) .studio-card__container{background:var(--studio-text-secondary);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--secondary) .studio-card__container{background:transparent;border:2px solid var(--studio-text-secondary);color:var(--studio-text-secondary)}:host(.studio-card--ghost.studio-card--secondary) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent;color:var(--studio-text-secondary)}:host(.studio-card--elevated.studio-card--success) .studio-card__container{background:var(--studio-success-bg);border:1px solid var(--studio-success)}:host(.studio-card--filled.studio-card--success) .studio-card__container{background:var(--studio-success);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--success) .studio-card__container{background:transparent;border:2px solid var(--studio-success);color:var(--studio-success)}:host(.studio-card--ghost.studio-card--success) .studio-card__container{background:var(--studio-success-bg);border:1px solid transparent;color:var(--studio-success)}:host(.studio-card--elevated.studio-card--error) .studio-card__container{background:var(--studio-error-bg);border:1px solid var(--studio-error)}:host(.studio-card--filled.studio-card--error) .studio-card__container{background:var(--studio-error);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--error) .studio-card__container{background:transparent;border:2px solid var(--studio-error);color:var(--studio-error)}:host(.studio-card--ghost.studio-card--error) .studio-card__container{background:var(--studio-error-bg);border:1px solid transparent;color:var(--studio-error)}:host(.studio-card--elevated.studio-card--warning) .studio-card__container{background:var(--studio-warning-bg);border:1px solid var(--studio-warning)}:host(.studio-card--filled.studio-card--warning) .studio-card__container{background:var(--studio-warning);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--warning) .studio-card__container{background:transparent;border:2px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-card--ghost.studio-card--warning) .studio-card__container{background:var(--studio-warning-bg);border:1px solid transparent;color:var(--studio-warning)}:host(.studio-card--elevated.studio-card--neutral) .studio-card__container{background:var(--studio-bg-tertiary);border:1px solid var(--studio-border-secondary)}:host(.studio-card--filled.studio-card--neutral) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent}:host(.studio-card--outlined.studio-card--neutral) .studio-card__container{background:transparent;border:2px solid var(--studio-border-secondary)}:host(.studio-card--ghost.studio-card--neutral) .studio-card__container{background:transparent;border:1px solid transparent}:host(.studio-card--padding-none) .studio-card__header,:host(.studio-card--padding-none) .studio-card__body,:host(.studio-card--padding-none) .studio-card__footer{padding:0}:host(.studio-card--padding-sm) .studio-card__header,:host(.studio-card--padding-sm) .studio-card__footer{padding:var(--studio-spacing-sm)}:host(.studio-card--padding-sm) .studio-card__body{padding:var(--studio-spacing-sm)}:host(.studio-card--padding-md) .studio-card__header,:host(.studio-card--padding-md) .studio-card__footer{padding:var(--studio-spacing-md)}:host(.studio-card--padding-md) .studio-card__body{padding:var(--studio-spacing-md)}:host(.studio-card--padding-lg) .studio-card__header,:host(.studio-card--padding-lg) .studio-card__footer{padding:var(--studio-spacing-lg)}:host(.studio-card--padding-lg) .studio-card__body{padding:var(--studio-spacing-lg)}.studio-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--studio-spacing-md);flex-shrink:0}:host(.studio-card--divider) .studio-card__header{border-bottom:1px solid var(--studio-border-primary)}.studio-card__header-content{display:flex;align-items:center;gap:var(--studio-spacing-md);flex:1;min-width:0}.studio-card__avatar{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;flex-shrink:0}.studio-card__icon-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--studio-bg-secondary);flex-shrink:0}.studio-card__header-text{flex:1;min-width:0}.studio-card__title{margin:0;font-size:var(--studio-font-size-lg);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-card__subtitle{margin:.25rem 0 0;font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-card__header-actions{display:flex;align-items:center;gap:var(--studio-spacing-sm);flex-shrink:0}.studio-card__media{flex-shrink:0;overflow:hidden;position:relative}:host(.studio-card--padding-none) .studio-card__media{margin:0}:host(.studio-card--padding-sm) .studio-card__media{margin:var(--studio-spacing-sm);margin-top:0}:host(.studio-card--padding-md) .studio-card__media{margin:var(--studio-spacing-md);margin-top:0}:host(.studio-card--padding-lg) .studio-card__media{margin:var(--studio-spacing-lg);margin-top:0}.studio-card__image{width:100%;height:auto;display:block;border-radius:var(--studio-radius-sm)}.studio-card__image--cover{object-fit:cover;height:12rem}.studio-card__image--contain{object-fit:contain;max-height:16rem}.studio-card__body{flex:1;overflow-y:auto}.studio-card__footer{display:flex;align-items:center;gap:var(--studio-spacing-md);flex-shrink:0}:host(.studio-card--divider) .studio-card__footer{border-top:1px solid var(--studio-border-primary)}:host(.studio-card--blurred-footer) .studio-card__footer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-top:1px solid rgba(255,255,255,.2)}:host(.studio-card--horizontal) .studio-card__container{flex-direction:row}:host(.studio-card--horizontal) .studio-card__media{width:40%;margin:0}:host(.studio-card--horizontal) .studio-card__body{flex:1}:host(.studio-card--full-width){width:100%}:host(.studio-card--full-height){height:100%}:host(.studio-card--full-height) .studio-card__container{height:100%}:host(.studio-card--hoverable) .studio-card__container{cursor:pointer;transition:all var(--studio-transition-normal)}:host(.studio-card--hoverable:hover:not(.studio-card--disabled)) .studio-card__container{transform:translateY(-2px);box-shadow:var(--studio-shadow-lg)}:host(.studio-card--pressable) .studio-card__container{cursor:pointer;transition:all var(--studio-transition-fast)}:host(.studio-card--pressable:active:not(.studio-card--disabled)) .studio-card__container{transform:scale(.98)}:host(.studio-card--clickable) .studio-card__container{cursor:pointer}:host(.studio-card--disabled){pointer-events:none;opacity:.5}:host(.studio-card--blurred) .studio-card__container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)}:host(.studio-card--animated){animation:cardFadeIn .3s ease-out}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.studio-card__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10}.studio-card__spinner{animation:spin 1s linear infinite;color:var(--studio-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.studio-card--loading) .studio-card__container{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-card', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.href]': 'href()',
+                        '[attr.target]': 'href() ? target() : null',
+                        '[attr.rel]': 'href() && target() === "_blank" ? "noopener noreferrer" : null',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '(click)': 'handleClick($event)'
+                    }, template: `
+    <div class="studio-card__container">
+      <!-- Header -->
+      @if (showHeader() && (headerTemplate() || title() || subtitle())) {
+        <div class="studio-card__header">
+          @if (headerTemplate()) {
+            <ng-container *ngTemplateOutlet="headerTemplate()!" />
+          } @else {
+            <div class="studio-card__header-content">
+              @if (avatar()) {
+                <img [src]="avatar()!" alt="" class="studio-card__avatar" />
+              }
+              @if (icon() && !avatar()) {
+                <div class="studio-card__icon-wrapper">
+                  <studio-icon [name]="icon()!" [size]="iconSize()" />
+                </div>
+              }
+              <div class="studio-card__header-text">
+                @if (title()) {
+                  <h3 class="studio-card__title">{{ title() }}</h3>
+                }
+                @if (subtitle()) {
+                  <p class="studio-card__subtitle">{{ subtitle() }}</p>
+                }
+              </div>
+            </div>
+            @if (headerActionsTemplate()) {
+              <div class="studio-card__header-actions">
+                <ng-container *ngTemplateOutlet="headerActionsTemplate()!" />
+              </div>
+            }
+          }
+        </div>
+      }
+
+      <!-- Media -->
+      @if (showMedia() && (mediaTemplate() || image())) {
+        <div class="studio-card__media">
+          @if (mediaTemplate()) {
+            <ng-container *ngTemplateOutlet="mediaTemplate()!" />
+          } @else if (image()) {
+            <img
+              [src]="image()!"
+              [alt]="imageAlt()"
+              class="studio-card__image"
+              [class.studio-card__image--cover]="imageFit() === 'cover'"
+              [class.studio-card__image--contain]="imageFit() === 'contain'"
+            />
+          }
+        </div>
+      }
+
+      <!-- Body -->
+      <div class="studio-card__body">
+        @if (bodyTemplate()) {
+          <ng-container *ngTemplateOutlet="bodyTemplate()!" />
+        } @else {
+          <ng-content />
+        }
+      </div>
+
+      <!-- Footer -->
+      @if (showFooter() && footerTemplate()) {
+        <div class="studio-card__footer">
+          <ng-container *ngTemplateOutlet="footerTemplate()!" />
+        </div>
+      }
+
+      <!-- Loading overlay -->
+      @if (loading()) {
+        <div class="studio-card__loading">
+          <studio-icon name="loader-2" [size]="24" class="studio-card__spinner" />
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block;font-family:var(--studio-font-family);position:relative;transition:all var(--studio-transition-normal)}.studio-card__container{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}:host(.studio-card--sm) .studio-card__container{min-height:8rem}:host(.studio-card--md) .studio-card__container{min-height:12rem}:host(.studio-card--lg) .studio-card__container{min-height:16rem}:host(.studio-card--radius-none) .studio-card__container{border-radius:var(--studio-radius-none)}:host(.studio-card--radius-sm) .studio-card__container{border-radius:var(--studio-radius-sm)}:host(.studio-card--radius-md) .studio-card__container{border-radius:var(--studio-radius-md)}:host(.studio-card--radius-lg) .studio-card__container{border-radius:var(--studio-radius-lg)}:host(.studio-card--radius-xl) .studio-card__container{border-radius:var(--studio-radius-xl)}:host(.studio-card--shadow-none) .studio-card__container{box-shadow:none}:host(.studio-card--shadow-sm) .studio-card__container{box-shadow:var(--studio-shadow-sm)}:host(.studio-card--shadow-md) .studio-card__container{box-shadow:var(--studio-shadow-md)}:host(.studio-card--shadow-lg) .studio-card__container{box-shadow:var(--studio-shadow-lg)}:host(.studio-card--shadow-xl) .studio-card__container{box-shadow:var(--studio-shadow-xl)}:host(.studio-card--elevated.studio-card--default) .studio-card__container{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary)}:host(.studio-card--filled.studio-card--default) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent}:host(.studio-card--outlined.studio-card--default) .studio-card__container{background:transparent;border:2px solid var(--studio-border-primary)}:host(.studio-card--ghost.studio-card--default) .studio-card__container{background:transparent;border:1px solid transparent}:host(.studio-card--elevated.studio-card--primary) .studio-card__container{background:var(--studio-primary-bg);border:1px solid var(--studio-primary)}:host(.studio-card--filled.studio-card--primary) .studio-card__container{background:var(--studio-primary);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--primary) .studio-card__container{background:transparent;border:2px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-card--ghost.studio-card--primary) .studio-card__container{background:var(--studio-primary-bg);border:1px solid transparent;color:var(--studio-primary)}:host(.studio-card--elevated.studio-card--secondary) .studio-card__container{background:var(--studio-bg-primary);border:1px solid var(--studio-text-secondary)}:host(.studio-card--filled.studio-card--secondary) .studio-card__container{background:var(--studio-text-secondary);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--secondary) .studio-card__container{background:transparent;border:2px solid var(--studio-text-secondary);color:var(--studio-text-secondary)}:host(.studio-card--ghost.studio-card--secondary) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent;color:var(--studio-text-secondary)}:host(.studio-card--elevated.studio-card--success) .studio-card__container{background:var(--studio-success-bg);border:1px solid var(--studio-success)}:host(.studio-card--filled.studio-card--success) .studio-card__container{background:var(--studio-success);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--success) .studio-card__container{background:transparent;border:2px solid var(--studio-success);color:var(--studio-success)}:host(.studio-card--ghost.studio-card--success) .studio-card__container{background:var(--studio-success-bg);border:1px solid transparent;color:var(--studio-success)}:host(.studio-card--elevated.studio-card--error) .studio-card__container{background:var(--studio-error-bg);border:1px solid var(--studio-error)}:host(.studio-card--filled.studio-card--error) .studio-card__container{background:var(--studio-error);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--error) .studio-card__container{background:transparent;border:2px solid var(--studio-error);color:var(--studio-error)}:host(.studio-card--ghost.studio-card--error) .studio-card__container{background:var(--studio-error-bg);border:1px solid transparent;color:var(--studio-error)}:host(.studio-card--elevated.studio-card--warning) .studio-card__container{background:var(--studio-warning-bg);border:1px solid var(--studio-warning)}:host(.studio-card--filled.studio-card--warning) .studio-card__container{background:var(--studio-warning);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--warning) .studio-card__container{background:transparent;border:2px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-card--ghost.studio-card--warning) .studio-card__container{background:var(--studio-warning-bg);border:1px solid transparent;color:var(--studio-warning)}:host(.studio-card--elevated.studio-card--neutral) .studio-card__container{background:var(--studio-bg-tertiary);border:1px solid var(--studio-border-secondary)}:host(.studio-card--filled.studio-card--neutral) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent}:host(.studio-card--outlined.studio-card--neutral) .studio-card__container{background:transparent;border:2px solid var(--studio-border-secondary)}:host(.studio-card--ghost.studio-card--neutral) .studio-card__container{background:transparent;border:1px solid transparent}:host(.studio-card--padding-none) .studio-card__header,:host(.studio-card--padding-none) .studio-card__body,:host(.studio-card--padding-none) .studio-card__footer{padding:0}:host(.studio-card--padding-sm) .studio-card__header,:host(.studio-card--padding-sm) .studio-card__footer{padding:var(--studio-spacing-sm)}:host(.studio-card--padding-sm) .studio-card__body{padding:var(--studio-spacing-sm)}:host(.studio-card--padding-md) .studio-card__header,:host(.studio-card--padding-md) .studio-card__footer{padding:var(--studio-spacing-md)}:host(.studio-card--padding-md) .studio-card__body{padding:var(--studio-spacing-md)}:host(.studio-card--padding-lg) .studio-card__header,:host(.studio-card--padding-lg) .studio-card__footer{padding:var(--studio-spacing-lg)}:host(.studio-card--padding-lg) .studio-card__body{padding:var(--studio-spacing-lg)}.studio-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--studio-spacing-md);flex-shrink:0}:host(.studio-card--divider) .studio-card__header{border-bottom:1px solid var(--studio-border-primary)}.studio-card__header-content{display:flex;align-items:center;gap:var(--studio-spacing-md);flex:1;min-width:0}.studio-card__avatar{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;flex-shrink:0}.studio-card__icon-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--studio-bg-secondary);flex-shrink:0}.studio-card__header-text{flex:1;min-width:0}.studio-card__title{margin:0;font-size:var(--studio-font-size-lg);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-card__subtitle{margin:.25rem 0 0;font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-card__header-actions{display:flex;align-items:center;gap:var(--studio-spacing-sm);flex-shrink:0}.studio-card__media{flex-shrink:0;overflow:hidden;position:relative}:host(.studio-card--padding-none) .studio-card__media{margin:0}:host(.studio-card--padding-sm) .studio-card__media{margin:var(--studio-spacing-sm);margin-top:0}:host(.studio-card--padding-md) .studio-card__media{margin:var(--studio-spacing-md);margin-top:0}:host(.studio-card--padding-lg) .studio-card__media{margin:var(--studio-spacing-lg);margin-top:0}.studio-card__image{width:100%;height:auto;display:block;border-radius:var(--studio-radius-sm)}.studio-card__image--cover{object-fit:cover;height:12rem}.studio-card__image--contain{object-fit:contain;max-height:16rem}.studio-card__body{flex:1;overflow-y:auto}.studio-card__footer{display:flex;align-items:center;gap:var(--studio-spacing-md);flex-shrink:0}:host(.studio-card--divider) .studio-card__footer{border-top:1px solid var(--studio-border-primary)}:host(.studio-card--blurred-footer) .studio-card__footer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-top:1px solid rgba(255,255,255,.2)}:host(.studio-card--horizontal) .studio-card__container{flex-direction:row}:host(.studio-card--horizontal) .studio-card__media{width:40%;margin:0}:host(.studio-card--horizontal) .studio-card__body{flex:1}:host(.studio-card--full-width){width:100%}:host(.studio-card--full-height){height:100%}:host(.studio-card--full-height) .studio-card__container{height:100%}:host(.studio-card--hoverable) .studio-card__container{cursor:pointer;transition:all var(--studio-transition-normal)}:host(.studio-card--hoverable:hover:not(.studio-card--disabled)) .studio-card__container{transform:translateY(-2px);box-shadow:var(--studio-shadow-lg)}:host(.studio-card--pressable) .studio-card__container{cursor:pointer;transition:all var(--studio-transition-fast)}:host(.studio-card--pressable:active:not(.studio-card--disabled)) .studio-card__container{transform:scale(.98)}:host(.studio-card--clickable) .studio-card__container{cursor:pointer}:host(.studio-card--disabled){pointer-events:none;opacity:.5}:host(.studio-card--blurred) .studio-card__container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)}:host(.studio-card--animated){animation:cardFadeIn .3s ease-out}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.studio-card__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10}.studio-card__spinner{animation:spin 1s linear infinite;color:var(--studio-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.studio-card--loading) .studio-card__container{pointer-events:none}\n"] }]
+        }], propDecorators: { variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], paddingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], imagePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePosition", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMedia", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], pressable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], blurred: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurred", required: false }] }], blurredFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurredFooter", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], headerAction: [{ type: i0.Output, args: ["headerAction"] }], headerTemplate: [{ type: i0.ContentChild, args: ['cardHeader', { isSignal: true }] }], headerActionsTemplate: [{ type: i0.ContentChild, args: ['cardHeaderActions', { isSignal: true }] }], mediaTemplate: [{ type: i0.ContentChild, args: ['cardMedia', { isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: ['cardBody', { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['cardFooter', { isSignal: true }] }] } });
+
+/**
+ * Card component types
+ */
+
+class ChatMessageComponent {
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    currentUserId = input.required(...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    showAvatar = input(true, ...(ngDevMode ? [{ debugName: "showAvatar" }] : []));
+    showTimestamp = input(true, ...(ngDevMode ? [{ debugName: "showTimestamp" }] : []));
+    showUserName = input(true, ...(ngDevMode ? [{ debugName: "showUserName" }] : []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    isOwn = computed(() => this.message().userId === this.currentUserId(), ...(ngDevMode ? [{ debugName: "isOwn" }] : []));
+    hostClasses = computed(() => {
+        const classes = ['studio-chat-message'];
+        if (this.isOwn())
+            classes.push('chat-message--own');
+        if (this.message().type === 'system')
+            classes.push('chat-message--system');
+        if (this.compact())
+            classes.push('chat-message--compact');
+        if (this.message().status === 'read')
+            classes.push('chat-message--status-read');
+        if (this.message().status === 'error')
+            classes.push('chat-message--status-error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    getInitials(name) {
+        return name
+            .split(' ')
+            .map(n => n[0])
+            .slice(0, 2)
+            .join('')
+            .toUpperCase();
+    }
+    formatTime(date) {
+        const now = new Date();
+        const messageDate = new Date(date);
+        const diff = now.getTime() - messageDate.getTime();
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        if (minutes < 1)
+            return 'Just now';
+        if (minutes < 60)
+            return `${minutes}m ago`;
+        if (hours < 24)
+            return `${hours}h ago`;
+        if (days === 1)
+            return 'Yesterday';
+        if (days < 7)
+            return `${days}d ago`;
+        return messageDate.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric'
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ChatMessageComponent, isStandalone: true, selector: "studio-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, showUserName: { classPropertyName: "showUserName", publicName: "showUserName", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div class="chat-message__container">
+      @if (showAvatar() && !isOwn()) {
+        <div class="chat-message__avatar">
+          @if (message().userAvatar) {
+            <img [src]="message().userAvatar" [alt]="message().userName" />
+          } @else {
+            <div class="chat-message__avatar-fallback">
+              {{ getInitials(message().userName) }}
+            </div>
+          }
+        </div>
+      }
+
+      <div class="chat-message__content-wrapper">
+        @if (!isOwn() && showUserName()) {
+          <div class="chat-message__user-name">{{ message().userName }}</div>
+        }
+
+        <div class="chat-message__bubble">
+          @if (message().type === 'system') {
+            <div class="chat-message__system">{{ message().content }}</div>
+          } @else {
+            <div class="chat-message__text">{{ message().content }}</div>
+          }
+
+          @if (message().edited) {
+            <span class="chat-message__edited">(edited)</span>
+          }
+        </div>
+
+        <div class="chat-message__meta">
+          @if (showTimestamp()) {
+            <span class="chat-message__time">{{ formatTime(message().timestamp) }}</span>
+          }
+
+          @if (isOwn() && message().status && message().status !== 'sending') {
+            <span class="chat-message__status">
+              @if (message().status === 'sent') {
+                <studio-icon name="check" [size]="12" />
+              }
+              @if (message().status === 'delivered' || message().status === 'read') {
+                <studio-icon name="check-check" [size]="12" />
+              }
+              @if (message().status === 'error') {
+                <studio-icon name="alert-circle" [size]="12" />
+              }
+            </span>
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;margin-bottom:.75rem}:host(.chat-message--own) .chat-message__container{justify-content:flex-end}:host(.chat-message--own) .chat-message__bubble{background:var(--studio-primary);color:#fff}:host(.chat-message--own) .chat-message__meta{justify-content:flex-end}:host(.chat-message--system){text-align:center;margin:1rem 0}:host(.chat-message--system) .chat-message__system{display:inline-block;padding:.25rem .75rem;background:var(--studio-bg-secondary);color:var(--studio-text-secondary);border-radius:var(--studio-radius-full);font-size:.75rem}:host(.chat-message--compact){margin-bottom:.25rem}.chat-message__container{display:flex;gap:.75rem;align-items:flex-end}.chat-message__avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}.chat-message__avatar img{width:100%;height:100%;object-fit:cover}.chat-message__avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--studio-primary);color:#fff;font-size:.75rem;font-weight:600}.chat-message__content-wrapper{max-width:70%;display:flex;flex-direction:column;gap:.25rem}.chat-message__user-name{font-size:.75rem;font-weight:500;color:var(--studio-text-secondary);padding-left:.75rem}.chat-message__bubble{padding:.625rem .875rem;border-radius:var(--studio-radius-lg);background:var(--studio-bg-secondary);color:var(--studio-text-primary);word-wrap:break-word;position:relative}.chat-message__text{white-space:pre-wrap;line-height:1.5}.chat-message__edited{font-size:.6875rem;color:var(--studio-text-tertiary);margin-left:.25rem}.chat-message__meta{display:flex;align-items:center;gap:.25rem;padding:0 .75rem}.chat-message__time{font-size:.6875rem;color:var(--studio-text-tertiary)}.chat-message__status{display:flex;align-items:center;color:var(--studio-text-tertiary)}:host(.chat-message--own) .chat-message__status{color:var(--studio-text-tertiary)}:host(.chat-message--status-read) .chat-message__status{color:var(--studio-primary)}:host(.chat-message--status-error) .chat-message__status{color:var(--studio-error)}:host(.chat-message--compact) .chat-message__avatar{width:24px;height:24px}:host(.chat-message--compact) .chat-message__bubble{padding:.5rem .75rem;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-chat-message', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()'
+                    }, template: `
+    <div class="chat-message__container">
+      @if (showAvatar() && !isOwn()) {
+        <div class="chat-message__avatar">
+          @if (message().userAvatar) {
+            <img [src]="message().userAvatar" [alt]="message().userName" />
+          } @else {
+            <div class="chat-message__avatar-fallback">
+              {{ getInitials(message().userName) }}
+            </div>
+          }
+        </div>
+      }
+
+      <div class="chat-message__content-wrapper">
+        @if (!isOwn() && showUserName()) {
+          <div class="chat-message__user-name">{{ message().userName }}</div>
+        }
+
+        <div class="chat-message__bubble">
+          @if (message().type === 'system') {
+            <div class="chat-message__system">{{ message().content }}</div>
+          } @else {
+            <div class="chat-message__text">{{ message().content }}</div>
+          }
+
+          @if (message().edited) {
+            <span class="chat-message__edited">(edited)</span>
+          }
+        </div>
+
+        <div class="chat-message__meta">
+          @if (showTimestamp()) {
+            <span class="chat-message__time">{{ formatTime(message().timestamp) }}</span>
+          }
+
+          @if (isOwn() && message().status && message().status !== 'sending') {
+            <span class="chat-message__status">
+              @if (message().status === 'sent') {
+                <studio-icon name="check" [size]="12" />
+              }
+              @if (message().status === 'delivered' || message().status === 'read') {
+                <studio-icon name="check-check" [size]="12" />
+              }
+              @if (message().status === 'error') {
+                <studio-icon name="alert-circle" [size]="12" />
+              }
+            </span>
+          }
+        </div>
+      </div>
+    </div>
+  `, styles: [":host{display:block;margin-bottom:.75rem}:host(.chat-message--own) .chat-message__container{justify-content:flex-end}:host(.chat-message--own) .chat-message__bubble{background:var(--studio-primary);color:#fff}:host(.chat-message--own) .chat-message__meta{justify-content:flex-end}:host(.chat-message--system){text-align:center;margin:1rem 0}:host(.chat-message--system) .chat-message__system{display:inline-block;padding:.25rem .75rem;background:var(--studio-bg-secondary);color:var(--studio-text-secondary);border-radius:var(--studio-radius-full);font-size:.75rem}:host(.chat-message--compact){margin-bottom:.25rem}.chat-message__container{display:flex;gap:.75rem;align-items:flex-end}.chat-message__avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}.chat-message__avatar img{width:100%;height:100%;object-fit:cover}.chat-message__avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--studio-primary);color:#fff;font-size:.75rem;font-weight:600}.chat-message__content-wrapper{max-width:70%;display:flex;flex-direction:column;gap:.25rem}.chat-message__user-name{font-size:.75rem;font-weight:500;color:var(--studio-text-secondary);padding-left:.75rem}.chat-message__bubble{padding:.625rem .875rem;border-radius:var(--studio-radius-lg);background:var(--studio-bg-secondary);color:var(--studio-text-primary);word-wrap:break-word;position:relative}.chat-message__text{white-space:pre-wrap;line-height:1.5}.chat-message__edited{font-size:.6875rem;color:var(--studio-text-tertiary);margin-left:.25rem}.chat-message__meta{display:flex;align-items:center;gap:.25rem;padding:0 .75rem}.chat-message__time{font-size:.6875rem;color:var(--studio-text-tertiary)}.chat-message__status{display:flex;align-items:center;color:var(--studio-text-tertiary)}:host(.chat-message--own) .chat-message__status{color:var(--studio-text-tertiary)}:host(.chat-message--status-read) .chat-message__status{color:var(--studio-primary)}:host(.chat-message--status-error) .chat-message__status{color:var(--studio-error)}:host(.chat-message--compact) .chat-message__avatar{width:24px;height:24px}:host(.chat-message--compact) .chat-message__bubble{padding:.5rem .75rem;font-size:.875rem}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], currentUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUserId", required: true }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], showUserName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserName", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
+
+class ChatInputComponent {
+    placeholder = input('Type a message...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    messageSubmit = output();
+    typing = output();
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    textareaRef = viewChild('textareaRef', ...(ngDevMode ? [{ debugName: "textareaRef" }] : []));
+    typingTimeout;
+    canSend = computed(() => this.inputValue().trim().length > 0 && !this.disabled(), ...(ngDevMode ? [{ debugName: "canSend" }] : []));
+    hostClasses = computed(() => {
+        const classes = ['studio-chat-input'];
+        if (this.compact())
+            classes.push('chat-input--compact');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    constructor() {
+        // Auto-resize textarea
+        effect(() => {
+            const textarea = this.textareaRef()?.nativeElement;
+            if (textarea) {
+                textarea.style.height = 'auto';
+                textarea.style.height = textarea.scrollHeight + 'px';
+            }
+        });
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.handleSubmit();
+        }
+    }
+    onInput() {
+        // Emit typing indicator
+        this.typing.emit(true);
+        // Clear previous timeout
+        if (this.typingTimeout) {
+            clearTimeout(this.typingTimeout);
+        }
+        // Set new timeout to stop typing after 1 second
+        this.typingTimeout = setTimeout(() => {
+            this.typing.emit(false);
+        }, 1000);
+        // Auto-resize
+        const textarea = this.textareaRef()?.nativeElement;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = textarea.scrollHeight + 'px';
+        }
+    }
+    handleSubmit() {
+        const content = this.inputValue().trim();
+        if (content && !this.disabled()) {
+            this.messageSubmit.emit({ content });
+            this.inputValue.set('');
+            // Reset textarea height
+            const textarea = this.textareaRef()?.nativeElement;
+            if (textarea) {
+                textarea.style.height = 'auto';
+            }
+            // Stop typing indicator
+            if (this.typingTimeout) {
+                clearTimeout(this.typingTimeout);
+            }
+            this.typing.emit(false);
+        }
+    }
+    focus() {
+        this.textareaRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.12", type: ChatInputComponent, isStandalone: true, selector: "studio-chat-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSubmit: "messageSubmit", typing: "typing" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="chat-input__container">
+      <textarea
+        #textareaRef
+        class="chat-input__textarea"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [(ngModel)]="inputValue"
+        (keydown)="onKeyDown($event)"
+        (input)="onInput()"
+        rows="1"
+      ></textarea>
+
+      <studio-button
+        variant="ghost"
+        size="sm"
+        [disabled]="!canSend()"
+        (click)="handleSubmit()"
+        class="chat-input__send-button"
+      >
+        <studio-icon name="send" [size]="20" />
+      </studio-button>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.chat-input__container{display:flex;align-items:flex-end;gap:.5rem;padding:1rem;background:var(--studio-bg-primary);border-top:1px solid var(--studio-border-primary)}.chat-input__textarea{flex:1;min-height:40px;max-height:120px;padding:.625rem .875rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);font-family:inherit;font-size:.875rem;line-height:1.5;resize:none;overflow-y:auto;transition:border-color .15s ease}.chat-input__textarea:focus{outline:none;border-color:var(--studio-primary)}.chat-input__textarea:disabled{opacity:.5;cursor:not-allowed}.chat-input__textarea::placeholder{color:var(--studio-text-tertiary)}.chat-input__send-button{flex-shrink:0}:host(.chat-input--compact) .chat-input__container{padding:.75rem}:host(.chat-input--compact) .chat-input__textarea{padding:.5rem .75rem;font-size:.8125rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-chat-input', standalone: true, imports: [CommonModule, FormsModule, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()'
+                    }, template: `
+    <div class="chat-input__container">
+      <textarea
+        #textareaRef
+        class="chat-input__textarea"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [(ngModel)]="inputValue"
+        (keydown)="onKeyDown($event)"
+        (input)="onInput()"
+        rows="1"
+      ></textarea>
+
+      <studio-button
+        variant="ghost"
+        size="sm"
+        [disabled]="!canSend()"
+        (click)="handleSubmit()"
+        class="chat-input__send-button"
+      >
+        <studio-icon name="send" [size]="20" />
+      </studio-button>
+    </div>
+  `, styles: [":host{display:block}.chat-input__container{display:flex;align-items:flex-end;gap:.5rem;padding:1rem;background:var(--studio-bg-primary);border-top:1px solid var(--studio-border-primary)}.chat-input__textarea{flex:1;min-height:40px;max-height:120px;padding:.625rem .875rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);font-family:inherit;font-size:.875rem;line-height:1.5;resize:none;overflow-y:auto;transition:border-color .15s ease}.chat-input__textarea:focus{outline:none;border-color:var(--studio-primary)}.chat-input__textarea:disabled{opacity:.5;cursor:not-allowed}.chat-input__textarea::placeholder{color:var(--studio-text-tertiary)}.chat-input__send-button{flex-shrink:0}:host(.chat-input--compact) .chat-input__container{padding:.75rem}:host(.chat-input--compact) .chat-input__textarea{padding:.5rem .75rem;font-size:.8125rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], messageSubmit: [{ type: i0.Output, args: ["messageSubmit"] }], typing: [{ type: i0.Output, args: ["typing"] }], textareaRef: [{ type: i0.ViewChild, args: ['textareaRef', { isSignal: true }] }] } });
+
+/**
+ * Chat component - Flexible chat/messaging component
+ *
+ * @example
+ * <studio-chat
+ *   [messages]="messages"
+ *   [currentUserId]="currentUser.id"
+ *   variant="default"
+ *   (messageSubmit)="handleMessage($event)"
+ * />
+ */
+class ChatComponent {
+    // ========== Required ==========
+    messages = input.required(...(ngDevMode ? [{ debugName: "messages" }] : []));
+    currentUserId = input.required(...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    // ========== Appearance ==========
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    height = input('600px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    // ========== Behavior ==========
+    placeholder = input('Type a message...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    showAvatars = input(true, ...(ngDevMode ? [{ debugName: "showAvatars" }] : []));
+    showTimestamps = input(true, ...(ngDevMode ? [{ debugName: "showTimestamps" }] : []));
+    showUserNames = input(true, ...(ngDevMode ? [{ debugName: "showUserNames" }] : []));
+    enableAutoScroll = input(true, ...(ngDevMode ? [{ debugName: "enableAutoScroll" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    // ========== Customization ==========
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    // ========== Outputs ==========
+    messageSubmit = output();
+    typing = output();
+    // ========== State ==========
+    messagesContainerRef = viewChild('messagesContainer', ...(ngDevMode ? [{ debugName: "messagesContainerRef" }] : []));
+    isScrolledUp = signal(false, ...(ngDevMode ? [{ debugName: "isScrolledUp" }] : []));
+    shouldAutoScroll = signal(true, ...(ngDevMode ? [{ debugName: "shouldAutoScroll" }] : []));
+    hostClasses = computed(() => {
+        const classes = ['studio-chat'];
+        classes.push(`studio-chat--${this.variant()}`);
+        classes.push(`studio-chat--${this.size()}`);
+        if (this.disabled())
+            classes.push('studio-chat--disabled');
+        if (this.class())
+            classes.push(this.class());
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    isCompact = computed(() => this.variant() === 'compact' || this.variant() === 'minimal', ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
+    constructor() {
+        // Auto-scroll when new messages arrive
+        effect(() => {
+            const messages = this.messages();
+            if (messages.length > 0 && this.shouldAutoScroll() && this.enableAutoScroll()) {
+                setTimeout(() => this.scrollToBottom(), 0);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.scrollToBottom();
+    }
+    onScroll() {
+        const container = this.messagesContainerRef()?.nativeElement;
+        if (!container)
+            return;
+        const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+        this.isScrolledUp.set(!isAtBottom);
+        this.shouldAutoScroll.set(isAtBottom);
+    }
+    onMessageSubmit(event) {
+        this.messageSubmit.emit(event);
+        this.shouldAutoScroll.set(true);
+    }
+    scrollToBottom() {
+        const container = this.messagesContainerRef()?.nativeElement;
+        if (container) {
+            container.scrollTop = container.scrollHeight;
+            this.isScrolledUp.set(false);
+            this.shouldAutoScroll.set(true);
+        }
+    }
+    onTyping(typing) {
+        this.typing.emit(typing);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ChatComponent, isStandalone: true, selector: "studio-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, showUserNames: { classPropertyName: "showUserNames", publicName: "showUserNames", isSignal: true, isRequired: false, transformFunction: null }, enableAutoScroll: { classPropertyName: "enableAutoScroll", publicName: "enableAutoScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSubmit: "messageSubmit", typing: "typing" }, host: { properties: { "class": "hostClasses()", "style.height": "height()" } }, viewQueries: [{ propertyName: "messagesContainerRef", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chat__container\">\n  <div\n    #messagesContainer\n    class=\"chat__messages\"\n    (scroll)=\"onScroll()\"\n  >\n    @if (messages().length === 0) {\n      <div class=\"chat__empty\">\n        <studio-icon name=\"message-circle\" [size]=\"48\" />\n        <p>No messages yet</p>\n        <small>Start a conversation</small>\n      </div>\n    } @else {\n      @for (message of messages(); track message.id || $index) {\n        <studio-chat-message\n          [message]=\"message\"\n          [currentUserId]=\"currentUserId()\"\n          [showAvatar]=\"showAvatars()\"\n          [showTimestamp]=\"showTimestamps()\"\n          [showUserName]=\"showUserNames()\"\n          [compact]=\"isCompact()\"\n        />\n      }\n    }\n  </div>\n\n  @if (isScrolledUp()) {\n    <button\n      class=\"chat__scroll-button\"\n      (click)=\"scrollToBottom()\"\n      type=\"button\"\n    >\n      <studio-icon name=\"arrow-down\" [size]=\"20\" />\n    </button>\n  }\n\n  <studio-chat-input\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [compact]=\"isCompact()\"\n    (messageSubmit)=\"onMessageSubmit($event)\"\n    (typing)=\"onTyping($event)\"\n  />\n</div>\n", styles: [":host{display:block;position:relative;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-lg);overflow:hidden}.chat__container{display:flex;flex-direction:column;height:100%}.chat__messages{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;scroll-behavior:smooth}.chat__messages::-webkit-scrollbar{width:6px}.chat__messages::-webkit-scrollbar-track{background:var(--studio-bg-secondary)}.chat__messages::-webkit-scrollbar-thumb{background:var(--studio-border-primary);border-radius:var(--studio-radius-full)}.chat__messages::-webkit-scrollbar-thumb:hover{background:var(--studio-text-tertiary)}.chat__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--studio-text-secondary);padding:3rem 1.5rem}.chat__empty p{margin:0;font-size:1rem;font-weight:500}.chat__empty small{font-size:.875rem;color:var(--studio-text-tertiary)}.chat__scroll-button{position:absolute;bottom:100px;right:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:50%;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:all .15s ease;color:var(--studio-text-primary);z-index:10}.chat__scroll-button:hover{background:var(--studio-bg-hover);transform:scale(1.05)}.chat__scroll-button:active{transform:scale(.95)}:host(.studio-chat--compact) .chat__messages{padding:1rem}:host(.studio-chat--compact) .chat__scroll-button{bottom:80px}:host(.studio-chat--minimal){border:none;background:transparent}:host(.studio-chat--minimal) .chat__messages{padding:1rem}:host(.studio-chat--bubbles) .chat__messages{padding:1rem}:host(.studio-chat--sm) .chat__messages{padding:1rem;font-size:.875rem}:host(.studio-chat--sm) .chat__scroll-button{width:36px;height:36px;bottom:90px}:host(.studio-chat--lg) .chat__messages{padding:2rem;font-size:1rem}:host(.studio-chat--lg) .chat__scroll-button{width:44px;height:44px;bottom:110px}:host(.studio-chat--disabled){opacity:.6;pointer-events:none}@media (max-width: 640px){.chat__messages{padding:1rem}.chat__scroll-button{bottom:90px;right:1rem}}@media (prefers-reduced-motion: reduce){.chat__messages{scroll-behavior:auto}.chat__scroll-button{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatMessageComponent, selector: "studio-chat-message", inputs: ["message", "currentUserId", "showAvatar", "showTimestamp", "showUserName", "compact"] }, { kind: "component", type: ChatInputComponent, selector: "studio-chat-input", inputs: ["placeholder", "disabled", "compact"], outputs: ["messageSubmit", "typing"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-chat', standalone: true, imports: [
+                        CommonModule,
+                        ChatMessageComponent,
+                        ChatInputComponent,
+                        IconComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.height]': 'height()'
+                    }, template: "<div class=\"chat__container\">\n  <div\n    #messagesContainer\n    class=\"chat__messages\"\n    (scroll)=\"onScroll()\"\n  >\n    @if (messages().length === 0) {\n      <div class=\"chat__empty\">\n        <studio-icon name=\"message-circle\" [size]=\"48\" />\n        <p>No messages yet</p>\n        <small>Start a conversation</small>\n      </div>\n    } @else {\n      @for (message of messages(); track message.id || $index) {\n        <studio-chat-message\n          [message]=\"message\"\n          [currentUserId]=\"currentUserId()\"\n          [showAvatar]=\"showAvatars()\"\n          [showTimestamp]=\"showTimestamps()\"\n          [showUserName]=\"showUserNames()\"\n          [compact]=\"isCompact()\"\n        />\n      }\n    }\n  </div>\n\n  @if (isScrolledUp()) {\n    <button\n      class=\"chat__scroll-button\"\n      (click)=\"scrollToBottom()\"\n      type=\"button\"\n    >\n      <studio-icon name=\"arrow-down\" [size]=\"20\" />\n    </button>\n  }\n\n  <studio-chat-input\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [compact]=\"isCompact()\"\n    (messageSubmit)=\"onMessageSubmit($event)\"\n    (typing)=\"onTyping($event)\"\n  />\n</div>\n", styles: [":host{display:block;position:relative;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-lg);overflow:hidden}.chat__container{display:flex;flex-direction:column;height:100%}.chat__messages{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;scroll-behavior:smooth}.chat__messages::-webkit-scrollbar{width:6px}.chat__messages::-webkit-scrollbar-track{background:var(--studio-bg-secondary)}.chat__messages::-webkit-scrollbar-thumb{background:var(--studio-border-primary);border-radius:var(--studio-radius-full)}.chat__messages::-webkit-scrollbar-thumb:hover{background:var(--studio-text-tertiary)}.chat__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--studio-text-secondary);padding:3rem 1.5rem}.chat__empty p{margin:0;font-size:1rem;font-weight:500}.chat__empty small{font-size:.875rem;color:var(--studio-text-tertiary)}.chat__scroll-button{position:absolute;bottom:100px;right:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:50%;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:all .15s ease;color:var(--studio-text-primary);z-index:10}.chat__scroll-button:hover{background:var(--studio-bg-hover);transform:scale(1.05)}.chat__scroll-button:active{transform:scale(.95)}:host(.studio-chat--compact) .chat__messages{padding:1rem}:host(.studio-chat--compact) .chat__scroll-button{bottom:80px}:host(.studio-chat--minimal){border:none;background:transparent}:host(.studio-chat--minimal) .chat__messages{padding:1rem}:host(.studio-chat--bubbles) .chat__messages{padding:1rem}:host(.studio-chat--sm) .chat__messages{padding:1rem;font-size:.875rem}:host(.studio-chat--sm) .chat__scroll-button{width:36px;height:36px;bottom:90px}:host(.studio-chat--lg) .chat__messages{padding:2rem;font-size:1rem}:host(.studio-chat--lg) .chat__scroll-button{width:44px;height:44px;bottom:110px}:host(.studio-chat--disabled){opacity:.6;pointer-events:none}@media (max-width: 640px){.chat__messages{padding:1rem}.chat__scroll-button{bottom:90px;right:1rem}}@media (prefers-reduced-motion: reduce){.chat__messages{scroll-behavior:auto}.chat__scroll-button{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: true }] }], currentUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUserId", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], showUserNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserNames", required: false }] }], enableAutoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAutoScroll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], messageSubmit: [{ type: i0.Output, args: ["messageSubmit"] }], typing: [{ type: i0.Output, args: ["typing"] }], messagesContainerRef: [{ type: i0.ViewChild, args: ['messagesContainer', { isSignal: true }] }] } });
+
 /**
  * Checkbox component for selecting boolean values
  *
@@ -1263,7 +2135,7 @@ class CheckboxComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true
-            }], ngImport: i0, template: "<label\n  [for]=\"checkboxId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <!-- Checkbox input -->\n  <input\n    type=\"checkbox\"\n    [id]=\"checkboxId()\"\n    [name]=\"name()\"\n    [checked]=\"internalChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"ariaChecked()\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? checkboxId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-checkbox__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Custom checkbox -->\n  <span [ngClass]=\"checkboxClasses()\">\n    <!-- Checkmark icon -->\n    @if (internalChecked() && !indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M13.3333 4L6 11.3333L2.66666 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n\n    <!-- Indeterminate icon -->\n    @if (indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon studio-checkbox__icon--indeterminate\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <!-- Label content -->\n  @if (label() || description()) {\n    <span class=\"studio-checkbox__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-checkbox__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-checkbox__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-checkbox__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n<!-- Helper text / Error message -->\n@if (showHint() || showError()) {\n  <div\n    [id]=\"checkboxId() + '-description'\"\n    class=\"studio-checkbox__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-checkbox__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-checkbox__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-checkbox-wrapper--label-left{flex-direction:row-reverse}.studio-checkbox-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-checkbox-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-checkbox-wrapper--md{font-size:var(--studio-font-size-base)}.studio-checkbox-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-checkbox__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base)}.studio-checkbox--sm{width:1rem;height:1rem}.studio-checkbox--md{width:1.25rem;height:1.25rem}.studio-checkbox--lg{width:1.5rem;height:1.5rem}.studio-checkbox--radius-none{border-radius:0}.studio-checkbox--radius-sm{border-radius:var(--studio-radius-sm)}.studio-checkbox--radius-md{border-radius:var(--studio-radius-md)}.studio-checkbox--radius-lg{border-radius:var(--studio-radius-lg)}.studio-checkbox--radius-full{border-radius:var(--studio-radius-full)}.studio-checkbox--default.studio-checkbox--checked,.studio-checkbox--default.studio-checkbox--indeterminate{border-color:transparent}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--outlined.studio-checkbox--checked,.studio-checkbox--outlined.studio-checkbox--indeterminate{background-color:transparent}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--primary{border-color:var(--studio-primary);color:var(--studio-primary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--secondary{border-color:var(--studio-secondary);color:var(--studio-secondary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--success{border-color:var(--studio-success);color:var(--studio-success)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--error{border-color:var(--studio-error);color:var(--studio-error)}.studio-checkbox--filled.studio-checkbox--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-checkbox--filled.studio-checkbox--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-checkbox--filled.studio-checkbox--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-checkbox--filled.studio-checkbox--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);border-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);border-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);border-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--error:not(.studio-checkbox--checked):not(.studio-checkbox--indeterminate){border-color:var(--studio-error)}.studio-checkbox:hover:not(.studio-checkbox--disabled){border-color:var(--studio-border-secondary)}.studio-checkbox__input:focus-visible+.studio-checkbox{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-checkbox__icon{width:100%;height:100%;opacity:0;transform:scale(.8);transition:all var(--studio-transition-fast)}.studio-checkbox--checked .studio-checkbox__icon,.studio-checkbox--indeterminate .studio-checkbox__icon{opacity:1;transform:scale(1)}.studio-checkbox__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-checkbox__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-checkbox__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-checkbox__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--label-left+.studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--sm .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--sm.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--lg .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox-wrapper--lg.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            }], ngImport: i0, template: "<label\n  [for]=\"checkboxId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <!-- Checkbox input -->\n  <input\n    type=\"checkbox\"\n    [id]=\"checkboxId()\"\n    [name]=\"name()\"\n    [checked]=\"internalChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"ariaChecked()\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? checkboxId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-checkbox__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Custom checkbox -->\n  <span [ngClass]=\"checkboxClasses()\">\n    <!-- Checkmark icon -->\n    @if (internalChecked() && !indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M13.3333 4L6 11.3333L2.66666 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n\n    <!-- Indeterminate icon -->\n    @if (indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon studio-checkbox__icon--indeterminate\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <!-- Label content -->\n  @if (label() || description()) {\n    <span class=\"studio-checkbox__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-checkbox__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-checkbox__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-checkbox__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n<!-- Helper text / Error message -->\n@if (showHint() || showError()) {\n  <div\n    [id]=\"checkboxId() + '-description'\"\n    class=\"studio-checkbox__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-checkbox__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-checkbox__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-checkbox-wrapper--label-left{flex-direction:row-reverse}.studio-checkbox-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-checkbox-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-checkbox-wrapper--md{font-size:var(--studio-font-size-base)}.studio-checkbox-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-checkbox__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base)}.studio-checkbox--sm{width:1rem;height:1rem}.studio-checkbox--md{width:1.25rem;height:1.25rem}.studio-checkbox--lg{width:1.5rem;height:1.5rem}.studio-checkbox--radius-none{border-radius:0}.studio-checkbox--radius-sm{border-radius:var(--studio-radius-sm)}.studio-checkbox--radius-md{border-radius:var(--studio-radius-md)}.studio-checkbox--radius-lg{border-radius:var(--studio-radius-lg)}.studio-checkbox--radius-full{border-radius:var(--studio-radius-full)}.studio-checkbox--default.studio-checkbox--checked,.studio-checkbox--default.studio-checkbox--indeterminate{border-color:transparent}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--outlined.studio-checkbox--checked,.studio-checkbox--outlined.studio-checkbox--indeterminate{background-color:transparent}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--primary{border-color:var(--studio-primary);color:var(--studio-primary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--secondary{border-color:var(--studio-secondary);color:var(--studio-secondary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--success{border-color:var(--studio-success);color:var(--studio-success)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--error{border-color:var(--studio-error);color:var(--studio-error)}.studio-checkbox--filled.studio-checkbox--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-checkbox--filled.studio-checkbox--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-checkbox--filled.studio-checkbox--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-checkbox--filled.studio-checkbox--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);border-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);border-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);border-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--error:not(.studio-checkbox--checked):not(.studio-checkbox--indeterminate){border-color:var(--studio-error)}.studio-checkbox:hover:not(.studio-checkbox--disabled){border-color:var(--studio-border-secondary)}.studio-checkbox__input:focus-visible+.studio-checkbox{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-checkbox__icon{width:100%;height:100%;opacity:0;transform:scale(.8);transition:all var(--studio-transition-fast)}.studio-checkbox--checked .studio-checkbox__icon,.studio-checkbox--indeterminate .studio-checkbox__icon{opacity:1;transform:scale(1)}.studio-checkbox__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-checkbox__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-checkbox__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-checkbox__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--label-left+.studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--sm .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--sm.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--lg .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox-wrapper--lg.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -2069,7 +2941,7 @@ class ColorPickerCompactComponent {
         </ng-template>
       }
     </studio-popover>
-  `, isInline: true, styles: [":host{display:inline-block}.color-picker-compact__trigger{position:relative;cursor:pointer;border:2px solid var(--studio-border-primary);transition:all var(--studio-transition-fast);overflow:hidden;&--disabled{cursor:not-allowed;opacity:.5}}.color-picker-compact__trigger:hover:not(.color-picker-compact__trigger--disabled){border-color:var(--studio-border-secondary);transform:scale(1.05)}.color-picker-compact__trigger:active:not(.color-picker-compact__trigger--disabled){transform:scale(.95)}.color-picker-compact__trigger:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}.color-picker-compact__color-text{position:absolute;bottom:0;left:0;right:0;padding:.125rem .25rem;background:#0009;color:#fff;font-size:.625rem;text-align:center;font-family:var(--studio-font-family-mono, monospace)}.color-picker-compact__footer{display:flex;gap:.75rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "studio-popover", inputs: ["id", "visible", "disabled", "trigger", "openDelay", "closeDelay", "position", "offset", "preventOverflow", "flipValue", "variant", "size", "width", "minWidth", "maxWidth", "maxHeight", "padding", "arrow", "arrowSize", "closeOnClickOutside", "closeOnEscape", "closeOnScroll", "showOverlay", "overlayOpacity", "animation", "animationDuration", "showHeader", "showFooter", "showCloseButton", "content", "zIndex", "ariaLabel", "role"], outputs: ["visibleChange", "opened", "closed", "positionChanged"] }, { kind: "component", type: ColorPickerComponent, selector: "studio-color-picker", inputs: ["variant", "size", "format", "showAlpha", "showPresets", "showFormatToggle", "showCopyButton", "presets", "label", "hint", "required", "error", "errorMessage", "disabled", "readonly"], outputs: ["colorChange", "colorValueChange", "copied"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-block}.color-picker-compact__trigger{position:relative;cursor:pointer;border:2px solid var(--studio-border-primary);transition:all var(--studio-transition-fast);overflow:hidden;&--disabled{cursor:not-allowed;opacity:.5}}.color-picker-compact__trigger:hover:not(.color-picker-compact__trigger--disabled){border-color:var(--studio-border-secondary);transform:scale(1.05)}.color-picker-compact__trigger:active:not(.color-picker-compact__trigger--disabled){transform:scale(.95)}.color-picker-compact__trigger:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}.color-picker-compact__color-text{position:absolute;bottom:0;left:0;right:0;padding:.125rem .25rem;background:#0009;color:#fff;font-size:.625rem;text-align:center;font-family:var(--studio-font-family-mono, monospace)}.color-picker-compact__footer{display:flex;gap:.75rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "studio-popover", inputs: ["id", "visible", "disabled", "trigger", "openDelay", "closeDelay", "position", "offset", "preventOverflow", "flipValue", "variant", "size", "width", "minWidth", "maxWidth", "maxHeight", "padding", "arrow", "arrowSize", "closeOnClickOutside", "closeOnEscape", "closeOnScroll", "showOverlay", "overlayOpacity", "animation", "animationDuration", "showHeader", "showFooter", "showCloseButton", "content", "zIndex", "ariaLabel", "role"], outputs: ["visibleChange", "opened", "closed", "positionChanged"] }, { kind: "component", type: ColorPickerComponent, selector: "studio-color-picker", inputs: ["variant", "size", "format", "showAlpha", "showPresets", "showFormatToggle", "showCopyButton", "presets", "label", "hint", "required", "error", "errorMessage", "disabled", "readonly"], outputs: ["colorChange", "colorValueChange", "copied"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ColorPickerCompactComponent, decorators: [{
             type: Component,
@@ -3176,7 +4048,7 @@ class MenuComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: MenuComponent, isStandalone: true, selector: "studio-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandOnHover: { classPropertyName: "expandOnHover", publicName: "expandOnHover", isSignal: true, isRequired: false, transformFunction: null }, activeItem: { classPropertyName: "activeItem", publicName: "activeItem", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, selectOnNavigate: { classPropertyName: "selectOnNavigate", publicName: "selectOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, arrowNavigation: { classPropertyName: "arrowNavigation", publicName: "arrowNavigation", isSignal: true, isRequired: false, transformFunction: null }, homeEndNavigation: { classPropertyName: "homeEndNavigation", publicName: "homeEndNavigation", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, showDividers: { classPropertyName: "showDividers", publicName: "showDividers", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, indentLevel: { classPropertyName: "indentLevel", publicName: "indentLevel", isSignal: true, isRequired: false, transformFunction: null }, showExpandIcon: { classPropertyName: "showExpandIcon", publicName: "showExpandIcon", isSignal: true, isRequired: false, transformFunction: null }, expandIconPosition: { classPropertyName: "expandIconPosition", publicName: "expandIconPosition", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, parentExpanded: { classPropertyName: "parentExpanded", publicName: "parentExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemSelect: "itemSelect", expandChange: "expandChange", activeChange: "activeChange" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class": "hostClasses()", "attr.role": "role()", "attr.aria-label": "ariaLabel()", "attr.aria-orientation": "orientation()" } }, ngImport: i0, template: "<div class=\"studio-menu__list\">\n  @for (item of items(); track getItemId(item, $index)) {\n    @if (isVisible(item)) {\n      @if (item.separator) {\n        <!-- Separator -->\n        <div class=\"studio-menu__separator\"></div>\n      } @else {\n        <!-- Menu Item -->\n        <div\n          class=\"studio-menu-item\"\n          [class.studio-menu-item--disabled]=\"isDisabled(item)\"\n          [class.studio-menu-item--active]=\"isActive(item)\"\n          [class.studio-menu-item--has-children]=\"hasChildren(item)\"\n          [class.studio-menu-item--expanded]=\"isExpanded(item)\"\n          [class]=\"itemClass() + ' ' + (item.class || '')\"\n          [style]=\"getIndentStyle()\"\n          [attr.role]=\"role() === 'menu' ? 'menuitem' : undefined\"\n          [attr.aria-disabled]=\"isDisabled(item)\"\n          [attr.aria-expanded]=\"hasChildren(item) ? isExpanded(item) : undefined\"\n          [attr.title]=\"item.tooltip\"\n          (click)=\"handleItemClick($event, item)\"\n          (mouseenter)=\"handleItemMouseEnter(item)\"\n          (mouseleave)=\"handleItemMouseLeave(item)\"\n        >\n          <!-- Router Link -->\n          @if (item.routerLink && !isDisabled(item)) {\n            <a\n              class=\"studio-menu-item__link\"\n              [routerLink]=\"item.routerLink\"\n              [queryParams]=\"item.queryParams\"\n              [fragment]=\"item.fragment\"\n              [target]=\"item.target\"\n              routerLinkActive=\"studio-menu-item__link--active\"\n              [attr.aria-current]=\"isActive(item) ? 'page' : undefined\"\n            >\n              <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: item }\" />\n            </a>\n          }\n          <!-- External Link -->\n          @else if (item.href && !isDisabled(item)) {\n            <a\n              class=\"studio-menu-item__link\"\n              [href]=\"item.href\"\n              [target]=\"item.target\"\n            >\n              <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: item }\" />\n            </a>\n          }\n          <!-- Button (no navigation) -->\n          @else {\n            <div class=\"studio-menu-item__content\">\n              <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: item }\" />\n            </div>\n          }\n        </div>\n\n        <!-- Submenu (recursive) -->\n        @if (hasChildren(item) && isExpanded(item)) {\n          <div\n            class=\"studio-menu__submenu\"\n            [@expandCollapse]=\"animated() ? 'expanded' : undefined\"\n          >\n            <studio-menu\n              [items]=\"item.items!\"\n              [orientation]=\"orientation()\"\n              [mode]=\"mode()\"\n              [collapsible]=\"collapsible()\"\n              [expandOnHover]=\"expandOnHover()\"\n              [selectOnNavigate]=\"selectOnNavigate()\"\n              [keyboardNavigation]=\"keyboardNavigation()\"\n              [arrowNavigation]=\"arrowNavigation()\"\n              [homeEndNavigation]=\"homeEndNavigation()\"\n              [animated]=\"animated()\"\n              [animationDuration]=\"animationDuration()\"\n              [size]=\"size()\"\n              [compact]=\"compact()\"\n              [fullWidth]=\"fullWidth()\"\n              [variant]=\"variant()\"\n              [color]=\"color()\"\n              [radius]=\"radius()\"\n              [spacing]=\"spacing()\"\n              [showDividers]=\"showDividers()\"\n              [iconSize]=\"iconSize()\"\n              [iconOnly]=\"iconOnly()\"\n              [indentLevel]=\"indentLevel()\"\n              [showExpandIcon]=\"showExpandIcon()\"\n              [expandIconPosition]=\"expandIconPosition()\"\n              [expandIcon]=\"expandIcon()\"\n              [itemClass]=\"itemClass()\"\n              [level]=\"level() + 1\"\n              [parentExpanded]=\"isExpanded(item)\"\n              (itemClick)=\"itemClick.emit($event)\"\n              (itemSelect)=\"itemSelect.emit($event)\"\n              (expandChange)=\"expandChange.emit($event)\"\n              (activeChange)=\"activeChange.emit($event)\"\n            />\n          </div>\n        }\n\n        <!-- Divider (if enabled) -->\n        @if (showDividers() && $index < items().length - 1) {\n          <div class=\"studio-menu__divider\"></div>\n        }\n      }\n    }\n  }\n</div>\n\n<!-- Item Content Template -->\n<ng-template #itemContent let-item>\n  <div class=\"studio-menu-item__inner\">\n    <!-- Left Icon -->\n    @if (item.icon && (!item.iconPosition || item.iconPosition === 'left')) {\n      <studio-icon\n        class=\"studio-menu-item__icon studio-menu-item__icon--left\"\n        [name]=\"item.icon\"\n        [size]=\"iconSize()\"\n      />\n    }\n\n    <!-- Label -->\n    @if (!iconOnly()) {\n      <span class=\"studio-menu-item__label\">{{ item.label }}</span>\n    }\n\n    <!-- Badge -->\n    @if (item.badge && !iconOnly()) {\n      <studio-badge\n        class=\"studio-menu-item__badge\"\n        [value]=\"item.badge\"\n        [color]=\"item.badgeColor || 'primary'\"\n        size=\"sm\"\n      />\n    }\n\n    <!-- Right Icon -->\n    @if (item.icon && item.iconPosition === 'right') {\n      <studio-icon\n        class=\"studio-menu-item__icon studio-menu-item__icon--right\"\n        [name]=\"item.icon\"\n        [size]=\"iconSize()\"\n      />\n    }\n\n    <!-- Expand Icon -->\n    @if (hasChildren(item) && showExpandIcon() && !iconOnly()) {\n      <studio-icon\n        class=\"studio-menu-item__expand-icon\"\n        [class.studio-menu-item__expand-icon--expanded]=\"isExpanded(item)\"\n        [name]=\"expandIcon()\"\n        [size]=\"16\"\n      />\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;width:100%;--menu-padding-y: .5rem;--menu-padding-x: .75rem;--menu-font-size: .875rem;--menu-line-height: 1.25rem;--menu-gap: .25rem;--menu-indent: 1rem;--menu-transition: all .2s cubic-bezier(.4, 0, .2, 1);--menu-item-height: auto;--menu-item-min-height: 2.5rem;--menu-border-radius: .375rem;--menu-icon-size: 1rem}:host(.studio-menu--horizontal){flex-direction:row;overflow-x:auto}:host(.studio-menu--horizontal) .studio-menu__list{flex-direction:row;flex-wrap:nowrap}:host(.studio-menu--sm){--menu-padding-y: .375rem;--menu-padding-x: .625rem;--menu-font-size: .8125rem;--menu-line-height: 1.125rem;--menu-gap: .125rem;--menu-item-min-height: 2rem;--menu-border-radius: .25rem;--menu-icon-size: .875rem}:host(.studio-menu--md){--menu-padding-y: .5rem;--menu-padding-x: .75rem;--menu-font-size: .875rem;--menu-line-height: 1.25rem;--menu-gap: .25rem;--menu-item-min-height: 2.5rem;--menu-border-radius: .375rem;--menu-icon-size: 1rem}:host(.studio-menu--lg){--menu-padding-y: .625rem;--menu-padding-x: 1rem;--menu-font-size: .9375rem;--menu-line-height: 1.375rem;--menu-gap: .375rem;--menu-item-min-height: 3rem;--menu-border-radius: .5rem;--menu-icon-size: 1.125rem}:host(.studio-menu--compact){--menu-padding-y: .25rem;--menu-gap: .0625rem}:host(.studio-menu--full-width){width:100%}:host(.studio-menu--full-width) .studio-menu-item{width:100%}:host(.studio-menu--icon-only) .studio-menu-item__label,:host(.studio-menu--icon-only) .studio-menu-item__badge,:host(.studio-menu--icon-only) .studio-menu-item__expand-icon{display:none}:host(.studio-menu--icon-only) .studio-menu-item{justify-content:center;padding:var(--menu-padding-y)}:host(.studio-menu--filled){padding:.5rem;background:var(--studio-bg-secondary);border-radius:calc(var(--menu-border-radius) + .25rem);box-shadow:0 1px 2px #0000000d}:host(.studio-menu--outlined){padding:.5rem;border:1px solid var(--studio-border-primary);border-radius:calc(var(--menu-border-radius) + .25rem);background:var(--studio-bg-primary)}:host(.studio-menu--ghost){padding:0}:host(.studio-menu--primary) .studio-menu-item--active{background:hsl(var(--studio-primary-hsl)/.1);color:var(--studio-primary);font-weight:500}:host(.studio-menu--secondary) .studio-menu-item--active{background:hsl(var(--studio-secondary-hsl)/.1);color:var(--studio-secondary);font-weight:500}:host(.studio-menu--radius-none){--menu-border-radius: 0}:host(.studio-menu--radius-none.studio-menu--filled),:host(.studio-menu--radius-none.studio-menu--outlined){border-radius:0}:host(.studio-menu--radius-sm){--menu-border-radius: .25rem}:host(.studio-menu--radius-sm.studio-menu--filled),:host(.studio-menu--radius-sm.studio-menu--outlined){border-radius:.5rem}:host(.studio-menu--radius-md){--menu-border-radius: .375rem}:host(.studio-menu--radius-md.studio-menu--filled),:host(.studio-menu--radius-md.studio-menu--outlined){border-radius:.625rem}:host(.studio-menu--radius-lg){--menu-border-radius: .5rem}:host(.studio-menu--radius-lg.studio-menu--filled),:host(.studio-menu--radius-lg.studio-menu--outlined){border-radius:.75rem}:host(.studio-menu--spacing-none){--menu-gap: 0}:host(.studio-menu--spacing-sm){--menu-gap: .125rem}:host(.studio-menu--spacing-md){--menu-gap: .25rem}:host(.studio-menu--spacing-lg){--menu-gap: .5rem}.studio-menu__list{display:flex;flex-direction:column;gap:var(--menu-gap);list-style:none;margin:0;padding:0}.studio-menu-item{position:relative;display:flex;align-items:center;width:100%;min-height:var(--menu-item-min-height);padding:0;border:none;background:transparent;color:var(--studio-text-primary);font-size:var(--menu-font-size);line-height:var(--menu-line-height);font-family:inherit;font-weight:400;text-align:left;cursor:pointer;transition:var(--menu-transition);border-radius:var(--menu-border-radius);outline:none;-webkit-user-select:none;user-select:none}.studio-menu-item:hover:not(.studio-menu-item--disabled):not(.studio-menu-item--active){background:hsl(var(--studio-primary-hsl)/.04);color:var(--studio-text-primary)}.studio-menu-item--active{background:hsl(var(--studio-primary-hsl)/.1);color:var(--studio-text-primary);font-weight:500}.studio-menu-item--active .studio-menu-item__icon{color:var(--studio-text-primary)}.studio-menu-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.studio-menu-item--has-children .studio-menu-item__expand-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}.studio-menu-item--expanded .studio-menu-item__expand-icon{transform:rotate(180deg)}.studio-menu-item:focus-visible{outline:2px solid var(--studio-primary);outline-offset:-1px;z-index:1}:host(.studio-menu--filled) .studio-menu-item:hover:not(.studio-menu-item--disabled):not(.studio-menu-item--active){background:var(--studio-bg-hover)}:host(.studio-menu--filled) .studio-menu-item.studio-menu-item--active{background:var(--studio-bg-primary);box-shadow:0 1px 2px #0000000d}:host(.studio-menu--outlined) .studio-menu-item{border:1px solid transparent}:host(.studio-menu--outlined) .studio-menu-item:hover:not(.studio-menu-item--disabled):not(.studio-menu-item--active){border-color:var(--studio-border-secondary);background:var(--studio-bg-secondary)}:host(.studio-menu--outlined) .studio-menu-item.studio-menu-item--active{border-color:var(--studio-primary);background:hsl(var(--studio-primary-hsl)/.05)}:host(.studio-menu--ghost) .studio-menu-item:hover:not(.studio-menu-item--disabled):not(.studio-menu-item--active){background:transparent;color:var(--studio-primary)}:host(.studio-menu--ghost) .studio-menu-item.studio-menu-item--active{background:transparent;color:var(--studio-primary);text-decoration:underline;text-underline-offset:4px}.studio-menu-item__link,.studio-menu-item__content{display:flex;align-items:center;width:100%;padding:var(--menu-padding-y) var(--menu-padding-x);color:inherit;text-decoration:none;gap:.5rem}.studio-menu-item__link:visited{color:inherit}.studio-menu-item__link:hover{text-decoration:none}.studio-menu-item__inner{display:flex;align-items:center;gap:.5rem;width:100%}.studio-menu-item__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--menu-icon-size);height:var(--menu-icon-size);color:var(--studio-text-secondary);transition:var(--menu-transition)}.studio-menu-item__icon--left{order:-1}.studio-menu-item__icon--right{order:1;margin-left:auto}.studio-menu-item:hover .studio-menu-item__icon,.studio-menu-item--active .studio-menu-item__icon{color:var(--studio-text-primary)}.studio-menu-item__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--menu-font-size);line-height:var(--menu-line-height)}.studio-menu-item__badge{flex-shrink:0;margin-left:auto}.studio-menu-item__expand-icon{flex-shrink:0;margin-left:auto;width:1rem;height:1rem;color:var(--studio-text-secondary);opacity:.7;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity var(--menu-transition)}.studio-menu-item:hover .studio-menu-item__expand-icon{opacity:1}.studio-menu__submenu{overflow:hidden;margin-top:var(--menu-gap);margin-left:calc(var(--menu-indent) - .25rem)}.studio-menu__submenu studio-menu{padding-left:0}.studio-menu__submenu .studio-menu__list{padding-left:.75rem;border-left:1px solid var(--studio-border-secondary);margin-left:.75rem}.studio-menu__separator{height:1px;margin:.375rem 0;background:var(--studio-border-secondary);opacity:.6}.studio-menu__divider{height:1px;margin:.125rem 0;background:var(--studio-border-secondary);opacity:.4}@keyframes expandCollapse{0%{opacity:0;max-height:0;transform:translateY(-4px)}to{opacity:1;max-height:1000px;transform:translateY(0)}}@media (max-width: 768px){:host(.studio-menu--horizontal){flex-direction:column}:host(.studio-menu--horizontal) .studio-menu__list{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: MenuComponent, selector: "studio-menu", inputs: ["items", "orientation", "mode", "collapsible", "defaultExpanded", "expandOnHover", "activeItem", "routerLinkActive", "selectOnNavigate", "routerLinkActiveOptions", "keyboardNavigation", "arrowNavigation", "homeEndNavigation", "animated", "animationDuration", "ariaLabel", "role", "size", "compact", "fullWidth", "variant", "color", "radius", "spacing", "showDividers", "iconSize", "iconOnly", "indentLevel", "showExpandIcon", "expandIconPosition", "expandIcon", "class", "itemClass", "level", "parentExpanded"], outputs: ["itemClick", "itemSelect", "expandChange", "activeChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: BadgeComponent, selector: "studio-badge", inputs: ["variant", "size", "color", "radius", "icon", "iconPosition", "dot", "dotColor", "removable", "href", "target", "disabled", "value", "max", "showZero", "uppercase", "bold", "pulse", "autoColor"], outputs: ["removed", "clicked"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: MenuComponent, isStandalone: true, selector: "studio-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandOnHover: { classPropertyName: "expandOnHover", publicName: "expandOnHover", isSignal: true, isRequired: false, transformFunction: null }, activeItem: { classPropertyName: "activeItem", publicName: "activeItem", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, selectOnNavigate: { classPropertyName: "selectOnNavigate", publicName: "selectOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, arrowNavigation: { classPropertyName: "arrowNavigation", publicName: "arrowNavigation", isSignal: true, isRequired: false, transformFunction: null }, homeEndNavigation: { classPropertyName: "homeEndNavigation", publicName: "homeEndNavigation", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, showDividers: { classPropertyName: "showDividers", publicName: "showDividers", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, indentLevel: { classPropertyName: "indentLevel", publicName: "indentLevel", isSignal: true, isRequired: false, transformFunction: null }, showExpandIcon: { classPropertyName: "showExpandIcon", publicName: "showExpandIcon", isSignal: true, isRequired: false, transformFunction: null }, expandIconPosition: { classPropertyName: "expandIconPosition", publicName: "expandIconPosition", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, parentExpanded: { classPropertyName: "parentExpanded", publicName: "parentExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemSelect: "itemSelect", expandChange: "expandChange", activeChange: "activeChange" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class": "hostClasses()", "attr.role": "role()", "attr.aria-label": "ariaLabel()", "attr.aria-orientation": "orientation()" } }, ngImport: i0, template: "<div class=\"studio-menu__list\">\n  @for (item of items(); track getItemId(item, $index)) {\n    @if (isVisible(item)) {\n      @if (item.separator) {\n        <!-- Separator -->\n        <div class=\"studio-menu__separator\"></div>\n      } @else {\n        <!-- Menu Item -->\n        <div\n          class=\"studio-menu-item\"\n          [class.studio-menu-item--disabled]=\"isDisabled(item)\"\n          [class.studio-menu-item--active]=\"isActive(item)\"\n          [class.studio-menu-item--has-children]=\"hasChildren(item)\"\n          [class.studio-menu-item--expanded]=\"isExpanded(item)\"\n          [class]=\"itemClass() + ' ' + (item.class || '')\"\n          [style]=\"getIndentStyle()\"\n          [attr.role]=\"role() === 'menu' ? 'menuitem' : undefined\"\n          [attr.aria-disabled]=\"isDisabled(item)\"\n          [attr.aria-expanded]=\"hasChildren(item) ? isExpanded(item) : undefined\"\n          [attr.title]=\"item.tooltip\"\n          (click)=\"handleItemClick($event, item)\"\n          (mouseenter)=\"handleItemMouseEnter(item)\"\n          (mouseleave)=\"handleItemMouseLeave(item)\"\n        >\n          <!-- Router Link -->\n          @if (item.routerLink && !isDisabled(item)) {\n            <a\n              class=\"studio-menu-item__link\"\n              [routerLink]=\"item.routerLink\"\n              [queryParams]=\"item.queryParams\"\n              [fragment]=\"item.fragment\"\n              [target]=\"item.target\"\n              routerLinkActive=\"studio-menu-item__link--active\"\n              [attr.aria-current]=\"isActive(item) ? 'page' : undefined\"\n            >\n              <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: item }\" />\n            </a>\n          }\n          <!-- External Link -->\n          @else if (item.href && !isDisabled(item)) {\n            <a\n              class=\"studio-menu-item__link\"\n              [href]=\"item.href\"\n              [target]=\"item.target\"\n            >\n              <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: item }\" />\n            </a>\n          }\n          <!-- Button (no navigation) -->\n          @else {\n            <div class=\"studio-menu-item__content\">\n              <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: item }\" />\n            </div>\n          }\n        </div>\n\n        <!-- Submenu (recursive) -->\n        @if (hasChildren(item) && isExpanded(item)) {\n          <div\n            class=\"studio-menu__submenu\"\n            [@expandCollapse]=\"animated() ? 'expanded' : undefined\"\n          >\n            <studio-menu\n              [items]=\"item.items!\"\n              [orientation]=\"orientation()\"\n              [mode]=\"mode()\"\n              [collapsible]=\"collapsible()\"\n              [expandOnHover]=\"expandOnHover()\"\n              [selectOnNavigate]=\"selectOnNavigate()\"\n              [keyboardNavigation]=\"keyboardNavigation()\"\n              [arrowNavigation]=\"arrowNavigation()\"\n              [homeEndNavigation]=\"homeEndNavigation()\"\n              [animated]=\"animated()\"\n              [animationDuration]=\"animationDuration()\"\n              [size]=\"size()\"\n              [compact]=\"compact()\"\n              [fullWidth]=\"fullWidth()\"\n              [variant]=\"variant()\"\n              [color]=\"color()\"\n              [radius]=\"radius()\"\n              [spacing]=\"spacing()\"\n              [showDividers]=\"showDividers()\"\n              [iconSize]=\"iconSize()\"\n              [iconOnly]=\"iconOnly()\"\n              [indentLevel]=\"indentLevel()\"\n              [showExpandIcon]=\"showExpandIcon()\"\n              [expandIconPosition]=\"expandIconPosition()\"\n              [expandIcon]=\"expandIcon()\"\n              [itemClass]=\"itemClass()\"\n              [level]=\"level() + 1\"\n              [parentExpanded]=\"isExpanded(item)\"\n              (itemClick)=\"itemClick.emit($event)\"\n              (itemSelect)=\"itemSelect.emit($event)\"\n              (expandChange)=\"expandChange.emit($event)\"\n              (activeChange)=\"activeChange.emit($event)\"\n            />\n          </div>\n        }\n\n        <!-- Divider (if enabled) -->\n        @if (showDividers() && $index < items().length - 1) {\n          <div class=\"studio-menu__divider\"></div>\n        }\n      }\n    }\n  }\n</div>\n\n<!-- Item Content Template -->\n<ng-template #itemContent let-item>\n  <div class=\"studio-menu-item__inner\">\n    <!-- Left Icon -->\n    @if (item.icon && (!item.iconPosition || item.iconPosition === 'left')) {\n      <studio-icon\n        class=\"studio-menu-item__icon studio-menu-item__icon--left\"\n        [name]=\"item.icon\"\n        [size]=\"iconSize()\"\n      />\n    }\n\n    <!-- Label -->\n    @if (!iconOnly()) {\n      <span class=\"studio-menu-item__label\">{{ item.label }}</span>\n    }\n\n    <!-- Badge -->\n    @if (item.badge && !iconOnly()) {\n      <studio-badge\n        class=\"studio-menu-item__badge\"\n        [value]=\"item.badge\"\n        [color]=\"item.badgeColor || 'primary'\"\n        size=\"sm\"\n      />\n    }\n\n    <!-- Right Icon -->\n    @if (item.icon && item.iconPosition === 'right') {\n      <studio-icon\n        class=\"studio-menu-item__icon studio-menu-item__icon--right\"\n        [name]=\"item.icon\"\n        [size]=\"iconSize()\"\n      />\n    }\n\n    <!-- Expand Icon -->\n    @if (hasChildren(item) && showExpandIcon() && !iconOnly()) {\n      <studio-icon\n        class=\"studio-menu-item__expand-icon\"\n        [class.studio-menu-item__expand-icon--expanded]=\"isExpanded(item)\"\n        [name]=\"expandIcon()\"\n        [size]=\"16\"\n      />\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;width:100%;--menu-padding-y: .5rem;--menu-padding-x: .75rem;--menu-font-size: .875rem;--menu-line-height: 1.25rem;--menu-gap: .25rem;--menu-indent: 1rem;--menu-transition: all .2s cubic-bezier(.4, 0, .2, 1);--menu-item-height: auto;--menu-item-min-height: 2.5rem;--menu-border-radius: .375rem;--menu-icon-size: 1rem}:host(.studio-menu--horizontal){flex-direction:row;overflow-x:auto}:host(.studio-menu--horizontal) .studio-menu__list{flex-direction:row;flex-wrap:nowrap}:host(.studio-menu--sm){--menu-padding-y: .375rem;--menu-padding-x: .625rem;--menu-font-size: .8125rem;--menu-line-height: 1.125rem;--menu-gap: .125rem;--menu-item-min-height: 2rem;--menu-border-radius: .25rem;--menu-icon-size: .875rem}:host(.studio-menu--md){--menu-padding-y: .5rem;--menu-padding-x: .75rem;--menu-font-size: .875rem;--menu-line-height: 1.25rem;--menu-gap: .25rem;--menu-item-min-height: 2.5rem;--menu-border-radius: .375rem;--menu-icon-size: 1rem}:host(.studio-menu--lg){--menu-padding-y: .625rem;--menu-padding-x: 1rem;--menu-font-size: .9375rem;--menu-line-height: 1.375rem;--menu-gap: .375rem;--menu-item-min-height: 3rem;--menu-border-radius: .5rem;--menu-icon-size: 1.125rem}:host(.studio-menu--compact){--menu-padding-y: .25rem;--menu-gap: .0625rem}:host(.studio-menu--full-width){width:100%}:host(.studio-menu--full-width) .studio-menu-item{width:100%}:host(.studio-menu--icon-only) .studio-menu-item__label,:host(.studio-menu--icon-only) .studio-menu-item__badge,:host(.studio-menu--icon-only) .studio-menu-item__expand-icon{display:none}:host(.studio-menu--icon-only) .studio-menu-item{justify-content:center;padding:var(--menu-padding-y)}:host(.studio-menu--filled){padding:.5rem;background:var(--studio-bg-secondary);border-radius:calc(var(--menu-border-radius) + .25rem);box-shadow:0 1px 2px #0000000d}:host(.studio-menu--outlined){padding:.5rem;border:1px solid var(--studio-border-primary);border-radius:calc(var(--menu-border-radius) + .25rem);background:var(--studio-bg-primary)}:host(.studio-menu--ghost){padding:0}:host(.studio-menu--primary) .studio-menu-item--active{background:hsl(var(--studio-primary-hsl)/.1);color:var(--studio-primary);font-weight:500}:host(.studio-menu--secondary) .studio-menu-item--active{background:hsl(var(--studio-secondary-hsl)/.1);color:var(--studio-secondary);font-weight:500}:host(.studio-menu--radius-none){--menu-border-radius: 0}:host(.studio-menu--radius-none.studio-menu--filled),:host(.studio-menu--radius-none.studio-menu--outlined){border-radius:0}:host(.studio-menu--radius-sm){--menu-border-radius: .25rem}:host(.studio-menu--radius-sm.studio-menu--filled),:host(.studio-menu--radius-sm.studio-menu--outlined){border-radius:.5rem}:host(.studio-menu--radius-md){--menu-border-radius: .375rem}:host(.studio-menu--radius-md.studio-menu--filled),:host(.studio-menu--radius-md.studio-menu--outlined){border-radius:.625rem}:host(.studio-menu--radius-lg){--menu-border-radius: .5rem}:host(.studio-menu--radius-lg.studio-menu--filled),:host(.studio-menu--radius-lg.studio-menu--outlined){border-radius:.75rem}:host(.studio-menu--spacing-none){--menu-gap: 0}:host(.studio-menu--spacing-sm){--menu-gap: .125rem}:host(.studio-menu--spacing-md){--menu-gap: .25rem}:host(.studio-menu--spacing-lg){--menu-gap: .5rem}.studio-menu__list{display:flex;flex-direction:column;gap:var(--menu-gap);list-style:none;margin:0;padding:0}.studio-menu-item{position:relative;display:flex;align-items:center;width:100%;min-height:var(--menu-item-min-height);padding:0;border:none;background:transparent;color:var(--studio-text-primary);font-size:var(--menu-font-size);line-height:var(--menu-line-height);font-family:inherit;font-weight:400;text-align:left;cursor:pointer;transition:var(--menu-transition);border-radius:var(--menu-border-radius);outline:none;-webkit-user-select:none;user-select:none}.studio-menu-item:hover:not(.studio-menu-item--disabled):not(.studio-menu-item--active){background:hsl(var(--studio-primary-hsl)/.04);color:var(--studio-text-primary)}.studio-menu-item--active{background:hsl(var(--studio-primary-hsl)/.1);color:var(--studio-text-primary);font-weight:500}.studio-menu-item--active .studio-menu-item__icon{color:var(--studio-text-primary)}.studio-menu-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.studio-menu-item--has-children .studio-menu-item__expand-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}.studio-menu-item--expanded .studio-menu-item__expand-icon{transform:rotate(180deg)}.studio-menu-item:focus-visible{outline:2px solid var(--studio-primary);outline-offset:-1px;z-index:1}:host(.studio-menu--filled) .studio-menu-item:hover:not(.studio-menu-item--disabled):not(.studio-menu-item--active){background:var(--studio-bg-hover)}:host(.studio-menu--filled) .studio-menu-item.studio-menu-item--active{background:var(--studio-bg-primary);box-shadow:0 1px 2px #0000000d}:host(.studio-menu--outlined) .studio-menu-item{border:1px solid transparent}:host(.studio-menu--outlined) .studio-menu-item:hover:not(.studio-menu-item--disabled):not(.studio-menu-item--active){border-color:var(--studio-border-secondary);background:var(--studio-bg-secondary)}:host(.studio-menu--outlined) .studio-menu-item.studio-menu-item--active{border-color:var(--studio-primary);background:hsl(var(--studio-primary-hsl)/.05)}:host(.studio-menu--ghost) .studio-menu-item:hover:not(.studio-menu-item--disabled):not(.studio-menu-item--active){background:transparent;color:var(--studio-primary)}:host(.studio-menu--ghost) .studio-menu-item.studio-menu-item--active{background:transparent;color:var(--studio-primary);text-decoration:underline;text-underline-offset:4px}.studio-menu-item__link,.studio-menu-item__content{display:flex;align-items:center;width:100%;padding:var(--menu-padding-y) var(--menu-padding-x);color:inherit;text-decoration:none;gap:.5rem}.studio-menu-item__link:visited{color:inherit}.studio-menu-item__link:hover{text-decoration:none}.studio-menu-item__inner{display:flex;align-items:center;gap:.5rem;width:100%}.studio-menu-item__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--menu-icon-size);height:var(--menu-icon-size);color:var(--studio-text-secondary);transition:var(--menu-transition)}.studio-menu-item__icon--left{order:-1}.studio-menu-item__icon--right{order:1;margin-left:auto}.studio-menu-item:hover .studio-menu-item__icon,.studio-menu-item--active .studio-menu-item__icon{color:var(--studio-text-primary)}.studio-menu-item__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--menu-font-size);line-height:var(--menu-line-height)}.studio-menu-item__badge{flex-shrink:0;margin-left:auto}.studio-menu-item__expand-icon{flex-shrink:0;margin-left:auto;width:1rem;height:1rem;color:var(--studio-text-secondary);opacity:.7;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity var(--menu-transition)}.studio-menu-item:hover .studio-menu-item__expand-icon{opacity:1}.studio-menu__submenu{overflow:hidden;margin-top:var(--menu-gap);margin-left:calc(var(--menu-indent) - .25rem)}.studio-menu__submenu studio-menu{padding-left:0}.studio-menu__submenu .studio-menu__list{padding-left:.75rem;border-left:1px solid var(--studio-border-secondary);margin-left:.75rem}.studio-menu__separator{height:1px;margin:.375rem 0;background:var(--studio-border-secondary);opacity:.6}.studio-menu__divider{height:1px;margin:.125rem 0;background:var(--studio-border-secondary);opacity:.4}@keyframes expandCollapse{0%{opacity:0;max-height:0;transform:translateY(-4px)}to{opacity:1;max-height:1000px;transform:translateY(0)}}@media (max-width: 768px){:host(.studio-menu--horizontal){flex-direction:column}:host(.studio-menu--horizontal) .studio-menu__list{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: MenuComponent, selector: "studio-menu", inputs: ["items", "orientation", "mode", "collapsible", "defaultExpanded", "expandOnHover", "activeItem", "routerLinkActive", "selectOnNavigate", "routerLinkActiveOptions", "keyboardNavigation", "arrowNavigation", "homeEndNavigation", "animated", "animationDuration", "ariaLabel", "role", "size", "compact", "fullWidth", "variant", "color", "radius", "spacing", "showDividers", "iconSize", "iconOnly", "indentLevel", "showExpandIcon", "expandIconPosition", "expandIcon", "class", "itemClass", "level", "parentExpanded"], outputs: ["itemClick", "itemSelect", "expandChange", "activeChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: BadgeComponent, selector: "studio-badge", inputs: ["variant", "size", "color", "radius", "icon", "iconPosition", "dot", "dotColor", "removable", "href", "target", "disabled", "value", "max", "showZero", "uppercase", "bold", "pulse", "autoColor"], outputs: ["removed", "clicked"] }], animations: [
             trigger('expandCollapse', [
                 state('collapsed', style({
                     height: '0',
@@ -3381,7 +4253,7 @@ class ModalComponent {
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:contents;font-family:var(--studio-font-family)}.studio-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:1000;opacity:0;transition:opacity var(--studio-transition-normal);&--visible{opacity:1}}.studio-modal__panel{position:fixed;z-index:1001;background:var(--studio-bg-primary);border-radius:var(--studio-radius-lg);box-shadow:var(--studio-shadow-xl);display:flex;flex-direction:column;max-height:90vh;opacity:0;transform:scale(.95);transition:opacity var(--studio-transition-normal),transform var(--studio-transition-normal);&--visible{opacity:1;transform:scale(1)}}:host(.modal--center) .studio-modal__panel{top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);&--visible{transform:translate(-50%,-50%) scale(1)}}:host(.modal--top) .studio-modal__panel{top:5vh;left:50%;transform:translate(-50%,-20px) scale(.95);&--visible{transform:translate(-50%) scale(1)}}:host(.modal--bottom) .studio-modal__panel{bottom:5vh;left:50%;transform:translate(-50%,20px) scale(.95);&--visible{transform:translate(-50%) scale(1)}}:host(.modal--sm) .studio-modal__panel{width:90%;max-width:400px}:host(.modal--md) .studio-modal__panel{width:90%;max-width:600px}:host(.modal--lg) .studio-modal__panel{width:90%;max-width:800px}:host(.modal--xl) .studio-modal__panel{width:90%;max-width:1200px}:host(.modal--full) .studio-modal__panel{width:95vw;height:95vh;max-width:none;max-height:none}:host(.modal--bordered) .studio-modal__panel{border:1px solid var(--studio-border-primary)}:host(.modal--minimal) .studio-modal__panel{box-shadow:var(--studio-shadow-md)}:host(.modal--fade) .studio-modal__panel{transform:translate(-50%,-50%);&--visible{transform:translate(-50%,-50%)}}:host(.modal--slide-down) .studio-modal__panel{transform:translate(-50%,-60%);&--visible{transform:translate(-50%,-50%)}}:host(.modal--none) .studio-modal__panel{transition:none}:host(.modal--none) .studio-modal__overlay{transition:none}.studio-modal__header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--studio-border-primary);flex-shrink:0}.studio-modal__title{margin:0;font-size:1.25rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-modal__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--studio-radius-sm);color:var(--studio-text-secondary);cursor:pointer;transition:all var(--studio-transition-fast)}.studio-modal__close:hover{background:var(--studio-bg-secondary);color:var(--studio-text-primary)}.studio-modal__close:active{transform:scale(.95)}.studio-modal__content{padding:1.5rem;overflow-y:auto;flex:1}.studio-modal__footer{padding:1.5rem;border-top:1px solid var(--studio-border-primary);display:flex;gap:.75rem;justify-content:flex-end;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:contents;font-family:var(--studio-font-family)}.studio-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:1000;opacity:0;transition:opacity var(--studio-transition-normal);&--visible{opacity:1}}.studio-modal__panel{position:fixed;z-index:1001;background:var(--studio-bg-primary);border-radius:var(--studio-radius-lg);box-shadow:var(--studio-shadow-xl);display:flex;flex-direction:column;max-height:90vh;opacity:0;transform:scale(.95);transition:opacity var(--studio-transition-normal),transform var(--studio-transition-normal);&--visible{opacity:1;transform:scale(1)}}:host(.modal--center) .studio-modal__panel{top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);&--visible{transform:translate(-50%,-50%) scale(1)}}:host(.modal--top) .studio-modal__panel{top:5vh;left:50%;transform:translate(-50%,-20px) scale(.95);&--visible{transform:translate(-50%) scale(1)}}:host(.modal--bottom) .studio-modal__panel{bottom:5vh;left:50%;transform:translate(-50%,20px) scale(.95);&--visible{transform:translate(-50%) scale(1)}}:host(.modal--sm) .studio-modal__panel{width:90%;max-width:400px}:host(.modal--md) .studio-modal__panel{width:90%;max-width:600px}:host(.modal--lg) .studio-modal__panel{width:90%;max-width:800px}:host(.modal--xl) .studio-modal__panel{width:90%;max-width:1200px}:host(.modal--full) .studio-modal__panel{width:95vw;height:95vh;max-width:none;max-height:none}:host(.modal--bordered) .studio-modal__panel{border:1px solid var(--studio-border-primary)}:host(.modal--minimal) .studio-modal__panel{box-shadow:var(--studio-shadow-md)}:host(.modal--fade) .studio-modal__panel{transform:translate(-50%,-50%);&--visible{transform:translate(-50%,-50%)}}:host(.modal--slide-down) .studio-modal__panel{transform:translate(-50%,-60%);&--visible{transform:translate(-50%,-50%)}}:host(.modal--none) .studio-modal__panel{transition:none}:host(.modal--none) .studio-modal__overlay{transition:none}.studio-modal__header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--studio-border-primary);flex-shrink:0}.studio-modal__title{margin:0;font-size:1.25rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-modal__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--studio-radius-sm);color:var(--studio-text-secondary);cursor:pointer;transition:all var(--studio-transition-fast)}.studio-modal__close:hover{background:var(--studio-bg-secondary);color:var(--studio-text-primary)}.studio-modal__close:active{transform:scale(.95)}.studio-modal__content{padding:1.5rem;overflow-y:auto;flex:1}.studio-modal__footer{padding:1.5rem;border-top:1px solid var(--studio-border-primary);display:flex;gap:.75rem;justify-content:flex-end;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -3600,7 +4472,7 @@ class RadioButtonComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioButtonComponent),
                 multi: true
-            }], ngImport: i0, template: "<label\n  [for]=\"radioId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"radioId()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"isChecked() ? 'true' : 'false'\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? radioId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-radio__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <span [ngClass]=\"radioClasses()\">\n    @if (isChecked()) {\n      <span class=\"studio-radio__dot\"></span>\n    }\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"studio-radio__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-radio__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-radio__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-radio__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n@if (showHint() || showError()) {\n  <div\n    [id]=\"radioId() + '-description'\"\n    class=\"studio-radio__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-radio__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-radio__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-radio-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-radio-wrapper--label-left{flex-direction:row-reverse}.studio-radio-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-radio-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-radio-wrapper--md{font-size:var(--studio-font-size-base)}.studio-radio-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-radio__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-radio{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base);border-radius:var(--studio-radius-full)}.studio-radio--sm{width:1rem;height:1rem}.studio-radio--md{width:1.25rem;height:1.25rem}.studio-radio--lg{width:1.5rem;height:1.5rem}.studio-radio--radius-none{border-radius:0}.studio-radio--radius-sm{border-radius:var(--studio-radius-sm)}.studio-radio--radius-md{border-radius:var(--studio-radius-md)}.studio-radio--radius-lg{border-radius:var(--studio-radius-lg)}.studio-radio--radius-full{border-radius:var(--studio-radius-full)}.studio-radio--default.studio-radio--checked{border-color:transparent}.studio-radio--default.studio-radio--checked.studio-radio--primary{background-color:var(--studio-primary)}.studio-radio--default.studio-radio--checked.studio-radio--secondary{background-color:var(--studio-secondary)}.studio-radio--default.studio-radio--checked.studio-radio--success{background-color:var(--studio-success)}.studio-radio--default.studio-radio--checked.studio-radio--error{background-color:var(--studio-error)}.studio-radio--outlined.studio-radio--checked{background-color:transparent}.studio-radio--outlined.studio-radio--checked.studio-radio--primary{border-color:var(--studio-primary)}.studio-radio--outlined.studio-radio--checked.studio-radio--primary .studio-radio__dot{background-color:var(--studio-primary)}.studio-radio--outlined.studio-radio--checked.studio-radio--secondary{border-color:var(--studio-secondary)}.studio-radio--outlined.studio-radio--checked.studio-radio--secondary .studio-radio__dot{background-color:var(--studio-secondary)}.studio-radio--outlined.studio-radio--checked.studio-radio--success{border-color:var(--studio-success)}.studio-radio--outlined.studio-radio--checked.studio-radio--success .studio-radio__dot{background-color:var(--studio-success)}.studio-radio--outlined.studio-radio--checked.studio-radio--error{border-color:var(--studio-error)}.studio-radio--outlined.studio-radio--checked.studio-radio--error .studio-radio__dot{background-color:var(--studio-error)}.studio-radio--filled.studio-radio--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-radio--filled.studio-radio--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-radio--filled.studio-radio--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-radio--filled.studio-radio--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-radio--filled.studio-radio--checked.studio-radio--primary{background-color:var(--studio-primary);border-color:var(--studio-primary)}.studio-radio--filled.studio-radio--checked.studio-radio--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary)}.studio-radio--filled.studio-radio--checked.studio-radio--success{background-color:var(--studio-success);border-color:var(--studio-success)}.studio-radio--filled.studio-radio--checked.studio-radio--error{background-color:var(--studio-error);border-color:var(--studio-error)}.studio-radio--error:not(.studio-radio--checked){border-color:var(--studio-error)}.studio-radio:hover:not(.studio-radio--disabled){border-color:var(--studio-border-secondary)}.studio-radio__input:focus-visible+.studio-radio{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-radio__dot{border-radius:var(--studio-radius-full);background-color:var(--studio-text-inverse);opacity:0;transform:scale(.5);transition:all var(--studio-transition-fast)}.studio-radio--sm .studio-radio__dot{width:.375rem;height:.375rem}.studio-radio--md .studio-radio__dot{width:.5rem;height:.5rem}.studio-radio--lg .studio-radio__dot{width:.625rem;height:.625rem}.studio-radio--checked .studio-radio__dot{opacity:1;transform:scale(1)}.studio-radio__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-radio__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-radio__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-radio__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-radio__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-radio-wrapper--label-left+.studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-radio-wrapper--sm .studio-radio__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-radio-wrapper--sm.studio-radio-wrapper--label-left .studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-radio-wrapper--lg .studio-radio__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-radio-wrapper--lg.studio-radio-wrapper--label-left .studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-radio__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-radio__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            }], ngImport: i0, template: "<label\n  [for]=\"radioId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"radioId()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"isChecked() ? 'true' : 'false'\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? radioId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-radio__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <span [ngClass]=\"radioClasses()\">\n    @if (isChecked()) {\n      <span class=\"studio-radio__dot\"></span>\n    }\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"studio-radio__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-radio__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-radio__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-radio__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n@if (showHint() || showError()) {\n  <div\n    [id]=\"radioId() + '-description'\"\n    class=\"studio-radio__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-radio__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-radio__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-radio-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-radio-wrapper--label-left{flex-direction:row-reverse}.studio-radio-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-radio-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-radio-wrapper--md{font-size:var(--studio-font-size-base)}.studio-radio-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-radio__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-radio{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base);border-radius:var(--studio-radius-full)}.studio-radio--sm{width:1rem;height:1rem}.studio-radio--md{width:1.25rem;height:1.25rem}.studio-radio--lg{width:1.5rem;height:1.5rem}.studio-radio--radius-none{border-radius:0}.studio-radio--radius-sm{border-radius:var(--studio-radius-sm)}.studio-radio--radius-md{border-radius:var(--studio-radius-md)}.studio-radio--radius-lg{border-radius:var(--studio-radius-lg)}.studio-radio--radius-full{border-radius:var(--studio-radius-full)}.studio-radio--default.studio-radio--checked{border-color:transparent}.studio-radio--default.studio-radio--checked.studio-radio--primary{background-color:var(--studio-primary)}.studio-radio--default.studio-radio--checked.studio-radio--secondary{background-color:var(--studio-secondary)}.studio-radio--default.studio-radio--checked.studio-radio--success{background-color:var(--studio-success)}.studio-radio--default.studio-radio--checked.studio-radio--error{background-color:var(--studio-error)}.studio-radio--outlined.studio-radio--checked{background-color:transparent}.studio-radio--outlined.studio-radio--checked.studio-radio--primary{border-color:var(--studio-primary)}.studio-radio--outlined.studio-radio--checked.studio-radio--primary .studio-radio__dot{background-color:var(--studio-primary)}.studio-radio--outlined.studio-radio--checked.studio-radio--secondary{border-color:var(--studio-secondary)}.studio-radio--outlined.studio-radio--checked.studio-radio--secondary .studio-radio__dot{background-color:var(--studio-secondary)}.studio-radio--outlined.studio-radio--checked.studio-radio--success{border-color:var(--studio-success)}.studio-radio--outlined.studio-radio--checked.studio-radio--success .studio-radio__dot{background-color:var(--studio-success)}.studio-radio--outlined.studio-radio--checked.studio-radio--error{border-color:var(--studio-error)}.studio-radio--outlined.studio-radio--checked.studio-radio--error .studio-radio__dot{background-color:var(--studio-error)}.studio-radio--filled.studio-radio--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-radio--filled.studio-radio--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-radio--filled.studio-radio--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-radio--filled.studio-radio--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-radio--filled.studio-radio--checked.studio-radio--primary{background-color:var(--studio-primary);border-color:var(--studio-primary)}.studio-radio--filled.studio-radio--checked.studio-radio--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary)}.studio-radio--filled.studio-radio--checked.studio-radio--success{background-color:var(--studio-success);border-color:var(--studio-success)}.studio-radio--filled.studio-radio--checked.studio-radio--error{background-color:var(--studio-error);border-color:var(--studio-error)}.studio-radio--error:not(.studio-radio--checked){border-color:var(--studio-error)}.studio-radio:hover:not(.studio-radio--disabled){border-color:var(--studio-border-secondary)}.studio-radio__input:focus-visible+.studio-radio{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-radio__dot{border-radius:var(--studio-radius-full);background-color:var(--studio-text-inverse);opacity:0;transform:scale(.5);transition:all var(--studio-transition-fast)}.studio-radio--sm .studio-radio__dot{width:.375rem;height:.375rem}.studio-radio--md .studio-radio__dot{width:.5rem;height:.5rem}.studio-radio--lg .studio-radio__dot{width:.625rem;height:.625rem}.studio-radio--checked .studio-radio__dot{opacity:1;transform:scale(1)}.studio-radio__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-radio__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-radio__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-radio__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-radio__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-radio-wrapper--label-left+.studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-radio-wrapper--sm .studio-radio__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-radio-wrapper--sm.studio-radio-wrapper--label-left .studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-radio-wrapper--lg .studio-radio__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-radio-wrapper--lg.studio-radio-wrapper--label-left .studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-radio__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-radio__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
@@ -4996,7 +5868,7 @@ class InspectorComponent {
                 useExisting: forwardRef(() => InspectorComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "@if (values()) {\n  <div class=\"studio-inspector__container\">\n    @for (section of values()!.sections; track trackBySectionId($index, section)) {\n      <div class=\"studio-inspector__section\"\n           [class.studio-inspector__section--expanded]=\"isSectionExpanded(section.id)\"\n           [class.studio-inspector__section--collapsed]=\"!isSectionExpanded(section.id)\">\n\n        <studio-button\n          variant=\"ghost\"\n          [fullWidth]=\"true\"\n          class=\"studio-inspector__section-header\"\n          [class.studio-inspector__section-header--collapsible]=\"collapsible()\"\n          [disabled]=\"!collapsible()\"\n          [attr.aria-expanded]=\"isSectionExpanded(section.id)\"\n          [attr.aria-controls]=\"'section-content-' + section.id\"\n          (click)=\"toggleSection(section.id)\">\n\n          @if (showIcons() && section.icon) {\n            <studio-icon\n              [name]=\"section.icon\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-icon\"\n            />\n          }\n\n          <span class=\"studio-inspector__section-title\">{{ section.title }}</span>\n\n          @if (collapsible()) {\n            <studio-icon\n              [name]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-toggle\"\n            />\n          }\n        </studio-button>\n\n        @if (isSectionExpanded(section.id)) {\n          <div\n            class=\"studio-inspector__section-content\"\n            [id]=\"'section-content-' + section.id\">\n\n            @if (section.groups) {\n              @for (group of section.groups; track trackByGroupId($index, group); let isLast = $last) {\n                <div class=\"studio-inspector__group\">\n\n                  @if (showGroupLabels() && group.label) {\n                    <div class=\"studio-inspector__group-label\">{{ group.label }}</div>\n                  }\n\n                  @for (param of group.parameters; track trackByParameterId($index, param)) {\n                    <div class=\"studio-inspector__parameter\">\n                      @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                        <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                      }\n\n                      @if (param.type === 'text') {\n                        <studio-input\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'number') {\n                        <div class=\"studio-inspector__number-input\">\n                          <studio-input\n                            type=\"number\"\n                            [ngModel]=\"param.value\"\n                            [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                            (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                            [variant]=\"componentVariant()\"\n                            [size]=\"componentSize()\"\n                            [min]=\"param.min\"\n                            [max]=\"param.max\"\n                            [step]=\"param.step\"\n                            [disabled]=\"param.disabled || false\"\n                            [readonly]=\"param.readonly || false\"\n                            [fullWidth]=\"fullWidth()\"\n                          />\n                          @if (param.suffix) {\n                            <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'textarea') {\n                        <studio-textarea\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'color') {\n                        <studio-color-picker-compact\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'select') {\n                        <studio-select\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [options]=\"param.options || []\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'boolean') {\n                        <studio-switch\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [label]=\"param.label\"\n                          [size]=\"componentSize()\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'checkbox') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <studio-checkbox\n                              [ngModel]=\"isChecked(param, option.value)\"\n                              [name]=\"section.id + '-' + group.id + '-' + param.id + '-' + option.value\"\n                              (ngModelChange)=\"onCheckboxChange(section.id, group.id, param.id, option.value, $event)\"\n                              [label]=\"option.label\"\n                              [disabled]=\"param.disabled || option.disabled || false\"\n                              [size]=\"componentSize()\"\n                            />\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'radio') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <div class=\"studio-inspector__option\">\n                              <studio-radio-button\n                                [ngModel]=\"param.value\"\n                                (ngModelChange)=\"onRadioChange(section.id, group.id, param.id, $event)\"\n                                [value]=\"option.value\"\n                                [label]=\"option.label\"\n                                [name]=\"getRadioName(section.id, group.id, param.id)\"\n                                [disabled]=\"param.disabled || option.disabled || false\"\n                                [size]=\"componentSize()\"\n                              />\n                              @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                                <span class=\"studio-inspector__default-indicator\">(default)</span>\n                              }\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      @if (param.hint) {\n                        <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                      }\n                    </div>\n                  }\n\n                  @if (!isLast && groupDivider() !== 'none') {\n                    <div class=\"studio-inspector__group-divider\"\n                         [class.studio-inspector__group-divider--line]=\"groupDivider() === 'line'\"\n                         [class.studio-inspector__group-divider--space]=\"groupDivider() === 'space'\">\n                    </div>\n                  }\n                </div>\n              }\n            }\n\n            @if (section.parameters) {\n              @for (param of section.parameters; track trackByParameterId($index, param)) {\n                <div class=\"studio-inspector__parameter\">\n                  @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                    <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                  }\n\n                  @if (param.type === 'text') {\n                    <studio-input\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'number') {\n                    <div class=\"studio-inspector__number-input\">\n                      <studio-input\n                        type=\"number\"\n                        [ngModel]=\"param.value\"\n                        [name]=\"section.id + '-' + param.id\"\n                        (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                        [variant]=\"componentVariant()\"\n                        [size]=\"componentSize()\"\n                        [min]=\"param.min\"\n                        [max]=\"param.max\"\n                        [step]=\"param.step\"\n                        [disabled]=\"param.disabled || false\"\n                        [readonly]=\"param.readonly || false\"\n                        [fullWidth]=\"fullWidth()\"\n                      />\n                      @if (param.suffix) {\n                        <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'textarea') {\n                    <studio-textarea\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'color') {\n                    <studio-color-picker-compact\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'select') {\n                    <studio-select\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [options]=\"param.options || []\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'boolean') {\n                    <studio-switch\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [label]=\"param.label\"\n                      [size]=\"componentSize()\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'checkbox') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <studio-checkbox\n                          [ngModel]=\"isChecked(param, option.value)\"\n                          [name]=\"section.id + '-' + param.id + '-' + option.value\"\n                          (ngModelChange)=\"onCheckboxChange(section.id, null, param.id, option.value, $event)\"\n                          [label]=\"option.label\"\n                          [disabled]=\"param.disabled || option.disabled || false\"\n                          [size]=\"componentSize()\"\n                        />\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'radio') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <div class=\"studio-inspector__option\">\n                          <studio-radio-button\n                            [ngModel]=\"param.value\"\n                            (ngModelChange)=\"onRadioChange(section.id, null, param.id, $event)\"\n                            [value]=\"option.value\"\n                            [label]=\"option.label\"\n                            [name]=\"getRadioName(section.id, null, param.id)\"\n                            [disabled]=\"param.disabled || option.disabled || false\"\n                            [size]=\"componentSize()\"\n                          />\n                          @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                            <span class=\"studio-inspector__default-indicator\">(default)</span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  @if (param.hint) {\n                    <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-inspector__container{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__section{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);overflow:hidden}.studio-inspector__section-header{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--studio-bg-secondary);border:none;border-bottom:1px solid var(--studio-border-primary);cursor:pointer;transition:background var(--studio-transition-fast);text-align:left}.studio-inspector__section-header--collapsible:hover{background:var(--studio-bg-tertiary)}.studio-inspector__section-header:disabled{cursor:default}.studio-inspector__section-icon{color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__section-title{flex:1;font-size:.875rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-inspector__section-toggle{color:var(--studio-text-secondary);flex-shrink:0;transition:transform var(--studio-transition-fast)}.studio-inspector__section--collapsed .studio-inspector__section-toggle{transform:rotate(-90deg)}.studio-inspector__section--collapsed .studio-inspector__section-content{display:none}.studio-inspector__section--expanded .studio-inspector__section-toggle{transform:rotate(0)}.studio-inspector__section-content{padding:1rem;display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group-label{font-size:.75rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);text-transform:uppercase;letter-spacing:.05em}.studio-inspector__group-divider--line{height:1px;background:var(--studio-border-primary);margin:.5rem 0}.studio-inspector__group-divider--space{height:.5rem}.studio-inspector__parameter{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__parameter-label{font-size:.8125rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary)}.studio-inspector__parameter-hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-inspector__number-input{display:flex;align-items:center;gap:.5rem}.studio-inspector__suffix{font-size:.875rem;color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__options{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__option{display:flex;align-items:center;gap:.5rem}.studio-inspector__default-indicator{font-size:.75rem;color:var(--studio-text-tertiary);font-style:italic}:host(.studio-inspector--compact) .studio-inspector__container{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__section-header{padding:.625rem .75rem}:host(.studio-inspector--compact) .studio-inspector__section-content{padding:.75rem;gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-sm) .studio-inspector__section-content{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-lg) .studio-inspector__section-content{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__parameter{gap:.625rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group-divider--space{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: InputComponent, selector: "studio-input", inputs: ["variant", "size", "radius", "disabled", "readonly", "loading", "type", "inputmode", "autocomplete", "placeholder", "maxLength", "minLength", "min", "max", "step", "pattern", "label", "floatingLabel", "hint", "required", "error", "errorMessage", "prefixIcon", "suffixIcon", "clearable", "showPasswordToggle", "fullWidth", "autoFocus", "name", "id", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "cleared", "entered"] }, { kind: "component", type: CheckboxComponent, selector: "studio-checkbox", inputs: ["size", "color", "variant", "radius", "label", "labelPosition", "description", "hint", "required", "error", "errorMessage", "disabled", "readonly", "indeterminate", "name", "tabIndex", "value"], outputs: ["changed"] }, { kind: "component", type: RadioButtonComponent, selector: "studio-radio-button", inputs: ["size", "color", "variant", "radius", "label", "labelPosition", "description", "hint", "required", "error", "errorMessage", "disabled", "readonly", "name", "tabIndex", "value"], outputs: ["changed"] }, { kind: "component", type: ColorPickerCompactComponent, selector: "studio-color-picker-compact", inputs: ["trigger", "position", "popoverWidth", "showArrow", "closeOnClickOutside", "triggerSize", "triggerRadius", "showCurrentColor", "format", "showAlpha", "showPresets", "showFormatToggle", "showCopyButton", "presets", "showFooter", "applyLabel", "cancelLabel", "disabled", "ariaLabel"], outputs: ["colorChange"] }, { kind: "component", type: SelectComponent, selector: "studio-select", inputs: ["variant", "size", "radius", "options", "placeholder", "multiple", "searchable", "clearable", "disabled", "loading", "label", "floatingLabel", "hint", "error", "errorMessage", "required", "prefixIcon", "suffixIcon", "fullWidth", "maxHeight", "position", "searchPlaceholder"], outputs: ["valueChange", "searchChange", "opened", "closed", "optionSelected"] }, { kind: "component", type: TextareaComponent, selector: "studio-textarea", inputs: ["variant", "size", "color", "radius", "label", "floatingLabel", "placeholder", "hint", "rows", "minRows", "maxRows", "autoResize", "resize", "maxLength", "showCharCount", "charCountPosition", "required", "minLength", "error", "errorMessage", "disabled", "readonly", "fullWidth", "name", "autocomplete", "spellcheck", "clearable", "loading"], outputs: ["changed", "focused", "blurred", "keyPressed"] }, { kind: "component", type: SwitchComponent, selector: "studio-switch", inputs: ["checked", "disabled", "label", "labelPosition", "showIcons", "ariaLabel", "size", "color"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@if (values()) {\n  <div class=\"studio-inspector__container\">\n    @for (section of values()!.sections; track trackBySectionId($index, section)) {\n      <div class=\"studio-inspector__section\"\n           [class.studio-inspector__section--expanded]=\"isSectionExpanded(section.id)\"\n           [class.studio-inspector__section--collapsed]=\"!isSectionExpanded(section.id)\">\n\n        <studio-button\n          variant=\"ghost\"\n          [fullWidth]=\"true\"\n          class=\"studio-inspector__section-header\"\n          [class.studio-inspector__section-header--collapsible]=\"collapsible()\"\n          [disabled]=\"!collapsible()\"\n          [attr.aria-expanded]=\"isSectionExpanded(section.id)\"\n          [attr.aria-controls]=\"'section-content-' + section.id\"\n          (click)=\"toggleSection(section.id)\">\n\n          @if (showIcons() && section.icon) {\n            <studio-icon\n              [name]=\"section.icon\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-icon\"\n            />\n          }\n\n          <span class=\"studio-inspector__section-title\">{{ section.title }}</span>\n\n          @if (collapsible()) {\n            <studio-icon\n              [name]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-toggle\"\n            />\n          }\n        </studio-button>\n\n        @if (isSectionExpanded(section.id)) {\n          <div\n            class=\"studio-inspector__section-content\"\n            [id]=\"'section-content-' + section.id\">\n\n            @if (section.groups) {\n              @for (group of section.groups; track trackByGroupId($index, group); let isLast = $last) {\n                <div class=\"studio-inspector__group\">\n\n                  @if (showGroupLabels() && group.label) {\n                    <div class=\"studio-inspector__group-label\">{{ group.label }}</div>\n                  }\n\n                  @for (param of group.parameters; track trackByParameterId($index, param)) {\n                    <div class=\"studio-inspector__parameter\">\n                      @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                        <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                      }\n\n                      @if (param.type === 'text') {\n                        <studio-input\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'number') {\n                        <div class=\"studio-inspector__number-input\">\n                          <studio-input\n                            type=\"number\"\n                            [ngModel]=\"param.value\"\n                            [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                            (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                            [variant]=\"componentVariant()\"\n                            [size]=\"componentSize()\"\n                            [min]=\"param.min\"\n                            [max]=\"param.max\"\n                            [step]=\"param.step\"\n                            [disabled]=\"param.disabled || false\"\n                            [readonly]=\"param.readonly || false\"\n                            [fullWidth]=\"fullWidth()\"\n                          />\n                          @if (param.suffix) {\n                            <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'textarea') {\n                        <studio-textarea\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'color') {\n                        <studio-color-picker-compact\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'select') {\n                        <studio-select\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [options]=\"param.options || []\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'boolean') {\n                        <studio-switch\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [label]=\"param.label\"\n                          [size]=\"componentSize()\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'checkbox') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <studio-checkbox\n                              [ngModel]=\"isChecked(param, option.value)\"\n                              [name]=\"section.id + '-' + group.id + '-' + param.id + '-' + option.value\"\n                              (ngModelChange)=\"onCheckboxChange(section.id, group.id, param.id, option.value, $event)\"\n                              [label]=\"option.label\"\n                              [disabled]=\"param.disabled || option.disabled || false\"\n                              [size]=\"componentSize()\"\n                            />\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'radio') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <div class=\"studio-inspector__option\">\n                              <studio-radio-button\n                                [ngModel]=\"param.value\"\n                                (ngModelChange)=\"onRadioChange(section.id, group.id, param.id, $event)\"\n                                [value]=\"option.value\"\n                                [label]=\"option.label\"\n                                [name]=\"getRadioName(section.id, group.id, param.id)\"\n                                [disabled]=\"param.disabled || option.disabled || false\"\n                                [size]=\"componentSize()\"\n                              />\n                              @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                                <span class=\"studio-inspector__default-indicator\">(default)</span>\n                              }\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      @if (param.hint) {\n                        <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                      }\n                    </div>\n                  }\n\n                  @if (!isLast && groupDivider() !== 'none') {\n                    <div class=\"studio-inspector__group-divider\"\n                         [class.studio-inspector__group-divider--line]=\"groupDivider() === 'line'\"\n                         [class.studio-inspector__group-divider--space]=\"groupDivider() === 'space'\">\n                    </div>\n                  }\n                </div>\n              }\n            }\n\n            @if (section.parameters) {\n              @for (param of section.parameters; track trackByParameterId($index, param)) {\n                <div class=\"studio-inspector__parameter\">\n                  @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                    <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                  }\n\n                  @if (param.type === 'text') {\n                    <studio-input\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'number') {\n                    <div class=\"studio-inspector__number-input\">\n                      <studio-input\n                        type=\"number\"\n                        [ngModel]=\"param.value\"\n                        [name]=\"section.id + '-' + param.id\"\n                        (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                        [variant]=\"componentVariant()\"\n                        [size]=\"componentSize()\"\n                        [min]=\"param.min\"\n                        [max]=\"param.max\"\n                        [step]=\"param.step\"\n                        [disabled]=\"param.disabled || false\"\n                        [readonly]=\"param.readonly || false\"\n                        [fullWidth]=\"fullWidth()\"\n                      />\n                      @if (param.suffix) {\n                        <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'textarea') {\n                    <studio-textarea\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'color') {\n                    <studio-color-picker-compact\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'select') {\n                    <studio-select\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [options]=\"param.options || []\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'boolean') {\n                    <studio-switch\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [label]=\"param.label\"\n                      [size]=\"componentSize()\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'checkbox') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <studio-checkbox\n                          [ngModel]=\"isChecked(param, option.value)\"\n                          [name]=\"section.id + '-' + param.id + '-' + option.value\"\n                          (ngModelChange)=\"onCheckboxChange(section.id, null, param.id, option.value, $event)\"\n                          [label]=\"option.label\"\n                          [disabled]=\"param.disabled || option.disabled || false\"\n                          [size]=\"componentSize()\"\n                        />\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'radio') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <div class=\"studio-inspector__option\">\n                          <studio-radio-button\n                            [ngModel]=\"param.value\"\n                            (ngModelChange)=\"onRadioChange(section.id, null, param.id, $event)\"\n                            [value]=\"option.value\"\n                            [label]=\"option.label\"\n                            [name]=\"getRadioName(section.id, null, param.id)\"\n                            [disabled]=\"param.disabled || option.disabled || false\"\n                            [size]=\"componentSize()\"\n                          />\n                          @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                            <span class=\"studio-inspector__default-indicator\">(default)</span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  @if (param.hint) {\n                    <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-inspector__container{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__section{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);overflow:hidden}.studio-inspector__section-header{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--studio-bg-secondary);border:none;border-bottom:1px solid var(--studio-border-primary);cursor:pointer;transition:background var(--studio-transition-fast);text-align:left}.studio-inspector__section-header--collapsible:hover{background:var(--studio-bg-tertiary)}.studio-inspector__section-header:disabled{cursor:default}.studio-inspector__section-icon{color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__section-title{flex:1;font-size:.875rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-inspector__section-toggle{color:var(--studio-text-secondary);flex-shrink:0;transition:transform var(--studio-transition-fast)}.studio-inspector__section--collapsed .studio-inspector__section-toggle{transform:rotate(-90deg)}.studio-inspector__section--collapsed .studio-inspector__section-content{display:none}.studio-inspector__section--expanded .studio-inspector__section-toggle{transform:rotate(0)}.studio-inspector__section-content{padding:1rem;display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group-label{font-size:.75rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);text-transform:uppercase;letter-spacing:.05em}.studio-inspector__group-divider--line{height:1px;background:var(--studio-border-primary);margin:.5rem 0}.studio-inspector__group-divider--space{height:.5rem}.studio-inspector__parameter{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__parameter-label{font-size:.8125rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary)}.studio-inspector__parameter-hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-inspector__number-input{display:flex;align-items:center;gap:.5rem}.studio-inspector__suffix{font-size:.875rem;color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__options{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__option{display:flex;align-items:center;gap:.5rem}.studio-inspector__default-indicator{font-size:.75rem;color:var(--studio-text-tertiary);font-style:italic}:host(.studio-inspector--compact) .studio-inspector__container{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__section-header{padding:.625rem .75rem}:host(.studio-inspector--compact) .studio-inspector__section-content{padding:.75rem;gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-sm) .studio-inspector__section-content{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-lg) .studio-inspector__section-content{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__parameter{gap:.625rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group-divider--space{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: InputComponent, selector: "studio-input", inputs: ["variant", "size", "radius", "disabled", "readonly", "loading", "type", "inputmode", "autocomplete", "placeholder", "maxLength", "minLength", "min", "max", "step", "pattern", "label", "floatingLabel", "hint", "required", "error", "errorMessage", "prefixIcon", "suffixIcon", "clearable", "showPasswordToggle", "fullWidth", "autoFocus", "name", "id", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "cleared", "entered"] }, { kind: "component", type: CheckboxComponent, selector: "studio-checkbox", inputs: ["size", "color", "variant", "radius", "label", "labelPosition", "description", "hint", "required", "error", "errorMessage", "disabled", "readonly", "indeterminate", "name", "tabIndex", "value"], outputs: ["changed"] }, { kind: "component", type: RadioButtonComponent, selector: "studio-radio-button", inputs: ["size", "color", "variant", "radius", "label", "labelPosition", "description", "hint", "required", "error", "errorMessage", "disabled", "readonly", "name", "tabIndex", "value"], outputs: ["changed"] }, { kind: "component", type: ColorPickerCompactComponent, selector: "studio-color-picker-compact", inputs: ["trigger", "position", "popoverWidth", "showArrow", "closeOnClickOutside", "triggerSize", "triggerRadius", "showCurrentColor", "format", "showAlpha", "showPresets", "showFormatToggle", "showCopyButton", "presets", "showFooter", "applyLabel", "cancelLabel", "disabled", "ariaLabel"], outputs: ["colorChange"] }, { kind: "component", type: SelectComponent, selector: "studio-select", inputs: ["variant", "size", "radius", "options", "placeholder", "multiple", "searchable", "clearable", "disabled", "loading", "label", "floatingLabel", "hint", "error", "errorMessage", "required", "prefixIcon", "suffixIcon", "fullWidth", "maxHeight", "position", "searchPlaceholder"], outputs: ["valueChange", "searchChange", "opened", "closed", "optionSelected"] }, { kind: "component", type: TextareaComponent, selector: "studio-textarea", inputs: ["variant", "size", "color", "radius", "label", "floatingLabel", "placeholder", "hint", "rows", "minRows", "maxRows", "autoResize", "resize", "maxLength", "showCharCount", "charCountPosition", "required", "minLength", "error", "errorMessage", "disabled", "readonly", "fullWidth", "name", "autocomplete", "spellcheck", "clearable", "loading"], outputs: ["changed", "focused", "blurred", "keyPressed"] }, { kind: "component", type: SwitchComponent, selector: "studio-switch", inputs: ["checked", "disabled", "label", "labelPosition", "showIcons", "ariaLabel", "size", "color"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: InspectorComponent, decorators: [{
             type: Component,
@@ -5553,5 +6425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeWrapperComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map