@eduboxpro/studio 0.1.2 → 0.1.3

package/fesm2022/eduboxpro-studio.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, model } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import * as i1 from 'lucide-angular';
-import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, 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 { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, 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';
 
 /**
  * Injection token for Studio configuration
@@ -19,7 +19,7 @@ class StudioConfigService {
     constructor() {
         effect(() => {
             this.applyTheme(this.config().theme);
-        }, { allowSignalWrites: false });
+        });
     }
     configure(config) {
         this.config.set(config);
@@ -35,29 +35,23 @@ class StudioConfigService {
         const newMode = this.themeMode() === 'light' ? 'dark' : 'light';
         this.setThemeMode(newMode);
     }
-    async loadFromBackend(organizationSlug) {
-        try {
-            const response = await fetch(`/api/organizations/${organizationSlug}/design-config`);
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const config = await response.json();
-            this.configure(config);
-        }
-        catch (error) {
-            console.error('[Studio] Failed to load config from backend:', error);
-            throw error;
-        }
+    updateTheme(theme) {
+        this.config.update(cfg => ({
+            ...cfg,
+            theme: { ...cfg.theme, ...theme }
+        }));
+    }
+    reset() {
+        this.config.set({});
+        this.setThemeMode('light');
     }
     applyTheme(theme) {
         if (!theme)
             return;
         const root = this.document.documentElement;
-        // Apply colors
         if (theme.colors) {
             this.applyColorTokens(root, theme.colors);
         }
-        // Apply typography
         if (theme.typography) {
             if (theme.typography.fontFamily) {
                 root.style.setProperty('--studio-font-family', theme.typography.fontFamily);
@@ -75,29 +69,23 @@ class StudioConfigService {
                 this.applyTokens(root, 'studio-line-height', theme.typography.lineHeight);
             }
         }
-        // Apply spacing
         if (theme.spacing) {
             this.applyTokens(root, 'studio-spacing', theme.spacing);
         }
-        // Apply border radius
         if (theme.borderRadius) {
             this.applyTokens(root, 'studio-radius', theme.borderRadius);
         }
-        // Apply shadows
         if (theme.shadows) {
             this.applyTokens(root, 'studio-shadow', theme.shadows);
         }
-        // Apply transitions
         if (theme.transitions) {
             this.applyTokens(root, 'studio-transition', theme.transitions);
         }
-        // Apply z-index
         if (theme.zIndex) {
             this.applyZIndexTokens(root, theme.zIndex);
         }
     }
     applyColorTokens(root, colors) {
-        // Brand colors with hover/active states
         const brandColors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
         brandColors.forEach(colorName => {
             const colorValue = colors[colorName];
@@ -122,15 +110,12 @@ class StudioConfigService {
                 }
             }
         });
-        // Background colors
         if (colors.bg) {
             this.applyTokens(root, 'studio-bg', colors.bg);
         }
-        // Text colors
         if (colors.text) {
             this.applyTokens(root, 'studio-text', colors.text);
         }
-        // Border colors
         if (colors.border) {
             this.applyTokens(root, 'studio-border', colors.border);
         }
@@ -212,17 +197,48 @@ function provideStudioConfig(config = {}) {
  * @module config
  */
 
+/**
+ * Icon component with Lucide icons support
+ *
+ * @example
+ * <studio-icon name="check" size="24" color="primary" />
+ */
 class IconComponent {
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     size = input(24, ...(ngDevMode ? [{ debugName: "size" }] : []));
     color = input('inherit', ...(ngDevMode ? [{ debugName: "color" }] : []));
     strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
     absoluteStrokeWidth = input(false, ...(ngDevMode ? [{ debugName: "absoluteStrokeWidth" }] : []));
+    showFallback = input(true, ...(ngDevMode ? [{ debugName: "showFallback" }] : []));
+    fallbackIcon = input('help-circle', ...(ngDevMode ? [{ debugName: "fallbackIcon" }] : []));
     icons = icons;
     lucideIcon = computed(() => {
         const iconName = this.name();
-        return iconName;
+        if (iconName && icons[iconName]) {
+            return iconName;
+        }
+        const pascalCaseName = this.kebabToPascalCase(iconName);
+        if (pascalCaseName && icons[pascalCaseName]) {
+            return pascalCaseName;
+        }
+        if (this.showFallback()) {
+            const fallback = this.fallbackIcon();
+            if (icons[fallback]) {
+                return fallback;
+            }
+            const pascalCaseFallback = this.kebabToPascalCase(fallback);
+            if (pascalCaseFallback && icons[pascalCaseFallback]) {
+                return pascalCaseFallback;
+            }
+        }
+        return null;
     }, ...(ngDevMode ? [{ debugName: "lucideIcon" }] : []));
+    kebabToPascalCase(str) {
+        return str
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
+    }
     computedColor = computed(() => {
         const colorValue = this.color();
         const colorMap = {
@@ -239,7 +255,7 @@ class IconComponent {
         return ['studio-icon'];
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: IconComponent, isStandalone: true, selector: "studio-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, absoluteStrokeWidth: { classPropertyName: "absoluteStrokeWidth", publicName: "absoluteStrokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.width.px": "size()", "style.height.px": "size()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: IconComponent, isStandalone: true, selector: "studio-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, absoluteStrokeWidth: { classPropertyName: "absoluteStrokeWidth", publicName: "absoluteStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showFallback: { classPropertyName: "showFallback", publicName: "showFallback", isSignal: true, isRequired: false, transformFunction: null }, fallbackIcon: { classPropertyName: "fallbackIcon", publicName: "fallbackIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.width.px": "size()", "style.height.px": "size()" } }, ngImport: i0, template: `
     @if (lucideIcon(); as iconName) {
       <lucide-icon
         [name]="iconName"
@@ -268,11 +284,11 @@ 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 }] }] } });
+        }], 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 }] }] } });
 
 /**
- * Провайдер иконок для Studio
- * Регистрирует базовый набор часто используемых иконок
+ * Studio icon provider
+ * Registers commonly used Lucide icons
  *
  * @example
  * ```typescript
@@ -286,7 +302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * };
  * ```
  *
- * Для добавления дополнительных иконок:
+ * To add additional icons:
  * @example
  * ```typescript
  * import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
@@ -363,17 +379,19 @@ function provideStudioIcons() {
                 RotateCw,
                 Loader,
                 Loader2,
-                ShoppingCart
+                ShoppingCart,
+                Sun,
+                Moon
             })
         }
     ]);
 }
 
 /**
- * Проверяет безопасность URL для навигации
+ * Checks if URL is safe for navigation
  *
- * @param url - URL для проверки
- * @returns true если URL безопасен (http/https или относительный)
+ * @param url - URL to check
+ * @returns true if URL is safe (http/https or relative)
  *
  * @example
  * ```typescript
@@ -388,24 +406,22 @@ function isSafeUrl(url) {
     }
     try {
         const parsed = new URL(url, window.location.origin);
-        // Разрешаем только http(s) и относительные URL (пустой protocol)
         return ['http:', 'https:', ''].includes(parsed.protocol);
     }
     catch {
-        // Невалидный URL
         return false;
     }
 }
 /**
- * Sanitize URL перед использованием в навигации
+ * Sanitize URL before using in navigation
  *
- * @param url - URL для sanitization
- * @returns Безопасный URL или '#' если URL небезопасен
+ * @param url - URL to sanitize
+ * @returns Safe URL or '#' if URL is unsafe
  *
  * @example
  * ```typescript
  * sanitizeUrl('https://example.com') // 'https://example.com'
- * sanitizeUrl('javascript:alert(1)') // '#' (с предупреждением в консоли)
+ * sanitizeUrl('javascript:alert(1)') // '#' (with console warning)
  * ```
  */
 function sanitizeUrl(url) {
@@ -417,15 +433,15 @@ function sanitizeUrl(url) {
 }
 
 /**
- * Объединяет CSS классы, игнорируя falsy значения
+ * Combines CSS classes, ignoring falsy values
  *
- * @param classes - Массив классов (строки, undefined, null, false)
- * @returns Строка с объединенными классами
+ * @param classes - Array of classes (strings, undefined, null, false)
+ * @returns String with combined classes
  *
  * @example
  * ```typescript
  * classNames('btn', 'btn-primary') // 'btn btn-primary'
- * classNames('btn', isActive && 'active') // 'btn active' если isActive=true, иначе 'btn'
+ * classNames('btn', isActive && 'active') // 'btn active' if isActive=true, else 'btn'
  * classNames('btn', undefined, null, false, 'large') // 'btn large'
  * ```
  */
@@ -434,24 +450,20 @@ function classNames(...classes) {
 }
 
 /**
- * Создает computed signal с fallback chain: input → config → default
+ * Creates computed signal with fallback chain: input → config → default
  *
- * Упрощает паттерн configurable inputs, убирая boilerplate код.
- *
- * @param inputSignal - Input signal от пользователя
- * @param configSignal - Config значение (может быть undefined)
- * @param defaultValue - Fallback значение
- * @returns Computed signal с resolved значением
+ * @param inputSignal - User input signal
+ * @param configSignal - Config value (can be undefined)
+ * @param defaultValue - Fallback value
+ * @returns Computed signal with resolved value
  *
  * @example
  * ```typescript
  * export class ButtonComponent {
  *   private defaults = computed(() => this.configService.config().components?.button);
  *
- *   // Input
  *   variantInput = input<Variant | undefined>(undefined, { alias: 'variant' });
  *
- *   // Resolved value с config fallback
  *   variant = withConfigDefault(
  *     this.variantInput,
  *     computed(() => this.defaults()?.variant),
@@ -481,40 +493,30 @@ function withConfigDefault(inputSignal, configSignal, defaultValue) {
 class BadgeComponent {
     configService = inject(StudioConfigService);
     badgeDefaults = computed(() => this.configService.config().components?.badge, ...(ngDevMode ? [{ debugName: "badgeDefaults" }] : []));
-    // Appearance - inputs
     variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
     sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
     colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
     radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
-    // Values with config defaults
     variant = withConfigDefault(this.variantInput, computed(() => this.badgeDefaults()?.variant), 'solid');
     size = withConfigDefault(this.sizeInput, computed(() => this.badgeDefaults()?.size), 'md');
     color = withConfigDefault(this.colorInput, computed(() => this.badgeDefaults()?.color), 'primary');
     radius = withConfigDefault(this.radiusInput, computed(() => this.badgeDefaults()?.radius), 'full');
-    // Icon
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
-    // Dot indicator
     dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : []));
     dotColor = input(...(ngDevMode ? [undefined, { debugName: "dotColor" }] : []));
-    // Removable
     removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : []));
     removed = output();
-    // Clickable & Navigation
     href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
     target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     clicked = output();
-    // Number badge
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
     showZero = input(true, ...(ngDevMode ? [{ debugName: "showZero" }] : []));
-    // Typography
     uppercase = input(false, ...(ngDevMode ? [{ debugName: "uppercase" }] : []));
     bold = input(false, ...(ngDevMode ? [{ debugName: "bold" }] : []));
-    // Animation
     pulse = input(false, ...(ngDevMode ? [{ debugName: "pulse" }] : []));
-    // Auto color (будет реализовано позже если нужно)
     autoColor = input(false, ...(ngDevMode ? [{ debugName: "autoColor" }] : []));
     iconSize = computed(() => {
         const sizeMap = { sm: 12, md: 14, lg: 16 };
@@ -525,12 +527,9 @@ class BadgeComponent {
         if (val === undefined || val === null)
             return '';
         const numVal = typeof val === 'number' ? val : parseInt(val, 10);
-        // Если это число
         if (!isNaN(numVal)) {
-            // Не показывать 0 если showZero = false
             if (numVal === 0 && !this.showZero())
                 return '';
-            // Показать max+ если превышает максимум
             const maxVal = this.max();
             if (maxVal !== undefined && numVal > maxVal) {
                 return `${maxVal}+`;
@@ -540,7 +539,6 @@ class BadgeComponent {
         return val.toString();
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     isVisible = computed(() => {
-        // Скрыть если значение 0 и showZero = false
         const val = this.value();
         if (val !== undefined && val !== null) {
             const numVal = typeof val === 'number' ? val : parseInt(val, 10);
@@ -557,12 +555,10 @@ class BadgeComponent {
             event.stopPropagation();
             return;
         }
-        // Handle link navigation
         const url = this.href();
         if (url) {
             const safeUrl = sanitizeUrl(url);
             if (safeUrl === '#') {
-                // URL was blocked - don't navigate
                 return;
             }
             const target = this.target();
@@ -615,7 +611,7 @@ class BadgeComponent {
         </button>
       }
     </span>
-  `, isInline: true, 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"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, 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"], dependencies: [{ 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: BadgeComponent, decorators: [{
             type: Component,
@@ -666,41 +662,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Badge component
  */
 
+/**
+ * Button component with multiple variants, sizes, colors and states
+ *
+ * @example
+ * <studio-button variant="solid" color="primary" (clicked)="onClick()">
+ *   Click me
+ * </studio-button>
+ */
 class ButtonComponent {
     configService = inject(StudioConfigService);
     buttonDefaults = computed(() => this.configService.config().components?.button, ...(ngDevMode ? [{ debugName: "buttonDefaults" }] : []));
-    // Appearance - inputs
     variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
     sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
     colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
     radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
     shadowInput = input(undefined, ...(ngDevMode ? [{ debugName: "shadowInput", alias: 'shadow' }] : [{ alias: 'shadow' }]));
     compactInput = input(undefined, ...(ngDevMode ? [{ debugName: "compactInput", alias: 'compact' }] : [{ alias: 'compact' }]));
-    // Values with config defaults
     variant = withConfigDefault(this.variantInput, computed(() => this.buttonDefaults()?.variant), 'solid');
     size = withConfigDefault(this.sizeInput, computed(() => this.buttonDefaults()?.size), 'md');
     color = withConfigDefault(this.colorInput, computed(() => this.buttonDefaults()?.color), 'primary');
     radius = withConfigDefault(this.radiusInput, computed(() => this.buttonDefaults()?.radius), 'sm');
     shadow = withConfigDefault(this.shadowInput, computed(() => this.buttonDefaults()?.shadow), 'none');
     compact = withConfigDefault(this.compactInput, computed(() => this.buttonDefaults()?.compact), false);
-    // State
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
-    // Layout
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
-    // Button props
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
-    // Icon
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
-    // Link mode
     href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
     target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
-    // Badge
     badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
     badgeColor = input('error', ...(ngDevMode ? [{ debugName: "badgeColor" }] : []));
-    // Accessibility
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     clicked = output();
     iconSize = computed(() => {
@@ -714,14 +709,11 @@ class ButtonComponent {
             event.stopPropagation();
             return;
         }
-        // Handle link navigation
         const url = this.href();
         if (url) {
             const safeUrl = sanitizeUrl(url);
-            if (safeUrl === '#') {
-                // URL was blocked - don't navigate
+            if (safeUrl === '#')
                 return;
-            }
             const target = this.target();
             if (target === '_blank') {
                 window.open(safeUrl, '_blank', 'noopener,noreferrer');
@@ -755,7 +747,6 @@ class ButtonComponent {
         <studio-icon [name]="icon()!" [size]="iconSize()" />
       }
       @if (loading() && iconPosition() === 'only') {
-        <!-- Empty, spinner already shown -->
       } @else if (loading()) {
         <span>{{ loadingText() }}</span>
       }
@@ -765,7 +756,7 @@ class ButtonComponent {
         </span>
       }
     </span>
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--studio-spacing-sm);font-family:var(--studio-font-family);font-weight:var(--studio-font-weight-medium);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast),border-color var(--studio-transition-fast),box-shadow var(--studio-transition-fast),transform var(--studio-transition-fast)}:host:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}:host(.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}:host(.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);font-size:var(--studio-font-size-base);height:2.5rem;min-width:2.5rem}:host(.studio-button--lg){padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}:host(.studio-button--radius-none){border-radius:var(--studio-radius-none)}:host(.studio-button--radius-sm){border-radius:var(--studio-radius-sm)}:host(.studio-button--radius-md){border-radius:var(--studio-radius-md)}:host(.studio-button--radius-lg){border-radius:var(--studio-radius-lg)}:host(.studio-button--radius-xl){border-radius:var(--studio-radius-xl)}:host(.studio-button--radius-full){border-radius:var(--studio-radius-full)}:host(.studio-button--shadow-none){box-shadow:none}:host(.studio-button--shadow-sm){box-shadow:var(--studio-shadow-sm)}:host(.studio-button--shadow-md){box-shadow:var(--studio-shadow-md)}:host(.studio-button--shadow-lg){box-shadow:var(--studio-shadow-lg)}:host(.studio-button--compact.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);height:1.75rem;min-width:1.75rem;font-size:.813rem}:host(.studio-button--compact.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);height:2rem;min-width:2rem;font-size:.875rem}:host(.studio-button--compact.studio-button--lg){padding:var(--studio-spacing-sm) var(--studio-spacing-lg);height:2.5rem;min-width:2.5rem;font-size:1rem}:host(.studio-button--solid.studio-button--primary){background:var(--studio-primary);color:#fff}:host(.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary-hover)}:host(.studio-button--outline.studio-button--primary){background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary);color:#fff}:host(.studio-button--ghost.studio-button--primary){background:transparent;color:var(--studio-primary)}:host(.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:#3b82f61a}:host(.studio-button--solid.studio-button--secondary){background:var(--studio-secondary);color:#fff}:host(.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-hover)}:host(.studio-button--outline.studio-button--secondary){background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}:host(.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary);color:#fff}:host(.studio-button--ghost.studio-button--secondary){background:transparent;color:var(--studio-secondary)}:host(.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:#8b5cf61a}:host(.studio-button--solid.studio-button--success){background:var(--studio-success);color:#fff}:host(.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-hover)}:host(.studio-button--outline.studio-button--success){background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}:host(.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success);color:#fff}:host(.studio-button--ghost.studio-button--success){background:transparent;color:var(--studio-success)}:host(.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-bg)}:host(.studio-button--solid.studio-button--error){background:var(--studio-error);color:#fff}:host(.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-hover)}:host(.studio-button--outline.studio-button--error){background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}:host(.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error);color:#fff}:host(.studio-button--ghost.studio-button--error){background:transparent;color:var(--studio-error)}:host(.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-bg)}:host(.studio-button--solid.studio-button--warning){background:var(--studio-warning);color:#fff}:host(.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-hover)}:host(.studio-button--outline.studio-button--warning){background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning);color:#fff}:host(.studio-button--ghost.studio-button--warning){background:transparent;color:var(--studio-warning)}:host(.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-bg)}:host(.studio-button--full){width:100%}:host(.studio-button--icon-only){padding:0;aspect-ratio:1}:host(.studio-button--icon-only.studio-button--sm){width:2rem;padding:0}:host(.studio-button--icon-only.studio-button--md){width:2.5rem;padding:0}:host(.studio-button--icon-only.studio-button--lg){width:3rem;padding:0}:host(.studio-button--loading){cursor:wait;pointer-events:none}:host([disabled]){opacity:.6;cursor:not-allowed!important;background:var(--studio-bg-secondary)!important;color:var(--studio-text-tertiary)!important;border-color:var(--studio-border-primary)!important}:host([disabled]:hover){transform:none!important;background:var(--studio-bg-secondary)!important}:host(:active:not([disabled]):not(.studio-button--loading)){transform:scale(.98)}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-button__spinner{animation:studio-spin 1s linear infinite}@keyframes studio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-button__badge{position:absolute;top:-.375rem;right:-.375rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:.625rem;font-weight:var(--studio-font-weight-semibold);line-height:1;color:#fff;border-radius:var(--studio-radius-full);box-shadow:0 0 0 2px var(--studio-bg-primary)}.studio-button__badge--primary{background:var(--studio-primary)}.studio-button__badge--error{background:var(--studio-error)}.studio-button__badge--warning{background:var(--studio-warning)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--studio-spacing-sm);font-family:var(--studio-font-family);font-weight:var(--studio-font-weight-medium);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast),border-color var(--studio-transition-fast),box-shadow var(--studio-transition-fast),transform var(--studio-transition-fast)}:host:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}:host(.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}:host(.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);font-size:var(--studio-font-size-base);height:2.5rem;min-width:2.5rem}:host(.studio-button--lg){padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}:host(.studio-button--radius-none){border-radius:var(--studio-radius-none)}:host(.studio-button--radius-sm){border-radius:var(--studio-radius-sm)}:host(.studio-button--radius-md){border-radius:var(--studio-radius-md)}:host(.studio-button--radius-lg){border-radius:var(--studio-radius-lg)}:host(.studio-button--radius-xl){border-radius:var(--studio-radius-xl)}:host(.studio-button--radius-full){border-radius:var(--studio-radius-full)}:host(.studio-button--shadow-none){box-shadow:none}:host(.studio-button--shadow-sm){box-shadow:var(--studio-shadow-sm)}:host(.studio-button--shadow-md){box-shadow:var(--studio-shadow-md)}:host(.studio-button--shadow-lg){box-shadow:var(--studio-shadow-lg)}:host(.studio-button--compact.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);height:1.75rem;min-width:1.75rem;font-size:.813rem}:host(.studio-button--compact.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);height:2rem;min-width:2rem;font-size:.875rem}:host(.studio-button--compact.studio-button--lg){padding:var(--studio-spacing-sm) var(--studio-spacing-lg);height:2.5rem;min-width:2.5rem;font-size:1rem}:host(.studio-button--solid.studio-button--primary){background:var(--studio-primary);color:#fff}:host(.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary-hover)}:host(.studio-button--outline.studio-button--primary){background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary);color:#fff}:host(.studio-button--ghost.studio-button--primary){background:transparent;color:var(--studio-primary)}:host(.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary-bg)}:host(.studio-button--solid.studio-button--secondary){background:var(--studio-secondary);color:#fff}:host(.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-hover)}:host(.studio-button--outline.studio-button--secondary){background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}:host(.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary);color:#fff}:host(.studio-button--ghost.studio-button--secondary){background:transparent;color:var(--studio-secondary)}:host(.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-bg)}:host(.studio-button--solid.studio-button--success){background:var(--studio-success);color:#fff}:host(.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-hover)}:host(.studio-button--outline.studio-button--success){background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}:host(.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success);color:#fff}:host(.studio-button--ghost.studio-button--success){background:transparent;color:var(--studio-success)}:host(.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-bg)}:host(.studio-button--solid.studio-button--error){background:var(--studio-error);color:#fff}:host(.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-hover)}:host(.studio-button--outline.studio-button--error){background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}:host(.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error);color:#fff}:host(.studio-button--ghost.studio-button--error){background:transparent;color:var(--studio-error)}:host(.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-bg)}:host(.studio-button--solid.studio-button--warning){background:var(--studio-warning);color:#fff}:host(.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-hover)}:host(.studio-button--outline.studio-button--warning){background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning);color:#fff}:host(.studio-button--ghost.studio-button--warning){background:transparent;color:var(--studio-warning)}:host(.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-bg)}:host(.studio-button--full){width:100%}:host(.studio-button--icon-only){padding:0;aspect-ratio:1}:host(.studio-button--icon-only.studio-button--sm){width:2rem;padding:0}:host(.studio-button--icon-only.studio-button--md){width:2.5rem;padding:0}:host(.studio-button--icon-only.studio-button--lg){width:3rem;padding:0}:host(.studio-button--loading){cursor:wait;pointer-events:none}:host([disabled]){opacity:.6;cursor:not-allowed!important;background:var(--studio-bg-secondary)!important;color:var(--studio-text-tertiary)!important;border-color:var(--studio-border-primary)!important}:host([disabled]:hover){transform:none!important;background:var(--studio-bg-secondary)!important}:host(:active:not([disabled]):not(.studio-button--loading)){transform:scale(.98)}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-button__spinner{animation:studio-spin 1s linear infinite}@keyframes studio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-button__badge{position:absolute;top:-.375rem;right:-.375rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:.625rem;font-weight:var(--studio-font-weight-semibold);line-height:1;color:#fff;border-radius:var(--studio-radius-full);box-shadow:0 0 0 2px var(--studio-bg-primary)}.studio-button__badge--primary{background:var(--studio-primary)}.studio-button__badge--error{background:var(--studio-error)}.studio-button__badge--warning{background:var(--studio-warning)}\n"], dependencies: [{ 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: ButtonComponent, decorators: [{
             type: Component,
@@ -800,7 +791,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         <studio-icon [name]="icon()!" [size]="iconSize()" />
       }
       @if (loading() && iconPosition() === 'only') {
-        <!-- Empty, spinner already shown -->
       } @else if (loading()) {
         <span>{{ loadingText() }}</span>
       }
@@ -810,18 +800,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         </span>
       }
     </span>
-  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--studio-spacing-sm);font-family:var(--studio-font-family);font-weight:var(--studio-font-weight-medium);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast),border-color var(--studio-transition-fast),box-shadow var(--studio-transition-fast),transform var(--studio-transition-fast)}:host:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}:host(.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}:host(.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);font-size:var(--studio-font-size-base);height:2.5rem;min-width:2.5rem}:host(.studio-button--lg){padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}:host(.studio-button--radius-none){border-radius:var(--studio-radius-none)}:host(.studio-button--radius-sm){border-radius:var(--studio-radius-sm)}:host(.studio-button--radius-md){border-radius:var(--studio-radius-md)}:host(.studio-button--radius-lg){border-radius:var(--studio-radius-lg)}:host(.studio-button--radius-xl){border-radius:var(--studio-radius-xl)}:host(.studio-button--radius-full){border-radius:var(--studio-radius-full)}:host(.studio-button--shadow-none){box-shadow:none}:host(.studio-button--shadow-sm){box-shadow:var(--studio-shadow-sm)}:host(.studio-button--shadow-md){box-shadow:var(--studio-shadow-md)}:host(.studio-button--shadow-lg){box-shadow:var(--studio-shadow-lg)}:host(.studio-button--compact.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);height:1.75rem;min-width:1.75rem;font-size:.813rem}:host(.studio-button--compact.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);height:2rem;min-width:2rem;font-size:.875rem}:host(.studio-button--compact.studio-button--lg){padding:var(--studio-spacing-sm) var(--studio-spacing-lg);height:2.5rem;min-width:2.5rem;font-size:1rem}:host(.studio-button--solid.studio-button--primary){background:var(--studio-primary);color:#fff}:host(.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary-hover)}:host(.studio-button--outline.studio-button--primary){background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary);color:#fff}:host(.studio-button--ghost.studio-button--primary){background:transparent;color:var(--studio-primary)}:host(.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:#3b82f61a}:host(.studio-button--solid.studio-button--secondary){background:var(--studio-secondary);color:#fff}:host(.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-hover)}:host(.studio-button--outline.studio-button--secondary){background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}:host(.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary);color:#fff}:host(.studio-button--ghost.studio-button--secondary){background:transparent;color:var(--studio-secondary)}:host(.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:#8b5cf61a}:host(.studio-button--solid.studio-button--success){background:var(--studio-success);color:#fff}:host(.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-hover)}:host(.studio-button--outline.studio-button--success){background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}:host(.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success);color:#fff}:host(.studio-button--ghost.studio-button--success){background:transparent;color:var(--studio-success)}:host(.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-bg)}:host(.studio-button--solid.studio-button--error){background:var(--studio-error);color:#fff}:host(.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-hover)}:host(.studio-button--outline.studio-button--error){background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}:host(.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error);color:#fff}:host(.studio-button--ghost.studio-button--error){background:transparent;color:var(--studio-error)}:host(.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-bg)}:host(.studio-button--solid.studio-button--warning){background:var(--studio-warning);color:#fff}:host(.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-hover)}:host(.studio-button--outline.studio-button--warning){background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning);color:#fff}:host(.studio-button--ghost.studio-button--warning){background:transparent;color:var(--studio-warning)}:host(.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-bg)}:host(.studio-button--full){width:100%}:host(.studio-button--icon-only){padding:0;aspect-ratio:1}:host(.studio-button--icon-only.studio-button--sm){width:2rem;padding:0}:host(.studio-button--icon-only.studio-button--md){width:2.5rem;padding:0}:host(.studio-button--icon-only.studio-button--lg){width:3rem;padding:0}:host(.studio-button--loading){cursor:wait;pointer-events:none}:host([disabled]){opacity:.6;cursor:not-allowed!important;background:var(--studio-bg-secondary)!important;color:var(--studio-text-tertiary)!important;border-color:var(--studio-border-primary)!important}:host([disabled]:hover){transform:none!important;background:var(--studio-bg-secondary)!important}:host(:active:not([disabled]):not(.studio-button--loading)){transform:scale(.98)}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-button__spinner{animation:studio-spin 1s linear infinite}@keyframes studio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-button__badge{position:absolute;top:-.375rem;right:-.375rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:.625rem;font-weight:var(--studio-font-weight-semibold);line-height:1;color:#fff;border-radius:var(--studio-radius-full);box-shadow:0 0 0 2px var(--studio-bg-primary)}.studio-button__badge--primary{background:var(--studio-primary)}.studio-button__badge--error{background:var(--studio-error)}.studio-button__badge--warning{background:var(--studio-warning)}\n"] }]
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--studio-spacing-sm);font-family:var(--studio-font-family);font-weight:var(--studio-font-weight-medium);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast),border-color var(--studio-transition-fast),box-shadow var(--studio-transition-fast),transform var(--studio-transition-fast)}:host:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}:host(.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}:host(.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);font-size:var(--studio-font-size-base);height:2.5rem;min-width:2.5rem}:host(.studio-button--lg){padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}:host(.studio-button--radius-none){border-radius:var(--studio-radius-none)}:host(.studio-button--radius-sm){border-radius:var(--studio-radius-sm)}:host(.studio-button--radius-md){border-radius:var(--studio-radius-md)}:host(.studio-button--radius-lg){border-radius:var(--studio-radius-lg)}:host(.studio-button--radius-xl){border-radius:var(--studio-radius-xl)}:host(.studio-button--radius-full){border-radius:var(--studio-radius-full)}:host(.studio-button--shadow-none){box-shadow:none}:host(.studio-button--shadow-sm){box-shadow:var(--studio-shadow-sm)}:host(.studio-button--shadow-md){box-shadow:var(--studio-shadow-md)}:host(.studio-button--shadow-lg){box-shadow:var(--studio-shadow-lg)}:host(.studio-button--compact.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);height:1.75rem;min-width:1.75rem;font-size:.813rem}:host(.studio-button--compact.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);height:2rem;min-width:2rem;font-size:.875rem}:host(.studio-button--compact.studio-button--lg){padding:var(--studio-spacing-sm) var(--studio-spacing-lg);height:2.5rem;min-width:2.5rem;font-size:1rem}:host(.studio-button--solid.studio-button--primary){background:var(--studio-primary);color:#fff}:host(.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary-hover)}:host(.studio-button--outline.studio-button--primary){background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary);color:#fff}:host(.studio-button--ghost.studio-button--primary){background:transparent;color:var(--studio-primary)}:host(.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary-bg)}:host(.studio-button--solid.studio-button--secondary){background:var(--studio-secondary);color:#fff}:host(.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-hover)}:host(.studio-button--outline.studio-button--secondary){background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}:host(.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary);color:#fff}:host(.studio-button--ghost.studio-button--secondary){background:transparent;color:var(--studio-secondary)}:host(.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-bg)}:host(.studio-button--solid.studio-button--success){background:var(--studio-success);color:#fff}:host(.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-hover)}:host(.studio-button--outline.studio-button--success){background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}:host(.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success);color:#fff}:host(.studio-button--ghost.studio-button--success){background:transparent;color:var(--studio-success)}:host(.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-bg)}:host(.studio-button--solid.studio-button--error){background:var(--studio-error);color:#fff}:host(.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-hover)}:host(.studio-button--outline.studio-button--error){background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}:host(.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error);color:#fff}:host(.studio-button--ghost.studio-button--error){background:transparent;color:var(--studio-error)}:host(.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-bg)}:host(.studio-button--solid.studio-button--warning){background:var(--studio-warning);color:#fff}:host(.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-hover)}:host(.studio-button--outline.studio-button--warning){background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning);color:#fff}:host(.studio-button--ghost.studio-button--warning){background:transparent;color:var(--studio-warning)}:host(.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-bg)}:host(.studio-button--full){width:100%}:host(.studio-button--icon-only){padding:0;aspect-ratio:1}:host(.studio-button--icon-only.studio-button--sm){width:2rem;padding:0}:host(.studio-button--icon-only.studio-button--md){width:2.5rem;padding:0}:host(.studio-button--icon-only.studio-button--lg){width:3rem;padding:0}:host(.studio-button--loading){cursor:wait;pointer-events:none}:host([disabled]){opacity:.6;cursor:not-allowed!important;background:var(--studio-bg-secondary)!important;color:var(--studio-text-tertiary)!important;border-color:var(--studio-border-primary)!important}:host([disabled]:hover){transform:none!important;background:var(--studio-bg-secondary)!important}:host(:active:not([disabled]):not(.studio-button--loading)){transform:scale(.98)}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-button__spinner{animation:studio-spin 1s linear infinite}@keyframes studio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-button__badge{position:absolute;top:-.375rem;right:-.375rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:.625rem;font-weight:var(--studio-font-weight-semibold);line-height:1;color:#fff;border-radius:var(--studio-radius-full);box-shadow:0 0 0 2px var(--studio-bg-primary)}.studio-button__badge--primary{background:var(--studio-primary)}.studio-button__badge--error{background:var(--studio-error)}.studio-button__badge--warning{background:var(--studio-warning)}\n"] }]
         }], propDecorators: { variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], compactInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
  * Button component
  */
 
+/**
+ * Toggle switch component with customizable size and color
+ *
+ * @example
+ * <studio-switch [(checked)]="isEnabled" label="Enable feature" />
+ */
+class SwitchComponent {
+    configService = inject(StudioConfigService);
+    switchDefaults = computed(() => this.configService.config().components?.switch, ...(ngDevMode ? [{ debugName: "switchDefaults" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    labelPosition = input('right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    showIcons = input(false, ...(ngDevMode ? [{ debugName: "showIcons" }] : []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
+    size = withConfigDefault(this.sizeInput, computed(() => this.switchDefaults()?.size), 'md');
+    color = withConfigDefault(this.colorInput, computed(() => this.switchDefaults()?.color), 'primary');
+    checkedChange = output();
+    iconSize = computed(() => {
+        const sizeMap = { sm: 10, md: 12, lg: 14 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    hostClasses = computed(() => classNames('studio-switch', `studio-switch--${this.size()}`, `studio-switch--${this.color()}`, this.checked() && 'studio-switch--checked', this.disabled() && 'studio-switch--disabled'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    handleClick() {
+        if (this.disabled())
+            return;
+        this.toggle();
+    }
+    handleKeydown(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.toggle();
+    }
+    toggle() {
+        const newValue = !this.checked();
+        this.checked.set(newValue);
+        this.checkedChange.emit(newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: SwitchComponent, isStandalone: true, selector: "studio-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", checkedChange: "checkedChange" }, host: { listeners: { "click": "handleClick()", "keydown.space": "handleKeydown($event)", "keydown.enter": "handleKeydown($event)" }, properties: { "class": "hostClasses()", "attr.role": "\"switch\"", "attr.aria-checked": "checked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-label": "ariaLabel() || label()", "tabindex": "disabled() ? -1 : 0" } }, ngImport: i0, template: `
+    <span class="studio-switch__container">
+      @if (label() && labelPosition() === 'left') {
+        <span class="studio-switch__label studio-switch__label--left">
+          {{ label() }}
+        </span>
+      }
+
+      <span class="studio-switch__track">
+        <span class="studio-switch__thumb">
+          @if (showIcons()) {
+            @if (checked()) {
+              <studio-icon name="check" [size]="iconSize()" color="inherit" />
+            } @else {
+              <studio-icon name="x" [size]="iconSize()" color="inherit" />
+            }
+          }
+        </span>
+      </span>
+
+      @if (label() && labelPosition() === 'right') {
+        <span class="studio-switch__label studio-switch__label--right">
+          {{ label() }}
+        </span>
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:opacity var(--studio-transition-fast)}:host(:focus-visible) .studio-switch__track{outline:2px solid var(--studio-primary);outline-offset:2px}:host(.studio-switch--disabled){cursor:not-allowed;opacity:.5}.studio-switch__container{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-switch__label{font-size:var(--studio-font-size-sm);color:var(--studio-text-primary);font-weight:var(--studio-font-weight-medium)}.studio-switch__track{position:relative;display:inline-flex;align-items:center;border-radius:var(--studio-radius-full);background:var(--studio-bg-tertiary);transition:background-color var(--studio-transition-base);flex-shrink:0}.studio-switch__thumb{position:absolute;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--studio-radius-full);box-shadow:var(--studio-shadow-sm);transition:transform var(--studio-transition-base),background-color var(--studio-transition-base);color:var(--studio-text-tertiary)}:host(.studio-switch--sm) .studio-switch__track{width:2rem;height:1.25rem;padding:.125rem}:host(.studio-switch--sm) .studio-switch__thumb{width:1rem;height:1rem;left:.125rem}:host(.studio-switch--md) .studio-switch__track{width:2.5rem;height:1.5rem;padding:.125rem}:host(.studio-switch--md) .studio-switch__thumb{width:1.25rem;height:1.25rem;left:.125rem}:host(.studio-switch--lg) .studio-switch__track{width:3rem;height:1.75rem;padding:.125rem}:host(.studio-switch--lg) .studio-switch__thumb{width:1.5rem;height:1.5rem;left:.125rem}:host(.studio-switch--checked.studio-switch--primary) .studio-switch__track{background:var(--studio-primary)}:host(.studio-switch--checked.studio-switch--primary) .studio-switch__thumb{color:var(--studio-primary)}:host(.studio-switch--checked.studio-switch--sm.studio-switch--primary) .studio-switch__thumb{transform:translate(.75rem)}:host(.studio-switch--checked.studio-switch--md.studio-switch--primary) .studio-switch__thumb{transform:translate(1rem)}:host(.studio-switch--checked.studio-switch--lg.studio-switch--primary) .studio-switch__thumb{transform:translate(1.25rem)}:host(.studio-switch--checked.studio-switch--secondary) .studio-switch__track{background:var(--studio-secondary)}:host(.studio-switch--checked.studio-switch--secondary) .studio-switch__thumb{color:var(--studio-secondary)}:host(.studio-switch--checked.studio-switch--sm.studio-switch--secondary) .studio-switch__thumb{transform:translate(.75rem)}:host(.studio-switch--checked.studio-switch--md.studio-switch--secondary) .studio-switch__thumb{transform:translate(1rem)}:host(.studio-switch--checked.studio-switch--lg.studio-switch--secondary) .studio-switch__thumb{transform:translate(1.25rem)}:host(.studio-switch--checked.studio-switch--success) .studio-switch__track{background:var(--studio-success)}:host(.studio-switch--checked.studio-switch--success) .studio-switch__thumb{color:var(--studio-success)}:host(.studio-switch--checked.studio-switch--sm.studio-switch--success) .studio-switch__thumb{transform:translate(.75rem)}:host(.studio-switch--checked.studio-switch--md.studio-switch--success) .studio-switch__thumb{transform:translate(1rem)}:host(.studio-switch--checked.studio-switch--lg.studio-switch--success) .studio-switch__thumb{transform:translate(1.25rem)}:host(:not(.studio-switch--disabled):hover) .studio-switch__track{opacity:.9}:host(.studio-switch--disabled) .studio-switch__track{background:var(--studio-bg-secondary)!important}:host(.studio-switch--disabled) .studio-switch__thumb{box-shadow:none}\n"], dependencies: [{ 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: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-switch', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': '"switch"',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-label]': 'ariaLabel() || label()',
+                        '(click)': 'handleClick()',
+                        '(keydown.space)': 'handleKeydown($event)',
+                        '(keydown.enter)': 'handleKeydown($event)',
+                        '[tabindex]': 'disabled() ? -1 : 0'
+                    }, template: `
+    <span class="studio-switch__container">
+      @if (label() && labelPosition() === 'left') {
+        <span class="studio-switch__label studio-switch__label--left">
+          {{ label() }}
+        </span>
+      }
+
+      <span class="studio-switch__track">
+        <span class="studio-switch__thumb">
+          @if (showIcons()) {
+            @if (checked()) {
+              <studio-icon name="check" [size]="iconSize()" color="inherit" />
+            } @else {
+              <studio-icon name="x" [size]="iconSize()" color="inherit" />
+            }
+          }
+        </span>
+      </span>
+
+      @if (label() && labelPosition() === 'right') {
+        <span class="studio-switch__label studio-switch__label--right">
+          {{ label() }}
+        </span>
+      }
+    </span>
+  `, styles: [":host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:opacity var(--studio-transition-fast)}:host(:focus-visible) .studio-switch__track{outline:2px solid var(--studio-primary);outline-offset:2px}:host(.studio-switch--disabled){cursor:not-allowed;opacity:.5}.studio-switch__container{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-switch__label{font-size:var(--studio-font-size-sm);color:var(--studio-text-primary);font-weight:var(--studio-font-weight-medium)}.studio-switch__track{position:relative;display:inline-flex;align-items:center;border-radius:var(--studio-radius-full);background:var(--studio-bg-tertiary);transition:background-color var(--studio-transition-base);flex-shrink:0}.studio-switch__thumb{position:absolute;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--studio-radius-full);box-shadow:var(--studio-shadow-sm);transition:transform var(--studio-transition-base),background-color var(--studio-transition-base);color:var(--studio-text-tertiary)}:host(.studio-switch--sm) .studio-switch__track{width:2rem;height:1.25rem;padding:.125rem}:host(.studio-switch--sm) .studio-switch__thumb{width:1rem;height:1rem;left:.125rem}:host(.studio-switch--md) .studio-switch__track{width:2.5rem;height:1.5rem;padding:.125rem}:host(.studio-switch--md) .studio-switch__thumb{width:1.25rem;height:1.25rem;left:.125rem}:host(.studio-switch--lg) .studio-switch__track{width:3rem;height:1.75rem;padding:.125rem}:host(.studio-switch--lg) .studio-switch__thumb{width:1.5rem;height:1.5rem;left:.125rem}:host(.studio-switch--checked.studio-switch--primary) .studio-switch__track{background:var(--studio-primary)}:host(.studio-switch--checked.studio-switch--primary) .studio-switch__thumb{color:var(--studio-primary)}:host(.studio-switch--checked.studio-switch--sm.studio-switch--primary) .studio-switch__thumb{transform:translate(.75rem)}:host(.studio-switch--checked.studio-switch--md.studio-switch--primary) .studio-switch__thumb{transform:translate(1rem)}:host(.studio-switch--checked.studio-switch--lg.studio-switch--primary) .studio-switch__thumb{transform:translate(1.25rem)}:host(.studio-switch--checked.studio-switch--secondary) .studio-switch__track{background:var(--studio-secondary)}:host(.studio-switch--checked.studio-switch--secondary) .studio-switch__thumb{color:var(--studio-secondary)}:host(.studio-switch--checked.studio-switch--sm.studio-switch--secondary) .studio-switch__thumb{transform:translate(.75rem)}:host(.studio-switch--checked.studio-switch--md.studio-switch--secondary) .studio-switch__thumb{transform:translate(1rem)}:host(.studio-switch--checked.studio-switch--lg.studio-switch--secondary) .studio-switch__thumb{transform:translate(1.25rem)}:host(.studio-switch--checked.studio-switch--success) .studio-switch__track{background:var(--studio-success)}:host(.studio-switch--checked.studio-switch--success) .studio-switch__thumb{color:var(--studio-success)}:host(.studio-switch--checked.studio-switch--sm.studio-switch--success) .studio-switch__thumb{transform:translate(.75rem)}:host(.studio-switch--checked.studio-switch--md.studio-switch--success) .studio-switch__thumb{transform:translate(1rem)}:host(.studio-switch--checked.studio-switch--lg.studio-switch--success) .studio-switch__thumb{transform:translate(1.25rem)}:host(:not(.studio-switch--disabled):hover) .studio-switch__track{opacity:.9}:host(.studio-switch--disabled) .studio-switch__track{background:var(--studio-bg-secondary)!important}:host(.studio-switch--disabled) .studio-switch__thumb{box-shadow:none}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+/**
+ * Switch component
+ */
+
 /**
  * Primitives (Atoms)
  * Basic building blocks
  */
 
+/**
+ * Theme toggle switch with sun/moon icons
+ *
+ * @example
+ * <studio-theme-switch />
+ * <studio-theme-switch [showLabel]="true" />
+ */
+class ThemeSwitchComponent {
+    configService = inject(StudioConfigService);
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    iconOnly = input(true, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
+    isDark = computed(() => this.configService.themeMode() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+    iconSize = computed(() => {
+        const sizeMap = { sm: 16, md: 20, lg: 24 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    toggleTheme() {
+        this.configService.toggleTheme();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ThemeSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ThemeSwitchComponent, isStandalone: true, selector: "studio-theme-switch", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="studio-theme-switch">
+      @if (iconOnly()) {
+        <button
+          type="button"
+          class="studio-theme-switch__button studio-theme-switch__button--{{ size() }}"
+          [attr.aria-label]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+          (click)="toggleTheme()">
+          @if (isDark()) {
+            <studio-icon name="moon" [size]="iconSize()" color="inherit" />
+          } @else {
+            <studio-icon name="sun" [size]="iconSize()" color="inherit" />
+          }
+        </button>
+      } @else {
+        <studio-switch
+          [checked]="isDark()"
+          (checkedChange)="toggleTheme()"
+          [size]="size()"
+          [label]="showLabel() ? (isDark() ? 'Dark' : 'Light') : undefined"
+          labelPosition="left">
+        </studio-switch>
+      }
+    </div>
+  `, isInline: true, styles: [".studio-theme-switch{display:inline-flex;align-items:center}.studio-theme-switch__button{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-md);transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast);padding:var(--studio-spacing-xs)}.studio-theme-switch__button:hover{background:var(--studio-bg-secondary);color:var(--studio-text-primary)}.studio-theme-switch__button:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-theme-switch__button--sm{width:2rem;height:2rem}.studio-theme-switch__button--md{width:2.5rem;height:2.5rem}.studio-theme-switch__button--lg{width:3rem;height:3rem}\n"], dependencies: [{ kind: "component", type: SwitchComponent, selector: "studio-switch", inputs: ["checked", "disabled", "label", "labelPosition", "showIcons", "ariaLabel", "size", "color"], outputs: ["checkedChange"] }, { 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: ThemeSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-theme-switch', standalone: true, imports: [SwitchComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="studio-theme-switch">
+      @if (iconOnly()) {
+        <button
+          type="button"
+          class="studio-theme-switch__button studio-theme-switch__button--{{ size() }}"
+          [attr.aria-label]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+          (click)="toggleTheme()">
+          @if (isDark()) {
+            <studio-icon name="moon" [size]="iconSize()" color="inherit" />
+          } @else {
+            <studio-icon name="sun" [size]="iconSize()" color="inherit" />
+          }
+        </button>
+      } @else {
+        <studio-switch
+          [checked]="isDark()"
+          (checkedChange)="toggleTheme()"
+          [size]="size()"
+          [label]="showLabel() ? (isDark() ? 'Dark' : 'Light') : undefined"
+          labelPosition="left">
+        </studio-switch>
+      }
+    </div>
+  `, styles: [".studio-theme-switch{display:inline-flex;align-items:center}.studio-theme-switch__button{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-md);transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast);padding:var(--studio-spacing-xs)}.studio-theme-switch__button:hover{background:var(--studio-bg-secondary);color:var(--studio-text-primary)}.studio-theme-switch__button:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-theme-switch__button--sm{width:2rem;height:2rem}.studio-theme-switch__button--md{width:2.5rem;height:2.5rem}.studio-theme-switch__button--lg{width:3rem;height:3rem}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+
+/**
+ * Theme switch component
+ */
+
 /**
  * Composites (Molecules + Organisms)
  * Complex components built from primitives
@@ -843,5 +1028,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, ButtonComponent, IconComponent, STUDIO_CONFIG, StudioConfigService, classNames, isSafeUrl, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, ButtonComponent, IconComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, ThemeSwitchComponent, classNames, isSafeUrl, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map