@kouji-ui/components 0.6.3 → 0.7.0

package/fesm2022/kouji-ui-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Injectable, booleanAttribute, computed, TemplateRef, model, ViewChild, contentChildren, ElementRef, PLATFORM_ID, DestroyRef, afterNextRender, effect, signal, Injector, viewChild, untracked, output, EventEmitter, Output, makeEnvironmentProviders, provideEnvironmentInitializer, forwardRef, EnvironmentInjector, Directive, InjectionToken, ViewContainerRef, contentChild, numberAttribute } from '@angular/core';
 import * as i1 from '@kouji-ui/core';
-import { KjAccordion, KjAccordionTrigger, KjAccordionItem, KjAccordionContent, SHEET_DATA, KjSheetRef, KjSheet, KjIconDirective, KjSheetService, KjAlert, KjAlertIcon, KjAlertTitle, KjAlertDescription, KjAlertActions, KjAlertDismiss, KJ_AVATAR_GROUP, KjAvatarImage, KjAvatarFallback, KjAvatar, KjAvatarGroup, KjBadge, KjBreadcrumb, KjBreadcrumbList, KjBreadcrumbItem, KjLink, KjBreadcrumbCurrent, KjBreadcrumbSeparator, KjBreadcrumbEllipsis, KjButton, KjButtonGroup, KjCalendar, KjCalendarHeader, KjCalendarGrid, KjCalendarDay, KjCarousel, KjLiveRegion, KjVisuallyHidden, KjCarouselViewport, KjCarouselSlide, KjCarouselPrevious, KjCarouselNext, KJ_CAROUSEL, KjCarouselIndicator, KjCarouselIndicators, KjCarouselAutoplay, KjCarouselPauseToggle, KjChatLog, KjChat, KjChatAvatar, KjChatHeader, KjChatBubble, KjChatFooter, KjChatAnnouncer, parseSlash, matchSlashCommands, KjCheckbox, KjColorPicker, KjColorPickerTrigger, KjColorPickerPanel, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerAlphaSlider, KjColorPickerInput, KjComboboxInput, KjComboboxListbox, KjCombobox, KjComboboxOption, KjConfirmPopup, KjConfirmPopupTrigger, KjPopoverContent, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel, KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, defaultDateRangePresets, KjDateRangePresets, KjDateRangePresetOption, KjLocale, KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjDropdownMenuSeparator, KjDropdownMenuLabel, KjDropdownMenuGroup, KjSpinner, KjEditorLoader, KjEditor, KJ_SIZE_PRESET, KjSize, KjField, KjFieldLabel, KjFieldHelp, KjFieldError, KjFieldGroup, KjFileUpload, KjFileUploadTrigger, KjFileUploadDropzone, KjFileUploadList, KjFileUploadItem, KjProgressBar, KjProgressBarFill, KjForm, KjFormErrorSummary, KJ_ICON_REGISTRY, KjInput, KjInputGroup, KjInputGroupAddon, KjInputMask, KJ_INPUT_MASK_PRESETS, KjInputOtp, KjInputOtpCell, KjKbd, KJ_KBD_SIZE_PRESET, KjDivider, KJ_VARIANT_PRESET, KjList, KjListRow, KjMenubar, KjMenubarItem, KjNumberInput, KjNumberInputGroup, KjNumberStepper, KJ_OVERLAY_BADGE, KjOverlayBadgeContent, KjOverlayBadge, KjPagination, KjPaginationItem, KjPaginationPrevious, KjPaginationNext, KjPaginationFirst, KjPaginationLast, KjPaginationEllipsis, KjPaginationInfo, KJ_PASSWORD_INPUT, KjPasswordInput, KjPasswordInputScope, KjPasswordToggle, KjPasswordStrength, KjPasswordCapsLockWarning, KjPopoverTrigger, KjPopoverArrow, KjPopoverClose, KjPopoverTitle, KjRadioGroup, KjRadio, injectRteOverlayData, createKjImageNode, KJ_RTE_OVERLAY_DATA, KjRichTextEditor, KjRovingTabindex, KjRovingTabindexItemDirective, KjSelect, KjSelectTrigger, KjSelectContent, KjOption, KjSkeleton, KjSkipLink, KjSlider, KjSliderTrack, KjSliderRange, KjSliderThumb, KjSpeedDial, KjSpeedDialTrigger, KjSpeedDialActions, KjSpeedDialAction, KjStepper, KjStep, KjStepLabel, KjStepContent, KjStepperNext, KjStepperPrevious, KjStepperReset, KjToggle, KJ_TABLE, provideKjFilterParams, KjTable, KJ_TABLE_STORAGE, KjTableHeader, KjTableRow, KjTableCell, KjTableKeyboardNav, DRAWER_DATA, KjDrawer, KjDrawerService, KjTabs, KjTabList, KjTab, KjTabPanel, KjTag, KjTagRemove, KjTagList, KjTextarea, KjTimePicker, KjTimePickerHours, KjTimePickerMinutes, KjTimePickerSeconds, KjTimePickerMeridiem, KjToastViewport, KjToast, KjToastClose, KjTooltipTrigger, KjTooltipContent, KjTooltipArrow, KjTooltipGroup, KjCascadeSelect, KjCascadeSelectTrigger, KjCascadeSelectPanel, KjCascadeSelectOption, KjCascadeSelectSubPanel, KjCommandPalette, KjCommandInput, KjCommandList, KjCommandEmpty, injectListItem, KjListItem, KjCommandGroup, KjCommandSeparator, KjTreeSelectNode, KjTreeSelectToggle, KjTreeSelect, KjTreeSelectTrigger, KjTreeSelectContent } from '@kouji-ui/core';
+import { KjAccordion, KjAccordionTrigger, KjAccordionItem, KjAccordionContent, SHEET_DATA, KjSheetRef, KjSheet, KjIconDirective, KjSheetService, KjAlert, KjAlertIcon, KjAlertTitle, KjAlertDescription, KjAlertActions, KjAlertDismiss, KJ_AVATAR_GROUP, KjAvatarImage, KjAvatarFallback, KjAvatar, KjAvatarGroup, KjBadge, KjBreadcrumb, KjSize, KjBreadcrumbList, KjBreadcrumbItem, KJ_BREADCRUMB_CONFIG, KjLink, KjBreadcrumbCurrent, KjBreadcrumbSeparator, KjBreadcrumbEllipsis, KjButton, KjButtonGroup, KjCalendar, KjCalendarHeader, KjCalendarGrid, KjCalendarDay, KjCarousel, KjLiveRegion, KjVisuallyHidden, KjCarouselViewport, KjCarouselSlide, KjCarouselPrevious, KjCarouselNext, KJ_CAROUSEL, KjCarouselIndicator, KjCarouselIndicators, KjCarouselAutoplay, KjCarouselPauseToggle, KjChatLog, KjChat, KjChatAvatar, KjChatHeader, KjChatBubble, KjChatFooter, KjChatAnnouncer, parseSlash, matchSlashCommands, KjCheckbox, KjColorPicker, KjColorPickerTrigger, KjColorPickerPanel, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerAlphaSlider, KjColorPickerInput, KjComboboxInput, KjComboboxListbox, KjCombobox, KjComboboxOption, KjConfirmPopup, KjConfirmPopupTrigger, KjPopoverContent, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel, KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, defaultDateRangePresets, KjDateRangePresets, KjDateRangePresetOption, KjLocale, KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjDropdownMenuSeparator, KjDropdownMenuLabel, KjDropdownMenuGroup, KjSpinner, KjVariant, KjEditorLoader, KjEditor, KJ_SIZE_PRESET, KjField, KjFieldLabel, KjFieldHelp, KjFieldError, KjFieldGroup, KjFileUpload, KjFileUploadTrigger, KjFileUploadDropzone, KjFileUploadList, KjFileUploadItem, KjProgressBar, KjProgressBarFill, KjForm, KjFormErrorSummary, KJ_ICON_REGISTRY, KjInput, KjInputGroup, KjInputGroupAddon, KjInputMask, KJ_INPUT_MASK_PRESETS, KjInputOtp, KjInputOtpCell, KjKbd, KJ_KBD_SIZE_PRESET, KjDivider, KJ_VARIANT_PRESET, KjList, KjListRow, KjMenubar, KjMenubarItem, KjNumberInput, KjNumberInputGroup, KjNumberStepper, KJ_OVERLAY_BADGE, KjOverlayBadgeContent, KjOverlayBadge, KjPagination, KjPaginationItem, KjPaginationPrevious, KjPaginationNext, KjPaginationFirst, KjPaginationLast, KjPaginationEllipsis, KjPaginationInfo, KJ_PASSWORD_INPUT, KjPasswordInput, KjPasswordInputScope, KjPasswordToggle, KjPasswordStrength, KjPasswordCapsLockWarning, KjPopoverTrigger, KjPopoverArrow, KjPopoverClose, KjPopoverTitle, KjRadioGroup, KjRadio, injectRteOverlayData, createKjImageNode, KJ_RTE_OVERLAY_DATA, KjRichTextEditor, KjRovingTabindex, KjRovingTabindexItemDirective, KjSelect, KjSelectTrigger, KjSelectContent, KjOption, KjSkeleton, KjSkipLink, KjSlider, KjSliderTrack, KjSliderRange, KjSliderThumb, KjSpeedDial, KjSpeedDialTrigger, KjSpeedDialActions, KjSpeedDialAction, KjStepper, KjStep, KjStepLabel, KjStepContent, KjStepperNext, KjStepperPrevious, KjStepperReset, KjToggle, KJ_TABLE, provideKjFilterParams, KjTable, KJ_TABLE_STORAGE, KjTableHeader, KjTableRow, KjTableCell, KjTableKeyboardNav, DRAWER_DATA, KjDrawer, KjDrawerService, bindPresets, KJ_TABS_CONFIG, KjTabs, KjTabList, KjTab, KjTabPanel, KjTag, KjTagRemove, KjTagList, KjTextarea, KjTimePicker, KjTimePickerHours, KjTimePickerMinutes, KjTimePickerSeconds, KjTimePickerMeridiem, KjToastViewport, KjToast, KjToastClose, KjTooltipTrigger, KjTooltipContent, KjTooltipArrow, KjTooltipGroup, KjCascadeSelect, KjCascadeSelectTrigger, KjCascadeSelectPanel, KjCascadeSelectOption, KjCascadeSelectSubPanel, KjCommandPalette, KjCommandInput, KjCommandList, KjCommandEmpty, injectListItem, KjListItem, KjCommandGroup, KjCommandSeparator, KjTreeSelectNode, KjTreeSelectToggle, KjTreeSelect, KjTreeSelectTrigger, KjTreeSelectContent } from '@kouji-ui/core';
 export { KJ_DROPDOWN_MENU, KjBlockquote, KjCarousel, KjCarouselSlide, KjCascadeSelectOption, KjChatAnnouncer, KjChatStore, KjCode, KjColorPicker, KjCombobox, KjDatePicker, KjDialog, KjDialogRef, KjDialogService, KjDrawer, KjDrawerRef, KjDrawerService, KjDropdownMenuContent, KjDropdownMenuGroup, KjDropdownMenuItem, KjDropdownMenuLabel, KjDropdownMenuSeparator, KjDropdownMenuTrigger, KjFileUpload, KjInput, KjLead, KjLiveRegion, KjMuted, KjOverlayPanel, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjRichTextEditor, KjSheet, KjSheetRef, KjSheetService, KjTabPanel, KjTable, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTreeSelect, KjTruncate, SHEET_ARIA_LABEL, SHEET_DATA, SHEET_DETENT, SHEET_DISMISSIBLE } from '@kouji-ui/core';
 import { NgTemplateOutlet, isPlatformBrowser, NgComponentOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -1119,11 +1119,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @doc-is-main
  */
 class KjBreadcrumbComponent {
+    // Forwarded via `hostDirectives.inputs` above; re-declared for the docs
+    // extractor only. Unset falls back to the `provideKjBreadcrumb(…)` default
+    // (`'md'`).
     /** Size preset cascaded onto descendants. Default `'md'`. */
-    kjSize = input('md', /* @ts-ignore */
+    kjSize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjBreadcrumbComponent, isStandalone: true, selector: "nav[kj-breadcrumb], kj-breadcrumb", inputs: { kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.data-size": "kjSize()" }, classAttribute: "kj-breadcrumb" }, hostDirectives: [{ directive: i1.KjBreadcrumb, inputs: ["kjAriaLabel", "kjAriaLabel", "kjSeparator", "kjSeparator", "kjMaxItems", "kjMaxItems", "kjOverflow", "kjOverflow"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-breadcrumb{--kj-breadcrumb-gap: var(--kj-space-sm, .5rem);--kj-breadcrumb-separator-content: \"/\";--kj-breadcrumb-overflow-pad: .25rem;--kj-color-breadcrumb-muted: var(--kj-fg-muted);--kj-color-breadcrumb-current: var(--kj-fg-default);display:block;color:var(--kj-color-breadcrumb-muted);font-size:.875rem}.kj-breadcrumb[data-size=sm]{font-size:.8125rem}.kj-breadcrumb[data-size=md]{font-size:.875rem}.kj-breadcrumb[data-size=lg]{font-size:1rem}.kj-breadcrumb-list{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--kj-breadcrumb-gap);margin:0;padding:0;list-style:none;min-width:0}.kj-breadcrumb-list[data-wrap=wrap]{flex-wrap:wrap}.kj-breadcrumb-list[data-wrap=no-wrap],.kj-breadcrumb-list[data-wrap=truncate]{flex-wrap:nowrap}.kj-breadcrumb-item{display:inline-flex;align-items:center;gap:var(--kj-breadcrumb-gap);min-width:0}.kj-breadcrumb-item[data-hidden]{display:none}.kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{content:var(--kj-breadcrumb-separator-content, \"/\");color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none;margin-inline-end:var(--kj-breadcrumb-gap)}[dir=rtl] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{display:inline-block;transform:scaleX(-1)}.kj-breadcrumb-separator{display:inline-flex;align-items:center;color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none}.kj-breadcrumb-link{--kj-link-fg: var(--kj-color-breadcrumb-muted);--kj-link-hover-fg: var(--kj-color-breadcrumb-current);color:var(--kj-link-fg);text-decoration:none;padding-block:.5rem;transition:color var(--kj-transition, .15s ease)}.kj-breadcrumb-link:hover{color:var(--kj-link-hover-fg);text-decoration:underline;text-underline-offset:3px}.kj-breadcrumb-link:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-current{color:var(--kj-color-breadcrumb-current);font-weight:500}.kj-breadcrumb-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding-inline:var(--kj-breadcrumb-overflow-pad);color:var(--kj-color-breadcrumb-muted);background:transparent;border:0;cursor:default;-webkit-user-select:none;user-select:none}.kj-breadcrumb-ellipsis[data-overflow=menu]{cursor:pointer;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-ellipsis[data-overflow=menu]:hover{background:var(--kj-bg-surface, transparent)}@media print{.kj-breadcrumb-item[data-hidden]{display:revert}.kj-breadcrumb-ellipsis{display:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjBreadcrumbComponent, isStandalone: true, selector: "nav[kj-breadcrumb], kj-breadcrumb", inputs: { kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, classAttribute: "kj-breadcrumb" }, hostDirectives: [{ directive: i1.KjBreadcrumb, inputs: ["kjAriaLabel", "kjAriaLabel", "kjSeparator", "kjSeparator", "kjMaxItems", "kjMaxItems", "kjOverflow", "kjOverflow"] }, { directive: i1.KjSize, inputs: ["kjSize", "kjSize"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-breadcrumb{--kj-breadcrumb-gap: var(--kj-space-sm, .5rem);--kj-breadcrumb-separator-content: \"/\";--kj-breadcrumb-overflow-pad: .25rem;--kj-color-breadcrumb-muted: var(--kj-fg-muted);--kj-color-breadcrumb-current: var(--kj-fg-default);display:block;color:var(--kj-color-breadcrumb-muted);font-size:.875rem}.kj-breadcrumb[data-size=sm]{font-size:.8125rem}.kj-breadcrumb[data-size=md]{font-size:.875rem}.kj-breadcrumb[data-size=lg]{font-size:1rem}.kj-breadcrumb-list{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--kj-breadcrumb-gap);margin:0;padding:0;list-style:none;min-width:0}.kj-breadcrumb-list[data-wrap=wrap]{flex-wrap:wrap}.kj-breadcrumb-list[data-wrap=no-wrap],.kj-breadcrumb-list[data-wrap=truncate]{flex-wrap:nowrap}.kj-breadcrumb-item{display:inline-flex;align-items:center;gap:var(--kj-breadcrumb-gap);min-width:0}.kj-breadcrumb-item[data-hidden]{display:none}.kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{content:var(--kj-breadcrumb-separator-content, \"/\");color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none;margin-inline-end:var(--kj-breadcrumb-gap)}[dir=rtl] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{display:inline-block;transform:scaleX(-1)}.kj-breadcrumb-separator{display:inline-flex;align-items:center;color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none}.kj-breadcrumb-link{--kj-link-fg: var(--kj-color-breadcrumb-muted);--kj-link-hover-fg: var(--kj-color-breadcrumb-current);color:var(--kj-link-fg);text-decoration:none;padding-block:.5rem;transition:color var(--kj-transition, .15s ease)}.kj-breadcrumb-link:hover{color:var(--kj-link-hover-fg);text-decoration:underline;text-underline-offset:3px}.kj-breadcrumb-link:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-current{color:var(--kj-color-breadcrumb-current);font-weight:500}.kj-breadcrumb-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding-inline:var(--kj-breadcrumb-overflow-pad);color:var(--kj-color-breadcrumb-muted);background:transparent;border:0;cursor:default;-webkit-user-select:none;user-select:none}.kj-breadcrumb-ellipsis[data-overflow=menu]{cursor:pointer;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-ellipsis[data-overflow=menu]:hover{background:var(--kj-bg-surface, transparent)}@media print{.kj-breadcrumb-item[data-hidden]{display:revert}.kj-breadcrumb-ellipsis{display:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjBreadcrumbComponent, decorators: [{
             type: Component,
@@ -1132,10 +1135,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             directive: KjBreadcrumb,
                             inputs: ['kjAriaLabel', 'kjSeparator', 'kjMaxItems', 'kjOverflow'],
                         },
+                        // Host-directive input forwarding is not transitive: KjBreadcrumb composes
+                        // KjSize itself, but the wrapper must compose it directly to expose kjSize
+                        // as its own input (same instance — Angular applies a directive once per
+                        // host). Unset falls back to the `provideKjBreadcrumb(…)` default.
+                        { directive: KjSize, inputs: ['kjSize'] },
                     ], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'kj-breadcrumb',
                         'role': 'navigation',
-                        '[attr.data-size]': 'kjSize()',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-breadcrumb{--kj-breadcrumb-gap: var(--kj-space-sm, .5rem);--kj-breadcrumb-separator-content: \"/\";--kj-breadcrumb-overflow-pad: .25rem;--kj-color-breadcrumb-muted: var(--kj-fg-muted);--kj-color-breadcrumb-current: var(--kj-fg-default);display:block;color:var(--kj-color-breadcrumb-muted);font-size:.875rem}.kj-breadcrumb[data-size=sm]{font-size:.8125rem}.kj-breadcrumb[data-size=md]{font-size:.875rem}.kj-breadcrumb[data-size=lg]{font-size:1rem}.kj-breadcrumb-list{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--kj-breadcrumb-gap);margin:0;padding:0;list-style:none;min-width:0}.kj-breadcrumb-list[data-wrap=wrap]{flex-wrap:wrap}.kj-breadcrumb-list[data-wrap=no-wrap],.kj-breadcrumb-list[data-wrap=truncate]{flex-wrap:nowrap}.kj-breadcrumb-item{display:inline-flex;align-items:center;gap:var(--kj-breadcrumb-gap);min-width:0}.kj-breadcrumb-item[data-hidden]{display:none}.kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{content:var(--kj-breadcrumb-separator-content, \"/\");color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none;margin-inline-end:var(--kj-breadcrumb-gap)}[dir=rtl] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{display:inline-block;transform:scaleX(-1)}.kj-breadcrumb-separator{display:inline-flex;align-items:center;color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none}.kj-breadcrumb-link{--kj-link-fg: var(--kj-color-breadcrumb-muted);--kj-link-hover-fg: var(--kj-color-breadcrumb-current);color:var(--kj-link-fg);text-decoration:none;padding-block:.5rem;transition:color var(--kj-transition, .15s ease)}.kj-breadcrumb-link:hover{color:var(--kj-link-hover-fg);text-decoration:underline;text-underline-offset:3px}.kj-breadcrumb-link:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-current{color:var(--kj-color-breadcrumb-current);font-weight:500}.kj-breadcrumb-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding-inline:var(--kj-breadcrumb-overflow-pad);color:var(--kj-color-breadcrumb-muted);background:transparent;border:0;cursor:default;-webkit-user-select:none;user-select:none}.kj-breadcrumb-ellipsis[data-overflow=menu]{cursor:pointer;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-ellipsis[data-overflow=menu]:hover{background:var(--kj-bg-surface, transparent)}@media print{.kj-breadcrumb-item[data-hidden]{display:revert}.kj-breadcrumb-ellipsis{display:none}}}\n"] }]
         }], propDecorators: { kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }] } });
 /**
@@ -1207,14 +1214,15 @@ class KjBreadcrumbLinkComponent {
     /** Bound to `[attr.aria-label]` on the inner `<a>`. */
     kjAriaLabel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjAriaLabel" }] : /* istanbul ignore next */ []));
-    /** KjLink variant. Defaults to `'muted'` (the breadcrumb default). */
-    kjVariant = input('muted', /* @ts-ignore */
+    config = inject(KJ_BREADCRUMB_CONFIG);
+    /** KjLink variant. Defaults to `provideKjBreadcrumb(…)`'s `linkVariant` (`'muted'`). */
+    kjVariant = input(this.config.defaults.linkVariant, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
-    /** KjLink size. Defaults to `'sm'` (the breadcrumb default). */
-    kjSize = input('sm', /* @ts-ignore */
+    /** KjLink size. Defaults to `provideKjBreadcrumb(…)`'s `linkSize` (`'sm'`). */
+    kjSize = input(this.config.defaults.linkSize, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
-    /** Underline mode. Defaults to `'hover'`. */
-    kjUnderline = input('hover', /* @ts-ignore */
+    /** Underline mode. Defaults to `provideKjBreadcrumb(…)`'s `linkUnderline` (`'hover'`). */
+    kjUnderline = input(this.config.defaults.linkUnderline, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjUnderline" }] : /* istanbul ignore next */ []));
     /** External-link tri-state. Forwarded to `KjLink`. */
     kjExternal = input(false, /* @ts-ignore */
@@ -1448,9 +1456,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @doc-description Themed button with variants, sizes, and built-in disabled, loading, and pressed states.
  */
 class KjButtonComponent {
-    kjVariant = input('default', /* @ts-ignore */
+    /**
+     * Visual variant. Left unset, the inner `[kjButton]` resolves it:
+     * enclosing button-group cascade, else the `provideKjButton(…)` default,
+     * else `'default'`. Binding a hardcoded default here would clobber that
+     * chain — keep it `undefined` when the consumer didn't choose one.
+     */
+    kjVariant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
-    kjSize = input('md', /* @ts-ignore */
+    /** Size preset. Resolution mirrors {@link kjVariant} (default `'md'`). */
+    kjSize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     kjDisabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjDisabled" }] : /* istanbul ignore next */ []));
@@ -2831,11 +2846,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @doc-name chat
  */
 class KjChatBubbleComponent {
-    /** Visual register. Validated against `KJ_CHAT_BUBBLE_CONFIG`. */
-    kjVariant = input('default', /* @ts-ignore */
+    /** Visual register. Validated against `KJ_CHAT_BUBBLE_CONFIG`. Unset falls back to the `provideKjChatBubble(…)` default (`'default'`). */
+    kjVariant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
-    /** Density preset. Drives padding + font-size on the bubble. */
-    kjSize = input('md', /* @ts-ignore */
+    /** Density preset. Drives padding + font-size on the bubble. Unset falls back to the configured default (`'md'`). */
+    kjSize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     /** Suppresses the tail unconditionally. Auto-suppression on grouped rows is independent. */
     kjChatBubbleNoTail = input(false, /* @ts-ignore */
@@ -5480,19 +5495,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @doc-is-main
  */
 class KjSpinnerComponent {
+    // Inputs are forwarded via `hostDirectives.inputs` above. Re-declared here
+    // for the docs extractor only — the forwarded copies are authoritative.
     /**
-     * Color preset reflected to `data-variant` on the host. Defaults to
-     * `'neutral'`, which resolves to `currentColor` in shipped themes — so a
-     * spinner inside a coloured surface inherits its parent's text colour.
+     * Color preset reflected to `data-variant` on the host. Unset falls back
+     * to the `provideKjSpinner(…)` default (`'neutral'`, which resolves to
+     * `currentColor` in shipped themes — so a spinner inside a coloured
+     * surface inherits its parent's text colour).
      */
-    kjVariant = input('neutral', /* @ts-ignore */
+    kjVariant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
     /**
-     * Size preset reflected to `data-size` on the host. Defaults to `'md'`.
-     * Sizes ship as `xs | sm | md | lg`; an `xl` is intentionally absent — a
-     * spinner that big almost always wants a determinate Progress Bar instead.
+     * Size preset reflected to `data-size` on the host. Unset falls back to
+     * the configured default (`'md'`). Sizes ship as `xs | sm | md | lg`; an
+     * `xl` is intentionally absent — a spinner that big almost always wants a
+     * determinate Progress Bar instead.
      */
-    kjSize = input('md', /* @ts-ignore */
+    kjSize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     /**
      * Animation shape preset forwarded to `KjSpinner.kjAnimation` via the
@@ -5534,7 +5553,7 @@ class KjSpinnerComponent {
             this.el.nativeElement.hasAttribute('aria-labelledby');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjSpinnerComponent, isStandalone: true, selector: "kj-spinner", inputs: { kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null }, kjAnimation: { classPropertyName: "kjAnimation", publicName: "kjAnimation", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "kjVariant()", "attr.data-size": "kjSize()" }, classAttribute: "kj-spinner" }, hostDirectives: [{ directive: i1.KjSpinner, inputs: ["kjAnimation", "kjAnimation", "kjAriaLabel", "kjAriaLabel"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjSpinnerComponent, isStandalone: true, selector: "kj-spinner", inputs: { kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null }, kjAnimation: { classPropertyName: "kjAnimation", publicName: "kjAnimation", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kj-spinner" }, hostDirectives: [{ directive: i1.KjSpinner, inputs: ["kjAnimation", "kjAnimation", "kjAriaLabel", "kjAriaLabel"] }, { directive: i1.KjVariant, inputs: ["kjVariant", "kjVariant"] }, { directive: i1.KjSize, inputs: ["kjSize", "kjSize"] }], ngImport: i0, template: `
     <span class="kj-spinner__glyph" aria-hidden="true"></span>
     @if (shouldRenderHiddenLabel()) {
       <span kjVisuallyHidden>{{ kjAriaLabel() }}</span>
@@ -5544,24 +5563,21 @@ class KjSpinnerComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kj-spinner', standalone: true, imports: [KjVisuallyHidden], hostDirectives: [
-                        {
-                            directive: KjSpinner,
-                            // KjSpinner's own surface — kjVariant + kjSize live on its nested
-                            // KjVariant / KjSize and are not surfaced through this outer
-                            // composition; they are re-exposed as wrapper inputs below and wired
-                            // straight to the host's data-variant / data-size attributes.
-                            inputs: ['kjAnimation', 'kjAriaLabel'],
-                        },
+                        { directive: KjSpinner, inputs: ['kjAnimation', 'kjAriaLabel'] },
+                        // Host-directive input forwarding is not transitive: KjSpinner composes
+                        // KjVariant / KjSize itself, but the wrapper must compose them directly
+                        // to expose kjVariant / kjSize as its own inputs. Angular applies each
+                        // directive once per host, so these bind the same preset instances that
+                        // KjSpinner already composes — unset falls back to the
+                        // `provideKjSpinner(…)` default.
+                        { directive: KjVariant, inputs: ['kjVariant'] },
+                        { directive: KjSize, inputs: ['kjSize'] },
                     ], template: `
     <span class="kj-spinner__glyph" aria-hidden="true"></span>
     @if (shouldRenderHiddenLabel()) {
       <span kjVisuallyHidden>{{ kjAriaLabel() }}</span>
     }
-  `, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'kj-spinner',
-                        '[attr.data-variant]': 'kjVariant()',
-                        '[attr.data-size]': 'kjSize()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-spinner{--kj-spinner-size: 1.25rem;--kj-spinner-color: currentColor;--kj-spinner-track: color-mix(in srgb, currentColor 20%, transparent);--kj-spinner-duration: .7s;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--kj-spinner-size);block-size:var(--kj-spinner-size);color:var(--kj-spinner-color);pointer-events:none}.kj-spinner[data-size=xs]{--kj-spinner-size: .75rem}.kj-spinner[data-size=sm]{--kj-spinner-size: 1rem}.kj-spinner[data-size=md]{--kj-spinner-size: 1.25rem}.kj-spinner[data-size=lg]{--kj-spinner-size: 1.75rem}.kj-spinner[data-variant=neutral]{--kj-spinner-color: currentColor}.kj-spinner[data-variant=primary]{--kj-spinner-color: var(--kj-fg-primary)}.kj-spinner[data-variant=secondary]{--kj-spinner-color: var(--kj-fg-default)}.kj-spinner[data-variant=success]{--kj-spinner-color: var(--kj-fg-success, #16a34a)}.kj-spinner[data-variant=warning]{--kj-spinner-color: var(--kj-fg-warning, #d97706)}.kj-spinner[data-variant=error]{--kj-spinner-color: var(--kj-fg-danger, #dc2626)}.kj-spinner[data-variant=info]{--kj-spinner-color: var(--kj-fg-info, #2563eb)}.kj-spinner__glyph{display:inline-block;inline-size:100%;block-size:100%}.kj-spinner[data-animation=spin] .kj-spinner__glyph{border:2px solid var(--kj-spinner-track);border-block-start-color:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-spin var(--kj-spinner-duration) linear infinite}.kj-spinner[data-animation=pulse] .kj-spinner__glyph{background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-pulse calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots]{inline-size:auto}.kj-spinner[data-animation=dots] .kj-spinner__glyph{display:inline-flex;gap:calc(var(--kj-spinner-size) * .25);inline-size:auto;block-size:100%}.kj-spinner[data-animation=dots] .kj-spinner__glyph:before,.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .3);block-size:calc(var(--kj-spinner-size) * .3);background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-dots calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots] .kj-spinner__glyph{background:transparent}.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-animation=bars]{inline-size:auto}.kj-spinner[data-animation=bars] .kj-spinner__glyph{display:inline-flex;align-items:stretch;gap:calc(var(--kj-spinner-size) * .15);inline-size:auto;block-size:100%}.kj-spinner[data-animation=bars] .kj-spinner__glyph:before,.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .2);background:var(--kj-spinner-color);border-radius:calc(var(--kj-spinner-size) * .05);animation:kj-spinner-bars calc(var(--kj-spinner-duration) * 1.6) ease-in-out infinite;transform-origin:center}.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:before,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:after{animation:kj-spinner-reduced-motion 1.6s ease-in-out infinite!important}}@keyframes kj-spinner-spin{to{transform:rotate(360deg)}}@keyframes kj-spinner-pulse{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes kj-spinner-dots{0%,80%,to{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}@keyframes kj-spinner-bars{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes kj-spinner-reduced-motion{0%,to{opacity:.45}50%{opacity:1}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-spinner' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-spinner{--kj-spinner-size: 1.25rem;--kj-spinner-color: currentColor;--kj-spinner-track: color-mix(in srgb, currentColor 20%, transparent);--kj-spinner-duration: .7s;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--kj-spinner-size);block-size:var(--kj-spinner-size);color:var(--kj-spinner-color);pointer-events:none}.kj-spinner[data-size=xs]{--kj-spinner-size: .75rem}.kj-spinner[data-size=sm]{--kj-spinner-size: 1rem}.kj-spinner[data-size=md]{--kj-spinner-size: 1.25rem}.kj-spinner[data-size=lg]{--kj-spinner-size: 1.75rem}.kj-spinner[data-variant=neutral]{--kj-spinner-color: currentColor}.kj-spinner[data-variant=primary]{--kj-spinner-color: var(--kj-fg-primary)}.kj-spinner[data-variant=secondary]{--kj-spinner-color: var(--kj-fg-default)}.kj-spinner[data-variant=success]{--kj-spinner-color: var(--kj-fg-success, #16a34a)}.kj-spinner[data-variant=warning]{--kj-spinner-color: var(--kj-fg-warning, #d97706)}.kj-spinner[data-variant=error]{--kj-spinner-color: var(--kj-fg-danger, #dc2626)}.kj-spinner[data-variant=info]{--kj-spinner-color: var(--kj-fg-info, #2563eb)}.kj-spinner__glyph{display:inline-block;inline-size:100%;block-size:100%}.kj-spinner[data-animation=spin] .kj-spinner__glyph{border:2px solid var(--kj-spinner-track);border-block-start-color:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-spin var(--kj-spinner-duration) linear infinite}.kj-spinner[data-animation=pulse] .kj-spinner__glyph{background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-pulse calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots]{inline-size:auto}.kj-spinner[data-animation=dots] .kj-spinner__glyph{display:inline-flex;gap:calc(var(--kj-spinner-size) * .25);inline-size:auto;block-size:100%}.kj-spinner[data-animation=dots] .kj-spinner__glyph:before,.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .3);block-size:calc(var(--kj-spinner-size) * .3);background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-dots calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots] .kj-spinner__glyph{background:transparent}.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-animation=bars]{inline-size:auto}.kj-spinner[data-animation=bars] .kj-spinner__glyph{display:inline-flex;align-items:stretch;gap:calc(var(--kj-spinner-size) * .15);inline-size:auto;block-size:100%}.kj-spinner[data-animation=bars] .kj-spinner__glyph:before,.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .2);background:var(--kj-spinner-color);border-radius:calc(var(--kj-spinner-size) * .05);animation:kj-spinner-bars calc(var(--kj-spinner-duration) * 1.6) ease-in-out infinite;transform-origin:center}.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:before,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:after{animation:kj-spinner-reduced-motion 1.6s ease-in-out infinite!important}}@keyframes kj-spinner-spin{to{transform:rotate(360deg)}}@keyframes kj-spinner-pulse{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes kj-spinner-dots{0%,80%,to{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}@keyframes kj-spinner-bars{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes kj-spinner-reduced-motion{0%,to{opacity:.45}50%{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }], kjAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAnimation", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }] } });
 
 /**
@@ -10357,11 +10373,11 @@ class KjLinkComponent {
     /** Bound to `[attr.aria-label]` on the inner `<a>`. When set, suppresses the AT suffix injection. */
     kjAriaLabel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjAriaLabel" }] : /* istanbul ignore next */ []));
-    /** Forwarded to the directive's `KjVariant` host directive. */
-    kjVariant = input('primary', /* @ts-ignore */
+    /** Forwarded to the directive's `KjVariant` host directive. Unset falls back to the `provideKjLink(…)` default (`'primary'`). */
+    kjVariant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
-    /** Forwarded to the directive's `KjSize` host directive. */
-    kjSize = input('inherit', /* @ts-ignore */
+    /** Forwarded to the directive's `KjSize` host directive. Unset falls back to the configured default (`'inherit'`). */
+    kjSize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     /** Forwarded to the directive's underline-mode reflection. */
     kjUnderline = input('hover', /* @ts-ignore */
@@ -11695,9 +11711,11 @@ class KjPaginationDefaultComponent {
     ...(ngDevMode ? [{ debugName: "kjSiblingCount" }] : /* istanbul ignore next */ []));
     kjBoundaryCount = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjBoundaryCount" }] : /* istanbul ignore next */ []));
-    kjVariant = input('default', /* @ts-ignore */
+    /** Cascaded onto items/boundaries. Unset falls back to the `provideKjPagination(…)` default (`'default'`). */
+    kjVariant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
-    kjSize = input('md', /* @ts-ignore */
+    /** Cascaded onto items/boundaries. Unset falls back to the configured default (`'md'`). */
+    kjSize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     /** Render the First / Last boundary buttons. Default `true`. */
     kjShowFirstLast = input(true, /* @ts-ignore */
@@ -12233,15 +12251,17 @@ class KjProgressBarComponent {
     ...(ngDevMode ? [{ debugName: "kjAriaValuetext" }] : /* istanbul ignore next */ []));
     /**
      * Variant — one of the configured presets (`primary` | `success` |
-     * `warning` | `error` by default). @default 'primary'
+     * `warning` | `error` by default). Unset falls back to the
+     * `provideKjProgressBar(…)` default. @default 'primary'
      */
-    kjVariant = input('primary', /* @ts-ignore */
+    kjVariant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
     /**
      * Size — one of the configured presets (`xs` | `sm` | `md` | `lg` by
-     * default). Drives the bar height. @default 'md'
+     * default). Drives the bar height. Unset falls back to the configured
+     * default. @default 'md'
      */
-    kjSize = input('md', /* @ts-ignore */
+    kjSize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     /**
      * Accessible label for the bar. At least one of `kjAriaLabel` or
@@ -18426,11 +18446,20 @@ async function copyToClipboard(text) {
  * @doc-is-main
  */
 class KjTabsComponent {
-    /** Visual chrome for the tab strip. Reflected as `data-variant` on the host. */
-    variant = input('default', /* @ts-ignore */
+    /**
+     * Visual chrome for the tab strip, reflected as `data-variant` on the host.
+     * Ships `'default'` (underline strip) and `'pills'` (recessed chip tray);
+     * register more with `provideKjTabs({ variants: [...] })` and key a CSS rule
+     * on `.kj-tabs[data-variant="…"]`.
+     *
+     * Declared here for the docs extractor only — the value is owned by the
+     * composed `KjVariant` preset directive (see `hostDirectives`), which is
+     * what actually resolves and reflects it.
+     */
+    variant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjTabsComponent, isStandalone: true, selector: "kj-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "kj-tabs" }, hostDirectives: [{ directive: i1.KjTabs, inputs: ["kjValue", "value", "kjOrientation", "orientation", "kjActivationMode", "activationMode"], outputs: ["kjValueChange", "valueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-tabs{display:block}.kj-tabs[data-orientation=vertical]{display:grid;grid-template-columns:auto 1fr;gap:var(--kj-space-lg)}.kj-tab-list{display:flex;border-bottom:1px solid var(--kj-border-default);margin-bottom:var(--kj-space-lg)}.kj-tabs[data-orientation=vertical] .kj-tab-list{flex-direction:column;border-bottom:0;border-right:1px solid var(--kj-border-default);margin:0}.kj-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--kj-fg-default);opacity:.6;padding:var(--kj-space-sm) var(--kj-space-md);font:.875rem var(--kj-font-sans);cursor:pointer;margin-bottom:-1px;transition:var(--kj-transition)}.kj-tab[aria-selected=true]{opacity:1;border-bottom-color:var(--kj-bg-primary)}.kj-tab:hover{opacity:1}.kj-tab:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}.kj-tab:disabled,.kj-tab[aria-disabled=true]{opacity:.3;cursor:not-allowed}.kj-tabs[data-variant=pills]{display:inline-block}.kj-tabs[data-variant=pills] .kj-tab-list{display:inline-flex;gap:4px;padding:4px;background-color:var(--kj-bg-surface);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);width:fit-content;margin-bottom:0}.kj-tabs[data-variant=pills] .kj-tab{border-bottom:0;border-radius:calc(var(--kj-radius-field) - 2px);margin:0;padding:var(--kj-space-xs, .375rem) var(--kj-space-md);color:var(--kj-fg-muted);opacity:1;transition:background-color var(--kj-transition),color var(--kj-transition),box-shadow var(--kj-transition)}.kj-tabs[data-variant=pills] .kj-tab:hover{color:var(--kj-fg-default)}.kj-tabs[data-variant=pills] .kj-tab[aria-selected=true]{background-color:var(--kj-bg-body);color:var(--kj-fg-default);box-shadow:inset 0 0 0 1px var(--kj-border-default)}.kj-tabs[data-orientation=vertical] .kj-tab{border-bottom:0;border-right:2px solid transparent;margin:0 -1px 0 0;text-align:left}.kj-tabs[data-orientation=vertical] .kj-tab[aria-selected=true]{border-right-color:var(--kj-bg-primary)}.kj-tab-panel{display:block;color:var(--kj-fg-default);font:.875rem var(--kj-font-sans);line-height:1.5}.kj-tab-panel[hidden]{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjTabsComponent, isStandalone: true, selector: "kj-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kj-tabs" }, providers: [...bindPresets(KJ_TABS_CONFIG)], hostDirectives: [{ directive: i1.KjTabs, inputs: ["kjValue", "value", "kjOrientation", "orientation", "kjActivationMode", "activationMode"], outputs: ["kjValueChange", "valueChange"] }, { directive: i1.KjVariant, inputs: ["kjVariant", "variant"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-tabs{display:block;--kj-tab-fg: var(--kj-fg-muted);--kj-tab-fg-active: var(--kj-fg-default);--kj-tab-font-size: .875rem;--kj-tab-font-weight: 400;--kj-tab-padding-x: var(--kj-space-md);--kj-tab-padding-y: var(--kj-space-sm);--kj-tab-gap: 0;--kj-tab-indicator-color: var(--kj-bg-primary);--kj-tab-indicator-size: 2px;--kj-tab-indicator-inset: 0px;--kj-tab-list-border-color: var(--kj-border-default);--kj-tab-list-gap: var(--kj-space-lg);--kj-tab-tray-bg: var(--kj-bg-surface);--kj-tab-tray-border-color: var(--kj-border-default);--kj-tab-tray-radius: var(--kj-radius-field);--kj-tab-tray-padding: 3px;--kj-tab-tray-gap: 2px;--kj-tab-chip-radius: calc(var(--kj-radius-field) - 2px);--kj-tab-chip-bg-active: var(--kj-bg-body);--kj-tab-chip-ring-active: var(--kj-border-default)}.kj-tabs[data-orientation=vertical]{display:grid;grid-template-columns:auto 1fr;gap:var(--kj-space-lg)}.kj-tab-list{display:flex;gap:var(--kj-tab-gap);border-bottom:1px solid var(--kj-tab-list-border-color);margin-bottom:var(--kj-tab-list-gap)}.kj-tabs[data-orientation=vertical] .kj-tab-list{flex-direction:column;border-bottom:0;border-right:1px solid var(--kj-tab-list-border-color);margin:0}.kj-tab{position:relative;background:none;border:0;color:var(--kj-tab-fg);padding:var(--kj-tab-padding-y) var(--kj-tab-padding-x);font:var(--kj-tab-font-weight) var(--kj-tab-font-size) / 1.2 var(--kj-font-sans);cursor:pointer;transition:color var(--kj-transition),background-color var(--kj-transition),box-shadow var(--kj-transition)}.kj-tab:after{content:\"\";position:absolute;left:var(--kj-tab-indicator-inset);right:var(--kj-tab-indicator-inset);bottom:0;height:var(--kj-tab-indicator-size);background:var(--kj-tab-indicator-color);opacity:0;transition:opacity var(--kj-transition)}.kj-tab[aria-selected=true]{color:var(--kj-tab-fg-active)}.kj-tab[aria-selected=true]:after{opacity:1}.kj-tab:hover{color:var(--kj-tab-fg-active)}.kj-tab:focus-visible{outline:2px solid var(--kj-border-focus, var(--kj-bg-primary));outline-offset:-2px}.kj-tab:disabled,.kj-tab[aria-disabled=true]{opacity:.4;cursor:not-allowed}.kj-tabs[data-variant=pills]{display:inline-block}.kj-tabs[data-variant=pills] .kj-tab-list{display:inline-flex;gap:var(--kj-tab-tray-gap);padding:var(--kj-tab-tray-padding);background-color:var(--kj-tab-tray-bg);border:1px solid var(--kj-tab-tray-border-color);border-radius:var(--kj-tab-tray-radius);width:fit-content;margin-bottom:0}.kj-tabs[data-variant=pills] .kj-tab{border-radius:var(--kj-tab-chip-radius);margin:0}.kj-tabs[data-variant=pills] .kj-tab:after{content:none}.kj-tabs[data-variant=pills] .kj-tab[aria-selected=true]{background-color:var(--kj-tab-chip-bg-active);color:var(--kj-tab-fg-active);box-shadow:inset 0 0 0 1px var(--kj-tab-chip-ring-active)}.kj-tabs[data-orientation=vertical] .kj-tab{text-align:left}.kj-tabs[data-orientation=vertical] .kj-tab:after{left:auto;right:0;top:var(--kj-tab-indicator-inset);bottom:var(--kj-tab-indicator-inset);width:var(--kj-tab-indicator-size);height:auto}.kj-tab-panel{display:block;color:var(--kj-fg-default);font:.875rem var(--kj-font-sans);line-height:1.5}.kj-tab-panel[hidden]{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTabsComponent, decorators: [{
             type: Component,
@@ -18444,10 +18473,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             ],
                             outputs: ['kjValueChange: valueChange'],
                         },
-                    ], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kj-tabs',
-                        '[attr.data-variant]': 'variant()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-tabs{display:block}.kj-tabs[data-orientation=vertical]{display:grid;grid-template-columns:auto 1fr;gap:var(--kj-space-lg)}.kj-tab-list{display:flex;border-bottom:1px solid var(--kj-border-default);margin-bottom:var(--kj-space-lg)}.kj-tabs[data-orientation=vertical] .kj-tab-list{flex-direction:column;border-bottom:0;border-right:1px solid var(--kj-border-default);margin:0}.kj-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--kj-fg-default);opacity:.6;padding:var(--kj-space-sm) var(--kj-space-md);font:.875rem var(--kj-font-sans);cursor:pointer;margin-bottom:-1px;transition:var(--kj-transition)}.kj-tab[aria-selected=true]{opacity:1;border-bottom-color:var(--kj-bg-primary)}.kj-tab:hover{opacity:1}.kj-tab:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}.kj-tab:disabled,.kj-tab[aria-disabled=true]{opacity:.3;cursor:not-allowed}.kj-tabs[data-variant=pills]{display:inline-block}.kj-tabs[data-variant=pills] .kj-tab-list{display:inline-flex;gap:4px;padding:4px;background-color:var(--kj-bg-surface);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);width:fit-content;margin-bottom:0}.kj-tabs[data-variant=pills] .kj-tab{border-bottom:0;border-radius:calc(var(--kj-radius-field) - 2px);margin:0;padding:var(--kj-space-xs, .375rem) var(--kj-space-md);color:var(--kj-fg-muted);opacity:1;transition:background-color var(--kj-transition),color var(--kj-transition),box-shadow var(--kj-transition)}.kj-tabs[data-variant=pills] .kj-tab:hover{color:var(--kj-fg-default)}.kj-tabs[data-variant=pills] .kj-tab[aria-selected=true]{background-color:var(--kj-bg-body);color:var(--kj-fg-default);box-shadow:inset 0 0 0 1px var(--kj-border-default)}.kj-tabs[data-orientation=vertical] .kj-tab{border-bottom:0;border-right:2px solid transparent;margin:0 -1px 0 0;text-align:left}.kj-tabs[data-orientation=vertical] .kj-tab[aria-selected=true]{border-right-color:var(--kj-bg-primary)}.kj-tab-panel{display:block;color:var(--kj-fg-default);font:.875rem var(--kj-font-sans);line-height:1.5}.kj-tab-panel[hidden]{display:none}}\n"] }]
+                        // `variant` resolves through the preset chain (explicit input >
+                        // provideKjTabs default > library default) and reflects data-variant —
+                        // the same contract Button uses. Declaring it as a plain input here would
+                        // hardcode the default and clobber provideKjTabs(…).
+                        { directive: KjVariant, inputs: ['kjVariant: variant'] },
+                    ], providers: [...bindPresets(KJ_TABS_CONFIG)], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { class: 'kj-tabs' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-tabs{display:block;--kj-tab-fg: var(--kj-fg-muted);--kj-tab-fg-active: var(--kj-fg-default);--kj-tab-font-size: .875rem;--kj-tab-font-weight: 400;--kj-tab-padding-x: var(--kj-space-md);--kj-tab-padding-y: var(--kj-space-sm);--kj-tab-gap: 0;--kj-tab-indicator-color: var(--kj-bg-primary);--kj-tab-indicator-size: 2px;--kj-tab-indicator-inset: 0px;--kj-tab-list-border-color: var(--kj-border-default);--kj-tab-list-gap: var(--kj-space-lg);--kj-tab-tray-bg: var(--kj-bg-surface);--kj-tab-tray-border-color: var(--kj-border-default);--kj-tab-tray-radius: var(--kj-radius-field);--kj-tab-tray-padding: 3px;--kj-tab-tray-gap: 2px;--kj-tab-chip-radius: calc(var(--kj-radius-field) - 2px);--kj-tab-chip-bg-active: var(--kj-bg-body);--kj-tab-chip-ring-active: var(--kj-border-default)}.kj-tabs[data-orientation=vertical]{display:grid;grid-template-columns:auto 1fr;gap:var(--kj-space-lg)}.kj-tab-list{display:flex;gap:var(--kj-tab-gap);border-bottom:1px solid var(--kj-tab-list-border-color);margin-bottom:var(--kj-tab-list-gap)}.kj-tabs[data-orientation=vertical] .kj-tab-list{flex-direction:column;border-bottom:0;border-right:1px solid var(--kj-tab-list-border-color);margin:0}.kj-tab{position:relative;background:none;border:0;color:var(--kj-tab-fg);padding:var(--kj-tab-padding-y) var(--kj-tab-padding-x);font:var(--kj-tab-font-weight) var(--kj-tab-font-size) / 1.2 var(--kj-font-sans);cursor:pointer;transition:color var(--kj-transition),background-color var(--kj-transition),box-shadow var(--kj-transition)}.kj-tab:after{content:\"\";position:absolute;left:var(--kj-tab-indicator-inset);right:var(--kj-tab-indicator-inset);bottom:0;height:var(--kj-tab-indicator-size);background:var(--kj-tab-indicator-color);opacity:0;transition:opacity var(--kj-transition)}.kj-tab[aria-selected=true]{color:var(--kj-tab-fg-active)}.kj-tab[aria-selected=true]:after{opacity:1}.kj-tab:hover{color:var(--kj-tab-fg-active)}.kj-tab:focus-visible{outline:2px solid var(--kj-border-focus, var(--kj-bg-primary));outline-offset:-2px}.kj-tab:disabled,.kj-tab[aria-disabled=true]{opacity:.4;cursor:not-allowed}.kj-tabs[data-variant=pills]{display:inline-block}.kj-tabs[data-variant=pills] .kj-tab-list{display:inline-flex;gap:var(--kj-tab-tray-gap);padding:var(--kj-tab-tray-padding);background-color:var(--kj-tab-tray-bg);border:1px solid var(--kj-tab-tray-border-color);border-radius:var(--kj-tab-tray-radius);width:fit-content;margin-bottom:0}.kj-tabs[data-variant=pills] .kj-tab{border-radius:var(--kj-tab-chip-radius);margin:0}.kj-tabs[data-variant=pills] .kj-tab:after{content:none}.kj-tabs[data-variant=pills] .kj-tab[aria-selected=true]{background-color:var(--kj-tab-chip-bg-active);color:var(--kj-tab-fg-active);box-shadow:inset 0 0 0 1px var(--kj-tab-chip-ring-active)}.kj-tabs[data-orientation=vertical] .kj-tab{text-align:left}.kj-tabs[data-orientation=vertical] .kj-tab:after{left:auto;right:0;top:var(--kj-tab-indicator-inset);bottom:var(--kj-tab-indicator-inset);width:var(--kj-tab-indicator-size);height:auto}.kj-tab-panel{display:block;color:var(--kj-fg-default);font:.875rem var(--kj-font-sans);line-height:1.5}.kj-tab-panel[hidden]{display:none}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 /**
  * Styled wrapper around `KjTabList`. Hosts `role="tablist"` (provided by the
@@ -18893,11 +18924,11 @@ class KjTextareaComponent {
     kjInvalid = input(false, { ...(ngDevMode ? { debugName: "kjInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Disables the textarea. Reflects `aria-disabled` and native `disabled`. */
     kjDisabled = input(false, { ...(ngDevMode ? { debugName: "kjDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Theme variant. Configurable via `provideKjTextarea(...)`. */
-    kjVariant = input('outlined', /* @ts-ignore */
+    /** Theme variant. Unset falls back to the `provideKjTextarea(...)` default (`'outlined'`). */
+    kjVariant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
-    /** Theme size. Configurable via `provideKjTextarea(...)`. */
-    kjSize = input('md', /* @ts-ignore */
+    /** Theme size. Unset falls back to the `provideKjTextarea(...)` default (`'md'`). */
+    kjSize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     /** @internal stable id for the counter / aria-describedby wiring. */
     counterId = `kj-textarea-counter-${++nextId}`;