@timmo001/groundwork-ui 0.9.14 → 0.9.16

package/custom-elements.json

@@ -16675,7 +16675,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` [popover] { position: fixed; box-sizing: border-box; flex-direction: column; padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: 0 solid var(--gw-color-border-normal); box-shadow: var(--gw-shadow-l); transition: translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open { display: flex; translate: 0 0; } /* The page dims as the sheet slides in, and back as it leaves */ [popover]::backdrop { background: rgb(0 0 0 / 0%); transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open::backdrop { background: rgb(0 0 0 / 40%); } @starting-style { [popover]:popover-open::backdrop { background: rgb(0 0 0 / 0%); } } /* Full height from the start or end edge */ [data-side=\"start\"], [data-side=\"end\"] { inset: 0 auto; width: min(var(--gw-sheet-width, 20rem), 100vw); height: 100%; max-height: none; } [data-side=\"start\"] { inset-inline-start: 0; border-inline-end-width: max(var(--gw-border-width), 1px); translate: -100% 0; } [data-side=\"end\"] { inset-inline-end: 0; border-inline-start-width: max(var(--gw-border-width), 1px); translate: 100% 0; } :host(:dir(rtl)) [data-side=\"start\"] { translate: 100% 0; } :host(:dir(rtl)) [data-side=\"end\"] { translate: -100% 0; } /* Up from the bottom, with room for the phone's home bar */ [data-side=\"bottom\"] { inset: auto 0 0; width: 100%; max-width: none; max-height: var(--gw-sheet-height, 85vh); padding-block-end: env(safe-area-inset-bottom); border-block-start-width: max(var(--gw-border-width), 1px); border-start-start-radius: var(--gw-radius-panel); border-start-end-radius: var(--gw-radius-panel); translate: 0 100%; } @starting-style { [data-side=\"start\"]:popover-open { translate: -100% 0; } [data-side=\"end\"]:popover-open { translate: 100% 0; } [data-side=\"bottom\"]:popover-open { translate: 0 100%; } } header { display: flex; flex: none; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-2) var(--gw-space-3); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-3); min-height: 0; padding: var(--gw-space-4); /* It scrolls down only, so content reaching into its padding never makes it scroll sideways */ overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; } `, ]",
+              "default": "[ base, css` [popover] { position: fixed; box-sizing: border-box; flex-direction: column; padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: 0 solid var(--gw-color-border-normal); box-shadow: var(--gw-shadow-l); transition: translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open { display: flex; translate: 0 0; } /* The page dims as the sheet slides in, and back as it leaves */ [popover]::backdrop { background: rgb(0 0 0 / 0%); transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open::backdrop { background: rgb(0 0 0 / 40%); } @starting-style { [popover]:popover-open::backdrop { background: rgb(0 0 0 / 0%); } } /* Full height from the start or end edge */ [data-side=\"start\"], [data-side=\"end\"] { inset: 0 auto; width: min(var(--gw-sheet-width, 20rem), 100vw); height: 100%; max-height: none; } [data-side=\"start\"] { inset-inline-start: 0; border-inline-end-width: max(var(--gw-border-width), 1px); translate: -100% 0; } [data-side=\"end\"] { inset-inline-end: 0; border-inline-start-width: max(var(--gw-border-width), 1px); translate: 100% 0; } :host(:dir(rtl)) [data-side=\"start\"] { translate: 100% 0; } :host(:dir(rtl)) [data-side=\"end\"] { translate: -100% 0; } /* Up from the bottom, with room for the phone's home bar */ [data-side=\"bottom\"] { inset: auto 0 0; width: 100%; max-width: none; max-height: var(--gw-sheet-height, 85vh); padding-block-end: env(safe-area-inset-bottom); border-block-start-width: max(var(--gw-border-width), 1px); border-start-start-radius: var(--gw-radius-panel); border-start-end-radius: var(--gw-radius-panel); translate: 0 100%; } @starting-style { [data-side=\"start\"]:popover-open { translate: -100% 0; } [data-side=\"end\"]:popover-open { translate: 100% 0; } [data-side=\"bottom\"]:popover-open { translate: 0 100%; } } header { display: flex; flex: none; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-2) var(--gw-space-3); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-3); min-height: 0; padding: var(--gw-space-4); /* It scrolls down only, so content reaching into its padding never makes it scroll sideways */ overflow: hidden auto; overscroll-behavior: contain; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -20762,6 +20762,14 @@
             "module": "src/styles.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/scrollbars.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -22839,6 +22847,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/scrollbars.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "scrollbars",
+          "default": "new CSSStyleSheet()",
+          "description": "The page's scrollbars for a shadow root: a small rounded thumb on a clear\ntrack with no arrow buttons, squaring off at the ends of its track. Every\n`gw-` element adopts it; add it to an app's own components' styles to match.\nThe `--gw-scrollbar-*` properties restyle it as they do the page's."
+        },
+        {
+          "kind": "function",
+          "name": "followPageScroll",
+          "description": "Sets `--gw-scrollbar-top`, `-bottom`, `-left` and `-right` on the root as\nthe page scrolls, 0 against that end and 1 elsewhere, so the window's\nscrollbar thumb squares off at the ends like the others. The window's\nscrollbar doesn't repaint for the scroll-driven animation the themes give\nother scrollers. Every `gw-` element starts it when it's defined."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "scrollbars",
+          "declaration": {
+            "name": "scrollbars",
+            "module": "src/scrollbars.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "followPageScroll",
+          "declaration": {
+            "name": "followPageScroll",
+            "module": "src/scrollbars.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/styles.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "description": "Groundwork's framework-free web components, styled by the --gw-* tokens",
   "license": "Apache-2.0",
   "type": "module",

package/src/element.ts

@@ -5,6 +5,7 @@
  *
  * @module
  */
+import { followPageScroll, scrollbars } from "./scrollbars.js";
 
 /** How a property reads its attribute and writes it back. */
 export interface PropertyOptions {
@@ -182,6 +183,8 @@ export class GwElement extends HTMLElement {
     }
 
     if (!customElements.get(tag)) customElements.define(tag, this);
+
+    followPageScroll();
   }
 
   readonly #values = new Map<string, PropertyValue>();
@@ -224,7 +227,7 @@ export class GwElement extends HTMLElement {
     if (own.shadow) {
       const root = this.attachShadow(own.shadowRootOptions);
 
-      root.adoptedStyleSheets = [...own.styles];
+      root.adoptedStyleSheets = [scrollbars, ...own.styles];
       this.renderRoot = root;
     } else {
       this.renderRoot = this;

package/src/gw-sheet.ts

@@ -189,7 +189,6 @@ export class GwSheet extends GwElement {
            makes it scroll sideways */
         overflow: hidden auto;
         overscroll-behavior: contain;
-        scrollbar-width: thin;
       }
     `,
   ];

package/src/index.ts

@@ -9,6 +9,8 @@ export * from "./element.js";
 
 export * from "./styles.js";
 
+export * from "./scrollbars.js";
+
 export * from "./motion.js";
 
 export * from "./fields.js";

package/src/scrollbars.ts

@@ -0,0 +1,148 @@
+/**
+ * The small scrollbars `themes.css` gives the page, as a sheet for shadow
+ * roots, which the page's rules can't reach, and the page scroll tracking
+ * that squares the window's thumb off at its ends.
+ *
+ * @module
+ */
+
+/**
+ * The page's scrollbars for a shadow root: a small rounded thumb on a clear
+ * track with no arrow buttons, squaring off at the ends of its track. Every
+ * `gw-` element adopts it; add it to an app's own components' styles to match.
+ * The `--gw-scrollbar-*` properties restyle it as they do the page's.
+ */
+export const scrollbars = new CSSStyleSheet();
+
+scrollbars.replaceSync(`
+  @supports not selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-width: thin;
+    }
+  }
+
+  * {
+    animation:
+      gw-scrollbar-edges-y linear both,
+      gw-scrollbar-edges-x linear both;
+    animation-timeline: scroll(self y), scroll(self x);
+  }
+
+  @keyframes gw-scrollbar-edges-y {
+    0% {
+      --gw-scrollbar-top: 0;
+    }
+
+    1% {
+      --gw-scrollbar-top: 1;
+    }
+
+    99% {
+      --gw-scrollbar-bottom: 1;
+    }
+
+    100% {
+      --gw-scrollbar-bottom: 0;
+    }
+  }
+
+  @keyframes gw-scrollbar-edges-x {
+    0% {
+      --gw-scrollbar-left: 0;
+    }
+
+    1% {
+      --gw-scrollbar-left: 1;
+    }
+
+    99% {
+      --gw-scrollbar-right: 1;
+    }
+
+    100% {
+      --gw-scrollbar-right: 0;
+    }
+  }
+
+  ::-webkit-scrollbar {
+    width: var(--gw-scrollbar-size, 0.4rem);
+    height: var(--gw-scrollbar-size, 0.4rem);
+    background: var(--gw-scrollbar-track, transparent);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(
+      --gw-scrollbar-thumb,
+      color-mix(
+        in oklab,
+        var(--gw-color-text-secondary, currentColor) 45%,
+        transparent
+      )
+    );
+    border-radius:
+      calc(var(--gw-scrollbar-size, 0.4rem) * var(--gw-scrollbar-top, 1))
+      calc(var(--gw-scrollbar-size, 0.4rem) * var(--gw-scrollbar-top, 1))
+      calc(var(--gw-scrollbar-size, 0.4rem) * var(--gw-scrollbar-bottom, 1))
+      calc(var(--gw-scrollbar-size, 0.4rem) * var(--gw-scrollbar-bottom, 1));
+  }
+
+  ::-webkit-scrollbar-thumb:horizontal {
+    border-radius:
+      calc(var(--gw-scrollbar-size, 0.4rem) * var(--gw-scrollbar-left, 1))
+      calc(var(--gw-scrollbar-size, 0.4rem) * var(--gw-scrollbar-right, 1))
+      calc(var(--gw-scrollbar-size, 0.4rem) * var(--gw-scrollbar-right, 1))
+      calc(var(--gw-scrollbar-size, 0.4rem) * var(--gw-scrollbar-left, 1));
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(
+      --gw-scrollbar-thumb,
+      color-mix(
+        in oklab,
+        var(--gw-color-text-secondary, currentColor) 70%,
+        transparent
+      )
+    );
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+`);
+
+let followingPageScroll = false;
+
+/**
+ * Sets `--gw-scrollbar-top`, `-bottom`, `-left` and `-right` on the root as
+ * the page scrolls, 0 against that end and 1 elsewhere, so the window's
+ * scrollbar thumb squares off at the ends like the others. The window's
+ * scrollbar doesn't repaint for the scroll-driven animation the themes give
+ * other scrollers. Every `gw-` element starts it when it's defined.
+ */
+export const followPageScroll = () => {
+  if (followingPageScroll) return;
+
+  followingPageScroll = true;
+
+  const root = document.documentElement;
+
+  const set = (edge: string, against: boolean) => {
+    const value = against ? "0" : "1";
+
+    if (root.style.getPropertyValue(`--gw-scrollbar-${edge}`) !== value)
+      root.style.setProperty(`--gw-scrollbar-${edge}`, value);
+  };
+
+  const update = () => {
+    const page = document.scrollingElement ?? root;
+
+    set("top", page.scrollTop <= 0);
+    set("bottom", page.scrollTop + page.clientHeight >= page.scrollHeight - 1);
+    set("left", page.scrollLeft <= 0);
+    set("right", page.scrollLeft + page.clientWidth >= page.scrollWidth - 1);
+  };
+
+  update();
+  addEventListener("scroll", update, { passive: true });
+  new ResizeObserver(update).observe(root);
+};