reshaped 3.8.0-canary.12 → 3.8.0-canary.13

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 (24) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.d.ts +1 -0
  4. package/dist/bundle.js +8 -8
  5. package/dist/components/Button/Button.module.css +1 -1
  6. package/dist/components/Button/tests/Button.stories.js +1 -1
  7. package/dist/components/Tabs/TabsList.js +3 -20
  8. package/dist/components/ToggleButton/ToggleButton.types.d.ts +5 -1
  9. package/dist/components/ToggleButton/ToggleButtonControlled.js +9 -2
  10. package/dist/components/ToggleButton/tests/ToggleButton.stories.d.ts +4 -0
  11. package/dist/components/ToggleButton/tests/ToggleButton.stories.js +10 -0
  12. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.d.ts +10 -0
  13. package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +6 -42
  14. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +1 -0
  15. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +17 -0
  16. package/dist/hooks/tests/useKeyboardArrowNavigation.stories.d.ts +15 -0
  17. package/dist/hooks/tests/useKeyboardArrowNavigation.stories.js +128 -0
  18. package/dist/hooks/useKeyboardArrowNavigation.d.ts +9 -0
  19. package/dist/hooks/useKeyboardArrowNavigation.js +62 -0
  20. package/dist/index.d.ts +1 -0
  21. package/dist/index.js +1 -0
  22. package/dist/utilities/a11y/focus.d.ts +21 -4
  23. package/dist/utilities/a11y/focus.js +4 -3
  24. package/package.json +1 -1
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: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}}
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,background-color}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading,.--highlighted,.--disabled):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-inline:1px solid var(--rs-button-group-separator-color);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:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root:not(:last-child){border-inline-end-width:0}.group .root.--highlighted{border-inline-end-width:1px}.group .root.--highlighted+.root{border-inline-start-width:0}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-faded.--color-neutral,.group .root.--variant-outline.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-faded.--color-positive,.group .root.--variant-outline.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical,.group .root.--variant-outline.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary,.group .root.--variant-outline.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-media{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.12)}.group .root.--variant-faded.--color-media{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.12)}.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/Button/tests/Button.stories.js CHANGED
@@ -723,7 +723,7 @@ export const group = {
723
723
  </Example.Item>
724
724
  <Example.Item title="variant: outline">
725
725
  <View gap={2}>
726
- {["neutral", "primary", "critical", "positive", "media"].map((color) => (<Button.Group key={color}>
726
+ {["neutral", "primary", "critical", "positive"].map((color) => (<Button.Group key={color}>
727
727
  <Button color={color} variant="outline">
728
728
  One
729
729
  </Button>
package/dist/components/Tabs/TabsList.js CHANGED
@@ -3,9 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import { classNames } from "../../utilities/props.js";
5
5
  import useRTL from "../../hooks/useRTL.js";
6
- import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y/index.js";
7
6
  import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
8
- import useHotkeys from "../../hooks/useHotkeys.js";
7
+ import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
9
8
  import useFadeSide from "../../hooks/_private/useFadeSide.js";
10
9
  import Actionable from "../Actionable/index.js";
11
10
  import Icon from "../Icon/index.js";
@@ -61,23 +60,7 @@ const TabsList = (props) => {
61
60
  left: itemEl.offsetLeft,
62
61
  };
63
62
  }, [elScrollableRef]);
64
- const { ref: hotkeysRef } = useHotkeys({
65
- "ArrowLeft, ArrowUp": () => {
66
- focusPreviousElement(elScrollableRef.current);
67
- },
68
- "ArrowRight, ArrowDown": () => {
69
- focusNextElement(elScrollableRef.current);
70
- },
71
- Home: () => {
72
- focusFirstElement(elScrollableRef.current);
73
- },
74
- End: () => {
75
- focusLastElement(elScrollableRef.current);
76
- },
77
- }, [], {
78
- preventDefault: true,
79
- disabled: !!name,
80
- });
63
+ useKeyboardArrowNavigation({ ref: elScrollableRef, disabled: !!name });
81
64
  useIsomorphicLayoutEffect(() => {
82
65
  if (value)
83
66
  return;
@@ -106,7 +89,7 @@ const TabsList = (props) => {
106
89
  return;
107
90
  setSelection({ ...selectionStyle, status: "animated" });
108
91
  }, [selection]);
109
- return (_jsxs("div", { ...attributes, className: rootClassNames, children: [_jsx("div", { className: s.inner, ref: elScrollableRef, children: _jsxs("div", { className: s.list, role: "tablist", ref: hotkeysRef, children: [React.Children.map(children, (child, index) => {
92
+ return (_jsxs("div", { ...attributes, className: rootClassNames, children: [_jsx("div", { className: s.inner, ref: elScrollableRef, children: _jsxs("div", { className: s.list, role: "tablist", children: [React.Children.map(children, (child, index) => {
110
93
  if (!React.isValidElement(child))
111
94
  return null;
112
95
  const props = child.props;
package/dist/components/ToggleButton/ToggleButton.types.d.ts CHANGED
@@ -1,9 +1,13 @@
1
1
  import type { ButtonProps } from "../Button";
2
- type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
2
+ type BaseProps = Omit<ButtonProps, "variant" | "highlighted"> & {
3
3
  /** Component render variant
4
4
  * @default "outline"
5
5
  */
6
6
  variant?: ButtonProps["variant"];
7
+ /** Component color scheme when selected
8
+ * @default "neutral"
9
+ */
10
+ selectedColor?: ButtonProps["color"];
7
11
  /** Value of the toggle button, enables controlled mode for the ToggleButtonGroup */
8
12
  value?: string;
9
13
  /** Callback when the toggle button value changes */
package/dist/components/ToggleButton/ToggleButtonControlled.js CHANGED
@@ -3,9 +3,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import Button from "../Button/index.js";
4
4
  import { useToggleButtonGroup } from "../ToggleButtonGroup/index.js";
5
5
  const ToggleButtonControlled = (props) => {
6
- const { variant = "outline", value, onChange, onClick, ...buttonProps } = props;
6
+ const { variant = "outline", selectedColor, value, onChange, onClick, color: buttonColor, ...buttonProps } = props;
7
7
  const toggleButtonGroup = useToggleButtonGroup();
8
8
  const checked = (value ? toggleButtonGroup?.value?.includes(value) : undefined) ?? props.checked;
9
+ const color = (checked && (selectedColor || toggleButtonGroup?.selectedColor)) ||
10
+ buttonColor ||
11
+ toggleButtonGroup?.color;
9
12
  const handleClick = (event) => {
10
13
  const changeArgs = { checked: !checked, value: value ?? "", event };
11
14
  onClick?.(event);
@@ -16,7 +19,11 @@ const ToggleButtonControlled = (props) => {
16
19
  onChange?.(changeArgs);
17
20
  }
18
21
  };
19
- return (_jsx(Button, { ...buttonProps, variant: variant, onClick: handleClick, highlighted: checked, attributes: { ...buttonProps.attributes, "aria-pressed": checked } }));
22
+ return (_jsx(Button, { ...buttonProps, color: color, variant: variant, onClick: handleClick, highlighted: checked, attributes: {
23
+ ...buttonProps.attributes,
24
+ "aria-pressed": checked,
25
+ tabIndex: toggleButtonGroup?.value?.length ? (checked ? 0 : -1) : undefined,
26
+ } }));
20
27
  };
21
28
  ToggleButtonControlled.displayName = "ToggleButtonControlled";
22
29
  export default ToggleButtonControlled;
package/dist/components/ToggleButton/tests/ToggleButton.stories.d.ts CHANGED
@@ -14,6 +14,10 @@ export declare const variant: {
14
14
  name: string;
15
15
  render: () => import("react").JSX.Element;
16
16
  };
17
+ export declare const selectedColor: {
18
+ name: string;
19
+ render: () => import("react").JSX.Element;
20
+ };
17
21
  export declare const onChange: StoryObj<{
18
22
  handleUncontrolledChange: Mock;
19
23
  handleControlledChange: Mock;
package/dist/components/ToggleButton/tests/ToggleButton.stories.js CHANGED
@@ -21,6 +21,16 @@ export const variant = {
21
21
  </Example.Item>
22
22
  </Example>),
23
23
  };
24
+ export const selectedColor = {
25
+ name: "selectedColor",
26
+ render: () => (<Example>
27
+ <Example.Item title="selectedColor: primary">
28
+ <ToggleButton selectedColor="primary" defaultChecked>
29
+ Button
30
+ </ToggleButton>
31
+ </Example.Item>
32
+ </Example>),
33
+ };
24
34
  export const onChange = {
25
35
  name: "checked, defaultChecked, onChange",
26
36
  args: {
package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.d.ts CHANGED
@@ -6,6 +6,14 @@ type BaseProps = {
6
6
  * @default "single"
7
7
  */
8
8
  selectionMode?: "single" | "multiple";
9
+ /** Component color scheme applied to each button
10
+ * @default "neutral"
11
+ */
12
+ color?: ToggleButtonProps["color"];
13
+ /** Component color scheme for the selected button
14
+ * @default "neutral"
15
+ */
16
+ selectedColor?: ToggleButtonProps["selectedColor"];
9
17
  /** Callback when the toggle button group value changes */
10
18
  onChange?: (args: {
11
19
  value: string[];
@@ -27,6 +35,8 @@ export type UncontrolledProps = BaseProps & {
27
35
  export type Props = ControlledProps | UncontrolledProps;
28
36
  export type Context = {
29
37
  onChange: ToggleButtonProps["onChange"];
38
+ selectedColor?: ToggleButtonProps["selectedColor"];
39
+ color?: ToggleButtonProps["color"];
30
40
  value?: string[];
31
41
  };
32
42
  export {};
package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js CHANGED
@@ -2,34 +2,11 @@
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import Button from "../Button/index.js";
5
- import useHotkeys from "../../hooks/useHotkeys.js";
6
5
  import Context from "./ToggleButtonGroup.context.js";
7
- import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, } from "../../utilities/a11y/index.js";
8
- import ToggleButton from "../ToggleButton/index.js";
9
- const ToggleButtonGroupItem = (props) => {
10
- const { focusable, onFocus, ...buttonProps } = props;
11
- return (_jsx(ToggleButton, { ...buttonProps, attributes: {
12
- ...buttonProps.attributes,
13
- tabIndex: focusable ? 0 : -1,
14
- onFocus,
15
- } }));
16
- };
6
+ import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
17
7
  const ToggleButtonGroupControlled = (props) => {
18
- const { onChange, value, selectionMode = "single", children, ...buttonGroupProps } = props;
19
- const focusableIndexRef = React.useRef(0);
20
- let toggleButtonIndex = 0;
21
- const renderedChildren = React.Children.map(children, (child) => {
22
- if (!React.isValidElement(child) || child.type !== ToggleButton || !child.props) {
23
- return child;
24
- }
25
- const boundIndex = toggleButtonIndex;
26
- // eslint-disable-next-line react-hooks/immutability
27
- toggleButtonIndex += 1;
28
- const focusable = focusableIndexRef.current === boundIndex;
29
- return (_jsx(ToggleButtonGroupItem, { ...child.props, focusable: focusable, onFocus: () => {
30
- focusableIndexRef.current = boundIndex;
31
- } }));
32
- });
8
+ const { onChange, value, selectionMode = "single", children, color, selectedColor, ...buttonGroupProps } = props;
9
+ const rootRef = React.useRef(null);
33
10
  const handleChange = (args) => {
34
11
  const { event, value: itemValue, checked } = args;
35
12
  if (!itemValue)
@@ -46,23 +23,10 @@ const ToggleButtonGroupControlled = (props) => {
46
23
  if (onChange)
47
24
  onChange({ value: nextValue, event });
48
25
  };
49
- const { ref: hotkeysRef } = useHotkeys({
50
- "ArrowLeft, ArrowUp": () => {
51
- focusPreviousElement(hotkeysRef.current);
52
- },
53
- "ArrowRight, ArrowDown": () => {
54
- focusNextElement(hotkeysRef.current);
55
- },
56
- Home: () => {
57
- focusFirstElement(hotkeysRef.current);
58
- },
59
- End: () => {
60
- focusLastElement(hotkeysRef.current);
61
- },
62
- }, [], {
63
- preventDefault: true,
26
+ useKeyboardArrowNavigation({
27
+ ref: rootRef,
64
28
  });
65
- return (_jsx(Context.Provider, { value: { onChange: handleChange, value }, children: _jsx(Button.Group, { ...buttonGroupProps, attributes: { ref: hotkeysRef, ...buttonGroupProps?.attributes }, children: renderedChildren }) }));
29
+ return (_jsx(Context.Provider, { value: { onChange: handleChange, value, selectedColor, color }, children: _jsx(Button.Group, { ...buttonGroupProps, attributes: { ref: rootRef, ...buttonGroupProps?.attributes }, children: children }) }));
66
30
  };
67
31
  ToggleButtonGroupControlled.displayName = "ToggleButtonGroupControlled";
68
32
  export default ToggleButtonGroupControlled;
package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts CHANGED
@@ -19,4 +19,5 @@ export declare const multiple: StoryObj<{
19
19
  handleUncontrolledChange: Mock;
20
20
  handleControlledChange: Mock;
21
21
  }>;
22
+ export declare const selectedColor: StoryObj;
22
23
  export declare const className: StoryObj;
package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js CHANGED
@@ -113,6 +113,23 @@ export const multiple = {
113
113
  });
114
114
  },
115
115
  };
116
+ export const selectedColor = {
117
+ name: "color,selectedColor",
118
+ render: () => (<Example>
119
+ <Example.Item title="selectedColor: primary">
120
+ <ToggleButtonGroup selectedColor="primary" defaultValue={["2"]}>
121
+ <ToggleButton value="1">Button</ToggleButton>
122
+ <ToggleButton value="2">Button</ToggleButton>
123
+ </ToggleButtonGroup>
124
+ </Example.Item>
125
+ <Example.Item title="color: primary, selectedColor: critical">
126
+ <ToggleButtonGroup color="primary" selectedColor="critical" defaultValue={["2"]}>
127
+ <ToggleButton value="1">Button</ToggleButton>
128
+ <ToggleButton value="2">Button</ToggleButton>
129
+ </ToggleButtonGroup>
130
+ </Example.Item>
131
+ </Example>),
132
+ };
116
133
  export const className = {
117
134
  name: "className, attributes",
118
135
  render: () => (<div data-testid="root">
package/dist/hooks/tests/useKeyboardArrowNavigation.stories.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { StoryObj } from "@storybook/react-vite";
2
+ declare const _default: {
3
+ title: string;
4
+ parameters: {
5
+ chromatic: {
6
+ disableSnapshot: boolean;
7
+ };
8
+ };
9
+ };
10
+ export default _default;
11
+ export declare const base: StoryObj;
12
+ export declare const horizontal: StoryObj;
13
+ export declare const vertical: StoryObj;
14
+ export declare const circular: StoryObj;
15
+ export declare const disabled: StoryObj;
package/dist/hooks/tests/useKeyboardArrowNavigation.stories.js ADDED
@@ -0,0 +1,128 @@
1
+ import React, { useRef } from "react";
2
+ import { expect, userEvent } from "storybook/test";
3
+ import View from "../../components/View/index.js";
4
+ import Button from "../../components/Button/index.js";
5
+ import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation.js";
6
+ export default {
7
+ title: "Hooks/useKeyboardArrowNavigation",
8
+ parameters: {
9
+ chromatic: { disableSnapshot: true },
10
+ },
11
+ };
12
+ export const base = {
13
+ name: "base",
14
+ render: () => {
15
+ const ref = useRef(null);
16
+ useKeyboardArrowNavigation({ ref });
17
+ return (<View gap={2} direction="row" attributes={{ ref }}>
18
+ <Button onClick={() => { }}>Action 1</Button>
19
+ <Button onClick={() => { }}>Action 2</Button>
20
+ <Button onClick={() => { }}>Action 3</Button>
21
+ </View>);
22
+ },
23
+ play: async ({ canvas }) => {
24
+ const buttons = canvas.getAllByRole("button");
25
+ buttons[0].focus();
26
+ await userEvent.keyboard("{ArrowRight/}");
27
+ expect(document.activeElement).toBe(buttons[1]);
28
+ await userEvent.keyboard("{ArrowDown/}");
29
+ expect(document.activeElement).toBe(buttons[2]);
30
+ await userEvent.keyboard("{ArrowUp/}");
31
+ expect(document.activeElement).toBe(buttons[1]);
32
+ await userEvent.keyboard("{ArrowLeft/}");
33
+ expect(document.activeElement).toBe(buttons[0]);
34
+ },
35
+ };
36
+ export const horizontal = {
37
+ name: "orientation: horizontal",
38
+ render: () => {
39
+ const ref = useRef(null);
40
+ useKeyboardArrowNavigation({ ref, orientation: "horizontal" });
41
+ return (<View gap={2} direction="row" attributes={{ ref }}>
42
+ <Button onClick={() => { }}>Action 1</Button>
43
+ <Button onClick={() => { }}>Action 2</Button>
44
+ <Button onClick={() => { }}>Action 3</Button>
45
+ </View>);
46
+ },
47
+ play: async ({ canvas }) => {
48
+ const buttons = canvas.getAllByRole("button");
49
+ expect(buttons[0]).toHaveAttribute("tabindex", "0");
50
+ expect(buttons[1]).toHaveAttribute("tabindex", "-1");
51
+ expect(buttons[2]).toHaveAttribute("tabindex", "-1");
52
+ buttons[0].focus();
53
+ await userEvent.keyboard("{ArrowRight/}");
54
+ expect(document.activeElement).toBe(buttons[1]);
55
+ await userEvent.keyboard("{ArrowLeft/}");
56
+ expect(document.activeElement).toBe(buttons[0]);
57
+ await userEvent.keyboard("{ArrowDown/}");
58
+ expect(document.activeElement).toBe(buttons[0]);
59
+ await userEvent.keyboard("{ArrowUp/}");
60
+ expect(document.activeElement).toBe(buttons[0]);
61
+ },
62
+ };
63
+ export const vertical = {
64
+ name: "orientation: vertical",
65
+ render: () => {
66
+ const ref = useRef(null);
67
+ useKeyboardArrowNavigation({ ref, orientation: "vertical" });
68
+ return (<View gap={2} direction="column" attributes={{ ref }}>
69
+ <Button onClick={() => { }}>Action 1</Button>
70
+ <Button onClick={() => { }}>Action 2</Button>
71
+ <Button onClick={() => { }}>Action 3</Button>
72
+ </View>);
73
+ },
74
+ play: async ({ canvas }) => {
75
+ const buttons = canvas.getAllByRole("button");
76
+ buttons[0].focus();
77
+ await userEvent.keyboard("{ArrowDown/}");
78
+ expect(document.activeElement).toBe(buttons[1]);
79
+ await userEvent.keyboard("{ArrowUp/}");
80
+ expect(document.activeElement).toBe(buttons[0]);
81
+ await userEvent.keyboard("{ArrowRight/}");
82
+ expect(document.activeElement).toBe(buttons[0]);
83
+ await userEvent.keyboard("{ArrowLeft/}");
84
+ expect(document.activeElement).toBe(buttons[0]);
85
+ },
86
+ };
87
+ export const circular = {
88
+ name: "circular",
89
+ render: () => {
90
+ const ref = useRef(null);
91
+ useKeyboardArrowNavigation({ ref, circular: true });
92
+ return (<View gap={2} direction="row" attributes={{ ref }}>
93
+ <Button onClick={() => { }}>Action 1</Button>
94
+ <Button onClick={() => { }}>Action 2</Button>
95
+ <Button onClick={() => { }}>Action 3</Button>
96
+ </View>);
97
+ },
98
+ play: async ({ canvas }) => {
99
+ const buttons = canvas.getAllByRole("button");
100
+ buttons[0].focus();
101
+ await userEvent.keyboard("{ArrowRight/}");
102
+ await userEvent.keyboard("{ArrowRight/}");
103
+ expect(document.activeElement).toBe(buttons[2]);
104
+ await userEvent.keyboard("{ArrowRight/}");
105
+ expect(document.activeElement).toBe(buttons[0]);
106
+ await userEvent.keyboard("{ArrowLeft/}");
107
+ expect(document.activeElement).toBe(buttons[2]);
108
+ },
109
+ };
110
+ export const disabled = {
111
+ name: "disabled",
112
+ render: () => {
113
+ const ref = useRef(null);
114
+ useKeyboardArrowNavigation({ ref, disabled: true });
115
+ return (<View gap={2} direction="row" attributes={{ ref }}>
116
+ <Button onClick={() => { }}>Action 1</Button>
117
+ <Button onClick={() => { }}>Action 2</Button>
118
+ <Button onClick={() => { }}>Action 3</Button>
119
+ </View>);
120
+ },
121
+ play: async ({ canvas }) => {
122
+ const buttons = canvas.getAllByRole("button");
123
+ buttons[0].focus();
124
+ await userEvent.keyboard("{ArrowRight/}");
125
+ expect(document.activeElement).toBe(buttons[0]);
126
+ expect(buttons[0]).not.toHaveAttribute("tabindex");
127
+ },
128
+ };
package/dist/hooks/useKeyboardArrowNavigation.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ type Props = {
3
+ ref: React.RefObject<HTMLElement | null>;
4
+ disabled?: boolean;
5
+ orientation?: "vertical" | "horizontal";
6
+ circular?: boolean;
7
+ };
8
+ declare const useKeyboardArrowNavigation: (props: Props) => void;
9
+ export default useKeyboardArrowNavigation;
package/dist/hooks/useKeyboardArrowNavigation.js ADDED
@@ -0,0 +1,62 @@
1
+ import React, { useEffect } from "react";
2
+ import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "../utilities/a11y/index.js";
3
+ import useHotkeys from "./useHotkeys.js";
4
+ const useKeyboardArrowNavigation = (props) => {
5
+ const { ref, disabled, orientation, circular } = props;
6
+ const backHotkeys = [];
7
+ const forwardHotkeys = [];
8
+ if (!orientation || orientation === "vertical") {
9
+ backHotkeys.push("ArrowUp");
10
+ forwardHotkeys.push("ArrowDown");
11
+ }
12
+ if (!orientation || orientation === "horizontal") {
13
+ backHotkeys.push("ArrowLeft");
14
+ forwardHotkeys.push("ArrowRight");
15
+ }
16
+ const updateTabIndex = React.useCallback((options) => {
17
+ const { el, focusableElements } = options;
18
+ const initialEl = focusableElements.find((el) => el.getAttribute("tabindex") !== "-1");
19
+ const activeEl = el ?? initialEl ?? focusableElements[0];
20
+ focusableElements.forEach((el) => el.setAttribute("tabindex", "-1"));
21
+ activeEl?.setAttribute("tabindex", "0");
22
+ }, []);
23
+ useEffect(() => {
24
+ if (!ref.current)
25
+ return;
26
+ if (disabled)
27
+ return;
28
+ const focusableElements = getFocusableElements(ref.current);
29
+ updateTabIndex({ focusableElements });
30
+ }, [ref, updateTabIndex, disabled]);
31
+ useHotkeys({
32
+ [backHotkeys.join(", ")]: () => {
33
+ if (!ref.current)
34
+ return;
35
+ const data = focusPreviousElement(ref.current, { circular });
36
+ updateTabIndex(data);
37
+ },
38
+ [forwardHotkeys.join(", ")]: () => {
39
+ if (!ref.current)
40
+ return;
41
+ const data = focusNextElement(ref.current, { circular });
42
+ updateTabIndex(data);
43
+ },
44
+ Home: () => {
45
+ if (!ref.current)
46
+ return;
47
+ const data = focusFirstElement(ref.current);
48
+ updateTabIndex(data);
49
+ },
50
+ End: () => {
51
+ if (!ref.current)
52
+ return;
53
+ const data = focusLastElement(ref.current);
54
+ updateTabIndex(data);
55
+ },
56
+ }, [updateTabIndex, circular], {
57
+ ref,
58
+ preventDefault: true,
59
+ disabled,
60
+ });
61
+ };
62
+ export default useKeyboardArrowNavigation;
package/dist/index.d.ts CHANGED
@@ -135,6 +135,7 @@ export { default as useHandlerRef } from "./hooks/useHandlerRef";
135
135
  export { default as useHotkeys } from "./hooks/useHotkeys";
136
136
  export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
137
137
  export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
138
+ export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation";
138
139
  export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
139
140
  export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
140
141
  export { default as useRTL } from "./hooks/useRTL";
package/dist/index.js CHANGED
@@ -74,6 +74,7 @@ export { default as useHandlerRef } from "./hooks/useHandlerRef.js";
74
74
  export { default as useHotkeys } from "./hooks/useHotkeys.js";
75
75
  export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
76
76
  export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
77
+ export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation.js";
77
78
  export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
78
79
  export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
79
80
  export { default as useRTL } from "./hooks/useRTL.js";
package/dist/utilities/a11y/focus.d.ts CHANGED
@@ -14,8 +14,25 @@ export declare const getFocusData: (args: {
14
14
  }) => {
15
15
  overflow: boolean;
16
16
  el: FocusableElement;
17
+ focusableElements: FocusableElement[];
18
+ };
19
+ export declare const focusNextElement: (root: HTMLElement, options?: {
20
+ circular?: boolean;
21
+ }) => {
22
+ el: FocusableElement;
23
+ focusableElements: FocusableElement[];
24
+ };
25
+ export declare const focusPreviousElement: (root: HTMLElement, options?: {
26
+ circular?: boolean;
27
+ }) => {
28
+ el: FocusableElement;
29
+ focusableElements: FocusableElement[];
30
+ };
31
+ export declare const focusFirstElement: (root: HTMLElement) => {
32
+ el: FocusableElement;
33
+ focusableElements: FocusableElement[];
34
+ };
35
+ export declare const focusLastElement: (root: HTMLElement) => {
36
+ el: FocusableElement;
37
+ focusableElements: FocusableElement[];
17
38
  };
18
- export declare const focusNextElement: (root: HTMLElement) => void;
19
- export declare const focusPreviousElement: (root: HTMLElement) => void;
20
- export declare const focusFirstElement: (root: HTMLElement) => void;
21
- export declare const focusLastElement: (root: HTMLElement) => void;
package/dist/utilities/a11y/focus.js CHANGED
@@ -88,13 +88,14 @@ export const getFocusData = (args) => {
88
88
  nextIndex = target === "prev" ? positions.first : positions.last;
89
89
  }
90
90
  }
91
- return { overflow: isOverflow, el: focusable[nextIndex] };
91
+ return { overflow: isOverflow, el: focusable[nextIndex], focusableElements: focusable };
92
92
  };
93
93
  const focusTargetElement = (root, target, options) => {
94
94
  const data = getFocusData({ root, target, options });
95
95
  focusElement(data.el);
96
+ return { el: data.el, focusableElements: data.focusableElements };
96
97
  };
97
- export const focusNextElement = (root) => focusTargetElement(root, "next", { includeNegativeTabIndex: true });
98
- export const focusPreviousElement = (root) => focusTargetElement(root, "prev", { includeNegativeTabIndex: true });
98
+ export const focusNextElement = (root, options) => focusTargetElement(root, "next", { ...options, includeNegativeTabIndex: true });
99
+ export const focusPreviousElement = (root, options) => focusTargetElement(root, "prev", { ...options, includeNegativeTabIndex: true });
99
100
  export const focusFirstElement = (root) => focusTargetElement(root, "first", { includeNegativeTabIndex: true });
100
101
  export const focusLastElement = (root) => focusTargetElement(root, "last", { includeNegativeTabIndex: true });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reshaped",
3
3
  "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
4
- "version": "3.8.0-canary.12",
4
+ "version": "3.8.0-canary.13",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",