reshaped 3.7.0-canary.8 → 3.7.0

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -72,7 +72,6 @@ const FlyoutControlled = (props) => {
         active: isRendered && triggerType !== "hover",
         contentRef: flyoutElRef,
         triggerRef: triggerElRef,
-        blocking: false,
     });
     const clearTimer = React.useCallback(() => {
         if (timerRef.current)
@@ -234,16 +233,19 @@ const FlyoutControlled = (props) => {
             return;
         if (trapFocusMode === false)
             return;
+        const initialFocusEl = (!autoFocus
+            ? flyoutElRef.current.querySelector("[role][tabindex='-1']")
+            : initialFocusRef?.current);
         trapFocusRef.current = new TrapFocus();
         trapFocusRef.current.trap(flyoutElRef.current, {
             mode: trapFocusMode,
-            initialFocusEl: initialFocusRef?.current,
+            initialFocusEl,
             includeTrigger: triggerType === "hover" && trapFocusMode !== "dialog" && !isSubmenu,
             onRelease: () => {
                 handleClose({});
             },
         });
-    }, [status, triggerType, trapFocusMode]);
+    }, [status, triggerType, trapFocusMode, autoFocus]);
     React.useEffect(() => {
         if (!disableHideAnimation && status !== "hidden")
             return;
@@ -324,6 +326,7 @@ const FlyoutControlled = (props) => {
             contentAttributes,
             containerRef,
             disableContentHover,
+            autoFocus,
             isSubmenu,
         }, children: children }));
 };

package/dist/components/Flyout/FlyoutTrigger.js

@@ -4,6 +4,7 @@ import { useFlyoutContext, TriggerProvider } from "./Flyout.context.js";
 const FlyoutTrigger = (props) => {
     const { children } = props;
     const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleMouseDown, handleTouchStart, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
+    const active = flyout.status !== "idle";
     const childrenAttributes = {
         ref: triggerElRef,
     };
@@ -20,7 +21,7 @@ const FlyoutTrigger = (props) => {
     if ((triggerType === "hover" && !isSubmenu) || triggerType === "focus") {
         childrenAttributes.onFocus = handleFocus;
         childrenAttributes.onBlur = handleBlur;
-        childrenAttributes["aria-describedby"] = id;
+        childrenAttributes["aria-describedby"] = active ? id : undefined;
     }
     if (triggerType === "click" || triggerType === "focus" || trapFocusMode === "action-menu") {
         if (trapFocusMode === "dialog") {
@@ -33,8 +34,8 @@ const FlyoutTrigger = (props) => {
         else {
             childrenAttributes["aria-haspopup"] = "menu";
         }
-        childrenAttributes["aria-expanded"] = flyout.status !== "idle";
-        childrenAttributes["aria-controls"] = flyout.status !== "idle" ? id : undefined;
+        childrenAttributes["aria-expanded"] = active;
+        childrenAttributes["aria-controls"] = active ? id : undefined;
     }
     return (_jsx(TriggerProvider, { value: { elRef: triggerElRef }, children: children(childrenAttributes) }));
 };

package/dist/components/FormControl/FormControl.module.css

@@ -1 +1 @@
-.root{border:none}.label{display:block;margin-bottom:var(--rs-unit-x1)}.caption{display:block;margin-top:var(--rs-unit-x1)}.caption+.caption{margin-top:0}
+.root{border:none}.label{display:block;margin-bottom:var(--rs-unit-x1)}.label:last-child{margin-bottom:0}.caption{display:block;margin-top:var(--rs-unit-x1)}.caption+.caption{margin-top:0}

package/dist/components/FormControl/tests/FormControl.stories.d.ts

@@ -23,3 +23,7 @@ export declare const required: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const composition: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -2,6 +2,7 @@ import { expect } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import FormControl from "../index.js";
 import TextField from "../../TextField/index.js";
+import View from "../../View/index.js";
 export default {
     title: "Utility components/FormControl",
     component: FormControl,
@@ -88,3 +89,20 @@ export const required = {
 			</Example.Item>
 		</Example>),
 };
+export const composition = {
+    name: "test: composition",
+    render: () => (<Example>
+			<Example.Item title="horizontal">
+				<FormControl>
+					<View direction="row" gap={10} align="center">
+						<View width="100px">
+							<FormControl.Label>Label</FormControl.Label>
+						</View>
+						<View.Item grow>
+							<TextField name="name" placeholder="Enter value"/>
+						</View.Item>
+					</View>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/Grid/Grid.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
-import getAlignStyles from "../../styles/align/index.js";
-import getJustifyStyles from "../../styles/justify/index.js";
-import getMaxWidthStyles from "../../styles/maxWidth/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Grid.module.css";
 const GridItem = (props) => {
     const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, 
@@ -26,20 +24,18 @@ const GridItem = (props) => {
     return (_jsx(TagName, { ...attributes, className: itemClassNames, style: rootVariables, children: children }));
 };
 const Grid = (props) => {
-    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, maxWidth, 
+    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, width, height, maxWidth, 
     // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     as: TagName = "div", attributes, } = props;
-    const alignStyles = getAlignStyles(align);
-    const justifyStyles = getJustifyStyles(justify);
-    const maxWidthStyles = getMaxWidthStyles(maxWidth);
+    const mixinStyles = resolveMixin({ align, justify, width, height, maxWidth });
     const resolvedRows = responsivePropDependency(rows, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
     const resolvedColumns = responsivePropDependency(columns, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
     const resolvedAreas = responsivePropDependency(areas, (value) => value
         ? `"${value?.join('" "')}"
 	`
         : undefined);
-    const rootClassNames = classNames(s.root, maxWidthStyles?.classNames, className);
+    const rootClassNames = classNames(s.root, mixinStyles.classNames, className);
     const rootVariables = {
         ...attributes?.style,
         ...responsiveVariables("--rs-grid-gap", gap),
@@ -49,9 +45,7 @@ const Grid = (props) => {
         ...responsiveVariables("--rs-grid-auto-flow", autoFlow),
         ...responsiveVariables("--rs-grid-auto-columns", autoColumns),
         ...responsiveVariables("--rs-grid-auto-rows", autoRows),
-        ...alignStyles?.variables,
-        ...justifyStyles?.variables,
-        ...maxWidthStyles?.variables,
+        ...mixinStyles.variables,
     };
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: children }));
 };

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

@@ -13,6 +13,8 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     autoColumns?: G.Responsive<Property.GridAutoColumns>;
     autoRows?: G.Responsive<Property.GridAutoRows>;
     maxWidth?: G.Responsive<string | number>;
+    width?: G.Responsive<string | number>;
+    height?: G.Responsive<string | number>;
     children?: React.ReactNode;
     as?: TagName;
     className?: G.ClassName;

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

@@ -11,7 +11,7 @@ export default {
     },
 };
 export const base = {
-    name: "gap, align, justify, maxWidth",
+    name: "gap, align, justify, maxWidth, width, height",
     render: () => (<Example>
 			<Example.Item title="gap: 2">
 				<Grid gap={2} columns={2}>
@@ -51,6 +51,17 @@ export const base = {
 					</View>
 				</Grid>
 			</Example.Item>
+
+			<Example.Item title="width: 400px, height: 200px">
+				<Grid gap={2} columns={2} width="400px" height="200px">
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+						1
+					</View>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+						2
+					</View>
+				</Grid>
+			</Example.Item>
 		</Example>),
 };
 export const layout = {

package/dist/components/HiddenVisually/HiddenVisually.module.css

@@ -1 +1 @@
-.root{height:1px;width:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute;white-space:nowrap}
+.root{clip-path:inset(1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}

package/dist/components/Icon/Icon.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/props.js";
-import getHeightStyles from "../../styles/height/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Icon.module.css";
 const Icon = (props) => {
     const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;
-    const heightStyles = getHeightStyles(size);
-    const rootClassName = classNames(s.root, className, heightStyles?.classNames, color && s[`--color-${color}`], autoWidth && s["--auto"]);
+    const mixinStyles = resolveMixin({ height: size });
+    const rootClassName = classNames(s.root, className, mixinStyles.classNames, color && s[`--color-${color}`], autoWidth && s["--auto"]);
     const icon = React.isValidElement(Component) ? Component : _jsx(Component, {});
-    const style = { ...attributes?.style, ...heightStyles?.variables };
+    const style = { ...attributes?.style, ...mixinStyles.variables };
     return (
     // All icons are decorative, a11y attributes should be set for buttons wrapping them
     _jsx("span", { ...attributes, "aria-hidden": "true", className: rootClassName, style: style, children: React.cloneElement(icon, { focusable: false }) }));

package/dist/components/Image/Image.js

@@ -2,30 +2,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Image.module.css";
-import getRadiusStyles from "../../styles/radius/index.js";
-import getWidthStyles from "../../styles/width/index.js";
-import getHeightStyles from "../../styles/height/index.js";
-import getAspectRatioStyles from "../../styles/aspectRatio/index.js";
-import getMaxWidthStyles from "../../styles/maxWidth/index.js";
 const Image = (props) => {
     const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
     const [status, setStatus] = React.useState("loading");
-    const radiusStyles = getRadiusStyles(borderRadius);
-    const widthStyles = getWidthStyles(width);
-    const heightStyles = getHeightStyles(height);
-    const maxWidthStyles = getMaxWidthStyles(maxWidth);
-    const aspectRatioStyles = getAspectRatioStyles(aspectRatio);
-    const baseClassNames = classNames(s.root, radiusStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, maxWidthStyles?.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
+    const mixinStyles = resolveMixin({ radius: borderRadius, width, height, maxWidth, aspectRatio });
+    const baseClassNames = classNames(s.root, mixinStyles.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
     const imgClassNames = classNames(s.image, baseClassNames);
     const fallbackClassNames = classNames(s.fallback, baseClassNames);
     const isFallback = (status === "error" || !src) && !!fallback;
     const style = {
         ...attributes?.style,
-        ...widthStyles?.variables,
-        ...heightStyles?.variables,
-        ...maxWidthStyles?.variables,
-        ...aspectRatioStyles?.variables,
+        ...mixinStyles.variables,
     };
     const handleLoad = (e) => {
         setStatus("success");

package/dist/components/MenuItem/MenuItem.js

@@ -7,8 +7,8 @@ import View from "../View/index.js";
 import MenuItemAligner from "./MenuItemAligner.js";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
-    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
+    const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"], highlighted && s["--highlighted"]);
     const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
     const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
     return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));

package/dist/components/MenuItem/MenuItem.module.css

@@ -1 +1 @@
-.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
+.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -9,6 +9,7 @@ export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled
     startSlot?: React.ReactNode;
     children: React.ReactNode;
     endSlot?: React.ReactNode;
+    highlighted?: boolean;
     selected?: boolean;
     size?: G.Responsive<Size>;
     roundedCorners?: G.Responsive<boolean>;

package/dist/components/Modal/Modal.js

@@ -9,7 +9,7 @@ import Text from "../Text/index.js";
 import Overlay from "../Overlay/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import s from "./Modal.module.css";
-import getPaddingStyles from "../../styles/padding/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const DRAG_THRESHOLD = 32;
 const DRAG_OPPOSITE_THRESHOLD = 100;
@@ -56,7 +56,7 @@ const Modal = (props) => {
     const dragDirectionRef = React.useRef(0);
     const [dragDistance, setDragDistance] = React.useState(0);
     const [hideProgress, setHideProgress] = React.useState(0);
-    const paddingStyles = getPaddingStyles(padding);
+    const mixinStyles = resolveMixin({ padding });
     const value = React.useMemo(() => ({
         titleMounted,
         setTitleMounted,
@@ -171,9 +171,9 @@ const Modal = (props) => {
     return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: responsivePropDependency(position, (p) => (p === "center" ? "auto" : "hidden")), className: overlayClassName, containerRef: containerRef, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
-            const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position));
+            const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position), mixinStyles.classNames);
             return (_jsx(Context.Provider, { value: value, children: _jsx("div", { ...attributes, style: {
-                        ...paddingStyles?.variables,
+                        ...mixinStyles.variables,
                         ...responsiveVariables("--rs-modal-size", size),
                         "--rs-modal-drag": Math.abs(dragDistance) < DRAG_THRESHOLD
                             ? "0px"

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root.--contained{--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
+.root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);outline:none;transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}.root.--contained{--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}

package/dist/components/Modal/tests/Modal.test.stories.js

@@ -87,7 +87,7 @@ export const handlers = {
         await userEvent.click(trigger);
         await sleep(100);
         // Close by pressing Escape
-        await userEvent.keyboard("{Escape/}");
+        await userEvent.keyboard("{Escape}");
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(2);
             expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
@@ -112,7 +112,7 @@ export const disableCloseOnClick = {
         const overlay = canvas.getByText("Content");
         await userEvent.click(overlay);
         expect(args.handleClose).toHaveBeenCalledTimes(0);
-        await userEvent.keyboard("{Escape/}");
+        await userEvent.keyboard("{Escape}");
         expect(args.handleClose).toHaveBeenCalledTimes(1);
     },
 };

package/dist/components/Overlay/Overlay.js

@@ -31,8 +31,7 @@ const Overlay = (props) => {
     // Separating rendered and visible states to make sure animation is triggered only once overlay was added to the dom
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
-    // Check that when close was triggered there were no other overlays / flyouts rendered above it
-    const isDismissible = useIsDismissible({ active, contentRef, blocking: true });
+    const isDismissible = useIsDismissible({ active, contentRef });
     const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
     const isInsideContent = (el) => {
         if (!contentRef.current)

package/dist/components/Overlay/tests/Overlay.test.stories.js

@@ -87,7 +87,7 @@ export const handlers = {
         // TODO: Fails CLI tests in Storybook without a timeout
         await sleep(100);
         // Close by pressing Escape
-        await userEvent.keyboard("{Escape/}");
+        await userEvent.keyboard("{Escape}");
         expect(args.handleClose).toHaveBeenCalledTimes(2);
         expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
         await waitFor(() => {
@@ -110,8 +110,10 @@ export const disableCloseOnClick = {
         const canvas = within(canvasElement.ownerDocument.body);
         const overlay = canvas.getByText("Content");
         await userEvent.click(overlay);
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
         expect(args.handleClose).toHaveBeenCalledTimes(0);
-        await userEvent.keyboard("{Escape/}");
+        await userEvent.keyboard("{Escape}");
         expect(args.handleClose).toHaveBeenCalledTimes(1);
     },
 };

package/dist/components/PinField/PinField.module.css

@@ -1 +1 @@
-.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}
+.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}

package/dist/components/Popover/Popover.js

@@ -3,14 +3,14 @@ import { classNames } from "../../utilities/props.js";
 import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import Dismissible from "../Dismissible/index.js";
 import s from "./Popover.module.css";
-import getPaddingStyles from "../../styles/padding/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
 const Popover = (props) => {
     const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, ...flyoutProps } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);
-    const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
-    const paddingStyles = getPaddingStyles(padding);
-    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`]);
-    return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } } }));
+    const trapFocusMode = props.trapFocusMode ?? (triggerType === "hover" ? "content-menu" : undefined);
+    const mixinStyles = resolveMixin({ padding });
+    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`], mixinStyles.classNames);
+    return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...mixinStyles.variables } } }));
 };
 const PopoverDismissible = (props) => {
     const { handleClose } = useFlyoutContext();

package/dist/components/Popover/Popover.module.css

@@ -1 +1 @@
-.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
+.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-border-faded),var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-border-faded),var(--rs-shadow-raised)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}

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

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
     children?: React.ReactNode;
     padding?: number;
     elevation?: "raised" | "overlay";

package/dist/components/Popover/tests/Popover.stories.d.ts

@@ -49,16 +49,21 @@ export declare const activeFalse: StoryObj<{
 export declare const dismissible: StoryObj<{
     handleClose: ReturnType<typeof fn>;
 }>;
+export declare const autoFocus: StoryObj;
 export declare const className: StoryObj;
+export declare const testNested: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
 export declare const testWithTooltip: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const variant: {
+export declare const testContentEditable: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const teslContentEditable: {
+export declare const variant: {
     name: string;
     render: () => import("react").JSX.Element;
 };