@blockle/blocks 0.20.0-alpha1 → 0.20.0-alpha1.0

package/dist/themes/momotaro/components/{radio.css.mjs → radio.css.js}

@@ -1,35 +1,39 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { vars } from "../../../lib/theme/vars.css.mjs";
-import { focusable } from "./helpers.css.mjs";
-import { bounceOut } from "./transitions.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusable } from "./helpers.css.js";
+import { bounceOut } from "./transitions.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
 setFileScope("src/themes/momotaro/components/radio.css.ts", "@blockle/blocks");
 const radio = makeComponentTheme("radio", {
-  base: 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}`
+  base: 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.color.primaryDark
+      },
+      selectors: {
+        "&:has(input:checked):not(:hover)": {
+          backgroundColor: vars.color.primary
+        }
       }
     },
-    ":hover": {
-      backgroundColor: vars.color.primaryDark
-    },
-    selectors: {
-      "&:has(input:checked):not(:hover)": {
-        backgroundColor: vars.color.primary
-      }
-    }
-  }, atoms({
-    backgroundColor: "primaryLight"
-  }), focusable], "radio_base"),
+    atoms({
+      backgroundColor: "primaryLight"
+    }),
+    focusable
+  ]),
   icon: style({
     height: 12,
     width: 12,
@@ -46,7 +50,7 @@ const radio = makeComponentTheme("radio", {
         transform: "scale(1)"
       }
     }
-  }, "radio_icon"),
+  }),
   label: atoms({
     display: "flex",
     flexDirection: "row",

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

@@ -1,39 +1,43 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
-const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const style = require("../../../lib/css/style/style.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const helpers_css = require("./helpers.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
-const select = lib_theme_makeComponentTheme_cjs.makeComponentTheme("select", {
-  select: lib_css_style_style_cjs.style([{
-    color: "text",
-    padding: "large",
-    border: "none",
-    outline: "none",
-    backgroundColor: "white",
-    borderRadius: "medium",
-    boxShadow: "medium",
-    minHeight: 56,
-    transitionDuration: lib_theme_vars_css_cjs.vars.transition.fast,
-    transitionProperty: "box-shadow",
-    ":focus-within": {
-      outline: "2px solid transparent",
-      outlineOffset: "2px",
-      boxShadow: `${lib_theme_vars_css_cjs.vars.shadow.small}, ${lib_theme_vars_css_cjs.vars.focus.boxShadow}`
-    }
-  }, themes_momotaro_components_helpers_css_cjs.focusable]),
+const select = makeComponentTheme.makeComponentTheme("select", {
+  select: style.style([
+    {
+      color: "text",
+      padding: "large",
+      border: "none",
+      outline: "none",
+      backgroundColor: "white",
+      borderRadius: "medium",
+      boxShadow: "medium",
+      minHeight: 56,
+      transitionDuration: vars_css.vars.transition.fast,
+      transitionProperty: "box-shadow",
+      ":focus-within": {
+        outline: "2px solid transparent",
+        outlineOffset: "2px",
+        boxShadow: `${vars_css.vars.shadow.small}, ${vars_css.vars.focus.boxShadow}`
+      }
+    },
+    helpers_css.focusable
+  ]),
   variants: {
     variant: {
-      outline: lib_css_style_style_cjs.style({
+      outline: style.style({
         borderWidth: "small",
         borderStyle: "solid",
         borderColor: "primary"
       }),
-      solid: lib_css_style_style_cjs.style({})
+      solid: style.style({})
     }
   },
-  icon: lib_css_style_style_cjs.style({
+  icon: style.style({
     paddingInline: "large"
   }),
   defaultVariants: {

package/dist/themes/momotaro/components/select.css.d.ts

@@ -0,0 +1 @@
+export declare const select: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').SelectTheme> | undefined;

package/dist/themes/momotaro/components/select.css.js

@@ -0,0 +1,48 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "../../../lib/css/style/style.js";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusable } from "./helpers.css.js";
+setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
+const select = makeComponentTheme("select", {
+  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
+  ]),
+  variants: {
+    variant: {
+      outline: style({
+        borderWidth: "small",
+        borderStyle: "solid",
+        borderColor: "primary"
+      }),
+      solid: style({})
+    }
+  },
+  icon: style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+endFileScope();
+export {
+  select
+};

package/dist/themes/momotaro/components/slider.css.cjs

@@ -1,77 +1,81 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const style = require("../../../lib/css/style/style.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const helpers_css = require("./helpers.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
-const trackBackground = css.createVar("trackBackground");
-const filledTrackBackground = css.createVar("filledTrackBackground");
-const thumbBackground = css.createVar("thumbBackground");
-const thumbActive = css.createVar("thumbActive");
-const slider = lib_theme_makeComponentTheme_cjs.makeComponentTheme("slider", {
-  base: lib_css_style_style_cjs.style({
+const trackBackground = css.createVar();
+const filledTrackBackground = css.createVar();
+const thumbBackground = css.createVar();
+const thumbActive = css.createVar();
+const slider = makeComponentTheme.makeComponentTheme("slider", {
+  base: style.style({
     blockSize: "20px"
   }),
-  track: lib_css_style_style_cjs.style({
+  track: style.style({
     blockSize: "4px",
     backgroundColor: trackBackground,
     borderRadius: "small"
   }),
-  filledTrack: lib_css_style_style_cjs.style({
+  filledTrack: style.style({
     backgroundColor: filledTrackBackground
   }),
-  thumb: lib_css_style_style_cjs.style([{
-    backgroundColor: thumbBackground,
-    borderRadius: "50%",
-    height: "16px",
-    width: "16px",
-    boxShadow: `0 0 0 0px color-mix(in srgb,  ${lib_theme_vars_css_cjs.vars.color.primaryLight}, transparent 0%)`,
-    vars: {
-      [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${lib_theme_vars_css_cjs.vars.color.primaryLight}, transparent 20%)`
-    },
-    ":hover": {
-      boxShadow: thumbActive
-    },
-    ":focus-visible": {
-      boxShadow: thumbActive
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "box-shadow 0.2s"
+  thumb: style.style([
+    {
+      backgroundColor: thumbBackground,
+      borderRadius: "50%",
+      height: "16px",
+      width: "16px",
+      boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars_css.vars.color.primaryLight}, transparent 0%)`,
+      vars: {
+        [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars_css.vars.color.primaryLight}, transparent 20%)`
+      },
+      ":hover": {
+        boxShadow: thumbActive
+      },
+      ":focus-visible": {
+        boxShadow: thumbActive
+      },
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: "box-shadow 0.2s"
+        }
       }
-    }
-  }, themes_momotaro_components_helpers_css_cjs.focusable]),
+    },
+    helpers_css.focusable
+  ]),
   variants: {
     size: {
-      small: lib_css_style_style_cjs.style({
+      small: style.style({
         inlineSize: "100px"
       }),
-      medium: lib_css_style_style_cjs.style({
+      medium: style.style({
         inlineSize: "200px"
       }),
-      large: lib_css_style_style_cjs.style({
+      large: style.style({
         inlineSize: "300px"
       })
     },
     colorScheme: {
-      primary: lib_css_style_style_cjs.style({
+      primary: style.style({
         vars: {
-          [trackBackground]: lib_theme_vars_css_cjs.vars.color.primaryLight,
-          [filledTrackBackground]: lib_theme_vars_css_cjs.vars.color.primary,
-          [thumbBackground]: lib_theme_vars_css_cjs.vars.color.primary
+          [trackBackground]: vars_css.vars.color.primaryLight,
+          [filledTrackBackground]: vars_css.vars.color.primary,
+          [thumbBackground]: vars_css.vars.color.primary
         }
       }),
-      secondary: lib_css_style_style_cjs.style({
+      secondary: style.style({
         vars: {
-          [trackBackground]: lib_theme_vars_css_cjs.vars.color.primaryLight,
-          [filledTrackBackground]: lib_theme_vars_css_cjs.vars.color.secondary,
-          [thumbBackground]: lib_theme_vars_css_cjs.vars.color.secondary
+          [trackBackground]: vars_css.vars.color.primaryLight,
+          [filledTrackBackground]: vars_css.vars.color.secondary,
+          [thumbBackground]: vars_css.vars.color.secondary
         }
       })
     },
-    disabled: lib_css_style_style_cjs.style({
+    disabled: style.style({
       pointerEvents: "none",
       vars: {
         [trackBackground]: "#c0c0c0",

package/dist/themes/momotaro/components/slider.css.d.ts

@@ -0,0 +1 @@
+export declare const slider: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').SliderTheme> | undefined;

package/dist/themes/momotaro/components/{slider.css.mjs → slider.css.js}

@@ -1,14 +1,14 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar } from "@vanilla-extract/css";
-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";
+import { style } from "../../../lib/css/style/style.js";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusable } from "./helpers.css.js";
 setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
-const trackBackground = createVar("trackBackground");
-const filledTrackBackground = createVar("filledTrackBackground");
-const thumbBackground = createVar("thumbBackground");
-const thumbActive = createVar("thumbActive");
+const trackBackground = createVar();
+const filledTrackBackground = createVar();
+const thumbBackground = createVar();
+const thumbActive = createVar();
 const slider = makeComponentTheme("slider", {
   base: style({
     blockSize: "20px"
@@ -21,27 +21,30 @@ const slider = makeComponentTheme("slider", {
   filledTrack: style({
     backgroundColor: filledTrackBackground
   }),
-  thumb: style([{
-    backgroundColor: thumbBackground,
-    borderRadius: "50%",
-    height: "16px",
-    width: "16px",
-    boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 0%)`,
-    vars: {
-      [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 20%)`
-    },
-    ":hover": {
-      boxShadow: thumbActive
-    },
-    ":focus-visible": {
-      boxShadow: thumbActive
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "box-shadow 0.2s"
+  thumb: style([
+    {
+      backgroundColor: thumbBackground,
+      borderRadius: "50%",
+      height: "16px",
+      width: "16px",
+      boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 0%)`,
+      vars: {
+        [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 20%)`
+      },
+      ":hover": {
+        boxShadow: thumbActive
+      },
+      ":focus-visible": {
+        boxShadow: thumbActive
+      },
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: "box-shadow 0.2s"
+        }
       }
-    }
-  }, focusable]),
+    },
+    focusable
+  ]),
   variants: {
     size: {
       small: style({

package/dist/themes/momotaro/components/spinner.css.cjs

@@ -1,7 +1,8 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
 const spinAnimation = css.keyframes({
   "0%": {
@@ -10,8 +11,8 @@ const spinAnimation = css.keyframes({
   "100%": {
     transform: "rotate(360deg)"
   }
-}, "spinAnimation");
-const spinner = lib_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
+});
+const spinner = makeComponentTheme.makeComponentTheme("spinner", {
   base: css.style({
     aspectRatio: "1 / 1",
     overflow: "hidden",
@@ -20,19 +21,19 @@ const spinner = lib_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
     borderStyle: "solid",
     borderColor: "currentColor transparent currentColor transparent",
     animation: `${spinAnimation} 1.2s linear infinite`
-  }, "spinner_base"),
+  }),
   variants: {
     // note: colors are handled by atoms
     size: {
       small: css.style({
         width: 16
-      }, "spinner_variants_size_small"),
+      }),
       medium: css.style({
         width: 24
-      }, "spinner_variants_size_medium"),
+      }),
       large: css.style({
         width: 32
-      }, "spinner_variants_size_large")
+      })
     }
   },
   defaultVariants: {

package/dist/themes/momotaro/components/spinner.css.d.ts

@@ -0,0 +1 @@
+export declare const spinner: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').SpinnerTheme> | undefined;

package/dist/themes/momotaro/components/{spinner.css.mjs → spinner.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, keyframes } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
 setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
 const spinAnimation = keyframes({
   "0%": {
@@ -9,7 +9,7 @@ const spinAnimation = keyframes({
   "100%": {
     transform: "rotate(360deg)"
   }
-}, "spinAnimation");
+});
 const spinner = makeComponentTheme("spinner", {
   base: style({
     aspectRatio: "1 / 1",
@@ -19,19 +19,19 @@ const spinner = makeComponentTheme("spinner", {
     borderStyle: "solid",
     borderColor: "currentColor transparent currentColor transparent",
     animation: `${spinAnimation} 1.2s linear infinite`
-  }, "spinner_base"),
+  }),
   variants: {
     // note: colors are handled by atoms
     size: {
       small: style({
         width: 16
-      }, "spinner_variants_size_small"),
+      }),
       medium: style({
         width: 24
-      }, "spinner_variants_size_medium"),
+      }),
       large: style({
         width: 32
-      }, "spinner_variants_size_large")
+      })
     }
   },
   defaultVariants: {

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

@@ -1,39 +1,43 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const style = require("../../../lib/css/style/style.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const helpers_css = require("./helpers.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
-const activeScaleFactor = css.createVar("activeScaleFactor");
-const switchTheme = lib_theme_makeComponentTheme_cjs.makeComponentTheme("switch", {
-  base: lib_css_style_style_cjs.style([{
-    width: 52,
-    height: 32,
-    borderRadius: "xlarge",
-    backgroundColor: "textLight",
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color 120ms linear, box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
-      }
-    },
-    selectors: {
-      '&[data-checked="true"]': {
-        backgroundColor: lib_theme_vars_css_cjs.vars.color.secondary
-      }
-    },
-    // Scale the switch when it's `:active`
-    vars: {
-      [activeScaleFactor]: "1"
-    },
-    ":active": {
+const activeScaleFactor = css.createVar();
+const switchTheme = makeComponentTheme.makeComponentTheme("switch", {
+  base: style.style([
+    {
+      width: 52,
+      height: 32,
+      borderRadius: "xlarge",
+      backgroundColor: "textLight",
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color 120ms linear, box-shadow ${vars_css.vars.transition.fast}`
+        }
+      },
+      selectors: {
+        '&[data-checked="true"]': {
+          backgroundColor: vars_css.vars.color.secondary
+        }
+      },
+      // Scale the switch when it's `:active`
       vars: {
-        [activeScaleFactor]: "0.96"
+        [activeScaleFactor]: "1"
+      },
+      ":active": {
+        vars: {
+          [activeScaleFactor]: "0.96"
+        }
       }
-    }
-  }, themes_momotaro_components_helpers_css_cjs.focusable]),
-  slider: lib_css_style_style_cjs.style({
+    },
+    helpers_css.focusable
+  ]),
+  slider: style.style({
     width: 24,
     height: 24,
     top: 4,

package/dist/themes/momotaro/components/switch.css.d.ts

@@ -0,0 +1 @@
+export declare const switchTheme: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').SwitchTheme> | undefined;

package/dist/themes/momotaro/components/{switch.css.mjs → switch.css.js}

@@ -1,37 +1,40 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar } from "@vanilla-extract/css";
-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";
+import { style } from "../../../lib/css/style/style.js";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusable } from "./helpers.css.js";
 setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
-const activeScaleFactor = createVar("activeScaleFactor");
+const activeScaleFactor = createVar();
 const switchTheme = makeComponentTheme("switch", {
-  base: style([{
-    width: 52,
-    height: 32,
-    borderRadius: "xlarge",
-    backgroundColor: "textLight",
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
-      }
-    },
-    selectors: {
-      '&[data-checked="true"]': {
-        backgroundColor: vars.color.secondary
-      }
-    },
-    // Scale the switch when it's `:active`
-    vars: {
-      [activeScaleFactor]: "1"
-    },
-    ":active": {
+  base: style([
+    {
+      width: 52,
+      height: 32,
+      borderRadius: "xlarge",
+      backgroundColor: "textLight",
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
+        }
+      },
+      selectors: {
+        '&[data-checked="true"]': {
+          backgroundColor: vars.color.secondary
+        }
+      },
+      // Scale the switch when it's `:active`
       vars: {
-        [activeScaleFactor]: "0.96"
+        [activeScaleFactor]: "1"
+      },
+      ":active": {
+        vars: {
+          [activeScaleFactor]: "0.96"
+        }
       }
-    }
-  }, focusable]),
+    },
+    focusable
+  ]),
   slider: style({
     width: 24,
     height: 24,