From d9e1ca8ed8ce9254d311ed9edbdb3105c1453009 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 10:15:56 +0000
Subject: [PATCH 01/11] .

---
 src/atoms/iconButton/component.tsx            |  1 +
 src/layouts/stack/component.tsx               | 22 ++++++++++--
 src/model/componentProps.tsx                  |  6 ----
 src/molecules/appDownloadButton/component.tsx |  1 +
 src/molecules/carousel/component.tsx          |  1 +
 src/molecules/form/component.tsx              |  1 +
 src/molecules/inputFrame/component.tsx        |  1 +
 src/molecules/list/component.tsx              |  1 +
 src/molecules/markdownText/component.tsx      |  2 ++
 src/molecules/messageDialog/component.tsx     |  2 +-
 src/molecules/moleculeProps.ts                |  3 ++
 src/molecules/multiLineInput/component.tsx    |  1 +
 src/molecules/optionSelect/component.tsx      |  1 +
 src/molecules/progressCounter/component.tsx   |  1 +
 src/molecules/singleLineInput/component.tsx   |  1 +
 src/molecules/tabBar/component.tsx            |  1 +
 src/particles/media/component.tsx             |  6 ++--
 src/styles/colors.scss                        | 34 ++++++++++++-------
 18 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/src/atoms/iconButton/component.tsx b/src/atoms/iconButton/component.tsx
index 6073676b..c449bf57 100644
--- a/src/atoms/iconButton/component.tsx
+++ b/src/atoms/iconButton/component.tsx
@@ -48,6 +48,7 @@ export function IconButton({
     <ButtonComponent
       id={props.id}
       className={getClassName(IconButton.displayName, props.isFullWidth && 'fullWidth', props.isFullHeight && 'fullHeight', !isEnabled && 'disabled', className, ...(variant?.split('-') || []))}
+      style={props.style}
       onClick={onClicked}
       disabled={!isEnabled}
       aria-label={label}
diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx
index 35ffd926..aeb4df3f 100644
--- a/src/layouts/stack/component.tsx
+++ b/src/layouts/stack/component.tsx
@@ -92,6 +92,9 @@ function renderStackItemChildren(
     minWidth,
     minHeight,
     alignSelf,
+    // When using flex-grow/shrink with a specific baseSize, override any width/height
+    // from the child to prevent it from taking precedence over flex properties
+    ...(growthFactor > 0 || shrinkFactor > 0 ? { width: 'auto', height: 'auto' } : {}),
     ...(itemProps.isHidden ? { display: 'none' } : {}),
   };
   const itemClassName = getClassName(itemProps.className, 'KibaStackItem');
@@ -105,9 +108,10 @@ function renderStackItemChildren(
     }
     const existingStyle = (child.props as { style?: React.CSSProperties }).style ?? {};
     const existingClassName = (child.props as { className?: string }).className ?? '';
+    // itemStyle must come AFTER existingStyle so Stack.Item flex properties take precedence
     return React.cloneElement(child, {
       key: child.key ?? index,
-      style: { ...itemStyle, ...existingStyle },
+      style: { ...existingStyle, ...itemStyle },
       className: getClassName(existingClassName, itemClassName),
     } as React.HTMLAttributes<HTMLElement>);
   });
@@ -125,9 +129,21 @@ export function Stack({
   isScrollableHorizontally = false,
   ...props
 }: IStackProps): React.ReactElement {
+  const isStackItem = (child: React.ReactElement | string | number): boolean => {
+    if (typeof child !== 'object' || !('type' in child)) {
+      return false;
+    }
+    // Check by reference first
+    if (child.type === StackItem) {
+      return true;
+    }
+    // Fallback: check by displayName for cases where the reference might differ
+    const childType = child.type as { displayName?: string };
+    return childType?.displayName === 'KibaStackItem';
+  };
   const children = flattenChildren(props.children).map((child: (React.ReactElement | string | number), index: number): React.ReactElement<IStackItemProps> => (
     // eslint-disable-next-line react/no-array-index-key
-    typeof child === 'object' && 'type' in child && child.type === StackItem ? child as React.ReactElement<IStackItemProps> : <StackItem key={`child-${index}`}>{ child }</StackItem>
+    isStackItem(child) ? child as React.ReactElement<IStackItemProps> : <StackItem key={`child-${index}`}>{ child }</StackItem>
   ));
   const paddingTop = (props.paddingStart && direction === Direction.Vertical) ? props.paddingStart : undefined;
   const paddingBottom = (props.paddingEnd && direction === Direction.Vertical) ? props.paddingEnd : undefined;
@@ -166,7 +182,7 @@ export function Stack({
   } as React.CSSProperties;
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <PaddingView paddingTop={paddingTop} paddingBottom={paddingBottom} paddingRight={paddingRight} paddingLeft={paddingLeft} className={className} {...props as IPaddingViewPaddingProps}>
+    <PaddingView paddingTop={paddingTop} paddingBottom={paddingBottom} paddingRight={paddingRight} paddingLeft={paddingLeft} className={className} style={props.style} {...props as IPaddingViewPaddingProps}>
       <div
         id={props.id}
         className={getClassName(Stack.displayName, isScrollableVertically && 'scrollableVertically', isScrollableHorizontally && 'scrollableHorizontally', shouldWrapItems && 'wrapItems')}
diff --git a/src/model/componentProps.tsx b/src/model/componentProps.tsx
index 557e39d5..b1d724e2 100644
--- a/src/model/componentProps.tsx
+++ b/src/model/componentProps.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { RecursivePartial } from '@kibalabs/core';
 
 export interface IComponentProps {
   id?: string;
@@ -8,8 +7,3 @@ export interface IComponentProps {
   variant?: string;
   style?: React.CSSProperties;
 }
-
-/** @deprecated Use IComponentProps instead - theme prop is no longer used */
-export interface IComponentPropsCompat<Theme> extends IComponentProps {
-  theme?: RecursivePartial<Theme>;
-}
diff --git a/src/molecules/appDownloadButton/component.tsx b/src/molecules/appDownloadButton/component.tsx
index e83ed2b2..3dbf5ee8 100644
--- a/src/molecules/appDownloadButton/component.tsx
+++ b/src/molecules/appDownloadButton/component.tsx
@@ -63,6 +63,7 @@ export function AppDownloadButton({
     <LinkBase
       id={props.id}
       className={getClassName(AppDownloadButton.displayName, className)}
+      style={props.style}
       variant='image'
       target={getAppUrl()}
     >
diff --git a/src/molecules/carousel/component.tsx b/src/molecules/carousel/component.tsx
index 8696c44e..19d1de4a 100644
--- a/src/molecules/carousel/component.tsx
+++ b/src/molecules/carousel/component.tsx
@@ -146,6 +146,7 @@ export function Carousel({
     <Stack
       id={props.id}
       className={getClassName(Carousel.displayName, className)}
+      style={props.style}
       direction={Direction.Horizontal}
       childAlignment={Alignment.Center}
     >
diff --git a/src/molecules/form/component.tsx b/src/molecules/form/component.tsx
index 876bc16a..6af3758b 100644
--- a/src/molecules/form/component.tsx
+++ b/src/molecules/form/component.tsx
@@ -37,6 +37,7 @@ export function Form({
     <Box
       id={props.id}
       className={getClassName(Form.displayName, className)}
+      style={props.style}
       variant={props.backgroundVariant}
       isFullWidth={true}
     >
diff --git a/src/molecules/inputFrame/component.tsx b/src/molecules/inputFrame/component.tsx
index e9a423f2..63490957 100644
--- a/src/molecules/inputFrame/component.tsx
+++ b/src/molecules/inputFrame/component.tsx
@@ -36,6 +36,7 @@ export function InputFrame({
     <InputWrapper
       id={props.id}
       className={getClassName(InputFrame.displayName, className)}
+      style={props.style}
       variant={props.inputWrapperVariant}
       messageText={props.messageText}
       isEnabled={isEnabled}
diff --git a/src/molecules/list/component.tsx b/src/molecules/list/component.tsx
index 58038423..acfca33c 100644
--- a/src/molecules/list/component.tsx
+++ b/src/molecules/list/component.tsx
@@ -42,6 +42,7 @@ export function List({
     <div
       id={props.id}
       className={getClassName(List.displayName, className, props.isFullWidth && 'fullWidth')}
+      style={props.style}
     >
       { React.Children.map(props.children as OptionalProppedElement<IListItemInnerProps>[], (child: OptionalProppedElement<IListItemInnerProps>, index: number): React.ReactElement | null => {
         if (!child) {
diff --git a/src/molecules/markdownText/component.tsx b/src/molecules/markdownText/component.tsx
index 3b0438bd..fa56796b 100644
--- a/src/molecules/markdownText/component.tsx
+++ b/src/molecules/markdownText/component.tsx
@@ -19,6 +19,7 @@ function MarkdownLink(props: AnchorHTMLAttributes<HTMLAnchorElement>): React.Rea
 interface IMarkdownTextProps {
   id?: string;
   className?: string;
+  style?: React.CSSProperties;
   source: string;
   textAlignment?: TextAlignment;
   textVariant?: string;
@@ -32,6 +33,7 @@ export const MarkdownText = React.memo((props: IMarkdownTextProps): React.ReactE
     <PrettyText
       id={props.id}
       className={getClassName(MarkdownText.displayName, props.className)}
+      style={props.style}
       variant={getVariant(props.textVariant, 'unmargined')}
       tag={props.textTag}
       alignment={props.textAlignment}
diff --git a/src/molecules/messageDialog/component.tsx b/src/molecules/messageDialog/component.tsx
index f0015c14..86cd8ea5 100644
--- a/src/molecules/messageDialog/component.tsx
+++ b/src/molecules/messageDialog/component.tsx
@@ -26,7 +26,7 @@ export function MessageDialog({
   const confirmButtonText = props.confirmButtonText || 'Confirm';
 
   return (
-    <Dialog className={className} isOpen={props.isOpen} onCloseClicked={props.onCloseClicked} maxHeight={props.maxHeight} maxWidth={props.maxWidth}>
+    <Dialog className={className} style={props.style} isOpen={props.isOpen} onCloseClicked={props.onCloseClicked} maxHeight={props.maxHeight} maxWidth={props.maxWidth}>
       <Stack direction={Direction.Vertical} shouldAddGutters={true} defaultGutter={PaddingSize.Wide}>
         <Stack direction={Direction.Horizontal} contentAlignment={Alignment.Fill} childAlignment={Alignment.Center} shouldAddGutters={true}>
           <Spacing />
diff --git a/src/molecules/moleculeProps.ts b/src/molecules/moleculeProps.ts
index 1412aaee..025ac79a 100644
--- a/src/molecules/moleculeProps.ts
+++ b/src/molecules/moleculeProps.ts
@@ -1,4 +1,7 @@
+import React from 'react';
+
 export interface IMoleculeProps {
   id?: string;
   className?: string;
+  style?: React.CSSProperties;
 }
diff --git a/src/molecules/multiLineInput/component.tsx b/src/molecules/multiLineInput/component.tsx
index df5bddea..f5153f00 100644
--- a/src/molecules/multiLineInput/component.tsx
+++ b/src/molecules/multiLineInput/component.tsx
@@ -71,6 +71,7 @@ export function MultiLineInput({
     <InputFrame
       id={props.id}
       className={getClassName(MultiLineInput.displayName, className)}
+      style={props.style}
       inputWrapperVariant={props.inputWrapperVariant}
       messageText={props.messageText}
       isEnabled={isEnabled}
diff --git a/src/molecules/optionSelect/component.tsx b/src/molecules/optionSelect/component.tsx
index e9abbcff..f05e4bde 100644
--- a/src/molecules/optionSelect/component.tsx
+++ b/src/molecules/optionSelect/component.tsx
@@ -114,6 +114,7 @@ export function OptionSelect({
     <div
       id={props.id}
       className={getClassName(OptionSelect.displayName, className)}
+      style={props.style}
     >
       <Box ref={inputFrameRef}>
         <SingleLineInput
diff --git a/src/molecules/progressCounter/component.tsx b/src/molecules/progressCounter/component.tsx
index ad3d086f..a5b36201 100644
--- a/src/molecules/progressCounter/component.tsx
+++ b/src/molecules/progressCounter/component.tsx
@@ -26,6 +26,7 @@ export function ProgressCounter({
     <div
       id={props.id}
       className={getClassName(ProgressCounter.displayName, className)}
+      style={props.style}
     >
       {Array(props.stepCount).fill(null).map((_: unknown, index: number): React.ReactElement => {
         return (
diff --git a/src/molecules/singleLineInput/component.tsx b/src/molecules/singleLineInput/component.tsx
index 1427c8bc..e6359fc2 100644
--- a/src/molecules/singleLineInput/component.tsx
+++ b/src/molecules/singleLineInput/component.tsx
@@ -80,6 +80,7 @@ export function SingleLineInput({
     <InputFrame
       id={props.id}
       className={getClassName(SingleLineInput.displayName, className)}
+      style={props.style}
       inputWrapperVariant={props.inputWrapperVariant}
       messageText={props.messageText}
       isEnabled={isEnabled}
diff --git a/src/molecules/tabBar/component.tsx b/src/molecules/tabBar/component.tsx
index 06079fc1..25fb2b6f 100644
--- a/src/molecules/tabBar/component.tsx
+++ b/src/molecules/tabBar/component.tsx
@@ -42,6 +42,7 @@ export function TabBar({
     props.onTabKeySelected(tabKey);
   };
   const contentAlignmentStyle: React.CSSProperties = {
+    ...props.style,
     justifyContent: getFlexContentAlignment(contentAlignment),
   };
   return (
diff --git a/src/particles/media/component.tsx b/src/particles/media/component.tsx
index e8978a25..1295682e 100644
--- a/src/particles/media/component.tsx
+++ b/src/particles/media/component.tsx
@@ -106,12 +106,12 @@ export function Media({
 
   return (isVideo || mediaType === 'video') ? (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <Video shouldShowControls={false} shouldLoop={true} shouldMute={true} shouldAutoplay={true} className={className} variant={variant} {...props} />
+    <Video shouldShowControls={false} shouldLoop={true} shouldMute={true} shouldAutoplay={true} className={className} variant={variant} style={props.style} {...props} />
   ) : mediaType && mediaType !== 'image' ? (
-    <WebView className={className} variant={variant} url={props.source} />
+    <WebView className={className} variant={variant} style={props.style} url={props.source} />
   ) : (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <Image className={className} variant={variant} {...props as IImageProps} />
+    <Image className={className} variant={variant} style={props.style} {...props as IImageProps} />
   );
 }
 Media.displayName = 'KibaMedia';
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 89f892fe..fdadbf94 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -6,19 +6,25 @@
 // when the base color is overridden.
 
 @mixin generate-color-variants($name) {
-  // Light variants (mix with white)
-  --kiba-color-#{$name}-light05: color-mix(in srgb, var(--kiba-color-#{$name}), white 5%);
-  --kiba-color-#{$name}-light10: color-mix(in srgb, var(--kiba-color-#{$name}), white 10%);
-  --kiba-color-#{$name}-light20: color-mix(in srgb, var(--kiba-color-#{$name}), white 20%);
-  --kiba-color-#{$name}-light25: color-mix(in srgb, var(--kiba-color-#{$name}), white 25%);
-  --kiba-color-#{$name}-light50: color-mix(in srgb, var(--kiba-color-#{$name}), white 50%);
+  // Light variants (mix with white) - percentage is how much of the ORIGINAL color to keep
+  // light10 = 10% original + 90% white (very light)
+  // light50 = 50% original + 50% white (medium light)
+  --kiba-color-#{$name}-light01: color-mix(in srgb, var(--kiba-color-#{$name}) 1%, white);
+  --kiba-color-#{$name}-light05: color-mix(in srgb, var(--kiba-color-#{$name}) 5%, white);
+  --kiba-color-#{$name}-light10: color-mix(in srgb, var(--kiba-color-#{$name}) 10%, white);
+  --kiba-color-#{$name}-light20: color-mix(in srgb, var(--kiba-color-#{$name}) 20%, white);
+  --kiba-color-#{$name}-light25: color-mix(in srgb, var(--kiba-color-#{$name}) 25%, white);
+  --kiba-color-#{$name}-light50: color-mix(in srgb, var(--kiba-color-#{$name}) 50%, white);
 
-  // Dark variants (mix with black)
-  --kiba-color-#{$name}-dark05: color-mix(in srgb, var(--kiba-color-#{$name}), black 5%);
-  --kiba-color-#{$name}-dark10: color-mix(in srgb, var(--kiba-color-#{$name}), black 10%);
-  --kiba-color-#{$name}-dark20: color-mix(in srgb, var(--kiba-color-#{$name}), black 20%);
-  --kiba-color-#{$name}-dark25: color-mix(in srgb, var(--kiba-color-#{$name}), black 25%);
-  --kiba-color-#{$name}-dark50: color-mix(in srgb, var(--kiba-color-#{$name}), black 50%);
+  // Dark variants (mix with black) - percentage is how much of the ORIGINAL color to keep
+  // dark10 = 90% original + 10% black (slightly darker)
+  // dark50 = 50% original + 50% black (much darker)
+  --kiba-color-#{$name}-dark01: color-mix(in srgb, var(--kiba-color-#{$name}) 99%, black);
+  --kiba-color-#{$name}-dark05: color-mix(in srgb, var(--kiba-color-#{$name}) 95%, black);
+  --kiba-color-#{$name}-dark10: color-mix(in srgb, var(--kiba-color-#{$name}) 90%, black);
+  --kiba-color-#{$name}-dark20: color-mix(in srgb, var(--kiba-color-#{$name}) 80%, black);
+  --kiba-color-#{$name}-dark25: color-mix(in srgb, var(--kiba-color-#{$name}) 75%, black);
+  --kiba-color-#{$name}-dark50: color-mix(in srgb, var(--kiba-color-#{$name}) 50%, black);
 
   // Clear/transparency variants (alpha channel)
   --kiba-color-#{$name}-clear05: color-mix(in srgb, var(--kiba-color-#{$name}) 95%, transparent);
@@ -33,11 +39,13 @@
 
   // Short aliases (without kiba- prefix) for backwards compatibility
   --color-#{$name}: var(--kiba-color-#{$name});
+  --color-#{$name}-light01: var(--kiba-color-#{$name}-light01);
   --color-#{$name}-light05: var(--kiba-color-#{$name}-light05);
   --color-#{$name}-light10: var(--kiba-color-#{$name}-light10);
   --color-#{$name}-light20: var(--kiba-color-#{$name}-light20);
   --color-#{$name}-light25: var(--kiba-color-#{$name}-light25);
   --color-#{$name}-light50: var(--kiba-color-#{$name}-light50);
+  --color-#{$name}-dark01: var(--kiba-color-#{$name}-dark01);
   --color-#{$name}-dark05: var(--kiba-color-#{$name}-dark05);
   --color-#{$name}-dark10: var(--kiba-color-#{$name}-dark10);
   --color-#{$name}-dark20: var(--kiba-color-#{$name}-dark20);
@@ -83,6 +91,7 @@
   @include generate-color-variants('background');
   @include generate-color-variants('brand-primary');
   @include generate-color-variants('brand-secondary');
+  @include generate-color-variants('brand-dark');
   @include generate-color-variants('text');
   @include generate-color-variants('text-on-brand');
   @include generate-color-variants('disabled');
@@ -103,6 +112,7 @@
   --kiba-color-background: #ffffff;
   --kiba-color-brand-primary: #0066cc;
   --kiba-color-brand-secondary: #0055aa;
+  --kiba-color-brand-dark: #003366;
   --kiba-color-text: #333333;
   --kiba-color-text-on-brand: #ffffff;
   --kiba-color-disabled: #cccccc;

From d9e1ac172c24cd1b7970d57b4780cb1eacbb8282 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 10:22:37 +0000
Subject: [PATCH 02/11] .

---
 src/layouts/stack/component.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx
index aeb4df3f..dae50168 100644
--- a/src/layouts/stack/component.tsx
+++ b/src/layouts/stack/component.tsx
@@ -92,9 +92,6 @@ function renderStackItemChildren(
     minWidth,
     minHeight,
     alignSelf,
-    // When using flex-grow/shrink with a specific baseSize, override any width/height
-    // from the child to prevent it from taking precedence over flex properties
-    ...(growthFactor > 0 || shrinkFactor > 0 ? { width: 'auto', height: 'auto' } : {}),
     ...(itemProps.isHidden ? { display: 'none' } : {}),
   };
   const itemClassName = getClassName(itemProps.className, 'KibaStackItem');

From cd4ab7cd4757753047ff774d5281d2a95ddac4bc Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 10:22:54 +0000
Subject: [PATCH 03/11] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/layouts/stack/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx
index dae50168..de9a41f8 100644
--- a/src/layouts/stack/component.tsx
+++ b/src/layouts/stack/component.tsx
@@ -179,7 +179,7 @@ export function Stack({
   } as React.CSSProperties;
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <PaddingView paddingTop={paddingTop} paddingBottom={paddingBottom} paddingRight={paddingRight} paddingLeft={paddingLeft} className={className} style={props.style} {...props as IPaddingViewPaddingProps}>
+    <PaddingView paddingTop={paddingTop} paddingBottom={paddingBottom} paddingRight={paddingRight} paddingLeft={paddingLeft} className={className} {...props as IPaddingViewPaddingProps}>
       <div
         id={props.id}
         className={getClassName(Stack.displayName, isScrollableVertically && 'scrollableVertically', isScrollableHorizontally && 'scrollableHorizontally', shouldWrapItems && 'wrapItems')}

From a7d0084b39bdb74b2a39e8a75d51920412255e90 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 10:23:41 +0000
Subject: [PATCH 04/11] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/particles/media/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/particles/media/component.tsx b/src/particles/media/component.tsx
index 1295682e..48574ff0 100644
--- a/src/particles/media/component.tsx
+++ b/src/particles/media/component.tsx
@@ -106,7 +106,7 @@ export function Media({
 
   return (isVideo || mediaType === 'video') ? (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <Video shouldShowControls={false} shouldLoop={true} shouldMute={true} shouldAutoplay={true} className={className} variant={variant} style={props.style} {...props} />
+    <Video shouldShowControls={false} shouldLoop={true} shouldMute={true} shouldAutoplay={true} className={className} variant={variant} {...props} />
   ) : mediaType && mediaType !== 'image' ? (
     <WebView className={className} variant={variant} style={props.style} url={props.source} />
   ) : (

From dd642059ae07d71dffec0e3518506bf1918ecfae Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 10:23:51 +0000
Subject: [PATCH 05/11] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/particles/media/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/particles/media/component.tsx b/src/particles/media/component.tsx
index 48574ff0..ba451e74 100644
--- a/src/particles/media/component.tsx
+++ b/src/particles/media/component.tsx
@@ -111,7 +111,7 @@ export function Media({
     <WebView className={className} variant={variant} style={props.style} url={props.source} />
   ) : (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <Image className={className} variant={variant} style={props.style} {...props as IImageProps} />
+    <Image className={className} variant={variant} {...props as IImageProps} />
   );
 }
 Media.displayName = 'KibaMedia';

From 15d0c89b9949540d8d2833ed20c5581b3f943f99 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 11:07:09 +0000
Subject: [PATCH 06/11] .

---
 README.md                                  |   6 +-
 src/atoms/button/component.tsx             |  61 ++++----
 src/atoms/button/documentation.mdx         |  22 ++-
 src/atoms/button/styles.scss               |  61 ++++----
 src/atoms/iconButton/component.tsx         |   4 +-
 src/atoms/iconButton/documentation.mdx     |  12 +-
 src/atoms/iconButton/styles.scss           | 154 ++++++++++-----------
 src/atoms/linePager/styles.scss            |   2 +-
 src/atoms/link/component.tsx               |   4 +-
 src/atoms/link/documentation.mdx           |  12 +-
 src/atoms/link/styles.scss                 |  39 +++---
 src/atoms/linkBase/component.tsx           |   4 +-
 src/atoms/linkBase/documentation.mdx       |   2 +-
 src/atoms/linkBase/styles.scss             |  47 +++----
 src/atoms/listItem/styles.scss             |   2 +-
 src/atoms/progressCounterItem/styles.scss  |   2 +-
 src/atoms/selectableView/styles.scss       |   5 +-
 src/atoms/tabBarItem/styles.scss           |   2 +-
 src/atoms/titledCollapsibleBox/styles.scss |   2 +-
 src/molecules/markdown/component.tsx       |   2 +-
 src/particles/divider/component.tsx        |   2 +-
 src/particles/divider/styles.scss          |   6 +-
 src/styles/colors.scss                     |   3 +
 23 files changed, 200 insertions(+), 256 deletions(-)

diff --git a/README.md b/README.md
index 740c1f48..8eae35af 100644
--- a/README.md
+++ b/README.md
@@ -174,18 +174,18 @@ Define custom variants in your theme.scss:
 .KibaButton {
   // Default button styles are inherited from ui-react
 
-  &.primary > .KibaButtonFocusFixer {
+  &.primary {
     background-color: var(--kiba-color-brand-primary);
     color: var(--kiba-color-text-on-brand);
   }
 
-  &.secondary > .KibaButtonFocusFixer {
+  &.secondary {
     background-color: transparent;
     border: 1px solid var(--kiba-color-brand-primary);
     color: var(--kiba-color-brand-primary);
   }
 
-  &.destructive > .KibaButtonFocusFixer {
+  &.destructive {
     background-color: var(--kiba-color-error);
     color: white;
   }
diff --git a/src/atoms/button/component.tsx b/src/atoms/button/component.tsx
index 08cd9ae3..ad225621 100644
--- a/src/atoms/button/component.tsx
+++ b/src/atoms/button/component.tsx
@@ -86,40 +86,35 @@ export function Button({
       tabIndex={props.tabIndex || 0}
       target={props.target ? (innerTargetShouldOpenSameTab ? '_self' : '_blank') : undefined}
       type={buttonType || 'button'}
-      style={props.style}
+      style={{
+        ...props.style,
+        // @ts-ignore
+        alignItems: childAlignment,
+        // @ts-ignore
+        justifyContent: contentAlignment,
+      }}
     >
-      <span
-        className='KibaButtonFocusFixer'
-        tabIndex={-1}
-        style={{
-          // @ts-ignore
-          alignItems: childAlignment,
-          // @ts-ignore
-          justifyContent: contentAlignment,
-        }}
-      >
-        {!props.isLoading && props.iconLeft && (
-          <React.Fragment>
-            {props.iconLeft}
-            <Spacing variant={iconGutter} />
-          </React.Fragment>
-        )}
-        {!props.isLoading && (
-          <span className={getClassName('KibaButton-text', isTextFullWidth && 'fullWidth')}>{props.text}</span>
-        )}
-        {!props.isLoading && props.iconRight && (
-          <React.Fragment>
-            <Spacing variant={iconGutter} />
-            {props.iconRight}
-          </React.Fragment>
-        )}
-        {props.isLoading && (
-          <LoadingSpinner
-            id={props.id && `${props.id}-loading-spinner`}
-            variant='light-small'
-          />
-        )}
-      </span>
+      {!props.isLoading && props.iconLeft && (
+        <React.Fragment>
+          {props.iconLeft}
+          <Spacing variant={iconGutter} />
+        </React.Fragment>
+      )}
+      {!props.isLoading && (
+        <span className={getClassName('KibaButton-text', isTextFullWidth && 'fullWidth')}>{props.text}</span>
+      )}
+      {!props.isLoading && props.iconRight && (
+        <React.Fragment>
+          <Spacing variant={iconGutter} />
+          {props.iconRight}
+        </React.Fragment>
+      )}
+      {props.isLoading && (
+        <LoadingSpinner
+          id={props.id && `${props.id}-loading-spinner`}
+          variant='light-small'
+        />
+      )}
     </Component>
   );
 }
diff --git a/src/atoms/button/documentation.mdx b/src/atoms/button/documentation.mdx
index aa476835..08c38309 100644
--- a/src/atoms/button/documentation.mdx
+++ b/src/atoms/button/documentation.mdx
@@ -65,25 +65,23 @@ Combine variants: `variant="primary-large"` or `variant="card-primary"`
 ```css
 @layer kiba-theme {
   .KibaButton {
-    > .KibaButtonFocusFixer {
-      background-color: transparent;
-      border-radius: var(--kiba-border-radius);
-      border-width: 2px;
-      color: var(--kiba-color-brand-primary);
-      font-weight: 600;
-      padding: var(--kiba-padding) var(--kiba-padding-wide);
-    }
-
-    &:hover > .KibaButtonFocusFixer {
+    background-color: transparent;
+    border-radius: var(--kiba-border-radius);
+    border-width: 2px;
+    color: var(--kiba-color-brand-primary);
+    font-weight: 600;
+    padding: var(--kiba-padding) var(--kiba-padding-wide);
+
+    &:hover {
       background-color: var(--kiba-color-brand-primary-clear90);
     }
 
-    &.primary > .KibaButtonFocusFixer {
+    &.primary {
       background-color: var(--kiba-color-brand-primary);
       color: var(--kiba-color-text-on-brand);
     }
 
-    &.disabled > .KibaButtonFocusFixer {
+    &.disabled {
       background-color: var(--kiba-color-disabled-light50);
       color: var(--kiba-color-disabled-text);
       cursor: not-allowed;
diff --git a/src/atoms/button/styles.scss b/src/atoms/button/styles.scss
index 5b834cec..b3c3b6c4 100644
--- a/src/atoms/button/styles.scss
+++ b/src/atoms/button/styles.scss
@@ -6,6 +6,7 @@
   .KibaButton {
     display: inline-flex;
     flex-direction: row;
+    align-items: center;
     outline: none;
     background-clip: border-box;
     position: relative;
@@ -21,17 +22,6 @@
     &.disabled { cursor: not-allowed; }
     &.isLoading { cursor: default; }
 
-    > .KibaButtonFocusFixer {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      background-clip: border-box;
-      position: relative;
-      box-sizing: border-box;
-    }
-
     .KibaButton-text {
       width: auto;
       &.fullWidth { width: 100%; }
@@ -41,82 +31,79 @@
 
 @layer kiba-theme {
   .KibaButton {
+    @include text.default;
+    @include box.default;
+    @include box.focusable;
     @include transition;
+    padding: $padding $padding-wide;
+    border-width: 2px;
+    color: $color-brand-primary;
+    font-weight: 600;
+    text-align: center;
 
-    > .KibaButtonFocusFixer {
-      @include text.default;
-      @include box.default;
-      @include box.focusable;
-      padding: $padding $padding-wide;
-      border-width: 2px;
-      color: $color-brand-primary;
-      font-weight: 600;
-      text-align: center;
-    }
-
-    &:hover > .KibaButtonFocusFixer {
+    &:hover {
       background-color: $color-brand-primary-clear90;
     }
 
-    &:active > .KibaButtonFocusFixer {
+    &:active {
       background-color: $color-brand-primary-clear80;
     }
 
-    &:focus > .KibaButtonFocusFixer {
+    &:focus-visible {
       border-color: $color-background-dark50;
     }
 
-    &:visited > .KibaButtonFocusFixer {
+    &:visited {
       color: $color-brand-primary;
     }
 
     // Disabled state
-    &.disabled > .KibaButtonFocusFixer {
+    &.disabled {
       background-color: $color-disabled-light50;
       color: $color-disabled-text;
     }
 
-    &.disabled:hover > .KibaButtonFocusFixer,
-    &.disabled:active > .KibaButtonFocusFixer,
-    &.disabled:focus > .KibaButtonFocusFixer {
+    &.disabled:hover,
+    &.disabled:active,
+    &.disabled:focus-visible {
       background-color: $color-disabled-light50;
       color: $color-disabled-text;
     }
 
     // Primary variant
-    &.primary > .KibaButtonFocusFixer {
+    &.primary {
       background-color: $color-brand-primary;
       border-color: $color-brand-primary;
       color: $color-text-on-brand;
     }
 
-    &.primary:hover > .KibaButtonFocusFixer {
+    &.primary:hover {
       background-color: $color-brand-secondary;
     }
 
-    &.primary:active > .KibaButtonFocusFixer {
+    &.primary:active {
       background-color: var(--kiba-color-brand-secondary-dark10, #158040);
     }
 
     // Secondary variant
-    &.secondary > .KibaButtonFocusFixer {
+    &.secondary {
       border-color: $color-brand-primary;
     }
 
     // Large variant
-    &.large > .KibaButtonFocusFixer {
+    &.large {
       padding: $padding-wide $padding-wide2;
       font-size: 1.2em;
     }
 
     // Small variant
-    &.small > .KibaButtonFocusFixer {
+    &.small {
       padding: $padding-narrow $padding;
       font-size: 0.8em;
     }
 
     // Card variant
-    &.card > .KibaButtonFocusFixer {
+    &.card {
       box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.15);
       margin: 0px 4px 12px 4px;
     }
diff --git a/src/atoms/iconButton/component.tsx b/src/atoms/iconButton/component.tsx
index c449bf57..7f060993 100644
--- a/src/atoms/iconButton/component.tsx
+++ b/src/atoms/iconButton/component.tsx
@@ -59,9 +59,7 @@ export function IconButton({
       target={props.target ? (targetShouldOpenSameTab ? '_self' : '_blank') : undefined}
       type={props.target ? undefined : (props.buttonType || 'button')}
     >
-      <span className='KibaIconButtonFocusFixer' tabIndex={-1}>
-        {props.icon}
-      </span>
+      {props.icon}
     </ButtonComponent>
   );
 }
diff --git a/src/atoms/iconButton/documentation.mdx b/src/atoms/iconButton/documentation.mdx
index 743a1b6a..76d640eb 100644
--- a/src/atoms/iconButton/documentation.mdx
+++ b/src/atoms/iconButton/documentation.mdx
@@ -54,18 +54,16 @@ import * as Stories from './documentation.stories';
 ```css
 @layer kiba-theme {
   .KibaIconButton {
-    > .KibaIconButtonFocusFixer {
-      border-radius: var(--kiba-border-radius);
-      color: var(--kiba-color-brand-primary);
-      padding: var(--kiba-padding);
-    }
+    border-radius: var(--kiba-border-radius);
+    color: var(--kiba-color-brand-primary);
+    padding: var(--kiba-padding);
 
-    &.primary > .KibaIconButtonFocusFixer {
+    &.primary {
       background-color: var(--kiba-color-brand-primary);
       color: var(--kiba-color-text-on-brand);
     }
 
-    &:hover > .KibaIconButtonFocusFixer {
+    &:hover {
       background-color: var(--kiba-color-brand-primary-clear90);
     }
   }
diff --git a/src/atoms/iconButton/styles.scss b/src/atoms/iconButton/styles.scss
index 1c459b4f..57da3fc0 100644
--- a/src/atoms/iconButton/styles.scss
+++ b/src/atoms/iconButton/styles.scss
@@ -5,121 +5,109 @@
 @layer kiba-structure {
   .KibaIconButton {
     display: inline-flex;
-
-    &.fullWidth {
-      width: 100%;
-    }
-
-    &.fullHeight {
-      height: 100%;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  .KibaIconButtonFocusFixer {
-    display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     background-clip: border-box;
     position: relative;
     outline: none;
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    text-decoration: none;
+
+    &.fullWidth { width: 100%; }
+    &.fullHeight { height: 100%; }
+    &.disabled { cursor: not-allowed; }
   }
 }
 
 @layer kiba-theme {
   .KibaIconButton {
-    transition-duration: 0.3s;
-  }
-
-  .KibaIconButtonFocusFixer {
     @include text.default;
     @include box.default;
     @include box.focusable;
-    cursor: pointer;
+    @include transition;
     padding: $padding;
     border-width: 2px;
-  }
 
-  // Default variant
-  .KibaIconButton:hover > .KibaIconButtonFocusFixer {
-    background-color: var(--kiba-color-brand-primary-clear90);
-  }
+    &:hover {
+      background-color: var(--kiba-color-brand-primary-clear90);
+    }
 
-  .KibaIconButton:active > .KibaIconButtonFocusFixer {
-    background-color: var(--kiba-color-brand-primary-clear80);
-  }
+    &:active {
+      background-color: var(--kiba-color-brand-primary-clear80);
+    }
 
-  .KibaIconButton:focus > .KibaIconButtonFocusFixer {
-    border-color: $color-background-dark50;
-  }
+    &:focus-visible {
+      border-color: $color-background-dark50;
+    }
 
-  .KibaIconButton.disabled > .KibaIconButtonFocusFixer {
-    background-color: var(--kiba-color-text-clear90);
-    cursor: not-allowed;
-  }
+    &.disabled {
+      background-color: var(--kiba-color-text-clear90);
+      cursor: not-allowed;
+    }
 
-  .KibaIconButton.disabled .KibaIcon {
-    color: var(--kiba-color-text-clear50);
-  }
+    &.disabled .KibaIcon {
+      color: var(--kiba-color-text-clear50);
+    }
 
-  // Primary variant
-  .KibaIconButton.primary > .KibaIconButtonFocusFixer {
-    background-color: $color-brand-primary;
-    border-color: $color-brand-primary;
-    color: $color-text-on-brand;
-  }
+    // Primary variant
+    &.primary {
+      background-color: $color-brand-primary;
+      border-color: $color-brand-primary;
+      color: $color-text-on-brand;
+    }
 
-  .KibaIconButton.primary .KibaIcon {
-    color: $color-text-on-brand;
-  }
+    &.primary .KibaIcon {
+      color: $color-text-on-brand;
+    }
 
-  .KibaIconButton.primary:hover > .KibaIconButtonFocusFixer {
-    background-color: var(--kiba-color-brand-primary-dark10);
-  }
+    &.primary:hover {
+      background-color: var(--kiba-color-brand-primary-dark10);
+    }
 
-  .KibaIconButton.primary:active > .KibaIconButtonFocusFixer {
-    background-color: var(--kiba-color-brand-primary-dark20);
-  }
+    &.primary:active {
+      background-color: var(--kiba-color-brand-primary-dark20);
+    }
 
-  .KibaIconButton.primary.disabled > .KibaIconButtonFocusFixer {
-    background-color: $color-background-light10;
-    border-color: transparent;
-  }
+    &.primary.disabled {
+      background-color: $color-background-light10;
+      border-color: transparent;
+    }
 
-  // Secondary variant
-  .KibaIconButton.secondary > .KibaIconButtonFocusFixer {
-    border-color: $color-brand-primary;
-  }
+    // Secondary variant
+    &.secondary {
+      border-color: $color-brand-primary;
+    }
 
-  .KibaIconButton.secondary .KibaIcon {
-    color: $color-brand-primary;
-  }
+    &.secondary .KibaIcon {
+      color: $color-brand-primary;
+    }
 
-  // Tertiary variant
-  .KibaIconButton.tertiary > .KibaIconButtonFocusFixer {
-    background-color: transparent;
-  }
+    // Tertiary variant
+    &.tertiary {
+      background-color: transparent;
+    }
 
-  // Small variant
-  .KibaIconButton.small > .KibaIconButtonFocusFixer {
-    padding: $padding-narrow;
-  }
+    // Small variant
+    &.small {
+      padding: $padding-narrow;
+    }
 
-  // Passive variant
-  .KibaIconButton.passive > .KibaIconButtonFocusFixer {
-    opacity: 0.5;
-  }
+    // Passive variant
+    &.passive {
+      opacity: 0.5;
+    }
 
-  .KibaIconButton.passive:hover > .KibaIconButtonFocusFixer {
-    opacity: 1;
-  }
+    &.passive:hover {
+      opacity: 1;
+    }
 
-  // Large variant
-  .KibaIconButton.large > .KibaIconButtonFocusFixer {
-    padding: $padding-wide;
+    // Large variant
+    &.large {
+      padding: $padding-wide;
+    }
   }
 }
diff --git a/src/atoms/linePager/styles.scss b/src/atoms/linePager/styles.scss
index 075f6747..04c7a323 100644
--- a/src/atoms/linePager/styles.scss
+++ b/src/atoms/linePager/styles.scss
@@ -31,7 +31,7 @@
       &:active {
         background-color: var(--kiba-color-brand-primary-clear80);
       }
-      &:focus {
+      &:focus-visible {
         @include box.focussed;
       }
       &.active {
diff --git a/src/atoms/link/component.tsx b/src/atoms/link/component.tsx
index b73b4953..3e40cf57 100644
--- a/src/atoms/link/component.tsx
+++ b/src/atoms/link/component.tsx
@@ -48,9 +48,7 @@ export function Link({
       target={props.target ? (targetShouldOpenSameTab ? '_self' : '_blank') : undefined}
       style={props.style}
     >
-      <span className='KibaLinkFocusFixer' tabIndex={-1}>
-        {props.text}
-      </span>
+      {props.text}
     </LinkComponent>
   );
 }
diff --git a/src/atoms/link/documentation.mdx b/src/atoms/link/documentation.mdx
index 65e1cbba..9fd8ea97 100644
--- a/src/atoms/link/documentation.mdx
+++ b/src/atoms/link/documentation.mdx
@@ -48,21 +48,19 @@ import * as Stories from './documentation.stories';
 ```css
 @layer kiba-theme {
   .KibaLink {
-    > .KibaLinkFocusFixer {
-      color: var(--kiba-color-brand-primary);
-      text-decoration: underline;
-    }
+    color: var(--kiba-color-brand-primary);
+    text-decoration: underline;
 
-    &:hover > .KibaLinkFocusFixer {
+    &:hover {
       color: var(--kiba-color-brand-secondary);
     }
 
-    &:focus > .KibaLinkFocusFixer {
+    &:focus-visible {
       outline: 2px solid var(--kiba-color-brand-primary);
       outline-offset: 2px;
     }
 
-    &.disabled > .KibaLinkFocusFixer {
+    &.disabled {
       color: var(--kiba-color-disabled-text);
       cursor: not-allowed;
       text-decoration: none;
diff --git a/src/atoms/link/styles.scss b/src/atoms/link/styles.scss
index b64d2046..094a9b2c 100644
--- a/src/atoms/link/styles.scss
+++ b/src/atoms/link/styles.scss
@@ -5,45 +5,38 @@
 @layer kiba-structure {
   .KibaLink {
     cursor: pointer;
-    & > .KibaLinkFocusFixer {
-      cursor: pointer;
-      position: relative;
-    }
     &.disabled {
       cursor: not-allowed;
-      & > .KibaLinkFocusFixer {
-        cursor: not-allowed;
-      }
     }
   }
 }
 
 @layer kiba-theme {
   .KibaLink {
+    @include text.inherit;
+    @include box.default;
     @include box.focusable;
-    & > .KibaLinkFocusFixer {
-      @include text.inherit;
-      @include box.default;
-      @include box.focusable;
-      color: $color-brand-primary;
-      text-decoration: underline;
-    }
-    &:hover > .KibaLinkFocusFixer {
+    color: $color-brand-primary;
+    text-decoration: underline;
+
+    &:hover {
       color: $color-brand-secondary;
     }
+
+    &:focus-visible {
+      @include box.focussed;
+    }
+
     &.disabled {
-      & > .KibaLinkFocusFixer {
-        color: $color-disabled-text;
-      }
-      &:hover > .KibaLinkFocusFixer {
+      color: $color-disabled-text;
+      &:hover {
         color: $color-disabled-text;
       }
     }
+
     &:visited {
-      & > .KibaLinkFocusFixer {
-        color: $color-brand-primary;
-      }
-      &:hover > .KibaLinkFocusFixer {
+      color: $color-brand-primary;
+      &:hover {
         color: $color-brand-secondary;
       }
     }
diff --git a/src/atoms/linkBase/component.tsx b/src/atoms/linkBase/component.tsx
index dbc76747..c2729e6e 100644
--- a/src/atoms/linkBase/component.tsx
+++ b/src/atoms/linkBase/component.tsx
@@ -51,9 +51,7 @@ export function LinkBase({
       target={props.target ? (targetShouldOpenSameTab ? '_self' : '_blank') : undefined}
       style={props.style}
     >
-      <span className='KibaLinkBaseFocusFixer' tabIndex={-1}>
-        {props.children}
-      </span>
+      {props.children}
     </LinkComponent>
   );
 }
diff --git a/src/atoms/linkBase/documentation.mdx b/src/atoms/linkBase/documentation.mdx
index 901aa650..80e1eaf0 100644
--- a/src/atoms/linkBase/documentation.mdx
+++ b/src/atoms/linkBase/documentation.mdx
@@ -71,7 +71,7 @@ import * as Stories from './documentation.stories';
       pointer-events: none;
     }
 
-    &.card > .KibaLinkBaseFocusFixer {
+    &.card {
       display: block;
       padding: var(--kiba-padding);
       border-radius: var(--kiba-border-radius);
diff --git a/src/atoms/linkBase/styles.scss b/src/atoms/linkBase/styles.scss
index 6b7cf489..edc4be65 100644
--- a/src/atoms/linkBase/styles.scss
+++ b/src/atoms/linkBase/styles.scss
@@ -5,6 +5,13 @@
   .KibaLinkBase {
     cursor: pointer;
     width: fit-content;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-clip: padding-box;
+    box-sizing: border-box;
+    position: relative;
     &.fullWidth {
       width: 100%;
     }
@@ -14,65 +21,47 @@
     &.disabled {
       cursor: not-allowed;
     }
-    & > .KibaLinkBaseFocusFixer {
-      cursor: pointer;
-      color: currentColor;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      background-clip: padding-box;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      position: relative;
-    }
   }
 }
 
 @layer kiba-theme {
   .KibaLinkBase {
+    @include box.default;
     @include box.focusable;
-    & > .KibaLinkBaseFocusFixer {
-      @include box.default;
-      @include box.focusable;
-      opacity: 1;
-    }
-    &:hover > .KibaLinkBaseFocusFixer {
+    opacity: 1;
+    &:hover {
       background-color: var(--kiba-color-brand-primary-clear80);
     }
-    &:active > .KibaLinkBaseFocusFixer {
+    &:active {
       background-color: var(--kiba-color-brand-primary-clear50);
     }
-    &:focus > .KibaLinkBaseFocusFixer {
+    &:focus-visible {
       @include box.focussed;
     }
     &.disabled {
-      & > .KibaLinkBaseFocusFixer {
-        background-color: $color-disabled-text;
-      }
-      &:hover > .KibaLinkBaseFocusFixer {
+      background-color: $color-disabled-text;
+      &:hover {
         background-color: $color-disabled-text;
       }
     }
 
     // Translucent variant
-    &.translucent > .KibaLinkBaseFocusFixer {
+    &.translucent {
       background-color: transparent;
     }
 
     // Card variant
-    &.card > .KibaLinkBaseFocusFixer {
+    &.card {
       @include box.card;
       margin: 0;
     }
 
     // Image variant
     &.image {
-      &:hover > .KibaLinkBaseFocusFixer {
+      &:hover {
         opacity: 0.8;
       }
-      &:active > .KibaLinkBaseFocusFixer {
+      &:active {
         opacity: 0.6;
       }
     }
diff --git a/src/atoms/listItem/styles.scss b/src/atoms/listItem/styles.scss
index 6cce83ac..f7266b49 100644
--- a/src/atoms/listItem/styles.scss
+++ b/src/atoms/listItem/styles.scss
@@ -33,7 +33,7 @@
       &:active {
         background-color: var(--kiba-color-brand-primary-clear75);
       }
-      &:focus {
+      &:focus-visible {
         @include box.focussed;
       }
     }
diff --git a/src/atoms/progressCounterItem/styles.scss b/src/atoms/progressCounterItem/styles.scss
index 79081de8..889a0305 100644
--- a/src/atoms/progressCounterItem/styles.scss
+++ b/src/atoms/progressCounterItem/styles.scss
@@ -36,7 +36,7 @@
       background-color: var(--kiba-color-brand-primary-clear80);
     }
 
-    &:focus {
+    &:focus-visible {
       @include box.focussed;
     }
 
diff --git a/src/atoms/selectableView/styles.scss b/src/atoms/selectableView/styles.scss
index 666f9a7b..4a50f692 100644
--- a/src/atoms/selectableView/styles.scss
+++ b/src/atoms/selectableView/styles.scss
@@ -35,6 +35,7 @@
       @include box.default;
       @include box.focusable;
       background-color: transparent;
+      border-color: transparent;
       padding: 0;
     }
     &:hover > .KibaSelectableView-overlay {
@@ -44,8 +45,8 @@
       background-color: var(--kiba-color-brand-primary-clear50);
     }
     &.selected > .KibaSelectableView-overlay {
-      background-color: rgba(255, 255, 255, 0.1);
-      border-color: var(--kiba-color-brand-primary);
+      background-color: transparent;
+      border-color: transparent;
     }
     &.disabled {
       > .KibaSelectableView-overlay {
diff --git a/src/atoms/tabBarItem/styles.scss b/src/atoms/tabBarItem/styles.scss
index f9683557..68fc690b 100644
--- a/src/atoms/tabBarItem/styles.scss
+++ b/src/atoms/tabBarItem/styles.scss
@@ -43,7 +43,7 @@
     &:active {
       background-color: var(--kiba-color-brand-primary-clear80);
     }
-    &:focus {
+    &:focus-visible {
       @include box.focussed;
     }
     &.selected {
diff --git a/src/atoms/titledCollapsibleBox/styles.scss b/src/atoms/titledCollapsibleBox/styles.scss
index 44c3d7a8..70c503d8 100644
--- a/src/atoms/titledCollapsibleBox/styles.scss
+++ b/src/atoms/titledCollapsibleBox/styles.scss
@@ -42,7 +42,7 @@
       &:active {
         background-color: var(--kiba-color-brand-primary-clear80);
       }
-      &:focus {
+      &:focus-visible {
         @include box.focussed;
       }
     }
diff --git a/src/molecules/markdown/component.tsx b/src/molecules/markdown/component.tsx
index 3a985d72..d45d8252 100644
--- a/src/molecules/markdown/component.tsx
+++ b/src/molecules/markdown/component.tsx
@@ -111,7 +111,7 @@ export const Markdown = React.memo((props: IMarkdownProps): React.ReactElement =
       <MarkdownToJsx
         options={{
           forceWrapper: props.shouldForceWrapper,
-          forceBlock: props.shouldForceBlock,
+          forceBlock: props.shouldForceBlock ?? true,
           wrapper: 'span',
           overrides: {
             a: { component: MarkdownLink },
diff --git a/src/particles/divider/component.tsx b/src/particles/divider/component.tsx
index a11f11c5..cb83dc71 100644
--- a/src/particles/divider/component.tsx
+++ b/src/particles/divider/component.tsx
@@ -24,4 +24,4 @@ export function Divider({
     />
   );
 }
-Divider.displayName = 'Divider';
+Divider.displayName = 'KibaDivider';
diff --git a/src/particles/divider/styles.scss b/src/particles/divider/styles.scss
index 16dfeced..4d52b5b7 100644
--- a/src/particles/divider/styles.scss
+++ b/src/particles/divider/styles.scss
@@ -1,7 +1,7 @@
 @use '../../styles/variables' as *;
 
 @layer kiba-structure {
-  .Divider {
+  .KibaDivider {
     flex-shrink: 0;
     margin: 0;
     border-style: solid;
@@ -17,8 +17,8 @@
 }
 
 @layer kiba-theme {
-  .Divider {
-    color: $color-background-dark05;
+  .KibaDivider {
+    border-color: $color-background-dark05;
     &.horizontal {
       border-bottom-width: 1px;
     }
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index fdadbf94..4cdb64b1 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -137,4 +137,7 @@
   // Borders
   --kiba-border-radius: 0.5em;
   --kiba-border-width: 1px;
+
+  // Screen widths
+  --kiba-screen-width-max: 1200px;
 }

From ca15c4a26c792717795e29b010cff7546a5c75c8 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 12:41:47 +0000
Subject: [PATCH 07/11] .

---
 src/styles/colors.scss                              | 6 ++++--
 src/wrappers/responsiveContainingView/component.tsx | 3 ---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 4cdb64b1..39ef3198 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -109,8 +109,8 @@
 
 :root {
   // Base Colors (apps override these)
-  --kiba-color-background: #ffffff;
-  --kiba-color-brand-primary: #0066cc;
+  --kiba-color-background: #f5f5f5;
+  --kiba-color-brand-primary: #333333;
   --kiba-color-brand-secondary: #0055aa;
   --kiba-color-brand-dark: #003366;
   --kiba-color-text: #333333;
@@ -137,6 +137,8 @@
   // Borders
   --kiba-border-radius: 0.5em;
   --kiba-border-width: 1px;
+  --kiba-border-width-narrow: calc(var(--kiba-border-width) / 2);
+  --kiba-border-width-wide: calc(var(--kiba-border-width) * 2);
 
   // Screen widths
   --kiba-screen-width-max: 1200px;
diff --git a/src/wrappers/responsiveContainingView/component.tsx b/src/wrappers/responsiveContainingView/component.tsx
index 438154d3..16b48f76 100644
--- a/src/wrappers/responsiveContainingView/component.tsx
+++ b/src/wrappers/responsiveContainingView/component.tsx
@@ -17,14 +17,12 @@ export interface IResponsiveContainingViewProps extends IWrapperProps {
   columnCount?: number;
   size?: number;
   sizeResponsive?: ResponsiveField<number>;
-  isFullWidth?: boolean;
   shouldIncludeMaxSize?: boolean;
   isCenteredHorizontally?: boolean;
 }
 
 export function ResponsiveContainingView(props: IResponsiveContainingViewProps): React.ReactElement {
   const isCenteredHorizontally = props.isCenteredHorizontally ?? true;
-  const isFullWidth = props.isFullWidth ?? true;
   const shouldIncludeMaxSize = props.shouldIncludeMaxSize ?? true;
   const columnCount = props.columnCount ?? DEFAULT_COLUMN_COUNT;
   if (props.size == null && props.sizeResponsive?.base == null) {
@@ -32,7 +30,6 @@ export function ResponsiveContainingView(props: IResponsiveContainingViewProps):
   }
   const sizeField: ResponsiveField<number> = { base: props.size, ...props.sizeResponsive };
   const wrapperStyle: Record<string, string | undefined> = {
-    width: isFullWidth ? '100%' : 'auto',
     '--rcv-max-width-base': sizeField.base !== undefined ? getGridItemSizeCss(columnCount, sizeField.base) : undefined,
     '--rcv-max-width-small': sizeField.small !== undefined ? getGridItemSizeCss(columnCount, sizeField.small) : undefined,
     '--rcv-max-width-medium': sizeField.medium !== undefined ? getGridItemSizeCss(columnCount, sizeField.medium) : undefined,

From 58667446f941c0c6e9412b1db89c4f75e2c975ac Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 13:17:03 +0000
Subject: [PATCH 08/11] .

---
 src/styles/colors.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 39ef3198..841fb3d3 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -91,7 +91,6 @@
   @include generate-color-variants('background');
   @include generate-color-variants('brand-primary');
   @include generate-color-variants('brand-secondary');
-  @include generate-color-variants('brand-dark');
   @include generate-color-variants('text');
   @include generate-color-variants('text-on-brand');
   @include generate-color-variants('disabled');
@@ -109,10 +108,9 @@
 
 :root {
   // Base Colors (apps override these)
-  --kiba-color-background: #f5f5f5;
-  --kiba-color-brand-primary: #333333;
+  --kiba-color-background: #ffffff;
+  --kiba-color-brand-primary: #0066cc;
   --kiba-color-brand-secondary: #0055aa;
-  --kiba-color-brand-dark: #003366;
   --kiba-color-text: #333333;
   --kiba-color-text-on-brand: #ffffff;
   --kiba-color-disabled: #cccccc;

From bdeae6d2503eff7f5b4b7e09aa69c6466ecdf939 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 13:24:02 +0000
Subject: [PATCH 09/11] .

---
 src/atoms/inputWrapper/component.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/atoms/inputWrapper/component.tsx b/src/atoms/inputWrapper/component.tsx
index 59e15513..3b48bb80 100644
--- a/src/atoms/inputWrapper/component.tsx
+++ b/src/atoms/inputWrapper/component.tsx
@@ -35,6 +35,7 @@ export function InputWrapper({
     <div
       id={props.id}
       className={getClassName(InputWrapper.displayName, className, props.messageText && 'message-showing', isFocussed && 'focus', !props.isEnabled && 'disabled', ...(variant?.split('-') || []))}
+      style={props.style}
     >
       {/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
       <div

From 8ab7397a86ef93d6ba71571e8da387df063e9a30 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 13:24:17 +0000
Subject: [PATCH 10/11] Update src/layouts/stack/component.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/layouts/stack/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx
index de9a41f8..8360a0be 100644
--- a/src/layouts/stack/component.tsx
+++ b/src/layouts/stack/component.tsx
@@ -105,7 +105,7 @@ function renderStackItemChildren(
     }
     const existingStyle = (child.props as { style?: React.CSSProperties }).style ?? {};
     const existingClassName = (child.props as { className?: string }).className ?? '';
-    // itemStyle must come AFTER existingStyle so Stack.Item flex properties take precedence
+    // itemStyle comes after existingStyle so Stack.Item flex properties (from itemStyle) take precedence over child's existing styles
     return React.cloneElement(child, {
       key: child.key ?? index,
       style: { ...existingStyle, ...itemStyle },

From 60a427d83c14a7aa427988d5280f3d67d4a56c91 Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Thu, 4 Dec 2025 13:31:56 +0000
Subject: [PATCH 11/11] .

---
 .storybook/preview.ts                    |  2 +-
 src/index.ts                             |  2 +-
 src/particles/colors/index.ts            |  2 +-
 src/styles/{colors.scss => _mixins.scss} | 76 ++++++------------------
 src/styles/all.scss                      |  2 +-
 src/styles/defaults.scss                 | 51 ++++++++++++++++
 src/styles/index.scss                    |  5 +-
 7 files changed, 75 insertions(+), 65 deletions(-)
 rename src/styles/{colors.scss => _mixins.scss} (80%)
 create mode 100644 src/styles/defaults.scss

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 27c35a03..31f371ea 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,6 +1,6 @@
 import type { Preview } from '@storybook/react-vite';
 import '../src/styles/reset.scss';
-import '../src/styles/colors.scss';
+import '../src/styles/defaults.scss';
 
 const preview: Preview = {
   parameters: {
diff --git a/src/index.ts b/src/index.ts
index f58a606d..9d30584c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 import './styles/reset.scss';
-import './styles/colors.scss';
+import './styles/defaults.scss';
 
 export * from './model';
 export * from './util';
diff --git a/src/particles/colors/index.ts b/src/particles/colors/index.ts
index 1ec6b83f..6097fbe0 100644
--- a/src/particles/colors/index.ts
+++ b/src/particles/colors/index.ts
@@ -1,4 +1,4 @@
-// Colors are now CSS variables defined in styles/colors.scss
+// Colors are now CSS variables defined in styles/defaults.scss
 
 export interface IColorGuide {
   brandPrimary: string;
diff --git a/src/styles/colors.scss b/src/styles/_mixins.scss
similarity index 80%
rename from src/styles/colors.scss
rename to src/styles/_mixins.scss
index 841fb3d3..44627361 100644
--- a/src/styles/colors.scss
+++ b/src/styles/_mixins.scss
@@ -62,27 +62,6 @@
   --color-#{$name}-clear95: var(--kiba-color-#{$name}-clear95);
 }
 
-// =============================================================================
-// Padding Variant Generator
-// =============================================================================
-@mixin generate-padding-variants() {
-  --kiba-padding: var(--kiba-padding-base);
-  // Narrow variants (smaller than base)
-  --kiba-padding-narrow: calc(var(--kiba-padding-base) * 0.5);
-  --kiba-padding-narrow1: calc(var(--kiba-padding-base) * 0.5);
-  --kiba-padding-narrow2: calc(var(--kiba-padding-base) * 0.25);
-  --kiba-padding-narrow3: calc(var(--kiba-padding-base) * 0.125);
-  --kiba-padding-narrow4: calc(var(--kiba-padding-base) * 0.0625);
-  // Wide variants (larger than base)
-  --kiba-padding-wide: calc(var(--kiba-padding-base) * 2);
-  --kiba-padding-wide1: calc(var(--kiba-padding-base) * 2);
-  --kiba-padding-wide2: calc(var(--kiba-padding-base) * 4);
-  --kiba-padding-wide3: calc(var(--kiba-padding-base) * 6);
-  --kiba-padding-wide4: calc(var(--kiba-padding-base) * 8);
-  // Legacy alias
-  --kiba-padding-half: var(--kiba-padding-narrow1);
-}
-
 // =============================================================================
 // All Color Variants Generator
 // =============================================================================
@@ -101,43 +80,22 @@
 }
 
 // =============================================================================
-// Default Theme Values with Auto-Generated Variants
+// Padding Variant Generator
 // =============================================================================
-// These provide fallback defaults. Apps override just the base colors in their
-// theme.scss and the variants are computed dynamically via color-mix().
-
-:root {
-  // Base Colors (apps override these)
-  --kiba-color-background: #ffffff;
-  --kiba-color-brand-primary: #0066cc;
-  --kiba-color-brand-secondary: #0055aa;
-  --kiba-color-text: #333333;
-  --kiba-color-text-on-brand: #ffffff;
-  --kiba-color-disabled: #cccccc;
-  --kiba-color-disabled-text: #888888;
-  --kiba-color-error: #cc0000;
-  --kiba-color-success: #00cc66;
-  --kiba-color-warning: #cc9900;
-
-  // Generate all color variants (computed from base colors via color-mix)
-  @include generate-all-color-variants();
-
-  // Typography
-  --kiba-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  --kiba-font-size: 16px;
-  --kiba-line-height: 1.5;
-  --font-family-main: var(--kiba-font-family);
-
-  // Spacing
-  --kiba-padding-base: 0.5em;
-  @include generate-padding-variants();
-
-  // Borders
-  --kiba-border-radius: 0.5em;
-  --kiba-border-width: 1px;
-  --kiba-border-width-narrow: calc(var(--kiba-border-width) / 2);
-  --kiba-border-width-wide: calc(var(--kiba-border-width) * 2);
-
-  // Screen widths
-  --kiba-screen-width-max: 1200px;
+@mixin generate-padding-variants() {
+  --kiba-padding: var(--kiba-padding-base);
+  // Narrow variants (smaller than base)
+  --kiba-padding-narrow: calc(var(--kiba-padding-base) * 0.5);
+  --kiba-padding-narrow1: calc(var(--kiba-padding-base) * 0.5);
+  --kiba-padding-narrow2: calc(var(--kiba-padding-base) * 0.25);
+  --kiba-padding-narrow3: calc(var(--kiba-padding-base) * 0.125);
+  --kiba-padding-narrow4: calc(var(--kiba-padding-base) * 0.0625);
+  // Wide variants (larger than base)
+  --kiba-padding-wide: calc(var(--kiba-padding-base) * 2);
+  --kiba-padding-wide1: calc(var(--kiba-padding-base) * 2);
+  --kiba-padding-wide2: calc(var(--kiba-padding-base) * 4);
+  --kiba-padding-wide3: calc(var(--kiba-padding-base) * 6);
+  --kiba-padding-wide4: calc(var(--kiba-padding-base) * 8);
+  // Legacy alias
+  --kiba-padding-half: var(--kiba-padding-narrow1);
 }
diff --git a/src/styles/all.scss b/src/styles/all.scss
index eead46f0..bef0c967 100644
--- a/src/styles/all.scss
+++ b/src/styles/all.scss
@@ -13,7 +13,7 @@
 
 // Base styles (reset includes layer order declaration)
 @use 'reset';
-@use 'colors';
+@use 'defaults';
 @use 'global';
 
 // Particles
diff --git a/src/styles/defaults.scss b/src/styles/defaults.scss
new file mode 100644
index 00000000..43a87549
--- /dev/null
+++ b/src/styles/defaults.scss
@@ -0,0 +1,51 @@
+// =============================================================================
+// ui-react Theme Defaults
+// =============================================================================
+// These are the default values for all CSS custom properties used by ui-react.
+// Applications can override any of these in their own stylesheets.
+
+@use 'mixins';
+
+html {
+  font-size: 16px;
+}
+
+:root {
+  --kiba-color-background: #ffffff;
+  --kiba-color-brand-primary: #0066cc;
+  --kiba-color-brand-secondary: #6c757d;
+  --kiba-color-text: #333333;
+  --kiba-color-text-on-brand: #ffffff;
+  --kiba-color-disabled: #e9ecef;
+  --kiba-color-disabled-text: #adb5bd;
+  --kiba-color-error: #dc3545;
+  --kiba-color-success: #28a745;
+  --kiba-color-warning: #ffc107;
+  @include mixins.generate-all-color-variants();
+
+  --kiba-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --kiba-font-size-base: 1rem;
+  --kiba-font-size-small: 0.875rem;
+  --kiba-font-size-smaller: 0.75rem;
+  --kiba-font-size-large: 1.125rem;
+  --kiba-font-size-larger: 1.25rem;
+  --kiba-font-size-largest: 1.5rem;
+  --kiba-font-weight-light: 300;
+  --kiba-font-weight-regular: 400;
+  --kiba-font-weight-medium: 500;
+  --kiba-font-weight-bold: 700;
+  --kiba-line-height: 1.5;
+  --kiba-line-height-narrow: 1.3;
+  --kiba-line-height-wide: 2;
+  --kiba-heading-font-family: var(--kiba-font-family);
+
+  --kiba-padding-base: 1rem;
+  @include mixins.generate-padding-variants();
+
+  --kiba-border-width: 1px;
+  --kiba-border-width-narrow: 1px;
+  --kiba-border-width-wide: 2px;
+  --kiba-border-radius: 4px;
+
+  --kiba-screen-width-max: 1200px;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c7d2d5f8..476a8384 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -13,12 +13,13 @@
 //
 // Or import individual files:
 //   @use '@kibalabs/ui-react/styles/reset';
-//   @use '@kibalabs/ui-react/styles/colors';
+//   @use '@kibalabs/ui-react/styles/defaults';
 //   @use '@kibalabs/ui-react/styles/global';
 //   @use '@kibalabs/ui-react/styles/variables' as vars;
 
 // Forward all modules
 @forward 'reset';
-@forward 'colors';
+@forward 'defaults';
+@forward 'mixins';
 @forward 'global';
 @forward 'variables';