@ardium-ui/ui 5.0.0-alpha.100 → 5.0.0-alpha.102

package/fesm2022/ardium-ui-ui.mjs

@@ -2,10 +2,10 @@ import 'first-last';
 import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { signal, computed, InjectionToken, Directive, Input, HostBinding, input, output, ViewChildren, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, Renderer2, linkedSignal, untracked, contentChildren, Injectable, Injector } from '@angular/core';
+import { signal, computed, InjectionToken, Directive, Input, HostBinding, input, output, ViewChildren, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, Renderer2, linkedSignal, untracked, contentChildren, reflectComponentType, Injectable, Injector } from '@angular/core';
 import { Validators, NG_VALUE_ACCESSOR, TouchedChangeEvent } from '@angular/forms';
 import * as i4 from '@ardium-ui/devkit';
-import { arraySignal, coerceBooleanProperty, coerceNumberProperty, trackBoundControl, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateProperty, getUTCDate as getUTCDate$1, ArdiumHoldModule } from '@ardium-ui/devkit';
+import { arraySignal, coerceBooleanProperty, coerceNumberProperty, trackBoundControl, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateOnlyProperty, getUTCDate as getUTCDate$1, ArdiumHoldModule } from '@ardium-ui/devkit';
 import { isDefined, any, isPrimitive, isAnyString, isNull, isNumber, isString, isArray, isFunction, isRegExp, evaluate, isObject, isPromise, isDate } from 'simple-bool';
 import { resolvePath } from 'resolve-object-path';
 import { TakeChance } from 'take-chance';
@@ -5924,6 +5924,18 @@ function getDateComponents(date, UTC) {
         date: UTC ? date.getUTCDate() : date.getDate(),
     };
 }
+function startOfDay(date, UTC = false) {
+    if (UTC) {
+        return getUTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+    }
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function endOfDay(date, UTC = false) {
+    if (UTC) {
+        return getUTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 23, 59, 59, 999);
+    }
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
 
 //public (exported)
 class ArdDateInputPrefixTemplateDirective {
@@ -6170,8 +6182,12 @@ class _AbstractDateInput extends _FormFieldComponentBase {
                 return value;
             },
         });
-        this.min = input(this._DEFAULTS.min, { transform: v => coerceDateProperty(v, this._DEFAULTS.min) });
-        this.max = input(this._DEFAULTS.max, { transform: v => coerceDateProperty(v, this._DEFAULTS.max) });
+        this.min = input(this._DEFAULTS.min, {
+            transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.min, true)),
+        });
+        this.max = input(this._DEFAULTS.max, {
+            transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.max, true)),
+        });
         this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
         this._UTCAfterInit = signal(this._DEFAULTS.UTC);
         this.filter = input(this._DEFAULTS.filter);
@@ -7732,10 +7748,10 @@ class _AbstractCalendar extends _FormFieldComponentBase {
         this.yearSelect = output();
         this.monthSelect = output();
         this.min = input(this._DEFAULTS.min, {
-            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.min, true)),
+            transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.min, true)),
         });
         this.max = input(this._DEFAULTS.max, {
-            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.max, true)),
+            transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.max, true)),
         });
         this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
         this._UTCAfterInit = signal(this._DEFAULTS.UTC);
@@ -8831,17 +8847,30 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
         if (this.minMaxStrategy() === ArdDateInputMinMaxStrategy.Adjust && date) {
             const min = this.min();
             const max = this.max();
+            // min and max are always in UTC when they are set, so we need to convert the date to UTC for comparison
+            date = getUTCDate(date.getFullYear(), date.getMonth(), date.getDate());
             if (min && date < min) {
-                date = new Date(min);
+                date = min;
             }
             else if (max && date > max) {
-                date = new Date(max);
+                date = max;
+            }
+            // convert the date back to local time if the UTC mode is off
+            if (!this._UTCAfterInit()) {
+                date = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
             }
+            if (date.toISOString() !== this.value()?.toISOString()) {
+                this.value.set(date);
+            }
+            return;
         }
+        // deserialized date should always be in local time, so we need to convert it to UTC if the UTC mode is on
         if (date && this._UTCAfterInit()) {
             date = getUTCDate(date.getFullYear(), date.getMonth(), date.getDate());
         }
-        this.value.set(date);
+        if (date?.toISOString() !== this.value()?.toISOString()) {
+            this.value.set(date);
+        }
     }
     _setDateInputAttributes() {
         const input = this.dateInput()?.nativeElement;
@@ -10669,10 +10698,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+function contextToInputs(context, component) {
+    let allowed;
+    return computed(() => {
+        if (!component)
+            return {};
+        if (!allowed) {
+            const meta = reflectComponentType(component);
+            if (!meta)
+                return {};
+            allowed = new Set(meta.inputs.map(i => i.templateName));
+        }
+        return Object.fromEntries(Object.entries(context()).filter(([key]) => allowed.has(key)));
+    });
+}
+
 const _checkboxDefaults = {
     ..._booleanComponentDefaults,
     color: SimpleComponentColor.Primary,
     unselectedColor: SimpleComponentColor.None,
+    CheckboxIconComponent: undefined,
 };
 const ARD_CHECKBOX_DEFAULTS = new InjectionToken('ard-checkbox-defaults', {
     factory: () => ({
@@ -10735,6 +10780,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         });
         this.State = CheckboxState;
         //! templates
+        this.checkboxIconComponent = this._DEFAULTS.CheckboxIconComponent;
         this.templateRepository = contentChild(_CheckboxTemplateRepositoryDirective);
         this.checkboxTemplate = contentChild(ArdCheckboxTemplateDirective);
         this.checkboxTemplateContext = computed(() => ({
@@ -10744,6 +10790,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
             state: this.state(),
             internalState: this.internalState(),
         }));
+        this.checkboxIconInputs = contextToInputs(this.checkboxTemplateContext, this.checkboxIconComponent);
     }
     //override the "selected" setter, so it changes the state too.
     set _selected(v) {
@@ -10765,13 +10812,13 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         this._emitTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, deps: [{ token: ARD_CHECKBOX_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumCheckboxComponent, isStandalone: false, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, internalState: { classPropertyName: "internalState", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { internalState: "stateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumCheckboxComponent, isStandalone: false, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, internalState: { classPropertyName: "internalState", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { internalState: "stateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n            ? 'check_box_outline_blank'\r\n            : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  @if (checkboxIconComponent) {\r\n    <!-- render the component -->\r\n    <ng-template\r\n      [ngComponentOutlet]=\"checkboxIconComponent\"\r\n      [ngComponentOutletInputs]=\"checkboxIconInputs()\"\r\n    />\r\n  } @else {\r\n    <ng-template\r\n      #defaultCheckboxTemplate\r\n      let-state=\"state\"\r\n      let-selected=\"selected\"\r\n    >\r\n      <ard-icon\r\n        [icon]=\"\r\n          state === State.Selected\r\n            ? 'check_box'\r\n            : state === State.Unselected\r\n              ? 'check_box_outline_blank'\r\n              : 'indeterminate_check_box'\r\n        \"\r\n        [filled]=\"state !== State.Indeterminate\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"\r\n        templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\r\n      \"\r\n      [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n    />\r\n  }\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
             type: Component,
@@ -10781,7 +10828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n            ? 'check_box_outline_blank'\r\n            : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"] }]
+                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  @if (checkboxIconComponent) {\r\n    <!-- render the component -->\r\n    <ng-template\r\n      [ngComponentOutlet]=\"checkboxIconComponent\"\r\n      [ngComponentOutletInputs]=\"checkboxIconInputs()\"\r\n    />\r\n  } @else {\r\n    <ng-template\r\n      #defaultCheckboxTemplate\r\n      let-state=\"state\"\r\n      let-selected=\"selected\"\r\n    >\r\n      <ard-icon\r\n        [icon]=\"\r\n          state === State.Selected\r\n            ? 'check_box'\r\n            : state === State.Unselected\r\n              ? 'check_box_outline_blank'\r\n              : 'indeterminate_check_box'\r\n        \"\r\n        [filled]=\"state !== State.Indeterminate\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"\r\n        templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\r\n      \"\r\n      [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n    />\r\n  }\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_DEFAULTS]
@@ -16357,18 +16404,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
-/**
- * Normalizes various responsive value representations into a full {@link ArdBreakpointsConfig}.
- *
- * - `number`: same value is applied to all breakpoints.
- * - `string`: either a single number or a space-separated breakpoint list
- *   like `"base:1 sm:2 md:3 lg:4 xl:5"`.
- * - `ArdBreakpointsConfig`: missing breakpoints are filled based on smaller ones.
- */
-function transformResponsiveValue(v, breakpoints, parseValue) {
+function transformResponsiveValue(v, breakpoints, componentId, parseValue, parseToR) {
     // if it's an object, fill in missing breakpoints
     if (isObject(v)) {
-        return fillInMissingBreakpoints(v, breakpoints);
+        const vAsR = {};
+        for (const [bp, val] of Object.entries(v)) {
+            vAsR[bp] = parseToR?.(val) ?? val;
+        }
+        return fillInMissingBreakpoints(vAsR, breakpoints, componentId);
     }
     // parse string like "xs:1 sm:2 md:3 lg:4 xl:5"
     const items = coerceArrayProperty(v, ' ')
@@ -16383,25 +16426,25 @@ function transformResponsiveValue(v, breakpoints, parseValue) {
     })
         .filter(item => {
         if (!breakpoints.includes(item.breakpoint)) {
-            console.warn(`ARD-WA6010: Unknown breakpoint "${item.breakpoint}:${item.value}". This entry will be ignored.`);
+            console.warn(`ARD-WA${componentId}0: Unknown breakpoint "${item.breakpoint}:${item.value}". This entry will be ignored.`);
             return false;
         }
         if (item.value === undefined || item.value === null || item.value === '' || (isNumber(item.value) && isNaN(item.value))) {
-            console.warn(`ARD-WA6011: Invalid value for breakpoint "${item.breakpoint}". This entry will be ignored.`);
+            console.warn(`ARD-WA${componentId}1: Invalid value for breakpoint "${item.breakpoint}". This entry will be ignored.`);
             return false;
         }
         return true;
     })
         .reduce((acc, curr) => {
         if (acc[curr.breakpoint]) {
-            console.warn(`ARD-WA6012: Duplicate value for breakpoint "${curr.breakpoint}". The value "${curr.rawValue}" will overwrite the previous value "${acc[curr.breakpoint]}".`);
+            console.warn(`ARD-WA${componentId}2: Duplicate value for breakpoint "${curr.breakpoint}". The value "${curr.rawValue}" will overwrite the previous value "${acc[curr.breakpoint]}".`);
         }
         acc[curr.breakpoint] = curr.value;
         return acc;
     }, {});
-    return fillInMissingBreakpoints(items, breakpoints);
+    return fillInMissingBreakpoints(items, breakpoints, componentId);
 }
-function fillInMissingBreakpoints(config, breakpoints) {
+function fillInMissingBreakpoints(config, breakpoints, componentId) {
     const filledConfig = {};
     let lastValue = undefined;
     for (const bp of breakpoints) {
@@ -16414,58 +16457,58 @@ function fillInMissingBreakpoints(config, breakpoints) {
             filledConfig[bp] = lastValue;
             continue;
         }
-        throw new Error(`ARD-FT6013: Missing value for breakpoint "${bp}" and no smaller breakpoint to inherit from.`);
+        throw new Error(`ARD-FT${componentId}3: Missing value for breakpoint "${bp}" and no smaller breakpoint to inherit from.`);
     }
     return filledConfig;
 }
 
-function parseNumberOrBreakpointConfig(value, breakpoints) {
+function parseNumberOrBreakpointConfig(value, breakpoints, componentId) {
     if (typeof value === 'number') {
         // If it's a number, apply it to all breakpoints
-        return fillInMissingBreakpoints({ xs: value }, breakpoints);
+        return fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, coerceNumberProperty);
+    return transformResponsiveValue(value, breakpoints, componentId, coerceNumberProperty);
 }
-function parseSizeOrBreakpointConfig(value, breakpoints) {
+function parseSizeOrBreakpointConfig(value, breakpoints, componentId) {
     if (typeof value === 'number' || isArdGridSize(value)) {
         // If it's a number or ArdGridSize, apply it to all breakpoints
-        return fillInMissingBreakpoints({ xs: value }, breakpoints);
+        return fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, v => {
+    return transformResponsiveValue(value, breakpoints, componentId, v => {
         if (isArdGridSize(v)) {
             return v;
         }
         return coerceNumberProperty(v);
     });
 }
-function parseBooleanOrBreakpointConfig(value, breakpoints) {
+function parseBooleanOrBreakpointConfig(value, breakpoints, componentId) {
     if (typeof value === 'boolean') {
         // If it's a boolean, apply it to all breakpoints
-        return fillInMissingBreakpoints({ xs: value }, breakpoints);
+        return fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
     if (value === '' || value === 'true') {
-        return fillInMissingBreakpoints({ xs: true }, breakpoints);
+        return fillInMissingBreakpoints({ xs: true }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, v => v === 'true');
+    return transformResponsiveValue(value, breakpoints, componentId, v => v === 'true');
 }
-function parseCSSUnitOrBreakpointConfig(value, breakpoints) {
+function parseCSSUnitOrBreakpointConfig(value, breakpoints, componentId) {
     if (isNull(value)) {
         return value;
     }
     if (isNumber(value)) {
-        fillInMissingBreakpoints({ xs: value }, breakpoints);
+        fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, v => {
+    return transformResponsiveValue(value, breakpoints, componentId, v => {
         const num = coerceNumberProperty(v, NaN);
         return isNaN(num) ? v : `calc(var(--ard-grid-spacing-unit) * ${num})`;
-    });
+    }, v => (typeof v === 'number' ? `calc(var(--ard-grid-spacing-unit) * ${v})` : v));
 }
-function parseEnumOrBreakpointConfig(value, breakpoints, isEnumValue) {
+function parseEnumOrBreakpointConfig(value, breakpoints, componentId, isEnumValue) {
     if (isEnumValue(value)) {
         // If it's an enum value, apply it to all breakpoints
-        return fillInMissingBreakpoints({ xs: value }, breakpoints);
+        return fillInMissingBreakpoints({ xs: value }, breakpoints, componentId);
     }
-    return transformResponsiveValue(value, breakpoints, v => (isEnumValue(v) ? v : undefined));
+    return transformResponsiveValue(value, breakpoints, componentId, v => (isEnumValue(v) ? v : undefined));
 }
 
 //! size
@@ -16544,33 +16587,34 @@ function provideGridDefaults(config) {
 
 class ArdiumGridComponent {
     constructor() {
+        this._componentId = '601';
         this._DEFAULTS = inject(ARD_GRID_DEFAULTS);
         this._breakpointService = inject(ArdiumBreakpointService);
         this._wasContentInitialized = false;
         //! is container
         this.container = input(false, { transform: v => coerceBooleanProperty(v) });
         //! configurations
-        this.columns = input(parseNumberOrBreakpointConfig(this._DEFAULTS.columns, this._breakpointService.breakpoints), { transform: value => parseNumberOrBreakpointConfig(value, this._breakpointService.breakpoints) });
-        this.size = input(parseSizeOrBreakpointConfig(this._DEFAULTS.size, this._breakpointService.breakpoints), {
-            transform: value => parseSizeOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.columns = input(parseNumberOrBreakpointConfig(this._DEFAULTS.columns, this._breakpointService.breakpoints, this._componentId), { transform: value => parseNumberOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId) });
+        this.size = input(parseSizeOrBreakpointConfig(this._DEFAULTS.size, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseSizeOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.reverse = input(parseBooleanOrBreakpointConfig(this._DEFAULTS.reverse, this._breakpointService.breakpoints), { transform: value => parseBooleanOrBreakpointConfig(value, this._breakpointService.breakpoints) });
-        this.justifyContent = input(parseEnumOrBreakpointConfig(this._DEFAULTS.justifyContent, this._breakpointService.breakpoints, isArdGridJustify), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridJustify),
+        this.reverse = input(parseBooleanOrBreakpointConfig(this._DEFAULTS.reverse, this._breakpointService.breakpoints, this._componentId), { transform: value => parseBooleanOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId) });
+        this.justifyContent = input(parseEnumOrBreakpointConfig(this._DEFAULTS.justifyContent, this._breakpointService.breakpoints, this._componentId, isArdGridJustify), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridJustify),
         });
-        this.alignItems = input(parseEnumOrBreakpointConfig(this._DEFAULTS.alignItems, this._breakpointService.breakpoints, isArdGridAlign), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridAlign),
+        this.alignItems = input(parseEnumOrBreakpointConfig(this._DEFAULTS.alignItems, this._breakpointService.breakpoints, this._componentId, isArdGridAlign), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridAlign),
         });
-        this.spacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.spacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.spacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.spacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.columnSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.columnSpacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.columnSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.columnSpacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.rowSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.rowSpacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.rowSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.rowSpacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.wrap = input(parseEnumOrBreakpointConfig(this._DEFAULTS.wrap, this._breakpointService.breakpoints, isArdGridWrap), { transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridWrap) });
+        this.wrap = input(parseEnumOrBreakpointConfig(this._DEFAULTS.wrap, this._breakpointService.breakpoints, this._componentId, isArdGridWrap), { transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridWrap) });
         //! inherited properties
         this.inheritedColumns = signal(null);
         this.inheritedReverse = signal(null);
@@ -16606,8 +16650,14 @@ class ArdiumGridComponent {
         this.currentColumnSpacing = computed(() => this.finalColumnSpacing()[this._breakpointService.currentBreakpoint() ?? 'xs']);
         this.currentRowSpacing = computed(() => this.finalRowSpacing()[this._breakpointService.currentBreakpoint() ?? 'xs']);
         this.currentWrap = computed(() => this.wrapOrInherited()[this._breakpointService.currentBreakpoint() ?? 'xs']);
+        this.currentInheritedColumns = computed(() => this.inheritedColumns()?.[this._breakpointService.currentBreakpoint() ?? 'xs']);
+        this.currentInheritedColumnSpacing = computed(() => this.inheritedColumnSpacing()?.[this._breakpointService.currentBreakpoint() ?? 'xs']);
+        this.currentInheritedRowSpacing = computed(() => this.inheritedRowSpacing()?.[this._breakpointService.currentBreakpoint() ?? 'xs']);
         this.currentStyle = computed(() => [
             this.currentSize() ? `--ard-_grid-size: ${this.currentSize()}` : '',
+            this.currentInheritedColumns() ? `--ard-_grid-parent-columns: ${this.currentInheritedColumns()}` : '',
+            this.currentInheritedColumnSpacing() ? `--ard-_grid-parent-column-spacing: ${this.currentInheritedColumnSpacing()}` : '',
+            this.currentInheritedRowSpacing() ? `--ard-_grid-parent-row-spacing: ${this.currentInheritedRowSpacing()}` : '',
             this.container() ? `--ard-_grid-columns: ${this.currentColumns()}` : '',
             this.container() ? `--ard-_grid-direction: ${this.currentReverse() ? 'row-reverse' : 'row'}` : '',
             this.container() ? `--ard-_grid-justify-content: ${this.currentJustifyContent()}` : '',
@@ -16652,7 +16702,7 @@ class ArdiumGridComponent {
         }
     }
     _updateChildrenStyles() {
-        const containerChildren = this.children().filter(child => child !== this && child.container());
+        const children = this.children();
         const columns = this.columnsOrInherited();
         const reverse = this.reverseOrInherited();
         const justifyContent = this.justifyContentOrInherited();
@@ -16663,7 +16713,7 @@ class ArdiumGridComponent {
         if (!this._wasContentInitialized) {
             return;
         }
-        for (const child of containerChildren) {
+        for (const child of children) {
             child.inheritedColumns.set(columns);
             child.inheritedReverse.set(reverse);
             child.inheritedJustifyContent.set(justifyContent);
@@ -16674,7 +16724,7 @@ class ArdiumGridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumGridComponent, isStandalone: false, selector: "ard-grid", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, columnSpacing: { classPropertyName: "columnSpacing", publicName: "columnSpacing", isSignal: true, isRequired: false, transformFunction: null }, rowSpacing: { classPropertyName: "rowSpacing", publicName: "rowSpacing", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "currentStyle()", "class.ard-grid__container": "container()", "class.ard-grid__item": "!container()", "class.ard-grid__item-grow": "!container() && currentSize() === \"grow\"", "class.ard-grid__item-auto": "!container() && currentSize() === \"auto\"" }, classAttribute: "ard-grid" }, queries: [{ propertyName: "children", predicate: ArdiumGridComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-columns) - (var(--ard-_grid-columns) - var(--ard-_grid-size)) * var(--ard-_grid-column-spacing) / var(--ard-_grid-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumGridComponent, isStandalone: false, selector: "ard-grid", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, columnSpacing: { classPropertyName: "columnSpacing", publicName: "columnSpacing", isSignal: true, isRequired: false, transformFunction: null }, rowSpacing: { classPropertyName: "rowSpacing", publicName: "rowSpacing", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "currentStyle()", "class.ard-grid__container": "container()", "class.ard-grid__item": "!container()", "class.ard-grid__item-grow": "!container() && currentSize() === \"grow\"", "class.ard-grid__item-auto": "!container() && currentSize() === \"auto\"" }, classAttribute: "ard-grid" }, queries: [{ propertyName: "children", predicate: ArdiumGridComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-parent-columns) - (var(--ard-_grid-parent-columns) - var(--ard-_grid-size)) * var(--ard-_grid-parent-column-spacing) / var(--ard-_grid-parent-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumGridComponent, decorators: [{
             type: Component,
@@ -16685,7 +16735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '[class.ard-grid__item]': '!container()',
                         '[class.ard-grid__item-grow]': '!container() && currentSize() === "grow"',
                         '[class.ard-grid__item-auto]': '!container() && currentSize() === "auto"',
-                    }, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-columns) - (var(--ard-_grid-columns) - var(--ard-_grid-size)) * var(--ard-_grid-column-spacing) / var(--ard-_grid-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"] }]
+                    }, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-parent-columns) - (var(--ard-_grid-parent-columns) - var(--ard-_grid-size)) * var(--ard-_grid-parent-column-spacing) / var(--ard-_grid-parent-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"] }]
         }], ctorParameters: () => [] });
 
 class ArdiumGridModule {
@@ -16726,28 +16776,29 @@ function provideStackDefaults(config) {
 
 class ArdiumStackComponent {
     constructor() {
+        this._componentId = '602';
         this._DEFAULTS = inject(ARD_STACK_DEFAULTS);
         this._breakpointService = inject(ArdiumBreakpointService);
         //! configurations
-        this.direction = input(parseEnumOrBreakpointConfig(this._DEFAULTS.direction, this._breakpointService.breakpoints, isArdGridDirection), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridDirection),
+        this.direction = input(parseEnumOrBreakpointConfig(this._DEFAULTS.direction, this._breakpointService.breakpoints, this._componentId, isArdGridDirection), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridDirection),
         });
-        this.justifyContent = input(parseEnumOrBreakpointConfig(this._DEFAULTS.justifyContent, this._breakpointService.breakpoints, isArdGridJustify), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridJustify),
+        this.justifyContent = input(parseEnumOrBreakpointConfig(this._DEFAULTS.justifyContent, this._breakpointService.breakpoints, this._componentId, isArdGridJustify), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridJustify),
         });
-        this.alignItems = input(parseEnumOrBreakpointConfig(this._DEFAULTS.alignItems, this._breakpointService.breakpoints, isArdGridAlign), {
-            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridAlign),
+        this.alignItems = input(parseEnumOrBreakpointConfig(this._DEFAULTS.alignItems, this._breakpointService.breakpoints, this._componentId, isArdGridAlign), {
+            transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridAlign),
         });
-        this.spacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.spacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.spacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.spacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.columnSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.columnSpacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.columnSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.columnSpacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.rowSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.rowSpacing, this._breakpointService.breakpoints), {
-            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints),
+        this.rowSpacing = input(parseCSSUnitOrBreakpointConfig(this._DEFAULTS.rowSpacing, this._breakpointService.breakpoints, this._componentId), {
+            transform: value => parseCSSUnitOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId),
         });
-        this.wrap = input(parseEnumOrBreakpointConfig(this._DEFAULTS.wrap, this._breakpointService.breakpoints, isArdGridWrap), { transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, isArdGridWrap) });
+        this.wrap = input(parseEnumOrBreakpointConfig(this._DEFAULTS.wrap, this._breakpointService.breakpoints, this._componentId, isArdGridWrap), { transform: value => parseEnumOrBreakpointConfig(value, this._breakpointService.breakpoints, this._componentId, isArdGridWrap) });
         //! computed properties
         this.finalColumnSpacing = computed(() => this.columnSpacing() ?? this.spacing());
         this.finalRowSpacing = computed(() => this.rowSpacing() ?? this.spacing());