@blockle/blocks 0.12.0 → 0.12.2

package/dist/styles/components/display/Divider/Divider.cjs

@@ -208,7 +208,7 @@ const Divider = ({ className, color, ...restProps }) => {
     Box,
     {
       role: "separator",
-      width: "full",
+      inlineSize: "full",
       backgroundColor: color ?? dividerDefaults.color,
       className: classnames(className, dividerClass, styles_components_display_Divider_divider_css_cjs.divider),
       ...restProps

package/dist/styles/components/display/Divider/Divider.mjs

@@ -207,7 +207,7 @@ const Divider = ({ className, color, ...restProps }) => {
     Box,
     {
       role: "separator",
-      width: "full",
+      inlineSize: "full",
       backgroundColor: color ?? dividerDefaults.color,
       className: classnames(className, dividerClass, divider),
       ...restProps

package/dist/styles/components/overlay/Dialog/Dialog.cjs

@@ -12,32 +12,21 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
-  return focusable || null;
-};
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
-  if (focusable) {
-    focusable.focus();
-  }
-};
-const useFocusLock = ({ ref, active }) => {
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   react.useEffect(() => {
-    if (!active) {
+    if (!enabled) {
       return;
     }
-    const handleFocus = (event) => {
-      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
-        focusFirstElement(ref.current);
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
       }
     };
-    document.addEventListener("focusin", handleFocus);
+    document.addEventListener("click", listener);
     return () => {
-      document.removeEventListener("focusin", handleFocus);
+      document.removeEventListener("click", listener);
     };
-  }, [active, ref]);
+  }, [ref, onClickOutside, enabled]);
 };
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
@@ -47,7 +36,7 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     }
     function handleKeyDown(event) {
       if (event.key === key) {
-        callback();
+        callback(event);
       }
     }
     document.addEventListener(type, handleKeyDown);
@@ -110,21 +99,13 @@ const useRestoreFocus = (active) => {
     target.current = document.activeElement;
   }
   react.useEffect(() => {
+    var _a;
     if (target.current && !active && target.current instanceof HTMLElement) {
-      target.current.focus();
-    }
-    if (!active) {
+      (_a = target.current) == null ? void 0 : _a.focus();
       target.current = null;
     }
   }, [active]);
 };
-const useRootAriaHidden = (hidden) => {
-  const context = react.useContext(styles_components_display_Divider_Divider_cjs.BlocksProviderContext);
-  if (!context) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context.setAriaHidden(hidden);
-};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = react.useState(open);
   const hide = react.useCallback(() => {
@@ -166,38 +147,36 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
-  const backdropClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("dialog", { backdrop: true }, false);
   const dialogClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("dialog", { dialog: true, variants: { size } });
-  const backdropRef = react.useRef(null);
   const dialogRef = react.useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = react.useState(true);
-  const onBackdropClick = react.useCallback(
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  const onEscape = react.useCallback(
     (event) => {
-      if (event.target === event.currentTarget) {
-        onRequestClose();
-      }
+      event.preventDefault();
+      onRequestClose();
     },
     [onRequestClose]
   );
-  useFocusLock({ ref: dialogRef, active: open && enabled });
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
-  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
-  useRootAriaHidden(visible);
+  useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
+    if (!visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.close();
+    }
     if (!open) {
-      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2, _b2;
-        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
         (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
       });
     });
@@ -223,35 +202,25 @@ const Dialog = ({
   }
   const dataOpen = typeof window === "undefined" && open ? "" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    styles_components_display_Divider_Divider_cjs.Box,
+    "dialog",
     {
-      ref: backdropRef,
-      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.backdrop, backdropClassName),
+      ref: dialogRef,
+      "aria-modal": "true",
       "data-open": dataOpen,
-      onClick: onBackdropClick,
+      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "dialog",
-        {
-          ref: dialogRef,
-          "aria-modal": "true",
-          open: true,
-          "data-open": dataOpen,
-          className: styles_components_display_Divider_Divider_cjs.classnames(dialogClassName, className),
-          ...restProps,
-          children
-        }
-      )
+      ...restProps,
+      children
     }
   ) }) });
 };
 exports.Dialog = Dialog;
 exports.Portal = Portal;
 exports.hasAnimationDuration = hasAnimationDuration;
+exports.useClickOutside = useClickOutside;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
 exports.useLayer = useLayer;
 exports.usePreventBodyScroll = usePreventBodyScroll;
-exports.useRootAriaHidden = useRootAriaHidden;
 exports.useVisibilityState = useVisibilityState;

package/dist/styles/components/overlay/Dialog/Dialog.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useContext, useState, useCallback, createContext } from "react";
-import { useTheme, BlocksProviderContext, useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
-import { backdrop } from "./dialog.css.mjs";
+import { useEffect, useLayoutEffect, useRef, useState, useCallback, createContext, useContext } from "react";
+import { useTheme, useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { dialog } from "./dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { BlocksProvider } from "../../other/BlocksProvider/BlocksProvider.mjs";
 const Portal = ({ children, container }) => {
@@ -11,32 +11,21 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
-  return focusable || null;
-};
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
-  if (focusable) {
-    focusable.focus();
-  }
-};
-const useFocusLock = ({ ref, active }) => {
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   useEffect(() => {
-    if (!active) {
+    if (!enabled) {
       return;
     }
-    const handleFocus = (event) => {
-      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
-        focusFirstElement(ref.current);
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
       }
     };
-    document.addEventListener("focusin", handleFocus);
+    document.addEventListener("click", listener);
     return () => {
-      document.removeEventListener("focusin", handleFocus);
+      document.removeEventListener("click", listener);
     };
-  }, [active, ref]);
+  }, [ref, onClickOutside, enabled]);
 };
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
@@ -46,7 +35,7 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     }
     function handleKeyDown(event) {
       if (event.key === key) {
-        callback();
+        callback(event);
       }
     }
     document.addEventListener(type, handleKeyDown);
@@ -109,21 +98,13 @@ const useRestoreFocus = (active) => {
     target.current = document.activeElement;
   }
   useEffect(() => {
+    var _a;
     if (target.current && !active && target.current instanceof HTMLElement) {
-      target.current.focus();
-    }
-    if (!active) {
+      (_a = target.current) == null ? void 0 : _a.focus();
       target.current = null;
     }
   }, [active]);
 };
-const useRootAriaHidden = (hidden) => {
-  const context = useContext(BlocksProviderContext);
-  if (!context) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context.setAriaHidden(hidden);
-};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = useState(open);
   const hide = useCallback(() => {
@@ -165,38 +146,36 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
   const dialogClassName = useComponentStyles("dialog", { dialog: true, variants: { size } });
-  const backdropRef = useRef(null);
   const dialogRef = useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = useState(true);
-  const onBackdropClick = useCallback(
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  const onEscape = useCallback(
     (event) => {
-      if (event.target === event.currentTarget) {
-        onRequestClose();
-      }
+      event.preventDefault();
+      onRequestClose();
     },
     [onRequestClose]
   );
-  useFocusLock({ ref: dialogRef, active: open && enabled });
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
-  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
-  useRootAriaHidden(visible);
+  useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
+    if (!visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.close();
+    }
     if (!open) {
-      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2, _b2;
-        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
         (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
       });
     });
@@ -222,26 +201,16 @@ const Dialog = ({
   }
   const dataOpen = typeof window === "undefined" && open ? "" : void 0;
   return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
-    Box,
+    "dialog",
     {
-      ref: backdropRef,
-      className: classnames(backdrop, backdropClassName),
+      ref: dialogRef,
+      "aria-modal": "true",
       "data-open": dataOpen,
-      onClick: onBackdropClick,
+      className: classnames(dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      children: /* @__PURE__ */ jsx(
-        "dialog",
-        {
-          ref: dialogRef,
-          "aria-modal": "true",
-          open: true,
-          "data-open": dataOpen,
-          className: classnames(dialogClassName, className),
-          ...restProps,
-          children
-        }
-      )
+      ...restProps,
+      children
     }
   ) }) });
 };
@@ -249,10 +218,10 @@ export {
   Dialog,
   Portal,
   hasAnimationDuration,
+  useClickOutside,
   useIsomorphicLayoutEffect,
   useKeyboard,
   useLayer,
   usePreventBodyScroll,
-  useRootAriaHidden,
   useVisibilityState
 };

package/dist/styles/components/overlay/Dialog/dialog.css.cjs

@@ -3,21 +3,19 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-const backdrop = css.style({
+const dialog = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      contain: "layout",
-      display: "flex",
-      placeItems: "center",
       position: "fixed",
-      inlineSize: "100%",
-      blockSize: "100%",
-      insetInlineStart: 0,
-      insetBlockStart: 0,
-      overflow: "hidden",
-      zIndex: 1e3
+      inset: 0,
+      border: "none",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
     }
   }
-}, "backdrop");
+}, "dialog");
 fileScope.endFileScope();
-exports.backdrop = backdrop;
+exports.dialog = dialog;

package/dist/styles/components/overlay/Dialog/dialog.css.mjs

@@ -2,23 +2,21 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-const backdrop = style({
+const dialog = style({
   "@layer": {
     [blocksLayer]: {
-      contain: "layout",
-      display: "flex",
-      placeItems: "center",
       position: "fixed",
-      inlineSize: "100%",
-      blockSize: "100%",
-      insetInlineStart: 0,
-      insetBlockStart: 0,
-      overflow: "hidden",
-      zIndex: 1e3
+      inset: 0,
+      border: "none",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
     }
   }
-}, "backdrop");
+}, "dialog");
 endFileScope();
 export {
-  backdrop
+  dialog
 };

package/dist/styles/themes/momotaro/components/dialog.css.cjs

@@ -16,34 +16,31 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
   }), {
     maxHeight: "90%",
     minWidth: "300px",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)"
-      }
+    "::backdrop": {
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
     },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.9)",
-        transition: "transform 160ms"
-      }
-    }
-  }], "dialog_dialog"),
-  backdrop: css.style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
     selectors: {
       "&[data-open]": {
+        transform: "translate(0, 0)",
+        opacity: 1
+      },
+      "&[data-open]::backdrop": {
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
+        transform: "translate(0, -120px)",
         opacity: 0,
-        transition: "opacity 160ms"
+        transition: "transform 240ms, opacity 160ms",
+        "::backdrop": {
+          opacity: 0,
+          transition: "opacity 160ms"
+        }
       }
     }
-  }, "dialog_backdrop"),
+  }], "dialog_dialog"),
   variants: {
     size: {
       small: css.style({

package/dist/styles/themes/momotaro/components/dialog.css.mjs

@@ -15,34 +15,31 @@ const dialog = makeComponentTheme("dialog", {
   }), {
     maxHeight: "90%",
     minWidth: "300px",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)"
-      }
+    "::backdrop": {
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
     },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.9)",
-        transition: "transform 160ms"
-      }
-    }
-  }], "dialog_dialog"),
-  backdrop: style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
     selectors: {
       "&[data-open]": {
+        transform: "translate(0, 0)",
+        opacity: 1
+      },
+      "&[data-open]::backdrop": {
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
+        transform: "translate(0, -120px)",
         opacity: 0,
-        transition: "opacity 160ms"
+        transition: "transform 240ms, opacity 160ms",
+        "::backdrop": {
+          opacity: 0,
+          transition: "opacity 160ms"
+        }
       }
     }
-  }, "dialog_backdrop"),
+  }], "dialog_dialog"),
   variants: {
     size: {
       small: style({

package/dist/styles/themes/momotaro/components/divider.css.cjs

@@ -1,8 +1,12 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
 const divider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
+  base: css.style({
+    blockSize: 1
+  }, "divider_base"),
   defaultVariants: {
     color: "textLight"
   }

package/dist/styles/themes/momotaro/components/divider.css.mjs

@@ -1,7 +1,11 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
 const divider = makeComponentTheme("divider", {
+  base: style({
+    blockSize: 1
+  }, "divider_base"),
   defaultVariants: {
     color: "textLight"
   }

package/dist/styles/themes/momotaro/components/progress.css.cjs

@@ -37,12 +37,12 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
         // For reduce motion we show a striped pattern instead of animating
         "(prefers-reduced-motion: reduce)": {
           backgroundImage: `repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 20px,
-            ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
-            ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
-          )`
+          45deg,
+          transparent,
+          transparent 20px,
+          ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
+          ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
+        )`
         },
         "(prefers-reduced-motion: no-preference)": {
           animation: `${indeterminateAnimation} 3s ease-in-out infinite`

package/dist/styles/themes/momotaro/components/progress.css.mjs

@@ -36,12 +36,12 @@ const progress = makeComponentTheme("progress", {
         // For reduce motion we show a striped pattern instead of animating
         "(prefers-reduced-motion: reduce)": {
           backgroundImage: `repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 20px,
-            ${vars.color.primaryDark} 20px,
-            ${vars.color.primaryDark} 40px
-          )`
+          45deg,
+          transparent,
+          transparent 20px,
+          ${vars.color.primaryDark} 20px,
+          ${vars.color.primaryDark} 40px
+        )`
         },
         "(prefers-reduced-motion: no-preference)": {
           animation: `${indeterminateAnimation} 3s ease-in-out infinite`