@fest-lib/veela 0.1.20 → 1.0.2

package/src/scss/advanced/layout/_normalize.scss

@@ -1,543 +0,0 @@
-@use "veela-lib" as *;
-
-@layer ux-normalize {
-
-    @keyframes bottom-to-top {
-        0% { opacity: 0; transform: translateY(10%); }
-        100% { opacity: 1; transform: translateY(0); }
-    }
-
-    @layer ux-agate;
-
-    @media screen {
-
-        /* -------------------------------------------------------------------------- */
-        /*                                    Base                                    */
-        /* -------------------------------------------------------------------------- */
-
-        :where(:root, html) {
-            color-scheme: light dark;
-            scroll-behavior: smooth;
-            tab-size: 4;
-            -webkit-text-size-adjust: 100%;
-            text-size-adjust: 100%;
-            font-size: 16px;
-
-            min-block-size: 0px;
-            min-inline-size: 0px;
-            max-inline-size: min(100cqi, 100dvi) !important;
-            max-block-size: min(100cqb, 100dvb) !important;
-            inline-size: min(100cqi, 100dvi);
-            block-size: min(100cqb, 100dvb);
-
-            contain: strict;
-            overflow: hidden;
-
-            padding: 0px;
-            margin: 0px;
-            border: none 0px transparent;
-            outline: none 0px transparent;
-
-            @media (prefers-reduced-motion: reduce) {
-                scroll-behavior: auto;
-            }
-
-            &, :where(body, button, input, select, textarea) {
-                font-family: var(--font-family, inherit);
-            }
-        }
-
-        :where(body) {
-            margin: 0;
-            padding: 0;
-
-            border: none 0px transparent;
-            outline: none 0px transparent;
-
-            min-block-size: min(100dvb, 100cqb);
-            block-size: fit-content;
-
-            background-color: var(--color-bg);
-            color: var(--color-text);
-            line-height: var(--line-height);
-
-            /* Improve text rendering */
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            text-rendering: optimizeLegibility;
-
-            /* */
-            -webkit-text-size-adjust: 100%;
-
-            @include HQRendering();
-        }
-
-        /* */
-        :where(html, body) {
-            inset: 0px;
-            padding: 0px;
-            margin: 0px;
-            border: none 0px transparent;
-            background-color: transparent;
-            color: transparent;
-            font-family: Calibri, Carlito, Caliburn, Seravek, 'Gill Sans Nova', Ubuntu, 'DejaVu Sans', Candara, Segoe, "Segoe UI", Optima, source-sans-pro, sans-serif;
-            dynamic-range-limit: constrained-high;
-        }
-
-        /* -------------------------------------------------------------------------- */
-        /*                               Global Defaults                              */
-        /* -------------------------------------------------------------------------- */
-
-        :where(:host, :scope, :root) {
-
-            /* */
-            :where(*), :where(*::before), :where(*::after) {
-                box-sizing: border-box;
-                font-display: swap;
-
-                /* don't needs such potential lag-machine */
-                /*border-width: 0;
-                border-style: solid;
-                border-color: var(--color-border, currentColor);
-                word-wrap: break-word;*/
-            }
-
-            /* */
-            :where(*):not(:defined) { opacity: 0; visibility: collapse; pointer-events: none; display: none; background-color: transparent; color: transparent; };
-
-            /* */
-            :where(*), &::slotted(*) {
-                /* Interaction defaults */
-                -webkit-tap-highlight-color: transparent;
-            }
-
-            /* */
-            :where(input):-webkit-autofill::first-line { font-size: 1em; -webkit-text-size-adjust: 100%; }
-            :where(input):autofill::first-line { font-size: 1em; text-size-adjust: 100%; }
-            :where(input):auto-fill::first-line { font-size: 1em; text-size-adjust: 100%; }
-
-            /* */
-            :where(input) {
-                position: relative;
-                text-size-adjust: 100%;
-                -webkit-text-size-adjust: 100%;
-
-                &:-internal-autofill-previewed {
-                    letter-spacing: #{"calc(1em / 10)"} !important;
-                }
-            }
-
-            /* */
-            :where(button, a, input, textarea) {
-                border: none 0px transparent;
-            }
-
-            /* Media defaults */
-            :where(img, video, canvas, svg, picture) {
-                display: block;
-                max-inline-size: stretch;
-                block-size: auto;
-                shape-margin: 0.75rem;
-                max-block-size: stretch;
-            }
-
-            /* Media defaults */
-            :where(img, video) { object-fit: contain; object-position: center; }
-            :where(picture) { display: contents; }
-
-            /* Typography defaults */
-            :where(h1, h2, h3, h4, h5, h6) {
-                font-weight: bold;
-                text-wrap: balance;
-                margin-block: 0.5em;
-            }
-
-            :where(p) {
-                text-wrap: pretty;
-                margin-block: 1em;
-            }
-
-            /* */
-            :where(a) {
-                color: inherit;
-                text-decoration: inherit;
-                text-underline-offset: 0.2em;
-                pointer-events: auto;
-                cursor: pointer;
-                user-select: none;
-                touch-action: none;
-            }
-
-            /* avoid side effects on labels by default */
-            :where(label) {
-                user-select: none;
-                touch-action: none;
-                pointer-events: none;
-            }
-
-            /* button interactions fixtures */
-            :where(button) {
-                user-select: none;
-                touch-action: none;
-                pointer-events: auto;
-                cursor: pointer;
-
-                /* if button has only icon */
-                &:has(> ui-icon:only-child) {
-                    place-content: center;
-                    place-items: center;
-                    text-align: center;
-                    font-size: 0;
-                    line-height: 0;
-                    letter-spacing: 0;
-                    aspect-ratio: 1 / 1;
-                    gap: 0;
-                }
-
-                /* clean up empty elements */
-                & :where(span, a, label):empty {
-                    display: none;
-                }
-
-                /* */
-                :where(button) {
-                    pointer-events: auto;
-                }
-
-                /* interaction defaults */
-                :where(span, a, label) {
-                    user-select: none;
-                    touch-action: none;
-                }
-
-                /* interaction defaults */
-                :where(span, label) {
-                    pointer-events: none;
-                }
-
-                /* interaction defaults */
-                :where(a) {
-                    pointer-events: auto;
-                    text-decoration: none;
-                }
-
-                /* interaction defaults */
-                &:disabled {
-                    pointer-events: none;
-                    user-select: none;
-                    touch-action: none;
-                    cursor: not-allowed;
-                }
-            }
-
-            /* Form defaults */
-            :where(input, button, textarea, select) {
-                font: inherit;
-                color: inherit;
-                letter-spacing: inherit;
-            }
-
-            /* Optimization */
-            :where(img, video, audio, picture, canvas, h1, h2, h3, h4, h5, h6, p, form, label, button) {
-                content-visibility: auto;
-            }
-
-            :where(div, span, a, h1, h2, h3, h4, h5, h6, p, label, form):empty:not([class]) {
-                content-visibility: hidden;
-            }
-
-            /* Hidden Elements */
-            :where(link, head, script, style, meta) {
-                display: none !important;
-                pointer-events: none !important;
-                interactivity: inert !important;
-                user-select: none !important;
-                touch-action: none !important;
-            }
-
-            /* just hidden without important */
-            [hidden] { display: none; }
-
-            /* aria-hidden="true" */
-            [aria-hidden="true"] {
-                visibility: collapse;
-                pointer-events: none;
-                touch-action: none;
-                user-select: none;
-                content-visibility: auto;
-                opacity: 0;
-            }
-
-            [data-dragging] {
-                will-change: transform;
-                cursor: grabbing;
-            }
-
-            /* Reduced Motion */
-            @media (prefers-reduced-motion: reduce) {
-                :where(*, ::after, ::before) {
-                    animation-duration: 0.01ms !important;
-                    animation-iteration-count: 1 !important;
-                    transition-duration: 0.01ms !important;
-                    scroll-behavior: auto !important;
-                }
-            }
-
-            /* Scrollbars */
-            :where(*) {
-                scrollbar-width: thin;
-                scrollbar-color: var(--color-scrollbar, currentColor) transparent;
-
-                &::-webkit-scrollbar {
-                    inline-size: var(--scrollbar-size);
-                    block-size: var(--scrollbar-size);
-                }
-
-                &::-webkit-scrollbar-track { background: transparent; }
-                &::-webkit-scrollbar-thumb {
-                    background-color: var(--color-scrollbar, currentColor);
-                    border-radius: var(--border-radius);
-                }
-            }
-        }
-
-        /* -------------------------------------------------------------------------- */
-        /*                                   Layout                                   */
-        /* -------------------------------------------------------------------------- */
-
-        :where(footer, header, main) {
-            margin-inline: auto;
-            padding: 0px;
-        }
-
-        :where(section) {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: var(--justify-important, center);
-            gap: 1rem;
-
-            :where(aside) {
-                border: 1px solid var(--color-bg-secondary);
-                border-radius: var(--border-radius);
-                box-shadow: var(--box-shadow);
-                padding: 1.25rem;
-                inline-size: var(--width-card);
-                flex: 1 1 var(--width-card);
-            }
-        }
-
-        /* -------------------------------------------------------------------------- */
-        /*                                 Components                                 */
-        /* -------------------------------------------------------------------------- */
-
-        /* Header & Nav */
-        :where(header) {
-            text-align: center;
-        }
-
-        :where(nav) {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            margin-block-end: 0px;
-
-            ul {
-                display: flex;
-                list-style: none;
-                padding: 0;
-                gap: 1rem;
-                margin: 0;
-
-                li { position: relative; }
-            }
-
-            a {
-                font-weight: bold;
-                color: var(--color-link);
-                text-decoration: none;
-
-                @include when-active { text-decoration: underline; }
-            }
-        }
-
-        /* Code blocks */
-        :where(pre) {
-            background-color: var(--bgColor-muted);
-            border-radius: var(--border-radius);
-            border: 1px solid var(--borderColor-muted);
-            padding: 1rem;
-            overflow: auto;
-            font-family: var(--font-family-mono);
-            max-inline-size: 100%;
-
-            code {
-                background: transparent;
-                padding: 0;
-                border-radius: 0;
-            }
-        }
-
-        :where(code, samp, kbd) {
-            font-family: var(--font-family-mono);
-            background-color: var(--bgColor-muted);
-            border-radius: 0.3em;
-            padding: 0.2em 0.4em;
-            font-size: 85%;
-        }
-
-        /* Blockquote */
-        :where(blockquote) {
-            margin-inline: 1rem;
-            padding-inline: 1rem;
-            border-inline-start: 0.25rem solid var(--color-secondary);
-            color: var(--color-text-secondary);
-        }
-
-        /* Tables */
-        :where(table) {
-            display: block;
-            overflow-x: auto;
-            border-collapse: collapse;
-            border-spacing: 0;
-            inline-size: max-content;
-            max-inline-size: 100%;
-            margin-block: 1rem;
-            border: 1px solid var(--color-border);
-            border-radius: var(--border-radius);
-
-            :where(th, td) {
-                padding: 0.5rem 1rem;
-                border-block-end: 1px solid var(--color-border);
-                text-align: start;
-            }
-
-            :where(th) {
-                background-color: var(--color-table);
-                color: var(--color-text);
-                font-weight: bold;
-            }
-
-            :where(tr:last-child td) {
-                border-block-end: none;
-            }
-
-            :where(tr:nth-child(even)) {
-                background-color: var(--color-bg-secondary);
-            }
-        }
-
-        /* Links & Buttons */
-        :where(a) {
-            color: var(--color-link);
-        }
-
-        :where(button, input[type="submit"], input[type="button"]) {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            background-color: var(--color-link);
-            border: 1px solid transparent;
-            border-radius: var(--border-radius);
-            padding: 0.5rem 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: filter 0.2s ease, transform 0.1s ease;
-
-            &:disabled {
-                opacity: 0.6;
-                cursor: not-allowed;
-                filter: none;
-                background-color: var(--color-secondary);
-            }
-        }
-
-        /* Forms */
-        :where(input:not([type="submit"]):not([type="button"]), select, textarea) {
-            display: block;
-            inline-size: 100%;
-            padding: 0.5rem;
-            background-color: var(--color-bg);
-            border: 1px solid var(--color-border);
-            border-radius: var(--border-radius);
-            color: var(--color-text);
-            /*margin-block-end: 1rem;*/
-
-            @include when-focus-visible {
-                outline: 2px solid var(--color-link);
-                outline-offset: -1px;
-            }
-
-            &::placeholder {
-                color: var(--color-text-secondary);
-                opacity: 0.7;
-            }
-
-            &:disabled {
-                background-color: var(--color-bg-secondary);
-                cursor: not-allowed;
-            }
-        }
-
-        :where(label) {
-            display: block;
-            font-weight: 600;
-            margin-block-end: 0.25rem;
-        }
-
-        /* Dialog */
-        :where(dialog) {
-            margin: auto;
-            padding: 1rem;
-            background: var(--color-bg);
-            color: var(--color-text);
-            border: 1px solid var(--color-border);
-            border-radius: var(--border-radius);
-            box-shadow: var(--box-shadow);
-            max-inline-size: min(90vw, 600px);
-            max-block-size: 85vh;
-
-            &::backdrop {
-                background-color: rgb(0 0 0 / 0.5);
-                backdrop-filter: blur(2px);
-            }
-
-            &[open] {
-                animation: bottom-to-top 0.25s ease-out;
-            }
-        }
-
-        /* -------------------------------------------------------------------------- */
-        /*                                   Visuals                                  */
-        /* -------------------------------------------------------------------------- */
-
-        :where(canvas):is([is="ui-canvas"]) {
-            position: fixed;
-            inset: 0;
-            inset-block-end: auto;
-            pointer-events: none;
-            z-index: 0;
-            padding: 0px;
-            margin: 0px;
-            border: none 0px transparent !important;
-            outline: none 0px transparent !important;
-            background-color: transparent !important;
-
-            max-inline-size: max(100%, min(100cqi, 100lvi)) !important;
-            max-block-size: max(100%, min(100cqb, 100lvb)) !important;
-            max-inline-size: max(100%, min(100cqi, 100lvi)) !important;
-            max-block-size: max(100%, min(100cqb, 100lvb)) !important;
-            box-sizing: border-box !important;
-            min-inline-size: 0px;
-            min-block-size: 0px;
-
-            object-fit: cover;
-            object-position: center;
-        }
-    }
-
-    /* Scheme Overrides */
-    [data-scheme="dark"], [data-theme="dark"] { color-scheme: dark only; & * { color-scheme: dark; } }
-    [data-scheme="light"], [data-theme="light"] { color-scheme: light only; & * { color-scheme: light; } }
-    [data-scheme="system"], [data-theme="system"] { color-scheme: light dark; }
-}

package/src/scss/advanced/layout/_shared-overlays.scss

@@ -1,162 +0,0 @@
-/**
- * Shared Overlay & State Patterns
- * 
- * Consolidates button and form state overlay mixins that were previously
- * duplicated across _buttons.scss, _forms.scss, and _colorize.scss.
- * 
- * Provides reusable patterns for:
- * - State overlays (hover, press, active, focus)
- * - Focus rings with consistent styling
- * - Icon button sizing
- */
-
-@use "sass:map";
-@use "./utils" as utils;
-@use "./color" as color;
-
-// ============================================================================
-// Shared state opacity defaults (used across buttons, forms, inputs)
-// ============================================================================
-
-$state-opacity-defaults: (
-    hover: 0.08,
-    press: 0.12,
-    focus: 0.12,
-    disabled: 0.38,
-    drag: 0.16,
-) !default;
-
-// ============================================================================
-// Base overlay structure (shared placeholder for reusability)
-// ============================================================================
-
-%overlay-base {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    mix-blend-mode: normal;
-}
-
-// ============================================================================
-// Mixin: State overlay (for buttons, forms, and interactive elements)
-// ============================================================================
-
-///
-/// Creates state-aware overlays for hover and press states.
-/// Used by buttons, form controls, and other interactive elements.
-///
-/// @param {color} $fallback-color - Base color for overlay calculation
-/// @param {number} $hover-opacity - Hover state opacity (default: var(--state-opacity-hover, 0.08))
-/// @param {number} $press-opacity - Press/active state opacity (default: var(--state-opacity-press, 0.12))
-///
-@mixin state-overlay(
-    $fallback-color,
-    $hover-opacity: var(--state-opacity-hover, 0.08),
-    $press-opacity: var(--state-opacity-press, 0.12)
-) {
-    position: relative;
-    overflow: hidden;
-
-    &::after,
-    &::before {
-        @extend %overlay-base;
-    }
-
-    // Hover overlay
-    &::after {
-        opacity: 0;
-        transition: opacity var(--duration-normal) var(--ease-out);
-        background-color: color-mix(
-            in oklch,
-            $fallback-color calc(#{$hover-opacity} * 100%),
-            transparent
-        );
-    }
-
-    // Press/active overlay
-    &::before {
-        opacity: 0;
-        transition: opacity var(--duration-fast) var(--ease-out);
-        background-color: color-mix(
-            in oklch,
-            $fallback-color calc(#{$press-opacity} * 100%),
-            transparent
-        );
-    }
-
-    // Apply overlays on interaction
-    @include utils.when-hover { &::after { opacity: 1; } }
-    @include utils.when-active { &::before { opacity: 1; } }
-}
-
-// ============================================================================
-// Mixin: Focus ring (accessible focus indicator)
-// ============================================================================
-
-///
-/// Creates an accessible focus ring with consistent styling.
-/// Used across buttons, form inputs, and interactive elements.
-///
-/// @param {color} $state-color - Color for focus ring (default: var(--md-button-state-color, var(--md-primary)))
-/// @param {number} $opacity - Focus opacity (default: var(--state-opacity-focus, 0.12))
-///
-@mixin focus-ring(
-    $state-color: var(--md-button-state-color, var(--md-primary)),
-    $opacity: var(--state-opacity-focus, 0.12)
-) {
-    @include utils.when-focus {
-        outline: 2px solid color-mix(
-            in oklch,
-            $state-color calc(#{$opacity} * 100%),
-            transparent
-        );
-        outline-offset: 3px;
-    }
-}
-
-// ============================================================================
-// Mixin: Icon button sizing (square button for icon-only buttons)
-// ============================================================================
-
-///
-/// Sizes icon-only buttons as squares with centered content.
-/// Commonly used for toolbar buttons, FABs, and icon-only controls.
-///
-/// @param {length} $size - Button size (default: var(--icon-size-lg))
-///
-@mixin icon-button(
-    $size: var(--icon-size-lg)
-) {
-    min-inline-size: $size;
-    min-block-size: $size;
-    inline-size: $size;
-    block-size: $size;
-    padding: 0;
-    border-radius: 50%;
-    justify-content: center;
-
-    & > :where(ui-icon, svg) {
-        inline-size: 60%;
-        block-size: 60%;
-    }
-}
-
-// ============================================================================
-// Mixin: Export state opacity tokens
-// ============================================================================
-
-///
-/// Exports state opacity values as CSS custom properties.
-/// Centralizes opacity values for buttons, forms, and other interactive elements.
-///
-/// @param {map} $map - Opacity map (default: $state-opacity-defaults)
-///
-@mixin export-state-opacity-vars(
-    $map: $state-opacity-defaults
-) {
-    @each $state, $value in $map {
-        --state-opacity-#{$state}: #{$value};
-    }
-}