@ndla/primitives 1.0.4-alpha.0 → 1.0.6-alpha.0

package/dist/panda.buildinfo.json

@@ -39,12 +39,16 @@
       "transitionDuration]___[value:normal",
       "transitionProperty]___[value:transform",
       "transform]___[value:rotate(180deg)]___[cond:_open",
+      "transition]___[value:none]___[cond:_motionReduce",
+      "transitionDuration]___[value:0s]___[cond:_motionReduce",
       "overflow]___[value:hidden",
       "transitionProperty]___[value:padding-bottom",
       "paddingBlock]___[value:xsmall",
       "paddingInline]___[value:small",
       "animation]___[value:collapse-in]___[cond:_open",
+      "animation]___[value:none]___[cond:_open<___>_motionReduce",
       "animation]___[value:collapse-out]___[cond:_closed",
+      "animation]___[value:none]___[cond:_closed<___>_motionReduce",
       "borderBottomRadius]___[value:xsmall",
       "borderWidth]___[value:0 1px 1px",
       "borderStyle]___[value:solid",
@@ -236,6 +240,8 @@
       "transitionDuration]___[value:normal]___[cond:& svg",
       "transitionProperty]___[value:transform]___[cond:& svg",
       "transitionTimingFunction]___[value:default]___[cond:& svg",
+      "transition]___[value:none]___[cond:& svg<___>_motionReduce",
+      "transitionDuration]___[value:0s]___[cond:& svg<___>_motionReduce",
       "transform]___[value:rotate(180deg)]___[cond:_open<___>& svg",
       "color]___[value:stroke.default",
       "textDecoration]___[value:underline]___[cond:_checked",
@@ -432,6 +438,7 @@
       "cursor]___[value:default",
       "pointerEvents]___[value:none",
       "visibility]___[value:hidden]___[cond:&::before, &::after, *",
+      "animation]___[value:none]___[cond:_motionReduce",
       "background]___[value:surface.disabled",
       "flex]___[value:1",
       "width]___[value:4xsmall]___[cond:_vertical",
@@ -448,6 +455,7 @@
       "borderBlockColor]___[value:background.subtle",
       "borderInlineStartColor]___[value:background.subtle",
       "borderInlineEndColor]___[value:stroke.default",
+      "animationDuration]___[value:2s]___[cond:_motionReduce",
       "borderWidth]___[value:4px",
       "height]___[value:large",
       "width]___[value:large",
@@ -462,9 +470,11 @@
       "textStyle]___[value:label.xsmall",
       "transform]___[value:translateX(20%)]___[cond:_hover",
       "transform]___[value:translateX(0)]___[cond:_hover<___>_disabled",
+      "transform]___[value:translateX(0)]___[cond:_hover<___>_motionReduce",
       "transform]___[value:translateX(120%)]___[cond:_checked",
       "transform]___[value:translateX(100%)]___[cond:_checked<___>_hover",
       "transform]___[value:translateX(120%)]___[cond:_checked<___>_hover<___>_disabled",
+      "transform]___[value:translateX(120%)]___[cond:_checked<___>_hover<___>_motionReduce",
       "transitionProperty]___[value:color",
       "overflowX]___[value:auto",
       "padding]___[value:4xsmall",
@@ -553,11 +563,15 @@
       "transitionProperty]___[value:background, outline-color, color",
       "backgroundColor]___[value:surface.actionSubtle.hover]___[cond:_hover",
       "color]___[value:stroke.hover]___[cond:_hover<___>& svg",
+      "transition]___[value:none]___[cond:_hover<___>_motionReduce",
+      "transitionDuration]___[value:0s]___[cond:_hover<___>_motionReduce",
       "backgroundColor]___[value:surface.actionSubtle.hover]___[cond:_highlighted",
       "outlineWidth]___[value:3px]___[cond:_highlighted",
       "outlineOffset]___[value:-1px]___[cond:_highlighted",
       "outlineColor]___[value:stroke.hover]___[cond:_highlighted",
       "color]___[value:stroke.hover]___[cond:_highlighted<___>& svg",
+      "transition]___[value:none]___[cond:_highlighted<___>_motionReduce",
+      "transitionDuration]___[value:0s]___[cond:_highlighted<___>_motionReduce",
       "paddingBottom]___[value:1",
       "display]___[value:inline-block]___[cond:& span",
       "textStyle]___[value:body.medium",

package/dist/styles.css

@@ -2508,5 +2508,68 @@
     .tabletDown\:min-h_100\% {
       min-height: 100%;
 }
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    .motionReduce\:trs_none {
+      transition: none;
+}
+    .motionReduce\:anim_none {
+      animation: none;
+}
+    .motionReduce\:trs-dur_0s {
+      --transition-duration: 0s;
+      transition-duration: 0s;
+}
+    .motionReduce\:anim-dur_2s {
+      animation-duration: 2s;
+}
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    .open\:motionReduce\:anim_none:is([open], [data-open], [data-state="open"]) {
+      animation: none;
+}
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    .closed\:motionReduce\:anim_none:is([closed], [data-closed], [data-state="closed"]) {
+      animation: none;
+}
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    .\[\&_svg\]\:motionReduce\:trs_none svg,.highlighted\:motionReduce\:trs_none[data-highlighted] {
+      transition: none;
+}
+    .\[\&_svg\]\:motionReduce\:trs-dur_0s svg,.highlighted\:motionReduce\:trs-dur_0s[data-highlighted] {
+      --transition-duration: 0s;
+      transition-duration: 0s;
+}
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    .hover\:motionReduce\:trf_translateX\(0\):is(:hover, [data-hover]) {
+      transform: translateX(0);
+}
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    .hover\:motionReduce\:trs_none:is(:hover, [data-hover]) {
+      transition: none;
+}
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    .hover\:motionReduce\:trs-dur_0s:is(:hover, [data-hover]) {
+      --transition-duration: 0s;
+      transition-duration: 0s;
+}
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    .checked\:hover\:motionReduce\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+      transform: translateX(120%);
+}
 }
 }

package/es/Accordion.js

@@ -49,6 +49,10 @@ const accordionRecipe = sva({
       transitionTimingFunction: "default",
       _open: {
         transform: "rotate(180deg)"
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     itemContent: {
@@ -60,10 +64,16 @@ const accordionRecipe = sva({
       paddingBlock: "xsmall",
       paddingInline: "small",
       _open: {
-        animation: "collapse-in"
+        animation: "collapse-in",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "collapse-out"
+        animation: "collapse-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     item: {

package/es/Button.js

@@ -13,6 +13,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { Spinner } from "./Spinner";
 
 // TODO: Consider if any of the backgrounds should actually be transparent
+// TODO: Figure out sizing for link variant.
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export const buttonBaseRecipe = cva({
   base: {
@@ -46,6 +47,10 @@ export const buttonBaseRecipe = cva({
     },
     _focusVisible: {
       boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+    },
+    _motionReduce: {
+      transition: "none",
+      transitionDuration: "0s"
     }
   },
   defaultVariants: {

package/es/Checkbox.js

@@ -43,7 +43,11 @@ const checkboxRecipe = sva({
       color: "text.strong",
       transitionDuration: "normal",
       transitionProperty: "border-color, background, box-shadow, color",
-      transitionTimingFunction: "default"
+      transitionTimingFunction: "default",
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
+      }
     }
   },
   defaultVariants: {

package/es/Combobox.js

@@ -37,10 +37,16 @@ const comboboxRecipe = sva({
       overflowY: "auto",
       maxHeight: "surface.xsmall",
       _open: {
-        animation: "fade-shift-in 0.25s ease-out"
+        animation: "fade-shift-in 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.25s ease-out"
+        animation: "fade-shift-out 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     item: {
@@ -81,7 +87,11 @@ const comboboxRecipe = sva({
         transformOrigin: "center",
         transitionDuration: "normal",
         transitionProperty: "transform",
-        transitionTimingFunction: "default"
+        transitionTimingFunction: "default",
+        _motionReduce: {
+          transition: "none",
+          transitionDuration: "0s"
+        }
       },
       _open: {
         "& svg": {

package/es/Dialog.js

@@ -26,10 +26,16 @@ const dialogRecipe = sva({
       // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.
       background: "rgba(1, 1, 1, 0.3)",
       _open: {
-        animation: "backdrop-in"
+        animation: "backdrop-in",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "backdrop-out"
+        animation: "backdrop-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     positioner: {
@@ -83,10 +89,16 @@ const dialogRecipe = sva({
         maxHeight: "100%",
         width: "var(--size)",
         _open: {
-          animation: "drawer-in-left"
+          animation: "drawer-in-left",
+          _motionReduce: {
+            animation: "none"
+          }
         },
         _closed: {
-          animation: "drawer-out-left"
+          animation: "drawer-out-left",
+          _motionReduce: {
+            animation: "none"
+          }
         }
       }
     }
@@ -99,10 +111,16 @@ const dialogRecipe = sva({
         maxHeight: "100%",
         width: "var(--size)",
         _open: {
-          animation: "drawer-in-right"
+          animation: "drawer-in-right",
+          _motionReduce: {
+            animation: "none"
+          }
         },
         _closed: {
-          animation: "drawer-out-right"
+          animation: "drawer-out-right",
+          _motionReduce: {
+            animation: "none"
+          }
         }
       }
     }
@@ -115,10 +133,16 @@ const dialogRecipe = sva({
         maxWidth: "100%",
         height: "var(--size)",
         _open: {
-          animation: "drawer-in-top"
+          animation: "drawer-in-top",
+          _motionReduce: {
+            animation: "none"
+          }
         },
         _closed: {
-          animation: "drawer-out-top"
+          animation: "drawer-out-top",
+          _motionReduce: {
+            animation: "none"
+          }
         }
       }
     }
@@ -131,10 +155,16 @@ const dialogRecipe = sva({
         maxWidth: "100%",
         height: "var(--size)",
         _open: {
-          animation: "drawer-in-bottom"
+          animation: "drawer-in-bottom",
+          _motionReduce: {
+            animation: "none"
+          }
         },
         _closed: {
-          animation: "drawer-out-bottom"
+          animation: "drawer-out-bottom",
+          _motionReduce: {
+            animation: "none"
+          }
         }
       }
     }
@@ -186,10 +216,16 @@ const dialogRecipe = sva({
         content: {
           width: "var(--size)",
           _open: {
-            animation: "dialog-in"
+            animation: "dialog-in",
+            _motionReduce: {
+              animation: "none"
+            }
           },
           _closed: {
-            animation: "dialog-out"
+            animation: "dialog-out",
+            _motionReduce: {
+              animation: "none"
+            }
           }
         }
       }

package/es/Figure.js

@@ -16,7 +16,11 @@ const figureRecipe = cva({
     position: "relative",
     transitionDuration: "normal",
     transitionProperty: "transform, width, height",
-    transitionTimingFunction: "default"
+    transitionTimingFunction: "default",
+    _motionReduce: {
+      transition: "none",
+      transitionDuration: "0s"
+    }
   },
   variants: {
     size: {

package/es/Menu.js

@@ -108,10 +108,16 @@ const menuRecipe = sva({
       outline: "none",
       zIndex: "dropdown",
       _open: {
-        animation: "fade-shift-in 0.25s ease-out"
+        animation: "fade-shift-in 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.25s ease-out"
+        animation: "fade-shift-out 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     itemGroup: {

package/es/Pagination.js

@@ -38,6 +38,7 @@ export const PaginationItem = withContext(Pagination.Item, "item", {
 export const PaginationEllipsis = withContext(Pagination.Ellipsis, "ellipsis", {
   baseComponent: true
 });
+export const PaginationContext = Pagination.Context;
 export const PaginationPrevTrigger = withContext(Pagination.PrevTrigger, "prevTrigger", {
   baseComponent: true
 });

package/es/Popover.js

@@ -26,10 +26,16 @@ const popoverRecipe = sva({
       zIndex: "popover",
       maxWidth: "var(--available-width)",
       _open: {
-        animation: "fade-shift-in 0.2s ease-out"
+        animation: "fade-shift-in 0.2s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.2s ease-out"
+        animation: "fade-shift-out 0.2s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     arrow: {

package/es/RadioGroup.js

@@ -57,6 +57,10 @@ const radioGroupRecipe = sva({
           borderColor: "stroke.disabled",
           boxShadow: "none"
         }
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     item: {

package/es/Select.js

@@ -40,10 +40,16 @@ const selectRecipe = sva({
         outlineOffset: "-1"
       },
       _open: {
-        animation: "fade-shift-in 0.25s ease-out"
+        animation: "fade-shift-in 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.25s ease-out"
+        animation: "fade-shift-out 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     item: {
@@ -101,6 +107,10 @@ const selectRecipe = sva({
       transitionTimingFunction: "default",
       _open: {
         transform: "rotate(180deg)"
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     itemIndicator: {

package/es/Skeleton.js

@@ -20,6 +20,9 @@ export const Skeleton = styled(ark.div, {
     userSelect: "none",
     "&::before, &::after, *": {
       visibility: "hidden"
+    },
+    _motionReduce: {
+      animation: "none"
     }
   }
 }, {

package/es/Slider.js

@@ -71,6 +71,10 @@ const sliderRecipe = sva({
         outline: "3px solid",
         outlineColor: "surface.action",
         outlineOffset: "0px"
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     }
   }

package/es/Spinner.js

@@ -19,7 +19,10 @@ export const spinnerRecipe = cva({
     borderStyle: "solid",
     borderBlockColor: "background.subtle",
     borderInlineStartColor: "background.subtle",
-    borderInlineEndColor: "stroke.default"
+    borderInlineEndColor: "stroke.default",
+    _motionReduce: {
+      animationDuration: "2s"
+    }
   },
   defaultVariants: {
     size: "large"

package/es/Switch.js

@@ -44,6 +44,10 @@ const switchRecipe = sva({
       _disabled: {
         background: "surface.disabled",
         cursor: "not-allowed"
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     thumb: {
@@ -64,6 +68,9 @@ const switchRecipe = sva({
         transform: "translateX(20%)",
         _disabled: {
           transform: "translateX(0)"
+        },
+        _motionReduce: {
+          transform: "translateX(0)"
         }
       },
       _checked: {
@@ -72,6 +79,9 @@ const switchRecipe = sva({
           transform: "translateX(100%)",
           _disabled: {
             transform: "translateX(120%)"
+          },
+          _motionReduce: {
+            transform: "translateX(120%)"
           }
         }
       }
@@ -89,6 +99,10 @@ const switchRecipe = sva({
         _hover: {
           color: "text.disabled"
         }
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     }
   }

package/es/Tabs.js

@@ -65,6 +65,10 @@ const tabsRecipe = sva({
         _hover: {
           color: "text.subtle"
         }
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     content: {

package/es/TagsInput.js

@@ -52,6 +52,10 @@ const tagsInputRecipe = sva({
         color: "text.default",
         "& svg": {
           color: "stroke.hover"
+        },
+        _motionReduce: {
+          transition: "none",
+          transitionDuration: "0s"
         }
       },
       _highlighted: {
@@ -62,6 +66,10 @@ const tagsInputRecipe = sva({
         color: "text.default",
         "& svg": {
           color: "stroke.hover"
+        },
+        _motionReduce: {
+          transition: "none",
+          transitionDuration: "0s"
         }
       }
     },

package/es/Toast.js

@@ -32,7 +32,11 @@ const toastRecipe = sva({
       zIndex: "var(--z-index)",
       transitionDuration: "slow",
       transitionProperty: "translate, scale, opacity, height",
-      transitionTimingFunction: "default"
+      transitionTimingFunction: "default",
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
+      }
     },
     title: {
       paddingInlineEnd: "xxlarge"

package/es/Tooltip.js

@@ -23,10 +23,16 @@ const tooltipRecipe = sva({
       "--arrow-size": "spacing.xxsmall",
       "--arrow-background": "colors.surface.action",
       _open: {
-        animation: "fade-shift-in 0.2s ease-out"
+        animation: "fade-shift-in 0.2s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.2s ease-out"
+        animation: "fade-shift-out 0.2s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     }
   }

package/es/index.js

@@ -29,7 +29,7 @@ export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from ".
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, MenuItemText } from "./Menu";
 export { MessageBox } from "./MessageBox";
 export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
-export { PaginationRoot, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger } from "./Pagination";
+export { PaginationRoot, PaginationContext, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger } from "./Pagination";
 export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContentStandalone, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger } from "./Popover";
 export { RadioGroupRoot, RadioGroupIndicator, RadioGroupItemControl, RadioGroupItem, RadioGroupItemText, RadioGroupLabel, RadioGroupItemHiddenInput } from "./RadioGroup";
 export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, SelectList } from "./Select";

package/lib/Accordion.js

@@ -55,6 +55,10 @@ const accordionRecipe = (0, _css.sva)({
       transitionTimingFunction: "default",
       _open: {
         transform: "rotate(180deg)"
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     itemContent: {
@@ -66,10 +70,16 @@ const accordionRecipe = (0, _css.sva)({
       paddingBlock: "xsmall",
       paddingInline: "small",
       _open: {
-        animation: "collapse-in"
+        animation: "collapse-in",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "collapse-out"
+        animation: "collapse-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     item: {

package/lib/Button.js

@@ -19,6 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 // TODO: Consider if any of the backgrounds should actually be transparent
+// TODO: Figure out sizing for link variant.
 const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
   base: {
     display: "inline-flex",
@@ -51,6 +52,10 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
     },
     _focusVisible: {
       boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+    },
+    _motionReduce: {
+      transition: "none",
+      transitionDuration: "0s"
     }
   },
   defaultVariants: {

package/lib/Checkbox.js

@@ -49,7 +49,11 @@ const checkboxRecipe = (0, _css.sva)({
       color: "text.strong",
       transitionDuration: "normal",
       transitionProperty: "border-color, background, box-shadow, color",
-      transitionTimingFunction: "default"
+      transitionTimingFunction: "default",
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
+      }
     }
   },
   defaultVariants: {

package/lib/Combobox.js

@@ -43,10 +43,16 @@ const comboboxRecipe = (0, _css.sva)({
       overflowY: "auto",
       maxHeight: "surface.xsmall",
       _open: {
-        animation: "fade-shift-in 0.25s ease-out"
+        animation: "fade-shift-in 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.25s ease-out"
+        animation: "fade-shift-out 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     item: {
@@ -87,7 +93,11 @@ const comboboxRecipe = (0, _css.sva)({
         transformOrigin: "center",
         transitionDuration: "normal",
         transitionProperty: "transform",
-        transitionTimingFunction: "default"
+        transitionTimingFunction: "default",
+        _motionReduce: {
+          transition: "none",
+          transitionDuration: "0s"
+        }
       },
       _open: {
         "& svg": {

package/lib/Dialog.d.ts

@@ -25,9 +25,15 @@ declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntim
                 width: "var(--size)";
                 _open: {
                     animation: "dialog-in";
+                    _motionReduce: {
+                        animation: "none";
+                    };
                 };
                 _closed: {
                     animation: "dialog-out";
+                    _motionReduce: {
+                        animation: "none";
+                    };
                 };
             };
         };

package/lib/Dialog.js

@@ -32,10 +32,16 @@ const dialogRecipe = (0, _css.sva)({
       // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.
       background: "rgba(1, 1, 1, 0.3)",
       _open: {
-        animation: "backdrop-in"
+        animation: "backdrop-in",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "backdrop-out"
+        animation: "backdrop-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     positioner: {
@@ -89,10 +95,16 @@ const dialogRecipe = (0, _css.sva)({
         maxHeight: "100%",
         width: "var(--size)",
         _open: {
-          animation: "drawer-in-left"
+          animation: "drawer-in-left",
+          _motionReduce: {
+            animation: "none"
+          }
         },
         _closed: {
-          animation: "drawer-out-left"
+          animation: "drawer-out-left",
+          _motionReduce: {
+            animation: "none"
+          }
         }
       }
     }
@@ -105,10 +117,16 @@ const dialogRecipe = (0, _css.sva)({
         maxHeight: "100%",
         width: "var(--size)",
         _open: {
-          animation: "drawer-in-right"
+          animation: "drawer-in-right",
+          _motionReduce: {
+            animation: "none"
+          }
         },
         _closed: {
-          animation: "drawer-out-right"
+          animation: "drawer-out-right",
+          _motionReduce: {
+            animation: "none"
+          }
         }
       }
     }
@@ -121,10 +139,16 @@ const dialogRecipe = (0, _css.sva)({
         maxWidth: "100%",
         height: "var(--size)",
         _open: {
-          animation: "drawer-in-top"
+          animation: "drawer-in-top",
+          _motionReduce: {
+            animation: "none"
+          }
         },
         _closed: {
-          animation: "drawer-out-top"
+          animation: "drawer-out-top",
+          _motionReduce: {
+            animation: "none"
+          }
         }
       }
     }
@@ -137,10 +161,16 @@ const dialogRecipe = (0, _css.sva)({
         maxWidth: "100%",
         height: "var(--size)",
         _open: {
-          animation: "drawer-in-bottom"
+          animation: "drawer-in-bottom",
+          _motionReduce: {
+            animation: "none"
+          }
         },
         _closed: {
-          animation: "drawer-out-bottom"
+          animation: "drawer-out-bottom",
+          _motionReduce: {
+            animation: "none"
+          }
         }
       }
     }
@@ -192,10 +222,16 @@ const dialogRecipe = (0, _css.sva)({
         content: {
           width: "var(--size)",
           _open: {
-            animation: "dialog-in"
+            animation: "dialog-in",
+            _motionReduce: {
+              animation: "none"
+            }
           },
           _closed: {
-            animation: "dialog-out"
+            animation: "dialog-out",
+            _motionReduce: {
+              animation: "none"
+            }
           }
         }
       }

package/lib/Figure.js

@@ -22,7 +22,11 @@ const figureRecipe = (0, _css.cva)({
     position: "relative",
     transitionDuration: "normal",
     transitionProperty: "transform, width, height",
-    transitionTimingFunction: "default"
+    transitionTimingFunction: "default",
+    _motionReduce: {
+      transition: "none",
+      transitionDuration: "0s"
+    }
   },
   variants: {
     size: {

package/lib/Menu.js

@@ -114,10 +114,16 @@ const menuRecipe = (0, _css.sva)({
       outline: "none",
       zIndex: "dropdown",
       _open: {
-        animation: "fade-shift-in 0.25s ease-out"
+        animation: "fade-shift-in 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.25s ease-out"
+        animation: "fade-shift-out 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     itemGroup: {

package/lib/Pagination.d.ts

@@ -20,6 +20,7 @@ export declare const PaginationItem: import("react").ForwardRefExoticComponent<{
 export declare const PaginationEllipsis: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.EllipsisProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PaginationContext: (props: Pagination.ContextProps) => import("react").ReactNode;
 export declare const PaginationPrevTrigger: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/Pagination.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PaginationRoot = exports.PaginationPrevTrigger = exports.PaginationNextTrigger = exports.PaginationItem = exports.PaginationEllipsis = void 0;
+exports.PaginationRoot = exports.PaginationPrevTrigger = exports.PaginationNextTrigger = exports.PaginationItem = exports.PaginationEllipsis = exports.PaginationContext = void 0;
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -44,6 +44,7 @@ const PaginationItem = exports.PaginationItem = withContext(_react.Pagination.It
 const PaginationEllipsis = exports.PaginationEllipsis = withContext(_react.Pagination.Ellipsis, "ellipsis", {
   baseComponent: true
 });
+const PaginationContext = exports.PaginationContext = _react.Pagination.Context;
 const PaginationPrevTrigger = exports.PaginationPrevTrigger = withContext(_react.Pagination.PrevTrigger, "prevTrigger", {
   baseComponent: true
 });

package/lib/Popover.js

@@ -32,10 +32,16 @@ const popoverRecipe = (0, _css.sva)({
       zIndex: "popover",
       maxWidth: "var(--available-width)",
       _open: {
-        animation: "fade-shift-in 0.2s ease-out"
+        animation: "fade-shift-in 0.2s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.2s ease-out"
+        animation: "fade-shift-out 0.2s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     arrow: {

package/lib/RadioGroup.js

@@ -63,6 +63,10 @@ const radioGroupRecipe = (0, _css.sva)({
           borderColor: "stroke.disabled",
           boxShadow: "none"
         }
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     item: {

package/lib/Select.js

@@ -46,10 +46,16 @@ const selectRecipe = (0, _css.sva)({
         outlineOffset: "-1"
       },
       _open: {
-        animation: "fade-shift-in 0.25s ease-out"
+        animation: "fade-shift-in 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.25s ease-out"
+        animation: "fade-shift-out 0.25s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     },
     item: {
@@ -107,6 +113,10 @@ const selectRecipe = (0, _css.sva)({
       transitionTimingFunction: "default",
       _open: {
         transform: "rotate(180deg)"
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     itemIndicator: {

package/lib/Skeleton.js

@@ -26,6 +26,9 @@ const Skeleton = exports.Skeleton = (0, _jsx.styled)(_react.ark.div, {
     userSelect: "none",
     "&::before, &::after, *": {
       visibility: "hidden"
+    },
+    _motionReduce: {
+      animation: "none"
     }
   }
 }, {

package/lib/Slider.js

@@ -77,6 +77,10 @@ const sliderRecipe = (0, _css.sva)({
         outline: "3px solid",
         outlineColor: "surface.action",
         outlineOffset: "0px"
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     }
   }

package/lib/Spinner.js

@@ -25,7 +25,10 @@ const spinnerRecipe = exports.spinnerRecipe = (0, _css.cva)({
     borderStyle: "solid",
     borderBlockColor: "background.subtle",
     borderInlineStartColor: "background.subtle",
-    borderInlineEndColor: "stroke.default"
+    borderInlineEndColor: "stroke.default",
+    _motionReduce: {
+      animationDuration: "2s"
+    }
   },
   defaultVariants: {
     size: "large"

package/lib/Switch.js

@@ -50,6 +50,10 @@ const switchRecipe = (0, _css.sva)({
       _disabled: {
         background: "surface.disabled",
         cursor: "not-allowed"
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     thumb: {
@@ -70,6 +74,9 @@ const switchRecipe = (0, _css.sva)({
         transform: "translateX(20%)",
         _disabled: {
           transform: "translateX(0)"
+        },
+        _motionReduce: {
+          transform: "translateX(0)"
         }
       },
       _checked: {
@@ -78,6 +85,9 @@ const switchRecipe = (0, _css.sva)({
           transform: "translateX(100%)",
           _disabled: {
             transform: "translateX(120%)"
+          },
+          _motionReduce: {
+            transform: "translateX(120%)"
           }
         }
       }
@@ -95,6 +105,10 @@ const switchRecipe = (0, _css.sva)({
         _hover: {
           color: "text.disabled"
         }
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     }
   }

package/lib/Tabs.js

@@ -71,6 +71,10 @@ const tabsRecipe = (0, _css.sva)({
         _hover: {
           color: "text.subtle"
         }
+      },
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
       }
     },
     content: {

package/lib/TagsInput.js

@@ -58,6 +58,10 @@ const tagsInputRecipe = (0, _css.sva)({
         color: "text.default",
         "& svg": {
           color: "stroke.hover"
+        },
+        _motionReduce: {
+          transition: "none",
+          transitionDuration: "0s"
         }
       },
       _highlighted: {
@@ -68,6 +72,10 @@ const tagsInputRecipe = (0, _css.sva)({
         color: "text.default",
         "& svg": {
           color: "stroke.hover"
+        },
+        _motionReduce: {
+          transition: "none",
+          transitionDuration: "0s"
         }
       }
     },

package/lib/Toast.js

@@ -38,7 +38,11 @@ const toastRecipe = (0, _css.sva)({
       zIndex: "var(--z-index)",
       transitionDuration: "slow",
       transitionProperty: "translate, scale, opacity, height",
-      transitionTimingFunction: "default"
+      transitionTimingFunction: "default",
+      _motionReduce: {
+        transition: "none",
+        transitionDuration: "0s"
+      }
     },
     title: {
       paddingInlineEnd: "xxlarge"

package/lib/Tooltip.js

@@ -29,10 +29,16 @@ const tooltipRecipe = (0, _css.sva)({
       "--arrow-size": "spacing.xxsmall",
       "--arrow-background": "colors.surface.action",
       _open: {
-        animation: "fade-shift-in 0.2s ease-out"
+        animation: "fade-shift-in 0.2s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       },
       _closed: {
-        animation: "fade-shift-out 0.2s ease-out"
+        animation: "fade-shift-out 0.2s ease-out",
+        _motionReduce: {
+          animation: "none"
+        }
       }
     }
   }

package/lib/index.d.ts

@@ -47,7 +47,7 @@ export { MessageBox } from "./MessageBox";
 export type { LogoProps } from "./NdlaLogo";
 export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
 export type { PaginationRootProps } from "./Pagination";
-export { PaginationRoot, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger, } from "./Pagination";
+export { PaginationRoot, PaginationContext, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger, } from "./Pagination";
 export type { PopoverRootProps } from "./Popover";
 export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContentStandalone, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, } from "./Popover";
 export type { RadioGroupRootProps } from "./RadioGroup";

package/lib/index.js

@@ -531,6 +531,12 @@ Object.defineProperty(exports, "OrderedList", {
     return _ArticleLists.OrderedList;
   }
 });
+Object.defineProperty(exports, "PaginationContext", {
+  enumerable: true,
+  get: function () {
+    return _Pagination.PaginationContext;
+  }
+});
 Object.defineProperty(exports, "PaginationEllipsis", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.4-alpha.0",
+  "version": "1.0.6-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,7 +33,7 @@
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.15",
+    "@ndla/preset-panda": "^0.0.16",
     "@pandacss/dev": "^0.44.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fdd094fea36baa5ee2bdfe5b2bc6c423d304f22"
+  "gitHead": "7770121967e96fe8d661b0f540e3397d6e2c453f"
 }