@eduboxpro/studio 0.1.10 → 0.1.12

package/fesm2022/eduboxpro-studio.mjs

@@ -1,10 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, contentChild, viewChild, model, HostListener, Renderer2, Directive } from '@angular/core';
-import * as i1$1 from '@angular/common';
-import { DOCUMENT, CommonModule, NgTemplateOutlet } from '@angular/common';
-import * as i1 from 'lucide-angular';
-import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, Circle, Apple, Globe, Laptop, MessageSquare, List, Grid3x3, Strikethrough, Underline, Italic, Bold, AlignJustify, AlignRight, AlignCenter, AlignLeft, Moon, Sun, ShoppingCart, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, contentChild, viewChild, model, HostListener, PLATFORM_ID, Renderer2, Directive } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import * as LucideIcons from 'lucide-angular';
+import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS } from 'lucide-angular';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+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
@@ -327,7 +330,7 @@ class IconComponent {
         [absoluteStrokeWidth]="absoluteStrokeWidth()"
       />
     }
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: LucideIcons.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
@@ -348,118 +351,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], absoluteStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "absoluteStrokeWidth", required: false }] }], showFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFallback", required: false }] }], fallbackIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackIcon", required: false }] }] } });
 
+// Минимальный набор - только для внутренних компонентов библиотеки
+const MINIMAL_ICONS = {
+    X: LucideIcons.X,
+    ChevronDown: LucideIcons.ChevronDown,
+    ChevronUp: LucideIcons.ChevronUp,
+    ChevronLeft: LucideIcons.ChevronLeft,
+    ChevronRight: LucideIcons.ChevronRight,
+    Check: LucideIcons.Check,
+    Loader2: LucideIcons.Loader2,
+    Search: LucideIcons.Search,
+};
+// Расширенный набор - частоиспользуемые иконки для UI
+const COMMON_ICONS = {
+    ...MINIMAL_ICONS,
+    ArrowRight: LucideIcons.ArrowRight,
+    ArrowLeft: LucideIcons.ArrowLeft,
+    Download: LucideIcons.Download,
+    Upload: LucideIcons.Upload,
+    Mail: LucideIcons.Mail,
+    Phone: LucideIcons.Phone,
+    Heart: LucideIcons.Heart,
+    Star: LucideIcons.Star,
+    Settings: LucideIcons.Settings,
+    User: LucideIcons.User,
+    Users: LucideIcons.Users,
+    Trash2: LucideIcons.Trash2,
+    Pen: LucideIcons.Pen,
+    Edit2: LucideIcons.Edit2,
+    Plus: LucideIcons.Plus,
+    Minus: LucideIcons.Minus,
+    Filter: LucideIcons.Filter,
+    ExternalLink: LucideIcons.ExternalLink,
+    Link: LucideIcons.Link,
+    Copy: LucideIcons.Copy,
+    Share2: LucideIcons.Share2,
+    House: LucideIcons.House,
+    Menu: LucideIcons.Menu,
+    MoreVertical: LucideIcons.MoreVertical,
+    MoreHorizontal: LucideIcons.MoreHorizontal,
+    Bell: LucideIcons.Bell,
+    Calendar: LucideIcons.Calendar,
+    Clock: LucideIcons.Clock,
+    Eye: LucideIcons.Eye,
+    EyeOff: LucideIcons.EyeOff,
+    Lock: LucideIcons.Lock,
+    LockOpen: LucideIcons.LockOpen,
+    LogIn: LucideIcons.LogIn,
+    LogOut: LucideIcons.LogOut,
+    CircleAlert: LucideIcons.CircleAlert,
+    TriangleAlert: LucideIcons.TriangleAlert,
+    Info: LucideIcons.Info,
+    CircleCheck: LucideIcons.CircleCheck,
+    CircleX: LucideIcons.CircleX,
+    CircleQuestionMark: LucideIcons.CircleQuestionMark,
+    File: LucideIcons.File,
+    FileText: LucideIcons.FileText,
+    Folder: LucideIcons.Folder,
+    FolderOpen: LucideIcons.FolderOpen,
+    Image: LucideIcons.Image,
+    Save: LucideIcons.Save,
+    Printer: LucideIcons.Printer,
+    RefreshCw: LucideIcons.RefreshCw,
+    RotateCw: LucideIcons.RotateCw,
+    Loader: LucideIcons.Loader,
+    ShoppingCart: LucideIcons.ShoppingCart,
+    Sun: LucideIcons.Sun,
+    Moon: LucideIcons.Moon,
+    TextAlignStart: LucideIcons.TextAlignStart,
+    TextAlignCenter: LucideIcons.TextAlignCenter,
+    TextAlignEnd: LucideIcons.TextAlignEnd,
+    TextAlignJustify: LucideIcons.TextAlignJustify,
+    Bold: LucideIcons.Bold,
+    Italic: LucideIcons.Italic,
+    Underline: LucideIcons.Underline,
+    Strikethrough: LucideIcons.Strikethrough,
+    Grid3x3: LucideIcons.Grid3x3,
+    List: LucideIcons.List,
+    MessageSquare: LucideIcons.MessageSquare,
+    Laptop: LucideIcons.Laptop,
+    Globe: LucideIcons.Globe,
+    Apple: LucideIcons.Apple,
+    Circle: LucideIcons.Circle,
+};
 /**
- * Studio icon provider
- * Registers commonly used Lucide icons
+ * Studio icon provider с поддержкой preset'ов
  *
  * @example
  * ```typescript
- * // app.config.ts
- * import { provideStudioIcons } from '@eduboxpro/studio';
+ * // Минимальный набор (только для компонентов библиотеки)
+ * provideStudioIcons({ preset: 'minimal' });
  *
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideStudioIcons()
- *   ]
- * };
- * ```
+ * // Расширенный набор (рекомендуется)
+ * provideStudioIcons({ preset: 'common' });
  *
- * To add additional icons:
- * @example
- * ```typescript
- * import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
- * import { Zap, Wifi } from 'lucide-angular';
+ * // Все иконки Lucide (~1400 штук)
+ * provideStudioIcons({ preset: 'full' });
  *
- * providers: [
- *   provideStudioIcons(),
- *   {
- *     provide: LUCIDE_ICONS,
- *     multi: true,
- *     useValue: new LucideIconProvider({ Zap, Wifi })
- *   }
- * ]
+ * // С кастомными иконками
+ * import { Zap, Wifi } from 'lucide-angular';
+ * provideStudioIcons({
+ *   preset: 'common',
+ *   customIcons: { Zap, Wifi }
+ * });
  * ```
  */
-function provideStudioIcons() {
+function provideStudioIcons(config = { preset: 'common' }) {
+    let icons;
+    switch (config.preset) {
+        case 'minimal':
+            icons = MINIMAL_ICONS;
+            break;
+        case 'full':
+            // Все иконки из lucide-angular (кроме служебных)
+            icons = Object.keys(LucideIcons)
+                .filter(key => !key.startsWith('Lucide') && !key.startsWith('LUCIDE'))
+                .reduce((acc, key) => {
+                acc[key] = LucideIcons[key];
+                return acc;
+            }, {});
+            break;
+        case 'common':
+        default:
+            icons = COMMON_ICONS;
+            break;
+    }
+    // Добавляем кастомные иконки
+    if (config.customIcons) {
+        icons = { ...icons, ...config.customIcons };
+    }
     return makeEnvironmentProviders([
         {
             provide: LUCIDE_ICONS,
             multi: true,
-            useValue: new LucideIconProvider({
-                ArrowRight,
-                ArrowLeft,
-                ChevronDown,
-                ChevronUp,
-                ChevronLeft,
-                ChevronRight,
-                Download,
-                Upload,
-                Mail,
-                Phone,
-                Heart,
-                Star,
-                Settings,
-                User,
-                Trash2,
-                Edit,
-                Plus,
-                Minus,
-                Check,
-                X,
-                Search,
-                Filter,
-                ExternalLink,
-                Link,
-                Copy,
-                Share2,
-                Home,
-                Menu,
-                MoreVertical,
-                MoreHorizontal,
-                Bell,
-                Calendar,
-                Clock,
-                Eye,
-                EyeOff,
-                Lock,
-                Unlock,
-                LogIn,
-                LogOut,
-                AlertCircle,
-                AlertTriangle,
-                Info,
-                CheckCircle,
-                XCircle,
-                HelpCircle,
-                File,
-                FileText,
-                Folder,
-                Image,
-                Save,
-                Printer,
-                RefreshCw,
-                RotateCw,
-                Loader,
-                Loader2,
-                ShoppingCart,
-                Sun,
-                Moon,
-                AlignLeft,
-                AlignCenter,
-                AlignRight,
-                AlignJustify,
-                Bold,
-                Italic,
-                Underline,
-                Strikethrough,
-                Grid3x3,
-                List,
-                MessageSquare,
-                Laptop,
-                Globe,
-                Apple,
-                Circle
-            })
+            useValue: new LucideIconProvider(icons)
         }
     ]);
 }
@@ -735,10 +760,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-family:var(--studio-font-family);font-weight:var(--studio-badge-font-weight, 500);line-height:1;white-space:nowrap;transition:all .2s ease;cursor:default;-webkit-user-select:none;user-select:none}.studio-badge__content{display:inline-flex;align-items:center;gap:var(--studio-badge-gap);padding:var(--studio-badge-padding-y) var(--studio-badge-padding-x);border-radius:var(--studio-badge-radius);background:var(--studio-badge-bg);color:var(--studio-badge-color);border:var(--studio-badge-border-width, 1px) solid var(--studio-badge-border-color, transparent);font-size:var(--studio-badge-font-size)}.studio-badge__text{display:inline-block}.studio-badge__dot{width:var(--studio-badge-dot-size, 6px);height:var(--studio-badge-dot-size, 6px);border-radius:50%;background:var(--studio-badge-dot-bg);flex-shrink:0}.studio-badge__remove{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.7;transition:opacity .2s ease}.studio-badge__remove:hover{opacity:1}.studio-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}:host(.studio-badge--solid){--studio-badge-bg: var(--studio-primary);--studio-badge-color: white}:host(.studio-badge--solid).studio-badge--primary{--studio-badge-bg: var(--studio-primary)}:host(.studio-badge--solid).studio-badge--secondary{--studio-badge-bg: var(--studio-secondary)}:host(.studio-badge--solid).studio-badge--success{--studio-badge-bg: var(--studio-success)}:host(.studio-badge--solid).studio-badge--error{--studio-badge-bg: var(--studio-error)}:host(.studio-badge--solid).studio-badge--warning{--studio-badge-bg: var(--studio-warning)}:host(.studio-badge--solid).studio-badge--info{--studio-badge-bg: var(--studio-info)}:host(.studio-badge--solid).studio-badge--neutral{--studio-badge-bg: var(--studio-border-secondary);--studio-badge-color: var(--studio-text-primary)}:host(.studio-badge--outline){--studio-badge-bg: transparent;--studio-badge-color: var(--studio-primary);--studio-badge-border-color: var(--studio-primary)}:host(.studio-badge--outline).studio-badge--primary{--studio-badge-color: var(--studio-primary);--studio-badge-border-color: var(--studio-primary)}:host(.studio-badge--outline).studio-badge--secondary{--studio-badge-color: var(--studio-secondary);--studio-badge-border-color: var(--studio-secondary)}:host(.studio-badge--outline).studio-badge--success{--studio-badge-color: var(--studio-success);--studio-badge-border-color: var(--studio-success)}:host(.studio-badge--outline).studio-badge--error{--studio-badge-color: var(--studio-error);--studio-badge-border-color: var(--studio-error)}:host(.studio-badge--outline).studio-badge--warning{--studio-badge-color: var(--studio-warning);--studio-badge-border-color: var(--studio-warning)}:host(.studio-badge--outline).studio-badge--info{--studio-badge-color: var(--studio-info);--studio-badge-border-color: var(--studio-info)}:host(.studio-badge--outline).studio-badge--neutral{--studio-badge-color: var(--studio-text-secondary);--studio-badge-border-color: var(--studio-border-secondary)}:host(.studio-badge--soft){--studio-badge-bg: rgba(124, 58, 237, .1);--studio-badge-color: var(--studio-primary)}:host(.studio-badge--soft).studio-badge--primary{--studio-badge-bg: rgba(124, 58, 237, .1);--studio-badge-color: var(--studio-primary)}:host(.studio-badge--soft).studio-badge--secondary{--studio-badge-bg: rgba(99, 102, 241, .1);--studio-badge-color: var(--studio-secondary)}:host(.studio-badge--soft).studio-badge--success{--studio-badge-bg: var(--studio-success-bg);--studio-badge-color: var(--studio-success)}:host(.studio-badge--soft).studio-badge--error{--studio-badge-bg: var(--studio-error-bg);--studio-badge-color: var(--studio-error)}:host(.studio-badge--soft).studio-badge--warning{--studio-badge-bg: var(--studio-warning-bg);--studio-badge-color: var(--studio-warning)}:host(.studio-badge--soft).studio-badge--info{--studio-badge-bg: var(--studio-info-bg);--studio-badge-color: var(--studio-info)}:host(.studio-badge--soft).studio-badge--neutral{--studio-badge-bg: var(--studio-bg-secondary);--studio-badge-color: var(--studio-text-secondary)}:host(.studio-badge--dot){--studio-badge-bg: transparent;--studio-badge-color: var(--studio-text-primary);--studio-badge-border-width: 0}:host(.studio-badge--sm){--studio-badge-padding-y: .125rem;--studio-badge-padding-x: .5rem;--studio-badge-font-size: .6875rem;--studio-badge-gap: .25rem}:host(.studio-badge--md){--studio-badge-padding-y: .25rem;--studio-badge-padding-x: .625rem;--studio-badge-font-size: .75rem;--studio-badge-gap: .375rem}:host(.studio-badge--lg){--studio-badge-padding-y: .375rem;--studio-badge-padding-x: .75rem;--studio-badge-font-size: .875rem;--studio-badge-gap: .5rem}:host(.studio-badge--radius-sm){--studio-badge-radius: 2px}:host(.studio-badge--radius-md){--studio-badge-radius: 4px}:host(.studio-badge--radius-lg){--studio-badge-radius: 8px}:host(.studio-badge--radius-full){--studio-badge-radius: 9999px}.studio-badge__dot--primary{--studio-badge-dot-bg: var(--studio-primary)}.studio-badge__dot--secondary{--studio-badge-dot-bg: var(--studio-secondary)}.studio-badge__dot--success{--studio-badge-dot-bg: var(--studio-success)}.studio-badge__dot--error{--studio-badge-dot-bg: var(--studio-error)}.studio-badge__dot--warning{--studio-badge-dot-bg: var(--studio-warning)}.studio-badge__dot--info{--studio-badge-dot-bg: var(--studio-info)}.studio-badge__dot--neutral{--studio-badge-dot-bg: var(--studio-text-secondary)}:host(.studio-badge--clickable){cursor:pointer}:host(.studio-badge--clickable):hover{opacity:.9;transform:translateY(-1px)}:host(.studio-badge--clickable):active{transform:translateY(0)}:host(.studio-badge--disabled){opacity:.5;cursor:not-allowed;pointer-events:none}:host(.studio-badge--uppercase){text-transform:uppercase;letter-spacing:.5px}:host(.studio-badge--bold){--studio-badge-font-weight: 600}@keyframes badge-pulse{0%,to{opacity:1}50%{opacity:.5}}:host(.studio-badge--pulse) .studio-badge__dot{animation:badge-pulse 2s cubic-bezier(.4,0,.6,1) infinite}\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 }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], dotColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotColor", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZero", required: false }] }], uppercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "uppercase", required: false }] }], bold: [{ type: i0.Input, args: [{ isSignal: true, alias: "bold", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }], autoColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoColor", required: false }] }] } });
 
+/**
+ * Badge component types
+ */
+
 /**
  * Badge component
  */
 
+/**
+ * BadgeWrapper component - Wraps content with a positioned badge
+ *
+ * @example
+ * <studio-badge-wrapper [count]="5" color="error">
+ *   <studio-button variant="ghost">
+ *     <studio-icon name="bell" />
+ *   </studio-button>
+ * </studio-badge-wrapper>
+ */
+class BadgeWrapperComponent {
+    // ========== Content ==========
+    count = input(...(ngDevMode ? [undefined, { debugName: "count" }] : []));
+    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+    // ========== Badge style ==========
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    color = input('error', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    // ========== Position ==========
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    // ========== Behavior ==========
+    showZero = input(false, ...(ngDevMode ? [{ debugName: "showZero" }] : []));
+    max = input(99, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : []));
+    overlap = input(false, ...(ngDevMode ? [{ debugName: "overlap" }] : []));
+    // ========== Customization ==========
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    // ========== Computed values ==========
+    hostClasses = computed(() => {
+        const classes = ['studio-badge-wrapper'];
+        classes.push(`studio-badge-wrapper--${this.position()}`);
+        classes.push(`studio-badge-wrapper--${this.size()}`);
+        if (this.overlap())
+            classes.push('studio-badge-wrapper--overlap');
+        if (this.dot())
+            classes.push('studio-badge-wrapper--dot');
+        if (this.class())
+            classes.push(this.class());
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    badgeContent = computed(() => {
+        if (this.content())
+            return this.content();
+        const count = this.count();
+        if (count === undefined || count === null)
+            return undefined;
+        const numCount = typeof count === 'number' ? count : parseInt(count, 10);
+        if (numCount === 0 && !this.showZero())
+            return undefined;
+        const max = this.max();
+        if (numCount > max)
+            return `${max}+`;
+        return count.toString();
+    }, ...(ngDevMode ? [{ debugName: "badgeContent" }] : []));
+    shouldShowBadge = computed(() => {
+        if (this.dot())
+            return true;
+        return this.badgeContent() !== undefined;
+    }, ...(ngDevMode ? [{ debugName: "shouldShowBadge" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BadgeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: BadgeWrapperComponent, isStandalone: true, selector: "studio-badge-wrapper", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: BadgeWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-badge-wrapper', standalone: true, imports: [CommonModule, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()'
+                    }, 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 }] }] } });
+
 /**
  * Button component with multiple variants, sizes, colors and states
  *
@@ -1163,7 +1261,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$1.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -1585,14 +1683,14 @@ class DrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: DrawerComponent, isStandalone: true, selector: "studio-drawer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, positionInput: { classPropertyName: "positionInput", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, customHeight: { classPropertyName: "customHeight", publicName: "customHeight", isSignal: true, isRequired: false, transformFunction: null }, modalInput: { classPropertyName: "modalInput", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscapeInput: { classPropertyName: "closeOnEscapeInput", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClickInput: { classPropertyName: "closeOnBackdropClickInput", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, blockScrollInput: { classPropertyName: "blockScrollInput", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, showHeaderInput: { classPropertyName: "showHeaderInput", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showCloseButtonInput: { classPropertyName: "showCloseButtonInput", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonPositionInput: { classPropertyName: "closeButtonPositionInput", publicName: "closeButtonPosition", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, swipeToCloseInput: { classPropertyName: "swipeToCloseInput", publicName: "swipeToClose", isSignal: true, isRequired: false, transformFunction: null }, swipeThresholdInput: { classPropertyName: "swipeThresholdInput", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null }, animationDurationInput: { classPropertyName: "animationDurationInput", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, animationEasingInput: { classPropertyName: "animationEasingInput", publicName: "animationEasing", isSignal: true, isRequired: false, transformFunction: null }, disableAnimationInput: { classPropertyName: "disableAnimationInput", publicName: "disableAnimation", 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 }, shadowSizeInput: { classPropertyName: "shadowSizeInput", publicName: "shadowSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, autoFocusInput: { classPropertyName: "autoFocusInput", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, restoreFocusInput: { classPropertyName: "restoreFocusInput", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, roleInput: { classPropertyName: "roleInput", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", visibleChange: "visibleChange", opened: "opened", closed: "closed", backdropClick: "backdropClick" }, host: { listeners: { "document:keydown.escape": "handleEscapeKey($event)", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)", "keydown": "handleKeydown($event)" }, properties: { "class": "hostClasses()", "attr.data-visible": "visible()" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["drawerPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <!-- Backdrop -->\n  @if (modal()) {\n    <div\n      class=\"studio-drawer__backdrop\"\n      (click)=\"handleBackdropClick()\">\n    </div>\n  }\n\n  <!-- Drawer Panel -->\n  <div\n    #drawerPanel\n    class=\"studio-drawer__panel\"\n    [attr.role]=\"role()\"\n    [attr.aria-modal]=\"modal()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.tabindex]=\"-1\"\n    [style.width]=\"customWidth()\"\n    [style.height]=\"customHeight()\"\n    [style.--drawer-animation-duration]=\"animationDuration() + 'ms'\"\n    [style.--drawer-animation-timing]=\"animationEasing()\">\n\n    <!-- Header -->\n    @if (showHeader() && (headerTemplate() || header() || showCloseButton())) {\n      <div class=\"studio-drawer__header\">\n        @if (headerTemplate(); as tmpl) {\n          <!-- Custom template -->\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n        } @else if (header()) {\n          <!-- Simple string header -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <h2 class=\"studio-drawer__title\">{{ header() }}</h2>\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Named slot fallback -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <ng-content select=\"[drawerHeader]\" />\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    <div class=\"studio-drawer__content\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    @if (showFooter() && footerTemplate()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()!\" />\n      </div>\n    } @else if (showFooter()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-content select=\"[drawerFooter]\" />\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;pointer-events:none;font-family:var(--studio-font-family)}:host(.studio-drawer--visible){pointer-events:auto}.studio-drawer__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--studio-drawer-backdrop-bg, rgba(0, 0, 0, .5));-webkit-backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));z-index:var(--studio-drawer-z-index, 1000);opacity:0;transition:opacity var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}:host(.studio-drawer--visible) .studio-drawer__backdrop{opacity:1}.studio-drawer__panel{position:fixed;background:var(--studio-drawer-bg, var(--studio-bg-primary));color:var(--studio-drawer-text-color, var(--studio-text-primary));z-index:calc(var(--studio-drawer-z-index, 1000) + 1);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;outline:none;transition:transform var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}.studio-drawer__panel::-webkit-scrollbar{width:var(--studio-drawer-scrollbar-width, 8px)}.studio-drawer__panel::-webkit-scrollbar-track{background:var(--studio-drawer-scrollbar-track-bg, transparent)}.studio-drawer__panel::-webkit-scrollbar-thumb{background:var(--studio-drawer-scrollbar-thumb-bg, rgba(0, 0, 0, .2));border-radius:var(--studio-drawer-scrollbar-thumb-radius, 4px)}.studio-drawer__panel::-webkit-scrollbar-thumb:hover{background:var(--studio-drawer-scrollbar-thumb-hover-bg, rgba(0, 0, 0, .3))}:host(.studio-drawer--left) .studio-drawer__panel{top:0;left:0;height:100%;border-right:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(-100%)}:host(.studio-drawer--left.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--right) .studio-drawer__panel{top:0;right:0;height:100%;border-left:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(100%)}:host(.studio-drawer--right.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--top) .studio-drawer__panel{top:0;left:0;width:100%;border-bottom:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(-100%)}:host(.studio-drawer--top.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--bottom) .studio-drawer__panel{bottom:0;left:0;width:100%;border-top:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(100%)}:host(.studio-drawer--bottom.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--left.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--sm) .studio-drawer__panel{width:var(--studio-drawer-width-sm, 20rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel{width:var(--studio-drawer-width-md, 28rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel{width:var(--studio-drawer-width-lg, 36rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:var(--studio-drawer-width-xl, 48rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--full) .studio-drawer__panel{width:100vw;max-width:none}:host(.studio-drawer--top.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--sm) .studio-drawer__panel{height:var(--studio-drawer-height-sm, 12rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--md) .studio-drawer__panel{height:var(--studio-drawer-height-md, 20rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--lg) .studio-drawer__panel{height:var(--studio-drawer-height-lg, 32rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--xl) .studio-drawer__panel{height:var(--studio-drawer-height-xl, 48rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--full) .studio-drawer__panel{height:100vh;max-height:none}:host(.studio-drawer--left.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:0 var(--studio-radius-sm) var(--studio-radius-sm) 0}:host(.studio-drawer--left.studio-drawer--radius-md) .studio-drawer__panel{border-radius:0 var(--studio-radius-md) var(--studio-radius-md) 0}:host(.studio-drawer--left.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:0 var(--studio-radius-lg) var(--studio-radius-lg) 0}:host(.studio-drawer--right.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:var(--studio-radius-sm) 0 0 var(--studio-radius-sm)}:host(.studio-drawer--right.studio-drawer--radius-md) .studio-drawer__panel{border-radius:var(--studio-radius-md) 0 0 var(--studio-radius-md)}:host(.studio-drawer--right.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:var(--studio-radius-lg) 0 0 var(--studio-radius-lg)}:host(.studio-drawer--shadow-sm) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-sm, var(--studio-shadow-sm))}:host(.studio-drawer--shadow-md) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-md, var(--studio-shadow-md))}:host(.studio-drawer--shadow-lg) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-lg, var(--studio-shadow-lg))}:host(.studio-drawer--shadow-xl) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-xl, 0 12px 32px rgba(0, 0, 0, .2))}.studio-drawer__header{flex-shrink:0;padding:var(--studio-drawer-header-padding-y, var(--studio-spacing-md)) var(--studio-drawer-header-padding-x, var(--studio-spacing-lg));border-bottom:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary))}.studio-drawer__header-content{display:flex;align-items:center;gap:var(--studio-drawer-header-gap, var(--studio-spacing-md))}.studio-drawer__title{flex:1;margin:0;font-size:var(--studio-drawer-title-font-size, 1.25rem);font-weight:var(--studio-drawer-title-font-weight, var(--studio-font-weight-semibold, 600));line-height:var(--studio-drawer-title-line-height, 1.5);color:var(--studio-drawer-title-color, var(--studio-text-primary))}.studio-drawer__close{display:flex;align-items:center;justify-content:center;width:var(--studio-drawer-close-button-size, 2.5rem);height:var(--studio-drawer-close-button-size, 2.5rem);padding:0;background:none;border:none;border-radius:var(--studio-drawer-close-button-radius, var(--studio-radius-md));color:var(--studio-drawer-close-button-color, var(--studio-text-secondary));cursor:pointer;transition:all var(--studio-transition-fast);flex-shrink:0}.studio-drawer__close:hover{background:var(--studio-drawer-close-button-hover-bg, var(--studio-bg-secondary));color:var(--studio-drawer-close-button-hover-color, var(--studio-text-primary))}.studio-drawer__close:active{transform:scale(.95)}.studio-drawer__close:focus-visible{outline:2px solid var(--studio-drawer-focus-ring-color, var(--studio-primary));outline-offset:var(--studio-drawer-focus-ring-offset, 2px)}.studio-drawer__content{flex:1;padding:var(--studio-drawer-content-padding-y, var(--studio-spacing-lg)) var(--studio-drawer-content-padding-x, var(--studio-spacing-lg));overflow-y:auto;overflow-x:hidden}.studio-drawer__footer{flex-shrink:0;padding:var(--studio-drawer-footer-padding-y, var(--studio-spacing-md)) var(--studio-drawer-footer-padding-x, var(--studio-spacing-lg));border-top:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary));display:flex;align-items:center;gap:var(--studio-drawer-footer-gap, var(--studio-spacing-sm))}:host(.studio-drawer--dragging) .studio-drawer__panel{transition:none!important}@media (max-width: 640px){:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:100vw;max-width:none}.studio-drawer__header,.studio-drawer__content,.studio-drawer__footer{padding-left:var(--studio-spacing-md);padding-right:var(--studio-spacing-md)}}\n"], dependencies: [{ kind: "directive", type: 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: DrawerComponent, isStandalone: true, selector: "studio-drawer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, positionInput: { classPropertyName: "positionInput", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, customHeight: { classPropertyName: "customHeight", publicName: "customHeight", isSignal: true, isRequired: false, transformFunction: null }, modalInput: { classPropertyName: "modalInput", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscapeInput: { classPropertyName: "closeOnEscapeInput", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClickInput: { classPropertyName: "closeOnBackdropClickInput", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, blockScrollInput: { classPropertyName: "blockScrollInput", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, showHeaderInput: { classPropertyName: "showHeaderInput", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showCloseButtonInput: { classPropertyName: "showCloseButtonInput", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonPositionInput: { classPropertyName: "closeButtonPositionInput", publicName: "closeButtonPosition", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, swipeToCloseInput: { classPropertyName: "swipeToCloseInput", publicName: "swipeToClose", isSignal: true, isRequired: false, transformFunction: null }, swipeThresholdInput: { classPropertyName: "swipeThresholdInput", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null }, animationDurationInput: { classPropertyName: "animationDurationInput", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, animationEasingInput: { classPropertyName: "animationEasingInput", publicName: "animationEasing", isSignal: true, isRequired: false, transformFunction: null }, disableAnimationInput: { classPropertyName: "disableAnimationInput", publicName: "disableAnimation", 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 }, shadowSizeInput: { classPropertyName: "shadowSizeInput", publicName: "shadowSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, autoFocusInput: { classPropertyName: "autoFocusInput", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, restoreFocusInput: { classPropertyName: "restoreFocusInput", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, roleInput: { classPropertyName: "roleInput", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", visibleChange: "visibleChange", opened: "opened", closed: "closed", backdropClick: "backdropClick" }, host: { listeners: { "document:keydown.escape": "handleEscapeKey($event)", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)", "keydown": "handleKeydown($event)" }, properties: { "class": "hostClasses()", "attr.data-visible": "visible()" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["drawerPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <!-- Backdrop -->\n  @if (modal()) {\n    <div\n      class=\"studio-drawer__backdrop\"\n      (click)=\"handleBackdropClick()\">\n    </div>\n  }\n\n  <!-- Drawer Panel -->\n  <div\n    #drawerPanel\n    class=\"studio-drawer__panel\"\n    [attr.role]=\"role()\"\n    [attr.aria-modal]=\"modal()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.tabindex]=\"-1\"\n    [style.width]=\"customWidth()\"\n    [style.height]=\"customHeight()\"\n    [style.--drawer-animation-duration]=\"animationDuration() + 'ms'\"\n    [style.--drawer-animation-timing]=\"animationEasing()\">\n\n    <!-- Header -->\n    @if (showHeader() && (headerTemplate() || header() || showCloseButton())) {\n      <div class=\"studio-drawer__header\">\n        @if (headerTemplate(); as tmpl) {\n          <!-- Custom template -->\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n        } @else if (header()) {\n          <!-- Simple string header -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <h2 class=\"studio-drawer__title\">{{ header() }}</h2>\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Named slot fallback -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <ng-content select=\"[drawerHeader]\" />\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    <div class=\"studio-drawer__content\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    @if (showFooter() && footerTemplate()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()!\" />\n      </div>\n    } @else if (showFooter()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-content select=\"[drawerFooter]\" />\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;pointer-events:none;font-family:var(--studio-font-family)}:host(.studio-drawer--visible){pointer-events:auto}.studio-drawer__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--studio-drawer-backdrop-bg, rgba(0, 0, 0, .5));-webkit-backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));z-index:var(--studio-drawer-z-index, 1000);opacity:0;transition:opacity var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}:host(.studio-drawer--visible) .studio-drawer__backdrop{opacity:1}.studio-drawer__panel{position:fixed;background:var(--studio-drawer-bg, var(--studio-bg-primary));color:var(--studio-drawer-text-color, var(--studio-text-primary));z-index:calc(var(--studio-drawer-z-index, 1000) + 1);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;outline:none;transition:transform var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}.studio-drawer__panel::-webkit-scrollbar{width:var(--studio-drawer-scrollbar-width, 8px)}.studio-drawer__panel::-webkit-scrollbar-track{background:var(--studio-drawer-scrollbar-track-bg, transparent)}.studio-drawer__panel::-webkit-scrollbar-thumb{background:var(--studio-drawer-scrollbar-thumb-bg, rgba(0, 0, 0, .2));border-radius:var(--studio-drawer-scrollbar-thumb-radius, 4px)}.studio-drawer__panel::-webkit-scrollbar-thumb:hover{background:var(--studio-drawer-scrollbar-thumb-hover-bg, rgba(0, 0, 0, .3))}:host(.studio-drawer--left) .studio-drawer__panel{top:0;left:0;height:100%;border-right:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(-100%)}:host(.studio-drawer--left.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--right) .studio-drawer__panel{top:0;right:0;height:100%;border-left:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(100%)}:host(.studio-drawer--right.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--top) .studio-drawer__panel{top:0;left:0;width:100%;border-bottom:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(-100%)}:host(.studio-drawer--top.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--bottom) .studio-drawer__panel{bottom:0;left:0;width:100%;border-top:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(100%)}:host(.studio-drawer--bottom.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--left.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--sm) .studio-drawer__panel{width:var(--studio-drawer-width-sm, 20rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel{width:var(--studio-drawer-width-md, 28rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel{width:var(--studio-drawer-width-lg, 36rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:var(--studio-drawer-width-xl, 48rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--full) .studio-drawer__panel{width:100vw;max-width:none}:host(.studio-drawer--top.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--sm) .studio-drawer__panel{height:var(--studio-drawer-height-sm, 12rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--md) .studio-drawer__panel{height:var(--studio-drawer-height-md, 20rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--lg) .studio-drawer__panel{height:var(--studio-drawer-height-lg, 32rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--xl) .studio-drawer__panel{height:var(--studio-drawer-height-xl, 48rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--full) .studio-drawer__panel{height:100vh;max-height:none}:host(.studio-drawer--left.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:0 var(--studio-radius-sm) var(--studio-radius-sm) 0}:host(.studio-drawer--left.studio-drawer--radius-md) .studio-drawer__panel{border-radius:0 var(--studio-radius-md) var(--studio-radius-md) 0}:host(.studio-drawer--left.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:0 var(--studio-radius-lg) var(--studio-radius-lg) 0}:host(.studio-drawer--right.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:var(--studio-radius-sm) 0 0 var(--studio-radius-sm)}:host(.studio-drawer--right.studio-drawer--radius-md) .studio-drawer__panel{border-radius:var(--studio-radius-md) 0 0 var(--studio-radius-md)}:host(.studio-drawer--right.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:var(--studio-radius-lg) 0 0 var(--studio-radius-lg)}:host(.studio-drawer--shadow-sm) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-sm, var(--studio-shadow-sm))}:host(.studio-drawer--shadow-md) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-md, var(--studio-shadow-md))}:host(.studio-drawer--shadow-lg) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-lg, var(--studio-shadow-lg))}:host(.studio-drawer--shadow-xl) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-xl, 0 12px 32px rgba(0, 0, 0, .2))}.studio-drawer__header{flex-shrink:0;padding:var(--studio-drawer-header-padding-y, var(--studio-spacing-md)) var(--studio-drawer-header-padding-x, var(--studio-spacing-lg));border-bottom:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary))}.studio-drawer__header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--studio-drawer-header-gap, var(--studio-spacing-md))}.studio-drawer__title{flex:1;margin:0;font-size:var(--studio-drawer-title-font-size, 1.25rem);font-weight:var(--studio-drawer-title-font-weight, var(--studio-font-weight-semibold, 600));line-height:var(--studio-drawer-title-line-height, 1.5);color:var(--studio-drawer-title-color, var(--studio-text-primary))}.studio-drawer__close{display:flex;align-items:center;justify-content:center;width:var(--studio-drawer-close-button-size, 2.5rem);height:var(--studio-drawer-close-button-size, 2.5rem);padding:0;background:none;border:none;border-radius:var(--studio-drawer-close-button-radius, var(--studio-radius-md));color:var(--studio-drawer-close-button-color, var(--studio-text-secondary));cursor:pointer;transition:all var(--studio-transition-fast);flex-shrink:0}.studio-drawer__close:hover{background:var(--studio-drawer-close-button-hover-bg, var(--studio-bg-secondary));color:var(--studio-drawer-close-button-hover-color, var(--studio-text-primary))}.studio-drawer__close:active{transform:scale(.95)}.studio-drawer__close:focus-visible{outline:2px solid var(--studio-drawer-focus-ring-color, var(--studio-primary));outline-offset:var(--studio-drawer-focus-ring-offset, 2px)}.studio-drawer__content{flex:1;padding:var(--studio-drawer-content-padding-y, var(--studio-spacing-lg)) var(--studio-drawer-content-padding-x, var(--studio-spacing-lg));overflow-y:auto;overflow-x:hidden}.studio-drawer__footer{flex-shrink:0;padding:var(--studio-drawer-footer-padding-y, var(--studio-spacing-md)) var(--studio-drawer-footer-padding-x, var(--studio-spacing-lg));border-top:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary));display:flex;align-items:center;gap:var(--studio-drawer-footer-gap, var(--studio-spacing-sm))}:host(.studio-drawer--dragging) .studio-drawer__panel{transition:none!important}@media (max-width: 640px){:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:100vw;max-width:none}.studio-drawer__header,.studio-drawer__content,.studio-drawer__footer{padding-left:var(--studio-spacing-md);padding-right:var(--studio-spacing-md)}}\n"], dependencies: [{ kind: "directive", type: 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: DrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'studio-drawer', standalone: true, imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
                         '[attr.data-visible]': 'visible()',
-                    }, template: "@if (visible()) {\n  <!-- Backdrop -->\n  @if (modal()) {\n    <div\n      class=\"studio-drawer__backdrop\"\n      (click)=\"handleBackdropClick()\">\n    </div>\n  }\n\n  <!-- Drawer Panel -->\n  <div\n    #drawerPanel\n    class=\"studio-drawer__panel\"\n    [attr.role]=\"role()\"\n    [attr.aria-modal]=\"modal()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.tabindex]=\"-1\"\n    [style.width]=\"customWidth()\"\n    [style.height]=\"customHeight()\"\n    [style.--drawer-animation-duration]=\"animationDuration() + 'ms'\"\n    [style.--drawer-animation-timing]=\"animationEasing()\">\n\n    <!-- Header -->\n    @if (showHeader() && (headerTemplate() || header() || showCloseButton())) {\n      <div class=\"studio-drawer__header\">\n        @if (headerTemplate(); as tmpl) {\n          <!-- Custom template -->\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n        } @else if (header()) {\n          <!-- Simple string header -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <h2 class=\"studio-drawer__title\">{{ header() }}</h2>\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Named slot fallback -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <ng-content select=\"[drawerHeader]\" />\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    <div class=\"studio-drawer__content\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    @if (showFooter() && footerTemplate()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()!\" />\n      </div>\n    } @else if (showFooter()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-content select=\"[drawerFooter]\" />\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;pointer-events:none;font-family:var(--studio-font-family)}:host(.studio-drawer--visible){pointer-events:auto}.studio-drawer__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--studio-drawer-backdrop-bg, rgba(0, 0, 0, .5));-webkit-backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));z-index:var(--studio-drawer-z-index, 1000);opacity:0;transition:opacity var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}:host(.studio-drawer--visible) .studio-drawer__backdrop{opacity:1}.studio-drawer__panel{position:fixed;background:var(--studio-drawer-bg, var(--studio-bg-primary));color:var(--studio-drawer-text-color, var(--studio-text-primary));z-index:calc(var(--studio-drawer-z-index, 1000) + 1);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;outline:none;transition:transform var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}.studio-drawer__panel::-webkit-scrollbar{width:var(--studio-drawer-scrollbar-width, 8px)}.studio-drawer__panel::-webkit-scrollbar-track{background:var(--studio-drawer-scrollbar-track-bg, transparent)}.studio-drawer__panel::-webkit-scrollbar-thumb{background:var(--studio-drawer-scrollbar-thumb-bg, rgba(0, 0, 0, .2));border-radius:var(--studio-drawer-scrollbar-thumb-radius, 4px)}.studio-drawer__panel::-webkit-scrollbar-thumb:hover{background:var(--studio-drawer-scrollbar-thumb-hover-bg, rgba(0, 0, 0, .3))}:host(.studio-drawer--left) .studio-drawer__panel{top:0;left:0;height:100%;border-right:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(-100%)}:host(.studio-drawer--left.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--right) .studio-drawer__panel{top:0;right:0;height:100%;border-left:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(100%)}:host(.studio-drawer--right.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--top) .studio-drawer__panel{top:0;left:0;width:100%;border-bottom:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(-100%)}:host(.studio-drawer--top.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--bottom) .studio-drawer__panel{bottom:0;left:0;width:100%;border-top:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(100%)}:host(.studio-drawer--bottom.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--left.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--sm) .studio-drawer__panel{width:var(--studio-drawer-width-sm, 20rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel{width:var(--studio-drawer-width-md, 28rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel{width:var(--studio-drawer-width-lg, 36rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:var(--studio-drawer-width-xl, 48rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--full) .studio-drawer__panel{width:100vw;max-width:none}:host(.studio-drawer--top.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--sm) .studio-drawer__panel{height:var(--studio-drawer-height-sm, 12rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--md) .studio-drawer__panel{height:var(--studio-drawer-height-md, 20rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--lg) .studio-drawer__panel{height:var(--studio-drawer-height-lg, 32rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--xl) .studio-drawer__panel{height:var(--studio-drawer-height-xl, 48rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--full) .studio-drawer__panel{height:100vh;max-height:none}:host(.studio-drawer--left.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:0 var(--studio-radius-sm) var(--studio-radius-sm) 0}:host(.studio-drawer--left.studio-drawer--radius-md) .studio-drawer__panel{border-radius:0 var(--studio-radius-md) var(--studio-radius-md) 0}:host(.studio-drawer--left.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:0 var(--studio-radius-lg) var(--studio-radius-lg) 0}:host(.studio-drawer--right.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:var(--studio-radius-sm) 0 0 var(--studio-radius-sm)}:host(.studio-drawer--right.studio-drawer--radius-md) .studio-drawer__panel{border-radius:var(--studio-radius-md) 0 0 var(--studio-radius-md)}:host(.studio-drawer--right.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:var(--studio-radius-lg) 0 0 var(--studio-radius-lg)}:host(.studio-drawer--shadow-sm) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-sm, var(--studio-shadow-sm))}:host(.studio-drawer--shadow-md) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-md, var(--studio-shadow-md))}:host(.studio-drawer--shadow-lg) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-lg, var(--studio-shadow-lg))}:host(.studio-drawer--shadow-xl) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-xl, 0 12px 32px rgba(0, 0, 0, .2))}.studio-drawer__header{flex-shrink:0;padding:var(--studio-drawer-header-padding-y, var(--studio-spacing-md)) var(--studio-drawer-header-padding-x, var(--studio-spacing-lg));border-bottom:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary))}.studio-drawer__header-content{display:flex;align-items:center;gap:var(--studio-drawer-header-gap, var(--studio-spacing-md))}.studio-drawer__title{flex:1;margin:0;font-size:var(--studio-drawer-title-font-size, 1.25rem);font-weight:var(--studio-drawer-title-font-weight, var(--studio-font-weight-semibold, 600));line-height:var(--studio-drawer-title-line-height, 1.5);color:var(--studio-drawer-title-color, var(--studio-text-primary))}.studio-drawer__close{display:flex;align-items:center;justify-content:center;width:var(--studio-drawer-close-button-size, 2.5rem);height:var(--studio-drawer-close-button-size, 2.5rem);padding:0;background:none;border:none;border-radius:var(--studio-drawer-close-button-radius, var(--studio-radius-md));color:var(--studio-drawer-close-button-color, var(--studio-text-secondary));cursor:pointer;transition:all var(--studio-transition-fast);flex-shrink:0}.studio-drawer__close:hover{background:var(--studio-drawer-close-button-hover-bg, var(--studio-bg-secondary));color:var(--studio-drawer-close-button-hover-color, var(--studio-text-primary))}.studio-drawer__close:active{transform:scale(.95)}.studio-drawer__close:focus-visible{outline:2px solid var(--studio-drawer-focus-ring-color, var(--studio-primary));outline-offset:var(--studio-drawer-focus-ring-offset, 2px)}.studio-drawer__content{flex:1;padding:var(--studio-drawer-content-padding-y, var(--studio-spacing-lg)) var(--studio-drawer-content-padding-x, var(--studio-spacing-lg));overflow-y:auto;overflow-x:hidden}.studio-drawer__footer{flex-shrink:0;padding:var(--studio-drawer-footer-padding-y, var(--studio-spacing-md)) var(--studio-drawer-footer-padding-x, var(--studio-spacing-lg));border-top:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary));display:flex;align-items:center;gap:var(--studio-drawer-footer-gap, var(--studio-spacing-sm))}:host(.studio-drawer--dragging) .studio-drawer__panel{transition:none!important}@media (max-width: 640px){:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:100vw;max-width:none}.studio-drawer__header,.studio-drawer__content,.studio-drawer__footer{padding-left:var(--studio-spacing-md);padding-right:var(--studio-spacing-md)}}\n"] }]
+                    }, template: "@if (visible()) {\n  <!-- Backdrop -->\n  @if (modal()) {\n    <div\n      class=\"studio-drawer__backdrop\"\n      (click)=\"handleBackdropClick()\">\n    </div>\n  }\n\n  <!-- Drawer Panel -->\n  <div\n    #drawerPanel\n    class=\"studio-drawer__panel\"\n    [attr.role]=\"role()\"\n    [attr.aria-modal]=\"modal()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.tabindex]=\"-1\"\n    [style.width]=\"customWidth()\"\n    [style.height]=\"customHeight()\"\n    [style.--drawer-animation-duration]=\"animationDuration() + 'ms'\"\n    [style.--drawer-animation-timing]=\"animationEasing()\">\n\n    <!-- Header -->\n    @if (showHeader() && (headerTemplate() || header() || showCloseButton())) {\n      <div class=\"studio-drawer__header\">\n        @if (headerTemplate(); as tmpl) {\n          <!-- Custom template -->\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n        } @else if (header()) {\n          <!-- Simple string header -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <h2 class=\"studio-drawer__title\">{{ header() }}</h2>\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Named slot fallback -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <ng-content select=\"[drawerHeader]\" />\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    <div class=\"studio-drawer__content\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    @if (showFooter() && footerTemplate()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()!\" />\n      </div>\n    } @else if (showFooter()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-content select=\"[drawerFooter]\" />\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;pointer-events:none;font-family:var(--studio-font-family)}:host(.studio-drawer--visible){pointer-events:auto}.studio-drawer__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--studio-drawer-backdrop-bg, rgba(0, 0, 0, .5));-webkit-backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));z-index:var(--studio-drawer-z-index, 1000);opacity:0;transition:opacity var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}:host(.studio-drawer--visible) .studio-drawer__backdrop{opacity:1}.studio-drawer__panel{position:fixed;background:var(--studio-drawer-bg, var(--studio-bg-primary));color:var(--studio-drawer-text-color, var(--studio-text-primary));z-index:calc(var(--studio-drawer-z-index, 1000) + 1);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;outline:none;transition:transform var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}.studio-drawer__panel::-webkit-scrollbar{width:var(--studio-drawer-scrollbar-width, 8px)}.studio-drawer__panel::-webkit-scrollbar-track{background:var(--studio-drawer-scrollbar-track-bg, transparent)}.studio-drawer__panel::-webkit-scrollbar-thumb{background:var(--studio-drawer-scrollbar-thumb-bg, rgba(0, 0, 0, .2));border-radius:var(--studio-drawer-scrollbar-thumb-radius, 4px)}.studio-drawer__panel::-webkit-scrollbar-thumb:hover{background:var(--studio-drawer-scrollbar-thumb-hover-bg, rgba(0, 0, 0, .3))}:host(.studio-drawer--left) .studio-drawer__panel{top:0;left:0;height:100%;border-right:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(-100%)}:host(.studio-drawer--left.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--right) .studio-drawer__panel{top:0;right:0;height:100%;border-left:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(100%)}:host(.studio-drawer--right.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--top) .studio-drawer__panel{top:0;left:0;width:100%;border-bottom:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(-100%)}:host(.studio-drawer--top.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--bottom) .studio-drawer__panel{bottom:0;left:0;width:100%;border-top:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(100%)}:host(.studio-drawer--bottom.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--left.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--sm) .studio-drawer__panel{width:var(--studio-drawer-width-sm, 20rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel{width:var(--studio-drawer-width-md, 28rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel{width:var(--studio-drawer-width-lg, 36rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:var(--studio-drawer-width-xl, 48rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--full) .studio-drawer__panel{width:100vw;max-width:none}:host(.studio-drawer--top.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--sm) .studio-drawer__panel{height:var(--studio-drawer-height-sm, 12rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--md) .studio-drawer__panel{height:var(--studio-drawer-height-md, 20rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--lg) .studio-drawer__panel{height:var(--studio-drawer-height-lg, 32rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--xl) .studio-drawer__panel{height:var(--studio-drawer-height-xl, 48rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--full) .studio-drawer__panel{height:100vh;max-height:none}:host(.studio-drawer--left.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:0 var(--studio-radius-sm) var(--studio-radius-sm) 0}:host(.studio-drawer--left.studio-drawer--radius-md) .studio-drawer__panel{border-radius:0 var(--studio-radius-md) var(--studio-radius-md) 0}:host(.studio-drawer--left.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:0 var(--studio-radius-lg) var(--studio-radius-lg) 0}:host(.studio-drawer--right.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:var(--studio-radius-sm) 0 0 var(--studio-radius-sm)}:host(.studio-drawer--right.studio-drawer--radius-md) .studio-drawer__panel{border-radius:var(--studio-radius-md) 0 0 var(--studio-radius-md)}:host(.studio-drawer--right.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:var(--studio-radius-lg) 0 0 var(--studio-radius-lg)}:host(.studio-drawer--shadow-sm) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-sm, var(--studio-shadow-sm))}:host(.studio-drawer--shadow-md) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-md, var(--studio-shadow-md))}:host(.studio-drawer--shadow-lg) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-lg, var(--studio-shadow-lg))}:host(.studio-drawer--shadow-xl) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-xl, 0 12px 32px rgba(0, 0, 0, .2))}.studio-drawer__header{flex-shrink:0;padding:var(--studio-drawer-header-padding-y, var(--studio-spacing-md)) var(--studio-drawer-header-padding-x, var(--studio-spacing-lg));border-bottom:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary))}.studio-drawer__header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--studio-drawer-header-gap, var(--studio-spacing-md))}.studio-drawer__title{flex:1;margin:0;font-size:var(--studio-drawer-title-font-size, 1.25rem);font-weight:var(--studio-drawer-title-font-weight, var(--studio-font-weight-semibold, 600));line-height:var(--studio-drawer-title-line-height, 1.5);color:var(--studio-drawer-title-color, var(--studio-text-primary))}.studio-drawer__close{display:flex;align-items:center;justify-content:center;width:var(--studio-drawer-close-button-size, 2.5rem);height:var(--studio-drawer-close-button-size, 2.5rem);padding:0;background:none;border:none;border-radius:var(--studio-drawer-close-button-radius, var(--studio-radius-md));color:var(--studio-drawer-close-button-color, var(--studio-text-secondary));cursor:pointer;transition:all var(--studio-transition-fast);flex-shrink:0}.studio-drawer__close:hover{background:var(--studio-drawer-close-button-hover-bg, var(--studio-bg-secondary));color:var(--studio-drawer-close-button-hover-color, var(--studio-text-primary))}.studio-drawer__close:active{transform:scale(.95)}.studio-drawer__close:focus-visible{outline:2px solid var(--studio-drawer-focus-ring-color, var(--studio-primary));outline-offset:var(--studio-drawer-focus-ring-offset, 2px)}.studio-drawer__content{flex:1;padding:var(--studio-drawer-content-padding-y, var(--studio-spacing-lg)) var(--studio-drawer-content-padding-x, var(--studio-spacing-lg));overflow-y:auto;overflow-x:hidden}.studio-drawer__footer{flex-shrink:0;padding:var(--studio-drawer-footer-padding-y, var(--studio-spacing-md)) var(--studio-drawer-footer-padding-x, var(--studio-spacing-lg));border-top:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary));display:flex;align-items:center;gap:var(--studio-drawer-footer-gap, var(--studio-spacing-sm))}:host(.studio-drawer--dragging) .studio-drawer__panel{transition:none!important}@media (max-width: 640px){:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:100vw;max-width:none}.studio-drawer__header,.studio-drawer__content,.studio-drawer__footer{padding-left:var(--studio-spacing-md);padding-right:var(--studio-spacing-md)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { headerTemplate: [{ type: i0.ContentChild, args: ['headerTemplate', { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footerTemplate', { isSignal: true }] }], panelEl: [{ type: i0.ViewChild, args: ['drawerPanel', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], positionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], customHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "customHeight", required: false }] }], modalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], closeOnEscapeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClickInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], blockScrollInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockScroll", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], showHeaderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showCloseButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonPosition", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], swipeToCloseInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeToClose", required: false }] }], swipeThresholdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], animationDurationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], animationEasingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationEasing", required: false }] }], disableAnimationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimation", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], shadowSizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadowSize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], autoFocusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], restoreFocusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], roleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], backdropClick: [{ type: i0.Output, args: ["backdropClick"] }], handleEscapeKey: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -1765,6 +1863,465 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "@if (label() && !floatingLabel()) {\n  <label [for]=\"id() || generatedId\" class=\"studio-input__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-input__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-input__container\">\n    @if (prefixIcon()) {\n      <span class=\"studio-input__prefix\">\n        <studio-icon [name]=\"prefixIcon()!\" [size]=\"16\" />\n      </span>\n    }\n\n    @if (label() && floatingLabel()) {\n      <label [for]=\"id() || generatedId\" class=\"studio-input__label--floating\">\n        {{ label() }}\n        @if (required()) {\n          <span>*</span>\n        }\n      </label>\n    }\n\n    <input\n      #inputElement\n      class=\"studio-input__field\"\n      [type]=\"computedType()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"computedPlaceholder()\"\n      [required]=\"required()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [pattern]=\"pattern()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [name]=\"name()\"\n      [id]=\"id() || generatedId\"\n      [attr.aria-label]=\"ariaLabel() || (!label() ? placeholder() : null)\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"ariaDescribedByValue()\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown.enter)=\"handleEnter($event)\"\n    />\n\n    @if (loading()) {\n      <span class=\"studio-input__loading\">\n        <studio-icon name=\"loader-2\" [size]=\"16\" class=\"studio-icon--spin\" />\n      </span>\n    }\n\n    @if (clearable() && value() && !disabled() && !loading()) {\n      <button\n        type=\"button\"\n        class=\"studio-input__clear\"\n        (click)=\"handleClear()\"\n        [attr.aria-label]=\"'Clear input'\"\n        tabindex=\"-1\"\n      >\n        <studio-icon name=\"x\" [size]=\"14\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle() && !loading()) {\n      <button\n        type=\"button\"\n        class=\"studio-input__toggle-password\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"isPasswordVisible() ? 'Hide password' : 'Show password'\"\n        tabindex=\"-1\"\n      >\n        <studio-icon [name]=\"isPasswordVisible() ? 'eye-off' : 'eye'\" [size]=\"16\" />\n      </button>\n    }\n\n    @if (suffixIcon() && !loading() && !clearable() && !(type() === 'password' && showPasswordToggle())) {\n      <span class=\"studio-input__suffix\">\n        <studio-icon [name]=\"suffixIcon()!\" [size]=\"16\" />\n      </span>\n    }\n  </div>\n\n@if (hint() && !error()) {\n  <span class=\"studio-input__hint\" [id]=\"hintId\">\n    {{ hint() }}\n  </span>\n}\n\n@if (error() && errorMessage()) {\n  <span class=\"studio-input__error\" [id]=\"errorId\" role=\"alert\">\n    <studio-icon name=\"alert-circle\" [size]=\"14\" />\n    {{ errorMessage() }}\n  </span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family)}:host(.studio-input--full-width){width:100%}.studio-input__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-input__label .studio-input__required{color:var(--studio-error);margin-left:.125rem}.studio-input__container{position:relative;display:flex;align-items:center;transition:all var(--studio-transition-fast)}.studio-input__field{flex:1;width:100%;font-family:inherit;font-size:1rem;color:var(--studio-text-primary);background:transparent;border:none;outline:none;transition:all var(--studio-transition-fast)}.studio-input__field::placeholder{color:var(--studio-text-tertiary)}.studio-input__field:disabled{cursor:not-allowed;opacity:.6}.studio-input__field:read-only{cursor:default}.studio-input__prefix,.studio-input__suffix{display:flex;align-items:center;justify-content:center;color:var(--studio-text-secondary);flex-shrink:0}.studio-input__clear,.studio-input__toggle-password{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-sm);transition:all var(--studio-transition-fast);flex-shrink:0}.studio-input__clear:hover,.studio-input__toggle-password:hover{color:var(--studio-text-primary);background:var(--studio-bg-secondary)}.studio-input__clear:active,.studio-input__toggle-password:active{transform:scale(.95)}.studio-input__loading{display:flex;align-items:center;color:var(--studio-primary);flex-shrink:0}.studio-input__loading .studio-icon--spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-input__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-input__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}:host(.studio-input--outline) .studio-input__container{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-input--outline) .studio-input__container:hover:not(:has(.studio-input__field:disabled)){border-color:var(--studio-primary)}:host(.studio-input--outline.studio-input--focused) .studio-input__container{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-input--outline.studio-input--error) .studio-input__container{border-color:var(--studio-error)}:host(.studio-input--outline.studio-input--error) .studio-input__container:hover{border-color:var(--studio-error)}:host(.studio-input--outline.studio-input--error.studio-input--focused) .studio-input__container{box-shadow:0 0 0 3px #ef44441a}:host(.studio-input--outline.studio-input--disabled) .studio-input__container{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-input--filled) .studio-input__container{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-input--filled) .studio-input__container:hover:not(:has(.studio-input__field:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-input--filled.studio-input--focused) .studio-input__container{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-input--filled.studio-input--error) .studio-input__container{border-bottom-color:var(--studio-error)}:host(.studio-input--filled.studio-input--disabled) .studio-input__container{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-input--underline) .studio-input__container{background:transparent;border:none;border-bottom:1px solid var(--studio-border-primary);border-radius:0}:host(.studio-input--underline) .studio-input__container:hover:not(:has(.studio-input__field:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-input--underline.studio-input--focused) .studio-input__container{border-bottom:2px solid var(--studio-primary)}:host(.studio-input--underline.studio-input--error) .studio-input__container{border-bottom-color:var(--studio-error)}:host(.studio-input--underline.studio-input--disabled) .studio-input__container{border-bottom-style:dashed;opacity:.6}:host(.studio-input--sm) .studio-input__field{height:2rem;font-size:.875rem;padding:0 .75rem}:host(.studio-input--sm) .studio-input__prefix{padding-left:.75rem}:host(.studio-input--sm) .studio-input__suffix,:host(.studio-input--sm) .studio-input__clear,:host(.studio-input--sm) .studio-input__toggle-password,:host(.studio-input--sm) .studio-input__loading{padding-right:.5rem}:host(.studio-input--md) .studio-input__field{height:2.5rem;font-size:1rem;padding:0 1rem}:host(.studio-input--md) .studio-input__prefix{padding-left:1rem}:host(.studio-input--md) .studio-input__suffix,:host(.studio-input--md) .studio-input__clear,:host(.studio-input--md) .studio-input__toggle-password,:host(.studio-input--md) .studio-input__loading{padding-right:.75rem}:host(.studio-input--lg) .studio-input__field{height:3rem;font-size:1.125rem;padding:0 1.25rem}:host(.studio-input--lg) .studio-input__prefix{padding-left:1.25rem}:host(.studio-input--lg) .studio-input__suffix,:host(.studio-input--lg) .studio-input__clear,:host(.studio-input--lg) .studio-input__toggle-password,:host(.studio-input--lg) .studio-input__loading{padding-right:1rem}.studio-input__label--floating{position:absolute;top:50%;left:1rem;transform:translateY(-50%);font-size:1rem;color:var(--studio-text-tertiary);pointer-events:none;transition:all var(--studio-transition-fast);background:var(--studio-bg-primary);padding:0 .25rem}:host(.studio-input--filled) .studio-input__label--floating{background:transparent}:host(.studio-input--focused) .studio-input__label--floating,:host(.studio-input--has-value) .studio-input__label--floating{top:0;font-size:.75rem;color:var(--studio-primary)}:host(.studio-input--error) .studio-input__label--floating{color:var(--studio-error)}:host(.studio-input--radius-none) .studio-input__container{border-radius:0}:host(.studio-input--radius-sm) .studio-input__container{border-radius:var(--studio-radius-sm)}:host(.studio-input--radius-md) .studio-input__container{border-radius:var(--studio-radius-md)}:host(.studio-input--radius-lg) .studio-input__container{border-radius:var(--studio-radius-lg)}:host(.studio-input--radius-full) .studio-input__container{border-radius:9999px}:host(.studio-input--filled.studio-input--radius-none) .studio-input__container{border-radius:0}:host(.studio-input--filled.studio-input--radius-sm) .studio-input__container{border-radius:var(--studio-radius-sm) var(--studio-radius-sm) 0 0}:host(.studio-input--filled.studio-input--radius-md) .studio-input__container{border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-input--filled.studio-input--radius-lg) .studio-input__container{border-radius:var(--studio-radius-lg) var(--studio-radius-lg) 0 0}:host(.studio-input--filled.studio-input--radius-full) .studio-input__container{border-radius:9999px 9999px 0 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], entered: [{ type: i0.Output, args: ["entered"] }] } });
 
+/**
+ * Menu component - Primitive component for navigation menus
+ *
+ * @example
+ * <studio-menu
+ *   [items]="menuItems"
+ *   size="md"
+ *   variant="default"
+ *   (itemClick)="handleClick($event)"
+ * />
+ */
+class MenuComponent {
+    router = inject(Router, { optional: true });
+    platformId = inject(PLATFORM_ID);
+    // ========== Основные параметры ==========
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    // ========== Поведение ==========
+    mode = input('static', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    defaultExpanded = input([], ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : []));
+    expandOnHover = input(false, ...(ngDevMode ? [{ debugName: "expandOnHover" }] : []));
+    // ========== Навигация ==========
+    activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : []));
+    routerLinkActive = input(true, ...(ngDevMode ? [{ debugName: "routerLinkActive" }] : []));
+    selectOnNavigate = input(true, ...(ngDevMode ? [{ debugName: "selectOnNavigate" }] : []));
+    routerLinkActiveOptions = input({
+        paths: 'subset',
+        queryParams: 'subset',
+        fragment: 'ignored',
+        matrixParams: 'ignored'
+    }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
+    // ========== Клавиатурная навигация ==========
+    keyboardNavigation = input(true, ...(ngDevMode ? [{ debugName: "keyboardNavigation" }] : []));
+    arrowNavigation = input(true, ...(ngDevMode ? [{ debugName: "arrowNavigation" }] : []));
+    homeEndNavigation = input(true, ...(ngDevMode ? [{ debugName: "homeEndNavigation" }] : []));
+    // ========== Анимации ==========
+    animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : []));
+    animationDuration = input(200, ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
+    // ========== Доступность ==========
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    role = input('navigation', ...(ngDevMode ? [{ debugName: "role" }] : []));
+    // ========== Стилевые параметры ==========
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    color = input('inherit', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    spacing = input('sm', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
+    showDividers = input(false, ...(ngDevMode ? [{ debugName: "showDividers" }] : []));
+    // ========== Иконки ==========
+    iconSize = input(20, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
+    // ========== Подменю ==========
+    indentLevel = input(16, ...(ngDevMode ? [{ debugName: "indentLevel" }] : []));
+    showExpandIcon = input(true, ...(ngDevMode ? [{ debugName: "showExpandIcon" }] : []));
+    expandIconPosition = input('right', ...(ngDevMode ? [{ debugName: "expandIconPosition" }] : []));
+    expandIcon = input('chevron-down', ...(ngDevMode ? [{ debugName: "expandIcon" }] : []));
+    // ========== Кастомизация ==========
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    itemClass = input('', ...(ngDevMode ? [{ debugName: "itemClass" }] : []));
+    // ========== Internal state (for nested menus) ==========
+    level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+    parentExpanded = input(true, ...(ngDevMode ? [{ debugName: "parentExpanded" }] : []));
+    // ========== Outputs ==========
+    itemClick = output();
+    itemSelect = output();
+    expandChange = output();
+    activeChange = output();
+    // ========== Signals for state management ==========
+    expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedItems" }] : []));
+    activeItemId = signal(undefined, ...(ngDevMode ? [{ debugName: "activeItemId" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    flattenedItems = computed(() => this.flattenMenuItems(this.items()), ...(ngDevMode ? [{ debugName: "flattenedItems" }] : []));
+    // ========== Computed values ==========
+    hostClasses = computed(() => {
+        const classes = ['studio-menu'];
+        classes.push(`studio-menu--${this.orientation()}`);
+        classes.push(`studio-menu--${this.size()}`);
+        classes.push(`studio-menu--${this.variant()}`);
+        classes.push(`studio-menu--${this.mode()}`);
+        if (this.compact())
+            classes.push('studio-menu--compact');
+        if (this.fullWidth())
+            classes.push('studio-menu--full-width');
+        if (this.iconOnly())
+            classes.push('studio-menu--icon-only');
+        if (this.color() !== 'inherit')
+            classes.push(`studio-menu--${this.color()}`);
+        if (this.class())
+            classes.push(this.class());
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    constructor() {
+        // Initialize expanded items from defaultExpanded
+        effect(() => {
+            const defaultExp = this.defaultExpanded();
+            if (defaultExp.length > 0) {
+                this.expandedItems.set(new Set(defaultExp));
+            }
+        });
+        // Track active item
+        effect(() => {
+            const active = this.activeItem();
+            if (active) {
+                this.activeItemId.set(active);
+            }
+        });
+    }
+    ngOnInit() {
+        if (this.routerLinkActive() && this.router && isPlatformBrowser(this.platformId)) {
+            this.updateActiveFromRouter();
+        }
+    }
+    // ========== Item state methods ==========
+    isExpanded(item) {
+        if (!item.id)
+            return false;
+        return this.expandedItems().has(item.id);
+    }
+    isActive(item) {
+        // Check explicit active item
+        if (item.id && item.id === this.activeItemId()) {
+            return true;
+        }
+        // Router-based active state is handled by RouterLinkActive directive
+        return false;
+    }
+    isDisabled(item) {
+        return item.disabled === true;
+    }
+    isVisible(item) {
+        return item.visible !== false;
+    }
+    hasChildren(item) {
+        return !!(item.items && item.items.length > 0);
+    }
+    getItemId(item, index) {
+        return item.id || `menu-item-${this.level()}-${index}`;
+    }
+    // ========== Interaction methods ==========
+    handleItemClick(event, item) {
+        if (this.isDisabled(item) || item.separator) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        // Emit click event
+        this.itemClick.emit({ originalEvent: event, item });
+        // Execute command if provided
+        if (item.command) {
+            item.command({ originalEvent: event, item });
+        }
+        // Handle expansion for items with children
+        if (this.hasChildren(item) && this.collapsible()) {
+            event.preventDefault();
+            this.toggleExpand(item);
+        }
+        // Handle selection
+        if (this.selectOnNavigate() && item.id) {
+            this.activeItemId.set(item.id);
+            this.itemSelect.emit(item);
+            this.activeChange.emit(item.id);
+        }
+        // Navigation is handled by RouterLink directive if routerLink is set
+    }
+    handleItemMouseEnter(item) {
+        if (this.expandOnHover() && this.hasChildren(item) && !this.isDisabled(item)) {
+            this.expand(item);
+        }
+    }
+    handleItemMouseLeave(item) {
+        if (this.expandOnHover() && this.hasChildren(item)) {
+            this.collapse(item);
+        }
+    }
+    toggleExpand(item) {
+        if (!item.id)
+            return;
+        const expanded = this.expandedItems();
+        const newExpanded = new Set(expanded);
+        if (newExpanded.has(item.id)) {
+            newExpanded.delete(item.id);
+            this.expandChange.emit({ itemId: item.id, expanded: false });
+        }
+        else {
+            // In accordion mode, collapse others at the same level
+            if (this.mode() === 'accordion') {
+                this.items().forEach(i => {
+                    if (i.id && i.id !== item.id) {
+                        newExpanded.delete(i.id);
+                    }
+                });
+            }
+            newExpanded.add(item.id);
+            this.expandChange.emit({ itemId: item.id, expanded: true });
+        }
+        this.expandedItems.set(newExpanded);
+    }
+    expand(item) {
+        if (!item.id || this.isExpanded(item))
+            return;
+        const newExpanded = new Set(this.expandedItems());
+        newExpanded.add(item.id);
+        this.expandedItems.set(newExpanded);
+        this.expandChange.emit({ itemId: item.id, expanded: true });
+    }
+    collapse(item) {
+        if (!item.id || !this.isExpanded(item))
+            return;
+        const newExpanded = new Set(this.expandedItems());
+        newExpanded.delete(item.id);
+        this.expandedItems.set(newExpanded);
+        this.expandChange.emit({ itemId: item.id, expanded: false });
+    }
+    // ========== Keyboard navigation ==========
+    handleKeyDown(event) {
+        if (!this.keyboardNavigation())
+            return;
+        const items = this.flattenedItems();
+        const currentIndex = this.focusedIndex();
+        switch (event.key) {
+            case 'ArrowDown':
+                if (this.arrowNavigation() && this.orientation() === 'vertical') {
+                    event.preventDefault();
+                    this.focusNextItem(items, currentIndex);
+                }
+                break;
+            case 'ArrowUp':
+                if (this.arrowNavigation() && this.orientation() === 'vertical') {
+                    event.preventDefault();
+                    this.focusPreviousItem(items, currentIndex);
+                }
+                break;
+            case 'ArrowRight':
+                if (this.arrowNavigation()) {
+                    event.preventDefault();
+                    if (this.orientation() === 'horizontal') {
+                        this.focusNextItem(items, currentIndex);
+                    }
+                    else {
+                        this.expandFocusedItem(items, currentIndex);
+                    }
+                }
+                break;
+            case 'ArrowLeft':
+                if (this.arrowNavigation()) {
+                    event.preventDefault();
+                    if (this.orientation() === 'horizontal') {
+                        this.focusPreviousItem(items, currentIndex);
+                    }
+                    else {
+                        this.collapseFocusedItem(items, currentIndex);
+                    }
+                }
+                break;
+            case 'Home':
+                if (this.homeEndNavigation()) {
+                    event.preventDefault();
+                    this.focusedIndex.set(0);
+                }
+                break;
+            case 'End':
+                if (this.homeEndNavigation()) {
+                    event.preventDefault();
+                    this.focusedIndex.set(items.length - 1);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.activateFocusedItem(items, currentIndex);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.collapseAll();
+                break;
+        }
+    }
+    focusNextItem(items, currentIndex) {
+        const nextIndex = (currentIndex + 1) % items.length;
+        this.focusedIndex.set(nextIndex);
+    }
+    focusPreviousItem(items, currentIndex) {
+        const prevIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
+        this.focusedIndex.set(prevIndex);
+    }
+    expandFocusedItem(items, currentIndex) {
+        if (currentIndex >= 0 && currentIndex < items.length) {
+            const item = items[currentIndex];
+            if (this.hasChildren(item)) {
+                this.expand(item);
+            }
+        }
+    }
+    collapseFocusedItem(items, currentIndex) {
+        if (currentIndex >= 0 && currentIndex < items.length) {
+            const item = items[currentIndex];
+            if (this.hasChildren(item) && this.isExpanded(item)) {
+                this.collapse(item);
+            }
+        }
+    }
+    activateFocusedItem(items, currentIndex) {
+        if (currentIndex >= 0 && currentIndex < items.length) {
+            const item = items[currentIndex];
+            const fakeEvent = new Event('click');
+            this.handleItemClick(fakeEvent, item);
+        }
+    }
+    collapseAll() {
+        this.expandedItems.set(new Set());
+    }
+    // ========== Helper methods ==========
+    flattenMenuItems(items) {
+        const result = [];
+        const flatten = (itemList) => {
+            itemList.forEach(item => {
+                if (this.isVisible(item) && !item.separator) {
+                    result.push(item);
+                    if (item.items && this.isExpanded(item)) {
+                        flatten(item.items);
+                    }
+                }
+            });
+        };
+        flatten(items);
+        return result;
+    }
+    updateActiveFromRouter() {
+        if (!this.router)
+            return;
+        // This would require checking current route against menu items
+        // Implementation depends on routing setup
+        // For now, RouterLinkActive directive handles this
+    }
+    getIndentStyle(itemLevel = 0) {
+        const indent = this.level() + itemLevel;
+        if (indent === 0)
+            return {};
+        return {
+            'padding-left': `calc(var(--menu-padding) + ${indent * this.indentLevel()}px)`
+        };
+    }
+    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: [
+            trigger('expandCollapse', [
+                state('collapsed', style({
+                    height: '0',
+                    opacity: '0',
+                    overflow: 'hidden'
+                })),
+                state('expanded', style({
+                    height: '*',
+                    opacity: '1',
+                    overflow: 'visible'
+                })),
+                transition('collapsed <=> expanded', [
+                    animate('200ms ease-in-out')
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-menu', standalone: true, imports: [
+                        CommonModule,
+                        RouterLink,
+                        RouterLinkActive,
+                        IconComponent,
+                        BadgeComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-orientation]': 'orientation()'
+                    }, animations: [
+                        trigger('expandCollapse', [
+                            state('collapsed', style({
+                                height: '0',
+                                opacity: '0',
+                                overflow: 'hidden'
+                            })),
+                            state('expanded', style({
+                                height: '*',
+                                opacity: '1',
+                                overflow: 'visible'
+                            })),
+                            transition('collapsed <=> expanded', [
+                                animate('200ms ease-in-out')
+                            ])
+                        ])
+                    ], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], expandOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnHover", required: false }] }], activeItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItem", required: false }] }], routerLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActive", required: false }] }], selectOnNavigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnNavigate", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], keyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardNavigation", required: false }] }], arrowNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowNavigation", required: false }] }], homeEndNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeEndNavigation", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], showDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDividers", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], indentLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentLevel", required: false }] }], showExpandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandIcon", required: false }] }], expandIconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIconPosition", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], parentExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentExpanded", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], expandChange: [{ type: i0.Output, args: ["expandChange"] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }], handleKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Navbar component - Primitive component for navigation headers
+ *
+ * @example
+ * <studio-navbar variant="filled" [sticky]="true">
+ *   <div navbarLeft>Logo</div>
+ *   <div navbarCenter>Search</div>
+ *   <div navbarRight>User menu</div>
+ * </studio-navbar>
+ */
+class NavbarComponent {
+    // ========== Visual variants ==========
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    color = input('inherit', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    shadow = input('sm', ...(ngDevMode ? [{ debugName: "shadow" }] : []));
+    // ========== Size ==========
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    customHeight = input(null, ...(ngDevMode ? [{ debugName: "customHeight" }] : []));
+    // ========== Behavior ==========
+    sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : []));
+    blurBg = input(false, ...(ngDevMode ? [{ debugName: "blurBg" }] : []));
+    // ========== Borders ==========
+    bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
+    // ========== Customization ==========
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    // ========== Outputs ==========
+    navbarClick = output();
+    // ========== Computed classes ==========
+    hostClasses = computed(() => {
+        const classes = ['studio-navbar'];
+        classes.push(`studio-navbar--${this.variant()}`);
+        classes.push(`studio-navbar--${this.size()}`);
+        classes.push(`studio-navbar--shadow-${this.shadow()}`);
+        if (this.color() !== 'inherit')
+            classes.push(`studio-navbar--${this.color()}`);
+        if (this.sticky())
+            classes.push('studio-navbar--sticky');
+        if (this.blurBg())
+            classes.push('studio-navbar--blur');
+        if (this.bordered())
+            classes.push('studio-navbar--bordered');
+        if (this.class())
+            classes.push(this.class());
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    handleClick(event) {
+        this.navbarClick.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: NavbarComponent, isStandalone: true, selector: "studio-navbar", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customHeight: { classPropertyName: "customHeight", publicName: "customHeight", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, blurBg: { classPropertyName: "blurBg", publicName: "blurBg", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarClick: "navbarClick" }, host: { properties: { "class": "hostClasses()", "attr.role": "\"banner\"", "style.height": "customHeight() ? customHeight() + \"px\" : null" } }, ngImport: i0, template: "<div class=\"studio-navbar__left\">\n  <ng-content select=\"[navbarLeft]\" />\n</div>\n\n<div class=\"studio-navbar__center\">\n  <ng-content select=\"[navbarCenter]\" />\n</div>\n\n<div class=\"studio-navbar__right\">\n  <ng-content select=\"[navbarRight]\" />\n</div>\n\n<ng-content />\n", styles: [":host{display:flex;align-items:center;width:100%;min-height:var(--navbar-height, 4rem);padding:0 var(--navbar-padding-x, 1.5rem);gap:var(--navbar-gap, 1.5rem);background:var(--studio-bg-primary);transition:all .2s cubic-bezier(.4,0,.2,1);--navbar-height: 4rem;--navbar-padding-x: 1.5rem;--navbar-gap: 1.5rem;--navbar-z-index: 1000}:host(.studio-navbar--sm){--navbar-height: 3.5rem;--navbar-padding-x: 1rem;--navbar-gap: 1rem}:host(.studio-navbar--md){--navbar-height: 4rem;--navbar-padding-x: 1.5rem;--navbar-gap: 1.5rem}:host(.studio-navbar--lg){--navbar-height: 5rem;--navbar-padding-x: 2rem;--navbar-gap: 2rem}:host(.studio-navbar--sticky){position:sticky;top:0;z-index:var(--navbar-z-index)}:host(.studio-navbar--blur){-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);background:hsl(var(--studio-bg-primary-hsl)/.8)}:host(.studio-navbar--default){background:var(--studio-bg-primary);border-bottom:1px solid hsl(var(--studio-border-primary-hsl)/.1)}:host(.studio-navbar--filled){background:var(--studio-bg-secondary);border-bottom:1px solid var(--studio-border-secondary)}:host(.studio-navbar--outlined){background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-left:none;border-right:none}:host(.studio-navbar--ghost){background:transparent}:host(.studio-navbar--transparent){background:transparent}:host(.studio-navbar--primary){background:var(--studio-primary);color:var(--studio-primary-contrast);border-bottom:1px solid hsl(var(--studio-primary-hsl)/.2)}:host(.studio-navbar--secondary){background:var(--studio-secondary);color:var(--studio-secondary-contrast);border-bottom:1px solid hsl(var(--studio-secondary-hsl)/.2)}:host(.studio-navbar--bordered){border-bottom:1px solid var(--studio-border-secondary)}:host(.studio-navbar--shadow-none){box-shadow:none}:host(.studio-navbar--shadow-sm){box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}:host(.studio-navbar--shadow-md){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}:host(.studio-navbar--shadow-lg){box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.studio-navbar__left{display:flex;align-items:center;gap:var(--navbar-gap);flex-shrink:0}.studio-navbar__center{display:flex;align-items:center;justify-content:center;gap:calc(var(--navbar-gap) * .75);flex:1}.studio-navbar__right{display:flex;align-items:center;gap:calc(var(--navbar-gap) * .5);flex-shrink:0;margin-left:auto}@media (max-width: 768px){:host{--navbar-padding-x: 1rem;--navbar-gap: 1rem}.studio-navbar__center{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-navbar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': '"banner"',
+                        '[style.height]': 'customHeight() ? customHeight() + "px" : null'
+                    }, template: "<div class=\"studio-navbar__left\">\n  <ng-content select=\"[navbarLeft]\" />\n</div>\n\n<div class=\"studio-navbar__center\">\n  <ng-content select=\"[navbarCenter]\" />\n</div>\n\n<div class=\"studio-navbar__right\">\n  <ng-content select=\"[navbarRight]\" />\n</div>\n\n<ng-content />\n", styles: [":host{display:flex;align-items:center;width:100%;min-height:var(--navbar-height, 4rem);padding:0 var(--navbar-padding-x, 1.5rem);gap:var(--navbar-gap, 1.5rem);background:var(--studio-bg-primary);transition:all .2s cubic-bezier(.4,0,.2,1);--navbar-height: 4rem;--navbar-padding-x: 1.5rem;--navbar-gap: 1.5rem;--navbar-z-index: 1000}:host(.studio-navbar--sm){--navbar-height: 3.5rem;--navbar-padding-x: 1rem;--navbar-gap: 1rem}:host(.studio-navbar--md){--navbar-height: 4rem;--navbar-padding-x: 1.5rem;--navbar-gap: 1.5rem}:host(.studio-navbar--lg){--navbar-height: 5rem;--navbar-padding-x: 2rem;--navbar-gap: 2rem}:host(.studio-navbar--sticky){position:sticky;top:0;z-index:var(--navbar-z-index)}:host(.studio-navbar--blur){-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);background:hsl(var(--studio-bg-primary-hsl)/.8)}:host(.studio-navbar--default){background:var(--studio-bg-primary);border-bottom:1px solid hsl(var(--studio-border-primary-hsl)/.1)}:host(.studio-navbar--filled){background:var(--studio-bg-secondary);border-bottom:1px solid var(--studio-border-secondary)}:host(.studio-navbar--outlined){background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-left:none;border-right:none}:host(.studio-navbar--ghost){background:transparent}:host(.studio-navbar--transparent){background:transparent}:host(.studio-navbar--primary){background:var(--studio-primary);color:var(--studio-primary-contrast);border-bottom:1px solid hsl(var(--studio-primary-hsl)/.2)}:host(.studio-navbar--secondary){background:var(--studio-secondary);color:var(--studio-secondary-contrast);border-bottom:1px solid hsl(var(--studio-secondary-hsl)/.2)}:host(.studio-navbar--bordered){border-bottom:1px solid var(--studio-border-secondary)}:host(.studio-navbar--shadow-none){box-shadow:none}:host(.studio-navbar--shadow-sm){box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}:host(.studio-navbar--shadow-md){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}:host(.studio-navbar--shadow-lg){box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.studio-navbar__left{display:flex;align-items:center;gap:var(--navbar-gap);flex-shrink:0}.studio-navbar__center{display:flex;align-items:center;justify-content:center;gap:calc(var(--navbar-gap) * .75);flex:1}.studio-navbar__right{display:flex;align-items:center;gap:calc(var(--navbar-gap) * .5);flex-shrink:0;margin-left:auto}@media (max-width: 768px){:host{--navbar-padding-x: 1rem;--navbar-gap: 1rem}.studio-navbar__center{display:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], customHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "customHeight", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], blurBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurBg", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], navbarClick: [{ type: i0.Output, args: ["navbarClick"] }] } });
+
 class SelectComponent {
     configService = inject(StudioConfigService);
     selectDefaults = computed(() => this.configService.config().components?.select, ...(ngDevMode ? [{ debugName: "selectDefaults" }] : []));
@@ -2040,6 +2597,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "@if (label() && !floatingLabel()) {\n  <label [for]=\"generatedId\" class=\"studio-select__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-select__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-select__control\">\n  @if (prefixIcon()) {\n    <span class=\"studio-select__prefix\">\n      <studio-icon [name]=\"prefixIcon()!\" [size]=\"16\" />\n    </span>\n  }\n\n  @if (label() && floatingLabel()) {\n    <label [for]=\"generatedId\" class=\"studio-select__label--floating\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"studio-select__required\">*</span>\n      }\n    </label>\n  }\n\n  <button\n    #triggerButton\n    type=\"button\"\n    [id]=\"generatedId\"\n    class=\"studio-select__trigger\"\n    [disabled]=\"disabled() || loading()\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"isFocused.set(true)\"\n    (blur)=\"isFocused.set(false)\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n  >\n    @if (hasValue()) {\n      <span class=\"studio-select__value\">{{ displayValue() }}</span>\n    } @else {\n      <span class=\"studio-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </button>\n\n  @if (clearable() && hasValue() && !disabled() && !loading()) {\n    <button\n      type=\"button\"\n      class=\"studio-select__clear\"\n      (click)=\"clear($event)\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n    >\n      <studio-icon name=\"x\" [size]=\"14\" />\n    </button>\n  }\n\n  @if (loading()) {\n    <span class=\"studio-select__loading\">\n      <studio-icon name=\"loader-2\" [size]=\"16\" class=\"studio-icon--spin\" />\n    </span>\n  } @else {\n    <span class=\"studio-select__suffix\">\n      <studio-icon\n        [name]=\"suffixIcon()\"\n        [size]=\"16\"\n      />\n    </span>\n  }\n</div>\n\n@if (isOpen()) {\n  <div\n    #dropdownPanel\n    class=\"studio-select__dropdown\"\n    [attr.data-position]=\"position()\"\n    [style.max-height]=\"maxHeight()\"\n  >\n    @if (searchable()) {\n      <div class=\"studio-select__search\">\n        <input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"handleSearch($event)\"\n        />\n      </div>\n    }\n\n    <div class=\"studio-select__options\" role=\"listbox\">\n      @if (filteredOptions().length === 0) {\n        <div class=\"studio-select__empty\">\n          No options found\n        </div>\n      }\n\n      @for (option of filteredOptions(); track option.value; let idx = $index) {\n        <div\n          class=\"studio-select__option\"\n          [class.studio-select__option--selected]=\"isSelected(option)\"\n          [class.studio-select__option--disabled]=\"option.disabled\"\n          [class.studio-select__option--highlighted]=\"highlightedIndex() === idx\"\n          (click)=\"selectOption(option)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(option)\"\n        >\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              class=\"studio-select__checkbox\"\n              [checked]=\"isSelected(option)\"\n              [disabled]=\"option.disabled\"\n              tabindex=\"-1\"\n            />\n          }\n\n          @if (option.icon) {\n            <studio-icon [name]=\"option.icon\" [size]=\"18\" class=\"studio-select__option-icon\" />\n          }\n\n          <div class=\"studio-select__option-content\">\n            <div class=\"studio-select__option-label\">\n              {{ option.label }}\n            </div>\n            @if (option.description) {\n              <div class=\"studio-select__option-description\">\n                {{ option.description }}\n              </div>\n            }\n          </div>\n\n          @if (!multiple() && isSelected(option)) {\n            <studio-icon name=\"check\" [size]=\"16\" class=\"studio-select__check-icon\" />\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (hint() && !error()) {\n  <div class=\"studio-select__hint\">{{ hint() }}</div>\n}\n\n@if (error() && errorMessage()) {\n  <div class=\"studio-select__error\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family);position:relative}:host(.studio-select--full-width){width:100%}.studio-select__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-select__label .studio-select__required{color:var(--studio-error);margin-left:.125rem}.studio-select__control{position:relative;display:flex;align-items:center;transition:all var(--studio-transition-fast)}.studio-select__prefix,.studio-select__suffix{display:flex;align-items:center;justify-content:center;color:var(--studio-text-secondary);flex-shrink:0}.studio-select__suffix{transition:var(--studio-transition-fast)}:host(.studio-select--open) .studio-select__suffix{transform:rotate(180deg)}.studio-select__trigger{flex:1;width:100%;display:flex;align-items:center;background:transparent;border:none;padding:0;font-family:inherit;text-align:left;color:var(--studio-text-primary);cursor:pointer;outline:none;transition:var(--studio-transition-fast)}.studio-select__trigger:disabled{cursor:not-allowed;opacity:.6}.studio-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--studio-text-primary)}.studio-select__placeholder{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--studio-text-tertiary)}.studio-select__clear,.studio-select__loading{display:flex;align-items:center;justify-content:center;flex-shrink:0}.studio-select__clear{background:none;border:none;padding:.25rem;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-sm);transition:all var(--studio-transition-fast)}.studio-select__clear:hover{color:var(--studio-text-primary);background:var(--studio-bg-secondary)}.studio-select__clear:active{transform:scale(.95)}.studio-select__loading{color:var(--studio-primary)}.studio-select__loading .studio-icon--spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--studio-z-dropdown, 1000);background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-lg);margin-top:.25rem;overflow:hidden;display:flex;flex-direction:column}.studio-select__search{padding:.5rem;border-bottom:1px solid var(--studio-border-primary);flex-shrink:0}.studio-select__search input{width:100%;padding:.5rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-sm);font-family:inherit;font-size:.875rem;color:var(--studio-text-primary);background:var(--studio-bg-primary);outline:none;transition:var(--studio-transition-fast)}.studio-select__search input:focus{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}.studio-select__search input::placeholder{color:var(--studio-text-tertiary)}.studio-select__options{overflow-y:auto;flex:1}.studio-select__option{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;cursor:pointer;transition:var(--studio-transition-fast);color:var(--studio-text-primary)}.studio-select__option:hover{background:var(--studio-bg-secondary)}.studio-select__option--selected{background:var(--studio-primary-bg);color:var(--studio-primary)}.studio-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.studio-select__option input[type=checkbox]{margin:0;cursor:pointer}.studio-select__option-icon{flex-shrink:0;color:var(--studio-text-secondary)}.studio-select__option-content{flex:1;min-width:0}.studio-select__option-label{font-size:.875rem;color:inherit}.studio-select__option-description{font-size:.75rem;color:var(--studio-text-secondary);margin-top:.125rem}.studio-select__empty{padding:1rem;text-align:center;color:var(--studio-text-tertiary);font-size:.875rem}.studio-select__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-select__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}.studio-select__label--floating{position:absolute;top:50%;left:1rem;transform:translateY(-50%);font-size:1rem;color:var(--studio-text-tertiary);pointer-events:none;transition:all var(--studio-transition-fast);background:var(--studio-bg-primary);padding:0 .25rem;z-index:1}:host(.studio-select--focused) .studio-select__label--floating,:host(.studio-select--has-value) .studio-select__label--floating{top:0;font-size:.75rem;color:var(--studio-primary)}:host(.studio-select--error) .studio-select__label--floating{color:var(--studio-error)}:host(.studio-select--outline) .studio-select__control{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-select--outline) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){border-color:var(--studio-primary)}:host(.studio-select--outline.studio-select--focused) .studio-select__control{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-select--outline.studio-select--error) .studio-select__control{border-color:var(--studio-error)}:host(.studio-select--outline.studio-select--error) .studio-select__control:hover{border-color:var(--studio-error)}:host(.studio-select--outline.studio-select--error.studio-select--focused) .studio-select__control{box-shadow:0 0 0 3px #ef44441a}:host(.studio-select--outline.studio-select--disabled) .studio-select__control{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-select--filled) .studio-select__control{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-select--filled) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-select--filled.studio-select--focused) .studio-select__control{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-select--filled.studio-select--error) .studio-select__control{border-bottom-color:var(--studio-error)}:host(.studio-select--filled.studio-select--disabled) .studio-select__control{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-select--underline) .studio-select__control{background:transparent;border:none;border-bottom:1px solid var(--studio-border-primary);border-radius:0}:host(.studio-select--underline) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-select--underline.studio-select--focused) .studio-select__control{border-bottom:2px solid var(--studio-primary)}:host(.studio-select--underline.studio-select--error) .studio-select__control{border-bottom-color:var(--studio-error)}:host(.studio-select--underline.studio-select--disabled) .studio-select__control{border-bottom-style:dashed;opacity:.6}:host(.studio-select--sm) .studio-select__trigger{height:2rem;font-size:.875rem;padding:0 .75rem}:host(.studio-select--sm) .studio-select__prefix{padding-left:.75rem}:host(.studio-select--sm) .studio-select__suffix,:host(.studio-select--sm) .studio-select__clear,:host(.studio-select--sm) .studio-select__loading{padding-right:.5rem}:host(.studio-select--md) .studio-select__trigger{height:2.5rem;font-size:1rem;padding:0 1rem}:host(.studio-select--md) .studio-select__prefix{padding-left:1rem}:host(.studio-select--md) .studio-select__suffix,:host(.studio-select--md) .studio-select__clear,:host(.studio-select--md) .studio-select__loading{padding-right:.75rem}:host(.studio-select--lg) .studio-select__trigger{height:3rem;font-size:1.125rem;padding:0 1.25rem}:host(.studio-select--lg) .studio-select__prefix{padding-left:1.25rem}:host(.studio-select--lg) .studio-select__suffix,:host(.studio-select--lg) .studio-select__clear,:host(.studio-select--lg) .studio-select__loading{padding-right:1rem}:host(.studio-select--radius-none) .studio-select__control{border-radius:0}:host(.studio-select--radius-sm) .studio-select__control{border-radius:var(--studio-radius-sm)}:host(.studio-select--radius-md) .studio-select__control{border-radius:var(--studio-radius-md)}:host(.studio-select--radius-lg) .studio-select__control{border-radius:var(--studio-radius-lg)}:host(.studio-select--radius-full) .studio-select__control{border-radius:9999px}:host(.studio-select--filled.studio-select--radius-none) .studio-select__control{border-radius:0}:host(.studio-select--filled.studio-select--radius-sm) .studio-select__control{border-radius:var(--studio-radius-sm) var(--studio-radius-sm) 0 0}:host(.studio-select--filled.studio-select--radius-md) .studio-select__control{border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-select--filled.studio-select--radius-lg) .studio-select__control{border-radius:var(--studio-radius-lg) var(--studio-radius-lg) 0 0}:host(.studio-select--filled.studio-select--radius-full) .studio-select__control{border-radius:9999px 9999px 0 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], dropdownEl: [{ type: i0.ViewChild, args: ['dropdownPanel', { isSignal: true }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
 
+/**
+ * Sidebar component - Navigation sidebar built on top of Drawer
+ *
+ * @example
+ * <studio-sidebar [(visible)]="sidebarOpen">
+ *   <nav sidebarHeader>
+ *     <h2>Navigation</h2>
+ *   </nav>
+ *
+ *   <studio-menu>
+ *     <studio-menu-item>Home</studio-menu-item>
+ *     <studio-menu-item>About</studio-menu-item>
+ *   </studio-menu>
+ *
+ *   <div sidebarFooter>
+ *     <studio-button>Logout</studio-button>
+ *   </div>
+ * </studio-sidebar>
+ */
+class SidebarComponent {
+    router = inject(Router, { optional: true });
+    configService = inject(StudioConfigService);
+    sidebarDefaults = computed(() => this.configService.config().components?.sidebar, ...(ngDevMode ? [{ debugName: "sidebarDefaults" }] : []));
+    // Core
+    id = input(`studio-sidebar-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    // Position & Size
+    positionInput = input(undefined, ...(ngDevMode ? [{ debugName: "positionInput", alias: 'position' }] : [{ alias: 'position' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    customWidth = input(undefined, ...(ngDevMode ? [{ debugName: "customWidth" }] : []));
+    position = withConfigDefault(this.positionInput, computed(() => this.sidebarDefaults()?.position), 'left');
+    size = withConfigDefault(this.sizeInput, computed(() => this.sidebarDefaults()?.size), 'md');
+    variant = withConfigDefault(this.variantInput, computed(() => this.sidebarDefaults()?.variant), 'default');
+    // Behavior
+    modalInput = input(undefined, ...(ngDevMode ? [{ debugName: "modalInput", alias: 'modal' }] : [{ alias: 'modal' }]));
+    collapsibleInput = input(undefined, ...(ngDevMode ? [{ debugName: "collapsibleInput", alias: 'collapsible' }] : [{ alias: 'collapsible' }]));
+    defaultCollapsedInput = input(undefined, ...(ngDevMode ? [{ debugName: "defaultCollapsedInput", alias: 'defaultCollapsed' }] : [{ alias: 'defaultCollapsed' }]));
+    closeOnNavigateInput = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnNavigateInput", alias: 'closeOnNavigate' }] : [{ alias: 'closeOnNavigate' }]));
+    closeOnBackdropClickInput = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnBackdropClickInput", alias: 'closeOnBackdropClick' }] : [{ alias: 'closeOnBackdropClick' }]));
+    closeOnEscapeInput = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnEscapeInput", alias: 'closeOnEscape' }] : [{ alias: 'closeOnEscape' }]));
+    blockScrollInput = input(undefined, ...(ngDevMode ? [{ debugName: "blockScrollInput", alias: 'blockScroll' }] : [{ alias: 'blockScroll' }]));
+    swipeToCloseInput = input(undefined, ...(ngDevMode ? [{ debugName: "swipeToCloseInput", alias: 'swipeToClose' }] : [{ alias: 'swipeToClose' }]));
+    modal = withConfigDefault(this.modalInput, computed(() => this.sidebarDefaults()?.modal), true);
+    collapsible = withConfigDefault(this.collapsibleInput, computed(() => this.sidebarDefaults()?.collapsible), false);
+    defaultCollapsed = withConfigDefault(this.defaultCollapsedInput, computed(() => this.sidebarDefaults()?.defaultCollapsed), false);
+    closeOnNavigate = withConfigDefault(this.closeOnNavigateInput, computed(() => this.sidebarDefaults()?.closeOnNavigate), true);
+    closeOnBackdropClick = withConfigDefault(this.closeOnBackdropClickInput, computed(() => this.sidebarDefaults()?.closeOnBackdropClick), true);
+    closeOnEscape = withConfigDefault(this.closeOnEscapeInput, computed(() => this.sidebarDefaults()?.closeOnEscape), true);
+    blockScroll = withConfigDefault(this.blockScrollInput, computed(() => this.sidebarDefaults()?.blockScroll), true);
+    swipeToClose = withConfigDefault(this.swipeToCloseInput, computed(() => this.sidebarDefaults()?.swipeToClose), true);
+    // UI Elements
+    header = input(undefined, ...(ngDevMode ? [{ debugName: "header" }] : []));
+    showHeaderInput = input(undefined, ...(ngDevMode ? [{ debugName: "showHeaderInput", alias: 'showHeader' }] : [{ alias: 'showHeader' }]));
+    showFooterInput = input(undefined, ...(ngDevMode ? [{ debugName: "showFooterInput", alias: 'showFooter' }] : [{ alias: 'showFooter' }]));
+    showCloseButtonInput = input(undefined, ...(ngDevMode ? [{ debugName: "showCloseButtonInput", alias: 'showCloseButton' }] : [{ alias: 'showCloseButton' }]));
+    showHeader = withConfigDefault(this.showHeaderInput, computed(() => this.sidebarDefaults()?.showHeader), true);
+    showFooter = withConfigDefault(this.showFooterInput, computed(() => this.sidebarDefaults()?.showFooter), true);
+    showCloseButton = withConfigDefault(this.showCloseButtonInput, computed(() => this.sidebarDefaults()?.showCloseButton), true);
+    // Content Customization
+    contentPadding = input(undefined, ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
+    contentGap = input(undefined, ...(ngDevMode ? [{ debugName: "contentGap" }] : []));
+    background = input(undefined, ...(ngDevMode ? [{ debugName: "background" }] : []));
+    // Customization
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    // ========== Computed values ==========
+    hostClasses = computed(() => {
+        const classes = ['studio-sidebar'];
+        classes.push(`studio-sidebar--${this.position()}`);
+        classes.push(`studio-sidebar--${this.size()}`);
+        classes.push(`studio-sidebar--${this.variant()}`);
+        if (this.collapsible())
+            classes.push('studio-sidebar--collapsible');
+        if (this.class())
+            classes.push(this.class());
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    drawerSize = computed(() => {
+        const currentSize = this.size();
+        const sizeMap = {
+            'sm': 'sm',
+            'md': 'md',
+            'lg': 'lg',
+            'full': 'full'
+        };
+        return sizeMap[currentSize];
+    }, ...(ngDevMode ? [{ debugName: "drawerSize" }] : []));
+    constructor() {
+        // Close sidebar on navigation if enabled
+        if (this.router && this.closeOnNavigate()) {
+            effect(() => {
+                const subscription = this.router.events
+                    .pipe(filter(event => event instanceof NavigationEnd))
+                    .subscribe(() => {
+                    if (this.closeOnNavigate() && this.visible()) {
+                        this.visible.set(false);
+                    }
+                });
+                return () => subscription.unsubscribe();
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: SidebarComponent, isStandalone: true, selector: "studio-sidebar", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, positionInput: { classPropertyName: "positionInput", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, modalInput: { classPropertyName: "modalInput", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, collapsibleInput: { classPropertyName: "collapsibleInput", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, defaultCollapsedInput: { classPropertyName: "defaultCollapsedInput", publicName: "defaultCollapsed", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigateInput: { classPropertyName: "closeOnNavigateInput", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClickInput: { classPropertyName: "closeOnBackdropClickInput", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscapeInput: { classPropertyName: "closeOnEscapeInput", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, blockScrollInput: { classPropertyName: "blockScrollInput", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, swipeToCloseInput: { classPropertyName: "swipeToCloseInput", publicName: "swipeToClose", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, showHeaderInput: { classPropertyName: "showHeaderInput", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showFooterInput: { classPropertyName: "showFooterInput", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCloseButtonInput: { classPropertyName: "showCloseButtonInput", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, contentGap: { classPropertyName: "contentGap", publicName: "contentGap", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<studio-drawer\n  [visible]=\"visible()\"\n  (visibleChange)=\"visible.set($event)\"\n  [position]=\"position()\"\n  [size]=\"drawerSize()\"\n  [modal]=\"modal()\"\n  [closeOnBackdropClick]=\"closeOnBackdropClick()\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [showHeader]=\"showHeader()\"\n  [header]=\"header()\"\n  [showCloseButton]=\"showCloseButton()\"\n  [showFooter]=\"showFooter()\"\n  [swipeToClose]=\"swipeToClose()\"\n  [customWidth]=\"customWidth()\"\n>\n  <ng-content select=\"[sidebarHeader]\" drawerHeader />\n\n  <div\n    class=\"studio-sidebar__content\"\n    [class]=\"'studio-sidebar__content--' + variant()\"\n    [style.padding]=\"contentPadding()\"\n    [style.gap]=\"contentGap()\"\n    [style.background]=\"background()\">\n    <ng-content />\n  </div>\n\n  <ng-content select=\"[sidebarFooter]\" drawerFooter />\n</studio-drawer>\n", styles: [":host{display:contents}.studio-sidebar__content{display:flex;flex-direction:column;height:100%;gap:var(--studio-spacing-md, 1rem);padding:var(--studio-spacing-md, 1rem)}.studio-sidebar__content--default{padding:var(--studio-spacing-lg, 1.5rem);gap:var(--studio-spacing-lg, 1.5rem)}.studio-sidebar__content--minimal{padding:var(--studio-spacing-sm, .5rem);gap:var(--studio-spacing-sm, .5rem)}.studio-sidebar__content--compact{padding:var(--studio-spacing-xs, .25rem);gap:var(--studio-spacing-xs, .25rem)}\n"], dependencies: [{ kind: "component", type: DrawerComponent, selector: "studio-drawer", inputs: ["id", "visible", "position", "size", "customWidth", "customHeight", "modal", "closeOnEscape", "closeOnBackdropClick", "blockScroll", "header", "showHeader", "showCloseButton", "closeButtonPosition", "showFooter", "swipeToClose", "swipeThreshold", "animationDuration", "animationEasing", "disableAnimation", "radius", "shadow", "shadowSize", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "autoFocus", "restoreFocus", "role"], outputs: ["visibleChange", "opened", "closed", "backdropClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-sidebar', standalone: true, imports: [DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "<studio-drawer\n  [visible]=\"visible()\"\n  (visibleChange)=\"visible.set($event)\"\n  [position]=\"position()\"\n  [size]=\"drawerSize()\"\n  [modal]=\"modal()\"\n  [closeOnBackdropClick]=\"closeOnBackdropClick()\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [showHeader]=\"showHeader()\"\n  [header]=\"header()\"\n  [showCloseButton]=\"showCloseButton()\"\n  [showFooter]=\"showFooter()\"\n  [swipeToClose]=\"swipeToClose()\"\n  [customWidth]=\"customWidth()\"\n>\n  <ng-content select=\"[sidebarHeader]\" drawerHeader />\n\n  <div\n    class=\"studio-sidebar__content\"\n    [class]=\"'studio-sidebar__content--' + variant()\"\n    [style.padding]=\"contentPadding()\"\n    [style.gap]=\"contentGap()\"\n    [style.background]=\"background()\">\n    <ng-content />\n  </div>\n\n  <ng-content select=\"[sidebarFooter]\" drawerFooter />\n</studio-drawer>\n", styles: [":host{display:contents}.studio-sidebar__content{display:flex;flex-direction:column;height:100%;gap:var(--studio-spacing-md, 1rem);padding:var(--studio-spacing-md, 1rem)}.studio-sidebar__content--default{padding:var(--studio-spacing-lg, 1.5rem);gap:var(--studio-spacing-lg, 1.5rem)}.studio-sidebar__content--minimal{padding:var(--studio-spacing-sm, .5rem);gap:var(--studio-spacing-sm, .5rem)}.studio-sidebar__content--compact{padding:var(--studio-spacing-xs, .25rem);gap:var(--studio-spacing-xs, .25rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], positionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], modalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], collapsibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], defaultCollapsedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCollapsed", required: false }] }], closeOnNavigateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigate", required: false }] }], closeOnBackdropClickInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscapeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], blockScrollInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockScroll", required: false }] }], swipeToCloseInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeToClose", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], showHeaderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showFooterInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showCloseButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], contentGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentGap", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Sidebar component types
+ */
+
+/**
+ * Sidebar component
+ */
+
 /**
  * Toggle switch component with customizable size and color
  *
@@ -3195,5 +3872,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, DrawerComponent, DrawerService, IconComponent, InputComponent, MASK_PRESETS, MaskDirective, MaskEngine, STUDIO_CONFIG, SelectComponent, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, DrawerComponent, DrawerService, IconComponent, InputComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, NavbarComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map