@radix-ng/primitives 1.0.4 → 1.0.6

package/fesm2022/radix-ng-primitives-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-switch.mjs","sources":["../../../packages/primitives/switch/src/switch-context.ts","../../../packages/primitives/switch/src/switch-input.ts","../../../packages/primitives/switch/src/switch-root.ts","../../../packages/primitives/switch/src/switch-thumb.ts","../../../packages/primitives/switch/index.ts","../../../packages/primitives/switch/radix-ng-primitives-switch.ts"],"sourcesContent":["import { Signal } from '@angular/core';\nimport { createContext } from '@radix-ng/primitives/core';\n\nexport interface RdxSwitchContext {\n    /** Whether the switch is on. */\n    readonly checked: Signal<boolean>;\n\n    /** Whether the switch is disabled. */\n    readonly disabled: Signal<boolean>;\n\n    /** Whether the switch is read-only (focusable, but cannot be toggled). */\n    readonly readonly: Signal<boolean>;\n\n    /** Whether the switch must be on to submit the owning form. */\n    readonly required: Signal<boolean>;\n\n    /** Name of the hidden form input. */\n    readonly name: Signal<string | undefined>;\n\n    /** Value submitted with the form when the switch is on. */\n    readonly value: Signal<string>;\n\n    readonly ariaLabel: Signal<string | undefined>;\n    readonly ariaLabelledBy: Signal<string | undefined>;\n\n    markAsTouched(): void;\n}\n\nexport const [injectSwitchContext, provideSwitchContext] = createContext<RdxSwitchContext>(\n    'RdxSwitchContext',\n    'components/switch'\n);\n","import { Directive } from '@angular/core';\nimport { injectSwitchContext } from './switch-context';\n\n/**\n * The hidden native checkbox that mirrors the switch state for form submission and screen readers.\n *\n * @see https://base-ui.com/react/components/switch\n */\n@Directive({\n    selector: 'input[rdxSwitchInput]',\n    exportAs: 'rdxSwitchInput',\n    host: {\n        type: 'checkbox',\n        tabindex: '-1',\n        'aria-hidden': 'true',\n        '[attr.name]': 'rootContext.name()',\n        '[attr.value]': 'rootContext.value()',\n        '[checked]': 'rootContext.checked()',\n        '[disabled]': 'rootContext.disabled()',\n        '[attr.required]': 'rootContext.required() ? \"\" : undefined',\n        '[attr.aria-label]': 'rootContext.ariaLabel()',\n        '[attr.aria-labelledby]': 'rootContext.ariaLabelledBy()',\n        '[attr.data-checked]': 'rootContext.checked() ? \"\" : undefined',\n        '[attr.data-unchecked]': 'rootContext.checked() ? undefined : \"\"',\n        style: 'transform: translateX(-100%); position: absolute; overflow: hidden; pointer-events: none; opacity: 0; margin: 0;',\n        '(blur)': 'rootContext.markAsTouched()'\n    }\n})\nexport class RdxSwitchInput {\n    protected readonly rootContext = injectSwitchContext();\n}\n","import { booleanAttribute, computed, Directive, inject, input, model, output } from '@angular/core';\nimport {\n    BooleanInput,\n    createCancelableChangeEventDetails,\n    injectControlValueAccessor,\n    injectId,\n    RdxCancelableChangeEventDetails,\n    RdxControlValueAccessor,\n    RdxFormCheckboxControl\n} from '@radix-ng/primitives/core';\nimport { provideSwitchContext, RdxSwitchContext } from './switch-context';\n\nexport type RdxSwitchCheckedChangeReason = 'trigger-press' | 'none';\nexport type RdxSwitchCheckedChangeEventDetails = RdxCancelableChangeEventDetails<RdxSwitchCheckedChangeReason>;\n\nexport interface RdxSwitchCheckedChangeEvent {\n    checked: boolean;\n    eventDetails: RdxSwitchCheckedChangeEventDetails;\n}\n\nconst context = (): RdxSwitchContext => {\n    const root = inject(RdxSwitchRoot);\n    const cva = injectControlValueAccessor<boolean | undefined>();\n\n    return {\n        checked: root.checkedState,\n        disabled: computed(() => !!cva.disabled()),\n        readonly: root.readonly,\n        required: root.required,\n        name: root.name,\n        value: root.submitValue,\n        ariaLabel: root.ariaLabel,\n        ariaLabelledBy: root.ariaLabelledBy,\n        markAsTouched: () => cva.markAsTouched()\n    };\n};\n\n/**\n * A control that toggles between on and off.\n *\n * @see https://base-ui.com/react/components/switch\n */\n@Directive({\n    selector: 'button[rdxSwitchRoot]',\n    exportAs: 'rdxSwitchRoot',\n    providers: [provideSwitchContext(context)],\n    hostDirectives: [\n        {\n            directive: RdxControlValueAccessor,\n            inputs: ['value: checked', 'disabled']\n        }\n    ],\n    host: {\n        role: 'switch',\n        type: 'button',\n        '[id]': 'id()',\n        '[attr.aria-checked]': 'checkedState()',\n        '[attr.aria-required]': 'required() ? \"true\" : undefined',\n        '[attr.aria-readonly]': 'readonly() ? \"true\" : undefined',\n        '[attr.data-checked]': 'checkedState() ? \"\" : undefined',\n        '[attr.data-unchecked]': 'checkedState() ? undefined : \"\"',\n        '[attr.data-disabled]': 'isDisabled() ? \"\" : undefined',\n        '[attr.data-readonly]': 'readonly() ? \"\" : undefined',\n        '[attr.data-required]': 'required() ? \"\" : undefined',\n        '[attr.disabled]': 'isDisabled() ? \"\" : undefined',\n        '(click)': 'toggle($event)',\n        '(blur)': 'cva.markAsTouched()',\n        '(keydown.enter)': '$event.preventDefault()'\n    }\n})\nexport class RdxSwitchRoot implements RdxFormCheckboxControl {\n    /** @ignore */\n    protected readonly cva = injectControlValueAccessor<boolean | undefined>();\n\n    readonly id = input<string>(injectId('rdx-switch-'));\n\n    /**\n     * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n     *\n     * @default false\n     */\n    readonly defaultChecked = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled checked state. Use with `(onCheckedChange)` or two-way `[(checked)]`.\n     */\n    readonly checked = model<boolean>(this.defaultChecked());\n\n    /**\n     * When `true`, prevents the user from interacting with the switch.\n     *\n     * @default false\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * When `true`, the switch is focusable but cannot be toggled.\n     *\n     * @default false\n     */\n    readonly readonly = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * When `true`, the switch must be on before the owning form can be submitted.\n     *\n     * @default false\n     */\n    readonly required = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** Name of the hidden form input rendered by `[rdxSwitchInput]`. */\n    readonly name = input<string>();\n\n    /**\n     * Value submitted with the form when the switch is on.\n     *\n     * Bound publicly as `[value]`; the TS member is named `submitValue` so the\n     * directive can satisfy `RdxFormCheckboxControl`, whose contract reserves a\n     * `value` member for `RdxFormValueControl` and forbids it on checkbox-style\n     * controls.\n     *\n     * @default 'on'\n     */\n    readonly submitValue = input<string>('on', { alias: 'value' });\n\n    readonly ariaLabelledBy = input<string | undefined>(undefined, { alias: 'aria-labelledby' });\n    readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n\n    /** Event handler called when the checked state of the switch changes. */\n    readonly onCheckedChange = output<RdxSwitchCheckedChangeEvent>();\n\n    /** @ignore */\n    readonly checkedState = computed(() => !!this.cva.value());\n    /** @ignore */\n    protected readonly isDisabled = computed(() => !!this.cva.disabled());\n\n    /** @ignore Toggles the checked state unless disabled or read-only. */\n    toggle(event?: Event): void {\n        if (this.isDisabled() || this.readonly()) {\n            return;\n        }\n\n        const next = !this.cva.value();\n        const trigger = event?.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;\n        const { eventDetails } = createCancelableChangeEventDetails(\n            event ? 'trigger-press' : 'none',\n            event ?? new Event('switch.checked-change'),\n            trigger\n        );\n        this.onCheckedChange.emit({ checked: next, eventDetails });\n        if (eventDetails.isCanceled()) {\n            return;\n        }\n\n        this.checked.set(next);\n        this.cva.setValue(next);\n    }\n}\n","import { Directive } from '@angular/core';\nimport { injectSwitchContext } from './switch-context';\n\n/**\n * The moving part of the switch that indicates whether it is on or off.\n *\n * @see https://base-ui.com/react/components/switch\n */\n@Directive({\n    selector: 'span[rdxSwitchThumb]',\n    exportAs: 'rdxSwitchThumb',\n    host: {\n        '[attr.data-checked]': 'rootContext.checked() ? \"\" : undefined',\n        '[attr.data-unchecked]': 'rootContext.checked() ? undefined : \"\"',\n        '[attr.data-disabled]': 'rootContext.disabled() ? \"\" : undefined',\n        '[attr.data-readonly]': 'rootContext.readonly() ? \"\" : undefined'\n    }\n})\nexport class RdxSwitchThumb {\n    protected readonly rootContext = injectSwitchContext();\n}\n","import { NgModule } from '@angular/core';\nimport { RdxSwitchInput } from './src/switch-input';\nimport { RdxSwitchRoot } from './src/switch-root';\nimport { RdxSwitchThumb } from './src/switch-thumb';\n\nexport * from './src/switch-context';\nexport * from './src/switch-input';\nexport * from './src/switch-root';\nexport * from './src/switch-thumb';\n\nexport const switchImports = [RdxSwitchRoot, RdxSwitchInput, RdxSwitchThumb];\n\n@NgModule({\n    imports: [...switchImports],\n    exports: [...switchImports]\n})\nexport class RdxSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"radix-ng-primitives-switch.mjs","sources":["../../../packages/primitives/switch/src/switch-context.ts","../../../packages/primitives/switch/src/switch-input.ts","../../../packages/primitives/switch/src/switch-root.ts","../../../packages/primitives/switch/src/switch-thumb.ts","../../../packages/primitives/switch/index.ts","../../../packages/primitives/switch/radix-ng-primitives-switch.ts"],"sourcesContent":["import { Signal } from '@angular/core';\nimport { createContext } from '@radix-ng/primitives/core';\n\nexport interface RdxSwitchContext {\n    /** Whether the switch is on. */\n    readonly checked: Signal<boolean>;\n\n    /** Whether the switch is disabled. */\n    readonly disabled: Signal<boolean>;\n\n    /** Whether the switch is read-only (focusable, but cannot be toggled). */\n    readonly readonly: Signal<boolean>;\n\n    /** Whether the switch must be on to submit the owning form. */\n    readonly required: Signal<boolean>;\n\n    /** Name of the hidden form input. */\n    readonly name: Signal<string | undefined>;\n\n    /** Value submitted with the form when the switch is on. */\n    readonly value: Signal<string>;\n\n    readonly ariaLabel: Signal<string | undefined>;\n    readonly ariaLabelledBy: Signal<string | undefined>;\n\n    markAsTouched(): void;\n}\n\nexport const [injectSwitchContext, provideSwitchContext] = createContext<RdxSwitchContext>(\n    'RdxSwitchContext',\n    'components/switch'\n);\n","import { Directive } from '@angular/core';\nimport { injectSwitchContext } from './switch-context';\n\n/**\n * The hidden native checkbox that mirrors the switch state for form submission and screen readers.\n *\n * @see https://base-ui.com/react/components/switch\n */\n@Directive({\n    selector: 'input[rdxSwitchInput]',\n    exportAs: 'rdxSwitchInput',\n    host: {\n        type: 'checkbox',\n        tabindex: '-1',\n        'aria-hidden': 'true',\n        '[attr.name]': 'rootContext.name()',\n        '[attr.value]': 'rootContext.value()',\n        '[checked]': 'rootContext.checked()',\n        '[disabled]': 'rootContext.disabled()',\n        '[attr.required]': 'rootContext.required() ? \"\" : undefined',\n        '[attr.aria-label]': 'rootContext.ariaLabel()',\n        '[attr.aria-labelledby]': 'rootContext.ariaLabelledBy()',\n        '[attr.data-checked]': 'rootContext.checked() ? \"\" : undefined',\n        '[attr.data-unchecked]': 'rootContext.checked() ? undefined : \"\"',\n        style: 'transform: translateX(-100%); position: absolute; overflow: hidden; pointer-events: none; opacity: 0; margin: 0;',\n        '(blur)': 'rootContext.markAsTouched()'\n    }\n})\nexport class RdxSwitchInput {\n    protected readonly rootContext = injectSwitchContext();\n}\n","import { booleanAttribute, computed, Directive, effect, inject, input, model, output } from '@angular/core';\nimport {\n    BooleanInput,\n    createCancelableChangeEventDetails,\n    injectControlValueAccessor,\n    injectId,\n    RdxCancelableChangeEventDetails,\n    RdxControlValueAccessor,\n    RdxFormCheckboxControl\n} from '@radix-ng/primitives/core';\nimport { provideSwitchContext, RdxSwitchContext } from './switch-context';\n\nexport type RdxSwitchCheckedChangeReason = 'none';\nexport type RdxSwitchCheckedChangeEventDetails = RdxCancelableChangeEventDetails<RdxSwitchCheckedChangeReason>;\n\nexport interface RdxSwitchCheckedChangeEvent {\n    checked: boolean;\n    eventDetails: RdxSwitchCheckedChangeEventDetails;\n}\n\nconst context = (): RdxSwitchContext => {\n    const root = inject(RdxSwitchRoot);\n    const cva = injectControlValueAccessor<boolean | undefined>();\n\n    return {\n        checked: root.checkedState,\n        disabled: computed(() => !!cva.disabled()),\n        readonly: root.readonly,\n        required: root.required,\n        name: root.name,\n        value: root.submitValue,\n        ariaLabel: root.ariaLabel,\n        ariaLabelledBy: root.ariaLabelledBy,\n        markAsTouched: () => cva.markAsTouched()\n    };\n};\n\n/**\n * A control that toggles between on and off.\n *\n * @see https://base-ui.com/react/components/switch\n */\n@Directive({\n    selector: 'button[rdxSwitchRoot]',\n    exportAs: 'rdxSwitchRoot',\n    providers: [provideSwitchContext(context)],\n    hostDirectives: [\n        {\n            directive: RdxControlValueAccessor,\n            inputs: ['value: checked', 'disabled']\n        }\n    ],\n    host: {\n        role: 'switch',\n        type: 'button',\n        '[id]': 'id()',\n        '[attr.aria-checked]': 'checkedState()',\n        '[attr.aria-required]': 'required() ? \"true\" : undefined',\n        '[attr.aria-readonly]': 'readonly() ? \"true\" : undefined',\n        '[attr.data-checked]': 'checkedState() ? \"\" : undefined',\n        '[attr.data-unchecked]': 'checkedState() ? undefined : \"\"',\n        '[attr.data-disabled]': 'isDisabled() ? \"\" : undefined',\n        '[attr.data-readonly]': 'readonly() ? \"\" : undefined',\n        '[attr.data-required]': 'required() ? \"\" : undefined',\n        // Native `<button rdxSwitchRoot>` → native `disabled` (Base UI's `nativeButton: true` path in\n        // `useFocusableWhenDisabled`). The hidden `[rdxSwitchInput]` is also disabled for form exclusion.\n        '[attr.disabled]': 'isDisabled() ? \"\" : undefined',\n        '(click)': 'toggle($event)',\n        '(blur)': 'cva.markAsTouched()'\n    }\n})\nexport class RdxSwitchRoot implements RdxFormCheckboxControl {\n    /** @ignore */\n    protected readonly cva = injectControlValueAccessor<boolean | undefined>();\n\n    readonly id = input<string>(injectId('rdx-switch-'));\n\n    /**\n     * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n     *\n     * @default false\n     */\n    readonly defaultChecked = input<boolean | undefined, BooleanInput | undefined>(undefined, {\n        transform: (value) => (value === undefined ? undefined : booleanAttribute(value))\n    });\n\n    /**\n     * The controlled checked state. Use with `(onCheckedChange)` or two-way `[(checked)]`.\n     */\n    readonly checked = model<boolean>(false);\n\n    /**\n     * When `true`, prevents the user from interacting with the switch.\n     *\n     * @default false\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * When `true`, the switch is focusable but cannot be toggled.\n     *\n     * @default false\n     */\n    readonly readonly = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * When `true`, the switch must be on before the owning form can be submitted.\n     *\n     * @default false\n     */\n    readonly required = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** Name of the hidden form input rendered by `[rdxSwitchInput]`. */\n    readonly name = input<string>();\n\n    /**\n     * Value submitted with the form when the switch is on.\n     *\n     * Bound publicly as `[value]`; the TS member is named `submitValue` so the\n     * directive can satisfy `RdxFormCheckboxControl`, whose contract reserves a\n     * `value` member for `RdxFormValueControl` and forbids it on checkbox-style\n     * controls.\n     *\n     * @default 'on'\n     */\n    readonly submitValue = input<string>('on', { alias: 'value' });\n\n    readonly ariaLabelledBy = input<string | undefined>(undefined, { alias: 'aria-labelledby' });\n    readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n\n    /** Event handler called when the checked state of the switch changes. */\n    readonly onCheckedChange = output<RdxSwitchCheckedChangeEvent>();\n\n    /** @ignore */\n    readonly checkedState = computed(() => !!this.cva.value());\n    /** @ignore */\n    protected readonly isDisabled = computed(() => !!this.cva.disabled());\n\n    constructor() {\n        // Apply the uncontrolled `defaultChecked` once. `input()` values are not bound at field-init,\n        // so the on state must be seeded here — into both the `checked` model and the CVA value, which\n        // is the source of truth for `checkedState`/`aria-checked`/`data-checked`.\n        let hasAppliedDefault = false;\n        effect(() => {\n            const defaultChecked = this.defaultChecked();\n            if (!hasAppliedDefault && defaultChecked !== undefined) {\n                hasAppliedDefault = true;\n                this.checked.set(defaultChecked);\n                this.cva.setValue(defaultChecked);\n            }\n        });\n    }\n\n    /** @ignore Toggles the checked state unless disabled or read-only. */\n    toggle(event?: Event): void {\n        if (this.isDisabled() || this.readonly()) {\n            return;\n        }\n\n        const next = !this.cva.value();\n        const trigger = event?.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;\n        const { eventDetails } = createCancelableChangeEventDetails(\n            'none',\n            event ?? new Event('switch.checked-change'),\n            trigger\n        );\n        this.onCheckedChange.emit({ checked: next, eventDetails });\n        if (eventDetails.isCanceled()) {\n            return;\n        }\n\n        this.checked.set(next);\n        this.cva.setValue(next);\n    }\n}\n","import { Directive } from '@angular/core';\nimport { injectSwitchContext } from './switch-context';\n\n/**\n * The moving part of the switch that indicates whether it is on or off.\n *\n * @see https://base-ui.com/react/components/switch\n */\n@Directive({\n    selector: 'span[rdxSwitchThumb]',\n    exportAs: 'rdxSwitchThumb',\n    host: {\n        '[attr.data-checked]': 'rootContext.checked() ? \"\" : undefined',\n        '[attr.data-unchecked]': 'rootContext.checked() ? undefined : \"\"',\n        '[attr.data-disabled]': 'rootContext.disabled() ? \"\" : undefined',\n        '[attr.data-readonly]': 'rootContext.readonly() ? \"\" : undefined',\n        '[attr.data-required]': 'rootContext.required() ? \"\" : undefined'\n    }\n})\nexport class RdxSwitchThumb {\n    protected readonly rootContext = injectSwitchContext();\n}\n","import { NgModule } from '@angular/core';\nimport { RdxSwitchInput } from './src/switch-input';\nimport { RdxSwitchRoot } from './src/switch-root';\nimport { RdxSwitchThumb } from './src/switch-thumb';\n\nexport * from './src/switch-context';\nexport * from './src/switch-input';\nexport * from './src/switch-root';\nexport * from './src/switch-thumb';\n\nexport const switchImports = [RdxSwitchRoot, RdxSwitchInput, RdxSwitchThumb];\n\n@NgModule({\n    imports: [...switchImports],\n    exports: [...switchImports]\n})\nexport class RdxSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/radix-ng-primitives-tabs.mjs

@@ -27,7 +27,8 @@ class RdxTabsIndicator {
         this.rootContext = injectTabsRootContext();
         this.destroyRef = inject(DestroyRef);
         /** @ignore */
-        this.geometry = signal(null, ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
+        this.geometry = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
         // Re-measure whenever the selection, orientation or the list element changes.
         effect(() => {
             this.rootContext.value();
@@ -86,10 +87,10 @@ class RdxTabsIndicator {
             height: tabRect.height
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTabsIndicator, isStandalone: true, selector: "[rdxTabsIndicator]", host: { properties: { "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "style.--active-tab-top.px": "geometry()?.top", "style.--active-tab-right.px": "geometry()?.right", "style.--active-tab-bottom.px": "geometry()?.bottom", "style.--active-tab-left.px": "geometry()?.left", "style.--active-tab-width.px": "geometry()?.width", "style.--active-tab-height.px": "geometry()?.height" } }, exportAs: ["rdxTabsIndicator"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxTabsIndicator, isStandalone: true, selector: "[rdxTabsIndicator]", host: { properties: { "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "style.--active-tab-top.px": "geometry()?.top", "style.--active-tab-right.px": "geometry()?.right", "style.--active-tab-bottom.px": "geometry()?.bottom", "style.--active-tab-left.px": "geometry()?.left", "style.--active-tab-width.px": "geometry()?.width", "style.--active-tab-height.px": "geometry()?.height" } }, exportAs: ["rdxTabsIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsIndicator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTabsIndicator]',
@@ -138,16 +139,20 @@ class RdxTabsList {
                 }
             });
             return map;
-        }, ...(ngDevMode ? [{ debugName: "tabMap" }] : /* istanbul ignore next */ []));
-        this.tabMetadata = computed(() => Array.from(this.tabMap().values()), ...(ngDevMode ? [{ debugName: "tabMetadata" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabMap" }] : /* istanbul ignore next */ []));
+        this.tabMetadata = computed(() => Array.from(this.tabMap().values()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabMetadata" }] : /* istanbul ignore next */ []));
         this.disabledIndices = computed(() => this.tabMetadata()
             .filter((metadata) => metadata.disabled)
-            .map((metadata) => metadata.index), ...(ngDevMode ? [{ debugName: "disabledIndices" }] : /* istanbul ignore next */ []));
+            .map((metadata) => metadata.index), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledIndices" }] : /* istanbul ignore next */ []));
         this.activeIndex = computed(() => {
             const value = this.rootContext.value();
             const metadata = this.tabMetadata().find((tab) => tab.value === value);
             return metadata?.index ?? -1;
-        }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         this.rootContext.setTabListElement(this.elementRef.nativeElement);
         effect(() => {
             this.compositeRoot.setOrientation(this.rootContext.orientation());
@@ -181,10 +186,10 @@ class RdxTabsList {
         });
         effect(() => this.rootContext.setActivateOnFocus(this.activateOnFocus()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTabsList, isStandalone: true, selector: "[rdxTabsList]", inputs: { activateOnFocus: { classPropertyName: "activateOnFocus", publicName: "activateOnFocus", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist" }, properties: { "attr.aria-orientation": "rootContext.orientation() === \"vertical\" ? \"vertical\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()" } }, exportAs: ["rdxTabsList"], hostDirectives: [{ directive: i1.RdxCompositeRoot }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxTabsList, isStandalone: true, selector: "[rdxTabsList]", inputs: { activateOnFocus: { classPropertyName: "activateOnFocus", publicName: "activateOnFocus", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist" }, properties: { "attr.aria-orientation": "rootContext.orientation() === \"vertical\" ? \"vertical\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()" } }, exportAs: ["rdxTabsList"], hostDirectives: [{ directive: i1.RdxCompositeRoot }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTabsList]',
@@ -222,7 +227,8 @@ class RdxTabsPanel {
         /**
          * A unique value that associates the panel with a tab.
          */
-        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * Keep the panel contents mounted in the DOM while inactive (the contents are still hidden).
          * Only relevant together with `*rdxTabsPanelPresence`, which otherwise unmounts them.
@@ -234,7 +240,8 @@ class RdxTabsPanel {
         /** Reactive enter/exit transition phase (`'starting'` | `'ending'` | `undefined`). */
         this.transitionStatus = this.transition.status;
         /** @ignore */
-        this.panelId = computed(() => makePanelId(this.rootContext.baseId, this.value()), ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+        this.panelId = computed(() => makePanelId(this.rootContext.baseId, this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this.tabId = computed(() => {
             const value = this.value();
@@ -244,23 +251,28 @@ class RdxTabsPanel {
                 }
             }
             return makeTabId(this.rootContext.baseId, value);
-        }, ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
         /** Whether this panel's tab is currently selected. */
-        this.active = computed(() => this.rootContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.active = computed(() => this.rootContext.value() === this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         /** `true` once a `*rdxTabsPanelPresence` child takes over mounting. */
-        this.hasPresence = signal(false, ...(ngDevMode ? [{ debugName: "hasPresence" }] : /* istanbul ignore next */ []));
+        this.hasPresence = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasPresence" }] : /* istanbul ignore next */ []));
         /**
          * Whether the contents should be present for `*rdxTabsPanelPresence`. Flips with `active` so the
          * presence directive owns the exit-animation timing (it keeps the node mounted until its exit
          * `@keyframes` finishes); `keepMounted` keeps them mounted regardless.
          */
-        this.present = computed(() => this.keepMounted() || this.active(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.keepMounted() || this.active(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         /**
          * The `hidden` attribute value. The panel is shown while active or while its exit transition
          * runs. When a presence child unmounts the contents we no longer force `hidden` (the empty
          * element renders nothing), unless `keepMounted` keeps the inactive contents around.
          */
-        this.hidden = computed(() => !this.active() && this.transitionStatus() !== 'ending' && (!this.hasPresence() || this.keepMounted()), ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = computed(() => !this.active() && this.transitionStatus() !== 'ending' && (!this.hasPresence() || this.keepMounted()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
         /** @ignore Index of the panel in DOM order. */
         this.index = this.listItem.index;
         this.previousActive = false;
@@ -291,10 +303,10 @@ class RdxTabsPanel {
     markHasPresence() {
         this.hasPresence.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTabsPanel, isStandalone: true, selector: "[rdxTabsPanel]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "panelId()", "attr.tabindex": "active() ? 0 : -1", "attr.aria-labelledby": "tabId()", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "attr.data-index": "index()", "attr.data-hidden": "active() ? undefined : \"\"", "attr.data-starting-style": "transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "transitionStatus() === \"ending\" ? \"\" : undefined", "hidden": "hidden()" } }, providers: [provideRdxPresenceContext(panelPresenceContext)], exportAs: ["rdxTabsPanel"], hostDirectives: [{ directive: i1.RdxCompositeListItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxTabsPanel, isStandalone: true, selector: "[rdxTabsPanel]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "panelId()", "attr.tabindex": "active() ? 0 : -1", "attr.aria-labelledby": "tabId()", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "attr.data-index": "index()", "attr.data-hidden": "active() ? undefined : \"\"", "attr.data-starting-style": "transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "transitionStatus() === \"ending\" ? \"\" : undefined", "hidden": "hidden()" } }, providers: [provideRdxPresenceContext(panelPresenceContext)], exportAs: ["rdxTabsPanel"], hostDirectives: [{ directive: i1.RdxCompositeListItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsPanel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTabsPanel]',
@@ -329,10 +341,10 @@ class RdxTabsPanelPresence {
     constructor() {
         inject(RdxTabsPanel).markHasPresence();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsPanelPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTabsPanelPresence, isStandalone: true, selector: "ng-template[rdxTabsPanelPresence]", hostDirectives: [{ directive: i1$1.RdxPresenceDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsPanelPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxTabsPanelPresence, isStandalone: true, selector: "ng-template[rdxTabsPanelPresence]", hostDirectives: [{ directive: i1$1.RdxPresenceDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsPanelPresence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsPanelPresence, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[rdxTabsPanelPresence]',
@@ -368,21 +380,24 @@ class RdxTabsRoot {
         /**
          * The value of the currently selected tab. Use together with `(onValueChange)` for controlled state.
          */
-        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * The value of the tab that should be initially selected when uncontrolled.
          * When omitted, Base UI parity uses `0` as the implicit default and falls back to the first enabled tab.
          *
          * @default 0
          */
-        this.defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        this.defaultValue = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         /**
          * The orientation the tabs are laid out. Controls arrow-key navigation
          * (left/right vs. up/down).
          *
          * @default 'horizontal'
          */
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
          * Event emitted when the selected tab changes.
          *
@@ -392,14 +407,19 @@ class RdxTabsRoot {
          */
         this.onValueChange = output();
         /** @ignore Set by `[rdxTabsList]`. */
-        this.activateOnFocus = signal(false, ...(ngDevMode ? [{ debugName: "activateOnFocus" }] : /* istanbul ignore next */ []));
+        this.activateOnFocus = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activateOnFocus" }] : /* istanbul ignore next */ []));
         /** @ignore Set by `[rdxTabsList]`. */
-        this.tabListElement = signal(null, ...(ngDevMode ? [{ debugName: "tabListElement" }] : /* istanbul ignore next */ []));
+        this.tabListElement = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabListElement" }] : /* istanbul ignore next */ []));
         /** @ignore Set by `[rdxTabsList]`. */
-        this.tabMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "tabMap" }] : /* istanbul ignore next */ []));
+        this.tabMap = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabMap" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.activationDirection = signal('none', ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
-        this.externallyControlled = signal(false, ...(ngDevMode ? [{ debugName: "externallyControlled" }] : /* istanbul ignore next */ []));
+        this.activationDirection = signal('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
+        this.externallyControlled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "externallyControlled" }] : /* istanbul ignore next */ []));
         this.hasObservedValue = false;
         this.internalValueCommit = false;
         this.hasAppliedDefaultValue = false;
@@ -523,10 +543,10 @@ class RdxTabsRoot {
         eventDetails.activationDirection = 'none';
         this.onValueChange.emit({ value, eventDetails });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTabsRoot, isStandalone: true, selector: "[rdxTabsRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-activation-direction": "activationDirection()" } }, providers: [provideTabsRootContext(rootContext)], exportAs: ["rdxTabsRoot"], hostDirectives: [{ directive: i1.RdxCompositeList }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxTabsRoot, isStandalone: true, selector: "[rdxTabsRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-activation-direction": "activationDirection()" } }, providers: [provideTabsRootContext(rootContext)], exportAs: ["rdxTabsRoot"], hostDirectives: [{ directive: i1.RdxCompositeList }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsRoot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTabsRoot]',
@@ -626,7 +646,8 @@ class RdxTabsTab {
         /**
          * A unique value that associates the tab with a panel.
          */
-        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * When `true`, prevents the user from interacting with the tab.
          * Disabled tabs remain focusable during composite keyboard navigation, matching Base UI.
@@ -641,13 +662,17 @@ class RdxTabsTab {
         /**
          * Optional id for the tab element. When omitted, an id is derived from the root id and tab value.
          */
-        this.id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.id = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.tabId = computed(() => this.id() ?? makeTabId(this.rootContext.baseId, this.value()), ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+        this.tabId = computed(() => this.id() ?? makeTabId(this.rootContext.baseId, this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.panelId = computed(() => makePanelId(this.rootContext.baseId, this.value()), ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+        this.panelId = computed(() => makePanelId(this.rootContext.baseId, this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.active = computed(() => this.rootContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.active = computed(() => this.rootContext.value() === this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         this.isPressing = false;
         this.isMainButton = false;
         effect(() => {
@@ -701,10 +726,10 @@ class RdxTabsTab {
             this.rootContext.setValue(this.value(), event, 'none');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsTab, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTabsTab, isStandalone: true, selector: "[rdxTabsTab]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "focus": "onFocus($event)" }, properties: { "attr.type": "nativeButton() ? \"button\" : undefined", "attr.id": "tabId()", "attr.aria-selected": "active()", "attr.aria-controls": "panelId()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.disabled": "null", "attr.data-composite-item-active": "active() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "attr.data-active": "active() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["rdxTabsTab"], hostDirectives: [{ directive: i1.RdxCompositeItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsTab, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxTabsTab, isStandalone: true, selector: "[rdxTabsTab]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "focus": "onFocus($event)" }, properties: { "attr.type": "nativeButton() ? \"button\" : undefined", "attr.id": "tabId()", "attr.aria-selected": "active()", "attr.aria-controls": "panelId()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.disabled": "null", "attr.data-composite-item-active": "active() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "attr.data-active": "active() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["rdxTabsTab"], hostDirectives: [{ directive: i1.RdxCompositeItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsTab, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTabsTab]',
@@ -733,11 +758,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 const tabsImports = [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator];
 class RdxTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsModule, imports: [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator], exports: [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsModule, imports: [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator], exports: [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...tabsImports],