@fest-lib/veela 0.1.1

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

@@ -0,0 +1,541 @@
+@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: absolute;
+            inset: 0;
+            pointer-events: none;
+            z-index: 0;
+            padding: 0px;
+            margin: 0px;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+
+            inline-size: stretch;
+            block-size: stretch;
+            max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
+            max-block-size: min(100%, min(100cqb, 100dvb)) !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

@@ -0,0 +1,162 @@
+/**
+ * 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};
+    }
+}