@fest-lib/veela 0.1.20 → 1.0.2

package/src/scss/ui/_modal.scss

@@ -0,0 +1,309 @@
+@use "../basic/layout" as layout;
+@use "./chrome-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: var(--z-modal-backdrop, 400);
+        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(--color-surface, var(--surface-color));
+        color: var(--color-on-surface, 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 layout.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;
+            flex-wrap: nowrap;
+
+            //
+            .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;
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Native-first helper styles. Kept separate from `modal()` because legacy
+ * `ui-modal` rules use containment that is unsafe for focusable dialog content.
+ */
+@mixin transient-modal {
+    dialog.ui-modal-dialog {
+        inline-size: min(100% - 2rem, 36rem);
+        max-inline-size: calc(100dvi - 2rem);
+        max-block-size: calc(100dvb - 2rem);
+        margin: auto;
+        padding: 0;
+        border: 1px solid color-mix(in oklab, CanvasText 18%, transparent);
+        border-radius: var(--radius-lg, 1rem);
+        background: var(--modal-bg, Canvas);
+        color: var(--modal-fg, CanvasText);
+        box-shadow: var(--modal-shadow, 0 20px 60px rgb(0 0 0 / 0.42));
+        overflow: visible;
+
+        &::backdrop {
+            background: var(--modal-backdrop-bg, rgb(0 0 0 / 0.58));
+            backdrop-filter: blur(4px);
+        }
+    }
+
+    .ui-modal-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: var(--ui-modal-fallback-z, 2147483646);
+        display: grid;
+        place-items: center;
+        padding: 1rem;
+        background: var(--modal-backdrop-bg, rgb(0 0 0 / 0.58));
+        backdrop-filter: blur(4px);
+        pointer-events: auto;
+    }
+
+    .ui-modal-panel {
+        inline-size: min(100%, 36rem);
+        max-block-size: calc(100dvb - 2rem);
+        overflow: auto;
+        box-sizing: border-box;
+        padding: var(--modal-padding, 1.25rem);
+        border-radius: var(--modal-radius, var(--radius-lg, 1rem));
+        background: var(--modal-bg, Canvas);
+        color: var(--modal-fg, CanvasText);
+        box-shadow: var(--modal-shadow, 0 20px 60px rgb(0 0 0 / 0.42));
+        pointer-events: auto;
+    }
+}

package/src/scss/ui/_motion.scss

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

package/src/scss/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/scss/ui/_normalize.scss

@@ -0,0 +1,5 @@
+/*
+ * MAP:modules/projects/veela.css/src/scss/basic/_normalize.scss
+ * WHY: canonical UI source resolves the flattened base entry directly.
+ */
+@forward "../basic/normalize";

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

@@ -0,0 +1,273 @@
+@use "sass:string";
+@use "../core/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)
+    );
+}