@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/ui/components/app-menu.scss

@@ -0,0 +1,817 @@
+@layer components {
+    .env-shell-app-menu[data-page] {
+        inset: 0;
+        align-items: stretch;
+        justify-items: stretch;
+        padding: 0;
+        z-index: calc(var(--env-z-shell-chrome, 2147483000) + 4);
+    }
+
+    .env-shell-app-menu[data-page] .env-shell-app-menu__panel {
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: stretch;
+        max-block-size: stretch;
+        border-radius: 0;
+        /* WHY: 1fr clamps the grid; panel overflow never fires — scroll on the grid. */
+        overflow: hidden;
+        overflow-y: auto !important;
+        overscroll-behavior: contain;
+        touch-action: pan-y;
+        -webkit-overflow-scrolling: touch;
+        pointer-events: auto;
+    }
+
+    /* WHY: All Apps is a 1fr grid child — without a scrollport, rows squash to fit the viewport. */
+    .env-shell-app-menu__panel > .env-shell-app-menu__grid {
+        align-self: stretch;
+        block-size: max-content;
+        max-block-size: max-content;
+        min-block-size: fit-content;
+        overflow: visible;
+        overscroll-behavior: contain;
+        align-content: start;
+        justify-content: start;
+        grid-auto-rows: max-content;
+        touch-action: pan-y;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .env-shell-app-menu[data-page] .env-shell-app-menu__grid {
+        row-gap: 0.85rem;
+        column-gap: 0.45rem;
+        padding-block-end: calc(
+            var(--env-shell-chrome-stack-reserve, 3rem) + env(safe-area-inset-bottom, 0px)
+        );
+    }
+
+    .env-shell-app-menu {
+        position: fixed;
+        z-index: calc(var(--env-z-shell-chrome, 2147483000) + 2);
+        inset-inline: 0;
+        inset-block-end: var(--env-shell-chrome-stack-reserve, 3rem);
+        display: grid;
+        align-items: end;
+        justify-items: start;
+        padding: 0.5rem;
+        padding-inline-start: max(0.5rem, env(safe-area-inset-left, 0px));
+        pointer-events: auto;
+        box-sizing: border-box;
+        /* WHY: match TaskBar — light-dark() follows used color-scheme (QS/Theme pin). */
+        color-scheme: inherit;
+        /*
+         * WHY: hard #f4f4f5/#1c1c1e fixed light/dark contrast but killed Veela tint.
+         * Keep light-dark for scheme flip; mix primary so surfaces stay colorized.
+         */
+        --env-app-menu-accent: var(--wf-md-primary, var(--color-primary, #5a9ec8));
+        --env-app-menu-surface: color-mix(
+            in oklab,
+            var(--color-surface-container, --u2-color-mod(var(--base-color, #5a9ec8), 960)) 88%,
+            transparent
+        );
+        --env-app-menu-surface-raised: var(
+            --color-surface-container-high,
+            --u2-color-mod(var(--base-color, #5a9ec8), 980)
+        );
+        /* WHY: fallbacks must flip with color-scheme — index 100/880 is dark-only. */
+        --env-app-menu-ink: var(
+            --color-on-surface,
+            light-dark(
+                --u2-color-mod(var(--base-color, #5a9ec8), 900),
+                --u2-color-mod(var(--base-color, #5a9ec8), 100)
+            )
+        );
+        --env-app-menu-plate: var(
+            --color-primary-container,
+            light-dark(
+                --u2-color-mod(var(--base-color, #5a9ec8), 160),
+                --u2-color-mod(var(--base-color, #5a9ec8), 820)
+            )
+        );
+    }
+
+    .env-shell-app-menu[hidden] {
+        display: none !important;
+    }
+
+    .env-shell-app-menu__panel {
+        pointer-events: auto;
+        display: grid;
+        gap: 0.75rem;
+        inline-size: min(420px, calc(100vw - 1rem));
+        max-block-size: min(520px, calc(100dvb - var(--env-shell-chrome-stack-reserve, 3rem) - 1rem));
+        padding: 0.85rem;
+        border-radius: 14px;
+        border: 1px solid light-dark(
+            color-mix(in oklab, #000 12%, transparent),
+            color-mix(in oklab, #fff 14%, transparent)
+        );
+        /* WHY: tinted acrylic — not flat gray; color-scheme still drives light-dark(). */
+        background: var(--env-app-menu-surface);
+        color: var(--env-app-menu-ink);
+        box-shadow:
+            0 20px 48px -20px light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.45)),
+            0 2px 8px -2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.25));
+        overflow: hidden;
+        overflow-y: auto !important;
+        overscroll-behavior: contain;
+        touch-action: pan-y;
+        -webkit-overflow-scrolling: touch;
+        animation: env-app-menu-in 140ms cubic-bezier(0.22, 0.8, 0.3, 1);
+        color-scheme: inherit;
+        backdrop-filter: blur(22px) saturate(1.35);
+        -webkit-backdrop-filter: blur(22px) saturate(1.35);
+        grid-template-rows: auto auto minmax(0, 1fr);
+        min-block-size: max(60dvb, 60cqb);
+        block-size: fit-content;
+    }
+
+    /* Win7-style Start: recent | folders/grid */
+    .env-shell-app-menu__panel[data-layout="start-split"] {
+        inline-size: min(560px, calc(100vw - 1rem));
+        max-block-size: min(580px, calc(100dvb - var(--env-shell-chrome-stack-reserve, 3rem) - 1rem));
+        grid-template-rows: auto auto minmax(0, 1fr);
+    }
+
+    .env-shell-app-menu__start-body {
+        display: grid;
+        grid-template-columns: minmax(9.5rem, 0.42fr) minmax(0, 1fr);
+        gap: 0.65rem;
+        min-block-size: 12rem;
+        max-block-size: 100%;
+        overflow: hidden;
+    }
+
+    .env-shell-app-menu__start-left {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        min-block-size: fit-content;
+        min-inline-size: 0;
+        overflow: auto;
+        padding: 0.45rem;
+        border-radius: 12px;
+        background: light-dark(
+            color-mix(in oklab, var(--env-app-menu-accent) 8%, transparent),
+            color-mix(in oklab, var(--env-app-menu-accent) 12%, transparent)
+        );
+        border: 1px solid light-dark(
+            color-mix(in oklab, var(--env-app-menu-accent) 22%, transparent),
+            color-mix(in oklab, #fff 14%, transparent)
+        );
+    }
+
+    .env-shell-app-menu__start-right {
+        display: grid;
+        grid-template-rows: auto minmax(0, 1fr);
+        gap: 0.4rem;
+        min-block-size: fit-content;
+        min-inline-size: 0;
+        overflow: hidden;
+    }
+
+    .env-shell-app-menu__start-heading {
+        font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        opacity: 0.72;
+        padding-inline: 0.25rem;
+        flex: 0 0 auto;
+    }
+
+    .env-shell-app-menu__start-recent {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0.2rem;
+        align-content: start;
+        flex: 0 0 auto;
+
+        .env-shell-app-menu__tile {
+            grid-template-columns: auto minmax(0, 1fr);
+            justify-items: start;
+            align-items: center;
+            gap: 0.45rem;
+            padding: 0.35rem 0.4rem;
+            text-align: start;
+        }
+
+        .env-shell-app-menu__tile-icon {
+            inline-size: 2.25rem;
+            block-size: 2.25rem;
+            min-inline-size: 2.25rem;
+            min-block-size: 2.25rem;
+
+            ui-icon:not([data-launcher-icon]) {
+                inline-size: 1.5rem !important;
+                block-size: 1.5rem !important;
+                --icon-size: 1.5rem;
+                --icon-padding: 0px;
+            }
+        }
+
+        .env-shell-app-menu__tile-label {
+            -webkit-line-clamp: 1;
+            text-align: start;
+            font-size: 0.78rem;
+        }
+    }
+
+    .env-shell-app-menu__start-right {
+        .env-shell-app-menu__grid {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            gap: 0.2rem;
+            overflow: auto;
+            min-block-size: fit-content;
+            align-content: start;
+            grid-template-columns: none;
+        }
+
+        .env-shell-app-menu__tile {
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr);
+            justify-items: start;
+            align-items: center;
+            gap: 0.65rem;
+            padding: 0.4rem 0.55rem;
+            text-align: start;
+            border-radius: 10px;
+            inline-size: 100%;
+            box-sizing: border-box;
+        }
+
+        .env-shell-app-menu__tile-icon {
+            inline-size: 2.5rem;
+            block-size: 2.5rem;
+            min-inline-size: 2.5rem;
+            min-block-size: 2.5rem;
+
+            ui-icon:not([data-launcher-icon]) {
+                inline-size: 1.75rem !important;
+                block-size: 1.75rem !important;
+                --icon-size: 1.75rem;
+                --icon-padding: 0px;
+            }
+        }
+
+        .env-shell-app-menu__tile-label {
+            -webkit-line-clamp: 1;
+            text-align: start;
+            font: 500 0.9rem/1.25 ui-sans-serif, system-ui, sans-serif;
+            justify-self: stretch;
+        }
+    }
+
+    .env-shell-app-menu__crumb {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.35rem 0.55rem;
+        min-block-size: 1.4rem;
+    }
+
+    .env-shell-app-menu__crumb-nav {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.2rem;
+        min-inline-size: 0;
+        flex: 1 1 auto;
+    }
+
+    .env-shell-app-menu__crumb-actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.3rem;
+        margin-inline-start: auto;
+    }
+
+    .env-shell-app-menu__crumb-actions[hidden] {
+        display: none !important;
+    }
+
+    .env-shell-app-menu__crumb-action {
+        appearance: none;
+        border: 1px solid light-dark(
+            color-mix(in oklab, #000 12%, transparent),
+            color-mix(in oklab, #fff 14%, transparent)
+        );
+        background: var(--env-app-menu-surface-raised);
+        color: inherit;
+        font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
+        padding: 0.28rem 0.5rem;
+        border-radius: 8px;
+        cursor: pointer;
+    }
+
+    .env-shell-app-menu__crumb-action:hover {
+        background: light-dark(
+            color-mix(in oklab, #000 8%, transparent),
+            color-mix(in oklab, #fff 10%, transparent)
+        );
+    }
+
+    .env-shell-app-menu__crumb-item {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: 600 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;
+        padding: 0.15rem 0.35rem;
+        border-radius: 6px;
+        cursor: pointer;
+    }
+
+        .env-shell-app-menu__crumb-item:hover {
+        background: light-dark(
+            color-mix(in oklab, #000 8%, transparent),
+            color-mix(in oklab, #fff 10%, transparent)
+        );
+    }
+
+    .env-shell-app-menu__crumb-sep {
+        opacity: 0.45;
+        font-size: 0.85rem;
+    }
+
+    .env-shell-app-menu__empty--compact {
+        margin: 0.35rem 0;
+        font-size: 0.75rem;
+        text-align: start;
+        padding-inline: 0.25rem;
+    }
+
+    @media (max-width: 520px) {
+        .env-shell-app-menu__tools {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        .env-shell-app-menu__search {
+            grid-column: 1 / -1;
+        }
+
+        .env-shell-app-menu__sort,
+        .env-shell-app-menu__sort-dir {
+            max-inline-size: none;
+        }
+
+        .env-shell-app-menu__start-body {
+            grid-template-columns: 1fr;
+            grid-template-rows: minmax(0, 8rem) minmax(0, 1fr);
+        }
+
+        .env-shell-app-menu__start-recent {
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+        }
+    }
+
+    .env-shell-app-menu__banner {
+        display: grid;
+        gap: 0.65rem;
+        padding: 0.65rem 0.75rem;
+        border-radius: 10px;
+        background: color-mix(in oklab, var(--env-app-menu-accent, var(--color-primary, #60cdff)) 14%, transparent);
+        border: 1px solid color-mix(in oklab, var(--env-app-menu-accent, var(--color-primary, #60cdff)) 35%, transparent);
+    }
+
+    .env-shell-app-menu__banner[hidden] {
+        display: none !important;
+    }
+
+    .env-shell-app-menu__banner-text {
+        margin: 0;
+        font: 500 0.9rem/1.35 ui-sans-serif, system-ui, sans-serif;
+    }
+
+    .env-shell-app-menu__banner-action {
+        justify-self: start;
+    }
+
+    .env-shell-app-menu__tools {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto auto;
+        gap: 0.4rem;
+        align-items: stretch;
+        position: sticky;
+        inset-block-start: 0;
+        z-index: 99;
+    }
+
+    .env-shell-app-menu__tools[hidden] {
+        display: none !important;
+    }
+
+    .env-shell-app-menu__search,
+    .env-shell-app-menu__sort,
+    .env-shell-app-menu__sort-dir {
+        padding: 0.55rem 0.65rem;
+        border-radius: 10px;
+        border: 1px solid light-dark(
+            color-mix(in oklab, #000 12%, transparent),
+            color-mix(in oklab, #fff 14%, transparent)
+        );
+        background: var(--env-app-menu-surface-raised);
+        color: inherit;
+        font: 400 0.9rem/1.2 ui-sans-serif, system-ui, sans-serif;
+        box-sizing: border-box;
+    }
+
+    .env-shell-app-menu__search {
+        inline-size: 100%;
+        min-inline-size: 0;
+    }
+
+    .env-shell-app-menu__sort,
+    .env-shell-app-menu__sort-dir {
+        max-inline-size: 11rem;
+    }
+
+    .env-shell-app-menu__search[hidden] {
+        display: none !important;
+    }
+
+    .env-shell-app-menu__grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
+        gap: 0.5rem;
+        min-block-size: fit-content;
+        align-content: start;
+        grid-auto-rows: max-content;
+        block-size: max-content;
+        touch-action: pan-y;
+        -webkit-overflow-scrolling: touch;
+        overflow: visible;
+        pointer-events: auto;
+    }
+
+    .env-shell-app-menu__grid[hidden] {
+        display: none !important;
+    }
+
+    .env-shell-app-menu__tile {
+        display: grid;
+        gap: 0.35rem;
+        justify-items: center;
+        align-content: start;
+        min-block-size: fit-content;
+        flex-shrink: 0;
+        padding: 0.45rem 0.25rem;
+        border: 0;
+        border-radius: 12px;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        text-align: center;
+        /* Let vertical pans scroll the panel; long-press + move still starts pin drag. */
+        touch-action: pan-y;
+        -webkit-user-select: none;
+        user-select: none;
+    }
+
+    .env-shell-app-menu__tile:hover,
+    .env-shell-app-menu__tile:focus-visible {
+        background: color-mix(in oklab, var(--env-app-menu-accent, var(--color-primary, #60cdff)) 12%, transparent);
+        outline: none;
+    }
+
+    .env-shell-app-menu__tile--dragging {
+        opacity: 0.45;
+    }
+
+    html[data-app-menu-dragging] .env-shell-app-menu {
+        pointer-events: none;
+    }
+
+    html[data-app-menu-dragging] .env-shell-app-menu__panel {
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    .env-shell-app-menu__drag-ghost {
+        position: fixed;
+        z-index: calc(var(--env-z-shell-chrome, 2147483000) + 8);
+        inset: 0 auto auto 0;
+        display: grid;
+        gap: 0.35rem;
+        justify-items: center;
+        inline-size: 4.5rem;
+        pointer-events: none;
+        will-change: transform;
+    }
+
+    .env-shell-app-menu__drag-ghost-icon {
+        position: relative;
+        display: grid;
+        place-content: center;
+        place-items: center;
+        inline-size: 3rem;
+        block-size: 3rem;
+        padding: 0;
+        aspect-ratio: 1 / 1;
+        border-radius: 50%;
+        border: none;
+        background: light-dark(
+            color-mix(in oklab, #e8eaed 72%, var(--wf-md-primary, var(--color-primary, #60cdff)) 28%),
+            color-mix(in oklab, #111827 72%, var(--wf-md-primary, var(--color-primary, #60cdff)) 28%)
+        );
+        box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
+        backdrop-filter: blur(16px) saturate(1.35);
+        -webkit-backdrop-filter: blur(16px) saturate(1.35);
+        box-sizing: border-box;
+        overflow: hidden;
+        contain: layout style;
+
+        @supports (corner-shape: round) {
+            corner-shape: round;
+        }
+
+        img[data-icon-pending],
+        img[data-launcher-icon]:not([src]),
+        ui-icon[data-icon-pending] {
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        img[data-launcher-icon],
+        .ui-ws-item-icon-img {
+            position: absolute;
+            inset: 0;
+            inline-size: 100%;
+            block-size: 100%;
+            object-fit: cover;
+            object-position: center;
+            pointer-events: none;
+            border-radius: 0;
+            transform: scale(1.28);
+            transform-origin: center;
+        }
+
+        ui-icon[data-launcher-icon] {
+            position: absolute;
+            inset: 0;
+            inline-size: 100%;
+            block-size: 100%;
+            min-inline-size: 0;
+            min-block-size: 0;
+            max-inline-size: none;
+            max-block-size: none;
+            --icon-size: 100%;
+            --icon-padding: 0px;
+            pointer-events: none;
+            transform: scale(1.28);
+            transform-origin: center;
+        }
+    }
+
+    .env-shell-app-menu__drag-ghost-label {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        font: 600 0.68rem/1.15 ui-sans-serif, system-ui, sans-serif;
+        text-align: center;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+    }
+
+    /* Match SpeedDial `.ui-ws-item-icon` launcher tiles — shape plate + full-bleed bitmap. */
+    .env-shell-app-menu__tile-icon {
+        position: relative;
+        display: grid;
+        place-content: center;
+        place-items: center;
+        inline-size: 2.5rem !important;
+        block-size: 2.5rem !important;
+        min-inline-size: 2.5rem !important;
+        min-block-size: 2.5rem !important;
+        padding: 0 !important;
+        aspect-ratio: 1 / 1 !important;
+        border-radius: 50% !important;
+        border: none;
+        background: var(--env-app-menu-plate);
+        box-shadow: 0 6px 24px -8px color-mix(in oklab, #000 38%, transparent);
+        backdrop-filter: blur(16px) saturate(1.35);
+        -webkit-backdrop-filter: blur(16px) saturate(1.35);
+        box-sizing: border-box;
+        overflow: hidden;
+        color: var(--color-on-primary-container, var(--env-app-menu-ink));
+        --icon-color: var(--color-on-primary-container, var(--env-app-menu-ink));
+
+        /* WHY: `.shaped` stretch/fit-content + 1.5rem beat 50% — plate was not a disk. */
+        &:not([data-shape]),
+        &[data-shape="circle"] {
+            aspect-ratio: 1 / 1 !important;
+            border-radius: 50% !important;
+
+            @supports (corner-shape: round) {
+                corner-shape: round;
+            }
+        }
+
+        &[data-shape="squircle"] {
+            border-radius: 1.5rem !important;
+
+            @supports (corner-shape: squircle) {
+                corner-shape: unset;
+            }
+
+            @supports (corner-shape: round) {
+                corner-shape: round;
+            }
+        }
+
+        &[data-shape="square"] {
+            border-radius: 12% !important;
+            @supports (corner-shape: square) {
+                corner-shape: square;
+            }
+        }
+
+        &[data-shape="shapeless"] {
+            overflow: visible !important;
+            contain: none;
+            background: transparent !important;
+            box-shadow: none !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
+            border-radius: 0 !important;
+
+            @supports (corner-shape: squircle) {
+                corner-shape: unset;
+            }
+
+            img[data-launcher-icon],
+            .ui-ws-item-icon-img,
+            .env-shell-app-menu__tile-favicon,
+            ui-icon {
+                object-fit: contain;
+            }
+
+            img.sd-icon-silhouette,
+            ui-icon.sd-icon-silhouette {
+                position: absolute;
+                inset: 0;
+                z-index: 0;
+                pointer-events: none;
+                object-fit: contain;
+                opacity: 0.4;
+                filter: brightness(0) blur(6px);
+                transform: translateY(10%);
+            }
+
+            img[data-launcher-icon]:not(.sd-icon-silhouette),
+            .ui-ws-item-icon-img:not(.sd-icon-silhouette) {
+                object-fit: contain;
+                z-index: 2;
+                filter: none;
+            }
+
+            &[data-icon-display="glyph"] ui-icon:not(.sd-icon-silhouette) {
+                filter: drop-shadow(0 2px 5px rgb(0 0 0 / 0.4));
+            }
+
+            &[data-icon-display="glyph"] .sd-icon-silhouette {
+                display: none;
+            }
+        }
+
+        img[data-icon-pending],
+        img[data-launcher-icon]:not([src]),
+        ui-icon[data-icon-pending] {
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        img[data-launcher-icon],
+        .ui-ws-item-icon-img[data-launcher-icon] {
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+            display: block;
+            inline-size: 100%;
+            block-size: 100%;
+            max-inline-size: none;
+            max-block-size: none;
+            object-fit: cover;
+            object-position: center;
+            pointer-events: none;
+            /* Plate clips to circle/squircle — don't square the bitmap itself. */
+            border-radius: 0;
+            transform: scale(var(--sd-item-icon-scale, var(--sd-launcher-icon-scale, 1.28)));
+            transform-origin: center;
+        }
+
+        img[data-launcher-icon][data-icon-pack],
+        .ui-ws-item-icon-img[data-launcher-icon][data-icon-pack] {
+            transform: scale(var(--sd-item-icon-scale, var(--sd-launcher-icon-scale, 1.28)));
+        }
+
+        /* Bookmark / non-launcher favicons — inset glyph-sized mark inside the plate. */
+        .ui-ws-item-icon-img:not([data-launcher-icon]),
+        .env-shell-app-menu__tile-favicon:not([data-launcher-icon]) {
+            position: relative;
+            z-index: 1;
+            display: block;
+            inline-size: 1.75rem;
+            block-size: 1.75rem;
+            max-inline-size: 90%;
+            max-block-size: 90%;
+            object-fit: contain;
+            object-position: center;
+            pointer-events: none;
+            border-radius: 4px;
+        }
+
+        /* Phosphor glyphs — rem box; % --icon-size collapses in this plate. */
+        ui-icon {
+            position: relative;
+            z-index: 1;
+            display: inline-grid !important;
+            inline-size: 1.75rem !important;
+            block-size: 1.75rem !important;
+            min-inline-size: 1.75rem !important;
+            min-block-size: 1.75rem !important;
+            max-inline-size: 1.75rem !important;
+            max-block-size: 1.75rem !important;
+            --icon-size: 1.75rem;
+            --icon-padding: 0px;
+            --icon-color: currentColor;
+            color: inherit;
+            pointer-events: none;
+        }
+
+        ui-icon[data-launcher-icon] {
+            position: absolute;
+            inset: 0;
+            inline-size: 100% !important;
+            block-size: 100% !important;
+            min-inline-size: 0 !important;
+            min-block-size: 0 !important;
+            max-inline-size: none !important;
+            max-block-size: none !important;
+            --icon-size: 100%;
+            --icon-padding: 0px;
+            pointer-events: none;
+            z-index: 1;
+            transform: scale(1.28);
+            transform-origin: center;
+        }
+    }
+
+    .env-shell-app-menu__tile-label {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        font: 500 0.68rem/1.15 ui-sans-serif, system-ui, sans-serif;
+        word-break: break-word;
+    }
+
+    .env-shell-app-menu__empty {
+        grid-column: 1 / -1;
+        margin: 0.5rem 0;
+        text-align: center;
+        opacity: 0.75;
+        font: 400 0.85rem/1.3 ui-sans-serif, system-ui, sans-serif;
+    }
+
+    @keyframes env-app-menu-in {
+        from {
+            opacity: 0;
+            transform: translateY(8px) scale(0.98);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    }
+
+    .env-shell-app-menu__pin-menu {
+        position: fixed;
+        z-index: calc(var(--env-z-shell-chrome, 2147483000) + 4);
+        display: grid;
+        gap: 0.25rem;
+        min-inline-size: 10rem;
+        padding: 0.35rem;
+        border-radius: 10px;
+        border: 1px solid light-dark(
+            color-mix(in oklab, #000 12%, transparent),
+            color-mix(in oklab, #fff 14%, transparent)
+        );
+        background: var(--env-app-menu-surface);
+        color: var(--env-app-menu-ink);
+        box-shadow:
+            0 12px 32px -12px light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.45)),
+            0 2px 8px -2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.25));
+        color-scheme: inherit;
+    }
+
+    .env-shell-app-menu__pin-action {
+        justify-content: start;
+        inline-size: 100%;
+        text-align: start;
+    }
+}