@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/theme/_effects.scss

@@ -0,0 +1,60 @@
+/*
+ * Filename: _effects.scss
+ * FullPath: modules/projects/veela.css/src/scss/theme/_effects.scss
+ * Reason for changes: Canonical opt-in motion primitives replace the legacy advanced tree.
+ */
+
+@layer theme {
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes slide-up {
+        from {
+            opacity: 0;
+            transform: translateY(1rem);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes scale-in {
+        from {
+            opacity: 0;
+            transform: scale(0.95);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes validation-pulse {
+        50% {
+            transform: scale(1.01);
+        }
+    }
+
+    @keyframes daylight {
+        0%,
+        100% {
+            --light-az: 210deg;
+            --light-alt: 30deg;
+        }
+
+        50% {
+            --light-az: 270deg;
+            --light-alt: 70deg;
+        }
+    }
+}

package/src/scss/theme/index.scss

@@ -0,0 +1,8 @@
+/*
+ * Filename: index.scss
+ * FullPath: modules/projects/veela.css/src/scss/theme/index.scss
+ * Reason for changes: Curated opt-in theme entry-point during the Veela merge.
+ */
+
+@use "../layers";
+@use "./effects";

package/src/scss/{advanced/index.ts → theme/loader.ts}

@@ -1,19 +1,18 @@
 /**
  * Veela CSS - Advanced Runtime Loader
  *
- * Provides full-featured styling with advanced components and effects.
- * Inherits core foundation + adds comprehensive component library.
+ * Loads the opt-in Veela theme effects bundle.
  *
  * @example
  * ```ts
- * import { loadAdvancedStyles } from "@fest-lib/veela/advanced";
+ * import { loadAdvancedStyles } from "@fest-lib/veela";
  * await loadAdvancedStyles();
  * ```
  */
 
 import { loadAsAdopted } from "@fest-lib/dom";
 
-import advancedStyles from "./index.scss?inline";
+import advancedStyles from "../theme/index.scss?inline";
 
 /**
  * Load advanced veela styles

package/src/scss/ui/_bar.scss

@@ -0,0 +1,268 @@
+// ============================================================================
+// Bar Component Styles
+// ============================================================================
+@mixin tabbed-bar($selector: ".bar") {
+    @at-root :host {
+
+        // ================================================================
+        // Slotted Bar Content
+        // ================================================================
+        &::slotted([slot="bar"]), ::slotted([slot="bar"]) {
+            // Grid positioning
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+
+            // Sizing
+            inline-size: stretch;
+            block-size: stretch;
+            max-block-size: 3rem;
+            flex-grow: 1;
+
+            // Alignment
+            place-content: center;
+            place-items: center;
+
+            //
+            background-color: transparent;
+        }
+
+        //
+        #{$selector} {
+            // ================================================================
+            // Base Layout
+            // ================================================================
+            & {
+                display: grid;
+                grid-template-columns:
+                    [sidebar-col] minmax(0px, 0px)
+                    [button-col] minmax(0px, 3.5rem)
+                    [content-col] minmax(0px, 1fr)
+                    [pinned-col] minmax(0px, 3.5rem);
+                grid-template-rows: minmax(0px, 1fr);
+                grid-auto-rows: 0;
+
+                // Grid positioning
+                grid-column: 1 / -1;
+                grid-row: bar-row;
+                z-index: 3;
+                border-radius: 0px;
+
+                // Sizing
+                inline-size: stretch;
+                block-size: stretch;
+                min-block-size: stretch;
+                max-block-size: 3.5rem;
+                box-sizing: border-box;
+
+                // Spacing
+                padding-block: 0.25rem;
+                padding-inline: 0.75rem;
+                gap: 0px;
+
+                // Visual
+                box-shadow: none;
+                overflow: hidden;
+
+                // Interaction
+                pointer-events: auto;
+                background-color: oklch(from --c2-surface(0.15, var(--current, currentColor)) l c h / 0.9);
+                backdrop-filter: blur(1rem);
+                filter: none;
+
+                // Alignment
+                place-content: center;
+                place-items: center;
+            }
+
+            // ================================================================
+            // Child Elements
+            // ================================================================
+            & > :where(*) {
+                grid-row: 1;
+            }
+
+            // ================================================================
+            // Spacing by Tab Position
+            // ================================================================
+            @at-root :host & {
+                margin-block-start: 0px;
+                margin-block-end: var(--space-md);
+            }
+
+            @at-root :host([tab-position="bottom"]) & {
+                margin-block-start: var(--space-md);
+                margin-block-end: 0px;
+            }
+
+            @at-root :host([tab-position="top"]) & {
+                margin-block-start: 0px;
+                margin-block-end: var(--space-md);
+            }
+
+            //
+            .toolbar-slot {
+                padding: 0rem;
+                grid-row: 1 / 1 span;
+                grid-column: content-col;
+                max-inline-size: stretch;
+                max-block-size: 3rem;
+                inline-size: stretch;
+                block-size: stretch;
+                min-inline-size: 0px;
+                min-block-size: 3rem;
+                place-content: center;
+                place-items: center;
+                justify-content: center;
+                align-items: center;
+                gap: 0rem;
+                margin: 0px;
+                inset: 0px;
+                z-index: 99;
+                border-radius: 50cqmin;
+                overflow: hidden;
+                opacity: 0;
+                visibility: hidden;
+                pointer-events: none;
+                transition: opacity var(--duration-normal, 160ms) var(--ease-out, ease),
+                            visibility var(--duration-normal, 160ms) var(--ease-out, ease);
+
+                //
+                &[toolbar-opened="true"] {
+                    opacity: 1;
+                    visibility: visible;
+                    pointer-events: auto;
+                }
+            }
+
+            // ================================================================
+            // Sidebar Toggle Button
+            // ================================================================
+            button.open-sidebar {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                place-content: center;
+                place-items: center;
+                gap: 0rem;
+                margin-inline-end: var(--space-sm);
+
+                // Grid positioning
+                grid-column: button-col;
+                grid-row: 1;
+
+                // Sizing
+                aspect-ratio: 1 / 1;
+                inline-size: fit-content;
+                block-size: stretch;
+                min-inline-size: 3rem;
+                min-block-size: 3rem;
+                max-inline-size: 3rem;
+                box-sizing: border-box;
+                padding: 0.25rem;
+
+                // Visual
+                background-color: transparent;
+                border: 0px none transparent;
+                outline: 0px none transparent;
+                border-radius: 50cqmin;
+                transition: background-color var(--duration-normal, 160ms) var(--ease-out, ease);
+
+                // Interaction
+                cursor: pointer;
+                pointer-events: auto;
+                touch-action: pan-x;
+
+                // Colorization
+                background-color: --c2-surface(var(--_color-shade), var(--current, currentColor));
+
+                // Icon
+                ui-icon {
+                    inline-size: var(--tabbed-icon-size);
+                    block-size: var(--tabbed-icon-size);
+                    min-inline-size: var(--tabbed-icon-size);
+                    min-block-size: var(--tabbed-icon-size);
+                    max-inline-size: var(--tabbed-icon-size);
+                    max-block-size: var(--tabbed-icon-size);
+                    aspect-ratio: 1 / 1;
+                    flex-shrink: 0;
+                }
+
+                // Label
+                span {
+                    display: block;
+                    font-size: 0.8rem;
+                    font-weight: 400;
+                    padding-inline-end: 0.333rem;
+                }
+
+                // Focus state
+                &:focus-visible {
+                    outline: 2px solid color-mix(in oklch, currentColor 35%, transparent);
+                    outline-offset: 2px;
+                }
+            }
+
+            // ================================================================
+            // Tab Buttons
+            // ================================================================
+            :where(.ui-tabbed-box-tab) button {
+                padding: 0.5rem;
+                touch-action: pan-x;
+            }
+
+            // ================================================================
+            // Handle (hidden)
+            // ================================================================
+            .ui-tabbed-box-handle {
+                inline-size: 0;
+                block-size: 0;
+                visibility: hidden;
+                pointer-events: none;
+                place-content: center;
+                place-items: center;
+                overflow: visible;
+                touch-action: pan-x;
+            }
+
+            // ================================================================
+            // Icons
+            // ================================================================
+            ui-icon {
+                content-visibility: visible;
+                pointer-events: none;
+                color: --c2-on-surface(0.0, var(--current, currentColor));
+                --icon-color: --c2-on-surface(0.0, var(--current, currentColor));
+                inline-size: var(--tabbed-icon-size);
+                block-size: var(--tabbed-icon-size);
+            }
+
+            // ================================================================
+            // Alignment by Tab Position
+            // ================================================================
+            @at-root :host([tab-position="bottom"]) #{$selector} & {
+                align-self: end;
+            }
+
+            // ================================================================
+            // Responsive Behavior
+            // ================================================================
+            // Drop menu mode: always show button
+            @at-root :host([sidebar-drop-menu]) & {
+                button.open-sidebar {
+                    display: flex !important;
+                }
+            }
+
+            // Desktop: hide button when sidebar is not in drop menu mode
+            @at-root :host(:not([sidebar-drop-menu])) & {
+                @container (min-inline-size: 800px) {
+                    --button-inline-size: 0px;
+                    & button.open-sidebar {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/ui/_buttons.scss

@@ -0,0 +1,215 @@
+@use "sass:map";
+
+//
+@use "./layout" as layout;
+@use "./typography" as text;
+@use "./color" as color;
+@use "./colorize" as colorize;
+@use "./motion" as motion;
+@use "./utils" as utils;
+@use "./shared-overlays" as overlays;
+
+
+
+// -----------------------------------------------------------------------------
+// Shared base styles
+// -----------------------------------------------------------------------------
+
+@mixin button-structure() {
+    display: inline-flex;
+
+    //
+    place-items: center;
+    place-content: center;
+
+    //
+    gap: var(--button-gap, var(--gap-sm));
+
+    //
+    padding-block: var(--button-padding-y, var(--padding-sm));
+    padding-inline: var(--button-padding-x, var(--padding-lg));
+    min-block-size: var(--button-min-height, fit-content);
+    border-radius: var(--button-radius, var(--radius-full));
+
+    // Cursor and transition
+    cursor: pointer;
+    transition:
+        var(--transition-transform, transform var(--duration-fast) var(--ease-out)),
+        var(--transition-colors, color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out)),
+        var(--transition-opacity, opacity var(--duration-normal) var(--ease-out));
+
+    //
+    pointer-events: auto;
+    border: none;
+    outline: none;
+
+    //
+    position: relative;
+    font-size: text.md3-type("label-large", size);
+
+    //
+    letter-spacing: 0.01em;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    user-select: none;
+
+    //
+    min-inline-size: 0px;
+    block-size: fit-content;
+    inline-size: fit-content;
+    max-block-size: stretch;
+    max-inline-size: stretch;
+    flex-wrap: nowrap;
+
+    //
+    &:disabled {
+        opacity: var(--state-opacity-disabled, 0.38);
+        pointer-events: none;
+    }
+
+    //
+    & > * { max-inline-size: stretch; }
+
+    //
+    & :where(span, a) {
+        display: inline;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        flex-wrap: nowrap;
+    }
+
+    //
+    &:is(input) {
+        display: inline-block;
+    }
+}
+
+//
+@mixin button-overlays($fallback-color) {
+    --md-button-state-color: var(--md-button-state-color, #{$fallback-color});
+
+    @include overlays.state-overlay(var(--md-button-state-color, #{$fallback-color}));
+}
+
+@mixin button-focus-ring() {
+    @include overlays.focus-ring(var(--md-button-state-color, var(--md-primary)));
+}
+
+@mixin button-icon($size: var(--icon-size-lg)) {
+    @include overlays.icon-button($size);
+}
+
+
+
+
+// -----------------------------------------------------------------------------
+// Unified variant mixin
+// -----------------------------------------------------------------------------
+
+@mixin button-variant(
+    $variant: filled,
+    $role: primary,
+    $container-role: secondary-container,
+    $state-role: secondary,
+    $include-base: true
+) {
+    @include colorize.solid-colorize("&", ("shade": 0.05, "tint": 0.0, "scope": "selector", "global-targets": true));
+    @if $include-base { @include button-structure; }
+
+    // Compute the CSS variable to use for state overlays
+    $state-var: if(sass($variant == tonal): color.md3-var($state-role); else: color.md3-var($role));
+
+    // Common CSS variable setup
+    --md-button-bg: color-mix(in oklch, var(--color-surface, var(--surface-color, transparent)) 90%, var(--color-on-surface, var(--on-surface-color, transparent)));
+    --md-button-on: var(--color-on-surface, var(--on-surface-color, currentColor));
+    --md-button-outline-color: var(--border-color, transparent);
+
+    // Variant-specific styles
+    @if $variant == outlined {
+        background-color: transparent;
+        color: var(--md-button-on, var(--on-surface-color, currentColor));
+        border: 1px solid var(--md-button-outline-color, var(#{color.md3-var(outline)}));
+    } @else if $variant == text {
+        background-color: transparent;
+        color: var(--md-button-on, var(--on-surface-color, currentColor));
+        border: none;
+    } @else {
+        // filled, elevated, tonal
+        background-color: var(--color-surface, var(--surface-color, transparent));
+        color: var(--md-button-on, var(--color-on-surface, currentColor));
+        border: none;
+    }
+
+    // Apply state overlays and focus ring
+    @include button-overlays(var(#{$state-var}));
+    @include button-focus-ring;
+}
+
+
+// -----------------------------------------------------------------------------
+// Variant mixins (backward compatibility wrappers)
+// -----------------------------------------------------------------------------
+
+@mixin button-filled($role: primary, $include-base: true) {
+    @include button-variant(filled, $role, $include-base: $include-base);
+}
+
+@mixin button-elevated($role: primary, $include-base: true) {
+    @include button-variant(elevated, $role, $include-base: $include-base);
+}
+
+@mixin button-tonal($container-role: secondary-container, $state-role: secondary, $include-base: true) {
+    @include button-variant(tonal, $state-role, $container-role, $state-role, $include-base: $include-base);
+}
+
+@mixin button-outlined($role: primary, $include-base: true) {
+    @include button-variant(outlined, $role, $include-base: $include-base);
+}
+
+@mixin button-text($role: primary, $include-base: true) {
+    @include button-variant(text, $role, $include-base: $include-base);
+}
+
+
+
+
+
+// -----------------------------------------------------------------------------
+// Button base mixins
+// -----------------------------------------------------------------------------
+
+
+@mixin button-base {
+    @include button-structure;
+    @include button-filled;
+}
+
+//
+@mixin button-interactions($transition: var(--transition-base, var(--duration-normal))) {
+    @include motion.transition(all, $transition);
+}
+
+//
+@mixin button-colors() {
+    @include button-structure;
+    @include button-filled;
+}
+
+//
+@mixin button-base-variant() {
+    // Reuse unified structure with alternate sizing tokens
+    @include button-structure;
+    @include button-interactions;
+    @include button-colors;
+}
+
+//
+@mixin toolbar-button {
+    font-size: var(--font-size-sm);
+
+    //
+    @include layout.container-query("md") { span { display: none; } }
+}

package/src/scss/ui/_chrome-mixins.scss

@@ -0,0 +1,104 @@
+/*
+ * FIND:veela-ui
+ * TAG:veela,fl-ui
+ * WHY: Chrome mixins used by modal/sidebar/toolbars. SoT is veela, not fl.ui/library.
+ */
+
+@mixin vstack($gap: var(--space-md)) {
+    display: flex;
+    flex-direction: column;
+    gap: $gap;
+}
+
+@mixin inline-toolbar($gap: var(--space-sm)) {
+    display: inline-flex;
+    align-items: center;
+    gap: $gap;
+    flex-wrap: nowrap;
+}
+
+@mixin nav-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    min-block-size: var(--touch-min);
+    padding-inline: var(--space-md);
+    border-radius: var(--radius-md);
+    color: var(--color-on-surface);
+    transition: background-color var(--transition-fast), color var(--transition-fast);
+
+    &:where(:hover, :focus-visible) {
+        background: var(--color-surface-hover);
+    }
+}
+
+@mixin tonal-surface($role: surface, $opacity: var(--surface-opacity-subtle), $radius: var(--radius-md), $border: null, $shadow: 0, $clip: false) {
+    background-color: color-mix(in oklch, var(--color-#{$role}, var(--#{$role}-color, var(--color-surface, transparent))) calc(100% * #{$opacity}), transparent);
+    border-radius: $radius;
+
+    @if $border != null {
+        border: $border solid var(--border-color, transparent);
+    }
+
+    @if $shadow != 0 {
+        box-shadow: var(--shadow-#{$shadow}, none);
+    }
+
+    @if $clip {
+        overflow: hidden;
+    }
+}
+
+@mixin tonal-list($role: surface, $opacity: var(--surface-opacity-subtle), $radius: var(--radius-md), $border: 0) {
+    @include tonal-surface($role, $opacity, $radius, $border);
+}
+
+@mixin glass-backdrop() {
+    backdrop-filter: blur(var(--backdrop-blur, 16px));
+    background-color: var(--backdrop-color, color-mix(in oklch, var(--color-surface, var(--surface-color, black)) 40%, transparent));
+}
+
+@mixin backdrop-blur($strength: "default") {
+    $blur: if(sass($strength == "subtle"): 10px; else: 18px);
+    backdrop-filter: blur($blur);
+    -webkit-backdrop-filter: blur($blur);
+}
+
+@mixin container-inline() {
+    inline-size: min(100%, var(--container-inline-size, 100%));
+}
+
+@mixin text-heading($role: "headline-small", $align: start) {
+    font: var(--type-#{$role}, inherit);
+    text-align: $align;
+}
+
+@mixin text-body($role: "body-medium") {
+    font: var(--type-#{$role}, inherit);
+}
+
+@mixin text-label($role: "label-medium", $strong: false) {
+    font: var(--type-#{$role}, inherit);
+
+    @if $strong {
+        font-weight: var(--font-weight-semibold, 600);
+    }
+}
+
+@mixin section-stack($gap: var(--space-md)) {
+    @include vstack($gap);
+}
+
+@mixin field-stack($gap: var(--space-sm)) {
+    @include vstack($gap);
+}
+
+@mixin scrollbars($size: 8px, $color: currentColor) {
+    scrollbar-width: thin;
+    scrollbar-color: $color transparent;
+
+    &::-webkit-scrollbar {
+        inline-size: $size;
+        block-size: $size;
+    }
+}

package/src/scss/ui/_color.scss

@@ -0,0 +1,3 @@
+@function md3-var($role) {
+    @return "--md-#{$role}";
+}

package/src/scss/ui/_colorize.scss

@@ -0,0 +1,5 @@
+@mixin solid-colorize($selector: "&", $options: ()) {
+    #{$selector} {
+        color: var(--on-surface-color, currentColor);
+    }
+}

package/src/scss/{advanced/layout → ui}/_content.scss

@@ -1,4 +1,3 @@
-@use "veela-lib" as *;
 
 // ============================================================================
 // Content Component Styles

package/src/scss/ui/_core-layout.scss

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