@fest-lib/veela 0.1.19 → 1.0.1

package/src/scss/ui/components/statusbar.scss

@@ -0,0 +1,255 @@
+/*
+ * Filename: statusbar.scss
+ * FullPath: modules/projects/fl.ui/src/ui/navigation/statusbar/statusbar.scss
+ * Change date and time: 14.00.00_31.07.2026
+ * Reason for changes: Mobile/fullscreen transparent overlay statusbar + desktop footer.
+ */
+//@use "veela-lib" as m;
+
+/* Shadow layout for <ui-statusbar> slots. */
+:host(ui-statusbar) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.35rem;
+    box-sizing: border-box;
+    inline-size: 100%;
+        color: var(--env-status-fg, var(--wallpaper-contrast-color, CanvasText));
+    background: transparent;
+}
+
+:host(ui-statusbar) .left,
+:host(ui-statusbar) .center,
+:host(ui-statusbar) .right {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    background: transparent;
+    padding-block-start: 0.5rem;
+}
+
+:host(ui-statusbar) .left {
+    flex: 0 1 auto;
+    justify-content: flex-start;
+    padding-inline-start: max(1rem, env(safe-area-inset-left, 0));
+}
+
+:host(ui-statusbar) .center {
+    flex: 1 1 auto;
+    justify-content: center;
+}
+
+:host(ui-statusbar) .right {
+    flex: 0 1 auto;
+    justify-content: flex-end;
+    margin-inline-start: auto;
+    padding-inline-end: max(1rem, env(safe-area-inset-right, 0));
+}
+
+@media screen and (pointer: fine) and ((min-width: 768px) or (hover: hover)) {
+    :host(ui-statusbar), ui-statusbar {
+        display: none !important;
+    }
+}
+
+@layer components {
+    /* Desktop footer statusbar (inside bottom chrome stack). */
+    .env-ui-statusbar {
+        order: 1;
+        padding: 0.35rem 0.65rem calc(0.35rem + env(safe-area-inset-bottom, 0));
+        background: color-mix(
+            in oklab,
+            var(--color-surface-container, --u2-color-mod(var(--base-color, #5a9ec8), 960)) 88%,
+            transparent
+        );
+        border-block-start: 1px solid var(--wf-md-outline-variant, var(--color-outline-variant));
+        backdrop-filter: blur(10px);
+        color: var(--color-on-surface, --u2-color-mod(var(--base-color, #5a9ec8), 100));
+    }
+
+    .env-ui-statusbar__intro p {
+        margin: 0.1rem 0;
+        opacity: 0.92;
+    }
+
+    .env-ui-statusbar__right {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    .env-ui-statusbar__clock {
+        font: 600 0.8125rem/1 ui-sans-serif, system-ui, sans-serif;
+        font-variant-numeric: tabular-nums;
+        letter-spacing: 0.01em;
+        color: inherit;
+        user-select: none;
+        pointer-events: auto;
+        cursor: pointer;
+        border-radius: 0.35rem;
+        padding: 0.15rem 0.25rem;
+    }
+
+    .env-ui-statusbar__clock:hover,
+    .env-ui-statusbar__clock:focus-visible {
+        background: color-mix(in oklch, currentColor 12%, transparent);
+        color: contrast-color(inherit(background-color));
+        outline: none;
+    }
+
+    .env-device-tray--footer {
+        pointer-events: auto;
+        cursor: pointer;
+        border-radius: 0.35rem;
+    }
+
+    .env-device-tray--footer:hover,
+    .env-device-tray--footer:focus-visible {
+        background: color-mix(in oklch, currentColor 12%, transparent);
+        color: contrast-color(inherit(background-color));
+        outline: none;
+    }
+
+    .env-status-bar__tray {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        gap: 0.35rem;
+    }
+
+    .env-status-bar__chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.12rem 0.35rem;
+        border-radius: 999px;
+        background: color-mix(in oklch, var(--env-status-fg, var(--wf-md-on-surface, white)) 10%, transparent);
+        border: 1px solid color-mix(in oklch, var(--env-status-fg, var(--wf-md-on-surface, white)) 18%, transparent);
+        line-height: 1;
+        color: inherit;
+        color: contrast-color(inherit(background-color));
+        font-variant-numeric: tabular-nums;
+
+        span {
+            font-variant-numeric: tabular-nums;
+        }
+    }
+
+    .env-status-bar__chip ui-icon {
+        /* WHY: Phosphor default padding shrinks status glyphs; size the slot explicitly. */
+        --icon-size: 1.15rem;
+        --icon-padding: 0;
+        --icon-color: var(--env-status-fg, var(--wallpaper-contrast-color, currentColor));
+        display: block;
+        inline-size: var(--icon-size);
+        block-size: var(--icon-size);
+        min-inline-size: var(--icon-size);
+        min-block-size: var(--icon-size);
+        font-size: var(--icon-size);
+        color: var(--icon-color);
+    }
+
+    .env-status-bar__pct {
+        font-variant-numeric: tabular-nums;
+        opacity: 0.95;
+    }
+
+    .env-status-bar__meta {
+        margin: 0;
+        opacity: 0.88;
+        font-size: 11px;
+    }
+
+    /*
+     * Overlay statusbar: fixed top band over wallpaper / window title spacer.
+     * Shown when `.env-shell-chrome[data-status-overlay]` (mobile browser or fullscreen; not standalone).
+     */
+    .env-shell-chrome[data-status-overlay] .env-ui-statusbar,
+    .env-shell-root[data-status-overlay] > .env-shell-chrome .env-ui-statusbar {
+        position: fixed;
+        inset-inline: 0;
+        inset-block-start: 0;
+        inset-block-end: auto;
+        z-index: calc(var(--env-z-shell-chrome, 2147483000) + 2);
+        order: unset;
+        display: flex;
+        align-items: center;
+        /* INVARIANT: same token as ui-window title spacer (`--env-status-inset-top`). */
+        block-size: var(--env-status-inset-top, max(2rem, env(safe-area-inset-top, 0px)));
+        min-block-size: var(--env-status-inset-top, max(2rem, env(safe-area-inset-top, 0px)));
+        padding: 0 0.75rem;
+        box-sizing: border-box;
+        background: transparent !important;
+        border: 0 !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+        --icon-color: var(--env-status-fg, var(--wallpaper-contrast-color));
+        color: var(--env-status-fg, var(--wallpaper-contrast-color));
+        pointer-events: none;
+    }
+
+    .env-shell-chrome[data-status-overlay] .env-ui-statusbar__intro,
+    .env-shell-chrome[data-status-overlay] .env-status-bar__meta {
+        display: none !important;
+    }
+
+    .env-shell-chrome[data-status-overlay] .env-ui-statusbar__clock {
+        display: block;
+        font-size: 0.875rem;
+        color: var(--env-status-fg, var(--wallpaper-contrast-color));
+    }
+
+    .env-shell-chrome[data-status-overlay] .env-device-tray--footer,
+    .env-shell-chrome[data-status-overlay] .env-status-bar__chip {
+        color: var(--env-status-fg, var(--wallpaper-contrast-color));
+    }
+
+    .env-shell-chrome[data-status-overlay] .env-status-bar__chip ui-icon {
+        --icon-size: 1.25rem;
+        --icon-padding: 0;
+        --icon-color: var(--env-status-fg, var(--wallpaper-contrast-color));
+        inline-size: var(--icon-size);
+        block-size: var(--icon-size);
+        min-inline-size: var(--icon-size);
+        min-block-size: var(--icon-size);
+        font-size: var(--icon-size);
+        color: var(--icon-color);
+    }
+
+    .env-shell-chrome[data-status-overlay] .env-status-bar__pct {
+        font-size: 0.8125rem;
+    }
+
+    .env-shell-chrome[data-status-overlay] .env-device-tray--footer {
+        display: flex !important;
+    }
+
+    .env-shell-chrome[data-status-overlay] .env-status-bar__chip {
+        background: transparent;
+        border-color: transparent;
+        padding-inline: 0.15rem;
+    }
+
+    /* Standalone PWA: no shell statusbar (OS / home chrome owns that). */
+    .env-shell-chrome[data-standalone] .env-ui-statusbar,
+    .env-shell-root[data-standalone] .env-shell-chrome:not([data-desktop]) .env-ui-statusbar {
+        display: none !important;
+    }
+
+    /* Desktop footer: hide clock (taskbar has its own). */
+    .env-shell-chrome[data-desktop]:not([data-status-overlay]) .env-ui-statusbar__clock {
+        display: none !important;
+    }
+
+    /*
+     * WHY: Desktop native-mode (WCO) hides env chrome. On mobile the Home dock must stay —
+     * it is the only leave-view control (no title Close). Overlay statusbar also hides with chrome.
+     */
+    .env-shell-root[data-env-native-task] .env-shell-chrome[data-desktop],
+    env-shell-container[data-env-native-task] .env-shell-chrome[data-desktop] {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
+}

package/src/scss/ui/components/task.scss

@@ -0,0 +1,118 @@
+//@use "veela-lib" as m;
+
+//
+:host(ui-task) {
+    //
+    &, * {
+        box-sizing: border-box;
+        user-select: none;
+        touch-action: manipulation;
+        -webkit-user-drag: none;
+        -webkit-tap-highlight-color: transparent;
+        gap: 0px;
+        margin: 0px;
+        padding: 0px;
+        border: 0px none transparent;
+    }
+
+    & {
+        /* WHY: Without host display, desktop taskbar buttons collapse to 0×0. */
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 0.35rem;
+        min-inline-size: 2.25rem;
+        min-block-size: 2.25rem;
+        padding-inline: 0.45rem;
+        padding-block: 0.25rem;
+        border-radius: 0.5rem;
+        user-select: none;
+        pointer-events: auto;
+        box-shadow: none;
+        filter: none;
+        cursor: pointer;
+    }
+
+    & > * {
+        pointer-events: none;
+    }
+
+    .task-icon {
+        position: relative;
+        display: inline-flex;
+        place-content: center;
+        place-items: center;
+        line-height: 0;
+        inline-size: 1.25rem;
+        block-size: 1.25rem;
+        min-inline-size: 1.25rem;
+        min-block-size: 1.25rem;
+    }
+
+    .task-letter {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-content: center;
+        place-items: center;
+        font-size: 0.72rem;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: 0;
+        color: currentColor;
+        opacity: 0.92;
+        z-index: 0;
+        pointer-events: none;
+        user-select: none;
+    }
+
+    .task-icon-glyph {
+        position: relative;
+        z-index: 1;
+        inline-size: 100%;
+        block-size: 100%;
+        min-inline-size: 1rem;
+        min-block-size: 1rem;
+        /* WHY: blank/missing Phosphor masks leave the letter visible underneath. */
+        color: currentColor;
+    }
+
+    /* When a real icon name is set, keep the letter under the glyph (not on top). */
+    .task-icon:has(ui-icon[icon]:not([icon=""])) .task-letter {
+        opacity: 0.35;
+    }
+
+    .task-icon:has(ui-icon[icon]:not([icon=""]):not([icon="app-window"])) .task-letter {
+        opacity: 0;
+    }
+
+    .task-title {
+        font-size: 0.75rem;
+        font-weight: 500;
+        line-height: 1.2;
+        white-space: nowrap;
+        max-inline-size: 8rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+//
+:host(ui-task:hover) {
+    & {
+        --background-tone-shift: 0.1;
+        background-color: --c2-surface(var(--background-tone-shift, 0.0), var(--current));
+        color: contrast-color(var(--background-tone-shift, 0.0), var(--current));
+    }
+}
+
+//
+:host(ui-task[data-focus]) {
+    border-block-end-color: --c2-on-surface(0.0, var(--current)) !important;
+}
+
+//
+:host(ui-task:not([data-active])) {
+    opacity: 0.6;
+}