@fest-lib/fl-ui 0.1.1

package/src/styles/ui/_tabs.scss

@@ -0,0 +1,406 @@
+@use "sass:string";
+@use "veela-lib" as *;
+
+// ============================================================================
+// Tabs Component Styles
+// ============================================================================
+@mixin tabbed-box-tabs($selector: ".ui-tabbed-box-tabs") {
+    @at-root :host {
+        #{$selector} {
+            // ================================================================
+            // Base Layout
+            // ================================================================
+            & {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                // Grid positioning
+                grid-column: content-col;
+                grid-row: 1;
+
+                // Sizing
+                max-inline-size: stretch;
+                max-block-size: 3rem;
+                inline-size: stretch;
+                block-size: fit-content;
+                min-block-size: 3rem;
+
+                // Spacing
+                gap: 0.25rem;
+                padding-block: 0.25rem;
+                padding-inline: 0.25rem;
+
+                // Visual
+                border-radius: 50cqmin;
+                overflow: hidden;
+                position: relative;
+                contain: strict;
+
+                // Scrolling
+                scrollbar-gutter: stable;
+                overscroll-behavior-inline: contain;
+                scroll-behavior: smooth;
+
+                // Interaction
+                pointer-events: auto;
+                touch-action: pan-x;
+
+                // Alignment
+                place-content: center flex-start;
+                place-items: center flex-start;
+                text-align: start;
+                justify-content: safe flex-start;
+                justify-items: safe flex-start;
+                z-index: 90;
+            }
+
+
+
+            // ================================================================
+            // Tab Items
+            // ================================================================
+            & :where(.ui-tabbed-box-tab) {
+                display: flex;
+                flex-direction: row;
+                flex-shrink: 0;
+                position: relative;
+                isolation: isolate;
+
+                // Sizing
+                min-inline-size: 3rem;
+                inline-size: fit-content;
+
+                min-block-size: 2.5rem;
+                block-size: fit-content;
+                max-block-size: 2.5rem;
+                pointer-events: auto;
+
+                // Spacing
+                gap: 0.25rem;
+                padding-block: 0.25rem;
+                padding-inline: 0.125rem;
+
+                // Visual
+                border-radius: 50cqmin;
+                background-color: transparent;
+                color: color-mix(in oklch, var(--md3-on-surface) 85%, transparent);
+                letter-spacing: 0.01em;
+                overflow: visible;
+
+                // Interaction
+                cursor: pointer;
+                touch-action: pan-x;
+                transition: color var(--duration-normal) var(--ease-out),
+                            transform var(--duration-fast) var(--ease-emphasized);
+
+                // Alignment
+                place-content: center;
+                place-items: center;
+                text-align: center;
+
+                // Performance
+                content-visibility: visible;
+
+                // ============================================================
+                // Active Indicator
+                // ============================================================
+                &::after {
+                    content: "";
+                    position: absolute;
+                    inset-inline: clamp(0.5rem, 4cqi, 1rem);
+                    inset-inline-end: 3rem;
+                    inset-block-end: calc(var(--tabbed-indicator-height) * -1);
+                    block-size: var(--tabbed-indicator-height);
+                    border-radius: var(--tabbed-indicator-height);
+                    background: currentColor;
+                    opacity: 0;
+                    transform: translate3d(0, 50%, 0) scaleX(0.6);
+                    transition: transform var(--tabbed-indicator-duration) var(--tabbed-indicator-ease),
+                                opacity var(--tabbed-indicator-duration) var(--tabbed-indicator-ease);
+                    overflow: visible;
+                    place-content: center;
+                    place-items: center;
+                    text-align: center;
+                }
+
+                // Bottom position: indicator on top
+                :host([tab-position="bottom"]) &::after {
+                    inset-block-start: calc(var(--tabbed-indicator-height) * -1);
+                    inset-block-end: auto;
+                    transform: translate3d(0, -50%, 0) scaleX(0.6);
+                }
+
+                // ============================================================
+                // Active State
+                // ============================================================
+                &:where([aria-selected="true"], [active], .is-active, .active) {
+                    color: var(--md3-on-primary);
+                    transform: translateY(-2px);
+                    place-content: center;
+                    place-items: center;
+                    text-align: center;
+
+                    &::after {
+                        opacity: 1;
+                        transform: translate3d(0, 0, 0) scaleX(1);
+                        background: var(--md3-on-primary);
+                    }
+                }
+
+                // ============================================================
+                // Disabled State
+                // ============================================================
+                &:disabled {
+                    opacity: var(--state-opacity-disabled, 0.38);
+                }
+
+                // ============================================================
+                // Tab Label
+                // ============================================================
+                :where(.ui-tabbed-box-tab-label) {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    gap: var(--gap-3xs, 0.2rem);
+                    color: inherit;
+                    pointer-events: none;
+                    text-align: inherit;
+                    line-height: var(--leading-tight, 1.1);
+                    content-visibility: visible;
+                    margin-inline: 1rem;
+                    block-size: fit-content;
+                    inline-size: fit-content;
+                }
+
+                // ============================================================
+                // Close Button
+                // ============================================================
+                :where(.ui-tabbed-box-tab-close) {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-sizing: border-box;
+                    aspect-ratio: 1 / 1;
+                    flex-shrink: 0;
+
+                    // Sizing
+                    inline-size: fit-content;
+                    block-size: fit-content;
+                    min-inline-size: 2.25rem;
+                    min-block-size: 2.25rem;
+                    max-inline-size: 2.25rem;
+                    max-block-size: 2.25rem;
+                    padding: 0.25rem;
+                    gap: 0px;
+
+                    // Visual
+                    border-radius: var(--radius-full);
+                    background-color: transparent;
+                    border: none;
+                    outline: none;
+                    color: var(--tabbed-close-color);
+
+                    // Interaction
+                    cursor: pointer;
+                    transition: color var(--duration-normal) var(--ease-out),
+                                transform var(--duration-fast) var(--ease-emphasized);
+
+                    // Performance
+                    content-visibility: visible;
+
+                    // Icon
+                    ui-icon {
+                        content-visibility: visible;
+                        color: --c2-on-surface(0.0, var(--current, currentColor));
+                        --icon-color: --c2-on-surface(0.0, var(--current, currentColor));
+                        inline-size: calc(var(--tabbed-close-size) * 0.5);
+                        block-size: calc(var(--tabbed-close-size) * 0.5);
+                    }
+
+                    // States
+                    &:focus-visible {
+                        outline: 2px solid color-mix(in oklch, currentColor 35%, transparent);
+                        outline-offset: 2px;
+                    }
+
+                    &:hover {
+                        color: color-mix(in oklch, var(--md3-on-surface) 92%, transparent);
+                    }
+
+                    &:active {
+                        transform: scale(0.9);
+                    }
+                }
+
+                // Active tab: close button styling
+                &:where([aria-selected="true"], [active], .is-active, .active) {
+                    .ui-tabbed-box-tab-close {
+                        color: color-mix(in oklch, var(--surface-on-primary) 85%, transparent);
+                        --icon-color: color-mix(in oklch, var(--surface-on-primary) 85%, transparent);
+                    }
+                }
+
+                // ================================================================
+                // Icons
+                // ================================================================
+                ui-icon {
+                    color: --c2-on-surface(0.0, var(--current, currentColor));
+                    --icon-color: --c2-on-surface(0.0, var(--current, currentColor));
+
+                    // Sizing
+                    inline-size: var(--tabbed-icon-size);
+                    block-size: var(--tabbed-icon-size);
+                    aspect-ratio: 1 / 1;
+                    max-inline-size: stretch;
+                    max-block-size: stretch;
+                    padding: 0px;
+
+                    // Layout
+                    content-visibility: visible;
+                    place-content: center;
+                    place-items: center;
+                    text-align: center;
+                }
+
+                // ================================================================
+                // Spacing by Tab Position
+                // ================================================================
+                @at-root :host([tab-position="bottom"]) #{$selector} & {
+                    margin-block-start: var(--tabbed-tabs-block-gap);
+                    margin-block-end: 0;
+                }
+
+                // ================================================================
+                // Scroll Gradients
+                // ================================================================
+                &::before,
+                &::after {
+                    content: "";
+                    position: absolute;
+                    inset-block: 0;
+                    inline-size: min(1.75rem, 8%);
+                    pointer-events: none;
+                    opacity: clamp(0, calc(var(--scroll-gradient, 0)), 1);
+                    transition: opacity var(--duration-normal) var(--ease-out);
+                    background: linear-gradient(90deg, color-mix(in oklch, var(--md3-surface) 70%, transparent) 0%, transparent 100%);
+                }
+
+                &::before {
+                    inset-inline-start: 0;
+                    transform: scaleX(-1);
+                    --scroll-gradient: attr(data-scrollable-start number, 0);
+                }
+
+                &::after {
+                    inset-inline-end: 0;
+                    --scroll-gradient: attr(data-scrollable-end number, 0);
+                }
+
+                // Mask for scrollable tabs
+                @supports (mask-image: linear-gradient(#0000, #000)) {
+                    &[data-scrollable="true"] {
+                        mask-image: linear-gradient(to right, transparent 0%, black min(2.5rem, 18%), black calc(100% - min(2.5rem, 18%)), transparent 100%);
+                    }
+                }
+
+                // ================================================================
+                // Touch Actions
+                // ================================================================
+                &, & *, & button {
+                    touch-action: pan-x;
+                }
+            }
+
+            // ============================================================
+            // Pinned State: Tab Adjustments
+            // ============================================================
+            &.pinned {
+                display: grid;
+                grid-template-columns: minmax(0px, 1fr);
+                grid-template-rows: minmax(0px, 1fr);
+                grid-column: pinned-col;
+
+                // Sizing
+                inline-size: max-content;
+                block-size: stretch;
+                overflow: visible;
+                contain: none;
+
+                // Spacing
+                padding: 0px;
+                padding-inline: 0px;
+                margin-inline: 0px;
+                gap: 0px;
+                margin-inline-start: var(--space-sm);
+
+                // Visual
+                background-color: transparent;
+                border-radius: 0px;
+                line-height: 0;
+                font-size: 0px;
+
+                // Alignment
+                place-content: center !important;
+                place-items: center !important;
+                text-align: center !important;
+
+                .ui-tabbed-box-tab {
+                    display: grid;
+                    grid-template-columns: minmax(0px, 1fr);
+                    grid-template-rows: minmax(0px, 1fr);
+
+                    // Sizing
+                    inline-size: fit-content;
+                    min-inline-size: 3rem;
+                    min-block-size: 3rem;
+                    max-block-size: 3rem;
+                    aspect-ratio: 1 / 1;
+                    inset: 0px;
+                    overflow: hidden;
+                    pointer-events: auto;
+
+                    // Visual
+                    border-radius: 50cqmin;
+                    font-size: 0px;
+                    line-height: 0;
+
+                    // Alignment
+                    place-content: center !important;
+                    place-items: center !important;
+                    text-align: center !important;
+
+                    //
+                    gap: 0px !important;
+                    padding-inline: 0px !important;
+                    block-size: stretch !important;
+
+                    & > * {
+                        grid-row: 1 / -1;
+                        grid-column: 1 / -1;
+                        background-color: transparent;
+                    }
+                }
+
+                .ui-tabbed-box-tab-close {
+                    display: none !important;
+                    margin-inline: 0px !important;
+                }
+
+                &::after {
+                    margin: 0px !important;
+                    inset: 0px !important;
+                }
+
+                ui-icon {
+                    padding: 0px;
+                    inline-size: 2rem;
+                    block-size: 2rem;
+                }
+            }
+
+        }
+
+
+    }
+}

package/src/styles/ui/_taskbar.scss

@@ -0,0 +1,215 @@
+@use "../misc/layout" as l;
+@use "../misc/utils" as utils;
+
+// Variables for taskbar theming and sizing
+@mixin taskbar-variables {
+    --taskbar-height: clamp(44px, 5svh, 56px);
+    --taskbar-padding-inline: clamp(8px, 2vw, 16px);
+    --taskbar-gap: clamp(6px, 1.2vw, 10px);
+    --task-size: clamp(32px, 4.2svh, 40px);
+    --task-radius: 10px;
+    --taskbar-bg: color-mix(in oklab, var(--c2-surface(0.0, var(--current)), #0b0b0c) 70%, transparent);
+    --taskbar-border: color-mix(in oklab, var(--c2-on-surface(0.0, var(--current)), #ffffff) 15%, transparent);
+    --taskbar-shadow: 0 -8px 24px -12px color-mix(in oklab, #000 65%, transparent);
+}
+
+// Base layout for taskbar
+@mixin taskbar-layout {
+    @include l.display(flex, row, center, start);
+
+    //
+    & {
+        z-index: 1000;
+        position: fixed;
+        inset-block-end: env(safe-area-inset-bottom, 0px);
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        overflow: hidden;
+        overflow-x: scroll;
+        border-radius: 0.5rem;
+        scrollbar-width: none;
+        scrollbar-color: transparent transparent;
+        scrollbar-gutter: stable;
+        padding: 0px;
+        border: 0px none transparent;
+    }
+
+    //
+    & {
+        min-inline-size: 0px;
+        inline-size: fit-content;
+        block-size: calc(var(--taskbar-height) + env(safe-area-inset-bottom, 0px));
+    }
+
+    //
+    & {
+        gap: var(--taskbar-gap);
+    }
+
+    //
+    & {
+        background-color: transparent;
+        backdrop-filter: saturate(120%) blur(12px);
+        -webkit-backdrop-filter: saturate(120%) blur(12px);
+    }
+
+    //
+    & {
+        box-shadow: var(--taskbar-shadow);
+    }
+
+    //
+    & {
+        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none;
+        scrollbar-color: transparent transparent;
+    }
+
+    //
+    &::-webkit-scrollbar {
+        display: none;
+        inline-size: 0;
+        block-size: 0;
+    }
+
+    //
+    & {
+        scroll-snap-type: x proximity;
+    }
+}
+
+// Desktop specific adjustments
+@mixin taskbar-type-desktop {
+    & {
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
+
+// Mobile specific adjustments
+@mixin taskbar-type-mobile {
+    & {
+        place-content: center;
+        place-items: center;
+        place-self: center;
+        flex-direction: row;
+        justify-content: space-evenly;
+        gap: clamp(8px, 3vw, 18px);
+        padding-inline: clamp(10px, 4vw, 18px);
+    }
+}
+
+// Slot children defaults
+@mixin taskbar-children {
+    & > ::slotted(ui-task) {
+        scroll-snap-align: start;
+        inline-size: fit-content;
+    }
+}
+
+// Focused task colors parameterized by scheme
+@mixin taskbar-focus-colors($bg: var(--c2-surface(0.0, var(--current))), $fg: var(--c2-on-surface(0.0, var(--current)))) {
+    & > ::slotted(ui-task[data-focus]) { background-color: $bg; color: $fg; }
+}
+
+// Task base styles shared by any task-like button
+@mixin task-base {
+    --task-size: clamp(32px, 4.2svh, 40px);
+    --task-radius: 10px;
+    --task-bg: color-mix(in oklab, var(--c2-surface(0.0, var(--current)), #0b0b0c) 12%, transparent);
+    --task-fg: var(--c2-on-surface(0.0, var(--current)));
+    --task-border: color-mix(in oklab, var(--c2-on-surface(0.0, var(--current)), #ffffff) 10%, transparent);
+
+    & {
+        display: inline-grid !important;
+        grid-template-areas: "icon title";
+        grid-auto-flow: column;
+        grid-template-columns: minmax(0px, 1fr);
+        grid-template-rows: minmax(0px, 1fr);
+        place-content: center !important;
+        place-items: center !important;
+        gap: 0px;
+        margin: 0px;
+        padding: 0px;
+        overflow: hidden;
+        scrollbar-width: none;
+        scrollbar-color: transparent transparent;
+        scrollbar-gutter: stable;
+        box-sizing: border-box;
+    }
+
+    & {
+        border-radius: 0px;
+        border: 0px none transparent;
+        border-block-end-width: 0.25rem;
+        border-block-end-style: solid;
+        border-block-end-color: transparent;
+        padding-block-start: 0.25rem;
+    }
+
+    & {
+        inline-size: calc(var(--task-size) * 1.4);
+        block-size: stretch;
+    }
+
+    & {
+        color: var(--task-fg);
+        --icon-color: var(--task-fg);
+        background-color: var(--task-bg);
+        backdrop-filter: blur(6px) saturate(120%);
+        -webkit-backdrop-filter: blur(6px) saturate(120%);
+    }
+
+    & {
+        box-shadow:
+            0 1px 0 color-mix(in oklab, #fff 6%, transparent) inset,
+        0 6px 14px -8px color-mix(in oklab, #000 50%, transparent);
+    }
+
+    & {
+        cursor: pointer;
+        transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
+    }
+}
+
+// Task states
+@mixin task-states {
+    @include utils.when-focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--c2-on-surface(0.0, var(--current)), #ffffff) 70%, transparent);
+        outline-offset: 2px;
+    }
+
+    @include utils.when-hover {
+        --task-bg: color-mix(in oklab, var(--c2-surface(0.0, var(--current)), #0b0b0c) 18%, transparent);
+        transform: translateY(1px) scale(.98);
+    }
+}
+
+// Task slots
+@mixin task-slots {
+    & > .task-icon {
+        & {
+            padding: 0.25rem;
+            inline-size: var(--task-size);
+            block-size: var(--task-size);
+        }
+
+        & > ui-icon {
+            inline-size: auto;
+            block-size: stretch;
+            aspect-ratio: 1 / 1;
+            color: var(--icon-color);
+        }
+    }
+
+    & > .task-title {
+        & {
+            grid-area: title;
+            font: 500 12px/1.2 system-ui, ui-sans-serif;
+            opacity: .9;
+            display: none;
+        }
+    }
+}