@timmo001/groundwork-ui 0.9.14 → 0.9.15

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"
@@ -22859,7 +22859,7 @@
         {
           "kind": "variable",
           "name": "base",
-          "default": "css` :host { font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } *, *::before, *::after { box-sizing: border-box; } :host([hidden]), [hidden] { display: none !important; } :focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } :host([tone=\"accent\"]) { --gw-tone: var(--gw-color-accent); --gw-tone-fill: var(--gw-color-fill-accent-quiet); --gw-tone-border: var(--gw-color-border-accent); } :host([tone=\"info\"]) { --gw-tone: var(--gw-color-info); --gw-tone-fill: var(--gw-color-fill-info-quiet); --gw-tone-border: var(--gw-color-border-info); } :host([tone=\"success\"]) { --gw-tone: var(--gw-color-success); --gw-tone-fill: var(--gw-color-fill-success-quiet); --gw-tone-border: var(--gw-color-border-success); } :host([tone=\"warning\"]) { --gw-tone: var(--gw-color-warning); --gw-tone-fill: var(--gw-color-fill-warning-quiet); --gw-tone-border: var(--gw-color-border-warning); } :host([tone=\"danger\"]) { --gw-tone: var(--gw-color-danger); --gw-tone-fill: var(--gw-color-fill-danger-quiet); --gw-tone-border: var(--gw-color-border-danger); } :host([tone=\"important\"]) { --gw-tone: var(--gw-color-important); --gw-tone-fill: var(--gw-color-fill-important-quiet); --gw-tone-border: var(--gw-color-border-important); } /* :host too, since * in a shadow root doesn't match it, and the skeletons pulse on their host */ @media (prefers-reduced-motion: reduce) { :host, *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } `",
+          "default": "css` :host { font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } *, *::before, *::after { box-sizing: border-box; } /* The page's small scrollbars, as the themes set them, for scrolling parts inside components, which the page's rules can't reach. Each scroller follows its own scroll for the thumb's square ends */ @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; } :host([hidden]), [hidden] { display: none !important; } :focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } :host([tone=\"accent\"]) { --gw-tone: var(--gw-color-accent); --gw-tone-fill: var(--gw-color-fill-accent-quiet); --gw-tone-border: var(--gw-color-border-accent); } :host([tone=\"info\"]) { --gw-tone: var(--gw-color-info); --gw-tone-fill: var(--gw-color-fill-info-quiet); --gw-tone-border: var(--gw-color-border-info); } :host([tone=\"success\"]) { --gw-tone: var(--gw-color-success); --gw-tone-fill: var(--gw-color-fill-success-quiet); --gw-tone-border: var(--gw-color-border-success); } :host([tone=\"warning\"]) { --gw-tone: var(--gw-color-warning); --gw-tone-fill: var(--gw-color-fill-warning-quiet); --gw-tone-border: var(--gw-color-border-warning); } :host([tone=\"danger\"]) { --gw-tone: var(--gw-color-danger); --gw-tone-fill: var(--gw-color-fill-danger-quiet); --gw-tone-border: var(--gw-color-border-danger); } :host([tone=\"important\"]) { --gw-tone: var(--gw-color-important); --gw-tone-fill: var(--gw-color-fill-important-quiet); --gw-tone-border: var(--gw-color-border-important); } /* :host too, since * in a shadow root doesn't match it, and the skeletons pulse on their host */ @media (prefers-reduced-motion: reduce) { :host, *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } `",
           "description": "What every component shares: box sizing, the focus ring, icons and the\ntones that set `--gw-tone` from a `tone` attribute."
         },
         {

package/package.json

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

package/src/element.ts

@@ -136,6 +136,43 @@ const toAttribute = (value: PropertyValue, type: PropertyOptions["type"]) => {
 const attributeName = (name: string, options: PropertyOptions) =>
   options.attribute === undefined ? name.toLowerCase() : options.attribute;
 
+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.
+ */
+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);
+};
+
 /**
  * The base for every `gw-` element, with no framework underneath.
  *
@@ -182,6 +219,8 @@ export class GwElement extends HTMLElement {
     }
 
     if (!customElements.get(tag)) customElements.define(tag, this);
+
+    followPageScroll();
   }
 
   readonly #values = new Map<string, PropertyValue>();

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/styles.ts

@@ -48,6 +48,105 @@ export const base = css`
     box-sizing: border-box;
   }
 
+  /* The page's small scrollbars, as the themes set them, for scrolling parts
+     inside components, which the page's rules can't reach. Each scroller
+     follows its own scroll for the thumb's square ends */
+  @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;
+  }
+
   :host([hidden]),
   [hidden] {
     display: none !important;