@blockle/blocks 0.8.10 → 0.9.0

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

@@ -7,7 +7,7 @@ const divider = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
       clear: "both",
-      height: "1px"
+      blockSize: "1px"
     }
   }
 }, "divider");

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

@@ -6,7 +6,7 @@ const divider = style({
   "@layer": {
     [blocksLayer]: {
       clear: "both",
-      height: "1px"
+      blockSize: "1px"
     }
   }
 }, "divider");

package/dist/styles/components/form/Checkbox/Checkbox.cjs

@@ -33,7 +33,7 @@ const Checkbox = react.forwardRef(function Checkbox2({ name, label, required, cl
   const labelClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { label: true }, false);
   const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "checkbox", name, className: styles_components_form_Checkbox_checkbox_css_cjs.input, ...restProps }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
   ] });
   if (!label) {
     return input;
@@ -43,5 +43,21 @@ const Checkbox = react.forwardRef(function Checkbox2({ name, label, required, cl
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { asSpan: true, required, children: label })
   ] });
 });
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        style: { width: "1rem", height: "1rem", display: "block" },
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 12.75 6 6 9-13.5" })
+      }
+    )
+  );
+};
 exports.Checkbox = Checkbox;
 exports.Label = Label;

package/dist/styles/components/form/Checkbox/Checkbox.mjs

@@ -32,7 +32,7 @@ const Checkbox = forwardRef(function Checkbox2({ name, label, required, classNam
   const labelClassName = useComponentStyles("checkbox", { label: true }, false);
   const input$1 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
     /* @__PURE__ */ jsx("input", { ref, type: "checkbox", name, className: input, ...restProps }),
-    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
+    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
   ] });
   if (!label) {
     return input$1;
@@ -42,6 +42,22 @@ const Checkbox = forwardRef(function Checkbox2({ name, label, required, classNam
     label && /* @__PURE__ */ jsx(Label, { asSpan: true, required, children: label })
   ] });
 });
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        style: { width: "1rem", height: "1rem", display: "block" },
+        children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 12.75 6 6 9-13.5" })
+      }
+    )
+  );
+};
 export {
   Checkbox,
   Label

package/dist/styles/components/form/Select/Select.cjs

@@ -0,0 +1,40 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_form_Select_select_css_cjs = require("./select.css.cjs");
+const Select = react.forwardRef(function Select2({ children, placeholder, className, ...restProps }, ref) {
+  const wrapperClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { wrapper: true }, false);
+  const selectClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { select: true });
+  const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { icon: true }, false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        ref,
+        className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.select, selectClassName, className),
+        ...restProps,
+        children: [
+          placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
+  ] });
+});
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
+        clipRule: "evenodd"
+      }
+    ) })
+  );
+};
+exports.Select = Select;

package/dist/styles/components/form/Select/Select.mjs

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
+import { wrapper, select, icon } from "./select.css.mjs";
+const Select = forwardRef(function Select2({ children, placeholder, className, ...restProps }, ref) {
+  const wrapperClassName = useComponentStyles("select", { wrapper: true }, false);
+  const selectClassName = useComponentStyles("select", { select: true });
+  const iconClassName = useComponentStyles("select", { icon: true }, false);
+  return /* @__PURE__ */ jsxs(Box, { className: classnames(wrapper, wrapperClassName), children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ref,
+        className: classnames(select, selectClassName, className),
+        ...restProps,
+        children: [
+          placeholder && /* @__PURE__ */ jsx("option", { value: "", children: placeholder }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { className: classnames(icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
+  ] });
+});
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
+        clipRule: "evenodd"
+      }
+    ) })
+  );
+};
+export {
+  Select
+};

package/dist/styles/components/form/Select/select.css.cjs

@@ -0,0 +1,37 @@
+"use strict";
+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/form/Select/select.css.ts", "blocks");
+const wrapper = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative"
+    }
+  }
+}, "wrapper");
+const select = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      appearance: "none",
+      inlineSize: "100%"
+    }
+  }
+}, "select");
+const icon = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      display: "flex",
+      alignItems: "center"
+    }
+  }
+}, "icon");
+fileScope.endFileScope();
+exports.icon = icon;
+exports.select = select;
+exports.wrapper = wrapper;

package/dist/styles/components/form/Select/select.css.mjs

@@ -0,0 +1,38 @@
+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/form/Select/select.css.ts", "blocks");
+const wrapper = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative"
+    }
+  }
+}, "wrapper");
+const select = style({
+  "@layer": {
+    [blocksLayer]: {
+      appearance: "none",
+      inlineSize: "100%"
+    }
+  }
+}, "select");
+const icon = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      display: "flex",
+      alignItems: "center"
+    }
+  }
+}, "icon");
+endFileScope();
+export {
+  icon,
+  select,
+  wrapper
+};

package/dist/styles/components/form/Switch/switch.css.cjs

@@ -16,8 +16,8 @@ const input = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
       opacity: 0,
-      maxHeight: 0,
-      maxWidth: 0
+      maxBlockSize: 0,
+      maxInlineSize: 0
     }
   }
 }, "input");

package/dist/styles/components/form/Switch/switch.css.mjs

@@ -15,8 +15,8 @@ const input = style({
   "@layer": {
     [blocksLayer]: {
       opacity: 0,
-      maxHeight: 0,
-      maxWidth: 0
+      maxBlockSize: 0,
+      maxInlineSize: 0
     }
   }
 }, "input");

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

@@ -10,10 +10,10 @@ const backdrop = css.style({
       display: "flex",
       placeItems: "center",
       position: "fixed",
-      width: "100%",
-      height: "100%",
-      left: 0,
-      top: 0,
+      inlineSize: "100%",
+      blockSize: "100%",
+      insetInlineStart: 0,
+      insetBlockStart: 0,
       overflow: "hidden",
       zIndex: 1e3
     }

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

@@ -9,10 +9,10 @@ const backdrop = style({
       display: "flex",
       placeItems: "center",
       position: "fixed",
-      width: "100%",
-      height: "100%",
-      left: 0,
-      top: 0,
+      inlineSize: "100%",
+      blockSize: "100%",
+      insetInlineStart: 0,
+      insetBlockStart: 0,
       overflow: "hidden",
       zIndex: 1e3
     }

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -1,38 +1,41 @@
 "use strict";
 const styles_lib_theme_vars_css_cjs = require("../../theme/vars.css.cjs");
-const colorWithCurrentColor = { ...styles_lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
+const colorsWithCurrentColor = { ...styles_lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
+const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
 const unresponsiveProperties = {
-  backgroundColor: colorWithCurrentColor,
-  borderColor: colorWithCurrentColor,
+  backgroundColor: colorsWithCurrentColor,
+  borderColor: colorsWithCurrentColor,
   borderRadius: styles_lib_theme_vars_css_cjs.vars.borderRadius,
   borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth,
   border: ["none"],
-  bottom: [0],
+  insetBlock: [0],
+  insetBlockStart: [0],
+  insetBlockEnd: [0],
+  insetInline: [0],
+  insetInlineStart: [0],
+  insetInlineEnd: [0],
   boxShadow: styles_lib_theme_vars_css_cjs.vars.shadow,
-  color: colorWithCurrentColor,
+  color: colorsWithCurrentColor,
   cursor: ["auto", "pointer"],
   fontFamily: styles_lib_theme_vars_css_cjs.vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],
   fontWeight: styles_lib_theme_vars_css_cjs.vars.fontWeight,
-  height: { auto: "auto", full: "100%" },
-  left: [0],
   lineHeight: styles_lib_theme_vars_css_cjs.vars.lineHeight,
-  maxHeight: { full: "100%" },
-  maxWidth: { full: "100%" },
+  blockSize: size,
+  maxBlockSize: size,
+  inlineSize: size,
+  maxInlineSize: size,
   opacity: [0, 1],
   overflow: ["hidden", "scroll", "visible", "auto"],
-  overflowX: ["hidden", "scroll", "visible", "auto"],
-  overflowY: ["hidden", "scroll", "visible", "auto"],
+  overflowBlock: ["hidden", "scroll", "visible", "auto"],
+  overflowInline: ["hidden", "scroll", "visible", "auto"],
   pointerEvents: ["none"],
-  right: [0],
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
   textWrap: ["balance", "wrap"],
-  top: [0],
   transition: styles_lib_theme_vars_css_cjs.vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
-  width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
   wordBreak: ["break-word"],
   wordWrap: ["break-word"]
 };
@@ -60,15 +63,18 @@ const responsiveProperties = {
   fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize,
   gap: styles_lib_theme_vars_css_cjs.vars.space,
   justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
-  marginBottom: marginSpace,
-  marginLeft: marginSpace,
-  marginRight: marginSpace,
-  marginTop: marginSpace,
+  marginBlockStart: marginSpace,
+  marginBlockEnd: marginSpace,
+  marginInlineStart: marginSpace,
+  marginInlineEnd: marginSpace,
   outline: ["none"],
-  paddingBottom: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingLeft: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingRight: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingTop: styles_lib_theme_vars_css_cjs.vars.space,
+  padding: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingBlock: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingBlockStart: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingBlockEnd: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingInline: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingInlineStart: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingInlineEnd: styles_lib_theme_vars_css_cjs.vars.space,
   position: ["relative", "fixed", "absolute", "sticky", "static"],
   rowGap: styles_lib_theme_vars_css_cjs.vars.space,
   textAlign: ["center", "left", "right", "justify"]

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -1,37 +1,40 @@
 import { vars } from "../../theme/vars.css.mjs";
-const colorWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
+const colorsWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
+const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
 const unresponsiveProperties = {
-  backgroundColor: colorWithCurrentColor,
-  borderColor: colorWithCurrentColor,
+  backgroundColor: colorsWithCurrentColor,
+  borderColor: colorsWithCurrentColor,
   borderRadius: vars.borderRadius,
   borderWidth: vars.borderWidth,
   border: ["none"],
-  bottom: [0],
+  insetBlock: [0],
+  insetBlockStart: [0],
+  insetBlockEnd: [0],
+  insetInline: [0],
+  insetInlineStart: [0],
+  insetInlineEnd: [0],
   boxShadow: vars.shadow,
-  color: colorWithCurrentColor,
+  color: colorsWithCurrentColor,
   cursor: ["auto", "pointer"],
   fontFamily: vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],
   fontWeight: vars.fontWeight,
-  height: { auto: "auto", full: "100%" },
-  left: [0],
   lineHeight: vars.lineHeight,
-  maxHeight: { full: "100%" },
-  maxWidth: { full: "100%" },
+  blockSize: size,
+  maxBlockSize: size,
+  inlineSize: size,
+  maxInlineSize: size,
   opacity: [0, 1],
   overflow: ["hidden", "scroll", "visible", "auto"],
-  overflowX: ["hidden", "scroll", "visible", "auto"],
-  overflowY: ["hidden", "scroll", "visible", "auto"],
+  overflowBlock: ["hidden", "scroll", "visible", "auto"],
+  overflowInline: ["hidden", "scroll", "visible", "auto"],
   pointerEvents: ["none"],
-  right: [0],
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
   textWrap: ["balance", "wrap"],
-  top: [0],
   transition: vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
-  width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
   wordBreak: ["break-word"],
   wordWrap: ["break-word"]
 };
@@ -59,15 +62,18 @@ const responsiveProperties = {
   fontSize: vars.fontSize,
   gap: vars.space,
   justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
-  marginBottom: marginSpace,
-  marginLeft: marginSpace,
-  marginRight: marginSpace,
-  marginTop: marginSpace,
+  marginBlockStart: marginSpace,
+  marginBlockEnd: marginSpace,
+  marginInlineStart: marginSpace,
+  marginInlineEnd: marginSpace,
   outline: ["none"],
-  paddingBottom: vars.space,
-  paddingLeft: vars.space,
-  paddingRight: vars.space,
-  paddingTop: vars.space,
+  padding: vars.space,
+  paddingBlock: vars.space,
+  paddingBlockStart: vars.space,
+  paddingBlockEnd: vars.space,
+  paddingInline: vars.space,
+  paddingInlineStart: vars.space,
+  paddingInlineEnd: vars.space,
   position: ["relative", "fixed", "absolute", "sticky", "static"],
   rowGap: vars.space,
   textAlign: ["center", "left", "right", "justify"]

package/dist/styles/lib/css/atoms/sprinkles.css.cjs

@@ -7,7 +7,7 @@ fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts", "blocks");
 const unresponsiveAtomicProperties = sprinkles.defineProperties({
   properties: styles_lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
   shorthands: {
-    inset: ["top", "bottom", "left", "right"]
+    inset: ["insetBlockStart", "insetBlockEnd", "insetInlineStart", "insetInlineEnd"]
   }
 });
 const responsiveAtomicProperties = sprinkles.defineProperties({
@@ -27,12 +27,9 @@ const responsiveAtomicProperties = sprinkles.defineProperties({
   responsiveArray: styles_lib_css_atoms_breakpoints_cjs.breakpointNames,
   properties: styles_lib_css_atoms_atomicProperties_cjs.responsiveProperties,
   shorthands: {
-    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
-    marginX: ["marginLeft", "marginRight"],
-    marginY: ["marginTop", "marginBottom"],
-    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
-    paddingX: ["paddingLeft", "paddingRight"],
-    paddingY: ["paddingTop", "paddingBottom"],
+    margin: ["marginBlockStart", "marginBlockEnd", "marginInlineStart", "marginInlineEnd"],
+    marginBlock: ["marginBlockStart", "marginBlockEnd"],
+    marginInline: ["marginInlineStart", "marginInlineEnd"],
     placeItems: ["justifyContent", "alignItems"]
   }
 });

package/dist/styles/lib/css/atoms/sprinkles.css.mjs

@@ -6,7 +6,7 @@ setFileScope("src/lib/css/atoms/sprinkles.css.ts", "blocks");
 const unresponsiveAtomicProperties = defineProperties({
   properties: unresponsiveProperties,
   shorthands: {
-    inset: ["top", "bottom", "left", "right"]
+    inset: ["insetBlockStart", "insetBlockEnd", "insetInlineStart", "insetInlineEnd"]
   }
 });
 const responsiveAtomicProperties = defineProperties({
@@ -26,12 +26,9 @@ const responsiveAtomicProperties = defineProperties({
   responsiveArray: breakpointNames,
   properties: responsiveProperties,
   shorthands: {
-    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
-    marginX: ["marginLeft", "marginRight"],
-    marginY: ["marginTop", "marginBottom"],
-    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
-    paddingX: ["paddingLeft", "paddingRight"],
-    paddingY: ["paddingTop", "paddingBottom"],
+    margin: ["marginBlockStart", "marginBlockEnd", "marginInlineStart", "marginInlineEnd"],
+    marginBlock: ["marginBlockStart", "marginBlockEnd"],
+    marginInline: ["marginInlineStart", "marginInlineEnd"],
     placeItems: ["justifyContent", "alignItems"]
   }
 });

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

@@ -44,15 +44,15 @@ const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("butto
     },
     size: {
       small: styles_lib_css_style_style_cjs.style({
-        paddingX: "large",
+        paddingInline: "large",
         height: 40
       }),
       medium: styles_lib_css_style_style_cjs.style({
-        paddingX: "xlarge",
+        paddingInline: "xlarge",
         height: 56
       }),
       large: styles_lib_css_style_style_cjs.style({
-        paddingX: "xlarge",
+        paddingInline: "xlarge",
         height: 72
       })
     },

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

@@ -43,15 +43,15 @@ const button = makeComponentTheme("button", {
     },
     size: {
       small: style({
-        paddingX: "large",
+        paddingInline: "large",
         height: 40
       }),
       medium: style({
-        paddingX: "xlarge",
+        paddingInline: "xlarge",
         height: 56
       }),
       large: style({
-        paddingX: "xlarge",
+        paddingInline: "xlarge",
         height: 72
       })
     },

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

@@ -12,15 +12,18 @@ const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("che
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: 24,
-    height: 24,
-    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`,
-    transitionProperty: "background-color",
-    ":hover": {
-      backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+    inlineSize: 24,
+    blockSize: 24,
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color ${styles_lib_theme_vars_css_cjs.vars.transition.normal}, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+      }
     },
     selectors: {
-      "&:has(input:checked):not(:hover)": {
+      "&:hover:not(:has(input:disabled))": {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+      },
+      "&:has(input:checked)": {
         backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primary
       }
     }
@@ -29,16 +32,19 @@ const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("che
     borderRadius: "small"
   }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_base"),
   icon: css.style({
-    height: 12,
-    width: 12,
-    backgroundColor: "white",
-    borderRadius: "8px",
+    inlineSize: "1rem",
+    blockSize: "1rem",
+    color: "white",
     transform: "scale(0)",
-    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`,
     selectors: {
       "input:checked ~ &": {
         transform: "scale(1)"
       }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`
+      }
     }
   }, "checkbox_icon"),
   label: styles_lib_css_atoms_sprinkles_css_cjs.atoms({