reshaped 3.7.0-canary.9 → 3.7.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -3,16 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import TextField from "../TextField/index.js";
 import DropdownMenu from "../DropdownMenu/index.js";
-import { getActiveElement } from "../../utilities/a11y/index.js";
 import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import s from "./Autocomplete.module.css";
+import useElementId from "../../hooks/useElementId.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
     const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, ...textFieldProps } = props;
+    const [highlightedId, setHighlightedId] = React.useState();
     const onBackspaceRef = useHandlerRef(onBackspace);
-    const onEnterRef = useHandlerRef(onEnter);
+    const contentRef = React.useRef(null);
     const internalInputRef = React.useRef(null);
     const inputAttributesRef = textFieldProps.inputAttributes?.ref;
     const inputRef = inputAttributesRef && typeof inputAttributesRef !== "string" && "current" in inputAttributesRef
@@ -23,15 +25,18 @@ const Autocomplete = (props) => {
     const lockedRef = React.useRef(false);
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
+    const onChangeRef = useHandlerRef(onChange);
+    const onItemSelectRef = useHandlerRef(onItemSelect);
+    const onEnterRef = useHandlerRef(onEnter);
     const isDropdownActive = hasChildren && (active ?? internalActive);
-    const lockDropdown = () => {
+    const lockDropdown = React.useCallback(() => {
         // Prevent dropdown from re-opening when clicked on item with mouse
         // and focus moves to the item and back to the input
         lockedRef.current = true;
         setTimeout(() => {
             lockedRef.current = false;
         }, 100);
-    };
+    }, []);
     const handleOpen = React.useCallback(() => {
         if (lockedRef.current)
             return;
@@ -42,11 +47,11 @@ const Autocomplete = (props) => {
         setInternalActive(false);
         onCloseRef.current?.(args);
     };
-    const handleItemClick = (args) => {
-        onChange?.({ value: args.value, name });
-        onItemSelect?.(args);
+    const handleItemClick = React.useCallback((args) => {
+        onChangeRef.current?.({ value: args.value, name });
+        onItemSelectRef.current?.(args);
         lockDropdown();
-    };
+    }, [lockDropdown, onChangeRef, onItemSelectRef, name]);
     const handleChange = (args) => {
         onChange?.(args);
         handleOpen();
@@ -64,27 +69,56 @@ const Autocomplete = (props) => {
         lockDropdown();
         inputRef.current?.focus();
     };
+    const getOptionElements = React.useCallback(() => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return [];
+        return Array.from(contentEl.querySelectorAll("[role=option]:not([disabled])"));
+    }, []);
     useHotkeys({
+        [keys.ENTER]: () => {
+            const options = getOptionElements();
+            const highlightedOption = options.find((el) => el.id === highlightedId);
+            highlightedOption?.click();
+            onEnterRef.current?.();
+        },
         [keys.BACKSPACE]: () => {
             onBackspaceRef.current?.();
         },
-        [keys.ENTER]: () => {
-            onEnterRef.current?.();
+        [keys.UP]: () => {
+            const options = getOptionElements();
+            if (options.length) {
+                const highlightedIndex = options.findIndex((el) => el.id === highlightedId);
+                const nextOption = options.at(highlightedIndex - 1) || options.at(-1);
+                setHighlightedId(nextOption.id);
+            }
         },
-    }, [onBackspaceRef, onEnterRef], {
-        ref: inputRef,
-        disabled: !onBackspaceRef.current && !onEnterRef.current,
-    });
-    useHotkeys({
         [keys.DOWN]: () => {
             handleOpen();
+            const options = getOptionElements();
+            if (options.length) {
+                const highlightedIndex = options.findIndex((el) => el.id === highlightedId);
+                const nextOption = options.at(highlightedIndex + 1) || options.at(0);
+                setHighlightedId(nextOption.id);
+            }
         },
-        [keys.ENTER]: () => {
-            const el = getActiveElement(inputRef.current);
-            el?.click();
-        },
-    }, [handleOpen], { ref: inputRef, preventDefault: true });
-    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
+    }, [handleOpen, getOptionElements, highlightedId], { ref: inputRef, preventDefault: true });
+    useIsomorphicLayoutEffect(() => {
+        if (!isDropdownActive)
+            return;
+        requestAnimationFrame(() => {
+            const options = getOptionElements();
+            const firstId = options[0]?.id;
+            if (firstId)
+                setHighlightedId(firstId);
+        });
+    }, [isDropdownActive]);
+    const contextValue = React.useMemo(() => ({
+        onItemClick: handleItemClick,
+        highlightedId,
+        setHighlightedId,
+    }), [highlightedId, handleItemClick]);
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -104,18 +138,25 @@ const Autocomplete = (props) => {
                             onClick: attributes.onFocus,
                             ref: inputRef,
                             role: "combobox",
-                        } })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick }, children: children })] }) }));
+                            "aria-activedescendant": highlightedId,
+                            "aria-haspopup": "listbox",
+                            "aria-autocomplete": "list",
+                        } })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick, role: "listbox", ref: contentRef }, children: children })] }) }));
 };
 const AutocompleteItem = (props) => {
-    const { value, data, onClick, ...menuItemProps } = props;
-    const { onItemClick } = React.useContext(AutocompleteContext);
+    const { value, data, onClick, disabled, ...menuItemProps } = props;
+    const { onItemClick, highlightedId } = React.useContext(AutocompleteContext);
+    const id = useElementId();
+    const highlighted = highlightedId === id;
     const handleClick = (e) => {
         onClick?.(e);
         onItemClick({ value, data });
     };
-    return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [menuItemProps.disabled && s["item--disabled"], menuItemProps.className], attributes: {
+    return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [disabled && s["item--disabled"], menuItemProps.className], highlighted: highlighted, disabled: disabled, attributes: {
             ...menuItemProps.attributes,
             role: "option",
+            id,
+            tabIndex: highlighted ? 0 : -1,
         }, onClick: handleClick }));
 };
 Autocomplete.Item = AutocompleteItem;

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

@@ -15,6 +15,8 @@ export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "i
 export type ItemProps = MenuItemProps & SelectArgs;
 export type Context = {
     onItemClick: (args: SelectArgs) => void;
+    highlightedId?: string;
+    setHighlightedId: (value?: string) => void;
 };
 export type Instance = DropdownMenuInstance;
 export {};

package/dist/components/Autocomplete/tests/Autocomplete.stories.js

@@ -33,7 +33,7 @@ export const active = {
             }} onClose={() => {
                 args.handleClose();
                 toggle.deactivate();
-            }}>
+            }} onChange={(args) => console.log(args)}>
 							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
                 return (<Autocomplete.Item key={v} value={v}>
 										{v}
@@ -46,7 +46,7 @@ export const active = {
     },
     play: async ({ canvasElement, args }) => {
         const canvas = within(canvasElement.ownerDocument.body);
-        const input = canvas.getByRole("combobox");
+        // const input = canvas.getByRole("combobox");
         const list = await canvas.findByRole("listbox");
         expect(list).toBeInTheDocument();
         expect(args.handleOpen).not.toHaveBeenCalled();
@@ -101,11 +101,11 @@ export const base = {
         });
         expect(options).toHaveLength(3);
         await waitFor(() => {
-            expect(options[0]).toHaveAttribute("data-rs-focus");
+            expect(options[0]).toHaveAttribute("tabindex", "0");
         });
-        expect(options[1]).not.toHaveAttribute("data-rs-focus");
-        await userEvent.keyboard("{ArrowDown/}");
-        await userEvent.keyboard("{Enter/}");
+        expect(options[1]).toHaveAttribute("tabindex", "-1");
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{Enter}");
         expect(input).toHaveValue("Pie");
         expect(args.handleItemSelect).toHaveBeenCalledTimes(1);
         expect(args.handleItemSelect).toHaveBeenCalledWith({
@@ -115,7 +115,7 @@ export const base = {
         // Give browser time to focus on the input
         await sleep(100);
         // Test click selection after opening with down arrow
-        await userEvent.keyboard("{ArrowDown/}");
+        await userEvent.keyboard("{ArrowDown}");
         await waitFor(() => {
             options = canvas.getAllByRole("option");
         });
@@ -126,7 +126,7 @@ export const base = {
             value: "Pizza",
         });
         input.focus();
-        await userEvent.keyboard("{Backspace/}");
+        await userEvent.keyboard("{Backspace}");
         await waitFor(() => {
             expect(args.handleBackspace).toHaveBeenCalledTimes(1);
             expect(args.handleBackspace).toHaveBeenCalledWith();

package/dist/components/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames, responsivePropDependency } from "../../utilities/props.js";
-import getHeightStyles from "../../styles/height/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";
 import s from "./Avatar.module.css";
@@ -16,8 +16,8 @@ const Avatar = (props) => {
             return "small";
         })
         : "circular";
-    const heightStyles = getHeightStyles(size);
-    const rootClassNames = classNames(s.root, className, heightStyles?.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
+    const mixinStyles = resolveMixin({ height: size });
+    const rootClassNames = classNames(s.root, className, mixinStyles?.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
     const renderContent = () => {
         if (src) {
             /**
@@ -39,7 +39,7 @@ const Avatar = (props) => {
         }
         return initials;
     };
-    return (_jsx(View, { borderRadius: radius, attributes: { ...attributes, style: { ...heightStyles?.variables } }, backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames, children: renderContent() }));
+    return (_jsx(View, { borderRadius: radius, attributes: { ...attributes, style: { ...mixinStyles?.variables } }, backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames, children: renderContent() }));
 };
 Avatar.displayName = "Avatar";
 export default Avatar;

package/dist/components/Badge/Badge.js

@@ -10,15 +10,15 @@ import { forwardRef } from "react";
 const Badge = forwardRef((props, ref) => {
     const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
     const isActionable = !!(onClick || href);
-    const iconSize = size === "large" ? 4 : 3.5;
+    const iconSize = size === "small" ? 3 : 4;
     const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"]);
     const hnadleDismiss = (e) => {
         e.stopPropagation();
         onDismiss?.();
     };
-    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
+    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, touchHitbox: true, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
                     "aria-hidden": hidden ? "true" : undefined,
-                }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
+                }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
 });
 Badge.Container = BadgeContainer;
 Badge.displayName = "Badge";

package/dist/components/Badge/Badge.module.css

@@ -1 +1 @@
-.root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid transparent;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.dismiss,.root{border-radius:var(--rs-radius-small)}.dismiss{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:0px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:999px}.root:empty{height:var(--rs-badge-empty-size);min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid transparent;border-radius:var(--rs-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:1px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

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

@@ -3,21 +3,21 @@ import type { ActionableProps, ActionableRef } from "../Actionable";
 import type { IconProps } from "../Icon";
 import type * as G from "../../types/global";
 type BaseProps = {
+    color?: "neutral" | "critical" | "warning" | "positive" | "primary";
     size?: "small" | "medium" | "large";
-    icon?: IconProps["svg"];
     endIcon?: IconProps["svg"];
     rounded?: boolean;
     hidden?: boolean;
     className?: G.ClassName;
 } & Pick<ActionableProps, "href" | "onClick" | "attributes">;
 type WithChildren = BaseProps & {
-    children: React.ReactNode;
-    color?: "neutral" | "critical" | "warning" | "positive" | "primary";
+    children?: React.ReactNode;
+    icon?: IconProps["svg"];
     variant?: "faded" | "outline";
 };
 type WithEmpty = BaseProps & {
-    color: "critical" | "warning" | "positive" | "primary";
     children?: never;
+    icon?: never;
     variant?: never;
 };
 type WithDismissible = {

package/dist/components/Badge/tests/Badge.stories.js

@@ -119,6 +119,7 @@ export const icon = {
 					<Badge icon={IconCheckmark} endIcon={IconChevronRight} size="small">
 						Badge
 					</Badge>
+					<Badge icon={IconCheckmark} size="small"/>
 				</View>
 			</Example.Item>
 			<Example.Item title="size: medium">
@@ -126,6 +127,7 @@ export const icon = {
 					<Badge icon={IconCheckmark} endIcon={IconChevronRight}>
 						Badge
 					</Badge>
+					<Badge icon={IconCheckmark}/>
 				</View>
 			</Example.Item>
 			<Example.Item title="size: large">
@@ -133,6 +135,8 @@ export const icon = {
 					<Badge size="large" icon={IconCheckmark} endIcon={IconChevronRight}>
 						Badge
 					</Badge>
+
+					<Badge icon={IconCheckmark} size="large"/>
 				</View>
 			</Example.Item>
 		</Example>),
@@ -203,6 +207,13 @@ export const empty = {
 					<Badge rounded size="large" color="critical"/>
 				</View>
 			</Example.Item>
+			<Example.Item title="empty, rounded, all sizes, color: neutral">
+				<View direction="row" gap={3}>
+					<Badge rounded size="small" color="neutral"/>
+					<Badge rounded/>
+					<Badge rounded size="large"/>
+				</View>
+			</Example.Item>
 		</Example>),
 };
 export const container = {

package/dist/components/Button/Button.module.css

@@ -1 +1 @@
-.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);--rs-button-highlight-opacity:0;--rs-button-highlight-opacity-base:0;--rs-button-border-color:transparent;--rs-button-border-width:0px;align-items:center;border:var(--rs-button-border-width) solid var(--rs-button-border-color);border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;background-color:var(--rs-button-background-color);color:var(--rs-button-foreground-color);font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:active{transform:scale(.98)}.root:before{background:var(--rs-button-highlight-color,var(--rs-button-foreground-color));content:"";inset:0;opacity:var(--rs-button-highlight-opacity-base);position:absolute;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading,.--highlighted,.--disabled):before{opacity:var(--rs-button-highlight-opacity)}}.root.--highlighted:before{opacity:calc(var(--rs-button-highlight-opacity) + max(.04, var(--rs-button-highlight-opacity) / 2))}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon{margin-inline-end:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon,.text{position:relative;z-index:5}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded{border-radius:999px}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-solid.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-foreground-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-primary);--rs-button-foreground-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-critical);--rs-button-foreground-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-positive);--rs-button-foreground-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-highlight-opacity:0.06;--rs-button-background-color:var(--rs-color-white);--rs-button-foreground-color:var(--rs-color-black)}.root.--variant-faded.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral-faded);--rs-button-foreground-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-primary{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-primary-faded);--rs-button-foreground-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-critical{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-critical-faded);--rs-button-foreground-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-positive{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-positive-faded);--rs-button-foreground-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-media{--rs-button-highlight-opacity-base:0.24;--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-white);--rs-button-highlight-color:var(--rs-color-black)}.root.--variant-faded.--color-inherit{--rs-button-highlight-opacity-base:0.12;--rs-button-highlight-opacity:0.16;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline{--rs-button-border-width:1px;--rs-button-highlight-opacity:0.06}.root.--variant-outline.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-border-color:var(--rs-color-border-primary-faded);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-outline.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-border-color:var(--rs-color-border-critical-faded);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-outline.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-border-color:var(--rs-color-border-positive-faded);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-outline.--color-neutral{--rs-button-highlight-opacity:0.24;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-border-color:var(--rs-color-border-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-outline.--color-inherit{--rs-button-border-width:0px;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline.--color-inherit:after{border:1px solid;border-radius:var(--rs-button-radius);content:"";inset:0;opacity:.28;pointer-events:none;position:absolute}.root.--variant-ghost{--rs-button-highlight-opacity:0.12}.root.--variant-ghost.--color-neutral{--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-ghost.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-ghost.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-ghost.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-ghost.--color-inherit{--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--elevated:not(:focus),[data-rs-keyboard] .root.--elevated:not(:focus){box-shadow:var(--rs-shadow-raised)}.root.--elevated.--variant-outline.--color-critical,.root.--elevated.--variant-outline.--color-neutral,.root.--elevated.--variant-outline.--color-positive,.root.--elevated.--variant-outline.--color-primary{background:var(--rs-color-background-elevation-raised)}.root.--disabled:active{transform:none!important}.root.--disabled.--color-critical,.root.--disabled.--color-critical.--highlighted,.root.--disabled.--color-critical:hover,.root.--disabled.--color-inherit,.root.--disabled.--color-inherit.--highlighted,.root.--disabled.--color-inherit:hover,.root.--disabled.--color-neutral,.root.--disabled.--color-neutral.--highlighted,.root.--disabled.--color-neutral:hover,.root.--disabled.--color-positive,.root.--disabled.--color-positive.--highlighted,.root.--disabled.--color-positive:hover,.root.--disabled.--color-primary,.root.--disabled.--color-primary.--highlighted,.root.--disabled.--color-primary:hover{background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled.--color-critical.--highlighted:before,.root.--disabled.--color-critical:before,.root.--disabled.--color-critical:hover:before,.root.--disabled.--color-inherit.--highlighted:before,.root.--disabled.--color-inherit:before,.root.--disabled.--color-inherit:hover:before,.root.--disabled.--color-neutral.--highlighted:before,.root.--disabled.--color-neutral:before,.root.--disabled.--color-neutral:hover:before,.root.--disabled.--color-positive.--highlighted:before,.root.--disabled.--color-positive:before,.root.--disabled.--color-positive:hover:before,.root.--disabled.--color-primary.--highlighted:before,.root.--disabled.--color-primary:before,.root.--disabled.--color-primary:hover:before{opacity:0!important}.root.--disabled.--color-critical.--highlighted.--variant-faded,.root.--disabled.--color-critical.--variant-faded,.root.--disabled.--color-critical:hover.--variant-faded,.root.--disabled.--color-inherit.--highlighted.--variant-faded,.root.--disabled.--color-inherit.--variant-faded,.root.--disabled.--color-inherit:hover.--variant-faded,.root.--disabled.--color-neutral.--highlighted.--variant-faded,.root.--disabled.--color-neutral.--variant-faded,.root.--disabled.--color-neutral:hover.--variant-faded,.root.--disabled.--color-positive.--highlighted.--variant-faded,.root.--disabled.--color-positive.--variant-faded,.root.--disabled.--color-positive:hover.--variant-faded,.root.--disabled.--color-primary.--highlighted.--variant-faded,.root.--disabled.--color-primary.--variant-faded,.root.--disabled.--color-primary:hover.--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--color-critical.--highlighted.--variant-outline,.root.--disabled.--color-critical.--variant-outline,.root.--disabled.--color-critical:hover.--variant-outline,.root.--disabled.--color-inherit.--highlighted.--variant-outline,.root.--disabled.--color-inherit.--variant-outline,.root.--disabled.--color-inherit:hover.--variant-outline,.root.--disabled.--color-neutral.--highlighted.--variant-outline,.root.--disabled.--color-neutral.--variant-outline,.root.--disabled.--color-neutral:hover.--variant-outline,.root.--disabled.--color-positive.--highlighted.--variant-outline,.root.--disabled.--color-positive.--variant-outline,.root.--disabled.--color-positive:hover.--variant-outline,.root.--disabled.--color-primary.--highlighted.--variant-outline,.root.--disabled.--color-primary.--variant-outline,.root.--disabled.--color-primary:hover.--variant-outline{background-color:transparent!important}.root.--disabled.--color-critical.--highlighted.--variant-ghost,.root.--disabled.--color-critical.--variant-ghost,.root.--disabled.--color-critical:hover.--variant-ghost,.root.--disabled.--color-inherit.--highlighted.--variant-ghost,.root.--disabled.--color-inherit.--variant-ghost,.root.--disabled.--color-inherit:hover.--variant-ghost,.root.--disabled.--color-neutral.--highlighted.--variant-ghost,.root.--disabled.--color-neutral.--variant-ghost,.root.--disabled.--color-neutral:hover.--variant-ghost,.root.--disabled.--color-positive.--highlighted.--variant-ghost,.root.--disabled.--color-positive.--variant-ghost,.root.--disabled.--color-positive:hover.--variant-ghost,.root.--disabled.--color-primary.--highlighted.--variant-ghost,.root.--disabled.--color-primary.--variant-ghost,.root.--disabled.--color-primary:hover.--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled.--color-media,.root.--disabled.--color-media.--highlighted,.root.--disabled.--color-media:hover{opacity:.4!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
+.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);--rs-button-highlight-opacity:0;--rs-button-highlight-opacity-base:0;--rs-button-border-color:transparent;--rs-button-border-width:0px;align-items:center;border:var(--rs-button-border-width) solid var(--rs-button-border-color);border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;background-color:var(--rs-button-background-color);color:var(--rs-button-foreground-color);font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:before{background:var(--rs-button-highlight-color,var(--rs-button-foreground-color));content:"";inset:0;opacity:var(--rs-button-highlight-opacity-base);position:absolute;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading,.--highlighted,.--disabled,:active):before{opacity:var(--rs-button-highlight-opacity)}}.root.--highlighted:before,.root:active:not(.--loading,.--disabled):before{opacity:calc(var(--rs-button-highlight-opacity) + max(.04, var(--rs-button-highlight-opacity) / 2))}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon{margin-inline-end:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon,.text{position:relative;z-index:5}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded{border-radius:var(--rs-radius-circular)}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-solid.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-foreground-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-primary);--rs-button-foreground-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-critical);--rs-button-foreground-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-positive);--rs-button-foreground-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-highlight-opacity:0.06;--rs-button-background-color:var(--rs-color-white);--rs-button-foreground-color:var(--rs-color-black)}.root.--variant-faded.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral-faded);--rs-button-foreground-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-primary{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-primary-faded);--rs-button-foreground-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-critical{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-critical-faded);--rs-button-foreground-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-positive{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-positive-faded);--rs-button-foreground-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-media{--rs-button-highlight-opacity-base:0.24;--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-white);--rs-button-highlight-color:var(--rs-color-black)}.root.--variant-faded.--color-inherit{--rs-button-highlight-opacity-base:0.12;--rs-button-highlight-opacity:0.16;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline{--rs-button-border-width:1px;--rs-button-highlight-opacity:0.06}.root.--variant-outline.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-border-color:var(--rs-color-border-primary-faded);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-outline.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-border-color:var(--rs-color-border-critical-faded);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-outline.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-border-color:var(--rs-color-border-positive-faded);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-outline.--color-neutral{--rs-button-highlight-opacity:0.24;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-border-color:var(--rs-color-border-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-outline.--color-inherit{--rs-button-border-width:0px;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline.--color-inherit:after{border:1px solid;border-radius:var(--rs-button-radius);content:"";inset:0;opacity:.28;pointer-events:none;position:absolute}.root.--variant-ghost{--rs-button-highlight-opacity:0.12}.root.--variant-ghost.--color-neutral{--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-ghost.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-ghost.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-ghost.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-ghost.--color-inherit{--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--elevated:not(:focus),[data-rs-keyboard] .root.--elevated:not(:focus){box-shadow:var(--rs-shadow-raised)}.root.--elevated.--variant-outline.--color-critical,.root.--elevated.--variant-outline.--color-neutral,.root.--elevated.--variant-outline.--color-positive,.root.--elevated.--variant-outline.--color-primary{background:var(--rs-color-background-elevation-raised)}.root.--disabled.--color-critical,.root.--disabled.--color-critical.--highlighted,.root.--disabled.--color-critical:active,.root.--disabled.--color-critical:hover,.root.--disabled.--color-inherit,.root.--disabled.--color-inherit.--highlighted,.root.--disabled.--color-inherit:active,.root.--disabled.--color-inherit:hover,.root.--disabled.--color-neutral,.root.--disabled.--color-neutral.--highlighted,.root.--disabled.--color-neutral:active,.root.--disabled.--color-neutral:hover,.root.--disabled.--color-positive,.root.--disabled.--color-positive.--highlighted,.root.--disabled.--color-positive:active,.root.--disabled.--color-positive:hover,.root.--disabled.--color-primary,.root.--disabled.--color-primary.--highlighted,.root.--disabled.--color-primary:active,.root.--disabled.--color-primary:hover{background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled.--color-critical.--highlighted:before,.root.--disabled.--color-critical:active:before,.root.--disabled.--color-critical:before,.root.--disabled.--color-critical:hover:before,.root.--disabled.--color-inherit.--highlighted:before,.root.--disabled.--color-inherit:active:before,.root.--disabled.--color-inherit:before,.root.--disabled.--color-inherit:hover:before,.root.--disabled.--color-neutral.--highlighted:before,.root.--disabled.--color-neutral:active:before,.root.--disabled.--color-neutral:before,.root.--disabled.--color-neutral:hover:before,.root.--disabled.--color-positive.--highlighted:before,.root.--disabled.--color-positive:active:before,.root.--disabled.--color-positive:before,.root.--disabled.--color-positive:hover:before,.root.--disabled.--color-primary.--highlighted:before,.root.--disabled.--color-primary:active:before,.root.--disabled.--color-primary:before,.root.--disabled.--color-primary:hover:before{opacity:0!important}.root.--disabled.--color-critical.--highlighted.--variant-faded,.root.--disabled.--color-critical.--variant-faded,.root.--disabled.--color-critical:active.--variant-faded,.root.--disabled.--color-critical:hover.--variant-faded,.root.--disabled.--color-inherit.--highlighted.--variant-faded,.root.--disabled.--color-inherit.--variant-faded,.root.--disabled.--color-inherit:active.--variant-faded,.root.--disabled.--color-inherit:hover.--variant-faded,.root.--disabled.--color-neutral.--highlighted.--variant-faded,.root.--disabled.--color-neutral.--variant-faded,.root.--disabled.--color-neutral:active.--variant-faded,.root.--disabled.--color-neutral:hover.--variant-faded,.root.--disabled.--color-positive.--highlighted.--variant-faded,.root.--disabled.--color-positive.--variant-faded,.root.--disabled.--color-positive:active.--variant-faded,.root.--disabled.--color-positive:hover.--variant-faded,.root.--disabled.--color-primary.--highlighted.--variant-faded,.root.--disabled.--color-primary.--variant-faded,.root.--disabled.--color-primary:active.--variant-faded,.root.--disabled.--color-primary:hover.--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--color-critical.--highlighted.--variant-outline,.root.--disabled.--color-critical.--variant-outline,.root.--disabled.--color-critical:active.--variant-outline,.root.--disabled.--color-critical:hover.--variant-outline,.root.--disabled.--color-inherit.--highlighted.--variant-outline,.root.--disabled.--color-inherit.--variant-outline,.root.--disabled.--color-inherit:active.--variant-outline,.root.--disabled.--color-inherit:hover.--variant-outline,.root.--disabled.--color-neutral.--highlighted.--variant-outline,.root.--disabled.--color-neutral.--variant-outline,.root.--disabled.--color-neutral:active.--variant-outline,.root.--disabled.--color-neutral:hover.--variant-outline,.root.--disabled.--color-positive.--highlighted.--variant-outline,.root.--disabled.--color-positive.--variant-outline,.root.--disabled.--color-positive:active.--variant-outline,.root.--disabled.--color-positive:hover.--variant-outline,.root.--disabled.--color-primary.--highlighted.--variant-outline,.root.--disabled.--color-primary.--variant-outline,.root.--disabled.--color-primary:active.--variant-outline,.root.--disabled.--color-primary:hover.--variant-outline{background-color:transparent!important}.root.--disabled.--color-critical.--highlighted.--variant-ghost,.root.--disabled.--color-critical.--variant-ghost,.root.--disabled.--color-critical:active.--variant-ghost,.root.--disabled.--color-critical:hover.--variant-ghost,.root.--disabled.--color-inherit.--highlighted.--variant-ghost,.root.--disabled.--color-inherit.--variant-ghost,.root.--disabled.--color-inherit:active.--variant-ghost,.root.--disabled.--color-inherit:hover.--variant-ghost,.root.--disabled.--color-neutral.--highlighted.--variant-ghost,.root.--disabled.--color-neutral.--variant-ghost,.root.--disabled.--color-neutral:active.--variant-ghost,.root.--disabled.--color-neutral:hover.--variant-ghost,.root.--disabled.--color-positive.--highlighted.--variant-ghost,.root.--disabled.--color-positive.--variant-ghost,.root.--disabled.--color-positive:active.--variant-ghost,.root.--disabled.--color-positive:hover.--variant-ghost,.root.--disabled.--color-primary.--highlighted.--variant-ghost,.root.--disabled.--color-primary.--variant-ghost,.root.--disabled.--color-primary:active.--variant-ghost,.root.--disabled.--color-primary:hover.--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled.--color-media,.root.--disabled.--color-media.--highlighted,.root.--disabled.--color-media:active,.root.--disabled.--color-media:hover{opacity:.4!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}

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

@@ -88,6 +88,7 @@ export type DateProps = {
     startValue: Date | null;
     endValue: Date | null;
     renderAriaLabel?: MonthProps["renderDateAriaLabel"];
+    onDateFocus: (date: Date) => void;
 } & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max" | "selectedDates">;
 export type ControlsProps = {
     selectionMode: SelectionMode;

package/dist/components/Calendar/Calendar.utils.d.ts

@@ -41,3 +41,14 @@ export declare const applyNavigationBounds: (args: {
     isFirstMonth: boolean | undefined;
     isLastMonth: boolean | undefined;
 };
+/**
+ * Decide if date has to be focusable with Tab (only one date should be)
+ * 1. If there is a selected value - it's focusable
+ * 2. Otherwise, today's date is focusable
+ * 3. Otherwise, first non-disabled date is focusable
+ */
+export declare const isDateFocusable: (args: {
+    date: Date;
+    lastFocusedDate?: Date;
+    startValue: Date | null;
+}) => boolean;

package/dist/components/Calendar/Calendar.utils.js

@@ -108,3 +108,28 @@ export const applyNavigationBounds = (args) => {
         isLastMonth: max && max < nextMonthFirstDate,
     };
 };
+/**
+ * Decide if date has to be focusable with Tab (only one date should be)
+ * 1. If there is a selected value - it's focusable
+ * 2. Otherwise, today's date is focusable
+ * 3. Otherwise, first non-disabled date is focusable
+ */
+export const isDateFocusable = (args) => {
+    const { date, startValue, lastFocusedDate } = args;
+    const today = new Date();
+    const renderedMonth = date.getMonth();
+    const valueMonth = startValue?.getMonth();
+    const todayMonth = today.getMonth();
+    const lastFocusedMonth = lastFocusedDate?.getMonth();
+    const isoDate = getLocalISODate({ date });
+    const isoToday = getLocalISODate({ date: today });
+    const isoValueDate = startValue && getLocalISODate({ date: startValue });
+    const isoLastFocusedDate = lastFocusedDate && getLocalISODate({ date: lastFocusedDate });
+    if (lastFocusedDate && renderedMonth === lastFocusedMonth)
+        return isoDate === isoLastFocusedDate;
+    if (startValue && renderedMonth === valueMonth)
+        return isoDate === isoValueDate;
+    if (renderedMonth === todayMonth)
+        return isoDate === isoToday;
+    return true;
+};

package/dist/components/Calendar/CalendarDate.js

@@ -5,7 +5,7 @@ import { classNames } from "../../utilities/props.js";
 import { getLocalISODate } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
 const CalendarDate = (props) => {
-    const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, renderAriaLabel, selectedDates, } = props;
+    const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, renderAriaLabel, selectedDates, } = props;
     if (!date)
         return _jsx("td", { className: s.cell, "aria-hidden": "true" });
     const isoStartValue = startValue && getLocalISODate({ date: startValue });
@@ -57,6 +57,10 @@ const CalendarDate = (props) => {
     const handleMouseLeave = () => {
         onDateHoverEnd(date);
     };
+    const handleFocus = () => {
+        handleMouseEnter();
+        onDateFocus(date);
+    };
     return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsx(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
                 role: "checkbox",
                 tabIndex: focusable ? 0 : -1,
@@ -68,7 +72,7 @@ const CalendarDate = (props) => {
                 "data-rs-date": getLocalISODate({ date }),
                 onMouseEnter: handleMouseEnter,
                 onMouseLeave: handleMouseLeave,
-                onFocus: handleMouseEnter,
+                onFocus: handleFocus,
                 onBlur: handleMouseLeave,
             }, children: date.getDate() }) }));
 };

package/dist/components/Calendar/CalendarMonth.js

@@ -1,11 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getMonthWeeks, getWeekdayNames, getLocalISODate } from "./Calendar.utils.js";
+import { useState } from "react";
+import { getMonthWeeks, getWeekdayNames, getLocalISODate, isDateFocusable } from "./Calendar.utils.js";
 import CalendarDate from "./CalendarDate.js";
 import s from "./Calendar.module.css";
 const CalendarMonth = (props) => {
     const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
     let foundFocusableDate = false;
+    const [lastFocusedDate, setLastFocusedDate] = useState();
     const month = date.getMonth();
     const weeks = getMonthWeeks({ date, firstWeekDay });
     const weekdayNames = getWeekdayNames({ firstWeekDay, renderWeekDay });
@@ -13,33 +15,17 @@ const CalendarMonth = (props) => {
                     const key = [month, week[0]?.getDate()].filter(Boolean).join("-");
                     return (_jsx("tr", { className: s.row, children: week.map((date, index) => {
                             const disabled = !!date && ((min && date < min) || (max && date > max));
-                            const month = date?.getMonth();
-                            const today = new Date();
-                            const isoToday = getLocalISODate({ date: today });
                             const startValue = value && "start" in value ? value.start : value;
                             const endValue = value && "end" in value ? value.end : value;
                             const isoDate = date && getLocalISODate({ date });
-                            /**
-                             * Decide if date has to be focusable with Tab (only one date should be)
-                             * 1. If there is a selected value - it's focusable
-                             * 2. Otherwise, today's date is focusable
-                             * 3. Otherwise, first non-disabled date is focusable
-                             */
-                            let focusable = false;
-                            if (!foundFocusableDate && date) {
-                                if (!!startValue && startValue.getMonth() === date?.getMonth()) {
-                                    focusable = getLocalISODate({ date: startValue }) === getLocalISODate({ date });
-                                }
-                                else if (isoDate && month === today.getMonth()) {
-                                    focusable = isoDate >= isoToday && !disabled;
-                                }
-                                else {
-                                    focusable = !disabled;
-                                }
-                            }
+                            const focusable = disabled
+                                ? false
+                                : !foundFocusableDate &&
+                                    !!date &&
+                                    isDateFocusable({ date, lastFocusedDate, startValue });
                             if (focusable)
                                 foundFocusableDate = true;
-                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates }, index));
+                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, onDateFocus: setLastFocusedDate, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates }, index));
                         }) }, key));
                 }) })] }));
 };

package/dist/components/Calendar/tests/Calendar.stories.js

@@ -222,12 +222,19 @@ export const keyboardNavigation = {
 			</Example.Item>
 		</Example>),
     play: async ({ canvas }) => {
-        const dateEls = canvas.getAllByRole("checkbox");
-        dateEls[0].focus();
+        const buttons = canvas.getAllByRole("button");
+        buttons[2].focus();
+        await userEvent.keyboard("{Tab/}");
+        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
         await userEvent.keyboard("{ArrowRight/}");
         waitFor(() => {
             expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
         });
+        await userEvent.keyboard("{Shift>}{Tab/}{/Shift}");
+        await userEvent.keyboard("{Tab/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
+        });
         await userEvent.keyboard("{ArrowLeft/}");
         waitFor(() => {
             expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");