@eduboxpro/studio 0.1.0 → 0.1.2

package/fesm2022/eduboxpro-studio.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import * as i1 from 'lucide-angular';
+import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, ShoppingCart, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
 
 /**
  * Injection token for Studio configuration
@@ -51,28 +53,105 @@ class StudioConfigService {
         if (!theme)
             return;
         const root = this.document.documentElement;
+        // Apply colors
         if (theme.colors) {
-            this.applyTokens(root, 'studio', 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);
+            }
+            if (theme.typography.fontMono) {
+                root.style.setProperty('--studio-font-mono', theme.typography.fontMono);
+            }
+            if (theme.typography.fontSize) {
+                this.applyTokens(root, 'studio-font-size', theme.typography.fontSize);
+            }
+            if (theme.typography.fontWeight) {
+                this.applyTokens(root, 'studio-font-weight', theme.typography.fontWeight);
+            }
+            if (theme.typography.lineHeight) {
+                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);
         }
-        if (theme.typography?.fontFamily) {
-            root.style.setProperty('--studio-font-family', theme.typography.fontFamily);
+        // 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];
+            if (!colorValue)
+                return;
+            if (typeof colorValue === 'string') {
+                root.style.setProperty(`--studio-${colorName}`, colorValue);
+            }
+            else {
+                const config = colorValue;
+                if (config.base) {
+                    root.style.setProperty(`--studio-${colorName}`, config.base);
+                }
+                if (config.hover) {
+                    root.style.setProperty(`--studio-${colorName}-hover`, config.hover);
+                }
+                if (config.active) {
+                    root.style.setProperty(`--studio-${colorName}-active`, config.active);
+                }
+                if (config.bg) {
+                    root.style.setProperty(`--studio-${colorName}-bg`, config.bg);
+                }
+            }
+        });
+        // Background colors
+        if (colors.bg) {
+            this.applyTokens(root, 'studio-bg', colors.bg);
         }
-        if (theme.typography?.fontSize) {
-            this.applyTokens(root, 'studio-font-size', theme.typography.fontSize);
+        // Text colors
+        if (colors.text) {
+            this.applyTokens(root, 'studio-text', colors.text);
         }
-        if (theme.typography?.fontWeight) {
-            this.applyTokens(root, 'studio-font-weight', theme.typography.fontWeight);
+        // Border colors
+        if (colors.border) {
+            this.applyTokens(root, 'studio-border', colors.border);
         }
     }
+    applyZIndexTokens(root, zIndex) {
+        const zIndexMap = {
+            dropdown: 'dropdown',
+            sticky: 'sticky',
+            fixed: 'fixed',
+            modalBackdrop: 'modal-backdrop',
+            modal: 'modal',
+            popover: 'popover',
+            tooltip: 'tooltip'
+        };
+        Object.entries(zIndex).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                const cssKey = zIndexMap[key] || key;
+                root.style.setProperty(`--studio-z-${cssKey}`, String(value));
+            }
+        });
+    }
     applyTokens(root, prefix, tokens) {
         Object.entries(tokens).forEach(([key, value]) => {
             if (value !== undefined && value !== null) {
@@ -133,53 +212,606 @@ function provideStudioConfig(config = {}) {
  * @module config
  */
 
+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" }] : []));
+    icons = icons;
+    lucideIcon = computed(() => {
+        const iconName = this.name();
+        return iconName;
+    }, ...(ngDevMode ? [{ debugName: "lucideIcon" }] : []));
+    computedColor = computed(() => {
+        const colorValue = this.color();
+        const colorMap = {
+            'primary': 'var(--studio-primary)',
+            'secondary': 'var(--studio-secondary)',
+            'success': 'var(--studio-success)',
+            'error': 'var(--studio-error)',
+            'warning': 'var(--studio-warning)',
+            'inherit': 'currentColor'
+        };
+        return colorMap[colorValue] || colorValue;
+    }, ...(ngDevMode ? [{ debugName: "computedColor" }] : []));
+    hostClasses = computed(() => {
+        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: `
+    @if (lucideIcon(); as iconName) {
+      <lucide-icon
+        [name]="iconName"
+        [size]="size()"
+        [color]="computedColor()"
+        [strokeWidth]="strokeWidth()"
+        [absoluteStrokeWidth]="absoluteStrokeWidth()"
+      />
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-icon', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.width.px]': 'size()',
+                        '[style.height.px]': 'size()',
+                    }, template: `
+    @if (lucideIcon(); as iconName) {
+      <lucide-icon
+        [name]="iconName"
+        [size]="size()"
+        [color]="computedColor()"
+        [strokeWidth]="strokeWidth()"
+        [absoluteStrokeWidth]="absoluteStrokeWidth()"
+      />
+    }
+  `, 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 }] }] } });
+
+/**
+ * Провайдер иконок для Studio
+ * Регистрирует базовый набор часто используемых иконок
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { provideStudioIcons } from '@eduboxpro/studio';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideStudioIcons()
+ *   ]
+ * };
+ * ```
+ *
+ * Для добавления дополнительных иконок:
+ * @example
+ * ```typescript
+ * import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
+ * import { Zap, Wifi } from 'lucide-angular';
+ *
+ * providers: [
+ *   provideStudioIcons(),
+ *   {
+ *     provide: LUCIDE_ICONS,
+ *     multi: true,
+ *     useValue: new LucideIconProvider({ Zap, Wifi })
+ *   }
+ * ]
+ * ```
+ */
+function provideStudioIcons() {
+    return makeEnvironmentProviders([
+        {
+            provide: LUCIDE_ICONS,
+            multi: true,
+            useValue: new LucideIconProvider({
+                ArrowRight,
+                ArrowLeft,
+                ChevronDown,
+                ChevronUp,
+                ChevronLeft,
+                ChevronRight,
+                Download,
+                Upload,
+                Mail,
+                Phone,
+                Heart,
+                Star,
+                Settings,
+                User,
+                Trash2,
+                Edit,
+                Plus,
+                Minus,
+                Check,
+                X,
+                Search,
+                Filter,
+                ExternalLink,
+                Link,
+                Copy,
+                Share2,
+                Home,
+                Menu,
+                MoreVertical,
+                MoreHorizontal,
+                Bell,
+                Calendar,
+                Clock,
+                Eye,
+                EyeOff,
+                Lock,
+                Unlock,
+                LogIn,
+                LogOut,
+                AlertCircle,
+                AlertTriangle,
+                Info,
+                CheckCircle,
+                XCircle,
+                HelpCircle,
+                File,
+                FileText,
+                Folder,
+                Image,
+                Save,
+                Printer,
+                RefreshCw,
+                RotateCw,
+                Loader,
+                Loader2,
+                ShoppingCart
+            })
+        }
+    ]);
+}
+
+/**
+ * Проверяет безопасность URL для навигации
+ *
+ * @param url - URL для проверки
+ * @returns true если URL безопасен (http/https или относительный)
+ *
+ * @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);
+        // Разрешаем только http(s) и относительные URL (пустой protocol)
+        return ['http:', 'https:', ''].includes(parsed.protocol);
+    }
+    catch {
+        // Невалидный URL
+        return false;
+    }
+}
+/**
+ * Sanitize URL перед использованием в навигации
+ *
+ * @param url - URL для sanitization
+ * @returns Безопасный URL или '#' если URL небезопасен
+ *
+ * @example
+ * ```typescript
+ * sanitizeUrl('https://example.com') // 'https://example.com'
+ * sanitizeUrl('javascript:alert(1)') // '#' (с предупреждением в консоли)
+ * ```
+ */
+function sanitizeUrl(url) {
+    if (!isSafeUrl(url)) {
+        console.warn(`[Studio] Unsafe URL blocked: ${url}`);
+        return '#';
+    }
+    return url;
+}
+
+/**
+ * Объединяет CSS классы, игнорируя falsy значения
+ *
+ * @param classes - Массив классов (строки, undefined, null, false)
+ * @returns Строка с объединенными классами
+ *
+ * @example
+ * ```typescript
+ * classNames('btn', 'btn-primary') // 'btn btn-primary'
+ * classNames('btn', isActive && 'active') // 'btn active' если isActive=true, иначе 'btn'
+ * classNames('btn', undefined, null, false, 'large') // 'btn large'
+ * ```
+ */
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+
+/**
+ * Создает computed signal с fallback chain: input → config → default
+ *
+ * Упрощает паттерн configurable inputs, убирая boilerplate код.
+ *
+ * @param inputSignal - Input signal от пользователя
+ * @param configSignal - Config значение (может быть undefined)
+ * @param defaultValue - Fallback значение
+ * @returns Computed signal с resolved значением
+ *
+ * @example
+ * ```typescript
+ * export class ButtonComponent {
+ *   private defaults = computed(() => this.configService.config().components?.button);
+ *
+ *   // Input
+ *   variantInput = input<Variant | undefined>(undefined, { alias: 'variant' });
+ *
+ *   // Resolved value с config fallback
+ *   variant = withConfigDefault(
+ *     this.variantInput,
+ *     computed(() => this.defaults()?.variant),
+ *     '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" }] : []));
+    // Appearance - inputs
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    // Values with config defaults
+    variant = withConfigDefault(this.variantInput, computed(() => this.badgeDefaults()?.variant), 'solid');
+    size = withConfigDefault(this.sizeInput, computed(() => this.badgeDefaults()?.size), 'md');
+    color = withConfigDefault(this.colorInput, computed(() => this.badgeDefaults()?.color), 'primary');
+    radius = withConfigDefault(this.radiusInput, computed(() => this.badgeDefaults()?.radius), 'full');
+    // Icon
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
+    // Dot indicator
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : []));
+    dotColor = input(...(ngDevMode ? [undefined, { debugName: "dotColor" }] : []));
+    // Removable
+    removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : []));
+    removed = output();
+    // Clickable & Navigation
+    href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+    target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    clicked = output();
+    // Number badge
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    showZero = input(true, ...(ngDevMode ? [{ debugName: "showZero" }] : []));
+    // Typography
+    uppercase = input(false, ...(ngDevMode ? [{ debugName: "uppercase" }] : []));
+    bold = input(false, ...(ngDevMode ? [{ debugName: "bold" }] : []));
+    // Animation
+    pulse = input(false, ...(ngDevMode ? [{ debugName: "pulse" }] : []));
+    // Auto color (будет реализовано позже если нужно)
+    autoColor = input(false, ...(ngDevMode ? [{ debugName: "autoColor" }] : []));
+    iconSize = computed(() => {
+        const sizeMap = { sm: 12, md: 14, lg: 16 };
+        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)) {
+            // Не показывать 0 если showZero = false
+            if (numVal === 0 && !this.showZero())
+                return '';
+            // Показать max+ если превышает максимум
+            const maxVal = this.max();
+            if (maxVal !== undefined && numVal > maxVal) {
+                return `${maxVal}+`;
+            }
+            return numVal.toString();
+        }
+        return val.toString();
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    isVisible = computed(() => {
+        // Скрыть если значение 0 и showZero = false
+        const val = this.value();
+        if (val !== undefined && val !== null) {
+            const numVal = typeof val === 'number' ? val : parseInt(val, 10);
+            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;
+        }
+        // Handle link navigation
+        const url = this.href();
+        if (url) {
+            const safeUrl = sanitizeUrl(url);
+            if (safeUrl === '#') {
+                // URL was blocked - don't navigate
+                return;
+            }
+            const target = this.target();
+            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"] }], 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
+ */
+
 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" }] : []));
+    // Appearance - inputs
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    shadowInput = input(undefined, ...(ngDevMode ? [{ debugName: "shadowInput", alias: 'shadow' }] : [{ alias: 'shadow' }]));
+    compactInput = input(undefined, ...(ngDevMode ? [{ debugName: "compactInput", alias: 'compact' }] : [{ alias: 'compact' }]));
+    // Values with config defaults
+    variant = withConfigDefault(this.variantInput, computed(() => this.buttonDefaults()?.variant), 'solid');
+    size = withConfigDefault(this.sizeInput, computed(() => this.buttonDefaults()?.size), 'md');
+    color = withConfigDefault(this.colorInput, computed(() => this.buttonDefaults()?.color), 'primary');
+    radius = withConfigDefault(this.radiusInput, computed(() => this.buttonDefaults()?.radius), 'sm');
+    shadow = withConfigDefault(this.shadowInput, computed(() => this.buttonDefaults()?.shadow), 'none');
+    compact = withConfigDefault(this.compactInput, computed(() => this.buttonDefaults()?.compact), false);
+    // State
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+    // Layout
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    // Button props
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    // Icon
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
+    // Link mode
+    href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+    target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
+    // Badge
+    badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
+    badgeColor = input('error', ...(ngDevMode ? [{ debugName: "badgeColor" }] : []));
+    // Accessibility
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     clicked = output();
-    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' : ''
-        ].filter(Boolean).join(' ');
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    iconSize = computed(() => {
+        const sizeMap = { sm: 16, md: 18, lg: 20 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    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;
         }
+        // Handle link navigation
+        const url = this.href();
+        if (url) {
+            const safeUrl = sanitizeUrl(url);
+            if (safeUrl === '#') {
+                // URL was blocked - don't navigate
+                return;
+            }
+            const target = this.target();
+            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.1.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 } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : 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">
-      <ng-content />
+      @if (loading()) {
+        <studio-icon
+          name="loader-2"
+          [size]="iconSize()"
+          class="studio-button__spinner"
+        />
+      }
+      @if (!loading() && icon() && iconPosition() === 'left') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (iconPosition() !== 'only' && !loading()) {
+        <ng-content />
+      }
+      @if (!loading() && icon() && iconPosition() === 'right') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (!loading() && icon() && iconPosition() === 'only') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (loading() && iconPosition() === 'only') {
+        <!-- Empty, spinner already shown -->
+      } @else if (loading()) {
+        <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-block}.studio-button{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);border-radius:var(--studio-radius-md)}.studio-button:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-button:active:not(:disabled):not(.studio-button--loading){transform:scale(.98)}.studio-button--sm{padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}.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}.studio-button--lg{padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}.studio-button--solid.studio-button--primary{background:var(--studio-primary);color:#fff}.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-primary-hover)}.studio-button--solid.studio-button--primary:active:not(:disabled):not(.studio-button--loading){background:var(--studio-primary-active)}.studio-button--outline.studio-button--primary{background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-primary);color:#fff}.studio-button--ghost.studio-button--primary{background:transparent;color:var(--studio-primary)}.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:#3b82f61a}.studio-button--solid.studio-button--secondary{background:var(--studio-secondary);color:#fff}.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary-hover)}.studio-button--solid.studio-button--secondary:active:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary-active)}.studio-button--outline.studio-button--secondary{background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary);color:#fff}.studio-button--ghost.studio-button--secondary{background:transparent;color:var(--studio-secondary)}.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:#8b5cf61a}.studio-button--solid.studio-button--success{background:var(--studio-success);color:#fff}.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success-hover)}.studio-button--outline.studio-button--success{background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success);color:#fff}.studio-button--ghost.studio-button--success{background:transparent;color:var(--studio-success)}.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success-bg)}.studio-button--solid.studio-button--error{background:var(--studio-error);color:#fff}.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error-hover)}.studio-button--outline.studio-button--error{background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error);color:#fff}.studio-button--ghost.studio-button--error{background:transparent;color:var(--studio-error)}.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error-bg)}.studio-button--solid.studio-button--warning{background:var(--studio-warning);color:#fff}.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning-hover)}.studio-button--outline.studio-button--warning{background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning);color:#fff}.studio-button--ghost.studio-button--warning{background:transparent;color:var(--studio-warning)}.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning-bg)}.studio-button--full{width:100%}.studio-button--loading{cursor:wait;opacity:.7}.studio-button:disabled{opacity:.5;cursor:not-allowed}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}[data-theme=dark] .studio-button--solid.studio-button--primary,[data-theme=dark] .studio-button--solid.studio-button--secondary,[data-theme=dark] .studio-button--solid.studio-button--success,[data-theme=dark] .studio-button--solid.studio-button--error,[data-theme=dark] .studio-button--solid.studio-button--warning{box-shadow:var(--studio-shadow-sm)}\n"], 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:#3b82f61a}:host(.studio-button--solid.studio-button--secondary){background:var(--studio-secondary);color:#fff}:host(.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-hover)}:host(.studio-button--outline.studio-button--secondary){background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}:host(.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary);color:#fff}:host(.studio-button--ghost.studio-button--secondary){background:transparent;color:var(--studio-secondary)}:host(.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:#8b5cf61a}:host(.studio-button--solid.studio-button--success){background:var(--studio-success);color:#fff}:host(.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-hover)}:host(.studio-button--outline.studio-button--success){background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}:host(.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success);color:#fff}:host(.studio-button--ghost.studio-button--success){background:transparent;color:var(--studio-success)}:host(.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-bg)}:host(.studio-button--solid.studio-button--error){background:var(--studio-error);color:#fff}:host(.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-hover)}:host(.studio-button--outline.studio-button--error){background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}:host(.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error);color:#fff}:host(.studio-button--ghost.studio-button--error){background:transparent;color:var(--studio-error)}:host(.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-bg)}:host(.studio-button--solid.studio-button--warning){background:var(--studio-warning);color:#fff}:host(.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-hover)}:host(.studio-button--outline.studio-button--warning){background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning);color:#fff}:host(.studio-button--ghost.studio-button--warning){background:transparent;color:var(--studio-warning)}:host(.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-bg)}:host(.studio-button--full){width:100%}:host(.studio-button--icon-only){padding:0;aspect-ratio:1}:host(.studio-button--icon-only.studio-button--sm){width:2rem;padding:0}:host(.studio-button--icon-only.studio-button--md){width:2.5rem;padding:0}:host(.studio-button--icon-only.studio-button--lg){width:3rem;padding:0}:host(.studio-button--loading){cursor:wait;pointer-events:none}:host([disabled]){opacity:.6;cursor:not-allowed!important;background:var(--studio-bg-secondary)!important;color:var(--studio-text-tertiary)!important;border-color:var(--studio-border-primary)!important}:host([disabled]:hover){transform:none!important;background:var(--studio-bg-secondary)!important}:host(:active:not([disabled]):not(.studio-button--loading)){transform:scale(.98)}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-button__spinner{animation:studio-spin 1s linear infinite}@keyframes studio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-button__badge{position:absolute;top:-.375rem;right:-.375rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:.625rem;font-weight:var(--studio-font-weight-semibold);line-height:1;color:#fff;border-radius:var(--studio-radius-full);box-shadow:0 0 0 2px var(--studio-bg-primary)}.studio-button__badge--primary{background:var(--studio-primary)}.studio-button__badge--error{background:var(--studio-error)}.studio-button__badge--warning{background:var(--studio-warning)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'studio-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'studio-button', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                        '[attr.disabled]': 'disabled() ? "" : null',
-                        '[attr.type]': 'type()',
+                        '[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()',
                         '(click)': 'handleClick($event)'
                     }, template: `
     <span class="studio-button__content">
-      <ng-content />
+      @if (loading()) {
+        <studio-icon
+          name="loader-2"
+          [size]="iconSize()"
+          class="studio-button__spinner"
+        />
+      }
+      @if (!loading() && icon() && iconPosition() === 'left') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (iconPosition() !== 'only' && !loading()) {
+        <ng-content />
+      }
+      @if (!loading() && icon() && iconPosition() === 'right') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (!loading() && icon() && iconPosition() === 'only') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (loading() && iconPosition() === 'only') {
+        <!-- Empty, spinner already shown -->
+      } @else if (loading()) {
+        <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-block}.studio-button{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);border-radius:var(--studio-radius-md)}.studio-button:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-button:active:not(:disabled):not(.studio-button--loading){transform:scale(.98)}.studio-button--sm{padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}.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}.studio-button--lg{padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}.studio-button--solid.studio-button--primary{background:var(--studio-primary);color:#fff}.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-primary-hover)}.studio-button--solid.studio-button--primary:active:not(:disabled):not(.studio-button--loading){background:var(--studio-primary-active)}.studio-button--outline.studio-button--primary{background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-primary);color:#fff}.studio-button--ghost.studio-button--primary{background:transparent;color:var(--studio-primary)}.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:#3b82f61a}.studio-button--solid.studio-button--secondary{background:var(--studio-secondary);color:#fff}.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary-hover)}.studio-button--solid.studio-button--secondary:active:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary-active)}.studio-button--outline.studio-button--secondary{background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary);color:#fff}.studio-button--ghost.studio-button--secondary{background:transparent;color:var(--studio-secondary)}.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:#8b5cf61a}.studio-button--solid.studio-button--success{background:var(--studio-success);color:#fff}.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success-hover)}.studio-button--outline.studio-button--success{background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success);color:#fff}.studio-button--ghost.studio-button--success{background:transparent;color:var(--studio-success)}.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success-bg)}.studio-button--solid.studio-button--error{background:var(--studio-error);color:#fff}.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error-hover)}.studio-button--outline.studio-button--error{background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error);color:#fff}.studio-button--ghost.studio-button--error{background:transparent;color:var(--studio-error)}.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error-bg)}.studio-button--solid.studio-button--warning{background:var(--studio-warning);color:#fff}.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning-hover)}.studio-button--outline.studio-button--warning{background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning);color:#fff}.studio-button--ghost.studio-button--warning{background:transparent;color:var(--studio-warning)}.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning-bg)}.studio-button--full{width:100%}.studio-button--loading{cursor:wait;opacity:.7}.studio-button:disabled{opacity:.5;cursor:not-allowed}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}[data-theme=dark] .studio-button--solid.studio-button--primary,[data-theme=dark] .studio-button--solid.studio-button--secondary,[data-theme=dark] .studio-button--solid.studio-button--success,[data-theme=dark] .studio-button--solid.studio-button--error,[data-theme=dark] .studio-button--solid.studio-button--warning{box-shadow:var(--studio-shadow-sm)}\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 }] }], 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:#3b82f61a}:host(.studio-button--solid.studio-button--secondary){background:var(--studio-secondary);color:#fff}:host(.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-hover)}:host(.studio-button--outline.studio-button--secondary){background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}:host(.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary);color:#fff}:host(.studio-button--ghost.studio-button--secondary){background:transparent;color:var(--studio-secondary)}:host(.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:#8b5cf61a}:host(.studio-button--solid.studio-button--success){background:var(--studio-success);color:#fff}:host(.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-hover)}:host(.studio-button--outline.studio-button--success){background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}:host(.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success);color:#fff}:host(.studio-button--ghost.studio-button--success){background:transparent;color:var(--studio-success)}:host(.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-bg)}:host(.studio-button--solid.studio-button--error){background:var(--studio-error);color:#fff}:host(.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-hover)}:host(.studio-button--outline.studio-button--error){background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}:host(.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error);color:#fff}:host(.studio-button--ghost.studio-button--error){background:transparent;color:var(--studio-error)}:host(.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-bg)}:host(.studio-button--solid.studio-button--warning){background:var(--studio-warning);color:#fff}:host(.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-hover)}:host(.studio-button--outline.studio-button--warning){background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning);color:#fff}:host(.studio-button--ghost.studio-button--warning){background:transparent;color:var(--studio-warning)}:host(.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-bg)}:host(.studio-button--full){width:100%}:host(.studio-button--icon-only){padding:0;aspect-ratio:1}:host(.studio-button--icon-only.studio-button--sm){width:2rem;padding:0}:host(.studio-button--icon-only.studio-button--md){width:2.5rem;padding:0}:host(.studio-button--icon-only.studio-button--lg){width:3rem;padding:0}:host(.studio-button--loading){cursor:wait;pointer-events:none}:host([disabled]){opacity:.6;cursor:not-allowed!important;background:var(--studio-bg-secondary)!important;color:var(--studio-text-tertiary)!important;border-color:var(--studio-border-primary)!important}:host([disabled]:hover){transform:none!important;background:var(--studio-bg-secondary)!important}:host(:active:not([disabled]):not(.studio-button--loading)){transform:scale(.98)}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-button__spinner{animation:studio-spin 1s linear infinite}@keyframes studio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-button__badge{position:absolute;top:-.375rem;right:-.375rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:.625rem;font-weight:var(--studio-font-weight-semibold);line-height:1;color:#fff;border-radius:var(--studio-radius-full);box-shadow:0 0 0 2px var(--studio-bg-primary)}.studio-button__badge--primary{background:var(--studio-primary)}.studio-button__badge--error{background:var(--studio-error)}.studio-button__badge--warning{background:var(--studio-warning)}\n"] }]
+        }], 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
@@ -200,11 +832,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
  */
@@ -216,5 +843,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, STUDIO_CONFIG, StudioConfigService, provideStudioConfig };
+export { BadgeComponent, ButtonComponent, IconComponent, STUDIO_CONFIG, StudioConfigService, classNames, isSafeUrl, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map