@fest-lib/fl-ui 0.1.1

package/src/styles/ui/_modal.scss

@@ -0,0 +1,258 @@
+@use "veela-lib" as *;
+@use "../../library/mixins" as ui;
+
+//
+@mixin modal {
+
+    //
+    .rs-modal-backdrop {
+        position: fixed;
+        inset: 0;
+        display: grid;
+        place-content: center;
+        place-items: center;
+        padding: var(--space-xl);
+        z-index: 9999;
+        line-height: normal;
+        box-sizing: border-box;
+        max-inline-size: min(100cqi, 100dvi);
+        max-block-size: min(100cqb, 100dvb);
+        overflow: hidden;
+        perspective: 1000;
+
+        @include ui.glass-backdrop();
+    }
+
+    //
+    ui-modal, .modal-form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-xs);
+        box-sizing: border-box;
+        overflow: hidden;
+
+        // Responsive sizing
+        inline-size: fit-content;
+        min-inline-size: min(calc(100cqi - 1rem), 40rem);
+        max-inline-size: stretch;
+
+        block-size: max-content;
+        min-block-size: max(calc(90dvb - 1rem), 20rem);
+        max-block-size: max(95dvb, 50rem);
+
+        line-height: normal;
+        background-color: var(--surface-color);
+        color: var(--on-surface-color);
+        padding: var(--padding-lg);
+        padding-block-end: var(--space-md);
+        border-radius: var(--radius-lg);
+
+        backface-visibility: hidden;
+        transform: translateZ(0px);
+        perspective: 1000;
+        content-visibility: auto;
+        contain: strict;
+
+        // Mobile overrides
+        @media (max-width: 600px) {
+            inline-size: fit-content;
+            min-inline-size: min(calc(100cqi - 1rem), 40rem);
+            max-inline-size: stretch;
+
+            //
+            min-block-size: max(calc(90dvb - 1rem), 20rem);
+            max-block-size: max(95dvb, 50rem);
+            border-radius: var(--radius-lg) var(--radius-lg) 0 0; // If bottom sheet
+            // But generic modal:
+            border-radius: var(--radius-lg);
+            padding: var(--padding-md);
+            margin: 0;
+        }
+
+        //
+        @include ui.tonal-surface(surface-container-low, var(--surface-opacity-subtle), var(--radius-md));
+        @include ui.vstack(var(--space-lg));
+        @include ui.container-inline;
+        @include scrollable("y");
+
+        //
+        &, & :where(button, input, textarea, select) {
+            touch-action: pan-y;
+        }
+
+        //
+        &, & :where(*) { box-sizing: border-box; touch-action: pan-y; }
+        &, &:focus-visible, &:focus { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; pointer-events: auto; touch-action: pan-y; }
+
+        & {
+            contain: strict;
+            content-visibility: auto;
+        }
+
+        //
+        .modal-title {
+            margin: 0;
+            line-height: 1.2;
+            place-content: center;
+            place-items: center;
+            text-align: center;
+
+            //
+            justify-content: safe center;
+            justify-items: safe center;
+
+            //
+            inline-size: stretch;
+            min-inline-size: 0px;
+
+            //
+            @include ui.text-heading("headline-small", center);
+        }
+
+        //
+        .modal-description {
+            margin: 0;
+            background: transparent;
+            place-content: center;
+            place-items: center;
+            text-align: center;
+
+            //
+            justify-content: safe center;
+            justify-items: safe center;
+
+            //
+            inline-size: stretch;
+            min-inline-size: 0px;
+
+            //
+            @include ui.text-body("body-medium");
+        }
+
+        //
+        .modal-section {
+            @include ui.section-stack(var(--space-sm));
+
+            //
+            padding-block: var(--space-sm);
+            background: transparent;
+            overflow: visible;
+            block-size: max-content;
+
+            //
+            inline-size: stretch;
+            min-inline-size: 0px;
+
+            //
+            grid-template-columns: minmax(0px, 1fr);
+            place-content: center;
+            place-items: center;
+
+            //
+            &:last-of-type {
+                border-block-end: none;
+            }
+
+            //
+            .modal-section-title {
+                margin: 0;
+                place-content: center;
+                place-items: center;
+                text-align: center;
+
+                //
+                inline-size: stretch;
+                min-inline-size: 0px;
+
+                //
+                justify-content: safe center;
+                justify-items: safe center;
+
+                //
+                @include ui.text-label("title-small", true);
+            }
+
+            //
+            .modal-section-fields {
+                @include ui.field-stack(var(--space-sm));
+            }
+        }
+
+        //
+        .modal-actions {
+            @include ui.inline-toolbar(var(--space-md));
+            justify-content: space-between;
+            inline-size: stretch;
+            min-inline-size: 0px;
+            overflow: visible;
+            background: transparent;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+
+            //
+            .modal-actions-right {
+                @include ui.inline-toolbar(var(--space-sm));
+            }
+        }
+
+        //
+        .modal-fields {
+            inline-size: stretch;
+            min-inline-size: fit-content;
+            max-inline-size: stretch;
+            padding-inline: var(--space-sm);
+            max-block-size: stretch;
+            block-size: fit-content;
+            overflow-y: auto;
+            overflow-x: hidden;
+            display: grid;
+            pointer-events: auto;
+
+            //
+            grid-template-columns: minmax(0px, 1fr);
+            grid-auto-rows: minmax(0px, max-content);
+
+            //
+            @include ui.field-stack(var(--space-md));
+            @include ui.container-inline;
+            @include ui.scrollbars(6px, var(--surface-opacity-emphasis));
+
+            //
+            text-align: start;
+            justify-content: start;
+            justify-items: start;
+            pointer-events: auto;
+
+            //
+            .contacts-group, .modal-field {
+                display: flex;
+                flex-direction: column;
+                gap: var(--space-sm);
+
+                //
+                place-content: center;
+                place-items: center;
+
+                //
+                align-content: safe center;
+                align-items: safe center;
+
+                //
+                inline-size: stretch;
+                min-inline-size: fit-content;
+                max-inline-size: stretch;
+
+                //
+                pointer-events: auto;
+
+                //
+                label {
+                    text-align: start;
+                    align-content: start;
+                    align-items: start;
+                    align-self: start;
+                }
+            }
+        }
+    }
+}

package/src/styles/ui/_motion.scss

@@ -0,0 +1,3 @@
+@mixin transition($property: all, $transition: var(--transition-base, 160ms ease)) {
+    transition: #{$property} #{$transition};
+}

package/src/styles/ui/_native-host-button-chrome.scss

@@ -0,0 +1,31 @@
+// Shared native `<button>` chrome (host opt-in patch uses this without affecting `.btn` twice).
+@mixin essentials-native-host-button-chrome-base() {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    padding-block: 0px;
+    padding-inline: 0px;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-alt);
+    color: var(--color-fg);
+    border: 1px solid var(--color-border);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+
+    &:hover:not(:disabled) {
+        background: var(--color-border);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}

package/src/styles/ui/_orientation-functions.scss

@@ -0,0 +1,274 @@
+@use "sass:string";
+/* NOTE: `make-func` lives in Veela (not `src/lib`); the old path was invalid. */
+@use "../../../../projects/veela.css/src/scss/core/misc/functions" as func;
+
+//
+@function css-rem($value, $mod) {
+    @return string.unquote("rem(#{$value}, #{$mod})");
+}
+
+//
+@function css-mod($value, $mod) {
+    @return string.unquote("mod(#{$value}, #{$mod})");
+}
+
+
+
+//
+@include func.make-func("@function --get-oriented-size-num(\
+--orient <number>: 0, \
+--osx <number>: 0, \
+--osy <number>: 0, \
+--axis-to-return <number>: 0 \
+) returns <number>") {
+    --go-orient: round(nearest, var(--orient, 0), 1);
+    --go-axis: clamp(0, round(nearest, var(--axis-to-return, 0), 1), 1);
+    --go-axis-inline: calc(1 - var(--go-axis, 0));
+    --go-axis-block: var(--go-axis, 0);
+
+    --go-swap-raw: #{css-mod(var(--go-orient), 2)};
+    --go-swap: clamp(0, round(nearest, var(--go-swap-raw), 1), 1);
+    --go-swap-inline: calc(1 - var(--go-swap, 0));
+
+    --go-primary: var(--osx, 0);
+    --go-secondary: var(--osy, 0);
+
+    --go-inline: calc(
+        var(--go-primary) * var(--go-swap-inline) +
+        var(--go-secondary) * var(--go-swap)
+    );
+    --go-block: calc(
+        var(--go-secondary) * var(--go-swap-inline) +
+        var(--go-primary) * var(--go-swap)
+    );
+
+    result: calc(
+        var(--go-inline) * var(--go-axis-inline) +
+        var(--go-block) * var(--go-axis-block)
+    );
+}
+
+
+
+//
+@include func.make-func("@function --get-oriented-size(\
+--orient <number>: 0, \
+--osx <length-percentage>: 0px, \
+--osy <length-percentage>: 0px, \
+--axis-to-return <number>: 0 \
+) returns <length-percentage>") {
+    --go-orient: mod(round(nearest, var(--orient, 0), 1), 4);
+    --go-axis: clamp(0, round(nearest, var(--axis-to-return, 0), 1), 1);
+    --go-axis-inline: calc(1 - var(--go-axis, 0));
+    --go-axis-block: var(--go-axis, 0);
+
+    --go-swap-raw: #{css-mod(var(--go-orient, 0), 2)};
+    --go-swap: clamp(0, round(nearest, var(--go-swap-raw, 0), 1), 1);
+    --go-swap-inline: calc(1 - var(--go-swap, 0));
+
+    --go-primary: var(--osx, 0px);
+    --go-secondary: var(--osy, 0px);
+
+    --go-inline: calc(var(--go-primary) * var(--go-swap-inline) + var(--go-secondary) * var(--go-swap));
+    --go-block: calc(var(--go-secondary) * var(--go-swap-inline) + var(--go-primary) * var(--go-swap));
+
+    result: calc(
+        var(--go-inline) * var(--go-axis-inline) +
+        var(--go-block) * var(--go-axis-block)
+    );
+}
+
+
+
+//
+@include func.make-func("@function --get-oriented-vector(\
+--orient <number>: 0, \
+--ocx <length-percentage>: 0px, \
+--ocy <length-percentage>: 0px, \
+--axis-to-return <number>: 0 \
+) returns <length-percentage>") {
+    --go-orient: mod(round(nearest, var(--orient, 0), 1), 4);
+    --go-axis: clamp(0, round(nearest, var(--axis-to-return, 0), 1), 1);
+    --go-axis-inline: calc(1 - var(--go-axis, 0));
+    --go-axis-block: var(--go-axis, 0);
+
+    --go-swap-raw: #{css-mod(var(--go-orient, 0), 2)};
+    --go-swap: clamp(0, round(nearest, var(--go-swap-raw, 0), 1), 1);
+    --go-swap-inline: calc(1 - var(--go-swap, 0));
+
+    --go-primary-direct: var(--ocx, 0px);
+    --go-secondary-direct: var(--ocy, 0px);
+
+    --go-inline-direct: calc(
+        var(--go-primary-direct) * var(--go-swap-inline) +
+        var(--go-secondary-direct) * var(--go-swap)
+    );
+    --go-block-direct: calc(
+        var(--go-secondary-direct) * var(--go-swap-inline) +
+        var(--go-primary-direct) * var(--go-swap)
+    );
+
+    //
+    --go-inline-inverted: calc(0px - var(--go-inline-direct));
+    --go-block-inverted: calc(0px - var(--go-block-direct));
+    --go-rev-inline: clamp(0, calc(var(--go-orient) - 1), 1);
+
+    //
+    --go-rev-block: clamp(0, calc((1 - abs(calc(var(--go-orient) - 1.5))) * 2), 1);
+    --go-inline: calc(var(--go-inline-direct) * (1 - var(--go-rev-inline)) + var(--go-inline-inverted) * var(--go-rev-inline));
+    --go-block: calc(var(--go-block-direct) * (1 - var(--go-rev-block)) + var(--go-block-inverted) * var(--go-rev-block));
+
+    //
+    result: calc(
+        var(--go-inline) * var(--go-axis-inline) +
+        var(--go-block) * var(--go-axis-block)
+    );
+}
+
+
+
+//
+@include func.make-func("@function --get-oriented-coord-num(\
+--orient <number>: 0, \
+--ocx <number>: 0, \
+--ocy <number>: 0, \
+--osx <number>: 0, \
+--osy <number>: 0, \
+--axis-to-return <number>: 0 \
+) returns <number>") {
+    --go-orient: mod(round(nearest, var(--orient, 0), 1), 4);
+    --go-axis: clamp(0, round(nearest, var(--axis-to-return, 0), 1), 1);
+    --go-axis-inline: calc(1 - var(--go-axis, 0));
+    --go-axis-block: var(--go-axis, 0);
+
+    --go-swap-raw: #{css-mod(var(--go-orient, 0), 2)};
+    --go-swap: clamp(0, round(nearest, var(--go-swap-raw, 0), 1), 1);
+    --go-swap-inline: calc(1 - var(--go-swap, 0));
+
+    --go-primary-direct: var(--ocx, 0);
+    --go-secondary-direct: var(--ocy, 0);
+    --go-primary-size: var(--osx, 0);
+    --go-secondary-size: var(--osy, 0);
+
+    --go-inline-direct: calc(
+        var(--go-primary-direct) * var(--go-swap-inline) +
+        var(--go-secondary-direct) * var(--go-swap)
+    );
+    --go-block-direct: calc(
+        var(--go-secondary-direct) * var(--go-swap-inline) +
+        var(--go-primary-direct) * var(--go-swap)
+    );
+
+    --go-inline-size: calc(
+        var(--go-primary-size) * var(--go-swap-inline) +
+        var(--go-secondary-size) * var(--go-swap)
+    );
+    --go-block-size: calc(
+        var(--go-secondary-size) * var(--go-swap-inline) +
+        var(--go-primary-size) * var(--go-swap)
+    );
+
+    --go-inline-inverted: calc(
+        var(--go-inline-size, calc(var(--go-inline-direct) + var(--go-inline-direct))) -
+        var(--go-inline-direct)
+    );
+    --go-block-inverted: calc(
+        var(--go-block-size, calc(var(--go-block-direct) + var(--go-block-direct))) -
+        var(--go-block-direct)
+    );
+
+    --go-rev-inline: clamp(0, calc(var(--go-orient) - 1), 1);
+    --go-rev-block: clamp(
+        0,
+        calc((1 - abs(calc(var(--go-orient) - 1.5))) * 2),
+        1
+    );
+
+    --go-inline: calc(
+        var(--go-inline-direct) * (1 - var(--go-rev-inline)) +
+        var(--go-inline-inverted) * var(--go-rev-inline)
+    );
+    --go-block: calc(
+        var(--go-block-direct) * (1 - var(--go-rev-block)) +
+        var(--go-block-inverted) * var(--go-rev-block)
+    );
+
+    result: calc(
+        var(--go-inline) * var(--go-axis-inline) +
+        var(--go-block) * var(--go-axis-block)
+    );
+}
+
+
+
+//
+@include func.make-func("@function --get-oriented-coordinate(\
+--orient <number>: 0, \
+--ocx <length-percentage>: 0px, \
+--ocy <length-percentage>: 0px, \
+--osx <length-percentage>: 0px, \
+--osy <length-percentage>: 0px, \
+--axis-to-return <number>: 0 \
+) returns <length-percentage>") {
+    --go-orient: mod(round(nearest, var(--orient, 0), 1), 4);
+    --go-axis: clamp(0, round(nearest, var(--axis-to-return, 0), 1), 1);
+    --go-axis-inline: calc(1 - var(--go-axis, 0));
+    --go-axis-block: var(--go-axis, 0);
+
+    --go-swap-raw: #{css-mod(var(--go-orient, 0), 2)};
+    --go-swap: clamp(0, round(nearest, var(--go-swap-raw, 0), 1), 1);
+    --go-swap-inline: calc(1 - var(--go-swap, 0));
+
+    --go-primary-direct: var(--ocx, 0px);
+    --go-secondary-direct: var(--ocy, 0px);
+    --go-primary-size: var(--osx, 0px);
+    --go-secondary-size: var(--osy, 0px);
+
+    --go-inline-direct: calc(
+        var(--go-primary-direct) * var(--go-swap-inline) +
+        var(--go-secondary-direct) * var(--go-swap)
+    );
+    --go-block-direct: calc(
+        var(--go-secondary-direct) * var(--go-swap-inline) +
+        var(--go-primary-direct) * var(--go-swap)
+    );
+
+    --go-inline-size: calc(
+        var(--go-primary-size) * var(--go-swap-inline) +
+        var(--go-secondary-size) * var(--go-swap)
+    );
+    --go-block-size: calc(
+        var(--go-secondary-size) * var(--go-swap-inline) +
+        var(--go-primary-size) * var(--go-swap)
+    );
+
+    --go-inline-inverted: calc(
+        var(--go-inline-size, calc(var(--go-inline-direct) + var(--go-inline-direct))) -
+        var(--go-inline-direct)
+    );
+    --go-block-inverted: calc(
+        var(--go-block-size, calc(var(--go-block-direct) + var(--go-block-direct))) -
+        var(--go-block-direct)
+    );
+
+    --go-rev-inline: clamp(0, calc(var(--go-orient) - 1), 1);
+    --go-rev-block: clamp(
+        0,
+        calc((1 - abs(calc(var(--go-orient) - 1.5))) * 2),
+        1
+    );
+
+    --go-inline: calc(
+        var(--go-inline-direct) * (1 - var(--go-rev-inline)) +
+        var(--go-inline-inverted) * var(--go-rev-inline)
+    );
+    --go-block: calc(
+        var(--go-block-direct) * (1 - var(--go-rev-block)) +
+        var(--go-block-inverted) * var(--go-rev-block)
+    );
+
+    result: calc(
+        var(--go-inline) * var(--go-axis-inline) +
+        var(--go-block) * var(--go-axis-block)
+    );
+}

package/src/styles/ui/_orientbox.scss

@@ -0,0 +1,97 @@
+/*
+ * Filename: _orientbox.scss
+ * FullPath: modules/projects/fl.ui/src/styles/ui/_orientbox.scss
+ * Reason for changes: Restore Veela viewport import (typo viewrt→interact/viewport) and fix stray brace after merge mess.
+ */
+@use "../lib/core/interact/viewport" as *;
+
+//
+@layer ux-orientbox {
+
+    //
+    .ui-orientbox {
+        @include init-cs-size;
+        @include compute_os_conditions;
+        @include compute_cs_size_to_os;
+        @include compute_from_os_to_cs;
+
+        //
+        & {
+            --cs-size-x: 100cqi;
+            --cs-size-y: 100cqb;
+
+            //
+            position: relative;
+            container-type: size !important;
+            contain: strict !important;
+            background-color: transparent;
+            inset: 0px;
+
+            //
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+            place-self: start;
+
+            //
+            min-inline-size: 0px;
+            min-block-size: 0px;
+            inline-size: stretch;
+            block-size: stretch;
+            pointer-events: none;
+
+            //
+            zoom: max(var(--zoom, 1), 0.125);
+            font-size: 16px;
+
+            //
+            writing-mode: horizontal-tb !important;
+            direction: ltr !important;
+
+            //
+            // Cap by dynamic viewport and by JS visual viewport (--vv-* from fest/dom updateVP) for mobile browser chrome / keyboard.
+            max-inline-size: min(100%, min(100cqi, 100dvi), var(--vv-width, 100dvi)) !important;
+            max-block-size: min(100%, min(100cqb, 100dvb), var(--vv-height, 100dvb)) !important;
+
+            //
+            /*outline-color: oklch(from var(--on-surface-color) l c h / 0.1);
+            outline-width: 1px;
+            outline-style: solid;
+            outline-offset: -1px;*/
+
+            //
+            border-radius: var(--radius-lg);
+        }
+
+        //
+        & {
+            //
+            --zoom: max(var(--scaling, 1), 0.125);
+            --zpx: calc(1px / max(var(--zoom, 1), 0.125));
+            --ppx: calc(1px / max(var(--pixel-ratio, 1), 0.125));
+        }
+
+        //
+        & > :where(*),
+        & :where(ui-frame, .u2-grid-item, ui-modal, [is="ui-orientbox"], [is="ui-gridbox"], [is="ui-orientbox"] > :where(*), [is="ui-gridbox"] > :where(*), .ui-gridlayout, .ui-gridlayout > :where(*))
+        {
+            @include compute_os_conditions;
+            @include compute_cs_size_to_os;
+            @include compute_from_os_to_cs;
+        }
+
+        //
+        .center-self {
+            @include use-inset;
+            @include centered-with-offset();
+        }
+
+        //
+        .fixed { @include use-inset; position: fixed !important; }
+        .absolute { @include use-inset; position: absolute !important; }
+    }
+
+    //
+    .native-portrait-optimized {
+        @include oriented(--in-swap-cond, 0, 1);
+    }
+}