reshaped 3.8.0-canary.1 → 3.8.0-canary.10

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").SkeletonProps>;
@@ -8,5 +9,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variant: () => import("react").JSX.Element;
-export declare const radius: () => import("react").JSX.Element;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const radius: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const className: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Skeleton from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Skeleton",
     component: Skeleton,
@@ -9,37 +10,54 @@ export default {
         },
     },
 };
-export const variant = () => (<Example>
-		<Example.Item title="text">
-			<Skeleton />
-		</Example.Item>
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="text">
+				<Skeleton />
+			</Example.Item>
 
-		<Example.Item title="view, rectangle">
-			<Skeleton width="100px" height="100px"/>
-		</Example.Item>
+			<Example.Item title="view, rectangle">
+				<Skeleton width="100px" height="100px"/>
+			</Example.Item>
 
-		<Example.Item title="view, circle">
-			<Skeleton width="100px" height="100px" borderRadius="circular"/>
-		</Example.Item>
+			<Example.Item title="view, circle">
+				<Skeleton width="100px" height="100px" borderRadius="circular"/>
+			</Example.Item>
 
-		<Example.Item title="view, rectangle, responsive">
-			<Skeleton width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}/>
-		</Example.Item>
-	</Example>);
-export const radius = () => (<Example>
-		<Example.Item title="radius=small">
-			<Skeleton width="60px" height="60px" borderRadius="small"/>
-		</Example.Item>
+			<Example.Item title="view, rectangle, responsive">
+				<Skeleton width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const radius = {
+    name: "radius",
+    render: () => (<Example>
+			<Example.Item title="radius=small">
+				<Skeleton width="60px" height="60px" borderRadius="small"/>
+			</Example.Item>
 
-		<Example.Item title="radius=medium">
-			<Skeleton width="60px" height="60px" borderRadius="medium"/>
-		</Example.Item>
+			<Example.Item title="radius=medium">
+				<Skeleton width="60px" height="60px" borderRadius="medium"/>
+			</Example.Item>
 
-		<Example.Item title="radius=large">
-			<Skeleton width="60px" height="60px" borderRadius="large"/>
-		</Example.Item>
+			<Example.Item title="radius=large">
+				<Skeleton width="60px" height="60px" borderRadius="large"/>
+			</Example.Item>
 
-		<Example.Item title="radius=circular">
-			<Skeleton width="60px" height="60px" borderRadius="circular"/>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="radius=circular">
+				<Skeleton width="60px" height="60px" borderRadius="circular"/>
+			</Example.Item>
+		</Example>),
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Skeleton className="test-classname" attributes={{ id: "test-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Slider/Slider.module.css

@@ -1 +1 @@
-.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:var(--rs-radius-circular);box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.thumb--active:after,[data-rs-keyboard] .input:focus+.thumb:after{cursor:grabbing}.thumb--active:before,[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.thumb--active .tooltip,[data-rs-keyboard] .input:focus+.thumb .tooltip{opacity:1}[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
+.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:var(--rs-radius-circular);box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.thumb--active:after,[data-rs-keyboard] .input:focus+.thumb:after{cursor:grabbing}.thumb--active:before,[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.thumb--active .tooltip,[data-rs-keyboard] .input:focus+.thumb .tooltip{opacity:1}[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:var(--rs-shadow-focus)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

package/dist/components/Stepper/Stepper.js

@@ -18,10 +18,10 @@ const StepperItemPrivate = (props) => {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StepperItem = (_) => null;
 const Stepper = (props) => {
-    const { children, direction = "row", activeId, labelDisplay, className, attributes } = props;
+    const { children, direction = "row", activeId, labelDisplay, gap = 3, className, attributes, } = props;
     const vertical = direction === "column";
     const length = React.Children.count(children);
-    return (_jsx(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: 3, wrap: false, children: React.Children.map(children, (child, index) => {
+    return (_jsx(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: gap, wrap: false, children: React.Children.map(children, (child, index) => {
             if (!React.isValidElement(child))
                 return null;
             if (child.type !== StepperItem)

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

@@ -9,6 +9,8 @@ export type Props = {
     children?: React.ReactNode;
     /** Direction of the stepper */
     direction?: "row" | "column";
+    /** Gap between items (default: 3) */
+    gap?: G.Responsive<number>;
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */

package/dist/components/Stepper/tests/Stepper.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("./..").StepperProps> & {
@@ -14,6 +15,20 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const direction: () => React.JSX.Element;
-export declare const labelDisplay: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
+export declare const direction: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const labelDisplay: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const gap: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const className: StoryObj;
+export declare const edgeCases: {
+    name: string;
+    render: () => React.JSX.Element;
+};

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

@@ -3,6 +3,7 @@ import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Stepper from "../index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Stepper",
     component: Stepper,
@@ -33,51 +34,102 @@ const Demo = (props) => {
 			</Stepper.Item>
 		</Stepper>);
 };
-export const direction = () => (<Example>
-		<Example.Item title="direction: row">
-			<Stepper activeId="1">
-				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-				<Stepper.Item title="Step 2"/>
-				<Stepper.Item title="Step 3 very long title"/>
-			</Stepper>
-		</Example.Item>
-		<Example.Item title="direction: column">
-			<Stepper activeId="1" direction="column">
-				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-				<Stepper.Item title="Step 2"/>
-				<Stepper.Item title="Step 3 very long title"/>
-			</Stepper>
-		</Example.Item>
-	</Example>);
-export const labelDisplay = () => (<Example>
-		<Example.Item title="direction: row, labels hidden">
-			<Stepper activeId="1" labelDisplay="hidden">
-				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-				<Stepper.Item title="Step 2"/>
-				<Stepper.Item title="Step 3 very long title"/>
-			</Stepper>
-		</Example.Item>
-		<Example.Item title="direction: column, labels hiden">
-			<Stepper activeId="1" direction="column" labelDisplay="hidden">
-				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-				<Stepper.Item title="Step 2"/>
-				<Stepper.Item title="Step 3 very long title"/>
-			</Stepper>
-		</Example.Item>
-		<Example.Item title="direction: row, labels hidden on s">
-			<Stepper activeId="1" labelDisplay={{ s: "hidden", m: "inline" }}>
-				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-				<Stepper.Item title="Step 2"/>
-				<Stepper.Item title="Step 3 very long title"/>
+export const direction = {
+    name: "direction",
+    render: () => (<Example>
+			<Example.Item title="direction: row">
+				<Stepper activeId="1">
+					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+					<Stepper.Item title="Step 2"/>
+					<Stepper.Item title="Step 3 very long title"/>
+				</Stepper>
+			</Example.Item>
+			<Example.Item title="direction: column">
+				<Stepper activeId="1" direction="column">
+					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+					<Stepper.Item title="Step 2"/>
+					<Stepper.Item title="Step 3 very long title"/>
+				</Stepper>
+			</Example.Item>
+		</Example>),
+};
+export const labelDisplay = {
+    name: "labelDisplay",
+    render: () => (<Example>
+			<Example.Item title="direction: row, labels hidden">
+				<Stepper activeId="1" labelDisplay="hidden">
+					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+					<Stepper.Item title="Step 2"/>
+					<Stepper.Item title="Step 3 very long title"/>
+				</Stepper>
+			</Example.Item>
+			<Example.Item title="direction: column, labels hiden">
+				<Stepper activeId="1" direction="column" labelDisplay="hidden">
+					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+					<Stepper.Item title="Step 2"/>
+					<Stepper.Item title="Step 3 very long title"/>
+				</Stepper>
+			</Example.Item>
+			<Example.Item title="direction: row, labels hidden on s">
+				<Stepper activeId="1" labelDisplay={{ s: "hidden", m: "inline" }}>
+					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+					<Stepper.Item title="Step 2"/>
+					<Stepper.Item title="Step 3 very long title"/>
+				</Stepper>
+			</Example.Item>
+		</Example>),
+};
+export const gap = {
+    name: "gap",
+    render: () => (<Example>
+			<Example.Item title="gap: 6, direction: row">
+				<Stepper activeId="1" gap={6}>
+					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+					<Stepper.Item title="Step 2"/>
+					<Stepper.Item title="Step 3 very long title"/>
+				</Stepper>
+			</Example.Item>
+			<Example.Item title="gap: 6, direction: column">
+				<Stepper activeId="1" direction="column" gap={6}>
+					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+					<Stepper.Item title="Step 2"/>
+					<Stepper.Item title="Step 3 very long title"/>
+				</Stepper>
+			</Example.Item>
+			<Example.Item title={["responsive gap", "[s] 2", "[m+] 5"]}>
+				<Stepper activeId="1" gap={{ s: 2, m: 5 }}>
+					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+					<Stepper.Item title="Step 2"/>
+					<Stepper.Item title="Step 3 very long title"/>
+				</Stepper>
+			</Example.Item>
+		</Example>),
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Stepper className="test-classname" attributes={{ id: "test-id" }}>
+				<Stepper.Item attributes={{ id: "test-item-id" }} className="test-item-classname"/>
 			</Stepper>
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => (<Example>
-		<Example.Item title={[
-        "multiline subtitle",
-        "should wrap the text correctly",
-        "should display the connector correctly",
-    ]}>
-			<Demo activeId={0} subtitle="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy"/>
-		</Example.Item>
-	</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const item = root?.firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(item).toHaveClass("test-item-classname");
+        expect(item).toHaveAttribute("id", "test-item-id");
+    },
+};
+export const edgeCases = {
+    name: "test: edge cases",
+    render: () => (<Example>
+			<Example.Item title={[
+            "multiline subtitle",
+            "should wrap the text correctly",
+            "should display the connector correctly",
+        ]}>
+				<Demo activeId={0} subtitle="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy"/>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/Switch/Switch.module.css

@@ -1 +1 @@
-.root{align-items:center;display:inline-flex;gap:var(--rs-switch-gap);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.root.--reversed{flex-direction:row-reverse}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-width) - var(--rs-switch-height)))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-height) - var(--rs-switch-width)))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;border-radius:var(--rs-radius-circular);box-sizing:border-box;cursor:pointer;display:flex;height:var(--rs-switch-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:var(--rs-switch-width)}.hitbox{height:24px;inset-inline:0;position:absolute;top:50%;transform:translateY(-50%)}.thumb{background:var(--rs-color-white);border-radius:var(--rs-radius-circular);box-shadow:var(--rs-shadow-raised);height:calc(var(--rs-switch-height) - var(--rs-unit-x1));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:calc(var(--rs-switch-height) - var(--rs-unit-x1))}.--size-small{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}@media (--rs-viewport-m ){.--size-small--m{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--m{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--m{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--l{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--l{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--xl{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--xl{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}
+.root{align-items:center;display:inline-flex;gap:var(--rs-switch-gap);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.root.--reversed{flex-direction:row-reverse}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-width) - var(--rs-switch-height)))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-height) - var(--rs-switch-width)))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-shadow-focus)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;border-radius:var(--rs-radius-circular);box-sizing:border-box;cursor:pointer;display:flex;height:var(--rs-switch-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:var(--rs-switch-width)}.hitbox{height:24px;inset-inline:0;position:absolute;top:50%;transform:translateY(-50%)}.thumb{background:var(--rs-color-white);border-radius:var(--rs-radius-circular);box-shadow:var(--rs-shadow-raised);height:calc(var(--rs-switch-height) - var(--rs-unit-x1));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:calc(var(--rs-switch-height) - var(--rs-unit-x1))}.--size-small{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}@media (--rs-viewport-m ){.--size-small--m{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--m{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--m{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--l{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--l{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--xl{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--xl{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}

package/dist/components/Switch/tests/Switch.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("./..").SwitchProps>;
@@ -8,7 +10,13 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const selection: () => import("react").JSX.Element;
 export declare const size: () => import("react").JSX.Element;
 export declare const label: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
+export declare const defaultChecked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const checked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;

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

@@ -1,6 +1,7 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Switch from "../index.js";
 import View from "../../View/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/Switch",
     component: Switch,
@@ -10,17 +11,6 @@ export default {
         },
     },
 };
-export const selection = () => (<Example>
-		<Example.Item title="unselected">
-			<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-		<Example.Item title="selected, uncontrolled">
-			<Switch name="active" defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-		<Example.Item title="selected, controlled">
-			<Switch name="active" checked inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-	</Example>);
 export const size = () => (<Example>
 		<Example.Item title="size: medium">
 			<Switch name="active" size="medium" inputAttributes={{ "aria-label": "test switch" }}/>
@@ -68,16 +58,80 @@ export const label = () => (<Example>
 			</View>
 		</Example.Item>
 	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled, unselected">
-			<Switch name="active" disabled inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-		<Example.Item title="disabled, selected">
-			<Switch name="active" disabled defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-		<Example.Item title="disabled, with label">
-			<Switch name="active" disabled>
-				Switch
+export const defaultChecked = {
+    name: "defaultChecked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Switch name="test-name" defaultChecked onChange={args.handleChange}>
+			Label
+		</Switch>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            checked: false,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).not.toBeChecked();
+    },
+};
+export const checked = {
+    name: "checked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Switch name="test-name" checked onChange={args.handleChange}>
+			Label
+		</Switch>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            checked: false,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Example>
+			<Example.Item title="disabled, unselected">
+				<Switch name="active" disabled inputAttributes={{ "aria-label": "test switch" }}/>
+			</Example.Item>
+			<Example.Item title="disabled, selected">
+				<Switch name="active" disabled defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
+			</Example.Item>
+			<Example.Item title="disabled, with label">
+				<Switch name="active" disabled>
+					Switch
+				</Switch>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const [input] = canvas.getAllByRole("checkbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Switch className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} name="name">
+				Label
 			</Switch>
-		</Example.Item>
-	</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("checkbox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

package/dist/components/Switch/tests/Switch.test.stories.d.ts

@@ -1,5 +1,3 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").SwitchProps>;
@@ -13,11 +11,3 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const defaultChecked: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const checked: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,4 +1,3 @@
-import { expect, fn, userEvent } from "storybook/test";
 import Switch from "../index.js";
 export default {
     title: "Components/Switch/tests",
@@ -10,70 +9,3 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
-export const defaultChecked = {
-    name: "defaultChecked, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Switch name="test-name" defaultChecked onChange={args.handleChange}>
-			Label
-		</Switch>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input).toBeChecked();
-        await userEvent.click(input);
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            checked: false,
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).not.toBeChecked();
-    },
-};
-export const checked = {
-    name: "checked, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Switch name="test-name" checked onChange={args.handleChange}>
-			Label
-		</Switch>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input).toBeChecked();
-        await userEvent.click(input);
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            checked: false,
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toBeChecked();
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Switch disabled name="name">
-			Label
-		</Switch>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input).toBeDisabled();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Switch className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} name="name">
-				Label
-			</Switch>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const input = canvas.getByRole("checkbox");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(input).toHaveAttribute("id", "test-input-id");
-    },
-};

package/dist/components/Table/Table.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { isValidElement } from "react";
 import { classNames, responsiveVariables } from "../../utilities/props.js";
 import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Table.module.css";
@@ -43,8 +43,10 @@ const Table = (props) => {
     const fadeSide = useFadeSide(rootRef);
     const rootClassNames = classNames(s.root, className, border && s["--border-outer"], columnBorder && s["--border-column"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"]);
     const [firstChild] = React.Children.toArray(children);
-    return (_jsx("div", { ...attributes, className: rootClassNames, ref: rootRef, children: _jsx("table", { className: s.table, children: React.isValidElement(firstChild) &&
-                (firstChild.type === TableBody || firstChild.type === TableHead) ? (children) : (_jsx(TableBody, { children: children })) }) }));
+    const isElement = isValidElement(firstChild);
+    const isBody = isElement && firstChild.type === TableBody;
+    const isHead = isElement && firstChild.type === TableHead;
+    return (_jsx("div", { ...attributes, className: rootClassNames, ref: rootRef, children: _jsx("table", { className: s.table, children: isBody || isHead ? children : _jsx(TableBody, { children: children }) }) }));
 };
 Table.Cell = TableCell;
 Table.Heading = TableHeading;

package/dist/components/Table/Table.module.css

@@ -1 +1 @@
-@property --rs-table-fade-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-table-fade-end{syntax:"<length>";initial-value:0;inherits:false}.root{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-table-fade-start),#000 calc(100% - var(--rs-table-fade-end)),transparent 100%);overflow:auto;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-table-fade-start,--rs-table-fade-end}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{box-shadow:var(--rs-focus-inset-shadow);outline:none;z-index:var(--rs-z-index-relative)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),24%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}.--fade-start,[dir=rtl] .--fade-end{--rs-table-fade-start:var(--rs-unit-x4)}.--fade-end,[dir=rtl] .--fade-start{--rs-table-fade-end:var(--rs-unit-x4)}
+@property --rs-table-fade-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-table-fade-end{syntax:"<length>";initial-value:0;inherits:false}.root{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-table-fade-start),#000 calc(100% - var(--rs-table-fade-end)),transparent 100%);overflow:auto;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-table-fade-start,--rs-table-fade-end}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{box-shadow:var(--rs-shadow-focus-inset);outline:none;z-index:var(--rs-z-index-relative)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),24%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}.--fade-start,[dir=rtl] .--fade-end{--rs-table-fade-start:var(--rs-unit-x4)}.--fade-end,[dir=rtl] .--fade-start{--rs-table-fade-end:var(--rs-unit-x4)}