@fest-lib/veela 0.1.19 → 1.0.1

package/src/scss/ui/_toolbars.scss

@@ -0,0 +1,167 @@
+// Toolbar Components - Refactored and Optimized
+// Unified with design system variables and mixins
+
+@use "../basic/layout" as layout;
+@use "../core/mixins" as core;
+@use "./buttons" as button;
+@use "./chrome-mixins" as ui;
+
+//
+@mixin toolbar {
+
+    .toolbar {
+        background-color: transparent;
+        display: flex;
+        flex-direction: column;
+        block-size: stretch;
+        inline-size: stretch;
+        max-inline-size: stretch;
+        grid-row: toolbar;
+        box-shadow: none;
+        padding: 0px;
+        max-block-size: min(3rem, 100%);;
+        min-block-size: stretch;
+    }
+
+    .view-toolbar {
+        background: transparent;
+        position: sticky;
+        inset-block-start: 0;
+        z-index: 10;
+        padding: 0px;
+
+        justify-content: flex-start;
+        place-content: center;
+        place-items: center;
+        place-self: center;
+        pointer-events: none;
+        inline-size: stretch;
+        max-inline-size: stretch;
+        max-block-size: min(3rem, 100%);
+        min-block-size: stretch;
+
+        box-sizing: border-box;
+        box-shadow: none;
+
+        //
+        @include ui.inline-toolbar(var(--gap-xs));
+        @include ui.tonal-surface(surface, var(--surface-opacity-subtle), var(--radius-lg), null, 1);
+        @include ui.backdrop-blur("subtle");
+        @include layout.container-clamped(stretch, max-content);
+
+        //
+        & { min-block-size: 0px; block-size: stretch; max-block-size: min(3rem, 100%); }
+        & { min-inline-size: 0px; inline-size: stretch; max-inline-size: stretch; }
+        & {
+            margin: 0px;
+            margin-inline: 0px;
+            box-shadow: none;
+            background-color: transparent;
+            padding: 0px;
+            padding-inline: 0px;
+            padding-block: 0px;
+        }
+
+        //
+        &:empty {
+            display: none;
+        }
+
+        .button-set {
+            @include ui.inline-toolbar(var(--gap-md));
+            @include ui.tonal-surface(surface-container, var(--surface-opacity-subtle, 0.00), var(--radius-lg), 0px);
+            @include layout.container-clamped(stretch, stretch);
+
+            //
+            flex-wrap: nowrap;
+            padding: 0px;
+            padding-inline: 0.25rem;
+            padding-block: 0.25rem;
+            inline-size: stretch;
+            block-size: stretch;
+
+            //
+            &:empty { display: none; }
+            & { min-block-size: 3rem; block-size: stretch; max-block-size: 3rem; }
+            & { min-inline-size: 0px; inline-size: stretch; max-inline-size: stretch; }
+
+            //
+            button {
+                max-block-size: stretch;
+                border-radius: var(--radius-full);
+                padding: 0px;
+                pointer-events: auto;
+                touch-action: none;
+
+                //
+                @include ui.tonal-surface(surface-container, calc(var(--surface-opacity-subtle, 0.00) + 0.02), var(--radius-lg), 0px);
+                @include ui.inline-toolbar(var(--gap-sm));
+                @include button.toolbar-button;
+                @include core.flex-center;
+
+                //
+                & {
+                    min-inline-size: 2.5rem;
+                    min-block-size: 2.75rem;
+                    inline-size: max-content;
+                    block-size: stretch;
+                    touch-action: manipulation;
+                    flex-direction: row;
+                    flex-wrap: nowrap;
+                    max-inline-size: stretch;
+                    padding: 0.5rem;
+                    padding-block: 0px;
+                    padding-inline: 0.5rem;
+                    max-block-size: stretch;
+                    flex-shrink: 0;
+                }
+
+                //
+                ui-icon {
+                    padding: 0rem;
+                    --icon-size: clamp(1.25rem, 5.5vmin, 1.75rem);
+                    font-size: var(--icon-size);
+                    block-size: auto;
+                    inline-size: auto;
+                    min-inline-size: 1.25rem;
+                    min-block-size: 1.25rem;
+                    max-block-size: none;
+                }
+
+                //
+                span {
+                    display: block;
+                    color: color-mix(in oklch, var(--on-surface, currentColor) var(--text-tint-primary, 92%), transparent);
+                    padding-inline-end: 0.25rem;
+                    max-inline-size: stretch;
+                    inline-size: fit-content;
+                    min-inline-size: fit-content;
+                    padding-block: 0px;
+
+                    @include ui.text-body("body-small");
+                }
+            }
+        }
+
+        // Mobile optimizations
+        @include core.breakpoint("md") {
+            justify-content: center;
+
+            .button-set {
+                justify-content: center;
+                inline-size: stretch;
+            }
+        }
+
+        //
+        @container (inline-size >= 60rem) {
+            button span { display: none !important; }
+        }
+
+        //
+        @container (inline-size <= 600px) {
+            button span { display: none !important; };
+        }
+    }
+
+}

package/src/scss/ui/_typography.scss

@@ -0,0 +1,11 @@
+@function md3-type($role, $token: size) {
+    @return var(--type-#{$role}-#{$token}, inherit);
+}
+
+@mixin type($role) {
+    font: var(--type-#{$role}, inherit);
+}
+
+@mixin text-wrap() {
+    overflow-wrap: anywhere;
+}

package/src/scss/ui/_utils.scss

@@ -0,0 +1,8 @@
+@mixin visually-hidden() {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}

package/src/scss/ui/_viewport.scss

@@ -0,0 +1,470 @@
+@use "../core/functions" as lg;
+@use "sass:list";
+@use "sass:string";
+@use "sass:meta";
+
+//
+// 2D shorthand helpers
+@function v2-suffix($suffix) {
+    @if $suffix == null or $suffix == "" { @return ""; }
+
+    $value: #{$suffix};
+    @if string.slice($value, 1, 1) == "-" {
+        @return string.unquote($value);
+    }
+
+    @return string.unquote("-#{$value}");
+}
+
+@mixin v2-pair($token, $first-value, $second-value, $axes: ("x", "y")) {
+    $first-suffix: v2-suffix(list.nth($axes, 1));
+    $second-suffix: v2-suffix(list.nth($axes, 2));
+
+    --#{$token}#{$first-suffix}: #{$first-value};
+    --#{$token}#{$second-suffix}: #{$second-value};
+}
+
+@function v2-size($axis, $primary, $secondary, $orient: var(--orient, 0)) {
+    @return string.unquote("--get-oriented-size(#{$orient}, #{$primary}, #{$secondary}, #{$axis})");
+}
+
+@function v2-size-num($axis, $primary, $secondary, $orient: var(--orient, 0)) {
+    @return string.unquote("--get-oriented-size-num(#{$orient}, #{$primary}, #{$secondary}, #{$axis})");
+}
+
+@function v2-coord($axis, $first, $second, $size-x, $size-y, $orient: var(--orient, 0)) {
+    @return string.unquote("--get-oriented-coordinate(#{$orient}, #{$first}, #{$second}, #{$size-x}, #{$size-y}, #{$axis})");
+}
+
+@function v2-coord-num($axis, $first, $second, $max-x, $max-y, $orient: var(--orient, 0)) {
+    @return string.unquote("--get-oriented-coord-num(#{$orient}, #{$first}, #{$second}, #{$max-x}, #{$max-y}, #{$axis})");
+}
+
+@function v2-vec($axis, $first, $second, $orient: var(--orient, 0)) {
+    @return string.unquote("--get-oriented-vector(#{$orient}, #{$first}, #{$second}, #{$axis})");
+}
+
+@function v2-pick($value, $index, $fallback: null) {
+    @if meta.type-of($value) != "list" {
+        @return if(
+            sass($index == 1): $value; 
+            else: $fallback;
+        );
+    }
+
+    @if list.length($value) < $index {
+        @return $fallback;
+    }
+
+    @return list.nth($value, $index);
+}
+
+@mixin v2-size-pair($token, $axis-0, $axis-1: $axis-0, $axes: ("x", "y"), $orient: var(--orient, 0)) {
+    $a0-primary: v2-pick($axis-0, 1);
+    $a0-secondary: v2-pick($axis-0, 2);
+    $a1-primary: v2-pick($axis-1, 1, $a0-primary);
+    $a1-secondary: v2-pick($axis-1, 2, $a0-secondary);
+
+    @include v2-pair(
+        $token,
+        v2-size(0, $a0-primary, $a0-secondary, $orient),
+        v2-size(1, $a1-primary, $a1-secondary, $orient),
+        $axes
+    );
+}
+
+@mixin v2-size-num-pair($token, $axis-0, $axis-1: $axis-0, $axes: ("x", "y"), $orient: var(--orient, 0)) {
+    $a0-primary: v2-pick($axis-0, 1);
+    $a0-secondary: v2-pick($axis-0, 2);
+    $a1-primary: v2-pick($axis-1, 1, $a0-primary);
+    $a1-secondary: v2-pick($axis-1, 2, $a0-secondary);
+
+    @include v2-pair(
+        $token,
+        v2-size-num(0, $a0-primary, $a0-secondary, $orient),
+        v2-size-num(1, $a1-primary, $a1-secondary, $orient),
+        $axes
+    );
+}
+
+@mixin v2-coord-pair($token, $axis-0, $axis-1: $axis-0, $axes: ("x", "y"), $orient: var(--orient, 0)) {
+    $a0-first: v2-pick($axis-0, 1);
+    $a0-second: v2-pick($axis-0, 2);
+    $a0-size-x: v2-pick($axis-0, 3);
+    $a0-size-y: v2-pick($axis-0, 4);
+
+    $a1-first: v2-pick($axis-1, 1, $a0-first);
+    $a1-second: v2-pick($axis-1, 2, $a0-second);
+    $a1-size-x: v2-pick($axis-1, 3, $a0-size-x);
+    $a1-size-y: v2-pick($axis-1, 4, $a0-size-y);
+
+    @include v2-pair(
+        $token,
+        v2-coord(0, $a0-first, $a0-second, $a0-size-x, $a0-size-y, $orient),
+        v2-coord(1, $a1-first, $a1-second, $a1-size-x, $a1-size-y, $orient),
+        $axes
+    );
+}
+
+@mixin v2-coord-num-pair($token, $axis-0, $axis-1: $axis-0, $axes: ("x", "y"), $orient: var(--orient, 0)) {
+    $a0-first: v2-pick($axis-0, 1);
+    $a0-second: v2-pick($axis-0, 2);
+    $a0-max-x: v2-pick($axis-0, 3);
+    $a0-max-y: v2-pick($axis-0, 4);
+
+    $a1-first: v2-pick($axis-1, 1, $a0-first);
+    $a1-second: v2-pick($axis-1, 2, $a0-second);
+    $a1-max-x: v2-pick($axis-1, 3, $a0-max-x);
+    $a1-max-y: v2-pick($axis-1, 4, $a0-max-y);
+
+    @include v2-pair(
+        $token,
+        v2-coord-num(0, $a0-first, $a0-second, $a0-max-x, $a0-max-y, $orient),
+        v2-coord-num(1, $a1-first, $a1-second, $a1-max-x, $a1-max-y, $orient),
+        $axes
+    );
+}
+
+@mixin v2-vec-pair($token, $axis-0, $axis-1: $axis-0, $axes: ("x", "y"), $orient: var(--orient, 0)) {
+    $a0-first: v2-pick($axis-0, 1);
+    $a0-second: v2-pick($axis-0, 2);
+    $a1-first: v2-pick($axis-1, 1, $a0-first);
+    $a1-second: v2-pick($axis-1, 2, $a0-second);
+
+    @include v2-pair(
+        $token,
+        v2-vec(0, $a0-first, $a0-second, $orient),
+        v2-vec(1, $a1-first, $a1-second, $orient),
+        $axes
+    );
+}
+
+@mixin oriented($property, $portrait, $landscape) {
+    & { #{$property}: #{$portrait}; }
+    @media (orientation: portrait) { #{$property}: #{$portrait}; }
+    @media (orientation: landscape) { #{$property}: #{$landscape}; }
+}
+
+
+//
+@function inverse-orient($orient) {
+    @return mod(calc(4 - $orient), 4);
+}
+
+
+//
+@mixin compute_os_conditions {
+    & {
+        --in-orient-base: round(nearest, var(--orient, 0), 1);
+        --in-rev-cond-x: clamp(0, calc(var(--in-orient-base, 0) - 1), 1);
+        --in-rev-cond-y: clamp(0, calc((1 - abs(calc(var(--in-orient-base, 0) - 1.5))) * 2), 1);
+        --in-swap-cond: #{css-rem(var(--orient, 0), 2)};
+        --in-rev-vx: calc(var(--in-rev-cond-x, 1) * -2 + 1);
+        --in-rev-vy: calc(var(--in-rev-cond-y, 1) * -2 + 1);
+    }
+}
+
+
+
+@mixin compute_cs_size_to_os {
+    $orient: #{inverse-orient(var(--orient, 0))};
+
+    & {
+        @include v2-size-pair(
+            "os-size",
+            (var(--cs-size-x, 100cqi), var(--cs-size-y, 100cqb)),
+            (var(--cs-size-x, 100cqb), var(--cs-size-y, 100cqi)),
+            $orient: $orient
+        );
+
+        @include v2-size-pair(
+            "os-self-size",
+            (var(--cs-self-size-x, 100%), var(--cs-self-size-y, 100%)),
+            $orient: $orient
+        );
+    }
+}
+
+@mixin compute_from_cs_to_os {
+    $orient: #{inverse-orient(var(--orient, 0))};
+
+    & {
+        @include v2-coord-pair(
+            "os-inset",
+            (var(--cs-inset-x, 0px), var(--cs-inset-y, 0px), var(--cs-size-x, 100cqi), var(--cs-size-y, 100cqb)),
+            $orient: $orient
+        );
+
+        @include v2-vec-pair(
+            "os-drag",
+            (var(--cs-drag-x, 0px), var(--cs-drag-y, 0px)),
+            $orient: $orient
+        );
+    }
+}
+
+
+
+@mixin compute_os_size_to_cs {
+    $orient: var(--orient, 0);
+
+    & {
+        @include v2-size-pair(
+            "cs-size",
+            (var(--os-size-x, 100cqb), var(--os-size-y, 100cqi)),
+            (var(--os-size-x, 100cqi), var(--os-size-y, 100cqb)),
+            $orient: $orient
+        );
+
+        @include v2-size-pair(
+            "cs-self-size",
+            (var(--os-self-size-x, 100%), var(--os-self-size-y, 100%)),
+            $orient: $orient
+        );
+    }
+}
+
+@mixin compute_from_os_to_cs {
+    $orient: var(--orient, 0);
+
+    & {
+        @include v2-coord-pair(
+            "cs-inset",
+            (var(--os-inset-x, 0px), var(--os-inset-y, 0px), var(--os-size-x, 100cqi), var(--os-size-y, 100cqb)),
+            $orient: $orient
+        );
+
+        @include v2-vec-pair(
+            "cs-drag",
+            (var(--os-drag-x, 0px), var(--os-drag-y, 0px)),
+            $orient: $orient
+        );
+    }
+}
+
+
+@mixin portrait-size {
+    --cqi: 100cqmin;
+    --cqb: 100cqmax;
+}
+
+@mixin landscape-size {
+    --cqi: 100cqmax;
+    --cqb: 100cqmin;
+}
+
+@mixin init-os-size-by-native {
+    @include v2-pair("os-size", var(--cqi, 100cqi), var(--cqb, 100cqb));
+}
+
+@mixin init-cs-size {
+    @include v2-pair("cs-size", 100cqi, 100cqb);
+}
+
+@mixin centered-self($transforms: null) {
+    transform-origin: 0% 0%;
+    transform:
+        #{$transforms}
+        scale3d(var(--scale, 1), var(--scale, 1), var(--scale, 1))
+        #{perfect-translate(calc(var(--translate-x, 0px) - 50%), calc(var(--translate-y, 0px) - 50%))};
+    place-self: center;
+}
+
+@mixin centered-with-offset {
+    $translate: #{perfect-translate(var(--cs-drag-x, 0px), var(--cs-drag-y, 0px))};
+    @include centered-self($translate);
+}
+
+@mixin use-inset {
+    inset: var(--cs-inset-y, 0px) auto auto var(--cs-inset-x, 0px);
+}
+
+//
+@mixin use_dvp {
+    & { --avi: 100dvmin; --avb: 100dvmax; };
+    & {
+        --vp-i-size: var(--avi, 100dvmin);
+        --vp-b-size: var(--avb, 100dvmax);
+    }
+}
+
+//
+@mixin use_lvp {
+    & { --avi: 100lvmin; --avb: 100lvmax; };
+    & {
+        --vp-i-size: var(--avi, 100lvmin);
+        --vp-b-size: var(--avb, 100lvmax);
+    }
+}
+
+
+//
+@mixin when-fullscreen($selector: &) {
+    @media (display-mode: fullscreen) { @content; }
+    @at-root :fullscreen #{$selector} { @content; }
+}
+
+//
+@mixin vp-vars {
+    @include use_dvp();
+    @include when-fullscreen() {
+        @include use_lvp();
+        & {
+            --vp-i-size: min(var(--avail-width, 100dvmin), 100dvmin);
+            --vp-b-size: min(var(--avail-height, 100dvmax), 100dvmax);
+        }
+    }
+};
+
+//
+@mixin fit-viewport {
+    @include vp-vars;
+    & {
+        @include oriented(inline-size, var(--vp-i-size, 100lvi), var(--vp-b-size, 100lvb));
+        @include oriented(block-size, var(--vp-b-size, 100lvb), var(--vp-i-size, 100lvi));
+        @include oriented(max-inline-size, var(--vp-i-size, 100lvi), var(--vp-b-size, 100lvb));
+        @include oriented(max-block-size, var(--vp-b-size, 100lvb), var(--vp-i-size, 100lvi));
+    }
+};
+
+//
+@function perfect-translate($x: 0px, $y: 0px) {
+    @return translate3d(round(nearest, #{$x}, calc(1px / var(--pixel-ratio, 1))), round(nearest, #{$y}, calc(1px / var(--pixel-ratio, 1))), 0);
+}
+
+//
+@mixin compute_grid_item_cell() {
+    /* WHY: `v2-coord-num` maps logical `--cell-x`/`--cell-y` into physical `cs-grid-*` using `--orient` from the launcher / `ui-orientbox` host; without inherit, items see initial `0` and placement ignores rotation. */
+    & {
+        --orient: inherit;
+    }
+
+    // hack: use translate diff shifting for correct animation for CSS Grid Layout
+    & { // currently, I have no viable solution for correct animation for CSS Grid Layout
+        @include v2-pair(
+            "cs-sw-unit",
+            calc(var(--cs-size-x, 100cqi) / var(--cs-layout-c, 1)),
+            calc(var(--cs-size-y, 100cqb) / var(--cs-layout-r, 1))
+        );
+    }
+
+    & {
+        @include v2-pair(
+            "cs-transition",
+            0px,
+            0px,
+            ("c", "r")
+        );
+    }
+
+    &[data-dragging] {
+        //
+        @include v2-pair(
+            "cs-transition",
+            calc((var(--rv-grid-c, 0) - var(--cs-grid-c, 0)) * var(--cs-sw-unit-x, 1px)),
+            calc((var(--rv-grid-r, 0) - var(--cs-grid-r, 0)) * var(--cs-sw-unit-y, 1px)),
+            ("c", "r")
+        );
+    }
+
+    & {
+        @include v2-pair("p-cell", var(--cell-x), var(--cell-y));
+
+        // CLAMPED GRID
+        --f-col: clamp(1, var(--layout-c, 4), 16);
+        --f-row: clamp(1, var(--layout-r, 8), 16);
+
+        //
+        @include v2-pair(
+            "grid",
+            clamp(0, var(--cell-x), calc(var(--f-col) - 1)),
+            clamp(0, var(--cell-y), calc(var(--f-row) - 1)),
+            ("c", "r")
+        );
+
+        //
+        @include v2-pair(
+            "p-grid",
+            clamp(0, var(--p-cell-x), calc(var(--f-col) - 1)),
+            clamp(0, var(--p-cell-y), calc(var(--f-row) - 1)),
+            ("c", "r")
+        );
+
+        //
+        @include v2-pair(
+            "fc-cell",
+            clamp(0, var(--cs-grid-c, 0), calc(var(--f-col) - 1)),
+            clamp(0, var(--cs-grid-r, 0), calc(var(--f-row) - 1))
+        );
+
+        //
+        @include v2-pair(
+            "fp-cell",
+            clamp(0, var(--cs-p-grid-c, 0), calc(var(--f-col) - 1)),
+            clamp(0, var(--cs-p-grid-r, 0), calc(var(--f-row) - 1))
+        );
+
+        //
+        @include v2-pair(
+            "dir",
+            calc(var(--cs-grid-c, 0) - var(--cs-p-grid-c, 0)),
+            calc(var(--cs-grid-r, 0) - var(--cs-p-grid-r, 0))
+        );
+    }
+
+    //
+    & { @include v2-pair("rv-grid", var(--cs-grid-c, 1), var(--cs-grid-r, 1), ("c", "r")); }
+    &[data-dragging] { @include v2-pair("rv-grid", var(--cs-p-grid-c, 1), var(--cs-p-grid-r, 1), ("c", "r")); }
+
+    //
+    & {
+        @include v2-pair("os-grid", var(--grid-c, 1), var(--grid-r, 1), ("c", "r"));
+        @include v2-coord-num-pair(
+            "cs-grid",
+            (var(--os-grid-c, 1), var(--os-grid-r, 1), calc(var(--f-col, 1) - 1), calc(var(--f-row, 1) - 1)),
+            $axes: ("c", "r")
+        );
+    }
+
+    //
+    & {
+        @include v2-pair("os-p-grid", var(--p-cell-x, 0), var(--p-cell-y, 0), ("c", "r"));
+        @include v2-coord-num-pair(
+            "cs-p-grid",
+            (var(--os-p-grid-c, 0), var(--os-p-grid-r, 0), calc(var(--f-col, 1) - 1), calc(var(--f-row, 1) - 1)),
+            $axes: ("c", "r")
+        );
+    }
+
+    & {
+        @include v2-pair(
+            "ox",
+            calc(var(--os-size-x, 100cqi) / var(--os-layout-c, 1)),
+            calc(var(--os-size-y, 100cqb) / var(--os-layout-r, 1)),
+            ("c-unit", "r-unit")
+        );
+
+        //
+        @include v2-pair(
+            "os-inset",
+            calc((var(--grid-c, 1) + 0.5) * var(--ox-c-unit, 1px)),
+            calc((var(--grid-r, 1) + 0.5) * var(--ox-r-unit, 1px))
+        );
+    }
+}
+
+//
+@mixin compute_orient_grid_layout() {
+    & {
+        @include v2-pair("os-layout", var(--layout-c, 4), var(--layout-r, 8), ("c", "r"));
+        @include v2-size-num-pair(
+            "cs-layout",
+            (var(--os-layout-c, 4), var(--os-layout-r, 8)),
+            $axes: ("c", "r")
+        );
+    }
+}
+
+// :root `--vv-*` is the visual viewport (IME may shrink it).
+// `--lv-width` / `--lv-height` / `--view-height` stay on the layout viewport
+// (fest/dom `getAvailSize()` / `updateVP()` — see `whenAnyScreenChanges`).