@eduboxpro/studio 0.1.1 → 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, 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';
@@ -362,48 +378,354 @@ function provideStudioIcons() {
                 RefreshCw,
                 RotateCw,
                 Loader,
-                Loader2
+                Loader2,
+                ShoppingCart,
+                Sun,
+                Moon
             })
         }
     ]);
 }
 
+/**
+ * Checks if URL is safe for navigation
+ *
+ * @param url - URL to check
+ * @returns true if URL is safe (http/https or relative)
+ *
+ * @example
+ * ```typescript
+ * isSafeUrl('https://example.com') // true
+ * isSafeUrl('javascript:alert(1)') // false
+ * isSafeUrl('/relative/path') // true
+ * ```
+ */
+function isSafeUrl(url) {
+    if (!url || typeof url !== 'string') {
+        return false;
+    }
+    try {
+        const parsed = new URL(url, window.location.origin);
+        return ['http:', 'https:', ''].includes(parsed.protocol);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Sanitize URL before using in navigation
+ *
+ * @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)') // '#' (with console warning)
+ * ```
+ */
+function sanitizeUrl(url) {
+    if (!isSafeUrl(url)) {
+        console.warn(`[Studio] Unsafe URL blocked: ${url}`);
+        return '#';
+    }
+    return url;
+}
+
+/**
+ * Combines CSS classes, ignoring falsy values
+ *
+ * @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' if isActive=true, else 'btn'
+ * classNames('btn', undefined, null, false, 'large') // 'btn large'
+ * ```
+ */
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+
+/**
+ * Creates computed signal with fallback chain: input → config → default
+ *
+ * @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);
+ *
+ *   variantInput = input<Variant | undefined>(undefined, { alias: 'variant' });
+ *
+ *   variant = withConfigDefault(
+ *     this.variantInput,
+ *     computed(() => this.defaults()?.variant),
+ *     'solid'
+ *   );
+ * }
+ * ```
+ */
+function withConfigDefault(inputSignal, configSignal, defaultValue) {
+    return computed(() => {
+        const inputValue = inputSignal();
+        if (inputValue !== undefined)
+            return inputValue;
+        const configValue = configSignal();
+        if (configValue !== undefined)
+            return configValue;
+        return defaultValue;
+    });
+}
+
+/**
+ * @eduboxpro/studio - Utilities
+ *
+ * Helper functions and utilities for the Studio library
+ */
+
+class BadgeComponent {
+    configService = inject(StudioConfigService);
+    badgeDefaults = computed(() => this.configService.config().components?.badge, ...(ngDevMode ? [{ debugName: "badgeDefaults" }] : []));
+    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' }]));
+    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 = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : []));
+    dotColor = input(...(ngDevMode ? [undefined, { debugName: "dotColor" }] : []));
+    removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : []));
+    removed = output();
+    href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+    target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    clicked = output();
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    showZero = input(true, ...(ngDevMode ? [{ debugName: "showZero" }] : []));
+    uppercase = input(false, ...(ngDevMode ? [{ debugName: "uppercase" }] : []));
+    bold = input(false, ...(ngDevMode ? [{ debugName: "bold" }] : []));
+    pulse = input(false, ...(ngDevMode ? [{ debugName: "pulse" }] : []));
+    autoColor = input(false, ...(ngDevMode ? [{ debugName: "autoColor" }] : []));
+    iconSize = computed(() => {
+        const sizeMap = { sm: 12, md: 14, lg: 16 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    displayValue = computed(() => {
+        const val = this.value();
+        if (val === undefined || val === null)
+            return '';
+        const numVal = typeof val === 'number' ? val : parseInt(val, 10);
+        if (!isNaN(numVal)) {
+            if (numVal === 0 && !this.showZero())
+                return '';
+            const maxVal = this.max();
+            if (maxVal !== undefined && numVal > maxVal) {
+                return `${maxVal}+`;
+            }
+            return numVal.toString();
+        }
+        return val.toString();
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    isVisible = computed(() => {
+        const val = this.value();
+        if (val !== undefined && val !== null) {
+            const numVal = typeof val === 'number' ? val : parseInt(val, 10);
+            if (!isNaN(numVal) && numVal === 0 && !this.showZero()) {
+                return false;
+            }
+        }
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    hostClasses = computed(() => classNames('studio-badge', `studio-badge--${this.variant()}`, `studio-badge--${this.size()}`, `studio-badge--${this.color()}`, `studio-badge--radius-${this.radius()}`, this.disabled() && 'studio-badge--disabled', this.uppercase() && 'studio-badge--uppercase', this.bold() && 'studio-badge--bold', this.pulse() && 'studio-badge--pulse', this.href() && 'studio-badge--clickable'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    handleClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const url = this.href();
+        if (url) {
+            const safeUrl = sanitizeUrl(url);
+            if (safeUrl === '#') {
+                return;
+            }
+            const target = this.target();
+            if (target === '_blank') {
+                window.open(safeUrl, '_blank', 'noopener,noreferrer');
+            }
+            else {
+                window.location.href = safeUrl;
+            }
+        }
+        this.clicked.emit(event);
+    }
+    handleRemove(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled())
+            return;
+        this.removed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: BadgeComponent, isStandalone: true, selector: "studio-badge", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, dotColor: { classPropertyName: "dotColor", publicName: "dotColor", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null }, pulse: { classPropertyName: "pulse", publicName: "pulse", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", clicked: "clicked" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null", "attr.href": "href()", "attr.target": "href() ? target() : null", "attr.rel": "href() && target() === \"_blank\" ? \"noopener noreferrer\" : null", "style.display": "isVisible() ? null : \"none\"" } }, ngImport: i0, template: `
+    <span class="studio-badge__content">
+      @if (dot()) {
+        <span
+          class="studio-badge__dot"
+          [class]="'studio-badge__dot--' + (dotColor() || color())"
+        ></span>
+      }
+      @if (icon() && iconPosition() === 'left') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      <span class="studio-badge__text">
+        @if (displayValue()) {
+          {{ displayValue() }}
+        } @else {
+          <ng-content />
+        }
+      </span>
+      @if (icon() && iconPosition() === 'right') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (removable()) {
+        <button
+          type="button"
+          class="studio-badge__remove"
+          (click)="handleRemove($event)"
+          aria-label="Remove"
+        >
+          <studio-icon name="x" [size]="iconSize()" />
+        </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", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-badge', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.href]': 'href()',
+                        '[attr.target]': 'href() ? target() : null',
+                        '[attr.rel]': 'href() && target() === "_blank" ? "noopener noreferrer" : null',
+                        '[style.display]': 'isVisible() ? null : "none"',
+                        '(click)': 'handleClick($event)'
+                    }, template: `
+    <span class="studio-badge__content">
+      @if (dot()) {
+        <span
+          class="studio-badge__dot"
+          [class]="'studio-badge__dot--' + (dotColor() || color())"
+        ></span>
+      }
+      @if (icon() && iconPosition() === 'left') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      <span class="studio-badge__text">
+        @if (displayValue()) {
+          {{ displayValue() }}
+        } @else {
+          <ng-content />
+        }
+      </span>
+      @if (icon() && iconPosition() === 'right') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (removable()) {
+        <button
+          type="button"
+          class="studio-badge__remove"
+          (click)="handleRemove($event)"
+          aria-label="Remove"
+        >
+          <studio-icon name="x" [size]="iconSize()" />
+        </button>
+      }
+    </span>
+  `, 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
+ */
+
+/**
+ * Button component with multiple variants, sizes, colors and states
+ *
+ * @example
+ * <studio-button variant="solid" color="primary" (clicked)="onClick()">
+ *   Click me
+ * </studio-button>
+ */
 class ButtonComponent {
-    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    configService = inject(StudioConfigService);
+    buttonDefaults = computed(() => this.configService.config().components?.button, ...(ngDevMode ? [{ debugName: "buttonDefaults" }] : []));
+    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' }]));
+    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);
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
+    href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+    target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
+    badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
+    badgeColor = input('error', ...(ngDevMode ? [{ debugName: "badgeColor" }] : []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     clicked = output();
     iconSize = computed(() => {
         const sizeMap = { sm: 16, md: 18, lg: 20 };
         return sizeMap[this.size()];
     }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
-    hostClasses = computed(() => {
-        return [
-            'studio-button',
-            `studio-button--${this.variant()}`,
-            `studio-button--${this.size()}`,
-            `studio-button--${this.color()}`,
-            this.fullWidth() ? 'studio-button--full' : '',
-            this.loading() ? 'studio-button--loading' : '',
-            this.iconPosition() === 'only' ? 'studio-button--icon-only' : ''
-        ].filter(Boolean).join(' ');
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    hostClasses = computed(() => classNames('studio-button', `studio-button--${this.variant()}`, `studio-button--${this.size()}`, `studio-button--${this.color()}`, `studio-button--radius-${this.radius()}`, `studio-button--shadow-${this.shadow()}`, this.compact() && 'studio-button--compact', this.fullWidth() && 'studio-button--full', this.loading() && 'studio-button--loading', this.iconPosition() === 'only' && 'studio-button--icon-only'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     handleClick(event) {
         if (this.disabled() || this.loading()) {
             event.preventDefault();
             event.stopPropagation();
             return;
         }
+        const url = this.href();
+        if (url) {
+            const safeUrl = sanitizeUrl(url);
+            if (safeUrl === '#')
+                return;
+            const target = this.target();
+            if (target === '_blank') {
+                window.open(safeUrl, '_blank', 'noopener,noreferrer');
+            }
+            else {
+                window.location.href = safeUrl;
+            }
+        }
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ButtonComponent, isStandalone: true, selector: "studio-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() || loading() ? \"\" : null", "attr.type": "type()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ButtonComponent, isStandalone: true, selector: "studio-button", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, shadowInput: { classPropertyName: "shadowInput", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, compactInput: { classPropertyName: "compactInput", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() || loading() ? \"\" : null", "attr.type": "href() ? null : type()", "attr.href": "href()", "attr.target": "href() ? target() : null", "attr.rel": "href() && target() === \"_blank\" ? \"noopener noreferrer\" : null", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `
     <span class="studio-button__content">
       @if (loading()) {
         <studio-icon
@@ -425,19 +747,27 @@ class ButtonComponent {
         <studio-icon [name]="icon()!" [size]="iconSize()" />
       }
       @if (loading() && iconPosition() === 'only') {
-        <!-- Empty, spinner already shown -->
       } @else if (loading()) {
-        <span>Loading...</span>
+        <span>{{ loadingText() }}</span>
+      }
+      @if (badge() !== undefined && badge() !== null && badge() !== '') {
+        <span class="studio-button__badge studio-button__badge--{{ badgeColor() }}">
+          {{ badge() }}
+        </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;border-radius:var(--studio-radius-md);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--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)}}\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,
             args: [{ selector: 'studio-button', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
                         '[attr.disabled]': 'disabled() || loading() ? "" : null',
-                        '[attr.type]': 'type()',
+                        '[attr.type]': 'href() ? null : type()',
+                        '[attr.href]': 'href()',
+                        '[attr.target]': 'href() ? target() : null',
+                        '[attr.rel]': 'href() && target() === "_blank" ? "noopener noreferrer" : null',
+                        '[attr.aria-label]': 'ariaLabel()',
                         '(click)': 'handleClick($event)'
                     }, template: `
     <span class="studio-button__content">
@@ -461,23 +791,222 @@ 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>Loading...</span>
+        <span>{{ loadingText() }}</span>
+      }
+      @if (badge() !== undefined && badge() !== null && badge() !== '') {
+        <span class="studio-button__badge studio-button__badge--{{ badgeColor() }}">
+          {{ badge() }}
+        </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;border-radius:var(--studio-radius-md);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--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)}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", 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 }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+  `, 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
@@ -488,11 +1017,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Domain-specific components for educational platforms
  */
 
-/**
- * Utilities
- * Helper functions, directives, pipes
- */
-
 /**
  * Public API Surface of @eduboxpro/studio
  */
@@ -504,5 +1028,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, IconComponent, STUDIO_CONFIG, StudioConfigService, provideStudioConfig, provideStudioIcons };
+export { BadgeComponent, ButtonComponent, IconComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, ThemeSwitchComponent, classNames, isSafeUrl, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map