@fest-lib/fl-ui 0.1.1

package/src/styles/ui/_explorer-content.scss

@@ -0,0 +1,362 @@
+// File Manager content grid styles (basic variant)
+
+//
+@layer ux-file-manager-content {
+    /* Tighter actions track + explicit parent columns so subgrid rows align with the header */
+    $row-grid:        [icon] minmax(0px, 2.5rem) [name] minmax(0px, 1fr) [size] minmax(4.5rem, 6rem) [date] minmax(0px, 7.5rem) [actions] minmax(6.75rem, max-content);
+    $row-grid-mobile: [icon] minmax(0px, 2.5rem) [name] minmax(0px, 1fr) [size] minmax(4.5rem, 6rem) [date] minmax(0px, 0px)  [actions] minmax(6.75rem, max-content);
+
+    :host(ui-file-manager-content) {
+        &, :where(*) {
+            overflow: hidden;
+            scrollbar-width: none;
+            scrollbar-color: transparent transparent;
+            scrollbar-gutter: auto;
+        }
+
+        & {
+            perspective: 1000;
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            inline-size: 100%;
+            block-size: 100%;
+            min-inline-size: 0;
+            min-block-size: 0;
+            overflow: hidden;
+            scrollbar-width: none;
+            scrollbar-color: transparent transparent;
+            scrollbar-gutter: auto;
+            grid-column: 1 / -1;
+            z-index: 1;
+            position: relative;
+            contain: none;
+            isolation: isolate;
+            container-type: size;
+
+            touch-action: manipulation;
+            pointer-events: auto;
+            border-radius: 0;
+            margin: 0;
+
+            background-color: var(--color-surface);
+            color: var(--color-on-surface);
+
+            outline: none 0px transparent;
+            border: none 0px transparent;
+        }
+
+        /* Grid with subgrid columns */
+        .fm-grid {
+            display: grid;
+            grid-template-columns: #{$row-grid};
+            grid-template-rows: auto minmax(0, 1fr);
+            row-gap: 0;
+            align-content: start;
+            inline-size: stretch;
+            min-inline-size: 0;
+            min-block-size: 0;
+            block-size: 100%;
+            flex: 1 1 auto;
+            overflow: hidden;
+            scrollbar-width: none;
+            scrollbar-color: transparent transparent;
+            scrollbar-gutter: auto;
+
+            touch-action: manipulation;
+            pointer-events: none;
+            outline: none 0px transparent;
+            border: none 0px transparent;
+
+            @container (inline-size <= 600px) {
+                grid-template-columns: #{$row-grid-mobile};
+            }
+        }
+
+        .fm-grid-rows {
+            display: grid;
+            grid-template-columns: subgrid;
+            grid-auto-rows: 2.625rem;
+            grid-column: 1 / -1;
+            align-content: start;
+
+            gap: 0.25rem;
+            overflow: auto;
+            scrollbar-gutter: stable;
+            min-block-size: 0;
+
+            scrollbar-width: thin;
+            scrollbar-color: color-mix(in oklab, var(--color-on-surface) 22%, transparent) transparent;
+
+            inline-size: 100%;
+            block-size: 100%;
+            min-inline-size: 0;
+            z-index: 1;
+
+            content-visibility: visible;
+            contain-intrinsic-size: 1px 2.625rem;
+            contain: none;
+
+            //
+            touch-action: manipulation;
+            pointer-events: auto;
+
+            //
+            slot { display: contents !important; }
+        }
+
+        :where(.row) {
+            background-color: color-mix(in oklab, var(--color-on-surface, #fff) 3%, transparent);
+            color: var(--color-on-surface);
+
+            display: grid;
+            grid-template-rows: minmax(0, 2.625rem) !important;
+            grid-column: 1 / -1;
+            order: var(--order, 1) !important;
+            min-block-size: 0;
+
+            inline-size: stretch;
+            place-content: center;
+            place-items: center;
+            place-self: stretch;
+            justify-items: start;
+            padding: 0 0.65rem;
+            border-radius: 0.625rem;
+            border: none;
+            cursor: pointer;
+            pointer-events: auto;
+            touch-action: manipulation;
+            block-size: 2.625rem;
+            user-drag: none;
+            -webkit-user-drag: none;
+
+            text-align: start;
+            text-wrap: nowrap;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            letter-spacing: normal;
+            overflow: hidden;
+            gap: 0.35rem;
+            flex-wrap: nowrap;
+
+            // no draggable available on mobile (touch devices currently)
+            @media (hover: hover) and (pointer: fine) {
+                user-drag: element;
+                -webkit-user-drag: element;
+            }
+
+            ui-icon {
+                inline-size: 1.25rem;
+                block-size: 1.25rem;
+                flex-shrink: 0;
+                place-content: center;
+                place-items: center;
+            }
+
+            a, span {
+                background-color: transparent !important;
+            }
+
+            & > * {
+                background-color: transparent !important;
+                min-block-size: 0;
+                block-size: auto;
+            }
+        }
+
+        .row {
+            &:hover {
+                background-color: color-mix(in oklab, var(--color-on-surface) 8%, transparent);
+            }
+            &:active {
+                background-color: color-mix(in oklab, var(--color-on-surface) 11%, transparent);
+            }
+            &:focus-visible {
+                outline: 2px solid var(--color-primary, #3794ff);
+                outline-offset: -2px;
+            }
+        }
+
+        .c {
+            min-inline-size: 0;
+            display: flex;
+            flex-direction: row;
+            text-align: start;
+            text-wrap: nowrap;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            inline-size: auto;
+            place-content: center;
+            place-items: center;
+            justify-content: start;
+            color: inherit;
+            min-block-size: 0;
+            block-size: auto;
+        }
+
+        .icon { grid-column: icon; place-content: center; place-items: center; }
+        .name { grid-column: name; inline-size: stretch; }
+        .size {
+            grid-column: size;
+            justify-content: end;
+            text-align: end;
+        }
+        .date {
+            grid-column: date;
+            justify-content: end;
+            text-align: end;
+        }
+        .actions { grid-column: actions; }
+
+        .row, ::slotted(.row), .fm-grid, .fm-grid-header {
+            grid-template-columns: #{$row-grid};
+        }
+
+        @container(inline-size <= 600px) {
+            .row, ::slotted(.row), .fm-grid, .fm-grid-header { grid-template-columns: #{$row-grid-mobile}; }
+            .date { display: none !important; }
+        }
+
+        //
+        .actions {
+            background-color: color-mix(in oklab, var(--color-on-surface, #fff) 5%, transparent);
+            color: var(--color-on-surface);
+
+            pointer-events: none;
+            padding: 0.2rem;
+            max-inline-size: stretch;
+            border-radius: 999px;
+            border: none;
+
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            place-content: center;
+            place-items: center;
+            place-self: center;
+            justify-content: flex-end;
+            justify-self: end;
+            inline-size: max-content;
+            block-size: 2.125rem;
+            gap: 0.15rem;
+            overflow: visible;
+        }
+
+        .action-btn {
+            background-color: transparent;
+            color: var(--color-on-surface);
+
+            pointer-events: auto;
+            appearance: none;
+            border: none;
+            padding: 0;
+            border-radius: 999px;
+            cursor: pointer;
+            inline-size: 1.85rem;
+            block-size: 1.85rem;
+            min-inline-size: 1.85rem;
+            min-block-size: 1.85rem;
+            flex-shrink: 0;
+            aspect-ratio: 1;
+            display: inline-flex;
+            place-content: center;
+            place-items: center;
+            transition: background 0.14s ease, transform 0.1s ease;
+            position: relative;
+            overflow: hidden;
+            box-shadow: none;
+
+            &:hover {
+                background-color: color-mix(in oklab, var(--color-on-surface) 12%, transparent);
+            }
+
+            &:active {
+                transform: scale(0.94);
+            }
+
+            &:focus-visible {
+                outline: 2px solid color-mix(in oklab, var(--color-primary, #3794ff) 55%, transparent);
+                outline-offset: 1px;
+            }
+
+            ui-icon {
+                inline-size: 1.0625rem;
+                block-size: 1.0625rem;
+                min-inline-size: 1.0625rem;
+                min-block-size: 1.0625rem;
+            }
+        }
+
+        .fm-grid-header {
+            position: sticky !important;
+            display: grid;
+            grid-column: 1 / -1;
+            inset-block-start: 0;
+            z-index: 8;
+            padding: 0.4rem 0.65rem;
+            border-radius: 0;
+            border: none;
+            box-shadow: 0 1px 0 color-mix(in oklab, var(--color-on-surface, #fff) 6%, transparent);
+            background: color-mix(in oklab, var(--color-on-surface, #fff) 3.5%, transparent);
+            font-size: 0.6875rem;
+            font-weight: 600;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+            color: var(--color-on-surface-variant);
+            opacity: 1;
+            gap: 0.35rem;
+            min-block-size: 2rem;
+
+            place-content: center;
+            place-items: center;
+            justify-content: start;
+            justify-items: start;
+            text-align: start;
+
+            touch-action: manipulation;
+            pointer-events: auto;
+
+            & > * { inline-size: auto; }
+
+            .c { font-weight: 600; }
+            .icon { grid-column: icon; }
+            .name { grid-column: name; inline-size: stretch; }
+            .size {
+                grid-column: size;
+                justify-content: end;
+                text-align: end;
+            }
+            .date {
+                grid-column: date;
+                justify-content: end;
+                text-align: end;
+            }
+            .actions {
+                grid-column: actions;
+                inline-size: stretch;
+                block-size: fit-content;
+                box-shadow: none;
+                padding: 0;
+                max-inline-size: stretch;
+                border-radius: 0;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                place-content: center;
+                place-items: center;
+                text-wrap: nowrap;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                gap: 0.25rem;
+
+                justify-content: flex-end;
+                justify-items: end;
+                justify-self: end;
+                text-align: end;
+            }
+        }
+
+    }
+}

package/src/styles/ui/_explorer.scss

@@ -0,0 +1,237 @@
+// File Manager shell styles (basic variant)
+
+//
+@layer ux-file-manager {
+
+    :host(ui-file-manager) {
+        &, :where(*) {
+            box-sizing: border-box;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        & {
+            perspective: 1000;
+            container-type: inline-size;
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            inline-size: 100%;
+            block-size: 100%;
+            min-block-size: 0;
+            min-inline-size: 0;
+            /* WHY: Avoid skipped list painting under transformed frame ancestors. */
+            content-visibility: visible;
+            border-radius: 0;
+            overflow: hidden;
+            margin: 0;
+            line-height: normal;
+            max-block-size: none;
+            max-inline-size: none;
+
+            background-color: var(--color-surface);
+            color: var(--color-on-surface);
+        }
+
+        .fm-root {
+            gap: 0;
+            display: grid;
+            grid-template-columns: [content-col] minmax(0px, 1fr);
+            grid-template-rows: auto minmax(0px, 1fr);
+            inline-size: 100%;
+            block-size: 100%;
+            min-inline-size: 0;
+            min-block-size: 0;
+            flex: 1 1 auto;
+            overflow: hidden;
+        }
+
+        .fm-toolbar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: minmax(0px, max-content) minmax(0px, 1fr) minmax(0px, max-content);
+            grid-template-rows: minmax(0px, 1fr);
+            grid-auto-flow: column;
+            place-content: center;
+            place-items: center;
+            gap: 0.625rem;
+            border-radius: 0;
+            padding: 0.5rem 0.75rem;
+            line-height: normal;
+            background: var(--color-surface, #1e1e1e);
+            box-shadow: 0 1px 0 color-mix(in oklab, var(--color-on-surface, #fff) 6%, transparent);
+
+            button, input {
+                background-color: transparent;
+                color: var(--color-on-surface);
+            }
+
+            input {
+                inline-size: stretch;
+                block-size: stretch;
+                border: none;
+                outline: none;
+                padding: 0.45rem 0.85rem;
+                overflow: auto;
+                border-radius: 999px;
+                font: 0.8125rem/1.35 ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
+                background: color-mix(in oklab, var(--color-on-surface, #fff) 6%, transparent);
+            }
+
+            input:focus-visible {
+                box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary, #3794ff) 45%, transparent);
+            }
+
+            .btn {
+                transition: background 0.14s ease, transform 0.1s ease;
+                appearance: none;
+                border: 0;
+                padding: 0;
+                border-radius: 999px;
+                cursor: pointer;
+                inline-size: 2.5rem;
+                block-size: 2.5rem;
+                aspect-ratio: 1 / 1;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                background: transparent;
+
+                ui-icon {
+                    inline-size: 1.25rem;
+                    block-size: 1.25rem;
+                    flex-shrink: 0;
+                }
+            }
+
+            .btn:hover {
+                background: color-mix(in oklab, var(--color-on-surface) 9%, transparent);
+            }
+
+            .btn:active {
+                transform: scale(0.96);
+            }
+
+            .btn:focus-visible {
+                outline: 2px solid color-mix(in oklab, var(--color-primary, #3794ff) 55%, transparent);
+                outline-offset: 1px;
+            }
+
+            & > * {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                gap: 0.2rem;
+                block-size: fit-content;
+                min-block-size: stretch;
+                align-items: center;
+            }
+
+            & .fm-toolbar-left {
+                grid-column: 1;
+            }
+
+            & .fm-toolbar-left,
+            & .fm-toolbar-right {
+                padding: 0.2rem;
+                border-radius: 999px;
+                background: color-mix(in oklab, var(--color-on-surface, #fff) 5.5%, transparent);
+            }
+
+            & .fm-toolbar-center {
+                grid-column: 2;
+                flex-grow: 1;
+                inline-size: stretch;
+                block-size: fit-content;
+                min-block-size: 2.5rem;
+                border-radius: 999px;
+                padding: 0;
+                overflow: hidden;
+                place-content: stretch;
+                place-items: stretch;
+                justify-content: start;
+                background: color-mix(in oklab, var(--color-on-surface, #fff) 5.5%, transparent);
+
+                & > * {
+                    inline-size: stretch;
+                    block-size: stretch;
+                }
+
+                & input {
+                    padding-inline: 0.9rem;
+                    inline-size: stretch;
+                    background: transparent;
+                }
+            }
+
+            & .fm-toolbar-right { grid-column: 3; }
+        }
+
+        .fm-sidebar {
+            grid-row: 2;
+            grid-column: sidebar-col;
+            align-content: start;
+            gap: 0.5rem;
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+            line-height: normal;
+            justify-content: start;
+            justify-items: start;
+            text-align: start;
+            display: none;
+
+            .sec {
+                display: grid;
+                gap: 0.25rem;
+                place-content: start;
+                place-items: start;
+                justify-content: start;
+                justify-items: start;
+            }
+            .sec-title {
+                font-weight: 600;
+                opacity: 0.8;
+                padding-block: 0.25rem;
+                place-self: start;
+            }
+            .link {
+                text-align: start;
+                appearance: none;
+                border: 0;
+                padding: 0.25rem 0.375rem;
+                border-radius: 0.375rem;
+                cursor: pointer;
+                line-height: normal;
+            }
+        }
+
+        .fm-content {
+            grid-row: 2;
+            grid-column: content-col;
+            display: flex;
+            flex-direction: column;
+            inline-size: 100%;
+            block-size: 100%;
+            min-inline-size: 0;
+            min-block-size: 0;
+            flex: 1 1 auto;
+            overflow: hidden;
+            border-radius: 0;
+            padding: 0 0.35rem 0.45rem;
+
+            scrollbar-width: thin;
+            scrollbar-color: color-mix(in oklab, var(--color-on-surface) 22%, transparent) transparent;
+        }
+
+        .status { padding: 0.5rem; opacity: 0.8; }
+        .status.error { color: var(--error-color, crimson); }
+
+        @container (inline-size < 520px) {
+            .fm-content { grid-column: 1 / -1; }
+            .fm-root { grid-column: 1 / -1; }
+            .fm-grid { grid-column: 1 / -1; }
+            .fm-root[data-with-sidebar="true"] { grid-template-columns: [content-col] minmax(0px, 1fr); }
+            .fm-sidebar { display: none !important; }
+        }
+    }
+}

package/src/styles/ui/_forms-bare-host-elements.scss

@@ -0,0 +1,25 @@
+// Host-wide bare form controls (opt-in only; keep out of default fl-ui document scope).
+@mixin emit-bare-form-element-layer() {
+    @layer layer.shell.faint.forms {
+        input,
+        select,
+        textarea {
+            & {
+                background-repeat: no-repeat;
+                min-block-size: 2.5rem;
+                font-size: inherit;
+                max-inline-size: stretch;
+                max-inline-size: 100cqi;
+
+                text-overflow: ellipsis;
+                overflow: auto;
+                scrollbar-width: none;
+            }
+        }
+
+        textarea[data-multiline="true"] {
+            min-block-size: 5rem;
+            resize: vertical;
+        }
+    }
+}

package/src/styles/ui/_forms-options.scss

@@ -0,0 +1,2 @@
+// Compile-time flags for `_forms.scss` (must live in a dedicated module for `@use` ordering).
+$include-bare-form-element-rules: false !default;