@dynamic-framework/ui-react 2.2.0 → 2.3.1

package/dist/types/components/DBadge/DBadge.d.ts

@@ -1,8 +1,9 @@
 import type { BaseProps, ComponentColor } from '../interface';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
 type Props = BaseProps & {
     text?: string;
     soft?: boolean;
-    size?: 'sm' | 'lg';
+    size?: string | ResponsiveProp;
     rounded?: boolean;
     color?: ComponentColor;
     id?: string;
@@ -12,5 +13,5 @@ type Props = BaseProps & {
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
 };
-export default function DBadge({ text, soft, color, id, rounded, className, size, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DBadge(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DButton/DButton.d.ts

@@ -1,11 +1,12 @@
 import { type ButtonHTMLAttributes } from 'react';
-import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, EndIconProps, StartIconProps } from '../interface';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
+import type { BaseProps, ButtonVariant, ComponentColor, EndIconProps, StartIconProps } from '../interface';
 interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, BaseProps, StartIconProps, EndIconProps {
     href?: string;
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     color?: ComponentColor;
-    size?: ComponentSize;
+    size?: string | ResponsiveProp;
     variant?: ButtonVariant;
     text?: string;
     loading?: boolean;

package/dist/types/components/DButtonIcon/DButtonIcon.d.ts

@@ -1,22 +1,18 @@
 import type { MouseEvent } from 'react';
-import type { BaseProps, ButtonType, ButtonVariant, ComponentColor, ComponentSize, FamilyIconProps, InputState } from '../interface';
-type Props = BaseProps & FamilyIconProps & {
-    id?: string;
+import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, FamilyIconProps, InputState } from '../interface';
+type Props = BaseProps & FamilyIconProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: string;
     size?: ComponentSize;
     variant?: ButtonVariant;
     color?: ComponentColor;
     state?: InputState;
-    type?: ButtonType;
     loading?: boolean;
     loadingAriaLabel?: string;
-    ariaLabel?: string;
     stopPropagationEnabled?: boolean;
-    disabled?: boolean;
     href?: string;
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 };
-export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, color, type, loading, disabled, href, target, rel, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, disabled, color, loading, href, target, rel, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, 'aria-label': ariaLabelProp, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DCollapse/DCollapse.d.ts

@@ -3,7 +3,6 @@ import type { BaseProps, FamilyIconProps } from '../interface';
 type Props = BaseProps & FamilyIconProps & PropsWithChildren<{
     id?: string;
     Component: ReactElement<unknown> | ReactNode;
-    hasSeparator?: boolean;
     /**
      * Reactive prop for controlled and uncontrolled mode.
      *
@@ -15,5 +14,5 @@ type Props = BaseProps & FamilyIconProps & PropsWithChildren<{
     iconOpen?: string;
     iconClose?: string;
 }>;
-export default function DCollapse({ id, className, style, Component, hasSeparator, defaultCollapsed, onChange, children, iconOpen: iconOpenProp, iconClose: iconCloseProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DCollapse({ id, className, style, Component, defaultCollapsed, onChange, children, iconOpen: iconOpenProp, iconClose: iconCloseProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DDatePicker/DDatePicker.d.ts

@@ -24,6 +24,7 @@ type Props = BaseProps & FamilyIconProps & Omit<DatePickerProps, 'showMonthDropd
     showHeaderSelectors?: boolean;
     formatHeaderDate?: string;
     locale?: Locale;
+    ariaLabelInputTime?: string;
 };
-export default function DDatePicker({ inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeInputLabel, minYearSelect, maxYearSelect, iconHeaderSize, iconMaterialStyle, iconInput, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, invalid, valid, renderCustomHeader: renderCustomHeaderProp, className, dateFormatCalendar, style, dataAttributes, placeholder, showHeaderSelectors, formatHeaderDate, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DDatePicker({ inputLabel, inputHint, inputAriaLabel, ariaLabelInputTime, inputActionAriaLabel, inputId, timeId, timeInputLabel, minYearSelect, maxYearSelect, iconHeaderSize, iconMaterialStyle, iconInput, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, invalid, valid, renderCustomHeader: renderCustomHeaderProp, className, dateFormatCalendar, style, dataAttributes, placeholder, showHeaderSelectors, formatHeaderDate, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DDatePicker/components/DDatePickerTime.d.ts

@@ -1,7 +1,5 @@
-type Props = {
-    id?: string;
-    value?: string;
-    onChange?: (time: string) => void;
-};
-export default function DDatePickerTime({ value, onChange, id, }: Props): import("react/jsx-runtime").JSX.Element;
+import { ComponentProps } from 'react';
+import DInput from '../../DInput';
+type Props = Pick<ComponentProps<typeof DInput>, 'id' | 'value' | 'onChange' | 'aria-label'>;
+export default function DDatePickerTime({ ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DInputPin/DInputPin.d.ts

@@ -14,6 +14,7 @@ type Props = BaseProps & FamilyIconProps & {
     invalid?: boolean;
     valid?: boolean;
     onChange?: (value: string) => void;
+    'aria-label'?: string;
 };
-export default function DInputPin({ id: idProp, label, placeholder, type, disabled, loading, secret, characters, innerInputMode, hint, invalid, valid, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputPin({ id: idProp, label, placeholder, type, disabled, loading, secret, characters, innerInputMode, hint, invalid, valid, className, style, dataAttributes, onChange, 'aria-label': ariaLabel, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DPopover/DPopover.d.ts

@@ -1,12 +1,7 @@
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { ReactElement, PropsWithChildren } from 'react';
 import type { BaseProps } from '../interface';
 type Props = BaseProps & PropsWithChildren<{
-    /**
-     * Component to render in call to action
-     * @param {boolean} open
-     * @returns {React.ReactElement}
-     */
-    renderComponent: (open: boolean) => ReactElement<unknown>;
+    renderComponent: (open: boolean) => ReactElement;
     open: boolean;
     setOpen?: (open: boolean) => void;
     adjustContentToRender?: boolean;

package/dist/types/components/DSelect/DSelect.d.ts

@@ -13,6 +13,7 @@ import DSelectPlaceholder from './components/DSelectPlaceholder';
 import type { BaseProps, EndIconProps, FamilyIconProps, StartIconProps } from '../interface';
 type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
     label?: string;
+    ariaLabel?: string;
     hint?: string;
     invalid?: boolean;
     valid?: boolean;
@@ -27,7 +28,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
     searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
     multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
 };
-declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DSelect & {
     OptionCheck: typeof DSelectOptionCheck;
     OptionIcon: typeof DSelectOptionIcon;

package/dist/types/components/DSelect/components/DSelectOptionCheck.d.ts

@@ -1,2 +1,2 @@
 import type { GroupBase, OptionProps } from 'react-select';
-export default function DSelectOptionCheck<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ innerProps, children, isSelected, ...props }: OptionProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export default function DSelectOptionCheck<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, isSelected, ...props }: OptionProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DTabs/DTabs.d.ts

@@ -14,8 +14,10 @@ type Props = BaseProps & PropsWithChildren<{
     defaultSelected: string;
     vertical?: boolean;
     variant?: TabVariant;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 }>;
-declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant, dataAttributes, ariaLabel, ariaLabelledBy, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DTabs & {
     Tab: typeof DTabContent;
 };

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -75,7 +75,8 @@
     "lint-staged": "lint-staged",
     "prepare": "husky",
     "commitlint": "commitlint --edit",
-    "verify": "node scripts/verify.js"
+    "verify": "node scripts/verify.js",
+    "axe": "npx tsx scripts/generate-a11y-report.ts"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -109,10 +110,7 @@
     "react-select": "~5.10.2"
   },
   "devDependencies": {
-    "@babel/core": "~7.23.2",
-    "@babel/preset-env": "~7.23.2",
-    "@babel/preset-react": "~7.22.15",
-    "@babel/preset-typescript": "~7.23.2",
+    "@axe-core/playwright": "^4.11.1",
     "@commitlint/cli": "~19.3.0",
     "@commitlint/config-conventional": "~19.2.2",
     "@mdx-js/react": "~2.3.0",
@@ -135,8 +133,6 @@
     "@vitejs/plugin-react": "~4.7.0",
     "autoprefixer": "~10.4.16",
     "axe-playwright": "~1.2.3",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "~9.1.3",
     "conventional-changelog-conventionalcommits": "~6.1.0",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",
@@ -147,14 +143,13 @@
     "eslint-plugin-react-hooks": "~4.6.0",
     "formik": "~2.4.8",
     "framer-motion": "^12.23.24",
-    "glob": "^11.1.0",
     "husky": "~9.1.7",
     "i18next": "~25.6.1",
-    "jest": "~29.7.0",
-    "jest-axe": "~8.0.0",
-    "jest-cli": "~29.7.0",
-    "jest-environment-jsdom": "~29.7.0",
+    "jest": "^30.3.0",
+    "jest-axe": "^10.0.0",
+    "jest-environment-jsdom": "^30.3.0",
     "lint-staged": "^15.2.10",
+    "playwright": "^1.58.2",
     "postcss-cli": "~10.1.0",
     "react": "~19.2.1",
     "react-dom": "~19.2.1",
@@ -163,13 +158,14 @@
     "recharts": "~3.3.0",
     "remark-gfm": "~4.0.1",
     "rimraf": "~6.1.0",
-    "rollup": "~4.53.1",
+    "rollup": "^4.59.0",
     "sass": "~1.69.4",
     "storybook": "^10.2.8",
     "stylelint": "^16.16.0",
     "stylelint-config-twbs-bootstrap": "^16.0.0",
-    "ts-jest": "~29.2.3",
+    "ts-jest": "^29.4.6",
     "tslib": "~2.6.2",
+    "tsx": "^4.21.0",
     "typescript": "~5.2.2",
     "vite": "^6.4.1",
     "yup": "^1.6.1"

package/src/style/_shame.scss

@@ -5,12 +5,12 @@
 }
 
 .text-muted {
-  --#{$prefix}text-muted: var(--#{$prefix}gray-400);
+  --#{$prefix}text-muted: var(--#{$prefix}gray-500);
   color: var(--#{$prefix}text-muted) !important;
 }
 
 .form-text {
-  --#{$prefix}form-text: var(--#{$prefix}gray-400);
+  --#{$prefix}form-text: var(--#{$prefix}gray-500);
   color: var(--#{$prefix}form-text) !important;
 }
 

package/src/style/abstracts/_mixins.scss

@@ -43,12 +43,12 @@
 // scss-docs-start df-btn-outline-variant-variables-mixin
 @mixin df-button-outline-variant-variables(
   $color-name,
-  $default-color: var(--#{$prefix}#{$color-name}-500),
+  $default-color: if($color-name == "warning", var(--#{$prefix}#{$color-name}-700), var(--#{$prefix}#{$color-name}-500)),
   $default-border-color: $default-color,
-  $hover-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-color: if($color-name == "warning", var(--#{$prefix}#{$color-name}-800), var(--#{$prefix}#{$color-name}-600)),
   $hover-border-color: $hover-color,
   $focus-color: $hover-color,
-  $active-color: var(--#{$prefix}#{$color-name}-700),
+  $active-color: if($color-name == "warning", var(--#{$prefix}#{$color-name}-900), var(--#{$prefix}#{$color-name}-700)),
   $active-border-color: $active-color,
   $disabled-opacity: $btn-disabled-opacity,
   $box-shadow: $btn-box-shadow,
@@ -84,7 +84,7 @@
 // scss-docs-start df-btn-link-variant-variables-mixin
 @mixin df-button-link-variant-variables(
   $color-name,
-  $default-color: var(--#{$prefix}#{$color-name}-500),
+  $default-color: if($color-name == "warning", var(--#{$prefix}#{$color-name}-700), var(--#{$prefix}#{$color-name}-500)),
   $hover-text-color: var(--#{$prefix}#{$color-name}-600),
   $focus-text-color: var(--#{$prefix}#{$color-name}-600),
   $active-text-color: var(--#{$prefix}#{$color-name}-700),

package/src/style/abstracts/_utilities.scss

@@ -38,20 +38,10 @@ $utilities: map-merge(
         )
       )
     ),
-    "shadow": map-merge(
-      map-get($utilities, "shadow"),
-      (
-        values: (
-          null: var(--#{$prefix}box-shadow),
-          sm: var(--#{$prefix}box-shadow-sm),
-          lg: var(--#{$prefix}box-shadow-lg),
-          none: none
-        )
-      )
-    ),
     "text-opacity": map-merge(
       map-get($utilities, "text-opacity"),
       (
+        responsive: true,
         values: map-merge(
           map-get(map-get($utilities, "text-opacity"), "values"),
           (
@@ -72,15 +62,82 @@ $utilities: map-merge(
         responsive: true
       )
     ),
+    "border": map-merge(
+      map-get($utilities, "border"),
+      (
+        responsive: true,
+      )
+    ),
+    "border-top": map-merge(
+      map-get($utilities, "border-top"),
+      (
+        responsive: true,
+      )
+    ),
+    "border-end": map-merge(
+      map-get($utilities, "border-end"),
+      (
+        responsive: true,
+      )
+    ),
+    "border-bottom": map-merge(
+      map-get($utilities, "border-bottom"),
+      (
+        responsive: true,
+      )
+    ),
+    "border-start": map-merge(
+      map-get($utilities, "border-start"),
+      (
+        responsive: true,
+      )
+    ),
     "border-color": map-merge(
       map-get($utilities, "border-color"),
       (
+        responsive: true,
         values: map-merge(
           map-get(map-get($utilities, "border-color"), "values"),
           map-loop($palette-grays, rgba-css-var, "$key", "border"),
         )
       )
     ),
+    "border-width": map-merge(
+      map-get($utilities, "border-width"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded": map-merge(
+      map-get($utilities, "rounded"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded-top": map-merge(
+      map-get($utilities, "rounded-top"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded-end": map-merge(
+      map-get($utilities, "rounded-end"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded-bottom": map-merge(
+      map-get($utilities, "rounded-bottom"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded-start": map-merge(
+      map-get($utilities, "rounded-start"),
+      (
+        responsive: true,
+      )
+    ),
     "grid-column": (
       class: "g-col",
       property: grid-column,

package/src/style/abstracts/variables/_+import.scss

@@ -20,8 +20,8 @@ $focus-ring-opacity: .25 !default;
 $focus-ring-blur: 0 !default;
 // custom
 $focus-ring-border-color: transparent !default;
-$focus-ring-color-mapping: "secondary-rgb" !default;
-$focus-ring-color: var(--#{$prefix}gray-100) !default;
+$focus-ring-color-mapping: "primary-rgb" !default;
+$focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
 // end custom
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables

package/src/style/abstracts/variables/_alerts.scss

@@ -1,6 +1,6 @@
 // Alerts
 // scss-docs-start alert-variables
-$alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$alert-border-radius: var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight: var(--#{$prefix}fw-bold) !default;
 // scss-docs-end alert-variables
 

package/src/style/abstracts/variables/_border.scss

@@ -15,3 +15,12 @@ $border-radius-xl: 1.5rem !default;
 $border-radius-xxl: 2rem !default;
 $border-radius-pill: 50rem !default;
 // scss-docs-end border-radius-variables
+
+$border-widths: (
+  1: var(--#{$prefix}border-width),
+  2: calc(var(--#{$prefix}border-width) * 2),
+  3: calc(var(--#{$prefix}border-width) * 3),
+  4: calc(var(--#{$prefix}border-width) * 4),
+  5: calc(var(--#{$prefix}border-width) * 5),
+  6: calc(var(--#{$prefix}border-width) * 6)
+) !default;

package/src/style/abstracts/variables/_buttons.scss

@@ -7,7 +7,7 @@ $btn-color: var(--#{$prefix}body-color) !default;
 $btn-padding-y: $spacer-2 !default;
 $btn-padding-x: $spacer-4 !default;
 $btn-line-height: 1.5 !default;
-$btn-font-weight: $font-weight-semibold !default;
+$btn-font-weight: $font-weight-normal !default;
 
 $btn-padding-y-sm: $spacer-1 !default;
 $btn-padding-x-sm: $spacer-3 !default;

package/src/style/abstracts/variables/_carousel.scss

@@ -2,7 +2,19 @@
 
 // scss-docs-start carousel-variables
 $carousel-control-color: var(--#{$prefix}white) !default;
-$carousel-indicator-active-bg: var(--#{$prefix}white) !default;
+$carousel-indicator-bg: var(--#{$prefix}primary-100) !default;
+$carousel-indicator-border: 1px solid var(--#{$prefix}primary-200) !default;
+$carousel-indicator-width: 16px !default;
+$carousel-indicator-height: 16px !default;
+$carousel-indicator-radius: 100px !default;
+$carousel-indicator-active-width: 26px !default;
+$carousel-indicator-active-bg: var(--#{$prefix}primary) !default;
+$carousel-indicator-active-border: var(--#{$prefix}primary) !default;
+$carousel-indicator-hover-bg: var(--#{$prefix}primary-200) !default;
+$carousel-control-bg: var(--#{$prefix}primary) !default;
+$carousel-control-width: 24px !default;
+$carousel-control-height: 24px !default;
+$carousel-control-radius: 48px !default;
 $carousel-caption-color: var(--#{$prefix}white) !default;
 // scss-docs-end carousel-variables
 

package/src/style/abstracts/variables/_colors.scss

@@ -41,7 +41,7 @@ $purple: #4848b7 !default;
 $pink: #d81b60 !default;
 $red: #dc3545 !default;
 $orange: #fd7e14 !default;
-$yellow: #ffc107 !default;
+$yellow: #ffb300 !default;
 $green: #198754 !default;
 $teal: #20c997 !default;
 $cyan: #0dcaf0 !default;
@@ -404,7 +404,7 @@ $info-text-emphasis: var(--#{$prefix}info-600) !default;
 $warning-text-emphasis: var(--#{$prefix}warning-800) !default;
 $danger-text-emphasis: var(--#{$prefix}danger-600) !default;
 $light-text-emphasis: var(--#{$prefix}gray-600) !default;
-$dark-text-emphasis: var(--#{$prefix}gray-600) !default;
+$dark-text-emphasis: var(--#{$prefix}gray-25) !default;
 // scss-docs-end theme-text-variables
 
 // scss-docs-start theme-bg-subtle-variables

package/src/style/abstracts/variables/_navs.scss

@@ -1,34 +1,30 @@
 // Navs
 
 // scss-docs-start nav-variables
-$nav-link-padding-y: $spacer-2 !default;
-$nav-link-padding-x: $spacer-4 !default;
-$nav-link-font-size: var(--#{$prefix}body-font-size) !default;
-$nav-link-font-weight: var(--#{$prefix}fw-normal) !default;
-$nav-link-color: var(--#{$prefix}gray-900) !default;
-$nav-link-hover-color: var(--#{$prefix}primary-600) !default;
-$nav-link-hover-bg: transparent !default; // Custom
-$nav-link-disabled-color: var(--#{$prefix}gray-300) !default;
+$nav-link-padding-y:                $spacer-2 !default;
+$nav-link-padding-x:                $spacer-4 !default;
+$nav-link-font-size:                var(--#{$prefix}body-font-size) !default;
+$nav-link-font-weight:              var(--#{$prefix}fw-normal) !default;
+$nav-link-color:                    var(--#{$prefix}gray-900) !default;
+$nav-link-hover-color:              var(--#{$prefix}primary-600) !default;
+$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$nav-link-disabled-color:           var(--#{$prefix}gray-300) !default;
+$nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;
 
-// custom
-$nav-link-border-active-font-weight: var(--#{$prefix}fw-bold) !default;
-// end custom
+$nav-tabs-border-color:             var(--#{$prefix}gray-100) !default;
+$nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
+$nav-tabs-border-radius:            var(--#{$prefix}border-radius-sm) !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        var(--#{$prefix}primary) !default;
+$nav-tabs-link-active-bg:           var(--#{$prefix}white) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}nav-tabs-border-color) !default;
 
-$nav-tabs-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$nav-tabs-link-active-color: var(--#{$prefix}primary) !default;
-$nav-tabs-link-active-bg: var(--#{$prefix}white) !default;
-$nav-tabs-link-active-border-color: var(--#{$prefix}gray-300) !default;
-$nav-tabs-border-color: var(--#{$prefix}gray-300) !default;
+$nav-pills-border-radius:           var(--#{$prefix}border-radius-sm) !default;
+$nav-pills-link-active-color:       var(--#{$prefix}primary-500) !default;
+$nav-pills-link-active-bg:          var(--#{$prefix}gray-50) !default;
 
-// custom
-$nav-nav-gap: var(--#{$prefix}ref-spacer-0) !default;
-// end custom
-
-$nav-pills-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$nav-pills-link-active-color: var(--#{$prefix}white) !default;
-$nav-pills-link-active-bg: var(--#{$prefix}primary) !default;
+$nav-underline-gap:                 1rem !default;
+$nav-underline-border-width:        2px !default;
+$nav-underline-link-active-color:   var(--#{$prefix}primary) !default;
+$nav-underline-font-weight:         var(--#{$prefix}fw-normal) !default; // custom
 // scss-docs-end nav-variables
-
-$nav-underline-link-active-color: var(--#{$prefix}primary) !default;
-$nav-underline-border-width: 2px !default;
-$nav-underline-border-color: transparent !default;

package/src/style/base/_+import.scss

@@ -59,3 +59,4 @@
 @import "tooltip";
 @import "placeholder";
 @import "nav";
+@import "carousel"

package/src/style/base/_badge.scss

@@ -3,7 +3,7 @@
   --#{$prefix}badge-icon-size: #{$badge-font-size};
   --#{$prefix}badge-bg: #{$badge-bg};
   --#{$prefix}badge-color: #{$badge-color};
-  --#{$prefix}badge-sm-font-size: var(--#{$prefix}font-size-sm);
+  --#{$prefix}badge-sm-font-size: var(--#{$prefix}fs-small);
   --#{$prefix}badge-lg-font-size: var(--#{$prefix}fs-5);
 
   display: inline-flex;

package/src/style/base/_carousel.scss

@@ -0,0 +1,44 @@
+.carousel-indicators {
+  position: relative;
+  [data-bs-target] {
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    text-align: left;
+    text-indent: 0;
+    background: $carousel-indicator-bg;
+    border: $carousel-indicator-border;
+    border-radius: $carousel-indicator-radius;
+    opacity: 1;
+    transition: .3s;
+    &.active {
+      width: $carousel-indicator-active-width;
+      background: $carousel-indicator-active-bg;
+      border-color: $carousel-indicator-active-border;
+      transition: .3s;
+      &:hover {
+        background: $carousel-indicator-active-bg;
+      }
+    }
+    &:hover {
+      background: $carousel-indicator-hover-bg;
+    }
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  top: calc(50% - 20px);
+  bottom: auto;
+  width: $carousel-control-width;
+  height: $carousel-control-height;
+  padding: var(--#{$prefix}ref-spacer-1);
+  margin-inline: var(--#{$prefix}ref-spacer-1);
+  background: $carousel-control-bg;
+  border-radius: $carousel-control-radius;
+  opacity: .85;
+}
+
+.carousel-control-next-icon,
+.carousel-control-prev-icon {
+  filter: invert(1);
+}

package/src/style/base/_collapse.scss

@@ -14,6 +14,8 @@
   --#{$prefix}collapse-separator-display: none;
   --#{$prefix}collapse-separator-height: 1px;
   --#{$prefix}collapse-separator-bg: var(--#{$prefix}gray-200);
+  --#{$prefix}collapse-interpolate-size: allow-keywords;
+  --#{$prefix}collapse-transition: all ease-in-out .3s allow-discrete;
 
   background-color: var(--#{$prefix}collapse-bg);
   border-radius: var(--#{$prefix}collapse-border-radius);
@@ -40,15 +42,26 @@
     position: relative;
     padding: var(--#{$prefix}collapse-body-padding-y) var(--#{$prefix}collapse-body-padding-x);
     padding-top: 0;
+  }
 
-    &::before {
-      position: absolute;
-      top: 0;
-      display: var(--#{$prefix}collapse-separator-display);
-      width: calc(100% - (var(--#{$prefix}collapse-body-padding-x) * 2));
-      height: var(--#{$prefix}collapse-separator-height);
-      content: " ";
-      background-color: var(--#{$prefix}collapse-separator-bg);
+  .collapse-body-wrapper {
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: var(--#{$prefix}collapse-transition);
+    interpolate-size: var(--#{$prefix}collapse-interpolate-size);
+    &.show {
+      display: block;
+      height: auto;
+      opacity: 1;
     }
   }
+
+  @starting-style {
+    .collapse-body-wrapper.show {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
 }