yukit-web 0.0.28 → 0.1.0

package/fesm2022/yukit-web.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, Directive, forwardRef, inject, ElementRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, Injector, afterNextRender, numberAttribute, runInInjectionContext, DestroyRef } from '@angular/core';
+import { input, Directive, forwardRef, inject, ElementRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, Injector, afterNextRender, numberAttribute, DOCUMENT, runInInjectionContext, DestroyRef } from '@angular/core';
 import { classes, hlm } from 'yukit-web/helm/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
@@ -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 */ []));
@@ -915,6 +915,8 @@ let nextUniqueId$2 = 0;
  * - `clearAriaLabel`: When set, the clear button is shown on the single-selection control and
  *   this is its accessible name; when absent, there is no clear button. One input, one source of
  *   truth. User-facing text — the consuming app is responsible for providing it translated.
+ * - `keepValueOnEscape`: Stops Escape from clearing the selection when the list is closed, so a
+ *   filter picker keeps its choices and Escape only dismisses.
  * - `inputId`: HTML `id` for the focusable control (the search input, or the trigger button when
  *   `readonlyTrigger` is set), enabling external `<label for="...">` association.
  * - `readonlyTrigger`: Renders control as a button showing selected label, placing search input inside popover.
@@ -933,7 +935,8 @@ let nextUniqueId$2 = 0;
  */
 class YuwComboboxComponent extends YuwValueAccessorBase {
     constructor() {
-        super(...arguments);
+        super();
+        this._element = inject(ElementRef);
         this._multipleBox = viewChild(BrnComboboxMultiple, ...(ngDevMode ? [{ debugName: "_multipleBox" }] : /* istanbul ignore next */ []));
         this._panel = viewChild(HlmComboboxContent, { ...(ngDevMode ? { debugName: "_panel" } : /* istanbul ignore next */ {}), read: ElementRef });
         this._singleBox = viewChild(BrnCombobox, ...(ngDevMode ? [{ debugName: "_singleBox" }] : /* istanbul ignore next */ []));
@@ -942,6 +945,7 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.keepValueOnEscape = input(false, { ...(ngDevMode ? { debugName: "keepValueOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -976,6 +980,7 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
             return Array.isArray(value) ? value[0] : value;
         }, ...(ngDevMode ? [{ debugName: "_singleValue" }] : /* istanbul ignore next */ []));
         this._triggerClass = computed(() => yuwButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => onCleanup(this._guardEscape() ?? (() => undefined)));
     }
     /**
      * Focuses the field and opens its option list. For a combobox living inside a popover or sheet:
@@ -1004,15 +1009,41 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
     onValueChange(next) {
         this._commit(next ?? this._emptyValue());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_multipleBox", first: true, predicate: BrnComboboxMultiple, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_singleBox", first: true, predicate: BrnCombobox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /**
+     * The brain clears the whole selection when Escape is pressed with the list closed. While
+     * `keepValueOnEscape` is on, that reset is skipped for the duration of the Escape keydown only,
+     * so the clear button and programmatic resets still work and the event keeps propagating (an
+     * enclosing popover can still close on it). Nothing is registered while the input is off, and
+     * the returned function undoes it all.
+     */
+    _guardEscape() {
+        const box = this._multipleBox() ?? this._singleBox();
+        if (!this.keepValueOnEscape() || !box) {
+            return undefined;
+        }
+        const host = this._element.nativeElement;
+        const reset = box.resetValue.bind(box);
+        let escaping = false;
+        const start = (event) => (escaping = event.key === 'Escape');
+        const stop = () => (escaping = false);
+        box.resetValue = () => (escaping ? undefined : reset());
+        host.addEventListener('keydown', start, true);
+        host.addEventListener('keydown', stop);
+        return () => {
+            Reflect.deleteProperty(box, 'resetValue');
+            host.removeEventListener('keydown', start, true);
+            host.removeEventListener('keydown', stop);
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", 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 }, keepValueOnEscape: { classPropertyName: "keepValueOnEscape", publicName: "keepValueOnEscape", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_multipleBox", first: true, predicate: BrnComboboxMultiple, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_singleBox", first: true, predicate: BrnCombobox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
                         class: 'contents',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
-        }], propDecorators: { _multipleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], _singleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { _multipleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], _singleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], keepValueOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepValueOnEscape", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Page size selector and range message of a `YuwPagedList`; in a datatable it takes the pagination slot. */
 class YuwPageSizeComponent {
@@ -1023,7 +1054,7 @@ class YuwPageSizeComponent {
         this.message = computed(() => this.labels().range(this.list().range()), ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwPageSizeComponent, isStandalone: true, selector: "yuw-page-size", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2" }, ngImport: i0, template: "<yuw-combobox\n  readonlyTrigger\n  class=\"w-32\"\n  [disabled]=\"disabled()\"\n  [options]=\"list().pageSizeOptions\"\n  [triggerAriaLabel]=\"labels().label\"\n  [value]=\"list().pageSize()\"\n  [emptyText]=\"labels().empty\"\n  (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwPageSizeComponent, isStandalone: true, selector: "yuw-page-size", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2" }, ngImport: i0, template: "<yuw-combobox\n  readonlyTrigger\n  class=\"w-32\"\n  [disabled]=\"disabled()\"\n  [options]=\"list().pageSizeOptions\"\n  [triggerAriaLabel]=\"labels().label\"\n  [value]=\"list().pageSize()\"\n  [emptyText]=\"labels().empty\"\n  (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageSizeComponent, decorators: [{
             type: Component,
@@ -1961,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.
@@ -1980,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
@@ -2019,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
@@ -2038,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;
@@ -2051,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.
@@ -2106,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.
@@ -2118,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.
@@ -2135,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;
@@ -2148,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. */
@@ -2167,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
@@ -2190,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() {
@@ -2205,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.
@@ -3122,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.
@@ -3152,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 */ []));
@@ -3171,6 +3222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n" }]
         }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
 
+/**
+ * What counts as inside the columns popover: its trigger, its panel and the combobox list, which
+ * renders in its own overlay outside the panel.
+ */
+const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-combobox-content';
 /**
  * Action row of `yuw-list-toolbar`: search, export and column visibility, each rendered only when
  * its input is set. Below `md` the search collapses into a popover; both widths bind the same
@@ -3179,10 +3235,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * `hiddenColumns` is two-way: the consumer can seed it (a restored preference) and the combobox
  * reflects it. While it is not empty the columns button carries a red dot. Opening the columns
- * popover also opens the combobox list, so the choice is one click away.
+ * popover also opens the combobox list, so the choice is one click away. That list lives in its own
+ * overlay, which swallows the first outside press, so a press outside both closes the popover
+ * directly and one click is enough. Tabbing focus out of the popover closes it the same way.
  */
 class YuwListToolbarActionsComponent {
     constructor() {
+        this._document = inject(DOCUMENT);
         this._injector = inject(Injector);
         this._columnsCombobox = viewChild(YuwComboboxComponent, ...(ngDevMode ? [{ debugName: "_columnsCombobox" }] : /* istanbul ignore next */ []));
         this.hiddenColumns = model([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
@@ -3202,12 +3261,28 @@ class YuwListToolbarActionsComponent {
                 afterNextRender(() => this._columnsCombobox()?.open(), { injector: this._injector });
             }
         });
+        effect((onCleanup) => {
+            if (!this.settingsOpen()) {
+                return;
+            }
+            const closeWhenOutside = (event) => {
+                if (event.target instanceof Element && !event.target.closest(INSIDE_COLUMNS_SELECTOR)) {
+                    this.settingsOpen.set(false);
+                }
+            };
+            this._document.addEventListener('pointerdown', closeWhenOutside, true);
+            this._document.addEventListener('focusin', closeWhenOutside, true);
+            onCleanup(() => {
+                this._document.removeEventListener('pointerdown', closeWhenOutside, true);
+                this._document.removeEventListener('focusin', closeWhenOutside, true);
+            });
+        });
     }
     onHiddenColumnsChange(value) {
         this.hiddenColumns.set(Array.isArray(value) ? value : value ? [value] : []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideSearch, lucideSettings2 })], viewQueries: [{ propertyName: "_columnsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      align=\"center\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"-16\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n", dependencies: [{ 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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { 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: YuwSearchInputComponent, selector: "yuw-search-input", inputs: ["clearAriaLabel", "collapseFrom", "expandAriaLabel", "expandedWidth", "size", "transparent"], outputs: ["searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideSearch, lucideSettings2 })], viewQueries: [{ propertyName: "_columnsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      align=\"center\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"-16\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"yuw-columns-trigger relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        keepValueOnEscape\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n", dependencies: [{ 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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { 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: YuwSearchInputComponent, selector: "yuw-search-input", inputs: ["clearAriaLabel", "collapseFrom", "expandAriaLabel", "expandedWidth", "size", "transparent"], outputs: ["searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, decorators: [{
             type: Component,
@@ -3218,7 +3293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwComboboxComponent,
                         YuwPopoverComponent,
                         YuwSearchInputComponent,
-                    ], providers: [provideIcons({ lucideDownload, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      align=\"center\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"-16\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n" }]
+                    ], providers: [provideIcons({ lucideDownload, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      align=\"center\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"-16\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"yuw-columns-trigger relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        keepValueOnEscape\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { _columnsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
 
 /**
@@ -3601,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(() => {
@@ -3635,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,
@@ -3652,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"] }] } });
 
 /**
@@ -3669,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 */ []));
@@ -4035,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"] }] } });
 
 /**
@@ -4064,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,
@@ -4647,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 */ []));