@fest-lib/veela 0.1.19 → 1.0.1

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

@@ -0,0 +1,417 @@
+// File Manager content grid styles (basic variant)
+
+/* WHY: `@property … initial-value: inherit` is invalid and Capacitor replaceSync drops the sheet. */
+
+//
+@layer components {
+    /* WHY: no subgrid — Android WebView collapses name/size to 0 and spills Actions. */
+    $row-grid:        [icon] 2rem [name] minmax(5rem, 1fr) [size] 4.25rem [date] minmax(0, 7.5rem) [actions] 6.4rem;
+    $row-grid-mobile: [icon] 2rem [name] minmax(4.5rem, 1fr) [size] 3.75rem [date] 0 [actions] 6.4rem;
+
+    :host(ui-file-manager-content) {
+        & {
+            /* WHY: perspective + isolation skipped descendant text paint on Capacitor WebView. */
+            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;
+            container-type: size;
+
+            touch-action: manipulation;
+            pointer-events: auto;
+            border-radius: 0;
+            margin: 0;
+
+            color-scheme: inherit;
+            background-color: #f7f8fc;
+            background-color: light-dark(#f7f8fc, #1a1d24);
+            background-color: var(--color-surface);
+            color: #1a1c1f;
+            color: light-dark(#1a1c1f, #e8eaed);
+            color: var(--color-on-surface);
+
+            outline: none 0px transparent;
+            border: none 0px transparent;
+        }
+
+        .fm-grid {
+            display: flex;
+            flex-direction: column;
+            align-content: start;
+            inline-size: 100%;
+            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;
+        }
+
+        .fm-grid-rows {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            align-content: start;
+
+            gap: var(--gap-sm, 0.5rem);
+            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 var(--ui-explorer-row-height, var(--touch-min, 3rem));
+            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-columns: #{$row-grid};
+            /* WHY: minmax(0, …) + min-block-size:0 collapsed rows below --touch-min on Android WebView. */
+            grid-template-rows: minmax(var(--ui-explorer-row-height, var(--touch-min, 3rem)), auto);
+            order: var(--order, 1) !important;
+            min-block-size: var(--ui-explorer-row-height, var(--touch-min, 3rem));
+            box-sizing: border-box;
+
+            inline-size: 100%;
+            min-inline-size: 0;
+            place-content: center;
+            place-items: center;
+            place-self: stretch;
+            justify-items: start;
+            padding: 0.35rem 0.65rem;
+            border-radius: var(--radius-lg, 0.75rem);
+            border: none;
+            cursor: pointer;
+            pointer-events: auto;
+            touch-action: manipulation;
+            block-size: auto;
+            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 {
+                --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
+                --ui-icon-padding: 0px;
+                inline-size: var(--ui-icon-size);
+                block-size: var(--ui-icon-size);
+                min-inline-size: var(--ui-icon-size);
+                min-block-size: var(--ui-icon-size);
+                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, #5a7fff);
+                outline-offset: -2px;
+            }
+        }
+
+        .c:not(.icon) {
+            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;
+        }
+
+        /* WHY: anonymous flex text nodes often do not paint on Android WebView. */
+        .c.name,
+        .c.size,
+        .c.date {
+            display: block;
+            color: #1a1c1f;
+            color: light-dark(#1a1c1f, #e8eaed);
+            color: var(--color-on-surface);
+            -webkit-text-fill-color: currentColor;
+        }
+
+        .c .t {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: inherit;
+            -webkit-text-fill-color: currentColor;
+        }
+
+        .icon {
+            display: flex;
+            grid-column: icon;
+            place-content: center;
+            place-items: center;
+            overflow: visible;
+            flex-shrink: 0;
+            inline-size: 1.5rem;
+            block-size: 1.5rem;
+            min-inline-size: 1.5rem;
+            min-block-size: 1.5rem;
+            aspect-ratio: 1;
+
+            ui-icon,
+            img {
+                --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
+                --ui-icon-padding: 0px;
+                inline-size: var(--ui-icon-size) !important;
+                block-size: var(--ui-icon-size) !important;
+                min-inline-size: var(--ui-icon-size) !important;
+                min-block-size: var(--ui-icon-size) !important;
+                max-inline-size: var(--ui-icon-size) !important;
+                max-block-size: var(--ui-icon-size) !important;
+                flex-shrink: 0;
+                object-fit: contain;
+            }
+        }
+        .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-header {
+            grid-template-columns: #{$row-grid};
+        }
+
+        @container (inline-size <= 600px) {
+            .row, ::slotted(.row), .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: 6.4rem;
+            max-inline-size: 6.4rem;
+            block-size: 2.125rem;
+            gap: 0.15rem;
+            overflow: hidden;
+        }
+
+        .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, #5a7fff) 55%, transparent);
+                outline-offset: 1px;
+            }
+
+            ui-icon {
+                --ui-icon-size: var(--ui-explorer-action-icon-size, 1.15rem);
+                --ui-icon-padding: 0px;
+                inline-size: var(--ui-icon-size) !important;
+                block-size: var(--ui-icon-size) !important;
+                min-inline-size: var(--ui-icon-size) !important;
+                min-block-size: var(--ui-icon-size) !important;
+                max-inline-size: var(--ui-icon-size) !important;
+                max-block-size: var(--ui-icon-size) !important;
+            }
+        }
+
+        .fm-grid-header {
+            position: sticky !important;
+            display: grid;
+            grid-template-columns: #{$row-grid};
+            box-sizing: border-box;
+            inline-size: 100%;
+            min-inline-size: 0;
+            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: #5c5f66;
+            color: light-dark(#5c5f66, #c4c7ce);
+            color: var(--color-on-surface-variant);
+            -webkit-text-fill-color: currentColor;
+            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/scss/ui/_explorer.scss

@@ -0,0 +1,274 @@
+// File Manager shell styles (basic variant)
+
+//
+@layer components {
+
+    :host(ui-file-manager) {
+        &, :where(*) {
+            box-sizing: border-box;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        & {
+            container-type: inline-size;
+            container-name: ui-file-manager;
+            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;
+
+            /* WHY: plain hex before light-dark/var — WebView may lack both; invalid `--color-*` is IACVT. */
+            color-scheme: inherit;
+            background-color: #f7f8fc;
+            background-color: light-dark(#f7f8fc, #1a1d24);
+            background-color: var(--color-surface);
+            color: #1a1c1f;
+            color: light-dark(#1a1c1f, #e8eaed);
+            color: var(--color-on-surface);
+            --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
+            --ui-icon-padding: 0px;
+            --icon-color: light-dark(#1a1c1f, #e8eaed);
+            --icon-color: var(--color-on-surface);
+        }
+
+        .fm-root {
+            position: relative;
+            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: #f7f8fc;
+            background: light-dark(#f7f8fc, #1a1d24);
+            background: var(--color-surface);
+            box-shadow: 0 1px 0 color-mix(in oklab, var(--color-on-surface, #fff) 6%, transparent);
+
+            button, input {
+                background-color: transparent;
+                color: #1a1c1f;
+                color: light-dark(#1a1c1f, #e8eaed);
+                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, #5a7fff) 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 {
+                    --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
+                    --ui-icon-padding: 0px;
+                    inline-size: var(--ui-icon-size) !important;
+                    block-size: var(--ui-icon-size) !important;
+                    min-inline-size: var(--ui-icon-size) !important;
+                    min-block-size: var(--ui-icon-size) !important;
+                    max-inline-size: var(--ui-icon-size) !important;
+                    max-block-size: var(--ui-icon-size) !important;
+                    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, #5a7fff) 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-root--settings .fm-content {
+            visibility: hidden;
+            pointer-events: none;
+        }
+
+        .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; }
+            .fm-toolbar {
+                gap: 0.35rem;
+                padding-inline: 0.4rem;
+                .btn {
+                    inline-size: 2rem;
+                    block-size: 2rem;
+                }
+                & .fm-toolbar-center {
+                    min-inline-size: 0;
+                }
+            }
+        }
+    }
+}

package/src/scss/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 components {
+        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;
+        }
+    }
+}