jbx 2.16.0 → 2.16.1

package/README.md

@@ -38,6 +38,8 @@ stands on its own and is the baseline height for `Range`; `--control-height-comp
 control shrinks to inside a `Tabs` row, where it matches the line box of the text beside it so the
 row is no taller than a row of plain tabs. A range's thumb uses `--range-touch-target` (at least
 44px by default) for its interactive area while keeping its visible handle at the usual size.
+The extra hit area is compensated at both ends, so minimum and maximum values still align with
+the visible rail.
 
 ## Use
 

package/dist/generated/css.d.ts

@@ -1,2 +1,2 @@
-export declare const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* Keep slider gestures comfortable on touch screens without making the\n     visible thumb or rail look larger. Consumers can override this if their\n     layout provides an even larger target. */\n  --range-touch-target: max(var(--control-height), 44px);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '\u2197';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: transparent;\n  height: var(--range-touch-target);\n  border-radius: var(--radius-small);\n  cursor: pointer;\n  touch-action: pan-y;\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n  margin-top: calc((var(--size) - var(--range-touch-target)) / 2);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range::-moz-range-track {\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n:is(\n  .jbx-a,\n  .jbx-button,\n  .jbx-input,\n  .jbx-code-area,\n  .jbx-range,\n  .jbx-inline[role='checkbox']\n):focus-visible {\n  outline: 2px solid #000;\n  outline-offset: 3px;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";
+export declare const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* Keep slider gestures comfortable on touch screens without making the\n     visible thumb or rail look larger. Consumers can override this if their\n     layout provides an even larger target. */\n  --range-touch-target: max(var(--control-height), 44px);\n  /* A native range includes its thumb width in the value track. Widen the\n     input by this amount so a touch-sized thumb keeps the compact thumb's\n     original min/max positions. */\n  --range-thumb-overhang: calc((var(--range-touch-target) - var(--size)) / 2);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '\u2197';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: calc(100% + var(--range-thumb-overhang) * 2);\n  margin-inline: calc(var(--range-thumb-overhang) * -1);\n  appearance: none;\n  background-color: transparent;\n  height: var(--range-touch-target);\n  border-radius: var(--radius-small);\n  cursor: pointer;\n  touch-action: pan-y;\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n  margin-top: calc((var(--size) - var(--range-touch-target)) / 2);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  background: linear-gradient(\n    to right,\n    transparent 0 var(--range-thumb-overhang),\n    #c0c0c080 var(--range-thumb-overhang)\n      calc(100% - var(--range-thumb-overhang)),\n    transparent calc(100% - var(--range-thumb-overhang)) 100%\n  );\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range::-moz-range-track {\n  background: linear-gradient(\n    to right,\n    transparent 0 var(--range-thumb-overhang),\n    #c0c0c080 var(--range-thumb-overhang)\n      calc(100% - var(--range-thumb-overhang)),\n    transparent calc(100% - var(--range-thumb-overhang)) 100%\n  );\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n:is(\n  .jbx-a,\n  .jbx-button,\n  .jbx-input,\n  .jbx-code-area,\n  .jbx-range,\n  .jbx-inline[role='checkbox']\n):focus-visible {\n  outline: 2px solid #000;\n  outline-offset: 3px;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/generated/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,ovTAA+uT,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,miVAA8hV,CAAC"}

package/dist/generated/css.js

@@ -1,3 +1,3 @@
 // Generated by scripts/build-css.mjs from src/style.css. Do not edit.
-export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* Keep slider gestures comfortable on touch screens without making the\n     visible thumb or rail look larger. Consumers can override this if their\n     layout provides an even larger target. */\n  --range-touch-target: max(var(--control-height), 44px);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: transparent;\n  height: var(--range-touch-target);\n  border-radius: var(--radius-small);\n  cursor: pointer;\n  touch-action: pan-y;\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n  margin-top: calc((var(--size) - var(--range-touch-target)) / 2);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range::-moz-range-track {\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n:is(\n  .jbx-a,\n  .jbx-button,\n  .jbx-input,\n  .jbx-code-area,\n  .jbx-range,\n  .jbx-inline[role='checkbox']\n):focus-visible {\n  outline: 2px solid #000;\n  outline-offset: 3px;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";
+export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* Keep slider gestures comfortable on touch screens without making the\n     visible thumb or rail look larger. Consumers can override this if their\n     layout provides an even larger target. */\n  --range-touch-target: max(var(--control-height), 44px);\n  /* A native range includes its thumb width in the value track. Widen the\n     input by this amount so a touch-sized thumb keeps the compact thumb's\n     original min/max positions. */\n  --range-thumb-overhang: calc((var(--range-touch-target) - var(--size)) / 2);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: calc(100% + var(--range-thumb-overhang) * 2);\n  margin-inline: calc(var(--range-thumb-overhang) * -1);\n  appearance: none;\n  background-color: transparent;\n  height: var(--range-touch-target);\n  border-radius: var(--radius-small);\n  cursor: pointer;\n  touch-action: pan-y;\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n  margin-top: calc((var(--size) - var(--range-touch-target)) / 2);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  background: linear-gradient(\n    to right,\n    transparent 0 var(--range-thumb-overhang),\n    #c0c0c080 var(--range-thumb-overhang)\n      calc(100% - var(--range-thumb-overhang)),\n    transparent calc(100% - var(--range-thumb-overhang)) 100%\n  );\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range::-moz-range-track {\n  background: linear-gradient(\n    to right,\n    transparent 0 var(--range-thumb-overhang),\n    #c0c0c080 var(--range-thumb-overhang)\n      calc(100% - var(--range-thumb-overhang)),\n    transparent calc(100% - var(--range-thumb-overhang)) 100%\n  );\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n:is(\n  .jbx-a,\n  .jbx-button,\n  .jbx-input,\n  .jbx-code-area,\n  .jbx-range,\n  .jbx-inline[role='checkbox']\n):focus-visible {\n  outline: 2px solid #000;\n  outline-offset: 3px;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";
 //# sourceMappingURL=css.js.map

package/dist/generated/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,GAAG,GAAG,4uTAA4uT,CAAC"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,GAAG,GAAG,2hVAA2hV,CAAC"}

package/dist/main.css

@@ -23,6 +23,10 @@ html {
      visible thumb or rail look larger. Consumers can override this if their
      layout provides an even larger target. */
   --range-touch-target: max(var(--control-height), 44px);
+  /* A native range includes its thumb width in the value track. Widen the
+     input by this amount so a touch-sized thumb keeps the compact thumb's
+     original min/max positions. */
+  --range-thumb-overhang: calc((var(--range-touch-target) - var(--size)) / 2);
   /* What a control shrinks to inside a tab row, where it has to match the line
      box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand
      on its own -- a row holding one is then exactly as tall as one that doesn't. */
@@ -362,7 +366,8 @@ a.jbx-a:hover::before,
 
 .jbx-range {
   flex: 1;
-  width: 100%;
+  width: calc(100% + var(--range-thumb-overhang) * 2);
+  margin-inline: calc(var(--range-thumb-overhang) * -1);
   appearance: none;
   background-color: transparent;
   height: var(--range-touch-target);
@@ -403,12 +408,24 @@ a.jbx-a:hover::before,
 }
 .jbx-range::-webkit-slider-runnable-track {
   appearance: none;
-  background-color: #c0c0c080;
+  background: linear-gradient(
+    to right,
+    transparent 0 var(--range-thumb-overhang),
+    #c0c0c080 var(--range-thumb-overhang)
+      calc(100% - var(--range-thumb-overhang)),
+    transparent calc(100% - var(--range-thumb-overhang)) 100%
+  );
   border-radius: var(--radius-small);
   height: var(--size);
 }
 .jbx-range::-moz-range-track {
-  background-color: #c0c0c080;
+  background: linear-gradient(
+    to right,
+    transparent 0 var(--range-thumb-overhang),
+    #c0c0c080 var(--range-thumb-overhang)
+      calc(100% - var(--range-thumb-overhang)),
+    transparent calc(100% - var(--range-thumb-overhang)) 100%
+  );
   border-radius: var(--radius-small);
   height: var(--size);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbx",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "description": "The little component toolkit behind the tools on javier.xyz. Plain components with a class each, one stylesheet, no runtime dependencies.",
   "keywords": [
     "react",
@@ -47,7 +47,7 @@
     "css": "node ./scripts/build-css.mjs",
     "prebuild": "pnpm run css",
     "build": "tsc -p tsconfig.build.json",
-    "dev": "pnpm run css && next dev --webpack -p 3008",
+    "dev": "pnpm run css && echo 'Local:         http://localhost:3008/jbx' && next dev --webpack -p 3008",
     "dev:lib": "pnpm run css && tsc -p tsconfig.build.json --watch",
     "preview:build": "pnpm run css && next build --webpack",
     "pretypecheck": "pnpm run css",

package/src/generated/css.ts

@@ -1,2 +1,2 @@
 // Generated by scripts/build-css.mjs from src/style.css. Do not edit.
-export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* Keep slider gestures comfortable on touch screens without making the\n     visible thumb or rail look larger. Consumers can override this if their\n     layout provides an even larger target. */\n  --range-touch-target: max(var(--control-height), 44px);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: transparent;\n  height: var(--range-touch-target);\n  border-radius: var(--radius-small);\n  cursor: pointer;\n  touch-action: pan-y;\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n  margin-top: calc((var(--size) - var(--range-touch-target)) / 2);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range::-moz-range-track {\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n:is(\n  .jbx-a,\n  .jbx-button,\n  .jbx-input,\n  .jbx-code-area,\n  .jbx-range,\n  .jbx-inline[role='checkbox']\n):focus-visible {\n  outline: 2px solid #000;\n  outline-offset: 3px;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";
+export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* Keep slider gestures comfortable on touch screens without making the\n     visible thumb or rail look larger. Consumers can override this if their\n     layout provides an even larger target. */\n  --range-touch-target: max(var(--control-height), 44px);\n  /* A native range includes its thumb width in the value track. Widen the\n     input by this amount so a touch-sized thumb keeps the compact thumb's\n     original min/max positions. */\n  --range-thumb-overhang: calc((var(--range-touch-target) - var(--size)) / 2);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: calc(100% + var(--range-thumb-overhang) * 2);\n  margin-inline: calc(var(--range-thumb-overhang) * -1);\n  appearance: none;\n  background-color: transparent;\n  height: var(--range-touch-target);\n  border-radius: var(--radius-small);\n  cursor: pointer;\n  touch-action: pan-y;\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n  margin-top: calc((var(--size) - var(--range-touch-target)) / 2);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  box-sizing: border-box;\n  height: var(--range-touch-target);\n  width: var(--range-touch-target);\n  background-color: #000;\n  background-clip: content-box;\n  border-color: transparent;\n  border-style: solid;\n  border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)\n    calc((var(--range-touch-target) - var(--size)) / 2);\n  border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  background: linear-gradient(\n    to right,\n    transparent 0 var(--range-thumb-overhang),\n    #c0c0c080 var(--range-thumb-overhang)\n      calc(100% - var(--range-thumb-overhang)),\n    transparent calc(100% - var(--range-thumb-overhang)) 100%\n  );\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range::-moz-range-track {\n  background: linear-gradient(\n    to right,\n    transparent 0 var(--range-thumb-overhang),\n    #c0c0c080 var(--range-thumb-overhang)\n      calc(100% - var(--range-thumb-overhang)),\n    transparent calc(100% - var(--range-thumb-overhang)) 100%\n  );\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n:is(\n  .jbx-a,\n  .jbx-button,\n  .jbx-input,\n  .jbx-code-area,\n  .jbx-range,\n  .jbx-inline[role='checkbox']\n):focus-visible {\n  outline: 2px solid #000;\n  outline-offset: 3px;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";

package/src/style.css

@@ -23,6 +23,10 @@ html {
      visible thumb or rail look larger. Consumers can override this if their
      layout provides an even larger target. */
   --range-touch-target: max(var(--control-height), 44px);
+  /* A native range includes its thumb width in the value track. Widen the
+     input by this amount so a touch-sized thumb keeps the compact thumb's
+     original min/max positions. */
+  --range-thumb-overhang: calc((var(--range-touch-target) - var(--size)) / 2);
   /* What a control shrinks to inside a tab row, where it has to match the line
      box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand
      on its own -- a row holding one is then exactly as tall as one that doesn't. */
@@ -362,7 +366,8 @@ a.jbx-a:hover::before,
 
 .jbx-range {
   flex: 1;
-  width: 100%;
+  width: calc(100% + var(--range-thumb-overhang) * 2);
+  margin-inline: calc(var(--range-thumb-overhang) * -1);
   appearance: none;
   background-color: transparent;
   height: var(--range-touch-target);
@@ -403,12 +408,24 @@ a.jbx-a:hover::before,
 }
 .jbx-range::-webkit-slider-runnable-track {
   appearance: none;
-  background-color: #c0c0c080;
+  background: linear-gradient(
+    to right,
+    transparent 0 var(--range-thumb-overhang),
+    #c0c0c080 var(--range-thumb-overhang)
+      calc(100% - var(--range-thumb-overhang)),
+    transparent calc(100% - var(--range-thumb-overhang)) 100%
+  );
   border-radius: var(--radius-small);
   height: var(--size);
 }
 .jbx-range::-moz-range-track {
-  background-color: #c0c0c080;
+  background: linear-gradient(
+    to right,
+    transparent 0 var(--range-thumb-overhang),
+    #c0c0c080 var(--range-thumb-overhang)
+      calc(100% - var(--range-thumb-overhang)),
+    transparent calc(100% - var(--range-thumb-overhang)) 100%
+  );
   border-radius: var(--radius-small);
   height: var(--size);
 }