@monabbous/slidebox 1.1.0 → 1.3.0

package/tailwind/experimental-rules.json

@@ -0,0 +1,125 @@
+{
+  ".slidebox-range": {
+    "--_size": "var(--slidebox-size, 24px)",
+    "--_spacing": "var(--slidebox-spacing, .33)",
+    "--_range-inset": "max(0px, calc(var(--_size) * var(--_spacing) * .5))",
+    "--_thumb-size": "calc(var(--_size) * (1 - var(--_spacing)))",
+    "--_deform": "var(--slidebox-deform, .1)",
+    "--_duration": "var(--slidebox-duration, 200ms)",
+    "--_easing": "var(--slidebox-easing, ease-in-out)",
+    "--_track": "var(--slidebox-track, Field)",
+    "--_border": "var(--slidebox-border, ButtonBorder)",
+    "--_on": "var(--slidebox-on, var(--_accent, light-dark(#0b75ff, SelectedItem)))",
+    "appearance": "none",
+    "-webkit-appearance": "none",
+    "box-sizing": "border-box",
+    "width": "100%",
+    "min-width": "0",
+    "height": "var(--_size)",
+    "margin": "0",
+    "padding-block": "0",
+    "padding-inline": "var(--_range-inset)",
+    "border": "1px solid var(--_border)",
+    "border-radius": "var(--slidebox-radius, 100vw)",
+    "background": "var(--_track)",
+    "color": "var(--_on)",
+    "cursor": "pointer",
+    "accent-color": "var(--_on)",
+    "&[data-slidebox-range-fill]": {
+      "--_fill-size": "max(0px, min(var(--_thumb-size), calc(var(--_size) - 2px)))",
+      "--_fill-stop": "clamp(0px, calc(var(--_thumb-size) * .5 + (100% - var(--_thumb-size)) * clamp(0, var(--slidebox-range-fill, 0), 1)), 100%)",
+      "background-image": "radial-gradient(circle closest-side, var(--_fill-color, var(--_on)) calc(100% - .5px), transparent 100%),\n    linear-gradient(to right, transparent 0 calc(var(--_fill-size) * .5), var(--_fill-color, var(--_on)) calc(var(--_fill-size) * .5) var(--_fill-stop), transparent var(--_fill-stop)),\n    var(--_range-track-image, none)",
+      "background-size": "var(--_fill-size) var(--_fill-size), max(0px, calc(100% - 2 * var(--_range-inset))) var(--_fill-size), 100vw 100vh",
+      "background-position": "left var(--_range-inset) center, center, 0 0",
+      "background-repeat": "no-repeat",
+      "background-attachment": "scroll, scroll, fixed",
+      "background-clip": "padding-box"
+    },
+    "&[data-slidebox-range-fill]:dir(rtl)": {
+      "background-image": "radial-gradient(circle closest-side, var(--_fill-color, var(--_on)) calc(100% - .5px), transparent 100%),\n    linear-gradient(to left, transparent 0 calc(var(--_fill-size) * .5), var(--_fill-color, var(--_on)) calc(var(--_fill-size) * .5) var(--_fill-stop), transparent var(--_fill-stop)),\n    var(--_range-track-image, none)",
+      "background-position": "right var(--_range-inset) center, center, 0 0"
+    },
+    "&::-webkit-slider-runnable-track": {
+      "box-sizing": "border-box",
+      "height": "calc(var(--_size) - 2px)",
+      "border": "0",
+      "border-radius": "var(--slidebox-radius, 100vw)",
+      "background": "transparent"
+    },
+    "&::-moz-range-track": {
+      "box-sizing": "border-box",
+      "height": "calc(var(--_size) - 2px)",
+      "border": "0",
+      "border-radius": "var(--slidebox-radius, 100vw)",
+      "background": "transparent"
+    },
+    "&::-webkit-slider-thumb": {
+      "appearance": "none",
+      "-webkit-appearance": "none",
+      "box-sizing": "border-box",
+      "width": "calc(var(--_size) * (1 - var(--_spacing)))",
+      "height": "calc(var(--_size) * (1 - var(--_spacing)))",
+      "margin-top": "calc(var(--_size) * var(--_spacing) / 2 - 1px)",
+      "border": "1px solid var(--_track)",
+      "border-radius": "var(--slidebox-radius, 100vw)",
+      "background": "var(--_on)",
+      "transition": "none"
+    },
+    "&::-moz-range-thumb": {
+      "box-sizing": "border-box",
+      "width": "calc(var(--_size) * (1 - var(--_spacing)))",
+      "height": "calc(var(--_size) * (1 - var(--_spacing)))",
+      "border": "1px solid var(--_track)",
+      "border-radius": "var(--slidebox-radius, 100vw)",
+      "background": "var(--_on)",
+      "transition": "none"
+    },
+    "&:focus-visible": {
+      "outline": "2px solid var(--_on)",
+      "outline-offset": "3px"
+    },
+    "&[data-slidebox-range-dragging]::-webkit-slider-thumb": {
+      "background": "transparent",
+      "border-color": "transparent",
+      "transition": "none"
+    },
+    "&[data-slidebox-range-dragging]::-moz-range-thumb": {
+      "background": "transparent",
+      "border-color": "transparent",
+      "transition": "none"
+    },
+    "&:disabled": {
+      "cursor": "not-allowed",
+      "opacity": ".5"
+    },
+    "@supports (color: AccentColor)": {
+      "&": {
+        "--_accent": "AccentColor"
+      }
+    },
+    "@media (forced-colors: active)": {
+      "&": {
+        "--_track": "Field",
+        "--_border": "ButtonBorder",
+        "--_on": "Highlight"
+      },
+      "&::-webkit-slider-thumb": {
+        "border-color": "Highlight"
+      },
+      "&::-moz-range-thumb": {
+        "border-color": "Highlight"
+      }
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      "&": {
+        "transition-duration": ".01ms"
+      },
+      "&::-webkit-slider-thumb": {
+        "transition-duration": ".01ms"
+      },
+      "&::-moz-range-thumb": {
+        "transition-duration": ".01ms"
+      }
+    }
+  }
+}

package/tailwind/group-rules.json

@@ -0,0 +1,152 @@
+{
+  "--_size": "var(--slidebox-size, 36px)",
+  "--_spacing": "var(--slidebox-spacing, .12)",
+  "--_deform": "var(--slidebox-deform, .06)",
+  "--_duration": "var(--slidebox-duration, 200ms)",
+  "--_easing": "var(--slidebox-easing, ease-in-out)",
+  "--_track": "var(--slidebox-track, Field)",
+  "--_border": "var(--slidebox-border, ButtonBorder)",
+  "--_off": "var(--slidebox-off, FieldText)",
+  "--_on": "var(--slidebox-on, var(--_accent, light-dark(#0b75ff, SelectedItem)))",
+  "--_text": "var(--slidebox-text, var(--slidebox-off, FieldText))",
+  "--_selected-text": "var(--slidebox-selected-text, HighlightText)",
+  "--_press-start": "0px",
+  "--_press-end": "0px",
+  "display": "inline-grid",
+  "grid-auto-flow": "column",
+  "grid-auto-columns": "minmax(0, 1fr)",
+  "box-sizing": "border-box",
+  "padding": "calc(var(--_size) * var(--_spacing))",
+  "gap": "calc(var(--_size) * var(--_spacing))",
+  "border": "1px solid var(--_border)",
+  "border-radius": "var(--slidebox-radius, 100vw)",
+  "background": "var(--_track)",
+  "color": "var(--_text)",
+  "isolation": "isolate",
+  "position": "relative",
+  "& > label": {
+    "position": "relative",
+    "display": "grid",
+    "min-width": "0",
+    "cursor": "pointer"
+  },
+  "& > label > input[type=\"radio\"]": {
+    "position": "absolute",
+    "width": "1px",
+    "height": "1px",
+    "padding": "0",
+    "margin": "-1px",
+    "overflow": "hidden",
+    "clip-path": "inset(50%)",
+    "white-space": "nowrap"
+  },
+  "& > label > span": {
+    "position": "relative",
+    "isolation": "isolate",
+    "display": "grid",
+    "place-items": "center",
+    "box-sizing": "border-box",
+    "min-height": "var(--_size)",
+    "padding": ".35em 1em",
+    "border": "1px solid transparent",
+    "border-radius": "var(--slidebox-radius, 100vw)",
+    "color": "var(--_text)",
+    "background": "transparent",
+    "transition": "color var(--_duration) var(--_easing)"
+  },
+  "& > label > input:checked + span": {
+    "color": "var(--_selected-text)"
+  },
+  "& > label > input:checked + span::before": {
+    "content": "\"\"",
+    "position": "absolute",
+    "inset": "0",
+    "z-index": "-1",
+    "pointer-events": "none",
+    "border-radius": "inherit",
+    "background": "var(--_on)",
+    "margin-inline-start": "var(--_press-start)",
+    "margin-inline-end": "var(--_press-end)",
+    "transition": "margin-inline-start var(--_duration) var(--_easing), margin-inline-end var(--_duration) var(--_easing)"
+  },
+  "& > label > input:not(:checked) + span": {
+    "color": "var(--_text)"
+  },
+  "&:has(> label > input:checked):has(> label:active > input:not(:checked):not(:disabled)):not(:has(> label:active ~ label > input:checked))": {
+    "--_press-end": "calc(-1 * var(--_size) * var(--_deform))"
+  },
+  "&:has(> label:active > input:not(:disabled)):has(> label:active ~ label > input:checked)": {
+    "--_press-start": "calc(-1 * var(--_size) * var(--_deform))"
+  },
+  "& > label > input:focus-visible + span": {
+    "outline": "2px solid var(--_on)",
+    "outline-offset": "2px"
+  },
+  "& > label:has(> input:disabled)": {
+    "cursor": "not-allowed"
+  },
+  "& > label > input:disabled + span": {
+    "opacity": ".5"
+  },
+  "@supports (color: AccentColor)": {
+    "&": {
+      "--_accent": "AccentColor"
+    }
+  },
+  "@supports (anchor-scope: --slidebox-selection) and (left: anchor(left))": {
+    "&": {
+      "anchor-scope": "--slidebox-selection"
+    },
+    "& > label:has(> input:checked)": {
+      "anchor-name": "--slidebox-selection"
+    },
+    "&:has(> label > input:checked)::before": {
+      "content": "\"\"",
+      "position": "absolute",
+      "position-anchor": "--slidebox-selection",
+      "left": "anchor(left)",
+      "right": "anchor(right)",
+      "top": "anchor(top)",
+      "height": "anchor-size(height)",
+      "margin-inline-start": "var(--_press-start)",
+      "margin-inline-end": "var(--_press-end)",
+      "z-index": "-1",
+      "border-radius": "var(--slidebox-radius, 100vw)",
+      "background": "var(--_on)",
+      "pointer-events": "none",
+      "transition": "left var(--_duration) var(--_easing), right var(--_duration) var(--_easing), top var(--_duration) var(--_easing), height var(--_duration) var(--_easing), margin-inline-start var(--_duration) var(--_easing), margin-inline-end var(--_duration) var(--_easing)"
+    },
+    "& > label > input:checked + span::before": {
+      "content": "none"
+    }
+  },
+  "@media (forced-colors: active)": {
+    "&": {
+      "--_track": "Field",
+      "--_border": "ButtonBorder",
+      "--_off": "FieldText",
+      "--_on": "Highlight",
+      "--_text": "FieldText",
+      "--_selected-text": "HighlightText"
+    },
+    "& > label > input:checked + span": {
+      "border-color": "Highlight",
+      "outline": "2px solid Highlight",
+      "outline-offset": "-2px"
+    },
+    "& > label > input:disabled + span": {
+      "color": "GrayText"
+    }
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    "& > label > span": {
+      "transition-duration": ".01ms"
+    },
+    "& > label > input:checked + span::before": {
+      "transition-duration": ".01ms"
+    },
+    "&::before": {
+      "transition-duration": ".01ms"
+    }
+  }
+}

package/tailwind/index.cjs

@@ -1,5 +1,7 @@
 const plugin = require("tailwindcss/plugin");
 const rules = require("./rules.json");
+const groupRules = require("./group-rules.json");
+const experimentalRules = require("./experimental-rules.json");
 
 function flatten(colors, prefix = "") {
   return Object.fromEntries(Object.entries(colors).flatMap(([key, value]) => {
@@ -10,17 +12,17 @@ function flatten(colors, prefix = "") {
 }
 
 module.exports = plugin.withOptions((defaults = {}) => ({ addUtilities, matchUtilities, theme }) => {
-  const controls = ["size", "width", "spacing", "deform", "duration", "easing", "track", "border", "off", "on"];
+  const controls = ["size", "width", "spacing", "deform", "duration", "easing", "track", "border", "off", "on", "radius", "text", "selected-text"];
   for (const key of Object.keys(defaults)) {
     if (!controls.includes(key)) throw new Error(`Unknown Slidebox control: ${key}`);
   }
-  addUtilities({ ".slidebox": {
-    ...Object.fromEntries(Object.entries(defaults).map(([key, value]) => [`--slidebox-${key}`, String(value)])),
-    ...rules,
-  } });
+  const properties = Object.fromEntries(Object.entries(defaults).map(([key, value]) => [`--slidebox-${key}`, String(value)]));
+  addUtilities(Object.fromEntries(Object.entries({ ".slidebox": rules, ".slidebox-group": groupRules, ...experimentalRules })
+    .map(([selector, component]) => [selector, { ...properties, ...component }])));
   for (const key of controls) {
     let values = theme(`slidebox.${key}`, {});
-    if (["track", "border", "off", "on"].includes(key)) values = { ...flatten(theme("colors", {})), ...values };
+    if (["track", "border", "off", "on", "text", "selected-text"].includes(key)) values = { ...flatten(theme("colors", {})), ...values };
+    if (key === "radius") values = { ...theme("borderRadius", {}), ...values };
     if (key === "duration") values = { ...theme("transitionDuration", {}), ...values };
     if (key === "easing") values = { ...theme("transitionTimingFunction", {}), ...values };
     matchUtilities({ [`slidebox-${key}`]: value => ({ [`--slidebox-${key}`]: value }) }, { values });

package/tailwind/rules.json

@@ -30,6 +30,7 @@
   "&::after": {
     "--_start": "0",
     "--_end": "1",
+    "box-sizing": "border-box",
     "content": "\"\"",
     "display": "block",
     "flex": "1 1 auto",
@@ -40,6 +41,7 @@
     "margin-inline-start": "calc((1em * var(--_container-width-ratio) - 1em) * var(--_start) + var(--_thumb-spacing-ratio) * .5em)",
     "margin-inline-end": "calc((1em * var(--_container-width-ratio) - 1em) * var(--_end) + var(--_thumb-spacing-ratio) * .5em)",
     "border-radius": "inherit",
+    "border": "1px solid var(--_track)",
     "background": "var(--_off)",
     "transition": "background var(--_duration) var(--_easing-function), margin-inline-start var(--_duration) var(--_easing-function), margin-inline-end var(--_duration) var(--_easing-function)",
     "transition-delay": "0s, 0s, calc(var(--_duration) * var(--_deform))"
@@ -60,6 +62,11 @@
     "cursor": "not-allowed",
     "opacity": ".5"
   },
+  "&[data-slidebox-dragging]::after": {
+    "margin-inline-start": "calc((1em * var(--_container-width-ratio) - 1em) * max(0, var(--slidebox-drag-progress) - max(0, var(--slidebox-drag-stretch, 0))) + var(--_thumb-spacing-ratio) * .5em)",
+    "margin-inline-end": "calc((1em * var(--_container-width-ratio) - 1em) * max(0, 1 - var(--slidebox-drag-progress) - max(0, -1 * var(--slidebox-drag-stretch, 0))) + var(--_thumb-spacing-ratio) * .5em)",
+    "transition": "none"
+  },
   "@media (forced-colors: active)": {
     "&": {
       "--_track": "Field",