From 3c19ed993cb00d495bf28830ae6f2efa4e6f4b92 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Fri, 30 Jan 2026 15:19:59 +0000
Subject: [PATCH 1/7] Fix: prevent CSS variable inheritance in Box/Stack using
 @property

---
 src/styles/global.scss | 73 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)

diff --git a/src/styles/global.scss b/src/styles/global.scss
index 320dbc4a..98441b31 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -5,6 +5,79 @@
 // These are in the kiba-reset layer so component styles in kiba-theme
 // will always take precedence.
 
+// =============================================================================
+// CSS @property declarations for non-inheriting custom properties
+// =============================================================================
+// By default, CSS custom properties (variables) inherit from parent elements.
+// This causes issues when a parent Box/Stack sets responsive sizing variables
+// (e.g. --kiba-box-height-md: 300px) - all child components would inherit
+// and use these values even if they didn't set their own.
+//
+// Using @property with `inherits: false` prevents this cascade, ensuring each
+// component instance only uses the variables it explicitly sets on itself.
+// Browser support: Chrome 85+, Safari 15.4+, Firefox 128+ (universal by 2024)
+@property --kiba-box-width { syntax: "*"; inherits: false; }
+@property --kiba-box-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-height { syntax: "*"; inherits: false; }
+@property --kiba-box-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-height-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-xl { syntax: "*"; inherits: false; }
+
+@property --kiba-stack-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-extraLarge { syntax: "*"; inherits: false; }
+
 @layer kiba-reset {
   html {
     scroll-behavior: smooth;

From 81846545be0038114e7c2bc298d1c7b12ef20feb Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Fri, 30 Jan 2026 15:20:33 +0000
Subject: [PATCH 2/7] .

---
 CHANGELOG.md                    |  3 +-
 src/layouts/grid/component.tsx  | 26 +++++++++-----
 src/layouts/stack/component.tsx | 26 ++++++--------
 src/particles/box/component.tsx | 64 ++++++++++++++++-----------------
 src/particles/box/styles.scss   | 34 +++++++++---------
 src/util/responsiveUtil.ts      | 25 +++++++------
 6 files changed, 90 insertions(+), 88 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f50cfc4f..5ac871e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### Added
 
 ### Changed
-- [MINOR] Correction for using `sizeResponsive.base` size in `EqualGrid`
-- [MINOR] Correction for using `heightResponsive.base`, `widthResponsive.base` size in `EqualGrid`, `Box` and `Stack`
+- [MINOR] Correction for using `childSizeResponsive.base` size in `EqualGrid`
 
 ### Removed
 
diff --git a/src/layouts/grid/component.tsx b/src/layouts/grid/component.tsx
index b4d053fa..345b385b 100644
--- a/src/layouts/grid/component.tsx
+++ b/src/layouts/grid/component.tsx
@@ -87,6 +87,7 @@ export function Grid({
           const sizeResponsive = childProps.sizeResponsive ?? {};
           const itemStyles: React.CSSProperties = {
             ...childProps.style,
+            // @ts-expect-error CSS custom properties
             '--kiba-grid-item-gutter': gutter,
             '--kiba-grid-item-alignment': childProps.alignment ? getFlexItemAlignment(childProps.alignment) : 'auto',
             '--kiba-grid-item-width': getItemWidth(columnCount, size, gutter),
@@ -95,15 +96,22 @@ export function Grid({
               '--kiba-grid-item-height': '100%',
               '--kiba-grid-item-overflow-y': 'auto',
             } : {}),
-            // @ts-expect-error
-            '--kiba-grid-item-width-sm': sizeResponsive.small !== undefined ? getItemWidth(columnCount, sizeResponsive.small, gutter) : 'initial',
-            '--kiba-grid-item-display-sm': sizeResponsive.small !== undefined ? getItemDisplay(sizeResponsive.small) : 'initial',
-            '--kiba-grid-item-width-md': sizeResponsive.medium !== undefined ? getItemWidth(columnCount, sizeResponsive.medium, gutter) : 'initial',
-            '--kiba-grid-item-display-md': sizeResponsive.medium !== undefined ? getItemDisplay(sizeResponsive.medium) : 'initial',
-            '--kiba-grid-item-width-lg': sizeResponsive.large !== undefined ? getItemWidth(columnCount, sizeResponsive.large, gutter) : 'initial',
-            '--kiba-grid-item-display-lg': sizeResponsive.large !== undefined ? getItemDisplay(sizeResponsive.large) : 'initial',
-            '--kiba-grid-item-width-xl': sizeResponsive.extraLarge !== undefined ? getItemWidth(columnCount, sizeResponsive.extraLarge, gutter) : 'initial',
-            '--kiba-grid-item-display-xl': sizeResponsive.extraLarge !== undefined ? getItemDisplay(sizeResponsive.extraLarge) : 'initial',
+            ...(sizeResponsive.small !== undefined ? {
+              '--kiba-grid-item-width-sm': getItemWidth(columnCount, sizeResponsive.small, gutter),
+              '--kiba-grid-item-display-sm': getItemDisplay(sizeResponsive.small),
+            } : {}),
+            ...(sizeResponsive.medium !== undefined ? {
+              '--kiba-grid-item-width-md': getItemWidth(columnCount, sizeResponsive.medium, gutter),
+              '--kiba-grid-item-display-md': getItemDisplay(sizeResponsive.medium),
+            } : {}),
+            ...(sizeResponsive.large !== undefined ? {
+              '--kiba-grid-item-width-lg': getItemWidth(columnCount, sizeResponsive.large, gutter),
+              '--kiba-grid-item-display-lg': getItemDisplay(sizeResponsive.large),
+            } : {}),
+            ...(sizeResponsive.extraLarge !== undefined ? {
+              '--kiba-grid-item-width-xl': getItemWidth(columnCount, sizeResponsive.extraLarge, gutter),
+              '--kiba-grid-item-display-xl': getItemDisplay(sizeResponsive.extraLarge),
+            } : {}),
           };
           return (
             <div
diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx
index 0ea39ec1..8360a0be 100644
--- a/src/layouts/stack/component.tsx
+++ b/src/layouts/stack/component.tsx
@@ -146,8 +146,8 @@ export function Stack({
   const paddingBottom = (props.paddingEnd && direction === Direction.Vertical) ? props.paddingEnd : undefined;
   const paddingLeft = (props.paddingStart && direction === Direction.Horizontal) ? props.paddingStart : undefined;
   const paddingRight = (props.paddingEnd && direction === Direction.Horizontal) ? props.paddingEnd : undefined;
-  const height = props.height ?? props.heightResponsive?.base ?? (isFullHeight ? '100%' : 'auto');
-  const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto');
+  const height = props.height || (isFullHeight ? '100%' : 'auto');
+  const width = props.width || (isFullWidth ? '100%' : 'auto');
   const maxHeight = props.maxHeight ?? null;
   const maxWidth = props.maxWidth ?? null;
   const minHeight = props.minHeight ?? null;
@@ -161,23 +161,19 @@ export function Stack({
   const shouldWrapItems = props.shouldWrapItems || false;
   const stackStyles: React.CSSProperties = {
     '--kiba-stack-direction-base': getDirectionValue(direction),
-    ...responsiveValueToCss(props.directionResponsive, '--kiba-stack-direction', getDirectionValue, true),
+    ...responsiveValueToCss(props.directionResponsive, '--kiba-stack-direction', getDirectionValue),
     '--kiba-stack-child-alignment-base': getFlexItemAlignment(childAlignment),
-    ...responsiveValueToCss(props.childAlignmentResponsive, '--kiba-stack-child-alignment', getFlexItemAlignment, true),
+    ...responsiveValueToCss(props.childAlignmentResponsive, '--kiba-stack-child-alignment', getFlexItemAlignment),
     '--kiba-stack-content-alignment-base': getFlexContentAlignment(contentAlignment),
-    ...responsiveValueToCss(props.contentAlignmentResponsive, '--kiba-stack-content-alignment', getFlexContentAlignment, true),
+    ...responsiveValueToCss(props.contentAlignmentResponsive, '--kiba-stack-content-alignment', getFlexContentAlignment),
     '--kiba-stack-height-base': height,
-    ...responsiveValueToCss(props.heightResponsive, '--kiba-stack-height', undefined, true),
+    ...responsiveValueToCss(props.heightResponsive, '--kiba-stack-height'),
     '--kiba-stack-width-base': width,
-    ...responsiveValueToCss(props.widthResponsive, '--kiba-stack-width', undefined, true),
-    '--kiba-stack-max-height-base': maxHeightResponsive?.base ?? 'none',
-    ...responsiveValueToCss(maxHeightResponsive, '--kiba-stack-max-height', undefined, true),
-    '--kiba-stack-max-width-base': maxWidthResponsive?.base ?? 'none',
-    ...responsiveValueToCss(maxWidthResponsive, '--kiba-stack-max-width', undefined, true),
-    '--kiba-stack-min-height-base': minHeightResponsive?.base ?? '0',
-    ...responsiveValueToCss(minHeightResponsive, '--kiba-stack-min-height', undefined, true),
-    '--kiba-stack-min-width-base': minWidthResponsive?.base ?? '0',
-    ...responsiveValueToCss(minWidthResponsive, '--kiba-stack-min-width', undefined, true),
+    ...responsiveValueToCss(props.widthResponsive, '--kiba-stack-width'),
+    ...(maxHeightResponsive ? { '--kiba-stack-max-height-base': maxHeightResponsive.base ?? 'none', ...responsiveValueToCss(maxHeightResponsive, '--kiba-stack-max-height') } : {}),
+    ...(maxWidthResponsive ? { '--kiba-stack-max-width-base': maxWidthResponsive.base ?? 'none', ...responsiveValueToCss(maxWidthResponsive, '--kiba-stack-max-width') } : {}),
+    ...(minHeightResponsive ? { '--kiba-stack-min-height-base': minHeightResponsive.base ?? '0', ...responsiveValueToCss(minHeightResponsive, '--kiba-stack-min-height') } : {}),
+    ...(minWidthResponsive ? { '--kiba-stack-min-width-base': minWidthResponsive.base ?? '0', ...responsiveValueToCss(minWidthResponsive, '--kiba-stack-min-width') } : {}),
     ...(shouldWrapItems && innerShouldAddGutters ? { '--kiba-stack-gap': getPaddingSizeCss(defaultGutter) } : {}),
     ...props.style,
   } as React.CSSProperties;
diff --git a/src/particles/box/component.tsx b/src/particles/box/component.tsx
index 4c3a6312..fed0bd48 100644
--- a/src/particles/box/component.tsx
+++ b/src/particles/box/component.tsx
@@ -40,43 +40,43 @@ export function Box({
   isFullWidth = true,
   ...props
 }: IBoxProps): React.ReactElement {
-  const height = props.height ?? props.heightResponsive?.base ?? (props.isFullHeight ? '100%' : undefined);
-  const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : undefined);
+  const height = props.height || (props.isFullHeight ? '100%' : 'auto');
+  const width = props.width || (isFullWidth ? '100%' : 'auto');
   const blockType = width === '100%' ? 'block' : 'flex';
   const combinedStyles: React.CSSProperties = {
     ...props.style,
     // @ts-expect-error CSS custom properties are valid but not in CSSProperties type
     '--kiba-box-display': blockType,
-    '--kiba-box-width': width ?? 'initial',
-    '--kiba-box-width-sm': props.widthResponsive?.small ?? 'initial',
-    '--kiba-box-width-md': props.widthResponsive?.medium ?? 'initial',
-    '--kiba-box-width-lg': props.widthResponsive?.large ?? 'initial',
-    '--kiba-box-width-xl': props.widthResponsive?.extraLarge ?? 'initial',
-    '--kiba-box-height': height ?? 'initial',
-    '--kiba-box-height-sm': props.heightResponsive?.small ?? 'initial',
-    '--kiba-box-height-md': props.heightResponsive?.medium ?? 'initial',
-    '--kiba-box-height-lg': props.heightResponsive?.large ?? 'initial',
-    '--kiba-box-height-xl': props.heightResponsive?.extraLarge ?? 'initial',
-    '--kiba-box-max-width': props.maxWidth ?? 'initial',
-    '--kiba-box-max-width-sm': props.maxWidthResponsive?.small ?? 'initial',
-    '--kiba-box-max-width-md': props.maxWidthResponsive?.medium ?? 'initial',
-    '--kiba-box-max-width-lg': props.maxWidthResponsive?.large ?? 'initial',
-    '--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge ?? 'initial',
-    '--kiba-box-max-height': props.maxHeight ?? 'initial',
-    '--kiba-box-max-height-sm': props.maxHeightResponsive?.small ?? 'initial',
-    '--kiba-box-max-height-md': props.maxHeightResponsive?.medium ?? 'initial',
-    '--kiba-box-max-height-lg': props.maxHeightResponsive?.large ?? 'initial',
-    '--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge ?? 'initial',
-    '--kiba-box-min-width': props.minWidth ?? 'initial',
-    '--kiba-box-min-width-sm': props.minWidthResponsive?.small ?? 'initial',
-    '--kiba-box-min-width-md': props.minWidthResponsive?.medium ?? 'initial',
-    '--kiba-box-min-width-lg': props.minWidthResponsive?.large ?? 'initial',
-    '--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge ?? 'initial',
-    '--kiba-box-min-height': props.minHeight ?? 'initial',
-    '--kiba-box-min-height-sm': props.minHeightResponsive?.small ?? 'initial',
-    '--kiba-box-min-height-md': props.minHeightResponsive?.medium ?? 'initial',
-    '--kiba-box-min-height-lg': props.minHeightResponsive?.large ?? 'initial',
-    '--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge ?? 'initial',
+    '--kiba-box-width': width,
+    '--kiba-box-width-sm': props.widthResponsive?.small,
+    '--kiba-box-width-md': props.widthResponsive?.medium,
+    '--kiba-box-width-lg': props.widthResponsive?.large,
+    '--kiba-box-width-xl': props.widthResponsive?.extraLarge,
+    '--kiba-box-height': height,
+    '--kiba-box-height-sm': props.heightResponsive?.small,
+    '--kiba-box-height-md': props.heightResponsive?.medium,
+    '--kiba-box-height-lg': props.heightResponsive?.large,
+    '--kiba-box-height-xl': props.heightResponsive?.extraLarge,
+    '--kiba-box-max-width': props.maxWidth,
+    '--kiba-box-max-width-sm': props.maxWidthResponsive?.small,
+    '--kiba-box-max-width-md': props.maxWidthResponsive?.medium,
+    '--kiba-box-max-width-lg': props.maxWidthResponsive?.large,
+    '--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge,
+    '--kiba-box-max-height': props.maxHeight,
+    '--kiba-box-max-height-sm': props.maxHeightResponsive?.small,
+    '--kiba-box-max-height-md': props.maxHeightResponsive?.medium,
+    '--kiba-box-max-height-lg': props.maxHeightResponsive?.large,
+    '--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge,
+    '--kiba-box-min-width': props.minWidth,
+    '--kiba-box-min-width-sm': props.minWidthResponsive?.small,
+    '--kiba-box-min-width-md': props.minWidthResponsive?.medium,
+    '--kiba-box-min-width-lg': props.minWidthResponsive?.large,
+    '--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge,
+    '--kiba-box-min-height': props.minHeight,
+    '--kiba-box-min-height-sm': props.minHeightResponsive?.small,
+    '--kiba-box-min-height-md': props.minHeightResponsive?.medium,
+    '--kiba-box-min-height-lg': props.minHeightResponsive?.large,
+    '--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge,
     zIndex: props.zIndex,
     position: props.position as React.CSSProperties['position'],
   };
diff --git a/src/particles/box/styles.scss b/src/particles/box/styles.scss
index bbc6199f..f9193301 100644
--- a/src/particles/box/styles.scss
+++ b/src/particles/box/styles.scss
@@ -88,41 +88,41 @@
     &.scrollableVertically { overflow-y: auto; }
     &.scrollableHorizontally { overflow-x: auto; }
 
-    // Responsive breakpoints - only use responsive variables if explicitly set (not initial)
+    // Responsive breakpoints
     @include screen-small {
       width: var(--kiba-box-width-sm, var(--kiba-box-width, 100%));
       height: var(--kiba-box-height-sm, var(--kiba-box-height, auto));
-      max-width: var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none));
-      max-height: var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none));
-      min-width: var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0));
-      min-height: var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0));
+      max-width: var(--kiba-box-max-width-sm, var(--kiba-box-max-width));
+      max-height: var(--kiba-box-max-height-sm, var(--kiba-box-max-height));
+      min-width: var(--kiba-box-min-width-sm, var(--kiba-box-min-width));
+      min-height: var(--kiba-box-min-height-sm, var(--kiba-box-min-height));
     }
 
     @include screen-medium {
       width: var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%)));
       height: var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto)));
-      max-width: var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none)));
-      max-height: var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none)));
-      min-width: var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0)));
-      min-height: var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0)));
+      max-width: var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width)));
+      max-height: var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height)));
+      min-width: var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width)));
+      min-height: var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height)));
     }
 
     @include screen-large {
       width: var(--kiba-box-width-lg, var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%))));
       height: var(--kiba-box-height-lg, var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto))));
-      max-width: var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none))));
-      max-height: var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none))));
-      min-width: var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0))));
-      min-height: var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0))));
+      max-width: var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width))));
+      max-height: var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height))));
+      min-width: var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width))));
+      min-height: var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height))));
     }
 
     @include screen-extra-large {
       width: var(--kiba-box-width-xl, var(--kiba-box-width-lg, var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%)))));
       height: var(--kiba-box-height-xl, var(--kiba-box-height-lg, var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto)))));
-      max-width: var(--kiba-box-max-width-xl, var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none)))));
-      max-height: var(--kiba-box-max-height-xl, var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none)))));
-      min-width: var(--kiba-box-min-width-xl, var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0)))));
-      min-height: var(--kiba-box-min-height-xl, var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0)))));
+      max-width: var(--kiba-box-max-width-xl, var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width)))));
+      max-height: var(--kiba-box-max-height-xl, var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height)))));
+      min-width: var(--kiba-box-min-width-xl, var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width)))));
+      min-height: var(--kiba-box-min-height-xl, var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height)))));
     }
   }
 }
diff --git a/src/util/responsiveUtil.ts b/src/util/responsiveUtil.ts
index f4ead937..122f5883 100644
--- a/src/util/responsiveUtil.ts
+++ b/src/util/responsiveUtil.ts
@@ -14,23 +14,22 @@ export const responsiveValueToCss = <FieldType>(
   field: ResponsiveField<FieldType> | null | undefined,
   variablePrefix: string,
   converter: CssConverter<FieldType> = identityConverter,
-  shouldResetInheritance = false,
 ): Record<string, string> => {
   if (!field) {
-    if (shouldResetInheritance) {
-      return {
-        [`${variablePrefix}-small`]: 'initial',
-        [`${variablePrefix}-medium`]: 'initial',
-        [`${variablePrefix}-large`]: 'initial',
-        [`${variablePrefix}-extraLarge`]: 'initial',
-      };
-    }
     return {};
   }
   const result: Record<string, string> = {};
-  result[`${variablePrefix}-small`] = field.small !== undefined ? converter(field.small) : 'initial';
-  result[`${variablePrefix}-medium`] = field.medium !== undefined ? converter(field.medium) : 'initial';
-  result[`${variablePrefix}-large`] = field.large !== undefined ? converter(field.large) : 'initial';
-  result[`${variablePrefix}-extraLarge`] = field.extraLarge !== undefined ? converter(field.extraLarge) : 'initial';
+  if (field.small !== undefined) {
+    result[`${variablePrefix}-small`] = converter(field.small);
+  }
+  if (field.medium !== undefined) {
+    result[`${variablePrefix}-medium`] = converter(field.medium);
+  }
+  if (field.large !== undefined) {
+    result[`${variablePrefix}-large`] = converter(field.large);
+  }
+  if (field.extraLarge !== undefined) {
+    result[`${variablePrefix}-extraLarge`] = converter(field.extraLarge);
+  }
   return result;
 };

From a992ecb1be2a88ef617747a78e030401423d2a20 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Fri, 30 Jan 2026 15:21:36 +0000
Subject: [PATCH 3/7] .

---
 src/layouts/stack/component.tsx | 12 ++++++------
 src/particles/box/component.tsx |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx
index 8360a0be..19014b9b 100644
--- a/src/layouts/stack/component.tsx
+++ b/src/layouts/stack/component.tsx
@@ -146,12 +146,12 @@ export function Stack({
   const paddingBottom = (props.paddingEnd && direction === Direction.Vertical) ? props.paddingEnd : undefined;
   const paddingLeft = (props.paddingStart && direction === Direction.Horizontal) ? props.paddingStart : undefined;
   const paddingRight = (props.paddingEnd && direction === Direction.Horizontal) ? props.paddingEnd : undefined;
-  const height = props.height || (isFullHeight ? '100%' : 'auto');
-  const width = props.width || (isFullWidth ? '100%' : 'auto');
-  const maxHeight = props.maxHeight ?? null;
-  const maxWidth = props.maxWidth ?? null;
-  const minHeight = props.minHeight ?? null;
-  const minWidth = props.minWidth ?? null;
+  const height = props.height ?? props.heightResponsive?.base ?? (isFullHeight ? '100%' : 'auto');
+  const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto');
+  const maxHeight = props.maxHeight ?? props.maxHeightResponsive?.base ?? null;
+  const maxWidth = props.maxWidth ?? props.maxWidthResponsive?.base ?? null;
+  const minHeight = props.minHeight ?? props.minHeightResponsive?.base ?? null;
+  const minWidth = props.minWidth ?? props.minWidthResponsive?.base ?? null;
   const maxHeightResponsive = props.maxHeightResponsive || maxHeight ? { base: (maxHeight || undefined), ...props.maxHeightResponsive } : null;
   const maxWidthResponsive = props.maxWidthResponsive || maxWidth ? { base: (maxWidth || undefined), ...props.maxWidthResponsive } : null;
   const minHeightResponsive = props.minHeightResponsive || minHeight ? { base: (minHeight || undefined), ...props.minHeightResponsive } : null;
diff --git a/src/particles/box/component.tsx b/src/particles/box/component.tsx
index fed0bd48..de74420e 100644
--- a/src/particles/box/component.tsx
+++ b/src/particles/box/component.tsx
@@ -40,8 +40,8 @@ export function Box({
   isFullWidth = true,
   ...props
 }: IBoxProps): React.ReactElement {
-  const height = props.height || (props.isFullHeight ? '100%' : 'auto');
-  const width = props.width || (isFullWidth ? '100%' : 'auto');
+  const height = props.height ?? props.heightResponsive?.base ?? (props.isFullHeight ? '100%' : 'auto');
+  const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto');
   const blockType = width === '100%' ? 'block' : 'flex';
   const combinedStyles: React.CSSProperties = {
     ...props.style,

From 507fb72112d0372ec91f6533f8a527258a33c16c Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Fri, 30 Jan 2026 15:23:34 +0000
Subject: [PATCH 4/7] .

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ac871e4..f4a0cd67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ### Changed
 - [MINOR] Correction for using `childSizeResponsive.base` size in `EqualGrid`
+- [MINOR] Fix `Box` and `Stack` to not inherit sizing props from parent when not intended
 
 ### Removed
 

From ddad8cd255d79e080896ef789602b80a449a519a Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Fri, 30 Jan 2026 15:50:51 +0000
Subject: [PATCH 5/7] .

---
 src/layouts/stack/styles.scss | 56 +++++++++++++++++++++++++++
 src/particles/box/styles.scss | 41 ++++++++++++++++++++
 src/styles/global.scss        | 73 -----------------------------------
 3 files changed, 97 insertions(+), 73 deletions(-)

diff --git a/src/layouts/stack/styles.scss b/src/layouts/stack/styles.scss
index 959aa88b..3d2afa2d 100644
--- a/src/layouts/stack/styles.scss
+++ b/src/layouts/stack/styles.scss
@@ -1,5 +1,61 @@
 @use '../../styles/variables' as *;
 
+// =============================================================================
+// CSS @property declarations for non-inheriting custom properties
+// =============================================================================
+// By default, CSS custom properties (variables) inherit from parent elements.
+// This causes issues when a parent Stack sets responsive variables
+// (e.g. --kiba-stack-direction-large: row) - all child Stacks would inherit
+// and use these values even if they didn't set their own.
+//
+// Using @property with `inherits: false` prevents this cascade, ensuring each
+// Stack instance only uses the variables it explicitly sets on itself.
+@property --kiba-stack-direction-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-direction-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-direction-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-direction-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-direction-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-extraLarge { syntax: "*"; inherits: false; }
+
 @layer kiba-structure {
   .KibaStack {
     display: flex;
diff --git a/src/particles/box/styles.scss b/src/particles/box/styles.scss
index f9193301..2909b8b8 100644
--- a/src/particles/box/styles.scss
+++ b/src/particles/box/styles.scss
@@ -1,5 +1,46 @@
 @use '../../styles/variables' as *;
 
+// =============================================================================
+// CSS @property declarations for non-inheriting custom properties
+// =============================================================================
+// By default, CSS custom properties (variables) inherit from parent elements.
+// This causes issues when a parent Box sets responsive sizing variables
+// (e.g. --kiba-box-height-md: 300px) - all child components would inherit
+// and use these values even if they didn't set their own.
+//
+// Using @property with `inherits: false` prevents this cascade, ensuring each
+// Box instance only uses the variables it explicitly sets on itself.
+@property --kiba-box-width { syntax: "*"; inherits: false; }
+@property --kiba-box-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-height { syntax: "*"; inherits: false; }
+@property --kiba-box-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-height-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-xl { syntax: "*"; inherits: false; }
+
 // Mixins for use by other components
 @mixin default {
   background-color: transparent;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 98441b31..320dbc4a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -5,79 +5,6 @@
 // These are in the kiba-reset layer so component styles in kiba-theme
 // will always take precedence.
 
-// =============================================================================
-// CSS @property declarations for non-inheriting custom properties
-// =============================================================================
-// By default, CSS custom properties (variables) inherit from parent elements.
-// This causes issues when a parent Box/Stack sets responsive sizing variables
-// (e.g. --kiba-box-height-md: 300px) - all child components would inherit
-// and use these values even if they didn't set their own.
-//
-// Using @property with `inherits: false` prevents this cascade, ensuring each
-// component instance only uses the variables it explicitly sets on itself.
-// Browser support: Chrome 85+, Safari 15.4+, Firefox 128+ (universal by 2024)
-@property --kiba-box-width { syntax: "*"; inherits: false; }
-@property --kiba-box-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-height { syntax: "*"; inherits: false; }
-@property --kiba-box-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-height-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-xl { syntax: "*"; inherits: false; }
-
-@property --kiba-stack-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-extraLarge { syntax: "*"; inherits: false; }
-
 @layer kiba-reset {
   html {
     scroll-behavior: smooth;

From f49d2cca2a207774d1ae9a01e2fb1afb9c908c5d Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Fri, 30 Jan 2026 15:53:11 +0000
Subject: [PATCH 6/7] .

---
 src/layouts/grid/styles.scss | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/layouts/grid/styles.scss b/src/layouts/grid/styles.scss
index 1cce9aa8..2705f15d 100644
--- a/src/layouts/grid/styles.scss
+++ b/src/layouts/grid/styles.scss
@@ -1,5 +1,32 @@
 @use '../../styles/variables' as *;
 
+// =============================================================================
+// CSS @property declarations for non-inheriting custom properties
+// =============================================================================
+// By default, CSS custom properties (variables) inherit from parent elements.
+// This causes issues when a parent Grid sets responsive sizing variables
+// - all child components would inherit and use these values even if they
+// didn't set their own.
+//
+// Using @property with `inherits: false` prevents this cascade, ensuring each
+// Grid/GridItem instance only uses the variables it explicitly sets on itself.
+@property --kiba-grid-height { syntax: "*"; inherits: false; }
+@property --kiba-grid-child-alignment { syntax: "*"; inherits: false; }
+@property --kiba-grid-content-alignment { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width-md { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display-sm { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display-md { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display-lg { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display-xl { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-gutter { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-alignment { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-overflow-y { syntax: "*"; inherits: false; }
+
 @layer kiba-structure {
   .KibaGrid {
     box-sizing: border-box;

From 4acd5bd6da78e6ad8f112b5581c91fcd8e9def9e Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Fri, 30 Jan 2026 15:54:36 +0000
Subject: [PATCH 7/7] .

---
 src/styles/global.scss | 73 ------------------------------------------
 1 file changed, 73 deletions(-)

diff --git a/src/styles/global.scss b/src/styles/global.scss
index 98441b31..320dbc4a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -5,79 +5,6 @@
 // These are in the kiba-reset layer so component styles in kiba-theme
 // will always take precedence.
 
-// =============================================================================
-// CSS @property declarations for non-inheriting custom properties
-// =============================================================================
-// By default, CSS custom properties (variables) inherit from parent elements.
-// This causes issues when a parent Box/Stack sets responsive sizing variables
-// (e.g. --kiba-box-height-md: 300px) - all child components would inherit
-// and use these values even if they didn't set their own.
-//
-// Using @property with `inherits: false` prevents this cascade, ensuring each
-// component instance only uses the variables it explicitly sets on itself.
-// Browser support: Chrome 85+, Safari 15.4+, Firefox 128+ (universal by 2024)
-@property --kiba-box-width { syntax: "*"; inherits: false; }
-@property --kiba-box-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-height { syntax: "*"; inherits: false; }
-@property --kiba-box-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-height-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-xl { syntax: "*"; inherits: false; }
-
-@property --kiba-stack-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-extraLarge { syntax: "*"; inherits: false; }
-
 @layer kiba-reset {
   html {
     scroll-behavior: smooth;