@eduboxpro/studio 0.1.12 → 0.1.13

package/fesm2022/eduboxpro-studio.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, contentChild, viewChild, model, HostListener, PLATFORM_ID, Renderer2, Directive } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, viewChild, DOCUMENT as DOCUMENT$1, DestroyRef, contentChild, model, HostListener, PLATFORM_ID, Renderer2, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import * as LucideIcons from 'lucide-angular';
 import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS } from 'lucide-angular';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
 import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { filter } from 'rxjs/operators';
@@ -1278,6 +1279,400 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "<label\n  [for]=\"checkboxId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <!-- Checkbox input -->\n  <input\n    type=\"checkbox\"\n    [id]=\"checkboxId()\"\n    [name]=\"name()\"\n    [checked]=\"internalChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"ariaChecked()\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? checkboxId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-checkbox__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Custom checkbox -->\n  <span [ngClass]=\"checkboxClasses()\">\n    <!-- Checkmark icon -->\n    @if (internalChecked() && !indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M13.3333 4L6 11.3333L2.66666 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n\n    <!-- Indeterminate icon -->\n    @if (indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon studio-checkbox__icon--indeterminate\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <!-- Label content -->\n  @if (label() || description()) {\n    <span class=\"studio-checkbox__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-checkbox__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-checkbox__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-checkbox__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n<!-- Helper text / Error message -->\n@if (showHint() || showError()) {\n  <div\n    [id]=\"checkboxId() + '-description'\"\n    class=\"studio-checkbox__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-checkbox__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-checkbox__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-checkbox-wrapper--label-left{flex-direction:row-reverse}.studio-checkbox-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-checkbox-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-checkbox-wrapper--md{font-size:var(--studio-font-size-base)}.studio-checkbox-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-checkbox__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base)}.studio-checkbox--sm{width:1rem;height:1rem}.studio-checkbox--md{width:1.25rem;height:1.25rem}.studio-checkbox--lg{width:1.5rem;height:1.5rem}.studio-checkbox--radius-none{border-radius:0}.studio-checkbox--radius-sm{border-radius:var(--studio-radius-sm)}.studio-checkbox--radius-md{border-radius:var(--studio-radius-md)}.studio-checkbox--radius-lg{border-radius:var(--studio-radius-lg)}.studio-checkbox--radius-full{border-radius:var(--studio-radius-full)}.studio-checkbox--default.studio-checkbox--checked,.studio-checkbox--default.studio-checkbox--indeterminate{border-color:transparent}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--outlined.studio-checkbox--checked,.studio-checkbox--outlined.studio-checkbox--indeterminate{background-color:transparent}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--primary{border-color:var(--studio-primary);color:var(--studio-primary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--secondary{border-color:var(--studio-secondary);color:var(--studio-secondary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--success{border-color:var(--studio-success);color:var(--studio-success)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--error{border-color:var(--studio-error);color:var(--studio-error)}.studio-checkbox--filled.studio-checkbox--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-checkbox--filled.studio-checkbox--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-checkbox--filled.studio-checkbox--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-checkbox--filled.studio-checkbox--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);border-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);border-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);border-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--error:not(.studio-checkbox--checked):not(.studio-checkbox--indeterminate){border-color:var(--studio-error)}.studio-checkbox:hover:not(.studio-checkbox--disabled){border-color:var(--studio-border-secondary)}.studio-checkbox__input:focus-visible+.studio-checkbox{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-checkbox__icon{width:100%;height:100%;opacity:0;transform:scale(.8);transition:all var(--studio-transition-fast)}.studio-checkbox--checked .studio-checkbox__icon,.studio-checkbox--indeterminate .studio-checkbox__icon{opacity:1;transform:scale(1)}.studio-checkbox__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-checkbox__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-checkbox__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-checkbox__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--label-left+.studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--sm .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--sm.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--lg .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox-wrapper--lg.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
+class ColorConverter {
+    static hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    static rgbToHex(r, g, b) {
+        return "#" + [r, g, b]
+            .map(x => {
+            const hex = Math.round(x).toString(16);
+            return hex.length === 1 ? "0" + hex : hex;
+        })
+            .join("");
+    }
+    static rgbToHsl(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0, s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            l: Math.round(l * 100)
+        };
+    }
+    static hslToRgb(h, s, l) {
+        h = h / 360;
+        s = s / 100;
+        l = l / 100;
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l;
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        };
+    }
+    static format(color, format) {
+        switch (format) {
+            case 'hex':
+                return color.hex;
+            case 'rgb':
+                if (color.alpha < 1) {
+                    return `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.alpha})`;
+                }
+                return `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
+            case 'hsl':
+                if (color.alpha < 1) {
+                    return `hsla(${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%, ${color.alpha})`;
+                }
+                return `hsl(${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%)`;
+            default:
+                return color.hex;
+        }
+    }
+    static parse(colorString) {
+        const trimmed = colorString.trim();
+        const hexMatch = /^#?([a-f\d]{6})$/i.exec(trimmed);
+        if (hexMatch) {
+            const hex = '#' + hexMatch[1];
+            const rgb = this.hexToRgb(hex);
+            if (!rgb)
+                return null;
+            return {
+                hex,
+                rgb,
+                hsl: this.rgbToHsl(rgb.r, rgb.g, rgb.b),
+                alpha: 1
+            };
+        }
+        const rgbMatch = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/i.exec(trimmed);
+        if (rgbMatch) {
+            const r = parseInt(rgbMatch[1]);
+            const g = parseInt(rgbMatch[2]);
+            const b = parseInt(rgbMatch[3]);
+            const alpha = rgbMatch[4] ? parseFloat(rgbMatch[4]) : 1;
+            return {
+                hex: this.rgbToHex(r, g, b),
+                rgb: { r, g, b },
+                hsl: this.rgbToHsl(r, g, b),
+                alpha
+            };
+        }
+        const hslMatch = /^hsla?\((\d+),\s*(\d+)%?,\s*(\d+)%?(?:,\s*([\d.]+))?\)$/i.exec(trimmed);
+        if (hslMatch) {
+            const h = parseInt(hslMatch[1]);
+            const s = parseInt(hslMatch[2]);
+            const l = parseInt(hslMatch[3]);
+            const alpha = hslMatch[4] ? parseFloat(hslMatch[4]) : 1;
+            const rgb = this.hslToRgb(h, s, l);
+            return {
+                hex: this.rgbToHex(rgb.r, rgb.g, rgb.b),
+                rgb,
+                hsl: { h, s, l },
+                alpha
+            };
+        }
+        return null;
+    }
+    static isValid(colorString) {
+        return this.parse(colorString) !== null;
+    }
+}
+
+const DEFAULT_COLOR_PRESETS = [
+    {
+        label: 'Brand Colors',
+        colors: [
+            { label: 'Primary', value: '#7c3aed' },
+            { label: 'Secondary', value: '#6366f1' },
+            { label: 'Success', value: '#10b981' },
+            { label: 'Error', value: '#ef4444' },
+            { label: 'Warning', value: '#f59e0b' },
+            { label: 'Info', value: '#3b82f6' }
+        ]
+    },
+    {
+        label: 'Grays',
+        colors: [
+            { value: '#ffffff' },
+            { value: '#f3f4f6' },
+            { value: '#d1d5db' },
+            { value: '#9ca3af' },
+            { value: '#6b7280' },
+            { value: '#374151' },
+            { value: '#1f2937' },
+            { value: '#000000' }
+        ]
+    },
+    {
+        label: 'Common',
+        colors: [
+            { value: '#ff0000' },
+            { value: '#ff7f00' },
+            { value: '#ffff00' },
+            { value: '#00ff00' },
+            { value: '#0000ff' },
+            { value: '#4b0082' },
+            { value: '#9400d3' },
+            { value: '#ff1493' }
+        ]
+    }
+];
+
+class ColorPickerComponent {
+    configService = inject(StudioConfigService);
+    pickerDefaults = computed(() => this.configService.config().components?.colorPicker, ...(ngDevMode ? [{ debugName: "pickerDefaults" }] : []));
+    colorAreaCanvas = viewChild('colorArea', ...(ngDevMode ? [{ debugName: "colorAreaCanvas" }] : []));
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    variant = withConfigDefault(this.variantInput, computed(() => this.pickerDefaults()?.variant), 'inline');
+    size = withConfigDefault(this.sizeInput, computed(() => this.pickerDefaults()?.size), 'md');
+    format = input('hex', ...(ngDevMode ? [{ debugName: "format" }] : []));
+    showAlpha = input(false, ...(ngDevMode ? [{ debugName: "showAlpha" }] : []));
+    showPresets = input(true, ...(ngDevMode ? [{ debugName: "showPresets" }] : []));
+    showFormatToggle = input(true, ...(ngDevMode ? [{ debugName: "showFormatToggle" }] : []));
+    showCopyButton = input(true, ...(ngDevMode ? [{ debugName: "showCopyButton" }] : []));
+    presets = input(...(ngDevMode ? [undefined, { debugName: "presets" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    errorMessage = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    colorChange = output();
+    colorValueChange = output();
+    copied = output();
+    currentColor = signal(this.createColorValue('#000000'), ...(ngDevMode ? [{ debugName: "currentColor" }] : []));
+    hue = signal(0, ...(ngDevMode ? [{ debugName: "hue" }] : []));
+    saturation = signal(100, ...(ngDevMode ? [{ debugName: "saturation" }] : []));
+    lightness = signal(50, ...(ngDevMode ? [{ debugName: "lightness" }] : []));
+    alpha = signal(1, ...(ngDevMode ? [{ debugName: "alpha" }] : []));
+    currentFormat = signal('hex', ...(ngDevMode ? [{ debugName: "currentFormat" }] : []));
+    generatedId = `studio-color-picker-${Math.random().toString(36).substr(2, 9)}`;
+    onChange = () => { };
+    onTouched = () => { };
+    isDragging = false;
+    constructor() {
+        effect(() => {
+            this.currentFormat.set(this.format());
+        });
+        effect(() => {
+            this.renderColorArea();
+        });
+    }
+    ngAfterViewInit() {
+        this.renderColorArea();
+    }
+    displayColor = computed(() => {
+        const color = this.currentColor();
+        return ColorConverter.format(color, this.currentFormat());
+    }, ...(ngDevMode ? [{ debugName: "displayColor" }] : []));
+    effectivePresets = computed(() => {
+        const custom = this.presets();
+        return custom && custom.length > 0 ? custom : DEFAULT_COLOR_PRESETS;
+    }, ...(ngDevMode ? [{ debugName: "effectivePresets" }] : []));
+    hostClasses = computed(() => classNames('studio-color-picker', `studio-color-picker--${this.variant()}`, `studio-color-picker--${this.size()}`, this.error() && 'studio-color-picker--error', this.disabled() && 'studio-color-picker--disabled'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    writeValue(value) {
+        if (!value)
+            return;
+        const colorValue = ColorConverter.parse(value);
+        if (colorValue) {
+            this.currentColor.set(colorValue);
+            this.hue.set(colorValue.hsl.h);
+            this.saturation.set(colorValue.hsl.s);
+            this.lightness.set(colorValue.hsl.l);
+            this.alpha.set(colorValue.alpha);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) { }
+    onHueChange(event) {
+        const value = +event.target.value;
+        this.hue.set(value);
+        this.updateColor();
+    }
+    onAlphaChange(event) {
+        const value = +event.target.value;
+        this.alpha.set(value / 100);
+        this.updateColor();
+    }
+    onColorAreaMouseDown(event) {
+        if (this.disabled() || this.readonly())
+            return;
+        this.isDragging = true;
+        this.updateColorArea(event);
+        const onMouseMove = (e) => {
+            if (this.isDragging) {
+                this.updateColorArea(e);
+            }
+        };
+        const onMouseUp = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+    updateColorArea(event) {
+        const canvas = this.colorAreaCanvas()?.nativeElement;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
+        const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height));
+        this.saturation.set((x / rect.width) * 100);
+        this.lightness.set(100 - (y / rect.height) * 100);
+        this.updateColor();
+    }
+    updateColor() {
+        const h = this.hue();
+        const s = this.saturation();
+        const l = this.lightness();
+        const rgb = ColorConverter.hslToRgb(h, s, l);
+        const hex = ColorConverter.rgbToHex(rgb.r, rgb.g, rgb.b);
+        const colorValue = {
+            hex,
+            rgb,
+            hsl: { h, s, l },
+            alpha: this.alpha()
+        };
+        this.currentColor.set(colorValue);
+        const formatted = ColorConverter.format(colorValue, this.currentFormat());
+        this.onChange(formatted);
+        this.colorChange.emit(formatted);
+        this.colorValueChange.emit(colorValue);
+    }
+    renderColorArea() {
+        const canvas = this.colorAreaCanvas()?.nativeElement;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const width = canvas.width;
+        const height = canvas.height;
+        const hue = this.hue();
+        const horizGradient = ctx.createLinearGradient(0, 0, width, 0);
+        horizGradient.addColorStop(0, 'white');
+        horizGradient.addColorStop(1, `hsl(${hue}, 100%, 50%)`);
+        ctx.fillStyle = horizGradient;
+        ctx.fillRect(0, 0, width, height);
+        const vertGradient = ctx.createLinearGradient(0, 0, 0, height);
+        vertGradient.addColorStop(0, 'transparent');
+        vertGradient.addColorStop(1, 'black');
+        ctx.fillStyle = vertGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    toggleFormat() {
+        const formats = ['hex', 'rgb', 'hsl'];
+        const current = this.currentFormat();
+        const index = formats.indexOf(current);
+        const next = formats[(index + 1) % formats.length];
+        this.currentFormat.set(next);
+    }
+    async copyColor() {
+        const color = this.displayColor();
+        try {
+            await navigator.clipboard.writeText(color);
+            this.copied.emit(color);
+        }
+        catch (error) {
+            console.error('Copy failed:', error);
+        }
+    }
+    selectPreset(preset) {
+        this.writeValue(preset.value);
+        this.updateColor();
+    }
+    isPresetGroup(item) {
+        return item && 'colors' in item && Array.isArray(item.colors);
+    }
+    createColorValue(hex) {
+        const rgb = ColorConverter.hexToRgb(hex) || { r: 0, g: 0, b: 0 };
+        const hsl = ColorConverter.rgbToHsl(rgb.r, rgb.g, rgb.b);
+        return {
+            hex,
+            rgb,
+            hsl,
+            alpha: 1
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ColorPickerComponent, isStandalone: true, selector: "studio-color-picker", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, showFormatToggle: { classPropertyName: "showFormatToggle", publicName: "showFormatToggle", isSignal: true, isRequired: false, transformFunction: null }, showCopyButton: { classPropertyName: "showCopyButton", publicName: "showCopyButton", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", colorValueChange: "colorValueChange", copied: "copied" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorPickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "colorAreaCanvas", first: true, predicate: ["colorArea"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label [for]=\"generatedId\" class=\"studio-color-picker__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-color-picker__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-color-picker__picker\">\n  <div class=\"studio-color-picker__preview\">\n    <div\n      class=\"studio-color-picker__preview-color\"\n      [style.background-color]=\"displayColor()\"\n    ></div>\n    <div class=\"studio-color-picker__preview-info\">\n      <span class=\"studio-color-picker__preview-value\">{{ displayColor() }}</span>\n      @if (showFormatToggle()) {\n        <button\n          type=\"button\"\n          class=\"studio-color-picker__format-btn\"\n          (click)=\"toggleFormat()\"\n          [disabled]=\"disabled() || readonly()\"\n        >\n          {{ currentFormat().toUpperCase() }}\n        </button>\n      }\n    </div>\n    @if (showCopyButton()) {\n      <button\n        type=\"button\"\n        class=\"studio-color-picker__copy-btn\"\n        (click)=\"copyColor()\"\n        [disabled]=\"disabled() || readonly()\"\n        aria-label=\"Copy color\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n          <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n        </svg>\n      </button>\n    }\n  </div>\n\n  <div class=\"studio-color-picker__area\">\n    <canvas\n      #colorArea\n      class=\"studio-color-picker__canvas\"\n      width=\"280\"\n      height=\"180\"\n      (mousedown)=\"onColorAreaMouseDown($event)\"\n    ></canvas>\n    <div\n      class=\"studio-color-picker__cursor\"\n      [style.left.%]=\"saturation()\"\n      [style.top.%]=\"100 - lightness()\"\n    ></div>\n  </div>\n\n  <div class=\"studio-color-picker__sliders\">\n    <div class=\"studio-color-picker__slider\">\n      <div class=\"studio-color-picker__slider-label\">Hue</div>\n      <input\n        type=\"range\"\n        class=\"studio-color-picker__hue-slider\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        (input)=\"onHueChange($event)\"\n        [disabled]=\"disabled() || readonly()\"\n        aria-label=\"Hue\"\n      />\n    </div>\n\n    @if (showAlpha()) {\n      <div class=\"studio-color-picker__slider\">\n        <div class=\"studio-color-picker__slider-label\">Opacity</div>\n        <input\n          type=\"range\"\n          class=\"studio-color-picker__alpha-slider\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"alpha() * 100\"\n          (input)=\"onAlphaChange($event)\"\n          [disabled]=\"disabled() || readonly()\"\n          aria-label=\"Opacity\"\n        />\n        <span class=\"studio-color-picker__alpha-value\">{{ (alpha() * 100).toFixed(0) }}%</span>\n      </div>\n    }\n  </div>\n\n  @if (showPresets() && effectivePresets().length > 0) {\n    <div class=\"studio-color-picker__presets\">\n      @for (preset of effectivePresets(); track $index) {\n        @if (isPresetGroup(preset)) {\n          <div class=\"studio-color-picker__preset-group\">\n            <div class=\"studio-color-picker__preset-group-label\">{{ preset.label }}</div>\n            <div class=\"studio-color-picker__preset-swatches\">\n              @for (color of preset.colors; track color.value) {\n                <button\n                  type=\"button\"\n                  class=\"studio-color-picker__preset-swatch\"\n                  [style.background-color]=\"color.value\"\n                  [title]=\"color.label || color.value\"\n                  (click)=\"selectPreset(color)\"\n                  [disabled]=\"disabled() || readonly()\"\n                ></button>\n              }\n            </div>\n          </div>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"studio-color-picker__preset-swatch\"\n            [style.background-color]=\"preset.value\"\n            [title]=\"preset.label || preset.value\"\n            (click)=\"selectPreset(preset)\"\n            [disabled]=\"disabled() || readonly()\"\n          ></button>\n        }\n      }\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"studio-color-picker__hint\">\n    {{ hint() }}\n  </span>\n}\n\n@if (error() && errorMessage()) {\n  <span class=\"studio-color-picker__error\" role=\"alert\">\n    {{ errorMessage() }}\n  </span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.5rem;font-family:var(--studio-font-family)}.studio-color-picker__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary)}.studio-color-picker__label .studio-color-picker__required{color:var(--studio-error);margin-left:.125rem}.studio-color-picker__picker{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md)}.studio-color-picker__preview{display:flex;align-items:center;gap:.75rem}.studio-color-picker__preview-color{width:3rem;height:3rem;border-radius:var(--studio-radius-sm);border:1px solid var(--studio-border-primary);flex-shrink:0}.studio-color-picker__preview-info{flex:1;display:flex;align-items:center;gap:.5rem}.studio-color-picker__preview-value{font-family:var(--studio-font-mono, monospace);font-size:.875rem;color:var(--studio-text-primary)}.studio-color-picker__format-btn{padding:.25rem .5rem;background:var(--studio-bg-secondary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-sm);font-size:.75rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-secondary);cursor:pointer;transition:all var(--studio-transition-fast)}.studio-color-picker__format-btn:hover:not(:disabled){background:var(--studio-bg-tertiary);color:var(--studio-text-primary)}.studio-color-picker__format-btn:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__copy-btn{padding:.5rem;background:none;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-sm);color:var(--studio-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--studio-transition-fast)}.studio-color-picker__copy-btn:hover:not(:disabled){background:var(--studio-bg-secondary);color:var(--studio-text-primary)}.studio-color-picker__copy-btn:active:not(:disabled){transform:scale(.95)}.studio-color-picker__copy-btn:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__area{position:relative;width:100%;aspect-ratio:28/18;border-radius:var(--studio-radius-sm);overflow:hidden;border:1px solid var(--studio-border-primary)}.studio-color-picker__canvas{display:block;width:100%;height:100%;cursor:crosshair}.studio-color-picker__cursor{position:absolute;width:16px;height:16px;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003}.studio-color-picker__sliders{display:flex;flex-direction:column;gap:.75rem}.studio-color-picker__slider{display:flex;flex-direction:column;gap:.5rem}.studio-color-picker__slider-label{font-size:.75rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-secondary)}.studio-color-picker__hue-slider{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);outline:none;cursor:pointer}.studio-color-picker__hue-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--studio-border-primary);cursor:pointer;box-shadow:0 2px 4px #0003}.studio-color-picker__hue-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--studio-border-primary);cursor:pointer;box-shadow:0 2px 4px #0003}.studio-color-picker__hue-slider:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__alpha-slider{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:linear-gradient(to right,transparent 0%,var(--studio-text-primary) 100%);outline:none;cursor:pointer;position:relative}.studio-color-picker__alpha-slider:before{content:\"\";position:absolute;inset:0;border-radius:6px;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px;z-index:-1}.studio-color-picker__alpha-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--studio-border-primary);cursor:pointer;box-shadow:0 2px 4px #0003}.studio-color-picker__alpha-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--studio-border-primary);cursor:pointer;box-shadow:0 2px 4px #0003}.studio-color-picker__alpha-slider:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__alpha-value{font-size:.75rem;color:var(--studio-text-secondary);margin-left:auto}.studio-color-picker__presets{display:flex;flex-direction:column;gap:.75rem}.studio-color-picker__preset-group{display:flex;flex-direction:column;gap:.5rem}.studio-color-picker__preset-group-label{font-size:.75rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-secondary)}.studio-color-picker__preset-swatches{display:flex;flex-wrap:wrap;gap:.375rem}.studio-color-picker__preset-swatch{width:2rem;height:2rem;border-radius:var(--studio-radius-sm);border:1px solid var(--studio-border-primary);cursor:pointer;transition:all var(--studio-transition-fast);padding:0}.studio-color-picker__preset-swatch:hover:not(:disabled){transform:scale(1.1);box-shadow:0 2px 8px #00000026}.studio-color-picker__preset-swatch:active:not(:disabled){transform:scale(1.05)}.studio-color-picker__preset-swatch:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-color-picker__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}:host(.studio-color-picker--disabled) .studio-color-picker__picker{opacity:.6;pointer-events:none}:host(.studio-color-picker--error) .studio-color-picker__picker{border-color:var(--studio-error)}:host(.studio-color-picker--sm) .studio-color-picker__preview-color{width:2.5rem;height:2.5rem}:host(.studio-color-picker--sm) .studio-color-picker__picker{padding:.75rem}:host(.studio-color-picker--lg) .studio-color-picker__preview-color{width:3.5rem;height:3.5rem}:host(.studio-color-picker--lg) .studio-color-picker__picker{padding:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-color-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "@if (label()) {\n  <label [for]=\"generatedId\" class=\"studio-color-picker__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-color-picker__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-color-picker__picker\">\n  <div class=\"studio-color-picker__preview\">\n    <div\n      class=\"studio-color-picker__preview-color\"\n      [style.background-color]=\"displayColor()\"\n    ></div>\n    <div class=\"studio-color-picker__preview-info\">\n      <span class=\"studio-color-picker__preview-value\">{{ displayColor() }}</span>\n      @if (showFormatToggle()) {\n        <button\n          type=\"button\"\n          class=\"studio-color-picker__format-btn\"\n          (click)=\"toggleFormat()\"\n          [disabled]=\"disabled() || readonly()\"\n        >\n          {{ currentFormat().toUpperCase() }}\n        </button>\n      }\n    </div>\n    @if (showCopyButton()) {\n      <button\n        type=\"button\"\n        class=\"studio-color-picker__copy-btn\"\n        (click)=\"copyColor()\"\n        [disabled]=\"disabled() || readonly()\"\n        aria-label=\"Copy color\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n          <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n        </svg>\n      </button>\n    }\n  </div>\n\n  <div class=\"studio-color-picker__area\">\n    <canvas\n      #colorArea\n      class=\"studio-color-picker__canvas\"\n      width=\"280\"\n      height=\"180\"\n      (mousedown)=\"onColorAreaMouseDown($event)\"\n    ></canvas>\n    <div\n      class=\"studio-color-picker__cursor\"\n      [style.left.%]=\"saturation()\"\n      [style.top.%]=\"100 - lightness()\"\n    ></div>\n  </div>\n\n  <div class=\"studio-color-picker__sliders\">\n    <div class=\"studio-color-picker__slider\">\n      <div class=\"studio-color-picker__slider-label\">Hue</div>\n      <input\n        type=\"range\"\n        class=\"studio-color-picker__hue-slider\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        (input)=\"onHueChange($event)\"\n        [disabled]=\"disabled() || readonly()\"\n        aria-label=\"Hue\"\n      />\n    </div>\n\n    @if (showAlpha()) {\n      <div class=\"studio-color-picker__slider\">\n        <div class=\"studio-color-picker__slider-label\">Opacity</div>\n        <input\n          type=\"range\"\n          class=\"studio-color-picker__alpha-slider\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"alpha() * 100\"\n          (input)=\"onAlphaChange($event)\"\n          [disabled]=\"disabled() || readonly()\"\n          aria-label=\"Opacity\"\n        />\n        <span class=\"studio-color-picker__alpha-value\">{{ (alpha() * 100).toFixed(0) }}%</span>\n      </div>\n    }\n  </div>\n\n  @if (showPresets() && effectivePresets().length > 0) {\n    <div class=\"studio-color-picker__presets\">\n      @for (preset of effectivePresets(); track $index) {\n        @if (isPresetGroup(preset)) {\n          <div class=\"studio-color-picker__preset-group\">\n            <div class=\"studio-color-picker__preset-group-label\">{{ preset.label }}</div>\n            <div class=\"studio-color-picker__preset-swatches\">\n              @for (color of preset.colors; track color.value) {\n                <button\n                  type=\"button\"\n                  class=\"studio-color-picker__preset-swatch\"\n                  [style.background-color]=\"color.value\"\n                  [title]=\"color.label || color.value\"\n                  (click)=\"selectPreset(color)\"\n                  [disabled]=\"disabled() || readonly()\"\n                ></button>\n              }\n            </div>\n          </div>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"studio-color-picker__preset-swatch\"\n            [style.background-color]=\"preset.value\"\n            [title]=\"preset.label || preset.value\"\n            (click)=\"selectPreset(preset)\"\n            [disabled]=\"disabled() || readonly()\"\n          ></button>\n        }\n      }\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"studio-color-picker__hint\">\n    {{ hint() }}\n  </span>\n}\n\n@if (error() && errorMessage()) {\n  <span class=\"studio-color-picker__error\" role=\"alert\">\n    {{ errorMessage() }}\n  </span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.5rem;font-family:var(--studio-font-family)}.studio-color-picker__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary)}.studio-color-picker__label .studio-color-picker__required{color:var(--studio-error);margin-left:.125rem}.studio-color-picker__picker{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md)}.studio-color-picker__preview{display:flex;align-items:center;gap:.75rem}.studio-color-picker__preview-color{width:3rem;height:3rem;border-radius:var(--studio-radius-sm);border:1px solid var(--studio-border-primary);flex-shrink:0}.studio-color-picker__preview-info{flex:1;display:flex;align-items:center;gap:.5rem}.studio-color-picker__preview-value{font-family:var(--studio-font-mono, monospace);font-size:.875rem;color:var(--studio-text-primary)}.studio-color-picker__format-btn{padding:.25rem .5rem;background:var(--studio-bg-secondary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-sm);font-size:.75rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-secondary);cursor:pointer;transition:all var(--studio-transition-fast)}.studio-color-picker__format-btn:hover:not(:disabled){background:var(--studio-bg-tertiary);color:var(--studio-text-primary)}.studio-color-picker__format-btn:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__copy-btn{padding:.5rem;background:none;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-sm);color:var(--studio-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--studio-transition-fast)}.studio-color-picker__copy-btn:hover:not(:disabled){background:var(--studio-bg-secondary);color:var(--studio-text-primary)}.studio-color-picker__copy-btn:active:not(:disabled){transform:scale(.95)}.studio-color-picker__copy-btn:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__area{position:relative;width:100%;aspect-ratio:28/18;border-radius:var(--studio-radius-sm);overflow:hidden;border:1px solid var(--studio-border-primary)}.studio-color-picker__canvas{display:block;width:100%;height:100%;cursor:crosshair}.studio-color-picker__cursor{position:absolute;width:16px;height:16px;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003}.studio-color-picker__sliders{display:flex;flex-direction:column;gap:.75rem}.studio-color-picker__slider{display:flex;flex-direction:column;gap:.5rem}.studio-color-picker__slider-label{font-size:.75rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-secondary)}.studio-color-picker__hue-slider{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);outline:none;cursor:pointer}.studio-color-picker__hue-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--studio-border-primary);cursor:pointer;box-shadow:0 2px 4px #0003}.studio-color-picker__hue-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--studio-border-primary);cursor:pointer;box-shadow:0 2px 4px #0003}.studio-color-picker__hue-slider:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__alpha-slider{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:linear-gradient(to right,transparent 0%,var(--studio-text-primary) 100%);outline:none;cursor:pointer;position:relative}.studio-color-picker__alpha-slider:before{content:\"\";position:absolute;inset:0;border-radius:6px;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px;z-index:-1}.studio-color-picker__alpha-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--studio-border-primary);cursor:pointer;box-shadow:0 2px 4px #0003}.studio-color-picker__alpha-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--studio-border-primary);cursor:pointer;box-shadow:0 2px 4px #0003}.studio-color-picker__alpha-slider:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__alpha-value{font-size:.75rem;color:var(--studio-text-secondary);margin-left:auto}.studio-color-picker__presets{display:flex;flex-direction:column;gap:.75rem}.studio-color-picker__preset-group{display:flex;flex-direction:column;gap:.5rem}.studio-color-picker__preset-group-label{font-size:.75rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-secondary)}.studio-color-picker__preset-swatches{display:flex;flex-wrap:wrap;gap:.375rem}.studio-color-picker__preset-swatch{width:2rem;height:2rem;border-radius:var(--studio-radius-sm);border:1px solid var(--studio-border-primary);cursor:pointer;transition:all var(--studio-transition-fast);padding:0}.studio-color-picker__preset-swatch:hover:not(:disabled){transform:scale(1.1);box-shadow:0 2px 8px #00000026}.studio-color-picker__preset-swatch:active:not(:disabled){transform:scale(1.05)}.studio-color-picker__preset-swatch:disabled{opacity:.5;cursor:not-allowed}.studio-color-picker__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-color-picker__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}:host(.studio-color-picker--disabled) .studio-color-picker__picker{opacity:.6;pointer-events:none}:host(.studio-color-picker--error) .studio-color-picker__picker{border-color:var(--studio-error)}:host(.studio-color-picker--sm) .studio-color-picker__preview-color{width:2.5rem;height:2.5rem}:host(.studio-color-picker--sm) .studio-color-picker__picker{padding:.75rem}:host(.studio-color-picker--lg) .studio-color-picker__preview-color{width:3.5rem;height:3.5rem}:host(.studio-color-picker--lg) .studio-color-picker__picker{padding:1.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { colorAreaCanvas: [{ type: i0.ViewChild, args: ['colorArea', { isSignal: true }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], showFormatToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFormatToggle", required: false }] }], showCopyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCopyButton", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], colorValueChange: [{ type: i0.Output, args: ["colorValueChange"] }], copied: [{ type: i0.Output, args: ["copied"] }] } });
+
 /**
  * Service for programmatic control of Drawer components
  *
@@ -2322,6 +2717,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "<div class=\"studio-navbar__left\">\n  <ng-content select=\"[navbarLeft]\" />\n</div>\n\n<div class=\"studio-navbar__center\">\n  <ng-content select=\"[navbarCenter]\" />\n</div>\n\n<div class=\"studio-navbar__right\">\n  <ng-content select=\"[navbarRight]\" />\n</div>\n\n<ng-content />\n", styles: [":host{display:flex;align-items:center;width:100%;min-height:var(--navbar-height, 4rem);padding:0 var(--navbar-padding-x, 1.5rem);gap:var(--navbar-gap, 1.5rem);background:var(--studio-bg-primary);transition:all .2s cubic-bezier(.4,0,.2,1);--navbar-height: 4rem;--navbar-padding-x: 1.5rem;--navbar-gap: 1.5rem;--navbar-z-index: 1000}:host(.studio-navbar--sm){--navbar-height: 3.5rem;--navbar-padding-x: 1rem;--navbar-gap: 1rem}:host(.studio-navbar--md){--navbar-height: 4rem;--navbar-padding-x: 1.5rem;--navbar-gap: 1.5rem}:host(.studio-navbar--lg){--navbar-height: 5rem;--navbar-padding-x: 2rem;--navbar-gap: 2rem}:host(.studio-navbar--sticky){position:sticky;top:0;z-index:var(--navbar-z-index)}:host(.studio-navbar--blur){-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);background:hsl(var(--studio-bg-primary-hsl)/.8)}:host(.studio-navbar--default){background:var(--studio-bg-primary);border-bottom:1px solid hsl(var(--studio-border-primary-hsl)/.1)}:host(.studio-navbar--filled){background:var(--studio-bg-secondary);border-bottom:1px solid var(--studio-border-secondary)}:host(.studio-navbar--outlined){background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-left:none;border-right:none}:host(.studio-navbar--ghost){background:transparent}:host(.studio-navbar--transparent){background:transparent}:host(.studio-navbar--primary){background:var(--studio-primary);color:var(--studio-primary-contrast);border-bottom:1px solid hsl(var(--studio-primary-hsl)/.2)}:host(.studio-navbar--secondary){background:var(--studio-secondary);color:var(--studio-secondary-contrast);border-bottom:1px solid hsl(var(--studio-secondary-hsl)/.2)}:host(.studio-navbar--bordered){border-bottom:1px solid var(--studio-border-secondary)}:host(.studio-navbar--shadow-none){box-shadow:none}:host(.studio-navbar--shadow-sm){box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}:host(.studio-navbar--shadow-md){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}:host(.studio-navbar--shadow-lg){box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.studio-navbar__left{display:flex;align-items:center;gap:var(--navbar-gap);flex-shrink:0}.studio-navbar__center{display:flex;align-items:center;justify-content:center;gap:calc(var(--navbar-gap) * .75);flex:1}.studio-navbar__right{display:flex;align-items:center;gap:calc(var(--navbar-gap) * .5);flex-shrink:0;margin-left:auto}@media (max-width: 768px){:host{--navbar-padding-x: 1rem;--navbar-gap: 1rem}.studio-navbar__center{display:none}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], customHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "customHeight", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], blurBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurBg", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], navbarClick: [{ type: i0.Output, args: ["navbarClick"] }] } });
 
+/**
+ * RadioButton component for selecting a single option from a group
+ *
+ * @example
+ * <studio-radio-button
+ *   [(ngModel)]="selectedValue"
+ *   [value]="'option1'"
+ *   label="Option 1"
+ *   name="options"
+ * />
+ */
+class RadioButtonComponent {
+    configService = inject(StudioConfigService);
+    radioDefaults = computed(() => this.configService.config().components?.radioButton, ...(ngDevMode ? [{ debugName: "radioDefaults" }] : []));
+    size = input(this.radioDefaults()?.size ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    color = input(this.radioDefaults()?.color ?? 'primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    variant = input(this.radioDefaults()?.variant ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    radius = input(this.radioDefaults()?.radius ?? 'full', ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    labelPosition = input(this.radioDefaults()?.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    changed = output();
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    radioId = signal(`studio-radio-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "radioId" }] : []));
+    hostClasses = computed(() => ({
+        'studio-radio-wrapper': true,
+        [`studio-radio-wrapper--${this.size()}`]: true,
+        'studio-radio-wrapper--disabled': this.disabled(),
+        'studio-radio-wrapper--error': this.error(),
+        'studio-radio-wrapper--focused': this.isFocused(),
+        'studio-radio-wrapper--label-left': this.labelPosition() === 'left'
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    radioClasses = computed(() => ({
+        'studio-radio': true,
+        [`studio-radio--${this.size()}`]: true,
+        [`studio-radio--${this.color()}`]: true,
+        [`studio-radio--${this.variant()}`]: true,
+        [`studio-radio--radius-${this.radius()}`]: true,
+        'studio-radio--checked': this.isChecked(),
+        'studio-radio--disabled': this.disabled(),
+        'studio-radio--error': this.error()
+    }), ...(ngDevMode ? [{ debugName: "radioClasses" }] : []));
+    showError = computed(() => this.error() && this.errorMessage(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    showHint = computed(() => !this.error() && this.hint(), ...(ngDevMode ? [{ debugName: "showHint" }] : []));
+    isChecked = computed(() => this.internalValue() === this.value(), ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) { }
+    handleChange(event) {
+        if (this.disabled() || this.readonly()) {
+            event.preventDefault();
+            return;
+        }
+        const inputValue = this.value();
+        this.internalValue.set(inputValue);
+        this.onChange(inputValue);
+        this.changed.emit(inputValue);
+    }
+    handleFocus() {
+        this.isFocused.set(true);
+    }
+    handleBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    handleLabelClick(event) {
+        if (this.disabled() || this.readonly()) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: RadioButtonComponent, isStandalone: true, selector: "studio-radio-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "class": "hostClasses()", "attr.data-size": "size()", "attr.data-color": "color()", "attr.data-disabled": "disabled()", "attr.data-error": "error()" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioButtonComponent),
+                multi: true
+            }], ngImport: i0, template: "<label\n  [for]=\"radioId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"radioId()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"isChecked() ? 'true' : 'false'\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? radioId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-radio__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <span [ngClass]=\"radioClasses()\">\n    @if (isChecked()) {\n      <span class=\"studio-radio__dot\"></span>\n    }\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"studio-radio__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-radio__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-radio__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-radio__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n@if (showHint() || showError()) {\n  <div\n    [id]=\"radioId() + '-description'\"\n    class=\"studio-radio__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-radio__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-radio__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-radio-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-radio-wrapper--label-left{flex-direction:row-reverse}.studio-radio-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-radio-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-radio-wrapper--md{font-size:var(--studio-font-size-base)}.studio-radio-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-radio__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-radio{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base);border-radius:var(--studio-radius-full)}.studio-radio--sm{width:1rem;height:1rem}.studio-radio--md{width:1.25rem;height:1.25rem}.studio-radio--lg{width:1.5rem;height:1.5rem}.studio-radio--radius-none{border-radius:0}.studio-radio--radius-sm{border-radius:var(--studio-radius-sm)}.studio-radio--radius-md{border-radius:var(--studio-radius-md)}.studio-radio--radius-lg{border-radius:var(--studio-radius-lg)}.studio-radio--radius-full{border-radius:var(--studio-radius-full)}.studio-radio--default.studio-radio--checked{border-color:transparent}.studio-radio--default.studio-radio--checked.studio-radio--primary{background-color:var(--studio-primary)}.studio-radio--default.studio-radio--checked.studio-radio--secondary{background-color:var(--studio-secondary)}.studio-radio--default.studio-radio--checked.studio-radio--success{background-color:var(--studio-success)}.studio-radio--default.studio-radio--checked.studio-radio--error{background-color:var(--studio-error)}.studio-radio--outlined.studio-radio--checked{background-color:transparent}.studio-radio--outlined.studio-radio--checked.studio-radio--primary{border-color:var(--studio-primary)}.studio-radio--outlined.studio-radio--checked.studio-radio--primary .studio-radio__dot{background-color:var(--studio-primary)}.studio-radio--outlined.studio-radio--checked.studio-radio--secondary{border-color:var(--studio-secondary)}.studio-radio--outlined.studio-radio--checked.studio-radio--secondary .studio-radio__dot{background-color:var(--studio-secondary)}.studio-radio--outlined.studio-radio--checked.studio-radio--success{border-color:var(--studio-success)}.studio-radio--outlined.studio-radio--checked.studio-radio--success .studio-radio__dot{background-color:var(--studio-success)}.studio-radio--outlined.studio-radio--checked.studio-radio--error{border-color:var(--studio-error)}.studio-radio--outlined.studio-radio--checked.studio-radio--error .studio-radio__dot{background-color:var(--studio-error)}.studio-radio--filled.studio-radio--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-radio--filled.studio-radio--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-radio--filled.studio-radio--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-radio--filled.studio-radio--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-radio--filled.studio-radio--checked.studio-radio--primary{background-color:var(--studio-primary);border-color:var(--studio-primary)}.studio-radio--filled.studio-radio--checked.studio-radio--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary)}.studio-radio--filled.studio-radio--checked.studio-radio--success{background-color:var(--studio-success);border-color:var(--studio-success)}.studio-radio--filled.studio-radio--checked.studio-radio--error{background-color:var(--studio-error);border-color:var(--studio-error)}.studio-radio--error:not(.studio-radio--checked){border-color:var(--studio-error)}.studio-radio:hover:not(.studio-radio--disabled){border-color:var(--studio-border-secondary)}.studio-radio__input:focus-visible+.studio-radio{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-radio__dot{border-radius:var(--studio-radius-full);background-color:var(--studio-text-inverse);opacity:0;transform:scale(.5);transition:all var(--studio-transition-fast)}.studio-radio--sm .studio-radio__dot{width:.375rem;height:.375rem}.studio-radio--md .studio-radio__dot{width:.5rem;height:.5rem}.studio-radio--lg .studio-radio__dot{width:.625rem;height:.625rem}.studio-radio--checked .studio-radio__dot{opacity:1;transform:scale(1)}.studio-radio__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-radio__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-radio__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-radio__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-radio__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-radio-wrapper--label-left+.studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-radio-wrapper--sm .studio-radio__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-radio-wrapper--sm.studio-radio-wrapper--label-left .studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-radio-wrapper--lg .studio-radio__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-radio-wrapper--lg.studio-radio-wrapper--label-left .studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-radio__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-radio__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-radio-button', standalone: true, imports: [CommonModule], providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonComponent),
+                            multi: true
+                        }], host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-color]': 'color()',
+                        '[attr.data-disabled]': 'disabled()',
+                        '[attr.data-error]': 'error()'
+                    }, template: "<label\n  [for]=\"radioId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"radioId()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"isChecked() ? 'true' : 'false'\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? radioId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-radio__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <span [ngClass]=\"radioClasses()\">\n    @if (isChecked()) {\n      <span class=\"studio-radio__dot\"></span>\n    }\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"studio-radio__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-radio__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-radio__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-radio__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n@if (showHint() || showError()) {\n  <div\n    [id]=\"radioId() + '-description'\"\n    class=\"studio-radio__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-radio__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-radio__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-radio-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-radio-wrapper--label-left{flex-direction:row-reverse}.studio-radio-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-radio-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-radio-wrapper--md{font-size:var(--studio-font-size-base)}.studio-radio-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-radio__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-radio{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base);border-radius:var(--studio-radius-full)}.studio-radio--sm{width:1rem;height:1rem}.studio-radio--md{width:1.25rem;height:1.25rem}.studio-radio--lg{width:1.5rem;height:1.5rem}.studio-radio--radius-none{border-radius:0}.studio-radio--radius-sm{border-radius:var(--studio-radius-sm)}.studio-radio--radius-md{border-radius:var(--studio-radius-md)}.studio-radio--radius-lg{border-radius:var(--studio-radius-lg)}.studio-radio--radius-full{border-radius:var(--studio-radius-full)}.studio-radio--default.studio-radio--checked{border-color:transparent}.studio-radio--default.studio-radio--checked.studio-radio--primary{background-color:var(--studio-primary)}.studio-radio--default.studio-radio--checked.studio-radio--secondary{background-color:var(--studio-secondary)}.studio-radio--default.studio-radio--checked.studio-radio--success{background-color:var(--studio-success)}.studio-radio--default.studio-radio--checked.studio-radio--error{background-color:var(--studio-error)}.studio-radio--outlined.studio-radio--checked{background-color:transparent}.studio-radio--outlined.studio-radio--checked.studio-radio--primary{border-color:var(--studio-primary)}.studio-radio--outlined.studio-radio--checked.studio-radio--primary .studio-radio__dot{background-color:var(--studio-primary)}.studio-radio--outlined.studio-radio--checked.studio-radio--secondary{border-color:var(--studio-secondary)}.studio-radio--outlined.studio-radio--checked.studio-radio--secondary .studio-radio__dot{background-color:var(--studio-secondary)}.studio-radio--outlined.studio-radio--checked.studio-radio--success{border-color:var(--studio-success)}.studio-radio--outlined.studio-radio--checked.studio-radio--success .studio-radio__dot{background-color:var(--studio-success)}.studio-radio--outlined.studio-radio--checked.studio-radio--error{border-color:var(--studio-error)}.studio-radio--outlined.studio-radio--checked.studio-radio--error .studio-radio__dot{background-color:var(--studio-error)}.studio-radio--filled.studio-radio--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-radio--filled.studio-radio--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-radio--filled.studio-radio--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-radio--filled.studio-radio--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-radio--filled.studio-radio--checked.studio-radio--primary{background-color:var(--studio-primary);border-color:var(--studio-primary)}.studio-radio--filled.studio-radio--checked.studio-radio--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary)}.studio-radio--filled.studio-radio--checked.studio-radio--success{background-color:var(--studio-success);border-color:var(--studio-success)}.studio-radio--filled.studio-radio--checked.studio-radio--error{background-color:var(--studio-error);border-color:var(--studio-error)}.studio-radio--error:not(.studio-radio--checked){border-color:var(--studio-error)}.studio-radio:hover:not(.studio-radio--disabled){border-color:var(--studio-border-secondary)}.studio-radio__input:focus-visible+.studio-radio{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-radio__dot{border-radius:var(--studio-radius-full);background-color:var(--studio-text-inverse);opacity:0;transform:scale(.5);transition:all var(--studio-transition-fast)}.studio-radio--sm .studio-radio__dot{width:.375rem;height:.375rem}.studio-radio--md .studio-radio__dot{width:.5rem;height:.5rem}.studio-radio--lg .studio-radio__dot{width:.625rem;height:.625rem}.studio-radio--checked .studio-radio__dot{opacity:1;transform:scale(1)}.studio-radio__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-radio__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-radio__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-radio__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-radio__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-radio-wrapper--label-left+.studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-radio-wrapper--sm .studio-radio__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-radio-wrapper--sm.studio-radio-wrapper--label-left .studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-radio-wrapper--lg .studio-radio__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-radio-wrapper--lg.studio-radio-wrapper--label-left .studio-radio__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-radio__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-radio__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
 class SelectComponent {
     configService = inject(StudioConfigService);
     selectDefaults = computed(() => this.configService.config().components?.select, ...(ngDevMode ? [{ debugName: "selectDefaults" }] : []));
@@ -2722,6 +3228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  *
  * @example
  * <studio-switch [(checked)]="isEnabled" label="Enable feature" />
+ * <studio-switch [(ngModel)]="isEnabled" label="Enable feature" />
  */
 class SwitchComponent {
     configService = inject(StudioConfigService);
@@ -2737,11 +3244,25 @@ class SwitchComponent {
     size = withConfigDefault(this.sizeInput, computed(() => this.switchDefaults()?.size), 'md');
     color = withConfigDefault(this.colorInput, computed(() => this.switchDefaults()?.color), 'primary');
     checkedChange = output();
+    internalChecked = signal(false, ...(ngDevMode ? [{ debugName: "internalChecked" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
     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" }] : []));
+    hostClasses = computed(() => classNames('studio-switch', `studio-switch--${this.size()}`, `studio-switch--${this.color()}`, this.internalChecked() && 'studio-switch--checked', this.disabled() && 'studio-switch--disabled'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    writeValue(value) {
+        this.internalChecked.set(value ?? false);
+        this.checked.set(value ?? false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) { }
     handleClick() {
         if (this.disabled())
             return;
@@ -2754,12 +3275,21 @@ class SwitchComponent {
         this.toggle();
     }
     toggle() {
-        const newValue = !this.checked();
+        const newValue = !this.internalChecked();
+        this.internalChecked.set(newValue);
         this.checked.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
         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: `
+    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": "internalChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-label": "ariaLabel() || label()", "tabindex": "disabled() ? -1 : 0" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SwitchComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
     <span class="studio-switch__container">
       @if (label() && labelPosition() === 'left') {
         <span class="studio-switch__label studio-switch__label--left">
@@ -2770,7 +3300,7 @@ class SwitchComponent {
       <span class="studio-switch__track">
         <span class="studio-switch__thumb">
           @if (showIcons()) {
-            @if (checked()) {
+            @if (internalChecked()) {
               <studio-icon name="check" [size]="iconSize()" color="inherit" />
             } @else {
               <studio-icon name="x" [size]="iconSize()" color="inherit" />
@@ -2789,10 +3319,16 @@ class SwitchComponent {
 }
 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: {
+            args: [{ selector: 'studio-switch', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SwitchComponent),
+                            multi: true
+                        }
+                    ], host: {
                         '[class]': 'hostClasses()',
                         '[attr.role]': '"switch"',
-                        '[attr.aria-checked]': 'checked()',
+                        '[attr.aria-checked]': 'internalChecked()',
                         '[attr.aria-disabled]': 'disabled() ? "true" : null',
                         '[attr.aria-label]': 'ariaLabel() || label()',
                         '(click)': 'handleClick()',
@@ -2810,7 +3346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       <span class="studio-switch__track">
         <span class="studio-switch__thumb">
           @if (showIcons()) {
-            @if (checked()) {
+            @if (internalChecked()) {
               <studio-icon name="check" [size]="iconSize()" color="inherit" />
             } @else {
               <studio-icon name="x" [size]="iconSize()" color="inherit" />
@@ -3344,6 +3880,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `, styles: [":host{display:inline-block}:host(.studio-button-toggle-group--disabled){opacity:.6;pointer-events:none}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+class InspectorComponent {
+    configService = inject(StudioConfigService);
+    componentSize = input('sm', ...(ngDevMode ? [{ debugName: "componentSize" }] : []));
+    componentVariant = input('outline', ...(ngDevMode ? [{ debugName: "componentVariant" }] : []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : []));
+    showDefaultIndicator = input(true, ...(ngDevMode ? [{ debugName: "showDefaultIndicator" }] : []));
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    expandedByDefault = input(true, ...(ngDevMode ? [{ debugName: "expandedByDefault" }] : []));
+    expandedSectionsInput = input([], ...(ngDevMode ? [{ debugName: "expandedSectionsInput", alias: 'expandedSections' }] : [{ alias: 'expandedSections' }]));
+    showGroupLabels = input(true, ...(ngDevMode ? [{ debugName: "showGroupLabels" }] : []));
+    groupDivider = input('line', ...(ngDevMode ? [{ debugName: "groupDivider" }] : []));
+    groupDividerSpacing = input('md', ...(ngDevMode ? [{ debugName: "groupDividerSpacing" }] : []));
+    labelWidth = input('auto', ...(ngDevMode ? [{ debugName: "labelWidth" }] : []));
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
+    sectionTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "sectionTemplate" }] : []));
+    parameterTemplates = input(undefined, ...(ngDevMode ? [{ debugName: "parameterTemplates" }] : []));
+    ariaLabel = input('Inspector panel', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaDescribedBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    sectionToggled = output();
+    parameterFocused = output();
+    parameterBlurred = output();
+    values = signal(null, ...(ngDevMode ? [{ debugName: "values" }] : []));
+    expandedSections = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedSections" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            const inputSections = this.expandedSectionsInput();
+            if (inputSections.length > 0) {
+                this.expandedSections.set(new Set(inputSections));
+            }
+        });
+    }
+    hostClasses = computed(() => classNames('studio-inspector', this.compact() && 'studio-inspector--compact', `studio-inspector--spacing-${this.spacing()}`), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    isSectionExpanded(componentId) {
+        return this.expandedSections().has(componentId);
+    }
+    toggleSection(componentId) {
+        if (!this.collapsible())
+            return;
+        const expanded = new Set(this.expandedSections());
+        if (expanded.has(componentId)) {
+            expanded.delete(componentId);
+        }
+        else {
+            expanded.add(componentId);
+        }
+        this.expandedSections.set(expanded);
+        this.sectionToggled.emit({
+            id: componentId,
+            expanded: expanded.has(componentId)
+        });
+    }
+    onParameterChange(componentId, groupId, parameterId, newValue) {
+        const updated = structuredClone(this.values());
+        if (!updated)
+            return;
+        const section = updated.sections.find(c => c.id === componentId);
+        if (!section)
+            return;
+        let parameter;
+        if (groupId) {
+            const group = section.groups?.find(g => g.id === groupId);
+            parameter = group?.parameters.find(p => p.id === parameterId);
+        }
+        else {
+            parameter = section.parameters?.find(p => p.id === parameterId);
+        }
+        if (parameter) {
+            parameter.value = newValue;
+        }
+        this.values.set(updated);
+        this.onChange(updated);
+        this.onTouched();
+    }
+    onCheckboxChange(componentId, groupId, parameterId, optionValue, checked) {
+        const updated = structuredClone(this.values());
+        if (!updated)
+            return;
+        const section = updated.sections.find(c => c.id === componentId);
+        if (!section)
+            return;
+        let parameter;
+        if (groupId) {
+            const group = section.groups?.find(g => g.id === groupId);
+            parameter = group?.parameters.find(p => p.id === parameterId);
+        }
+        else {
+            parameter = section.parameters?.find(p => p.id === parameterId);
+        }
+        if (parameter && parameter.type === 'checkbox') {
+            const currentValues = Array.isArray(parameter.value) ? parameter.value : [];
+            if (checked) {
+                if (!currentValues.includes(optionValue)) {
+                    parameter.value = [...currentValues, optionValue];
+                }
+            }
+            else {
+                parameter.value = currentValues.filter(v => v !== optionValue);
+            }
+        }
+        this.values.set(updated);
+        this.onChange(updated);
+        this.onTouched();
+    }
+    onRadioChange(componentId, groupId, parameterId, newValue) {
+        this.onParameterChange(componentId, groupId, parameterId, newValue);
+    }
+    getRadioName(componentId, groupId, parameterId) {
+        return `${componentId}-${groupId || 'root'}-${parameterId}`;
+    }
+    isChecked(parameter, optionValue) {
+        if (parameter.type === 'checkbox') {
+            return Array.isArray(parameter.value) && parameter.value.includes(optionValue);
+        }
+        else if (parameter.type === 'radio') {
+            return parameter.value === optionValue;
+        }
+        return false;
+    }
+    isRadioChecked(parameter, optionValue) {
+        return parameter.value === optionValue;
+    }
+    isDefault(parameter, optionValue) {
+        return parameter.default !== undefined && parameter.default === optionValue;
+    }
+    trackBySectionId(_, section) {
+        return section.id;
+    }
+    trackByGroupId(_, group) {
+        return group.id;
+    }
+    trackByParameterId(_, param) {
+        return param.id;
+    }
+    trackByOptionValue(_, option) {
+        return option.value;
+    }
+    writeValue(value) {
+        this.values.set(value);
+        this.initializeExpandedSections();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(_) { }
+    initializeExpandedSections() {
+        const expanded = new Set();
+        const inputSections = this.expandedSectionsInput();
+        if (inputSections.length > 0) {
+            inputSections.forEach(id => expanded.add(id));
+        }
+        else if (this.expandedByDefault()) {
+            this.values()?.sections.forEach(c => {
+                if (c.expanded !== false) {
+                    expanded.add(c.id);
+                }
+            });
+        }
+        else {
+            this.values()?.sections.forEach(c => {
+                if (c.expanded === true) {
+                    expanded.add(c.id);
+                }
+            });
+        }
+        this.expandedSections.set(expanded);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: InspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: InspectorComponent, isStandalone: true, selector: "studio-inspector", inputs: { componentSize: { classPropertyName: "componentSize", publicName: "componentSize", isSignal: true, isRequired: false, transformFunction: null }, componentVariant: { classPropertyName: "componentVariant", publicName: "componentVariant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showDefaultIndicator: { classPropertyName: "showDefaultIndicator", publicName: "showDefaultIndicator", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expandedByDefault: { classPropertyName: "expandedByDefault", publicName: "expandedByDefault", isSignal: true, isRequired: false, transformFunction: null }, expandedSectionsInput: { classPropertyName: "expandedSectionsInput", publicName: "expandedSections", isSignal: true, isRequired: false, transformFunction: null }, showGroupLabels: { classPropertyName: "showGroupLabels", publicName: "showGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, groupDivider: { classPropertyName: "groupDivider", publicName: "groupDivider", isSignal: true, isRequired: false, transformFunction: null }, groupDividerSpacing: { classPropertyName: "groupDividerSpacing", publicName: "groupDividerSpacing", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, sectionTemplate: { classPropertyName: "sectionTemplate", publicName: "sectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, parameterTemplates: { classPropertyName: "parameterTemplates", publicName: "parameterTemplates", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sectionToggled: "sectionToggled", parameterFocused: "parameterFocused", parameterBlurred: "parameterBlurred" }, host: { properties: { "class": "hostClasses()", "attr.role": "\"region\"", "attr.aria-label": "ariaLabel()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InspectorComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "@if (values()) {\n  <div class=\"studio-inspector__container\">\n    @for (section of values()!.sections; track trackBySectionId($index, section)) {\n      <div class=\"studio-inspector__section\"\n           [class.studio-inspector__section--expanded]=\"isSectionExpanded(section.id)\"\n           [class.studio-inspector__section--collapsed]=\"!isSectionExpanded(section.id)\">\n\n        <studio-button\n          variant=\"ghost\"\n          [fullWidth]=\"true\"\n          class=\"studio-inspector__section-header\"\n          [class.studio-inspector__section-header--collapsible]=\"collapsible()\"\n          [disabled]=\"!collapsible()\"\n          [attr.aria-expanded]=\"isSectionExpanded(section.id)\"\n          [attr.aria-controls]=\"'section-content-' + section.id\"\n          (click)=\"toggleSection(section.id)\">\n\n          @if (showIcons() && section.icon) {\n            <studio-icon\n              [name]=\"section.icon\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-icon\"\n            />\n          }\n\n          <span class=\"studio-inspector__section-title\">{{ section.title }}</span>\n\n          @if (collapsible()) {\n            <studio-icon\n              [name]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-toggle\"\n            />\n          }\n        </studio-button>\n\n        @if (isSectionExpanded(section.id)) {\n          <div\n            class=\"studio-inspector__section-content\"\n            [id]=\"'section-content-' + section.id\">\n\n            @if (section.groups) {\n              @for (group of section.groups; track trackByGroupId($index, group); let isLast = $last) {\n                <div class=\"studio-inspector__group\">\n\n                  @if (showGroupLabels() && group.label) {\n                    <div class=\"studio-inspector__group-label\">{{ group.label }}</div>\n                  }\n\n                  @for (param of group.parameters; track trackByParameterId($index, param)) {\n                    <div class=\"studio-inspector__parameter\">\n                      @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                        <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                      }\n\n                      @if (param.type === 'text') {\n                        <studio-input\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'number') {\n                        <div class=\"studio-inspector__number-input\">\n                          <studio-input\n                            type=\"number\"\n                            [ngModel]=\"param.value\"\n                            [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                            (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                            [variant]=\"componentVariant()\"\n                            [size]=\"componentSize()\"\n                            [min]=\"param.min\"\n                            [max]=\"param.max\"\n                            [step]=\"param.step\"\n                            [disabled]=\"param.disabled || false\"\n                            [readonly]=\"param.readonly || false\"\n                            [fullWidth]=\"fullWidth()\"\n                          />\n                          @if (param.suffix) {\n                            <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'textarea') {\n                        <studio-textarea\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'color') {\n                        <studio-color-picker\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [size]=\"componentSize()\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'select') {\n                        <studio-select\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [options]=\"param.options || []\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'boolean') {\n                        <studio-switch\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [label]=\"param.label\"\n                          [size]=\"componentSize()\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'checkbox') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <studio-checkbox\n                              [ngModel]=\"isChecked(param, option.value)\"\n                              [name]=\"section.id + '-' + group.id + '-' + param.id + '-' + option.value\"\n                              (ngModelChange)=\"onCheckboxChange(section.id, group.id, param.id, option.value, $event)\"\n                              [label]=\"option.label\"\n                              [disabled]=\"param.disabled || option.disabled || false\"\n                              [size]=\"componentSize()\"\n                            />\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'radio') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <div class=\"studio-inspector__option\">\n                              <studio-radio-button\n                                [ngModel]=\"param.value\"\n                                (ngModelChange)=\"onRadioChange(section.id, group.id, param.id, $event)\"\n                                [value]=\"option.value\"\n                                [label]=\"option.label\"\n                                [name]=\"getRadioName(section.id, group.id, param.id)\"\n                                [disabled]=\"param.disabled || option.disabled || false\"\n                                [size]=\"componentSize()\"\n                              />\n                              @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                                <span class=\"studio-inspector__default-indicator\">(default)</span>\n                              }\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      @if (param.hint) {\n                        <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                      }\n                    </div>\n                  }\n\n                  @if (!isLast && groupDivider() !== 'none') {\n                    <div class=\"studio-inspector__group-divider\"\n                         [class.studio-inspector__group-divider--line]=\"groupDivider() === 'line'\"\n                         [class.studio-inspector__group-divider--space]=\"groupDivider() === 'space'\">\n                    </div>\n                  }\n                </div>\n              }\n            }\n\n            @if (section.parameters) {\n              @for (param of section.parameters; track trackByParameterId($index, param)) {\n                <div class=\"studio-inspector__parameter\">\n                  @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                    <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                  }\n\n                  @if (param.type === 'text') {\n                    <studio-input\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'number') {\n                    <div class=\"studio-inspector__number-input\">\n                      <studio-input\n                        type=\"number\"\n                        [ngModel]=\"param.value\"\n                        [name]=\"section.id + '-' + param.id\"\n                        (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                        [variant]=\"componentVariant()\"\n                        [size]=\"componentSize()\"\n                        [min]=\"param.min\"\n                        [max]=\"param.max\"\n                        [step]=\"param.step\"\n                        [disabled]=\"param.disabled || false\"\n                        [readonly]=\"param.readonly || false\"\n                        [fullWidth]=\"fullWidth()\"\n                      />\n                      @if (param.suffix) {\n                        <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'textarea') {\n                    <studio-textarea\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'color') {\n                    <studio-color-picker\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [size]=\"componentSize()\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'select') {\n                    <studio-select\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [options]=\"param.options || []\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'boolean') {\n                    <studio-switch\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [label]=\"param.label\"\n                      [size]=\"componentSize()\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'checkbox') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <studio-checkbox\n                          [ngModel]=\"isChecked(param, option.value)\"\n                          [name]=\"section.id + '-' + param.id + '-' + option.value\"\n                          (ngModelChange)=\"onCheckboxChange(section.id, null, param.id, option.value, $event)\"\n                          [label]=\"option.label\"\n                          [disabled]=\"param.disabled || option.disabled || false\"\n                          [size]=\"componentSize()\"\n                        />\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'radio') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <div class=\"studio-inspector__option\">\n                          <studio-radio-button\n                            [ngModel]=\"param.value\"\n                            (ngModelChange)=\"onRadioChange(section.id, null, param.id, $event)\"\n                            [value]=\"option.value\"\n                            [label]=\"option.label\"\n                            [name]=\"getRadioName(section.id, null, param.id)\"\n                            [disabled]=\"param.disabled || option.disabled || false\"\n                            [size]=\"componentSize()\"\n                          />\n                          @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                            <span class=\"studio-inspector__default-indicator\">(default)</span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  @if (param.hint) {\n                    <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-inspector__container{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__section{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);overflow:hidden}.studio-inspector__section-header{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--studio-bg-secondary);border:none;border-bottom:1px solid var(--studio-border-primary);cursor:pointer;transition:background var(--studio-transition-fast);text-align:left}.studio-inspector__section-header--collapsible:hover{background:var(--studio-bg-tertiary)}.studio-inspector__section-header:disabled{cursor:default}.studio-inspector__section-icon{color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__section-title{flex:1;font-size:.875rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-inspector__section-toggle{color:var(--studio-text-secondary);flex-shrink:0;transition:transform var(--studio-transition-fast)}.studio-inspector__section--collapsed .studio-inspector__section-toggle{transform:rotate(-90deg)}.studio-inspector__section--collapsed .studio-inspector__section-content{display:none}.studio-inspector__section--expanded .studio-inspector__section-toggle{transform:rotate(0)}.studio-inspector__section-content{padding:1rem;display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group-label{font-size:.75rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);text-transform:uppercase;letter-spacing:.05em}.studio-inspector__group-divider--line{height:1px;background:var(--studio-border-primary);margin:.5rem 0}.studio-inspector__group-divider--space{height:.5rem}.studio-inspector__parameter{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__parameter-label{font-size:.8125rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary)}.studio-inspector__parameter-hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-inspector__number-input{display:flex;align-items:center;gap:.5rem}.studio-inspector__suffix{font-size:.875rem;color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__options{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__option{display:flex;align-items:center;gap:.5rem}.studio-inspector__default-indicator{font-size:.75rem;color:var(--studio-text-tertiary);font-style:italic}:host(.studio-inspector--compact) .studio-inspector__container{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__section-header{padding:.625rem .75rem}:host(.studio-inspector--compact) .studio-inspector__section-content{padding:.75rem;gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-sm) .studio-inspector__section-content{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-lg) .studio-inspector__section-content{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__parameter{gap:.625rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group-divider--space{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: InputComponent, selector: "studio-input", inputs: ["variant", "size", "radius", "disabled", "readonly", "loading", "type", "inputmode", "autocomplete", "placeholder", "maxLength", "minLength", "min", "max", "step", "pattern", "label", "floatingLabel", "hint", "required", "error", "errorMessage", "prefixIcon", "suffixIcon", "clearable", "showPasswordToggle", "fullWidth", "autoFocus", "name", "id", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "cleared", "entered"] }, { kind: "component", type: CheckboxComponent, selector: "studio-checkbox", inputs: ["size", "color", "variant", "radius", "label", "labelPosition", "description", "hint", "required", "error", "errorMessage", "disabled", "readonly", "indeterminate", "name", "tabIndex", "value"], outputs: ["changed"] }, { kind: "component", type: RadioButtonComponent, selector: "studio-radio-button", inputs: ["size", "color", "variant", "radius", "label", "labelPosition", "description", "hint", "required", "error", "errorMessage", "disabled", "readonly", "name", "tabIndex", "value"], outputs: ["changed"] }, { kind: "component", type: ColorPickerComponent, selector: "studio-color-picker", inputs: ["variant", "size", "format", "showAlpha", "showPresets", "showFormatToggle", "showCopyButton", "presets", "label", "hint", "required", "error", "errorMessage", "disabled", "readonly"], outputs: ["colorChange", "colorValueChange", "copied"] }, { kind: "component", type: SelectComponent, selector: "studio-select", inputs: ["variant", "size", "radius", "options", "placeholder", "multiple", "searchable", "clearable", "disabled", "loading", "label", "floatingLabel", "hint", "error", "errorMessage", "required", "prefixIcon", "suffixIcon", "fullWidth", "maxHeight", "position", "searchPlaceholder"], outputs: ["valueChange", "searchChange", "opened", "closed", "optionSelected"] }, { kind: "component", type: TextareaComponent, selector: "studio-textarea", inputs: ["variant", "size", "color", "radius", "label", "floatingLabel", "placeholder", "hint", "rows", "minRows", "maxRows", "autoResize", "resize", "maxLength", "showCharCount", "charCountPosition", "required", "minLength", "error", "errorMessage", "disabled", "readonly", "fullWidth", "name", "autocomplete", "spellcheck", "clearable", "loading"], outputs: ["changed", "focused", "blurred", "keyPressed"] }, { kind: "component", type: SwitchComponent, selector: "studio-switch", inputs: ["checked", "disabled", "label", "labelPosition", "showIcons", "ariaLabel", "size", "color"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: InspectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-inspector', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ButtonComponent,
+                        IconComponent,
+                        InputComponent,
+                        CheckboxComponent,
+                        RadioButtonComponent,
+                        ColorPickerComponent,
+                        SelectComponent,
+                        TextareaComponent,
+                        SwitchComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InspectorComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': '"region"',
+                        '[attr.aria-label]': 'ariaLabel()'
+                    }, template: "@if (values()) {\n  <div class=\"studio-inspector__container\">\n    @for (section of values()!.sections; track trackBySectionId($index, section)) {\n      <div class=\"studio-inspector__section\"\n           [class.studio-inspector__section--expanded]=\"isSectionExpanded(section.id)\"\n           [class.studio-inspector__section--collapsed]=\"!isSectionExpanded(section.id)\">\n\n        <studio-button\n          variant=\"ghost\"\n          [fullWidth]=\"true\"\n          class=\"studio-inspector__section-header\"\n          [class.studio-inspector__section-header--collapsible]=\"collapsible()\"\n          [disabled]=\"!collapsible()\"\n          [attr.aria-expanded]=\"isSectionExpanded(section.id)\"\n          [attr.aria-controls]=\"'section-content-' + section.id\"\n          (click)=\"toggleSection(section.id)\">\n\n          @if (showIcons() && section.icon) {\n            <studio-icon\n              [name]=\"section.icon\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-icon\"\n            />\n          }\n\n          <span class=\"studio-inspector__section-title\">{{ section.title }}</span>\n\n          @if (collapsible()) {\n            <studio-icon\n              [name]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-toggle\"\n            />\n          }\n        </studio-button>\n\n        @if (isSectionExpanded(section.id)) {\n          <div\n            class=\"studio-inspector__section-content\"\n            [id]=\"'section-content-' + section.id\">\n\n            @if (section.groups) {\n              @for (group of section.groups; track trackByGroupId($index, group); let isLast = $last) {\n                <div class=\"studio-inspector__group\">\n\n                  @if (showGroupLabels() && group.label) {\n                    <div class=\"studio-inspector__group-label\">{{ group.label }}</div>\n                  }\n\n                  @for (param of group.parameters; track trackByParameterId($index, param)) {\n                    <div class=\"studio-inspector__parameter\">\n                      @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                        <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                      }\n\n                      @if (param.type === 'text') {\n                        <studio-input\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'number') {\n                        <div class=\"studio-inspector__number-input\">\n                          <studio-input\n                            type=\"number\"\n                            [ngModel]=\"param.value\"\n                            [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                            (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                            [variant]=\"componentVariant()\"\n                            [size]=\"componentSize()\"\n                            [min]=\"param.min\"\n                            [max]=\"param.max\"\n                            [step]=\"param.step\"\n                            [disabled]=\"param.disabled || false\"\n                            [readonly]=\"param.readonly || false\"\n                            [fullWidth]=\"fullWidth()\"\n                          />\n                          @if (param.suffix) {\n                            <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'textarea') {\n                        <studio-textarea\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'color') {\n                        <studio-color-picker\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [size]=\"componentSize()\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'select') {\n                        <studio-select\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [options]=\"param.options || []\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'boolean') {\n                        <studio-switch\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [label]=\"param.label\"\n                          [size]=\"componentSize()\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'checkbox') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <studio-checkbox\n                              [ngModel]=\"isChecked(param, option.value)\"\n                              [name]=\"section.id + '-' + group.id + '-' + param.id + '-' + option.value\"\n                              (ngModelChange)=\"onCheckboxChange(section.id, group.id, param.id, option.value, $event)\"\n                              [label]=\"option.label\"\n                              [disabled]=\"param.disabled || option.disabled || false\"\n                              [size]=\"componentSize()\"\n                            />\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'radio') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <div class=\"studio-inspector__option\">\n                              <studio-radio-button\n                                [ngModel]=\"param.value\"\n                                (ngModelChange)=\"onRadioChange(section.id, group.id, param.id, $event)\"\n                                [value]=\"option.value\"\n                                [label]=\"option.label\"\n                                [name]=\"getRadioName(section.id, group.id, param.id)\"\n                                [disabled]=\"param.disabled || option.disabled || false\"\n                                [size]=\"componentSize()\"\n                              />\n                              @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                                <span class=\"studio-inspector__default-indicator\">(default)</span>\n                              }\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      @if (param.hint) {\n                        <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                      }\n                    </div>\n                  }\n\n                  @if (!isLast && groupDivider() !== 'none') {\n                    <div class=\"studio-inspector__group-divider\"\n                         [class.studio-inspector__group-divider--line]=\"groupDivider() === 'line'\"\n                         [class.studio-inspector__group-divider--space]=\"groupDivider() === 'space'\">\n                    </div>\n                  }\n                </div>\n              }\n            }\n\n            @if (section.parameters) {\n              @for (param of section.parameters; track trackByParameterId($index, param)) {\n                <div class=\"studio-inspector__parameter\">\n                  @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                    <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                  }\n\n                  @if (param.type === 'text') {\n                    <studio-input\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'number') {\n                    <div class=\"studio-inspector__number-input\">\n                      <studio-input\n                        type=\"number\"\n                        [ngModel]=\"param.value\"\n                        [name]=\"section.id + '-' + param.id\"\n                        (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                        [variant]=\"componentVariant()\"\n                        [size]=\"componentSize()\"\n                        [min]=\"param.min\"\n                        [max]=\"param.max\"\n                        [step]=\"param.step\"\n                        [disabled]=\"param.disabled || false\"\n                        [readonly]=\"param.readonly || false\"\n                        [fullWidth]=\"fullWidth()\"\n                      />\n                      @if (param.suffix) {\n                        <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'textarea') {\n                    <studio-textarea\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'color') {\n                    <studio-color-picker\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [size]=\"componentSize()\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'select') {\n                    <studio-select\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [options]=\"param.options || []\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'boolean') {\n                    <studio-switch\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [label]=\"param.label\"\n                      [size]=\"componentSize()\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'checkbox') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <studio-checkbox\n                          [ngModel]=\"isChecked(param, option.value)\"\n                          [name]=\"section.id + '-' + param.id + '-' + option.value\"\n                          (ngModelChange)=\"onCheckboxChange(section.id, null, param.id, option.value, $event)\"\n                          [label]=\"option.label\"\n                          [disabled]=\"param.disabled || option.disabled || false\"\n                          [size]=\"componentSize()\"\n                        />\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'radio') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <div class=\"studio-inspector__option\">\n                          <studio-radio-button\n                            [ngModel]=\"param.value\"\n                            (ngModelChange)=\"onRadioChange(section.id, null, param.id, $event)\"\n                            [value]=\"option.value\"\n                            [label]=\"option.label\"\n                            [name]=\"getRadioName(section.id, null, param.id)\"\n                            [disabled]=\"param.disabled || option.disabled || false\"\n                            [size]=\"componentSize()\"\n                          />\n                          @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                            <span class=\"studio-inspector__default-indicator\">(default)</span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  @if (param.hint) {\n                    <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-inspector__container{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__section{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);overflow:hidden}.studio-inspector__section-header{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--studio-bg-secondary);border:none;border-bottom:1px solid var(--studio-border-primary);cursor:pointer;transition:background var(--studio-transition-fast);text-align:left}.studio-inspector__section-header--collapsible:hover{background:var(--studio-bg-tertiary)}.studio-inspector__section-header:disabled{cursor:default}.studio-inspector__section-icon{color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__section-title{flex:1;font-size:.875rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-inspector__section-toggle{color:var(--studio-text-secondary);flex-shrink:0;transition:transform var(--studio-transition-fast)}.studio-inspector__section--collapsed .studio-inspector__section-toggle{transform:rotate(-90deg)}.studio-inspector__section--collapsed .studio-inspector__section-content{display:none}.studio-inspector__section--expanded .studio-inspector__section-toggle{transform:rotate(0)}.studio-inspector__section-content{padding:1rem;display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group-label{font-size:.75rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);text-transform:uppercase;letter-spacing:.05em}.studio-inspector__group-divider--line{height:1px;background:var(--studio-border-primary);margin:.5rem 0}.studio-inspector__group-divider--space{height:.5rem}.studio-inspector__parameter{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__parameter-label{font-size:.8125rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary)}.studio-inspector__parameter-hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-inspector__number-input{display:flex;align-items:center;gap:.5rem}.studio-inspector__suffix{font-size:.875rem;color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__options{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__option{display:flex;align-items:center;gap:.5rem}.studio-inspector__default-indicator{font-size:.75rem;color:var(--studio-text-tertiary);font-style:italic}:host(.studio-inspector--compact) .studio-inspector__container{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__section-header{padding:.625rem .75rem}:host(.studio-inspector--compact) .studio-inspector__section-content{padding:.75rem;gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-sm) .studio-inspector__section-content{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-lg) .studio-inspector__section-content{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__parameter{gap:.625rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group-divider--space{height:1rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { componentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentSize", required: false }] }], componentVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentVariant", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showDefaultIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefaultIndicator", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expandedByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedByDefault", required: false }] }], expandedSectionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedSections", required: false }] }], showGroupLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupLabels", required: false }] }], groupDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupDivider", required: false }] }], groupDividerSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupDividerSpacing", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], sectionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTemplate", required: false }] }], parameterTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameterTemplates", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], sectionToggled: [{ type: i0.Output, args: ["sectionToggled"] }], parameterFocused: [{ type: i0.Output, args: ["parameterFocused"] }], parameterBlurred: [{ type: i0.Output, args: ["parameterBlurred"] }] } });
+
 /**
  * Theme toggle switch with sun/moon icons
  *
@@ -3872,5 +4617,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeWrapperComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, DrawerComponent, DrawerService, IconComponent, InputComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, NavbarComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, NavbarComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map