reshaped 3.3.11 → 3.3.13

package/dist/cjs/themes/_generator/utilities/generateColors.d.ts

@@ -6,6 +6,6 @@ declare const generate: (args?: {
     warning?: Color;
     positive?: Color;
     neutral?: Color;
-    brand?: string;
+    brand?: Color;
 }) => ThemeDefinition["color"];
 export default generate;

package/dist/cjs/themes/_generator/utilities/generateColors.js

@@ -160,16 +160,17 @@ const generate = (args = {}) => {
         return generateColorValues({
             key,
             hex: validateHexColor(typeof color === "string" ? color : color.hex),
-            hexDark: typeof color !== "string" ? validateHexColor(color.hexDark) : undefined,
+            hexDark: validateHexColor(typeof color === "string" ? color : (color.hexDark ?? color.hex)),
         });
     };
+    const brandColor = brand || primary;
     return {
         ...generateFor("primary", primary),
         ...generateFor("critical", critical),
         ...generateFor("warning", warning),
         ...generateFor("positive", positive),
         ...generateFor("neutral", neutral),
-        brand: { hex: brand || primary },
+        brand: typeof brandColor === "string" ? { hex: brandColor } : brandColor,
         white: { hex: "#ffffff" },
         black: { hex: "#000000" },
     };

package/dist/cjs/themes/_generator/utilities/tests/color.test.js

@@ -1,58 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
 const color_1 = require("../color");
-describe("cli/utilities/color", () => {
-    describe("wcag", () => {
-        test("returns white for black background", () => {
-            expect((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light" })).toBe("#ffffff");
+(0, vitest_1.describe)("cli/utilities/color", () => {
+    (0, vitest_1.describe)("wcag", () => {
+        (0, vitest_1.test)("returns white for black background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light" })).toBe("#ffffff");
         });
-        test("returns white for dark colored background", () => {
-            expect((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light" })).toBe("#ffffff");
+        (0, vitest_1.test)("returns white for dark colored background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light" })).toBe("#ffffff");
         });
-        test("returns black for white background", () => {
-            expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light" })).toBe("#000000");
+        (0, vitest_1.test)("returns black for white background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light" })).toBe("#000000");
         });
-        test("returns white for light colored background", () => {
-            expect((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light" })).toBe("#000000");
+        (0, vitest_1.test)("returns white for light colored background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light" })).toBe("#000000");
         });
-        test("returns #999 for white background", () => {
-            expect((0, color_1.getOnColor)({
+        (0, vitest_1.test)("returns #999 for white background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({
                 bgHexColor: "#ffffff",
                 lightHexColor: "#eeeeee",
                 darkHexColor: "#999999",
                 mode: "dark",
             })).toBe("#999999");
         });
-        test("returns #eee for black background", () => {
-            expect((0, color_1.getOnColor)({
+        (0, vitest_1.test)("returns #eee for black background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({
                 bgHexColor: "#000000",
                 lightHexColor: "#eeeeee",
                 darkHexColor: "#999999",
                 mode: "dark",
             })).toBe("#eeeeee");
         });
-        test("returns black for muted green background", () => {
-            expect((0, color_1.getOnColor)({
+        (0, vitest_1.test)("returns black for muted green background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({
                 bgHexColor: "#1abc9c",
                 mode: "dark",
             })).toBe("#000000");
         });
     });
-    describe("apca", () => {
-        test("returns white for black background", () => {
-            expect((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
+    (0, vitest_1.describe)("apca", () => {
+        (0, vitest_1.test)("returns white for black background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
         });
-        test("returns white for dark colored background", () => {
-            expect((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
+        (0, vitest_1.test)("returns white for dark colored background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
         });
-        test("returns black for white background", () => {
-            expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light", algorithm: "apca" })).toBe("#000000");
+        (0, vitest_1.test)("returns black for white background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light", algorithm: "apca" })).toBe("#000000");
         });
-        test("returns white for light colored background", () => {
-            expect((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light", algorithm: "apca" })).toBe("#000000");
+        (0, vitest_1.test)("returns white for light colored background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light", algorithm: "apca" })).toBe("#000000");
         });
-        test("returns #999 for white background", () => {
-            expect((0, color_1.getOnColor)({
+        (0, vitest_1.test)("returns #999 for white background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({
                 bgHexColor: "#ffffff",
                 lightHexColor: "#eeeeee",
                 darkHexColor: "#999999",
@@ -60,8 +61,8 @@ describe("cli/utilities/color", () => {
                 algorithm: "apca",
             })).toBe("#999999");
         });
-        test("returns #eee for black background", () => {
-            expect((0, color_1.getOnColor)({
+        (0, vitest_1.test)("returns #eee for black background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({
                 bgHexColor: "#000000",
                 lightHexColor: "#eeeeee",
                 darkHexColor: "#999999",
@@ -69,8 +70,8 @@ describe("cli/utilities/color", () => {
                 algorithm: "apca",
             })).toBe("#eeeeee");
         });
-        test("returns white for muted green background", () => {
-            expect((0, color_1.getOnColor)({
+        (0, vitest_1.test)("returns white for muted green background", () => {
+            (0, vitest_1.expect)((0, color_1.getOnColor)({
                 bgHexColor: "#1abc9c",
                 mode: "dark",
                 algorithm: "apca",

package/dist/cjs/themes/slate/theme.css

@@ -1 +1 @@
-[data-rs-theme=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#2563eb;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280}[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#e8f0ff;--rs-color-border-primary:#1e5ce5;--rs-color-border-primary-faded:#d0ddf4;--rs-color-foreground-primary:#1e5ce5;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fff1ef;--rs-color-border-critical:#c22022;--rs-color-border-critical-faded:#f3dad6;--rs-color-foreground-critical:#c22022;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fff6dd;--rs-color-border-warning:#816802;--rs-color-border-warning-faded:#ece2c4;--rs-color-foreground-warning:#816802;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#ebfff1;--rs-color-border-positive:#0f7f4a;--rs-color-border-positive-faded:#d2eddb;--rs-color-foreground-positive:#0f7f4a;--rs-color-background-neutral:#e3e4e8;--rs-color-background-neutral-faded:#f3f3f5;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#00000014;--rs-color-foreground-neutral:#2c2e34;--rs-color-foreground-neutral-faded:#676a75;--rs-color-background-disabled:#edeeef;--rs-color-background-disabled-faded:#f6f6f7;--rs-color-border-disabled:#e2e2e4;--rs-color-foreground-disabled:#cbcccf;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafbfb;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:232,240,255;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:255,241,239;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,246,221;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:235,255,241;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:227,228,232;--rs-color-rgb-background-neutral-faded:243,243,245;--rs-color-rgb-background-disabled:237,238,239;--rs-color-rgb-background-disabled-faded:246,246,247;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250,251,251}[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#17243d;--rs-color-border-primary:#7199e5;--rs-color-border-primary-faded:#293b60;--rs-color-foreground-primary:#7199e5;--rs-color-background-critical:#d72828;--rs-color-background-critical-faded:#391b18;--rs-color-border-critical:#e68075;--rs-color-border-critical-faded:#5a2e29;--rs-color-foreground-critical:#e68075;--rs-color-background-warning:#d7ae06;--rs-color-background-warning-faded:#2b2410;--rs-color-border-warning:#eed58a;--rs-color-border-warning-faded:#453c1e;--rs-color-foreground-warning:#eed58a;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#152a1d;--rs-color-border-positive:#57b17c;--rs-color-border-positive-faded:#264431;--rs-color-foreground-positive:#57b17c;--rs-color-background-neutral:#393a42;--rs-color-background-neutral-faded:#212227;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff14;--rs-color-foreground-neutral:#f3f3f5;--rs-color-foreground-neutral-faded:#c7c9d1;--rs-color-background-disabled:#242527;--rs-color-background-disabled-faded:#1b1b1d;--rs-color-border-disabled:#262729;--rs-color-foreground-disabled:#494a4e;--rs-color-background-elevation-base:#161617;--rs-color-background-elevation-raised:#18191a;--rs-color-background-elevation-overlay:#1d1d1f;--rs-color-background-page:#0e0e0f;--rs-color-background-page-faded:#131414;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:23,36,61;--rs-color-rgb-background-critical:215,40,40;--rs-color-rgb-background-critical-faded:57,27,24;--rs-color-rgb-background-warning:215,174,6;--rs-color-rgb-background-warning-faded:43,36,16;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:21,42,29;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:57,58,66;--rs-color-rgb-background-neutral-faded:33,34,39;--rs-color-rgb-background-disabled:36,37,39;--rs-color-rgb-background-disabled-faded:27,27,29;--rs-color-rgb-background-elevation-base:22,22,23;--rs-color-rgb-background-elevation-raised:24,25,26;--rs-color-rgb-background-elevation-overlay:29,29,31;--rs-color-rgb-background-page:14,14,15;--rs-color-rgb-background-page-faded:19,20,20}
+[data-rs-theme=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#2563eb;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280}[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#e8f0ff;--rs-color-border-primary:#1e5ce5;--rs-color-border-primary-faded:#d0ddf4;--rs-color-foreground-primary:#1e5ce5;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fff1ef;--rs-color-border-critical:#c22022;--rs-color-border-critical-faded:#f3dad6;--rs-color-foreground-critical:#c22022;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fff6dd;--rs-color-border-warning:#816802;--rs-color-border-warning-faded:#ece2c4;--rs-color-foreground-warning:#816802;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#ebfff1;--rs-color-border-positive:#0f7f4a;--rs-color-border-positive-faded:#d2eddb;--rs-color-foreground-positive:#0f7f4a;--rs-color-background-neutral:#e3e4e8;--rs-color-background-neutral-faded:#f3f3f5;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#00000014;--rs-color-foreground-neutral:#2c2e34;--rs-color-foreground-neutral-faded:#676a75;--rs-color-background-disabled:#edeeef;--rs-color-background-disabled-faded:#f6f6f7;--rs-color-border-disabled:#e2e2e4;--rs-color-foreground-disabled:#cbcccf;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafbfb;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:232,240,255;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:255,241,239;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,246,221;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:235,255,241;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:227,228,232;--rs-color-rgb-background-neutral-faded:243,243,245;--rs-color-rgb-background-disabled:237,238,239;--rs-color-rgb-background-disabled-faded:246,246,247;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250,251,251}[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#17243d;--rs-color-border-primary:#7199e5;--rs-color-border-primary-faded:#293b60;--rs-color-foreground-primary:#7199e5;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#391b18;--rs-color-border-critical:#e9887d;--rs-color-border-critical-faded:#5a2e29;--rs-color-foreground-critical:#e9887d;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#2b2410;--rs-color-border-warning:#fbf3db;--rs-color-border-warning-faded:#453c1e;--rs-color-foreground-warning:#fbf3db;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#152a1d;--rs-color-border-positive:#57b17c;--rs-color-border-positive-faded:#264431;--rs-color-foreground-positive:#57b17c;--rs-color-background-neutral:#393a42;--rs-color-background-neutral-faded:#212227;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff14;--rs-color-foreground-neutral:#f3f3f5;--rs-color-foreground-neutral-faded:#c7c9d1;--rs-color-background-disabled:#242527;--rs-color-background-disabled-faded:#1b1b1d;--rs-color-border-disabled:#262729;--rs-color-foreground-disabled:#494a4e;--rs-color-background-elevation-base:#161617;--rs-color-background-elevation-raised:#18191a;--rs-color-background-elevation-overlay:#1d1d1f;--rs-color-background-page:#0e0e0f;--rs-color-background-page-faded:#131414;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:23,36,61;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:57,27,24;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:43,36,16;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:21,42,29;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:57,58,66;--rs-color-rgb-background-neutral-faded:33,34,39;--rs-color-rgb-background-disabled:36,37,39;--rs-color-rgb-background-disabled-faded:27,27,29;--rs-color-rgb-background-elevation-base:22,22,23;--rs-color-rgb-background-elevation-raised:24,25,26;--rs-color-rgb-background-elevation-overlay:29,29,31;--rs-color-rgb-background-page:14,14,15;--rs-color-rgb-background-page-faded:19,20,20}

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

@@ -1,10 +1,11 @@
-import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
     component: {
-        (props: import("./..").AccordionProps): React.JSX.Element;
-        Trigger: (props: import("../Accordion.types").TriggerProps) => React.JSX.Element;
-        Content: (props: import("../Accordion.types").ContentProps) => React.JSX.Element;
+        (props: import("./..").AccordionProps): import("react").JSX.Element;
+        Trigger: (props: import("../Accordion.types").TriggerProps) => import("react").JSX.Element;
+        Content: (props: import("../Accordion.types").ContentProps) => import("react").JSX.Element;
     };
     parameters: {
         iframe: {
@@ -13,7 +14,28 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const behavior: () => React.JSX.Element;
-export declare const icon: () => React.JSX.Element;
-export declare const renderProps: () => React.JSX.Element;
-export declare const composition: () => React.JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const iconSize: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const iconPosition: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const onToggle: StoryObj<{
+    handleToggle: typeof fn;
+}>;
+export declare const active: StoryObj<{
+    handleToggle: typeof fn;
+}>;
+export declare const defaultActive: StoryObj<{
+    handleToggle: typeof fn;
+}>;
+export declare const renderProps: StoryObj<{
+    handleToggle: typeof fn;
+}>;
+export declare const className: StoryObj;

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

@@ -1,9 +1,8 @@
-import React from "react";
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import { userEvent, expect, fn } from "@storybook/test";
+import { Placeholder } from "../../../utilities/storybook/index.js";
 import Accordion from "../index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
-import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Utilities/Accordion",
     component: Accordion,
@@ -13,67 +12,171 @@ export default {
         },
     },
 };
-export const behavior = () => (<Example>
-		<Example.Item title="uncontrolled">
-			<Accordion>
-				<Accordion.Trigger>Uncontrolled accordion</Accordion.Trigger>
-				<Accordion.Content>
-					<View paddingTop={2}>
-						<Placeholder />
-					</View>
-				</Accordion.Content>
-			</Accordion>
-		</Example.Item>
-		<Example.Item title="active, uncontrolled">
-			<Accordion defaultActive>
-				<Accordion.Trigger>Action uncontrolled</Accordion.Trigger>
-				<Accordion.Content>
-					<View paddingTop={2}>
-						<Placeholder />
-					</View>
-				</Accordion.Content>
-			</Accordion>
-		</Example.Item>
-		<Example.Item title="active, controlled">
-			<Accordion active>
-				<Accordion.Trigger>Active controlled</Accordion.Trigger>
-				<Accordion.Content>
-					<View paddingTop={2}>
-						<Placeholder />
-					</View>
-				</Accordion.Content>
-			</Accordion>
-		</Example.Item>
-	</Example>);
-export const icon = () => (<Example>
-		<Example.Item title="iconSize">
-			<Accordion iconSize={6}>
-				<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
-				<Accordion.Content>
-					<View paddingTop={2}>
-						<Placeholder />
-					</View>
-				</Accordion.Content>
-			</Accordion>
-		</Example.Item>
-		<Example.Item title="iconPosition">
-			<Accordion iconPosition="start">
-				<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
-				<Accordion.Content>
-					<View paddingTop={2}>
-						<Placeholder />
-					</View>
-				</Accordion.Content>
-			</Accordion>
-		</Example.Item>
-	</Example>);
-export const renderProps = () => (<Example>
-		<Example.Item title="button controlling accordion content">
-			<Accordion>
+export const base = {
+    name: "base",
+    render: () => (<Accordion defaultActive>
+			<Accordion.Trigger>
+				<Placeholder>Trigger</Placeholder>
+			</Accordion.Trigger>
+			<Accordion.Content>
+				<View paddingTop={2}>
+					<Placeholder />
+				</View>
+			</Accordion.Content>
+		</Accordion>),
+};
+export const iconSize = {
+    name: "iconSize",
+    render: () => (<Accordion iconSize={6}>
+			<Accordion.Trigger>
+				<Placeholder>Trigger</Placeholder>
+			</Accordion.Trigger>
+			<Accordion.Content>
+				<View paddingTop={2}>
+					<Placeholder />
+				</View>
+			</Accordion.Content>
+		</Accordion>),
+};
+export const iconPosition = {
+    name: "iconPosition",
+    render: () => (<Accordion iconPosition="start">
+			<Accordion.Trigger>
+				<Placeholder>Trigger</Placeholder>
+			</Accordion.Trigger>
+			<Accordion.Content>
+				<View paddingTop={2}>
+					<Placeholder />
+				</View>
+			</Accordion.Content>
+		</Accordion>),
+};
+export const onToggle = {
+    name: "onToggle",
+    args: {
+        handleToggle: fn(),
+    },
+    render: (args) => (<Accordion onToggle={args.handleToggle}>
+			<Accordion.Trigger>
+				<Placeholder>Trigger</Placeholder>
+			</Accordion.Trigger>
+			<Accordion.Content>
+				<View paddingTop={2}>
+					<Placeholder />
+				</View>
+			</Accordion.Content>
+		</Accordion>),
+    play: async ({ canvas, args }) => {
+        const { handleToggle } = args;
+        const trigger = canvas.getAllByRole("button")[0];
+        const content = canvas.getByRole("region", { hidden: true });
+        expect(trigger).toHaveAttribute("aria-expanded", "false");
+        await userEvent.click(trigger);
+        const triggerId = trigger.getAttribute("id");
+        const contentId = content.getAttribute("id");
+        expect(handleToggle).toBeCalledTimes(1);
+        expect(handleToggle).toBeCalledWith(true);
+        expect(trigger).toHaveAttribute("aria-expanded", "true");
+        expect(content).toBeInTheDocument();
+        expect(content.getAttribute("aria-labelledby")).toBe(triggerId);
+        expect(trigger.getAttribute("aria-controls")).toBe(contentId);
+        await userEvent.click(trigger);
+        expect(handleToggle).toBeCalledTimes(2);
+        expect(handleToggle).toBeCalledWith(false);
+        expect(trigger).toHaveAttribute("aria-expanded", "false");
+    },
+};
+export const active = {
+    name: "active",
+    args: {
+        handleToggle: fn(),
+    },
+    render: (args) => (<Accordion onToggle={args.handleToggle} active>
+			<Accordion.Trigger>
+				<Placeholder>Trigger</Placeholder>
+			</Accordion.Trigger>
+			<Accordion.Content>
+				<View paddingTop={2}>
+					<Placeholder />
+				</View>
+			</Accordion.Content>
+		</Accordion>),
+    play: async ({ canvas, args }) => {
+        const { handleToggle } = args;
+        const trigger = canvas.getAllByRole("button")[0];
+        // Opened by default
+        expect(trigger).toHaveAttribute("aria-expanded", "true");
+        await userEvent.click(trigger);
+        // Calls handle toggle with a new state
+        expect(handleToggle).toBeCalledWith(false);
+        // Keeps content opened since it's controlled
+        expect(trigger).toHaveAttribute("aria-expanded", "true");
+    },
+};
+export const defaultActive = {
+    name: "defaultActive",
+    args: {
+        handleToggle: fn(),
+    },
+    render: (args) => (<Accordion onToggle={args.handleToggle} defaultActive>
+			<Accordion.Trigger>
+				<Placeholder>Trigger</Placeholder>
+			</Accordion.Trigger>
+			<Accordion.Content>
+				<View paddingTop={2}>
+					<Placeholder />
+				</View>
+			</Accordion.Content>
+		</Accordion>),
+    play: async ({ canvas, args }) => {
+        const { handleToggle } = args;
+        const trigger = canvas.getAllByRole("button")[0];
+        // Opened by default
+        expect(trigger).toHaveAttribute("aria-expanded", "true");
+        await userEvent.click(trigger);
+        // Calls handle toggle with a new state
+        expect(handleToggle).toBeCalledWith(false);
+        // Keeps content opened since it's controlled
+        expect(trigger).toHaveAttribute("aria-expanded", "false");
+    },
+};
+export const renderProps = {
+    name: "children: render props",
+    args: {
+        handleToggle: fn(),
+    },
+    render: (args) => (<Accordion onToggle={args.handleToggle}>
+			<Accordion.Trigger>
+				{(attributes, { active }) => (<Button attributes={{ ...attributes, "data-active": active }}>Trigger</Button>)}
+			</Accordion.Trigger>
+			<Accordion.Content>
+				<View paddingTop={2}>
+					<Placeholder />
+				</View>
+			</Accordion.Content>
+		</Accordion>),
+    play: async ({ canvas, args }) => {
+        const { handleToggle } = args;
+        const trigger = canvas.getAllByRole("button")[0];
+        const content = canvas.getByRole("region", { hidden: true });
+        const triggerId = trigger.getAttribute("id");
+        const contentId = content.getAttribute("id");
+        expect(trigger).toHaveAttribute("aria-expanded", "false");
+        expect(trigger).toHaveAttribute("id", triggerId);
+        expect(trigger).toHaveAttribute("aria-controls", contentId);
+        expect(trigger).toHaveAttribute("data-active", "false");
+        await userEvent.click(trigger);
+        expect(handleToggle).toBeCalledTimes(1);
+        expect(handleToggle).toBeCalledWith(true);
+        expect(trigger).toHaveAttribute("data-active", "true");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Accordion className="test-classname" attributes={{ id: "test-id" }}>
 				<Accordion.Trigger>
-					{(attributes, { active }) => (<Button attributes={attributes} highlighted={active}>
-							Toggle
-						</Button>)}
+					<Placeholder>Trigger</Placeholder>
 				</Accordion.Trigger>
 				<Accordion.Content>
 					<View paddingTop={2}>
@@ -81,60 +184,10 @@ export const renderProps = () => (<Example>
 					</View>
 				</Accordion.Content>
 			</Accordion>
-		</Example.Item>
-	</Example>);
-const DemoMultiple = () => {
-    const [activeValue, setActiveValue] = React.useState(null);
-    return (<View gap={2}>
-			{[1, 2, 3].map((i) => (<View key={i} backgroundColor={activeValue === i ? "elevation-base" : undefined} animated borderRadius="medium" borderColor={activeValue === i ? "neutral-faded" : "transparent"} shadow={activeValue === i ? "raised" : undefined} padding={2}>
-					<Accordion active={activeValue === i} onToggle={(active) => setActiveValue(active ? i : null)}>
-						<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
-						<Accordion.Content>
-							<View paddingTop={2}>
-								<Placeholder />
-							</View>
-						</Accordion.Content>
-					</Accordion>
-				</View>))}
-		</View>);
-};
-export const composition = () => {
-    const toggle = useToggle();
-    return (<Example>
-			<Example.Item title="custom content size">
-				<Accordion>
-					<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
-					<Accordion.Content>
-						<View paddingTop={2}>
-							<Placeholder h={200}/>
-						</View>
-					</Accordion.Content>
-				</Accordion>
-			</Example.Item>
-			<Example.Item title="inside View">
-				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-					<Accordion>
-						<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
-						<Accordion.Content>
-							<View paddingTop={2}>
-								<Placeholder />
-							</View>
-						</Accordion.Content>
-					</Accordion>
-				</View>
-			</Example.Item>
-			<Example.Item title="multiple items, depending on state">
-				<DemoMultiple />
-			</Example.Item>
-			<Example.Item title="external trigger">
-				<Button onClick={toggle.toggle}>Toggle</Button>
-				<Accordion active={toggle.active}>
-					<Accordion.Content>
-						<View paddingTop={2}>
-							<Placeholder />
-						</View>
-					</Accordion.Content>
-				</Accordion>
-			</Example.Item>
-		</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
 };

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

@@ -8,6 +8,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const position: () => import("react").JSX.Element;
-export declare const elevated: () => import("react").JSX.Element;
-export declare const padding: () => import("react").JSX.Element;
+export declare const position: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const elevated: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const padding: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};