@vygruppen/spor-react 12.22.1 → 12.22.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.22.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.22.2 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/index.mjs           326.81 KB
+ESM dist/index.mjs           326.79 KB
 ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       691.91 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       691.66 KB
-ESM ⚡️ Build success in 2807ms
-CJS dist/index.cjs           350.70 KB
+ESM ⚡️ Build success in 2623ms
+CJS dist/index.cjs           350.69 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       691.66 KB
+CJS dist/index.cjs.map       691.91 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2808ms
-DTS ⚡️ Build success in 21325ms
+CJS ⚡️ Build success in 2626ms
+DTS ⚡️ Build success in 20971ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        146.60 KB
+DTS dist/index.d.ts        146.71 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       146.60 KB
+DTS dist/index.d.cts       146.71 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@12.22.1 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.22.2 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.2.3] injecting env (0) from .env -- tip: ⚙️  enable debug logging with { debug: true }
+[dotenv@17.2.3] injecting env (0) from .env -- tip: ⚙️  load multiple .env files with { path: ['.env.local', '.env'] }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @vygruppen/spor-react
 
+## 12.22.2
+
+### Patch Changes
+
+- 815694c: Improvements to Autocomplete accessibility and bugfixes.
+
+  Also fix floatingLabel fontSize not being set to 2xs.
+
+- 877bd20: Remove unessesary ids from numeric stepper buttons
+- 98504fe: Change from using aria-label in Box to adding a VisuallyHidden elements for better screen reader support of AlertIcon.
+- 3bfb2b1: Align Text font-size breakpoint with other components
+
+  Changed responsive font-size steps so Text switches size at sm (568px) instead of lg (1025px). This fixes visual size mismatches across the design system.
+
 ## 12.22.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -1043,7 +1043,10 @@ var useScrollDirection = () => {
 var AlertIcon = React20.forwardRef(
   ({ variant, customIcon: CustomAlertIcon }, ref) => {
     const { t } = useTranslation();
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ref, "aria-label": t(texts5[variant]), children: CustomAlertIcon ? /* @__PURE__ */ jsxRuntime.jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsxRuntime.jsx(BaseAlertIcon, { variant }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: t(texts5[variant]) }),
+      CustomAlertIcon ? /* @__PURE__ */ jsxRuntime.jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsxRuntime.jsx(BaseAlertIcon, { variant })
+    ] });
   }
 );
 AlertIcon.displayName = "AlertIcon";
@@ -1919,12 +1922,12 @@ var floatingLabelStyles = react.defineStyle({
     opacity: 0.4
   },
   pos: "absolute",
-  transition: "position",
+  transition: "top 160ms ease, font-size 160ms ease",
   top: "0.9rem",
   color: "text",
   fontSize: ["mobile.sm", "desktop.sm"],
   "&[data-float]": {
-    fontSize: ["mobile.xs", "desktop.xs"],
+    fontSize: ["mobile.2xs", "desktop.2xs"],
     color: "text",
     top: "0.3rem"
   }
@@ -1998,7 +2001,7 @@ var Field3 = React20__namespace.forwardRef(
                 children: renderLabelWithIndicator(label, labelAsChild)
               }
             ),
-            errorText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { children: errorText })
+            errorText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { "aria-live": "polite", children: errorText })
           ]
         }
       ),
@@ -3123,7 +3126,7 @@ var SwitchButton = react.chakra(
   react.defineRecipe({
     base: {
       position: "absolute !important",
-      zIndex: "docked !important",
+      zIndex: "101 !important",
       // eslint-disable-next-line spor/use-semantic-tokens
       bg: "bg !important",
       outlineWidth: "1px !important",
@@ -3139,7 +3142,7 @@ var SwitchButton = react.chakra(
         },
         vertical: {
           top: "calc(50% - 15px)",
-          right: "12px",
+          right: "3rem",
           transform: "rotate(90deg)"
         }
       }
@@ -3254,7 +3257,7 @@ var Input = React20.forwardRef(
         errorText,
         id: props.id,
         labelAsChild,
-        label: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { fontSize: fontSize ?? "mobile.md", children: [
+        label: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Box, { visibility: "hidden", children: startElement }),
           label
         ] }),
@@ -3266,6 +3269,7 @@ var Input = React20.forwardRef(
             {
               pointerEvents: "none",
               paddingX: 2,
+              "aria-hidden": "true",
               fontSize: fontSize ?? "mobile.md",
               children: startElement
             }
@@ -3318,6 +3322,9 @@ var Autocomplete = ({
   filteredExternally,
   loading,
   disabled,
+  emptyLabel,
+  openOnClick = true,
+  openOnFocus = true,
   ...rest
 }) => {
   const { contains } = react.useFilter({ sensitivity: "base" });
@@ -3338,50 +3345,52 @@ var Autocomplete = ({
     () => filterChildren(children, collection.items),
     [children, collection.items]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.Combobox.Root,
-    {
-      ...rest,
-      collection,
-      onInputValueChange: (event) => {
-        if (!filteredExternally) {
-          filter(event.inputValue);
-        }
-        onInputValueChange == null ? void 0 : onInputValueChange(event);
-      },
-      positioning: {
-        placement: "bottom",
-        offset: {
-          mainAxis: 3,
-          crossAxis: -1
-        },
-        flip: false
+  const combobox = react.useCombobox({
+    collection,
+    openOnClick,
+    onInputValueChange: (event) => {
+      if (!filteredExternally) {
+        filter(event.inputValue);
+      }
+      onInputValueChange == null ? void 0 : onInputValueChange(event);
+    },
+    positioning: {
+      placement: "bottom",
+      offset: {
+        mainAxis: 3,
+        crossAxis: -1
       },
-      disabled,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Control, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Input, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              label: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Label, { children: label }),
-              variant,
-              labelAsChild: true,
-              startElement: leftIcon,
-              invalid,
-              helperText,
-              errorText,
-              required
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs" }) }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Content, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: !loading && t(texts14.noItemsFound) }),
-          loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredChildren })
-        ] }) })
-      ]
-    }
-  );
+      flip: false
+    },
+    disabled,
+    ...rest
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.RootProvider, { value: combobox, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Control, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Input, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          label: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Label, { children: label }),
+          variant,
+          labelAsChild: true,
+          startElement: leftIcon,
+          invalid,
+          helperText,
+          errorText,
+          required,
+          onFocus: () => {
+            if (openOnFocus)
+              combobox.setOpen(true);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: !loading && (emptyLabel ?? t(texts14.noItemsFound)) }),
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredChildren })
+    ] }) })
+  ] });
 };
 var AutocompleteItemGroup = react.Combobox.ItemGroup;
 var AutocompleteItemGroupLabel = react.Combobox.ItemGroupLabel;
@@ -3451,6 +3460,12 @@ var texts14 = createTexts({
     nn: "Ingen resultat",
     sv: "Inga resultat",
     en: "No results found"
+  },
+  clearValue: {
+    nb: "T\xF8m verdi",
+    nn: "T\xF8m verdi",
+    sv: "Rensa v\xE4rde",
+    en: "Clear value"
   }
 });
 var CardSelect = ({ size = "md", ...props }) => {
@@ -4016,7 +4031,6 @@ var NumericStepper = React20__namespace.default.forwardRef((props, ref) => {
     {
       css: styles.root,
       width: "auto",
-      id: idProperty,
       ref,
       label,
       helperText,
@@ -4041,8 +4055,7 @@ var NumericStepper = React20__namespace.default.forwardRef((props, ref) => {
                 focusOnAddButton();
               }
             },
-            disabled: disabled || value <= minValue,
-            id: value <= minValue ? void 0 : idProperty
+            disabled: disabled || value <= minValue
           }
         ),
         withInput ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -4053,7 +4066,7 @@ var NumericStepper = React20__namespace.default.forwardRef((props, ref) => {
             name: nameProperty,
             value,
             disabled,
-            id: value === 0 ? void 0 : idProperty,
+            id: idProperty,
             css: styles.input,
             width: `${Math.max(value.toString().length + 1, 3)}ch`,
             "aria-live": "assertive",
@@ -4091,8 +4104,7 @@ var NumericStepper = React20__namespace.default.forwardRef((props, ref) => {
               )
             ),
             onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
-            disabled: disabled || value >= maxValue,
-            id: value >= maxValue ? void 0 : idProperty
+            disabled: disabled || value >= maxValue
           }
         )
       ]
@@ -6300,10 +6312,10 @@ var attachedInputsRecipe = react.defineRecipe({
     },
     "& > *": {
       position: "relative",
-      zIndex: 0
+      zIndex: 100
     },
     "& > *:focus-within": {
-      zIndex: 1
+      zIndex: 101
     }
   },
   variants: {
@@ -7695,8 +7707,7 @@ var comboboxSlotRecipe = react.defineSlotRecipe({
     },
     label: {
       fontWeight: "medium",
-      userSelect: "none",
-      textStyle: "sm"
+      userSelect: "none"
     },
     input: {
       transition: "border-radius",
@@ -11616,8 +11627,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style.xxl["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style.xxl["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style.xxl["font-family"],
@@ -11628,8 +11637,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style["xl-display"]["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style["xl-display"]["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style["xl-display"]["font-family"],
@@ -11640,8 +11647,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style["xl-sans"]["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style["xl-sans"]["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style["xl-sans"]["font-family"],
@@ -11652,8 +11657,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style.lg["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style.lg["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style.lg["font-family"],
@@ -11664,8 +11667,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style["md-lg"]["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style["md-lg"]["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style["md-lg"]["font-family"],
@@ -11676,8 +11677,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style.md["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style.md["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style.md["font-family"],
@@ -11688,8 +11687,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style.sm["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style.sm["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style.sm["font-family"],
@@ -11700,8 +11697,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style.xs["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style.xs["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style.xs["font-family"],
@@ -11712,8 +11707,6 @@ var textStyles = react.defineTextStyles({
     value: {
       fontSize: [
         tokens23__namespace.default.font.style["2xs"]["font-size"].mobile,
-        null,
-        null,
         tokens23__namespace.default.font.style["2xs"]["font-size"].desktop
       ],
       fontFamily: tokens23__namespace.default.font.style["2xs"]["font-family"],