Skip to content

Fix: correction for not inheriting styles inside box and stack #247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
krishan711 merged 4 commits into from
Jan 30, 2026
Merged

Fix: correction for not inheriting styles inside box and stack #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3c19ed9
Fix: prevent CSS variable inheritance in Box/Stack using @property
krishan711 Jan 30, 2026
8184654
.
krishan711 Jan 30, 2026
a992ecb
.
krishan711 Jan 30, 2026
507fb72
.
krishan711 Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ 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`
- [MINOR] Fix `Box` and `Stack` to not inherit sizing props from parent when not intended
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CHANGELOG entry doesn't mention the core purpose of this PR - fixing CSS custom property inheritance issues in Box and Stack components. Consider updating to explain that this PR prevents child components from inheriting parent sizing variables by using CSS @Property declarations with inherits: false and removing 'initial' value assignments.

Suggested change
- [MINOR] Fix `Box` and `Stack` to not inherit sizing props from parent when not intended
- [MINOR] Fix `Box` and `Stack` sizing CSS custom properties so child components no longer inherit parent sizing variables, by using CSS `@property` with `inherits: false` and removing `initial` value assignments

Copilot uses AI. Check for mistakes.

### Removed

Expand Down
26 changes: 17 additions & 9 deletions src/layouts/grid/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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
Expand Down
30 changes: 13 additions & 17 deletions src/layouts/stack/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,10 +148,10 @@ export function Stack({
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');
Comment on lines 149 to 150
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Breaking change: The removal of heightResponsive?.base and widthResponsive?.base fallback handling breaks backward compatibility. Previously, if someone passed widthResponsive={{ base: '50%' }} without setting the width prop, the base value would be used. Now it's ignored, and the code falls back to the default ('100%' or 'auto'). Consider preserving the base value fallback: const height = props.height || props.heightResponsive?.base || (isFullHeight ? '100%' : 'auto'); and similarly for width.

Copilot uses AI. Check for mistakes.
const maxHeight = props.maxHeight ?? null;
const maxWidth = props.maxWidth ?? null;
const minHeight = props.minHeight ?? null;
const minWidth = props.minWidth ?? null;
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;
Expand All @@ -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;
Expand Down
64 changes: 32 additions & 32 deletions src/particles/box/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.heightResponsive?.base ?? (props.isFullHeight ? '100%' : 'auto');
const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto');
Comment on lines +43 to +44
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Breaking change: The removal of heightResponsive?.base and widthResponsive?.base fallback handling breaks backward compatibility. Previously, if someone passed widthResponsive={{ base: '50%' }} without setting the width prop, the base value would be used. Now it's ignored, and the code falls back to the default ('100%' or 'auto'). Consider preserving the base value fallback: const height = props.height || props.heightResponsive?.base || (props.isFullHeight ? '100%' : 'auto'); and similarly for width.

Suggested change
const height = props.height ?? props.heightResponsive?.base ?? (props.isFullHeight ? '100%' : 'auto');
const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto');
const height = props.height || props.heightResponsive?.base || (props.isFullHeight ? '100%' : 'auto');
const width = props.width || props.widthResponsive?.base || (isFullWidth ? '100%' : 'auto');

Copilot uses AI. Check for mistakes.
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'],
};
Expand Down
34 changes: 17 additions & 17 deletions src/particles/box/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Comment on lines +95 to +98
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing final fallback values in responsive breakpoint CSS. Since the @Property declarations use inherits: false, if a CSS variable is not explicitly set, it will be unset (not inherited). The fallback chain var(--kiba-box-max-width-sm, var(--kiba-box-max-width)) will fail if neither variable is set. The final fallback values (none, 0, auto) that were removed need to be restored at the end of each fallback chain. For example: max-width: var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none)) to match line 81.

Copilot uses AI. Check for mistakes.
}

@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)));
Comment on lines +104 to +107
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing final fallback values in responsive breakpoint CSS. Since the @Property declarations use inherits: false, if a CSS variable is not explicitly set, it will be unset (not inherited). The fallback chains for max-width, max-height, min-width, and min-height need final fallback values (none, 0, etc.) restored at the end of each chain. For example: max-width: var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none))) to ensure a valid CSS value when no variables are set.

Copilot uses AI. Check for mistakes.
}

@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))));
Comment on lines +113 to +116
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing final fallback values in responsive breakpoint CSS. Since the @Property declarations use inherits: false, if a CSS variable is not explicitly set, it will be unset (not inherited). The fallback chains for max-width, max-height, min-width, and min-height need final fallback values (none, 0, etc.) restored at the end of each chain. For example: 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)))) to ensure a valid CSS value when no variables are set.

Copilot uses AI. Check for mistakes.
}

@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)))));
Comment on lines +122 to +125
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing final fallback values in responsive breakpoint CSS. Since the @Property declarations use inherits: false, if a CSS variable is not explicitly set, it will be unset (not inherited). The fallback chains for max-width, max-height, min-width, and min-height need final fallback values (none, 0, etc.) restored at the end of each chain. For example: 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))))) to ensure a valid CSS value when no variables are set.

Copilot uses AI. Check for mistakes.
}
}
}
Expand Down
Loading
Loading