@camp2gether/c2g-ui 0.0.7

package/fesm2022/camp2gether-c2g-ui.mjs

@@ -0,0 +1,2099 @@
+import * as i0 from '@angular/core';
+import { Component, makeEnvironmentProviders, provideAppInitializer, inject, input, output, computed, ChangeDetectionStrategy, signal, effect, forwardRef, DOCUMENT, Injectable, model } from '@angular/core';
+import * as i1 from '@angular/material/icon';
+import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { LottieComponent } from 'ngx-lottie';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+
+class C2gUi {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: C2gUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: C2gUi, isStandalone: true, selector: "c2g-c2g-ui", ngImport: i0, template: `
+    <p>
+      c2g-ui works!
+    </p>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: C2gUi, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-c2g-ui', imports: [], template: `
+    <p>
+      c2g-ui works!
+    </p>
+  ` }]
+        }] });
+
+const VARIANT_MAP = {
+    filled: { fontClass: 'material-icons', alias: 'material-icons' },
+    outlined: { fontClass: 'material-icons-outlined', alias: 'material-icons-outlined' },
+    round: { fontClass: 'material-icons-round', alias: 'material-icons-round' },
+    sharp: { fontClass: 'material-icons-sharp', alias: 'material-icons-sharp' },
+};
+/**
+ * Registers Material Icons font variants with MatIconRegistry.
+ *
+ * Add to your app config:
+ * ```ts
+ * providers: [provideC2gIcons()]
+ * ```
+ *
+ * Then use in templates:
+ * ```html
+ * <mat-icon>hiking</mat-icon>
+ * <mat-icon fontSet="material-icons-outlined">map</mat-icon>
+ * <mat-icon fontSet="material-icons-round">star</mat-icon>
+ * ```
+ *
+ * The consuming app must load the font CSS — either via Google Fonts or self-hosted:
+ * ```html
+ * <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
+ * ```
+ */
+function provideC2gIcons(options) {
+    const variants = options?.variants ?? ['filled', 'outlined', 'round', 'sharp'];
+    return makeEnvironmentProviders([
+        provideAppInitializer(() => {
+            const registry = inject(MatIconRegistry);
+            for (const variant of variants) {
+                const { fontClass, alias } = VARIANT_MAP[variant];
+                registry.registerFontClassAlias(alias, fontClass);
+            }
+            // Set outlined as the default font set for c2g components
+            registry.setDefaultFontSetClass('material-icons-outlined');
+        }),
+    ]);
+}
+
+class AvatarComponent {
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    initials = input('', ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    backgroundColor = input('', ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
+    textColor = input('', ...(ngDevMode ? [{ debugName: "textColor" }] : []));
+    ringTone = input('none', ...(ngDevMode ? [{ debugName: "ringTone" }] : []));
+    ringColor = input('', ...(ngDevMode ? [{ debugName: "ringColor" }] : []));
+    clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : []));
+    avatarClick = output();
+    resolvedInitials = computed(() => {
+        const explicitInitials = this.initials().trim();
+        if (explicitInitials) {
+            return explicitInitials.slice(0, 3).toUpperCase();
+        }
+        const name = this.name().trim();
+        if (!name) {
+            return '?';
+        }
+        return name
+            .split(/\s+/)
+            .slice(0, 2)
+            .map(part => part[0])
+            .join('')
+            .toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : []));
+    resolvedAriaLabel = computed(() => this.ariaLabel().trim() || this.name().trim() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
+    hasImage = computed(() => !!this.imageUrl(), ...(ngDevMode ? [{ debugName: "hasImage" }] : []));
+    ringStyle = computed(() => {
+        if (this.ringTone() !== 'custom' || !this.ringColor().trim()) {
+            return null;
+        }
+        return this.ringColor();
+    }, ...(ngDevMode ? [{ debugName: "ringStyle" }] : []));
+    badgeBackground = computed(() => {
+        const badge = this.badge();
+        if (!badge) {
+            return null;
+        }
+        if (badge.tone === 'custom' && badge.backgroundColor?.trim()) {
+            return badge.backgroundColor;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "badgeBackground" }] : []));
+    badgeColor = computed(() => {
+        const badge = this.badge();
+        if (!badge) {
+            return null;
+        }
+        if (badge.tone === 'custom' && badge.color?.trim()) {
+            return badge.color;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "badgeColor" }] : []));
+    onAvatarClick() {
+        if (!this.clickable() || this.disabled()) {
+            return;
+        }
+        this.avatarClick.emit();
+    }
+    onAvatarKeydown(event) {
+        if (!this.clickable() || this.disabled()) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.avatarClick.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AvatarComponent, isStandalone: true, selector: "c2g-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, ringTone: { classPropertyName: "ringTone", publicName: "ringTone", isSignal: true, isRequired: false, transformFunction: null }, ringColor: { classPropertyName: "ringColor", publicName: "ringColor", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClick: "avatarClick" }, ngImport: i0, template: "<span\n  class=\"c2g-avatar\"\n  [class.c2g-avatar--clickable]=\"clickable() && !disabled()\"\n  [class.c2g-avatar--disabled]=\"disabled()\"\n  [class.c2g-avatar--sm]=\"size() === 'sm'\"\n  [class.c2g-avatar--md]=\"size() === 'md'\"\n  [class.c2g-avatar--lg]=\"size() === 'lg'\"\n  [class.c2g-avatar--ring-neutral]=\"ringTone() === 'neutral'\"\n  [class.c2g-avatar--ring-success]=\"ringTone() === 'success'\"\n  [class.c2g-avatar--ring-danger]=\"ringTone() === 'danger'\"\n  [class.c2g-avatar--ring-muted]=\"ringTone() === 'muted'\"\n  [class.c2g-avatar--ring-custom]=\"ringTone() === 'custom'\"\n  [style.--c2g-avatar-bg]=\"backgroundColor() || null\"\n  [style.--c2g-avatar-color]=\"textColor() || null\"\n  [style.--c2g-avatar-ring]=\"ringStyle()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-disabled]=\"clickable() && disabled() ? 'true' : null\"\n  [attr.role]=\"clickable() ? 'button' : 'img'\"\n  [attr.tabindex]=\"clickable() && !disabled() ? 0 : null\"\n  (click)=\"onAvatarClick()\"\n  (keydown)=\"onAvatarKeydown($event)\">\n  @if (hasImage()) {\n    <img class=\"c2g-avatar__image\" [src]=\"imageUrl()!\" [alt]=\"resolvedAriaLabel() ?? ''\" />\n  } @else {\n    <span class=\"c2g-avatar__initials\">{{ resolvedInitials() }}</span>\n  }\n\n  @if (badge()) {\n    <span\n      class=\"c2g-avatar__badge\"\n      [class.c2g-avatar__badge--neutral]=\"badge()!.tone === 'neutral'\"\n      [class.c2g-avatar__badge--success]=\"badge()!.tone === 'success'\"\n      [class.c2g-avatar__badge--danger]=\"badge()!.tone === 'danger'\"\n      [class.c2g-avatar__badge--muted]=\"badge()!.tone === 'muted'\"\n      [class.c2g-avatar__badge--custom]=\"badge()!.tone === 'custom'\"\n      [style.--c2g-avatar-badge-bg]=\"badgeBackground()\"\n      [style.--c2g-avatar-badge-color]=\"badgeColor()\"\n      [attr.aria-label]=\"badge()!.ariaLabel || null\">\n      @if (badge()!.icon) {\n        <span class=\"c2g-avatar__badge-icon\" aria-hidden=\"true\">{{ badge()!.icon }}</span>\n      } @else if (badge()!.text) {\n        <span class=\"c2g-avatar__badge-text\" aria-hidden=\"true\">{{ badge()!.text }}</span>\n      }\n    </span>\n  }\n</span>", styles: [".c2g-avatar{--c2g-avatar-bg: var(--c2g-color-secondary-container);--c2g-avatar-color: var(--c2g-color-secondary-dark);--c2g-avatar-ring: transparent;--c2g-avatar-badge-bg: var(--c2g-color-neutral-100);--c2g-avatar-badge-color: var(--c2g-color-text-primary);position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c2g-avatar-bg);color:var(--c2g-avatar-color);font-weight:800;overflow:visible;isolation:isolate}.c2g-avatar--clickable{cursor:pointer}.c2g-avatar--clickable:focus-visible{outline:2px solid var(--c2g-color-secondary-dark);outline-offset:2px}.c2g-avatar--disabled{opacity:.6;cursor:not-allowed}.c2g-avatar:before{content:\"\";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;z-index:-1}.c2g-avatar--sm{width:28px;height:28px;font-size:.68rem}.c2g-avatar--md{width:40px;height:40px;font-size:.78rem}.c2g-avatar--lg{width:56px;height:56px;font-size:1rem}.c2g-avatar--ring-neutral:before{border-color:var(--c2g-color-border-subtle)}.c2g-avatar--ring-success:before{border-color:var(--c2g-color-success)}.c2g-avatar--ring-danger:before{border-color:var(--c2g-color-error)}.c2g-avatar--ring-muted:before{border-color:var(--c2g-color-outline)}.c2g-avatar--ring-custom:before{border-color:var(--c2g-avatar-ring)}.c2g-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.c2g-avatar__initials{line-height:1;letter-spacing:.03em}.c2g-avatar__badge{position:absolute;right:-2px;bottom:-2px;min-width:14px;height:14px;padding:0 2px;border-radius:999px;background:var(--c2g-avatar-badge-bg);color:var(--c2g-avatar-badge-color);border:2px solid var(--c2g-color-surface);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.c2g-avatar--lg .c2g-avatar__badge{min-width:18px;height:18px}.c2g-avatar__badge--neutral{--c2g-avatar-badge-bg: var(--c2g-color-neutral-100);--c2g-avatar-badge-color: var(--c2g-color-text-primary)}.c2g-avatar__badge--success{--c2g-avatar-badge-bg: var(--c2g-color-success);--c2g-avatar-badge-color: var(--c2g-color-surface)}.c2g-avatar__badge--danger{--c2g-avatar-badge-bg: var(--c2g-color-error);--c2g-avatar-badge-color: var(--c2g-color-surface)}.c2g-avatar__badge--muted{--c2g-avatar-badge-bg: var(--c2g-color-neutral-300);--c2g-avatar-badge-color: var(--c2g-color-text-muted)}.c2g-avatar__badge--custom{--c2g-avatar-badge-bg: var(--c2g-avatar-badge-bg);--c2g-avatar-badge-color: var(--c2g-avatar-badge-color)}.c2g-avatar__badge-icon,.c2g-avatar__badge-text{font-size:.5rem;line-height:1;font-weight:700}.c2g-avatar--lg .c2g-avatar__badge-icon,.c2g-avatar--lg .c2g-avatar__badge-text{font-size:.62rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-avatar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"c2g-avatar\"\n  [class.c2g-avatar--clickable]=\"clickable() && !disabled()\"\n  [class.c2g-avatar--disabled]=\"disabled()\"\n  [class.c2g-avatar--sm]=\"size() === 'sm'\"\n  [class.c2g-avatar--md]=\"size() === 'md'\"\n  [class.c2g-avatar--lg]=\"size() === 'lg'\"\n  [class.c2g-avatar--ring-neutral]=\"ringTone() === 'neutral'\"\n  [class.c2g-avatar--ring-success]=\"ringTone() === 'success'\"\n  [class.c2g-avatar--ring-danger]=\"ringTone() === 'danger'\"\n  [class.c2g-avatar--ring-muted]=\"ringTone() === 'muted'\"\n  [class.c2g-avatar--ring-custom]=\"ringTone() === 'custom'\"\n  [style.--c2g-avatar-bg]=\"backgroundColor() || null\"\n  [style.--c2g-avatar-color]=\"textColor() || null\"\n  [style.--c2g-avatar-ring]=\"ringStyle()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-disabled]=\"clickable() && disabled() ? 'true' : null\"\n  [attr.role]=\"clickable() ? 'button' : 'img'\"\n  [attr.tabindex]=\"clickable() && !disabled() ? 0 : null\"\n  (click)=\"onAvatarClick()\"\n  (keydown)=\"onAvatarKeydown($event)\">\n  @if (hasImage()) {\n    <img class=\"c2g-avatar__image\" [src]=\"imageUrl()!\" [alt]=\"resolvedAriaLabel() ?? ''\" />\n  } @else {\n    <span class=\"c2g-avatar__initials\">{{ resolvedInitials() }}</span>\n  }\n\n  @if (badge()) {\n    <span\n      class=\"c2g-avatar__badge\"\n      [class.c2g-avatar__badge--neutral]=\"badge()!.tone === 'neutral'\"\n      [class.c2g-avatar__badge--success]=\"badge()!.tone === 'success'\"\n      [class.c2g-avatar__badge--danger]=\"badge()!.tone === 'danger'\"\n      [class.c2g-avatar__badge--muted]=\"badge()!.tone === 'muted'\"\n      [class.c2g-avatar__badge--custom]=\"badge()!.tone === 'custom'\"\n      [style.--c2g-avatar-badge-bg]=\"badgeBackground()\"\n      [style.--c2g-avatar-badge-color]=\"badgeColor()\"\n      [attr.aria-label]=\"badge()!.ariaLabel || null\">\n      @if (badge()!.icon) {\n        <span class=\"c2g-avatar__badge-icon\" aria-hidden=\"true\">{{ badge()!.icon }}</span>\n      } @else if (badge()!.text) {\n        <span class=\"c2g-avatar__badge-text\" aria-hidden=\"true\">{{ badge()!.text }}</span>\n      }\n    </span>\n  }\n</span>", styles: [".c2g-avatar{--c2g-avatar-bg: var(--c2g-color-secondary-container);--c2g-avatar-color: var(--c2g-color-secondary-dark);--c2g-avatar-ring: transparent;--c2g-avatar-badge-bg: var(--c2g-color-neutral-100);--c2g-avatar-badge-color: var(--c2g-color-text-primary);position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c2g-avatar-bg);color:var(--c2g-avatar-color);font-weight:800;overflow:visible;isolation:isolate}.c2g-avatar--clickable{cursor:pointer}.c2g-avatar--clickable:focus-visible{outline:2px solid var(--c2g-color-secondary-dark);outline-offset:2px}.c2g-avatar--disabled{opacity:.6;cursor:not-allowed}.c2g-avatar:before{content:\"\";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;z-index:-1}.c2g-avatar--sm{width:28px;height:28px;font-size:.68rem}.c2g-avatar--md{width:40px;height:40px;font-size:.78rem}.c2g-avatar--lg{width:56px;height:56px;font-size:1rem}.c2g-avatar--ring-neutral:before{border-color:var(--c2g-color-border-subtle)}.c2g-avatar--ring-success:before{border-color:var(--c2g-color-success)}.c2g-avatar--ring-danger:before{border-color:var(--c2g-color-error)}.c2g-avatar--ring-muted:before{border-color:var(--c2g-color-outline)}.c2g-avatar--ring-custom:before{border-color:var(--c2g-avatar-ring)}.c2g-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.c2g-avatar__initials{line-height:1;letter-spacing:.03em}.c2g-avatar__badge{position:absolute;right:-2px;bottom:-2px;min-width:14px;height:14px;padding:0 2px;border-radius:999px;background:var(--c2g-avatar-badge-bg);color:var(--c2g-avatar-badge-color);border:2px solid var(--c2g-color-surface);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.c2g-avatar--lg .c2g-avatar__badge{min-width:18px;height:18px}.c2g-avatar__badge--neutral{--c2g-avatar-badge-bg: var(--c2g-color-neutral-100);--c2g-avatar-badge-color: var(--c2g-color-text-primary)}.c2g-avatar__badge--success{--c2g-avatar-badge-bg: var(--c2g-color-success);--c2g-avatar-badge-color: var(--c2g-color-surface)}.c2g-avatar__badge--danger{--c2g-avatar-badge-bg: var(--c2g-color-error);--c2g-avatar-badge-color: var(--c2g-color-surface)}.c2g-avatar__badge--muted{--c2g-avatar-badge-bg: var(--c2g-color-neutral-300);--c2g-avatar-badge-color: var(--c2g-color-text-muted)}.c2g-avatar__badge--custom{--c2g-avatar-badge-bg: var(--c2g-avatar-badge-bg);--c2g-avatar-badge-color: var(--c2g-avatar-badge-color)}.c2g-avatar__badge-icon,.c2g-avatar__badge-text{font-size:.5rem;line-height:1;font-weight:700}.c2g-avatar--lg .c2g-avatar__badge-icon,.c2g-avatar--lg .c2g-avatar__badge-text{font-size:.62rem}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], ringTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringTone", required: false }] }], ringColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringColor", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], avatarClick: [{ type: i0.Output, args: ["avatarClick"] }] } });
+
+class ButtonComponent {
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconPosition = input('start', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
+    iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    loadingAriaLabel = input('Lädt', ...(ngDevMode ? [{ debugName: "loadingAriaLabel" }] : []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    clicked = output();
+    isInteractionDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isInteractionDisabled" }] : []));
+    showLeadingSpinner = computed(() => this.loading() && this.iconPosition() === 'start', ...(ngDevMode ? [{ debugName: "showLeadingSpinner" }] : []));
+    showTrailingSpinner = computed(() => this.loading() && this.iconPosition() === 'end', ...(ngDevMode ? [{ debugName: "showTrailingSpinner" }] : []));
+    hasIcon = computed(() => this.icon().trim().length > 0, ...(ngDevMode ? [{ debugName: "hasIcon" }] : []));
+    showLeadingIcon = computed(() => this.hasIcon() && !this.loading() && this.iconPosition() === 'start', ...(ngDevMode ? [{ debugName: "showLeadingIcon" }] : []));
+    showTrailingIcon = computed(() => this.hasIcon() && !this.loading() && this.iconPosition() === 'end', ...(ngDevMode ? [{ debugName: "showTrailingIcon" }] : []));
+    computedAriaLabel = computed(() => {
+        if (this.loading()) {
+            return this.loadingAriaLabel();
+        }
+        if (this.iconOnly()) {
+            return this.ariaLabel().trim() || 'Aktion';
+        }
+        return this.ariaLabel().trim() || null;
+    }, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
+    buttonClasses = computed(() => `c2g-btn--${this.size()} c2g-btn--${this.variant()}${this.iconOnly() ? ' c2g-btn--icon-only' : ''}${this.loading() ? ' c2g-btn--loading' : ''}`, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ButtonComponent, isStandalone: true, selector: "c2g-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingAriaLabel: { classPropertyName: "loadingAriaLabel", publicName: "loadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <button
+      [type]="type()"
+      [disabled]="isInteractionDisabled()"
+      [class]="buttonClasses()"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.aria-disabled]="isInteractionDisabled() ? 'true' : null"
+      [attr.aria-label]="computedAriaLabel()"
+      (click)="clicked.emit($event)"
+    >
+      @if (showLeadingSpinner()) {
+        <span class="c2g-btn__spinner" aria-hidden="true"></span>
+      }
+
+      @if (showLeadingIcon()) {
+        <span class="c2g-btn__icon" aria-hidden="true">{{ icon() }}</span>
+      }
+
+      @if (!iconOnly()) {
+        <span class="c2g-btn__content">
+          <ng-content />
+        </span>
+      }
+
+      @if (showTrailingIcon()) {
+        <span class="c2g-btn__icon" aria-hidden="true">{{ icon() }}</span>
+      }
+
+      @if (showTrailingSpinner()) {
+        <span class="c2g-btn__spinner" aria-hidden="true"></span>
+      }
+    </button>
+  `, isInline: true, styles: ["button{display:inline-flex;align-items:center;justify-content:center;gap:var(--c2g-space-2, .5rem);border:none;cursor:pointer;min-height:2rem;font-weight:var(--c2g-font-weight-semibold, 600);font-family:var(--c2g-font-family-base, \"Inter\", \"Segoe UI\", sans-serif);border-radius:var(--c2g-radius-sm, .375rem);transition:background-color var(--c2g-motion-duration-base, .2s) var(--c2g-motion-ease-standard, ease),opacity var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease),box-shadow var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}button:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-button-primary, #2563eb) 30%,transparent)}button:disabled{opacity:.5;cursor:not-allowed}.c2g-btn--loading{cursor:wait}.c2g-btn--sm{padding:calc(var(--c2g-space-1, .25rem) + var(--c2g-space-1, .25rem)) var(--c2g-space-3, .75rem);font-size:var(--c2g-font-size-xs, .75rem)}.c2g-btn--md{padding:calc(var(--c2g-space-2, .5rem) + var(--c2g-space-1, .25rem)) var(--c2g-space-5, 1.25rem);font-size:var(--c2g-font-size-sm, .875rem)}.c2g-btn--lg{padding:var(--c2g-space-4, 1rem) calc(var(--c2g-space-5, 1.25rem) + var(--c2g-space-2, .5rem));font-size:var(--c2g-font-size-md, 1rem)}.c2g-btn--primary{background:var(--c2g-color-button-primary, #2563eb);color:var(--c2g-color-button-primary-text, #1a1714)}.c2g-btn--primary:hover:not(:disabled){background:var(--c2g-color-button-primary-hover, #1d4ed8)}.c2g-btn--secondary{background:var(--c2g-color-button-secondary, #e5e7eb);color:var(--c2g-color-button-secondary-text, #111827)}.c2g-btn--secondary:hover:not(:disabled){background:var(--c2g-color-button-secondary-hover, #d1d5db)}.c2g-btn--ghost{background:transparent;color:var(--c2g-color-button-primary, #2563eb)}.c2g-btn--ghost:hover:not(:disabled){background:var(--c2g-color-button-ghost-hover, #eff6ff)}.c2g-btn--destructive{background:var(--c2g-color-semantic-error, #b23a2b);color:var(--c2g-color-surface, #ffffff)}.c2g-btn--destructive:hover:not(:disabled){background:var(--c2g-color-semantic-error-dark, #8c2d22)}.c2g-btn--icon{background:transparent;color:var(--c2g-color-text-primary, #1a1714);border:1px solid var(--c2g-color-border-soft, #e7ddd5);padding-inline:var(--c2g-space-2, .5rem)}.c2g-btn--icon:hover:not(:disabled){background:var(--c2g-color-bg-subtle, #f6ede7)}.c2g-btn--icon-only{padding:0;width:2.5rem;aspect-ratio:1}.c2g-btn--sm.c2g-btn--icon-only{width:2rem}.c2g-btn--lg.c2g-btn--icon-only{width:3rem}.c2g-btn__content{line-height:1}.c2g-btn__icon{display:inline-flex;font-size:1.05em;line-height:1}.c2g-btn__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:c2g-btn-spin .7s linear infinite;display:inline-block}@keyframes c2g-btn-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      [type]="type()"
+      [disabled]="isInteractionDisabled()"
+      [class]="buttonClasses()"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.aria-disabled]="isInteractionDisabled() ? 'true' : null"
+      [attr.aria-label]="computedAriaLabel()"
+      (click)="clicked.emit($event)"
+    >
+      @if (showLeadingSpinner()) {
+        <span class="c2g-btn__spinner" aria-hidden="true"></span>
+      }
+
+      @if (showLeadingIcon()) {
+        <span class="c2g-btn__icon" aria-hidden="true">{{ icon() }}</span>
+      }
+
+      @if (!iconOnly()) {
+        <span class="c2g-btn__content">
+          <ng-content />
+        </span>
+      }
+
+      @if (showTrailingIcon()) {
+        <span class="c2g-btn__icon" aria-hidden="true">{{ icon() }}</span>
+      }
+
+      @if (showTrailingSpinner()) {
+        <span class="c2g-btn__spinner" aria-hidden="true"></span>
+      }
+    </button>
+  `, styles: ["button{display:inline-flex;align-items:center;justify-content:center;gap:var(--c2g-space-2, .5rem);border:none;cursor:pointer;min-height:2rem;font-weight:var(--c2g-font-weight-semibold, 600);font-family:var(--c2g-font-family-base, \"Inter\", \"Segoe UI\", sans-serif);border-radius:var(--c2g-radius-sm, .375rem);transition:background-color var(--c2g-motion-duration-base, .2s) var(--c2g-motion-ease-standard, ease),opacity var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease),box-shadow var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}button:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-button-primary, #2563eb) 30%,transparent)}button:disabled{opacity:.5;cursor:not-allowed}.c2g-btn--loading{cursor:wait}.c2g-btn--sm{padding:calc(var(--c2g-space-1, .25rem) + var(--c2g-space-1, .25rem)) var(--c2g-space-3, .75rem);font-size:var(--c2g-font-size-xs, .75rem)}.c2g-btn--md{padding:calc(var(--c2g-space-2, .5rem) + var(--c2g-space-1, .25rem)) var(--c2g-space-5, 1.25rem);font-size:var(--c2g-font-size-sm, .875rem)}.c2g-btn--lg{padding:var(--c2g-space-4, 1rem) calc(var(--c2g-space-5, 1.25rem) + var(--c2g-space-2, .5rem));font-size:var(--c2g-font-size-md, 1rem)}.c2g-btn--primary{background:var(--c2g-color-button-primary, #2563eb);color:var(--c2g-color-button-primary-text, #1a1714)}.c2g-btn--primary:hover:not(:disabled){background:var(--c2g-color-button-primary-hover, #1d4ed8)}.c2g-btn--secondary{background:var(--c2g-color-button-secondary, #e5e7eb);color:var(--c2g-color-button-secondary-text, #111827)}.c2g-btn--secondary:hover:not(:disabled){background:var(--c2g-color-button-secondary-hover, #d1d5db)}.c2g-btn--ghost{background:transparent;color:var(--c2g-color-button-primary, #2563eb)}.c2g-btn--ghost:hover:not(:disabled){background:var(--c2g-color-button-ghost-hover, #eff6ff)}.c2g-btn--destructive{background:var(--c2g-color-semantic-error, #b23a2b);color:var(--c2g-color-surface, #ffffff)}.c2g-btn--destructive:hover:not(:disabled){background:var(--c2g-color-semantic-error-dark, #8c2d22)}.c2g-btn--icon{background:transparent;color:var(--c2g-color-text-primary, #1a1714);border:1px solid var(--c2g-color-border-soft, #e7ddd5);padding-inline:var(--c2g-space-2, .5rem)}.c2g-btn--icon:hover:not(:disabled){background:var(--c2g-color-bg-subtle, #f6ede7)}.c2g-btn--icon-only{padding:0;width:2.5rem;aspect-ratio:1}.c2g-btn--sm.c2g-btn--icon-only{width:2rem}.c2g-btn--lg.c2g-btn--icon-only{width:3rem}.c2g-btn__content{line-height:1}.c2g-btn__icon{display:inline-flex;font-size:1.05em;line-height:1}.c2g-btn__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:c2g-btn-spin .7s linear infinite;display:inline-block}@keyframes c2g-btn-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], loadingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingAriaLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+class BadgeComponent {
+    value = input('1', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    tone = input('accent', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    max = input(99, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : []));
+    dotOnly = input(false, ...(ngDevMode ? [{ debugName: "dotOnly" }] : []));
+    dotRing = input(true, ...(ngDevMode ? [{ debugName: "dotRing" }] : []));
+    dotPulse = input(false, ...(ngDevMode ? [{ debugName: "dotPulse" }] : []));
+    dotColor = input('', ...(ngDevMode ? [{ debugName: "dotColor" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    resolvedAriaLabel = computed(() => this.ariaLabel().trim() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
+    content = computed(() => {
+        const value = this.value();
+        if (typeof value === 'number' && value > this.max()) {
+            return `${this.max()}+`;
+        }
+        return `${value}`;
+    }, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    classes = computed(() => `c2g-badge c2g-badge--${this.size()} c2g-badge--${this.variant()} c2g-badge--${this.tone()} ${this.dot() && this.dotOnly() ? 'c2g-badge--dot-only' : ''} ${this.dot() && this.dotOnly() && !this.dotRing() ? 'c2g-badge--dot-no-ring' : ''}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: BadgeComponent, isStandalone: true, selector: "c2g-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, dotOnly: { classPropertyName: "dotOnly", publicName: "dotOnly", isSignal: true, isRequired: false, transformFunction: null }, dotRing: { classPropertyName: "dotRing", publicName: "dotRing", isSignal: true, isRequired: false, transformFunction: null }, dotPulse: { classPropertyName: "dotPulse", publicName: "dotPulse", isSignal: true, isRequired: false, transformFunction: null }, dotColor: { classPropertyName: "dotColor", publicName: "dotColor", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      class="c2g-badge"
+      [class]="classes()"
+      [style.--c2g-badge-dot-color]="dotColor()"
+      [attr.role]="dot() && resolvedAriaLabel() ? 'status' : null"
+      [attr.aria-label]="resolvedAriaLabel()"
+      [attr.aria-hidden]="dot() && !resolvedAriaLabel() ? 'true' : null"
+    >
+      @if (dot()) {
+        <span class="c2g-badge__dot" [class.c2g-badge__dot--pulse]="dotPulse()" aria-hidden="true"></span>
+      }
+      @if (!dot() || !dotOnly()) {
+        <span>{{ content() }}</span>
+      }
+    </span>
+  `, isInline: true, styles: [".c2g-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid transparent;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);font-weight:var(--c2g-font-weight-semibold, 600);line-height:1;min-width:1.25rem}.c2g-badge--sm{font-size:.6875rem;padding:.16rem .4rem;min-height:1rem}.c2g-badge--md{font-size:var(--c2g-font-size-xs, .75rem);padding:.22rem .5rem;min-height:1.125rem}.c2g-badge__dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--c2g-badge-dot-color, currentColor);margin-right:var(--c2g-space-1, .25rem);flex:0 0 auto}.c2g-badge__dot--pulse{animation:c2g-badge-dot-pulse 1.5s ease-in-out infinite;transform-origin:center}@keyframes c2g-badge-dot-pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--c2g-badge-dot-color, currentColor) 45%,transparent);transform:scale(1)}70%{box-shadow:0 0 0 .4rem color-mix(in srgb,var(--c2g-badge-dot-color, currentColor) 0%,transparent);transform:scale(1.05)}to{box-shadow:0 0 color-mix(in srgb,var(--c2g-badge-dot-color, currentColor) 0%,transparent);transform:scale(1)}}.c2g-badge--dot-only{width:1rem;height:1rem;min-width:1rem;min-height:1rem;padding:0;border-radius:50%}.c2g-badge--dot-only.c2g-badge--sm{width:.875rem;height:.875rem;min-width:.875rem;min-height:.875rem}.c2g-badge--dot-only.c2g-badge--md{width:1rem;height:1rem;min-width:1rem;min-height:1rem}.c2g-badge--dot-only .c2g-badge__dot{margin-right:0}.c2g-badge--dot-no-ring{border-color:transparent!important;background:transparent!important;box-shadow:none}.c2g-badge--solid.c2g-badge--neutral{background:var(--c2g-color-text-secondary, #4a423b);color:#fff}.c2g-badge--solid.c2g-badge--accent{background:var(--c2g-color-primary, #ff6b35);color:#fff}.c2g-badge--solid.c2g-badge--info{background:#1565c0;color:#fff}.c2g-badge--solid.c2g-badge--success{background:#2e7d32;color:#fff}.c2g-badge--solid.c2g-badge--warning{background:#ef6c00;color:#fff}.c2g-badge--solid.c2g-badge--danger{background:#c62828;color:#fff}.c2g-badge--subtle.c2g-badge--neutral{background:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 10%,#ffffff);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-badge--subtle.c2g-badge--accent{background:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 14%,#ffffff);color:color-mix(in srgb,var(--c2g-color-primary-dark, #e55623) 80%,#000000)}.c2g-badge--subtle.c2g-badge--info{background:color-mix(in srgb,#1565c0 12%,#ffffff);color:#0d47a1}.c2g-badge--subtle.c2g-badge--success{background:color-mix(in srgb,#2e7d32 12%,#ffffff);color:#1b5e20}.c2g-badge--subtle.c2g-badge--warning{background:color-mix(in srgb,#ef6c00 12%,#ffffff);color:#e65100}.c2g-badge--subtle.c2g-badge--danger{background:color-mix(in srgb,#c62828 13%,#ffffff);color:#b71c1c}.c2g-badge--outline.c2g-badge--neutral{border-color:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 35%,transparent);color:var(--c2g-color-text-secondary, #4a423b);background:transparent}.c2g-badge--outline.c2g-badge--accent{border-color:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 40%,transparent);color:color-mix(in srgb,var(--c2g-color-primary-dark, #e55623) 80%,#000000);background:transparent}.c2g-badge--outline.c2g-badge--info{border-color:color-mix(in srgb,#1565c0 40%,transparent);color:#0d47a1;background:transparent}.c2g-badge--outline.c2g-badge--success{border-color:color-mix(in srgb,#2e7d32 40%,transparent);color:#1b5e20;background:transparent}.c2g-badge--outline.c2g-badge--warning{border-color:color-mix(in srgb,#ef6c00 40%,transparent);color:#e65100;background:transparent}.c2g-badge--outline.c2g-badge--danger{border-color:color-mix(in srgb,#c62828 40%,transparent);color:#b71c1c;background:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span
+      class="c2g-badge"
+      [class]="classes()"
+      [style.--c2g-badge-dot-color]="dotColor()"
+      [attr.role]="dot() && resolvedAriaLabel() ? 'status' : null"
+      [attr.aria-label]="resolvedAriaLabel()"
+      [attr.aria-hidden]="dot() && !resolvedAriaLabel() ? 'true' : null"
+    >
+      @if (dot()) {
+        <span class="c2g-badge__dot" [class.c2g-badge__dot--pulse]="dotPulse()" aria-hidden="true"></span>
+      }
+      @if (!dot() || !dotOnly()) {
+        <span>{{ content() }}</span>
+      }
+    </span>
+  `, styles: [".c2g-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid transparent;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);font-weight:var(--c2g-font-weight-semibold, 600);line-height:1;min-width:1.25rem}.c2g-badge--sm{font-size:.6875rem;padding:.16rem .4rem;min-height:1rem}.c2g-badge--md{font-size:var(--c2g-font-size-xs, .75rem);padding:.22rem .5rem;min-height:1.125rem}.c2g-badge__dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--c2g-badge-dot-color, currentColor);margin-right:var(--c2g-space-1, .25rem);flex:0 0 auto}.c2g-badge__dot--pulse{animation:c2g-badge-dot-pulse 1.5s ease-in-out infinite;transform-origin:center}@keyframes c2g-badge-dot-pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--c2g-badge-dot-color, currentColor) 45%,transparent);transform:scale(1)}70%{box-shadow:0 0 0 .4rem color-mix(in srgb,var(--c2g-badge-dot-color, currentColor) 0%,transparent);transform:scale(1.05)}to{box-shadow:0 0 color-mix(in srgb,var(--c2g-badge-dot-color, currentColor) 0%,transparent);transform:scale(1)}}.c2g-badge--dot-only{width:1rem;height:1rem;min-width:1rem;min-height:1rem;padding:0;border-radius:50%}.c2g-badge--dot-only.c2g-badge--sm{width:.875rem;height:.875rem;min-width:.875rem;min-height:.875rem}.c2g-badge--dot-only.c2g-badge--md{width:1rem;height:1rem;min-width:1rem;min-height:1rem}.c2g-badge--dot-only .c2g-badge__dot{margin-right:0}.c2g-badge--dot-no-ring{border-color:transparent!important;background:transparent!important;box-shadow:none}.c2g-badge--solid.c2g-badge--neutral{background:var(--c2g-color-text-secondary, #4a423b);color:#fff}.c2g-badge--solid.c2g-badge--accent{background:var(--c2g-color-primary, #ff6b35);color:#fff}.c2g-badge--solid.c2g-badge--info{background:#1565c0;color:#fff}.c2g-badge--solid.c2g-badge--success{background:#2e7d32;color:#fff}.c2g-badge--solid.c2g-badge--warning{background:#ef6c00;color:#fff}.c2g-badge--solid.c2g-badge--danger{background:#c62828;color:#fff}.c2g-badge--subtle.c2g-badge--neutral{background:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 10%,#ffffff);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-badge--subtle.c2g-badge--accent{background:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 14%,#ffffff);color:color-mix(in srgb,var(--c2g-color-primary-dark, #e55623) 80%,#000000)}.c2g-badge--subtle.c2g-badge--info{background:color-mix(in srgb,#1565c0 12%,#ffffff);color:#0d47a1}.c2g-badge--subtle.c2g-badge--success{background:color-mix(in srgb,#2e7d32 12%,#ffffff);color:#1b5e20}.c2g-badge--subtle.c2g-badge--warning{background:color-mix(in srgb,#ef6c00 12%,#ffffff);color:#e65100}.c2g-badge--subtle.c2g-badge--danger{background:color-mix(in srgb,#c62828 13%,#ffffff);color:#b71c1c}.c2g-badge--outline.c2g-badge--neutral{border-color:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 35%,transparent);color:var(--c2g-color-text-secondary, #4a423b);background:transparent}.c2g-badge--outline.c2g-badge--accent{border-color:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 40%,transparent);color:color-mix(in srgb,var(--c2g-color-primary-dark, #e55623) 80%,#000000);background:transparent}.c2g-badge--outline.c2g-badge--info{border-color:color-mix(in srgb,#1565c0 40%,transparent);color:#0d47a1;background:transparent}.c2g-badge--outline.c2g-badge--success{border-color:color-mix(in srgb,#2e7d32 40%,transparent);color:#1b5e20;background:transparent}.c2g-badge--outline.c2g-badge--warning{border-color:color-mix(in srgb,#ef6c00 40%,transparent);color:#e65100;background:transparent}.c2g-badge--outline.c2g-badge--danger{border-color:color-mix(in srgb,#c62828 40%,transparent);color:#b71c1c;background:transparent}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], dotOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotOnly", required: false }] }], dotRing: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotRing", required: false }] }], dotPulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotPulse", required: false }] }], dotColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotColor", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class ChipComponent {
+    label = input('Chip', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    tone = input('neutral', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    removeAriaLabel = input('Chip entfernen', ...(ngDevMode ? [{ debugName: "removeAriaLabel" }] : []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconAriaLabel = input('', ...(ngDevMode ? [{ debugName: "iconAriaLabel" }] : []));
+    iconFontSet = input('', ...(ngDevMode ? [{ debugName: "iconFontSet" }] : []));
+    iconFontIcon = input('', ...(ngDevMode ? [{ debugName: "iconFontIcon" }] : []));
+    selectedChange = output();
+    removed = output();
+    isSelected = signal(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    chipClasses = computed(() => `c2g-chip c2g-chip--${this.tone()} ${this.isSelected() ? 'c2g-chip--selected' : ''}`, ...(ngDevMode ? [{ debugName: "chipClasses" }] : []));
+    constructor() {
+        effect(() => {
+            this.isSelected.set(this.selected());
+        });
+    }
+    toggleSelected() {
+        if (this.disabled()) {
+            return;
+        }
+        const next = !this.isSelected();
+        this.isSelected.set(next);
+        this.selectedChange.emit(next);
+    }
+    remove(event) {
+        event.stopPropagation();
+        if (this.disabled()) {
+            return;
+        }
+        this.removed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ChipComponent, isStandalone: true, selector: "c2g-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAriaLabel: { classPropertyName: "iconAriaLabel", publicName: "iconAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconFontSet: { classPropertyName: "iconFontSet", publicName: "iconFontSet", isSignal: true, isRequired: false, transformFunction: null }, iconFontIcon: { classPropertyName: "iconFontIcon", publicName: "iconFontIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", removed: "removed" }, ngImport: i0, template: `
+    <span class="c2g-chip" [class]="chipClasses()">
+      <button
+        type="button"
+        class="c2g-chip__action"
+        [disabled]="disabled()"
+        [attr.aria-pressed]="isSelected() ? 'true' : 'false'"
+        [attr.aria-label]="ariaLabel() || null"
+        (click)="toggleSelected()"
+      >
+        @if (icon() || iconFontIcon()) {
+          <mat-icon
+            class="c2g-chip__icon"
+            [fontSet]="iconFontSet()"
+            [fontIcon]="iconFontIcon()"
+            [attr.aria-label]="iconAriaLabel() || null"
+            [attr.aria-hidden]="iconAriaLabel() ? null : 'true'"
+          >
+            {{ icon() }}
+          </mat-icon>
+        }
+        <span>{{ label() }}</span>
+      </button>
+
+      @if (removable()) {
+        <button
+          type="button"
+          class="c2g-chip__remove"
+          [disabled]="disabled()"
+          [attr.aria-label]="removeAriaLabel()"
+          (click)="remove($event)"
+        >
+          <mat-icon class="c2g-chip__remove-icon" aria-hidden="true">close</mat-icon>
+        </button>
+      }
+    </span>
+  `, isInline: true, styles: [".c2g-chip{display:inline-flex;align-items:center;border-radius:999px;border:1px solid transparent;overflow:hidden;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-chip__action,.c2g-chip__remove{border:none;background:transparent;color:inherit;display:inline-flex;align-items:center;cursor:pointer;font:inherit;line-height:1}.c2g-chip__action{gap:var(--c2g-space-1, .25rem);padding:.35rem .6rem}.c2g-chip__remove{padding:.35rem .45rem .35rem .25rem;border-left:1px solid color-mix(in srgb,currentColor 24%,transparent)}.c2g-chip__icon,.c2g-chip__remove-icon{width:.875rem;height:.875rem;font-size:.8125rem;line-height:1}.c2g-chip__action:focus-visible,.c2g-chip__remove:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-chip__action:disabled,.c2g-chip__remove:disabled{cursor:not-allowed;opacity:.6}.c2g-chip--neutral{background:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 10%,#ffffff);color:var(--c2g-color-text-secondary, #4a423b);border-color:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 20%,transparent)}.c2g-chip--accent{background:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 13%,#ffffff);color:color-mix(in srgb,var(--c2g-color-primary-dark, #e55623) 78%,#000000);border-color:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 35%,transparent)}.c2g-chip--info{background:color-mix(in srgb,#1565c0 12%,#ffffff);color:#0d47a1;border-color:color-mix(in srgb,#1565c0 36%,transparent)}.c2g-chip--success{background:color-mix(in srgb,#2e7d32 12%,#ffffff);color:#1b5e20;border-color:color-mix(in srgb,#2e7d32 36%,transparent)}.c2g-chip--warning{background:color-mix(in srgb,#ef6c00 13%,#ffffff);color:#e65100;border-color:color-mix(in srgb,#ef6c00 36%,transparent)}.c2g-chip--danger{background:color-mix(in srgb,#c62828 13%,#ffffff);color:#b71c1c;border-color:color-mix(in srgb,#c62828 36%,transparent)}.c2g-chip--selected{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 40%,transparent);background:color-mix(in srgb,currentColor 18%,#ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-chip', standalone: true, imports: [MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="c2g-chip" [class]="chipClasses()">
+      <button
+        type="button"
+        class="c2g-chip__action"
+        [disabled]="disabled()"
+        [attr.aria-pressed]="isSelected() ? 'true' : 'false'"
+        [attr.aria-label]="ariaLabel() || null"
+        (click)="toggleSelected()"
+      >
+        @if (icon() || iconFontIcon()) {
+          <mat-icon
+            class="c2g-chip__icon"
+            [fontSet]="iconFontSet()"
+            [fontIcon]="iconFontIcon()"
+            [attr.aria-label]="iconAriaLabel() || null"
+            [attr.aria-hidden]="iconAriaLabel() ? null : 'true'"
+          >
+            {{ icon() }}
+          </mat-icon>
+        }
+        <span>{{ label() }}</span>
+      </button>
+
+      @if (removable()) {
+        <button
+          type="button"
+          class="c2g-chip__remove"
+          [disabled]="disabled()"
+          [attr.aria-label]="removeAriaLabel()"
+          (click)="remove($event)"
+        >
+          <mat-icon class="c2g-chip__remove-icon" aria-hidden="true">close</mat-icon>
+        </button>
+      }
+    </span>
+  `, styles: [".c2g-chip{display:inline-flex;align-items:center;border-radius:999px;border:1px solid transparent;overflow:hidden;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-chip__action,.c2g-chip__remove{border:none;background:transparent;color:inherit;display:inline-flex;align-items:center;cursor:pointer;font:inherit;line-height:1}.c2g-chip__action{gap:var(--c2g-space-1, .25rem);padding:.35rem .6rem}.c2g-chip__remove{padding:.35rem .45rem .35rem .25rem;border-left:1px solid color-mix(in srgb,currentColor 24%,transparent)}.c2g-chip__icon,.c2g-chip__remove-icon{width:.875rem;height:.875rem;font-size:.8125rem;line-height:1}.c2g-chip__action:focus-visible,.c2g-chip__remove:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-chip__action:disabled,.c2g-chip__remove:disabled{cursor:not-allowed;opacity:.6}.c2g-chip--neutral{background:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 10%,#ffffff);color:var(--c2g-color-text-secondary, #4a423b);border-color:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 20%,transparent)}.c2g-chip--accent{background:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 13%,#ffffff);color:color-mix(in srgb,var(--c2g-color-primary-dark, #e55623) 78%,#000000);border-color:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 35%,transparent)}.c2g-chip--info{background:color-mix(in srgb,#1565c0 12%,#ffffff);color:#0d47a1;border-color:color-mix(in srgb,#1565c0 36%,transparent)}.c2g-chip--success{background:color-mix(in srgb,#2e7d32 12%,#ffffff);color:#1b5e20;border-color:color-mix(in srgb,#2e7d32 36%,transparent)}.c2g-chip--warning{background:color-mix(in srgb,#ef6c00 13%,#ffffff);color:#e65100;border-color:color-mix(in srgb,#ef6c00 36%,transparent)}.c2g-chip--danger{background:color-mix(in srgb,#c62828 13%,#ffffff);color:#b71c1c;border-color:color-mix(in srgb,#c62828 36%,transparent)}.c2g-chip--selected{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 40%,transparent);background:color-mix(in srgb,currentColor 18%,#ffffff)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAriaLabel", required: false }] }], iconFontSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconFontSet", required: false }] }], iconFontIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconFontIcon", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+let nextCheckboxId = 0;
+class CheckboxComponent {
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input('Option', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    checkedChange = output();
+    checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    generatedId = `c2g-checkbox-${++nextCheckboxId}`;
+    checkboxId = computed(() => this.id().trim() || this.generatedId, ...(ngDevMode ? [{ debugName: "checkboxId" }] : []));
+    hintId = computed(() => `${this.checkboxId()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
+    describedBy = computed(() => (this.hint().trim() ? this.hintId() : null), ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const next = event.target.checked;
+        this.checked.set(next);
+        this.onChange(next);
+        this.checkedChange.emit(next);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: CheckboxComponent, isStandalone: true, selector: "c2g-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <label class="c2g-checkbox" [class.c2g-checkbox--disabled]="isDisabled()" [attr.for]="checkboxId()">
+      <input
+        class="c2g-checkbox__input"
+        type="checkbox"
+        [id]="checkboxId()"
+        [checked]="checked()"
+        [disabled]="isDisabled()"
+        [attr.aria-describedby]="describedBy()"
+        (change)="onInput($event)"
+        (blur)="onBlur()"
+      />
+      <span class="c2g-checkbox__box" aria-hidden="true"></span>
+      <span class="c2g-checkbox__label">{{ label() }}</span>
+    </label>
+
+    @if (hint().trim()) {
+      <p class="c2g-checkbox__hint" [id]="hintId()">{{ hint() }}</p>
+    }
+  `, isInline: true, styles: [".c2g-checkbox{display:inline-flex;align-items:center;gap:var(--c2g-space-2, .5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);color:var(--c2g-color-text-primary, #1a1714)}.c2g-checkbox--disabled{opacity:.55;cursor:not-allowed}.c2g-checkbox__input{position:absolute;opacity:0;pointer-events:none}.c2g-checkbox__box{width:1.125rem;height:1.125rem;border-radius:var(--c2g-radius-sm, .375rem);border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));background:var(--c2g-color-surface, #ffffff);display:inline-block;transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease);position:relative}.c2g-checkbox__input:checked+.c2g-checkbox__box{border-color:var(--c2g-color-primary-dark, #e55623);background:var(--c2g-color-primary, #ff6b35)}.c2g-checkbox__input:checked+.c2g-checkbox__box:after{content:\"\";position:absolute;left:.33rem;top:.12rem;width:.27rem;height:.55rem;border:solid var(--c2g-color-surface, #ffffff);border-width:0 2px 2px 0;transform:rotate(45deg)}.c2g-checkbox__input:focus-visible+.c2g-checkbox__box{box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-checkbox__label{font-size:var(--c2g-font-size-sm, .875rem)}.c2g-checkbox__hint{margin:var(--c2g-space-1, .25rem) 0 0 1.65rem;color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-xs, .75rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <label class="c2g-checkbox" [class.c2g-checkbox--disabled]="isDisabled()" [attr.for]="checkboxId()">
+      <input
+        class="c2g-checkbox__input"
+        type="checkbox"
+        [id]="checkboxId()"
+        [checked]="checked()"
+        [disabled]="isDisabled()"
+        [attr.aria-describedby]="describedBy()"
+        (change)="onInput($event)"
+        (blur)="onBlur()"
+      />
+      <span class="c2g-checkbox__box" aria-hidden="true"></span>
+      <span class="c2g-checkbox__label">{{ label() }}</span>
+    </label>
+
+    @if (hint().trim()) {
+      <p class="c2g-checkbox__hint" [id]="hintId()">{{ hint() }}</p>
+    }
+  `, styles: [".c2g-checkbox{display:inline-flex;align-items:center;gap:var(--c2g-space-2, .5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);color:var(--c2g-color-text-primary, #1a1714)}.c2g-checkbox--disabled{opacity:.55;cursor:not-allowed}.c2g-checkbox__input{position:absolute;opacity:0;pointer-events:none}.c2g-checkbox__box{width:1.125rem;height:1.125rem;border-radius:var(--c2g-radius-sm, .375rem);border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));background:var(--c2g-color-surface, #ffffff);display:inline-block;transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease);position:relative}.c2g-checkbox__input:checked+.c2g-checkbox__box{border-color:var(--c2g-color-primary-dark, #e55623);background:var(--c2g-color-primary, #ff6b35)}.c2g-checkbox__input:checked+.c2g-checkbox__box:after{content:\"\";position:absolute;left:.33rem;top:.12rem;width:.27rem;height:.55rem;border:solid var(--c2g-color-surface, #ffffff);border-width:0 2px 2px 0;transform:rotate(45deg)}.c2g-checkbox__input:focus-visible+.c2g-checkbox__box{box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-checkbox__label{font-size:var(--c2g-font-size-sm, .875rem)}.c2g-checkbox__hint{margin:var(--c2g-space-1, .25rem) 0 0 1.65rem;color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-xs, .75rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+class LoaderComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    tone = input('primary', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    label = input('Laden...', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    inline = input(true, ...(ngDevMode ? [{ debugName: "inline" }] : []));
+    ariaLabel = computed(() => this.label().trim() || 'Ladevorgang', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: LoaderComponent, isStandalone: true, selector: "c2g-loader", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      class="c2g-loader"
+      role="status"
+      [class.c2g-loader--inline]="inline()"
+      [class.c2g-loader--block]="!inline()"
+      [class.c2g-loader--sm]="size() === 'sm'"
+      [class.c2g-loader--md]="size() === 'md'"
+      [class.c2g-loader--lg]="size() === 'lg'"
+      [class.c2g-loader--primary]="tone() === 'primary'"
+      [class.c2g-loader--neutral]="tone() === 'neutral'"
+      [class.c2g-loader--inverse]="tone() === 'inverse'"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <span class="c2g-loader__spinner" aria-hidden="true"></span>
+      @if (showLabel()) {
+        <span class="c2g-loader__label">{{ label() }}</span>
+      }
+    </span>
+  `, isInline: true, styles: [".c2g-loader{--loader-color: var(--c2g-color-primary, #ff6b35);--loader-size: 1.25rem;display:inline-flex;align-items:center;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-loader--inline{display:inline-flex}.c2g-loader--block{display:flex;width:100%}.c2g-loader--sm{--loader-size: .9rem;font-size:var(--c2g-font-size-xs, .75rem)}.c2g-loader--md{--loader-size: 1.25rem;font-size:var(--c2g-font-size-sm, .875rem)}.c2g-loader--lg{--loader-size: 1.75rem;font-size:var(--c2g-font-size-md, 1rem)}.c2g-loader--primary{--loader-color: var(--c2g-color-primary, #ff6b35)}.c2g-loader--neutral{--loader-color: var(--c2g-color-text-muted, #6b5e52)}.c2g-loader--inverse{--loader-color: var(--c2g-color-surface, #ffffff);color:var(--c2g-color-surface, #ffffff)}.c2g-loader__spinner{width:var(--loader-size);height:var(--loader-size);border-radius:999px;border:2px solid color-mix(in srgb,var(--loader-color) 24%,transparent);border-top-color:var(--loader-color);animation:c2g-loader-spin .8s linear infinite;flex-shrink:0}.c2g-loader__label{line-height:1.2}@keyframes c2g-loader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-loader', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span
+      class="c2g-loader"
+      role="status"
+      [class.c2g-loader--inline]="inline()"
+      [class.c2g-loader--block]="!inline()"
+      [class.c2g-loader--sm]="size() === 'sm'"
+      [class.c2g-loader--md]="size() === 'md'"
+      [class.c2g-loader--lg]="size() === 'lg'"
+      [class.c2g-loader--primary]="tone() === 'primary'"
+      [class.c2g-loader--neutral]="tone() === 'neutral'"
+      [class.c2g-loader--inverse]="tone() === 'inverse'"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <span class="c2g-loader__spinner" aria-hidden="true"></span>
+      @if (showLabel()) {
+        <span class="c2g-loader__label">{{ label() }}</span>
+      }
+    </span>
+  `, styles: [".c2g-loader{--loader-color: var(--c2g-color-primary, #ff6b35);--loader-size: 1.25rem;display:inline-flex;align-items:center;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-loader--inline{display:inline-flex}.c2g-loader--block{display:flex;width:100%}.c2g-loader--sm{--loader-size: .9rem;font-size:var(--c2g-font-size-xs, .75rem)}.c2g-loader--md{--loader-size: 1.25rem;font-size:var(--c2g-font-size-sm, .875rem)}.c2g-loader--lg{--loader-size: 1.75rem;font-size:var(--c2g-font-size-md, 1rem)}.c2g-loader--primary{--loader-color: var(--c2g-color-primary, #ff6b35)}.c2g-loader--neutral{--loader-color: var(--c2g-color-text-muted, #6b5e52)}.c2g-loader--inverse{--loader-color: var(--c2g-color-surface, #ffffff);color:var(--c2g-color-surface, #ffffff)}.c2g-loader__spinner{width:var(--loader-size);height:var(--loader-size);border-radius:999px;border:2px solid color-mix(in srgb,var(--loader-color) 24%,transparent);border-top-color:var(--loader-color);animation:c2g-loader-spin .8s linear infinite;flex-shrink:0}.c2g-loader__label{line-height:1.2}@keyframes c2g-loader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }] } });
+
+const C2G_LOTTIE_PRESET_OPTIONS = [
+    'beach',
+    'camping',
+    'car',
+    'cat-love',
+    'checklist',
+    'coffee-time',
+    'car-driving-landscape',
+    'error-404',
+    'fishing',
+    'mountain-search',
+    'planning',
+    'share',
+    'summer-camp',
+    'thinking',
+    'walking-orange',
+    'walking-avocado',
+    'weather-partly-cloudy',
+];
+const C2G_LOTTIE_PRESET_PATHS = {
+    beach: '/assets/animations/beach-animation.json',
+    camping: '/assets/animations/camping-animation.json',
+    car: '/assets/animations/car-animation.json',
+    'cat-love': '/assets/animations/cat-love-animation.json',
+    checklist: '/assets/animations/checklist-animation.json',
+    'error-404': '/assets/animations/error-404.json',
+    fishing: '/assets/animations/fishing-animation.json',
+    'mountain-search': '/assets/animations/mountain-search-animation.json',
+    planning: '/assets/animations/planning-animation.json',
+    share: '/assets/animations/share-animation.json',
+    'summer-camp': '/assets/animations/summer-camp-animation.json',
+    thinking: '/assets/animations/thinking-animation.json',
+    'coffee-time': '/assets/animations/coffee-time-animation.json',
+    'car-driving-landscape': '/assets/animations/car-driving-landscape-animation.json',
+    'walking-orange': '/assets/animations/walking-orange-animation.json',
+    'walking-avocado': '/assets/animations/walking-avocado-animation.json',
+    'weather-partly-cloudy': '/assets/animations/weather-partly-cloudy-animation.json',
+};
+const C2G_LOTTIE_PRESET_IMPORTERS = {
+    beach: () => import('./camp2gether-c2g-ui-beach-animation-ipi3OoKW.mjs'),
+    camping: () => import('./camp2gether-c2g-ui-camping-animation-DY6XWXyF.mjs'),
+    car: () => import('./camp2gether-c2g-ui-car-animation-DnDp7WfG.mjs'),
+    'cat-love': () => import('./camp2gether-c2g-ui-cat-love-animation-ewC7fZyY.mjs'),
+    checklist: () => import('./camp2gether-c2g-ui-checklist-animation-DqUkcLqI.mjs'),
+    'error-404': () => import('./camp2gether-c2g-ui-error-404-pdjg-EHb.mjs'),
+    fishing: () => import('./camp2gether-c2g-ui-fishing-animation-DwE3IF-V.mjs'),
+    'mountain-search': () => import('./camp2gether-c2g-ui-mountain-search-animation-TebM1gS4.mjs'),
+    planning: () => import('./camp2gether-c2g-ui-planning-animation-D8QSsZk6.mjs'),
+    share: () => import('./camp2gether-c2g-ui-share-animation-qgqs-k59.mjs'),
+    'summer-camp': () => import('./camp2gether-c2g-ui-summer-camp-animation-DPzirVNH.mjs'),
+    thinking: () => import('./camp2gether-c2g-ui-thinking-animation--X3er_pf.mjs'),
+    'coffee-time': () => import('./camp2gether-c2g-ui-coffee-time-animation-DQilaE0A.mjs'),
+    'car-driving-landscape': () => import('./camp2gether-c2g-ui-car-driving-landscape-animation-CawNeMKD.mjs'),
+    'walking-orange': () => import('./camp2gether-c2g-ui-walking-orange-animation-CTJniCsF.mjs'),
+    'walking-avocado': () => import('./camp2gether-c2g-ui-walking-avocado-animation-CQMU2C9-.mjs'),
+    'weather-partly-cloudy': () => import('./camp2gether-c2g-ui-weather-partly-cloudy-animation-Cnw3W4cS.mjs'),
+};
+async function loadC2gLottiePresetData(preset) {
+    const module = await C2G_LOTTIE_PRESET_IMPORTERS[preset]();
+    return module.default;
+}
+
+class LottieLoaderComponent {
+    preset = input('cat-love', ...(ngDevMode ? [{ debugName: "preset" }] : []));
+    presetMode = input('embedded', ...(ngDevMode ? [{ debugName: "presetMode" }] : []));
+    animationPath = input('', ...(ngDevMode ? [{ debugName: "animationPath" }] : []));
+    animationData = input(null, ...(ngDevMode ? [{ debugName: "animationData" }] : []));
+    loop = input(true, ...(ngDevMode ? [{ debugName: "loop" }] : []));
+    autoplay = input(true, ...(ngDevMode ? [{ debugName: "autoplay" }] : []));
+    width = input('96px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input('96px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    label = input('Lade...', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    ariaLabel = computed(() => this.label().trim() || 'Ladevorgang', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    lazyPresetData = signal(null, ...(ngDevMode ? [{ debugName: "lazyPresetData" }] : []));
+    hasRenderableAnimation = computed(() => {
+        const animationData = this.animationData();
+        if (animationData) {
+            return true;
+        }
+        if (this.animationPath().trim()) {
+            return true;
+        }
+        if (this.presetMode() === 'path') {
+            return true;
+        }
+        return this.lazyPresetData() !== null;
+    }, ...(ngDevMode ? [{ debugName: "hasRenderableAnimation" }] : []));
+    constructor() {
+        effect((onCleanup) => {
+            const hasCustomData = this.animationData() !== null;
+            const hasCustomPath = this.animationPath().trim().length > 0;
+            const mode = this.presetMode();
+            const preset = this.preset();
+            if (hasCustomData || hasCustomPath || mode === 'path') {
+                this.lazyPresetData.set(null);
+                return;
+            }
+            let cancelled = false;
+            this.lazyPresetData.set(null);
+            void loadC2gLottiePresetData(preset)
+                .then((data) => {
+                if (!cancelled) {
+                    this.lazyPresetData.set(data);
+                }
+            })
+                .catch(() => {
+                if (!cancelled) {
+                    this.lazyPresetData.set(null);
+                }
+            });
+            onCleanup(() => {
+                cancelled = true;
+            });
+        });
+    }
+    cloneAnimationData(value) {
+        if (typeof structuredClone === 'function') {
+            return structuredClone(value);
+        }
+        return JSON.parse(JSON.stringify(value));
+    }
+    options = computed(() => {
+        const base = {
+            loop: this.loop(),
+            autoplay: this.autoplay(),
+        };
+        const animationData = this.animationData();
+        if (animationData) {
+            return {
+                ...base,
+                // ngx-lottie/lottie-web may mutate animationData; clone to avoid shared-state issues.
+                animationData: this.cloneAnimationData(animationData),
+            };
+        }
+        const explicitPath = this.animationPath().trim();
+        if (explicitPath) {
+            return {
+                ...base,
+                path: explicitPath,
+            };
+        }
+        if (this.presetMode() === 'path') {
+            return {
+                ...base,
+                path: C2G_LOTTIE_PRESET_PATHS[this.preset()],
+            };
+        }
+        const lazyData = this.lazyPresetData();
+        if (!lazyData) {
+            return base;
+        }
+        return {
+            ...base,
+            animationData: this.cloneAnimationData(lazyData),
+        };
+    }, ...(ngDevMode ? [{ debugName: "options" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LottieLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: LottieLoaderComponent, isStandalone: true, selector: "c2g-lottie-loader", inputs: { preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, presetMode: { classPropertyName: "presetMode", publicName: "presetMode", isSignal: true, isRequired: false, transformFunction: null }, animationPath: { classPropertyName: "animationPath", publicName: "animationPath", isSignal: true, isRequired: false, transformFunction: null }, animationData: { classPropertyName: "animationData", publicName: "animationData", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="c2g-lottie-loader" role="status" [attr.aria-label]="ariaLabel()">
+      @if (hasRenderableAnimation()) {
+        <ng-lottie
+          class="c2g-lottie-loader__animation"
+          [options]="options()"
+          [width]="width()"
+          [height]="height()"
+          aria-hidden="true"
+        ></ng-lottie>
+      } @else {
+        <span class="c2g-lottie-loader__fallback" aria-hidden="true"></span>
+      }
+
+      @if (showLabel()) {
+        <span class="c2g-lottie-loader__label">{{ label() }}</span>
+      }
+    </div>
+  `, isInline: true, styles: [".c2g-lottie-loader{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-lottie-loader__animation{display:inline-block;line-height:0}.c2g-lottie-loader__fallback{width:1.5rem;height:1.5rem;border-radius:999px;border:2px solid color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 24%,transparent);border-top-color:var(--c2g-color-primary, #ff6b35);animation:c2g-lottie-loader-fallback-spin .8s linear infinite}.c2g-lottie-loader__label{font-size:var(--c2g-font-size-sm, .875rem);line-height:1.2;text-align:center}@keyframes c2g-lottie-loader-fallback-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LottieLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-lottie-loader', standalone: true, imports: [LottieComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="c2g-lottie-loader" role="status" [attr.aria-label]="ariaLabel()">
+      @if (hasRenderableAnimation()) {
+        <ng-lottie
+          class="c2g-lottie-loader__animation"
+          [options]="options()"
+          [width]="width()"
+          [height]="height()"
+          aria-hidden="true"
+        ></ng-lottie>
+      } @else {
+        <span class="c2g-lottie-loader__fallback" aria-hidden="true"></span>
+      }
+
+      @if (showLabel()) {
+        <span class="c2g-lottie-loader__label">{{ label() }}</span>
+      }
+    </div>
+  `, styles: [".c2g-lottie-loader{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-lottie-loader__animation{display:inline-block;line-height:0}.c2g-lottie-loader__fallback{width:1.5rem;height:1.5rem;border-radius:999px;border:2px solid color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 24%,transparent);border-top-color:var(--c2g-color-primary, #ff6b35);animation:c2g-lottie-loader-fallback-spin .8s linear infinite}.c2g-lottie-loader__label{font-size:var(--c2g-font-size-sm, .875rem);line-height:1.2;text-align:center}@keyframes c2g-lottie-loader-fallback-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], presetMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetMode", required: false }] }], animationPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationPath", required: false }] }], animationData: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationData", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }] } });
+
+class SkeletonComponent {
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    radius = input('', ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : []));
+    resolvedWidth = computed(() => (this.width().trim() ? this.width() : '100%'), ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : []));
+    resolvedHeight = computed(() => {
+        if (this.height().trim()) {
+            return this.height();
+        }
+        if (this.variant() === 'avatar') {
+            return '2.5rem';
+        }
+        if (this.variant() === 'block') {
+            return '5.5rem';
+        }
+        return '0.95rem';
+    }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : []));
+    resolvedRadius = computed(() => {
+        if (this.radius().trim()) {
+            return this.radius();
+        }
+        return this.variant() === 'avatar' ? '999px' : '0.45rem';
+    }, ...(ngDevMode ? [{ debugName: "resolvedRadius" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: SkeletonComponent, isStandalone: true, selector: "c2g-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      class="c2g-skeleton"
+      [class.c2g-skeleton--animated]="animated()"
+      [class.c2g-skeleton--text]="variant() === 'text'"
+      [class.c2g-skeleton--block]="variant() === 'block'"
+      [class.c2g-skeleton--avatar]="variant() === 'avatar'"
+      [style.width]="resolvedWidth()"
+      [style.height]="resolvedHeight()"
+      [style.borderRadius]="resolvedRadius()"
+      aria-hidden="true"
+    ></span>
+  `, isInline: true, styles: [".c2g-skeleton{display:inline-block;width:100%;height:1rem;border-radius:var(--c2g-radius-sm, .375rem);background:linear-gradient(90deg,color-mix(in srgb,var(--c2g-color-neutral-200, #e1d9ce) 78%,#ffffff),color-mix(in srgb,var(--c2g-color-neutral-200, #e1d9ce) 56%,#ffffff) 45%,color-mix(in srgb,var(--c2g-color-neutral-200, #e1d9ce) 78%,#ffffff));background-size:240% 100%}.c2g-skeleton--animated{animation:c2g-skeleton-shimmer 1.5s ease-in-out infinite}.c2g-skeleton--text{height:.95rem;border-radius:.45rem}.c2g-skeleton--block{height:5.5rem}.c2g-skeleton--avatar{width:2.5rem;height:2.5rem;border-radius:999px}@keyframes c2g-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-40% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span
+      class="c2g-skeleton"
+      [class.c2g-skeleton--animated]="animated()"
+      [class.c2g-skeleton--text]="variant() === 'text'"
+      [class.c2g-skeleton--block]="variant() === 'block'"
+      [class.c2g-skeleton--avatar]="variant() === 'avatar'"
+      [style.width]="resolvedWidth()"
+      [style.height]="resolvedHeight()"
+      [style.borderRadius]="resolvedRadius()"
+      aria-hidden="true"
+    ></span>
+  `, styles: [".c2g-skeleton{display:inline-block;width:100%;height:1rem;border-radius:var(--c2g-radius-sm, .375rem);background:linear-gradient(90deg,color-mix(in srgb,var(--c2g-color-neutral-200, #e1d9ce) 78%,#ffffff),color-mix(in srgb,var(--c2g-color-neutral-200, #e1d9ce) 56%,#ffffff) 45%,color-mix(in srgb,var(--c2g-color-neutral-200, #e1d9ce) 78%,#ffffff));background-size:240% 100%}.c2g-skeleton--animated{animation:c2g-skeleton-shimmer 1.5s ease-in-out infinite}.c2g-skeleton--text{height:.95rem;border-radius:.45rem}.c2g-skeleton--block{height:5.5rem}.c2g-skeleton--avatar{width:2.5rem;height:2.5rem;border-radius:999px}@keyframes c2g-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-40% 0}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
+
+class AlertComponent {
+    tone = input('info', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    variant = input('soft', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    title = input('Hinweis', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+    open = input(undefined, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
+    closeLabel = input('Hinweis schliessen', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
+    dismissed = output();
+    internalVisible = signal(true, ...(ngDevMode ? [{ debugName: "internalVisible" }] : []));
+    visible = computed(() => {
+        const externallyControlled = this.open();
+        return externallyControlled === undefined ? this.internalVisible() : externallyControlled;
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    liveRole = computed(() => (this.tone() === 'danger' || this.tone() === 'warning' ? 'alert' : 'status'), ...(ngDevMode ? [{ debugName: "liveRole" }] : []));
+    ariaLive = computed(() => (this.liveRole() === 'alert' ? 'assertive' : 'polite'), ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
+    iconSymbol = computed(() => {
+        switch (this.tone()) {
+            case 'success':
+                return 'v';
+            case 'warning':
+                return '!';
+            case 'danger':
+                return 'x';
+            default:
+                return 'i';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconSymbol" }] : []));
+    dismiss() {
+        if (this.open() === undefined) {
+            this.internalVisible.set(false);
+        }
+        this.dismissed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AlertComponent, isStandalone: true, selector: "c2g-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: `
+    @if (visible()) {
+      <section
+        class="c2g-alert"
+        [class.c2g-alert--soft]="variant() === 'soft'"
+        [class.c2g-alert--solid]="variant() === 'solid'"
+        [class.c2g-alert--outline]="variant() === 'outline'"
+        [class.c2g-alert--info]="tone() === 'info'"
+        [class.c2g-alert--success]="tone() === 'success'"
+        [class.c2g-alert--warning]="tone() === 'warning'"
+        [class.c2g-alert--danger]="tone() === 'danger'"
+        [attr.role]="liveRole()"
+        [attr.aria-live]="ariaLive()"
+      >
+        <span class="c2g-alert__icon" aria-hidden="true">{{ iconSymbol() }}</span>
+
+        <div class="c2g-alert__content">
+          @if (title().trim()) {
+            <h4 class="c2g-alert__title">{{ title() }}</h4>
+          }
+          @if (message().trim()) {
+            <p class="c2g-alert__message">{{ message() }}</p>
+          }
+        </div>
+
+        @if (dismissible()) {
+          <button
+            type="button"
+            class="c2g-alert__close"
+            (click)="dismiss()"
+            [attr.aria-label]="closeLabel()"
+          >
+            x
+          </button>
+        }
+      </section>
+    }
+  `, isInline: true, styles: [".c2g-alert{--alert-fg: #1a1714;--alert-bg: color-mix(in srgb, var(--c2g-color-neutral-200, #e1d9ce) 35%, #ffffff);--alert-border: color-mix(in srgb, var(--c2g-color-border-subtle, rgba(74, 66, 59, .18)) 100%, transparent);display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:var(--c2g-space-3, .75rem);padding:var(--c2g-space-3, .75rem) var(--c2g-space-4, 1rem);border-radius:var(--c2g-radius-md, .625rem);border:1px solid var(--alert-border);color:var(--alert-fg);background:var(--alert-bg);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-alert--info{--alert-fg: #134a7c;--alert-bg: color-mix(in srgb, #4aa3ff 14%, #ffffff);--alert-border: color-mix(in srgb, #4aa3ff 36%, transparent)}.c2g-alert--success{--alert-fg: #1f6b41;--alert-bg: color-mix(in srgb, #43b581 14%, #ffffff);--alert-border: color-mix(in srgb, #43b581 36%, transparent)}.c2g-alert--warning{--alert-fg: #6c4a0a;--alert-bg: color-mix(in srgb, #ffb020 16%, #ffffff);--alert-border: color-mix(in srgb, #ffb020 42%, transparent)}.c2g-alert--danger{--alert-fg: #802e2e;--alert-bg: color-mix(in srgb, #ef4444 14%, #ffffff);--alert-border: color-mix(in srgb, #ef4444 40%, transparent)}.c2g-alert--solid{background:color-mix(in srgb,var(--alert-fg) 88%,#000000 0%);color:#fff;border-color:transparent}.c2g-alert--outline{background:transparent;border-width:2px}.c2g-alert__icon{width:1.25rem;line-height:1.25rem;text-align:center;font-weight:700;margin-top:.08rem}.c2g-alert__title{margin:0;font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-semibold, 600);line-height:1.2}.c2g-alert__message{margin:.2rem 0 0;font-size:var(--c2g-font-size-sm, .875rem);line-height:1.35}.c2g-alert__close{border:none;background:transparent;color:inherit;font-weight:700;font-size:.875rem;line-height:1;cursor:pointer;border-radius:var(--c2g-radius-sm, .375rem);padding:.25rem}.c2g-alert__close:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 24%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (visible()) {
+      <section
+        class="c2g-alert"
+        [class.c2g-alert--soft]="variant() === 'soft'"
+        [class.c2g-alert--solid]="variant() === 'solid'"
+        [class.c2g-alert--outline]="variant() === 'outline'"
+        [class.c2g-alert--info]="tone() === 'info'"
+        [class.c2g-alert--success]="tone() === 'success'"
+        [class.c2g-alert--warning]="tone() === 'warning'"
+        [class.c2g-alert--danger]="tone() === 'danger'"
+        [attr.role]="liveRole()"
+        [attr.aria-live]="ariaLive()"
+      >
+        <span class="c2g-alert__icon" aria-hidden="true">{{ iconSymbol() }}</span>
+
+        <div class="c2g-alert__content">
+          @if (title().trim()) {
+            <h4 class="c2g-alert__title">{{ title() }}</h4>
+          }
+          @if (message().trim()) {
+            <p class="c2g-alert__message">{{ message() }}</p>
+          }
+        </div>
+
+        @if (dismissible()) {
+          <button
+            type="button"
+            class="c2g-alert__close"
+            (click)="dismiss()"
+            [attr.aria-label]="closeLabel()"
+          >
+            x
+          </button>
+        }
+      </section>
+    }
+  `, styles: [".c2g-alert{--alert-fg: #1a1714;--alert-bg: color-mix(in srgb, var(--c2g-color-neutral-200, #e1d9ce) 35%, #ffffff);--alert-border: color-mix(in srgb, var(--c2g-color-border-subtle, rgba(74, 66, 59, .18)) 100%, transparent);display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:var(--c2g-space-3, .75rem);padding:var(--c2g-space-3, .75rem) var(--c2g-space-4, 1rem);border-radius:var(--c2g-radius-md, .625rem);border:1px solid var(--alert-border);color:var(--alert-fg);background:var(--alert-bg);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-alert--info{--alert-fg: #134a7c;--alert-bg: color-mix(in srgb, #4aa3ff 14%, #ffffff);--alert-border: color-mix(in srgb, #4aa3ff 36%, transparent)}.c2g-alert--success{--alert-fg: #1f6b41;--alert-bg: color-mix(in srgb, #43b581 14%, #ffffff);--alert-border: color-mix(in srgb, #43b581 36%, transparent)}.c2g-alert--warning{--alert-fg: #6c4a0a;--alert-bg: color-mix(in srgb, #ffb020 16%, #ffffff);--alert-border: color-mix(in srgb, #ffb020 42%, transparent)}.c2g-alert--danger{--alert-fg: #802e2e;--alert-bg: color-mix(in srgb, #ef4444 14%, #ffffff);--alert-border: color-mix(in srgb, #ef4444 40%, transparent)}.c2g-alert--solid{background:color-mix(in srgb,var(--alert-fg) 88%,#000000 0%);color:#fff;border-color:transparent}.c2g-alert--outline{background:transparent;border-width:2px}.c2g-alert__icon{width:1.25rem;line-height:1.25rem;text-align:center;font-weight:700;margin-top:.08rem}.c2g-alert__title{margin:0;font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-semibold, 600);line-height:1.2}.c2g-alert__message{margin:.2rem 0 0;font-size:var(--c2g-font-size-sm, .875rem);line-height:1.35}.c2g-alert__close{border:none;background:transparent;color:inherit;font-weight:700;font-size:.875rem;line-height:1;cursor:pointer;border-radius:var(--c2g-radius-sm, .375rem);padding:.25rem}.c2g-alert__close:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 24%,transparent)}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+class ProgressComponent {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    tone = input('primary', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    label = input('Fortschritt', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : []));
+    animated = input(false, ...(ngDevMode ? [{ debugName: "animated" }] : []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    safeMax = computed(() => (this.max() > 0 ? this.max() : 100), ...(ngDevMode ? [{ debugName: "safeMax" }] : []));
+    clampedValue = computed(() => {
+        const next = this.value();
+        return Math.min(Math.max(next, 0), this.safeMax());
+    }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+    percent = computed(() => (this.clampedValue() / this.safeMax()) * 100, ...(ngDevMode ? [{ debugName: "percent" }] : []));
+    percentLabel = computed(() => `${Math.round(this.percent())}%`, ...(ngDevMode ? [{ debugName: "percentLabel" }] : []));
+    resolvedAriaLabel = computed(() => {
+        const explicit = this.ariaLabel().trim();
+        if (explicit) {
+            return explicit;
+        }
+        const fromLabel = this.label().trim();
+        return fromLabel || 'Fortschritt';
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ProgressComponent, isStandalone: true, selector: "c2g-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="c2g-progress" [class.c2g-progress--indeterminate]="indeterminate()">
+      @if (showLabel()) {
+        <div class="c2g-progress__meta">
+          <span class="c2g-progress__label">{{ label() }}</span>
+          @if (!indeterminate()) {
+            <span class="c2g-progress__value">{{ percentLabel() }}</span>
+          }
+        </div>
+      }
+
+      <div
+        class="c2g-progress__track"
+        role="progressbar"
+        [class.c2g-progress__track--sm]="size() === 'sm'"
+        [class.c2g-progress__track--md]="size() === 'md'"
+        [class.c2g-progress__track--lg]="size() === 'lg'"
+        [attr.aria-label]="resolvedAriaLabel()"
+        [attr.aria-valuemin]="indeterminate() ? null : 0"
+        [attr.aria-valuemax]="indeterminate() ? null : safeMax()"
+        [attr.aria-valuenow]="indeterminate() ? null : clampedValue()"
+      >
+        <span
+          class="c2g-progress__bar"
+          [class.c2g-progress__bar--primary]="tone() === 'primary'"
+          [class.c2g-progress__bar--success]="tone() === 'success'"
+          [class.c2g-progress__bar--warning]="tone() === 'warning'"
+          [class.c2g-progress__bar--danger]="tone() === 'danger'"
+          [class.c2g-progress__bar--striped]="striped()"
+          [class.c2g-progress__bar--animated]="animated()"
+          [style.width.%]="indeterminate() ? 38 : percent()"
+        ></span>
+      </div>
+    </div>
+  `, isInline: true, styles: [".c2g-progress{display:grid;gap:var(--c2g-space-2, .5rem);width:100%;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-progress__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--c2g-space-3, .75rem);font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-progress__label{font-weight:var(--c2g-font-weight-semibold, 600)}.c2g-progress__track{width:100%;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--c2g-color-neutral-200, #e1d9ce) 70%,#ffffff)}.c2g-progress__track--sm{height:.375rem}.c2g-progress__track--md{height:.625rem}.c2g-progress__track--lg{height:.875rem}.c2g-progress__bar{display:block;height:100%;width:0;border-radius:inherit;transition:width .22s ease;background:var(--c2g-color-primary, #ff6b35)}.c2g-progress__bar--primary{background:var(--c2g-color-primary, #ff6b35)}.c2g-progress__bar--success{background:#43b581}.c2g-progress__bar--warning{background:#ffb020}.c2g-progress__bar--danger{background:#ef4444}.c2g-progress__bar--striped{background-image:linear-gradient(45deg,color-mix(in srgb,#ffffff 18%,transparent) 25%,transparent 25%,transparent 50%,color-mix(in srgb,#ffffff 18%,transparent) 50%,color-mix(in srgb,#ffffff 18%,transparent) 75%,transparent 75%,transparent);background-size:1rem 1rem}.c2g-progress__bar--animated{animation:c2g-progress-shift .9s linear infinite}.c2g-progress--indeterminate .c2g-progress__bar{animation:c2g-progress-indeterminate 1.2s ease-in-out infinite;transform-origin:left center}@keyframes c2g-progress-shift{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes c2g-progress-indeterminate{0%{transform:translate(-120%)}50%{transform:translate(120%)}to{transform:translate(220%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-progress', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="c2g-progress" [class.c2g-progress--indeterminate]="indeterminate()">
+      @if (showLabel()) {
+        <div class="c2g-progress__meta">
+          <span class="c2g-progress__label">{{ label() }}</span>
+          @if (!indeterminate()) {
+            <span class="c2g-progress__value">{{ percentLabel() }}</span>
+          }
+        </div>
+      }
+
+      <div
+        class="c2g-progress__track"
+        role="progressbar"
+        [class.c2g-progress__track--sm]="size() === 'sm'"
+        [class.c2g-progress__track--md]="size() === 'md'"
+        [class.c2g-progress__track--lg]="size() === 'lg'"
+        [attr.aria-label]="resolvedAriaLabel()"
+        [attr.aria-valuemin]="indeterminate() ? null : 0"
+        [attr.aria-valuemax]="indeterminate() ? null : safeMax()"
+        [attr.aria-valuenow]="indeterminate() ? null : clampedValue()"
+      >
+        <span
+          class="c2g-progress__bar"
+          [class.c2g-progress__bar--primary]="tone() === 'primary'"
+          [class.c2g-progress__bar--success]="tone() === 'success'"
+          [class.c2g-progress__bar--warning]="tone() === 'warning'"
+          [class.c2g-progress__bar--danger]="tone() === 'danger'"
+          [class.c2g-progress__bar--striped]="striped()"
+          [class.c2g-progress__bar--animated]="animated()"
+          [style.width.%]="indeterminate() ? 38 : percent()"
+        ></span>
+      </div>
+    </div>
+  `, styles: [".c2g-progress{display:grid;gap:var(--c2g-space-2, .5rem);width:100%;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-progress__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--c2g-space-3, .75rem);font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-progress__label{font-weight:var(--c2g-font-weight-semibold, 600)}.c2g-progress__track{width:100%;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--c2g-color-neutral-200, #e1d9ce) 70%,#ffffff)}.c2g-progress__track--sm{height:.375rem}.c2g-progress__track--md{height:.625rem}.c2g-progress__track--lg{height:.875rem}.c2g-progress__bar{display:block;height:100%;width:0;border-radius:inherit;transition:width .22s ease;background:var(--c2g-color-primary, #ff6b35)}.c2g-progress__bar--primary{background:var(--c2g-color-primary, #ff6b35)}.c2g-progress__bar--success{background:#43b581}.c2g-progress__bar--warning{background:#ffb020}.c2g-progress__bar--danger{background:#ef4444}.c2g-progress__bar--striped{background-image:linear-gradient(45deg,color-mix(in srgb,#ffffff 18%,transparent) 25%,transparent 25%,transparent 50%,color-mix(in srgb,#ffffff 18%,transparent) 50%,color-mix(in srgb,#ffffff 18%,transparent) 75%,transparent 75%,transparent);background-size:1rem 1rem}.c2g-progress__bar--animated{animation:c2g-progress-shift .9s linear infinite}.c2g-progress--indeterminate .c2g-progress__bar{animation:c2g-progress-indeterminate 1.2s ease-in-out infinite;transform-origin:left center}@keyframes c2g-progress-shift{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes c2g-progress-indeterminate{0%{transform:translate(-120%)}50%{transform:translate(120%)}to{transform:translate(220%)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+
+let nextInputId = 0;
+class InputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
+    suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    valueChanged = output();
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    generatedId = `c2g-input-${++nextInputId}`;
+    inputId = computed(() => this.id().trim() || this.generatedId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    hintId = computed(() => `${this.inputId()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
+    errorId = computed(() => `${this.inputId()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
+    counterId = computed(() => `${this.inputId()}-counter`, ...(ngDevMode ? [{ debugName: "counterId" }] : []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.error().trim()) {
+            ids.push(this.errorId());
+        }
+        else if (this.hint().trim()) {
+            ids.push(this.hintId());
+        }
+        if (this.showCounter()) {
+            ids.push(this.counterId());
+        }
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    valueLength = computed(() => this.value().length, ...(ngDevMode ? [{ debugName: "valueLength" }] : []));
+    showCounter = computed(() => (this.maxLength() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "showCounter" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const nextValue = event.target.value;
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+        this.valueChanged.emit(nextValue);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InputComponent, isStandalone: true, selector: "c2g-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div class="c2g-field">
+      @if (label().trim()) {
+        <label class="c2g-field__label" [attr.for]="inputId()">
+          {{ label() }}
+          @if (required()) {
+            <span class="c2g-field__required" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+
+      <div class="c2g-field__control-shell" [class.c2g-field__control-shell--error]="!!error().trim()">
+        @if (prefix().trim()) {
+          <span class="c2g-field__affix" aria-hidden="true">{{ prefix() }}</span>
+        }
+
+        <input
+          class="c2g-field__control"
+          [id]="inputId()"
+          [type]="type()"
+          [value]="value()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [required]="required()"
+          [attr.maxlength]="maxLength() || null"
+          [attr.aria-invalid]="error().trim() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-busy]="loading() ? 'true' : null"
+          (input)="onInput($event)"
+          (blur)="onBlur()"
+        />
+
+        @if (loading()) {
+          <span class="c2g-field__spinner" aria-hidden="true"></span>
+        }
+
+        @if (suffix().trim()) {
+          <span class="c2g-field__affix" aria-hidden="true">{{ suffix() }}</span>
+        }
+      </div>
+
+      <div class="c2g-field__meta">
+        @if (error().trim()) {
+          <p class="c2g-field__message c2g-field__message--error" [id]="errorId()">{{ error() }}</p>
+        } @else if (hint().trim()) {
+          <p class="c2g-field__message" [id]="hintId()">{{ hint() }}</p>
+        }
+
+        @if (showCounter()) {
+          <span class="c2g-field__counter" [id]="counterId()">{{ valueLength() }} / {{ maxLength() }}</span>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".c2g-field{width:100%;display:grid;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-field__label{color:var(--c2g-color-text-secondary, #4a423b);font-weight:var(--c2g-font-weight-semibold, 600);font-size:var(--c2g-font-size-sm, .875rem);display:inline-flex;align-items:center;gap:var(--c2g-space-1, .25rem)}.c2g-field__required{color:var(--c2g-color-error, #ff6b6b);line-height:1}.c2g-field__control-shell{min-height:2.75rem;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:var(--c2g-radius-md, .625rem);background:var(--c2g-color-surface, #ffffff);display:flex;align-items:center;gap:var(--c2g-space-2, .5rem);padding:0 var(--c2g-space-3, .75rem);transition:border-color var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease),box-shadow var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-field__control-shell:focus-within{border-color:var(--c2g-color-focus, #e55623);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 20%,transparent)}.c2g-field__control-shell--error{border-color:var(--c2g-color-error, #ff6b6b)}.c2g-field__control{width:100%;min-width:0;border:none;background:transparent;color:var(--c2g-color-text-primary, #1a1714);font-size:var(--c2g-font-size-md, 1rem);line-height:1.4;outline:none;padding:0}.c2g-field__control::placeholder{color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__control:disabled{cursor:not-allowed;opacity:.7}.c2g-field__affix{color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-sm, .875rem);white-space:nowrap}.c2g-field__spinner{width:1rem;height:1rem;border:2px solid var(--c2g-color-primary, #ff6b35);border-right-color:transparent;border-radius:999px;animation:c2g-field-spin .8s linear infinite;flex:0 0 auto}.c2g-field__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--c2g-space-2, .5rem);min-height:1.25rem}.c2g-field__message{margin:0;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__message--error{color:var(--c2g-color-error, #ff6b6b)}.c2g-field__counter{margin-left:auto;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52);font-variant-numeric:tabular-nums}@keyframes c2g-field-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <div class="c2g-field">
+      @if (label().trim()) {
+        <label class="c2g-field__label" [attr.for]="inputId()">
+          {{ label() }}
+          @if (required()) {
+            <span class="c2g-field__required" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+
+      <div class="c2g-field__control-shell" [class.c2g-field__control-shell--error]="!!error().trim()">
+        @if (prefix().trim()) {
+          <span class="c2g-field__affix" aria-hidden="true">{{ prefix() }}</span>
+        }
+
+        <input
+          class="c2g-field__control"
+          [id]="inputId()"
+          [type]="type()"
+          [value]="value()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [required]="required()"
+          [attr.maxlength]="maxLength() || null"
+          [attr.aria-invalid]="error().trim() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-busy]="loading() ? 'true' : null"
+          (input)="onInput($event)"
+          (blur)="onBlur()"
+        />
+
+        @if (loading()) {
+          <span class="c2g-field__spinner" aria-hidden="true"></span>
+        }
+
+        @if (suffix().trim()) {
+          <span class="c2g-field__affix" aria-hidden="true">{{ suffix() }}</span>
+        }
+      </div>
+
+      <div class="c2g-field__meta">
+        @if (error().trim()) {
+          <p class="c2g-field__message c2g-field__message--error" [id]="errorId()">{{ error() }}</p>
+        } @else if (hint().trim()) {
+          <p class="c2g-field__message" [id]="hintId()">{{ hint() }}</p>
+        }
+
+        @if (showCounter()) {
+          <span class="c2g-field__counter" [id]="counterId()">{{ valueLength() }} / {{ maxLength() }}</span>
+        }
+      </div>
+    </div>
+  `, styles: [".c2g-field{width:100%;display:grid;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-field__label{color:var(--c2g-color-text-secondary, #4a423b);font-weight:var(--c2g-font-weight-semibold, 600);font-size:var(--c2g-font-size-sm, .875rem);display:inline-flex;align-items:center;gap:var(--c2g-space-1, .25rem)}.c2g-field__required{color:var(--c2g-color-error, #ff6b6b);line-height:1}.c2g-field__control-shell{min-height:2.75rem;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:var(--c2g-radius-md, .625rem);background:var(--c2g-color-surface, #ffffff);display:flex;align-items:center;gap:var(--c2g-space-2, .5rem);padding:0 var(--c2g-space-3, .75rem);transition:border-color var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease),box-shadow var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-field__control-shell:focus-within{border-color:var(--c2g-color-focus, #e55623);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 20%,transparent)}.c2g-field__control-shell--error{border-color:var(--c2g-color-error, #ff6b6b)}.c2g-field__control{width:100%;min-width:0;border:none;background:transparent;color:var(--c2g-color-text-primary, #1a1714);font-size:var(--c2g-font-size-md, 1rem);line-height:1.4;outline:none;padding:0}.c2g-field__control::placeholder{color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__control:disabled{cursor:not-allowed;opacity:.7}.c2g-field__affix{color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-sm, .875rem);white-space:nowrap}.c2g-field__spinner{width:1rem;height:1rem;border:2px solid var(--c2g-color-primary, #ff6b35);border-right-color:transparent;border-radius:999px;animation:c2g-field-spin .8s linear infinite;flex:0 0 auto}.c2g-field__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--c2g-space-2, .5rem);min-height:1.25rem}.c2g-field__message{margin:0;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__message--error{color:var(--c2g-color-error, #ff6b6b)}.c2g-field__counter{margin-left:auto;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52);font-variant-numeric:tabular-nums}@keyframes c2g-field-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
+
+let nextRadioGroupId = 0;
+class RadioGroupComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    valueChange = output();
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    generatedName = `c2g-radio-group-${++nextRadioGroupId}`;
+    groupName = computed(() => this.name().trim() || this.generatedName, ...(ngDevMode ? [{ debugName: "groupName" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    isOptionDisabled(option) {
+        return this.isDisabled() || !!option.disabled;
+    }
+    selectOption(next) {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.value.set(next);
+        this.onChange(next);
+        this.valueChange.emit(next);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: RadioGroupComponent, isStandalone: true, selector: "c2g-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioGroupComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <fieldset class="c2g-radio-group" [disabled]="isDisabled()">
+      @if (label().trim()) {
+        <legend class="c2g-radio-group__legend">{{ label() }}</legend>
+      }
+
+      <div class="c2g-radio-group__options" [class.c2g-radio-group__options--vertical]="orientation() === 'vertical'">
+        @for (option of options(); track option.value) {
+          <label class="c2g-radio-group__option" [class.c2g-radio-group__option--disabled]="isOptionDisabled(option)">
+            <input
+              type="radio"
+              class="c2g-radio-group__input"
+              [name]="groupName()"
+              [value]="option.value"
+              [checked]="value() === option.value"
+              [disabled]="isDisabled() || !!option.disabled"
+              (change)="selectOption(option.value)"
+              (blur)="onBlur()"
+            />
+            <span class="c2g-radio-group__dot" aria-hidden="true"></span>
+            <span class="c2g-radio-group__text">{{ option.label }}</span>
+          </label>
+        }
+      </div>
+
+      @if (hint().trim()) {
+        <p class="c2g-radio-group__hint">{{ hint() }}</p>
+      }
+    </fieldset>
+  `, isInline: true, styles: [".c2g-radio-group{border:0;margin:0;padding:0;min-width:0;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-radio-group__legend{padding:0;margin-bottom:var(--c2g-space-2, .5rem);font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-semibold, 600);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-radio-group__options{display:flex;gap:var(--c2g-space-3, .75rem);flex-wrap:wrap}.c2g-radio-group__options--vertical{flex-direction:column;align-items:flex-start}.c2g-radio-group__option{display:inline-flex;align-items:center;gap:var(--c2g-space-2, .5rem);cursor:pointer;color:var(--c2g-color-text-primary, #1a1714);-webkit-user-select:none;user-select:none}.c2g-radio-group__option--disabled{cursor:not-allowed;opacity:.55}.c2g-radio-group__input{position:absolute;opacity:0;pointer-events:none}.c2g-radio-group__dot{width:1.125rem;height:1.125rem;border-radius:999px;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));display:inline-grid;place-items:center;background:var(--c2g-color-surface, #ffffff);transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease);position:relative}.c2g-radio-group__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:999px;background:var(--c2g-color-primary, #ff6b35);transform:scale(0);transition:transform var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-radio-group__input:checked+.c2g-radio-group__dot{border-color:var(--c2g-color-primary-dark, #e55623)}.c2g-radio-group__input:checked+.c2g-radio-group__dot:after{transform:scale(1)}.c2g-radio-group__input:focus-visible+.c2g-radio-group__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-radio-group__text{font-size:var(--c2g-font-size-sm, .875rem)}.c2g-radio-group__hint{margin:var(--c2g-space-2, .5rem) 0 0;color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-xs, .75rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-radio-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioGroupComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <fieldset class="c2g-radio-group" [disabled]="isDisabled()">
+      @if (label().trim()) {
+        <legend class="c2g-radio-group__legend">{{ label() }}</legend>
+      }
+
+      <div class="c2g-radio-group__options" [class.c2g-radio-group__options--vertical]="orientation() === 'vertical'">
+        @for (option of options(); track option.value) {
+          <label class="c2g-radio-group__option" [class.c2g-radio-group__option--disabled]="isOptionDisabled(option)">
+            <input
+              type="radio"
+              class="c2g-radio-group__input"
+              [name]="groupName()"
+              [value]="option.value"
+              [checked]="value() === option.value"
+              [disabled]="isDisabled() || !!option.disabled"
+              (change)="selectOption(option.value)"
+              (blur)="onBlur()"
+            />
+            <span class="c2g-radio-group__dot" aria-hidden="true"></span>
+            <span class="c2g-radio-group__text">{{ option.label }}</span>
+          </label>
+        }
+      </div>
+
+      @if (hint().trim()) {
+        <p class="c2g-radio-group__hint">{{ hint() }}</p>
+      }
+    </fieldset>
+  `, styles: [".c2g-radio-group{border:0;margin:0;padding:0;min-width:0;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-radio-group__legend{padding:0;margin-bottom:var(--c2g-space-2, .5rem);font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-semibold, 600);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-radio-group__options{display:flex;gap:var(--c2g-space-3, .75rem);flex-wrap:wrap}.c2g-radio-group__options--vertical{flex-direction:column;align-items:flex-start}.c2g-radio-group__option{display:inline-flex;align-items:center;gap:var(--c2g-space-2, .5rem);cursor:pointer;color:var(--c2g-color-text-primary, #1a1714);-webkit-user-select:none;user-select:none}.c2g-radio-group__option--disabled{cursor:not-allowed;opacity:.55}.c2g-radio-group__input{position:absolute;opacity:0;pointer-events:none}.c2g-radio-group__dot{width:1.125rem;height:1.125rem;border-radius:999px;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));display:inline-grid;place-items:center;background:var(--c2g-color-surface, #ffffff);transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease);position:relative}.c2g-radio-group__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:999px;background:var(--c2g-color-primary, #ff6b35);transform:scale(0);transition:transform var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-radio-group__input:checked+.c2g-radio-group__dot{border-color:var(--c2g-color-primary-dark, #e55623)}.c2g-radio-group__input:checked+.c2g-radio-group__dot:after{transform:scale(1)}.c2g-radio-group__input:focus-visible+.c2g-radio-group__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-radio-group__text{font-size:var(--c2g-font-size-sm, .875rem)}.c2g-radio-group__hint{margin:var(--c2g-space-2, .5rem) 0 0;color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-xs, .75rem)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+let nextSelectId = 0;
+class SelectComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    valueChanged = output();
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    generatedId = `c2g-select-${++nextSelectId}`;
+    selectId = computed(() => this.id().trim() || this.generatedId, ...(ngDevMode ? [{ debugName: "selectId" }] : []));
+    hintId = computed(() => `${this.selectId()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
+    errorId = computed(() => `${this.selectId()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.error().trim()) {
+            ids.push(this.errorId());
+        }
+        else if (this.hint().trim()) {
+            ids.push(this.hintId());
+        }
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    onSelect(event) {
+        const nextValue = event.target.value;
+        const typedValue = nextValue ? nextValue : null;
+        this.value.set(typedValue);
+        this.onChange(typedValue);
+        this.valueChanged.emit(typedValue);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SelectComponent, isStandalone: true, selector: "c2g-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div class="c2g-field">
+      @if (label().trim()) {
+        <label class="c2g-field__label" [attr.for]="selectId()">
+          {{ label() }}
+          @if (required()) {
+            <span class="c2g-field__required" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+
+      <div class="c2g-field__control-shell" [class.c2g-field__control-shell--error]="!!error().trim()">
+        <select
+          class="c2g-field__control c2g-select__input"
+          [id]="selectId()"
+          [value]="value() || ''"
+          [disabled]="isDisabled()"
+          [required]="required()"
+          [attr.aria-invalid]="error().trim() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          (change)="onSelect($event)"
+          (blur)="onBlur()"
+        >
+          @if (placeholder().trim()) {
+            <option value="">{{ placeholder() }}</option>
+          }
+          @for (option of options(); track option.value) {
+            <option [value]="option.value" [disabled]="option.disabled">
+              {{ option.label }}
+            </option>
+          }
+        </select>
+      </div>
+
+      <div class="c2g-field__meta">
+        @if (error().trim()) {
+          <p class="c2g-field__message c2g-field__message--error" [id]="errorId()">{{ error() }}</p>
+        } @else if (hint().trim()) {
+          <p class="c2g-field__message" [id]="hintId()">{{ hint() }}</p>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".c2g-field{width:100%;display:grid;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-field__label{color:var(--c2g-color-text-secondary, #4a423b);font-weight:var(--c2g-font-weight-semibold, 600);font-size:var(--c2g-font-size-sm, .875rem);display:inline-flex;align-items:center;gap:var(--c2g-space-1, .25rem)}.c2g-field__required{color:var(--c2g-color-error, #ff6b6b);line-height:1}.c2g-field__control-shell{min-height:2.75rem;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:var(--c2g-radius-md, .625rem);background:var(--c2g-color-surface, #ffffff);display:flex;align-items:center;gap:var(--c2g-space-2, .5rem);padding:0 var(--c2g-space-3, .75rem);transition:border-color .12s ease,box-shadow .12s ease}.c2g-field__control-shell:focus-within{border-color:var(--c2g-color-focus, #e55623);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 20%,transparent)}.c2g-field__control-shell--error{border-color:var(--c2g-color-error, #ff6b6b)}.c2g-field__control{width:100%;min-width:0;border:none;background:transparent;color:var(--c2g-color-text-primary, #1a1714);font-size:var(--c2g-font-size-md, 1rem);line-height:1.4;outline:none;padding:0;font-family:inherit}.c2g-field__control::placeholder{color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__control:disabled{cursor:not-allowed;opacity:.7}.c2g-field__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--c2g-space-2, .5rem);min-height:1.25rem}.c2g-field__message{margin:0;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__message--error{color:var(--c2g-color-error, #ff6b6b)}.c2g-select__input{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>');background-repeat:no-repeat;background-position:right var(--c2g-space-3, .75rem) center;background-size:1.25rem;padding-right:calc(1.25rem + var(--c2g-space-4, 1rem))}.c2g-select__input:disabled{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(107,94,82,0.5)\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>')}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-select', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <div class="c2g-field">
+      @if (label().trim()) {
+        <label class="c2g-field__label" [attr.for]="selectId()">
+          {{ label() }}
+          @if (required()) {
+            <span class="c2g-field__required" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+
+      <div class="c2g-field__control-shell" [class.c2g-field__control-shell--error]="!!error().trim()">
+        <select
+          class="c2g-field__control c2g-select__input"
+          [id]="selectId()"
+          [value]="value() || ''"
+          [disabled]="isDisabled()"
+          [required]="required()"
+          [attr.aria-invalid]="error().trim() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          (change)="onSelect($event)"
+          (blur)="onBlur()"
+        >
+          @if (placeholder().trim()) {
+            <option value="">{{ placeholder() }}</option>
+          }
+          @for (option of options(); track option.value) {
+            <option [value]="option.value" [disabled]="option.disabled">
+              {{ option.label }}
+            </option>
+          }
+        </select>
+      </div>
+
+      <div class="c2g-field__meta">
+        @if (error().trim()) {
+          <p class="c2g-field__message c2g-field__message--error" [id]="errorId()">{{ error() }}</p>
+        } @else if (hint().trim()) {
+          <p class="c2g-field__message" [id]="hintId()">{{ hint() }}</p>
+        }
+      </div>
+    </div>
+  `, styles: [".c2g-field{width:100%;display:grid;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-field__label{color:var(--c2g-color-text-secondary, #4a423b);font-weight:var(--c2g-font-weight-semibold, 600);font-size:var(--c2g-font-size-sm, .875rem);display:inline-flex;align-items:center;gap:var(--c2g-space-1, .25rem)}.c2g-field__required{color:var(--c2g-color-error, #ff6b6b);line-height:1}.c2g-field__control-shell{min-height:2.75rem;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:var(--c2g-radius-md, .625rem);background:var(--c2g-color-surface, #ffffff);display:flex;align-items:center;gap:var(--c2g-space-2, .5rem);padding:0 var(--c2g-space-3, .75rem);transition:border-color .12s ease,box-shadow .12s ease}.c2g-field__control-shell:focus-within{border-color:var(--c2g-color-focus, #e55623);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 20%,transparent)}.c2g-field__control-shell--error{border-color:var(--c2g-color-error, #ff6b6b)}.c2g-field__control{width:100%;min-width:0;border:none;background:transparent;color:var(--c2g-color-text-primary, #1a1714);font-size:var(--c2g-font-size-md, 1rem);line-height:1.4;outline:none;padding:0;font-family:inherit}.c2g-field__control::placeholder{color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__control:disabled{cursor:not-allowed;opacity:.7}.c2g-field__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--c2g-space-2, .5rem);min-height:1.25rem}.c2g-field__message{margin:0;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__message--error{color:var(--c2g-color-error, #ff6b6b)}.c2g-select__input{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>');background-repeat:no-repeat;background-position:right var(--c2g-space-3, .75rem) center;background-size:1.25rem;padding-right:calc(1.25rem + var(--c2g-space-4, 1rem))}.c2g-select__input:disabled{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(107,94,82,0.5)\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>')}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
+
+let nextSwitchId = 0;
+class SwitchComponent {
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input('Toggle', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    checkedChange = output();
+    checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    generatedId = `c2g-switch-${++nextSwitchId}`;
+    switchId = computed(() => this.id().trim() || this.generatedId, ...(ngDevMode ? [{ debugName: "switchId" }] : []));
+    hintId = computed(() => `${this.switchId()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
+    describedBy = computed(() => (this.hint().trim() ? this.hintId() : null), ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    toggle() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const next = !this.checked();
+        this.checked.set(next);
+        this.onChange(next);
+        this.checkedChange.emit(next);
+        this.onTouched();
+    }
+    markTouched() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SwitchComponent, isStandalone: true, selector: "c2g-switch", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SwitchComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div class="c2g-switch">
+      <button
+        type="button"
+        class="c2g-switch__control"
+        role="switch"
+        [id]="switchId()"
+        [disabled]="isDisabled()"
+        [attr.aria-checked]="checked() ? 'true' : 'false'"
+        [attr.aria-describedby]="describedBy()"
+        [class.c2g-switch__control--checked]="checked()"
+        (click)="toggle()"
+        (blur)="markTouched()"
+      >
+        <span class="c2g-switch__thumb"></span>
+      </button>
+
+      <label class="c2g-switch__label" [attr.for]="switchId()">{{ label() }}</label>
+    </div>
+
+    @if (hint().trim()) {
+      <p class="c2g-switch__hint" [id]="hintId()">{{ hint() }}</p>
+    }
+  `, isInline: true, styles: [".c2g-switch{display:inline-flex;align-items:center;gap:var(--c2g-space-3, .75rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-switch__control{width:2.75rem;height:1.625rem;padding:.125rem;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:999px;background:var(--c2g-color-neutral-200, #e1d9ce);display:inline-flex;align-items:center;justify-content:flex-start;cursor:pointer;transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-switch__control--checked{background:var(--c2g-color-primary, #ff6b35);border-color:var(--c2g-color-primary-dark, #e55623);justify-content:flex-end}.c2g-switch__control:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-switch__control:disabled{cursor:not-allowed;opacity:.55}.c2g-switch__thumb{width:1.125rem;height:1.125rem;border-radius:999px;background:var(--c2g-color-surface, #ffffff);box-shadow:var(--c2g-shadow-sm, 0 0 3px rgba(31, 28, 25, .06))}.c2g-switch__label{color:var(--c2g-color-text-primary, #1a1714);font-size:var(--c2g-font-size-sm, .875rem);-webkit-user-select:none;user-select:none}.c2g-switch__hint{margin:var(--c2g-space-1, .25rem) 0 0;color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-xs, .75rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SwitchComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <div class="c2g-switch">
+      <button
+        type="button"
+        class="c2g-switch__control"
+        role="switch"
+        [id]="switchId()"
+        [disabled]="isDisabled()"
+        [attr.aria-checked]="checked() ? 'true' : 'false'"
+        [attr.aria-describedby]="describedBy()"
+        [class.c2g-switch__control--checked]="checked()"
+        (click)="toggle()"
+        (blur)="markTouched()"
+      >
+        <span class="c2g-switch__thumb"></span>
+      </button>
+
+      <label class="c2g-switch__label" [attr.for]="switchId()">{{ label() }}</label>
+    </div>
+
+    @if (hint().trim()) {
+      <p class="c2g-switch__hint" [id]="hintId()">{{ hint() }}</p>
+    }
+  `, styles: [".c2g-switch{display:inline-flex;align-items:center;gap:var(--c2g-space-3, .75rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-switch__control{width:2.75rem;height:1.625rem;padding:.125rem;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:999px;background:var(--c2g-color-neutral-200, #e1d9ce);display:inline-flex;align-items:center;justify-content:flex-start;cursor:pointer;transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-switch__control--checked{background:var(--c2g-color-primary, #ff6b35);border-color:var(--c2g-color-primary-dark, #e55623);justify-content:flex-end}.c2g-switch__control:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-switch__control:disabled{cursor:not-allowed;opacity:.55}.c2g-switch__thumb{width:1.125rem;height:1.125rem;border-radius:999px;background:var(--c2g-color-surface, #ffffff);box-shadow:var(--c2g-shadow-sm, 0 0 3px rgba(31, 28, 25, .06))}.c2g-switch__label{color:var(--c2g-color-text-primary, #1a1714);font-size:var(--c2g-font-size-sm, .875rem);-webkit-user-select:none;user-select:none}.c2g-switch__hint{margin:var(--c2g-space-1, .25rem) 0 0;color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-xs, .75rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+class TagComponent {
+    label = input('Tag', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    tone = input('neutral', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    variant = input('subtle', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconAriaLabel = input('', ...(ngDevMode ? [{ debugName: "iconAriaLabel" }] : []));
+    iconFontSet = input('', ...(ngDevMode ? [{ debugName: "iconFontSet" }] : []));
+    iconFontIcon = input('', ...(ngDevMode ? [{ debugName: "iconFontIcon" }] : []));
+    classes = computed(() => `c2g-tag c2g-tag--${this.size()} c2g-tag--${this.variant()} c2g-tag--${this.tone()}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TagComponent, isStandalone: true, selector: "c2g-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAriaLabel: { classPropertyName: "iconAriaLabel", publicName: "iconAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconFontSet: { classPropertyName: "iconFontSet", publicName: "iconFontSet", isSignal: true, isRequired: false, transformFunction: null }, iconFontIcon: { classPropertyName: "iconFontIcon", publicName: "iconFontIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="c2g-tag" [class]="classes()" [attr.aria-label]="ariaLabel() || null">
+      @if (icon() || iconFontIcon()) {
+        <mat-icon
+          class="c2g-tag__icon"
+          [fontSet]="iconFontSet()"
+          [fontIcon]="iconFontIcon()"
+          [attr.aria-label]="iconAriaLabel() || null"
+          [attr.aria-hidden]="iconAriaLabel() ? null : 'true'"
+        >
+          {{ icon() }}
+        </mat-icon>
+      }
+      <span>{{ label() }}</span>
+    </span>
+  `, isInline: true, styles: [".c2g-tag{display:inline-flex;align-items:center;gap:var(--c2g-space-1, .25rem);border-radius:999px;border:1px solid transparent;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);font-weight:var(--c2g-font-weight-medium, 500);line-height:1;white-space:nowrap}.c2g-tag--sm{padding:.2rem .45rem;font-size:.6875rem}.c2g-tag--md{padding:.3rem .6rem;font-size:var(--c2g-font-size-xs, .75rem)}.c2g-tag__icon{width:.875rem;height:.875rem;font-size:.8125rem;line-height:1}.c2g-tag--subtle.c2g-tag--neutral{background:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 10%,#ffffff);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-tag--subtle.c2g-tag--accent,.c2g-tag--subtle.c2g-tag--info{background:color-mix(in srgb,#1565c0 12%,#ffffff);color:#0d47a1}.c2g-tag--subtle.c2g-tag--success{background:color-mix(in srgb,#2e7d32 12%,#ffffff);color:#1b5e20}.c2g-tag--subtle.c2g-tag--warning{background:color-mix(in srgb,#ef6c00 14%,#ffffff);color:#e65100}.c2g-tag--subtle.c2g-tag--danger{background:color-mix(in srgb,#c62828 13%,#ffffff);color:#b71c1c}.c2g-tag--solid.c2g-tag--neutral{background:var(--c2g-color-text-secondary, #4a423b);color:#fff}.c2g-tag--solid.c2g-tag--accent,.c2g-tag--solid.c2g-tag--info{background:#1565c0;color:#fff}.c2g-tag--solid.c2g-tag--success{background:#2e7d32;color:#fff}.c2g-tag--solid.c2g-tag--warning{background:#ef6c00;color:#fff}.c2g-tag--solid.c2g-tag--danger{background:#c62828;color:#fff}.c2g-tag--outline.c2g-tag--neutral{border-color:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 35%,transparent);color:var(--c2g-color-text-secondary, #4a423b);background:transparent}.c2g-tag--outline.c2g-tag--accent,.c2g-tag--outline.c2g-tag--info{border-color:color-mix(in srgb,#1565c0 38%,transparent);color:#0d47a1;background:transparent}.c2g-tag--outline.c2g-tag--success{border-color:color-mix(in srgb,#2e7d32 38%,transparent);color:#1b5e20;background:transparent}.c2g-tag--outline.c2g-tag--warning{border-color:color-mix(in srgb,#ef6c00 38%,transparent);color:#e65100;background:transparent}.c2g-tag--outline.c2g-tag--danger{border-color:color-mix(in srgb,#c62828 38%,transparent);color:#b71c1c;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-tag', standalone: true, imports: [MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="c2g-tag" [class]="classes()" [attr.aria-label]="ariaLabel() || null">
+      @if (icon() || iconFontIcon()) {
+        <mat-icon
+          class="c2g-tag__icon"
+          [fontSet]="iconFontSet()"
+          [fontIcon]="iconFontIcon()"
+          [attr.aria-label]="iconAriaLabel() || null"
+          [attr.aria-hidden]="iconAriaLabel() ? null : 'true'"
+        >
+          {{ icon() }}
+        </mat-icon>
+      }
+      <span>{{ label() }}</span>
+    </span>
+  `, styles: [".c2g-tag{display:inline-flex;align-items:center;gap:var(--c2g-space-1, .25rem);border-radius:999px;border:1px solid transparent;font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif);font-weight:var(--c2g-font-weight-medium, 500);line-height:1;white-space:nowrap}.c2g-tag--sm{padding:.2rem .45rem;font-size:.6875rem}.c2g-tag--md{padding:.3rem .6rem;font-size:var(--c2g-font-size-xs, .75rem)}.c2g-tag__icon{width:.875rem;height:.875rem;font-size:.8125rem;line-height:1}.c2g-tag--subtle.c2g-tag--neutral{background:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 10%,#ffffff);color:var(--c2g-color-text-secondary, #4a423b)}.c2g-tag--subtle.c2g-tag--accent,.c2g-tag--subtle.c2g-tag--info{background:color-mix(in srgb,#1565c0 12%,#ffffff);color:#0d47a1}.c2g-tag--subtle.c2g-tag--success{background:color-mix(in srgb,#2e7d32 12%,#ffffff);color:#1b5e20}.c2g-tag--subtle.c2g-tag--warning{background:color-mix(in srgb,#ef6c00 14%,#ffffff);color:#e65100}.c2g-tag--subtle.c2g-tag--danger{background:color-mix(in srgb,#c62828 13%,#ffffff);color:#b71c1c}.c2g-tag--solid.c2g-tag--neutral{background:var(--c2g-color-text-secondary, #4a423b);color:#fff}.c2g-tag--solid.c2g-tag--accent,.c2g-tag--solid.c2g-tag--info{background:#1565c0;color:#fff}.c2g-tag--solid.c2g-tag--success{background:#2e7d32;color:#fff}.c2g-tag--solid.c2g-tag--warning{background:#ef6c00;color:#fff}.c2g-tag--solid.c2g-tag--danger{background:#c62828;color:#fff}.c2g-tag--outline.c2g-tag--neutral{border-color:color-mix(in srgb,var(--c2g-color-text-secondary, #4a423b) 35%,transparent);color:var(--c2g-color-text-secondary, #4a423b);background:transparent}.c2g-tag--outline.c2g-tag--accent,.c2g-tag--outline.c2g-tag--info{border-color:color-mix(in srgb,#1565c0 38%,transparent);color:#0d47a1;background:transparent}.c2g-tag--outline.c2g-tag--success{border-color:color-mix(in srgb,#2e7d32 38%,transparent);color:#1b5e20;background:transparent}.c2g-tag--outline.c2g-tag--warning{border-color:color-mix(in srgb,#ef6c00 38%,transparent);color:#e65100;background:transparent}.c2g-tag--outline.c2g-tag--danger{border-color:color-mix(in srgb,#c62828 38%,transparent);color:#b71c1c;background:transparent}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAriaLabel", required: false }] }], iconFontSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconFontSet", required: false }] }], iconFontIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconFontIcon", required: false }] }] } });
+
+let nextTextareaId = 0;
+class TextareaComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
+    suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    valueChanged = output();
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    generatedId = `c2g-textarea-${++nextTextareaId}`;
+    textareaId = computed(() => this.id().trim() || this.generatedId, ...(ngDevMode ? [{ debugName: "textareaId" }] : []));
+    hintId = computed(() => `${this.textareaId()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
+    errorId = computed(() => `${this.textareaId()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
+    counterId = computed(() => `${this.textareaId()}-counter`, ...(ngDevMode ? [{ debugName: "counterId" }] : []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.error().trim()) {
+            ids.push(this.errorId());
+        }
+        else if (this.hint().trim()) {
+            ids.push(this.hintId());
+        }
+        if (this.showCounter()) {
+            ids.push(this.counterId());
+        }
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    valueLength = computed(() => this.value().length, ...(ngDevMode ? [{ debugName: "valueLength" }] : []));
+    showCounter = computed(() => (this.maxLength() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "showCounter" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const nextValue = event.target.value;
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+        this.valueChanged.emit(nextValue);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TextareaComponent, isStandalone: true, selector: "c2g-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div class="c2g-field">
+      @if (label().trim()) {
+        <label class="c2g-field__label" [attr.for]="textareaId()">
+          {{ label() }}
+          @if (required()) {
+            <span class="c2g-field__required" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+
+      <div class="c2g-field__control-shell" [class.c2g-field__control-shell--error]="!!error().trim()">
+        @if (prefix().trim()) {
+          <span class="c2g-field__affix" aria-hidden="true">{{ prefix() }}</span>
+        }
+
+        <textarea
+          class="c2g-field__control"
+          [id]="textareaId()"
+          [value]="value()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [required]="required()"
+          [attr.maxlength]="maxLength() || null"
+          [rows]="rows()"
+          [attr.aria-invalid]="error().trim() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-busy]="loading() ? 'true' : null"
+          (input)="onInput($event)"
+          (blur)="onBlur()"
+        ></textarea>
+
+        @if (loading()) {
+          <span class="c2g-field__spinner" aria-hidden="true"></span>
+        }
+
+        @if (suffix().trim()) {
+          <span class="c2g-field__affix" aria-hidden="true">{{ suffix() }}</span>
+        }
+      </div>
+
+      <div class="c2g-field__meta">
+        @if (error().trim()) {
+          <p class="c2g-field__message c2g-field__message--error" [id]="errorId()">{{ error() }}</p>
+        } @else if (hint().trim()) {
+          <p class="c2g-field__message" [id]="hintId()">{{ hint() }}</p>
+        }
+
+        @if (showCounter()) {
+          <span class="c2g-field__counter" [id]="counterId()">{{ valueLength() }} / {{ maxLength() }}</span>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".c2g-field{width:100%;display:grid;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-field__label{color:var(--c2g-color-text-secondary, #4a423b);font-weight:var(--c2g-font-weight-semibold, 600);font-size:var(--c2g-font-size-sm, .875rem);display:inline-flex;align-items:center;gap:var(--c2g-space-1, .25rem)}.c2g-field__required{color:var(--c2g-color-error, #ff6b6b);line-height:1}.c2g-field__control-shell{border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:var(--c2g-radius-md, .625rem);background:var(--c2g-color-surface, #ffffff);display:flex;align-items:flex-start;gap:var(--c2g-space-2, .5rem);padding:var(--c2g-space-2, .5rem) var(--c2g-space-3, .75rem);transition:border-color var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease),box-shadow var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-field__control-shell:focus-within{border-color:var(--c2g-color-focus, #e55623);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 20%,transparent)}.c2g-field__control-shell--error{border-color:var(--c2g-color-error, #ff6b6b)}.c2g-field__control{width:100%;min-width:0;border:none;background:transparent;color:var(--c2g-color-text-primary, #1a1714);font-size:var(--c2g-font-size-md, 1rem);line-height:1.4;outline:none;resize:vertical;min-height:5.5rem;padding:0;margin:0;font-family:inherit}.c2g-field__control::placeholder{color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__control:disabled{cursor:not-allowed;opacity:.7}.c2g-field__affix{color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-sm, .875rem);line-height:1.5;white-space:nowrap;margin-top:var(--c2g-space-1, .25rem)}.c2g-field__spinner{width:1rem;height:1rem;border:2px solid var(--c2g-color-primary, #ff6b35);border-right-color:transparent;border-radius:999px;animation:c2g-field-spin .8s linear infinite;flex:0 0 auto;margin-top:var(--c2g-space-1, .25rem)}.c2g-field__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--c2g-space-2, .5rem);min-height:1.25rem}.c2g-field__message{margin:0;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__message--error{color:var(--c2g-color-error, #ff6b6b)}.c2g-field__counter{margin-left:auto;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52);font-variant-numeric:tabular-nums}@keyframes c2g-field-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-textarea', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <div class="c2g-field">
+      @if (label().trim()) {
+        <label class="c2g-field__label" [attr.for]="textareaId()">
+          {{ label() }}
+          @if (required()) {
+            <span class="c2g-field__required" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+
+      <div class="c2g-field__control-shell" [class.c2g-field__control-shell--error]="!!error().trim()">
+        @if (prefix().trim()) {
+          <span class="c2g-field__affix" aria-hidden="true">{{ prefix() }}</span>
+        }
+
+        <textarea
+          class="c2g-field__control"
+          [id]="textareaId()"
+          [value]="value()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [required]="required()"
+          [attr.maxlength]="maxLength() || null"
+          [rows]="rows()"
+          [attr.aria-invalid]="error().trim() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-busy]="loading() ? 'true' : null"
+          (input)="onInput($event)"
+          (blur)="onBlur()"
+        ></textarea>
+
+        @if (loading()) {
+          <span class="c2g-field__spinner" aria-hidden="true"></span>
+        }
+
+        @if (suffix().trim()) {
+          <span class="c2g-field__affix" aria-hidden="true">{{ suffix() }}</span>
+        }
+      </div>
+
+      <div class="c2g-field__meta">
+        @if (error().trim()) {
+          <p class="c2g-field__message c2g-field__message--error" [id]="errorId()">{{ error() }}</p>
+        } @else if (hint().trim()) {
+          <p class="c2g-field__message" [id]="hintId()">{{ hint() }}</p>
+        }
+
+        @if (showCounter()) {
+          <span class="c2g-field__counter" [id]="counterId()">{{ valueLength() }} / {{ maxLength() }}</span>
+        }
+      </div>
+    </div>
+  `, styles: [".c2g-field{width:100%;display:grid;gap:var(--c2g-space-2, .5rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-field__label{color:var(--c2g-color-text-secondary, #4a423b);font-weight:var(--c2g-font-weight-semibold, 600);font-size:var(--c2g-font-size-sm, .875rem);display:inline-flex;align-items:center;gap:var(--c2g-space-1, .25rem)}.c2g-field__required{color:var(--c2g-color-error, #ff6b6b);line-height:1}.c2g-field__control-shell{border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:var(--c2g-radius-md, .625rem);background:var(--c2g-color-surface, #ffffff);display:flex;align-items:flex-start;gap:var(--c2g-space-2, .5rem);padding:var(--c2g-space-2, .5rem) var(--c2g-space-3, .75rem);transition:border-color var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease),box-shadow var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-field__control-shell:focus-within{border-color:var(--c2g-color-focus, #e55623);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 20%,transparent)}.c2g-field__control-shell--error{border-color:var(--c2g-color-error, #ff6b6b)}.c2g-field__control{width:100%;min-width:0;border:none;background:transparent;color:var(--c2g-color-text-primary, #1a1714);font-size:var(--c2g-font-size-md, 1rem);line-height:1.4;outline:none;resize:vertical;min-height:5.5rem;padding:0;margin:0;font-family:inherit}.c2g-field__control::placeholder{color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__control:disabled{cursor:not-allowed;opacity:.7}.c2g-field__affix{color:var(--c2g-color-text-muted, #6b5e52);font-size:var(--c2g-font-size-sm, .875rem);line-height:1.5;white-space:nowrap;margin-top:var(--c2g-space-1, .25rem)}.c2g-field__spinner{width:1rem;height:1rem;border:2px solid var(--c2g-color-primary, #ff6b35);border-right-color:transparent;border-radius:999px;animation:c2g-field-spin .8s linear infinite;flex:0 0 auto;margin-top:var(--c2g-space-1, .25rem)}.c2g-field__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--c2g-space-2, .5rem);min-height:1.25rem}.c2g-field__message{margin:0;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52)}.c2g-field__message--error{color:var(--c2g-color-error, #ff6b6b)}.c2g-field__counter{margin-left:auto;font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-color-text-muted, #6b5e52);font-variant-numeric:tabular-nums}@keyframes c2g-field-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
+
+class ModalComponent {
+    document = inject(DOCUMENT);
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
+    lockBodyScroll = input(true, ...(ngDevMode ? [{ debugName: "lockBodyScroll" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    closed = output();
+    effectiveAriaLabel = computed(() => this.ariaLabel() || this.title() || 'Dialog', ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : []));
+    sizeClass = computed(() => `c2g-modal__panel--${this.size()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : []));
+    constructor() {
+        effect(() => {
+            this.document.body.style.overflow = this.open() && this.lockBodyScroll() ? 'hidden' : '';
+        });
+    }
+    close() {
+        if (!this.closable())
+            return;
+        this.closed.emit();
+    }
+    onBackdropClick(event) {
+        if (event.target.classList.contains('c2g-modal__backdrop')) {
+            this.close();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ModalComponent, isStandalone: true, selector: "c2g-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, lockBodyScroll: { classPropertyName: "lockBodyScroll", publicName: "lockBodyScroll", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (open()) {\n  <div\n    class=\"c2g-modal__backdrop\"\n    role=\"presentation\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    <div\n      class=\"c2g-modal__panel\"\n      [class]=\"sizeClass()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"effectiveAriaLabel()\"\n      [attr.aria-modal]=\"true\"\n      cdkTrapFocus\n      cdkTrapFocusAutoCapture>\n\n      @if (title()) {\n        <div class=\"c2g-modal__header\">\n          <h2 class=\"c2g-modal__title\">{{ title() }}</h2>\n          @if (closable()) {\n            <button\n              class=\"c2g-modal__close\"\n              type=\"button\"\n              aria-label=\"Schlie\u00DFen\"\n              (click)=\"close()\">\n              \u2715\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"c2g-modal__body\">\n        <ng-content />\n      </div>\n\n      <ng-content select=\"[c2g-modal-footer]\" />\n    </div>\n  </div>\n}\n", styles: [".c2g-modal__backdrop{position:fixed;inset:0;background-color:var(--c2g-overlay-bg, rgba(0, 0, 0, .5));display:flex;align-items:flex-start;justify-content:center;z-index:var(--c2g-z-modal, 1000);padding:var(--c2g-spacing-4, 1rem);overflow-y:auto}.c2g-modal__panel{background-color:var(--c2g-surface-bg, #ffffff);color:var(--c2g-text-primary, #111827);border-radius:var(--c2g-radius-lg, .75rem);box-shadow:var(--c2g-shadow-xl, 0 20px 60px rgba(0, 0, 0, .3));width:100%;max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;overflow:hidden;margin:auto 0}.c2g-modal__panel--sm{max-width:24rem}.c2g-modal__panel--md{max-width:36rem}.c2g-modal__panel--lg{max-width:52rem}.c2g-modal__panel--xl{max-width:72rem}.c2g-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--c2g-spacing-4, 1rem) var(--c2g-spacing-6, 1.5rem);border-bottom:1px solid var(--c2g-border-color, #e5e7eb);flex-shrink:0}.c2g-modal__title{margin:0;font-size:var(--c2g-font-size-lg, 1.125rem);font-weight:var(--c2g-font-weight-semibold, 600);color:var(--c2g-text-primary, #111827);line-height:1.4}.c2g-modal__close{background:none;border:none;cursor:pointer;padding:var(--c2g-spacing-1, .25rem);border-radius:var(--c2g-radius-sm, .25rem);color:var(--c2g-text-secondary, #6b7280);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,color .15s ease;flex-shrink:0}.c2g-modal__close:hover{background-color:var(--c2g-hover-bg, #f3f4f6);color:var(--c2g-text-primary, #111827)}.c2g-modal__close:focus-visible{outline:2px solid var(--c2g-focus-ring, #3b82f6);outline-offset:2px}.c2g-modal__body{padding:var(--c2g-spacing-6, 1.5rem);overflow-y:auto;flex:1;min-height:0}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-modal', standalone: true, imports: [A11yModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div\n    class=\"c2g-modal__backdrop\"\n    role=\"presentation\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    <div\n      class=\"c2g-modal__panel\"\n      [class]=\"sizeClass()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"effectiveAriaLabel()\"\n      [attr.aria-modal]=\"true\"\n      cdkTrapFocus\n      cdkTrapFocusAutoCapture>\n\n      @if (title()) {\n        <div class=\"c2g-modal__header\">\n          <h2 class=\"c2g-modal__title\">{{ title() }}</h2>\n          @if (closable()) {\n            <button\n              class=\"c2g-modal__close\"\n              type=\"button\"\n              aria-label=\"Schlie\u00DFen\"\n              (click)=\"close()\">\n              \u2715\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"c2g-modal__body\">\n        <ng-content />\n      </div>\n\n      <ng-content select=\"[c2g-modal-footer]\" />\n    </div>\n  </div>\n}\n", styles: [".c2g-modal__backdrop{position:fixed;inset:0;background-color:var(--c2g-overlay-bg, rgba(0, 0, 0, .5));display:flex;align-items:flex-start;justify-content:center;z-index:var(--c2g-z-modal, 1000);padding:var(--c2g-spacing-4, 1rem);overflow-y:auto}.c2g-modal__panel{background-color:var(--c2g-surface-bg, #ffffff);color:var(--c2g-text-primary, #111827);border-radius:var(--c2g-radius-lg, .75rem);box-shadow:var(--c2g-shadow-xl, 0 20px 60px rgba(0, 0, 0, .3));width:100%;max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;overflow:hidden;margin:auto 0}.c2g-modal__panel--sm{max-width:24rem}.c2g-modal__panel--md{max-width:36rem}.c2g-modal__panel--lg{max-width:52rem}.c2g-modal__panel--xl{max-width:72rem}.c2g-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--c2g-spacing-4, 1rem) var(--c2g-spacing-6, 1.5rem);border-bottom:1px solid var(--c2g-border-color, #e5e7eb);flex-shrink:0}.c2g-modal__title{margin:0;font-size:var(--c2g-font-size-lg, 1.125rem);font-weight:var(--c2g-font-weight-semibold, 600);color:var(--c2g-text-primary, #111827);line-height:1.4}.c2g-modal__close{background:none;border:none;cursor:pointer;padding:var(--c2g-spacing-1, .25rem);border-radius:var(--c2g-radius-sm, .25rem);color:var(--c2g-text-secondary, #6b7280);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,color .15s ease;flex-shrink:0}.c2g-modal__close:hover{background-color:var(--c2g-hover-bg, #f3f4f6);color:var(--c2g-text-primary, #111827)}.c2g-modal__close:focus-visible{outline:2px solid var(--c2g-focus-ring, #3b82f6);outline-offset:2px}.c2g-modal__body{padding:var(--c2g-spacing-6, 1.5rem);overflow-y:auto;flex:1;min-height:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], lockBodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockBodyScroll", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class ToastService {
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    show(message, tone, duration = 4000, action) {
+        const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        this.toasts.update(list => [...list, { id, message, tone, duration, action }]);
+        if (duration > 0) {
+            setTimeout(() => this.dismiss(id), duration);
+        }
+    }
+    success(message, duration) { this.show(message, 'success', duration); }
+    error(message, duration) { this.show(message, 'error', duration ?? 6000); }
+    warning(message, duration) { this.show(message, 'warning', duration); }
+    info(message, duration) { this.show(message, 'info', duration); }
+    withAction(message, tone, action) {
+        this.show(message, tone, 0, action);
+    }
+    dismiss(id) {
+        this.toasts.update(list => list.filter(t => t.id !== id));
+    }
+    dismissAll() {
+        this.toasts.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ToastContainerComponent {
+    toastService = inject(ToastService);
+    toasts = this.toastService.toasts;
+    dismiss(id) {
+        this.toastService.dismiss(id);
+    }
+    toneIcon(tone) {
+        switch (tone) {
+            case 'success': return '✓';
+            case 'error': return '✕';
+            case 'warning': return '⚠';
+            default: return 'ℹ';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ToastContainerComponent, isStandalone: true, selector: "c2g-toast-container", ngImport: i0, template: "<div class=\"c2g-toast-container\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (toast of toasts(); track toast.id) {\n    <div\n      class=\"c2g-toast\"\n      [class]=\"'c2g-toast--' + toast.tone\"\n      role=\"status\"\n    >\n      <span class=\"c2g-toast__icon\" aria-hidden=\"true\">{{ toneIcon(toast.tone) }}</span>\n      <span class=\"c2g-toast__message\">{{ toast.message }}</span>\n\n      @if (toast.action) {\n        <button\n          class=\"c2g-toast__action\"\n          type=\"button\"\n          (click)=\"toast.action!.callback(); dismiss(toast.id)\"\n        >\n          {{ toast.action.label }}\n        </button>\n      }\n\n      <button\n        class=\"c2g-toast__close\"\n        type=\"button\"\n        (click)=\"dismiss(toast.id)\"\n        aria-label=\"Schlie\u00DFen\"\n      >\u2715</button>\n    </div>\n  }\n</div>\n", styles: [":host{display:contents;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:420px;width:calc(100vw - 48px)}.c2g-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--c2g-radius-md, 8px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));pointer-events:all;animation:c2g-toast-in .25s cubic-bezier(.34,1.56,.64,1)}.c2g-toast--success{border-left:4px solid var(--c2g-theme-success, var(--c2g-color-success))}.c2g-toast--error{border-left:4px solid var(--c2g-theme-error, var(--c2g-color-error))}.c2g-toast--warning{border-left:4px solid var(--c2g-theme-warning, var(--c2g-color-warning))}.c2g-toast--info{border-left:4px solid var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-toast__icon{font-size:1rem;flex-shrink:0}.c2g-toast--success .c2g-toast__icon{color:var(--c2g-theme-success, var(--c2g-color-success))}.c2g-toast--error .c2g-toast__icon{color:var(--c2g-theme-error, var(--c2g-color-error))}.c2g-toast--warning .c2g-toast__icon{color:var(--c2g-theme-warning, var(--c2g-color-warning))}.c2g-toast--info .c2g-toast__icon{color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-toast__message{flex:1;line-height:1.4}.c2g-toast__action{border:none;background:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:600;color:var(--c2g-theme-primary, var(--c2g-color-primary));padding:0;white-space:nowrap;flex-shrink:0}.c2g-toast__action:hover{text-decoration:underline}.c2g-toast__close{border:none;background:none;cursor:pointer;font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));padding:2px 4px;flex-shrink:0;border-radius:4px;line-height:1}.c2g-toast__close:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}@keyframes c2g-toast-in{0%{opacity:0;transform:translate(40px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-toast-container', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-toast-container\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (toast of toasts(); track toast.id) {\n    <div\n      class=\"c2g-toast\"\n      [class]=\"'c2g-toast--' + toast.tone\"\n      role=\"status\"\n    >\n      <span class=\"c2g-toast__icon\" aria-hidden=\"true\">{{ toneIcon(toast.tone) }}</span>\n      <span class=\"c2g-toast__message\">{{ toast.message }}</span>\n\n      @if (toast.action) {\n        <button\n          class=\"c2g-toast__action\"\n          type=\"button\"\n          (click)=\"toast.action!.callback(); dismiss(toast.id)\"\n        >\n          {{ toast.action.label }}\n        </button>\n      }\n\n      <button\n        class=\"c2g-toast__close\"\n        type=\"button\"\n        (click)=\"dismiss(toast.id)\"\n        aria-label=\"Schlie\u00DFen\"\n      >\u2715</button>\n    </div>\n  }\n</div>\n", styles: [":host{display:contents;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:420px;width:calc(100vw - 48px)}.c2g-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--c2g-radius-md, 8px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));pointer-events:all;animation:c2g-toast-in .25s cubic-bezier(.34,1.56,.64,1)}.c2g-toast--success{border-left:4px solid var(--c2g-theme-success, var(--c2g-color-success))}.c2g-toast--error{border-left:4px solid var(--c2g-theme-error, var(--c2g-color-error))}.c2g-toast--warning{border-left:4px solid var(--c2g-theme-warning, var(--c2g-color-warning))}.c2g-toast--info{border-left:4px solid var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-toast__icon{font-size:1rem;flex-shrink:0}.c2g-toast--success .c2g-toast__icon{color:var(--c2g-theme-success, var(--c2g-color-success))}.c2g-toast--error .c2g-toast__icon{color:var(--c2g-theme-error, var(--c2g-color-error))}.c2g-toast--warning .c2g-toast__icon{color:var(--c2g-theme-warning, var(--c2g-color-warning))}.c2g-toast--info .c2g-toast__icon{color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-toast__message{flex:1;line-height:1.4}.c2g-toast__action{border:none;background:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:600;color:var(--c2g-theme-primary, var(--c2g-color-primary));padding:0;white-space:nowrap;flex-shrink:0}.c2g-toast__action:hover{text-decoration:underline}.c2g-toast__close{border:none;background:none;cursor:pointer;font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));padding:2px 4px;flex-shrink:0;border-radius:4px;line-height:1}.c2g-toast__close:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}@keyframes c2g-toast-in{0%{opacity:0;transform:translate(40px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}\n"] }]
+        }] });
+
+class ConfirmDialogComponent {
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    confirmed = output();
+    cancelled = output();
+    confirmLabel = computed(() => this.data().confirmLabel ?? 'Bestätigen', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : []));
+    cancelLabel = computed(() => this.data().cancelLabel ?? 'Abbrechen', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+    tone = computed(() => this.data().tone ?? 'info', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ConfirmDialogComponent, isStandalone: true, selector: "c2g-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: "<c2g-modal\n  [open]=\"open()\"\n  [title]=\"data().title\"\n  size=\"sm\"\n  (closed)=\"cancelled.emit()\"\n>\n  <div class=\"c2g-confirm-dialog\">\n    @if (data().icon) {\n      <div class=\"c2g-confirm-dialog__icon\" [class]=\"'c2g-confirm-dialog__icon--' + tone()\">\n        {{ data().icon }}\n      </div>\n    }\n\n    <p class=\"c2g-confirm-dialog__message\">{{ data().message }}</p>\n\n    <div class=\"c2g-confirm-dialog__actions\">\n      <button\n        class=\"c2g-confirm-dialog__btn c2g-confirm-dialog__btn--cancel\"\n        type=\"button\"\n        (click)=\"cancelled.emit()\"\n      >\n        {{ cancelLabel() }}\n      </button>\n      <button\n        class=\"c2g-confirm-dialog__btn\"\n        [class]=\"'c2g-confirm-dialog__btn--' + tone()\"\n        type=\"button\"\n        (click)=\"confirmed.emit()\"\n      >\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </div>\n</c2g-modal>\n", styles: [":host{display:contents;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-confirm-dialog{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);padding:8px 0 4px}.c2g-confirm-dialog__icon{font-size:2.5rem;text-align:center;margin-bottom:16px;line-height:1}.c2g-confirm-dialog__message{font-size:var(--c2g-font-size-base, 1rem);color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));line-height:1.6;margin:0 0 24px;text-align:center}.c2g-confirm-dialog__actions{display:flex;gap:12px;justify-content:flex-end}.c2g-confirm-dialog__btn{padding:10px 20px;border-radius:var(--c2g-radius-sm, 6px);border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);font-weight:600;transition:background .15s ease,border-color .15s ease}.c2g-confirm-dialog__btn--cancel{background:var(--c2g-theme-surface, var(--c2g-color-surface));border-color:var(--c2g-theme-outline-variant, var(--c2g-color-outline));color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-confirm-dialog__btn--cancel:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base))}.c2g-confirm-dialog__btn--danger{background:var(--c2g-theme-error, var(--c2g-color-error));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-confirm-dialog__btn--danger:hover{background:var(--c2g-theme-primary-hover, var(--c2g-color-primary-dark));filter:brightness(.88)}.c2g-confirm-dialog__btn--warning{background:var(--c2g-theme-warning, var(--c2g-color-warning));color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-confirm-dialog__btn--warning:hover{filter:brightness(.92)}.c2g-confirm-dialog__btn--info{background:var(--c2g-theme-primary, var(--c2g-color-primary));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-confirm-dialog__btn--info:hover{background:var(--c2g-theme-primary-hover, var(--c2g-color-primary-dark))}.c2g-confirm-dialog__btn:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "c2g-modal", inputs: ["open", "title", "size", "closable", "lockBodyScroll", "ariaLabel"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-confirm-dialog', standalone: true, imports: [ModalComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<c2g-modal\n  [open]=\"open()\"\n  [title]=\"data().title\"\n  size=\"sm\"\n  (closed)=\"cancelled.emit()\"\n>\n  <div class=\"c2g-confirm-dialog\">\n    @if (data().icon) {\n      <div class=\"c2g-confirm-dialog__icon\" [class]=\"'c2g-confirm-dialog__icon--' + tone()\">\n        {{ data().icon }}\n      </div>\n    }\n\n    <p class=\"c2g-confirm-dialog__message\">{{ data().message }}</p>\n\n    <div class=\"c2g-confirm-dialog__actions\">\n      <button\n        class=\"c2g-confirm-dialog__btn c2g-confirm-dialog__btn--cancel\"\n        type=\"button\"\n        (click)=\"cancelled.emit()\"\n      >\n        {{ cancelLabel() }}\n      </button>\n      <button\n        class=\"c2g-confirm-dialog__btn\"\n        [class]=\"'c2g-confirm-dialog__btn--' + tone()\"\n        type=\"button\"\n        (click)=\"confirmed.emit()\"\n      >\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </div>\n</c2g-modal>\n", styles: [":host{display:contents;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-confirm-dialog{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);padding:8px 0 4px}.c2g-confirm-dialog__icon{font-size:2.5rem;text-align:center;margin-bottom:16px;line-height:1}.c2g-confirm-dialog__message{font-size:var(--c2g-font-size-base, 1rem);color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));line-height:1.6;margin:0 0 24px;text-align:center}.c2g-confirm-dialog__actions{display:flex;gap:12px;justify-content:flex-end}.c2g-confirm-dialog__btn{padding:10px 20px;border-radius:var(--c2g-radius-sm, 6px);border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);font-weight:600;transition:background .15s ease,border-color .15s ease}.c2g-confirm-dialog__btn--cancel{background:var(--c2g-theme-surface, var(--c2g-color-surface));border-color:var(--c2g-theme-outline-variant, var(--c2g-color-outline));color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-confirm-dialog__btn--cancel:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base))}.c2g-confirm-dialog__btn--danger{background:var(--c2g-theme-error, var(--c2g-color-error));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-confirm-dialog__btn--danger:hover{background:var(--c2g-theme-primary-hover, var(--c2g-color-primary-dark));filter:brightness(.88)}.c2g-confirm-dialog__btn--warning{background:var(--c2g-theme-warning, var(--c2g-color-warning));color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-confirm-dialog__btn--warning:hover{filter:brightness(.92)}.c2g-confirm-dialog__btn--info{background:var(--c2g-theme-primary, var(--c2g-color-primary));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-confirm-dialog__btn--info:hover{background:var(--c2g-theme-primary-hover, var(--c2g-color-primary-dark))}.c2g-confirm-dialog__btn:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+const WEEKDAYS = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+const MONTHS = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
+class DateRangePickerComponent {
+    value = model({ from: null, to: null }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    placeholder = input('Zeitraum wählen', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    rangeChanged = output();
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    viewDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "viewDate" }] : []));
+    hoverDate = signal(null, ...(ngDevMode ? [{ debugName: "hoverDate" }] : []));
+    weekdays = WEEKDAYS;
+    months = MONTHS;
+    monthLabel = computed(() => {
+        const d = this.viewDate();
+        return `${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+    }, ...(ngDevMode ? [{ debugName: "monthLabel" }] : []));
+    days = computed(() => {
+        const vd = this.viewDate();
+        const year = vd.getFullYear();
+        const month = vd.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        // Start from Monday
+        const startOffset = (firstDay.getDay() + 6) % 7;
+        const cells = [];
+        for (let i = -startOffset; i < lastDay.getDate(); i++) {
+            const date = new Date(year, month, i + 1);
+            date.setHours(0, 0, 0, 0);
+            const { from, to } = this.value();
+            const hover = this.hoverDate();
+            const rangeEnd = to ?? hover;
+            const isStart = !!from && date.getTime() === from.getTime();
+            const isEnd = !!rangeEnd && date.getTime() === rangeEnd.getTime();
+            const inRange = !!from && !!rangeEnd &&
+                date > (from < rangeEnd ? from : rangeEnd) &&
+                date < (from < rangeEnd ? rangeEnd : from);
+            const min = this.minDate();
+            const max = this.maxDate();
+            const disabled = (!!min && date < min) || (!!max && date > max);
+            cells.push({
+                date,
+                currentMonth: date.getMonth() === month,
+                today: date.getTime() === today.getTime(),
+                inRange,
+                isStart,
+                isEnd,
+                disabled
+            });
+        }
+        // Pad to full weeks
+        while (cells.length % 7 !== 0) {
+            const last = cells[cells.length - 1].date;
+            const next = new Date(last);
+            next.setDate(next.getDate() + 1);
+            cells.push({ date: next, currentMonth: false, today: false, inRange: false, isStart: false, isEnd: false, disabled: true });
+        }
+        return cells;
+    }, ...(ngDevMode ? [{ debugName: "days" }] : []));
+    displayValue = computed(() => {
+        const { from, to } = this.value();
+        if (!from && !to)
+            return '';
+        const fmt = (d) => d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
+        if (from && to)
+            return `${fmt(from)} – ${fmt(to)}`;
+        if (from)
+            return `${fmt(from)} – ...`;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    toggleOpen() {
+        this.open.update(v => !v);
+    }
+    closeCalendar() {
+        this.open.set(false);
+        this.hoverDate.set(null);
+    }
+    prevMonth() {
+        this.viewDate.update(d => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+    }
+    nextMonth() {
+        this.viewDate.update(d => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+    }
+    onDayClick(day) {
+        if (day.disabled)
+            return;
+        const { from, to } = this.value();
+        if (!from || (from && to)) {
+            this.value.set({ from: day.date, to: null });
+        }
+        else {
+            const range = day.date < from
+                ? { from: day.date, to: from }
+                : { from, to: day.date };
+            this.value.set(range);
+            this.rangeChanged.emit(range);
+            this.closeCalendar();
+        }
+    }
+    onDayHover(day) {
+        if (!this.value().from || this.value().to)
+            return;
+        this.hoverDate.set(day.date);
+    }
+    clearRange() {
+        this.value.set({ from: null, to: null });
+        this.rangeChanged.emit({ from: null, to: null });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DateRangePickerComponent, isStandalone: true, selector: "c2g-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeChanged: "rangeChanged" }, ngImport: i0, template: "<div class=\"c2g-drp\" [class.c2g-drp--open]=\"open()\">\n  <div class=\"c2g-drp__trigger\" (click)=\"toggleOpen()\">\n    <span class=\"c2g-drp__icon\" aria-hidden=\"true\">\uD83D\uDCC5</span>\n    <span class=\"c2g-drp__value\" [class.c2g-drp__value--placeholder]=\"!displayValue()\">\n      {{ displayValue() || placeholder() }}\n    </span>\n    @if (value().from) {\n      <button\n        class=\"c2g-drp__clear\"\n        type=\"button\"\n        aria-label=\"Datum l\u00F6schen\"\n        (click)=\"$event.stopPropagation(); clearRange()\"\n      >\u2715</button>\n    }\n    <span class=\"c2g-drp__chevron\" aria-hidden=\"true\">\u25BE</span>\n  </div>\n\n  @if (open()) {\n    <div class=\"c2g-drp__backdrop\" (click)=\"closeCalendar()\"></div>\n    <div class=\"c2g-drp__calendar\" role=\"dialog\" aria-label=\"Kalender\">\n      <div class=\"c2g-drp__nav\">\n        <button class=\"c2g-drp__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Vorheriger Monat\">\u2039</button>\n        <span class=\"c2g-drp__month-label\">{{ monthLabel() }}</span>\n        <button class=\"c2g-drp__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"N\u00E4chster Monat\">\u203A</button>\n      </div>\n\n      <div class=\"c2g-drp__weekdays\">\n        @for (day of weekdays; track day) {\n          <span class=\"c2g-drp__weekday\">{{ day }}</span>\n        }\n      </div>\n\n      <div class=\"c2g-drp__grid\">\n        @for (day of days(); track day.date.getTime()) {\n          <button\n            class=\"c2g-drp__day\"\n            type=\"button\"\n            [class.c2g-drp__day--other-month]=\"!day.currentMonth\"\n            [class.c2g-drp__day--today]=\"day.today\"\n            [class.c2g-drp__day--start]=\"day.isStart\"\n            [class.c2g-drp__day--end]=\"day.isEnd\"\n            [class.c2g-drp__day--in-range]=\"day.inRange\"\n            [class.c2g-drp__day--disabled]=\"day.disabled\"\n            [disabled]=\"day.disabled || null\"\n            (click)=\"onDayClick(day)\"\n            (mouseenter)=\"onDayHover(day)\"\n            [attr.aria-label]=\"day.date.toLocaleDateString('de-DE')\"\n          >\n            {{ day.date.getDate() }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block;position:relative;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-drp{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);position:relative}.c2g-drp__trigger{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-sm, 6px);background:var(--c2g-theme-surface, var(--c2g-color-surface));cursor:pointer;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));min-width:240px;transition:border-color .15s ease}.c2g-drp__trigger:hover{border-color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-drp--open .c2g-drp__trigger{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-theme-primary, var(--c2g-color-primary)) 12%,transparent)}.c2g-drp__icon{flex-shrink:0;font-size:1rem}.c2g-drp__value{flex:1}.c2g-drp__value--placeholder{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-drp__clear{border:none;background:none;cursor:pointer;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));padding:0 2px;font-size:.75rem;line-height:1;flex-shrink:0}.c2g-drp__clear:hover{color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-drp__chevron{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-size:.75rem;flex-shrink:0;transition:transform .2s ease}.c2g-drp--open .c2g-drp__chevron{transform:rotate(180deg)}.c2g-drp__backdrop{position:fixed;inset:0;z-index:100}.c2g-drp__calendar{position:absolute;top:calc(100% + 6px);left:0;z-index:101;background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-lg, 12px);box-shadow:var(--c2g-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));padding:16px;min-width:280px;animation:c2g-drp-open .2s cubic-bezier(.34,1.56,.64,1)}.c2g-drp__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.c2g-drp__nav-btn{border:none;background:none;cursor:pointer;font-size:1.25rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));padding:4px 8px;border-radius:var(--c2g-radius-sm, 4px);line-height:1}.c2g-drp__nav-btn:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-drp__month-label{font-weight:700;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-drp__weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.c2g-drp__weekday{text-align:center;font-size:.7rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));padding:4px 0;text-transform:uppercase;letter-spacing:.04em}.c2g-drp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.c2g-drp__day{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:none;background:none;cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));border-radius:var(--c2g-radius-sm, 4px);transition:background .12s ease,color .12s ease;min-width:34px;min-height:34px}.c2g-drp__day:hover:not(.c2g-drp__day--disabled){background:var(--c2g-theme-primary-container, var(--c2g-color-primary-container));color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-drp__day--other-month{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-drp__day--today{font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-drp__day--start,.c2g-drp__day--end{background:var(--c2g-theme-primary, var(--c2g-color-primary))!important;color:var(--c2g-theme-surface, var(--c2g-color-surface))!important;border-radius:var(--c2g-radius-sm, 4px)}.c2g-drp__day--in-range{background:var(--c2g-theme-primary-container, var(--c2g-color-primary-container));color:var(--c2g-theme-primary, var(--c2g-color-primary));border-radius:0}.c2g-drp__day--disabled{opacity:.3;cursor:not-allowed}.c2g-drp__day:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px}@keyframes c2g-drp-open{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c2g-date-range-picker', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-drp\" [class.c2g-drp--open]=\"open()\">\n  <div class=\"c2g-drp__trigger\" (click)=\"toggleOpen()\">\n    <span class=\"c2g-drp__icon\" aria-hidden=\"true\">\uD83D\uDCC5</span>\n    <span class=\"c2g-drp__value\" [class.c2g-drp__value--placeholder]=\"!displayValue()\">\n      {{ displayValue() || placeholder() }}\n    </span>\n    @if (value().from) {\n      <button\n        class=\"c2g-drp__clear\"\n        type=\"button\"\n        aria-label=\"Datum l\u00F6schen\"\n        (click)=\"$event.stopPropagation(); clearRange()\"\n      >\u2715</button>\n    }\n    <span class=\"c2g-drp__chevron\" aria-hidden=\"true\">\u25BE</span>\n  </div>\n\n  @if (open()) {\n    <div class=\"c2g-drp__backdrop\" (click)=\"closeCalendar()\"></div>\n    <div class=\"c2g-drp__calendar\" role=\"dialog\" aria-label=\"Kalender\">\n      <div class=\"c2g-drp__nav\">\n        <button class=\"c2g-drp__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Vorheriger Monat\">\u2039</button>\n        <span class=\"c2g-drp__month-label\">{{ monthLabel() }}</span>\n        <button class=\"c2g-drp__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"N\u00E4chster Monat\">\u203A</button>\n      </div>\n\n      <div class=\"c2g-drp__weekdays\">\n        @for (day of weekdays; track day) {\n          <span class=\"c2g-drp__weekday\">{{ day }}</span>\n        }\n      </div>\n\n      <div class=\"c2g-drp__grid\">\n        @for (day of days(); track day.date.getTime()) {\n          <button\n            class=\"c2g-drp__day\"\n            type=\"button\"\n            [class.c2g-drp__day--other-month]=\"!day.currentMonth\"\n            [class.c2g-drp__day--today]=\"day.today\"\n            [class.c2g-drp__day--start]=\"day.isStart\"\n            [class.c2g-drp__day--end]=\"day.isEnd\"\n            [class.c2g-drp__day--in-range]=\"day.inRange\"\n            [class.c2g-drp__day--disabled]=\"day.disabled\"\n            [disabled]=\"day.disabled || null\"\n            (click)=\"onDayClick(day)\"\n            (mouseenter)=\"onDayHover(day)\"\n            [attr.aria-label]=\"day.date.toLocaleDateString('de-DE')\"\n          >\n            {{ day.date.getDate() }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block;position:relative;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-drp{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);position:relative}.c2g-drp__trigger{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-sm, 6px);background:var(--c2g-theme-surface, var(--c2g-color-surface));cursor:pointer;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));min-width:240px;transition:border-color .15s ease}.c2g-drp__trigger:hover{border-color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-drp--open .c2g-drp__trigger{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-theme-primary, var(--c2g-color-primary)) 12%,transparent)}.c2g-drp__icon{flex-shrink:0;font-size:1rem}.c2g-drp__value{flex:1}.c2g-drp__value--placeholder{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-drp__clear{border:none;background:none;cursor:pointer;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));padding:0 2px;font-size:.75rem;line-height:1;flex-shrink:0}.c2g-drp__clear:hover{color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-drp__chevron{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-size:.75rem;flex-shrink:0;transition:transform .2s ease}.c2g-drp--open .c2g-drp__chevron{transform:rotate(180deg)}.c2g-drp__backdrop{position:fixed;inset:0;z-index:100}.c2g-drp__calendar{position:absolute;top:calc(100% + 6px);left:0;z-index:101;background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-lg, 12px);box-shadow:var(--c2g-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));padding:16px;min-width:280px;animation:c2g-drp-open .2s cubic-bezier(.34,1.56,.64,1)}.c2g-drp__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.c2g-drp__nav-btn{border:none;background:none;cursor:pointer;font-size:1.25rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));padding:4px 8px;border-radius:var(--c2g-radius-sm, 4px);line-height:1}.c2g-drp__nav-btn:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-drp__month-label{font-weight:700;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-drp__weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.c2g-drp__weekday{text-align:center;font-size:.7rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));padding:4px 0;text-transform:uppercase;letter-spacing:.04em}.c2g-drp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.c2g-drp__day{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:none;background:none;cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));border-radius:var(--c2g-radius-sm, 4px);transition:background .12s ease,color .12s ease;min-width:34px;min-height:34px}.c2g-drp__day:hover:not(.c2g-drp__day--disabled){background:var(--c2g-theme-primary-container, var(--c2g-color-primary-container));color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-drp__day--other-month{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-drp__day--today{font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-drp__day--start,.c2g-drp__day--end{background:var(--c2g-theme-primary, var(--c2g-color-primary))!important;color:var(--c2g-theme-surface, var(--c2g-color-surface))!important;border-radius:var(--c2g-radius-sm, 4px)}.c2g-drp__day--in-range{background:var(--c2g-theme-primary-container, var(--c2g-color-primary-container));color:var(--c2g-theme-primary, var(--c2g-color-primary));border-radius:0}.c2g-drp__day--disabled{opacity:.3;cursor:not-allowed}.c2g-drp__day:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px}@keyframes c2g-drp-open{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rangeChanged: [{ type: i0.Output, args: ["rangeChanged"] }] } });
+
+/*
+ * Public API Surface of @humbeldore/c2g-ui (core)
+ *
+ * UI primitives — the building blocks every consumer needs.
+ * Domain-specific entry points:
+ *   @humbeldore/c2g-ui/theme    — ThemeService, design tokens, i18n
+ *   @humbeldore/c2g-ui/layout   — ContentPanel, Hero, StatCard, ActionCard, ...
+ *   @humbeldore/c2g-ui/maps     — MapComponent, MapMarkerComponent
+ *   @humbeldore/c2g-ui/charts   — BarChart, LineChart, ...
+ *   @humbeldore/c2g-ui/presets  — PackingList, MemberList, WeatherWidget, ...
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertComponent, AvatarComponent, BadgeComponent, ButtonComponent, C2G_LOTTIE_PRESET_OPTIONS, C2G_LOTTIE_PRESET_PATHS, C2gUi, CheckboxComponent, ChipComponent, ConfirmDialogComponent, DateRangePickerComponent, InputComponent, LoaderComponent, LottieLoaderComponent, ModalComponent, ProgressComponent, RadioGroupComponent, SelectComponent, SkeletonComponent, SwitchComponent, TagComponent, TextareaComponent, ToastContainerComponent, ToastService, loadC2gLottiePresetData, provideC2gIcons };
+//# sourceMappingURL=camp2gether-c2g-ui.mjs.map