@fest-lib/veela 0.1.1

package/src/scss/basic/misc/_queries.scss

@@ -0,0 +1,34 @@
+// Query utilities: container and media helpers with shared breakpoints
+
+$breakpoints: (
+	"sm": 480px,
+	"md": 640px,
+	"lg": 768px,
+	"xl": 1024px,
+	"2xl": 1280px
+);
+
+@mixin mq($cond) {
+	@media #{$cond} { @content; }
+}
+
+@mixin mq-up($key) {
+	$val: map-get($breakpoints, $key);
+	@media (min-width: $val) { @content; }
+}
+
+@mixin mq-down($key) {
+	$val: map-get($breakpoints, $key);
+	@media (max-width: $val) { @content; }
+}
+
+@mixin cq($cond) {
+	@container #{$cond} { @content; }
+}
+
+@mixin cq-size($min: null, $max: null) {
+	$parts: ();
+	@if $min != null { $parts: append($parts, '(min-inline-size: ' + $min + ')'); }
+	@if $max != null { $parts: append($parts, '(max-inline-size: ' + $max + ')'); }
+	@container #{join($parts, ' and ')} { @content; }
+}

package/src/scss/basic/misc/_shared.scss

@@ -0,0 +1,232 @@
+/**
+ * Veela CSS - Core Shared Utilities
+ *
+ * Reusable mixins, placeholders, and common patterns for core layout styles.
+ * Reduces duplication across normalize, states, layout, and gridbox modules.
+ */
+
+/* ========================================================================
+   Meta-level: Placeholders for zero-specificity selector groups
+   ======================================================================== */
+
+/**
+ * Reset border and outline styles (transparent, none, 0px)
+ * Use: @extend %reset-borders; or include in selectors
+ */
+%reset-borders {
+    border: none 0px transparent;
+    outline: none 0px transparent;
+}
+
+/**
+ * Disable user interaction (pointer-events, touch-action, user-select)
+ * Use: @extend %disable-interaction;
+ */
+%disable-interaction {
+    pointer-events: none;
+    touch-action: none;
+    user-select: none;
+}
+
+/**
+ * Lock interaction (pointer-events: none + touch + select disabled)
+ * Stronger version with explicit !important for state overrides
+ */
+%lock-interaction {
+    pointer-events: none !important;
+    touch-action: none !important;
+    user-select: none !important;
+}
+
+/**
+ * Basic box-model reset: margin, padding, box-sizing
+ */
+%reset-box-model {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* ========================================================================
+   Mixins: Common property/style groups
+   ======================================================================== */
+
+/**
+ * Reset box model (margin, padding, sizing)
+ * @usage: @include reset-box-model();
+ */
+@mixin reset-box-model {
+    /*margin: 0;
+    padding: 0;*/
+    box-sizing: border-box;
+}
+
+/**
+ * Reset borders and outlines
+ * @usage: @include reset-borders();
+ */
+@mixin reset-borders {
+    border: none 0px transparent;
+    outline: none 0px transparent;
+}
+
+/**
+ * Disable interaction via pointer-events, touch-action, user-select
+ * @param $importance [false] - if true, use !important
+ * @usage: @include disable-interaction(); or @include disable-interaction(true);
+ */
+@mixin disable-interaction($importance: false) {
+    $imp: if(sass($importance): !important; else: null);
+    pointer-events: none if(sass($imp != null): #{$imp}; else: null);
+    touch-action: none if(sass($imp != null): #{$imp}; else: null);
+    user-select: none if(sass($imp != null): #{$imp}; else: null);
+}
+
+/**
+ * Reset form element appearance (font, line-height, margin, text-transform)
+ * @usage: @include reset-form-appearance();
+ */
+@mixin reset-form-appearance {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    margin: 0;
+    border: none;
+    outline: none;
+}
+
+/**
+ * Scrollbar styling for webkit browsers
+ * @param $size [8px] - scrollbar width/height
+ * @param $color [var(--color-scrollbar, currentColor)] - thumb color
+ * @param $radius [var(--border-radius, 4px)] - thumb border-radius
+ * @usage: @include scrollbar-webkit(8px, var(--color-scrollbar));
+ */
+@mixin scrollbar-webkit($size: 8px, $color: var(--color-scrollbar, currentColor), $radius: var(--border-radius, 4px)) {
+    &::-webkit-scrollbar {
+        inline-size: $size;
+        block-size: $size;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $color;
+        border-radius: $radius;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: var(--color-outline, #9ca3af);
+    }
+}
+
+/**
+ * Scrollbar styling (both webkit and Firefox)
+ * @param $color [var(--color-scrollbar, currentColor)] - scrollbar color
+ * @usage: @include scrollbar-styling(var(--color-scrollbar));
+ */
+@mixin scrollbar-styling($color: var(--color-scrollbar, currentColor)) {
+    scrollbar-width: thin;
+    scrollbar-color: $color transparent;
+
+    @include scrollbar-webkit(var(--scrollbar-size, 8px), $color);
+}
+
+/**
+ * Flex row layout with space-between and wrap
+ * Used for nav-like layouts
+ * @usage: @include flex-row-wrap();
+ */
+@mixin flex-row-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+/**
+ * Flex column centered (used for labels, stacked content)
+ * @usage: @include flex-column-center();
+ */
+@mixin flex-column-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+/**
+ * Stretch to viewport size (used for root/body containers)
+ * Combines inline-size, block-size with min/max constraints
+ * @usage: @include stretch-viewport();
+ */
+@mixin stretch-viewport {
+    inline-size: stretch;
+    block-size: stretch;
+    min-inline-size: 0px;
+    min-block-size: 0px;
+    max-inline-size: min(100%, min(100cqi, 100dvi));
+    max-block-size: min(100%, min(100cqb, 100dvb));
+}
+
+/**
+ * Hidden state: display none + pointer/touch disabled
+ * @param $opacity [false] - if true, also apply opacity: 0
+ * @usage: @include hidden-state(); or @include hidden-state(true);
+ */
+@mixin hidden-state($opacity: false) {
+    display: none !important;
+    pointer-events: none !important;
+    touch-action: none !important;
+    @if $opacity {
+        opacity: 0;
+        visibility: collapse;
+    }
+}
+
+/**
+ * Prevent dragging of element
+ * @usage: @include no-drag();
+ */
+@mixin no-drag {
+    -webkit-user-drag: none;
+    -moz-user-drag: none;
+    user-select: none;
+}
+
+/**
+ * Focus ring without outline (M3-style)
+ * @param $color [var(--color-primary, #0066cc)] - focus color
+ * @param $radius [var(--radius-sm, 8px)] - border radius
+ * @usage: @include focus-ring(var(--color-primary));
+ */
+@mixin focus-ring($color: var(--color-primary, #0066cc), $radius: var(--radius-sm, 8px)) {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklab, $color 35%, transparent);
+    border-radius: $radius;
+}
+
+/**
+ * Media element sizing (img, video, canvas, svg)
+ * @usage: @include media-sizing();
+ */
+@mixin media-sizing {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+}
+
+/**
+ * Code element font and sizing
+ * @param $font [var(--font-family-mono, 'SF Mono', 'Monaco', 'Roboto Mono', monospace)] - monospace font
+ * @usage: @include code-styling();
+ */
+@mixin code-styling($font: var(--font-family-mono, 'SF Mono', 'Monaco', 'Roboto Mono', monospace)) {
+    font-family: $font;
+    background-color: var(--bgColor-muted);
+    border-radius: 0.3em;
+    padding: 0.2em 0.4em;
+    font-size: 85%;
+}

package/src/scss/basic/misc/_states.scss

@@ -0,0 +1,135 @@
+@use "./shared" as *;
+
+//
+@layer ux-existence {
+    //
+    *[data-hidden]:not([data-hidden="false"]):not([data-opacity-animation]) {
+        &, * {
+            display: none !important;
+            pointer-events: none !important;
+            touch-action: none !important;
+            content-visibility: auto !important;
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"]:not([data-opacity-animation]))) {
+        &, *, ::slotted(*) {
+            display: none !important;
+            pointer-events: none !important;
+            touch-action: none !important;
+            content-visibility: auto !important;
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"])) {
+        &, *, ::slotted(*) {
+            pointer-events: none !important;
+            touch-action: none !important;
+        }
+    }
+
+    //
+    *[data-hidden]:not([data-hidden="false"]) {
+        &, * {
+            pointer-events: none !important;
+            touch-action: none !important;
+        }
+    }
+    
+    //
+    *[data-hidden]:not([data-hidden="false"]):not([data-opacity-animation]) {
+        &, * {
+            @include hidden-state(true);
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"]:not([data-opacity-animation]))) {
+        &, *, ::slotted(*) {
+            @include hidden-state(true);
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"])) {
+        &, *, ::slotted(*) {
+            @include disable-interaction(true);
+        }
+    }
+
+    //
+    *[data-hidden]:not([data-hidden="false"]) {
+        &, * {
+            @include disable-interaction(true);
+        }
+    }
+
+    //
+    *[data-hidden]:not([data-hidden="false"]):not([data-opacity-animation]) {
+        &, * {
+            display: none !important;
+            pointer-events: none !important;
+            touch-action: none !important;
+            content-visibility: auto !important;
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"]:not([data-opacity-animation]))) {
+        &, *, ::slotted(*) {
+            display: none !important;
+            pointer-events: none !important;
+            touch-action: none !important;
+            content-visibility: auto !important;
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"])) {
+        &, *, ::slotted(*) {
+            pointer-events: none !important;
+            touch-action: none !important;
+        }
+    }
+
+    //
+    *[data-hidden]:not([data-hidden="false"]) {
+        &, * {
+            pointer-events: none !important;
+            touch-action: none !important;
+        }
+    }
+}
+
+//
+@layer ux-existence {
+    //
+    *[data-hidden]:not([data-hidden="false"]):not([data-opacity-animation]) {
+        &, * {
+            @include hidden-state(true);
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"]:not([data-opacity-animation]))) {
+        &, *, ::slotted(*) {
+            @include hidden-state(true);
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"])) {
+        &, *, ::slotted(*) {
+            @include disable-interaction(true);
+        }
+    }
+
+    //
+    *[data-hidden]:not([data-hidden="false"]) {
+        &, * {
+            @include disable-interaction(true);
+        }
+    }
+}

package/src/scss/basic/misc/_tokens.scss

@@ -0,0 +1,78 @@
+/*
+ * Filename: _tokens.scss
+ * FullPath: modules/projects/veela.css/src/scss/basic/misc/_tokens.scss
+ * Change date and time: 12.30.00_06.08.2026
+ * Reason for changes: Document canonical SoT for color tokens.
+ */
+/*
+ * INVARIANT: Intentional per-bundle SCSS alias shim for the vl-basic bundle.
+ * Produces NO CSS output — only `$color-*` / `$space-*` / `$radius-*` / `$font-*` SCSS aliases.
+ * Canonical color-token source of truth: `core/misc/_tokens.scss` (full bundle).
+ * Do NOT `@forward` canonical here — would emit the full `@layer tokens` CSS into the
+ * lightweight vl-basic bundle and break its size semantics.
+ */
+
+// Design tokens: SCSS aliases for CSS custom properties
+// Keep aliases small and meaningful to encourage reuse
+
+$space-2xs: var(--space-2xs);
+$space-xs: var(--space-xs);
+$space-sm: var(--space-sm);
+$space-md: var(--space-md);
+$space-lg: var(--space-lg);
+$space-xl: var(--space-xl);
+$space-2xl: var(--space-2xl);
+
+$radius-xs: var(--radius-xs);
+$radius-sm: var(--radius-sm);
+$radius-md: var(--radius-md);
+$radius-lg: var(--radius-lg);
+$radius-xl: var(--radius-xl);
+$radius-full: var(--radius-full);
+
+$font-xs: var(--font-xs);
+$font-sm: var(--font-sm);
+$font-base: var(--font-base);
+$font-md: var(--font-md);
+$font-lg: var(--font-lg);
+$font-xl: var(--font-xl);
+$font-2xl: var(--font-2xl);
+
+$font-weight-normal: var(--font-weight-normal);
+$font-weight-medium: var(--font-weight-medium);
+$font-weight-semibold: var(--font-weight-semibold);
+$font-weight-bold: var(--font-weight-bold);
+$font-weight-extrabold: var(--font-weight-extrabold);
+
+$font-family-base: var(--font-family-base);
+$font-family-mono: var(--font-family-mono);
+
+$color-primary: var(--md3-primary);
+$color-primary-container: var(--md3-primary-container);
+$color-secondary: var(--md3-secondary);
+$color-tertiary: var(--md3-tertiary);
+$color-surface: var(--md3-surface);
+$color-surface-variant: var(--md3-surface-variant);
+$color-surface-container: var(--md3-surface-container);
+$color-outline: var(--md3-outline);
+$color-outline-variant: var(--md3-outline-variant);
+$color-error: var(--md3-error);
+$color-inverse-surface: var(--md3-inverse-surface);
+$color-inverse-on-surface: var(--md3-inverse-on-surface);
+$color-scrim: var(--md3-scrim);
+
+// Common color variables (compat layer for reducing --c2-* usage)
+$on-surface: var(--on-surface, currentColor);
+$text-secondary: var(--text-secondary, color-mix(in oklch, var(--on-surface, currentColor) 74%, transparent));
+$border-color: var(--border-color, color-mix(in oklch, var(--on-surface, currentColor) 18%, transparent));
+$backdrop: var(--backdrop, oklch(from black l c h / 0.22));
+
+// Scrollbar
+$scrollbar-opacity: var(--scrollbar-opacity, 0.56);
+$scrollbar-tint: var(--scrollbar-tint, 86%);
+
+// Stacking (use with lib/basic/_position.scss — overlays, modals)
+$z-modal-backdrop: var(--z-modal-backdrop);
+$z-modal: var(--z-modal);
+
+

package/src/scss/basic/misc/_veela.scss

@@ -0,0 +1,12 @@
+// FL.UI Lib - Veela integration
+// This file provides full veela integration when available
+// 
+// Usage: @use "fl-ui-lib" as m;
+// 
+// Note: This requires veela.css to be installed and configured
+
+// Import and forward veela-lib
+@use "veela-lib" as *;
+@forward "veela-lib";
+
+// All veela mixins are now available through this facade

package/src/scss/core/index.scss

@@ -0,0 +1 @@
+@forward "misc/index.scss";

package/src/scss/core/interact/_draggable.scss

@@ -0,0 +1,32 @@
+// Draggable component mixins - veela-independent fallbacks
+
+@mixin draggable-element {
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+    -webkit-user-drag: none;
+    
+    &:active, &[data-dragging] {
+        cursor: grabbing;
+    }
+}
+
+@mixin drag-handle {
+    cursor: grab;
+    pointer-events: auto;
+    user-select: none;
+    
+    &:active {
+        cursor: grabbing;
+    }
+}
+
+@mixin dragging-state {
+    cursor: grabbing;
+    user-select: none;
+    
+    * {
+        user-select: none;
+        pointer-events: none;
+    }
+}

package/src/scss/core/interact/_position.scss

@@ -0,0 +1,45 @@
+// Position, inset & stacking-context helpers (veela-independent)
+// Forwarded via lib/basic/_index.scss as part of the public veela-lib surface.
+
+@mixin center-absolute {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+@mixin absolute-fill {
+    position: absolute;
+    inset: 0;
+}
+
+@mixin fixed-fill {
+    position: fixed;
+    inset: 0;
+}
+
+@mixin position($type: "relative", $inset: null) {
+    position: #{$type};
+
+    @if $inset {
+        inset: $inset;
+    }
+}
+
+@mixin sticky($top: 0) {
+    position: sticky;
+    inset-block-start: $top;
+}
+
+/// Screen-reader only: visually hidden but still exposed to accessibility APIs
+@mixin visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}

package/src/scss/core/interact/_ps-anchor.scss

@@ -0,0 +1,28 @@
+@mixin ps-anchor {
+    // fallback
+    & {
+        inset-inline-start: max(var(--client-x, 0px), 0px);
+        inset-block-start: max(var(--client-y, 0px), 0px);
+        inset-inline-end: auto;
+        inset-block-end: auto;
+
+        direction: ltr;
+        writing-mode: horizontal-tb;
+        translate: 0% 0% 0%;
+        transform: none;
+    };
+
+    //
+    & {
+        --translate-x: round(nearest, min(0px, calc(100cqi - (100% + var(--client-x, 0px)))), calc(1px / var(--pixel-ratio, 1))) !important;
+        --translate-y: round(nearest, min(0px, calc(100cqb - (100% + var(--client-y, 0px)))), calc(1px / var(--pixel-ratio, 1))) !important;
+    };
+
+    // from bottom side (without gap), by default
+    @supports(position-anchor: --example) {
+        position-anchor: var(--anchor-group);
+        inset-inline-start: anchor(var(--anchor-group) start);
+        inset-block-start: anchor(var(--anchor-group) end);
+        inline-size: anchor-size(var(--anchor-group) self-inline);
+    };
+};

package/src/scss/core/interact/_ps-centered.scss

@@ -0,0 +1,28 @@
+@mixin ps-centered {
+    & {
+        --shift-x: 50%;
+        --shift-y: 50%;
+        --drag-x: 0px;
+        --drag-y: 0px;
+        --translate-x: 0px;
+        --translate-y: 0px;
+
+
+        inset-inline-start: max(var(--shift-x), 0px);
+        inset-block-start: max(var(--shift-y), 0px);
+        inset-inline-end: auto;
+        inset-block-end: auto;
+
+
+        direction: ltr;
+        translate: 0% 0% 0%;
+        transform:
+            scale3d(var(--scale, 1), var(--scale, 1), var(--scale, 1))
+            translate3d(
+                round(nearest, -50%, calc(1px / var(--pixel-ratio, 1))),
+                round(nearest, -50%, calc(1px / var(--pixel-ratio, 1)))
+            , 0%);
+        transform-origin: 0% 0%;
+        writing-mode: horizontal-tb;
+    };
+};

package/src/scss/core/interact/_ps-cursor.scss

@@ -0,0 +1,18 @@
+@mixin ps-cursor {
+    & {
+        --shift-x: var(--client-x, 0px);
+        --shift-y: var(--client-y, 0px);
+        --translate-x: round(nearest, min(0px, calc(100cqi - (100% + var(--shift-x, 0px)))), calc(1px / var(--pixel-ratio, 1))) !important;
+        --translate-y: round(nearest, min(0px, calc(100cqb - (100% + var(--shift-y, 0px)))), calc(1px / var(--pixel-ratio, 1))) !important;
+
+        inset-inline-start: max(var(--shift-x), 0px);
+        inset-block-start: max(var(--shift-y), var(--status-bar-padding, 0px));
+        inset-inline-end: auto;
+        inset-block-end: auto;
+
+        direction: ltr;
+        translate: 0% 0% 0%;
+        writing-mode: horizontal-tb;
+        transform: none;
+    };
+};

package/src/scss/core/interact/_ps-draggable.scss

@@ -0,0 +1,25 @@
+@mixin ps-draggable {
+    & {
+        --shift-x: 0px;
+        --shift-y: 0px;
+        --drag-x: 0px;
+        --drag-y: 0px;
+        --translate-x: var(--drag-x, 0px);
+        --translate-y: var(--drag-y, 0px);
+
+        inset-inline-start: var(--shift-x, 0px);
+        inset-block-start : var(--shift-y, 0px);
+        transform-origin  : 0% 0%;
+        inset-inline-end  : auto;
+        inset-block-end   : auto;
+        touch-action: none;
+        writing-mode: horizontal-tb;
+        translate: 0% 0% 0%;
+        direction: ltr;
+        position: fixed;
+
+        transform:
+            scale3d(var(--scale, 1), var(--scale, 1), var(--scale, 1))
+            translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0px);
+    };
+};