prop-for-that 0.7.4 → 0.7.6

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 (7) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +1 -1
  3. package/dist/head.cjs +1 -1
  4. package/dist/head.global.js +1 -1
  5. package/dist/head.js +1 -1
  6. package/llms.txt +1 -0
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -8,6 +8,26 @@ backwards-compatible change (semver's `1.0.0`+ rules kick in at v1).
8
8
  Only the published library (`dist/`) is versioned here; the demo and docs site
9
9
  are repo-only and not part of the npm package.
10
10
 
11
+ ## [0.7.6]
12
+
13
+ ### Fixed
14
+ - **`head` scrollbar probe** — `--const-scrollbar-w` and `--const-scrollbar-thin-w`
15
+ could report the *same* value on classic (non-overlay) scrollbar systems when a
16
+ page styled non-root scrollers thinner (e.g. `:where(:not(:root)){scrollbar-width:thin}`).
17
+ The probe never pinned `scrollbar-width` for the classic read, so that page rule
18
+ bled in and made the "classic" measurement actually thin. The probe now sets
19
+ `scrollbar-width:auto` inline, isolating the classic read from page CSS.
20
+
21
+ ## [0.7.5]
22
+
23
+ ### Added
24
+ - **`head`: `--const-scrollbar-overlay`** — the user's scrollbar preference,
25
+ derived from the scrollbar-width probe already taken in `<head>`: `1` when
26
+ scrollbars overlay content (reserve no layout space, appear on interaction),
27
+ `0` when they're classic/inline (always shown, take up width). Lets CSS reserve
28
+ a gutter only when it's actually needed —
29
+ `padding-inline-end: calc((1 - var(--const-scrollbar-overlay)) * 12px)`. (#8)
30
+
11
31
  ## [0.7.4]
12
32
 
13
33
  ### Added
package/README.md CHANGED
@@ -62,7 +62,7 @@ Bind any element with `data-props-for="key …"` and read its `--live-*` propert
62
62
  | --- | --- |
63
63
  | `prop-for-that/auto` | Zero-config & declarative: binds every `data-props-for` element — globals included, via `<html data-props-for="…">` — loading plugin sources on demand, kept in sync with the DOM. Use as `<script type="module">`. |
64
64
  | `prop-for-that` | Imperative API — `propsFor()`, `register()`, `configure()` — for explicit control and teardown. |
65
- | `prop-for-that/head` | Synchronous, FOUC-safe constants (scrollbar width, DPR, core count, device memory) before first paint. |
65
+ | `prop-for-that/head` | Synchronous, FOUC-safe constants (scrollbar width & overlay preference, DPR, core count, device memory) before first paint. |
66
66
  | `prop-for-that/plugins` | The opt-in plugin catalog. |
67
67
 
68
68
  > `auto` sees the **light DOM only** (not shadow roots — bind those with `propsFor(el, …)`), and lazy-loads plugin chunks, so from a CDN use one that serves the `dist` files verbatim (unpkg / jsDelivr), not a rewriting CDN.
package/dist/head.cjs CHANGED
@@ -1 +1 @@
1
- 'use strict';var chunk7L35N3N3_cjs=require('./chunk-7L35N3N3.cjs');function s(){let i=chunk7L35N3N3_cjs.a.root,e=(r,n)=>i.style.setProperty(chunk7L35N3N3_cjs.a.constPrefix+r,String(n)),t=document.createElement("div");t.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden",(document.body??i).appendChild(t),e("scrollbar-w",t.offsetWidth-t.clientWidth),t.style.scrollbarWidth="thin",e("scrollbar-thin-w",t.offsetWidth-t.clientWidth),t.remove(),e("dpr",window.devicePixelRatio||1),e("cores",navigator.hardwareConcurrency||0),e("mem",navigator.deviceMemory||0);}typeof document<"u"&&s();
1
+ 'use strict';var chunk7L35N3N3_cjs=require('./chunk-7L35N3N3.cjs');function c(){let r=chunk7L35N3N3_cjs.a.root,o=(n,s)=>r.style.setProperty(chunk7L35N3N3_cjs.a.constPrefix+n,String(s)),t=document.createElement("div");t.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden;scrollbar-width:auto",(document.body??r).appendChild(t);let i=t.offsetWidth-t.clientWidth;o("scrollbar-w",i),o("scrollbar-overlay",i===0?1:0),t.style.scrollbarWidth="thin",o("scrollbar-thin-w",t.offsetWidth-t.clientWidth),t.remove(),o("dpr",window.devicePixelRatio||1),o("cores",navigator.hardwareConcurrency||0),o("mem",navigator.deviceMemory||0);}typeof document<"u"&&c();
package/dist/head.global.js CHANGED
@@ -1 +1 @@
1
- (function(){'use strict';var o={constPrefix:"--const-",root:typeof document<"u"?document.documentElement:void 0};function s(){let i=o.root,t=(n,r)=>i.style.setProperty(o.constPrefix+n,String(r)),e=document.createElement("div");e.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden",(document.body??i).appendChild(e),t("scrollbar-w",e.offsetWidth-e.clientWidth),e.style.scrollbarWidth="thin",t("scrollbar-thin-w",e.offsetWidth-e.clientWidth),e.remove(),t("dpr",window.devicePixelRatio||1),t("cores",navigator.hardwareConcurrency||0),t("mem",navigator.deviceMemory||0);}typeof document<"u"&&s();})();
1
+ (function(){'use strict';var o={constPrefix:"--const-",root:typeof document<"u"?document.documentElement:void 0};function c(){let i=o.root,e=(r,s)=>i.style.setProperty(o.constPrefix+r,String(s)),t=document.createElement("div");t.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden;scrollbar-width:auto",(document.body??i).appendChild(t);let n=t.offsetWidth-t.clientWidth;e("scrollbar-w",n),e("scrollbar-overlay",n===0?1:0),t.style.scrollbarWidth="thin",e("scrollbar-thin-w",t.offsetWidth-t.clientWidth),t.remove(),e("dpr",window.devicePixelRatio||1),e("cores",navigator.hardwareConcurrency||0),e("mem",navigator.deviceMemory||0);}typeof document<"u"&&c();})();
package/dist/head.js CHANGED
@@ -1 +1 @@
1
- import {a}from'./chunk-LWKH66VY.js';function s(){let i=a.root,e=(r,n)=>i.style.setProperty(a.constPrefix+r,String(n)),t=document.createElement("div");t.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden",(document.body??i).appendChild(t),e("scrollbar-w",t.offsetWidth-t.clientWidth),t.style.scrollbarWidth="thin",e("scrollbar-thin-w",t.offsetWidth-t.clientWidth),t.remove(),e("dpr",window.devicePixelRatio||1),e("cores",navigator.hardwareConcurrency||0),e("mem",navigator.deviceMemory||0);}typeof document<"u"&&s();
1
+ import {a}from'./chunk-LWKH66VY.js';function c(){let r=a.root,o=(n,s)=>r.style.setProperty(a.constPrefix+n,String(s)),t=document.createElement("div");t.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden;scrollbar-width:auto",(document.body??r).appendChild(t);let i=t.offsetWidth-t.clientWidth;o("scrollbar-w",i),o("scrollbar-overlay",i===0?1:0),t.style.scrollbarWidth="thin",o("scrollbar-thin-w",t.offsetWidth-t.clientWidth),t.remove(),o("dpr",window.devicePixelRatio||1),o("cores",navigator.hardwareConcurrency||0),o("mem",navigator.deviceMemory||0);}typeof document<"u"&&c();
package/llms.txt CHANGED
@@ -102,6 +102,7 @@ prefix; constants use `--const-`. Values are unitless numbers unless noted.
102
102
  | --- | --- |
103
103
  | `--const-scrollbar-w` | scrollbar width in px |
104
104
  | `--const-scrollbar-thin-w` | scrollbar width in px with `scrollbar-width: thin` (= `--const-scrollbar-w` where unsupported) |
105
+ | `--const-scrollbar-overlay` | user's scrollbar preference: `1` = overlay (floats over content, appears on interaction, `--const-scrollbar-w` is `0`), `0` = classic/inline (always shown, reserves width) |
105
106
  | `--const-dpr` | `devicePixelRatio` |
106
107
  | `--const-cores` | `navigator.hardwareConcurrency` |
107
108
  | `--const-mem` | `navigator.deviceMemory` in GiB (Chromium-only, coarse; `0` elsewhere) |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "prop-for-that",
3
- "version": "0.7.4",
3
+ "version": "0.7.6",
4
4
  "description": "Expose what JavaScript knows but CSS can't see, as batched, diffed CSS custom properties.",
5
5
  "type": "module",
6
6
  "license": "MIT",