@fest-lib/veela 0.1.20 → 1.0.2

package/src/scss/ui/_sidebar.scss

@@ -0,0 +1,478 @@
+// Layout Components - Refactored and Optimized
+// Unified with design system variables and mixins
+@use "../basic/layout" as layout;
+@use "../core/mixins" as core;
+@use "../core/tokens" as t;
+@use "./chrome-mixins" as ui;
+
+//
+@mixin sidebar {
+
+    //
+    .sidebar {
+        align-items: stretch;
+        box-sizing: border-box;
+        user-select: none;
+        text-align: start;
+        padding: 0px;
+        touch-action: pan-y;
+        pointer-events: auto;
+        justify-content: start;
+        block-size: stretch;
+        margin: 0px;
+
+        //
+        @include core.flex-center;
+        @include layout.container-clamped(clamp(0px, var(--sidebar-width, 20rem), 100cqi), stretch);
+        @include layout.scrollable("y");
+        @include core.hide-scrollbar;
+
+        //
+        @include ui.vstack(0px);
+        @include ui.tonal-surface(surface-container-low, var(--surface-opacity-default), var(--radius-sm), 0px, 1, true);
+
+        //
+        & {
+            box-sizing: border-box;
+            border: none 0 transparent;
+            outline: none 0 transparent;
+            max-block-size: stretch;
+            min-block-size: 0px;
+            box-shadow: none;
+
+            contain: strict;
+            content-visibility: auto;
+            block-size: stretch;
+            padding: 0.25rem;
+            padding-inline: 0.25rem;
+            padding-block: 0.25rem;
+
+            border-radius: 0px;
+            border-start-start-radius: 0px;
+            border-end-start-radius: 0px;
+            //background-color: oklch(from --c2-surface(0.15, var(--current, currentColor)) l c h / 0.9);
+            //filter: drop-shadow(0 1.5rem 1rem color-mix(in oklch, #000 22%, transparent));
+            //backdrop-filter: blur(1rem);
+            background-color: transparent;
+            filter: drop-shadow(0 1.5rem 1rem color-mix(in oklch, #000 22%, transparent));
+        }
+
+        //
+        &[slot="sidebar"] {
+            grid-column: 1 / 2;
+            grid-row: 1 / -1;
+            position: sticky;
+            inset-block-start: var(--padding-sm);
+            align-self: start;
+            display: flex;
+            flex-direction: column;
+            touch-action: pan-y;
+            justify-content: start;
+
+            //
+            @include layout.container-clamped(stretch, stretch);
+            @include layout.scrollable;
+            @include core.hide-scrollbar;
+            @container (inline-size >= 60rem) {
+                position: static;
+                max-block-size: none;
+                order: 2;
+                inline-size: calc(100cqi - clamp(0px, var(--padding-sm), 100cqi));
+            }
+
+            //
+            & { min-block-size: 0px; box-shadow: none; block-size: stretch; max-block-size: stretch; }
+        }
+
+        ul {
+            user-select: none;
+            overflow: visible;
+            box-sizing: border-box;
+            margin: 0px;
+            touch-action: pan-y;
+            justify-content: start;
+            max-block-size: none;
+            block-size: max-content;
+            margin-block: 0.25rem;
+
+            //
+            @include layout.container-clamped(stretch, fit-content);
+            @include ui.tonal-list(surface, var(--surface-opacity-subtle), var(--radius-sm), 0);
+
+            //
+            /*filter: drop-shadow(0 1.5rem 1rem color-mix(in oklch, #000 22%, transparent));*/
+            background-color: oklch(from var(--surface-color) l c h / 1);
+            /*backdrop-filter: blur(1rem);*/
+
+            //
+            &, &:focus {
+                border: none 0 transparent;
+                outline: none 0 transparent;
+            }
+
+            //
+            & { block-size: max-content; min-block-size: max-content; max-block-size: none; }
+
+            //
+            li {
+                overflow: visible;
+                font-size: t.$font-sm;
+                transition: var(--transition-colors);
+                touch-action: pan-y;
+
+                //
+                @include layout.container-clamped(stretch, fit-content);
+
+                //
+                &, * { pointer-events: none; }
+
+                //
+                a {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: nowrap;
+                    pointer-events: auto;
+                    background: transparent;
+                    touch-action: pan-y;
+
+                    //
+                    @include layout.container-clamped(stretch, fit-content);
+                    @include ui.nav-item;
+
+                    //
+                    &, &:focus {
+                        border: none;
+                        outline: none;
+                    }
+
+                    //
+                    & { padding: var(--padding-lg); column-gap: var(--gap-xs); gap: var(--gap-md); }
+                    @media (max-height: 600px) { padding: var(--padding-xl); gap: var(--gap-sm); }
+                    @media (max-height: 480px) { padding: var(--padding-lg); gap: var(--gap-md); }
+
+                    //
+                    & {
+                        position: relative;
+                        isolation: isolate;
+                        border-radius: var(--radius-sm);
+                        transition: color var(--transition-colors), background-color var(--transition-colors);
+                        color: color-mix(in oklch, var(--on-surface, currentColor) 72%, transparent);
+                        min-block-size: 3rem; // 56px
+                    }
+
+                    &::before {
+                        content: "";
+                        position: absolute;
+                        inset: 0;
+                        border-radius: inherit;
+                        background: color-mix(in oklch, var(--primary, var(--color-primary, currentColor)) 18%, transparent);
+                        opacity: 0;
+                        transform: scale3d(0.4, 1, 1);
+                        transition: opacity var(--transition-colors), transform var(--transition-medium, var(--transition-colors));
+                        pointer-events: none;
+                    }
+
+                    &::after {
+                        display: none; // Remove the small indicator
+                    }
+
+                    &:where(:hover, :focus-visible, :focus, :active) {
+                        color: color-mix(in oklch, var(--on-surface, currentColor) 94%, transparent);
+
+                        &::before {
+                            opacity: 0.55;
+                            transform: scale3d(1, 1, 1);
+                        }
+
+                        ui-icon {
+                            color: color-mix(in oklch, var(--on-surface, currentColor) 94%, transparent);
+                        }
+                    }
+
+                    &[data-active="true"] {
+                        color: color-mix(in oklch, var(--on-secondary-container, var(--on-surface, currentColor)) 100%, transparent);
+                        font-weight: var(--font-weight-semibold);
+                        letter-spacing: 0.01em;
+
+                        &::before {
+                            opacity: 1;
+                            transform: scale3d(1, 1, 1);
+                            background: var(--secondary-container, color-mix(in oklch, var(--primary, var(--color-primary, currentColor)) 25%, transparent));
+                            box-shadow: none;
+                        }
+
+                        ui-icon {
+                            color: currentColor;
+                        }
+                    }
+
+                    @media (prefers-reduced-motion: reduce) {
+                        &, &::before, &::after {
+                            transition-duration: 0ms;
+                            transform: none;
+                        }
+                    }
+
+                    ui-icon {
+                        justify-self: start;
+                        inline-size: var(--icon-size);
+                        block-size: var(--icon-size);
+                        --icon-size: var(--icon-size-sm);
+                        color: color-mix(in oklch, var(--on-surface, currentColor) 58%, transparent);
+                        transition: color var(--transition-colors), transform var(--transition-medium, var(--transition-colors));
+
+                        @media (max-width: 720px) { --icon-size: var(--icon-size-md); }
+                        @media (max-width: 480px) { --icon-size: var(--icon-size-lg); }
+                    }
+
+                    //
+                    span {
+                        display: block;
+                        justify-self: start;
+                        text-align: start;
+                        @include layout.container-clamped(stretch, max-content);
+                    }
+                }
+            }
+        }
+
+        &,
+        ul,
+        ul li,
+        ul li a,
+        ul li a span {
+            text-align: start;
+            direction: ltr;
+            justify-items: start;
+            justify-self: start;
+        }
+
+        //
+        @container (inline-size >= 60rem) {
+            nav {
+                inline-size: 100cqi;
+
+                //
+                padding: var(--padding-sm) var(--padding-xs);
+                @media (max-width: 720px) { padding: var(--padding-md) var(--padding-sm); }
+                @media (max-width: 480px) { padding: var(--padding-lg) var(--padding-md); }
+
+                //
+                ul {
+                    gap: 0;
+                    padding-inline: 0;
+                    inline-size: stretch;
+
+                    li {
+                        flex: 0 0 auto;
+                        white-space: nowrap;
+                        border-radius: var(--radius-sm);
+
+                        //
+                        @media (max-width: 480px) { border-radius: var(--radius-md); }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// ============================================================================
+// Sidebar Component Styles
+// ============================================================================
+@mixin tabbed-sidebar($selector: ".sidebar") {
+    @at-root :host {
+        #{$selector} {
+            // ================================================================
+            // Base Layout
+            // ================================================================
+            & {
+                display: flex;
+                flex-direction: column;
+                justify-content: start;
+                gap: 0px;
+
+                // Grid positioning
+                grid-column: 1 / 2 span;
+                grid-row: 2 / -1;
+                z-index: 2;
+
+                // Sizing
+                min-inline-size: 0px;
+                min-block-size: 0px;
+                max-inline-size: stretch;
+                max-block-size: stretch;
+
+                // Spacing
+                padding: 0px !important;
+                margin: 0px !important;
+
+                // Visual
+                background: none;
+                box-shadow: none;
+                border-radius: 0px;
+                overflow: visible;
+
+                // Transform & Animation
+                transform: translateX(0px);
+                background-color: transparent;
+                transition-behavior: allow-discrete;
+
+                //
+                /*filter: drop-shadow(0 1.5rem 1rem color-mix(in oklch, #000 22%, transparent));*/
+                filter: none;
+            }
+
+            // ================================================================
+            // Slotted Sidebar Content
+            // ================================================================
+            ::slotted([slot="sidebar"]) {
+                // Grid positioning
+                grid-row: 1 / -1;
+
+                // Sizing
+                inline-size: stretch;
+                block-size: stretch;
+                max-block-size: stretch;
+                flex-grow: 1;
+
+                // Spacing
+                padding: 0rem;
+                margin: 0px;
+                gap: 0px;
+
+                // Layout
+                place-content: center;
+                place-items: center;
+                align-content: start;
+                line-height: normal;
+
+                // Visual
+                box-shadow: none;
+            }
+
+            // ================================================================
+            // Desktop Layout (≥800px)
+            // ================================================================
+            @at-root :host(:not([sidebar-drop-menu])) {
+                --sidebar-inline-grid-size: 0px;
+
+                //
+                #{$selector} {
+                    & {
+                        will-change: inline-size;
+                        grid-column: 1 / 2 span;
+                        position: relative;
+                        min-inline-size: 0px;
+                        inline-size: clamp(min(20rem, 100%), max(16rem, 10cqi), 100cqi);
+                        max-inline-size: none;
+                        transform: translate3d(-100%, 0, 0);
+                        transition: transform var(--transition-medium, 0.28s) ease,
+                                    box-shadow var(--transition-medium, 0.28s) ease;
+                        pointer-events: none;
+                        block-size: stretch;
+                        max-block-size: stretch;
+                    }
+
+                    // Hidden state
+                    &:is([sidebar-opened="false"], :not([sidebar-opened="true"], [sidebar-opened=""])) {
+                        pointer-events: none;
+                        transform: translate3d(-100%, 0, 0);
+                    }
+
+                    // Visible state
+                    &:is([sidebar-opened="true"], [sidebar-opened=""]) {
+                        transform: translate3d(0, 0, 0);
+                        pointer-events: auto;
+
+                        @starting-style {
+                            transform: translate3d(-100%, 0, 0);
+                            box-shadow: none;
+                        }
+                    }
+                }
+            }
+
+            // ================================================================
+            // Drop Menu Mode
+            // ================================================================
+            @at-root :host([sidebar-drop-menu]) {
+                --sidebar-inline-grid-size: 0px;
+
+                #{$selector} {
+                    & {
+                        // Grid positioning
+                        grid-column: sidebar-col !important;
+                        grid-row: 2 / -1;
+                        z-index: 5;
+
+                        // Sizing
+                        inline-size: min(26rem, 80cqi);
+                        min-inline-size: clamp(16rem, 32cqi, 24rem);
+                        block-size: stretch;
+                        max-block-size: min(48rem, 100cqb);
+
+                        // Spacing
+                        padding-block: clamp(0.75rem, 1cqb + 0.5rem, 1.25rem);
+                        padding-inline: clamp(0.75rem, 1cqi + 0.75rem, 1.5rem);
+
+                        // Visual
+                        background-color: color-mix(in oklch, var(--surface-color) 96%, transparent);
+                        border: 1px solid color-mix(in oklch, var(--md3-outline) 40%, transparent);
+                        border-radius: 0px;
+                        box-shadow: 0 1.5rem 3rem color-mix(in oklch, #000 22%, transparent);
+
+                        // Transform & Animation
+                        transform-origin: top center;
+                        transform: translate3d(0, -20%, 0);
+                        transition-behavior: allow-discrete;
+                        transition:
+                            visibility var(--transition-medium, 0.3s) steps(1, jump-both),
+                            transform var(--transition-medium, 0.3s) var(--ease-emphasized),
+                            opacity var(--transition-medium, 0.3s) var(--ease-out),
+                            box-shadow var(--transition-medium, 0.3s) var(--ease-emphasized);
+
+                        // Initial state
+                        pointer-events: none;
+                        visibility: hidden;
+                        opacity: 0;
+                    }
+
+                    // Visible state
+                    &:is([sidebar-opened=""], [sidebar-opened="true"]) {
+                        opacity: 1;
+                        pointer-events: auto;
+                        transform: translate3d(0, 0, 0);
+                        visibility: visible;
+
+                        @starting-style {
+                            transform: translate3d(0, -20%, 0);
+                        }
+                    }
+
+                    // Backdrop overlay
+                    &:has([sidebar-opened="true"]) .content-box::after {
+                        opacity: 0.6;
+                        pointer-events: auto;
+                    }
+                }
+            }
+
+            // ================================================================
+            // Drop Menu: Bottom Tab Position
+            // ================================================================
+            @at-root :host([sidebar-drop-menu][tab-position="bottom"]) #{$selector} {
+                inset-block-start: auto;
+                inset-block-end: calc(var(--tabbed-bar-block-size) + var(--tabbed-padding-block));
+                transform-origin: bottom center;
+                transform: translate3d(0, 20%, 0);
+
+                &:is([sidebar-opened=""], [sidebar-opened="true"]) {
+                    @starting-style {
+                        transform: translate3d(0, 20%, 0);
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/ui/_speed-dial.scss

@@ -0,0 +1,47 @@
+@use "../interact/viewport" as *;
+
+//
+// Desktop-like launcher / speed-dial grids (orient-aware drag + placement).
+// Use with:
+// - Host: `data-mixin="ui-orientbox"` ancestor, `data-grid-columns` / `data-grid-rows`
+// - Items: `compute_grid_item_cell` (see `.ui-gridlayout` or include mixin on children)
+// - JS: `fest/dom` `resolveGridCellFromClientPoint`, `fest/lure` `bindDraggable`, `fest/core` `normalizeGridLayout` / `redirectCell`
+//
+@layer components {
+    .ui-launcher-grid, .ui-speed-dial-grid {
+        @include compute_orient_grid_layout();
+
+        display: grid;
+        position: relative;
+        container-type: size;
+        box-sizing: border-box;
+        inline-size: stretch;
+        block-size: stretch;
+        min-inline-size: 0px;
+        min-block-size: 0px;
+        pointer-events: none;
+        gap: 0;
+        place-content: center;
+        place-items: center;
+
+        // Override `--layout-c` / `--layout-r` (or set `--grid-cols` / `--grid-rows` in a parent theme) to match `data-grid-*` + app state.
+        --layout-c: 4;
+        --layout-r: 8;
+
+        --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));
+
+        grid-template-columns: repeat(var(--cs-layout-c, 4), minmax(0px, 1fr));
+        grid-template-rows: repeat(var(--cs-layout-r, 8), minmax(0px, 1fr));
+
+        //
+        & > :where(.ui-ws-item, [data-launcher-item]) {
+            @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);
+            pointer-events: auto;
+        }
+    }
+}

package/src/scss/ui/_states.scss

@@ -0,0 +1,4 @@
+/*
+ * MAP:modules/projects/veela.css/src/scss/basic/_states.scss
+ */
+@forward "../basic/states";

package/src/scss/ui/_tables.scss

@@ -0,0 +1,28 @@
+@use "./layout" as layout;
+
+//
+@mixin table-base {
+    inline-size: stretch;
+    border-collapse: collapse;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+}
+
+//
+@mixin table-header {
+    background-color: var(--gradient-primary);
+    color: var(--text-light);
+    padding: var(--space-md) var(--space-sm);
+    text-align: start;
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-sm);
+    white-space: nowrap;
+}
+
+//
+@mixin table-cell {
+    padding: var(--space-sm);
+    border-block-end: 1px solid var(--bg-tertiary);
+    vertical-align: middle;
+}