@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/ui/components/quick-settings.scss

@@ -0,0 +1,321 @@
+/*
+ * Filename: QuickSettings.scss
+ * FullPath: modules/projects/fl.ui/src/ui/navigation/settings/QuickSettings.scss
+ * Change date and time: 09.40.00_19.08.2026
+ * Reason for changes: Footer row for Settings / Explorer shortcut buttons.
+ */
+
+/* Unlayered `:host` rules beat `ux-preload`'s layered `:host{display:none}` default. */
+:host {
+    display: block;
+    box-sizing: border-box;
+    contain: layout style;
+    pointer-events: auto;
+    color-scheme: inherit;
+}
+
+:host-context(html[data-theme="light"]),
+:host([data-theme="light"]) {
+    color-scheme: light only;
+}
+
+:host-context(html[data-theme="dark"]),
+:host([data-theme="dark"]) {
+    color-scheme: dark only;
+}
+
+:host([open]) {
+    animation: qs-pop-in 140ms cubic-bezier(0.22, 0.8, 0.3, 1);
+}
+
+:host([hidden]) {
+    display: none !important;
+}
+
+@keyframes qs-pop-in {
+    from {
+        opacity: 0;
+        transform: translateY(6px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@layer components {
+    .qs-panel {
+        /*
+         * NOTE: `--qs-*` are component-scoped aliases DERIVED from canonical `--color-*`
+         * (source of truth: veela `core/misc/_tokens.scss`). Values already trace to canonical;
+         * the local aliases remain as the QuickSettings contract + shadow-DOM self-sufficiency.
+         * Use sites chain `var(--color-*, var(--qs-*))` so canonical wins when veela is loaded.
+         */
+        --qs-primary: var(--color-primary);
+        --qs-surface: var(--color-surface);
+        --qs-on-surface: var(--color-on-surface);
+        --qs-outline: color-mix(in oklab, var(--color-outline-variant) 80%, transparent);
+
+        box-sizing: border-box;
+        display: grid;
+        gap: 0.85rem;
+        inline-size: min(360px, calc(100vw - 1.5rem));
+        max-inline-size: 360px;
+        min-inline-size: 320px;
+        padding: 0.9rem;
+        border-radius: 14px;
+        border: 1px solid var(--qs-outline);
+        background: var(--qs-surface);
+        color: var(--qs-on-surface);
+        color: contrast-color(var(--qs-surface));
+        /* INVARIANT: no backdrop-filter — Win11-like solid panel per spec, keeps perf on low-end devices. */
+        box-shadow:
+            0 20px 48px -20px rgba(0, 0, 0, 0.4),
+            0 2px 8px -2px rgba(0, 0, 0, 0.25);
+        font: 500 0.85rem/1.3 ui-sans-serif, system-ui, sans-serif;
+        pointer-events: auto;
+    }
+
+    .qs-tiles {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 0.5rem;
+    }
+
+
+    .qs-tile-icon {
+        /* WHY: Phosphor default --icon-padding: 0.45rem shrinks glyphs to dots in a 1.35rem slot. */
+        --icon-size: 1.5rem;
+        --icon-padding: 0;
+        --icon-color: currentColor;
+        flex: 0 0 auto;
+        inline-size: var(--icon-size);
+        block-size: var(--icon-size);
+        min-inline-size: var(--icon-size);
+        min-block-size: var(--icon-size);
+        line-height: 0;
+        color: contrast-color(var(--qs-surface));
+        color: color-mix(in oklch, contrast-color(var(--qs-surface)) 40%, var(--color-primary, var(--qs-primary)));
+    }
+
+
+    .qs-tile {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        min-inline-size: 0;
+        padding: 0.55rem 0.65rem;
+        border: none;
+        border-radius: 10px;
+        color: inherit;
+        background: color-mix(in oklab, var(--qs-on-surface) 8%, transparent);
+        color: contrast-color(inherit(background-color));
+        text-align: start;
+        cursor: pointer;
+        transition: background-color 140ms ease, color 140ms ease;
+
+        &:hover {
+            background: color-mix(in oklab, var(--qs-on-surface) 14%, transparent);
+            color: contrast-color(inherit(background-color));
+        }
+
+        &:active {
+            background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
+            color: contrast-color(inherit(background-color));
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--color-primary, var(--qs-primary));
+            outline-offset: 2px;
+        }
+
+        &[aria-pressed="true"] {
+            background: color-mix(in oklab, var(--color-primary, var(--qs-primary)) 26%, transparent);
+            color: var(--color-primary, var(--qs-primary));
+            color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 60%, var(--color-primary, var(--qs-primary)));
+
+            .qs-tile-icon {
+                --icon-color: var(--color-primary, var(--qs-primary));
+                --icon-color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 60%, var(--color-primary, var(--qs-primary)));
+                --icon-color: currentColor;
+            }
+        }
+    }
+
+    .qs-tile-text {
+        display: flex;
+        flex-direction: column;
+        gap: 0.05rem;
+        min-inline-size: 0;
+        overflow: hidden;
+        color: color-mix(in oklch, contrast-color(var(--qs-surface)) 40%, var(--color-primary, var(--qs-primary)));
+    }
+
+    .qs-tile-label {
+        font-size: 0.78rem;
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: contrast-color(var(--qs-surface));
+    }
+
+    .qs-tile-sub {
+        font-size: 0.68rem;
+        font-weight: 500;
+        opacity: 0.7;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: contrast-color(var(--qs-surface));
+    }
+
+    .qs-sliders {
+        display: grid;
+        gap: 0.6rem;
+        padding-block-start: 0.7rem;
+        border-block-start: 1px solid var(--qs-outline);
+        color: contrast-color(var(--qs-surface));
+    }
+
+    .qs-slider-row {
+        display: flex;
+        align-items: center;
+        gap: 0.65rem;
+        cursor: default;
+    }
+
+    .qs-slider-icon {
+        --icon-size: 1.35rem;
+        --icon-padding: 0;
+        --icon-color: currentColor;
+        flex: 0 0 auto;
+        inline-size: var(--icon-size);
+        block-size: var(--icon-size);
+        min-inline-size: var(--icon-size);
+        min-block-size: var(--icon-size);
+        line-height: 0;
+        color: contrast-color(var(--qs-surface));
+    }
+
+    .qs-slider-col {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        flex: 1 1 auto;
+        min-inline-size: 0;
+    }
+
+    .qs-slider-label {
+        font-size: 0.68rem;
+        font-weight: 500;
+        opacity: 0.75;
+    }
+
+    /* Minimal native range styling (Win11-like thin track + round thumb). */
+    .qs-slider {
+        appearance: none;
+        -webkit-appearance: none;
+        inline-size: 100%;
+        block-size: 1.1rem;
+        margin: 0;
+        background: transparent;
+        color: contrast-color(inherit(background-color));
+        cursor: pointer;
+
+        &::-webkit-slider-runnable-track {
+            block-size: 4px;
+            border-radius: 999px;
+            background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
+            color: contrast-color(inherit(background-color));
+        }
+
+        &::-moz-range-track {
+            block-size: 4px;
+            border-radius: 999px;
+            background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
+            color: contrast-color(inherit(background-color));
+        }
+
+        &::-webkit-slider-thumb {
+            appearance: none;
+            -webkit-appearance: none;
+            inline-size: 1rem;
+            block-size: 1rem;
+            margin-block-start: -6px;
+            border-radius: 50%;
+            border: none;
+            background: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
+            color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+        }
+
+        &::-moz-range-thumb {
+            inline-size: 1rem;
+            block-size: 1rem;
+            border-radius: 50%;
+            border: none;
+            background: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
+            color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+        }
+
+        &:focus-visible::-webkit-slider-thumb {
+            outline: 2px solid var(--color-primary, var(--qs-primary));
+            outline-offset: 2px;
+            color: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
+            background: color-mix(in oklch, contrast-color(var(--qs-surface, var(--color-surface))) 40%, var(--color-primary, var(--qs-primary)));
+        }
+    }
+
+    .qs-footer {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 0.4rem;
+        padding-block-start: 0.65rem;
+        border-block-start: 1px solid var(--qs-outline);
+    }
+
+    .qs-footer-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        min-inline-size: 0;
+        padding: 0.28rem 0.55rem;
+        border: none;
+        border-radius: 8px;
+        background: color-mix(in oklab, var(--qs-on-surface) 8%, transparent);
+        color: contrast-color(var(--qs-surface));
+        font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
+        cursor: pointer;
+        transition: background-color 140ms ease;
+
+        &:hover {
+            background: color-mix(in oklab, var(--qs-on-surface) 14%, transparent);
+        }
+
+        &:active {
+            background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--color-primary, var(--qs-primary));
+            outline-offset: 2px;
+        }
+    }
+
+    .qs-footer-icon {
+        --icon-size: 1.15rem;
+        --icon-padding: 0;
+        --icon-color: currentColor;
+        flex: 0 0 auto;
+        inline-size: var(--icon-size);
+        block-size: var(--icon-size);
+        min-inline-size: var(--icon-size);
+        min-block-size: var(--icon-size);
+        line-height: 0;
+    }
+}

package/src/scss/ui/components/scrollframe.scss

@@ -0,0 +1,58 @@
+@use "../scrollbar" as sb;
+
+//
+@property --determinant { syntax: "<number>"; initial-value: 0; inherits: true; };
+@property --thumb-size { syntax: "<length-percentage>"; initial-value: 0px; inherits: true; };
+@property --clamped-size { syntax: "<length-percentage>"; initial-value: 0px; inherits: true; };
+@property --max-offset { syntax: "<length-percentage>"; initial-value: 0px; inherits: true; };
+
+//
+@layer components {
+
+    //
+    :host {
+        & { --scrollbar-color: oklch(from --c2-on-surface(var(--scrollbar-tone-shift, 0.0), var(--current, #111)) l c h / 0.8); };
+        & { display: block; container-type: size !important; contain: strict !important; position: fixed !important; border-radius: 0.25rem; overflow: hidden; }
+        &, * {
+            interpolate-size: allow-keywords;
+            transition-behavior: allow-discrete;
+            overflow: hidden !important;
+            scrollbar-width: none !important;
+            scrollbar-color: transparent transparent !important;
+            scrollbar-gutter: auto !important;
+            background-color: transparent;
+            pointer-events: none;
+            box-sizing: border-box;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+            padding: 0px;
+            margin: 0px;
+            font-size: 0rem;
+            line-height: 0;
+            color: transparent;
+        }
+
+        //
+        //:where(.ui-scrollbar),
+        .ui-scrollbar[axis="x"] .ui-thumb { @include sb.with-timeline("ux-scrollbox-x"); };
+        .ui-scrollbar[axis="y"] .ui-thumb { @include sb.with-timeline("ux-scrollbox-y"); };
+
+        //
+        .ui-scrollbar {
+            & {
+                background-color: transparent !important;
+                background: transparent !important;
+                background-image: none !important;
+            }
+
+            .ui-thumb {
+                border-radius: 0.25rem;
+            }
+        }
+
+        @include sb.scrollbox();
+        @include sb.scroll-tm-2-axis();
+        @include sb.axis-scrollbar(".ui-scrollbar", "inline", ".ui-thumb", "ux-scrollbox");
+        @include sb.axis-scrollbar(".ui-scrollbar", "block" , ".ui-thumb", "ux-scrollbox");
+    }
+}

package/src/scss/ui/components/slider.scss

@@ -0,0 +1,188 @@
+// sizes
+@property --ui-slider-track-size { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; }
+@property --ui-slider-thumb-size { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; }
+
+// radius
+@property --ui-slider-track-radius { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; }
+@property --ui-slider-thumb-radius { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; }
+// gap between thumb edge and track end caps (horizontal)
+@property --ui-slider-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
+
+// colors
+@property --ui-slider-track-color { syntax: "<color>"; inherits: true; initial-value: #0000; }
+@property --ui-slider-thumb-color { syntax: "<color>"; inherits: true; initial-value: #0000; }
+@property --ui-slider-active-color { syntax: "<color>"; inherits: true; initial-value: #0000; }
+
+//
+@layer components {
+    :host(ui-slider) {
+        &, & .ui-box, & .ui-track, & .ui-thumb {
+            box-sizing: border-box;
+            transition-behavior: allow-discrete;
+            interpolate-size: allow-keywords;
+            user-select: none;
+            pointer-events: none;
+        }
+
+        //
+        & {
+            // sizes
+            --ui-slider-track-size: 0.125rem;
+            --ui-slider-thumb-size: 1rem;
+
+            // radius
+            --ui-slider-track-radius: 0.0625rem;
+            --ui-slider-thumb-radius: 0.5rem;
+
+            // colors
+            --ui-slider-thumb-color: --c2-surface(0.0, var(--current));
+            --ui-slider-track-color: --c2-surface(0.1, var(--current));
+            --ui-slider-active-color: --c2-surface(1.0, var(--current));
+        }
+
+        //
+        & {
+            min-inline-size: 2rem;
+            min-block-size: 0px;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+            inline-size: fit-content;
+            block-size: fit-content;
+        }
+
+        //
+        :where(.ui-box) {
+            & {
+                pointer-events: auto;
+                cursor: pointer;
+            }
+
+            //
+            :where(.ui-track) {
+                //
+                & {
+                    pointer-events: auto;
+                    cursor: pointer;
+
+                    //
+                    inset-inline-start: 50%;
+                    inset-block-start: 50%;
+                    transform: translate3d(-50%, -50%, 0px);
+                    /* active fill */
+                    background-image: linear-gradient(
+                        to right,
+                        var(--ui-slider-active-color) calc(100% * var(--value, 0)),
+                        var(--ui-slider-track-color) 0
+                    );
+                }
+            }
+
+            //
+            :where(.ui-thumb) {
+
+                //
+                & {
+                    --travel-x: calc(100cqi - var(--ui-slider-thumb-size, 0px) * 2 - var(--ui-slider-gap, 0px) * 2);
+                    --shift-x: calc(var(--value, 0) * var(--travel-x, 100cqi));
+
+                    //
+                    inset: auto;
+                    inset-inline-start: 0px;
+                    inset-block-start: 50%;
+                    transform: translate3d(calc(
+                        calc(clamp(0px, calc(var(--drag-x, 0) * 1px + var(--shift-x, 0px)), var(--travel-x, 100cqi)) + var(--ui-slider-thumb-size, 0px) / 2) +
+                        var(--ui-slider-gap, 0px)
+                        ), -50%, 0px);
+                    border-radius: 50%;
+                    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.08);
+                    z-index: 99;
+
+                    //
+                    pointer-events: auto;
+                    cursor: grab;
+
+                    //
+                    background-color: --c2-surface(0.0, var(--current));
+                }
+
+                //
+                &:not([data-dragging]) {
+                    transition: --translate-x 0.1s ease-in-out;
+                    transform: translate3d(calc(
+                        calc(clamp(0px, calc(var(--shift-x, 0px)), var(--travel-x, 100cqi)) + var(--ui-slider-thumb-size, 0px) / 2) +
+                        var(--ui-slider-gap, 0px)
+                        ), -50%, 0px);
+                }
+
+                //
+                &[data-dragging] {
+                    cursor: grabbing;
+                    transition: none;
+                }
+
+                &:active {
+                    cursor: grabbing;
+                }
+            }
+        }
+
+        /* variants declared at root scope */
+
+        //
+        ::slotted(input) {
+            display: none !important;
+        }
+    }
+
+    /* variants */
+    :host(ui-slider[variant="switch"]) {
+        & {
+            --ui-slider-track-size: 1.25rem;
+            --ui-slider-thumb-size: 1rem;
+            --ui-slider-track-radius: calc(var(--ui-slider-track-size) / 2);
+            --ui-slider-thumb-radius: 50%;
+            --ui-slider-track-color: --c2-on-surface(0.0, var(--current));
+            --ui-slider-active-color: --c2-on-surface(-1.0, var(--current));
+            --ui-slider-gap: calc((var(--ui-slider-track-size) - var(--ui-slider-thumb-size)) / 2); // small horizontal gap for switch variant
+        }
+
+        .ui-box {
+            background-color: color-mix(in oklch, var(--ui-slider-active-color) calc(100% * var(--value, 0)), var(--ui-slider-track-color));
+            background-image: none;
+            pointer-events: auto;
+            cursor: pointer;
+
+            .ui-thumb {
+                pointer-events: auto;
+                cursor: grab;
+            }
+            .ui-track {
+                background-color: transparent;
+                background-image: none;
+            }
+        }
+
+    }
+
+    :host(ui-slider[variant="slider"]) {
+        & {
+            --ui-slider-track-size: 0.0625rem;
+            --ui-slider-thumb-size: 0.75rem;
+            --ui-slider-track-radius: 9999px;
+            --ui-slider-thumb-radius: 50%;
+            --ui-slider-track-color: --c2-on-surface(0.0, var(--current));
+            --ui-slider-active-color: --c2-on-surface(-1.0, var(--current));
+            --ui-slider-gap: calc((var(--ui-slider-track-size) - var(--ui-slider-thumb-size)) / 2);
+        }
+
+        .ui-box {
+            pointer-events: auto;
+            cursor: pointer;
+
+            .ui-thumb {
+                pointer-events: auto;
+                cursor: grab;
+            }
+        }
+    }
+}