@dynamic-framework/ui-react 2.7.0 → 2.9.0

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

@@ -8,7 +8,14 @@ export type DropdownAction = {
     isDivider?: boolean;
     label: string;
 };
-type DropdownPlacement = 'auto' | 'down' | 'up' | 'start' | 'end';
+type ResolvedSide = 'down' | 'up' | 'start' | 'end';
+type DropdownPlacement = 'auto' | ResolvedSide;
+/**
+ * Horizontal alignment of the menu relative to the toggle, applied only when
+ * the resolved placement is vertical (`down`/`up`) — mirrors Bootstrap's
+ * `dropdown-menu-end`/`dropdown-center` menu alignment options.
+ */
+export type DropdownAlignment = 'start' | 'end' | 'center';
 type Props = {
     actions: DropdownAction[];
     dropdownToggle?: ((props: {
@@ -19,6 +26,7 @@ type Props = {
     classNameMenu?: string;
     asPortal?: boolean;
     placement?: DropdownPlacement;
+    alignment?: DropdownAlignment;
 };
-export default function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal, placement, }: Props): import("react").JSX.Element;
+export default function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal, placement, alignment, }: Props): import("react").JSX.Element;
 export {};

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

@@ -12,6 +12,7 @@ type Props = ComponentPropsWithoutRef<'input'> & BaseProps & {
     invalid?: boolean;
     valid?: boolean;
     hint?: string;
+    /** Only applies when `type` is `checkbox`; ignored for `radio`. */
     indeterminate?: boolean;
     value?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;

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

@@ -10,8 +10,9 @@ type Props = BaseProps & {
     inputClassName?: string;
     invalid?: boolean;
     valid?: boolean;
+    hint?: string;
     readonly?: boolean;
     onChange?: (isChecked: boolean) => void;
 };
-export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, readonly, className, style, dataAttributes, inputClassName, onChange, }: Props): import("react").JSX.Element;
+export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, hint, readonly, className, style, dataAttributes, inputClassName, onChange, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DModal/components/DModalHeader.d.ts

@@ -3,8 +3,12 @@ import type { BaseProps, FamilyIconProps } from '../../interface';
 type Props = BaseProps & FamilyIconProps & PropsWithChildren<{
     showCloseButton?: boolean;
     icon?: string;
+    iconMaterialStyle?: boolean;
+    /**
+     * @deprecated Use `iconMaterialStyle` instead. It will be removed in a future major version.
+     */
     materialStyle?: boolean;
     onClose?: () => void;
 }>;
-export default function DModalHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, materialStyle, }: Props): import("react").JSX.Element;
+export default function DModalHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, iconMaterialStyle, materialStyle: materialStyleProp, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DOffcanvas/components/DOffcanvasHeader.d.ts

@@ -3,8 +3,12 @@ import type { BaseProps, FamilyIconProps } from '../../interface';
 type Props = BaseProps & FamilyIconProps & PropsWithChildren<{
     showCloseButton?: boolean;
     icon?: string;
+    iconMaterialStyle?: boolean;
+    /**
+     * @deprecated Use `iconMaterialStyle` instead. It will be removed in a future major version.
+     */
     materialStyle?: boolean;
     onClose?: () => void;
 }>;
-export default function DOffcanvasHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, materialStyle, }: Props): import("react").JSX.Element;
+export default function DOffcanvasHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, iconMaterialStyle, materialStyle: materialStyleProp, }: Props): import("react").JSX.Element;
 export {};

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

@@ -11,6 +11,7 @@ export type PropsOtp = PropsWithChildren<{
         title?: string;
         contact?: string | React.ReactNode;
         resendText?: string;
+        invalidCode?: string;
     };
 }>;
 export default function DOtp({ className, action, isLoading, otpSize, texts, seconds, }: PropsOtp): import("react").JSX.Element;

package/dist/types/components/DOtp/components/OtpCountdown.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 type Props = {
-    seconds: number;
+    secondsLeft: number;
+    restartCountdown: () => void;
     resendText?: string;
     message?: (secondsLeft: number) => string;
 };
-export default function OtpCountdown({ seconds, resendText, message, }: Props): import("react").JSX.Element;
+export default function OtpCountdown({ secondsLeft, restartCountdown, resendText, message, }: Props): import("react").JSX.Element;
 export {};

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

@@ -1,16 +1,51 @@
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { Placement } from '@floating-ui/react';
 import type { BaseProps, ComponentSize } from '../interface';
-export type Props = BaseProps & PropsWithChildren<{
+export type Props = BaseProps & {
+    /** CSS class applied to the wrapper element that surrounds `Component` (the trigger). */
     childrenClassName?: string;
+    /**
+     * Distance in pixels between the trigger and the floating tooltip.
+     * Defaults to arrow height + gap.
+     */
     offSet?: number;
+    /** Virtual padding, in pixels, used to keep the tooltip within the viewport boundaries. */
     padding?: number;
+    /** When true, the tooltip opens when the pointer hovers over the trigger element. */
     withHover?: boolean;
+    /**
+     * When true, the tooltip opens when the trigger element receives keyboard focus
+     * (recommended for accessibility).
+     */
     withFocus?: boolean;
+    /** When true, the tooltip toggles open/closed when the trigger element is clicked. */
     withClick?: boolean;
+    /** Controls the initial open state of the tooltip. */
     open?: boolean;
+    /** Size of the tooltip content. Omit for the default size. */
     size?: ComponentSize;
+    /**
+     * Preferred position of the tooltip relative to the trigger element.
+     * Flips automatically if there isn't enough space.
+     */
     placement?: Placement;
+    /**
+     * Element that triggers the tooltip. It is rendered inside a wrapper `<div>`
+     * that holds the Floating UI reference and the interaction handlers, so the
+     * trigger area is that wrapper rather than this node itself. Style it with
+     * `childrenClassName`.
+     */
     Component: ReactNode;
-}>;
+    /**
+     * Floating content rendered inside the tooltip body. Keep it short and
+     * non-critical: the tooltip is only visible while it is open.
+     */
+    children?: ReactNode;
+};
+/**
+ * Tooltip is an abstraction component that wraps any element (`Component`) and displays
+ * floating contextual content (`children`) positioned relative to it using Floating UI.
+ * Use it to add short, non-critical hints or descriptions triggered by hover, focus, or
+ * click, without altering the surrounding layout.
+ */
 export default function DTooltip({ className, childrenClassName, style, offSet, padding, withFocus, withClick, withHover, open, placement, size, Component, children, }: Props): import("react").JSX.Element;

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

@@ -9,7 +9,9 @@ type Props = PropsWithChildren<{
     title: string;
     downloadText?: string;
     shareText?: string;
+    fileName?: string;
+    hideActions?: boolean;
     onError?: (err: Error) => Promise<void> | void;
 }>;
-export default function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText, shareText, className, children, }: Props): import("react").JSX.Element;
+export default function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText, shareText, fileName, hideActions, className, children, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DVoucher/hooks/useScreenshotDownload.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export default function useScreenshotDownload(): {
-    download: () => Promise<void>;
+    download: (fileName?: string) => Promise<void>;
     downloadRef: import("react").RefObject<HTMLDivElement | null>;
 };

package/dist/types/components/DVoucher/hooks/useScreenshotDownload.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export default function useScreenshotWebShare(): {
-    share: () => Promise<void>;
+    share: (fileName?: string) => Promise<void>;
     shareRef: import("react").RefObject<HTMLDivElement | null>;
 };

package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1,5 @@
 import DVoucher from './DVoucher';
+export { default as useScreenshot } from './hooks/useScreenshot';
+export { default as useScreenshotDownload } from './hooks/useScreenshotDownload';
+export { default as useScreenshotWebShare } from './hooks/useScreenshotWebShare';
 export default DVoucher;

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

@@ -50,7 +50,7 @@ export type { DToastContainerProps, DToastOptions, ToastData } from './DToastCon
 export { default as DInputPhone } from './DInputPhone';
 export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';
-export { default as DVoucher } from './DVoucher';
+export { default as DVoucher, useScreenshot, useScreenshotDownload, useScreenshotWebShare, } from './DVoucher';
 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';

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

@@ -9,3 +9,6 @@ export { default as useMediaQuery } from './useMediaQuery';
 export { default as useConfirmModal } from './useConfirmModal';
 export type { UseConfirmModalConfig, UseConfirmModalReturn, ConfirmModalColor, CriticalConfirmConfig, } from './useConfirmModal';
 export { useMediaBreakpointUpXs, useMediaBreakpointUpSm, useMediaBreakpointUpMd, useMediaBreakpointUpLg, useMediaBreakpointUpXl, useMediaBreakpointUpXxl, } from './useMediaBreakpointUp';
+export { default as useCountdown } from './useCountdown';
+export { default as useOtp } from './useOtp';
+export type { UseOtpConfig, UseOtpReturn } from './useOtp';

package/dist/types/hooks/tests/useCountdown.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+/**
+ * Generic seconds-based countdown hook.
+ *
+ * Starts counting down from `seconds` to `0` and exposes `restartCountdown`
+ * to reset and restart the timer (e.g. for "resend code in Xs" patterns,
+ * session-expiry banners, or any other cooldown/throttle UI).
+ *
+ * @example
+ * const { secondsLeft, restartCountdown } = useCountdown(30);
+ */
+export default function useCountdown(seconds: number): {
+    secondsLeft: number;
+    restartCountdown: () => void;
+};

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

@@ -1,15 +1,10 @@
 import type { RefObject, ForwardedRef, FocusEvent } from 'react';
 import type { Options } from 'currency.js';
-import type { CustomStyles } from '../components/interface';
-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>): {
+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): {
     inputRef: RefObject<HTMLInputElement | null>;
     innerValue: string;
     innerType: string;
     handleOnFocus: (event: FocusEvent<HTMLInputElement>) => void;
     handleOnChange: (newValue?: string) => void;
     handleOnBlur: (event: FocusEvent<HTMLInputElement>) => void;
-    generateStyleVariables: CustomStyles;
-    generateSymbolStyleVariables: {
-        color: string;
-    };
 };

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

@@ -0,0 +1,98 @@
+export type UseOtpConfig = {
+    /** Called when the OTP reaches the expected length and `submit()` is invoked. */
+    action: () => Promise<void> | void;
+    /** Expected number of digits/characters for a valid OTP. Defaults to `6`. */
+    otpSize?: number;
+    /** Initial countdown (in seconds) before resend becomes available. Defaults to `15`. */
+    seconds?: number;
+};
+export type UseOtpReturn = {
+    /** Current OTP value. */
+    otp: string;
+    /**
+     * Updates the OTP value (wire this to your custom pin input's `onChange`).
+     * Also clears `invalid`/`error` as soon as the value actually changes, so
+     * the error state disappears once the user edits the code (a no-op call
+     * with the same value, e.g. from an uncontrolled input re-notifying its
+     * current value, does not reset `invalid`/`error`).
+     */
+    setOtp: (value: string) => void;
+    /**
+     * `true` when `submit()` is called with an OTP shorter than `otpSize`, or
+     * when `action` throws/rejects (e.g. the backend rejected the entered
+     * code as incorrect).
+     */
+    invalid: boolean;
+    /**
+     * The value thrown/rejected by `action`, or `null` otherwise. Use it to
+     * render a specific message for a wrong code, as opposed to a too-short
+     * one.
+     */
+    error: unknown;
+    /**
+     * Validates the OTP length; if valid, calls `action`. If `action`
+     * rejects, the returned promise rejects too (so callers can still
+     * `.catch()` it for logging), and `invalid`/`error` are set beforehand.
+     */
+    submit: () => Promise<void>;
+    /**
+     * `true` while `action` is being awaited inside `submit()` (i.e. the OTP
+     * passed the length check and the async action hasn't settled yet). Wire
+     * it to your submit button's loading/disabled state. It's `false` while
+     * idle and immediately after `action` settles (whether it resolves or
+     * rejects), and it's never set to `true` for the too-short/length
+     * validation failure since `action` isn't called in that case.
+     */
+    isLoading: boolean;
+    /** Seconds remaining until resend is available. */
+    secondsLeft: number;
+    /** Restarts the resend countdown (call it from your "Resend" action). */
+    restartCountdown: () => void;
+};
+/**
+ * Headless hook exposing the same OTP logic used internally by `DOtp`
+ * (code state, length + correctness validation, submit action and resend
+ * countdown), without any bundled markup/styles.
+ *
+ * Use this when the default `DOtp` component doesn't match your design and
+ * you need to build a fully custom UI while reusing the same behavior.
+ *
+ * Internally composes `useCountdown` for the resend timer and re-exposes
+ * `secondsLeft`/`restartCountdown`, so there is no need to call
+ * `useCountdown` separately.
+ *
+ * `invalid` becomes `true` both when the OTP is shorter than `otpSize` and
+ * when `action` throws/rejects (e.g. the backend rejected the entered code
+ * as incorrect). In the latter case, the thrown value is exposed as `error`
+ * so custom UIs can render an appropriate message (e.g. "Invalid code" vs.
+ * "Enter all digits"). `invalid`/`error` are cleared automatically as soon
+ * as the user edits the code via `setOtp`.
+ *
+ * @example
+ * function CustomOtp() {
+ *   const {
+ *     otp,
+ *     setOtp,
+ *     invalid,
+ *     error,
+ *     submit,
+ *     isLoading,
+ *     secondsLeft,
+ *     restartCountdown,
+ *   } = useOtp({ action: async () => verifyOtp(otp), otpSize: 6, seconds: 15 });
+ *
+ *   return (
+ *     <>
+ *       <MyCustomPinInput value={otp} onChange={setOtp} invalid={invalid} />
+ *       {invalid && <span>{error ? 'Invalid code' : 'Enter all digits'}</span>}
+ *       <button disabled={isLoading} onClick={() => { submit().catch(() => {}); }}>
+ *         {isLoading ? 'Submitting...' : 'Submit'}
+ *       </button>
+ *       <button disabled={secondsLeft > 0} onClick={restartCountdown}>
+ *         Resend {secondsLeft > 0 ? `(${secondsLeft}s)` : ''}
+ *       </button>
+ *     </>
+ *   );
+ * }
+ */
+export default function useOtp({ action, otpSize, seconds, }: UseOtpConfig): UseOtpReturn;

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

@@ -0,0 +1,32 @@
+/**
+ * Builds an internal URL from a `path` and a set of query `params`, normalizing leading
+ * separators to prevent scheme-relative URLs (e.g. `//accounts` and `/\accounts` both become
+ * `/accounts`).
+ *
+ * The `path` is trimmed and every tab, line feed and carriage return is removed before
+ * building the result, because the URL parser ignores those characters too and they would
+ * otherwise hide a scheme-relative prefix (`/<TAB>/evil.com` resolves to `//evil.com`).
+ *
+ * Handles the special case where `path` is the literal string `'#'`, which happens when
+ * a Liquid template variable used as a link target is left unconfigured; in that case the
+ * params are ignored and `'#'` is returned as-is instead of building a broken URL.
+ *
+ * @param path - The path to build the URL from. Leading separators are stripped before
+ * building the result (`/accounts`, `//accounts` and `\accounts` are all treated as `accounts`).
+ * @param params - Key/value pairs serialized as the query string.
+ * @returns The resulting URL:
+ * - `'#'` when `path` normalizes to `'#'` (`'#'`, `'/#'`), ignoring the params.
+ * - `'/'` when `path` is empty and there are no params.
+ * - `'/?<query>'` when `path` is empty and there are params.
+ * - `'<path>'` or `'<path>?<query>'` when `path` starts with `#`, since a fragment must not be
+ *   prefixed with `/` (it would navigate away from the current document).
+ * - `'/<path>'` or `'/<path>?<query>'` otherwise.
+ *
+ * @example
+ * buildUrl('accounts', { account_id: '42' }); // '/accounts?account_id=42'
+ * buildUrl('//accounts', {}); // '/accounts'
+ * buildUrl('#', { account_id: '42' }); // '#'
+ * buildUrl('#accounts', { account_id: '42' }); // '#accounts?account_id=42'
+ * buildUrl('', { tab: 'movimientos' }); // '/?tab=movimientos'
+ */
+export default function buildUrl(path: string, params: Record<string, string | number>): string;

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

@@ -4,4 +4,6 @@ export { default as getQueryString } from './getQueryString';
 export { default as changeQueryString } from './changeQueryString';
 export { default as getCssVariable } from './getCssVariable';
 export { default as validatePhoneNumber } from './validatePhoneNumber';
+export { default as sanitizeHref } from './sanitizeHref';
+export { default as buildUrl } from './buildUrl';
 export * from './mediaQuery';

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

@@ -0,0 +1,37 @@
+/**
+ * Validates a `href` value and returns it only if it is safe to render as a link,
+ * preventing XSS through unsafe URL schemes and scheme-relative URLs.
+ *
+ * Before validating, the value is trimmed and every tab, line feed and carriage return is
+ * removed, because the URL parser ignores those characters too and they would otherwise
+ * hide an unsafe value from the checks below.
+ *
+ * A `href` is considered safe when it is either:
+ * - An absolute path starting with a single separator (e.g. `/accounts/42`). A leading `\`
+ *   is normalized to `/` in the returned value, since that is how the browser resolves it.
+ * - A URL using one of the allowed schemes: `http:`, `https:`, `mailto:`, `tel:`.
+ *
+ * A `href` is rejected (returns `undefined`) when it is:
+ * - Empty or made only of whitespace/ignored characters (`''`, `'   '`).
+ * - Scheme-relative (starts with two separators, e.g. `//evil.com`, `/\evil.com`,
+ *   `/<TAB>/evil.com`), since the browser would resolve it using the current protocol and it
+ *   can be used to redirect to an attacker-controlled host.
+ * - Using a disallowed/dangerous scheme, such as `javascript:` or `data:`
+ *   (e.g. `javascript:alert(1)`, `data:text/html,<script>...</script>`).
+ * - Not parseable as an absolute URL and not an absolute path, such as bare fragments
+ *   (`#anchor`) or scheme-less relative paths (`relative/path`). These cannot be validated
+ *   against `SAFE_SCHEMES`, so they are rejected rather than assumed safe.
+ *
+ * @param href - The raw URL or path to validate, typically coming from user input,
+ * a CMS, or an external API.
+ * @returns The sanitized `href` when safe, `undefined` otherwise.
+ *
+ * @example
+ * sanitizeHref('/accounts/42'); // '/accounts/42'
+ * sanitizeHref('https://example.com'); // 'https://example.com'
+ * sanitizeHref('mailto:test@example.com'); // 'mailto:test@example.com'
+ * sanitizeHref('//evil.com'); // undefined
+ * sanitizeHref('/\\evil.com'); // undefined
+ * sanitizeHref('javascript:alert(1)'); // undefined
+ */
+export default function sanitizeHref(href: string): string | undefined;

package/dist/types/utils/tests/buildUrl.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/tests/sanitizeHref.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -40,9 +40,10 @@
     }
   ],
   "scripts": {
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
+    "test": "jest --testPathPatterns=\\.spec\\.tsx?$",
+    "test:watch": "jest --testPathPatterns=\\.spec\\.tsx?$ --watch",
+    "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 cp",
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
@@ -80,7 +81,8 @@
     "prepare": "husky",
     "commitlint": "commitlint --edit",
     "verify": "node scripts/verify.js",
-    "axe": "npx tsx scripts/generate-a11y-report.ts"
+    "axe": "npx tsx scripts/generate-a11y-report.ts",
+    "axe:browser": "npx tsx scripts/generate-a11y-browser-warnings.ts"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -130,6 +132,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/google-libphonenumber": "~7.4.30",
     "@types/jest": "~29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
@@ -157,7 +160,7 @@
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.3.0",
     "lint-staged": "^15.2.10",
-    "playwright": "^1.58.2",
+    "playwright": "1.61.1",
     "postcss-cli": "~10.1.0",
     "react": "~19.2.1",
     "react-docgen-typescript": "^2.4.0",

package/src/style/_shame.scss

@@ -4,16 +4,12 @@
   flex: 1;
 }
 
+// Deprecated by bootstrap 5.3, but still used in some components
 .text-muted {
   --#{$prefix}text-muted: var(--#{$prefix}gray-500);
   color: var(--#{$prefix}text-muted) !important;
 }
 
-.form-text {
-  --#{$prefix}form-text: var(--#{$prefix}gray-500);
-  color: var(--#{$prefix}form-text) !important;
-}
-
 .spinner-border {
   margin-top: 4px;
   margin-bottom: 4px;

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

@@ -91,7 +91,9 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "cursors";
 @import "chips";
 @import "collapse-icon-text";
+@import "box";
 @import "box-file";
 @import "datepicker";
 @import "input-phone";
+@import "input-currency";
 // end custom

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

@@ -0,0 +1,7 @@
+// Box (DBox)
+
+$box-component-bg: var(--#{$prefix}white) !default;
+$box-component-border: 0 !default;
+$box-component-border-radius: var(--#{$prefix}border-radius) !default;
+$box-component-padding: var(--#{$prefix}ref-spacer-4) !default;
+$box-component-shadow: var(--#{$prefix}box-shadow-sm) !default;

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

@@ -1,6 +1,6 @@
 // scss-docs-start form-text-variables
 $form-text-margin-top: var(--#{$prefix}ref-spacer-1) !default;
-$form-text-color: var(--#{$prefix}gray-400) !default;
+$form-text-color: var(--#{$prefix}gray-500) !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
@@ -81,8 +81,6 @@ $input-group-addon-border-color: transparent !default;
 // custom
 $input-group-sm-icon-size: $spacer-4 !default;
 $input-group-lg-icon-size: $spacer-6 !default;
-$form-text-padding-y: 0 !default;
-$form-text-padding-x: 0 !default;
 // end custom
 
 // scss-docs-start form-select-variables

package/src/style/abstracts/variables/_input-currency.scss

@@ -0,0 +1 @@
+$input-currency-symbol-color: var(--#{$prefix}secondary) !default;

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

@@ -1 +1,12 @@
-$box-shadow-lg: 0 10px 10px rgba(0, 0, 0, .02) !default;
+// Shadows
+//
+// Bootstrap's shadow scale, declared here explicitly so the elevation ramp is
+// visible in one place and can be retuned quickly. Keep it monotonic:
+// `sm` < default < `lg`, otherwise the `.shadow-*` / `.hover:shadow-*`
+// utilities stop matching what Bootstrap's docs show.
+//
+// scss-docs-start box-shadow-variables
+$box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175) !default;
+// scss-docs-end box-shadow-variables

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

@@ -43,7 +43,6 @@
 @import "form-control";
 @import "form-range";
 @import "list-group";
-@import "form-text";
 @import "input-group";
 @import "buttons";
 @import "button-group";

package/src/style/base/_form-check.scss

@@ -8,10 +8,12 @@
 }
 
 .form-check {
+  // .form-check padding-start only accounts for the input width, the gap between
+  // the input and the label comes from .form-check-label's --bs-label-padding-x.
+  // The hint must repeat that offset to stay aligned with the label text.
   .form-text {
-    --#{$prefix}form-text-padding: 0 var(--#{$prefix}ref-spacer-2);
-
     display: flex;
+    padding-inline: var(--#{$prefix}ref-spacer-2);
   }
 
   @each $state, $data in $form-validation-states {

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

@@ -22,3 +22,10 @@
 @import "d-table-head";
 @import "d-input-phone";
 @import "d-credit-card";
+@import "d-input-currency";
+@import "d-confirm-modal";
+@import "d-data-state-wrapper";
+@import "d-error-boundary";
+@import "d-otp";
+@import "d-password-strength-meter";
+@import "d-stepper";

package/src/style/components/_d-box-file.scss

@@ -69,6 +69,11 @@
   }
 }
 
+.d-box-file-empty-text {
+  margin: 0;
+  text-align: center;
+}
+
 .d-box-files {
   --#{$prefix}box-file-list-gap: #{$box-file-list-gap};
   --#{$prefix}box-file-list-padding: #{$box-file-list-padding};

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

@@ -1,9 +1,9 @@
 .d-box {
-  --#{$prefix}box-component-bg: #{var(--#{$prefix}white)};
-  --#{$prefix}box-component-border: 0;
-  --#{$prefix}box-component-border-radius: #{var(--#{$prefix}border-radius)};
-  --#{$prefix}box-component-padding: #{var(--#{$prefix}ref-spacer-4)};
-  --#{$prefix}box-component-shadow: #{var(--#{$prefix}box-shadow-lg)};
+  --#{$prefix}box-component-bg: #{$box-component-bg};
+  --#{$prefix}box-component-border: #{$box-component-border};
+  --#{$prefix}box-component-border-radius: #{$box-component-border-radius};
+  --#{$prefix}box-component-padding: #{$box-component-padding};
+  --#{$prefix}box-component-shadow: #{$box-component-shadow};
 
   padding: var(--#{$prefix}box-component-padding);
   background-color: var(--#{$prefix}box-component-bg);

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

@@ -1,5 +1,6 @@
 .d-close {
   display: flex;
+  align-self: center;
   padding: 0;
   background: transparent;
   border: 0;