From c7273968e926a4a47ba96f968e866ef0ec951334 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 29 May 2025 23:49:08 +0200
Subject: [PATCH 1/3] refactor(CButton): improve variants handling

---
 packages/coreui-react/src/components/button/CButton.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx
index a12115d5..cbb003d7 100644
--- a/packages/coreui-react/src/components/button/CButton.tsx
+++ b/packages/coreui-react/src/components/button/CButton.tsx
@@ -74,9 +74,10 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
         {...(!rest.href && { type: type })}
         className={classNames(
           'btn',
-          variant && color ? `btn-${variant}-${color}` : `btn-${variant}`,
           {
-            [`btn-${color}`]: color && !variant,
+            [`btn-${variant}-${color}`]: variant && color,
+            [`btn-${variant}`]: variant && !color,
+            [`btn-${color}`]: !variant && color,
             [`btn-${size}`]: size,
           },
           shape,

From 38fc15aee8dd508897139954406dbccce089c808 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 8 Jun 2025 21:03:03 +0200
Subject: [PATCH 2/3] docs: update content

---
 .../docs/content/forms/checkbox/bootstrap.mdx | 68 ++++++++++---------
 .../docs/content/forms/checkbox/index.mdx     | 68 +++++++++----------
 2 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/packages/docs/content/forms/checkbox/bootstrap.mdx b/packages/docs/content/forms/checkbox/bootstrap.mdx
index 185c6753..842bb911 100644
--- a/packages/docs/content/forms/checkbox/bootstrap.mdx
+++ b/packages/docs/content/forms/checkbox/bootstrap.mdx
@@ -1,69 +1,71 @@
 ---
-title: React Checkbox Components
-name: Checkbox
-description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
+title: React Bootstrap Checkbox Component
+name: Checkbox with Bootstrap Styling
+description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
 route: /forms/checkbox/
-other_frameworks: checkbox
+bootstrap_component: true
 ---
 
-## Approach
+## How to use React Bootstrap Checkbox component
 
-Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
+Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.
 
-## Checkboxes
+### Basic example
 
-<ExampleSnippet component="CheckboxExample" componentName="React Form Checkbox" />
+Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.
 
-### Indeterminate
+<ExampleSnippet className="theme-bootstrap" component="CheckboxExample" componentName="React Bootstrap Checkbox" />
 
-Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
+### Indeterminate state
 
-<ExampleSnippet component="CheckboxIndeterminateExample" componentName="React Form Checkbox" />
+Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
 
-### Disabled
+<ExampleSnippet className="theme-bootstrap" component="CheckboxIndeterminateExample" componentName="React Bootstrap Checkbox" />
 
-Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
+### Disabled state
 
-<ExampleSnippet component="CheckboxDisabledExample" componentName="React Form Checkbox" />
+Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
 
-## Default (stacked)
+<ExampleSnippet className="theme-bootstrap" component="CheckboxDisabledExample" componentName="React Bootstrap Checkbox" />
 
-By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
+### Stacked layout (default)
 
-<ExampleSnippet component="CheckboxStackedExample" componentName="React Form Checkbox" />
+By default, multiple checkboxes stack vertically and are spaced evenly.
 
-## Inline
+<ExampleSnippet className="theme-bootstrap" component="CheckboxStackedExample" componentName="React Bootstrap Checkbox" />
 
-Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
+### Inline checkboxes
 
-<ExampleSnippet component="CheckboxInlineExample" componentName="React Form Checkbox" />
+Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
 
-## Reverse 
+<ExampleSnippet className="theme-bootstrap" component="CheckboxInlineExample" componentName="React Bootstrap Checkbox" />
 
-Put your checkboxes on the opposite side by adding `reverse` boolean property.
+### Reversed checkboxes
 
-<ExampleSnippet component="CheckboxReverseExample" componentName="React Form Checkbox" />
+Use the `reverse` prop to position the checkbox on the opposite side of the label.
 
-## Without labels
+<ExampleSnippet className="theme-bootstrap" component="CheckboxReverseExample" componentName="React Bootstrap Checkbox" />
 
-Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
+### Without labels
 
-<ExampleSnippet component="CheckboxWithoutLabelsExample" componentName="React Form Checkbox" />
+If omitting a label, remember to include `aria-label` for accessibility compliance.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />
 
 ## Checkbox toggle buttons
 
-Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
+Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
 
-<ExampleSnippet component="CheckboxToggleButtonsExample" componentName="React Form Checkbox" />
+<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />
 
-### Outlined styles
+### Outlined toggle styles
 
-Different variants of button, such at the various outlined styles, are supported.
+Use outlined button variants for a lighter, bordered appearance.
 
-<ExampleSnippet component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Form Checkbox" />
+<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />
 
-## API
+## API reference
 
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+Refer to the API documentation for detailed descriptions of all the available props and configuration options.
 
 - [&lt;CFormCheck /&gt;](../api/#cformcheck)
diff --git a/packages/docs/content/forms/checkbox/index.mdx b/packages/docs/content/forms/checkbox/index.mdx
index bf330f43..fd8db1ae 100644
--- a/packages/docs/content/forms/checkbox/index.mdx
+++ b/packages/docs/content/forms/checkbox/index.mdx
@@ -1,71 +1,69 @@
 ---
-title: React Bootstrap Checkbox Component
-name: Checkbox with Bootstrap Styling
-description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
+title: React Checkbox Components
+name: Checkbox
+description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
 route: /forms/checkbox/
-bootstrap_component: true
+other_frameworks: checkbox
 ---
 
-## How to use React Bootstrap Checkbox component
+## Approach
 
-Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.
+Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
 
-### Basic example
+## Checkboxes
 
-Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.
+<ExampleSnippet component="CheckboxExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxExample" componentName="React Bootstrap Checkbox" />
+### Indeterminate
 
-### Indeterminate state
+Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
 
-Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
+<ExampleSnippet component="CheckboxIndeterminateExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxIndeterminateExample" componentName="React Bootstrap Checkbox" />
+### Disabled
 
-### Disabled state
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
 
-Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
+<ExampleSnippet component="CheckboxDisabledExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxDisabledExample" componentName="React Bootstrap Checkbox" />
+## Default (stacked)
 
-### Stacked layout (default)
+By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
 
-By default, multiple checkboxes stack vertically and are spaced evenly.
+<ExampleSnippet component="CheckboxStackedExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxStackedExample" componentName="React Bootstrap Checkbox" />
+## Inline
 
-### Inline checkboxes
+Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
 
-Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
+<ExampleSnippet component="CheckboxInlineExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxInlineExample" componentName="React Bootstrap Checkbox" />
+## Reverse 
 
-### Reversed checkboxes
+Put your checkboxes on the opposite side by adding `reverse` boolean property.
 
-Use the `reverse` prop to position the checkbox on the opposite side of the label.
+<ExampleSnippet component="CheckboxReverseExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxReverseExample" componentName="React Bootstrap Checkbox" />
+## Without labels
 
-### Without labels
+Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
 
-If omitting a label, remember to include `aria-label` for accessibility compliance.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />
+<ExampleSnippet component="CheckboxWithoutLabelsExample" componentName="React Form Checkbox" />
 
 ## Checkbox toggle buttons
 
-Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
+Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />
+<ExampleSnippet component="CheckboxToggleButtonsExample" componentName="React Form Checkbox" />
 
-### Outlined toggle styles
+### Outlined styles
 
-Use outlined button variants for a lighter, bordered appearance.
+Different variants of button, such at the various outlined styles, are supported.
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />
+<ExampleSnippet component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Form Checkbox" />
 
-## API reference
+## API
 
-Refer to the API documentation for detailed descriptions of all the available props and configuration options.
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
 
 - [&lt;CFormCheck /&gt;](./api/#cformcheck)

From 90d8100809b9ce5c52907af25102d6e506bc285b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 12 Jun 2025 12:32:42 +0200
Subject: [PATCH 3/3] refactor: update tabs component

---
 packages/remark-code-tabs/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/remark-code-tabs/index.js b/packages/remark-code-tabs/index.js
index bb414d7d..e8b6d6a6 100755
--- a/packages/remark-code-tabs/index.js
+++ b/packages/remark-code-tabs/index.js
@@ -140,7 +140,7 @@ function createTabs(tabNodes, { labels }) {
   })
 
   return {
-    attributes: [{ name: 'activeItemKey', type: 'mdxJsxAttribute', value: 0 }],
+    attributes: [{ name: 'defaultActiveItemKey', type: 'mdxJsxAttribute', value: 0 }],
     children: [
       {
         attributes: [