@fest-lib/fl-ui 0.1.1

package/src/styles/ui/_scrollbar.scss

@@ -0,0 +1,257 @@
+@use "sass:string";
+
+//
+@mixin anchor($name: "ux-scrollbox") { & { anchor-name: --#{$name}; } }
+@mixin anchor-bind($name: "ux-scrollbox") {
+    & {
+        position-area: span-all !important;
+        position-visibility: always !important;
+        position: absolute !important;
+        inline-size: anchor-size(inline, 100%) !important;
+        block-size: anchor-size(block, 100%) !important;
+        inset-inline-start: anchor(start, 0px) !important;
+        inset-block-start: anchor(start, 0px) !important;
+        inset-inline-end: anchor(end, 0px) !important;
+        inset-block-end: anchor(end, 0px) !important;
+        min-inline-size: 0px;
+        min-block-size: 0px;
+        max-inline-size: none;
+        max-block-size: none;
+        overflow: hidden !important;
+        pointer-events: none !important;
+        scrollbar-width: none !important;
+        scrollbar-color: transparent transparent !important;
+        scrollbar-gutter: auto !important;
+        z-index: 99 !important;
+    }
+}
+
+//
+@mixin scroll-tm($source: "", $name: "ux-scrollbox", $axis: "block") {
+    & #{$source} { scroll-timeline-axis :   #{$axis}; }
+    & #{$source} { scroll-timeline-name : --#{$name}; }
+    &                   { timeline-scope: --#{$name}; }
+}
+
+//
+@mixin scroll-tm-2-axis($source: "", $name: "ux-scrollbox") {
+    & #{$source} { scroll-timeline-axis : inline, block; }
+    & #{$source} { scroll-timeline-name : --#{$name}-x, --#{$name}-y; }
+    &                   { timeline-scope: --#{$name}-x, --#{$name}-y; }
+}
+
+//
+@mixin view-tm($source: "", $name: "ux-viewbox", $axis: "block") {
+    & #{$source} { view-timeline-axis :   #{$axis}; }
+    & #{$source} { view-timeline-name : --#{$name}; }
+    &                 { timeline-scope: --#{$name}; }
+}
+
+//
+@function lerp($a, $b, $i: "var(--percent, 0)") { @return calc(#{$a} * #{$i} + #{$b} * (1 - #{$i})); }
+@function starts-with ($string, $prefix) { @return string.slice($string, 1, string.length($prefix)) == $prefix; }
+@function strip-prefix($string, $prefix) { @if   starts-with($string, $prefix) { @return string.slice($string, string.length($prefix) + 1); }; @return $string; }
+
+//
+@mixin with-timeline($timeline: "ux-scrollbox", $name: "percent-coef", $prop: "percent") {
+    $is-custom: starts-with($prop, "var("); $strip-prop: strip-prefix($prop, "--");
+    $css-prop : sass(if(sass($is-custom): $prop; else: "--#{$strip-prop}"));
+    & {
+        animation-name: #{$name};
+        animation-timeline: --#{$timeline};
+        animation-duration: 1ms;
+        animation-direction: alternate;
+        animation-fill-mode: both;
+        animation-timing-function: linear;
+    }}
+
+//
+@mixin inner-property($name: "percent-coef", $prop: "percent") {
+    $is-custom: starts-with($prop, "--"); $strip-prop: strip-prefix($prop, "--");
+    $css-prop : sass(if(sass($is-custom): $prop; else: "--#{$strip-prop}"));
+    @at-root {
+        @if $is-custom { @property --#{$strip-prop} { initial-value: 0; syntax: "<number>"; inherits: true; } }
+        @keyframes #{$name} { from { #{$css-prop}: 0.0; }; to { #{$css-prop}: 1.0; }}
+    }}
+
+//
+$counter: 0;
+@mixin timeline-interpol-coef($property: "percent", $timeline: "ux-scrollbox", $name: "percent-coef-A" + $counter) {
+    @include inner-property($name, $property);
+    @include with-timeline($timeline, $name);
+    $counter: $counter+1;
+}
+
+//
+@position-try --just-block { inset-block-end: 0px; }
+@position-try --just-inline { inset-inline-end: 0px; }
+
+//
+@include  inner-property("percent-coef-x", "percent-x");
+@include  inner-property("percent-coef-y", "percent-y");
+
+// TODO: use CSS if() for hiding these scrollbar
+@mixin axis-scrollbar($selector, $fit: "inline", $thumb: ".thumb", $timeline-name: "ux-scrollbox") {
+    $cqf: 100cqi; @if $fit == 'block' { $cqf: 100cqb; };
+    $inv: block ; @if $fit == 'block' { $inv: inline; };
+    $axe: x;    ; @if $fit == 'block' { $axe: y; };
+
+    //
+    & :is(#{$selector}[axis="#{$axe}"]) {
+        & { #{$inv}-size: 0.5rem; #{$fit}-size: calc(#{$cqf} - 1rem);
+            @if $fit == 'block' {
+                grid-column: scrollbar-x !important;
+                grid-row: content-h !important;
+            } @else {
+                grid-column: content-w !important;
+                grid-row: scrollbar-y !important;
+            }
+
+            /*inset-#{$fit}-end  : auto;
+            inset-#{$inv}-start: auto;
+            inset-#{$fit}-start: 0.5rem;
+            inset-#{$inv}-end  : 1px;*/
+            --content-size: calc(#{$cqf} * 1); //--scroll-size: calc(var(--content-size, 0) / var(--scroll-coef, 1));
+            --clamped-size: calc(#{$cqf} - 1rem); --max-size: min(100%, var(--clamped-size, #{$cqf}));
+            --scroll-coef: clamp(0, calc(var(--content-size, 0.0001px) / var(--scroll-size, 0.0001px)), 1); //! new CSS calc feature
+            --determinant: clamp(0, round(up, calc(1 - (var(--scroll-coef, 1) + 0.001)), 1), 1);
+            //inset-#{$fit}-start: calc(anchor(--ux-scrollbox start, 0px) + 0.5rem);
+            //inset-#{$inv}-end  : calc(anchor(--ux-scrollbox end  , 0px) +    1px);
+            //position-try-fallbacks: --just-inline, --just-block;
+            //@include timeline-interpol-coef("--percent-#{$axe}", "#{$timeline-name}-#{$axe}");
+
+            pointer-events: none !important;
+            pointer-events: if(style(--determinant: 0): none; else: auto) !important;
+
+            //! new CSS if feature
+            visibility: collapse !important;
+            visibility: if(style(--determinant: 0): collapse; else: visible) !important;
+            @include timeline-interpol-coef("--percent-#{$axe}", "#{$timeline-name}-#{$axe}");
+        }
+
+        //
+        & :where(#{$thumb})
+        {
+            #{$inv}-size: 100%; #{$fit}-size: min(calc(var(--max-size, 100%) * var(--scroll-coef, 1)), var(--max-size, 100%));
+            --thumb-size: calc(var(--clamped-size, #{$cqf}) * var(--scroll-coef, 0));
+            --max-offset: calc(var(--clamped-size, #{$cqf}) - var(--thumb-size, 0));
+            @if $fit == block
+                { translate: 0px calc(var(--max-offset, 0) * var(--percent-y, 0))     0px; } @else
+                { translate:     calc(var(--max-offset, 0) * var(--percent-x, 0)) 0px 0px; }
+        }
+    }
+}
+
+// TODO: use CSS if() for hiding these scrollbar
+@mixin scrollbar ($selector: ".ui-scrollbar", $anchor: "ux-scrollbox", $thumb: ".ui-thumb") { :where(#{$selector}) {
+    & { --fit-unit: calc((var(--content-size, 1) * 1px - 1rem) / var(--content-size, 1)); };
+    & { --scroll-coef: 0; }
+    & { //
+        pointer-events: none;
+        touch-action: none;
+        user-select: none;
+
+        //
+        background-color: transparent !important;
+        position-anchor: --#{$anchor};
+        container-type: normal;
+        writing-mode: horizontal-tb !important;
+        line-height: 0px;
+        visibility: collapse;
+        box-sizing: border-box;
+        direction: ltr !important;
+        //overflow: hidden;
+        position: relative;
+        //position: fixed;
+        display: block flow;
+        z-index: 9999;
+        inset: 0px;
+    }
+
+    //
+    & :where(#{$thumb}) {
+        background-color: oklch(from var(--scrollbar-color, #101010F0) l c h / 0.6) !important;
+        position-anchor: --#{$anchor};
+        pointer-events: auto;
+        border-radius: 0.25rem;
+        touch-action: none;
+        writing-mode: horizontal-tb !important;
+        user-select: none;
+        line-height: 0px;
+        box-sizing: border-box;
+        visibility: auto;
+        direction: ltr !important;
+        position: relative;
+        overflow: hidden;
+        display: block flow;
+    }
+}}
+
+//
+@mixin scrollbox($timeline: "ux-scrollbox") {
+    & {
+        content-visibility: visible !important;
+        container-type: size;
+        //contain: layout;
+        isolation: isolate;
+        overflow: hidden;
+        position: static;
+        scrollbar-color: transparent transparent !important;
+        scrollbar-width: none !important;
+        scrollbar-gutter: auto !important;
+        pointer-events: none !important;
+        z-index: 1;
+
+        //
+        display: grid !important;
+        grid-template-columns: [content-w] minmax(0px, 1fr) [scrollbar-y] minmax(0px, max-content) !important;
+        grid-template-rows: [content-h] minmax(0px, 1fr) [scrollbar-x] minmax(0px, max-content) !important;
+        //position: relative;
+        //position: fixed !important;
+    }
+
+    //
+    &, & * {
+        interpolate-size: allow-keywords;
+        transition-behavior: allow-discrete;
+    }
+
+    //
+    @include scroll-tm-2-axis("", $timeline);
+    @include anchor($timeline);
+    @include scrollbar();
+    @include anchor-bind();
+}
+
+// Scrollbar mixins - veela-independent fallbacks
+// (scrollbar / custom-scrollbar / hide-scrollbar: core/_mixins.scss)
+
+@mixin scrollbox {
+    overflow: auto;
+    overscroll-behavior: contain;
+}
+
+@mixin scroll-tm-2-axis {
+    overflow: auto;
+    scroll-behavior: smooth;
+}
+
+@mixin axis-scrollbar($selector, $axis, $thumb-selector, $timeline-name) {
+    // Simplified scrollbar axis handling
+    #{$selector}[axis="#{$axis}"] {
+        @if $axis == "x" or $axis == "inline" {
+            overflow-x: auto;
+            overflow-y: hidden;
+        } @else {
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+    }
+}
+
+@mixin with-timeline($name) {
+    // Scroll timeline support (progressive enhancement)
+    @supports (animation-timeline: scroll()) {
+        animation-timeline: scroll();
+    }
+}

package/src/styles/ui/_shared-overlays.scss

@@ -0,0 +1,16 @@
+@mixin state-overlay($color: currentColor) {
+    position: relative;
+}
+
+@mixin focus-ring($color: currentColor) {
+    &:focus-visible {
+        outline: 2px solid #{$color};
+        outline-offset: 2px;
+    }
+}
+
+@mixin icon-button($size: var(--icon-size-lg)) {
+    inline-size: #{$size};
+    block-size: #{$size};
+    padding: 0;
+}