@ndla/primitives 1.0.17-alpha.0 → 1.0.19-alpha.0

package/dist/panda.buildinfo.json

@@ -33,7 +33,7 @@
       "borderBottomRadius]___[value:sharp]___[cond:_open",
       "outline]___[value:none]___[cond:_focusVisible",
       "boxShadowColor]___[value:stroke.default]___[cond:_focusVisible",
-      "boxShadow]___[value:inset 0 0 0 2px var(--shadow-color)]___[cond:_focusVisible",
+      "boxShadow]___[value:inset 0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
       "color]___[value:icon.strong",
       "transformOrigin]___[value:center",
       "transitionDuration]___[value:normal",
@@ -100,7 +100,7 @@
       "background]___[value:surface.brand.2.subtle",
       "display]___[value:inline-flex",
       "justifyContent]___[value:center",
-      "gap]___[value:xsmall",
+      "gap]___[value:xxsmall",
       "textDecoration]___[value:none",
       "fontWeight]___[value:bold",
       "transitionProperty]___[value:all",
@@ -113,19 +113,19 @@
       "color]___[value:text.onAction]___[cond:_disabled<___>& svg",
       "color]___[value:text.onAction]___[cond:_disabled<___>_hover",
       "background]___[value:surface.disabled]___[cond:_disabled<___>_hover",
-      "boxShadow]___[value:inset 0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
+      "boxShadow]___[value:inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)]___[cond:_focusVisible",
       "color]___[value:text.onAction",
       "background]___[value:surface.action",
       "color]___[value:text.onAction]___[cond:_hover",
       "background]___[value:surface.action.hover]___[cond:_hover",
       "color]___[value:text.onAction]___[cond:_active",
       "background]___[value:surface.action.active]___[cond:_active",
-      "boxShadow]___[value:inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor]___[cond:_focusVisible",
+      "boxShadow]___[value:inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor]___[cond:_focusVisible",
       "color]___[value:text.strong",
       "background]___[value:surface.actionSubtle.hover.strong]___[cond:_active",
       "background]___[value:transparent",
       "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)]___[cond:_hover",
-      "boxShadow]___[value:inset 0 0 0 3px var(--shadow-color)]___[cond:_hover<___>_focusVisible",
+      "boxShadow]___[value:inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)]___[cond:_hover<___>_focusVisible",
       "borderColor]___[value:stroke.default]___[cond:_active",
       "color]___[value:stroke.hover]___[cond:_hover",
       "color]___[value:surface.actionSubtle.hover.strong]___[cond:_hover",
@@ -138,30 +138,39 @@
       "background]___[value:surface.success.active]___[cond:_active",
       "boxShadowColor]___[value:surface.success]___[cond:_focusVisible",
       "color]___[value:text.link",
+      "fontWeight]___[value:normal",
       "textDecoration]___[value:underline",
-      "textDecorationThickness]___[value:1px",
+      "transitionProperty]___[value:unset",
+      "transitionTimingFunction]___[value:unset",
+      "transitionDuration]___[value:unset",
       "textDecoration]___[value:none]___[cond:_hover",
-      "background]___[value:surface.hover]___[cond:_active",
+      "boxShadow]___[value:none]___[cond:_focusVisible",
+      "outline]___[value:3px]___[cond:_focusVisible",
+      "borderRadius]___[value:xsmall]___[cond:_focusVisible",
+      "outlineColor]___[value:stroke.default]___[cond:_focusVisible",
+      "outlineOffset]___[value:3px]___[cond:_focusVisible",
+      "outlineStyle]___[value:solid]___[cond:_focusVisible",
       "paddingBlock]___[value:xxsmall",
       "minHeight]___[value:24",
       "textStyle]___[value:label.small",
-      "minHeight]___[value:19",
-      "paddingBlock]___[value:3xsmall",
+      "minHeight]___[value:large",
+      "paddingBlock]___[value:4xsmall",
       "lineHeight]___[value:1",
       "minHeight]___[value:unset",
+      "--shadow-width]___[value:3px",
       "height]___[value:xxlarge",
       "width]___[value:xxlarge",
       "marginInline]___[value:0]___[cond:& svg",
       "marginBlock]___[value:0]___[cond:& svg",
       "width]___[value:medium]___[cond:& svg",
       "height]___[value:medium]___[cond:& svg",
+      "--shadow-width]___[value:2px",
       "height]___[value:large",
       "width]___[value:large",
       "width]___[value:small]___[cond:& svg",
       "height]___[value:small]___[cond:& svg",
       "paddingInline]___[value:xxsmall",
       "userSelect]___[value:none",
-      "gap]___[value:xxsmall",
       "color]___[value:text.action]___[cond:_hover",
       "outline]___[value:2px solid]___[cond:_focus",
       "outlineOffset]___[value:4xsmall]___[cond:_focus",
@@ -170,9 +179,7 @@
       "gap]___[value:4xsmall",
       "background]___[value:surface.actionSubtle",
       "outlineColor]___[value:stroke.subtle",
-      "paddingBlock]___[value:4xsmall",
       "borderRadius]___[value:large",
-      "minHeight]___[value:large",
       "transitionProperty]___[value:border-color, background, box-shadow, color",
       "borderColor]___[value:stroke.disabled]___[cond:_disabled",
       "borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
@@ -307,6 +314,7 @@
       "animation]___[value:drawer-out-bottom]___[cond:_closed",
       "--size]___[value:sizes.surface.3xsmall",
       "paddingBlockStart]___[value:medium",
+      "gap]___[value:xsmall",
       "paddingBlockStart]___[value:small",
       "paddingBlockEnd]___[value:medium",
       "padding]___[value:medium",
@@ -538,6 +546,7 @@
       "marginBlockEnd]___[value:-1px]___[cond:_horizontal",
       "marginInlineEnd]___[value:-1px]___[cond:_vertical",
       "transitionProperty]___[value:color, background, border-color",
+      "paddingBlock]___[value:3xsmall",
       "color]___[value:text.strong]___[cond:_selected",
       "color]___[value:text.subtle]___[cond:_disabled<___>_hover",
       "borderColor]___[value:stroke.default]___[cond:_hover<___>_focusVisible",
@@ -557,7 +566,6 @@
       "borderBottomColor]___[value:transparent]___[cond:_selected<___>_horizontal",
       "borderRightColor]___[value:transparent]___[cond:_selected<___>_vertical",
       "outlineOffset]___[value:-3px]___[cond:_focusVisible",
-      "outlineColor]___[value:stroke.default]___[cond:_focusVisible",
       "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
       "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
       "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
@@ -616,6 +624,10 @@
       "paddingInlineEnd]___[value:xxlarge",
       "top]___[value:xxsmall",
       "right]___[value:xxsmall",
+      "flexDirection]___[value:row",
+      "background]___[value:surface.action.selected]___[cond:_on",
+      "background]___[value:surface.actionSubtle.active]___[cond:_on",
+      "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)]___[cond:_on",
       "--arrow-size]___[value:spacing.xxsmall",
       "--arrow-background]___[value:colors.surface.action",
       "height]___[value:200px",

package/dist/styles.css

@@ -202,8 +202,8 @@
     display: inline-flex;
 }
 
-  .gap_xsmall {
-    gap: var(--spacing-xsmall);
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
 }
 
   .td_none {
@@ -255,10 +255,6 @@
     text-decoration: underline;
 }
 
-  .td-t_1px {
-    text-decoration-thickness: 1px;
-}
-
   .py_xxsmall {
     padding-block: var(--spacing-xxsmall);
 }
@@ -267,18 +263,22 @@
     min-height: var(--sizes-24);
 }
 
-  .min-h_19 {
-    min-height: var(--sizes-19);
+  .min-h_large {
+    min-height: var(--sizes-large);
 }
 
-  .py_3xsmall {
-    padding-block: var(--spacing-3xsmall);
+  .py_4xsmall {
+    padding-block: var(--spacing-4xsmall);
 }
 
   .min-h_unset {
     min-height: unset;
 }
 
+  .\--shadow-width_3px {
+    --shadow-width: 3px;
+}
+
   .h_xxlarge {
     height: var(--sizes-xxlarge);
 }
@@ -287,6 +287,10 @@
     width: var(--sizes-xxlarge);
 }
 
+  .\--shadow-width_2px {
+    --shadow-width: 2px;
+}
+
   .h_large {
     height: var(--sizes-large);
 }
@@ -304,10 +308,6 @@
     user-select: none;
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .gap_4xsmall {
     gap: var(--spacing-4xsmall);
 }
@@ -316,18 +316,10 @@
     background: var(--colors-surface-action-subtle);
 }
 
-  .py_4xsmall {
-    padding-block: var(--spacing-4xsmall);
-}
-
   .bdr_large {
     border-radius: var(--radii-large);
 }
 
-  .min-h_large {
-    min-height: var(--sizes-large);
-}
-
   .w_medium {
     width: var(--sizes-medium);
 }
@@ -508,6 +500,10 @@
     padding-block-start: var(--spacing-medium);
 }
 
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
+}
+
   .pbs_small {
     padding-block-start: var(--spacing-small);
 }
@@ -821,6 +817,10 @@
     table-layout: fixed;
 }
 
+  .py_3xsmall {
+    padding-block: var(--spacing-3xsmall);
+}
+
   .ring_3px_solid {
     outline: 3px solid;
 }
@@ -1120,6 +1120,25 @@
     transition-property: all;
 }
 
+  .fw_normal {
+    font-weight: var(--font-weights-normal);
+}
+
+  .trs-prop_unset {
+    --transition-prop: unset;
+    transition-property: unset;
+}
+
+  .trs-tmf_unset {
+    --transition-easing: unset;
+    transition-timing-function: unset;
+}
+
+  .trs-dur_unset {
+    --transition-duration: unset;
+    transition-duration: unset;
+}
+
   .lh_1 {
     line-height: 1;
 }
@@ -1345,6 +1364,10 @@
     right: var(--spacing-xxsmall);
 }
 
+  .flex-d_row {
+    flex-direction: row;
+}
+
   .trs-dur_default {
     --transition-duration: default;
     transition-duration: default;
@@ -1791,6 +1814,18 @@
     display: inline-block;
 }
 
+  .on\:bg_surface\.action\.selected:is([data-state="on"]) {
+    background: var(--colors-surface-action-selected);
+}
+
+  .on\:bg_surface\.actionSubtle\.active:is([data-state="on"]) {
+    background: var(--colors-surface-action-subtle-active);
+}
+
+  .on\:bx-sh_inset_0_0_0_1px_var\(--shadow-color\):is([data-state="on"]) {
+    box-shadow: inset 0 0 0 1px var(--shadow-color);
+}
+
   .\[\&\]\:w_100\% {
     width: 100%;
 }
@@ -2024,16 +2059,16 @@
     --shadow-color: var(--colors-stroke-default);
 }
 
-  .focusVisible\:bx-sh_inset_0_0_0_2px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
-    box-shadow: inset 0 0 0 2px var(--shadow-color);
-}
-
   .focusVisible\:bx-sh_inset_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
     box-shadow: inset 0 0 0 3px var(--shadow-color);
 }
 
-  .focusVisible\:bx-sh_inset_0_0_0_3px_var\(--shadow-color\)\,_inset_0px_0px_0px_6px_currentcolor:is(:focus-visible, [data-focus-visible]) {
-    box-shadow: inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor;
+  .focusVisible\:bx-sh_inset_0_0_0_var\(--shadow-width\,_3px\)_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color);
+}
+
+  .focusVisible\:bx-sh_inset_0_0_0_var\(--shadow-width\,_3px\)_var\(--shadow-color\)\,_inset_0px_0px_0px_calc\(var\(--shadow-width\,_3px\)_\*_2\)_currentcolor:is(:focus-visible, [data-focus-visible]) {
+    box-shadow: inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor;
 }
 
   .focusVisible\:bx-sh-c_surface\.danger:is(:focus-visible, [data-focus-visible]) {
@@ -2044,6 +2079,22 @@
     --shadow-color: var(--colors-surface-success);
 }
 
+  .focusVisible\:bx-sh_none:is(:focus-visible, [data-focus-visible]) {
+    box-shadow: none;
+}
+
+  .focusVisible\:ring_3px:is(:focus-visible, [data-focus-visible]) {
+    outline: 3px;
+}
+
+  .focusVisible\:bdr_xsmall:is(:focus-visible, [data-focus-visible]) {
+    border-radius: var(--radii-xsmall);
+}
+
+  .focusVisible\:ring-o_3px:is(:focus-visible, [data-focus-visible]) {
+    outline-offset: 3px;
+}
+
   .focus\:ring_2px_solid:is(:focus, [data-focus]) {
     outline: 2px solid;
 }
@@ -2113,6 +2164,14 @@
     width: var(--width);
 }
 
+  .focusVisible\:ring-c_stroke\.default:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--colors-stroke-default);
+}
+
+  .focusVisible\:outline-style_solid:is(:focus-visible, [data-focus-visible]) {
+    outline-style: solid;
+}
+
   .focus\:ring-c_stroke\.default:is(:focus, [data-focus]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -2137,10 +2196,6 @@
     outline-color: var(--colors-surface-action);
 }
 
-  .focusVisible\:ring-c_stroke\.default:is(:focus-visible, [data-focus-visible]) {
-    outline-color: var(--colors-stroke-default);
-}
-
   .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
     background: var(--colors-surface-action-subtle-hover);
 }
@@ -2273,10 +2328,6 @@
     background: var(--colors-surface-success-active);
 }
 
-  .active\:bg_surface\.hover:is(:active, [data-active]) {
-    background: var(--colors-surface-hover);
-}
-
   .active\:bg_surface\.active:is(:active, [data-active]) {
     background: var(--colors-surface-active);
 }
@@ -2567,8 +2618,8 @@
     outline-color: var(--colors-stroke-default);
 }
 
-  .hover\:focusVisible\:bx-sh_inset_0_0_0_3px_var\(--shadow-color\):is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
-    box-shadow: inset 0 0 0 3px var(--shadow-color);
+  .hover\:focusVisible\:bx-sh_inset_0_0_0_var\(--shadow-width\,_3px\)_var\(--shadow-color\):is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color);
 }
 
   .hover\:\[\&_svg\]\:c_icon\.default:is(:hover, [data-hover]) svg {

package/es/Accordion.js

@@ -106,7 +106,7 @@ const accordionRecipe = sva({
           _focusVisible: {
             outline: "none",
             boxShadowColor: "stroke.default",
-            boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+            boxShadow: "inset 0 0 0 3px var(--shadow-color)"
           }
         },
         itemContent: {

package/es/Button.js

@@ -20,10 +20,9 @@ export const buttonBaseRecipe = cva({
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: "xsmall",
+    gap: "xxsmall",
     cursor: "pointer",
     textDecoration: "none",
-    textStyle: "label.medium",
     fontWeight: "bold",
     transitionProperty: "all",
     transitionDuration: "fast",
@@ -46,7 +45,7 @@ export const buttonBaseRecipe = cva({
       }
     },
     _focusVisible: {
-      boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+      boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)"
     },
     _motionReduce: {
       transition: "none",
@@ -70,7 +69,7 @@ export const buttonBaseRecipe = cva({
           background: "surface.action.active"
         },
         _focusVisible: {
-          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+          boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor"
         }
       },
       secondary: {
@@ -91,7 +90,7 @@ export const buttonBaseRecipe = cva({
           boxShadow: "inset 0 0 0 1px var(--shadow-color)",
           background: "surface.actionSubtle.hover",
           _focusVisible: {
-            boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+            boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)"
           }
         },
         _active: {
@@ -124,7 +123,7 @@ export const buttonBaseRecipe = cva({
         },
         _focusVisible: {
           boxShadowColor: "surface.danger",
-          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+          boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor"
         }
       },
       success: {
@@ -138,19 +137,27 @@ export const buttonBaseRecipe = cva({
         },
         _focusVisible: {
           boxShadowColor: "surface.success",
-          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+          boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor"
         }
       },
       link: {
         background: "transparent",
         color: "text.link",
+        fontWeight: "normal",
         textDecoration: "underline",
-        textDecorationThickness: "1px",
+        transitionProperty: "unset",
+        transitionTimingFunction: "unset",
+        transitionDuration: "unset",
         _hover: {
           textDecoration: "none"
         },
-        _active: {
-          background: "surface.hover"
+        _focusVisible: {
+          boxShadow: "none",
+          outline: "3px",
+          borderRadius: "xsmall",
+          outlineColor: "stroke.default",
+          outlineOffset: "3px",
+          outlineStyle: "solid"
         }
       }
     }
@@ -163,15 +170,16 @@ export const buttonRecipe = cva({
   variants: {
     size: {
       medium: {
-        paddingInline: "xsmall",
+        textStyle: "label.medium",
+        paddingInline: "medium",
         paddingBlock: "xxsmall",
         minHeight: "24"
       },
       small: {
         textStyle: "label.small",
-        minHeight: "19",
+        minHeight: "large",
         paddingInline: "small",
-        paddingBlock: "3xsmall"
+        paddingBlock: "4xsmall"
       }
     }
   }
@@ -187,6 +195,7 @@ export const iconButtonRecipe = cva({
   variants: {
     size: {
       medium: {
+        "--shadow-width": "3px",
         height: "xxlarge",
         width: "xxlarge",
         "& svg": {
@@ -199,6 +208,7 @@ export const iconButtonRecipe = cva({
         paddingBlock: "xsmall"
       },
       small: {
+        "--shadow-width": "2px",
         height: "large",
         width: "large",
         "& svg": {
@@ -257,9 +267,9 @@ export const Button = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }),
     css: css.raw(buttonBaseRecipe.raw({
       variant
-    }), buttonRecipe.raw({
+    }), variant !== "link" ? buttonRecipe.raw({
       size
-    }), cssProp),
+    }) : undefined, cssProp),
     ref: ref
   });
 });

package/es/FileUpload.js

@@ -164,11 +164,11 @@ export const FileUploadLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ...props
   } = _ref3;
   return /*#__PURE__*/_jsx(InternalFileUploadLabel, {
+    ref: ref,
     asChild: true,
     children: /*#__PURE__*/_jsx(Label, {
       textStyle: textStyle,
       fontWeight: fontWeight,
-      ref: ref,
       ...props,
       children: children
     })

package/es/ToggleGroup.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { toggleGroupAnatomy, ToggleGroup } from "@ark-ui/react";
+import { css, cva, sva } from "@ndla/styled-system/css";
+import { IconButton } from "./Button";
+import { createStyleContext } from "./createStyleContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+const toggleGroupRecipe = sva({
+  slots: toggleGroupAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "4xsmall"
+    }
+  }
+});
+const toggleGroupItemRecipe = cva({
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      primary: {
+        _on: {
+          background: "surface.action.selected"
+        }
+      },
+      secondary: {
+        _on: {
+          background: "surface.actionSubtle.active"
+        }
+      },
+      tertiary: {
+        _on: {
+          background: "surface.actionSubtle.active",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(toggleGroupRecipe);
+export const ToggleGroupRoot = withProvider(ToggleGroup.Root, "root", {
+  baseComponent: true
+});
+const InternalToggleGroupItem = withContext(ToggleGroup.Item, "item");
+export const ToggleGroupItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    variant,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalToggleGroupItem, {
+    ...props,
+    css: css.raw(toggleGroupItemRecipe.raw({
+      variant
+    }), cssProp),
+    ref: ref,
+    asChild: true,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      variant: variant,
+      children: children
+    })
+  });
+});

package/es/index.js

@@ -12,6 +12,7 @@ export { Badge } from "./Badge";
 export { BlockQuote } from "./BlockQuote";
 export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe } from "./Button";
 export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
+export { ToggleGroupRoot, ToggleGroupItem } from "./ToggleGroup";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput } from "./Checkbox";
 export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody } from "./Dialog";

package/lib/Accordion.d.ts

@@ -30,7 +30,7 @@ declare const accordionRecipe: import("@ndla/styled-system/types").SlotRecipeRun
                 _focusVisible: {
                     outline: "none";
                     boxShadowColor: "stroke.default";
-                    boxShadow: "inset 0 0 0 2px var(--shadow-color)";
+                    boxShadow: "inset 0 0 0 3px var(--shadow-color)";
                 };
             };
             itemContent: {

package/lib/Accordion.js

@@ -112,7 +112,7 @@ const accordionRecipe = (0, _css.sva)({
           _focusVisible: {
             outline: "none",
             boxShadowColor: "stroke.default",
-            boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+            boxShadow: "inset 0 0 0 3px var(--shadow-color)"
           }
         },
         itemContent: {

package/lib/Button.d.ts

@@ -23,7 +23,7 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
                 background: "surface.action.active";
             };
             _focusVisible: {
-                boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor";
+                boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor";
             };
         };
         secondary: {
@@ -44,7 +44,7 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
                 boxShadow: "inset 0 0 0 1px var(--shadow-color)";
                 background: "surface.actionSubtle.hover";
                 _focusVisible: {
-                    boxShadow: "inset 0 0 0 3px var(--shadow-color)";
+                    boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)";
                 };
             };
             _active: {
@@ -77,7 +77,7 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
             };
             _focusVisible: {
                 boxShadowColor: "surface.danger";
-                boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor";
+                boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor";
             };
         };
         success: {
@@ -91,19 +91,27 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
             };
             _focusVisible: {
                 boxShadowColor: "surface.success";
-                boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor";
+                boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor";
             };
         };
         link: {
             background: "transparent";
             color: "text.link";
+            fontWeight: "normal";
             textDecoration: "underline";
-            textDecorationThickness: "1px";
+            transitionProperty: "unset";
+            transitionTimingFunction: "unset";
+            transitionDuration: "unset";
             _hover: {
                 textDecoration: "none";
             };
-            _active: {
-                background: "surface.hover";
+            _focusVisible: {
+                boxShadow: "none";
+                outline: "3px";
+                borderRadius: "xsmall";
+                outlineColor: "stroke.default";
+                outlineOffset: "3px";
+                outlineStyle: "solid";
             };
         };
     };
@@ -111,21 +119,23 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
 export declare const buttonRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     size: {
         medium: {
-            paddingInline: "xsmall";
+            textStyle: "label.medium";
+            paddingInline: "medium";
             paddingBlock: "xxsmall";
             minHeight: "24";
         };
         small: {
             textStyle: "label.small";
-            minHeight: "19";
+            minHeight: "large";
             paddingInline: "small";
-            paddingBlock: "3xsmall";
+            paddingBlock: "4xsmall";
         };
     };
 }>;
 export declare const iconButtonRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     size: {
         medium: {
+            "--shadow-width": "3px";
             height: "xxlarge";
             width: "xxlarge";
             "& svg": {
@@ -138,6 +148,7 @@ export declare const iconButtonRecipe: import("@ndla/styled-system/types").Recip
             paddingBlock: "xsmall";
         };
         small: {
+            "--shadow-width": "2px";
             height: "large";
             width: "large";
             "& svg": {
@@ -156,7 +167,7 @@ type ButtonVariant = Exclude<Variant, "clear" | "clearSubtle">;
 export type ButtonVariantProps = {
     variant?: ButtonVariant;
 } & RecipeVariantProps<typeof buttonRecipe>;
-interface BaseButtonProps extends HTMLArkProps<"button">, JsxStyleProps {
+export interface BaseButtonProps extends HTMLArkProps<"button">, JsxStyleProps {
     loading?: boolean;
     loadingContent?: ReactNode;
     replaceContent?: boolean;

package/lib/Button.js

@@ -25,10 +25,9 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: "xsmall",
+    gap: "xxsmall",
     cursor: "pointer",
     textDecoration: "none",
-    textStyle: "label.medium",
     fontWeight: "bold",
     transitionProperty: "all",
     transitionDuration: "fast",
@@ -51,7 +50,7 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
       }
     },
     _focusVisible: {
-      boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+      boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)"
     },
     _motionReduce: {
       transition: "none",
@@ -75,7 +74,7 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
           background: "surface.action.active"
         },
         _focusVisible: {
-          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+          boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor"
         }
       },
       secondary: {
@@ -96,7 +95,7 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
           boxShadow: "inset 0 0 0 1px var(--shadow-color)",
           background: "surface.actionSubtle.hover",
           _focusVisible: {
-            boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+            boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)"
           }
         },
         _active: {
@@ -129,7 +128,7 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
         },
         _focusVisible: {
           boxShadowColor: "surface.danger",
-          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+          boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor"
         }
       },
       success: {
@@ -143,19 +142,27 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
         },
         _focusVisible: {
           boxShadowColor: "surface.success",
-          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+          boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor"
         }
       },
       link: {
         background: "transparent",
         color: "text.link",
+        fontWeight: "normal",
         textDecoration: "underline",
-        textDecorationThickness: "1px",
+        transitionProperty: "unset",
+        transitionTimingFunction: "unset",
+        transitionDuration: "unset",
         _hover: {
           textDecoration: "none"
         },
-        _active: {
-          background: "surface.hover"
+        _focusVisible: {
+          boxShadow: "none",
+          outline: "3px",
+          borderRadius: "xsmall",
+          outlineColor: "stroke.default",
+          outlineOffset: "3px",
+          outlineStyle: "solid"
         }
       }
     }
@@ -168,15 +175,16 @@ const buttonRecipe = exports.buttonRecipe = (0, _css.cva)({
   variants: {
     size: {
       medium: {
-        paddingInline: "xsmall",
+        textStyle: "label.medium",
+        paddingInline: "medium",
         paddingBlock: "xxsmall",
         minHeight: "24"
       },
       small: {
         textStyle: "label.small",
-        minHeight: "19",
+        minHeight: "large",
         paddingInline: "small",
-        paddingBlock: "3xsmall"
+        paddingBlock: "4xsmall"
       }
     }
   }
@@ -192,6 +200,7 @@ const iconButtonRecipe = exports.iconButtonRecipe = (0, _css.cva)({
   variants: {
     size: {
       medium: {
+        "--shadow-width": "3px",
         height: "xxlarge",
         width: "xxlarge",
         "& svg": {
@@ -204,6 +213,7 @@ const iconButtonRecipe = exports.iconButtonRecipe = (0, _css.cva)({
         paddingBlock: "xsmall"
       },
       small: {
+        "--shadow-width": "2px",
         height: "large",
         width: "large",
         "& svg": {
@@ -262,9 +272,9 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref)
     }),
     css: _css.css.raw(buttonBaseRecipe.raw({
       variant
-    }), buttonRecipe.raw({
+    }), variant !== "link" ? buttonRecipe.raw({
       size
-    }), cssProp),
+    }) : undefined, cssProp),
     ref: ref
   });
 });

package/lib/FileUpload.js

@@ -170,11 +170,11 @@ const FileUploadLabel = exports.FileUploadLabel = /*#__PURE__*/(0, _react.forwar
     ...props
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalFileUploadLabel, {
+    ref: ref,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
       textStyle: textStyle,
       fontWeight: fontWeight,
-      ref: ref,
       ...props,
       children: children
     })

package/lib/ToggleGroup.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { ToggleGroup } from "@ark-ui/react";
+import { RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+import { IconButtonProps } from "./Button";
+declare const toggleGroupRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item">>;
+declare const toggleGroupItemRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    variant: {
+        primary: {
+            _on: {
+                background: "surface.action.selected";
+            };
+        };
+        secondary: {
+            _on: {
+                background: "surface.actionSubtle.active";
+            };
+        };
+        tertiary: {
+            _on: {
+                background: "surface.actionSubtle.active";
+                boxShadow: "inset 0 0 0 1px var(--shadow-color)";
+            };
+        };
+    };
+}>;
+export type ToggleGroupVariantProps = RecipeVariantProps<typeof toggleGroupRecipe>;
+export type ToggleGroupRootProps = ToggleGroup.RootProps & JsxStyleProps & ToggleGroupVariantProps;
+export declare const ToggleGroupRoot: import("react").ForwardRefExoticComponent<ToggleGroup.RootProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {} & import("react").RefAttributes<HTMLDivElement>>;
+export type ToggleGroupItemVariantProps = RecipeVariantProps<typeof toggleGroupItemRecipe>;
+export type ToggleGroupItemProps = ToggleGroup.ItemProps & IconButtonProps & ToggleGroupItemVariantProps;
+export declare const ToggleGroupItem: import("react").ForwardRefExoticComponent<ToggleGroup.ItemProps & import("./Button").BaseButtonProps & {
+    variant?: ("clear" | "primary" | "secondary" | "tertiary" | "clearSubtle" | "danger" | "success") | undefined;
+} & {
+    size?: "small" | "medium" | undefined;
+} & {
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/ToggleGroup.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToggleGroupRoot = exports.ToggleGroupItem = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _Button = require("./Button");
+var _createStyleContext = require("./createStyleContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const toggleGroupRecipe = (0, _css.sva)({
+  slots: _react2.toggleGroupAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "4xsmall"
+    }
+  }
+});
+const toggleGroupItemRecipe = (0, _css.cva)({
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      primary: {
+        _on: {
+          background: "surface.action.selected"
+        }
+      },
+      secondary: {
+        _on: {
+          background: "surface.actionSubtle.active"
+        }
+      },
+      tertiary: {
+        _on: {
+          background: "surface.actionSubtle.active",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(toggleGroupRecipe);
+const ToggleGroupRoot = exports.ToggleGroupRoot = withProvider(_react2.ToggleGroup.Root, "root", {
+  baseComponent: true
+});
+const InternalToggleGroupItem = withContext(_react2.ToggleGroup.Item, "item");
+const ToggleGroupItem = exports.ToggleGroupItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    variant,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToggleGroupItem, {
+    ...props,
+    css: _css.css.raw(toggleGroupItemRecipe.raw({
+      variant
+    }), cssProp),
+    ref: ref,
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      variant: variant,
+      children: children
+    })
+  });
+});

package/lib/index.d.ts

@@ -16,6 +16,8 @@ export { BlockQuote } from "./BlockQuote";
 export type { ButtonProps, ButtonVariantProps, IconButtonProps, IconButtonVariantProps } from "./Button";
 export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe } from "./Button";
 export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
+export { ToggleGroupRoot, ToggleGroupItem } from "./ToggleGroup";
+export type { ToggleGroupRootProps, ToggleGroupVariantProps } from "./ToggleGroup";
 export type { CheckboxVariantProps, CheckboxRootProps } from "./Checkbox";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, } from "./Checkbox";
 export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, ComboboxListProps, } from "./Combobox";

package/lib/index.js

@@ -1017,6 +1017,18 @@ Object.defineProperty(exports, "ToastTitle", {
     return _Toast.ToastTitle;
   }
 });
+Object.defineProperty(exports, "ToggleGroupItem", {
+  enumerable: true,
+  get: function () {
+    return _ToggleGroup.ToggleGroupItem;
+  }
+});
+Object.defineProperty(exports, "ToggleGroupRoot", {
+  enumerable: true,
+  get: function () {
+    return _ToggleGroup.ToggleGroupRoot;
+  }
+});
 Object.defineProperty(exports, "TooltipArrow", {
   enumerable: true,
   get: function () {
@@ -1179,6 +1191,7 @@ var _Badge = require("./Badge");
 var _BlockQuote = require("./BlockQuote");
 var _Button = require("./Button");
 var _Card = require("./Card/Card");
+var _ToggleGroup = require("./ToggleGroup");
 var _Checkbox = require("./Checkbox");
 var _Combobox = require("./Combobox");
 var _Dialog = require("./Dialog");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.17-alpha.0",
+  "version": "1.0.19-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -29,11 +29,11 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^3.9.0",
-    "@ndla/styled-system": "^0.0.15",
+    "@ndla/styled-system": "^0.0.17",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.23",
+    "@ndla/preset-panda": "^0.0.25",
     "@pandacss/dev": "^0.45.2"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "58687255a5be26e49b6a21d830cf0af5be37b9fa"
+  "gitHead": "4271f1708f835715edca5fd10f6ee4b182a207b4"
 }