@qtoggle/qui 1.20.0-alpha.4 → 1.20.0-alpha.5

package/less/global-glass.less

@@ -9,8 +9,8 @@ div.qui-global-glass {
     left: 0;
     right: 0;
     bottom: 0;
+    /* backdrop-filter is set once below and never changes, so listing it here only ever cost a property to watch */
     transition: opacity @transition-duration ease,
-                backdrop-filter @transition-duration linear,
                 margin-top @transition-duration linear;
     opacity: 0;
     display: flex;

package/less/lists.less

@@ -29,10 +29,15 @@ div.qui-list-child {
 
 div.qui-list-child.qui-list-item {
 
-    /* Nothing inside an item is ever painted outside of it, since div.qui-list-child above already clips with
-     * overflow: hidden. Containment is therefore visually inert here, but it lets the engine scope layout and style
-     * invalidation to the single row that changed, instead of the whole list, and skip painting off-screen rows. */
-    contain: layout style paint;
+    /* No `contain` here, deliberately. Layout or paint containment makes each row an independent unit for pixel
+     * snapping, and the separator below is a 0.0625em border -- one device pixel at the default font size, but a
+     * fractional one as soon as the page is zoomed or the root font size is not 16px. Snapped per row rather than
+     * across the list, some of those borders round away to nothing and the separator simply vanishes for a few rows.
+     * Reproduced at a 53.6px row pitch: 7 of 10 separators drawn with containment, 10 of 10 without. `contain: paint`
+     * alone and `contain: layout style` alone each do it; only `contain: style` is safe, and that buys nothing.
+     *
+     * The off-screen saving is not lost: content-visibility on the icon-label view below implies containment on that
+     * element, which carries no border of its own. */
 
     &.hidden {
         opacity: 0;

package/less/main-ui.less

@@ -24,11 +24,13 @@ div.qui-main-container-glass {
     right: 0;
     bottom: 0;
     left: 0;
-    transition: backdrop-filter @transition-duration linear;
-}
+    opacity: 0;
 
-div.qui-main-container-glass.visible {
+    /* The filter is constant and only the opacity of the filtered layer is animated. Transitioning backdrop-filter
+     * itself gives the compositor a different filter to apply on every frame, across the whole viewport, and nothing
+     * it can cache. There is no cost while hidden: VisibilityManager sets display: none once the fade has finished. */
     backdrop-filter: @modal-background-filter;
+    transition: opacity @transition-duration linear;
 
     /* Workaround for Firefox that doesn't support backdrop-filter property */
     @supports (-moz-appearance:none) {
@@ -36,6 +38,10 @@ div.qui-main-container-glass.visible {
     }
 }
 
+div.qui-main-container-glass.visible {
+    opacity: 1;
+}
+
 div.qui-pages-container {
     height: 100%;
 }

package/less/pages/page.less

@@ -27,10 +27,36 @@ div.qui-page.visible {
     z-index: 1;
 }
 
-body.small-screen > div.qui-main-container > div.qui-pages-container > div.qui-page.visible,
-body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.qui-page.visible {
+/* On a small screen a page is always exactly as wide as its container, so translateX(100%) lands in the very same
+ * place as left: 100% -- but on the compositor, instead of relayouting and repainting both page subtrees on every
+ * frame of the slide.
+ *
+ * The resting state is deliberately `transform: none` and not `translateX(0)`: any transform other than `none` makes
+ * the page a containing block for its `position: fixed` descendants, which would unpin the form button bar (see
+ * forms/form.less). Interpolating out of `none` animates perfectly well, and while a page is actually sliding, its
+ * button bar travelling with it is what one wants anyway.
+ *
+ * The desktop column layout deliberately stays on `left`/`width`: there a page is narrower than its container, so
+ * translateX(100%) would not carry it clear of the viewport, and the slide distance would have to be computed per
+ * page against its own width. */
+body.small-screen > div.qui-main-container > div.qui-pages-container > div.qui-page,
+body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.qui-page {
     width: 100% !important;
     left: 0 !important;
+    transform: translateX(100%);
+    transition: opacity @transition-duration ease-out,
+                transform @transition-duration ease;
+
+    &.attached {
+        transform: translateX(-100%);
+    }
+
+    /* Popups fade in place; they never slide */
+    &.popup,
+    &.visible {
+        transform: none;
+    }
+
 }
 
 div.qui-page.current {

package/less/widgets/check-button.less

@@ -20,7 +20,7 @@ div.qui-check-button {
     transition+: background @transition-duration ease,
                  color @transition-duration ease,
                  opacity @transition-duration ease,
-                 border @transition-duration ease;
+                 border-color @transition-duration ease;
     .qui-focusable-widget();
 
     &:FOCUS {

package/less/widgets/common-buttons.less

@@ -4,11 +4,14 @@
 @import (reference) "common";
 
 
+/* border-color, not the border shorthand: the width and style of these borders are set once and never animate, so
+ * naming the colour keeps the fade while leaving border-width and border-style -- the two that would cost layout --
+ * out of the transition entirely. */
 .qui-base-button {
     transition: background @transition-duration ease,
                 color @transition-duration ease,
                 opacity @transition-duration ease,
-                border @transition-duration ease;
+                border-color @transition-duration ease;
     box-sizing: border-box;
     cursor: pointer;
     .noselect;
@@ -73,7 +76,7 @@
     transition+: background @transition-duration ease,
                  color @transition-duration ease,
                  opacity @transition-duration ease,
-                 border @transition-duration ease;
+                 border-color @transition-duration ease;
     .qui-focusable-widget();
 
     &:FOCUS {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qtoggle/qui",
   "description": "A JavaScript UI library with batteries included.",
-  "version": "1.20.0-alpha.4",
+  "version": "1.20.0-alpha.5",
   "author": {
     "name": "Calin Crisan",
     "email": "ccrisan@gmail.com"

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "qui-server"
-version = "1.20.0-alpha.4"
+version = "1.20.0-alpha.5"
 description = "A fully fledged qToggle implementation written in Python"
 authors = [
     {name = "Calin Crisan", email = "ccrisan@gmail.com"},