@blockle/blocks-theme-momotaro 7.2.0 → 7.3.0

package/dist/components/link.css.js

@@ -1,49 +1,69 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars } from "@blockle/blocks-core";
+import { makeComponentTheme, layers, vars } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/link.css.ts", "@blockle/blocks-theme-momotaro");
 const link = makeComponentTheme("link", {
   root: style([
     {
-      outline: "none",
-      border: "none",
-      textDecoration: "none",
-      background: "transparent",
-      borderRadius: 1,
-      ":hover": {
-        textDecoration: "underline"
-      },
-      ":focus-visible": {
-        textDecoration: "underline"
-      },
-      cursor: "pointer"
-      // selectors: {
-      //   '&[target="_blank"]::after': {
-      //     content: '"\\2197"',
-      //     marginLeft: 4,
-      //   },
-      // },
+      "@layer": {
+        [layers.theme]: {
+          outline: "none",
+          border: "none",
+          textDecoration: "none",
+          background: "transparent",
+          borderRadius: 1,
+          ":hover": {
+            textDecoration: "underline"
+          },
+          ":focus-visible": {
+            textDecoration: "underline"
+          },
+          cursor: "pointer"
+          // selectors: {
+          //   '&[target="_blank"]::after': {
+          //     content: '"\\2197"',
+          //     marginLeft: 4,
+          //   },
+          // },
+        }
+      }
     },
     focusable
   ]),
   variants: {
     intent: {
       inherit: style({
-        color: "inherit",
-        fontWeight: "inherit"
+        "@layer": {
+          [layers.theme]: {
+            color: "inherit",
+            fontWeight: "inherit"
+          }
+        }
       }),
       primary: style({
-        color: vars.colorRole.primary.foreground,
-        fontWeight: 500
+        "@layer": {
+          [layers.theme]: {
+            color: vars.colorRole.primary.foreground,
+            fontWeight: 500
+          }
+        }
       }),
       neutral: style({
-        color: vars.colorRole.neutral.foreground,
-        fontWeight: 500
+        "@layer": {
+          [layers.theme]: {
+            color: vars.colorRole.neutral.foreground,
+            fontWeight: 500
+          }
+        }
       })
     },
     underline: style({
-      textDecoration: "underline"
+      "@layer": {
+        [layers.theme]: {
+          textDecoration: "underline"
+        }
+      }
     })
   },
   defaultVariants: {

package/dist/components/menu.css.d.ts

@@ -0,0 +1,3 @@
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const menu: ThemeComponentsStyles['menu'];
+//# sourceMappingURL=menu.css.d.ts.map

package/dist/components/menu.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.css.d.ts","sourceRoot":"","sources":["../../src/components/menu.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AA0B9B,eAAO,MAAM,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAwD7C,CAAC"}

package/dist/components/menu.css.js

@@ -0,0 +1,83 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
+import { style, globalStyle } from "@vanilla-extract/css";
+import { focusable } from "./helpers.css.js";
+setFileScope("src/components/menu.css.ts", "@blockle/blocks-theme-momotaro");
+const hoverBackground = `color-mix(in srgb, ${vars.colorRole.text.default} 10%, transparent)`;
+const itemIndicator = style({
+  "@layer": {
+    [layers.theme]: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "1em",
+      height: "1em"
+    }
+  }
+});
+globalStyle(`${itemIndicator} > svg`, {
+  "@layer": {
+    [layers.theme]: { width: "100%", height: "100%" }
+  }
+});
+const menu = makeComponentTheme("menu", {
+  // Sits on the popover surface (background, shadow, radius)
+  list: style({
+    "@layer": {
+      [layers.theme]: {
+        minWidth: "10rem",
+        // Popover caps a long list at the viewport's edge; the list scrolls
+        overflowY: "auto",
+        overscrollBehavior: "contain"
+      }
+    }
+  }),
+  item: style([
+    {
+      "@layer": {
+        [layers.theme]: {
+          borderRadius: vars.borderRadius[1],
+          paddingBlock: vars.space[1],
+          paddingInline: vars.space[2],
+          display: "flex",
+          alignItems: "center",
+          gap: vars.space[2],
+          width: "100%",
+          border: "none",
+          background: "transparent",
+          color: "inherit",
+          font: "inherit",
+          textAlign: "start",
+          cursor: "pointer",
+          selectors: {
+            '&:hover:not([aria-disabled="true"]), &:focus:not([aria-disabled="true"])': {
+              backgroundColor: hoverBackground
+            },
+            '&[aria-disabled="true"]': {
+              cursor: "default",
+              color: vars.colorRole.text.disabled
+            }
+          }
+        }
+      }
+    },
+    focusable
+  ]),
+  // Holds the check; unchecked items keep the space so labels line up
+  itemIndicator,
+  separator: style({
+    "@layer": {
+      [layers.theme]: {
+        border: "none",
+        height: 1,
+        marginBlock: vars.space[1],
+        backgroundColor: `color-mix(in srgb, ${vars.colorRole.text.default} 15%, transparent)`
+      }
+    }
+  })
+});
+endFileScope();
+export {
+  menu
+};

package/dist/components/popover.css.js

@@ -1,45 +1,45 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/popover.css.ts", "@blockle/blocks-theme-momotaro");
 const popover = makeComponentTheme(
   "popover",
   {
-    root: style([
-      atoms({
-        borderRadius: 1,
-        boxShadow: 2,
-        padding: 2,
-        margin: 1
-        // Space between the popover and the anchor element
-      }),
-      {
-        backgroundColor: vars.colorRole.surface.raised,
-        color: vars.colorRole.text.default,
-        width: "max-content",
-        selectors: {
-          "&:popover-open": {
-            transform: "translateY(0) scale(1)",
-            opacity: 1,
-            "@starting-style": {
+    root: style({
+      "@layer": {
+        [layers.theme]: {
+          borderRadius: vars.borderRadius[1],
+          boxShadow: vars.colorRole.shadow[2],
+          padding: vars.space[2],
+          margin: vars.space[1],
+          // Space between the popover and the anchor element
+          backgroundColor: vars.colorRole.surface.raised,
+          color: vars.colorRole.text.default,
+          width: "max-content",
+          selectors: {
+            "&:popover-open": {
+              transform: "translateY(0) scale(1)",
+              opacity: 1,
+              "@starting-style": {
+                transform: "translateY(12px) scale(0.8)",
+                opacity: 0
+              }
+            }
+          },
+          // Apply the animation only if the user has not requested reduced motion
+          "@media": {
+            "(prefers-reduced-motion: no-preference)": {
+              // Ending style
               transform: "translateY(12px) scale(0.8)",
-              opacity: 0
+              opacity: 0,
+              transitionBehavior: "allow-discrete",
+              transitionProperty: "opacity, transform, overlay, display",
+              transitionDuration: "100ms"
             }
           }
-        },
-        // Apply the animation only if the user has not requested reduced motion
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            // Ending style
-            transform: "translateY(12px) scale(0.8)",
-            opacity: 0,
-            transitionBehavior: "allow-discrete",
-            transitionProperty: "opacity, transform, overlay, display",
-            transitionDuration: "100ms"
-          }
         }
       }
-    ])
+    })
   }
 );
 endFileScope();

package/dist/components/progress.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.css.d.ts","sourceRoot":"","sources":["../../src/components/progress.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAY9B,eAAO,MAAM,QAAQ,EAAE,qBAAqB,CAAC,UAAU,CA2CtD,CAAC"}
+{"version":3,"file":"progress.css.d.ts","sourceRoot":"","sources":["../../src/components/progress.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAY9B,eAAO,MAAM,QAAQ,EAAE,qBAAqB,CAAC,UAAU,CAmDtD,CAAC"}

package/dist/components/progress.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style, keyframes } from "@vanilla-extract/css";
 setFileScope("src/components/progress.css.ts", "@blockle/blocks-theme-momotaro");
 const indeterminateAnimation = keyframes({
@@ -13,41 +13,49 @@ const indeterminateAnimation = keyframes({
 const progress = makeComponentTheme(
   "progress",
   {
-    root: style([
-      {
-        height: 8,
-        backgroundColor: vars.colorRole.surface.sunken,
-        color: vars.colorRole.primary.solid
-      },
-      atoms({
-        inlineSize: "full",
-        borderRadius: 1,
-        overflow: "hidden"
-      })
-    ]),
+    root: style({
+      "@layer": {
+        [layers.theme]: {
+          height: 8,
+          backgroundColor: vars.colorRole.surface.sunken,
+          color: vars.colorRole.primary.solid,
+          inlineSize: "100%",
+          borderRadius: vars.borderRadius[1],
+          overflow: "hidden"
+        }
+      }
+    }),
     bar: style({
-      borderRadius: "inherit",
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: "transform 180ms ease-out"
+      "@layer": {
+        [layers.theme]: {
+          borderRadius: "inherit",
+          "@media": {
+            "(prefers-reduced-motion: no-preference)": {
+              transition: "transform 180ms ease-out"
+            }
+          }
         }
       }
     }),
     variants: {
       indeterminate: style({
-        "@media": {
-          // For reduce motion we show a striped pattern instead of animating
-          "(prefers-reduced-motion: reduce)": {
-            backgroundImage: `repeating-linear-gradient(
+        "@layer": {
+          [layers.theme]: {
+            "@media": {
+              // For reduce motion we show a striped pattern instead of animating
+              "(prefers-reduced-motion: reduce)": {
+                backgroundImage: `repeating-linear-gradient(
           45deg,
           transparent,
           transparent 20px,
           ${vars.colorRole.primary.solidHover} 20px,
           ${vars.colorRole.primary.solidHover} 40px
         )`
-          },
-          "(prefers-reduced-motion: no-preference)": {
-            animation: `${indeterminateAnimation} 3s ease-in-out infinite`
+              },
+              "(prefers-reduced-motion: no-preference)": {
+                animation: `${indeterminateAnimation} 3s ease-in-out infinite`
+              }
+            }
           }
         }
       })

package/dist/components/radio.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.css.d.ts","sourceRoot":"","sources":["../../src/components/radio.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAM9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAqDhD,CAAC"}
+{"version":3,"file":"radio.css.d.ts","sourceRoot":"","sources":["../../src/components/radio.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAM9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAiEhD,CAAC"}

package/dist/components/radio.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms, vars } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 import { bounceOut } from "./transitions.js";
@@ -9,52 +9,64 @@ const radio = makeComponentTheme(
   {
     root: style([
       {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        inlineSize: 24,
-        blockSize: 24,
-        borderRadius: 12,
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
-          }
-        },
-        ":hover": {
-          backgroundColor: vars.colorRole.primary.solidHover
-        },
-        selectors: {
-          "&:has(input:checked):not(:hover)": {
-            backgroundColor: vars.colorRole.primary.solid
+        "@layer": {
+          [layers.theme]: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            inlineSize: 24,
+            blockSize: 24,
+            borderRadius: 12,
+            backgroundColor: vars.colorRole.primary.subtle,
+            "@media": {
+              "(prefers-reduced-motion: no-preference)": {
+                transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
+              }
+            },
+            ":hover": {
+              backgroundColor: vars.colorRole.primary.solidHover
+            },
+            selectors: {
+              "&:has(input:checked):not(:hover)": {
+                backgroundColor: vars.colorRole.primary.solid
+              }
+            }
           }
         }
       },
-      { backgroundColor: vars.colorRole.primary.subtle },
       focusable
     ]),
     icon: style({
-      height: 12,
-      width: 12,
-      backgroundColor: vars.colorRole.primary.contrast,
-      borderRadius: "8px",
-      transform: "scale(0)",
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: `transform ${vars.transition.normal} ${bounceOut}`
-        }
-      },
-      selectors: {
-        "input:checked ~ &": {
-          transform: "scale(1)"
+      "@layer": {
+        [layers.theme]: {
+          height: 12,
+          width: 12,
+          backgroundColor: vars.colorRole.primary.contrast,
+          borderRadius: "8px",
+          transform: "scale(0)",
+          "@media": {
+            "(prefers-reduced-motion: no-preference)": {
+              transition: `transform ${vars.transition.normal} ${bounceOut}`
+            }
+          },
+          selectors: {
+            "input:checked ~ &": {
+              transform: "scale(1)"
+            }
+          }
         }
       }
     }),
-    label: atoms({
-      display: "flex",
-      flexDirection: "row",
-      padding: 1,
-      gap: 2,
-      cursor: "pointer"
+    label: style({
+      "@layer": {
+        [layers.theme]: {
+          display: "flex",
+          flexDirection: "row",
+          padding: vars.space[1],
+          gap: vars.space[2],
+          cursor: "pointer"
+        }
+      }
     })
   }
 );

package/dist/components/select.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../src/components/select.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAmElD,CAAC"}
+{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../src/components/select.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAU9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CA4ElD,CAAC"}

package/dist/components/select.css.js

@@ -1,69 +1,79 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms, vars } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/select.css.ts", "@blockle/blocks-theme-momotaro");
+const chevronRoom = `calc(${vars.space[3]} + 1rem + ${vars.space[2]})`;
 const select = makeComponentTheme(
   "select",
   {
     select: style([
-      atoms({
-        paddingBlock: 1,
-        borderRadius: 2,
-        boxShadow: 2
-      }),
       {
-        border: "none",
-        outline: "none",
-        color: vars.colorRole.text.default,
-        backgroundColor: vars.colorRole.surface.raised,
-        transitionDuration: vars.transition.fast,
-        transitionProperty: "outline-color, outline-offset"
+        "@layer": {
+          [layers.theme]: {
+            paddingBlock: vars.space[1],
+            borderRadius: vars.borderRadius[2],
+            boxShadow: vars.colorRole.shadow[2],
+            border: "none",
+            outline: "none",
+            color: vars.colorRole.text.default,
+            backgroundColor: vars.colorRole.surface.raised,
+            transitionDuration: vars.transition.fast,
+            transitionProperty: "outline-color, outline-offset"
+          }
+        }
       },
       focusable
     ]),
     variants: {
       variant: {
-        outline: style([
-          atoms({
-            borderWidth: "thin"
-          }),
-          {
-            borderStyle: "solid",
-            borderColor: vars.colorRole.primary.solid
+        outline: style({
+          "@layer": {
+            [layers.theme]: {
+              borderWidth: vars.borderWidth.thin,
+              borderStyle: "solid",
+              borderColor: vars.colorRole.primary.solid
+            }
           }
-        ]),
-        solid: style({})
+        }),
+        solid: ""
       },
       size: {
-        small: style([
-          atoms({
-            paddingInline: 3
-          }),
-          {
-            minHeight: 40
+        small: style({
+          "@layer": {
+            [layers.theme]: {
+              paddingInlineStart: vars.space[3],
+              paddingInlineEnd: chevronRoom,
+              minHeight: 40
+            }
           }
-        ]),
-        medium: style([
-          atoms({
-            paddingInline: 4
-          }),
-          {
-            minHeight: 48
+        }),
+        medium: style({
+          "@layer": {
+            [layers.theme]: {
+              paddingInlineStart: vars.space[4],
+              paddingInlineEnd: chevronRoom,
+              minHeight: 48
+            }
           }
-        ]),
-        large: style([
-          atoms({
-            paddingInline: 5
-          }),
-          {
-            minHeight: 56
+        }),
+        large: style({
+          "@layer": {
+            [layers.theme]: {
+              paddingInlineStart: vars.space[5],
+              paddingInlineEnd: chevronRoom,
+              minHeight: 56
+            }
           }
-        ])
+        })
       }
     },
-    icon: atoms({
-      paddingInline: 3
+    icon: style({
+      "@layer": {
+        [layers.theme]: {
+          paddingInline: vars.space[3]
+        }
+      }
     }),
     defaultVariants: {
       size: "medium",

package/dist/components/slider.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.css.d.ts","sourceRoot":"","sources":["../../src/components/slider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAW9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAsFlD,CAAC"}
+{"version":3,"file":"slider.css.d.ts","sourceRoot":"","sources":["../../src/components/slider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAW9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CA0HlD,CAAC"}