@dynamic-framework/ui-react 2.10.0 → 2.11.0

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

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import DTabContent from './components/DTabContent';
+import DTabsProvider from './components/DTabsProvider';
 import type { BaseProps } from '../interface';
 export type DTabOption = {
     label: string | React.ReactNode;
@@ -9,16 +10,26 @@ export type DTabOption = {
 export type TabVariant = 'tabs' | 'pills' | 'underline' | 'toggle-button-group';
 type Props = BaseProps & PropsWithChildren<{
     classNameTab?: string;
+    /**
+     * Class for the panels container. It is only rendered when `DTabs` has
+     * children, so a tab bar used as pure navigation leaves no empty node.
+     */
+    classNameContent?: string;
     onChange?: (option: DTabOption) => void;
     options: Array<DTabOption>;
-    defaultSelected: string;
+    /**
+     * Ignored inside `DTabs.Provider`, which owns the selection. Without it, the
+     * first enabled tab is selected when omitted.
+     */
+    defaultSelected?: string;
     vertical?: boolean;
     variant?: TabVariant;
     ariaLabel?: string;
     ariaLabelledBy?: string;
 }>;
-declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant, dataAttributes, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
+declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, classNameContent, style, vertical, variant, dataAttributes, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 declare const _default: typeof DTabs & {
     Tab: typeof DTabContent;
+    Provider: typeof DTabsProvider;
 };
 export default _default;

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

@@ -4,5 +4,10 @@ type TabContextState = {
     isSelected: (tab: DTabOption['tab']) => boolean;
 };
 declare const TabContext: import("react").Context<TabContextState | undefined>;
+type TabsState = {
+    selected: string;
+    setSelected: (tab: string) => void;
+};
+export declare const TabsStateContext: import("react").Context<TabsState | undefined>;
 export declare function useTabContext(): TabContextState;
 export default TabContext;

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

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from 'react';
+type Props = PropsWithChildren<{
+    defaultSelected: string;
+}>;
+/**
+ * Owns the selected tab so the tab bar (`DTabs`) and its panels (`DTabs.Tab`)
+ * can live anywhere inside it, e.g. the bar in a header and the panels in
+ * another column.
+ */
+export default function DTabsProvider({ defaultSelected, children, }: Props): import("react").JSX.Element;
+export {};

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

@@ -1,5 +1,6 @@
 import DTabs from './DTabs';
 export type { DTabOption } from './DTabs';
 export { default as DTabContent } from './components/DTabContent';
+export { default as DTabsProvider } from './components/DTabsProvider';
 export { useTabContext } from './TabContext';
 export default DTabs;

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

@@ -1,9 +1,16 @@
 import { PropsWithChildren } from 'react';
 import DToastHeader from './components/DToastHeader';
 import DToastBody from './components/DToastBody';
-import { BaseProps } from '../interface';
-type Props = PropsWithChildren<BaseProps>;
-declare function DToast({ children, className, style, dataAttributes, }: Props): import("react").JSX.Element;
+import { BaseProps, LiveRegionRole } from '../interface';
+type Props = PropsWithChildren<BaseProps & {
+    /**
+     * `alert` (default) interrupts the screen reader, for critical errors.
+     * `status` announces without interrupting, for confirmations and other
+     * non-critical messages. `none` renders no live region.
+     */
+    role?: LiveRegionRole;
+}>;
+declare function DToast({ children, role, className, style, dataAttributes, }: Props): import("react").JSX.Element;
 declare const _default: typeof DToast & {
     Header: typeof DToastHeader;
     Body: typeof DToastBody;

package/dist/types/components/DToastContainer/useDToast.d.ts

@@ -1,5 +1,5 @@
 import { Renderable, Toast, ToastPosition, ValueFunction } from 'react-hot-toast';
-import { ComponentStateColor } from '../interface';
+import { ComponentStateColor, LiveRegionRole } from '../interface';
 /**
  * Data used to render the default DToast component via `useDToast`.
  * When `description` is provided, the toast renders with a header and body layout.
@@ -19,6 +19,13 @@ export type ToastData = {
     closeIcon?: string;
     /** Applies the `toast-{color}` CSS modifier class. */
     color?: ComponentStateColor;
+    /**
+     * Live region role of the toast. Defaults to `alert`; use `status` for
+     * confirmations so the screen reader doesn't interrupt the user.
+     */
+    role?: LiveRegionRole;
+    /** Accessible name of the close button. Defaults to `"Close"`. */
+    closeAriaLabel?: string;
 };
 /** Options forwarded to react-hot-toast for a single toast instance. */
 export interface DToastOptions {

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

@@ -42,7 +42,7 @@ export { default as DStepperDesktop } from './DStepperDesktop';
 export { default as DStepperMobile } from './DStepperMobile';
 export { default as DTooltip } from './DTooltip';
 export { default as DTimeline } from './DTimeline';
-export { default as DTabs, useTabContext, DTabContent, } from './DTabs';
+export { default as DTabs, useTabContext, DTabContent, DTabsProvider, } from './DTabs';
 export type { DTabOption } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
@@ -54,6 +54,6 @@ export { default as DVoucher, useScreenshot, useScreenshotDownload, useScreensho
 export { default as DOtp } from './DOtp';
 export { default as DErrorBoundary, useErrorBoundary, type FallbackProps, getErrorMessage, } from './DErrorBoundary';
 export { default as DDataStateWrapper, EmptyState, ErrorState, LoadingState, } from './DDataStateWrapper';
-export type { DDataStateMessages } from './DDataStateWrapper';
+export type { DDataStateMessages, DDataStateWrapperListProps, DDataStateWrapperSingleProps, } from './DDataStateWrapper';
 export { default as DConfirmModalContainer } from './DConfirmModal/DConfirmModalContainer';
 export type { ConfirmModalEntry, ConfirmModalStore } from './DConfirmModal/types';

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

@@ -11,6 +11,13 @@ export type NavegableProps = {
     'aria-current'?: string;
 };
 export type ComponentSize = 'sm' | 'lg';
+/**
+ * How a message is exposed to assistive technology: `alert` interrupts the
+ * screen reader (critical errors), `status` is announced without interrupting
+ * (non-critical dynamic messages) and `none` is not a live region (static
+ * content already on screen).
+ */
+export type LiveRegionRole = 'alert' | 'status' | 'none';
 export type BreakpointSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type AvatarSize = 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type DataAttributes = Record<`data-${string}`, string | number | undefined | null | boolean>;

package/dist/types/components/internal/DFormLabel.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+type Props = {
+    htmlFor: string;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * The `<label>` every form control renders, with the click guard already wired.
+ *
+ * Internal: it exists so the guard — and the lint exception it needs — lives in
+ * one place instead of being repeated across every input component.
+ *
+ * The guard runs in the capture phase, not on bubble: a tooltip or modal
+ * trigger that calls `stopPropagation()` in its own handler — a common pattern —
+ * would otherwise keep the guard from ever running, and the browser would go on
+ * to activate the labelled control. Confirmed in Chromium, where the same
+ * trigger toggles the control with a bubble-phase guard and does not with this
+ * one. Capturing changes nothing else: `preventDefault` applies to the default
+ * action, which is evaluated after propagation either way.
+ *
+ * The `jsx-a11y` rules below assume a click handler is being used to make a
+ * non-interactive element interactive, which then owes the keyboard an
+ * equivalent. This handler does the opposite: it suppresses a pointer-only
+ * behaviour, the click a label forwards to its control, and adds no way to
+ * activate anything. Keyboard support for a nested trigger is the consumer's:
+ * `<a href>` carries its own, while a `span` with a role and a tabindex is
+ * focusable but inert until they handle Enter and Space themselves.
+ */
+export default function DFormLabel({ htmlFor, className, children }: Props): import("react").JSX.Element;
+export {};

package/dist/types/contexts/portal/DPortalStack.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+type Props = {
+    stack: Array<{
+        name: string;
+        Component: FC<{
+            name: string;
+            payload: any;
+        }>;
+        payload: unknown;
+    }>;
+};
+export default function DPortalStack({ stack }: Props): import("react").JSX.Element;
+export {};

package/dist/types/hooks/useControlledState.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Backs a value that the consumer may or may not drive, so a control works in
+ * both modes without a copy of the state drifting away from the props.
+ *
+ * A control counts as controlled only when the consumer passes the value *and*
+ * an `onChange` to push it back. The value on its own has always meant "start
+ * here" in this library — `<DInputCheck type="radio" checked />` inside a radio
+ * group, for one — so treating it as controlled would silently freeze those
+ * controls, and React emits no warning to say why: the components always attach
+ * their own `onChange` handler.
+ *
+ * @param value the value coming from props, or `undefined` when not passed.
+ * @param isControlled whether the consumer can drive the value back.
+ * @param initialValue what to start from when no value is passed.
+ * @returns the value to render, and a setter to call on every user change.
+ */
+export default function useControlledState<T>(value: T | undefined, isControlled: boolean, initialValue: T): [T, (next: T) => void];

package/dist/types/hooks/useInputCurrency.d.ts

@@ -1,9 +1,34 @@
 import type { RefObject, ForwardedRef, FocusEvent } from 'react';
 import type { Options } from 'currency.js';
-export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>, minValue?: number, maxValue?: number): {
+/**
+ * State and handlers for a currency input: a formatted string while the field
+ * is idle and the raw number while it is being edited.
+ *
+ * `minValue`/`maxValue` bound the value. With `clamp` (default `true`) an
+ * out-of-range value is brought into range whenever it is not being typed:
+ * on mount, when `value` or the bounds change, and on blur. Every time the
+ * clamp changes the value, `onChange` receives the clamped number, so the
+ * input and the consumer's state never disagree. While the field is focused
+ * the typed number is reported as is, so a partial entry is not rewritten.
+ *
+ * With `clamp: false` the value is never changed: the bounds only feed
+ * `isOverMax` / `isUnderMin`, so the consumer can show its own message (e.g.
+ * "You exceeded the limit") and keep the entered amount.
+ *
+ * Controlled usage follows the same contract as a native controlled input:
+ * reflect `onChange` into `value` in the same event (`setState` in the
+ * handler). The hook keeps showing `value` whenever it isn't being edited, so
+ * a consumer can reject a change by keeping `value` as it was. Deferring the
+ * update (a timer, awaiting a request) makes the hook see a stale `value` in
+ * between: the field can flash the previous amount and a clamp can be
+ * reported again when the deferred value arrives.
+ */
+export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>, minValue?: number, maxValue?: number, clamp?: boolean): {
     inputRef: RefObject<HTMLInputElement | null>;
     innerValue: string;
     innerType: string;
+    isOverMax: boolean;
+    isUnderMin: boolean;
     handleOnFocus: (event: FocusEvent<HTMLInputElement>) => void;
     handleOnChange: (newValue?: string) => void;
     handleOnBlur: (event: FocusEvent<HTMLInputElement>) => void;

package/dist/types/hooks/useMediaBreakpointUp.d.ts

@@ -1,3 +1,13 @@
+import type { BreakpointProps } from '../contexts/DContext';
+/** Clears the cached CSS breakpoints. Only meant for tests. */
+export declare function resetCssBreakpointsCache(): void;
+/**
+ * Pixel value of a breakpoint. `DContextProvider` reads them from the CSS and
+ * shares them through the context; outside of it (a tree without the
+ * provider, or its first render) they are read from the same CSS variables
+ * here, so responsive props resolve either way.
+ */
+export declare function useBreakpointValue(breakpoint: keyof BreakpointProps): string;
 export declare function useMediaBreakpointUpXs(useListener?: boolean): boolean;
 export declare function useMediaBreakpointUpSm(useListener?: boolean): boolean;
 export declare function useMediaBreakpointUpMd(useListener?: boolean): boolean;

package/dist/types/utils/hasLabelContent.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+/**
+ * Whether a `label` node has something to render.
+ *
+ * The render paths cannot test `label` for truthiness: since the prop widened
+ * to `ReactNode` it also accepts `0`, which React renders as the text "0" and
+ * which `isTextLabel` counts as a text label, yet which a truthiness check
+ * would drop — leaving the control visibly unlabelled.
+ *
+ * Absent (`undefined`, `null`), empty (`''`) and boolean labels render nothing,
+ * so they are the ones that stand for "no label". The empty string matters
+ * because it is the default several components fall back to.
+ *
+ * Arrays are inspected rather than taken at face value: `label={items.map(...)}`
+ * over an empty list yields `[]`, while a list of skipped entries yields
+ * `[false, null]`. Both render nothing, so treating them as content would leave
+ * an empty `<label>` on the page — and make the naming warning fire over a
+ * label that was never there.
+ *
+ * Only arrays, though, even though `ReactNode` admits any iterable. Reading a
+ * one-shot iterator — a generator — would exhaust it here, and the component
+ * goes on to render the same value, so the label would vanish precisely because
+ * we checked for it. An array can be walked as often as needed; anything else
+ * is taken on faith.
+ *
+ * Anything else — an element, a portal, a generator — counts as content: what
+ * it renders is only knowable by rendering it, and an element that draws
+ * nothing visible is the consumer's decision rather than an absent label.
+ */
+export default function hasLabelContent(label: ReactNode): boolean;

package/dist/types/utils/isTextLabel.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * Narrows a `label` node to the plain-text case.
+ *
+ * `label` accepts any `ReactNode` so patterns like a terms-and-conditions link
+ * or an info trigger can live next to the field name. Anything that is not text
+ * cannot be forwarded to a string-only attribute (`aria-label`, `placeholder`)
+ * nor laid out by Bootstrap's `form-floating`, so those paths check this first.
+ *
+ * Numbers and bigints count as text: React renders them as their string form
+ * and so does `String()`, which is what the string-only attributes end up
+ * receiving. `bigint` is part of `ReactNode` under these React types, so
+ * leaving it out made a label React draws as text get treated as a rich node.
+ * React 18 cannot render one, which `DFormLabel` handles by rendering its
+ * string form — the classification stays true for every supported React.
+ */
+export default function isTextLabel(label: ReactNode): label is string | number | bigint;

package/dist/types/utils/labelClickGuard.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEvent } from 'react';
+/**
+ * Stops a click on a non-native trigger inside a `<label>` from also activating
+ * the labelled control.
+ *
+ * Verified against Chromium, which forwards the click for every one of the
+ * `PSEUDO_INTERACTIVE` selectors above while exempting the native ones. Note
+ * that jsdom does not reproduce this: its `isInteractiveContent` counts any
+ * element carrying a `tabindex` as interactive content, so a jsdom test passes
+ * whether or not this guard exists. That is why the guard is unit-tested
+ * directly rather than through a rendered component.
+ *
+ * Native interactive content returns early rather than falling through, since
+ * `preventDefault` on those clicks would cancel the link navigation or the
+ * image map the label is meant to let through.
+ *
+ * `DFormLabel` wires this in the capture phase so a trigger that stops
+ * propagation cannot skip it.
+ */
+export default function labelClickGuard(event: MouseEvent<HTMLLabelElement>): void;

package/dist/types/utils/warnLabelUsage.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+type WarnLabelUsageOptions = {
+    /** Component name, used to key the warning and to address the developer. */
+    component: string;
+    /** The `label` prop as received. */
+    label: ReactNode;
+    /** Whether an explicit accessible name reaches the control. */
+    hasAccessibleName: boolean;
+    /**
+     * The prop this component actually accepts for the accessible name, so the
+     * advice is usable: components that spread the native input attributes take
+     * `aria-label`, the rest expose the camelCase `ariaLabel` and reject the
+     * native one at compile time.
+     */
+    accessibleNameProp: 'aria-label' | 'ariaLabel';
+    /** Whether the component is rendering in Bootstrap's floating-label layout. */
+    floatingLabel?: boolean;
+};
+/**
+ * Warns, only outside production builds, about the two ways a non-text `label`
+ * goes wrong.
+ *
+ * A text label doubles as the control's accessible name. A `ReactNode` one does
+ * not: the name becomes whatever the subtree happens to compute to, which for a
+ * label carrying a link or an icon trigger reads as the wrong thing or as
+ * nothing at all — so an explicit name is needed. Which prop carries it differs
+ * per component, hence `accessibleNameProp`: naming the wrong one would send
+ * the developer to a prop their component rejects.
+ *
+ * `form-floating` is the second case: it animates a single line of text between
+ * the placeholder and the label position, so a node with its own height or its
+ * own interactive children breaks the layout rather than the semantics.
+ *
+ * Labels the render paths drop are skipped through the same `hasLabelContent`
+ * they use, so `label={condition && <span />}` with a false condition warns
+ * about nothing: there is no label on the page to name.
+ *
+ * The `process.env.NODE_ENV` guard belongs at the call site — that is what
+ * bundlers constant-fold, dropping this module from a consumer's production
+ * bundle.
+ */
+export default function warnLabelUsage({ component, label, hasAccessibleName, accessibleNameProp, floatingLabel, }: WarnLabelUsageOptions): void;
+export {};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -45,11 +45,12 @@
     "test:coverage": "jest --testPathPatterns=\\.spec\\.tsx?$ --coverage",
     "test:a11y": "jest --testPathPatterns=\\.a11y\\.test\\.tsx$",
     "test:storybook": "test-storybook",
-    "build": "npm run clean && npm run build:react && npm run build:scss && npm run build:icons-core && npm run cp",
+    "build": "npm run clean && npm run build:react && npm run build:scss && npm run build:icons-core && npm run build:api && npm run cp",
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "node scripts/build-scss.js",
     "build:icons-core": "npx tsx scripts/build-icons-core.ts",
+    "build:api": "node scripts/generate-api.mjs && mkdir -p dist && cp registry/api.json dist/api.json",
     "build:scss:watch": "npx nodemon --watch src --ext scss --exec 'npm run build:scss'",
     "dev:ts": "tsc -p tsconfig.build.json",
     "dev:rollup": "rollup -c rollup.config.mjs",
@@ -67,6 +68,9 @@
     "validate:registry": "node scripts/validate-registry.mjs",
     "generate:token-overrides": "node scripts/generate-token-overrides.mjs && node scripts/generate-token-overrides-schema.mjs",
     "validate:token-overrides": "node scripts/validate-token-overrides.mjs",
+    "theme:expand": "node scripts/theme/theme-expand.mjs",
+    "theme:validate": "node scripts/theme/theme-validate.mjs",
+    "theme:preview": "vite scripts/theme --port 4173 --open /preview/",
     "eslint": "npm run eslint:src && npm run eslint:stories && npm run eslint:test",
     "eslint:src": "eslint 'src/**/*.ts' 'src/**/*.tsx' --ignore-pattern '**/*.spec.tsx'",
     "eslint:stories": "eslint stories/**/*.stories.tsx",
@@ -75,7 +79,7 @@
     "postversion": "npm run build:scss",
     "publish:cdn": "npm run publish:cdn-version && npm run publish:cdn-latest",
     "publish:cdn-version": "node scripts/publish-cdn.js",
-    "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --exclude 'api.json' --acl public-read",
+    "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --exclude 'api.json' --exclude 'manifests/*' --acl public-read",
     "publish:cdn-rc": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/rc/ui-react --delete --acl public-read",
     "publish:cdn-dev": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/dev/ui-react --delete --acl public-read",
     "lint-staged": "lint-staged",
@@ -145,6 +149,7 @@
     "autoprefixer": "~10.4.16",
     "axe-playwright": "~1.2.3",
     "conventional-changelog-conventionalcommits": "~6.1.0",
+    "culori": "^4.0.2",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",
     "eslint-config-airbnb-typescript": "~17.1.0",

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

@@ -17,10 +17,10 @@ $body-color: map-get($all-colors, $body-color-mapping) !default;
 $body-bg: #f5f6fa !default;
 
 $body-secondary-color: var(--#{$prefix}body-color-rgb) !default;
-$body-secondary-bg: var(--#{$prefix}gray-200) !default;
+$body-secondary-bg: var(--#{$prefix}gray-200-rgb) !default;
 
 $body-tertiary-color: var(--#{$prefix}body-color-rgb) !default;
-$body-tertiary-bg: var(--#{$prefix}gray-100) !default;
+$body-tertiary-bg: var(--#{$prefix}gray-100-rgb) !default;
 
 $body-emphasis-color: var(--#{$prefix}black-rgb) !default;
 // end custom

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

@@ -10,4 +10,6 @@ $chip-padding-y: $spacer-1 !default;
 $chip-font-size: $small-font-size !default;
 $chip-font-weight: $font-weight-bold !default;
 $chip-line-height: $line-height-base !default;
+$chip-icon-container-size: 1lh !default;
+$chip-icon-container-size-fallback: $line-height-base * 1em !default;
 // scss-docs-end chip-variables

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

@@ -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-25) !default;
+$dark-text-emphasis: var(--#{$prefix}gray-900) !default;
 // scss-docs-end theme-text-variables
 
 // scss-docs-start theme-bg-subtle-variables
@@ -415,7 +415,7 @@ $info-bg-subtle: var(--#{$prefix}info-25) !default;
 $warning-bg-subtle: var(--#{$prefix}warning-25) !default;
 $danger-bg-subtle: var(--#{$prefix}danger-25) !default;
 $light-bg-subtle: var(--#{$prefix}gray-100) !default;
-$dark-bg-subtle: var(--#{$prefix}gray-400) !default;
+$dark-bg-subtle: var(--#{$prefix}gray-300) !default;
 // scss-docs-end theme-bg-subtle-variables
 
 // scss-docs-start theme-border-subtle-variables

package/src/style/base/_buttons.scss

@@ -149,8 +149,11 @@
     @include box-shadow(none);
   }
 
+  // The glyph follows the button's font size unless a size is set explicitly,
+  // through DIcon's `size` (inline) or `--bs-icon-component-size` on the icon
+  // or the button.
   .d-icon {
-    --#{$prefix}icon-size: var(--#{$prefix}btn-font-size);
+    --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}btn-font-size));
   }
 }
 

package/src/style/base/_input-group.scss

@@ -71,11 +71,14 @@
   --#{$prefix}input-group-sm-icon-size: #{$input-group-sm-icon-size};
   --#{$prefix}input-group-lg-icon-size: #{$input-group-lg-icon-size};
 
-  &.input-group-sm .d-icon {
+  // Icons inside a button (a DButton or DButtonIcon in `inputStart`/`inputEnd`)
+  // keep following the button's font size, as before `.btn .d-icon` honored
+  // an explicit icon size.
+  &.input-group-sm .d-icon:not(.btn .d-icon) {
     --#{$prefix}icon-component-size: var(--#{$prefix}input-group-sm-icon-size);
   }
 
-  &.input-group-lg .d-icon {
+  &.input-group-lg .d-icon:not(.btn .d-icon) {
     --#{$prefix}icon-component-size: var(--#{$prefix}input-group-lg-icon-size);
   }
 

package/src/style/base/_list-group.scss

@@ -4,3 +4,58 @@
   gap: var(--#{$prefix}list-group-item-gap);
   align-items: center;
 }
+
+// Interactive item inside a list: the <li> is the visual item (borders,
+// colors, active/disabled) and the link or button fills it, so the group keeps
+// `ul/ol > li` semantics and Bootstrap's sibling selectors still apply.
+.d-list-group-item-interactive {
+  padding: 0;
+
+  &:not(.active):focus-within {
+    z-index: 1;
+    color: var(--#{$prefix}list-group-action-hover-color);
+    background-color: var(--#{$prefix}list-group-action-hover-bg);
+  }
+}
+
+.d-list-group-item-link {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--#{$prefix}list-group-item-gap);
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  background-color: transparent;
+  border: 0;
+  border-radius: inherit;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
+// In a numbered list the counter goes inside the link or button, so the whole
+// row, number included, is clickable. The <li> drops its own counter.
+.list-group-numbered > .list-group-item.d-list-group-item-interactive::before {
+  content: none;
+  counter-increment: none;
+}
+
+.list-group-numbered > .d-list-group-item-interactive > .d-list-group-item-link::before {
+  content: counters(section, ".") ". ";
+  content: counters(section, ".") ". " / "";
+  counter-increment: section;
+}
+
+// The generated number is decoration: an <ol> already announces the position,
+// so screen readers skip it (the second declaration uses the alt-text syntax;
+// browsers without it keep the first).
+.list-group-numbered > .list-group-item::before {
+  content: counters(section, ".") ". ";
+  content: counters(section, ".") ". " / "";
+}

package/src/style/components/_d-chip.scss

@@ -8,6 +8,7 @@
   --#{$prefix}chip-font-size: #{$chip-font-size};
   --#{$prefix}chip-font-weight: #{$chip-font-weight};
   --#{$prefix}chip-line-height: #{$chip-line-height};
+  --#{$prefix}chip-icon-container-size: #{$chip-icon-container-size};
 
   display: inline-flex;
   flex-direction: row;
@@ -29,14 +30,18 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--#{$prefix}chip-line-height);
-    height: var(--#{$prefix}chip-line-height);
+    width: var(--#{$prefix}chip-icon-container-size);
+    height: var(--#{$prefix}chip-icon-container-size);
     padding: 0;
     margin: 0;
     background: transparent;
     border: 0;
   }
 
+  @supports not (width: 1lh) {
+    --#{$prefix}chip-icon-container-size: #{$chip-icon-container-size-fallback};
+  }
+
   @each $theme, $value in map-remove($theme-colors, "light", "dark", "warning") {
     $color: color-contrast($value);
     &.d-chip-#{$theme} {

package/src/style/components/_d-tabs.scss

@@ -1,4 +1,6 @@
 .d-tabs {
+  --#{$prefix}tabs-content-margin-bottom: var(--#{$prefix}ref-spacer-4);
+
   display: flex;
   width: 100%;
 }
@@ -14,6 +16,7 @@
 
 .d-tabs-content {
   width: 100%;
+  margin-bottom: var(--#{$prefix}tabs-content-margin-bottom);
 }
 
 .nav-toggle-button-group {

package/src/style/helpers/_color-bg.scss

@@ -5,6 +5,11 @@
       color: var(--#{$prefix}secondary-700);
       background: var(--#{$prefix}secondary-50);
     }
+  } @else if map-has-key($theme-colors, $color) {
+    .text-bg-#{$color} {
+      color: var(--#{$prefix}#{$color}-text-bg-color) if($enable-important-utilities, !important, null);
+      background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    }
   } @else {
     .text-bg-#{$color} {
       color: color-contrast-var($value) if($enable-important-utilities, !important, null);

package/src/style/root/_root.scss

@@ -71,6 +71,15 @@
     --#{$prefix}#{$color}-border-subtle: #{$value};
   }
 
+  // Text color of `.text-bg-<color>`, resolved in Sass against the default
+  // role value. It lives in a variable so a theme that redefines
+  // `--bs-<color>-rgb` can move it too. `secondary` already reads its ramp.
+  @each $color, $value in $theme-colors {
+    @if $color != "secondary" {
+      --#{$prefix}#{$color}-text-bg-color: #{color-contrast-var($value)};
+    }
+  }
+
   // Fonts
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.