@vygruppen/spor-react 13.2.0 → 13.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.2.0",
+  "version": "13.2.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.0.2",
+    "@vygruppen/spor-design-tokens": "5.0.3",
     "@vygruppen/spor-icon-react": "5.0.0",
     "@vygruppen/spor-loader": "0.7.0"
   },
@@ -64,8 +64,8 @@
     "react-dom": "19.2.3",
     "tsup": "^7.2.0",
     "typescript": "^5.7.3",
-    "@vygruppen/tsconfig": "0.1.1",
-    "@vygruppen/eslint-config": "2.2.0"
+    "@vygruppen/eslint-config": "2.2.0",
+    "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/alert/Alert.tsx

@@ -9,6 +9,7 @@ import {
 import { IconComponent } from "@vygruppen/spor-icon-react";
 
 import { CloseButton } from "@/button";
+import { createTexts, useTranslation } from "@/i18n";
 
 import { AlertIcon } from "./AlertIcon";
 
@@ -58,6 +59,7 @@ export const Alert = ({
     children,
   } = props;
   const { open, onClose } = useDisclosure({ defaultOpen: true });
+  const { t } = useTranslation();
 
   const handleAlertClose = () => {
     onClose();
@@ -67,9 +69,21 @@ export const Alert = ({
   const recipe = useSlotRecipe({ key: "alert" });
   const styles = recipe({ variant: props.variant });
 
+  const getAriaLabelText = () => {
+    const variant = props.variant;
+    if (variant === "important" || variant === "alt")
+      return texts.ariaLabelAlertWarning;
+    if (variant === "error" || variant === "error-secondary")
+      return texts.ariaLabelAlertError;
+    if (variant === "success") return texts.ariaLabelAlertSuccess;
+    return texts.ariaLabelAlertInformative;
+  };
+
+  const ariaLabel = t(getAriaLabelText());
+
   if (!open) return null;
   return (
-    <ChakraAlert.Root ref={ref} {...props}>
+    <ChakraAlert.Root ref={ref} role="alert" aria-label={ariaLabel} {...props}>
       <ChakraAlert.Content
         flexDirection={title ? "column" : "row"}
         data-part="content"
@@ -114,3 +128,30 @@ export const Alert = ({
     </ChakraAlert.Root>
   );
 };
+
+const texts = createTexts({
+  ariaLabelAlertInformative: {
+    en: "Announcement",
+    nb: "Kunngjøring",
+    nn: "Kunngjering",
+    sv: "Meddelande",
+  },
+  ariaLabelAlertWarning: {
+    en: "Warning",
+    nb: "Advarsel",
+    nn: "Varsel",
+    sv: "Varning",
+  },
+  ariaLabelAlertError: {
+    en: "Error",
+    nb: "Feil",
+    nn: "Feil",
+    sv: "Fel",
+  },
+  ariaLabelAlertSuccess: {
+    en: "Success",
+    nb: "Suksess",
+    nn: "Suksess",
+    sv: "Framgång",
+  },
+});

package/src/input/Field.tsx

@@ -54,6 +54,7 @@ export type FieldBaseProps = {
   floatingLabel?: boolean;
   shouldFloat?: boolean;
   labelAsChild?: boolean;
+  gap?: string | number;
 };
 
 export type FieldProps = Omit<
@@ -100,13 +101,14 @@ export const Field = ({
     id,
     shouldFloat,
     labelAsChild,
+    gap,
     ...rest
   } = props;
   const recipe = useSlotRecipe({ key: "field" });
   const styles = recipe();
 
   return (
-    <Stack gap="2" ref={ref} width="100%" {...rest}>
+    <Stack ref={ref} width="100%" {...rest}>
       <ChakraField.Root
         disabled={disabled}
         invalid={invalid}
@@ -115,6 +117,7 @@ export const Field = ({
         css={styles.root}
         direction={direction}
         id={id}
+        gap={gap}
       >
         {label && !floatingLabel && (
           <Label asChild={labelAsChild} aria-hidden>

package/src/input/NumericStepper.tsx

@@ -87,6 +87,7 @@ export const NumericStepper = ({
     label,
     helperText,
     errorText,
+    gap,
     ...rest
   } = props;
 
@@ -116,6 +117,7 @@ export const NumericStepper = ({
       invalid={invalid}
       readOnly={readOnly}
       required={required}
+      gap={gap}
     >
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
@@ -167,7 +169,10 @@ export const NumericStepper = ({
       ) : (
         <Text
           aria-live="assertive"
-          paddingX="0.95rem"
+          width={`${Math.max(value.toString().length + 1, 3)}ch`}
+          paddingX={0.5}
+          padding={0}
+          textAlign="center"
           aria-label={
             ariaLabelContext.plural === ""
               ? ""

package/src/theme/recipes/badge.ts

@@ -66,24 +66,40 @@ export const badgeRecipie = defineRecipe({
           color: "icon.critical",
         },
       },
+      brightRed: {
+        backgroundColor: {
+          _light: "brightRed",
+          _dark: "brightRed",
+        },
+        color: {
+          _light: "pink",
+          _dark: "pink",
+        },
+        "& svg": {
+          color: {
+            _light: "pink",
+            _dark: "pink",
+          },
+        },
+      },
     },
     size: {
       sm: {
-        fontSize: "desktop.xs",
+        fontSize: "desktop.2xs",
         paddingX: "0.5",
         paddingY: "0",
         fontWeight: "normal",
         borderRadius: "xxs",
       },
       md: {
-        fontSize: "desktop.xs",
+        fontSize: "desktop.2xs",
         paddingX: "1",
         paddingY: "0.5",
         fontWeight: "bold",
         borderRadius: "xs",
       },
       lg: {
-        fontSize: "desktop.sm",
+        fontSize: "desktop.xs",
         paddingX: "1.5",
         paddingY: "0.5",
         fontWeight: "bold",

package/src/theme/recipes/pressable-card.ts

@@ -64,13 +64,13 @@ export const pressableCardRecipe = defineRecipe({
       accent: {
         boxShadow: "0px 1px 3px 0px var(--shadow-color)",
         shadowColor: "surface.disabled",
-        background: "surface.success",
+        background: "surface.accent",
         _hover: {
-          background: "surface.success.hover",
+          background: "surface.accent.hover",
 
           boxShadow: "0px 2px 6px 0px var(--shadow-color)",
           _active: {
-            background: "surface.success.active",
+            background: "surface.accent.active",
             boxShadow: "none",
           },
         },

package/src/theme/slot-recipes/numeric-stepper.ts

@@ -11,16 +11,17 @@ export const numericStepperRecipe = defineSlotRecipe({
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
+        gap: 1,
       },
     },
     input: {
       fontSize: "sm",
       fontWeight: "bold",
-      marginX: 0.5,
       padding: 0,
       paddingX: 0.5,
       borderRadius: "xs",
-      outline: "none",
+      outline: "1px solid",
+      outlineColor: "outline.core",
       height: "auto",
       textAlign: "center",
       transitionProperty: "common",