@holmdigital/components 1.2.2 → 1.2.4

package/dist/Button/Button.js

@@ -70,10 +70,10 @@ var Button = (0, import_react.forwardRef)(
     };
     const sizes = {
       small: {
-        padding: "0.25rem 0.5rem",
+        padding: "0.5rem 0.75rem",
         fontSize: "0.875rem",
-        minHeight: "32px"
-        // OBS: Kan bryta mot 44px om inte hanteras med margin
+        minHeight: "44px"
+        // Touch target safe (EN 301 549 9.2.5.5)
       },
       medium: {
         padding: "0.5rem 1rem",

package/dist/Button/Button.mjs

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-NDYRGXQ6.mjs";
+} from "../chunk-7V2LETZ6.mjs";
 export {
   Button
 };

package/dist/Dialog/Dialog.js

@@ -47,6 +47,7 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
 var Dialog = (0, import_react.forwardRef)(
   ({ isOpen, onClose, title, children, variant = "default", description, className, ...props }, ref) => {
     const dialogRef = (0, import_react.useRef)(null);
+    const scrollLockRef = (0, import_react.useRef)(false);
     (0, import_react.useImperativeHandle)(ref, () => dialogRef.current);
     (0, import_react.useEffect)(() => {
       const dialog = dialogRef.current;
@@ -54,14 +55,26 @@ var Dialog = (0, import_react.forwardRef)(
       if (isOpen) {
         if (!dialog.open) {
           dialog.showModal();
-          document.body.style.overflow = "hidden";
+          if (!scrollLockRef.current) {
+            document.body.style.overflow = "hidden";
+            scrollLockRef.current = true;
+          }
         }
       } else {
         if (dialog.open) {
           dialog.close();
+        }
+        if (scrollLockRef.current) {
           document.body.style.overflow = "";
+          scrollLockRef.current = false;
         }
       }
+      return () => {
+        if (scrollLockRef.current) {
+          document.body.style.overflow = "";
+          scrollLockRef.current = false;
+        }
+      };
     }, [isOpen]);
     (0, import_react.useEffect)(() => {
       const dialog = dialogRef.current;

package/dist/Dialog/Dialog.mjs

@@ -1,6 +1,6 @@
 import {
   Dialog
-} from "../chunk-LZ42XDDI.mjs";
+} from "../chunk-HIGQ6URZ.mjs";
 export {
   Dialog
 };

package/dist/Modal/Modal.js

@@ -50,6 +50,7 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
 var Dialog = (0, import_react.forwardRef)(
   ({ isOpen, onClose, title, children, variant = "default", description, className, ...props }, ref) => {
     const dialogRef = (0, import_react.useRef)(null);
+    const scrollLockRef = (0, import_react.useRef)(false);
     (0, import_react.useImperativeHandle)(ref, () => dialogRef.current);
     (0, import_react.useEffect)(() => {
       const dialog = dialogRef.current;
@@ -57,14 +58,26 @@ var Dialog = (0, import_react.forwardRef)(
       if (isOpen) {
         if (!dialog.open) {
           dialog.showModal();
-          document.body.style.overflow = "hidden";
+          if (!scrollLockRef.current) {
+            document.body.style.overflow = "hidden";
+            scrollLockRef.current = true;
+          }
         }
       } else {
         if (dialog.open) {
           dialog.close();
+        }
+        if (scrollLockRef.current) {
           document.body.style.overflow = "";
+          scrollLockRef.current = false;
         }
       }
+      return () => {
+        if (scrollLockRef.current) {
+          document.body.style.overflow = "";
+          scrollLockRef.current = false;
+        }
+      };
     }, [isOpen]);
     (0, import_react.useEffect)(() => {
       const dialog = dialogRef.current;

package/dist/Modal/Modal.mjs

@@ -1,7 +1,7 @@
 import {
   Modal
-} from "../chunk-HALLFO25.mjs";
-import "../chunk-LZ42XDDI.mjs";
+} from "../chunk-Z4AIS75A.mjs";
+import "../chunk-HIGQ6URZ.mjs";
 export {
   Modal
 };

package/dist/Select/Select.js

@@ -109,10 +109,10 @@ var SelectTrigger = ({ children, className = "", placeholder = "Select..." }) =>
 var SelectContent = ({ children }) => {
   const context = (0, import_react.useContext)(SelectContext);
   (0, import_react.useEffect)(() => {
-    if (context && context.isOpen) {
+    if (context) {
       context.optionsRef.current = [];
     }
-  }, [context?.isOpen]);
+  }, [context?.isOpen, children]);
   if (!context || !context.isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",

package/dist/Select/Select.mjs

@@ -3,7 +3,7 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger
-} from "../chunk-V2JYAFB7.mjs";
+} from "../chunk-ZWBZ6YD3.mjs";
 export {
   Select,
   SelectContent,

package/dist/{chunk-NDYRGXQ6.mjs → chunk-7V2LETZ6.mjs}

@@ -46,10 +46,10 @@ var Button = forwardRef(
     };
     const sizes = {
       small: {
-        padding: "0.25rem 0.5rem",
+        padding: "0.5rem 0.75rem",
         fontSize: "0.875rem",
-        minHeight: "32px"
-        // OBS: Kan bryta mot 44px om inte hanteras med margin
+        minHeight: "44px"
+        // Touch target safe (EN 301 549 9.2.5.5)
       },
       medium: {
         padding: "0.5rem 1rem",

package/dist/{chunk-LZ42XDDI.mjs → chunk-HIGQ6URZ.mjs}

@@ -23,6 +23,7 @@ var CloseIcon = () => /* @__PURE__ */ jsxs(
 var Dialog = forwardRef(
   ({ isOpen, onClose, title, children, variant = "default", description, className, ...props }, ref) => {
     const dialogRef = useRef(null);
+    const scrollLockRef = useRef(false);
     useImperativeHandle(ref, () => dialogRef.current);
     useEffect(() => {
       const dialog = dialogRef.current;
@@ -30,14 +31,26 @@ var Dialog = forwardRef(
       if (isOpen) {
         if (!dialog.open) {
           dialog.showModal();
-          document.body.style.overflow = "hidden";
+          if (!scrollLockRef.current) {
+            document.body.style.overflow = "hidden";
+            scrollLockRef.current = true;
+          }
         }
       } else {
         if (dialog.open) {
           dialog.close();
+        }
+        if (scrollLockRef.current) {
           document.body.style.overflow = "";
+          scrollLockRef.current = false;
         }
       }
+      return () => {
+        if (scrollLockRef.current) {
+          document.body.style.overflow = "";
+          scrollLockRef.current = false;
+        }
+      };
     }, [isOpen]);
     useEffect(() => {
       const dialog = dialogRef.current;

package/dist/{chunk-HALLFO25.mjs → chunk-Z4AIS75A.mjs}

@@ -1,6 +1,6 @@
 import {
   Dialog
-} from "./chunk-LZ42XDDI.mjs";
+} from "./chunk-HIGQ6URZ.mjs";
 
 // src/Modal/Modal.tsx
 import { forwardRef } from "react";

package/dist/{chunk-V2JYAFB7.mjs → chunk-ZWBZ6YD3.mjs}

@@ -82,10 +82,10 @@ var SelectTrigger = ({ children, className = "", placeholder = "Select..." }) =>
 var SelectContent = ({ children }) => {
   const context = useContext(SelectContext);
   useEffect(() => {
-    if (context && context.isOpen) {
+    if (context) {
       context.optionsRef.current = [];
     }
-  }, [context?.isOpen]);
+  }, [context?.isOpen, children]);
   if (!context || !context.isOpen) return null;
   return /* @__PURE__ */ jsx(
     "div",

package/dist/index.js

@@ -111,10 +111,10 @@ var Button = (0, import_react.forwardRef)(
     };
     const sizes = {
       small: {
-        padding: "0.25rem 0.5rem",
+        padding: "0.5rem 0.75rem",
         fontSize: "0.875rem",
-        minHeight: "32px"
-        // OBS: Kan bryta mot 44px om inte hanteras med margin
+        minHeight: "44px"
+        // Touch target safe (EN 301 549 9.2.5.5)
       },
       medium: {
         padding: "0.5rem 1rem",
@@ -261,6 +261,7 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
 var Dialog = (0, import_react3.forwardRef)(
   ({ isOpen, onClose, title, children, variant = "default", description, className, ...props }, ref) => {
     const dialogRef = (0, import_react3.useRef)(null);
+    const scrollLockRef = (0, import_react3.useRef)(false);
     (0, import_react3.useImperativeHandle)(ref, () => dialogRef.current);
     (0, import_react3.useEffect)(() => {
       const dialog = dialogRef.current;
@@ -268,14 +269,26 @@ var Dialog = (0, import_react3.forwardRef)(
       if (isOpen) {
         if (!dialog.open) {
           dialog.showModal();
-          document.body.style.overflow = "hidden";
+          if (!scrollLockRef.current) {
+            document.body.style.overflow = "hidden";
+            scrollLockRef.current = true;
+          }
         }
       } else {
         if (dialog.open) {
           dialog.close();
+        }
+        if (scrollLockRef.current) {
           document.body.style.overflow = "";
+          scrollLockRef.current = false;
         }
       }
+      return () => {
+        if (scrollLockRef.current) {
+          document.body.style.overflow = "";
+          scrollLockRef.current = false;
+        }
+      };
     }, [isOpen]);
     (0, import_react3.useEffect)(() => {
       const dialog = dialogRef.current;
@@ -944,10 +957,10 @@ var SelectTrigger = ({ children, className = "", placeholder = "Select..." }) =>
 var SelectContent = ({ children }) => {
   const context = (0, import_react12.useContext)(SelectContext);
   (0, import_react12.useEffect)(() => {
-    if (context && context.isOpen) {
+    if (context) {
       context.optionsRef.current = [];
     }
-  }, [context?.isOpen]);
+  }, [context?.isOpen, children]);
   if (!context || !context.isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",

package/dist/index.mjs

@@ -6,41 +6,41 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger
-} from "./chunk-V2JYAFB7.mjs";
+} from "./chunk-ZWBZ6YD3.mjs";
 import {
   SkipLink
 } from "./chunk-MKKQLWGK.mjs";
 import {
   Switch
 } from "./chunk-5RKBS475.mjs";
+import {
+  ToastProvider,
+  useToast
+} from "./chunk-2MJRKHPL.mjs";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
 } from "./chunk-C5M6C7KT.mjs";
-import {
-  ToastProvider,
-  useToast
-} from "./chunk-2MJRKHPL.mjs";
 import {
   Button
-} from "./chunk-NDYRGXQ6.mjs";
-import {
-  Checkbox
-} from "./chunk-NOE5QKC2.mjs";
+} from "./chunk-7V2LETZ6.mjs";
 import {
   FormField
 } from "./chunk-PLT5CAFO.mjs";
+import {
+  Checkbox
+} from "./chunk-NOE5QKC2.mjs";
 import {
   Heading
 } from "./chunk-2RP6SWY7.mjs";
 import {
   Modal
-} from "./chunk-HALLFO25.mjs";
+} from "./chunk-Z4AIS75A.mjs";
 import {
   Dialog
-} from "./chunk-LZ42XDDI.mjs";
+} from "./chunk-HIGQ6URZ.mjs";
 import {
   NavigationMenu
 } from "./chunk-GK4BYT56.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@holmdigital/components",
     "author": "Holm Digital AB",
-    "version": "1.2.2",
+    "version": "1.2.4",
     "private": false,
     "publishConfig": {
         "access": "public",
@@ -83,6 +83,8 @@
         "build": "tsup src/index.ts src/Button/Button.tsx src/FormField/FormField.tsx src/Dialog/Dialog.tsx src/Modal/Modal.tsx src/SkipLink/SkipLink.tsx src/NavigationMenu/NavigationMenu.tsx src/Checkbox/Checkbox.tsx src/RadioGroup/RadioGroup.tsx src/Select/Select.tsx src/Switch/Switch.tsx src/Toast/Toast.tsx src/Tooltip/Tooltip.tsx src/Heading/Heading.tsx --format cjs,esm --dts --clean --external react",
         "dev": "tsup src/index.ts src/Button/Button.tsx src/FormField/FormField.tsx src/Dialog/Dialog.tsx src/Modal/Modal.tsx src/SkipLink/SkipLink.tsx src/NavigationMenu/NavigationMenu.tsx src/Checkbox/Checkbox.tsx src/RadioGroup/RadioGroup.tsx src/Select/Select.tsx src/Switch/Switch.tsx src/Toast/Toast.tsx src/Tooltip/Tooltip.tsx src/Heading/Heading.tsx --format cjs,esm --dts --watch --external react",
         "lint": "eslint src --ext .ts,.tsx",
+        "test": "vitest",
+        "test:ci": "vitest run",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build"
     },