@fest-lib/veela 1.0.8 → 1.0.10

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@fest-lib/veela",
     "description": "fest-lib Veela: CSS tokens, --c2 color functions, Agate.UX, SCSS + runtime loaders",
-    "version": "1.0.8",
+    "version": "1.0.10",
     "license": "MIT",
     "type": "module",
     "sideEffects": true,

package/src/scss/ui/components/quick-settings.scss

@@ -1,8 +1,9 @@
 /*
  * Filename: QuickSettings.scss
  * FullPath: modules/projects/fl.ui/src/ui/navigation/settings/QuickSettings.scss
- * Change date and time: 09.40.00_19.08.2026
- * Reason for changes: Footer row for Settings / Explorer shortcut buttons.
+ * Change date and time: 20.00.00_03.09.2026
+ * Reason for changes: Drop contrast-color()/inherit() — Capacitor WebView drops the rest of the sheet.
+ * FIND:chrome-rail
  */
 
 /* Unlayered `:host` rules beat `ux-preload`'s layered `:host{display:none}` default. */
@@ -66,8 +67,8 @@
         border-radius: 14px;
         border: 1px solid var(--qs-outline);
         background: var(--qs-surface);
-        color: var(--qs-on-surface);
-        color: contrast-color(var(--qs-surface));
+        /* WHY: contrast-color()/inherit() need Chrome flags; replaceSync then drops later rules (sliders, footer). */
+        color: var(--color-on-surface, var(--qs-on-surface));
         /* INVARIANT: no backdrop-filter — Win11-like solid panel per spec, keeps perf on low-end devices. */
         box-shadow:
             0 20px 48px -20px rgba(0, 0, 0, 0.4),
@@ -94,8 +95,7 @@
         min-inline-size: var(--icon-size);
         min-block-size: var(--icon-size);
         line-height: 0;
-        color: contrast-color(var(--qs-surface));
-        color: color-mix(in oklch, contrast-color(var(--qs-surface)) 40%, var(--color-primary, var(--qs-primary)));
+        color: color-mix(in oklab, var(--color-on-surface, var(--qs-on-surface)) 55%, var(--color-primary, var(--qs-primary)));
     }
 
 
@@ -109,19 +109,17 @@
         border-radius: 10px;
         color: inherit;
         background: color-mix(in oklab, var(--qs-on-surface) 8%, transparent);
-        color: contrast-color(inherit(background-color));
+        color: var(--color-on-surface, var(--qs-on-surface));
         text-align: start;
         cursor: pointer;
         transition: background-color 140ms ease, color 140ms ease;
 
         &:hover {
             background: color-mix(in oklab, var(--qs-on-surface) 14%, transparent);
-            color: contrast-color(inherit(background-color));
         }
 
         &:active {
             background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
-            color: contrast-color(inherit(background-color));
         }
 
         &:focus-visible {
@@ -132,11 +130,8 @@
         &[aria-pressed="true"] {
             background: color-mix(in oklab, var(--color-primary, var(--qs-primary)) 26%, transparent);
             color: var(--color-primary, var(--qs-primary));
-            color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 60%, var(--color-primary, var(--qs-primary)));
 
             .qs-tile-icon {
-                --icon-color: var(--color-primary, var(--qs-primary));
-                --icon-color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 60%, var(--color-primary, var(--qs-primary)));
                 --icon-color: currentColor;
             }
         }
@@ -148,7 +143,7 @@
         gap: 0.05rem;
         min-inline-size: 0;
         overflow: hidden;
-        color: color-mix(in oklch, contrast-color(var(--qs-surface)) 40%, var(--color-primary, var(--qs-primary)));
+        color: var(--color-on-surface, var(--qs-on-surface));
     }
 
     .qs-tile-label {
@@ -157,7 +152,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        color: contrast-color(var(--qs-surface));
+        color: inherit;
     }
 
     .qs-tile-sub {
@@ -167,7 +162,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        color: contrast-color(var(--qs-surface));
+        color: inherit;
     }
 
     .qs-sliders {
@@ -175,7 +170,7 @@
         gap: 0.6rem;
         padding-block-start: 0.7rem;
         border-block-start: 1px solid var(--qs-outline);
-        color: contrast-color(var(--qs-surface));
+        color: var(--color-on-surface, var(--qs-on-surface));
     }
 
     .qs-slider-row {
@@ -195,7 +190,7 @@
         min-inline-size: var(--icon-size);
         min-block-size: var(--icon-size);
         line-height: 0;
-        color: contrast-color(var(--qs-surface));
+        color: inherit;
     }
 
     .qs-slider-col {
@@ -220,21 +215,19 @@
         block-size: 1.1rem;
         margin: 0;
         background: transparent;
-        color: contrast-color(inherit(background-color));
+        color: var(--color-on-surface, var(--qs-on-surface));
         cursor: pointer;
 
         &::-webkit-slider-runnable-track {
             block-size: 4px;
             border-radius: 999px;
             background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
-            color: contrast-color(inherit(background-color));
         }
 
         &::-moz-range-track {
             block-size: 4px;
             border-radius: 999px;
             background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
-            color: contrast-color(inherit(background-color));
         }
 
         &::-webkit-slider-thumb {
@@ -245,8 +238,7 @@
             margin-block-start: -6px;
             border-radius: 50%;
             border: none;
-            background: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
-            color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
+            background: var(--color-primary, var(--qs-primary));
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
         }
 
@@ -255,16 +247,13 @@
             block-size: 1rem;
             border-radius: 50%;
             border: none;
-            background: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
-            color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
+            background: var(--color-primary, var(--qs-primary));
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
         }
 
         &:focus-visible::-webkit-slider-thumb {
             outline: 2px solid var(--color-primary, var(--qs-primary));
             outline-offset: 2px;
-            color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
-            background: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
         }
     }
 
@@ -288,7 +277,7 @@
         border: none;
         border-radius: 8px;
         background: color-mix(in oklab, var(--qs-on-surface) 8%, transparent);
-        color: contrast-color(var(--qs-surface));
+        color: var(--color-on-surface, var(--qs-on-surface));
         font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
         cursor: pointer;
         transition: background-color 140ms ease;

package/src/scss/ui/components/speed-dial.scss

@@ -141,6 +141,100 @@
         pointer-events: none;
     }
 
+    /* Calendar / Quick Settings / pin — collapsible left rail, mirrored from core-rail. */
+    .speed-dial-chrome-rail {
+        --sd-rail-ink: var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText));
+        position: fixed;
+        inset-block: 12%;
+        inset-inline-start: 0;
+        z-index: 6;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: stretch;
+        pointer-events: none;
+        max-block-size: 76%;
+        padding: 0;
+        border: none;
+        outline: none;
+        color: var(--sd-rail-ink);
+    }
+
+    .speed-dial-chrome-rail__toggle {
+        pointer-events: auto;
+        align-self: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: 1.65rem;
+        block-size: 2.6rem;
+        margin: 0;
+        padding: 0;
+        border: 0 none transparent;
+        border-radius: 0 10px 10px 0;
+        background: transparent;
+        color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
+        --icon-color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
+        cursor: pointer;
+    }
+
+    .speed-dial-chrome-rail__toggle ui-icon {
+        --icon-size: 1.1rem;
+        --icon-color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
+        pointer-events: none;
+    }
+
+    .speed-dial-chrome-rail__panel {
+        pointer-events: auto;
+        display: none;
+        flex-direction: column;
+        gap: 0.45rem;
+        padding: 0.55rem 0.45rem;
+        min-inline-size: 3.4rem;
+        max-inline-size: 5.2rem;
+        overflow: auto;
+        border: 1px solid color-mix(in oklab, var(--sd-rail-ink) 16%, transparent);
+        border-inline-start: none;
+        border-radius: 0 14px 14px 0;
+        background: color-mix(in oklab, var(--wallpaper-underlying-color, Canvas) 82%, transparent);
+        backdrop-filter: blur(14px);
+        -webkit-backdrop-filter: blur(14px);
+        color: var(--sd-rail-ink);
+    }
+
+    .speed-dial-chrome-rail[data-open] .speed-dial-chrome-rail__panel {
+        display: flex;
+    }
+
+    .speed-dial-chrome-rail__item {
+        appearance: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.2rem;
+        margin: 0;
+        padding: 0.35rem 0.2rem;
+        border: none;
+        border-radius: var(--radius-lg);
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        min-inline-size: 0;
+    }
+
+    .speed-dial-chrome-rail__item:hover,
+    .speed-dial-chrome-rail__item:focus-visible,
+    .speed-dial-chrome-rail__item[data-pressed] {
+        background: color-mix(in oklab, var(--sd-rail-ink) 10%, transparent);
+        outline: none;
+    }
+
+    .speed-dial-chrome-rail__item ui-icon {
+        --icon-size: 1.55rem;
+        --icon-color: var(--sd-rail-ink);
+        color: var(--sd-rail-ink);
+        pointer-events: none;
+    }
+
     .speed-dial-workspace-pager {
         position: absolute;
         inset-inline: 0;
@@ -381,6 +475,18 @@
         }
     }
 
+    .speed-dial-root[data-tiles-locked] {
+        .sd-widget-host:not([data-widget="android"]) {
+            cursor: default;
+        }
+
+        .sd-widget-chrome,
+        .sd-widget-resize {
+            display: none;
+            pointer-events: none;
+        }
+    }
+
     .sd-widget--android {
         pointer-events: none;
         opacity: 0.08;
@@ -424,7 +530,8 @@
         color: color-mix(in oklab, var(--sd-you-ink, var(--wallpaper-contrast-color)) 62%, transparent);
     }
 
-    .speed-dial-core-rail__label {
+    .speed-dial-core-rail__label,
+    .speed-dial-chrome-rail__label {
         font-size: 0.62rem;
         line-height: 1.15;
         text-align: center;
@@ -638,7 +745,7 @@
                 scale: 1;
             }
 
-            &:active {
+            &:active:not(.sd-widget-host):not([data-widget]):not([data-spanned]) {
                 scale: 0.94;
             }
 
@@ -656,8 +763,12 @@
             &[data-widget]:not([data-layer="labels"]),
             &[data-spanned]:not([data-layer="labels"]) {
                 /* WHY: launcher grid uses place-items:center + 4rem --tile-size; widgets must fill the span. */
-                grid-column: var(--cell-column, auto) / span var(--cell-span-x, 1) !important;
-                grid-row: var(--cell-row, auto) / span var(--cell-span-y, 1) !important;
+                /* INVARIANT: same origin as icon tiles (`--cs-grid-*` from logical `--cell-x/y`).
+                 * JS `--cell-column` is a second visual space and desyncs on CRX remount / orient. */
+                grid-column: clamp(1, calc(1 + round(nearest, var(--cs-grid-c, 0), 1)), 16)
+                    / span var(--cell-span-x, 1) !important;
+                grid-row: clamp(1, calc(1 + round(nearest, var(--cs-grid-r, 0), 1)), 16)
+                    / span var(--cell-span-y, 1) !important;
                 place-self: stretch !important;
                 justify-self: stretch !important;
                 align-self: stretch !important;
@@ -667,6 +778,8 @@
                 max-inline-size: none !important;
                 max-block-size: none !important;
                 --tile-size: 100%;
+                /* WHY: gridbox locks origin at 50% — wide search scales/settles around the middle. */
+                transform-origin: var(--sd-grab-ox, 50%) var(--sd-grab-oy, 50%) !important;
             }
 
             &.ui-ws-item-icon {