yukit-web 0.2.7 → 0.2.9

package/fesm2022/yukit-web.mjs

@@ -128,6 +128,9 @@ function cn(...inputs) {
  * ```html
  * <button hlmBtn [size]="size()" [yuwClass]="_btnClass()">Save</button>
  * ```
+ *
+ * Inputs:
+ * - `yuwClass`: String of CSS classes registered as a replaceable `classes()` source on the host. Default is `''`.
  */
 class YuwClassDirective {
     constructor() {
@@ -179,6 +182,10 @@ function provideValueAccessor(component) {
  *
  * They're kept as two separate signals and OR'd together in `_disabled`: disabled by *either*
  * source means disabled. That's the only combination that never drops a caller's intent.
+ *
+ * Inputs:
+ * - `disabled`: Disables the form control and blocks user interaction. Combined with the disabled
+ *   state coming from the forms API, so either one disables it. Default is `false`.
  */
 class YuwValueAccessorBase {
     constructor() {
@@ -241,6 +248,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * forward to its native input — lives one level down, per the Liskov rule in `AGENTS.md`.
  *
  * Subclasses provide `_autoId`, the fallback `id` used when the consumer sets no `inputId`.
+ *
+ * Inputs:
+ * - `class`: Extra CSS classes merged last onto the field's visual element, so they win over the
+ *   defaults. Bound through the `class` alias of an internal input. Default is `''`.
+ * - `errorText`: Error message shown under the field. Default is `undefined`.
+ * - `helperText`: Helper message shown under the field. Default is `undefined`.
+ * - `inputId`: ID set on the native input element, for `<label [for]>` matching. Falls back to a
+ *   generated ID when unset. Default is `undefined`.
+ * - `invalid`: Marks the field as invalid. Default is `false`.
+ * - `value`: Two-way bound (`[(value)]`) string value of the field. Default is `''`.
+ *
+ * Outputs:
+ * - `valueChange`: Emits the new string whenever `value` changes, enabling two-way binding.
  */
 class YuwFieldBase extends YuwValueAccessorBase {
     constructor() {
@@ -272,6 +292,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * the controls can't drift apart — the Liskov rule in `AGENTS.md`: same-role components share one
  * input contract. Anything only some of them honor (`maxlength`, `size`, `enterPressed`, …) stays
  * on the component, never here.
+ *
+ * Inputs:
+ * - `autocomplete`: Native `autocomplete` attribute forwarded to the control. Default is `undefined`.
+ * - `name`: Native `name` attribute forwarded to the control. Default is `undefined`.
+ * - `placeholder`: Native placeholder text. Default is `undefined`.
+ * - `readonly`: Makes the control read-only. Default is `false`.
+ * - `required`: Marks the control as required. Default is `false`.
  */
 class YuwTextFieldBase extends YuwFieldBase {
     constructor() {
@@ -430,6 +457,8 @@ const yuwButtonVariants = cva('', {
  * - `class`: Extra CSS classes merged onto the inner button/anchor; merged last, so they win over the component's own classes.
  * - `yuwDropdownMenuTrigger`: Optional dropdown menu template reference to trigger.
  * - `ariaLabel`: Accessible label for screen readers.
+ * - `animationDisabled`: Removes the pressed-state translate animation. Default is `false`. It is also
+ *   forced on when the host carries `aria-haspopup` (e.g. when used as an overlay trigger).
  *
  * Outputs:
  * - `clicked`: Emits MouseEvent on click.
@@ -559,6 +588,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   </ng-template>
  * </yuw-button-group>
  * ```
+ *
+ * Inputs:
+ * - `yuwButtonGroupContent`: Required string; id of the button group entry this template renders the content of.
  */
 class YuwButtonGroupContentDirective {
     constructor() {
@@ -698,6 +730,16 @@ const REMOVE_TEXT_CLASS = {
  * (`variant`), dismissible action (`removeLabel` / `removed`), and a compact dot mode (`dot`)
  * that renders no content at all.
  *
+ * Inputs:
+ * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'primary'`.
+ * - `dot`: Renders a compact dot with no content, icon or remove button. Default is `false`.
+ * - `removeLabel`: Accessible label for the remove button; the button only renders when this is set. The app supplies
+ *   and translates it. Default is `undefined`.
+ * - `variant`: Helm badge style (`'default'`, `'secondary'`, `'destructive'`, `'outline'`, `'ghost'`, `'link'`). Default is `'default'`.
+ *
+ * Outputs:
+ * - `removed`: Emits when the remove button is clicked.
+ *
  * Usage:
  * ```html
  * <yuw-badge color="primary">New</yuw-badge>
@@ -738,6 +780,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * (`aria-current="page"`); intermediate items render as links when they have an `href` and as
  * plain text otherwise.
  *
+ * Inputs:
+ * - `ariaLabel`: Required accessible label for the navigation landmark. The app supplies and translates it.
+ * - `items`: Required array of `YuwBreadcrumbItemDto` (`label`, optional `href`) in hierarchy order.
+ * - `separator`: Text rendered between items. Default is `'/'`.
+ *
  * Usage:
  * ```html
  * <yuw-breadcrumb
@@ -823,6 +870,19 @@ function getPaginationRange(page, totalPages) {
  * Controls two-way active page state `[(page)]`, accepts total pages (`totalPages`), accessible
  * previous/next/ellipsis labels, size and color theme.
  *
+ * Inputs:
+ * - `ariaLabel`: Required accessible label of the navigation landmark.
+ * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'primary'`.
+ * - `ellipsisSrText`: Required screen reader text of the ellipsis between page ranges.
+ * - `nextLabel`: Required accessible label of the next page button.
+ * - `page`: Required two-way (`[(page)]`) active page, 1-based.
+ * - `previousLabel`: Required accessible label of the previous page button.
+ * - `size`: Button size (`YuwPaginationSizeDto`). Default is `'icon'`.
+ * - `totalPages`: Required total number of pages.
+ *
+ * Outputs:
+ * - `page`: Emits the new active page when the user picks one (the output half of `[(page)]`).
+ *
  * Usage:
  * ```html
  * <yuw-pagination
@@ -919,6 +979,9 @@ const yuwFieldMinHeightVariants = cva('', {
  *   </ng-template>
  * </yuw-combobox>
  * ```
+ *
+ * Inputs:
+ * - `yuwComboboxItemTypeOf`: Optional array of `YuwComboboxOptionDto`; only used to infer the generic data type of the template context for type checking. Default is `undefined`.
  */
 class YuwComboboxItemDirective {
     constructor() {
@@ -1097,7 +1160,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, 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 class=\"min-w-0 truncate\" [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" }]
         }], 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. */
+/**
+ * Page size selector and range message of a `YuwPagedList`; in a datatable it takes the pagination slot.
+ *
+ * Inputs:
+ * - `disabled`: Disables the page size selector. Default is `false`.
+ * - `labels`: Required `YuwPageSizeLabels` with the selector label, the text for an empty list and the function that builds the range message.
+ * - `list`: Required `YuwPagedList` whose page size is chosen and whose range is shown in the message.
+ */
 class YuwPageSizeComponent {
     constructor() {
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1113,7 +1183,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{ selector: 'yuw-page-size', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwComboboxComponent], host: { class: 'flex items-center gap-2' }, 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" }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }] } });
 
-/** Pagination footer for lists without a datatable. A disabled `fieldset` blocks its buttons. */
+/**
+ * Pagination footer for lists without a datatable: the page size selector with its range message
+ * and the page navigation, both driven by one `YuwPagedList`. A disabled `fieldset` blocks its buttons.
+ *
+ * Inputs:
+ * - `disabled`: Disables the page size selector and the page buttons. Default is `false`.
+ * - `labels`: Required `YuwListPaginationLabels` with the consumer's text for the page size selector, the navigation aria label and the previous, next and ellipsis texts.
+ * - `list`: Required `YuwPagedList` holding the current page, page size, total pages and range; changes made in the footer are written back to it.
+ */
 class YuwListPaginationComponent {
     constructor() {
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1141,14 +1219,32 @@ function injectIsMobile() {
  * Page title, optional description and up to two actions, each rendered when its label is set.
  * On mobile the primary action shows only its icon, or `primaryMobileLabel`. Icons are `@ng-icons`
  * names; the consumer registers any beyond `lucidePlus` with `provideIcons`.
+ *
+ * Inputs:
+ * - `backLabel`: Text of the back button, which renders only when set; on small screens only its arrow shows.
+ * - `description`: Optional subtitle under the title.
+ * - `primaryDisabled`: Disables the primary action, which stays visible but ignores clicks, e.g. while the list it creates items for is loading.
+ * - `primaryIcon`: Icon name shown in the primary action.
+ * - `primaryLabel`: Text of the primary action, which renders only when set.
+ * - `primaryMobileLabel`: Text the primary action shows on small screens instead of its label.
+ * - `secondaryIcon`: Icon name shown in the secondary action.
+ * - `secondaryLabel`: Text of the secondary action, which renders only when set; hidden on small screens, leaving its icon.
+ * - `title`: Required page title.
+ *
+ * Outputs:
+ * - `backClicked`: Emits the `MouseEvent` of the back button.
+ * - `primaryClicked`: Emits the `MouseEvent` of the primary action.
+ * - `secondaryClicked`: Emits the `MouseEvent` of the secondary action.
  */
 class YuwPageHeaderComponent {
     constructor() {
         this.backLabel = input(...(ngDevMode ? [undefined, { debugName: "backLabel" }] : /* istanbul ignore next */ []));
         this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        this.primaryDisabled = input(false, { ...(ngDevMode ? { debugName: "primaryDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.primaryIcon = input(...(ngDevMode ? [undefined, { debugName: "primaryIcon" }] : /* istanbul ignore next */ []));
         this.primaryLabel = input(...(ngDevMode ? [undefined, { debugName: "primaryLabel" }] : /* istanbul ignore next */ []));
         this.primaryMobileLabel = input(...(ngDevMode ? [undefined, { debugName: "primaryMobileLabel" }] : /* istanbul ignore next */ []));
+        this.secondaryDisabled = input(false, { ...(ngDevMode ? { debugName: "secondaryDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.secondaryIcon = input(...(ngDevMode ? [undefined, { debugName: "secondaryIcon" }] : /* istanbul ignore next */ []));
         this.secondaryLabel = input(...(ngDevMode ? [undefined, { debugName: "secondaryLabel" }] : /* istanbul ignore next */ []));
         this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -1158,12 +1254,12 @@ class YuwPageHeaderComponent {
         this.isMobile = injectIsMobile();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPageHeaderComponent, isStandalone: true, selector: "yuw-page-header", inputs: { backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryMobileLabel: { classPropertyName: "primaryMobileLabel", publicName: "primaryMobileLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryIcon: { classPropertyName: "secondaryIcon", publicName: "secondaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { backClicked: "backClicked", primaryClicked: "primaryClicked", secondaryClicked: "secondaryClicked" }, providers: [provideIcons({ lucidePlus, lucideArrowLeft })], ngImport: i0, template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n    <div class=\"flex items-center gap-4\">\n      @if (backLabel(); as label) {\n        <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n          <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n      <div class=\"flex flex-col overflow-hidden\">\n        <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n        @if (description()) {\n          <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (primaryLabel() || secondaryLabel()) {\n    <div class=\"flex shrink-0 items-center gap-2\">\n      @if (secondaryLabel(); as label) {\n        <yuw-button\n          variant=\"outline\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"secondaryClicked.emit($event)\"\n        >\n          @if (secondaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-md:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n\n      @if (primaryLabel(); as label) {\n        <yuw-button\n          color=\"primary\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"primaryClicked.emit($event)\"\n        >\n          @if (primaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n          @if (primaryMobileLabel(); as mobileLabel) {\n            <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n          }\n        </yuw-button>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPageHeaderComponent, isStandalone: true, selector: "yuw-page-header", inputs: { backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, primaryDisabled: { classPropertyName: "primaryDisabled", publicName: "primaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryMobileLabel: { classPropertyName: "primaryMobileLabel", publicName: "primaryMobileLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryDisabled: { classPropertyName: "secondaryDisabled", publicName: "secondaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, secondaryIcon: { classPropertyName: "secondaryIcon", publicName: "secondaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { backClicked: "backClicked", primaryClicked: "primaryClicked", secondaryClicked: "secondaryClicked" }, providers: [provideIcons({ lucidePlus, lucideArrowLeft })], ngImport: i0, template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n    <div class=\"flex items-center gap-4\">\n      @if (backLabel(); as label) {\n        <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n          <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n      <div class=\"flex flex-col overflow-hidden\">\n        <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n        @if (description()) {\n          <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (primaryLabel() || secondaryLabel()) {\n    <div class=\"flex shrink-0 items-center gap-2\">\n      @if (secondaryLabel(); as label) {\n        <yuw-button\n          variant=\"outline\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          [disabled]=\"secondaryDisabled()\"\n          (clicked)=\"secondaryClicked.emit($event)\"\n        >\n          @if (secondaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-md:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n\n      @if (primaryLabel(); as label) {\n        <yuw-button\n          color=\"primary\"\n          class=\"gap-2\"\n          [disabled]=\"primaryDisabled()\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"primaryClicked.emit($event)\"\n        >\n          @if (primaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n          @if (primaryMobileLabel(); as mobileLabel) {\n            <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n          }\n        </yuw-button>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent], providers: [provideIcons({ lucidePlus, lucideArrowLeft })], template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n    <div class=\"flex items-center gap-4\">\n      @if (backLabel(); as label) {\n        <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n          <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n      <div class=\"flex flex-col overflow-hidden\">\n        <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n        @if (description()) {\n          <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (primaryLabel() || secondaryLabel()) {\n    <div class=\"flex shrink-0 items-center gap-2\">\n      @if (secondaryLabel(); as label) {\n        <yuw-button\n          variant=\"outline\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"secondaryClicked.emit($event)\"\n        >\n          @if (secondaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-md:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n\n      @if (primaryLabel(); as label) {\n        <yuw-button\n          color=\"primary\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"primaryClicked.emit($event)\"\n        >\n          @if (primaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n          @if (primaryMobileLabel(); as mobileLabel) {\n            <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n          }\n        </yuw-button>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], primaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryIcon", required: false }] }], primaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLabel", required: false }] }], primaryMobileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryMobileLabel", required: false }] }], secondaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryIcon", required: false }] }], secondaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }], primaryClicked: [{ type: i0.Output, args: ["primaryClicked"] }], secondaryClicked: [{ type: i0.Output, args: ["secondaryClicked"] }] } });
+            args: [{ selector: 'yuw-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent], providers: [provideIcons({ lucidePlus, lucideArrowLeft })], template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n    <div class=\"flex items-center gap-4\">\n      @if (backLabel(); as label) {\n        <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n          <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n      <div class=\"flex flex-col overflow-hidden\">\n        <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n        @if (description()) {\n          <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (primaryLabel() || secondaryLabel()) {\n    <div class=\"flex shrink-0 items-center gap-2\">\n      @if (secondaryLabel(); as label) {\n        <yuw-button\n          variant=\"outline\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          [disabled]=\"secondaryDisabled()\"\n          (clicked)=\"secondaryClicked.emit($event)\"\n        >\n          @if (secondaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-md:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n\n      @if (primaryLabel(); as label) {\n        <yuw-button\n          color=\"primary\"\n          class=\"gap-2\"\n          [disabled]=\"primaryDisabled()\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"primaryClicked.emit($event)\"\n        >\n          @if (primaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n          @if (primaryMobileLabel(); as mobileLabel) {\n            <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n          }\n        </yuw-button>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], primaryDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryDisabled", required: false }] }], primaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryIcon", required: false }] }], primaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLabel", required: false }] }], primaryMobileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryMobileLabel", required: false }] }], secondaryDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryDisabled", required: false }] }], secondaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryIcon", required: false }] }], secondaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }], primaryClicked: [{ type: i0.Output, args: ["primaryClicked"] }], secondaryClicked: [{ type: i0.Output, args: ["secondaryClicked"] }] } });
 
 /**
  * Container directive for collapsible accordion items.
@@ -1373,6 +1469,7 @@ let nextYuwInputId = 0;
  *
  * Outputs:
  * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ * - `enterPressed`: Emits (`void`) when the Enter key is pressed while the field is focused.
  *
  * Usage:
  * ```html
@@ -1852,6 +1949,7 @@ let nextYuwPasswordInputId = 0;
  *
  * Outputs:
  * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ * - `enterPressed`: Emits (`void`) when the Enter key is pressed while the field is focused.
  *
  * Usage:
  * ```html
@@ -1972,6 +2070,7 @@ let nextYuwInputOtpId = 0;
  *
  * Outputs:
  * - `completed`: Emits the full code string once the final slot is filled (by typing or paste).
+ * - `enterPressed`: Emits (`void`) when the Enter key is pressed while the field is focused.
  *
  * Usage:
  * ```html
@@ -2043,6 +2142,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /**
  * Class map for `yuw-checkbox`, layered on top of `HlmCheckbox`'s own classes.
  *
+ * `cursor-pointer` is unconditional too: `HlmCheckbox` ships `cursor-default`, a utility that beats
+ * the global base-layer pointer rule; its `disabled:cursor-not-allowed` still wins when disabled.
+ *
  * 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 `primary` is an opt-in
  * boolean variant layered on top (the secondary color is the default).
@@ -2053,6 +2155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * to the DOM and leaving it to specificity.
  */
 const checkboxVariants = cva([
+    'cursor-pointer',
     'data-[state=indeterminate]:bg-primary',
     'dark:data-[state=indeterminate]:bg-primary',
     'data-[state=indeterminate]:text-primary-foreground',
@@ -2091,7 +2194,7 @@ const checkboxVariants = cva([
  * projected content, pair it with an external `<label [for]>` via `inputId` or set `ariaLabel`.
  *
  * Inputs / Models:
- * - `value` / `checked`: Two-way boolean state of the checkbox. Default is `false`.
+ * - `checked`: Two-way (`[(checked)]`) boolean checked state, alias of the internal `value` model. Default is `false`.
  * - `indeterminate`: Two-way boolean state for mixed/indeterminate checkbox appearance. Default is `false`.
  * - `disabled`: Disables checkbox interaction.
  * - `required`: Marks checkbox as required.
@@ -2216,6 +2319,8 @@ const yuwSwitchSecondaryClass = [
  * - `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.
+ * - `ariaLabelledby`: Id of the element that labels the switch, set as `aria-labelledby` on the control.
+ * - `ariaDescribedby`: Id of the element that describes the switch, set as `aria-describedby` on the control.
  *
  * Usage:
  * ```html
@@ -2348,6 +2453,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * `skeletonCount` placeholders shaped by `skeletonClass`; `empty` shows `emptyText`; `columnsClass`
  * holds the Tailwind column utilities.
  *
+ * Inputs:
+ * - `columnsClass`: Tailwind grid column utilities applied to the grid and its skeleton. Default is `'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'`.
+ * - `empty`: Shows `emptyText` instead of the projected cards. Default is `false`.
+ * - `emptyText`: Required message shown when `empty` is set. The app supplies and translates it.
+ * - `loading`: Shows `skeletonCount` placeholders instead of the content; takes precedence over `empty`. Default is `false`.
+ * - `skeletonClass`: Extra classes sizing each placeholder, e.g. its height. Default is `'h-16'`.
+ * - `skeletonCount`: Number of placeholders shown while loading. Default is `12`.
+ *
  * `YuwCardGridComponent.COLUMNS` holds the column classes admin lists share per view mode — `list`
  * is one column, `block` grows from one to five, and `tags` packs small tag cards up to six — so every listing lays out its cards the same
  * way: `[columnsClass]="YuwCardGridComponent.COLUMNS[mode]"`.
@@ -2375,7 +2488,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{ selector: 'yuw-card-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwSkeletonDirective], template: "@if (loading()) {\n  <div class=\"grid gap-4\" [class]=\"columnsClass()\">\n    @for (skeleton of skeletons(); track skeleton) {\n      <span yuwSkeleton class=\"block w-full rounded-xl\" [class]=\"skeletonClass()\"></span>\n    }\n  </div>\n} @else if (empty()) {\n  <p class=\"text-sm text-muted-foreground\">{{ emptyText() }}</p>\n} @else {\n  <div class=\"grid gap-4\" [class]=\"columnsClass()\">\n    <ng-content />\n  </div>\n}\n" }]
         }], propDecorators: { columnsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsClass", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonClass", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }] } });
 
-/** While `pending` the card stays hidden in place under a skeleton, so the grid does not jump. */
+/**
+ * While `pending` the card stays hidden in place under a skeleton, so the grid does not jump.
+ *
+ * Inputs:
+ * - `pending`: Hides the projected card and overlays a skeleton while it is loading. Default is `false`.
+ */
 class YuwCardGridItemComponent {
     constructor() {
         this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -2700,6 +2818,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   </div>
  * </ng-template>
  * ```
+ *
+ * Inputs:
+ * - `yuwContextMenuTrigger`: Required `TemplateRef` of the menu to open on right-click.
+ * - `yuwContextMenuTriggerData`: Optional data made available to the menu template as its context. Default is `undefined`.
  */
 class YuwContextMenuTriggerDirective {
     constructor() {
@@ -2770,6 +2892,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   <yuw-context-menu-checkbox-indicator />
  * </button>
  * ```
+ *
+ * Inputs:
+ * - `checked`: Whether the item is currently checked, which shows the projected indicator. Default is `false`.
+ * - `disabled`: Disables the item so it cannot be triggered. Default is `false`.
  */
 class YuwContextMenuCheckboxDirective {
     constructor() {
@@ -2809,6 +2935,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   </button>
  * </div>
  * ```
+ *
+ * Inputs:
+ * - `checked`: Whether the item is the selected option, which shows the projected indicator. Default is `false`.
+ * - `disabled`: Disables the item so it cannot be selected. Default is `false`.
  */
 class YuwContextMenuRadioDirective {
     constructor() {
@@ -2901,6 +3031,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   <yuw-context-menu-sub-indicator />
  * </button>
  * ```
+ *
+ * Inputs:
+ * - `yuwContextMenuSubTrigger`: Required `TemplateRef` of the sub-menu this item expands.
  */
 class YuwContextMenuSubTriggerDirective {
     constructor() {
@@ -2957,6 +3090,7 @@ let nextUniqueId = 0;
  * - `align`: Popover alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'start'`.
  * - `buttonId`: HTML `id` for the trigger button, enabling external `<label for="...">`
  *   association. When omitted, a unique per-instance id is generated.
+ * - `size`: Trigger button height (`YuwFieldSizeDto`), matching the `<yuw-button>` size of the same name. Default is `'default'`.
  * - `class`: Extra classes merged onto the trigger button (e.g. a width), consumer classes win.
  * - `invalid`: Forces invalid styling.
  * - `formatDate`: Custom date formatter function `(date: Date) => string` for the trigger label.
@@ -3227,7 +3361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
  * - `align`: Panel alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'center'`.
  * - `sideOffset`: Pixel offset between the trigger and the panel. Default is `4`.
- * - `sideOffset`: Pixel offset for X sides. Positive px for right, negative for left side.
+ * - `offsetX`: Pixel offset for X sides. Positive px for right, negative for left side.
  * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
  * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
  * - `panelClass`: Extra classes merged onto the popover panel (e.g. `w-80` to widen it). They win
@@ -3308,6 +3442,20 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
  * A set `viewMode` adds the list/block switch. The selected entry drops its border so both entries
  * keep the same height, and the entry after it takes back the leading border the group strips, so the
  * seam stays drawn. Consumers get that for free and bind only `viewMode`.
+ *
+ * Inputs:
+ * - `hiddenColumns`: Two-way (`[(hiddenColumns)]`) ids of the columns currently hidden. Default is `[]`.
+ * - `hideableColumns`: Options of the columns the user may hide; the columns button renders only when set.
+ * - `isMobile`: Required flag; below `md` the search collapses into a popover.
+ * - `labels`: Required `YuwListToolbarLabels` with the consumer's text for the controls.
+ * - `search`: Two-way (`[(search)]`) text of the search field, shared by the inline and popover fields. Default is `''`.
+ * - `searchPlaceholder`: Placeholder of the search field; the search renders only when set.
+ * - `showExport`: Renders the export button. Default is `false`.
+ * - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
+ *
+ * Outputs:
+ * - `exported`: Emits the `MouseEvent` of the export button click.
+ * - `searched`: Emits the current search text on every keystroke and when it is cleared.
  */
 class YuwListToolbarActionsComponent {
     constructor() {
@@ -3524,6 +3672,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
 const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
 
+/**
+ * Declares the content of a single tab entry. Apply it to an `<ng-template>` and pass the id of the
+ * entry it belongs to; the template is exposed through `templateRef` for the host to render.
+ *
+ * Inputs:
+ * - `yuwTabContent`: Required string; id of the tab entry this template is the content of.
+ */
 class YuwTabContentDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
@@ -3547,6 +3702,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * ```html
  * <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
  * ```
+ *
+ * Inputs:
+ * - `yuwTabPanel`: Required string; id of the tab, matching an entry in the `tabs` input, that this panel renders for.
  */
 class YuwTabPanelDirective {
     constructor() {
@@ -3607,6 +3765,7 @@ const yuwTabsSizeVariants = cva('', {
  * - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
  * - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
  *   `'manual'` requires Enter/Space). Default is `'automatic'`.
+ * - `class`: Extra classes merged onto the tab list, last, so they win over the component's own classes.
  *
  * Usage:
  * ```html
@@ -3746,6 +3905,17 @@ function filterSetFormTitle(mode, labels) {
  * name field is seeded from `name` and takes focus once rendered. `titleHidden` drops the heading
  * when the host already shows it. `confirmed` emits the trimmed
  * name; a delete confirmation emits the name it was opened with, so the host decides from `mode`.
+ *
+ * Inputs:
+ * - `labels`: Required `YuwFilterSetLabels` with the consumer's text for the titles, the field, the delete message and the buttons.
+ * - `mode`: Required `'save'`, `'rename'` or `'delete'`; picks the heading and whether the name field or the delete message shows.
+ * - `name`: Name the field is seeded with, and the name of the set being deleted. Default is `''`.
+ * - `titleHidden`: Drops the heading when the host already shows it. Default is `false`.
+ *
+ * Outputs:
+ * - `cancelled`: Emits when the user backs out of the form without confirming.
+ * - `confirmed`: Emits the trimmed name, or the opening name when deleting.
+ * - `deleteRequested`: Emits when the delete shortcut of the rename mode is pressed.
  */
 class YuwListToolbarFilterSetFormComponent {
     constructor() {
@@ -3791,6 +3961,22 @@ const STRETCHED_CELL = 'min-w-0 flex-1 [&>yuw-button]:flex [&>yuw-button]:w-full
  * option emits `picked` and the host applies it. `titleHidden` drops the heading when the host
  * already shows it. `stretchActions` makes edit and delete share the row 50/50 with no gap; without
  * it they keep their natural width. Button texts are consumer data, so they are cropped, not wrapped.
+ *
+ * Inputs:
+ * - `canEdit`: Offers the edit and delete actions for the set matching the applied selection. Default is `false`.
+ * - `canSave`: Offers the action that saves the applied selection as a new set. Default is `false`.
+ * - `labels`: Required `YuwFilterSetLabels` with the consumer's text for the select and the actions.
+ * - `selectedId`: Id of the set shown as selected; `NO_FILTER_SET` means none. Default is `NO_FILTER_SET`.
+ * - `sets`: Required saved sets listed in the select.
+ * - `stretchActions`: Makes the edit and delete buttons share the row 50/50 with no gap. Default is `false`.
+ * - `titleHidden`: Drops the heading when the host already shows it. Default is `false`.
+ *
+ * Outputs:
+ * - `deleteRequested`: Emits when the delete action is pressed.
+ * - `editRequested`: Emits when the edit action is pressed.
+ * - `itemEditRequested`: Emits the id of the set whose three-dots button was pressed.
+ * - `picked`: Emits the id of the chosen option, or `NO_FILTER_SET` for none.
+ * - `saveRequested`: Emits when the save action is pressed.
  */
 class YuwListToolbarFilterSetsComponent {
     constructor() {
@@ -3856,6 +4042,15 @@ const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
  * opened from a button, not when it closes, so it does not flash back while closing. A change of
  * layout closes the panel, since a popover opened from a sheet has no anchor to position against.
  * Persisting is the consumer's job: this component only emits `setSaved`, `setRenamed`, `setDeleted`.
+ *
+ * Inputs:
+ * - `disabled`: Disables every button of the group. Default is `false`.
+ * - `groups`: Required filter groups the editor offers, one pane or tab each.
+ * - `idleColor`: Required tone of the buttons while no filter is applied.
+ * - `isMobile`: Required flag; true opens the panel as a bottom sheet, false as a popover.
+ * - `labels`: Required `YuwListToolbarFilterLabels` with the consumer's text for the panel and its buttons.
+ * - `selection`: Two-way (`[(selection)]`) applied filter selection. Default is `{}`.
+ * - `sets`: Saved filter sets; the sets star renders only when given together with `labels.sets`.
  */
 class YuwListToolbarFiltersComponent {
     constructor() {
@@ -4041,6 +4236,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * two-way to it (`viewModeChange` is the click listener); its names come from `labels.viewMode`. Saved filter sets need `filterSets` and `labels.filters.sets`;
  * the toolbar emits `setSaved`, `setRenamed` and `setDeleted` and the consumer persists them. `labels` holds every text and the consumer translates it;
  * `idleColor` is the filter trigger tone while nothing is applied.
+ *
+ * Inputs:
+ * - `filterGroups`: Filter groups the editor offers; the filter control renders only when set.
+ * - `filterSets`: Saved filter sets; together with `labels.filters.sets` it enables the sets star.
+ * - `filtersDisabled`: Disables the filter buttons. Default is `false`.
+ * - `hiddenColumns`: Two-way (`[(hiddenColumns)]`) ids of the columns currently hidden. Default is `[]`.
+ * - `hideableColumns`: Options of the columns the user may hide; the columns button renders only when set.
+ * - `idleColor`: `YuwColorDto` tone of the filter trigger while nothing is applied. Default is `'neutral'`.
+ * - `labels`: Required `YuwListToolbarLabels` with the consumer's translated text for every control.
+ * - `search`: Two-way (`[(search)]`) text of the search field. Default is `''`.
+ * - `searchPlaceholder`: Placeholder of the search field; the search renders only when set.
+ * - `selection`: Two-way (`[(selection)]`) applied filter selection, values keyed by group id. Default is `{}`.
+ * - `showExport`: Renders the export button. Default is `false`.
+ * - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
+ *
+ * Outputs:
+ * - `exported`: Emits the `MouseEvent` of the export button click.
+ * - `searched`: Emits the current search text on every keystroke and when it is cleared.
  */
 class YuwListToolbarComponent {
     constructor() {
@@ -4147,7 +4360,7 @@ const datatableHeaderCellVariants = cva('', {
     variants: {
         appearance: {
             default: '',
-            card: 'h-12 px-4 text-xs font-normal tracking-wider uppercase text-(--neutrals-element-mid)',
+            card: 'h-12 px-4 text-xs font-normal text-(--neutrals-element-mid)',
         },
     },
     defaultVariants: {
@@ -4224,7 +4437,7 @@ const DATATABLE_WRAP_CONTENT_CLASS = 'whitespace-normal max-w-0';
  *   `(row, index) => string | undefined` callback to vary them per row (`YuwDatatableRowClass`).
  * - `appearance`: Visual treatment (`YuwDatatableAppearanceDto`). Default is `'default'` —
  *   Spartan's plain table. `'card'` frames the table in its own rounded bordered surface with a
- *   tinted uppercase header strip and taller rows; the consumer needs no wrapper of its own.
+ *   tinted header strip and taller rows; the consumer needs no wrapper of its own.
  *
  * Per-column, through TanStack's `meta` (see `YuwDatatableColumnMeta`). Every class-valued entry
  * takes Tailwind classes, so a column can size itself per breakpoint (`'w-40 lg:w-64'`). They are
@@ -4306,7 +4519,6 @@ class YuwDatatableComponent {
         this.selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.sortable = input(false, { ...(ngDevMode ? { debugName: "sortable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.sorting = model([], ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
-        this.summary = input(false, { ...(ngDevMode ? { debugName: "summary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.tableClass = input(undefined, ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
         this.totalItems = input(undefined, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
         this.rowClicked = output();
@@ -4419,20 +4631,30 @@ 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=\"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 }); }
+    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 }, 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=\"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"] }] } });
+        }], 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"] }], 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"] }] } });
 
 /**
  * Selection checkbox for a datatable cell or header. The host stops the click so neither the
  * checkbox nor the cell around it triggers the row's own action, since `yuw-datatable` emits
  * `rowClicked` from the `<tr>`. `onToggle` is an input because `flexRenderComponent` does not
  * subscribe outputs.
+ *
+ * Renders a single `yuw-checkbox` meant to be used as the `select` display column of `yuw-datatable`
+ * (header for select-all, cell for a single row), wired to TanStack's toggle handlers.
+ *
+ * Inputs:
+ * - `checked`: Whether the checkbox is checked. Default is `false`.
+ * - `indeterminate`: Shows the mixed state, e.g. for a header when only some rows are selected. Default is `false`.
+ * - `label`: Accessible name (`aria-label`) of the checkbox. Default is `'Select row'`; consuming apps should
+ *   override it with translated text.
+ * - `onToggle`: Callback run when the checkbox changes. Default is a no-op.
  */
 class YuwDatatableRowSelect {
     constructor() {
@@ -4459,6 +4681,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Pencil button cell that runs `onEdit`, hidden until its row is hovered or keyboard-focused (`yuw-reveal`,
  * see `theme/components/reveal-on-hover.css`); touch devices keep it visible. An input because `flexRenderComponent` does not subscribe
  * outputs. The host stops the click so a clickable row does not fire twice.
+ *
+ * Inputs:
+ * - `label` (required): Accessible name (`aria-label`) of the pencil button. User-facing text the
+ *   consuming app is responsible for translating.
+ * - `onEdit`: Callback run when the button is clicked. Default is a no-op.
  */
 class YuwActionsCellComponent {
     constructor() {
@@ -4483,7 +4710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * `actions` column; `label` is the button's accessible name and `header` the optional visible
  * column title, both already translated. Without `header` the column stays headerless.
  */
-function buildYuwActionsColumn(label, onEdit, cellClass, header = '') {
+function buildYuwActionsColumn(label, onEdit, cellClass = 'w-12', header = '') {
     return {
         id: 'actions',
         header,
@@ -4953,6 +5180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   text the consuming app is responsible for translating.
  * - `panelClass`: Extra classes merged onto the dialog panel (e.g. `sm:max-w-lg` to widen it).
  *   They win over the library defaults via `twMerge`.
+ * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is `'neutral'`.
  * - `triggerVariant`: Button style variant for the trigger button. Default is `'outline'`.
  * - `triggerSize`: Button size for the trigger button.
  *
@@ -5806,6 +6034,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * branches and cannot attach a directive conditionally — an attribute selector matches on presence, so
  * the nav applies it to every entry and passes whether that entry actually has an avatar. Its default
  * is `true` so the bare, hand-written form needs no value.
+ *
+ * Inputs:
+ * - `yuwSidebarMenuAvatarButton`: Boolean; whether the avatar geometry class is applied. An empty attribute counts as `true`; `false` applies nothing. Default is `true`.
  */
 class YuwSidebarMenuAvatarButtonDirective {
     constructor() {
@@ -5897,6 +6128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * `label` is the accessible label of the rail button (it has no visible text). User-facing text —
  * the consuming app is responsible for providing it already translated.
+ *
+ * Inputs:
+ * - `label`: Required accessible label (`aria-label`) of the rail button.
  */
 class YuwSidebarRailDirective {
     constructor() {
@@ -6087,6 +6321,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * change-detection pass, and `RouterLinkActive` treats that as a changed input and re-runs its
  * subscription. Every entry resolves a tooltip, entries with children included: the submenu opens on
  * click, so hover is free to do what it does for every other rail icon and name the thing.
+ *
+ * Inputs:
+ * - `collapsible`: Collapse mode of the host sidebar (`'offcanvas'`, `'icon'`, `'none'`); the rail submenu form only
+ *   applies for `'icon'`. Default is `'offcanvas'`.
+ * - `content`: Required `YuwSidebarContentDto` (groups and their items) to render as the nav tree.
  */
 class YuwSidebarNavComponent {
     constructor() {
@@ -6218,6 +6457,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * split across the two refs, which is what broke every subsequent animation. Keeping one instance for
  * the sidebar's lifetime means a swap is only new content inside a live panel; the entry's own fields
  * are read through `_label`/`_children`, which tolerate the null the item holds before the first open.
+ *
+ * Outputs:
+ * - `itemClicked`: Emits `{ id, event }` (`YuwSidebarItemClickDto`) when a child entry of the open submenu is clicked; the submenu closes first.
  */
 class YuwSidebarSubmenuSheetComponent {
     constructor() {