@fest-lib/fl-ui 0.1.1

package/src/styles/fonts/_index.scss

@@ -0,0 +1,8 @@
+/**
+ * Font Styles Index
+ *
+ * Font style declarations (not loading fonts directly)
+ * Fonts are loaded via JavaScript font-loader module
+ */
+
+@forward "./inter";

package/src/styles/fonts/_inter.scss

@@ -0,0 +1,171 @@
+/**
+ * Inter Font Family Styles
+ *
+ * Style declarations for Inter font family (not loading directly)
+ * Fonts are loaded via JavaScript font-loader module
+ */
+
+/* Fallback fonts: */
+:root, :host, :scope {
+    font-family: Inter, sans-serif;
+    font-optical-sizing: auto;
+    font-variation-settings: "opsz" 16;
+}
+
+/* Variable fonts usage: */
+@supports (font-variation-settings: normal) {
+    :root, :host, :scope {
+        font-family: InterVariable, sans-serif;
+        font-optical-sizing: auto;
+        font-variation-settings: "opsz" 16;
+    }
+}
+
+/* Font feature values: */
+@font-feature-values InterVariable {
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1; /* Open digits */
+        disambiguation: 2; /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3; /* Round quotes & commas */
+        square-punctuation: 7; /* Square punctuation */
+        square-quotes: 8; /* Square quotes */
+        circled-characters: 5; /* Circled characters */
+        squared-characters: 6; /* Squared characters */
+    }
+}
+
+@font-feature-values Inter {
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1; /* Open digits */
+        disambiguation: 2; /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3; /* Round quotes & commas */
+        square-punctuation: 7; /* Square punctuation */
+        square-quotes: 8; /* Square quotes */
+        circled-characters: 5; /* Circled characters */
+        squared-characters: 6; /* Squared characters */
+    }
+}
+
+@font-feature-values InterDisplay {
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1; /* Open digits */
+        disambiguation: 2; /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3; /* Round quotes & commas */
+        square-punctuation: 7; /* Square punctuation */
+        square-quotes: 8; /* Square quotes */
+        circled-characters: 5; /* Circled characters */
+        squared-characters: 6; /* Squared characters */
+    }
+}
+

package/src/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./fonts" as *;
+@use "./ui" as *;

package/src/styles/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Veela.CSS TypeScript Module
+ *
+ * Exports font loading utilities and type definitions.
+ * Runtime styles and initialization are in ../scss/runtime/index.ts
+ */
+
+import { loadAllFonts, loadFontRegistry } from './font-loader';
+import { loadAsAdopted } from '@fest-lib/dom'; //@ts-ignore
+import styles from './index.scss?inline';
+import globalNativeControlStyles from './patch-global-native-controls.scss?inline';
+
+//
+const fontStyles = `
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+`;
+
+//
+export * from './font-loader';
+export type { FontMetadata } from './font-loader';
+export const loader = async (options?: { includeGlobalNativeControls?: boolean }) => {
+    await loadAsAdopted(fontStyles)?.catch(() => undefined);
+    await loadAllFonts().catch(() => undefined);
+    await loadAsAdopted(styles)?.catch(() => undefined);
+    if (options?.includeGlobalNativeControls) {
+        await loadAsAdopted(globalNativeControlStyles)?.catch(() => undefined);
+    }
+};
+
+/** Host-wide native control chrome (legacy). Prefer scoping with `.btn` / field mixins. */
+export async function loadFlUIGlobalNativeControlStyles(): Promise<void> {
+    await loadAsAdopted(globalNativeControlStyles)?.catch(() => undefined);
+}

package/src/styles/layers.scss

@@ -0,0 +1 @@
+@layer tokens, base, layout, utilities, shells, shell, views, view, viewer, components, ux-layer, markdown, essentials, print, print-breaks, overrides;

package/src/styles/patch-global-native-controls.scss

@@ -0,0 +1,13 @@
+// Incremental sheet: legacy host-wide native `button` + bare `input`/`select`/`textarea`.
+@use "./ui/native-host-button-chrome" as host;
+@use "./ui/forms-bare-host-elements" as bare;
+
+@layer tokens, base, layout, utilities, shells, shell, views, view, viewer, components, ux-layer, markdown, essentials, print, print-breaks, overrides;
+
+@layer components {
+    button {
+        @include host.essentials-native-host-button-chrome-base;
+    }
+}
+
+@include bare.emit-bare-form-element-layer();

package/src/styles/scripts/encode-fonts.ts

@@ -0,0 +1,172 @@
+#!/usr/bin/env node
+/**
+ * Font Encoding Utility
+ *
+ * Standalone script to compress fonts and encode them to base64
+ */
+
+import { readFile, writeFile, mkdir, readdir } from 'node:fs/promises';
+import { resolve, dirname, basename, extname } from 'node:path';
+import { createReadStream, createWriteStream } from 'node:fs';
+import { pipeline } from 'node:stream/promises';
+import { createGzip } from 'node:zlib';
+
+interface FontMetadata {
+    base64: string;
+    family: string;
+    style: string;
+    weight: string | number;
+    compressed: boolean;
+}
+
+async function encodeToBase64(filePath: string): Promise<string> {
+    const data = await readFile(filePath);
+    return data.toString('base64');
+}
+
+async function compressFile(inputPath: string, outputPath: string): Promise<void> {
+    await mkdir(dirname(outputPath), { recursive: true });
+    const readStream = createReadStream(inputPath);
+    const writeStream = createWriteStream(outputPath);
+    const gzipStream = createGzip({ level: 9 });
+    await pipeline(readStream, gzipStream, writeStream);
+}
+
+function parseFontMetadata(filename: string): {
+    family: string;
+    style: string;
+    weight: string | number;
+} {
+    const baseName = basename(filename, extname(filename));
+    let family = 'Inter';
+    let style = 'normal';
+    let weight: string | number = 'normal';
+
+    if (baseName.includes('InterVariable')) {
+        family = 'InterVariable';
+        weight = '100 900';
+        if (baseName.includes('Italic')) style = 'italic';
+    } else if (baseName.includes('InterDisplay')) {
+        family = 'InterDisplay';
+        const weightMatch = baseName.match(/(Thin|ExtraLight|Light|Regular|Medium|SemiBold|Bold|ExtraBold|Black)/);
+        if (weightMatch) {
+            const weightMap: Record<string, number> = {
+                'Thin': 100, 'ExtraLight': 200, 'Light': 300, 'Regular': 400,
+                'Medium': 500, 'SemiBold': 600, 'Bold': 700, 'ExtraBold': 800, 'Black': 900
+            };
+            weight = weightMap[weightMatch[1]] || 400;
+        }
+        if (baseName.includes('Italic')) style = 'italic';
+    } else if (baseName.startsWith('Inter-')) {
+        family = 'Inter';
+        const weightMatch = baseName.match(/(Thin|ExtraLight|Light|Regular|Medium|SemiBold|Bold|ExtraBold|Black)/);
+        if (weightMatch) {
+            const weightMap: Record<string, number> = {
+                'Thin': 100, 'ExtraLight': 200, 'Light': 300, 'Regular': 400,
+                'Medium': 500, 'SemiBold': 600, 'Bold': 700, 'ExtraBold': 800, 'Black': 900
+            };
+            weight = weightMap[weightMatch[1]] || 400;
+        }
+        if (baseName.includes('Italic')) style = 'italic';
+    }
+    return { family, style, weight };
+}
+
+async function scanFontDirectory(dir: string): Promise<string[]> {
+    const fontFiles: string[] = [];
+    const scanDir = async (currentDir: string) => {
+        const entries = await readdir(currentDir, { withFileTypes: true });
+        for (const entry of entries) {
+            const fullPath = resolve(currentDir, entry.name);
+            if (entry.isDirectory()) {
+                await scanDir(fullPath);
+            } else if (entry.isFile() && (entry.name.endsWith('.woff2') || entry.name.endsWith('.woff'))) {
+                fontFiles.push(fullPath);
+            }
+        }
+    };
+    await scanDir(dir);
+    return fontFiles;
+}
+
+async function encodeFonts(fontDir: string, outputFile: string, compress: boolean = false): Promise<void> {
+    console.log(`[font-encoder] Scanning font directory: ${fontDir}`);
+    const fontFiles = await scanFontDirectory(fontDir);
+    console.log(`[font-encoder] Found ${fontFiles.length} font files`);
+
+    if (fontFiles.length === 0) {
+        console.warn('[font-encoder] No font files found!');
+        return;
+    }
+
+    const generatedFonts: Array<{ key: string; metadata: FontMetadata }> = [];
+
+    for (const fontPath of fontFiles) {
+        const relativePath = fontPath.replace(resolve(fontDir) + '/', '');
+        const metadata = parseFontMetadata(fontPath);
+        console.log(`[font-encoder] Processing: ${relativePath}`);
+
+        let base64: string;
+        let isCompressed = false;
+
+        if (fontPath.endsWith('.woff2')) {
+            base64 = await encodeToBase64(fontPath);
+            isCompressed = false;
+        } else if (compress && !fontPath.endsWith('.woff2')) {
+            const tempPath = fontPath + '.gz';
+            await compressFile(fontPath, tempPath);
+            base64 = await encodeToBase64(tempPath);
+            isCompressed = true;
+            const { unlink } = await import('node:fs/promises');
+            await unlink(tempPath);
+        } else {
+            base64 = await encodeToBase64(fontPath);
+            isCompressed = false;
+        }
+
+        const key = relativePath.replace(/[\/\\]/g, '_').replace(/\.(woff2?|gz)$/i, '');
+        generatedFonts.push({
+            key,
+            metadata: { base64, family: metadata.family, style: metadata.style, weight: metadata.weight, compressed: isCompressed }
+        });
+    }
+
+    const registryContent = `/**
+ * Font Registry
+ * Auto-generated by font encoding utility
+ * DO NOT EDIT MANUALLY
+ * Generated: ${new Date().toISOString()}
+ */
+
+export const fontRegistry: Record<string, any> = {
+${generatedFonts.map(({ key, metadata }) => `    '${key}': {
+        base64: '${metadata.base64}',
+        family: '${metadata.family}',
+        style: '${metadata.style}',
+        weight: ${typeof metadata.weight === 'string' ? `'${metadata.weight}'` : metadata.weight},
+        compressed: ${metadata.compressed}
+    }`).join(',\n')}
+};
+`;
+
+    await mkdir(dirname(outputFile), { recursive: true });
+    await writeFile(outputFile, registryContent, 'utf-8');
+
+    console.log(`[font-encoder] Generated font registry with ${generatedFonts.length} fonts`);
+    console.log(`[font-encoder] Output file: ${outputFile}`);
+}
+
+const __dirname = resolve(import.meta.dirname, '../');
+const fontDir = resolve(__dirname, './assets/fonts');
+const outputFile = resolve(__dirname, './src/ts/font-registry.ts');
+const compress = process.argv.includes('--compress');
+
+encodeFonts(fontDir, outputFile, compress)
+    .then(() => {
+        console.log('[font-encoder] Done!');
+        process.exit(0);
+    })
+    .catch((error) => {
+        console.error('[font-encoder] Error:', error);
+        process.exit(1);
+    });

package/src/styles/skins/thin/Thin.ts

@@ -0,0 +1,13 @@
+import { DOMMixin } from "@fest-lib/dom";
+
+//
+export class ThinSlider extends DOMMixin {
+    constructor(name?: string) { super(name); }
+
+    connect(_self: unknown) {
+        // TODO: implement thin slider connection logic
+    }
+}
+
+//
+new ThinSlider("slider-thin");

package/src/styles/ui/_bar.scss

@@ -0,0 +1,271 @@
+
+@use "veela-lib" as *;
+
+// ============================================================================
+// Bar Component Styles
+// ============================================================================
+@mixin tabbed-bar($selector: ".bar") {
+    @at-root :host {
+
+        // ================================================================
+        // Slotted Bar Content
+        // ================================================================
+        &::slotted([slot="bar"]), ::slotted([slot="bar"]) {
+            // Grid positioning
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+
+            // Sizing
+            inline-size: stretch;
+            block-size: stretch;
+            max-block-size: 3rem;
+            flex-grow: 1;
+
+            // Alignment
+            place-content: center;
+            place-items: center;
+
+            //
+            background-color: transparent;
+        }
+
+        //
+        #{$selector} {
+            // ================================================================
+            // Base Layout
+            // ================================================================
+            & {
+                display: grid;
+                grid-template-columns:
+                    [sidebar-col] minmax(0px, 0px)
+                    [button-col] minmax(0px, 3.5rem)
+                    [content-col] minmax(0px, 1fr)
+                    [pinned-col] minmax(0px, 3.5rem);
+                grid-template-rows: minmax(0px, 1fr);
+                grid-auto-rows: 0;
+
+                // Grid positioning
+                grid-column: 1 / -1;
+                grid-row: bar-row;
+                z-index: 3;
+                border-radius: 0px;
+
+                // Sizing
+                inline-size: stretch;
+                block-size: stretch;
+                min-block-size: stretch;
+                max-block-size: 3.5rem;
+                box-sizing: border-box;
+
+                // Spacing
+                padding-block: 0.25rem;
+                padding-inline: 0.75rem;
+                gap: 0px;
+
+                // Visual
+                box-shadow: none;
+                overflow: hidden;
+
+                // Interaction
+                pointer-events: auto;
+                background-color: oklch(from --c2-surface(0.15, var(--current, currentColor)) l c h / 0.9);
+                backdrop-filter: blur(1rem);
+                filter: none;
+
+                // Alignment
+                place-content: center;
+                place-items: center;
+            }
+
+            // ================================================================
+            // Child Elements
+            // ================================================================
+            & > :where(*) {
+                grid-row: 1;
+            }
+
+            // ================================================================
+            // Spacing by Tab Position
+            // ================================================================
+            @at-root :host & {
+                margin-block-start: 0px;
+                margin-block-end: var(--space-md);
+            }
+
+            @at-root :host([tab-position="bottom"]) & {
+                margin-block-start: var(--space-md);
+                margin-block-end: 0px;
+            }
+
+            @at-root :host([tab-position="top"]) & {
+                margin-block-start: 0px;
+                margin-block-end: var(--space-md);
+            }
+
+            //
+            .toolbar-slot {
+                padding: 0rem;
+                grid-row: 1 / 1 span;
+                grid-column: content-col;
+                max-inline-size: stretch;
+                max-block-size: 3rem;
+                inline-size: stretch;
+                block-size: stretch;
+                min-inline-size: 0px;
+                min-block-size: 3rem;
+                place-content: center;
+                place-items: center;
+                justify-content: center;
+                align-items: center;
+                gap: 0rem;
+                margin: 0px;
+                inset: 0px;
+                z-index: 99;
+                border-radius: 50cqmin;
+                overflow: hidden;
+                opacity: 0;
+                visibility: hidden;
+                pointer-events: none;
+                transition: opacity var(--duration-normal, 160ms) var(--ease-out, ease),
+                            visibility var(--duration-normal, 160ms) var(--ease-out, ease);
+
+                //
+                &[toolbar-opened="true"] {
+                    opacity: 1;
+                    visibility: visible;
+                    pointer-events: auto;
+                }
+            }
+
+            // ================================================================
+            // Sidebar Toggle Button
+            // ================================================================
+            button.open-sidebar {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                place-content: center;
+                place-items: center;
+                gap: 0rem;
+                margin-inline-end: var(--space-sm);
+
+                // Grid positioning
+                grid-column: button-col;
+                grid-row: 1;
+
+                // Sizing
+                aspect-ratio: 1 / 1;
+                inline-size: fit-content;
+                block-size: stretch;
+                min-inline-size: 3rem;
+                min-block-size: 3rem;
+                max-inline-size: 3rem;
+                box-sizing: border-box;
+                padding: 0.25rem;
+
+                // Visual
+                background-color: transparent;
+                border: 0px none transparent;
+                outline: 0px none transparent;
+                border-radius: 50cqmin;
+                transition: background-color var(--duration-normal, 160ms) var(--ease-out, ease);
+
+                // Interaction
+                cursor: pointer;
+                pointer-events: auto;
+                touch-action: pan-x;
+
+                // Colorization
+                background-color: --c2-surface(var(--_color-shade), var(--current, currentColor));
+
+                // Icon
+                ui-icon {
+                    inline-size: var(--tabbed-icon-size);
+                    block-size: var(--tabbed-icon-size);
+                    min-inline-size: var(--tabbed-icon-size);
+                    min-block-size: var(--tabbed-icon-size);
+                    max-inline-size: var(--tabbed-icon-size);
+                    max-block-size: var(--tabbed-icon-size);
+                    aspect-ratio: 1 / 1;
+                    flex-shrink: 0;
+                }
+
+                // Label
+                span {
+                    display: block;
+                    font-size: 0.8rem;
+                    font-weight: 400;
+                    padding-inline-end: 0.333rem;
+                }
+
+                // Focus state
+                &:focus-visible {
+                    outline: 2px solid color-mix(in oklch, currentColor 35%, transparent);
+                    outline-offset: 2px;
+                }
+            }
+
+            // ================================================================
+            // Tab Buttons
+            // ================================================================
+            :where(.ui-tabbed-box-tab) button {
+                padding: 0.5rem;
+                touch-action: pan-x;
+            }
+
+            // ================================================================
+            // Handle (hidden)
+            // ================================================================
+            .ui-tabbed-box-handle {
+                inline-size: 0;
+                block-size: 0;
+                visibility: hidden;
+                pointer-events: none;
+                place-content: center;
+                place-items: center;
+                overflow: visible;
+                touch-action: pan-x;
+            }
+
+            // ================================================================
+            // Icons
+            // ================================================================
+            ui-icon {
+                content-visibility: visible;
+                pointer-events: none;
+                color: --c2-on-surface(0.0, var(--current, currentColor));
+                --icon-color: --c2-on-surface(0.0, var(--current, currentColor));
+                inline-size: var(--tabbed-icon-size);
+                block-size: var(--tabbed-icon-size);
+            }
+
+            // ================================================================
+            // Alignment by Tab Position
+            // ================================================================
+            @at-root :host([tab-position="bottom"]) #{$selector} & {
+                align-self: end;
+            }
+
+            // ================================================================
+            // Responsive Behavior
+            // ================================================================
+            // Drop menu mode: always show button
+            @at-root :host([sidebar-drop-menu]) & {
+                button.open-sidebar {
+                    display: flex !important;
+                }
+            }
+
+            // Desktop: hide button when sidebar is not in drop menu mode
+            @at-root :host(:not([sidebar-drop-menu])) & {
+                @container (min-inline-size: 800px) {
+                    --button-inline-size: 0px;
+                    & button.open-sidebar {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}