jbx 2.15.0 → 2.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +10 -5
  2. package/dist/components/MoreExperiments.d.ts.map +1 -1
  3. package/dist/components/MoreExperiments.js +17 -2
  4. package/dist/components/MoreExperiments.js.map +1 -1
  5. package/dist/generated/css.d.ts +1 -1
  6. package/dist/generated/css.d.ts.map +1 -1
  7. package/dist/generated/css.js +1 -1
  8. package/dist/generated/css.js.map +1 -1
  9. package/dist/main.css +60 -16
  10. package/dist/primitives.d.ts +309 -4
  11. package/dist/primitives.d.ts.map +1 -1
  12. package/dist/primitives.js +15 -7
  13. package/dist/primitives.js.map +1 -1
  14. package/package.json +2 -2
  15. package/src/components/MoreExperiments.tsx +18 -3
  16. package/src/generated/css.ts +1 -1
  17. package/src/primitives.tsx +19 -7
  18. package/src/style.css +60 -16
package/README.md CHANGED
@@ -33,10 +33,13 @@ Or let the `JBX` component do both:
33
33
  every component except `Input`, which holds the state behind `onValueChange` and is marked
34
34
  `'use client'`.
35
35
 
36
- Two more variables are worth knowing about. `--control-height` is how tall a `Button`, `Input` or
37
- `Range` stands on its own; `--control-height-compact` is what one shrinks to inside a `Tabs` row,
38
- where it matches the line box of the text beside it so the row is no taller than a row of plain
39
- tabs.
36
+ Three more variables are worth knowing about. `--control-height` is how tall a `Button` or `Input`
37
+ stands on its own and is the baseline height for `Range`; `--control-height-compact` is what a
38
+ control shrinks to inside a `Tabs` row, where it matches the line box of the text beside it so the
39
+ row is no taller than a row of plain tabs. A range's thumb uses `--range-touch-target` (at least
40
+ 44px by default) for its interactive area while keeping its visible handle at the usual size.
41
+ The extra hit area is compensated at both ends, so minimum and maximum values still align with
42
+ the visible rail.
40
43
 
41
44
  ## Use
42
45
 
@@ -45,7 +48,7 @@ import { JBX, MainHeader, Text, Space, Container } from 'jbx';
45
48
 
46
49
  function App() {
47
50
  return (
48
- <Container>
51
+ <Container as="main">
49
52
  <JBX accent="#f1c40f" />
50
53
  <MainHeader>React Blur</MainHeader>
51
54
  <Space h={1} />
@@ -100,6 +103,8 @@ const Sprite = Component(
100
103
  ```
101
104
 
102
105
  `styleProps` lists the props the style function consumes so they don't end up as DOM attributes.
106
+ Caller classes are appended to the component class, so `className="result"` keeps both `result`
107
+ and the primitive's `jbx-*` styles.
103
108
 
104
109
  ## Develop
105
110
 
package/dist/components/MoreExperiments.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MoreExperiments.d.ts","sourceRoot":"","sources":["../../src/components/MoreExperiments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA6DxC,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,EAAE,oBAAoB,qBAgChE"}
1
+ {"version":3,"file":"MoreExperiments.d.ts","sourceRoot":"","sources":["../../src/components/MoreExperiments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4E1B,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,EAAE,oBAAoB,qBAgChE"}
package/dist/components/MoreExperiments.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { Fragment } from 'react';
1
+ import React from 'react';
2
2
  import { Text, Space, Ul, Li, A } from '../primitives.js';
3
3
  const PROJECT_DATA = [
4
4
  {
@@ -40,6 +40,21 @@ const PROJECT_DATA = [
40
40
  name: 'img2css',
41
41
  description: 'Tool that can convert any image into a pure CSS image',
42
42
  url: 'https://javier.xyz/img2css'
43
+ },
44
+ {
45
+ name: 'React Blur',
46
+ description: 'React component for creating blurred image backgrounds with canvas',
47
+ url: 'https://javier.xyz/react-blur'
48
+ },
49
+ {
50
+ name: 'react-number-easing',
51
+ description: 'React component for animated number transitions',
52
+ url: 'https://javier.xyz/react-number-easing'
53
+ },
54
+ {
55
+ name: 'Star Trails',
56
+ description: 'Stack timelapse photos or video into a star trail image in your browser',
57
+ url: 'https://javier.xyz/startrails'
43
58
  }
44
59
  ];
45
60
  const maxItems = 5;
@@ -71,7 +86,7 @@ export function MoreExperiments({ exclude }) {
71
86
  project.description,
72
87
  "."));
73
88
  });
74
- return (React.createElement(Fragment, null,
89
+ return (React.createElement("nav", { "aria-label": "More experiments" },
75
90
  React.createElement(Text, null, "More experiments"),
76
91
  React.createElement(Space, { h: 1 }),
77
92
  React.createElement(Ul, null, items)));
package/dist/components/MoreExperiments.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MoreExperiments.js","sourceRoot":"","sources":["../../src/components/MoreExperiments.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"MoreExperiments.js","sourceRoot":"","sources":["../../src/components/MoreExperiments.tsx"],"names":[],"mappings":"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"}
package/dist/generated/css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- 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 /* 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 {\n touch-action: pan-y;\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: #c0c0c080;\n height: var(--size);\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n border-radius: var(--radius-small);\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.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";
1
+ 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";
2
2
  //# sourceMappingURL=css.d.ts.map
package/dist/generated/css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,ukRAAkkR,CAAC"}
1
+ {"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 CHANGED
@@ -1,3 +1,3 @@
1
1
  // Generated by scripts/build-css.mjs from src/style.css. Do not edit.
2
- 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 /* 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 {\n touch-action: pan-y;\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: #c0c0c080;\n height: var(--size);\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n border-radius: var(--radius-small);\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.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";
2
+ 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";
3
3
  //# sourceMappingURL=css.js.map
package/dist/generated/css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,GAAG,GAAG,+jRAA+jR,CAAC"}
1
+ {"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 CHANGED
@@ -19,6 +19,14 @@ html {
19
19
  /* Every interactive control is this tall, so a button, an input and a range
20
20
  standing next to each other line up. */
21
21
  --control-height: calc(var(--size) * 2.5);
22
+ /* Keep slider gestures comfortable on touch screens without making the
23
+ visible thumb or rail look larger. Consumers can override this if their
24
+ layout provides an even larger target. */
25
+ --range-touch-target: max(var(--control-height), 44px);
26
+ /* A native range includes its thumb width in the value track. Widen the
27
+ input by this amount so a touch-sized thumb keeps the compact thumb's
28
+ original min/max positions. */
29
+ --range-thumb-overhang: calc((var(--range-touch-target) - var(--size)) / 2);
22
30
  /* What a control shrinks to inside a tab row, where it has to match the line
23
31
  box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand
24
32
  on its own -- a row holding one is then exactly as tall as one that doesn't. */
@@ -46,10 +54,6 @@ html {
46
54
  position: relative;
47
55
  }
48
56
 
49
- body {
50
- touch-action: pan-y;
51
- }
52
-
53
57
  body,
54
58
  input,
55
59
  textarea,
@@ -362,38 +366,66 @@ a.jbx-a:hover::before,
362
366
 
363
367
  .jbx-range {
364
368
  flex: 1;
365
- width: 100%;
369
+ width: calc(100% + var(--range-thumb-overhang) * 2);
370
+ margin-inline: calc(var(--range-thumb-overhang) * -1);
366
371
  appearance: none;
367
- background-color: #c0c0c080;
368
- height: var(--size);
372
+ background-color: transparent;
373
+ height: var(--range-touch-target);
369
374
  border-radius: var(--radius-small);
375
+ cursor: pointer;
376
+ touch-action: pan-y;
370
377
  }
371
378
 
372
379
  .jbx-range::-webkit-slider-thumb {
373
380
  -webkit-appearance: none;
374
381
  appearance: none;
375
382
  box-shadow: none;
376
- height: calc(var(--size) * 2);
377
- width: var(--size);
383
+ box-sizing: border-box;
384
+ height: var(--range-touch-target);
385
+ width: var(--range-touch-target);
378
386
  background-color: #000;
379
- border: none;
380
- border-radius: var(--radius-small);
387
+ background-clip: content-box;
388
+ border-color: transparent;
389
+ border-style: solid;
390
+ border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)
391
+ calc((var(--range-touch-target) - var(--size)) / 2);
392
+ border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));
393
+ margin-top: calc((var(--size) - var(--range-touch-target)) / 2);
381
394
  }
382
395
  .jbx-range::-moz-range-thumb {
383
396
  appearance: none;
384
397
  box-shadow: none;
385
- height: calc(var(--size) * 2);
386
- width: var(--size);
398
+ box-sizing: border-box;
399
+ height: var(--range-touch-target);
400
+ width: var(--range-touch-target);
387
401
  background-color: #000;
388
- border: none;
389
- border-radius: var(--radius-small);
402
+ background-clip: content-box;
403
+ border-color: transparent;
404
+ border-style: solid;
405
+ border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)
406
+ calc((var(--range-touch-target) - var(--size)) / 2);
407
+ border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));
390
408
  }
391
409
  .jbx-range::-webkit-slider-runnable-track {
392
410
  appearance: none;
411
+ background: linear-gradient(
412
+ to right,
413
+ transparent 0 var(--range-thumb-overhang),
414
+ #c0c0c080 var(--range-thumb-overhang)
415
+ calc(100% - var(--range-thumb-overhang)),
416
+ transparent calc(100% - var(--range-thumb-overhang)) 100%
417
+ );
393
418
  border-radius: var(--radius-small);
419
+ height: var(--size);
394
420
  }
395
421
  .jbx-range::-moz-range-track {
396
- background-color: #c0c0c080;
422
+ background: linear-gradient(
423
+ to right,
424
+ transparent 0 var(--range-thumb-overhang),
425
+ #c0c0c080 var(--range-thumb-overhang)
426
+ calc(100% - var(--range-thumb-overhang)),
427
+ transparent calc(100% - var(--range-thumb-overhang)) 100%
428
+ );
397
429
  border-radius: var(--radius-small);
398
430
  height: var(--size);
399
431
  }
@@ -401,6 +433,18 @@ a.jbx-a:hover::before,
401
433
  outline: none;
402
434
  }
403
435
 
436
+ :is(
437
+ .jbx-a,
438
+ .jbx-button,
439
+ .jbx-input,
440
+ .jbx-code-area,
441
+ .jbx-range,
442
+ .jbx-inline[role='checkbox']
443
+ ):focus-visible {
444
+ outline: 2px solid #000;
445
+ outline-offset: 3px;
446
+ }
447
+
404
448
  .jbx-bullet-container {
405
449
  display: inline-block;
406
450
  margin: -8px 4px -8px 0;
package/dist/primitives.d.ts CHANGED
@@ -16,57 +16,351 @@ type StyleSource<T> = CSSProperties | ((props: T) => CSSProperties);
16
16
  export declare function Component<T>(className: string, styleSrc?: StyleSource<T>, config?: ComponentConfig): (props: T & {
17
17
  children?: ReactNode;
18
18
  style?: CSSProperties;
19
+ className?: string;
19
20
  }) => React.JSX.Element;
20
- export declare const Container: (props: DivProps & {
21
- children?: ReactNode;
22
- style?: CSSProperties;
23
- }) => React.JSX.Element;
21
+ type ContainerProps = DivProps & {
22
+ as?: 'div' | 'main';
23
+ };
24
+ /** A page-width container. Opt into the page landmark with `as="main"`. */
25
+ export declare function Container({ as, className, ...props }: ContainerProps): React.DetailedReactHTMLElement<{
26
+ children?: ReactNode | undefined;
27
+ dangerouslySetInnerHTML?: {
28
+ __html: string | TrustedHTML;
29
+ } | undefined;
30
+ onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
31
+ onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
32
+ onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
33
+ onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
34
+ onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
35
+ onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
36
+ onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
37
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
38
+ onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
39
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
40
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
41
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
42
+ onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
43
+ onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
44
+ onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
45
+ onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
46
+ onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
47
+ onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
48
+ onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
49
+ onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
50
+ onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
51
+ onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
52
+ onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
53
+ onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
54
+ onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
55
+ onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
56
+ onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
57
+ onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
58
+ onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
59
+ onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
60
+ onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
61
+ onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
62
+ onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
63
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
64
+ onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
65
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
66
+ onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
67
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
68
+ onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
69
+ onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
70
+ onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
71
+ onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
72
+ onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
73
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
74
+ onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
75
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
76
+ onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
77
+ onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
78
+ onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
79
+ onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
80
+ onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
81
+ onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
82
+ onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
83
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
84
+ onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
85
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
86
+ onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
87
+ onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
88
+ onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
89
+ onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
90
+ onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
91
+ onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
92
+ onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
93
+ onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
94
+ onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
95
+ onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
96
+ onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
97
+ onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
98
+ onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
99
+ onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
100
+ onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
101
+ onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
102
+ onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
103
+ onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
104
+ onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
105
+ onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
106
+ onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
107
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
108
+ onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
109
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
110
+ onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
111
+ onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
112
+ onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
113
+ onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
114
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
115
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
116
+ onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
117
+ onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
118
+ onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
119
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
120
+ onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
121
+ onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
122
+ onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
123
+ onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
124
+ onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
125
+ onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
126
+ onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
127
+ onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
128
+ onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
129
+ onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
130
+ onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
131
+ onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
132
+ onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
133
+ onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
134
+ onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
135
+ onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
136
+ onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
137
+ onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
138
+ onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
139
+ onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
140
+ onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
141
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
142
+ onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
143
+ onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
144
+ onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
145
+ onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
146
+ onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
147
+ onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
148
+ onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
149
+ onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
150
+ onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
151
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
152
+ onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
153
+ onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
154
+ onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
155
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
156
+ onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
157
+ onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
158
+ onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
159
+ onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
160
+ onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
161
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
162
+ onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
163
+ onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
164
+ onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
165
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
166
+ onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
167
+ onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
168
+ onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
169
+ onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
170
+ onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
171
+ onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
172
+ onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
173
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
174
+ onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
175
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
176
+ onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
177
+ onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
178
+ onScrollEnd?: React.UIEventHandler<HTMLDivElement> | undefined;
179
+ onScrollEndCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
180
+ onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
181
+ onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
182
+ onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
183
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
184
+ onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
185
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
186
+ onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
187
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
188
+ onToggle?: React.ToggleEventHandler<HTMLDivElement> | undefined;
189
+ onBeforeToggle?: React.ToggleEventHandler<HTMLDivElement> | undefined;
190
+ onTransitionCancel?: React.TransitionEventHandler<HTMLDivElement> | undefined;
191
+ onTransitionCancelCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
192
+ onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
193
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
194
+ onTransitionRun?: React.TransitionEventHandler<HTMLDivElement> | undefined;
195
+ onTransitionRunCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
196
+ onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
197
+ onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
198
+ "aria-activedescendant"?: string | undefined;
199
+ "aria-atomic"?: ("false" | "true" | boolean) | undefined;
200
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
201
+ "aria-braillelabel"?: string | undefined;
202
+ "aria-brailleroledescription"?: string | undefined;
203
+ "aria-busy"?: ("false" | "true" | boolean) | undefined;
204
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
205
+ "aria-colcount"?: number | undefined;
206
+ "aria-colindex"?: number | undefined;
207
+ "aria-colindextext"?: string | undefined;
208
+ "aria-colspan"?: number | undefined;
209
+ "aria-controls"?: string | undefined;
210
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
211
+ "aria-describedby"?: string | undefined;
212
+ "aria-description"?: string | undefined;
213
+ "aria-details"?: string | undefined;
214
+ "aria-disabled"?: ("false" | "true" | boolean) | undefined;
215
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
216
+ "aria-errormessage"?: string | undefined;
217
+ "aria-expanded"?: ("false" | "true" | boolean) | undefined;
218
+ "aria-flowto"?: string | undefined;
219
+ "aria-grabbed"?: ("false" | "true" | boolean) | undefined;
220
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
221
+ "aria-hidden"?: ("false" | "true" | boolean) | undefined;
222
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
223
+ "aria-keyshortcuts"?: string | undefined;
224
+ "aria-label"?: string | undefined;
225
+ "aria-labelledby"?: string | undefined;
226
+ "aria-level"?: number | undefined;
227
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
228
+ "aria-modal"?: ("false" | "true" | boolean) | undefined;
229
+ "aria-multiline"?: ("false" | "true" | boolean) | undefined;
230
+ "aria-multiselectable"?: ("false" | "true" | boolean) | undefined;
231
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
232
+ "aria-owns"?: string | undefined;
233
+ "aria-placeholder"?: string | undefined;
234
+ "aria-posinset"?: number | undefined;
235
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
236
+ "aria-readonly"?: ("false" | "true" | boolean) | undefined;
237
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
238
+ "aria-required"?: ("false" | "true" | boolean) | undefined;
239
+ "aria-roledescription"?: string | undefined;
240
+ "aria-rowcount"?: number | undefined;
241
+ "aria-rowindex"?: number | undefined;
242
+ "aria-rowindextext"?: string | undefined;
243
+ "aria-rowspan"?: number | undefined;
244
+ "aria-selected"?: ("false" | "true" | boolean) | undefined;
245
+ "aria-setsize"?: number | undefined;
246
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
247
+ "aria-valuemax"?: number | undefined;
248
+ "aria-valuemin"?: number | undefined;
249
+ "aria-valuenow"?: number | undefined;
250
+ "aria-valuetext"?: string | undefined;
251
+ defaultChecked?: boolean | undefined;
252
+ defaultValue?: string | number | readonly string[] | undefined;
253
+ suppressContentEditableWarning?: boolean | undefined;
254
+ suppressHydrationWarning?: boolean | undefined;
255
+ accessKey?: string | undefined;
256
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
257
+ autoFocus?: boolean | undefined;
258
+ contentEditable?: ("false" | "true" | boolean) | "inherit" | "plaintext-only" | undefined;
259
+ contextMenu?: string | undefined;
260
+ dir?: string | undefined;
261
+ draggable?: ("false" | "true" | boolean) | undefined;
262
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
263
+ hidden?: boolean | undefined;
264
+ id?: string | undefined;
265
+ lang?: string | undefined;
266
+ nonce?: string | undefined;
267
+ slot?: string | undefined;
268
+ spellCheck?: ("false" | "true" | boolean) | undefined;
269
+ style?: CSSProperties | undefined;
270
+ tabIndex?: number | undefined;
271
+ title?: string | undefined;
272
+ translate?: "yes" | "no" | undefined;
273
+ radioGroup?: string | undefined;
274
+ role?: React.AriaRole | undefined;
275
+ about?: string | undefined;
276
+ content?: string | undefined;
277
+ datatype?: string | undefined;
278
+ inlist?: any;
279
+ prefix?: string | undefined;
280
+ property?: string | undefined;
281
+ rel?: string | undefined;
282
+ resource?: string | undefined;
283
+ rev?: string | undefined;
284
+ typeof?: string | undefined;
285
+ vocab?: string | undefined;
286
+ autoCorrect?: string | undefined;
287
+ autoSave?: string | undefined;
288
+ color?: string | undefined;
289
+ itemProp?: string | undefined;
290
+ itemScope?: boolean | undefined;
291
+ itemType?: string | undefined;
292
+ itemID?: string | undefined;
293
+ itemRef?: string | undefined;
294
+ results?: number | undefined;
295
+ security?: string | undefined;
296
+ unselectable?: "on" | "off" | undefined;
297
+ popover?: "" | "auto" | "manual" | "hint" | undefined;
298
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
299
+ popoverTarget?: string | undefined;
300
+ inert?: boolean | undefined;
301
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
302
+ is?: string | undefined;
303
+ exportparts?: string | undefined;
304
+ part?: string | undefined;
305
+ className: string;
306
+ }, HTMLElement>;
24
307
  export declare const Text: (props: DivProps & {
25
308
  children?: ReactNode;
26
309
  style?: CSSProperties;
310
+ className?: string;
27
311
  }) => React.JSX.Element;
28
312
  export declare const SmallText: (props: DivProps & {
29
313
  children?: ReactNode;
30
314
  style?: CSSProperties;
315
+ className?: string;
31
316
  }) => React.JSX.Element;
32
317
  export declare const Button: (props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
33
318
  children?: ReactNode;
34
319
  style?: CSSProperties;
320
+ className?: string;
35
321
  }) => React.JSX.Element;
36
322
  export declare const Range: (props: React.InputHTMLAttributes<HTMLInputElement> & {
37
323
  children?: ReactNode;
38
324
  style?: CSSProperties;
325
+ className?: string;
39
326
  }) => React.JSX.Element;
40
327
  type HeadingProps = React.HTMLAttributes<HTMLHeadingElement>;
41
328
  export declare const HeaderH1: (props: HeadingProps & {
42
329
  children?: ReactNode;
43
330
  style?: CSSProperties;
331
+ className?: string;
44
332
  }) => React.JSX.Element;
45
333
  export declare const HeaderH2: (props: HeadingProps & {
46
334
  children?: ReactNode;
47
335
  style?: CSSProperties;
336
+ className?: string;
48
337
  }) => React.JSX.Element;
49
338
  export declare const HeaderH3: (props: HeadingProps & {
50
339
  children?: ReactNode;
51
340
  style?: CSSProperties;
341
+ className?: string;
52
342
  }) => React.JSX.Element;
53
343
  export declare const HeaderH4: (props: HeadingProps & {
54
344
  children?: ReactNode;
55
345
  style?: CSSProperties;
346
+ className?: string;
56
347
  }) => React.JSX.Element;
57
348
  export declare const HR: (props: React.HTMLAttributes<HTMLHRElement> & {
58
349
  children?: ReactNode;
59
350
  style?: CSSProperties;
351
+ className?: string;
60
352
  }) => React.JSX.Element;
61
353
  export declare const MainHeader: (props: HeadingProps & {
62
354
  children?: ReactNode;
63
355
  style?: CSSProperties;
356
+ className?: string;
64
357
  }) => React.JSX.Element;
65
358
  export declare const A: (props: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
66
359
  href: string;
67
360
  } & {
68
361
  children?: ReactNode;
69
362
  style?: CSSProperties;
363
+ className?: string;
70
364
  }) => React.JSX.Element;
71
365
  export declare const Space: (props: DivProps & {
72
366
  inline?: boolean;
@@ -75,32 +369,39 @@ export declare const Space: (props: DivProps & {
75
369
  } & {
76
370
  children?: ReactNode;
77
371
  style?: CSSProperties;
372
+ className?: string;
78
373
  }) => React.JSX.Element;
79
374
  export declare const Inline: (props: DivProps & SpacingProps & {
80
375
  wrap?: boolean;
81
376
  } & {
82
377
  children?: ReactNode;
83
378
  style?: CSSProperties;
379
+ className?: string;
84
380
  }) => React.JSX.Element;
85
381
  export declare const Stack: (props: DivProps & SpacingProps & {
86
382
  children?: ReactNode;
87
383
  style?: CSSProperties;
384
+ className?: string;
88
385
  }) => React.JSX.Element;
89
386
  export declare const Dropzone: (props: DivProps & {
90
387
  children?: ReactNode;
91
388
  style?: CSSProperties;
389
+ className?: string;
92
390
  }) => React.JSX.Element;
93
391
  export declare const Ul: (props: React.HTMLAttributes<HTMLUListElement> & {
94
392
  children?: ReactNode;
95
393
  style?: CSSProperties;
394
+ className?: string;
96
395
  }) => React.JSX.Element;
97
396
  export declare const Li: (props: React.LiHTMLAttributes<HTMLLIElement> & {
98
397
  children?: ReactNode;
99
398
  style?: CSSProperties;
399
+ className?: string;
100
400
  }) => React.JSX.Element;
101
401
  export declare const Tabs: (props: DivProps & {
102
402
  children?: ReactNode;
103
403
  style?: CSSProperties;
404
+ className?: string;
104
405
  }) => React.JSX.Element;
105
406
  export declare const Tab: (props: DivProps & {
106
407
  info?: boolean;
@@ -108,20 +409,24 @@ export declare const Tab: (props: DivProps & {
108
409
  } & {
109
410
  children?: ReactNode;
110
411
  style?: CSSProperties;
412
+ className?: string;
111
413
  }) => React.JSX.Element;
112
414
  export declare const CodeSnippet: (props: React.HTMLAttributes<HTMLPreElement> & {
113
415
  children?: ReactNode;
114
416
  style?: CSSProperties;
417
+ className?: string;
115
418
  }) => React.JSX.Element;
116
419
  export declare const CodeTextarea: (props: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
117
420
  children?: ReactNode;
118
421
  style?: CSSProperties;
422
+ className?: string;
119
423
  }) => React.JSX.Element;
120
424
  export declare const CheckboxHidden: (props: DivProps & {
121
425
  isChecked?: boolean;
122
426
  } & {
123
427
  children?: ReactNode;
124
428
  style?: CSSProperties;
429
+ className?: string;
125
430
  }) => React.JSX.Element;
126
431
  export declare function Checkbox({ label, checked, onChange }: {
127
432
  label: string;
package/dist/primitives.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAA0D,YAAY,EAAE,MAAM,cAAc,CAAC;AAEpG,KAAK,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAErD,KAAK,eAAe,GAAG;IACrB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAChC,CAAC;AAEF,KAAK,WAAW,CAAC,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,aAAa,CAAC,CAAC;AAEpE,wBAAgB,SAAS,CAAC,CAAC,EACzB,SAAS,EAAE,MAAM,EACjB,QAAQ,GAAE,WAAW,CAAC,CAAC,CAAM,EAC7B,MAAM,GAAE,eAAoB,GAC3B,CAAC,KAAK,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAkCvG;AAED,KAAK,cAAc,GAAG,QAAQ,GAAG;IAAE,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,CAAC;AAEzD,2EAA2E;AAC3E,wBAAgB,SAAS,CAAC,EAAE,EAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAK5E;AAED,eAAO,MAAM,IAAI;eA9CW,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA8C9C,CAAC;AAEpD,eAAO,MAAM,SAAS;eAhDM,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAgDnC,CAAC;AAE/D,eAAO,MAAM,MAAM;eAlDS,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAsDhG,CAAC;AAEF,eAAO,MAAM,KAAK;eAxDU,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAiEhG,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAC7D,eAAO,MAAM,QAAQ;eApEO,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAoEd,CAAC;AACpF,eAAO,MAAM,QAAQ;eArEO,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAqEd,CAAC;AACpF,eAAO,MAAM,QAAQ;eAtEO,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAsEd,CAAC;AACpF,eAAO,MAAM,QAAQ;eAvEO,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAuEd,CAAC;AACpF,eAAO,MAAM,EAAE;eAxEa,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAwEA,CAAC;AAElG,eAAO,MAAM,UAAU;eA1EK,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA0EV,CAAC;AAExF,eAAO,MAAM,CAAC;UAAqE,MAAM;;eA5E7D,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAgFhG,CAAC;AAGF,eAAO,MAAM,KAAK;aADsB,OAAO;QAAM,MAAM;QAAM,MAAM;;eAlF3C,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA2FhG,CAAC;AAGF,eAAO,MAAM,MAAM;WADmC,OAAO;;eA7FjC,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAqGhG,CAAC;AAGF,eAAO,MAAM,KAAK;eAxGU,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA0G/F,CAAC;AAEH,eAAO,MAAM,QAAQ;eA5GO,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA4GtC,CAAC;AAE5D,eAAO,MAAM,EAAE;eA9Ga,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAqHhG,CAAC;AAEF,eAAO,MAAM,EAAE;eAvHa,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA8HhG,CAAC;AAEF,eAAO,MAAM,IAAI;eAhIW,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAgI9C,CAAC;AAGpD,eAAO,MAAM,GAAG;WADoB,OAAO;aAAW,OAAO;;eAlIjC,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA+IhG,CAAC;AAEF,eAAO,MAAM,WAAW;eAjJI,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OAqJhG,CAAC;AAEF,eAAO,MAAM,YAAY;eAvJG,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA2JhG,CAAC;AAEF,eAAO,MAAM,cAAc;gBAAsC,OAAO;;eA7J5C,SAAS;YAAU,aAAa;gBAAc,MAAM;MAAO,KAAK,CAAC,GAAG,CAAC,OA4KhG,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,qBAuCA;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,qBAMlD"}
package/dist/primitives.js CHANGED
@@ -2,24 +2,32 @@ import React, { createElement } from 'react';
2
2
  import { space, spacingPropsToStyle, BASE_RADIUS, SPACING_PROPS } from './spacing.js';
3
3
  export function Component(className, styleSrc = {}, config = {}) {
4
4
  const { element = `div`, props: otherProps, styleProps } = config;
5
- return function MakeComponent({ children, style, ...props }) {
5
+ return function MakeComponent({ children, style, className: callerClassName, ...props }) {
6
6
  const calculatedStyle = typeof styleSrc === 'function' ? styleSrc(props) : styleSrc;
7
7
  const elementProps = styleProps
8
8
  ? Object.fromEntries(Object.entries(props).filter(([key]) => !styleProps.includes(key)))
9
9
  : props;
10
10
  return createElement(element, {
11
- className,
12
- // The caller's `style` wins over the computed one.
13
- style: { ...calculatedStyle, ...style },
14
11
  ...otherProps,
15
- ...elementProps
12
+ ...elementProps,
13
+ // The caller extends the component class instead of silently replacing
14
+ // the class that gives the primitive its appearance.
15
+ className: [className, callerClassName].filter(Boolean).join(' '),
16
+ // The caller's `style` wins over the computed one.
17
+ style: { ...calculatedStyle, ...style }
16
18
  }, children);
17
19
  };
18
20
  }
19
- export const Container = Component(`jbx-container`);
21
+ /** A page-width container. Opt into the page landmark with `as="main"`. */
22
+ export function Container({ as = 'div', className, ...props }) {
23
+ return createElement(as, {
24
+ ...props,
25
+ className: ['jbx-container', className].filter(Boolean).join(' ')
26
+ });
27
+ }
20
28
  export const Text = Component(`jbx-text`);
21
29
  export const SmallText = Component(`jbx-small-text`);
22
- export const Button = Component(`jbx-button`, {}, { element: 'button' });
30
+ export const Button = Component(`jbx-button`, {}, { element: 'button', props: { type: 'button' } });
23
31
  export const Range = Component(`jbx-range`, {}, {
24
32
  element: 'input',
25
33
  props: {
package/dist/primitives.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAgB,MAAM,cAAc,CAAC;AAkBpG,MAAM,UAAU,SAAS,CACvB,SAAiB,EACjB,QAAQ,GAAmB,EAAE,EAC7B,MAAM,GAAoB,EAAE;IAE5B,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;IAElE,OAAO,SAAS,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EAIT;QACC,MAAM,eAAe,GACnB,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAqB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAE9E,MAAM,YAAY,GAAG,UAAU;YAC7B,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;YACxF,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,aAAa,CAClB,OAAO,EACP;YACE,SAAS;YACT,mDAAmD;YACnD,KAAK,EAAE,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE;YACvC,GAAG,UAAU;YACb,GAAG,YAAY;SAChB,EACD,QAAQ,CACT,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,CAAW,eAAe,CAAC,CAAC;AAE9D,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAW,UAAU,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,CAAW,gBAAgB,CAAC,CAAC;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAC7B,YAAY,EACZ,EAAE,EACF,EAAE,OAAO,EAAE,QAAQ,EAAE,CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAC5B,WAAW,EACX,EAAE,EACF;IACE,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;KACd;CACF,CACF,CAAC;AAGF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAe,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAe,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAe,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAe,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAsC,QAAQ,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAElG,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAe,aAAa,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAExF,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CACxB,OAAO,EACP,EAAE,EACF,EAAE,OAAO,EAAE,GAAG,EAAE,CACjB,CAAC;AAGF,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAC5B,WAAW,EACX,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;IAC1C,MAAM,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;CAC9C,CAAC,EACF,EAAE,UAAU,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CACrC,CAAC;AAGF,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAC7B,YAAY,EACZ,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IAChC,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC/B,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;CACnC,CAAC,EACF,EAAE,UAAU,EAAE,CAAC,GAAG,aAAa,EAAE,MAAM,CAAC,EAAE,CAC3C,CAAC;AAGF,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAa,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE;IAC7F,UAAU,EAAE,aAAa;CAC1B,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAW,cAAc,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CACzB,QAAQ,EACR;IACE,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,SAAS,KAAK,CAAC,IAAI,CAAC,EAAE;CAChC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CACzB,QAAQ,EACR;IACE,MAAM,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE;IAC3B,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI;CAC5B,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAW,UAAU,CAAC,CAAC;AAGpD,MAAM,CAAC,MAAM,GAAG,GAAG,SAAS,CAC1B,eAAe,EACf,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACrB,YAAY,EAAE,WAAW;IACzB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,SAAS;IACjB,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;IACzD,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;IAC/B,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC;IACnB,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;CACnC,CAAC,EACF,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAClC,kBAAkB,EAClB,EAAE,EACF,EAAE,OAAO,EAAE,KAAK,EAAE,CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CACnC,eAAe,EACf,EAAE,EACF,EAAE,OAAO,EAAE,UAAU,EAAE,CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CACrC,qBAAqB,EACrB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IAClB,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,SAAS;IACjC,KAAK,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,SAAS;IAChC,UAAU,EAAE,CAAC;IACb,WAAW,EAAE,CAAC;IACd,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO;IAC5D,YAAY,EAAE,WAAW;IACzB,SAAS,EAAE,SAAS;QAClB,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,uCAAuC;IAC3C,MAAM,EAAE,SAAS;CAClB,CAAC,EACF,EAAE,UAAU,EAAE,CAAC,WAAW,CAAC,EAAE,CAC9B,CAAC;AAEF,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EAKT;IACC,SAAS,MAAM;QACb,IAAI,QAAQ;YAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,EAAC,UAAU,kBACD,OAAO,EACrB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,EAAE,CAAC;YACX,CAAC;QACH,CAAC,EACD,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;QAElD,oBAAC,cAAc,IAAC,SAAS,EAAE,OAAO;YAChC,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACjC,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE;gBAE9E,8BAAM,CAAC,EAAC,iBAAiB,GAAG,CACxB,CACS;QACjB,oBAAC,KAAK,IAAC,CAAC,EAAE,GAAG,GAAI;QACjB,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAG,KAAK,CAAQ,CAC5C,CACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAqB;IACjD,OAAO,CACL,6BAAK,SAAS,EAAC,sBAAsB;QACnC,6BAAK,SAAS,EAAC,YAAY,IAAE,KAAK,CAAO,CACrC,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jbx",
3
- "version": "2.15.0",
3
+ "version": "2.16.1",
4
4
  "description": "The little component toolkit behind the tools on javier.xyz. Plain components with a class each, one stylesheet, no runtime dependencies.",
5
5
  "keywords": [
6
6
  "react",
@@ -47,7 +47,7 @@
47
47
  "css": "node ./scripts/build-css.mjs",
48
48
  "prebuild": "pnpm run css",
49
49
  "build": "tsc -p tsconfig.build.json",
50
- "dev": "pnpm run css && next dev --webpack -p 3008",
50
+ "dev": "pnpm run css && echo 'Local: http://localhost:3008/jbx' && next dev --webpack -p 3008",
51
51
  "dev:lib": "pnpm run css && tsc -p tsconfig.build.json --watch",
52
52
  "preview:build": "pnpm run css && next build --webpack",
53
53
  "pretypecheck": "pnpm run css",
package/src/components/MoreExperiments.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { Fragment } from 'react';
1
+ import React from 'react';
2
2
  import { Text, Space, Ul, Li, A } from '../primitives.js';
3
3
 
4
4
  const PROJECT_DATA = [
@@ -43,6 +43,21 @@ const PROJECT_DATA = [
43
43
  name: 'img2css',
44
44
  description: 'Tool that can convert any image into a pure CSS image',
45
45
  url: 'https://javier.xyz/img2css'
46
+ },
47
+ {
48
+ name: 'React Blur',
49
+ description: 'React component for creating blurred image backgrounds with canvas',
50
+ url: 'https://javier.xyz/react-blur'
51
+ },
52
+ {
53
+ name: 'react-number-easing',
54
+ description: 'React component for animated number transitions',
55
+ url: 'https://javier.xyz/react-number-easing'
56
+ },
57
+ {
58
+ name: 'Star Trails',
59
+ description: 'Stack timelapse photos or video into a star trail image in your browser',
60
+ url: 'https://javier.xyz/startrails'
46
61
  }
47
62
  ] as const;
48
63
 
@@ -89,10 +104,10 @@ export function MoreExperiments({ exclude }: MoreExperimentsProps) {
89
104
  });
90
105
 
91
106
  return (
92
- <Fragment>
107
+ <nav aria-label="More experiments">
93
108
  <Text>More experiments</Text>
94
109
  <Space h={1} />
95
110
  <Ul>{items}</Ul>
96
- </Fragment>
111
+ </nav>
97
112
  );
98
113
  }
package/src/generated/css.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  // Generated by scripts/build-css.mjs from src/style.css. Do not edit.
2
- 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 /* 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 {\n touch-action: pan-y;\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: #c0c0c080;\n height: var(--size);\n border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n appearance: none;\n box-shadow: none;\n height: calc(var(--size) * 2);\n width: var(--size);\n background-color: #000;\n border: none;\n border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n appearance: none;\n border-radius: var(--radius-small);\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.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";
2
+ 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/primitives.tsx CHANGED
@@ -21,16 +21,18 @@ export function Component<T>(
21
21
  className: string,
22
22
  styleSrc: StyleSource<T> = {},
23
23
  config: ComponentConfig = {}
24
- ): (props: T & { children?: ReactNode; style?: CSSProperties }) => React.JSX.Element {
24
+ ): (props: T & { children?: ReactNode; style?: CSSProperties; className?: string }) => React.JSX.Element {
25
25
  const { element = `div`, props: otherProps, styleProps } = config;
26
26
 
27
27
  return function MakeComponent({
28
28
  children,
29
29
  style,
30
+ className: callerClassName,
30
31
  ...props
31
32
  }: T & {
32
33
  children?: ReactNode;
33
34
  style?: CSSProperties;
35
+ className?: string;
34
36
  }) {
35
37
  const calculatedStyle =
36
38
  typeof styleSrc === 'function' ? styleSrc(props as unknown as T) : styleSrc;
@@ -42,18 +44,28 @@ export function Component<T>(
42
44
  return createElement(
43
45
  element,
44
46
  {
45
- className,
46
- // The caller's `style` wins over the computed one.
47
- style: { ...calculatedStyle, ...style },
48
47
  ...otherProps,
49
- ...elementProps
48
+ ...elementProps,
49
+ // The caller extends the component class instead of silently replacing
50
+ // the class that gives the primitive its appearance.
51
+ className: [className, callerClassName].filter(Boolean).join(' '),
52
+ // The caller's `style` wins over the computed one.
53
+ style: { ...calculatedStyle, ...style }
50
54
  },
51
55
  children
52
56
  );
53
57
  };
54
58
  }
55
59
 
56
- export const Container = Component<DivProps>(`jbx-container`);
60
+ type ContainerProps = DivProps & { as?: 'div' | 'main' };
61
+
62
+ /** A page-width container. Opt into the page landmark with `as="main"`. */
63
+ export function Container({ as = 'div', className, ...props }: ContainerProps) {
64
+ return createElement(as, {
65
+ ...props,
66
+ className: ['jbx-container', className].filter(Boolean).join(' ')
67
+ });
68
+ }
57
69
 
58
70
  export const Text = Component<DivProps>(`jbx-text`);
59
71
 
@@ -62,7 +74,7 @@ export const SmallText = Component<DivProps>(`jbx-small-text`);
62
74
  export const Button = Component<React.ButtonHTMLAttributes<HTMLButtonElement>>(
63
75
  `jbx-button`,
64
76
  {},
65
- { element: 'button' }
77
+ { element: 'button', props: { type: 'button' } }
66
78
  );
67
79
 
68
80
  export const Range = Component<React.InputHTMLAttributes<HTMLInputElement>>(
package/src/style.css CHANGED
@@ -19,6 +19,14 @@ html {
19
19
  /* Every interactive control is this tall, so a button, an input and a range
20
20
  standing next to each other line up. */
21
21
  --control-height: calc(var(--size) * 2.5);
22
+ /* Keep slider gestures comfortable on touch screens without making the
23
+ visible thumb or rail look larger. Consumers can override this if their
24
+ layout provides an even larger target. */
25
+ --range-touch-target: max(var(--control-height), 44px);
26
+ /* A native range includes its thumb width in the value track. Widen the
27
+ input by this amount so a touch-sized thumb keeps the compact thumb's
28
+ original min/max positions. */
29
+ --range-thumb-overhang: calc((var(--range-touch-target) - var(--size)) / 2);
22
30
  /* What a control shrinks to inside a tab row, where it has to match the line
23
31
  box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand
24
32
  on its own -- a row holding one is then exactly as tall as one that doesn't. */
@@ -46,10 +54,6 @@ html {
46
54
  position: relative;
47
55
  }
48
56
 
49
- body {
50
- touch-action: pan-y;
51
- }
52
-
53
57
  body,
54
58
  input,
55
59
  textarea,
@@ -362,38 +366,66 @@ a.jbx-a:hover::before,
362
366
 
363
367
  .jbx-range {
364
368
  flex: 1;
365
- width: 100%;
369
+ width: calc(100% + var(--range-thumb-overhang) * 2);
370
+ margin-inline: calc(var(--range-thumb-overhang) * -1);
366
371
  appearance: none;
367
- background-color: #c0c0c080;
368
- height: var(--size);
372
+ background-color: transparent;
373
+ height: var(--range-touch-target);
369
374
  border-radius: var(--radius-small);
375
+ cursor: pointer;
376
+ touch-action: pan-y;
370
377
  }
371
378
 
372
379
  .jbx-range::-webkit-slider-thumb {
373
380
  -webkit-appearance: none;
374
381
  appearance: none;
375
382
  box-shadow: none;
376
- height: calc(var(--size) * 2);
377
- width: var(--size);
383
+ box-sizing: border-box;
384
+ height: var(--range-touch-target);
385
+ width: var(--range-touch-target);
378
386
  background-color: #000;
379
- border: none;
380
- border-radius: var(--radius-small);
387
+ background-clip: content-box;
388
+ border-color: transparent;
389
+ border-style: solid;
390
+ border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)
391
+ calc((var(--range-touch-target) - var(--size)) / 2);
392
+ border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));
393
+ margin-top: calc((var(--size) - var(--range-touch-target)) / 2);
381
394
  }
382
395
  .jbx-range::-moz-range-thumb {
383
396
  appearance: none;
384
397
  box-shadow: none;
385
- height: calc(var(--size) * 2);
386
- width: var(--size);
398
+ box-sizing: border-box;
399
+ height: var(--range-touch-target);
400
+ width: var(--range-touch-target);
387
401
  background-color: #000;
388
- border: none;
389
- border-radius: var(--radius-small);
402
+ background-clip: content-box;
403
+ border-color: transparent;
404
+ border-style: solid;
405
+ border-width: calc((var(--range-touch-target) - var(--size) * 2) / 2)
406
+ calc((var(--range-touch-target) - var(--size)) / 2);
407
+ border-radius: calc((var(--range-touch-target) - var(--size)) / 2 + var(--radius-small));
390
408
  }
391
409
  .jbx-range::-webkit-slider-runnable-track {
392
410
  appearance: none;
411
+ background: linear-gradient(
412
+ to right,
413
+ transparent 0 var(--range-thumb-overhang),
414
+ #c0c0c080 var(--range-thumb-overhang)
415
+ calc(100% - var(--range-thumb-overhang)),
416
+ transparent calc(100% - var(--range-thumb-overhang)) 100%
417
+ );
393
418
  border-radius: var(--radius-small);
419
+ height: var(--size);
394
420
  }
395
421
  .jbx-range::-moz-range-track {
396
- background-color: #c0c0c080;
422
+ background: linear-gradient(
423
+ to right,
424
+ transparent 0 var(--range-thumb-overhang),
425
+ #c0c0c080 var(--range-thumb-overhang)
426
+ calc(100% - var(--range-thumb-overhang)),
427
+ transparent calc(100% - var(--range-thumb-overhang)) 100%
428
+ );
397
429
  border-radius: var(--radius-small);
398
430
  height: var(--size);
399
431
  }
@@ -401,6 +433,18 @@ a.jbx-a:hover::before,
401
433
  outline: none;
402
434
  }
403
435
 
436
+ :is(
437
+ .jbx-a,
438
+ .jbx-button,
439
+ .jbx-input,
440
+ .jbx-code-area,
441
+ .jbx-range,
442
+ .jbx-inline[role='checkbox']
443
+ ):focus-visible {
444
+ outline: 2px solid #000;
445
+ outline-offset: 3px;
446
+ }
447
+
404
448
  .jbx-bullet-container {
405
449
  display: inline-block;
406
450
  margin: -8px 4px -8px 0;