@fest-lib/veela 0.1.9 → 0.1.11

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@fest-lib/veela",
-    "description": "Veela CSS framework and runtime loaders (fest-lib)",
-    "version": "0.1.9",
+    "description": "fest-lib Veela: CSS tokens, --c2 color functions, Agate.UX, SCSS + runtime loaders",
+    "version": "0.1.11",
     "license": "MIT",
     "type": "module",
     "sideEffects": true,
@@ -43,9 +43,17 @@
         "./dist/index.js": "./dist/veela.js",
         "./index.js": "./dist/veela.js"
     },
+    "dependencies": {
+        "@fest-lib/object": "github:fest-live/object.ts#main",
+        "@fest-lib/core": "github:fest-live/core.ts#main",
+        "@fest-lib/dom": "github:fest-live/dom.ts#main",
+        "@fest-lib/lure": "github:fest-live/lur.e#main"
+    },
     "peerDependencies": {
+        "@fest-lib/object": ">=0.1.0",
         "@fest-lib/core": ">=0.1.0",
-        "@fest-lib/dom": ">=0.1.0"
+        "@fest-lib/dom": ">=0.1.0",
+        "@fest-lib/lure": ">=0.1.0"
     },
     "scripts": {
         "test": "npm run test:puppeteer",

package/src/scss/_layers.scss

@@ -1,16 +1,42 @@
-/**
- * Veela CSS Layer Order
- *
- * Defines the cascade layer order for all veela style variants.
- * Imported by core/basic/advanced/beercss entry points.
+/*
+ * Filename: _layers.scss
+ * FullPath: modules/projects/veela.css/src/scss/_layers.scss
+ * Reason for changes: One cascade-order registry; include view-transitions before overrides.
  */
 
+/*
+ * INVARIANT: legacy layer names remain in the registry while their consumers
+ * migrate. New component rules use the `ux-*` names; no host may establish a
+ * competing layer order by importing a second prelude.
+ */
 @layer
     ux-normalize,
+    tokens,
     ux-tokens,
+    base,
     ux-base,
+    layout,
     ux-layout,
+    shells,
+    shell,
+    views,
+    view,
+    viewer,
+    components,
     ux-components,
+    ux-layer,
+    ui-icon,
+    ui-icon-reset,
+    ux-file-manager,
+    ux-file-manager-content,
+    utilities,
     ux-utilities,
+    theme,
     ux-theme,
+    markdown,
+    essentials,
+    print,
+    print-breaks,
+    view-transitions,
+    overrides,
     ux-overrides;

package/src/scss/advanced/animation/_motion.scss

@@ -135,7 +135,10 @@ $md3-transition-aliases: (
 
 @mixin _export-duration-vars($durations) {
     @each $token, $value in $durations {
-        --duration-#{$token}: #{$value};
+        --md3-duration-#{$token}: #{$value};
+        @if $token != fast and $token != normal and $token != slow {
+            --duration-#{$token}: #{$value};
+        }
     }
 }
 
@@ -153,11 +156,14 @@ $md3-transition-aliases: (
 
 @mixin _export-transition-vars($definitions, $aliases) {
     @each $name, $config in $definitions {
-        --transition-#{$name}: #{_transition-definition($config)};
+        --md3-transition-#{$name}: #{_transition-definition($config)};
+        @if $name != fast and $name != normal and $name != slow {
+            --transition-#{$name}: #{_transition-definition($config)};
+        }
     }
 
     @each $alias, $target in $aliases {
-        @if map.has-key($definitions, $target) {
+        @if $alias != fast and $alias != normal and $alias != slow and map.has-key($definitions, $target) {
             --transition-#{$alias}: var(--transition-#{$target});
         }
     }

package/src/scss/advanced/design/_design-tokens.scss

@@ -36,9 +36,9 @@ $state-opacity-map: (
 // ============================================================================
 // Used for transitions on interactive elements
 
-$duration-fast: 140ms !default;
-$duration-normal: 160ms !default;
-$duration-slow: 200ms !default;
+$duration-fast: var(--duration-fast, 140ms) !default;
+$duration-normal: var(--duration-normal, 220ms) !default;
+$duration-slow: var(--duration-slow, 360ms) !default;
 
 $motion-timing-map: (
     fast: $duration-fast,

package/src/scss/advanced/font/_typography.scss

@@ -428,32 +428,33 @@ $font-weight-extrabold: md3-font-weight-value("extrabold");
 
     @each $alias, $definition in $sizes {
         $value: md3-resolve-type-value($definition, size);
-        --font-size-#{$alias}: #{$value};
-    }
-
-    --font-size: var(--font-size-base);
-
-    @each $alias in map.keys($sizes) {
-        --font-#{$alias}: var(--font-size-#{$alias});
+        --md3-font-size-#{$alias}: #{$value};
+        @if $alias != xs and $alias != sm and $alias != base and $alias != md and $alias != lg and $alias != xl and $alias != 2xl {
+            --font-size-#{$alias}: #{$value};
+            --font-#{$alias}: var(--font-size-#{$alias});
+        }
     }
 
     @each $alias, $definition in $weights {
         $value: md3-font-weight-value($definition);
-        --font-weight-#{$alias}: #{$value};
+        @if $alias != normal and $alias != medium and $alias != semibold and $alias != bold {
+            --font-weight-#{$alias}: #{$value};
+        }
     }
 
     --font-weight: var(--font-weight-normal);
 
     @each $alias, $stack in $families {
-        --font-family-#{$alias}: #{md3-font-family-value($stack)};
+        --md3-font-family-#{$alias}: #{md3-font-family-value($stack)};
+        @if $alias != base and $alias != sans and $alias != mono {
+            --font-family-#{$alias}: #{md3-font-family-value($stack)};
+        }
     }
 
-    --font-family-base: #{md3-font-family-value("base")};
-    --font-family-mono: #{md3-font-family-value("mono")};
-    --font-family: var(--font-family-base);
-
     @each $alias, $value in $leadings {
-        --leading-#{$alias}: #{$value};
+        @if $alias != tight and $alias != normal and $alias != relaxed {
+            --leading-#{$alias}: #{$value};
+        }
     }
 
     @if meta.type-of($extra-overrides) == "map" {

package/src/scss/advanced/layout/_normalize.scss

@@ -512,8 +512,9 @@
         /* -------------------------------------------------------------------------- */
 
         :where(canvas):is([is="ui-canvas"]) {
-            position: absolute;
+            position: fixed;
             inset: 0;
+            inset-block-end: auto;
             pointer-events: none;
             z-index: 0;
             padding: 0px;
@@ -521,10 +522,10 @@
             border: none 0px transparent;
             outline: none 0px transparent;
 
-            inline-size: stretch;
-            block-size: stretch;
-            max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
-            max-block-size: min(100%, min(100cqb, 100dvb)) !important;
+            max-inline-size: max(100%, min(100cqi, 100lvi)) !important;
+            max-block-size: max(100%, min(100cqb, 100lvb)) !important;
+            max-inline-size: max(100%, min(100cqi, 100lvi)) !important;
+            max-block-size: max(100%, min(100cqb, 100lvb)) !important;
             box-sizing: border-box !important;
             min-inline-size: 0px;
             min-block-size: 0px;

package/src/scss/advanced/md3/_md3.scss

@@ -89,13 +89,7 @@
 // Export layout vars mixin
 @mixin md3-export-density-vars() {
     @each $token, $value in $md3-space-scale {
-        --space-#{$token}: #{$value};
-        --gap-#{$token}: #{$value};
-        --padding-#{$token}: #{$value};
-    }
-
-    @each $token, $value in $md3-shape-scale {
-        --radius-#{$token}: #{$value};
+        --md3-space-#{$token}: #{$value};
     }
 }
 
@@ -155,33 +149,6 @@
     // Spacing tokens
     @each $token, $value in $md3-space-scale {
         --space-#{$token}-base: #{$value};
-        --space-#{$token}: var(--space-#{$token}-base);
-        --gap-#{$token}: var(--space-#{$token});
-        --padding-#{$token}: var(--space-#{$token});
-    }
-
-
-    //
-    @each $alias, $token in $md3-radius-aliases {
-        --radius-#{$alias}: var(--radius-#{$token}, #{md3-radius($token)});
-    }
-
-    // Radius tokens
-    @each $token, $value in $md3-radius-scale {
-        --radius-#{$token}: #{$value};
-    }
-
-    --radius-full: #{md3-radius(full)};
-
-
-    //
-    @each $alias, $token in $md3-shape-aliases {
-        --shape-#{$alias}: var(--shape-#{$token}, #{md3-shape($token)});
-    }
-
-    // Shape tokens
-    @each $token, $value in $md3-shape-scale {
-        --shape-#{$token}: #{$value};
     }
 
 
@@ -198,18 +165,6 @@
     --avatar-size: #{md3-avatar-size(md)};
     --avatar-size-lg: #{md3-avatar-size(lg)};
 
-    // Typography scale
-    --text-xs: clamp(calc(0.7rem * var(--font-scale)), 0.3cqi + 0.6rem, calc(0.75rem * var(--font-scale)));
-    --text-sm: clamp(calc(0.75rem * var(--font-scale)), 0.4cqi + 0.65rem, calc(0.85rem * var(--font-scale)));
-    --text-base: clamp(calc(0.8rem * var(--font-scale)), 0.5cqi + 0.7rem, calc(0.95rem * var(--font-scale)));
-    --text-lg: clamp(calc(0.9rem * var(--font-scale)), 0.6cqi + 0.8rem, calc(1.1rem * var(--font-scale)));
-    --text-xl: clamp(calc(1rem * var(--font-scale)), 0.8cqi + 0.9rem, calc(1.3rem * var(--font-scale)));
-
-    // Motion tokens
-    --transition-fast: 140ms ease;
-    --transition-normal: 160ms ease;
-    --transition-slow: 200ms ease;
-
     --text-opacity-disabled: #{md3-state(disabled)};
 }
 
@@ -390,13 +345,7 @@ $is-windowed: "@container u2-windowed #{$is-not-wide}";
 // Export layout vars mixin
 @mixin md3-export-density-vars() {
     @each $token, $value in $md3-space-scale {
-        --space-#{$token}: #{$value};
-        --gap-#{$token}: #{$value};
-        --padding-#{$token}: #{$value};
-    }
-
-    @each $token, $value in $md3-shape-scale {
-        --radius-#{$token}: #{$value};
+        --md3-space-#{$token}: #{$value};
     }
 }
 
@@ -456,33 +405,6 @@ $is-windowed: "@container u2-windowed #{$is-not-wide}";
     // Spacing tokens
     @each $token, $value in $md3-space-scale {
         --space-#{$token}-base: #{$value};
-        --space-#{$token}: var(--space-#{$token}-base);
-        --gap-#{$token}: var(--space-#{$token});
-        --padding-#{$token}: var(--space-#{$token});
-    }
-
-
-    //
-    @each $alias, $token in $md3-radius-aliases {
-        --radius-#{$alias}: var(--radius-#{$token}, #{md3-radius($token)});
-    }
-
-    // Radius tokens
-    @each $token, $value in $md3-radius-scale {
-        --radius-#{$token}: #{$value};
-    }
-
-    --radius-full: #{md3-radius(full)};
-
-
-    //
-    @each $alias, $token in $md3-shape-aliases {
-        --shape-#{$alias}: var(--shape-#{$token}, #{md3-shape($token)});
-    }
-
-    // Shape tokens
-    @each $token, $value in $md3-shape-scale {
-        --shape-#{$token}: #{$value};
     }
 
 
@@ -499,18 +421,6 @@ $is-windowed: "@container u2-windowed #{$is-not-wide}";
     --avatar-size: #{md3-avatar-size(md)};
     --avatar-size-lg: #{md3-avatar-size(lg)};
 
-    // Typography scale
-    --text-xs: clamp(calc(0.7rem * var(--font-scale)), 0.3cqi + 0.6rem, calc(0.75rem * var(--font-scale)));
-    --text-sm: clamp(calc(0.75rem * var(--font-scale)), 0.4cqi + 0.65rem, calc(0.85rem * var(--font-scale)));
-    --text-base: clamp(calc(0.8rem * var(--font-scale)), 0.5cqi + 0.7rem, calc(0.95rem * var(--font-scale)));
-    --text-lg: clamp(calc(0.9rem * var(--font-scale)), 0.6cqi + 0.8rem, calc(1.1rem * var(--font-scale)));
-    --text-xl: clamp(calc(1rem * var(--font-scale)), 0.8cqi + 0.9rem, calc(1.3rem * var(--font-scale)));
-
-    // Motion tokens
-    --transition-fast: 140ms ease;
-    --transition-normal: 160ms ease;
-    --transition-slow: 200ms ease;
-
     --text-opacity-disabled: #{md3-state(disabled)};
 }
 

package/src/scss/advanced/misc/_mixins.scss

@@ -113,7 +113,7 @@
     display: inline-flex;
     align-items: center;
     gap: $gap;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 
 // Input helpers

package/src/scss/advanced/theme/_shared.scss

@@ -202,7 +202,7 @@
  * @param $radius [var(--radius-sm, 8px)] - border radius
  * @usage: @include focus-ring(var(--color-primary));
  */
-@mixin focus-ring($color: var(--color-primary, #0066cc), $radius: var(--radius-sm, 8px)) {
+@mixin focus-ring($color: var(--color-primary, #5a7fff), $radius: var(--radius-sm)) {
     outline: none;
     box-shadow: 0 0 0 3px color-mix(in oklab, $color 35%, transparent);
     border-radius: $radius;

package/src/scss/basic/design/_shapes.scss

@@ -11,9 +11,9 @@
         display: flex;
         place-content: center;
         place-items: center;
-        aspect-ratio: 1 / 1;
+        aspect-ratio: 1 / 1 !important;
         inline-size: stretch;
-        block-size: stretch;
+        block-size: fit-content;
         padding: 1.25rem;
 
         // Containment & Overflow
@@ -36,7 +36,11 @@
         // Nested elements
         & span, & ui-icon {
             inline-size: stretch;
-            block-size: stretch;
+            block-size: fit-content;
+        }
+
+        & ui-icon {
+            aspect-ratio: 1 / 1 !important;
         }
     }
 
@@ -61,7 +65,7 @@
         &[data-shape] {
             contain: strict;
             overflow: hidden;
-            aspect-ratio: 1 / 1;
+            aspect-ratio: 1 / 1 !important;
             pointer-events: auto;
             touch-action: none;
         }

package/src/scss/basic/misc/_core-layout.scss

@@ -49,15 +49,15 @@
 
             //
             min-inline-size: min(100cqi, 100dvi);
-            min-block-size: min(100cqb, 100dvb);
+            min-block-size: min(100cqb, var(--lv-height, 100lvb));
 
             //
             inline-size: stretch;
-            block-size: stretch;
+            block-size: var(--lv-height, 100lvb);
 
             //
             max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
-            max-block-size: min(100%, min(100cqb, 100dvb)) !important;
+            max-block-size: min(100%, min(100cqb, var(--lv-height, 100lvb))) !important;
 
             //
             place-content: start;
@@ -116,7 +116,7 @@
 
                 //
                 max-inline-size: min(100%, min(100cqi, 100dvi));
-                max-block-size: min(100%, min(100cqb, 100dvb));
+                max-block-size: min(100%, min(100cqb, var(--lv-height, 100lvb)));
             }
 
             //
@@ -126,13 +126,13 @@
                 min-inline-size: 0px;
                 min-block-size: 0px;
                 max-inline-size: min(100%, min(100cqi, 100dvi));
-                max-block-size: min(100%, min(100cqb, 100dvb));
+                max-block-size: min(100%, min(100cqb, var(--lv-height, 100lvb)));
             }
 
             //
             & > :where(*) {
                 max-inline-size: min(100%, min(100cqi, 100dvi));
-                max-block-size: min(100%, min(100cqb, 100dvb));
+                max-block-size: min(100%, min(100cqb, var(--lv-height, 100lvb)));
             }
         }
         
@@ -184,15 +184,15 @@
 
             //
             min-inline-size: min(100cqi, 100dvi);
-            min-block-size: min(100cqb, 100dvb);
+            min-block-size: min(100cqb, var(--lv-height, 100lvb));
 
             //
             inline-size: stretch;
-            block-size: stretch;
+            block-size: var(--lv-height, 100lvb);
 
             //
             max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
-            max-block-size: min(100%, min(100cqb, 100dvb)) !important;
+            max-block-size: min(100%, min(100cqb, var(--lv-height, 100lvb))) !important;
 
             //
             place-content: start;
@@ -248,7 +248,7 @@
 
                 //
                 max-inline-size: min(100%, min(100cqi, 100dvi));
-                max-block-size: min(100%, min(100cqb, 100dvb));
+                max-block-size: min(100%, min(100cqb, var(--lv-height, 100lvb)));
             }
 
             //
@@ -258,13 +258,13 @@
                 min-inline-size: 0px;
                 min-block-size: 0px;
                 max-inline-size: min(100%, min(100cqi, 100dvi));
-                max-block-size: min(100%, min(100cqb, 100dvb));
+                max-block-size: min(100%, min(100cqb, var(--lv-height, 100lvb)));
             }
 
             //
             & > :where(*) {
                 max-inline-size: min(100%, min(100cqi, 100dvi));
-                max-block-size: min(100%, min(100cqb, 100dvb));
+                max-block-size: min(100%, min(100cqb, var(--lv-height, 100lvb)));
             }
         }
     };

package/src/scss/basic/misc/_layout.scss

@@ -895,18 +895,18 @@ $is-windowed: "@container u2-windowed #{$is-not-wide}";
 @mixin surface($tone: 0) {
     // Fallback surface colors using CSS variables
     // Can be overridden by any theming system
-    background-color: var(--fl-surface, #fff);
-    color: var(--fl-on-surface, #111);
+    background-color: var(--color-surface, var(--fl-surface, #fff));
+    color: var(--color-on-surface, var(--fl-on-surface, #111));
 }
 
 @mixin primary-surface {
-    background-color: var(--fl-primary, #1a73e8);
-    color: var(--fl-on-primary, #fff);
+    background-color: var(--color-primary, var(--fl-primary, #5a7fff));
+    color: var(--color-on-primary, var(--fl-on-primary, #fff));
 }
 
 @mixin secondary-surface {
-    background-color: var(--fl-secondary, #5f6368);
-    color: var(--fl-on-secondary, #fff);
+    background-color: var(--color-secondary, var(--fl-secondary, #5f6368));
+    color: var(--color-on-secondary, var(--fl-on-secondary, #fff));
 }
 
 // Border mixins - veela-independent fallbacks

package/src/scss/basic/misc/_mixins.scss

@@ -113,7 +113,7 @@
     display: inline-flex;
     align-items: center;
     gap: $gap;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 
 // Input helpers

package/src/scss/basic/misc/_normalize.scss

@@ -5,6 +5,7 @@
  * Reason for changes: vl-basic palette via --u2-color-mod (token names kept).
  */
 @use "./shared" as *;
+@use "layers";
 
 // COMPAT: vl-basic may load without veela _tokens.scss — keep function local.
 @#{"function --u2-color-mod(--base-color <color>, --index <number> : 550) returns <color>"} {
@@ -26,8 +27,6 @@
     );
 }
 
-@layer tokens, base, layout, utilities, shells, shell, views, view, viewer, components, ux-layer, markdown, essentials, print, print-breaks, overrides;
-
 @layer tokens {
     :where(:root, html) {
         color-scheme: light dark;
@@ -41,8 +40,8 @@
         --color-primary: light-dark(#91b6e3, #2e3a64);
         --base-color: var(--color-primary);
         --color-bg: light-dark(
-            --u2-color-mod(var(--base-color), 70),
-            --u2-color-mod(var(--base-color), 940)
+            --u2-color-mod(var(--base-color), 20),
+            --u2-color-mod(var(--base-color), 980)
         );
         --color-text: light-dark(
             --u2-color-mod(var(--base-color), 900),
@@ -148,7 +147,7 @@
             margin: 0;
             padding: 0;
             border: none;
-            min-block-size: min(100dvb, 100cqb);
+            min-block-size: min(var(--lv-height, 100lvb), 100cqb);
             block-size: fit-content;
             background: var(--color-bg);
             color: var(--color-text);
@@ -703,17 +702,18 @@
         }
 
         :where(canvas):is([is="ui-canvas"]) {
-            position: absolute;
+            position: fixed;
             inset: 0;
+            inset-block-end: auto;
             pointer-events: none;
             z-index: 0;
             padding: 0;
             margin: 0;
             border: none;
-            inline-size: stretch;
-            block-size: stretch;
-            max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
-            max-block-size: min(100%, min(100cqb, 100dvb)) !important;
+            max-inline-size: max(100%, min(100cqi, 100lvi)) !important;
+            max-block-size: max(100%, min(100cqb, 100lvb)) !important;
+            max-inline-size: max(100%, min(100cqi, 100lvi)) !important;
+            max-block-size: max(100%, min(100cqb, 100lvb)) !important;
             box-sizing: border-box !important;
             min-inline-size: 0;
             min-block-size: 0;

package/src/scss/basic/misc/_shared.scss

@@ -198,11 +198,11 @@
 
 /**
  * Focus ring without outline (M3-style)
- * @param $color [var(--color-primary, #0066cc)] - focus color
- * @param $radius [var(--radius-sm, 8px)] - border radius
+ * @param $color [var(--color-primary, #5a7fff)] - focus color
+ * @param $radius [var(--radius-sm)] - border radius
  * @usage: @include focus-ring(var(--color-primary));
  */
-@mixin focus-ring($color: var(--color-primary, #0066cc), $radius: var(--radius-sm, 8px)) {
+@mixin focus-ring($color: var(--color-primary, #5a7fff), $radius: var(--radius-sm)) {
     outline: none;
     box-shadow: 0 0 0 3px color-mix(in oklab, $color 35%, transparent);
     border-radius: $radius;

package/src/scss/core/misc/_color-properties.scss

@@ -1,8 +1,8 @@
 /*
  * Filename: _color-properties.scss
  * FullPath: modules/projects/veela.css/src/scss/core/misc/_color-properties.scss
- * Change date and time: 09.05.00_02.08.2026
- * Reason for changes: Only seed hues as @property — semantic light-dark() must stay unregistered.
+ * Change date and time: 15.50.00_22.08.2026
+ * Reason for changes: Seed initial-value is the desktop cyan-blue fallback (#5a9ec8).
  */
 
 /*
@@ -18,13 +18,13 @@
 @property --color-primary {
     syntax: "<color>";
     inherits: true;
-    initial-value: #5a7fff;
+    initial-value: #5a9ec8;
 }
 
 @property --base-color {
     syntax: "<color>";
     inherits: true;
-    initial-value: #5a7fff;
+    initial-value: #5a9ec8;
 }
 
 @property --color-secondary {

package/src/scss/core/misc/_functions.scss

@@ -117,7 +117,7 @@ $design-system: (
         )
     ),
     "colors": (
-        "primary": (#5a7fff, #7ca7ff),
+        "primary": (#4e8fad, #8ec4d4),
         "secondary": (#6b7280, #94a3b8),
         "accent": (#64748b, #94a3b8),
         "success": (#10b981, #34d399),