@qtoggle/qui 1.20.0 → 1.20.1

package/less/base.less

@@ -73,6 +73,10 @@ body {
     overflow-x: hidden;
     transition: opacity @transition-duration linear;
     line-height: 1.15em;
+
+    /* A pixel-moving filter, even one that changes nothing, keeps Chrome from running background-color transitions on
+     * the compositor, which sometimes shows a transition's first frame again once it ends. */
+    filter: blur(0);
 }
 
 body.disable-transitions * {

package/less/icon-label-view.less

@@ -57,53 +57,15 @@ div.qui-icon-label-view {
     &.qui-base-button {
         background: @background-color;
         color: @interactive-color;
-        transition: color @transition-duration ease,
-                    opacity @transition-duration ease;
-
-        /* The selected fill and the pressed shade are overlays faded by opacity, which the compositor animates without
-         * repainting the row. Chrome sometimes shows a background transition's first frame again once it ends. */
-        position: relative;
-        z-index: 0;
-
-        /* Negative z-index keeps both overlays above the row's background but below its content */
-        &::before,
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            opacity: 0;
-            transition: opacity @transition-duration ease;
-            pointer-events: none;
-        }
-
-        &::before {
-            background: @interactive-color;
-            z-index: -2;
-        }
 
-        &::after {
+        &.active {
             background: @background-active-color;
-            z-index: -1;
-        }
-
-        &.active::after {
-            opacity: 1;
         }
 
         &.selected {
+            background: @interactive-color;
             color: @background-color;
 
-            &::before {
-                opacity: 1;
-            }
-
-            &::after {
-                background: @interactive-active-color;
-            }
-
             & > div.labels > div.sub-label {
                 color: @background-color;
                 background-color: fade(@interactive-active-color, 50%);
@@ -111,6 +73,11 @@ div.qui-icon-label-view {
 
         }
 
+        &.active.selected {
+            background: @interactive-active-color;
+            color: @background-color;
+        }
+
     }
 
 }

package/less/icons.less

@@ -5,6 +5,10 @@
 .qui-icon {
     display: inline-block;
     position: relative;
+
+    /* Keeps the z-indexes of the state layers and the decoration inside the icon, so they cannot rise above a sticky
+     * header or an overlay that the icon scrolls under */
+    z-index: 0;
 }
 
 .qui-icon > div.qui-icon-normal,

package/less/lists.less

@@ -8,6 +8,14 @@ div.qui-list {
     background: @background-color;
 }
 
+/* A sticky child sticks inside its nearest ancestor that clips. `clip` clips like `hidden` without making a scroll
+ * container, so the search box sticks to the scrolling page instead; older browsers keep `hidden` and scroll it away. */
+div.qui-list.qui-structured-view,
+div.qui-list > div.qui-structured-view-body {
+    overflow: hidden;
+    overflow: clip;
+}
+
 
 /* Children */
 
@@ -55,8 +63,48 @@ div.qui-list-child.qui-list-item {
 
 /* Search */
 
+div.qui-list-child.qui-list-search {
+    /* Stays at the top of the page while the rows scroll under it */
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: @background-color;
+    border-bottom-color: @interactive-color;
+
+    /* Casts the top bar's shadow on the rows while stuck; browsers without scroll-state queries just show none */
+    container-type: scroll-state;
+    overflow: visible;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: -0.0625em; /* Below the border, like the top bar's shadow */
+        left: 0;
+        z-index: -1;
+        box-shadow: 0 0.3125em 0.5em -0.3125em @bar-shadow-color;
+        opacity: 0;
+        transition: opacity @transition-duration ease;
+        pointer-events: none;
+    }
+
+    /* The focused field fills with the interactive color, so a line of that color would merge with a selected row
+     * below it */
+    &:focus-within {
+        border-bottom-color: @border-color;
+    }
+}
+
+@container scroll-state(stuck: top) {
+    div.qui-list-child.qui-list-search::after {
+        opacity: 1;
+    }
+}
+
 div.qui-list-child.qui-list-search > div.qui-list-search-wrapper {
     position: relative;
+    overflow: hidden; /* Clips the field's focus ring, now that the search box lets its shadow out */
 
     & > input[type=text] {
         width: 100%;

package/package.json

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

package/pyproject.toml

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

package/qui/templates/service-worker.js

@@ -24,14 +24,14 @@ function getQueryArgument(name, def = null) {
     if (queryArguments == null) {
         let queryString = self.location.search.substring(1)
         queryArguments = new Map(queryString.split('&').map(function (keyValuePair) {
-            let splits = keyValuePair.split('=');
-            let key = decodeURIComponent(splits[0]);
-            let value = decodeURIComponent(splits[1]);
+            let splits = keyValuePair.split('=')
+            let key = decodeURIComponent(splits[0])
+            let value = decodeURIComponent(splits[1])
             if (value.indexOf(',') >= 0) {
-                value = value.split(',');
+                value = value.split(',')
             }
 
-            return [key, value];
+            return [key, value]
         }))
     }