@fest-lib/fl-ui 0.1.1

package/src/styles/ui/_essentials.scss

@@ -0,0 +1,705 @@
+/* ai-refactor: optimized/refactored at 2026-02-13T00:45:15Z */
+@use "sass:string";
+
+/* ai-refactor: optimized/refactored at 2026-02-13T00:45:12Z */
+// WHY: Bare `button` + unscoped `input/select/textarea` rules leak into the host document.
+// Default off; opt in via `patch-global-native-controls.scss` / `loadFlUIGlobalNativeControlStyles()`.
+@use "./essentials-options" as eo;
+@use "./native-host-button-chrome" as hostbtn;
+
+@layer tokens, base, layout, utilities, shells, shell, views, view, viewer, components, ux-layer, markdown, essentials, print, print-breaks, overrides;
+
+@layer components {
+    @if eo.$include-native-button-styles {
+        button,
+        .btn {
+            @include hostbtn.essentials-native-host-button-chrome-base;
+        }
+    } @else {
+        .btn {
+            @include hostbtn.essentials-native-host-button-chrome-base;
+        }
+    }
+
+    .btn {
+        --ui-bg: var(--color-surface-container-high);
+        --ui-fg: var(--color-on-surface);
+        --ui-bg-hover: var(--color-surface-container-highest);
+        --ui-ring: var(--color-primary);
+        --ui-radius: var(--radius-lg);
+        --ui-pad-y: var(--space-sm);
+        --ui-pad-x: var(--space-lg);
+        --ui-font-size: var(--text-sm);
+        --ui-font-weight: var(--font-weight-semibold);
+        --ui-min-h: 40px;
+        --ui-opacity: 1;
+        appearance: none;
+        border: none;
+        background: var(--ui-bg);
+        color: var(--ui-fg);
+        border-radius: var(--ui-radius);
+        padding: max(var(--ui-pad-y, 0px), 0px) max(var(--ui-pad-x, 0px), 0px);
+        font-size: var(--ui-font-size);
+        font-weight: var(--ui-font-weight);
+        letter-spacing: 0.01em;
+        line-height: 1.2;
+        block-size: calc-size(fit-content, max(var(--ui-min-h), size));
+        transition:
+            background-color var(--motion-fast),
+            box-shadow var(--motion-fast),
+            transform var(--motion-fast);
+        box-shadow: var(--elev-0);
+        user-select: none;
+        touch-action: manipulation;
+        pointer-events: auto;
+        gap: var(--space-xs);
+        text-transform: none;
+        opacity: var(--ui-opacity);
+        min-block-size: fit-content;
+        min-inline-size: calc-size(fit-content, size + 0.5rem + var(--icon-size, 1rem));
+        max-inline-size: none;
+        max-block-size: stretch;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: center;
+        text-decoration: none;
+        text-shadow: none;
+        text-rendering: auto;
+        contain: none;
+        container-type: normal;
+        place-items: center;
+        place-content: center;
+        justify-content: safe center;
+        justify-items: safe center;
+        align-content: safe center;
+        align-items: safe center;
+
+        & > ui-icon {
+            flex-shrink: 0;
+            pointer-events: none;
+            color: inherit;
+            align-self: center;
+            vertical-align: middle;
+        }
+
+        &.btn-icon {
+            @media (max-width: 480px) {
+                font-size: 0px !important;
+                aspect-ratio: 1 / 1;
+                block-size: fit-content;
+                max-block-size: stretch;
+                min-inline-size: 0px;
+                max-inline-size: fit-content;
+                gap: 0px;
+
+                .btn-text,
+                span:not(.sr-only) {
+                    display: none !important;
+                }
+            }
+        }
+
+        &:hover {
+            background: var(--ui-bg-hover);
+            box-shadow: var(--elev-1);
+            transform: translateY(-1px);
+        }
+
+        &:active {
+            transform: translateY(0);
+            box-shadow: var(--elev-0);
+        }
+
+        &:focus-visible {
+            outline: none;
+            box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-ring) 35%, transparent);
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none !important;
+
+            &:hover {
+                background: var(--color-surface-container-high);
+                box-shadow: var(--elev-0);
+            }
+        }
+
+        &.primary,
+        &.active {
+            --ui-bg: var(--color-primary);
+            --ui-fg: var(--color-on-primary);
+            --ui-ring: var(--color-primary);
+        }
+
+        &.primary {
+            --ui-bg-hover: color-mix(in oklab, var(--color-primary) 90%, black);
+        }
+
+        &.active {
+            box-shadow: var(--elev-1);
+        }
+
+        &.small {
+            --ui-pad-y: var(--space-xs);
+            --ui-pad-x: var(--space-md);
+            --ui-font-size: var(--text-xs);
+            --ui-min-h: 32px;
+            --ui-radius: var(--radius-md);
+        }
+
+        &.icon-btn {
+            inline-size: 40px;
+            block-size: 40px;
+            --ui-pad-y: 0px;
+            --ui-pad-x: 0px;
+            --ui-radius: 9999px;
+            --ui-font-size: var(--text-lg);
+        }
+
+        &[data-action="open-md"],
+        &[data-action="export-md"],
+        &[data-action="export-docx"] {
+            --ui-font-size: 12px;
+            --ui-pad-x: 8px;
+            --ui-pad-y: 0px;
+            --ui-min-h: 28px;
+        }
+
+        &:is(
+            [data-action="view-markdown-viewer"],
+            [data-action="view-markdown-editor"],
+            [data-action="view-rich-editor"],
+            [data-action="view-settings"],
+            [data-action="view-history"],
+            [data-action="view-workcenter"]
+        ) {
+            --ui-font-size: 13px;
+            --ui-font-weight: 500;
+            --ui-pad-x: 12px;
+            --ui-pad-y: 0px;
+            --ui-min-h: 32px;
+            --ui-radius: 16px;
+            text-transform: capitalize;
+        }
+
+        &:is(
+            [data-action="view-markdown-viewer"],
+            [data-action="view-markdown-editor"],
+            [data-action="view-rich-editor"],
+            [data-action="view-settings"],
+            [data-action="view-history"],
+            [data-action="view-workcenter"][data-current],
+            [data-action="view-workcenter"].active
+        ) {
+            --ui-bg: var(--color-surface-container-highest);
+            --ui-fg: var(--color-primary);
+            --ui-ring: var(--color-primary);
+        }
+
+        &:is(
+            [data-action="toggle-edit"],
+            [data-action="snip"],
+            [data-action="solve"],
+            [data-action="code"],
+            [data-action="css"],
+            [data-action="voice"],
+            [data-action="edit-templates"],
+            [data-action="recognize"],
+            [data-action="analyze"],
+            [data-action="select-files"],
+            [data-action="clear-prompt"],
+            [data-action="view-full-history"]
+        ) {
+            --ui-font-size: 12px;
+            --ui-pad-x: 8px;
+            --ui-pad-y: 0px;
+            --ui-min-h: 28px;
+            --ui-radius: 14px;
+        }
+
+        &:has(> ui-icon):not(:has(> *:not(ui-icon))),
+        &:has(> span:only-of-type:empty) {
+            font-size: 0px !important;
+            aspect-ratio: 1 / 1;
+            block-size: fit-content;
+            max-block-size: stretch;
+            min-inline-size: 0px;
+            max-inline-size: fit-content;
+            gap: 0px;
+            overflow: visible;
+
+            span:not(.sr-only) {
+                display: none !important;
+            }
+        }
+    }
+
+    .btn-primary {
+        background: var(--color-primary);
+        color: white;
+        border-color: var(--color-primary);
+
+        &:hover:not(:disabled) {
+            background: var(--color-primary-hover);
+            border-color: var(--color-primary-hover);
+        }
+    }
+
+    @media (max-inline-size: 768px) {
+        .btn {
+            --ui-pad-y: var(--space-xs);
+            --ui-pad-x: var(--space-md);
+            --ui-font-size: var(--text-xs);
+            --ui-min-h: 36px;
+        }
+    }
+
+    @media (max-inline-size: 480px) {
+        .btn {
+            --ui-pad-y: var(--space-xs);
+            --ui-pad-x: var(--space-xs);
+            --ui-font-size: var(--text-xs);
+            --ui-min-h: 32px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &.btn-icon {
+                overflow: visible;
+            }
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .btn {
+            transition: none;
+            transform: none !important;
+
+            &:hover,
+            &:active {
+                transform: none !important;
+            }
+        }
+    }
+}
+
+@layer utilities {
+    .round-decor {
+        --background-tone-shift: 0;
+        padding-block: 0.25rem;
+        border-radius: 0.25rem;
+        overflow: hidden;
+
+        &:empty {
+            padding: 0;
+            display: none;
+            pointer-events: none;
+            visibility: collapse;
+        }
+    }
+
+    .time-format {
+        display: inline-flex;
+        flex-direction: row;
+        place-content: center;
+        place-items: center;
+        place-self: center;
+        padding: 0.125rem;
+        font: 500 0.9em "InterVariable", "Inter", "Fira Mono", "Menlo", "Consolas", monospace;
+        font-optical-sizing: auto;
+        font-variant-numeric: tabular-nums;
+        font-kerning: auto;
+        font-stretch: condensed;
+        font-width: condensed;
+        letter-spacing: -0.05em;
+        text-wrap: nowrap;
+        text-align: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    /*
+     * WHY: Launcher caption rows use `[data-layer="labels"]`; a global `span { aspect-ratio: 1/1 }` makes each pill as tall as its width (“box” tiles).
+     * Square helpers apply only outside label captions (icon/grid tiles still use spans elsewhere).
+     */
+    .ui-ws-item:not([data-layer="labels"]) span {
+        pointer-events: none;
+        aspect-ratio: 1 / 1;
+        inline-size: fit-content;
+        block-size: fit-content;
+        display: inline;
+    }
+
+    .ui-ws-item {
+        cursor: pointer;
+        user-select: none;
+        pointer-events: auto;
+
+        &:active,
+        &:has(:active) {
+            will-change: inset, translate, transform, opacity, z-index;
+            cursor: grabbing;
+        }
+    }
+}
+
+@layer essentials {
+
+    @media print {
+        .ctx-menu, .ux-anchor, .component-loading, .component-error {
+            display: none !important;
+            visibility: hidden !important;
+            opacity: 0 !important;
+            pointer-events: none !important;
+            position: absolute !important;
+            inset: 0 !important;
+            z-index: -1 !important;
+            inline-size: 0 !important;
+            block-size: 0 !important;
+            max-inline-size: 0 !important;
+            max-block-size: 0 !important;
+            min-inline-size: 0 !important;
+            min-block-size: 0 !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            border: none !important;
+            overflow: hidden !important;
+        }
+    }
+
+    @media screen {
+        :root, :host, :scope {
+            --font-family: "InterVariable", "Inter", "Helvetica Neue", "Helvetica", "Calibri", "Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
+        }
+
+        ui-window-frame,
+        ui-modal,
+        .ui-grid-item {
+            --opacity: 1;
+            --scale: 1;
+            --rotate: 0deg;
+            --translate-x: 0%;
+            --translate-y: 0%;
+            isolation: isolate;
+            content-visibility: auto;
+            transform-origin: 50% 50%;
+            transform-style: flat;
+            transform-box: fill-box;
+            translate: 0% 0% 0%;
+            opacity: var(--opacity, 1);
+            rotate: 0deg;
+            scale: 1;
+        }
+
+        .ctx-menu {
+            --font-family: "InterVariable", "Inter", "Helvetica Neue", "Helvetica", "Calibri", "Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
+
+            &,
+            * {
+                visibility: visible;
+                content-visibility: visible;
+            }
+
+            position: fixed;
+            z-index: 99999;
+            inline-size: max-content;
+            min-inline-size: 160px;
+            max-inline-size: min(240px, 100cqi);
+            block-size: fit-content;
+            padding: 0.25rem 0;
+            border: 1px solid var(--color-outline-variant);
+            border-radius: var(--radius-md);
+            background-color: var(--color-surface);
+            color: var(--color-on-surface);
+            font-size: 0.875rem;
+            font-weight: 400;
+            box-shadow: var(--elev-3);
+            opacity: 1;
+            visibility: visible;
+            pointer-events: auto;
+            transform: scale3d(var(--scale, 1), var(--scale, 1), 1) translate3d(var(--translate-x, 0px), var(--translate-y, 0px), 0px);
+            transition: opacity 0.15s ease-out, visibility 0.15s ease-out, transform 0.15s ease-out;
+            font-family: var(--font-family, 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif') !important;
+            text-align: start;
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+
+            &[data-hidden] {
+                opacity: 0;
+                visibility: hidden;
+                pointer-events: none;
+            }
+
+            & > * {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-start;
+                text-align: start;
+                inline-size: stretch;
+                min-block-size: 2rem;
+                gap: 0.5rem;
+                padding: 0.375rem 0.75rem;
+                border: none;
+                border-radius: var(--radius-sm);
+                outline: none;
+                position: relative;
+                background-color: transparent;
+                color: var(--color-on-surface);
+                cursor: pointer;
+                text-wrap: nowrap;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                pointer-events: auto;
+                transition: background-color 0.15s ease, color 0.15s ease;
+                font-family: var(--font-family, 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif') !important;
+
+                &:hover {
+                    background-color: var(--color-surface-container-high);
+                    color: var(--color-on-surface);
+                }
+
+                &:active {
+                    background-color: var(--color-surface-container-highest);
+                    color: var(--color-on-surface);
+                }
+
+                &:focus-visible {
+                    outline: var(--focus-ring);
+                    background-color: var(--color-surface-container-high);
+                }
+
+                &:not(.ctx-menu-separator) {
+                    gap: 0.5rem;
+                }
+
+                & > * {
+                    pointer-events: none;
+                }
+
+                & > span {
+                    flex: 1 1 auto;
+                    min-inline-size: 0;
+                    text-align: start !important;
+                    user-select: none;
+                    pointer-events: none;
+                    font-size: 0.875rem;
+                    font-weight: 400;
+                    line-height: 1.25;
+                    color: inherit;
+                }
+
+                & > ui-icon {
+                    --icon-size: 1rem;
+                    flex-shrink: 0;
+                    inline-size: var(--icon-size);
+                    block-size: var(--icon-size);
+                    color: var(--color-on-surface-variant);
+                    user-select: none;
+                    pointer-events: none;
+                }
+            }
+
+            & > .ctx-menu-separator,
+            &.ctx-menu-separator {
+                min-block-size: auto;
+                block-size: 1px;
+                margin: 0.125rem 0.375rem;
+                padding: 0;
+                background-color: var(--color-outline-variant);
+                opacity: 0.3;
+                pointer-events: none;
+            }
+
+            /*
+             * `.grid-rows` applies subgrid + place(center) to children, which centers
+             * label text per row. Context menus must stay flex rows with start-aligned labels.
+             */
+            &.grid-rows {
+                display: flex !important;
+                flex-direction: column;
+                align-items: stretch;
+                grid-template-columns: unset !important;
+                grid-auto-rows: unset !important;
+
+                & > *:not(.ctx-menu-separator) {
+                    display: flex !important;
+                    flex-flow: row nowrap !important;
+                    align-items: center !important;
+                    justify-content: flex-start !important;
+                    grid-column: unset !important;
+                    grid-row: unset !important;
+                    grid-template-columns: unset !important;
+                    grid-template-rows: unset !important;
+                    place-content: unset !important;
+                    place-items: unset !important;
+                }
+            }
+        }
+
+        .ux-anchor {
+            --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;
+            writing-mode: horizontal-tb;
+            translate: 0% 0% 0%;
+            transform: none;
+        }
+
+        .component-loading,
+        .component-error {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            gap: 1rem;
+            color: var(--text-secondary, light-dark(#666, #aaa));
+        }
+
+        .component-loading {
+            .loading-spinner {
+                inline-size: 2rem;
+                block-size: 2rem;
+                border: 2px solid var(--border, light-dark(#ddd, #444));
+                border-block-start: 2px solid var(--primary, light-dark(#007bff, #5fa8ff));
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+            }
+        }
+
+        .component-error {
+            text-align: center;
+
+            h3 {
+                margin: 0;
+                color: var(--error, light-dark(#dc3545, #ff6b6b));
+            }
+
+            p {
+                margin: 0;
+            }
+        }
+
+        ui-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            inline-size: var(--icon-size, 1.25rem);
+            block-size: var(--icon-size, 1.25rem);
+            min-inline-size: var(--icon-size, 1.25rem);
+            min-block-size: var(--icon-size, 1.25rem);
+            color: currentColor;
+            fill: currentColor;
+            flex-shrink: 0;
+            vertical-align: middle;
+            opacity: 1;
+            visibility: visible;
+            /* When a parent uses font-size: 0 for layout, keep raster/mask math stable */
+            font-size: 1rem;
+
+            svg,
+            img {
+                inline-size: 100%;
+                block-size: 100%;
+                color: inherit;
+                fill: currentColor;
+            }
+        }
+
+        :is(button, .btn) > ui-icon {
+            color: inherit;
+        }
+
+        .file-picker {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-block-size: 300px;
+            padding: 2rem;
+            text-align: center;
+
+            .file-picker-header {
+                margin-block-end: 2rem;
+
+                h2 {
+                    margin: 0 0 0.5rem 0;
+                    color: var(--color-on-surface);
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                }
+
+                p {
+                    margin: 0;
+                    color: var(--color-on-surface-variant);
+                    font-size: 0.9rem;
+                }
+            }
+
+            .file-picker-actions {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                gap: 1rem;
+                margin-block-end: 2rem;
+
+                .btn {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.75rem 1.5rem;
+                    border: 1px solid transparent;
+                    border-radius: var(--radius-md);
+                    font-weight: 500;
+                    transition: all 0.2s ease;
+
+                    &:hover {
+                        transform: translateY(-1px);
+                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                    }
+
+                    &.btn-primary {
+                        background: var(--color-primary);
+                        color: var(--color-on-primary);
+                        border-color: var(--color-primary);
+                    }
+
+                    &:not(.btn-primary) {
+                        background: var(--color-surface-container);
+                        color: var(--color-on-surface);
+                        border-color: var(--color-outline-variant);
+                    }
+                }
+            }
+
+            .file-picker-info {
+                max-inline-size: 400px;
+
+                p {
+                    margin: 0.25rem 0;
+                    font-size: 0.85rem;
+                    color: var(--color-on-surface-variant);
+
+                    strong {
+                        color: var(--color-on-surface);
+                    }
+                }
+            }
+        }
+    }
+}