reshaped 3.7.0-canary.14 → 3.7.0-canary.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.js +11 -11
  4. package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js +1 -1
  5. package/dist/cjs/themes/slate/theme.css +1 -1
  6. package/dist/components/Actionable/Actionable.js +3 -3
  7. package/dist/components/Actionable/Actionable.module.css +1 -1
  8. package/dist/components/Actionable/Actionable.types.d.ts +1 -0
  9. package/dist/components/Badge/Badge.js +3 -3
  10. package/dist/components/Badge/Badge.module.css +1 -1
  11. package/dist/components/Badge/Badge.types.d.ts +4 -4
  12. package/dist/components/Badge/tests/Badge.stories.js +11 -0
  13. package/dist/components/Button/Button.module.css +1 -1
  14. package/dist/components/Calendar/Calendar.types.d.ts +1 -0
  15. package/dist/components/Calendar/Calendar.utils.d.ts +11 -0
  16. package/dist/components/Calendar/Calendar.utils.js +25 -0
  17. package/dist/components/Calendar/CalendarDate.js +6 -2
  18. package/dist/components/Calendar/CalendarMonth.js +9 -23
  19. package/dist/components/Calendar/tests/Calendar.stories.js +9 -2
  20. package/dist/components/Carousel/Carousel.js +3 -1
  21. package/dist/components/Carousel/Carousel.types.d.ts +1 -0
  22. package/dist/components/Carousel/CarouselControl.d.ts +1 -2
  23. package/dist/components/Carousel/CarouselControl.js +8 -7
  24. package/dist/components/Checkbox/Checkbox.module.css +1 -1
  25. package/dist/components/DropdownMenu/DropdownMenu.js +8 -6
  26. package/dist/components/Flyout/FlyoutTrigger.js +4 -3
  27. package/dist/components/Grid/Grid.js +8 -2
  28. package/dist/components/Grid/Grid.types.d.ts +2 -0
  29. package/dist/components/Grid/tests/Grid.stories.js +12 -1
  30. package/dist/components/PinField/PinField.module.css +1 -1
  31. package/dist/components/ProgressIndicator/ProgressIndicator.module.css +1 -1
  32. package/dist/components/Reshaped/Reshaped.css +1 -1
  33. package/dist/components/Resizable/Resizable.module.css +1 -1
  34. package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
  35. package/dist/components/Select/Select.module.css +1 -1
  36. package/dist/components/Slider/Slider.module.css +1 -1
  37. package/dist/components/Switch/Switch.js +1 -1
  38. package/dist/components/Switch/Switch.module.css +1 -1
  39. package/dist/components/Tabs/TabsItem.js +2 -1
  40. package/dist/components/Tabs/TabsList.js +2 -2
  41. package/dist/components/TextField/TextField.module.css +1 -1
  42. package/dist/components/TextField/tests/TextField.stories.js +3 -1
  43. package/dist/themes/_generator/tokens/color/utilities/generateColors.js +1 -1
  44. package/dist/themes/slate/theme.css +1 -1
  45. package/package.json +1 -1
package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js CHANGED
@@ -59,7 +59,7 @@ const generateColorValues = (key, token) => {
59
59
  const fg = neutral ? { ...bg, l: 0.2 } : { ...bg, l: 0.5 };
60
60
  const fgDark = neutral ? { ...bgDark, l: 0.96 } : { ...bgDark, l: 0.75, c: bg.c * 0.85 };
61
61
  const bd = neutral ? { ...bg, l: 0, alpha: 0.12 } : { ...bg, l: bg.l - 0.08 };
62
- const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.16 } : { ...bgDark, l: bgDark.l + 0.08 };
62
+ const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.16 } : { ...bgDark, l: bgDark.l + 0.1 };
63
63
  const bdFaded = neutral
64
64
  ? { ...bgFaded, l: 0, alpha: 0.08 }
65
65
  : { ...bgFaded, l: bgFaded.l - 0.05, c: bgFaded.c + 0.01 };
package/dist/cjs/themes/slate/theme.css CHANGED
@@ -1 +1 @@
1
- [data-rs-theme*=" slate "],[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-family-monospace:Geist Mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--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:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--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;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme*=" slate "][data-rs-color-mode=light],[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.97 0.02 262.67);--rs-color-border-primary:oklch(0.47 0.24 262.67);--rs-color-border-primary-faded:oklch(0.92 0.03 262.67);--rs-color-foreground-primary:oklch(0.5 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.22 26.97);--rs-color-background-critical-faded:oklch(0.97 0.02 26.97);--rs-color-border-critical:oklch(0.51 0.22 26.97);--rs-color-border-critical-faded:oklch(0.92 0.03 26.97);--rs-color-foreground-critical:oklch(0.5 0.22 26.97);--rs-color-background-warning:oklch(0.83 0.2 80);--rs-color-background-warning-faded:oklch(0.97 0.04 80);--rs-color-border-warning:oklch(0.75 0.2 80);--rs-color-border-warning-faded:oklch(0.92 0.05 80);--rs-color-foreground-warning:oklch(0.5 0.2 80);--rs-color-background-positive:oklch(0.53 0.13 153.78);--rs-color-background-positive-faded:oklch(0.97 0.02 153.78);--rs-color-border-positive:oklch(0.45 0.13 153.78);--rs-color-border-positive-faded:oklch(0.92 0.03 153.78);--rs-color-foreground-positive:oklch(0.5 0.13 153.78);--rs-color-background-neutral:oklch(0.92 0.01 262.67);--rs-color-background-neutral-faded:oklch(0.97 0.005 262.67);--rs-color-border-neutral:oklch(0 0.01 262.67/0.12);--rs-color-border-neutral-faded:oklch(0 0.005 262.67/0.08);--rs-color-foreground-neutral:oklch(0.2 0.01 262.67);--rs-color-foreground-neutral-faded:oklch(0.45 0.01 262.67);--rs-color-background-disabled:oklch(0.95 0 262.67);--rs-color-background-disabled-faded:oklch(0.98 0 262.67);--rs-color-border-disabled:oklch(0 0.01 262.67/0.06);--rs-color-foreground-disabled:oklch(0.84 0 262.67);--rs-color-background-elevation-base:oklch(1 0 262.67);--rs-color-background-elevation-raised:oklch(1 0 262.67);--rs-color-background-elevation-overlay:oklch(1 0 262.67);--rs-color-background-page:oklch(1 0 262.67);--rs-color-background-page-faded:oklch(0.97 0 262.67);--rs-color-rgb-background-primary:23.536499999999997,95.6505,250.1295;--rs-color-rgb-background-primary-faded:238.017,245.4885,259.182;--rs-color-rgb-background-critical:226.593,39.168,41.0295;--rs-color-rgb-background-critical-faded:258.5445,240.3885,237.8895;--rs-color-rgb-background-warning:265.7865,180.5145,-70.15050000000001;--rs-color-rgb-background-warning-faded:259.6665,242.862,215.577;--rs-color-rgb-background-positive:14.177999999999999,128.673,70.788;--rs-color-rgb-background-positive-faded:235.4415,249.3645,239.0115;--rs-color-on-background-neutral:oklch(0 0 0);--rs-color-rgb-background-neutral:224.96099999999998,228.6585,235.416;--rs-color-rgb-background-neutral-faded:243.219,245.10600000000002,248.523;--rs-color-rgb-background-disabled:238.29749999999999,238.29749999999999,238.29749999999999;--rs-color-rgb-background-disabled-faded:248.2935,248.2935,248.2935;--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:244.953,244.953,244.953}[data-rs-theme*=" slate "][data-rs-color-mode=dark],[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.25 0.0384 262.67);--rs-color-border-primary:oklch(0.6298 0.192 262.67);--rs-color-border-primary-faded:oklch(0.35 0.0384 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5874 0.176 26.97);--rs-color-background-critical-faded:oklch(0.25 0.0352 26.97);--rs-color-border-critical:oklch(0.6674 0.176 26.97);--rs-color-border-critical-faded:oklch(0.35 0.0352 26.97);--rs-color-foreground-critical:oklch(0.75 0.187 26.97);--rs-color-background-warning:oklch(0.8036 0.16 80);--rs-color-background-warning-faded:oklch(0.25 0.032 80);--rs-color-border-warning:oklch(0.8836 0.16 80);--rs-color-border-warning-faded:oklch(0.35 0.032 80);--rs-color-foreground-warning:oklch(0.75 0.17 80);--rs-color-background-positive:oklch(0.5162 0.104 153.78);--rs-color-background-positive-faded:oklch(0.25 0.0208 153.78);--rs-color-border-positive:oklch(0.5962 0.104 153.78);--rs-color-border-positive-faded:oklch(0.35 0.0208 153.78);--rs-color-foreground-positive:oklch(0.75 0.1105 153.78);--rs-color-background-neutral:oklch(0.36 0.008 262.67);--rs-color-background-neutral-faded:oklch(0.25 0.01 262.67);--rs-color-border-neutral:oklch(1 0.008 262.67/0.16);--rs-color-border-neutral-faded:oklch(1 0.01 262.67/0.08);--rs-color-foreground-neutral:oklch(0.96 0.008 262.67);--rs-color-foreground-neutral-faded:oklch(0.81 0.008 262.67);--rs-color-background-disabled:oklch(0.28 0 262.67);--rs-color-background-disabled-faded:oklch(0.23 0 262.67);--rs-color-border-disabled:oklch(0.28 0 262.67);--rs-color-foreground-disabled:oklch(0.4 0 262.67);--rs-color-background-elevation-base:oklch(0.2 0 262.67);--rs-color-background-elevation-raised:oklch(0.21 0 262.67);--rs-color-background-elevation-overlay:oklch(0.22 0 262.67);--rs-color-background-page:oklch(0.16 0 262.67);--rs-color-background-page-faded:oklch(0.18 0 262.67);--rs-color-rgb-background-primary:47.277,104.0655,223.3545;--rs-color-rgb-background-primary-faded:23.6385,33.456,52.122;--rs-color-rgb-background-critical:208.437,69.87,62.526;--rs-color-rgb-background-critical-faded:48.6285,26.877,24.378;--rs-color-rgb-background-warning:244.1625,177.3525,31.7985;--rs-color-rgb-background-warning-faded:41.6925,31.900499999999997,15.1215;--rs-color-rgb-background-positive:45.5685,120.86999999999999,75.1995;--rs-color-rgb-background-positive-faded:25.9335,36.643499999999996,29.0445;--rs-color-on-background-neutral:oklch(1 0 0);--rs-color-rgb-background-neutral:58.8285,61.149,65.43299999999999;--rs-color-rgb-background-neutral-faded:31.0335,33.6855,38.556;--rs-color-rgb-background-disabled:40.774499999999996,40.774499999999996,40.774499999999996;--rs-color-rgb-background-disabled-faded:28.815,28.815,28.815;--rs-color-rgb-background-elevation-base:21.9555,21.9555,21.9555;--rs-color-rgb-background-elevation-raised:24.225,24.225,24.225;--rs-color-rgb-background-elevation-overlay:26.52,26.52,26.52;--rs-color-rgb-background-page:13.209,13.209,13.209;--rs-color-rgb-background-page-faded:17.5185,17.5185,17.5185}
1
+ [data-rs-theme*=" slate "],[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-family-monospace:Geist Mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--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:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--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;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme*=" slate "][data-rs-color-mode=light],[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.97 0.02 262.67);--rs-color-border-primary:oklch(0.47 0.24 262.67);--rs-color-border-primary-faded:oklch(0.92 0.03 262.67);--rs-color-foreground-primary:oklch(0.5 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.22 26.97);--rs-color-background-critical-faded:oklch(0.97 0.02 26.97);--rs-color-border-critical:oklch(0.51 0.22 26.97);--rs-color-border-critical-faded:oklch(0.92 0.03 26.97);--rs-color-foreground-critical:oklch(0.5 0.22 26.97);--rs-color-background-warning:oklch(0.83 0.2 80);--rs-color-background-warning-faded:oklch(0.97 0.04 80);--rs-color-border-warning:oklch(0.75 0.2 80);--rs-color-border-warning-faded:oklch(0.92 0.05 80);--rs-color-foreground-warning:oklch(0.5 0.2 80);--rs-color-background-positive:oklch(0.53 0.13 153.78);--rs-color-background-positive-faded:oklch(0.97 0.02 153.78);--rs-color-border-positive:oklch(0.45 0.13 153.78);--rs-color-border-positive-faded:oklch(0.92 0.03 153.78);--rs-color-foreground-positive:oklch(0.5 0.13 153.78);--rs-color-background-neutral:oklch(0.92 0.01 262.67);--rs-color-background-neutral-faded:oklch(0.97 0.005 262.67);--rs-color-border-neutral:oklch(0 0.01 262.67/0.12);--rs-color-border-neutral-faded:oklch(0 0.005 262.67/0.08);--rs-color-foreground-neutral:oklch(0.2 0.01 262.67);--rs-color-foreground-neutral-faded:oklch(0.45 0.01 262.67);--rs-color-background-disabled:oklch(0.95 0 262.67);--rs-color-background-disabled-faded:oklch(0.98 0 262.67);--rs-color-border-disabled:oklch(0 0.01 262.67/0.06);--rs-color-foreground-disabled:oklch(0.84 0 262.67);--rs-color-background-elevation-base:oklch(1 0 262.67);--rs-color-background-elevation-raised:oklch(1 0 262.67);--rs-color-background-elevation-overlay:oklch(1 0 262.67);--rs-color-background-page:oklch(1 0 262.67);--rs-color-background-page-faded:oklch(0.97 0 262.67);--rs-color-rgb-background-primary:23.536499999999997,95.6505,250.1295;--rs-color-rgb-background-primary-faded:238.017,245.4885,259.182;--rs-color-rgb-background-critical:226.593,39.168,41.0295;--rs-color-rgb-background-critical-faded:258.5445,240.3885,237.8895;--rs-color-rgb-background-warning:265.7865,180.5145,-70.15050000000001;--rs-color-rgb-background-warning-faded:259.6665,242.862,215.577;--rs-color-rgb-background-positive:14.177999999999999,128.673,70.788;--rs-color-rgb-background-positive-faded:235.4415,249.3645,239.0115;--rs-color-on-background-neutral:oklch(0 0 0);--rs-color-rgb-background-neutral:224.96099999999998,228.6585,235.416;--rs-color-rgb-background-neutral-faded:243.219,245.10600000000002,248.523;--rs-color-rgb-background-disabled:238.29749999999999,238.29749999999999,238.29749999999999;--rs-color-rgb-background-disabled-faded:248.2935,248.2935,248.2935;--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:244.953,244.953,244.953}[data-rs-theme*=" slate "][data-rs-color-mode=dark],[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.25 0.0384 262.67);--rs-color-border-primary:oklch(0.6498 0.192 262.67);--rs-color-border-primary-faded:oklch(0.35 0.0384 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5874 0.176 26.97);--rs-color-background-critical-faded:oklch(0.25 0.0352 26.97);--rs-color-border-critical:oklch(0.6874 0.176 26.97);--rs-color-border-critical-faded:oklch(0.35 0.0352 26.97);--rs-color-foreground-critical:oklch(0.75 0.187 26.97);--rs-color-background-warning:oklch(0.8036 0.16 80);--rs-color-background-warning-faded:oklch(0.25 0.032 80);--rs-color-border-warning:oklch(0.9036 0.16 80);--rs-color-border-warning-faded:oklch(0.35 0.032 80);--rs-color-foreground-warning:oklch(0.75 0.17 80);--rs-color-background-positive:oklch(0.5162 0.104 153.78);--rs-color-background-positive-faded:oklch(0.25 0.0208 153.78);--rs-color-border-positive:oklch(0.6162 0.104 153.78);--rs-color-border-positive-faded:oklch(0.35 0.0208 153.78);--rs-color-foreground-positive:oklch(0.75 0.1105 153.78);--rs-color-background-neutral:oklch(0.36 0.008 262.67);--rs-color-background-neutral-faded:oklch(0.25 0.01 262.67);--rs-color-border-neutral:oklch(1 0.008 262.67/0.16);--rs-color-border-neutral-faded:oklch(1 0.01 262.67/0.08);--rs-color-foreground-neutral:oklch(0.96 0.008 262.67);--rs-color-foreground-neutral-faded:oklch(0.81 0.008 262.67);--rs-color-background-disabled:oklch(0.28 0 262.67);--rs-color-background-disabled-faded:oklch(0.23 0 262.67);--rs-color-border-disabled:oklch(0.28 0 262.67);--rs-color-foreground-disabled:oklch(0.4 0 262.67);--rs-color-background-elevation-base:oklch(0.2 0 262.67);--rs-color-background-elevation-raised:oklch(0.21 0 262.67);--rs-color-background-elevation-overlay:oklch(0.22 0 262.67);--rs-color-background-page:oklch(0.16 0 262.67);--rs-color-background-page-faded:oklch(0.18 0 262.67);--rs-color-rgb-background-primary:47.277,104.0655,223.3545;--rs-color-rgb-background-primary-faded:23.6385,33.456,52.122;--rs-color-rgb-background-critical:208.437,69.87,62.526;--rs-color-rgb-background-critical-faded:48.6285,26.877,24.378;--rs-color-rgb-background-warning:244.1625,177.3525,31.7985;--rs-color-rgb-background-warning-faded:41.6925,31.900499999999997,15.1215;--rs-color-rgb-background-positive:45.5685,120.86999999999999,75.1995;--rs-color-rgb-background-positive-faded:25.9335,36.643499999999996,29.0445;--rs-color-on-background-neutral:oklch(1 0 0);--rs-color-rgb-background-neutral:58.8285,61.149,65.43299999999999;--rs-color-rgb-background-neutral-faded:31.0335,33.6855,38.556;--rs-color-rgb-background-disabled:40.774499999999996,40.774499999999996,40.774499999999996;--rs-color-rgb-background-disabled-faded:28.815,28.815,28.815;--rs-color-rgb-background-elevation-base:21.9555,21.9555,21.9555;--rs-color-rgb-background-elevation-raised:24.225,24.225,24.225;--rs-color-rgb-background-elevation-overlay:26.52,26.52,26.52;--rs-color-rgb-background-page:13.209,13.209,13.209;--rs-color-rgb-background-page-faded:17.5185,17.5185,17.5185}
package/dist/components/Actionable/Actionable.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use client";
2
- import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { forwardRef } from "react";
4
4
  import { classNames } from "../../utilities/props.js";
5
5
  import * as keys from "../../constants/keys.js";
6
6
  import s from "./Actionable.module.css";
7
7
  const Actionable = forwardRef((props, ref) => {
8
- const { children, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, stopPropagation, fullWidth, className, attributes, } = props;
8
+ const { children, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, stopPropagation, fullWidth, touchHitbox, className, attributes, } = props;
9
9
  const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], disableFocusRing && s["--disabled-focus-ring"], fullWidth && s["--full-width"]);
10
10
  const rootAttributes = { ...attributes };
11
11
  const hasClickHandler = onClick || attributes?.onClick;
@@ -57,7 +57,7 @@ const Actionable = forwardRef((props, ref) => {
57
57
  event.preventDefault();
58
58
  handlePress(event);
59
59
  };
60
- return (_jsx(TagName, { ref: ref, ...rootAttributes, "aria-disabled": disabled ? true : undefined, className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children }));
60
+ return (_jsxs(TagName, { ref: ref, ...rootAttributes, "aria-disabled": disabled ? true : undefined, className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: [touchHitbox && (isLink || isButton) && !disabled && _jsx("span", { className: s.touch }), children] }));
61
61
  });
62
62
  Actionable.displayName = "Actionable";
63
63
  export default Actionable;
package/dist/components/Actionable/Actionable.module.css CHANGED
@@ -1 +1 @@
1
- @layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
1
+ @layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
package/dist/components/Actionable/Actionable.types.d.ts CHANGED
@@ -6,6 +6,7 @@ export type Props = {
6
6
  href?: string;
7
7
  type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
8
8
  disabled?: boolean;
9
+ touchHitbox?: boolean;
9
10
  fullWidth?: boolean;
10
11
  insetFocus?: boolean;
11
12
  disableFocusRing?: boolean;
package/dist/components/Badge/Badge.js CHANGED
@@ -10,15 +10,15 @@ import { forwardRef } from "react";
10
10
  const Badge = forwardRef((props, ref) => {
11
11
  const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
12
12
  const isActionable = !!(onClick || href);
13
- const iconSize = size === "large" ? 4 : 3.5;
13
+ const iconSize = size === "small" ? 3 : 4;
14
14
  const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"]);
15
15
  const hnadleDismiss = (e) => {
16
16
  e.stopPropagation();
17
17
  onDismiss?.();
18
18
  };
19
- return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
19
+ return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, touchHitbox: true, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
20
20
  "aria-hidden": hidden ? "true" : undefined,
21
- }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
21
+ }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
22
22
  });
23
23
  Badge.Container = BadgeContainer;
24
24
  Badge.displayName = "Badge";
package/dist/components/Badge/Badge.module.css CHANGED
@@ -1 +1 @@
1
- .root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid transparent;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.dismiss,.root{border-radius:var(--rs-radius-small)}.dismiss{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:0px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:999px}.root:empty{height:var(--rs-badge-empty-size);min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
1
+ .root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid transparent;border-radius:var(--rs-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:1px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
package/dist/components/Badge/Badge.types.d.ts CHANGED
@@ -3,21 +3,21 @@ import type { ActionableProps, ActionableRef } from "../Actionable";
3
3
  import type { IconProps } from "../Icon";
4
4
  import type * as G from "../../types/global";
5
5
  type BaseProps = {
6
+ color?: "neutral" | "critical" | "warning" | "positive" | "primary";
6
7
  size?: "small" | "medium" | "large";
7
- icon?: IconProps["svg"];
8
8
  endIcon?: IconProps["svg"];
9
9
  rounded?: boolean;
10
10
  hidden?: boolean;
11
11
  className?: G.ClassName;
12
12
  } & Pick<ActionableProps, "href" | "onClick" | "attributes">;
13
13
  type WithChildren = BaseProps & {
14
- children: React.ReactNode;
15
- color?: "neutral" | "critical" | "warning" | "positive" | "primary";
14
+ children?: React.ReactNode;
15
+ icon?: IconProps["svg"];
16
16
  variant?: "faded" | "outline";
17
17
  };
18
18
  type WithEmpty = BaseProps & {
19
- color: "critical" | "warning" | "positive" | "primary";
20
19
  children?: never;
20
+ icon?: never;
21
21
  variant?: never;
22
22
  };
23
23
  type WithDismissible = {
package/dist/components/Badge/tests/Badge.stories.js CHANGED
@@ -119,6 +119,7 @@ export const icon = {
119
119
  <Badge icon={IconCheckmark} endIcon={IconChevronRight} size="small">
120
120
  Badge
121
121
  </Badge>
122
+ <Badge icon={IconCheckmark} size="small"/>
122
123
  </View>
123
124
  </Example.Item>
124
125
  <Example.Item title="size: medium">
@@ -126,6 +127,7 @@ export const icon = {
126
127
  <Badge icon={IconCheckmark} endIcon={IconChevronRight}>
127
128
  Badge
128
129
  </Badge>
130
+ <Badge icon={IconCheckmark}/>
129
131
  </View>
130
132
  </Example.Item>
131
133
  <Example.Item title="size: large">
@@ -133,6 +135,8 @@ export const icon = {
133
135
  <Badge size="large" icon={IconCheckmark} endIcon={IconChevronRight}>
134
136
  Badge
135
137
  </Badge>
138
+
139
+ <Badge icon={IconCheckmark} size="large"/>
136
140
  </View>
137
141
  </Example.Item>
138
142
  </Example>),
@@ -203,6 +207,13 @@ export const empty = {
203
207
  <Badge rounded size="large" color="critical"/>
204
208
  </View>
205
209
  </Example.Item>
210
+ <Example.Item title="empty, rounded, all sizes, color: neutral">
211
+ <View direction="row" gap={3}>
212
+ <Badge rounded size="small" color="neutral"/>
213
+ <Badge rounded/>
214
+ <Badge rounded size="large"/>
215
+ </View>
216
+ </Example.Item>
206
217
  </Example>),
207
218
  };
208
219
  export const container = {
package/dist/components/Button/Button.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);--rs-button-highlight-opacity:0;--rs-button-highlight-opacity-base:0;--rs-button-border-color:transparent;--rs-button-border-width:0px;align-items:center;border:var(--rs-button-border-width) solid var(--rs-button-border-color);border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;background-color:var(--rs-button-background-color);color:var(--rs-button-foreground-color);font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:before{background:var(--rs-button-highlight-color,var(--rs-button-foreground-color));content:"";inset:0;opacity:var(--rs-button-highlight-opacity-base);position:absolute;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading,.--highlighted,.--disabled,:active):before{opacity:var(--rs-button-highlight-opacity)}}.root.--highlighted:before,.root:active:not(.--loading,.--disabled):before{opacity:calc(var(--rs-button-highlight-opacity) + max(.04, var(--rs-button-highlight-opacity) / 2))}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon{margin-inline-end:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon,.text{position:relative;z-index:5}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded{border-radius:999px}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-solid.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-foreground-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-primary);--rs-button-foreground-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-critical);--rs-button-foreground-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-positive);--rs-button-foreground-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-highlight-opacity:0.06;--rs-button-background-color:var(--rs-color-white);--rs-button-foreground-color:var(--rs-color-black)}.root.--variant-faded.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral-faded);--rs-button-foreground-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-primary{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-primary-faded);--rs-button-foreground-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-critical{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-critical-faded);--rs-button-foreground-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-positive{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-positive-faded);--rs-button-foreground-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-media{--rs-button-highlight-opacity-base:0.24;--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-white);--rs-button-highlight-color:var(--rs-color-black)}.root.--variant-faded.--color-inherit{--rs-button-highlight-opacity-base:0.12;--rs-button-highlight-opacity:0.16;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline{--rs-button-border-width:1px;--rs-button-highlight-opacity:0.06}.root.--variant-outline.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-border-color:var(--rs-color-border-primary-faded);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-outline.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-border-color:var(--rs-color-border-critical-faded);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-outline.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-border-color:var(--rs-color-border-positive-faded);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-outline.--color-neutral{--rs-button-highlight-opacity:0.24;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-border-color:var(--rs-color-border-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-outline.--color-inherit{--rs-button-border-width:0px;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline.--color-inherit:after{border:1px solid;border-radius:var(--rs-button-radius);content:"";inset:0;opacity:.28;pointer-events:none;position:absolute}.root.--variant-ghost{--rs-button-highlight-opacity:0.12}.root.--variant-ghost.--color-neutral{--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-ghost.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-ghost.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-ghost.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-ghost.--color-inherit{--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--elevated:not(:focus),[data-rs-keyboard] .root.--elevated:not(:focus){box-shadow:var(--rs-shadow-raised)}.root.--elevated.--variant-outline.--color-critical,.root.--elevated.--variant-outline.--color-neutral,.root.--elevated.--variant-outline.--color-positive,.root.--elevated.--variant-outline.--color-primary{background:var(--rs-color-background-elevation-raised)}.root.--disabled.--color-critical,.root.--disabled.--color-critical.--highlighted,.root.--disabled.--color-critical:active,.root.--disabled.--color-critical:hover,.root.--disabled.--color-inherit,.root.--disabled.--color-inherit.--highlighted,.root.--disabled.--color-inherit:active,.root.--disabled.--color-inherit:hover,.root.--disabled.--color-neutral,.root.--disabled.--color-neutral.--highlighted,.root.--disabled.--color-neutral:active,.root.--disabled.--color-neutral:hover,.root.--disabled.--color-positive,.root.--disabled.--color-positive.--highlighted,.root.--disabled.--color-positive:active,.root.--disabled.--color-positive:hover,.root.--disabled.--color-primary,.root.--disabled.--color-primary.--highlighted,.root.--disabled.--color-primary:active,.root.--disabled.--color-primary:hover{background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled.--color-critical.--highlighted:before,.root.--disabled.--color-critical:active:before,.root.--disabled.--color-critical:before,.root.--disabled.--color-critical:hover:before,.root.--disabled.--color-inherit.--highlighted:before,.root.--disabled.--color-inherit:active:before,.root.--disabled.--color-inherit:before,.root.--disabled.--color-inherit:hover:before,.root.--disabled.--color-neutral.--highlighted:before,.root.--disabled.--color-neutral:active:before,.root.--disabled.--color-neutral:before,.root.--disabled.--color-neutral:hover:before,.root.--disabled.--color-positive.--highlighted:before,.root.--disabled.--color-positive:active:before,.root.--disabled.--color-positive:before,.root.--disabled.--color-positive:hover:before,.root.--disabled.--color-primary.--highlighted:before,.root.--disabled.--color-primary:active:before,.root.--disabled.--color-primary:before,.root.--disabled.--color-primary:hover:before{opacity:0!important}.root.--disabled.--color-critical.--highlighted.--variant-faded,.root.--disabled.--color-critical.--variant-faded,.root.--disabled.--color-critical:active.--variant-faded,.root.--disabled.--color-critical:hover.--variant-faded,.root.--disabled.--color-inherit.--highlighted.--variant-faded,.root.--disabled.--color-inherit.--variant-faded,.root.--disabled.--color-inherit:active.--variant-faded,.root.--disabled.--color-inherit:hover.--variant-faded,.root.--disabled.--color-neutral.--highlighted.--variant-faded,.root.--disabled.--color-neutral.--variant-faded,.root.--disabled.--color-neutral:active.--variant-faded,.root.--disabled.--color-neutral:hover.--variant-faded,.root.--disabled.--color-positive.--highlighted.--variant-faded,.root.--disabled.--color-positive.--variant-faded,.root.--disabled.--color-positive:active.--variant-faded,.root.--disabled.--color-positive:hover.--variant-faded,.root.--disabled.--color-primary.--highlighted.--variant-faded,.root.--disabled.--color-primary.--variant-faded,.root.--disabled.--color-primary:active.--variant-faded,.root.--disabled.--color-primary:hover.--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--color-critical.--highlighted.--variant-outline,.root.--disabled.--color-critical.--variant-outline,.root.--disabled.--color-critical:active.--variant-outline,.root.--disabled.--color-critical:hover.--variant-outline,.root.--disabled.--color-inherit.--highlighted.--variant-outline,.root.--disabled.--color-inherit.--variant-outline,.root.--disabled.--color-inherit:active.--variant-outline,.root.--disabled.--color-inherit:hover.--variant-outline,.root.--disabled.--color-neutral.--highlighted.--variant-outline,.root.--disabled.--color-neutral.--variant-outline,.root.--disabled.--color-neutral:active.--variant-outline,.root.--disabled.--color-neutral:hover.--variant-outline,.root.--disabled.--color-positive.--highlighted.--variant-outline,.root.--disabled.--color-positive.--variant-outline,.root.--disabled.--color-positive:active.--variant-outline,.root.--disabled.--color-positive:hover.--variant-outline,.root.--disabled.--color-primary.--highlighted.--variant-outline,.root.--disabled.--color-primary.--variant-outline,.root.--disabled.--color-primary:active.--variant-outline,.root.--disabled.--color-primary:hover.--variant-outline{background-color:transparent!important}.root.--disabled.--color-critical.--highlighted.--variant-ghost,.root.--disabled.--color-critical.--variant-ghost,.root.--disabled.--color-critical:active.--variant-ghost,.root.--disabled.--color-critical:hover.--variant-ghost,.root.--disabled.--color-inherit.--highlighted.--variant-ghost,.root.--disabled.--color-inherit.--variant-ghost,.root.--disabled.--color-inherit:active.--variant-ghost,.root.--disabled.--color-inherit:hover.--variant-ghost,.root.--disabled.--color-neutral.--highlighted.--variant-ghost,.root.--disabled.--color-neutral.--variant-ghost,.root.--disabled.--color-neutral:active.--variant-ghost,.root.--disabled.--color-neutral:hover.--variant-ghost,.root.--disabled.--color-positive.--highlighted.--variant-ghost,.root.--disabled.--color-positive.--variant-ghost,.root.--disabled.--color-positive:active.--variant-ghost,.root.--disabled.--color-positive:hover.--variant-ghost,.root.--disabled.--color-primary.--highlighted.--variant-ghost,.root.--disabled.--color-primary.--variant-ghost,.root.--disabled.--color-primary:active.--variant-ghost,.root.--disabled.--color-primary:hover.--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled.--color-media,.root.--disabled.--color-media.--highlighted,.root.--disabled.--color-media:active,.root.--disabled.--color-media:hover{opacity:.4!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
1
+ .root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);--rs-button-highlight-opacity:0;--rs-button-highlight-opacity-base:0;--rs-button-border-color:transparent;--rs-button-border-width:0px;align-items:center;border:var(--rs-button-border-width) solid var(--rs-button-border-color);border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;background-color:var(--rs-button-background-color);color:var(--rs-button-foreground-color);font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:before{background:var(--rs-button-highlight-color,var(--rs-button-foreground-color));content:"";inset:0;opacity:var(--rs-button-highlight-opacity-base);position:absolute;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading,.--highlighted,.--disabled,:active):before{opacity:var(--rs-button-highlight-opacity)}}.root.--highlighted:before,.root:active:not(.--loading,.--disabled):before{opacity:calc(var(--rs-button-highlight-opacity) + max(.04, var(--rs-button-highlight-opacity) / 2))}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon{margin-inline-end:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon,.text{position:relative;z-index:5}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded{border-radius:var(--rs-radius-circular)}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-solid.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-foreground-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-primary);--rs-button-foreground-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-critical);--rs-button-foreground-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-positive);--rs-button-foreground-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-highlight-opacity:0.06;--rs-button-background-color:var(--rs-color-white);--rs-button-foreground-color:var(--rs-color-black)}.root.--variant-faded.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral-faded);--rs-button-foreground-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-primary{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-primary-faded);--rs-button-foreground-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-critical{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-critical-faded);--rs-button-foreground-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-positive{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-positive-faded);--rs-button-foreground-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-media{--rs-button-highlight-opacity-base:0.24;--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-white);--rs-button-highlight-color:var(--rs-color-black)}.root.--variant-faded.--color-inherit{--rs-button-highlight-opacity-base:0.12;--rs-button-highlight-opacity:0.16;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline{--rs-button-border-width:1px;--rs-button-highlight-opacity:0.06}.root.--variant-outline.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-border-color:var(--rs-color-border-primary-faded);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-outline.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-border-color:var(--rs-color-border-critical-faded);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-outline.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-border-color:var(--rs-color-border-positive-faded);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-outline.--color-neutral{--rs-button-highlight-opacity:0.24;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-border-color:var(--rs-color-border-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-outline.--color-inherit{--rs-button-border-width:0px;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline.--color-inherit:after{border:1px solid;border-radius:var(--rs-button-radius);content:"";inset:0;opacity:.28;pointer-events:none;position:absolute}.root.--variant-ghost{--rs-button-highlight-opacity:0.12}.root.--variant-ghost.--color-neutral{--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-ghost.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-ghost.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-ghost.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-ghost.--color-inherit{--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--elevated:not(:focus),[data-rs-keyboard] .root.--elevated:not(:focus){box-shadow:var(--rs-shadow-raised)}.root.--elevated.--variant-outline.--color-critical,.root.--elevated.--variant-outline.--color-neutral,.root.--elevated.--variant-outline.--color-positive,.root.--elevated.--variant-outline.--color-primary{background:var(--rs-color-background-elevation-raised)}.root.--disabled.--color-critical,.root.--disabled.--color-critical.--highlighted,.root.--disabled.--color-critical:active,.root.--disabled.--color-critical:hover,.root.--disabled.--color-inherit,.root.--disabled.--color-inherit.--highlighted,.root.--disabled.--color-inherit:active,.root.--disabled.--color-inherit:hover,.root.--disabled.--color-neutral,.root.--disabled.--color-neutral.--highlighted,.root.--disabled.--color-neutral:active,.root.--disabled.--color-neutral:hover,.root.--disabled.--color-positive,.root.--disabled.--color-positive.--highlighted,.root.--disabled.--color-positive:active,.root.--disabled.--color-positive:hover,.root.--disabled.--color-primary,.root.--disabled.--color-primary.--highlighted,.root.--disabled.--color-primary:active,.root.--disabled.--color-primary:hover{background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled.--color-critical.--highlighted:before,.root.--disabled.--color-critical:active:before,.root.--disabled.--color-critical:before,.root.--disabled.--color-critical:hover:before,.root.--disabled.--color-inherit.--highlighted:before,.root.--disabled.--color-inherit:active:before,.root.--disabled.--color-inherit:before,.root.--disabled.--color-inherit:hover:before,.root.--disabled.--color-neutral.--highlighted:before,.root.--disabled.--color-neutral:active:before,.root.--disabled.--color-neutral:before,.root.--disabled.--color-neutral:hover:before,.root.--disabled.--color-positive.--highlighted:before,.root.--disabled.--color-positive:active:before,.root.--disabled.--color-positive:before,.root.--disabled.--color-positive:hover:before,.root.--disabled.--color-primary.--highlighted:before,.root.--disabled.--color-primary:active:before,.root.--disabled.--color-primary:before,.root.--disabled.--color-primary:hover:before{opacity:0!important}.root.--disabled.--color-critical.--highlighted.--variant-faded,.root.--disabled.--color-critical.--variant-faded,.root.--disabled.--color-critical:active.--variant-faded,.root.--disabled.--color-critical:hover.--variant-faded,.root.--disabled.--color-inherit.--highlighted.--variant-faded,.root.--disabled.--color-inherit.--variant-faded,.root.--disabled.--color-inherit:active.--variant-faded,.root.--disabled.--color-inherit:hover.--variant-faded,.root.--disabled.--color-neutral.--highlighted.--variant-faded,.root.--disabled.--color-neutral.--variant-faded,.root.--disabled.--color-neutral:active.--variant-faded,.root.--disabled.--color-neutral:hover.--variant-faded,.root.--disabled.--color-positive.--highlighted.--variant-faded,.root.--disabled.--color-positive.--variant-faded,.root.--disabled.--color-positive:active.--variant-faded,.root.--disabled.--color-positive:hover.--variant-faded,.root.--disabled.--color-primary.--highlighted.--variant-faded,.root.--disabled.--color-primary.--variant-faded,.root.--disabled.--color-primary:active.--variant-faded,.root.--disabled.--color-primary:hover.--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--color-critical.--highlighted.--variant-outline,.root.--disabled.--color-critical.--variant-outline,.root.--disabled.--color-critical:active.--variant-outline,.root.--disabled.--color-critical:hover.--variant-outline,.root.--disabled.--color-inherit.--highlighted.--variant-outline,.root.--disabled.--color-inherit.--variant-outline,.root.--disabled.--color-inherit:active.--variant-outline,.root.--disabled.--color-inherit:hover.--variant-outline,.root.--disabled.--color-neutral.--highlighted.--variant-outline,.root.--disabled.--color-neutral.--variant-outline,.root.--disabled.--color-neutral:active.--variant-outline,.root.--disabled.--color-neutral:hover.--variant-outline,.root.--disabled.--color-positive.--highlighted.--variant-outline,.root.--disabled.--color-positive.--variant-outline,.root.--disabled.--color-positive:active.--variant-outline,.root.--disabled.--color-positive:hover.--variant-outline,.root.--disabled.--color-primary.--highlighted.--variant-outline,.root.--disabled.--color-primary.--variant-outline,.root.--disabled.--color-primary:active.--variant-outline,.root.--disabled.--color-primary:hover.--variant-outline{background-color:transparent!important}.root.--disabled.--color-critical.--highlighted.--variant-ghost,.root.--disabled.--color-critical.--variant-ghost,.root.--disabled.--color-critical:active.--variant-ghost,.root.--disabled.--color-critical:hover.--variant-ghost,.root.--disabled.--color-inherit.--highlighted.--variant-ghost,.root.--disabled.--color-inherit.--variant-ghost,.root.--disabled.--color-inherit:active.--variant-ghost,.root.--disabled.--color-inherit:hover.--variant-ghost,.root.--disabled.--color-neutral.--highlighted.--variant-ghost,.root.--disabled.--color-neutral.--variant-ghost,.root.--disabled.--color-neutral:active.--variant-ghost,.root.--disabled.--color-neutral:hover.--variant-ghost,.root.--disabled.--color-positive.--highlighted.--variant-ghost,.root.--disabled.--color-positive.--variant-ghost,.root.--disabled.--color-positive:active.--variant-ghost,.root.--disabled.--color-positive:hover.--variant-ghost,.root.--disabled.--color-primary.--highlighted.--variant-ghost,.root.--disabled.--color-primary.--variant-ghost,.root.--disabled.--color-primary:active.--variant-ghost,.root.--disabled.--color-primary:hover.--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled.--color-media,.root.--disabled.--color-media.--highlighted,.root.--disabled.--color-media:active,.root.--disabled.--color-media:hover{opacity:.4!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
package/dist/components/Calendar/Calendar.types.d.ts CHANGED
@@ -88,6 +88,7 @@ export type DateProps = {
88
88
  startValue: Date | null;
89
89
  endValue: Date | null;
90
90
  renderAriaLabel?: MonthProps["renderDateAriaLabel"];
91
+ onDateFocus: (date: Date) => void;
91
92
  } & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max" | "selectedDates">;
92
93
  export type ControlsProps = {
93
94
  selectionMode: SelectionMode;
package/dist/components/Calendar/Calendar.utils.d.ts CHANGED
@@ -41,3 +41,14 @@ export declare const applyNavigationBounds: (args: {
41
41
  isFirstMonth: boolean | undefined;
42
42
  isLastMonth: boolean | undefined;
43
43
  };
44
+ /**
45
+ * Decide if date has to be focusable with Tab (only one date should be)
46
+ * 1. If there is a selected value - it's focusable
47
+ * 2. Otherwise, today's date is focusable
48
+ * 3. Otherwise, first non-disabled date is focusable
49
+ */
50
+ export declare const isDateFocusable: (args: {
51
+ date: Date;
52
+ lastFocusedDate?: Date;
53
+ startValue: Date | null;
54
+ }) => boolean;
package/dist/components/Calendar/Calendar.utils.js CHANGED
@@ -108,3 +108,28 @@ export const applyNavigationBounds = (args) => {
108
108
  isLastMonth: max && max < nextMonthFirstDate,
109
109
  };
110
110
  };
111
+ /**
112
+ * Decide if date has to be focusable with Tab (only one date should be)
113
+ * 1. If there is a selected value - it's focusable
114
+ * 2. Otherwise, today's date is focusable
115
+ * 3. Otherwise, first non-disabled date is focusable
116
+ */
117
+ export const isDateFocusable = (args) => {
118
+ const { date, startValue, lastFocusedDate } = args;
119
+ const today = new Date();
120
+ const renderedMonth = date.getMonth();
121
+ const valueMonth = startValue?.getMonth();
122
+ const todayMonth = today.getMonth();
123
+ const lastFocusedMonth = lastFocusedDate?.getMonth();
124
+ const isoDate = getLocalISODate({ date });
125
+ const isoToday = getLocalISODate({ date: today });
126
+ const isoValueDate = startValue && getLocalISODate({ date: startValue });
127
+ const isoLastFocusedDate = lastFocusedDate && getLocalISODate({ date: lastFocusedDate });
128
+ if (lastFocusedDate && renderedMonth === lastFocusedMonth)
129
+ return isoDate === isoLastFocusedDate;
130
+ if (startValue && renderedMonth === valueMonth)
131
+ return isoDate === isoValueDate;
132
+ if (renderedMonth === todayMonth)
133
+ return isoDate === isoToday;
134
+ return true;
135
+ };
package/dist/components/Calendar/CalendarDate.js CHANGED
@@ -5,7 +5,7 @@ import { classNames } from "../../utilities/props.js";
5
5
  import { getLocalISODate } from "./Calendar.utils.js";
6
6
  import s from "./Calendar.module.css";
7
7
  const CalendarDate = (props) => {
8
- const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, renderAriaLabel, selectedDates, } = props;
8
+ const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, renderAriaLabel, selectedDates, } = props;
9
9
  if (!date)
10
10
  return _jsx("td", { className: s.cell, "aria-hidden": "true" });
11
11
  const isoStartValue = startValue && getLocalISODate({ date: startValue });
@@ -57,6 +57,10 @@ const CalendarDate = (props) => {
57
57
  const handleMouseLeave = () => {
58
58
  onDateHoverEnd(date);
59
59
  };
60
+ const handleFocus = () => {
61
+ handleMouseEnter();
62
+ onDateFocus(date);
63
+ };
60
64
  return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsx(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
61
65
  role: "checkbox",
62
66
  tabIndex: focusable ? 0 : -1,
@@ -68,7 +72,7 @@ const CalendarDate = (props) => {
68
72
  "data-rs-date": getLocalISODate({ date }),
69
73
  onMouseEnter: handleMouseEnter,
70
74
  onMouseLeave: handleMouseLeave,
71
- onFocus: handleMouseEnter,
75
+ onFocus: handleFocus,
72
76
  onBlur: handleMouseLeave,
73
77
  }, children: date.getDate() }) }));
74
78
  };
package/dist/components/Calendar/CalendarMonth.js CHANGED
@@ -1,11 +1,13 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { getMonthWeeks, getWeekdayNames, getLocalISODate } from "./Calendar.utils.js";
3
+ import { useState } from "react";
4
+ import { getMonthWeeks, getWeekdayNames, getLocalISODate, isDateFocusable } from "./Calendar.utils.js";
4
5
  import CalendarDate from "./CalendarDate.js";
5
6
  import s from "./Calendar.module.css";
6
7
  const CalendarMonth = (props) => {
7
8
  const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
8
9
  let foundFocusableDate = false;
10
+ const [lastFocusedDate, setLastFocusedDate] = useState();
9
11
  const month = date.getMonth();
10
12
  const weeks = getMonthWeeks({ date, firstWeekDay });
11
13
  const weekdayNames = getWeekdayNames({ firstWeekDay, renderWeekDay });
@@ -13,33 +15,17 @@ const CalendarMonth = (props) => {
13
15
  const key = [month, week[0]?.getDate()].filter(Boolean).join("-");
14
16
  return (_jsx("tr", { className: s.row, children: week.map((date, index) => {
15
17
  const disabled = !!date && ((min && date < min) || (max && date > max));
16
- const month = date?.getMonth();
17
- const today = new Date();
18
- const isoToday = getLocalISODate({ date: today });
19
18
  const startValue = value && "start" in value ? value.start : value;
20
19
  const endValue = value && "end" in value ? value.end : value;
21
20
  const isoDate = date && getLocalISODate({ date });
22
- /**
23
- * Decide if date has to be focusable with Tab (only one date should be)
24
- * 1. If there is a selected value - it's focusable
25
- * 2. Otherwise, today's date is focusable
26
- * 3. Otherwise, first non-disabled date is focusable
27
- */
28
- let focusable = false;
29
- if (!foundFocusableDate && date) {
30
- if (!!startValue && startValue.getMonth() === date?.getMonth()) {
31
- focusable = getLocalISODate({ date: startValue }) === getLocalISODate({ date });
32
- }
33
- else if (isoDate && month === today.getMonth()) {
34
- focusable = isoDate >= isoToday && !disabled;
35
- }
36
- else {
37
- focusable = !disabled;
38
- }
39
- }
21
+ const focusable = disabled
22
+ ? false
23
+ : !foundFocusableDate &&
24
+ !!date &&
25
+ isDateFocusable({ date, lastFocusedDate, startValue });
40
26
  if (focusable)
41
27
  foundFocusableDate = true;
42
- return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates }, index));
28
+ return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, onDateFocus: setLastFocusedDate, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates }, index));
43
29
  }) }, key));
44
30
  }) })] }));
45
31
  };
package/dist/components/Calendar/tests/Calendar.stories.js CHANGED
@@ -222,12 +222,19 @@ export const keyboardNavigation = {
222
222
  </Example.Item>
223
223
  </Example>),
224
224
  play: async ({ canvas }) => {
225
- const dateEls = canvas.getAllByRole("checkbox");
226
- dateEls[0].focus();
225
+ const buttons = canvas.getAllByRole("button");
226
+ buttons[2].focus();
227
+ await userEvent.keyboard("{Tab/}");
228
+ expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
227
229
  await userEvent.keyboard("{ArrowRight/}");
228
230
  waitFor(() => {
229
231
  expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
230
232
  });
233
+ await userEvent.keyboard("{Shift>}{Tab/}{/Shift}");
234
+ await userEvent.keyboard("{Tab/}");
235
+ waitFor(() => {
236
+ expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
237
+ });
231
238
  await userEvent.keyboard("{ArrowLeft/}");
232
239
  waitFor(() => {
233
240
  expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
package/dist/components/Carousel/Carousel.js CHANGED
@@ -16,6 +16,8 @@ const Carousel = (props) => {
16
16
  const [scrollPosition, setScrollPosition] = React.useState(0);
17
17
  const [isRTL] = useRTL();
18
18
  const scrollElRef = React.useRef(null);
19
+ const prevControlElRef = React.useRef(null);
20
+ const nextControlElRef = React.useRef(null);
19
21
  const bleedClassNames = {};
20
22
  if (typeof bleed === "object") {
21
23
  Object.entries(bleed).forEach(([key, value]) => {
@@ -112,7 +114,7 @@ const Carousel = (props) => {
112
114
  ...responsiveVariables("--rs-carousel-items", visibleItems),
113
115
  ...responsiveVariables("--rs-carousel-bleed", bleed),
114
116
  ...attributes?.style,
115
- }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: "back", scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: "forward", scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
117
+ }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: "back", ref: prevControlElRef, oppositeControlElRef: nextControlElRef, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: "forward", ref: nextControlElRef, oppositeControlElRef: prevControlElRef, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
116
118
  };
117
119
  Carousel.displayName = "Carousel";
118
120
  export default Carousel;
package/dist/components/Carousel/Carousel.types.d.ts CHANGED
@@ -7,6 +7,7 @@ export type Instance = {
7
7
  } | undefined;
8
8
  export type ControlProps = {
9
9
  type: "back" | "forward";
10
+ oppositeControlElRef: React.RefObject<HTMLButtonElement | null>;
10
11
  scrollElRef: React.RefObject<HTMLElement | null>;
11
12
  scrollPosition: number;
12
13
  onClick: () => void;
package/dist/components/Carousel/CarouselControl.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import React from "react";
2
1
  import * as T from "./Carousel.types";
3
- declare const CarouselControl: React.FC<T.ControlProps>;
2
+ declare const CarouselControl: import("react").ForwardRefExoticComponent<T.ControlProps & import("react").RefAttributes<HTMLButtonElement>>;
4
3
  export default CarouselControl;
package/dist/components/Carousel/CarouselControl.js CHANGED
@@ -1,16 +1,16 @@
1
1
  "use client";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
- import React from "react";
3
+ import { forwardRef, useState } from "react";
4
4
  import { classNames } from "../../utilities/props.js";
5
5
  import Button from "../Button/index.js";
6
6
  import IconChevronRight from "../../icons/ChevronRight.js";
7
7
  import IconChevronLeft from "../../icons/ChevronLeft.js";
8
8
  import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
9
9
  import s from "./Carousel.module.css";
10
- const CarouselControl = (props) => {
11
- const { type, scrollElRef, scrollPosition, onClick, isRTL, mounted } = props;
12
- const [visible, setVisible] = React.useState(false);
13
- const [rendered, setRendered] = React.useState(false);
10
+ const CarouselControl = forwardRef((props, ref) => {
11
+ const { type, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted } = props;
12
+ const [visible, setVisible] = useState(false);
13
+ const [rendered, setRendered] = useState(false);
14
14
  const isNext = type === "forward";
15
15
  const isDisplayedAsNext = type === (isRTL ? "back" : "forward");
16
16
  const controlClassNames = classNames(s.control, isDisplayedAsNext ? s["--control-next"] : s["--control-prev"], visible && s["--control-visible"], rendered && s["--control-rendered"]);
@@ -26,6 +26,7 @@ const CarouselControl = (props) => {
26
26
  if (hideControl) {
27
27
  setVisible(false);
28
28
  timer = setTimeout(() => setRendered(false), 1500);
29
+ oppositeControlElRef.current?.focus();
29
30
  }
30
31
  else {
31
32
  setRendered(true);
@@ -36,7 +37,7 @@ const CarouselControl = (props) => {
36
37
  clearTimeout(timer);
37
38
  };
38
39
  }, [scrollPosition, scrollElRef, mounted, isNext]);
39
- return (_jsx("div", { className: controlClassNames, children: _jsx(Button, { onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "outline", elevated: true, attributes: { "aria-disabled": !visible, "aria-hidden": true } }) }));
40
- };
40
+ return (_jsx("div", { className: controlClassNames, children: _jsx(Button, { size: "small", onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "outline", elevated: true, attributes: { "aria-disabled": !visible, "aria-hidden": true }, ref: ref }) }));
41
+ });
41
42
  CarouselControl.displayName = "CarouselControl";
42
43
  export default CarouselControl;
package/dist/components/Checkbox/Checkbox.module.css CHANGED
@@ -1 +1 @@
1
- .root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-checkbox-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}@media (hover:hover) and (pointer:fine){.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-checkbox-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-checkbox-line-height)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-checkbox-line-height) * .5)}.--size-small{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator,.input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:checked+.decorator:before,.root.--disabled .input:indeterminate+.decorator:before{background-color:var(--rs-color-foreground-disabled)}@media (--rs-viewport-m ){.--size-small--m{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--m{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--l{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}
1
+ .root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-checkbox-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}@media (hover:hover) and (pointer:fine){.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-checkbox-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-checkbox-line-height)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:var(--rs-radius-circular);content:"";height:1.5px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-checkbox-line-height) * .5)}.--size-small{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator,.input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:checked+.decorator:before,.root.--disabled .input:indeterminate+.decorator:before{background-color:var(--rs-color-foreground-disabled)}@media (--rs-viewport-m ){.--size-small--m{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--m{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--l{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}
package/dist/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -31,7 +31,14 @@ const DropdownMenuContent = (props) => {
31
31
  ref: attributes?.ref,
32
32
  });
33
33
  const contentClassName = classNames(s.menu, className);
34
- return (_jsx(Popover.Content, { className: contentClassName, attributes: { ...attributes, ref }, children: children }));
34
+ const handleClick = (e) => {
35
+ /**
36
+ * Stop event propagation to make sure outside click doesn't get triggered
37
+ * after the content is closed
38
+ */
39
+ e.stopPropagation();
40
+ };
41
+ return (_jsx(Popover.Content, { className: contentClassName, attributes: { ...attributes, ref, onClick: handleClick }, children: children }));
35
42
  };
36
43
  const DropdownMenuSection = (props) => {
37
44
  const { children } = props;
@@ -42,11 +49,6 @@ const DropdownMenuItem = (props) => {
42
49
  const { handleClose } = useFlyoutContext();
43
50
  const subTriggerContext = React.useContext(DropdownMenuSubTriggerContext);
44
51
  const handleClick = (e) => {
45
- /**
46
- * Stop event propagation to make sure outside click doesn't get triggered
47
- * after the content is closed
48
- */
49
- e.stopPropagation();
50
52
  /**
51
53
  * Don't close the menu when clicking on a trigger of a submenu
52
54
  */