@weft-js/scroll 0.0.0-stage → 0.1.4

package/styles/scroll.css

@@ -0,0 +1,199 @@
+/* @weft-js/scroll: the root, viewport and bars. Every look is a custom property, so a theme or the `bar` options
+   restyle DOM bars and canvas bars alike. Nothing here declares them, so any layer or theme may: the defaults are the
+   fallbacks. Before the script runs the viewport scrolls natively, with its own bars; in native mode it keeps
+   scrolling natively after, with those bars hidden. */
+:where([data-scroll]) {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+:where([data-scroll] > [data-part='viewport']) {
+  block-size: 100%;
+  inline-size: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  outline-offset: -2px;
+  scroll-behavior: auto;
+}
+:where([data-scroll][data-axes='y'] > [data-part='viewport']) {
+  overflow-x: hidden;
+}
+:where([data-scroll][data-axes='x'] > [data-part='viewport']) {
+  overflow-y: hidden;
+}
+:where([data-scroll][data-ready][data-mode='engine'] > [data-part='viewport']) {
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+:where([data-scroll][data-ready][data-mode='engine'] > [data-part='viewport'][data-touch='js']) {
+  touch-action: pinch-zoom;
+}
+:where([data-scroll][data-ready][data-mode='native'] > [data-part='viewport']) {
+  scrollbar-width: none;
+}
+:where([data-scroll][data-ready][data-mode='native'] > [data-part='viewport'])::-webkit-scrollbar {
+  display: none;
+}
+:where([data-scroll][data-ready][data-mode='native'][data-chain='contain'] > [data-part='viewport']) {
+  overscroll-behavior: contain;
+}
+:where([data-scroll] [data-part='viewport']:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+/* gutter: room is kept beside the content for each axis that scrolls, as `scrollbar-gutter: stable` does. */
+:where([data-scroll][data-layout='gutter']:not([data-axes='x'])) {
+  padding-inline-end: calc(
+    max(var(--scroll-width, 6px), var(--scroll-hover-width, 10px)) + 2 * var(--scroll-inset, 2px)
+  );
+}
+:where([data-scroll][data-layout='gutter']:not([data-axes='y'])) {
+  padding-block-end: calc(
+    max(var(--scroll-width, 6px), var(--scroll-hover-width, 10px)) + 2 * var(--scroll-inset, 2px)
+  );
+}
+
+:where([data-scroll] > [data-part='scrollbar']) {
+  position: absolute;
+  z-index: 1;
+  opacity: 0;
+  transition:
+    opacity var(--scroll-fade, 200ms) ease-out,
+    background-color var(--scroll-fade, 200ms);
+  background: var(--scroll-track, transparent);
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+:where([data-scroll] > [data-part='scrollbar'][data-orientation='vertical']) {
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: calc(
+    max(var(--scroll-width, 6px), var(--scroll-hover-width, 10px)) + 2 * var(--scroll-inset, 2px)
+  );
+}
+:where([data-scroll] > [data-part='scrollbar'][data-orientation='horizontal']) {
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: calc(
+    max(var(--scroll-width, 6px), var(--scroll-hover-width, 10px)) + 2 * var(--scroll-inset, 2px)
+  );
+}
+:where(
+  [data-scroll][data-overflow-x][data-overflow-y]
+    > [data-part='scrollbar'][data-orientation='vertical']
+) {
+  inset-block-end: calc(
+    max(var(--scroll-width, 6px), var(--scroll-hover-width, 10px)) + 2 * var(--scroll-inset, 2px)
+  );
+}
+:where(
+  [data-scroll][data-overflow-x][data-overflow-y]
+    > [data-part='scrollbar'][data-orientation='horizontal']
+) {
+  inset-inline-end: calc(
+    max(var(--scroll-width, 6px), var(--scroll-hover-width, 10px)) + 2 * var(--scroll-inset, 2px)
+  );
+}
+:where([data-scroll] > [data-part='scrollbar'][data-visible]) {
+  opacity: 1;
+  transition-duration: calc(var(--scroll-fade, 200ms) / 2);
+}
+:where([data-scroll] > [data-part='scrollbar'][data-none]),
+:where([data-scroll][data-show='never'] > [data-part='scrollbar']) {
+  visibility: hidden;
+  pointer-events: none;
+}
+:where([data-scroll]:not([data-ready]) > [data-part='scrollbar']) {
+  display: none;
+}
+:where([data-scroll] > [data-part='scrollbar']:is([data-hover], [data-active])) {
+  background: var(--scroll-hover-track, color-mix(in srgb, currentColor 8%, transparent));
+}
+
+:where([data-scroll] [data-part='scrollbar'] > [data-part='thumb']) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  border-radius: var(--scroll-radius, 999px);
+  background: var(--scroll-color, color-mix(in srgb, currentColor 32%, transparent));
+  will-change: transform;
+  transition:
+    inline-size var(--scroll-fade, 200ms) ease-out,
+    block-size var(--scroll-fade, 200ms) ease-out,
+    background-color var(--scroll-fade, 200ms);
+}
+:where([data-scroll] [data-part='scrollbar'][data-orientation='vertical'] > [data-part='thumb']) {
+  inset-inline-start: auto;
+  inset-inline-end: var(--scroll-inset, 2px);
+  inline-size: var(--scroll-width, 6px);
+  transition-property: inline-size, background-color;
+}
+:where([data-scroll] [data-part='scrollbar'][data-orientation='horizontal'] > [data-part='thumb']) {
+  inset-block-start: auto;
+  inset-block-end: var(--scroll-inset, 2px);
+  left: 0;
+  right: auto;
+  block-size: var(--scroll-width, 6px);
+  transition-property: block-size, background-color;
+}
+:where(
+  [data-scroll]
+    [data-part='scrollbar']:is([data-hover], [data-active])[data-orientation='vertical']
+    > [data-part='thumb']
+) {
+  inline-size: var(--scroll-hover-width, 10px);
+}
+:where(
+  [data-scroll]
+    [data-part='scrollbar']:is([data-hover], [data-active])[data-orientation='horizontal']
+    > [data-part='thumb']
+) {
+  block-size: var(--scroll-hover-width, 10px);
+}
+:where([data-scroll] [data-part='scrollbar'][data-hover] > [data-part='thumb']) {
+  background: var(--scroll-hover-color, color-mix(in srgb, currentColor 48%, transparent));
+}
+:where([data-scroll] [data-part='scrollbar'][data-active] > [data-part='thumb']) {
+  background: var(--scroll-active-color, color-mix(in srgb, currentColor 60%, transparent));
+}
+/* Native mode with DOM bars: the viewport's scroll position drives each thumb through a scroll timeline, which the
+   browser runs on the compositor, so the thumb keeps up while the main thread is busy. The script sets the two ends
+   and only sets `data-timeline` where the browser supports it; elsewhere it moves the thumb itself. */
+:where([data-scroll][data-timeline]) {
+  timeline-scope: --scroll-timeline-y, --scroll-timeline-x;
+}
+:where([data-scroll][data-timeline] > [data-part='viewport']) {
+  scroll-timeline-name: --scroll-timeline-y, --scroll-timeline-x;
+  scroll-timeline-axis: y, x;
+}
+:where([data-scroll][data-timeline] > [data-part='scrollbar'][data-orientation='vertical'] > [data-part='thumb']) {
+  animation: scroll-thumb-y linear both;
+  animation-timeline: --scroll-timeline-y;
+}
+:where([data-scroll][data-timeline] > [data-part='scrollbar'][data-orientation='horizontal'] > [data-part='thumb']) {
+  animation: scroll-thumb-x linear both;
+  animation-timeline: --scroll-timeline-x;
+}
+@keyframes scroll-thumb-y {
+  from {
+    transform: translate3d(0, var(--scroll-thumb-start, 0px), 0);
+  }
+  to {
+    transform: translate3d(0, var(--scroll-thumb-end, 0px), 0);
+  }
+}
+@keyframes scroll-thumb-x {
+  from {
+    transform: translate3d(var(--scroll-thumb-start, 0px), 0, 0);
+  }
+  to {
+    transform: translate3d(var(--scroll-thumb-end, 0px), 0, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-scroll]) {
+    --scroll-fade: 0ms;
+  }
+}