@fest-lib/fl-ui 0.1.1

package/src/styles/ui/_gridbox.scss

@@ -0,0 +1,298 @@
+@use "../lib/core/interact/viewport" as *;
+
+//
+@property --item-size {
+    syntax: "<length-percentage>";
+    inherits: true;
+    initial-value: 100%;
+}
+
+//
+@layer ux-gridbox {
+
+    //
+    .ui-gridlayout {
+        @include compute_orient_grid_layout();
+
+        //
+        & {
+            --c-gap: clamp(min(1rem, 8cqmin), min(calc(8cqmin / min(var(--layout-c, 4), var(--layout-r, 8))), calc(6cqmax / max(var(--layout-c, 4), var(--layout-r, 8)))), min(4rem, 16cqmin));
+            --r-gap: clamp(min(1rem, 8cqmin), min(calc(8cqmin / min(var(--layout-c, 4), var(--layout-r, 8))), calc(6cqmax / max(var(--layout-c, 4), var(--layout-r, 8)))), min(4rem, 16cqmin));
+            --sd-inherit-layout-c: var(--layout-c, 4);
+            --sd-inherit-layout-r: var(--layout-r, 8);
+            --sd-inherit-cs-layout-c: var(--cs-layout-c, var(--layout-c, 4));
+            --sd-inherit-cs-layout-r: var(--cs-layout-r, var(--layout-r, 8));
+        }
+
+        //
+        & {
+            //display: block flow;
+            display: block grid !important;
+            position: relative !important;
+
+            //
+            container-name: u2-grid;
+
+            //
+            zoom: 1;
+            direction: ltr;
+
+            //
+            pointer-events: none !important;
+            background-color: transparent;
+
+            //
+            inline-size: stretch;
+            block-size: stretch;
+
+            // for correct working of grid items
+            container-type: normal !important;
+            overflow: visible !important;
+            contain: none !important;
+            padding: 0px !important;
+            gap: 0px !important;
+
+            //
+            max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
+            max-block-size: min(100%, min(100cqb, 100dvb)) !important;
+            box-sizing: border-box !important;
+
+            //
+            grid-template-columns: repeat(round(nearest, var(--cs-layout-c, 4), 1), minmax(0px, 1fr)) !important;
+            grid-template-rows: repeat(round(nearest, var(--cs-layout-r, 8), 1), minmax(0px, 1fr)) !important;
+
+            //
+            /*justify-content: safe start !important;
+            align-content: safe start !important;
+            justify-items: safe start !important;
+            align-items: safe start !important;*/
+
+            place-content: center !important;
+            place-items: center !important;
+            text-align: center !important;
+
+            //
+            grid-row: 1 / -1;
+            grid-column: 1 / -1;
+        }
+
+        //
+        /* WHY: Exclude launcher label captions (`[data-layer="labels"]`) — `aspect-ratio: 1/1` on `span` mis-sizes ellipsis pills. */
+        .ui-ws-item:not([data-layer="labels"]) span {
+            pointer-events: none;
+            aspect-ratio: 1 / 1;
+            inline-size: fit-content;
+            block-size: fit-content;
+            display: inline;
+        }
+
+        .ui-ws-item {
+            cursor: pointer;
+            user-select: none;
+            pointer-events: auto;
+
+            &:active,
+            &:has(:active) {
+                will-change: inset, translate, transform, opacity, z-index;
+                cursor: grabbing;
+            }
+        }
+
+        //
+        & > :where(*) {
+            @include compute_grid_item_cell();
+            --f-col: clamp(1, var(--sd-inherit-layout-c, var(--layout-c, 4)), 16);
+            --f-row: clamp(1, var(--sd-inherit-layout-r, var(--layout-r, 8)), 16);
+
+            // calculate visible size
+            & { --item-size: clamp(4rem, calc(100cqmax / min(var(--sd-inherit-cs-layout-c, var(--cs-layout-c, 4)), var(--sd-inherit-cs-layout-r, var(--cs-layout-r, 8)))), 5rem); }
+            & :where(*) {--drag-x: 0; --drag-y: 0; }
+
+            // dragging coordinate
+            & {
+                --drag-x: 0; --cs-drag-x: calc(var(--drag-x, 0) * 1px);
+                --drag-y: 0; --cs-drag-y: calc(var(--drag-y, 0) * 1px);
+            }
+
+            //
+            &:active, &:has(:active), *:active {
+                will-change: transform;
+            }
+
+            //
+            & {
+                grid-column: clamp(1, calc(1 + round(nearest, var(--cs-grid-c, 0), 1)), var(--sd-inherit-cs-layout-c, var(--cs-layout-c, 4))) !important;
+                grid-row: clamp(1, calc(1 + round(nearest, var(--cs-grid-r, 0), 1)), var(--sd-inherit-cs-layout-r, var(--cs-layout-r, 8))) !important;
+                cursor: pointer;
+
+                //
+                position: relative !important;
+                z-index: 1;
+                transform-origin: 50% 50% !important;
+                transform:
+                    translate3d(
+                        round(nearest, calc(var(--cs-drag-x, 0px) + var(--cs-transition-c, 0px)), calc(1px / var(--pixel-ratio, 1))),
+                        round(nearest, calc(var(--cs-drag-y, 0px) + var(--cs-transition-r, 0px)), calc(1px / var(--pixel-ratio, 1))),
+                        0px)
+                    scale3d(var(--scale, 1), var(--scale, 1), var(--scale, 1))
+                    translate3d(
+                        round(nearest, var(--translate-x, 0px), calc(1px / var(--pixel-ratio, 1))),
+                        round(nearest, var(--translate-y, 0px), calc(1px / var(--pixel-ratio, 1))),
+                        0px) !important;
+                translate: 0px 0px 0px !important;
+
+                //
+                inset: auto !important;
+                visibility: visible;
+
+                //
+                zoom: 1;
+                place-self: center !important;
+
+                //
+                min-inline-size: fit-content;
+                min-block-size: fit-content;
+
+                //
+                inline-size: var(--item-size, stretch);
+                block-size: var(--item-size, stretch);
+
+                //
+                max-inline-size: var(--item-size, stretch);
+                max-block-size: var(--item-size, stretch);
+
+                //
+                pointer-events: none;
+                touch-action: none;
+                user-select: none;
+                -webkit-user-drag: none;
+                -moz-user-drag: none;
+
+                //
+                overflow: visible;
+                contain: none;
+                isolation: isolate;
+
+                //
+                border: none 0px transparent;
+                outline: none 0px transparent;
+            }
+
+            //
+            &, & > *, & span {
+                --drag-distance: clamp(0, hypot(var(--dir-x, 0), var(--dir-y, 0)), 6);
+                --drag-duration: clamp(96ms, calc(var(--drag-distance, 0) * 110ms + 70ms), 360ms);
+                transition-behavior: allow-discrete;
+                transition-property: opacity, background-color, color;
+                transition-duration: var(--drag-duration);
+                transition-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1);
+                transition-delay: 0ms;
+                background-image: none;
+
+                //
+                pointer-events: none;
+                border: none 0px transparent;
+                outline: none 0px transparent;
+                box-shadow: none;
+                touch-action: none;
+                filter: none;
+            }
+
+            //
+            & {
+                pointer-events: auto;
+            }
+
+            //
+            & span, &.span, & ui-icon, &.ui-icon, & label, &.label {
+                pointer-events: none;
+            }
+
+            //
+            ui-icon {
+                pointer-events: none;
+            }
+
+            //
+            @media (prefers-reduced-motion: reduce) {
+                & {
+                    transition-duration: 0ms;
+                    transition-timing-function: linear;
+                }
+            }
+
+            //
+            & > :where(*) {
+                inline-size: stretch;
+                block-size: stretch;
+                max-inline-size: stretch;
+                max-block-size: stretch;
+                min-inline-size: 1px;
+                min-block-size: 1px;
+                grid-column: 1 / -1;
+                grid-row: 1 / -1;
+            }
+        }
+
+        //
+        &.sd-grid--labels,
+        &[data-layer="labels"] {
+            pointer-events: none !important;
+            isolation: isolate;
+            mix-blend-mode: normal;
+
+            //
+            & > :where(*) {
+                pointer-events: none;
+            }
+
+            //
+            & > :where(.ui-ws-item-label) {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: flex-start;
+                gap: clamp(0.1rem, 0.35cqmin, 0.35rem);
+                inline-size: 100%;
+                block-size: stretch;
+                padding-block-start: clamp(0.25rem, 0.65cqmin, 0.65rem);
+                color: color-mix(in oklch, var(--on-surface-color) 78%, transparent 22%);
+                font-size: clamp(0.65rem, 1.35cqmin, 1rem);
+                font-weight: 500;
+                text-align: center;
+                text-wrap: balance;
+                letter-spacing: 0.015em;
+                text-shadow:
+                    0 1px 2px color-mix(in oklch, var(--surface-color) 35%, transparent),
+                    0 0 0.35rem color-mix(in oklch, var(--surface-color) 15%, transparent);
+                translate: 0 calc(clamp(0.25rem, 0.65cqmin, 0.65rem) + var(--cs-sw-unit-y, 0px));
+
+                //
+                span {
+                    pointer-events: none;
+                    user-select: none;
+                    max-inline-size: min(8ch, 100%);
+                    opacity: clamp(0.75, 0.9, 1);
+                    contain: layout paint; // Optimization: isolate layout/paint
+                    content-visibility: auto; // Optimization: skip offscreen work
+                    background-image: none;
+                }
+            }
+        }
+
+        //
+        & slot {
+            isolation: auto !important;
+            display: contents !important;
+            overflow: visible !important;
+            contain: none !important;
+        }
+
+        //
+        ::slotted(*) {
+            direction: inherit;
+            writing-mode: inherit;
+        }
+    }
+}
+

package/src/styles/ui/_home-host.scss

@@ -0,0 +1,179 @@
+// HomeView host + optional shell integration (environment-shell, window-frame).
+// Loaded via adopted SpeedDial.scss — no dependency on `environment-shell/scss/*`.
+//
+// WHY: Shared demo mounts into `#app` with no intrinsic height; `%` + `min-block-size: 0` + abs
+// `.speed-dial-root` collapses the grid. Use `min-block-size: 100dvb` unless flex-mounted (`.wf-mounted-view`).
+
+$bp-desktop-min: 641px;
+
+@mixin home-view-host-styles {
+    :where(body):has([data-view="home"]) {
+        margin: 0;
+        min-block-size: 100dvb;
+    }
+
+    /* Typical view demo: `<main id="app">` + direct home root */
+    :where(main, [role="main"]):has(> .view-home.env-home-workspace) {
+        display: flex;
+        flex-direction: column;
+        min-block-size: 100dvb;
+        box-sizing: border-box;
+        border: none;
+        outline: none;
+        box-shadow: none;
+        background: transparent;
+    }
+
+    /*
+     * Environment shell: `#app` may be `<env-shell-container>` — `#home` sits under `.env-shell-workspace`,
+     * not as a direct child of the main landmark.
+     */
+    :where(env-shell-container:is([role="main"], #app)):has(
+            .env-shell-workspace > .view-home.env-home-workspace,
+            .env-shell-workspace > .env-shell-home-mount > .view-home.env-home-workspace
+        ) {
+        display: flex;
+        flex-direction: column;
+        min-block-size: 100dvb;
+        box-sizing: border-box;
+        border: none;
+        outline: none;
+        box-shadow: none;
+        background: transparent;
+    }
+
+    /* Extra-standalone: `<main>` is the only host (no wf-mounted-view on child) — nothing frames the launcher */
+    :where(main, [role="main"]):has(> .view-home.env-home-workspace:not(.wf-mounted-view)) {
+        max-inline-size: none;
+        margin-inline: 0;
+    }
+
+    :where(env-shell-container:is([role="main"], #app)):has(
+            .env-shell-workspace > .view-home.env-home-workspace:not(.wf-mounted-view),
+            .env-shell-workspace > .env-shell-home-mount > .view-home.env-home-workspace:not(.wf-mounted-view)
+        ) {
+        max-inline-size: none;
+        margin-inline: 0;
+    }
+
+    /* Backport from environment-shell: grid labels may extend past tile bounds */
+    .env-home-workspace {
+        box-sizing: border-box;
+        overflow: visible;
+        pointer-events: none;
+    }
+
+    .view-home.env-home-workspace {
+        position: relative;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
+        align-items: stretch;
+        justify-items: stretch;
+        inline-size: 100%;
+        min-inline-size: 0;
+        min-block-size: 100dvb;
+        padding: 0;
+        overflow: visible;
+        background: transparent;
+        box-sizing: border-box;
+        pointer-events: none;
+
+        & > .speed-dial-root {
+            position: absolute;
+            inset: 0;
+            inline-size: 100%;
+            block-size: 100%;
+            max-inline-size: 100%;
+            max-block-size: 100%;
+            pointer-events: none;
+        }
+    }
+
+    /*
+     * Flex / framed mount — parent supplies block size (`env-shell-workspace`, `wf-view-host`).
+     * INVARIANT: `min-block-size: 0` so flex `1fr` tracks do not overflow the shell.
+     */
+    .env-shell-workspace > .view-home.env-home-workspace.wf-mounted-view,
+    .env-shell-workspace > .env-shell-home-mount > .view-home.env-home-workspace.wf-mounted-view,
+    .wf-view-host > .view-home.env-home-workspace.wf-mounted-view {
+        margin: 0;
+        margin-inline: 0;
+        max-inline-size: none;
+        flex: 1 1 auto;
+        align-self: stretch;
+        min-block-size: 0;
+        block-size: auto;
+        position: relative;
+        z-index: 0;
+        isolation: isolate;
+        border: none !important;
+        outline: none !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+        background: transparent !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+    }
+
+    .env-shell-workspace > .view-home.env-home-workspace.wf-mounted-view > .speed-dial-root,
+    .env-shell-workspace > .env-shell-home-mount > .view-home.env-home-workspace.wf-mounted-view > .speed-dial-root,
+    .wf-view-host > .view-home.env-home-workspace.wf-mounted-view > .speed-dial-root {
+        flex: 1 1 auto;
+        min-block-size: 0;
+        block-size: 100%;
+        inline-size: 100%;
+        border-radius: 0 !important;
+        outline: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }
+
+    /* Fixed bottom chrome (optional): `.env-shell-root` may set `--env-shell-chrome-stack-reserve`. */
+    .env-shell-workspace > .view-home.env-home-workspace.wf-mounted-view,
+    .env-shell-workspace > .env-shell-home-mount > .view-home.env-home-workspace.wf-mounted-view {
+        padding-inline-start: env(safe-area-inset-inline-start, 0);
+        padding-inline-end: env(safe-area-inset-inline-end, 0);
+        /* Prefer overlay status inset when present (covers notch); else safe-area only. */
+        padding-block-start: env(safe-area-inset-block-start, 0);
+        padding-block-end: env(safe-area-inset-block-end, 0px);
+    }
+
+    /* NOTE: `--env-shell-chrome-stack-reserve` already includes mobile safe-area via root; avoid double-adding. */
+    .env-shell-root:has(> .env-shell-chrome) .env-shell-workspace > .view-home.env-home-workspace.wf-mounted-view,
+    .env-shell-root:has(> .env-shell-chrome)
+        .env-shell-workspace
+        > .env-shell-home-mount
+        > .view-home.env-home-workspace.wf-mounted-view {
+        /*padding-block-end: var(--env-shell-chrome-stack-reserve, 3rem);*/
+    }
+
+    @media (min-width: $bp-desktop-min) {
+        .env-shell-root:has(> .env-shell-chrome) .env-shell-workspace > .view-home.env-home-workspace.wf-mounted-view,
+        .env-shell-root:has(> .env-shell-chrome)
+            .env-shell-workspace
+            > .env-shell-home-mount
+            > .view-home.env-home-workspace.wf-mounted-view {
+            /*padding-block-end: calc(
+                var(--env-shell-chrome-stack-reserve, 7.5rem) + env(safe-area-inset-block-end, 0px)
+            );*/
+        }
+    }
+
+    /*
+     * Standalone test/demo (no `wf-mounted-view`): full-bleed, no “desk” card — avoid inset borders / shadows
+     * that read as a framed panel (see shared Vite demo on desktop).
+     */
+    .view-home.env-home-workspace:not(.wf-mounted-view) {
+        max-inline-size: none;
+        margin-inline: 0;
+        border-radius: 0 !important;
+        border: none !important;
+        outline: none !important;
+        box-shadow: none !important;
+        background: transparent !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+        min-block-size: 100dvb;
+    }
+}

package/src/styles/ui/_index.scss

@@ -0,0 +1,22 @@
+// Core mixins/tokens for fl.ui (extend in full checkout).
+@use "./variables" as *;
+@use "./essentials" as *;
+@use "./forms" as *;
+@use "./core-layout" as *;
+@use "./orientation-functions" as *;
+@use "./orientbox" as *;
+@use "./gridbox" as *;
+@use "./speed-dial" as *;
+@use "./shared" as *;
+@use "./states" as *;
+@use "./normalize" as *;
+
+
+@forward "./scrollbar";
+@forward "./layers";
+@forward "./content";
+@forward "./sidebar";
+@forward "./tabs";
+@forward "./bar";
+@forward "./home-host";
+@forward "./launcher-typography";

package/src/styles/ui/_launcher-typography.scss

@@ -0,0 +1,31 @@
+// Launcher / SpeedDial typography (system stack — no separate font files required).
+// Optional host override: set `--home-font-sans` on `:root`, `.view-home`, or `.speed-dial-root`.
+
+@mixin home-launcher-typography {
+    .speed-dial-root.app-oriented-desktop,
+    .speed-dial-root {
+        --home-font-sans:
+            system-ui,
+            -apple-system,
+            "Segoe UI",
+            Roboto,
+            "Noto Sans",
+            "Helvetica Neue",
+            Arial,
+            "Apple Color Emoji",
+            "Segoe UI Emoji",
+            sans-serif;
+
+        font-family: var(--home-font-sans);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
+
+        /*
+         * `ui-orientbox` can set `pointer-events: none`; label text still inherits these for metrics
+         * when painted from the caption layer.
+         */
+        font-kerning: normal;
+        font-variant-numeric: tabular-nums;
+    }
+}

package/src/styles/ui/_layers.scss

@@ -0,0 +1,48 @@
+// Underlying / overlaying visual contracts for sibling layers.
+
+@mixin underlying-layer {
+    position: absolute;
+    pointer-events: none;
+    overflow: visible;
+    inset: 0;
+    z-index: calc(var(--layer-main-z, 0) - 1);
+}
+
+@mixin overlaying-layer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none; // chrome children re-enable
+    z-index: calc(var(--layer-main-z, 0) + 1);
+}
+
+@mixin shaped-from-main {
+    border-radius: var(--layer-shape-radius, inherit);
+    mask-image: var(--layer-shape-mask, none);
+    -webkit-mask-image: var(--layer-shape-mask, none);
+    inline-size: 100%;
+    block-size: 100%;
+
+    @supports (border-shape: inset(0)) {
+        border-shape: var(--layer-shape-clip, none);
+    }
+
+    @supports not (border-shape: inset(0)) {
+        clip-path: var(--layer-shape-clip, none);
+    }
+}
+
+.c-underlying {
+    @include underlying-layer;
+}
+
+.c-underlying__shaped {
+    @include shaped-from-main;
+}
+
+.c-overlaying {
+    @include overlaying-layer;
+}
+
+.c-overlaying [data-axis] {
+    pointer-events: auto;
+}

package/src/styles/ui/_layout.scss

@@ -0,0 +1,3 @@
+@mixin container-query($name) {
+    @content;
+}