yukit-web 0.0.29 → 0.1.0

package/fesm2022/yukit-web.mjs

@@ -394,7 +394,7 @@ const yuwButtonVariants = cva('', {
         /**
          * Strips every background/border the helm variants set, covering each modifier stack they
          * use (`hover:`, `aria-expanded:`, `dark:`, `dark:hover:`, `[a]:hover:`) so `twMerge` drops
-         * the helm counterpart in every state. The `component-colors.css` gradients key off the
+         * the helm counterpart in every state. The `component-colors.css` hover fills key off the
          * `.bg-primary` class, which this merge removes from the element, so they never match a
          * transparent button and no `!important` is needed here either.
          */
@@ -421,7 +421,7 @@ const yuwButtonVariants = cva('', {
  * Inputs:
  * - `variant`: Button style variant (`'default'`, `'secondary'`, `'outline'`, `'destructive'`, `'ghost'`, `'link'`). Default is `'default'`.
  * - `size`: Button size (`'default'`, `'sm'`, `'lg'`, `'icon'`, etc.). Default is `'default'`.
- * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'secondary'`.
+ * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'neutral'`.
  * - `disabled`: Disables button interactions.
  * - `type`: HTML button type (`'button'`, `'submit'`, `'reset'`). Default is `'button'`.
  * - `href`: Renders button as an anchor tag navigating to specified URL.
@@ -456,7 +456,7 @@ class YuwButtonComponent {
         this._host = inject(ElementRef);
         this.animationDisabled = input(false, ...(ngDevMode ? [{ debugName: "animationDisabled" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.href = input(undefined, ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
         this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -585,7 +585,7 @@ class YuwButtonGroupComponent {
         this._contents = contentChildren(YuwButtonGroupContentDirective, ...(ngDevMode ? [{ debugName: "_contents" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.buttons = input.required(...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
-        this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.selectedColor = input(undefined, ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
         this.selectedVariant = input(undefined, ...(ngDevMode ? [{ debugName: "selectedVariant" }] : /* istanbul ignore next */ []));
@@ -1992,10 +1992,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Class map for `yuw-checkbox`, layered on top of `HlmCheckbox`'s own classes.
  *
  * The base indeterminate treatment is unconditional — it's how *every* `yuw-checkbox` renders
- * that state, not a variant — so it lives in the cva base, while `secondary` is an opt-in
- * boolean variant layered on top.
+ * that state, not a variant — so it lives in the cva base, while `primary` is an opt-in
+ * boolean variant layered on top (the secondary color is the default).
  *
- * Order is load-bearing: the secondary classes override the base's `bg-primary`/`border-primary`,
+ * Order is load-bearing: the default (secondary) classes override the base's `bg-primary`/`border-primary`,
  * and cva emits base classes before variant classes, so the component must pass the result
  * through `cn()` for `tailwind-merge` to keep the later (secondary) ones instead of shipping both
  * to the DOM and leaving it to specificity.
@@ -2011,29 +2011,28 @@ const checkboxVariants = cva([
     'data-[state=indeterminate]:after:bg-current',
 ], {
     variants: {
-        secondary: {
-            true: [
-                'data-[state=checked]:bg-(color:--neutrals-element-high)',
-                'data-[state=checked]:bg-(image:--neutrals-element-high-gradient)',
-                'data-[state=checked]:text-(--neutrals-overlay)',
-                'data-[state=checked]:border-(--neutrals-element-high)',
-                'data-[state=indeterminate]:bg-(color:--neutrals-element-high)',
-                'data-[state=indeterminate]:bg-(image:--neutrals-element-high-gradient)',
-                'data-[state=indeterminate]:text-(--neutrals-white)',
-                'data-[state=indeterminate]:border-(--neutrals-element-high)',
-                'dark:data-[state=indeterminate]:text-(--neutrals-black)',
+        primary: {
+            false: [
+                'data-checked:bg-(color:--secondary-fill)',
+                'dark:data-checked:bg-(color:--secondary-fill)',
+                'data-checked:text-(--secondary-on-fill)',
+                'data-checked:border-(--secondary-fill)',
+                'data-[state=indeterminate]:bg-(color:--secondary-fill)',
+                'dark:data-[state=indeterminate]:bg-(color:--secondary-fill)',
+                'data-[state=indeterminate]:text-(--secondary-on-fill)',
+                'data-[state=indeterminate]:border-(--secondary-fill)',
             ],
-            false: 'data-[state=indeterminate]:border-primary',
+            true: 'data-[state=indeterminate]:border-primary',
         },
     },
     defaultVariants: {
-        secondary: false,
+        primary: false,
     },
 });
 
 /**
  * Checkbox control supporting two-way boolean binding, form integration (`ngModel`, `formControlName`),
- * indeterminate state, and secondary styling variant.
+ * indeterminate state, and primary styling variant.
  *
  * Projected content becomes the checkbox's clickable label: the control is wrapped in a `<label>`,
  * so clicking the text toggles it and the text is announced as the accessible name. Without
@@ -2050,7 +2049,7 @@ const checkboxVariants = cva([
  * - `ariaLabel`: Accessible name for screen readers when there's no visible label.
  * - `ariaLabelledby`: ID of an external element that labels the checkbox.
  * - `ariaDescribedby`: ID of an external element that describes the checkbox (hints, errors).
- * - `secondary`: Enables secondary color variant styling.
+ * - `primary`: Primary colour checked state. Defaults to `false` (secondary colour); set `primary` to opt in.
  *
  * Usage:
  * ```html
@@ -2069,11 +2068,11 @@ class YuwCheckboxComponent extends YuwValueAccessorBase {
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.primary = input(false, { ...(ngDevMode ? { debugName: "primary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.secondary = input(false, { ...(ngDevMode ? { debugName: "secondary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.value = model(false, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'checked' });
         this._focusSelectors = ['[role="checkbox"]'];
-        this._class = computed(() => cn(checkboxVariants({ secondary: this.secondary() })), ...(ngDevMode ? [{ debugName: "_class" }] : /* istanbul ignore next */ []));
+        this._class = computed(() => cn(checkboxVariants({ primary: this.primary() })), ...(ngDevMode ? [{ debugName: "_class" }] : /* istanbul ignore next */ []));
     }
     _emptyValue() {
         return false;
@@ -2082,14 +2081,14 @@ class YuwCheckboxComponent extends YuwValueAccessorBase {
         this._commit(checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwCheckboxComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox\n    [class]=\"_class()\"\n    [checked]=\"value()\"\n    [(indeterminate)]=\"indeterminate\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [name]=\"name() ?? null\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "checked", "indeterminate", "name", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwCheckboxComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox\n    [class]=\"_class()\"\n    [checked]=\"value()\"\n    [(indeterminate)]=\"indeterminate\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [name]=\"name() ?? null\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "checked", "indeterminate", "name", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-checkbox', imports: [HlmCheckbox, YuwLabel], providers: [provideValueAccessor(YuwCheckboxComponent)], host: {
                         class: 'contents',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox\n    [class]=\"_class()\"\n    [checked]=\"value()\"\n    [(indeterminate)]=\"indeterminate\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [name]=\"name() ?? null\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n" }]
-        }], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+        }], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 /**
  * Helm switch size each of our sizes maps onto.
@@ -2137,6 +2136,18 @@ const yuwSwitchSizeVariants = cva('', {
         size: 'default',
     },
 });
+/**
+ * Blue ("secondary") treatment for `<yuw-switch>`, the component default.
+ *
+ * Recolours the checked track with the secondary fill token, which changes in dark mode on its own,
+ * and the thumb white, only while checked. The
+ * thumb selector targets `[data-state=checked]` because that is the only state attribute the thumb
+ * carries; the track is keyed off `data-checked` on itself.
+ */
+const yuwSwitchSecondaryClass = [
+    'data-checked:bg-(color:--secondary-fill)',
+    '[&_[data-slot=switch-thumb][data-state=checked]]:bg-(--neutrals-white)',
+].join(' ');
 
 /**
  * Toggle switch control for binary settings and immediate state changes.
@@ -2149,6 +2160,7 @@ const yuwSwitchSizeVariants = cva('', {
  * - `checked` (alias for `value`): Two-way boolean on/off state. Bind as `[(checked)]`.
  * - `size`: Track size (`'default'`, `'xs'`, `'sm'`, `'lg'`). Named to match the rest of the
  *   library; the pixel values keep a switch's own proportions rather than the field heights.
+ * - `primary`: Primary colour checked state. Defaults to `false` (secondary colour); set `primary` to opt in.
  * - `disabled`: Disables switch interaction.
  * - `inputId`: HTML `id` for the underlying control, enabling external `<label for="...">` association.
  * - `ariaLabel`: Accessible name for switches with no visible adjacent label.
@@ -2166,11 +2178,12 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
         this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.primary = input(false, { ...(ngDevMode ? { debugName: "primary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.value = model(false, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'checked' });
         this._focusSelectors = ['[role="switch"]'];
         this._helmSize = computed(() => YUW_SWITCH_HELM_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "_helmSize" }] : /* istanbul ignore next */ []));
-        this._switchClass = computed(() => yuwSwitchSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_switchClass" }] : /* istanbul ignore next */ []));
+        this._switchClass = computed(() => cn(yuwSwitchSizeVariants({ size: this.size() }), !this.primary() && yuwSwitchSecondaryClass), ...(ngDevMode ? [{ debugName: "_switchClass" }] : /* istanbul ignore next */ []));
     }
     _emptyValue() {
         return false;
@@ -2179,15 +2192,20 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
         this._commit(checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: i1$5.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: i1$5.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-switch', imports: [...HlmSwitchImports, YuwLabel], providers: [provideValueAccessor(YuwSwitchComponent)], host: {
                         class: 'contents',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n" }]
-        }], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+        }], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
+/** Blue dot and outline for a checked radio, the component default. Stacks the helm's own `group-data-[checked=true]` variant on the indicator's inner dot. */
+const SECONDARY_DOT_CLASS = [
+    '[&_[data-slot=radio-group-indicator]_div]:group-data-[checked=true]:bg-(--secondary-fill)',
+    '[&_[data-slot=radio-group-indicator]]:group-data-[checked=true]:border-(--secondary-fill)',
+].join(' ');
 /** Module-level counter so every unnamed group gets its own radio `name`. Binding `[name]`
  * unconditionally overrides Brain's autogenerated unique name, and an empty-string fallback
  * would make two unnamed groups on the same page share `name=""` — i.e. act as one group. */
@@ -2198,6 +2216,7 @@ let nextUniqueId$1 = 0;
  * Inputs / Models:
  * - `value`: Two-way selected option value (`string | undefined`). `undefined` means nothing is selected.
  * - `options`: Required array of radio options (`YuwRadioOptionDto[]`).
+ * - `primary`: Primary colour selected dot. Defaults to `false` (secondary colour); set `primary` to opt in.
  * - `disabled`: Disables all radio options.
  * - `required`: Marks the group as required.
  * - `name`: Shared HTML `name` attribute for all radios, making them mutually exclusive in native
@@ -2221,12 +2240,13 @@ class YuwRadioGroupComponent extends YuwValueAccessorBase {
         this.ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
         this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.primary = input(false, { ...(ngDevMode ? { debugName: "primary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this._focusSelectors = ['input:checked', 'input:not(:disabled)'];
         this._generatedName = `yuw-radio-group-${++nextUniqueId$1}`;
-        this._groupClass = computed(() => cn('gap-3', this.userClass()), ...(ngDevMode ? [{ debugName: "_groupClass" }] : /* istanbul ignore next */ []));
+        this._groupClass = computed(() => cn('gap-3', !this.primary() && SECONDARY_DOT_CLASS, this.userClass()), ...(ngDevMode ? [{ debugName: "_groupClass" }] : /* istanbul ignore next */ []));
         this._name = computed(() => this.name() ?? this._generatedName, ...(ngDevMode ? [{ debugName: "_name" }] : /* istanbul ignore next */ []));
     }
     _emptyValue() {
@@ -2236,14 +2256,14 @@ class YuwRadioGroupComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$6.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$6.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$6.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$6.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$6.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$6.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-radio-group', imports: [...HlmRadioGroupImports, YuwLabel], providers: [provideValueAccessor(YuwRadioGroupComponent)], host: {
                         class: 'contents',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n" }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Loading skeleton placeholder directive with pulse animation effect.
@@ -3153,7 +3173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   over the library defaults via `twMerge`.
  * - `triggerVariant`: Button style variant for the trigger button.
  * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
- *   `'secondary'`.
+ *   `'neutral'`.
  * - `triggerSize`: Button size for the trigger button.
  * - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
  *   open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
@@ -3183,7 +3203,7 @@ class YuwPopoverComponent {
         this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
         this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
-        this.triggerColor = input('secondary', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
+        this.triggerColor = input('neutral', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
         this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
         this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
@@ -3656,7 +3676,7 @@ class YuwListToolbarFiltersComponent {
             }
             return entries;
         }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
-        this.buttonsColor = computed(() => (this.hasActive() ? 'primary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "buttonsColor" }] : /* istanbul ignore next */ []));
+        this.buttonsColor = computed(() => (this.hasActive() ? 'secondary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "buttonsColor" }] : /* istanbul ignore next */ []));
         this.selectedText = computed(() => this.labels().selected(this.draft.selectedCount()), ...(ngDevMode ? [{ debugName: "selectedText" }] : /* istanbul ignore next */ []));
         this.tabs = computed(() => this.groups().map((group) => ({ id: group.id, label: group.label })), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         effect(() => {
@@ -3690,7 +3710,7 @@ class YuwListToolbarFiltersComponent {
         this.open.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, providers: [provideIcons({ lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n  <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n    @for (option of group.options; track option.value) {\n      <li>\n        <label\n          class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n          [for]=\"`${group.id}-option-${option.value}`\"\n        >\n          <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n          <yuw-checkbox\n            [inputId]=\"`${group.id}-option-${option.value}`\"\n            [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n            [disabled]=\"option.disabled ?? false\"\n            [ariaLabel]=\"option.label\"\n            (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n          />\n        </label>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"labels().title\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    <div class=\"flex min-h-0 flex-col gap-3\">\n      <yuw-tabs\n        class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n        [tabs]=\"tabs()\"\n        [activeTab]=\"activeGroup()?.id ?? ''\"\n        (activeTabChange)=\"selectGroup($event)\"\n      >\n        @for (group of groups(); track group.id) {\n          <ng-template [yuwTabContent]=\"group.id\">\n            <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n              {{ group.label }}\n\n              @if (draft.pendingGroupIds().has(group.id)) {\n                <yuw-badge\n                  dot\n                  color=\"primary\"\n                  style=\"width: 0.5rem; height: 0.5rem\"\n                  [attr.aria-label]=\"labels().pending\"\n                  [attr.title]=\"labels().pending\"\n                />\n              }\n            </span>\n          </ng-template>\n\n          <ng-template [yuwTabPanel]=\"group.id\">\n            <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n            </div>\n          </ng-template>\n        }\n      </yuw-tabs>\n\n      <div class=\"pb-3\">\n        <ng-container [ngTemplateOutlet]=\"commitRow\" />\n      </div>\n    </div>\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    <div class=\"flex min-w-0\">\n      <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n        @for (group of groups(); track group.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n              [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n              [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n              (click)=\"selectGroup(group.id)\"\n            >\n              <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n              @if (draft.pendingGroupIds().has(group.id)) {\n                <yuw-badge\n                  dot\n                  color=\"primary\"\n                  style=\"width: 0.5rem; height: 0.5rem\"\n                  [attr.aria-label]=\"labels().pending\"\n                  [attr.title]=\"labels().pending\"\n                />\n              }\n            </button>\n          </li>\n        }\n      </ul>\n\n      @if (activeGroup(); as group) {\n        <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n          <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n          <ng-container [ngTemplateOutlet]=\"commitRow\" />\n        </div>\n      }\n    </div>\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "required", "secondary", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, providers: [provideIcons({ lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n  <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n    @for (option of group.options; track option.value) {\n      <li>\n        <label\n          class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n          [for]=\"`${group.id}-option-${option.value}`\"\n        >\n          <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n          <yuw-checkbox\n            [inputId]=\"`${group.id}-option-${option.value}`\"\n            [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n            [disabled]=\"option.disabled ?? false\"\n            [ariaLabel]=\"option.label\"\n            (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n          />\n        </label>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"labels().title\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    <div class=\"flex min-h-0 flex-col gap-3\">\n      <yuw-tabs\n        class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n        [tabs]=\"tabs()\"\n        [activeTab]=\"activeGroup()?.id ?? ''\"\n        (activeTabChange)=\"selectGroup($event)\"\n      >\n        @for (group of groups(); track group.id) {\n          <ng-template [yuwTabContent]=\"group.id\">\n            <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n              {{ group.label }}\n\n              @if (draft.pendingGroupIds().has(group.id)) {\n                <yuw-badge\n                  dot\n                  color=\"secondary\"\n                  style=\"width: 0.5rem; height: 0.5rem\"\n                  [attr.aria-label]=\"labels().pending\"\n                  [attr.title]=\"labels().pending\"\n                />\n              }\n            </span>\n          </ng-template>\n\n          <ng-template [yuwTabPanel]=\"group.id\">\n            <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n            </div>\n          </ng-template>\n        }\n      </yuw-tabs>\n\n      <div class=\"pb-3\">\n        <ng-container [ngTemplateOutlet]=\"commitRow\" />\n      </div>\n    </div>\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    <div class=\"flex min-w-0\">\n      <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n        @for (group of groups(); track group.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n              [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n              [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n              (click)=\"selectGroup(group.id)\"\n            >\n              <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n              @if (draft.pendingGroupIds().has(group.id)) {\n                <yuw-badge\n                  dot\n                  color=\"secondary\"\n                  style=\"width: 0.5rem; height: 0.5rem\"\n                  [attr.aria-label]=\"labels().pending\"\n                  [attr.title]=\"labels().pending\"\n                />\n              }\n            </button>\n          </li>\n        }\n      </ul>\n\n      @if (activeGroup(); as group) {\n        <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n          <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n          <ng-container [ngTemplateOutlet]=\"commitRow\" />\n        </div>\n      }\n    </div>\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, decorators: [{
             type: Component,
@@ -3707,7 +3727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwTabContentDirective,
                         YuwTabPanelDirective,
                         YuwTabsComponent,
-                    ], providers: [provideIcons({ lucideX })], template: "<ng-template #options let-group>\n  <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n    @for (option of group.options; track option.value) {\n      <li>\n        <label\n          class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n          [for]=\"`${group.id}-option-${option.value}`\"\n        >\n          <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n          <yuw-checkbox\n            [inputId]=\"`${group.id}-option-${option.value}`\"\n            [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n            [disabled]=\"option.disabled ?? false\"\n            [ariaLabel]=\"option.label\"\n            (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n          />\n        </label>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"labels().title\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    <div class=\"flex min-h-0 flex-col gap-3\">\n      <yuw-tabs\n        class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n        [tabs]=\"tabs()\"\n        [activeTab]=\"activeGroup()?.id ?? ''\"\n        (activeTabChange)=\"selectGroup($event)\"\n      >\n        @for (group of groups(); track group.id) {\n          <ng-template [yuwTabContent]=\"group.id\">\n            <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n              {{ group.label }}\n\n              @if (draft.pendingGroupIds().has(group.id)) {\n                <yuw-badge\n                  dot\n                  color=\"primary\"\n                  style=\"width: 0.5rem; height: 0.5rem\"\n                  [attr.aria-label]=\"labels().pending\"\n                  [attr.title]=\"labels().pending\"\n                />\n              }\n            </span>\n          </ng-template>\n\n          <ng-template [yuwTabPanel]=\"group.id\">\n            <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n            </div>\n          </ng-template>\n        }\n      </yuw-tabs>\n\n      <div class=\"pb-3\">\n        <ng-container [ngTemplateOutlet]=\"commitRow\" />\n      </div>\n    </div>\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    <div class=\"flex min-w-0\">\n      <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n        @for (group of groups(); track group.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n              [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n              [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n              (click)=\"selectGroup(group.id)\"\n            >\n              <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n              @if (draft.pendingGroupIds().has(group.id)) {\n                <yuw-badge\n                  dot\n                  color=\"primary\"\n                  style=\"width: 0.5rem; height: 0.5rem\"\n                  [attr.aria-label]=\"labels().pending\"\n                  [attr.title]=\"labels().pending\"\n                />\n              }\n            </button>\n          </li>\n        }\n      </ul>\n\n      @if (activeGroup(); as group) {\n        <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n          <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n          <ng-container [ngTemplateOutlet]=\"commitRow\" />\n        </div>\n      }\n    </div>\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
+                    ], providers: [provideIcons({ lucideX })], template: "<ng-template #options let-group>\n  <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n    @for (option of group.options; track option.value) {\n      <li>\n        <label\n          class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n          [for]=\"`${group.id}-option-${option.value}`\"\n        >\n          <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n          <yuw-checkbox\n            [inputId]=\"`${group.id}-option-${option.value}`\"\n            [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n            [disabled]=\"option.disabled ?? false\"\n            [ariaLabel]=\"option.label\"\n            (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n          />\n        </label>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"labels().title\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    <div class=\"flex min-h-0 flex-col gap-3\">\n      <yuw-tabs\n        class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n        [tabs]=\"tabs()\"\n        [activeTab]=\"activeGroup()?.id ?? ''\"\n        (activeTabChange)=\"selectGroup($event)\"\n      >\n        @for (group of groups(); track group.id) {\n          <ng-template [yuwTabContent]=\"group.id\">\n            <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n              {{ group.label }}\n\n              @if (draft.pendingGroupIds().has(group.id)) {\n                <yuw-badge\n                  dot\n                  color=\"secondary\"\n                  style=\"width: 0.5rem; height: 0.5rem\"\n                  [attr.aria-label]=\"labels().pending\"\n                  [attr.title]=\"labels().pending\"\n                />\n              }\n            </span>\n          </ng-template>\n\n          <ng-template [yuwTabPanel]=\"group.id\">\n            <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n            </div>\n          </ng-template>\n        }\n      </yuw-tabs>\n\n      <div class=\"pb-3\">\n        <ng-container [ngTemplateOutlet]=\"commitRow\" />\n      </div>\n    </div>\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    <div class=\"flex min-w-0\">\n      <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n        @for (group of groups(); track group.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n              [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n              [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n              (click)=\"selectGroup(group.id)\"\n            >\n              <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n              @if (draft.pendingGroupIds().has(group.id)) {\n                <yuw-badge\n                  dot\n                  color=\"secondary\"\n                  style=\"width: 0.5rem; height: 0.5rem\"\n                  [attr.aria-label]=\"labels().pending\"\n                  [attr.title]=\"labels().pending\"\n                />\n              }\n            </button>\n          </li>\n        }\n      </ul>\n\n      @if (activeGroup(); as group) {\n        <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n          <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n          <ng-container [ngTemplateOutlet]=\"commitRow\" />\n        </div>\n      }\n    </div>\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }] } });
 
 /**
@@ -3724,7 +3744,7 @@ class YuwListToolbarComponent {
         this.filtersDisabled = input(false, { ...(ngDevMode ? { debugName: "filtersDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.hiddenColumns = model([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
         this.hideableColumns = input(...(ngDevMode ? [undefined, { debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
-        this.idleColor = input('secondary', ...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
+        this.idleColor = input('neutral', ...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
         this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
         this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
         this.searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
@@ -4090,13 +4110,13 @@ class YuwDatatableComponent {
         this.rowClicked.emit(row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", pagination: "paginationChange", rowSelection: "rowSelectionChange", sorting: "sortingChange", rowClicked: "rowClicked", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], queries: [{ propertyName: "customPagination", first: true, predicate: YuwDatatablePaginationDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            @let headerClasses = _cellClasses().get(header.column.id);\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"headerClasses?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClasses().get(row.id)\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onRowClick(row.original)\"\n            (keydown)=\"onRowKeydown($event, row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center flex-wrap justify-end gap-4 py-3 px-1 max-lg:justify-center\">\n    @if (customPagination()) {\n      <ng-content select=\"[yuwDatatablePagination]\" />\n    }\n    <yuw-pagination\n      [page]=\"currentPage()\"\n      (pageChange)=\"onPageChange($event)\"\n      [totalPages]=\"table.getPageCount() || 1\"\n      [previousLabel]=\"previousPageLabel()\"\n      [nextLabel]=\"nextPageLabel()\"\n      [ellipsisSrText]=\"paginationEllipsisSrText()\"\n      [ariaLabel]=\"paginationAriaLabel()\"\n      color=\"secondary\"\n      size=\"icon-sm\"\n      class=\"flex\"\n    />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["ariaLabel", "color", "ellipsisSrText", "nextLabel", "page", "previousLabel", "size", "totalPages"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", pagination: "paginationChange", rowSelection: "rowSelectionChange", sorting: "sortingChange", rowClicked: "rowClicked", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], queries: [{ propertyName: "customPagination", first: true, predicate: YuwDatatablePaginationDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            @let headerClasses = _cellClasses().get(header.column.id);\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"headerClasses?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClasses().get(row.id)\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onRowClick(row.original)\"\n            (keydown)=\"onRowKeydown($event, row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center flex-wrap justify-end gap-4 py-3 px-1 max-lg:justify-center\">\n    @if (customPagination()) {\n      <ng-content select=\"[yuwDatatablePagination]\" />\n    }\n    <yuw-pagination\n      [page]=\"currentPage()\"\n      (pageChange)=\"onPageChange($event)\"\n      [totalPages]=\"table.getPageCount() || 1\"\n      [previousLabel]=\"previousPageLabel()\"\n      [nextLabel]=\"nextPageLabel()\"\n      [ellipsisSrText]=\"paginationEllipsisSrText()\"\n      [ariaLabel]=\"paginationAriaLabel()\"\n      color=\"neutral\"\n      size=\"icon-sm\"\n      class=\"flex\"\n    />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["ariaLabel", "color", "ellipsisSrText", "nextLabel", "page", "previousLabel", "size", "totalPages"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective, NgIcon], providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            @let headerClasses = _cellClasses().get(header.column.id);\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"headerClasses?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClasses().get(row.id)\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onRowClick(row.original)\"\n            (keydown)=\"onRowKeydown($event, row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center flex-wrap justify-end gap-4 py-3 px-1 max-lg:justify-center\">\n    @if (customPagination()) {\n      <ng-content select=\"[yuwDatatablePagination]\" />\n    }\n    <yuw-pagination\n      [page]=\"currentPage()\"\n      (pageChange)=\"onPageChange($event)\"\n      [totalPages]=\"table.getPageCount() || 1\"\n      [previousLabel]=\"previousPageLabel()\"\n      [nextLabel]=\"nextPageLabel()\"\n      [ellipsisSrText]=\"paginationEllipsisSrText()\"\n      [ariaLabel]=\"paginationAriaLabel()\"\n      color=\"secondary\"\n      size=\"icon-sm\"\n      class=\"flex\"\n    />\n  </div>\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            @let headerClasses = _cellClasses().get(header.column.id);\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"headerClasses?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClasses().get(row.id)\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onRowClick(row.original)\"\n            (keydown)=\"onRowKeydown($event, row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center flex-wrap justify-end gap-4 py-3 px-1 max-lg:justify-center\">\n    @if (customPagination()) {\n      <ng-content select=\"[yuwDatatablePagination]\" />\n    }\n    <yuw-pagination\n      [page]=\"currentPage()\"\n      (pageChange)=\"onPageChange($event)\"\n      [totalPages]=\"table.getPageCount() || 1\"\n      [previousLabel]=\"previousPageLabel()\"\n      [nextLabel]=\"nextPageLabel()\"\n      [ellipsisSrText]=\"paginationEllipsisSrText()\"\n      [ariaLabel]=\"paginationAriaLabel()\"\n      color=\"neutral\"\n      size=\"icon-sm\"\n      class=\"flex\"\n    />\n  </div>\n}\n" }]
         }], propDecorators: { customPagination: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwDatatablePaginationDirective), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], cellClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClass", required: false }] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
 
 /**
@@ -4119,7 +4139,7 @@ class YuwDatatableRowSelect {
         this.onToggle()();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatableRowSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwDatatableRowSelect, isStandalone: true, selector: "yuw-datatable-row-select", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, onToggle: { classPropertyName: "onToggle", publicName: "onToggle", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" } }, ngImport: i0, template: "<yuw-checkbox\n  [checked]=\"checked()\"\n  [indeterminate]=\"indeterminate()\"\n  [ariaLabel]=\"label()\"\n  (checkedChange)=\"toggle()\"\n/>\n", dependencies: [{ kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "required", "secondary", "checked"], outputs: ["indeterminateChange", "checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwDatatableRowSelect, isStandalone: true, selector: "yuw-datatable-row-select", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, onToggle: { classPropertyName: "onToggle", publicName: "onToggle", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" } }, ngImport: i0, template: "<yuw-checkbox\n  [checked]=\"checked()\"\n  [indeterminate]=\"indeterminate()\"\n  [ariaLabel]=\"label()\"\n  (checkedChange)=\"toggle()\"\n/>\n", dependencies: [{ kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatableRowSelect, decorators: [{
             type: Component,
@@ -4702,7 +4722,7 @@ class YuwDialogComponent {
         this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
         this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.triggerColor = input('secondary', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
+        this.triggerColor = input('neutral', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
         this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
         this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
         this._dialogState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_dialogState" }] : /* istanbul ignore next */ []));