reshaped 3.8.0-canary.0 → 3.8.0-canary.10

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

@@ -1,8 +1,10 @@
-import { userEvent } from "storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Overlay from "../index.js";
 import Button from "../../Button/index.js";
 import useToggle from "../../../hooks/useToggle.js";
+import React from "react";
+import { sleep } from "../../../utilities/helpers.js";
 export default {
     title: "Utility components/Overlay",
     component: Overlay,
@@ -66,3 +68,135 @@ export const blurred = {
         await userEvent.click(trigger);
     },
 };
+export const renderProps = {
+    name: "children, render props",
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			{(args) => (args.active ? "Opened" : "Closed")}
+		</Overlay>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByText("Opened");
+        expect(root).toBeInTheDocument();
+    },
+};
+export const handlers = {
+    name: "onOpen, onClose, onAfterOpen, onAfterClose",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+        handleAfterClose: fn(),
+        handleAfterOpen: fn(),
+    },
+    render: (args) => {
+        const overlayToggle = useToggle();
+        return (<>
+				<Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>
+				<Overlay active={overlayToggle.active} onClose={(closeArgs) => {
+                overlayToggle.deactivate();
+                args.handleClose(closeArgs);
+            }} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
+					Content
+				</Overlay>
+			</>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let overlay;
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterOpen).toHaveBeenCalledWith();
+        });
+        // Close by changing the state after the trigger click
+        await userEvent.click(trigger);
+        // Changing state doesn't trigger onClose
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        // Close by clicking on the overlay
+        await userEvent.click(overlay);
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        // Close by pressing Escape
+        await userEvent.keyboard("{Escape}");
+        expect(args.handleClose).toHaveBeenCalledTimes(2);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const disableCloseOnClick = {
+    name: "disableCloseOnClick",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Overlay active disableCloseOnClick onClose={(closeArgs) => {
+            args.handleClose(closeArgs);
+        }}>
+			Content
+		</Overlay>),
+    play: async ({ canvasElement, args }) => {
+        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}");
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+    },
+};
+export const containerRef = {
+    name: "containerRef",
+    render: () => {
+        const containerRef = React.useRef(null);
+        return (<>
+				<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
+				<Overlay active containerRef={containerRef}>
+					Content
+				</Overlay>
+			</>);
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const container = canvas.getByTestId("test-id");
+        const overlay = canvas.getByText("Content");
+        expect(container).toContainElement(overlay);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			Content
+		</Overlay>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("test-id");
+        expect(root).toHaveClass("test-classname");
+    },
+};

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

@@ -1,3 +1,5 @@
+import { fn } from "storybook/test";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PaginationProps>;
@@ -8,4 +10,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const truncate: () => import("react").JSX.Element;
+export declare const truncate: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const render: StoryObj;
+export declare const defaultPage: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const page: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Pagination from "../index.js";
+import { expect, fn, userEvent, within } from "storybook/test";
 export default {
     title: "Components/Pagination",
     component: Pagination,
@@ -9,19 +10,96 @@ export default {
         },
     },
 };
-export const truncate = () => {
-    return (<Example>
-			<Example.Item title="start">
-				<Pagination total={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
-			</Example.Item>
-			<Example.Item title="middle">
-				<Pagination total={10} defaultPage={5} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
-			</Example.Item>
-			<Example.Item title="end">
-				<Pagination total={10} defaultPage={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
-			</Example.Item>
-			<Example.Item title="no truncation">
-				<Pagination total={4} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
-			</Example.Item>
-		</Example>);
+export const truncate = {
+    name: "truncate",
+    render: () => {
+        return (<Example>
+				<Example.Item title="start">
+					<Pagination total={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+				</Example.Item>
+				<Example.Item title="middle">
+					<Pagination total={10} defaultPage={5} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+				</Example.Item>
+				<Example.Item title="end">
+					<Pagination total={10} defaultPage={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+				</Example.Item>
+				<Example.Item title="no truncation">
+					<Pagination total={4} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => (<div data-testid="root">
+			<Pagination total={10} previousAriaLabel="Previous" nextAriaLabel="Next" pageAriaLabel={(args) => `Page ${args.page}`}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        const prevButton = root.getByLabelText("Previous");
+        const nextButton = root.getByLabelText("Next");
+        const firstPageButton = root.getByLabelText("Page 1");
+        expect(buttons.length).toBe(8);
+        expect(prevButton).toEqual(buttons[0]);
+        expect(prevButton).toBeDisabled();
+        expect(nextButton).toEqual(buttons.at(-1));
+        expect(nextButton).not.toBeDisabled();
+        expect(firstPageButton).toBeInTheDocument();
+        expect(firstPageButton).toEqual(pages[0]);
+        expect(firstPageButton).toHaveAttribute("aria-current", "true");
+    },
+};
+export const defaultPage = {
+    name: "defaultPage, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<Pagination total={10} defaultPage={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        expect(pages[1]).toHaveAttribute("aria-current");
+        await userEvent.click(pages[2]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
+        expect(pages[1]).toHaveAttribute("aria-current", "false");
+        expect(pages[2]).toHaveAttribute("aria-current", "true");
+    },
+};
+export const page = {
+    name: "page, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<Pagination total={10} page={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        expect(pages[1]).toHaveAttribute("aria-current");
+        await userEvent.click(pages[2]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
+        // Stays the same because it's controlled
+        expect(pages[1]).toHaveAttribute("aria-current", "true");
+        expect(pages[2]).toHaveAttribute("aria-current", "false");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Pagination className="test-classname" attributes={{ id: "test-id" }} total={10} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
 };

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: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}}
+.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;clip-path:inset(0 calc(50% + var(--rs-unit-x2)) 0 0);color:transparent;font-size:16px;inset-block:0;inset-inline-start: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/PinField/tests/PinField.stories.d.ts

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PinFieldProps>;
@@ -8,6 +10,25 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const variant: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
+export declare const base: StoryObj;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const valueLength: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const pattern: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;
+export declare const formControl: StoryObj;
+export declare const keyboard: StoryObj;

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

@@ -1,5 +1,7 @@
+import { expect, fn, userEvent, waitFor } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import PinField from "../index.js";
+import FormControl from "../../FormControl/index.js";
 export default {
     title: "Components/PinField",
     component: PinField,
@@ -9,54 +11,199 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="no value">
-			<PinField name="pin" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: 1234">
-			<PinField name="pin2" defaultValue="1234" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="value: 12">
-			<PinField name="pin3" value="12" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: 12, valueLength: 6">
-			<PinField name="pin4" defaultValue="12" valueLength={6} inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: ab, charPattern: alphabetic">
-			<PinField name="pin5" defaultValue="ab" pattern="alphabetic" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: ab, charPattern: alphanumeric">
-			<PinField name="pin6" defaultValue="ab" pattern="alphanumeric" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
-export const variant = () => (<Example>
-		<Example.Item title="variant: faded">
-			<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small">
-			<PinField name="pin" size="small" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+export const base = {
+    name: "base",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toBeInTheDocument();
+        expect(elInput).toHaveAttribute("name", "test-name");
+        expect(elInput).toHaveAttribute("autocomplete", "one-time-code");
+        expect(elInput).toHaveAttribute("inputmode", "numeric");
+    },
+};
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: faded">
+				<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<PinField name="pin" size="small" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: medium">
-			<PinField name="pin" size="medium" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: medium">
+				<PinField name="pin" size="medium" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: large">
-			<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: large">
+				<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: xlarge">
-			<PinField name="pin" size="xlarge" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: xlarge">
+				<PinField name="pin" size="xlarge" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: responsive, s: medium, m+: xlarge">
-			<PinField name="pin" size={{ s: "medium", m: "xlarge" }} inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="size: responsive, s: medium, m+: xlarge">
+				<PinField name="pin" size={{ s: "medium", m: "xlarge" }} inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const valueLength = {
+    name: "valueLength",
+    render: () => (<PinField name="test-name" valueLength={6} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAttribute("maxlength", "6");
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} defaultValue="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("123");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} value="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("12");
+    },
+};
+export const pattern = {
+    name: "pattern",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" pattern="alphabetic" defaultValue="ab" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(elInput).toHaveValue("ab");
+        expect(args.handleChange).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("c");
+        expect(elInput).toHaveValue("abc");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<PinField name="test-name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "Label", id: "test-input-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.queryByLabelText("Label");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};
+export const formControl = {
+    name: "test: with FormControl",
+    render: () => (<FormControl>
+			<FormControl.Label>Label</FormControl.Label>
+			<PinField name="test-name"/>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAccessibleName("Label");
+    },
+};
+export const keyboard = {
+    name: "test: keyboard navigation",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        expect(elInput.selectionStart).toEqual(0);
+        expect(elInput.selectionEnd).toEqual(0);
+        await userEvent.keyboard("1");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        await userEvent.keyboard("234");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionEnd).toEqual(4);
+        });
+        // Move back to the first character
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowLeft}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(0);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        // Move to the third character
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        expect(elInput).toHaveValue("1234");
+        await userEvent.keyboard("{backspace}");
+        expect(elInput).toHaveValue("124");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        // Switched to type mode
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+        // Can't move further
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+    },
+};

package/dist/components/Popover/Popover.js

@@ -5,11 +5,11 @@ import Dismissible from "../Dismissible/index.js";
 import s from "./Popover.module.css";
 import { resolveMixin } from "../../styles/mixin.js";
 const Popover = (props) => {
-    const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, ...flyoutProps } = props;
+    const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, borderRadius, ...flyoutProps } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);
     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);
+    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`], borderRadius && s[`content--radius-${borderRadius}`], mixinStyles.classNames);
     return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...mixinStyles.variables } } }));
 };
 const PopoverDismissible = (props) => {

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

@@ -1 +1 @@
-.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}}
+.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:0 0 0 1px var(--rs-color-border-neutral-faded) inset,var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:0 0 0 1px var(--rs-color-border-neutral-faded) inset,var(--rs-shadow-raised)}.content--radius-small{border-radius:var(--rs-radius-small)}.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,13 +1,15 @@
 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" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Content element padding, unit token multiplier */
     padding?: number;
     /** Component elevation level */
     elevation?: "raised" | "overlay";
+    /** Border radius for the content */
+    borderRadius?: "small" | "medium";
     /** @deprecated use Flyout utility instead, will be removed in v4 */
     variant?: "elevated" | "headless";
 };

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").ProgressProps>;
@@ -9,7 +10,21 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const value: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const duration: () => React.JSX.Element;
+export declare const value: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const duration: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const render: StoryObj;
+export declare const className: StoryObj;