@blockle/blocks 0.8.10 → 0.9.0

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

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

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

@@ -14,7 +14,7 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
     borderRadius: "medium",
     boxShadow: "large"
   }), {
-    minWidth: "300px",
+    minInlineSize: "300px",
     selectors: {
       "&[data-open]": {
         transform: "scale(1)"
@@ -46,16 +46,16 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
   variants: {
     size: {
       small: css.style({
-        width: "400px",
-        maxWidth: "min(400px, 90vw)"
+        inlineSize: "400px",
+        maxInlineSize: "min(400px, 90vw)"
       }, "dialog_variants_size_small"),
       medium: css.style({
-        width: "600px",
-        maxWidth: "min(600px, 90vw)"
+        inlineSize: "600px",
+        maxInlineSize: "min(600px, 90vw)"
       }, "dialog_variants_size_medium"),
       large: css.style({
-        width: "800px",
-        maxWidth: "min(800px, 90vw)"
+        inlineSize: "800px",
+        maxInlineSize: "min(800px, 90vw)"
       }, "dialog_variants_size_large")
     }
   },

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

@@ -13,7 +13,7 @@ const dialog = makeComponentTheme("dialog", {
     borderRadius: "medium",
     boxShadow: "large"
   }), {
-    minWidth: "300px",
+    minInlineSize: "300px",
     selectors: {
       "&[data-open]": {
         transform: "scale(1)"
@@ -45,16 +45,16 @@ const dialog = makeComponentTheme("dialog", {
   variants: {
     size: {
       small: style({
-        width: "400px",
-        maxWidth: "min(400px, 90vw)"
+        inlineSize: "400px",
+        maxInlineSize: "min(400px, 90vw)"
       }, "dialog_variants_size_small"),
       medium: style({
-        width: "600px",
-        maxWidth: "min(600px, 90vw)"
+        inlineSize: "600px",
+        maxInlineSize: "min(600px, 90vw)"
       }, "dialog_variants_size_medium"),
       large: style({
-        width: "800px",
-        maxWidth: "min(800px, 90vw)"
+        inlineSize: "800px",
+        maxInlineSize: "min(800px, 90vw)"
       }, "dialog_variants_size_large")
     }
   },

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

@@ -5,12 +5,15 @@ const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs")
 fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts", "blocks");
 const focusRingColor = css.createVar("focusRingColor");
 const focusable = css.style({
+  "@media": {
+    "(prefers-reduced-motion: no-preference)": {
+      transition: `box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+    }
+  },
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`,
-    transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
-    transitionProperty: "box-shadow"
+    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`
   },
   selectors: {
     "&:disabled, &[disabled]": {
@@ -21,9 +24,7 @@ const focusable = css.style({
     "&:has(input:focus-visible)": {
       outline: "2px solid transparent",
       outlineOffset: "2px",
-      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow,
-      transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
-      transitionProperty: "box-shadow"
+      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow
     },
     "&:has(input:disabled)": {
       opacity: 0.5,

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

@@ -4,12 +4,15 @@ import { vars } from "../../../lib/theme/vars.css.mjs";
 setFileScope("src/themes/momotaro/components/helpers.css.ts", "blocks");
 const focusRingColor = createVar("focusRingColor");
 const focusable = style({
+  "@media": {
+    "(prefers-reduced-motion: no-preference)": {
+      transition: `box-shadow ${vars.transition.fast}`
+    }
+  },
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`,
-    transitionDuration: vars.transition.fast,
-    transitionProperty: "box-shadow"
+    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`
   },
   selectors: {
     "&:disabled, &[disabled]": {
@@ -20,9 +23,7 @@ const focusable = style({
     "&:has(input:focus-visible)": {
       outline: "2px solid transparent",
       outlineOffset: "2px",
-      boxShadow: vars.focus.boxShadow,
-      transitionDuration: vars.transition.fast,
-      transitionProperty: "box-shadow"
+      boxShadow: vars.focus.boxShadow
     },
     "&:has(input:disabled)": {
       opacity: 0.5,

package/dist/styles/themes/momotaro/components/index.cjs

@@ -9,6 +9,7 @@ const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
 const styles_themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
 const styles_themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
+const styles_themes_momotaro_components_select_css_cjs = require("./select.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
 const styles_themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
 const components = {
@@ -16,13 +17,14 @@ const components = {
   checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
   dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
   divider: styles_themes_momotaro_components_divider_css_cjs.divider,
+  dropdown: styles_themes_momotaro_components_dropdown_css_cjs.dropdown,
   input: styles_themes_momotaro_components_input_css_cjs.input,
   label: styles_themes_momotaro_components_label_css_cjs.label,
   link: styles_themes_momotaro_components_link_css_cjs.link,
   progress: styles_themes_momotaro_components_progress_css_cjs.progress,
   radio: styles_themes_momotaro_components_radio_css_cjs.radio,
+  select: styles_themes_momotaro_components_select_css_cjs.select,
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
-  dropdown: styles_themes_momotaro_components_dropdown_css_cjs.dropdown,
   switch: styles_themes_momotaro_components_switch_css_cjs.switchTheme
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -8,6 +8,7 @@ import { label } from "./label.css.mjs";
 import { link } from "./link.css.mjs";
 import { progress } from "./progress.css.mjs";
 import { radio } from "./radio.css.mjs";
+import { select } from "./select.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 import { switchTheme } from "./switch.css.mjs";
 const components = {
@@ -15,13 +16,14 @@ const components = {
   checkbox,
   dialog,
   divider,
+  dropdown,
   input,
   label,
   link,
   progress,
   radio,
+  select,
   spinner,
-  dropdown,
   switch: switchTheme
 };
 export {

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

@@ -8,8 +8,7 @@ fileScope.setFileScope("src/themes/momotaro/components/input.css.ts", "blocks");
 const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input", {
   input: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     color: "text",
-    paddingY: "large",
-    paddingX: "large",
+    padding: "large",
     border: "none",
     borderRadius: "small"
   }), {
@@ -22,8 +21,11 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
   }], "input_input"),
   container: css.style([{
     minHeight: 56,
-    transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
-    transitionProperty: "box-shadow",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+      }
+    },
     ":focus-within": {
       outline: "2px solid transparent",
       outlineOffset: "2px",

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

@@ -7,8 +7,7 @@ setFileScope("src/themes/momotaro/components/input.css.ts", "blocks");
 const input = makeComponentTheme("input", {
   input: style([atoms({
     color: "text",
-    paddingY: "large",
-    paddingX: "large",
+    padding: "large",
     border: "none",
     borderRadius: "small"
   }), {
@@ -21,8 +20,11 @@ const input = makeComponentTheme("input", {
   }], "input_input"),
   container: style([{
     minHeight: 56,
-    transitionDuration: vars.transition.fast,
-    transitionProperty: "box-shadow",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `box-shadow ${vars.transition.fast}`
+      }
+    },
     ":focus-within": {
       outline: "2px solid transparent",
       outlineOffset: "2px",

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

@@ -17,7 +17,7 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
   base: css.style([{
     height: 8
   }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-    width: "full",
+    inlineSize: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
     color: "primary",

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

@@ -16,7 +16,7 @@ const progress = makeComponentTheme("progress", {
   base: style([{
     height: 8
   }, atoms({
-    width: "full",
+    inlineSize: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
     color: "primary",

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

@@ -12,11 +12,14 @@ const radio = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("radio"
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: 24,
-    height: 24,
+    inlineSize: 24,
+    blockSize: 24,
     borderRadius: 12,
-    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`,
-    transitionProperty: "background-color",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color ${styles_lib_theme_vars_css_cjs.vars.transition.fast}, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+      }
+    },
     ":hover": {
       backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
     },
@@ -34,7 +37,11 @@ const radio = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("radio"
     backgroundColor: "white",
     borderRadius: "8px",
     transform: "scale(0)",
-    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`,
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`
+      }
+    },
     selectors: {
       "input:checked ~ &": {
         transform: "scale(1)"

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

@@ -11,11 +11,14 @@ const radio = makeComponentTheme("radio", {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: 24,
-    height: 24,
+    inlineSize: 24,
+    blockSize: 24,
     borderRadius: 12,
-    transition: `transform ${vars.transition.fast}`,
-    transitionProperty: "background-color",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
+      }
+    },
     ":hover": {
       backgroundColor: vars.color.primaryDark
     },
@@ -33,7 +36,11 @@ const radio = makeComponentTheme("radio", {
     backgroundColor: "white",
     borderRadius: "8px",
     transform: "scale(0)",
-    transition: `transform ${vars.transition.normal} ${bounceOut}`,
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${vars.transition.normal} ${bounceOut}`
+      }
+    },
     selectors: {
       "input:checked ~ &": {
         transform: "scale(1)"

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

@@ -0,0 +1,35 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/select.css.ts", "blocks");
+const select = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("select", {
+  // wrapper: style({}),
+  select: styles_lib_css_style_style_cjs.style([{
+    color: "text",
+    padding: "large",
+    border: "none",
+    outline: "none",
+    backgroundColor: "white",
+    borderRadius: "medium",
+    boxShadow: "medium",
+    minHeight: 56,
+    transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
+    transitionProperty: "box-shadow",
+    ":focus-within": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: `${styles_lib_theme_vars_css_cjs.vars.shadow.small}, ${styles_lib_theme_vars_css_cjs.vars.focus.boxShadow}`
+    }
+  }, styles_themes_momotaro_components_helpers_css_cjs.focusable]),
+  icon: styles_lib_css_style_style_cjs.style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+fileScope.endFileScope();
+exports.select = select;

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

@@ -0,0 +1,36 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "../../../lib/css/style/style.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+import { focusable } from "./helpers.css.mjs";
+setFileScope("src/themes/momotaro/components/select.css.ts", "blocks");
+const select = makeComponentTheme("select", {
+  // wrapper: style({}),
+  select: style([{
+    color: "text",
+    padding: "large",
+    border: "none",
+    outline: "none",
+    backgroundColor: "white",
+    borderRadius: "medium",
+    boxShadow: "medium",
+    minHeight: 56,
+    transitionDuration: vars.transition.fast,
+    transitionProperty: "box-shadow",
+    ":focus-within": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
+    }
+  }, focusable]),
+  icon: style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+endFileScope();
+export {
+  select
+};

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

@@ -15,7 +15,7 @@ const switchTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("
     backgroundColor: "textLight",
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        transition: "background-color 120ms linear"
+        transition: `background-color 120ms linear, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
       }
     },
     selectors: {

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

@@ -14,7 +14,7 @@ const switchTheme = makeComponentTheme("switch", {
     backgroundColor: "textLight",
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        transition: "background-color 120ms linear"
+        transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
       }
     },
     selectors: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.8.10",
+  "version": "0.9.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",