@fest-lib/veela 0.1.20 → 1.0.2

package/src/scss/ui/components/speed-dial.scss

@@ -0,0 +1,2288 @@
+/*
+ * Filename: SpeedDial.scss
+ * FullPath: modules/projects/veela.css/src/scss/ui/components/speed-dial.scss
+ * Change date and time: 21.20.00_23.08.2026
+ * Reason for changes: Under geometry clips via data-shape (no getComputedStyle copy).
+ */
+
+@use "../../basic/design/wavy-runtime" as *;
+@use "../../basic/design/shapes" as *;
+@use "./launcher-icon-mask";
+
+/*
+ * Keep launcher typography close to its component contract.
+ */
+@layer components {
+    .speed-dial-root.app-oriented-desktop,
+    .speed-dial-root {
+        --home-font-sans:
+            system-ui,
+            -apple-system,
+            "Segoe UI",
+            Roboto,
+            "Noto Sans",
+            "Helvetica Neue",
+            Arial,
+            "Apple Color Emoji",
+            "Segoe UI Emoji",
+            sans-serif;
+
+        /* INVARIANT: figure / widget / label cast stays black — do not follow wallpaper halo. */
+        --sd-cast-shadow: color-mix(in oklab, #000 38%, transparent);
+        --sd-cast-shadow-deep: color-mix(in oklab, #000 40%, transparent);
+        --sd-cast-ink: rgb(0 0 0 / 0.88);
+        --sd-cast-glow: rgb(0 0 0 / 0.45);
+
+        container-type: inline-size;
+        container-name: speed-dial;
+        font-family: var(--home-font-sans);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
+        font-kerning: normal;
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* Native Explorer / Settings / Markdown — collapsible right rail. */
+    .speed-dial-core-rail {
+        /* INVARIANT: rail glyphs sit on the photo — wallpaper ink, not CanvasText / data-theme. */
+        --sd-rail-ink: var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText));
+        position: fixed;
+        inset-block: 12%;
+        inset-inline-end: 0;
+        z-index: 6;
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        pointer-events: none;
+        max-block-size: 76%;
+        padding: 0px;
+        border: none 0px transparent;
+        outline: none 0px transparent;
+        color: var(--sd-rail-ink);
+    }
+
+    .speed-dial-core-rail__toggle {
+        pointer-events: auto;
+        align-self: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: 1.65rem;
+        block-size: 2.6rem;
+        margin: 0;
+        padding: 0;
+        //border: 1px solid color-mix(in oklab, CanvasText 18%, transparent);
+        border: 0px none transparent;
+        border-inline-end: none;
+        border-radius: 10px 0 0 10px;
+        background: transparent;//color-mix(in oklab, Canvas 78%, transparent);
+        color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
+        --icon-color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
+        /*backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);*/
+        cursor: pointer;
+    }
+
+    .speed-dial-core-rail__toggle ui-icon {
+        --icon-size: 1.1rem;
+        --icon-color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
+        pointer-events: none;
+    }
+
+    .speed-dial-core-rail__panel {
+        pointer-events: auto;
+        display: none;
+        flex-direction: column;
+        gap: 0.45rem;
+        padding: 0.55rem 0.45rem;
+        min-inline-size: 3.4rem;
+        max-inline-size: 5.2rem;
+        overflow: auto;
+        border: 1px solid color-mix(in oklab, var(--sd-rail-ink) 16%, transparent);
+        border-inline-end: none;
+        border-radius: 14px 0 0 14px;
+        background: color-mix(in oklab, var(--wallpaper-underlying-color, Canvas) 82%, transparent);
+        backdrop-filter: blur(14px);
+        -webkit-backdrop-filter: blur(14px);
+        color: var(--sd-rail-ink);
+    }
+
+    .speed-dial-core-rail[data-open] .speed-dial-core-rail__panel {
+        display: flex;
+    }
+
+    .speed-dial-core-rail__item {
+        appearance: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.2rem;
+        margin: 0;
+        padding: 0.35rem 0.2rem;
+        border: none;
+        border-radius: var(--radius-lg);
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        min-inline-size: 0;
+    }
+
+    .speed-dial-core-rail__item:hover,
+    .speed-dial-core-rail__item:focus-visible {
+        background: color-mix(in oklab, var(--sd-rail-ink) 10%, transparent);
+        outline: none;
+    }
+
+    .speed-dial-core-rail__item ui-icon {
+        --icon-size: 1.55rem;
+        --icon-color: var(--sd-rail-ink);
+        color: var(--sd-rail-ink);
+        pointer-events: none;
+    }
+
+    .speed-dial-workspace-pager {
+        position: absolute;
+        inset-inline: 0;
+        inset-block-end: 0.55rem;
+        z-index: 5;
+        display: flex;
+        justify-content: center;
+        gap: 0.4rem;
+        pointer-events: none;
+    }
+
+    .speed-dial-workspace-pager__dot {
+        pointer-events: auto;
+        inline-size: 0.45rem;
+        block-size: 0.45rem;
+        padding: 0;
+        border: none;
+        border-radius: var(--radius-full);
+        background: color-mix(in oklab, var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText)) 35%, transparent);
+        cursor: pointer;
+    }
+
+    .speed-dial-workspace-pager__dot[data-active] {
+        inline-size: 0.85rem;
+        background: var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText));
+    }
+
+    .sd-widget-host {
+        overflow: visible;
+        position: relative;
+        container-type: size;
+        container-name: sd-widget;
+        aspect-ratio: auto;
+        max-inline-size: none;
+        max-block-size: none;
+        place-self: stretch;
+        --tile-size: 100%;
+        background: transparent !important;
+        box-shadow: none !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+        border-radius: 0 !important;
+        clip-path: none !important;
+        filter: none !important;
+    }
+
+    .sd-widget-host > :is(ui-icon, .ui-ws-item-icon-native, img[data-launcher-icon], .ui-ws-item-icon-img, .ui-ws-item-icon-mask) {
+        display: none !important;
+    }
+
+    .sd-widget {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: stretch;
+        inline-size: 100%;
+        block-size: 100%;
+        min-inline-size: 0;
+        min-block-size: 0;
+        padding: clamp(0.45rem, 6cqi, 0.9rem);
+        pointer-events: auto;
+        touch-action: none;
+        user-select: none;
+        -webkit-user-select: none;
+        box-sizing: border-box;
+        isolation: isolate;
+        z-index: 1;
+    }
+
+    .sd-widget-host:not([data-widget="android"]) {
+        pointer-events: auto !important;
+        cursor: grab;
+        touch-action: none;
+        user-select: none;
+        -webkit-user-select: none;
+        /* INVARIANT: keep `container-type: size` so clock `cqi`/`cqb` track the span. */
+    }
+
+    .sd-widget-host[data-interaction-state="onGrab"],
+    .sd-widget-host[data-interaction-state="onMoving"] {
+        cursor: grabbing;
+    }
+
+    .sd-widget--clock,
+    .sd-widget--search {
+        /* WHY: Material You — wallpaper ink for L, `--base-color` for hue. Contrast stays majority. */
+        --sd-widget-seed: var(--base-color, var(--color-primary, #5a9ec8));
+        --sd-you-ink: color-mix(
+            in oklab,
+            var(--wallpaper-contrast-color, var(--env-launcher-fg)) 72%,
+            var(--sd-widget-seed) 28%
+        );
+    }
+
+    .sd-widget--clock {
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 0.12em;
+        overflow: hidden;
+        padding-block-start: 1.35rem;
+        color: var(--sd-you-ink);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .sd-widget__time {
+        font-size: clamp(1.6rem, min(28cqi, 38cqb), 10rem);
+        font-weight: 650;
+        line-height: 1;
+        letter-spacing: 0.01em;
+        font-variant-numeric: tabular-nums;
+        font-feature-settings: "tnum" 1;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-inline-size: 100%;
+        color: color-mix(in oklab, var(--sd-you-ink) 78%, var(--sd-widget-seed) 22%);
+        text-shadow:
+            0 1px 2px var(--sd-cast-ink, rgb(0 0 0 / 0.88)),
+            0 0 12px var(--sd-cast-glow, rgb(0 0 0 / 0.45));
+    }
+
+    .sd-widget__date {
+        font-variant-numeric: tabular-nums;
+        font-size: clamp(0.75rem, min(10cqi, 12cqb), 2.75rem);
+        opacity: 0.86;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-inline-size: 100%;
+        color: color-mix(in oklab, var(--sd-you-ink) 88%, var(--wallpaper-contrast-color, var(--env-launcher-fg)) 12%);
+        text-shadow:
+            0 1px 2px var(--sd-cast-ink, rgb(0 0 0 / 0.88)),
+            0 0 8px var(--sd-cast-glow, rgb(0 0 0 / 0.45));
+    }
+
+    .ui-ws-item[data-widget="android"] {
+        aspect-ratio: auto;
+        max-inline-size: none;
+        max-block-size: none;
+        place-self: stretch;
+        pointer-events: none;
+    }
+
+    .sd-widget-chrome,
+    .sd-widget-resize {
+        pointer-events: auto;
+        /* INVARIANT: wallpaper contrast + Canvas ring — readable on light and dark wallpaper. */
+        --sd-widget-ink: var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText));
+        --sd-widget-chip: color-mix(in oklab, Canvas 72%, var(--sd-widget-ink) 28%);
+        --sd-widget-ring: color-mix(in oklab, var(--sd-widget-ink) 55%, Canvas 45%);
+    }
+
+    .sd-widget-chrome {
+        position: absolute;
+        inset-inline: 0;
+        inset-block-start: 0;
+        block-size: 1.45rem;
+        z-index: 4;
+        display: grid;
+        place-items: center;
+        cursor: grab;
+        touch-action: none;
+        background: transparent;
+
+        &::before {
+            content: "";
+            inline-size: 2.4rem;
+            block-size: 0.32rem;
+            border-radius: var(--radius-full);
+            background: var(--sd-widget-chip);
+            box-shadow: 0 0 0 1px var(--sd-widget-ring);
+            /* WHY: a faint rest hint so the grab strip is findable with a mouse. */
+            opacity: 0.01;
+            transition: opacity 120ms ease;
+        }
+    }
+
+    .sd-widget-resize {
+        position: absolute;
+        inset-inline-end: 0.15rem;
+        inset-block-end: 0.15rem;
+        z-index: 5;
+        inline-size: 1.35rem;
+        block-size: 1.35rem;
+        padding: 0;
+        border: none;
+        border-radius: 0.35rem;
+        cursor: nwse-resize;
+        touch-action: none;
+        background: var(--sd-widget-chip);
+        box-shadow: 0 0 0 1px var(--sd-widget-ring);
+        opacity: 0;
+        transition: opacity 120ms ease;
+
+        &::before {
+            content: "";
+            position: absolute;
+            inset-inline-end: 0.22rem;
+            inset-block-end: 0.22rem;
+            inline-size: 0.5rem;
+            block-size: 0.5rem;
+            border-inline-end: 2px solid var(--sd-widget-ink);
+            border-block-end: 2px solid var(--sd-widget-ink);
+            border-radius: 0 0 0.08rem 0;
+            filter: drop-shadow(0 0 1px Canvas);
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            inset: -0.45rem;
+        }
+    }
+
+    .sd-widget-host:hover,
+    .sd-widget-host:focus-within,
+    .sd-widget-host:active,
+    .sd-widget-host[data-resizing],
+    .sd-widget-host[data-interaction-state="onGrab"],
+    .sd-widget-host[data-interaction-state="onMoving"] {
+        .sd-widget-chrome::before,
+        .sd-widget-resize {
+            opacity: 1;
+        }
+    }
+
+    @media (pointer: coarse) {
+        .sd-widget-chrome {
+            block-size: 2.1rem;
+        }
+
+        .sd-widget-resize {
+            inline-size: 2.05rem;
+            block-size: 2.05rem;
+        }
+    }
+
+    .sd-widget--android {
+        pointer-events: none;
+        opacity: 0.08;
+    }
+
+    .sd-widget__preview {
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: contain;
+    }
+
+    .sd-widget--search {
+        justify-content: center;
+        padding-block-start: 2.2rem;
+        padding-block-end: 2rem;
+        padding-inline: 0.7rem;
+    }
+
+    .sd-widget__search {
+        inline-size: 100%;
+        min-block-size: clamp(2rem, 28cqb, 3.1rem);
+        border: 1px solid color-mix(in oklab, var(--sd-you-ink, var(--wallpaper-contrast-color)) 32%, transparent);
+        border-radius: var(--radius-full);
+        background: color-mix(
+            in oklab,
+            color-mix(in oklab, var(--wallpaper-underlying-color, Canvas) 78%, var(--sd-widget-seed, var(--base-color)) 22%) 70%,
+            transparent
+        );
+        color: var(--sd-you-ink, var(--wallpaper-contrast-color));
+        caret-color: var(--sd-you-ink, currentColor);
+        padding: 0.35rem 0.85rem;
+        font: inherit;
+        font-size: clamp(0.85rem, 8cqi, 1.2rem);
+        touch-action: manipulation;
+        user-select: text;
+        -webkit-user-select: text;
+        cursor: text;
+    }
+
+    .sd-widget__search::placeholder {
+        color: color-mix(in oklab, var(--sd-you-ink, var(--wallpaper-contrast-color)) 62%, transparent);
+    }
+
+    .speed-dial-core-rail__label {
+        font-size: 0.62rem;
+        line-height: 1.15;
+        text-align: center;
+        max-inline-size: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        opacity: 0.88;
+    }
+
+    ui-window-frame,
+    ui-modal,
+    .ui-grid-item {
+        --opacity: 1;
+        --scale: 1;
+        --rotate: 0deg;
+        --translate-x: 0%;
+        --translate-y: 0%;
+        isolation: isolate;
+        content-visibility: auto;
+        transform-origin: 50% 50%;
+        transform-style: flat;
+        transform-box: fill-box;
+        translate: 0% 0% 0%;
+        opacity: var(--opacity, 1);
+        rotate: 0deg;
+        scale: 1;
+    }
+
+    // Speed Dial (Home) Styles
+    .speed-dial-root {
+        display: grid;
+        grid-row: 1 / -1;
+        grid-column: 1 / -1;
+        grid-template-columns: minmax(0px, 1fr);
+        grid-template-rows: minmax(0px, 1fr);
+        pointer-events: auto;
+        min-inline-size: 0px;
+        min-block-size: var(--lv-height, 100lvb);
+        max-inline-size: var(--lv-width, 100lvi);
+        max-block-size: var(--lv-height, 100lvb);
+        inline-size: var(--lv-width, 100lvi);
+        block-size: var(--lv-height, 100lvb);
+        box-sizing: border-box;
+        inset: 0 auto auto 0;
+        position: fixed;
+        background-color: transparent;
+        overflow: hidden;
+        perspective: 72rem;
+        transform-style: preserve-3d;
+        border-radius: 0px;
+        user-select: none;
+        user-drag: none;
+        -webkit-user-drag: none;
+        -webkit-user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        touch-action: none;
+
+        & > * {
+            grid-row: 1 / -1;
+            grid-column: 1 / -1;
+        }
+
+        &[data-ws-turning] .speed-dial-grid {
+            transform-origin: 50% 50%;
+            backface-visibility: hidden;
+            will-change: transform, opacity;
+        }
+
+        .speed-dial-grid--turn-ghost {
+            pointer-events: none;
+            z-index: 3;
+        }
+    }
+
+    /* Suppress UA focus ring on orient host (`tabIndex` + programmatic focus for paste). */
+    .speed-dial-root.ui-orientbox {
+        &:focus,
+        &:focus-visible {
+            outline: none !important;
+            box-shadow: none !important;
+        }
+    }
+
+    /* WHY: veela `.ui-orientbox` uses `pointer-events: none` for touch routing; desktop needs full-area context menu / paste. */
+    .speed-dial-root.app-oriented-desktop.ui-orientbox {
+        pointer-events: auto;
+    }
+
+    .speed-dial-grid {
+        grid-row: 1 / -1;
+        grid-column: 1 / -1;
+        display: grid;
+        /* WHY: `--cs-layout-*` follows `--layout-c/r` + `--orient` (ui-launcher-grid).
+         * `--grid-columns` is the JS visual count. They must agree after settings. */
+        grid-template-columns: repeat(var(--grid-columns, var(--cs-layout-c, 4)), minmax(0, 1fr));
+        grid-template-rows: repeat(var(--grid-rows, var(--cs-layout-r, 8)), minmax(0, 1fr));
+        padding: var(--speed-dial-padding, 1rem);
+        border-radius: 0px;
+
+        @media (orientation: portrait) {
+            padding-block: 2.5rem;
+            padding-inline: 1.5rem;
+        }
+
+        @media (orientation: landscape) {
+            padding-inline: 2.5rem;
+            padding-block: 1.5rem;
+        }
+
+        // Stack order: labels on top so overflowing text below icon tiles is visible.
+        // Labels layer is pointer-events: none so it never blocks interaction.
+        &[data-grid-layer="icons"] {
+            z-index: 2;
+            background: transparent !important;
+            pointer-events: none;
+            isolation: isolate;
+            /* WHY: layout contain + CSS-anchor left under-glow 0×0; blur must paint past the cell. */
+            contain: style;
+            overflow: visible;
+
+            &:has([data-dragging]) {
+                z-index: 3;
+            }
+        }
+
+        &[data-grid-layer="labels"] {
+            z-index: 1;
+            background: transparent !important;
+            pointer-events: none !important;
+            isolation: isolate;
+            /* WHY: avoid paint/size contain so wide captions can overflow cells. */
+            contain: layout style;
+            overflow: visible;
+            transition: none !important;
+            transition-duration: 0ms !important;
+            animation: none !important;
+            animation-duration: 0ms !important;
+        }
+
+        .sd-drop-ghost {
+            pointer-events: none;
+            z-index: 0;
+            border-radius: 1.15rem;
+            background: color-mix(in oklab, CanvasText 12%, transparent);
+            box-shadow: inset 0 0 0 2px color-mix(in oklab, CanvasText 38%, transparent);
+            min-inline-size: 0;
+            min-block-size: 0;
+        }
+
+        .ui-ws-item {
+            --drag-x: 0px;
+            --drag-y: 0px;
+            --tile-size: 4rem;
+
+            /* WHY: labels omit the `auto` fallback — missing `--cell-column` must
+             * drop this rule so inline `grid-column` from the label template wins. */
+            &:not([data-layer="labels"]) {
+                grid-column: var(--cell-column, auto);
+                grid-row: var(--cell-row, auto);
+            }
+
+            position: relative;
+            display: grid;
+            place-content: center;
+            place-items: center;
+            place-self: center;
+            aspect-ratio: 1 / 1;
+            inline-size: 100%;
+            block-size: 100%;
+            min-inline-size: 0;
+            min-block-size: 0;
+            max-inline-size: var(--tile-size);
+            max-block-size: var(--tile-size);
+            grid-template-columns: minmax(0px, 1fr);
+            grid-template-rows: minmax(0px, 1fr);
+
+            background-color: transparent;
+            pointer-events: auto;
+            text-align: center;
+            touch-action: none;
+            user-select: none;
+            -webkit-user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            contain: none;
+            overflow: visible;
+            z-index: 1;
+            filter: none;
+
+            transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
+            transform-origin: 50% 50%;
+
+            transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1), scale 180ms ease-out, filter 180ms ease-out;
+
+            &:hover {
+                scale: 1.06;
+
+                .ui-ws-item-icon:not([data-shape="shapeless"]) {
+                    background: color-mix(
+                        in oklab,
+                        var(--color-surface-container-high, #1f2937) 72%,
+                        var(--wallpaper-underlying-color, #121214) 28%
+                    );
+                    box-shadow: 0 10px 36px -10px var(--sd-cast-shadow-deep, color-mix(in oklab, #000 40%, transparent));
+                }
+            }
+
+            &.sd-widget-host:hover,
+            &[data-widget]:hover,
+            &[data-spanned]:hover {
+                scale: 1;
+            }
+
+            &:active {
+                scale: 0.94;
+            }
+
+            /* WHY: hover/active scale shifts the visual center vs grabOffset; drop then misses the cell. */
+            &[data-dragging],
+            &[data-interaction-state="onGrab"],
+            &[data-interaction-state="onMoving"],
+            &[data-interaction-state="onRelax"],
+            &[data-interaction-state="onPlace"] {
+                scale: 1;
+                transition: none !important;
+            }
+
+            &.sd-widget-host,
+            &[data-widget]:not([data-layer="labels"]),
+            &[data-spanned]:not([data-layer="labels"]) {
+                /* WHY: launcher grid uses place-items:center + 4rem --tile-size; widgets must fill the span. */
+                grid-column: var(--cell-column, auto) / span var(--cell-span-x, 1) !important;
+                grid-row: var(--cell-row, auto) / span var(--cell-span-y, 1) !important;
+                place-self: stretch !important;
+                justify-self: stretch !important;
+                align-self: stretch !important;
+                aspect-ratio: auto !important;
+                inline-size: 100% !important;
+                block-size: 100% !important;
+                max-inline-size: none !important;
+                max-block-size: none !important;
+                --tile-size: 100%;
+            }
+
+            &.ui-ws-item-icon {
+                display: grid;
+                transition: background-color 200ms ease, box-shadow 200ms ease;
+                --icon-size: 2.2rem;
+                --launcher-icon-mask-scale: 1.12;
+                /*grid-column: 1 / -1;
+                grid-row: 1 / -1;*/
+                aspect-ratio: 1 / 1;
+
+                /* WHY: `.shaped` later-layer stretch/fit-content made icon plates non-square. */
+                &.shaped:not(.sd-widget-host) {
+                    aspect-ratio: 1 / 1 !important;
+                    inline-size: min(100%, var(--tile-size, 4rem)) !important;
+                    block-size: min(100%, var(--tile-size, 4rem)) !important;
+                    /* WHY: `@layer components` `contain:strict` + 1.25rem pad boxes the glyph on WebView. */
+                    contain: none !important;
+                    padding: 0.35rem !important;
+                }
+
+                pointer-events: auto;
+                position: relative;
+                text-align: center;
+                place-content: center;
+                place-items: center;
+                line-height: 0;
+                overflow: hidden;
+                contain: layout style;
+                cursor: pointer;
+
+                inline-size: 100%;
+                block-size: 100%;
+                min-inline-size: 0;
+                min-block-size: 0;
+                max-inline-size: var(--tile-size);
+                max-block-size: var(--tile-size);
+                padding: 0.8rem;
+
+                &.sd-widget-host,
+                &[data-shape="none"] {
+                    overflow: visible;
+                    aspect-ratio: auto !important;
+                    max-inline-size: none !important;
+                    max-block-size: none !important;
+                    inline-size: 100% !important;
+                    block-size: 100% !important;
+                    padding: 0;
+                    line-height: normal;
+                    cursor: default;
+                    background: transparent !important;
+                    box-shadow: none !important;
+                    backdrop-filter: none !important;
+                    -webkit-backdrop-filter: none !important;
+                    border-radius: 0 !important;
+                    clip-path: none !important;
+                    filter: none !important;
+
+                    @supports (corner-shape: squircle) {
+                        corner-shape: unset;
+                    }
+                }
+
+                /*
+                 * WHY: mix two opaque colors — `… 80%, transparent` showed crisp wallpaper
+                 * through the plate. `backdrop-filter` dies on Capacitor WebView and also
+                 * inside `.speed-dial-root` `perspective` / `preserve-3d`.
+                 */
+                background: color-mix(
+                    in oklab,
+                    var(--color-surface-container, #1a1a1e) 78%,
+                    var(--wallpaper-underlying-color, #121214) 22%
+                );
+                /* INVARIANT: glyph vs plate — not wallpaper ink (white-on-cream). JS luma may overwrite. */
+                --sd-figure-ink: var(--color-on-surface, light-dark(#1a1c1f, #e8eaed));
+                border: none;
+                box-shadow: 0 6px 24px -8px var(--sd-cast-shadow, color-mix(in oklab, #000 38%, transparent));
+                backdrop-filter: blur(16px) saturate(1.2);
+                -webkit-backdrop-filter: blur(16px) saturate(1.2);
+                filter: none;
+
+                :where(html[data-cwsp-native-shell="capacitor"]) & {
+                    backdrop-filter: none;
+                    -webkit-backdrop-filter: none;
+                }
+
+                &:not([data-shape]) {
+                    border-radius: 1.5rem !important;
+
+                    @supports (corner-shape: round) {
+                        corner-shape: round;
+                    }
+                }
+
+                /*
+                 * WHY: `@layer components` `.shaped` is a later implicit layer — 1.5rem +
+                 * stretch/fit-content beat `@layer views` and kept circle as a rounded square.
+                 * INVARIANT: `corner-shape: squircle` flattens the 1.5rem arc (looks less round).
+                 */
+                &[data-shape="circle"] {
+                    aspect-ratio: 1 / 1 !important;
+                    inline-size: min(100%, var(--tile-size, 4rem)) !important;
+                    block-size: min(100%, var(--tile-size, 4rem)) !important;
+                    max-inline-size: var(--tile-size, 4rem);
+                    max-block-size: var(--tile-size, 4rem);
+                    border-radius: 50% !important;
+
+                    @supports (corner-shape: round) {
+                        corner-shape: round;
+                    }
+                }
+
+                &[data-shape="square"] {
+                    border-radius: max(0.55rem, 14%) !important;
+
+                    @supports (corner-shape: square) {
+                        corner-shape: square;
+                    }
+                }
+
+                &[data-shape="squircle"] {
+                    border-radius: 1.5rem !important;
+
+                    @supports (corner-shape: squircle) {
+                        corner-shape: unset;
+                    }
+
+                    @supports (corner-shape: round) {
+                        corner-shape: round;
+                    }
+                }
+
+                &[data-shape="wavy"] {
+                    @include wavy-shaped(100);
+                    
+                    @supports (border-shape: inset(0)) {
+                        border-shape: var(--clip-path);
+                        overflow: hidden !important;
+                        corner-shape: superellipse(1);
+                        border-radius: 50% !important;
+                    }
+
+                    clip-path: var(--clip-path);
+
+                    @supports not (border-shape: inset(0)) {
+                        
+                    }
+                }
+
+                /* WHY: icon is the silhouette — no glass plate; shadow is a black blur clone. */
+                &[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;
+                    clip-path: none !important;
+                    padding: 0.12rem;
+
+                    @supports (corner-shape: squircle) {
+                        corner-shape: unset;
+                    }
+
+                    img[data-launcher-icon],
+                    img[data-bookmark-favicon],
+                    .ui-ws-item-icon-img,
+                    ui-icon {
+                        object-fit: contain;
+                        border-radius: 0;
+                    }
+
+                    img.sd-icon-silhouette,
+                    ui-icon.sd-icon-silhouette {
+                        position: absolute;
+                        inset: 0;
+                        z-index: 1;
+                        pointer-events: none;
+                        object-fit: contain;
+                        opacity: 0.4;
+                        filter: brightness(0) blur(7px);
+                        transform: scale(var(--sd-item-icon-scale, var(--sd-launcher-icon-scale, 1))) translateY(8%);
+                    }
+
+                    img[data-launcher-icon]:not(.sd-icon-silhouette),
+                    img[data-bookmark-favicon]:not(.sd-icon-silhouette),
+                    .ui-ws-item-icon-img:not(.sd-icon-silhouette),
+                    ui-icon:not(.sd-icon-silhouette) {
+                        z-index: 3;
+                        filter: none;
+                    }
+
+                    --sd-figure-ink: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));
+
+                    &[data-icon-display="glyph"] ui-icon:not(.sd-icon-silhouette) {
+                        filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.42));
+                    }
+
+                    &[data-icon-display="glyph"] .sd-icon-silhouette {
+                        display: none;
+                    }
+                }
+
+                /* WHY: glyphs appear at compact 0.78; bitmaps keep workspace fill (1.28). */
+                &[data-icon-display="glyph"] {
+                    --sd-item-icon-scale: 0.78;
+                }
+
+                /* Bitmap / glyph zoom — Cap needs inline transform; CSS var is backup. */
+                img[data-launcher-icon]:not([data-bookmark-favicon]),
+                img[data-bookmark-favicon],
+                .ui-ws-item-icon-img,
+                ui-icon {
+                    transform: scale(var(--sd-item-icon-scale, var(--sd-launcher-icon-scale, 1.28)));
+                    transform-origin: center center;
+                }
+
+                img[data-icon-pending],
+                img[data-launcher-icon]:not([src]),
+                ui-icon[data-icon-pending] {
+                    opacity: 0;
+                    visibility: hidden;
+                }
+
+                img[data-launcher-icon]:not([data-bookmark-favicon]) {
+                    position: absolute;
+                    inset: 0;
+                    inline-size: 100%;
+                    block-size: 100%;
+                    object-fit: cover;
+                    object-position: center;
+                    pointer-events: none;
+                    z-index: 3;
+                    filter: drop-shadow(0 1px 3px #0003);
+                }
+
+                /*
+                 * Bookmark / S2 / chrome favicons — fill the plate shape (clipped by overflow).
+                 */
+                img[data-bookmark-favicon],
+                .ui-ws-item-icon-img[data-bookmark-favicon],
+                .ui-ws-item-icon-img:not([data-launcher-icon]) {
+                    position: absolute;
+                    inset: 0;
+                    inline-size: stretch;
+                    block-size: stretch;
+                    object-fit: cover;
+                    object-position: center;
+                    image-rendering: auto;
+                    border-radius: 0;
+                    pointer-events: none;
+                    z-index: 3;
+                    aspect-ratio: 1 / 1;
+                    filter: drop-shadow(0 1px 2px #0002);
+                }
+
+                /* Mask path (optional) — ink from `_launcher-icon-mask.scss`. */
+                .ui-ws-item-icon-mask[data-launcher-icon] {
+                    position: absolute;
+                    inset: 0;
+                    margin: auto;
+                    pointer-events: none;
+                    z-index: 3;
+                    --launcher-icon-size: var(--icon-size, 2.2rem);
+                    --launcher-icon-mask-scale: var(--sd-item-icon-scale, var(--sd-launcher-icon-scale, 1.28));
+                }
+
+                ui-icon {
+                    position: absolute;
+                    inset: 0;
+                    inline-size: 100%;
+                    block-size: 100%;
+                    max-inline-size: none;
+                    max-block-size: none;
+                    min-inline-size: 0;
+                    min-block-size: 0;
+                    aspect-ratio: 1 / 1;
+                    line-height: 0;
+                    z-index: 3;
+                    pointer-events: none;
+                    filter: drop-shadow(0 1px 2px #0002);
+
+                    &:not([data-launcher-icon]) {
+                        --icon-padding: 0.55rem;
+                        --icon-size: 1.72rem;
+                        --icon-color: var(--sd-figure-ink, var(--color-on-surface, light-dark(#1a1c1f, #e8eaed)));
+                        color: var(--icon-color);
+                        background: transparent !important;
+                    }
+
+                    &[data-launcher-icon] {
+                        --icon-padding: 0px;
+                        --icon-size: 100%;
+                        color: inherit;
+                    }
+                }
+            }
+
+            &.ui-ws-item-label[data-widget] {
+                visibility: hidden;
+            }
+
+            &.ui-ws-item-label {
+                transition: none !important;
+                transition-duration: 0ms !important;
+                animation: none !important;
+                animation-duration: 0ms !important;
+                position: absolute;
+                inset-inline: 0;
+                inset-block-start: 100%;
+                pointer-events: none;
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                align-items: flex-start;
+                padding-block-start: 0.35rem;
+                color: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));
+                background: transparent;
+                white-space: nowrap;
+                overflow: visible;
+                filter: none;
+
+                span {
+                    transition: none !important;
+                    transition-duration: 0ms !important;
+                    animation: none !important;
+                    animation-duration: 0ms !important;
+
+                    display: inline-flex;
+                    place-content: center;
+                    place-items: center;
+                    overflow: visible;
+
+                    font-size: 0.72rem;
+                    font-weight: 500;
+                    letter-spacing: 0.01em;
+                    color: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));
+
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    padding-block: 0.15rem;
+                    padding-inline: 0.4rem;
+                    max-inline-size: min(100%, 9rem);
+                    inline-size: max-content;
+                    border-radius: 6px;
+                    pointer-events: none;
+                    text-align: center;
+                    line-height: 1.25;
+
+                    text-shadow:
+                        0 1px 2px var(--sd-cast-ink, rgb(0 0 0 / 0.88)),
+                        0 0 12px var(--sd-cast-glow, rgb(0 0 0 / 0.45));
+                    border: none;
+                    background: transparent;
+                    backdrop-filter: none;
+                    -webkit-backdrop-filter: none;
+                    box-shadow: none;
+                }
+            }
+
+            /*
+             * WHY: absolute inset "above" is only for icon-layer captions.
+             * Label-layer items already dock via `translate` — applying both double-offsets
+             * lower-row titles far above their tiles.
+             */
+            &:not([data-layer="labels"])[data-label-placement="above"] &.ui-ws-item-label {
+                inset-block-start: auto;
+                inset-block-end: 100%;
+                padding-block-start: 0;
+                padding-block-end: 0.35rem;
+            }
+
+            &:active {
+                will-change: transform;
+            }
+
+            &[data-interaction-state="onGrab"],
+            &[data-interaction-state="onMoving"] {
+                will-change: transform;
+                cursor: grabbing;
+                z-index: 120;
+                transition: none !important;
+                transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
+
+                &.ui-ws-item-label {
+                    opacity: 1;
+                    pointer-events: none;
+                }
+            }
+
+            &[data-interaction-state="onRelax"] {
+                will-change: transform;
+                z-index: 120;
+                transition: none !important;
+                transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
+            }
+
+            &[data-interaction-state="onPlace"] {
+                will-change: transform;
+                z-index: 120;
+                transition: none !important;
+                transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
+            }
+
+            &[data-layer="labels"] {
+                z-index: 0;
+                filter: none;
+                background: transparent !important;
+                pointer-events: none !important;
+                overflow: visible;
+                transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1);
+                /* INVARIANT: `--cell-column` is 1-based. If lure wiped it, `--cs-grid-*`
+                 * still maps `--cell-x` (including 0) so captions do not auto-flow. */
+                grid-column: var(
+                    --cell-column,
+                    clamp(1, calc(1 + round(nearest, var(--cs-grid-c, 0), 1)), 16)
+                ) / span 1 !important;
+                grid-row: var(
+                    --cell-row,
+                    clamp(1, calc(1 + round(nearest, var(--cs-grid-r, 0), 1)), 16)
+                ) / span 1 !important;
+                place-self: center;
+
+                /*
+                 * WHY: Icons use place-self:center in tall grid cells. Captions sit just under the
+                 * tile via `translate` (separate from drag `transform`). Host width uses
+                 * `--sd-label-max` so long titles can center + ellipsize instead of clipping.
+                 */
+                --sd-label-gap: 0.8rem;
+                --sd-label-max: min(calc(var(--tile-size, 3.5rem) * 2.85), min(94vw, 10.5rem));
+                /* WHY: Capacitor WebView has no CSS `translate` — `transform: none` parked captions under tiles. */
+                --sd-label-shift: calc((var(--tile-size, 4rem) * 0.5) + var(--sd-label-gap));
+                aspect-ratio: auto;
+                display: grid;
+                justify-items: center;
+                align-items: start;
+                inline-size: var(--sd-label-max);
+                min-inline-size: var(--sd-label-max);
+                max-inline-size: var(--sd-label-max);
+                /* WHY: auto-height + place-self:center grew long titles into the plate. */
+                block-size: 0;
+                min-block-size: 0;
+                max-block-size: none;
+                place-self: center;
+                overflow: visible;
+                transform: translate3d(0, var(--sd-label-shift), 0);
+
+                &.ui-ws-item-label {
+                    background: transparent !important;
+                    pointer-events: none !important;
+                    /* INVARIANT: undo icon-layer `position:absolute; inset-block-start:100%` or letters sit in gutters. */
+                    position: relative !important;
+                    inset: unset !important;
+                    inline-size: var(--sd-label-max);
+                    min-inline-size: var(--sd-label-max);
+                    max-inline-size: var(--sd-label-max);
+                    margin-inline: 0;
+                    padding-block-start: 0;
+                    display: grid;
+                    justify-items: center;
+                    text-align: center;
+                    overflow: visible;
+                    color: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));
+                }
+
+                &.ui-ws-item-label span {
+                    pointer-events: none !important;
+                    display: block;
+                    inline-size: auto;
+                    max-inline-size: 100%;
+                    margin-inline: auto;
+                    text-align: center;
+                    white-space: nowrap !important;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-family: inherit;
+                    font-size: clamp(0.68rem, calc(0.09 * var(--tile-size, 3.75rem)), 0.82rem);
+                    font-weight: 650;
+                    letter-spacing: 0.02em;
+                    color: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));
+                    padding-block: 0.04rem 0.08rem;
+                    padding-inline: 0.22rem;
+                    border-radius: var(--radius-full);
+                    line-height: 1.15;
+                    text-shadow:
+                        0 1px 2px var(--sd-cast-ink, rgb(0 0 0 / 0.88)),
+                        0 0 12px var(--sd-cast-glow, rgb(0 0 0 / 0.45));
+                    background: transparent;
+                    backdrop-filter: none;
+                    -webkit-backdrop-filter: none;
+                    box-shadow: none;
+                }
+
+                &[data-label-placement="above"] {
+                    --sd-label-shift: calc((var(--tile-size, 4rem) * -0.5) - var(--sd-label-gap));
+                    align-items: end;
+
+                    &.ui-ws-item-label span {
+                        transform: translateY(-100%);
+                    }
+                }
+            }
+
+            &[data-layer="labels"][data-interaction-state="onLabelDocked"] {
+                transform: translate3d(0, var(--sd-label-shift), 0) !important;
+                transition: none !important;
+                cursor: default;
+            }
+
+            &[data-layer="labels"][data-interaction-state="onGrab"],
+            &[data-layer="labels"][data-interaction-state="onMoving"] {
+                transition: none !important;
+            }
+
+            &[data-layer="icons"] {
+                z-index: 99;
+                filter: none;
+                touch-action: none;
+            }
+
+            &[data-layer="icons"][data-interaction-state="onGrab"],
+            &[data-layer="icons"][data-interaction-state="onMoving"],
+            &[data-layer="icons"][data-interaction-state="onRelax"],
+            &[data-layer="icons"][data-interaction-state="onPlace"] {
+                z-index: 120;
+            }
+        }
+
+        /* Grid-level under siblings of `.ui-ws-item` (DOM children ≈ 2× icons). */
+        & > .ui-ws-item-icon-under.underlying-shadow-container,
+        & > .ui-ws-item-icon-under {
+            background-color: transparent !important;
+            pointer-events: none !important;
+            overflow: visible !important;
+            z-index: 0 !important;
+            /* INVARIANT: same cell as the plate — WebView has no CSS-anchor fill. */
+            position: relative !important;
+            inset: auto !important;
+            grid-column: var(--cell-column) / span 1 !important;
+            grid-row: var(--cell-row) / span 1 !important;
+            place-self: center;
+            inline-size: min(100%, var(--tile-size, 4rem));
+            block-size: min(100%, var(--tile-size, 4rem));
+            filter: blur(12px) !important;
+            padding: 0px !important;
+            contain: none !important;
+            visibility: visible !important;
+            content-visibility: visible !important;
+            opacity: 1 !important;
+            --drag-x: 0px;
+            --drag-y: 0px;
+            transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
+            transform-origin: 50% 50%;
+            transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1);
+
+            &[data-dragging],
+            &[data-interaction-state="onGrab"],
+            &[data-interaction-state="onMoving"],
+            &[data-interaction-state="onRelax"],
+            &[data-interaction-state="onPlace"] {
+                z-index: 119 !important;
+                transition: none !important;
+            }
+
+            &[data-interaction-state="onPlace"],
+            &[data-interaction-state="onRelax"] {
+                z-index: 0 !important;
+            }
+        }
+
+        & > .ui-ws-item-icon-under .underlying-shadow-geometry {
+            inline-size: 100%;
+            block-size: 100%;
+            background: #000000af !important;
+            transition: filter 200ms ease, box-shadow 200ms ease;
+            padding: 0px !important;
+            visibility: visible !important;
+
+            /* WHY: match plate clip without copying getComputedStyle (WebView crash on pin). */
+            &[data-shape="circle"] {
+                border-radius: 50% !important;
+            }
+
+            &[data-shape="square"] {
+                border-radius: max(0.55rem, 14%) !important;
+            }
+
+            &[data-shape="squircle"] {
+                border-radius: 1.5rem !important;
+            }
+
+            &[data-shape="wavy"] {
+                @include wavy-shaped(100);
+                clip-path: var(--clip-path);
+            }
+        }
+
+        & > .ui-ws-item-icon-under:has(+ .ui-ws-item:hover) .underlying-shadow-geometry {
+            /*filter: blur(8px) !important;*/
+            padding: 0px !important;
+            visibility: visible !important;
+        }
+
+        /* WHY: shapeless / widgets have no plate under-glow. */
+        & > .ui-ws-item-icon-under[data-shape="shapeless"],
+        & > .ui-ws-item-icon-under[data-shape="none"],
+        & > .ui-ws-item-icon-under:has(+ .ui-ws-item[data-shape="shapeless"]),
+        & > .ui-ws-item-icon-under:has(+ .ui-ws-item[data-shape="none"]) {
+            display: none !important;
+        }
+    }
+
+    // Labels are a projection layer: they follow committed grid cells, but
+    // never participate in pointer capture, hover scaling, or icon FLIP.
+    .speed-dial-label-layer {
+        pointer-events: none !important;
+
+        .ui-ws-item {
+            pointer-events: none;
+            touch-action: auto;
+            scale: 1;
+            /* WHY: do not zero `transform` — label dock is `translate3d(0, --sd-label-shift, 0)`. */
+            z-index: 0;
+            grid-column: var(
+                --cell-column,
+                clamp(1, calc(1 + round(nearest, var(--cs-grid-c, 0), 1)), 16)
+            ) / span 1 !important;
+            grid-row: var(
+                --cell-row,
+                clamp(1, calc(1 + round(nearest, var(--cs-grid-r, 0), 1)), 16)
+            ) / span 1 !important;
+            position: relative;
+            transition: none !important;
+            transition-duration: 0ms !important;
+            animation: none !important;
+            animation-duration: 0ms !important;
+        }
+
+        .ui-ws-item:hover,
+        .ui-ws-item:active {
+            scale: 1;
+        }
+    }
+
+    // Home orient layer: tighter padding and tiles on narrow / short containers.
+    .speed-dial-root.app-oriented-desktop {
+        .speed-dial-grid.app-oriented-desktop__grid--labels,
+        .speed-dial-grid.app-oriented-desktop__grid--icons {
+            @container (max-width: 28rem) {
+                padding-inline: clamp(0.35rem, 3.2cqw, var(--padding-lg));
+                padding-block: clamp(0.35rem, 2.8cqh, var(--padding-lg));
+            }
+
+            @container (max-height: 29rem) {
+                padding-block: clamp(0.3rem, 2.2cqh, var(--padding-md));
+            }
+        }
+
+        .ui-ws-item {
+            @container (max-width: 28rem) {
+                --tile-size: clamp(4rem, 12dvmin, 6rem);
+
+                .ui-ws-item-icon {
+                    padding: 0.65rem;
+                }
+            }
+        }
+    }
+
+    /*
+     * WHY: ShortcutEditor mounts a <dialog class="speed-dial-editor"> via showModal().
+     * Host is a full-viewport grid; scrim lives on ::backdrop (top layer).
+     */
+    .speed-dial-editor {
+        --sd-editor-seed: var(--base-color, var(--color-primary, #5a7fff));
+        position: fixed;
+        inset: 0;
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: 100%;
+        max-block-size: 100%;
+        margin: 0;
+        border: none;
+        padding: 1rem;
+        display: grid;
+        place-items: center;
+        background: transparent;
+        color: --u2-color-mod(var(--sd-editor-seed), 100);
+        pointer-events: auto;
+        contain: none;
+        content-visibility: visible;
+        overflow: auto;
+    }
+
+    .speed-dial-editor::backdrop {
+        /* WHY: adaptive scrim from wallpaper seed (same contract as context menu). */
+        background: color-mix(
+            in oklab,
+            --u2-color-mod(var(--base-color, var(--color-primary, #5a7fff)), 920) 58%,
+            transparent
+        );
+        backdrop-filter: blur(10px) saturate(1.08);
+        -webkit-backdrop-filter: blur(10px) saturate(1.08);
+    }
+
+    .speed-dial-editor__form {
+        /*
+         * INVARIANT: adaptive colorization via wallpaper `--base-color` + `--u2-color-mod`
+         * (same as `.cw-context-menu`). Do not hardcode slate panels here.
+         */
+        --sd-editor-seed: var(--base-color, var(--color-primary, #5a7fff));
+        --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 100);
+        --sd-editor-muted: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 70%, transparent);
+        --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 900);
+        --sd-editor-field-ink: --u2-color-mod(var(--sd-editor-seed), 100);
+        --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 860);
+        --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 16%, transparent);
+        --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 520);
+        --sd-editor-danger-bg: #7f1d1d;
+        --sd-editor-danger-ink: #fff7f7;
+        color-scheme: dark;
+        inline-size: min(100%, 560px);
+        margin-inline: auto;
+        border-radius: 18px;
+        border: 1px solid var(--sd-editor-border);
+        /* WHY: mix surface token + seed panel so wallpaper tint shows through (not opaque slate). */
+        background: color-mix(
+            in oklab,
+            var(--color-surface-container, var(--sd-editor-panel)) 88%,
+            transparent
+        );
+        color: var(--sd-editor-ink);
+        display: grid;
+        grid-template-rows: auto minmax(0, 1fr) auto;
+        /* WHY: never let global .modal-form min-block-size (~90dvb) clip Label above the fold. */
+        min-block-size: 0;
+        max-block-size: min(86vh, 760px);
+        overflow: hidden;
+        pointer-events: auto;
+        contain: none !important;
+        content-visibility: visible !important;
+        backdrop-filter: blur(14px) saturate(1.12);
+        -webkit-backdrop-filter: blur(14px) saturate(1.12);
+        box-shadow:
+            0 24px 64px -28px color-mix(in oklab, #000 60%, transparent),
+            0 0 0 1px color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 10%, transparent);
+    }
+
+    html[data-theme="light"] .speed-dial-editor__form,
+    .speed-dial-editor[data-theme="light"] .speed-dial-editor__form,
+    .speed-dial-editor__form[data-theme="light"] {
+        color-scheme: light only;
+        --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 900);
+        --sd-editor-muted: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 900) 70%, transparent);
+        --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 140);
+        --sd-editor-field-ink: --u2-color-mod(var(--sd-editor-seed), 900);
+        --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 120);
+        --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 900) 14%, transparent);
+        --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 480);
+        --sd-editor-danger-bg: #9f1239;
+        --sd-editor-danger-ink: #fff7f7;
+        background: color-mix(
+            in oklab,
+            var(--color-surface-container, var(--sd-editor-panel)) 92%,
+            transparent
+        );
+        color: var(--sd-editor-ink);
+        box-shadow:
+            0 18px 48px -24px color-mix(in oklab, #0f172a 26%, transparent),
+            0 0 0 1px var(--sd-editor-border);
+    }
+
+    html[data-theme="dark"] .speed-dial-editor__form,
+    .speed-dial-editor[data-theme="dark"] .speed-dial-editor__form,
+    .speed-dial-editor__form[data-theme="dark"] {
+        color-scheme: dark only;
+        --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 100);
+        --sd-editor-muted: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 70%, transparent);
+        --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 900);
+        --sd-editor-field-ink: --u2-color-mod(var(--sd-editor-seed), 100);
+        --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 860);
+        --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 16%, transparent);
+        --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 520);
+        background: color-mix(
+            in oklab,
+            var(--color-surface-container, var(--sd-editor-panel)) 88%,
+            transparent
+        );
+        color: var(--sd-editor-ink);
+    }
+
+    .speed-dial-editor__form .modal-header {
+        display: grid;
+        gap: 0.4rem;
+        padding: 1rem 1rem 0.75rem;
+        border-block-end: none;
+        box-shadow: 0 1px 0 var(--sd-editor-border);
+    }
+
+    .speed-dial-editor__form .modal-title {
+        margin: 0;
+        font-size: 1.2rem;
+        font-weight: 650;
+        line-height: 1.25;
+        color: var(--sd-editor-ink);
+    }
+
+    .speed-dial-editor__form .modal-description {
+        margin: 0;
+        font-size: 0.86rem;
+        line-height: 1.35;
+        color: var(--sd-editor-muted);
+    }
+
+    .speed-dial-editor__form .modal-fields {
+        display: grid;
+        gap: 0.75rem;
+        padding: 0.9rem 1rem 1rem;
+        overflow: auto;
+        min-block-size: 0;
+        align-content: start;
+    }
+
+    .speed-dial-editor__form .modal-field {
+        display: grid;
+        gap: 0.35rem;
+        pointer-events: auto;
+    }
+
+    .speed-dial-editor__form [data-field="span"] .sd-icon-resource-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.45rem;
+    }
+
+    .speed-dial-editor__form input[name="spanCols"],
+    .speed-dial-editor__form input[name="spanRows"] {
+        min-inline-size: 0;
+        inline-size: 100%;
+        pointer-events: auto;
+    }
+
+    .speed-dial-editor__form .modal-field > :is(span, label) {
+        font-size: 0.84rem;
+        color: var(--sd-editor-muted);
+        /* WHY: normalize sets :where(label){pointer-events:none}; captions must not block. */
+        pointer-events: none;
+        user-select: none;
+        margin: 0;
+        font-weight: 600;
+    }
+
+    .speed-dial-editor__form :is(input, select, textarea, button, .btn) {
+        pointer-events: auto !important;
+        position: relative;
+        z-index: 1;
+    }
+
+    .speed-dial-editor__form :is(input, select, textarea) {
+        inline-size: 100%;
+        min-inline-size: 0;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--sd-editor-border);
+        background: var(--sd-editor-field-bg);
+        color: var(--sd-editor-field-ink);
+        caret-color: var(--sd-editor-field-ink);
+        padding: 0.55rem 0.7rem;
+        outline: none;
+        appearance: none;
+        /* WHY: form hosts sometimes paint controls but skip hit-testing under content-visibility. */
+        contain: none !important;
+        content-visibility: visible !important;
+    }
+
+    .speed-dial-editor__form :is(input, select, textarea)::placeholder {
+        color: color-mix(in oklab, var(--sd-editor-field-ink) 45%, transparent);
+    }
+
+    .speed-dial-editor__form textarea {
+        resize: vertical;
+        min-block-size: 4.4rem;
+    }
+
+    .speed-dial-editor__form :is(input, select, textarea):focus {
+        border-color: color-mix(in oklab, var(--sd-editor-accent) 64%, --u2-color-mod(var(--sd-editor-seed), 100) 12%);
+        box-shadow: 0 0 0 2px color-mix(in oklab, var(--sd-editor-accent) 28%, transparent);
+    }
+
+    .speed-dial-editor__form .sd-icon-resource-row {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto auto;
+        align-items: center;
+        gap: 0.45rem;
+        min-inline-size: 0;
+    }
+
+    .speed-dial-editor__form .sd-icon-resource-row > input {
+        inline-size: 100%;
+        min-inline-size: 0;
+    }
+
+    .speed-dial-editor__form .sd-icon-resource-pick {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: 2.4rem;
+        block-size: 2.4rem;
+        min-inline-size: 2.4rem;
+        padding: 0;
+        flex: 0 0 auto;
+    }
+
+    .speed-dial-editor__form .sd-icon-resource-pick ui-icon {
+        --icon-size: 1.25rem;
+        --icon-padding: 0;
+        inline-size: var(--icon-size);
+        block-size: var(--icon-size);
+        min-inline-size: var(--icon-size);
+        min-block-size: var(--icon-size);
+        pointer-events: none;
+    }
+
+    .speed-dial-editor__form .modal-actions {
+        display: grid;
+        grid-template-columns: 1fr auto auto;
+        align-items: center;
+        justify-items: stretch;
+        gap: 0.45rem;
+        padding: 0.65rem 0.85rem;
+        border-block-start: 1px solid var(--sd-editor-border);
+        color: var(--sd-editor-ink);
+        background: transparent;
+        border: none 0px transparent;
+        outline: none 0px transparent;
+        min-inline-size: 0;
+    }
+
+    .speed-dial-editor__form .modal-actions .modal-actions-spacer {
+        display: block;
+        min-inline-size: 0;
+    }
+
+    .speed-dial-editor__form .modal-actions .btn {
+        justify-self: start;
+        white-space: nowrap;
+        min-inline-size: 0;
+        padding: 0.4rem 0.7rem;
+    }
+
+    .speed-dial-editor__form .modal-actions .btn.secondary,
+    .speed-dial-editor__form .modal-actions .btn.save {
+        justify-self: end;
+    }
+
+    .speed-dial-editor__form .btn {
+        border-radius: var(--radius-md);
+        border: 1px solid var(--sd-editor-border);
+        padding: 0.46rem 0.86rem;
+        font-size: 0.86rem;
+        line-height: 1.2;
+        cursor: pointer;
+        color: var(--sd-editor-ink);
+        background: color-mix(in oklab, var(--sd-editor-field-bg) 82%, transparent);
+    }
+
+    .speed-dial-editor__form .btn.secondary {
+        background: color-mix(in oklab, var(--sd-editor-field-bg) 68%, transparent);
+        color: var(--sd-editor-ink);
+    }
+
+    .speed-dial-editor__form .btn.save {
+        border-color: color-mix(in oklab, var(--sd-editor-accent) 55%, transparent);
+        background: color-mix(in oklab, var(--sd-editor-accent) 78%, --u2-color-mod(var(--sd-editor-seed), 920) 22%);
+        color: --u2-color-mod(var(--sd-editor-seed), 100);
+    }
+
+    html[data-theme="light"] .speed-dial-editor__form .btn.save,
+    .speed-dial-editor[data-theme="light"] .speed-dial-editor__form .btn.save,
+    .speed-dial-editor__form[data-theme="light"] .btn.save {
+        background: color-mix(in oklab, var(--sd-editor-accent) 82%, --u2-color-mod(var(--sd-editor-seed), 120) 18%);
+        color: --u2-color-mod(var(--sd-editor-seed), 980);
+    }
+
+    .speed-dial-editor__form .btn.danger {
+        border-color: color-mix(in oklab, var(--sd-editor-danger-bg) 70%, transparent);
+        background: var(--sd-editor-danger-bg);
+        color: var(--sd-editor-danger-ink);
+    }
+
+    .speed-dial-editor__form .btn:hover {
+        filter: brightness(1.08);
+    }
+
+    .speed-dial-editor__form [hidden] {
+        display: none !important;
+    }
+
+    @media (max-width: 820px) {
+        .speed-dial-editor {
+            place-items: center;
+        }
+        .speed-dial-editor__form {
+            inline-size: 100%;
+            max-block-size: 94vh;
+        }
+    }
+}
+
+@layer components {
+    :root:has([data-view="home"]),
+    html:has([data-view="home"]) {
+        /* colors */
+        --view-home-bg: linear-gradient(135deg, light-dark(#f8f9fa, #1b1f24) 0%, light-dark(#e9ecef, #0f1216) 100%);
+        --view-fg: light-dark(#1a1a1a, #e9ecef);
+        --view-border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
+        --view-card-bg: light-dark(#ffffff, #1a1f26);
+        --view-primary: light-dark(#007acc, #66b7ff);
+
+        /* layout */
+        --view-layout: "flex";
+        --view-padding: var(--space-8);
+        --view-content-max-width: 1200px;
+        --view-hero-padding: var(--space-16);
+        --view-card-gap: var(--space-6);
+    }
+
+    .view-home {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        block-size: 100%;
+        padding: 2rem;
+        background: var(--view-home-bg);
+        color: var(--view-fg);
+        overflow-y: auto;
+
+        &__content {
+            text-align: center;
+            max-inline-size: 800px;
+        }
+
+        &__header {
+            margin-block-end: 3rem;
+        }
+
+        &__title {
+            margin: 0;
+            font-size: 3rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--view-primary) 0%, light-dark(#0059a6, #3a8ad6) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        &__subtitle {
+            margin: 0.5rem 0 0;
+            font-size: 1.125rem;
+            color: var(--view-fg);
+            opacity: 0.7;
+        }
+
+        &__actions {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+
+        &__action {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 1.5rem;
+            border: 1px solid var(--view-border);
+            border-radius: var(--radius-xl);
+            background-color: var(--view-card-bg);
+            color: var(--view-fg);
+            text-align: center;
+            cursor: pointer;
+            transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
+
+            ui-icon {
+                opacity: 0.8;
+                color: var(--view-primary);
+            }
+
+            &:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+                border-color: var(--view-primary);
+
+                ui-icon {
+                    opacity: 1;
+                }
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--view-primary);
+                outline-offset: 2px;
+            }
+        }
+
+        &__action-title {
+            font-size: 1rem;
+            font-weight: 600;
+        }
+
+        &__action-desc {
+            font-size: 0.8125rem;
+            opacity: 0.6;
+        }
+    }
+
+    /*
+     * WHY: desktop launcher must not paint marketing `.view-home` fill over wallpaper.
+     * Full host contract also comes from fl-design/ui/home-host-apply (OrientDesktop).
+     */
+    .view-home.env-home-workspace,
+    .view-home.view-home--grid {
+        background: transparent !important;
+        padding: 0;
+        overflow: hidden;
+        display: grid;
+        align-items: stretch;
+        justify-items: stretch;
+        /* WHY: host mixin sets pointer-events:none; desktop must receive paste/drop/contextmenu. */
+        pointer-events: auto !important;
+    }
+
+    .view-home.env-home-workspace > .speed-dial-root,
+    .speed-dial-root.app-oriented-desktop {
+        pointer-events: auto !important;
+    }
+
+    /* Base/minimal shell home should behave as desktop grid host. */
+    .view-home--grid {
+        position: relative;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
+        align-items: stretch;
+        justify-items: stretch;
+        block-size: 100%;
+        inline-size: 100%;
+        padding: 0;
+        overflow: hidden;
+        background: transparent;
+
+        .speed-dial-root {
+            position: fixed;
+            inset: 0 auto auto 0;
+            inline-size: var(--lv-width, 100lvi);
+            block-size: var(--lv-height, 100lvb);
+            max-inline-size: var(--lv-width, 100lvi);
+            max-block-size: var(--lv-height, 100lvb);
+            overflow: hidden;
+        }
+    }
+
+    @container speed-dial (inline-size < 48rem) {
+        .view-home {
+            --view-hero-padding: var(--space-8);
+            --view-card-gap: var(--space-4);
+        }
+    }
+
+    @container speed-dial (inline-size < 30rem) {
+        .view-home__actions {
+            grid-template-columns: 1fr;
+        }
+    }
+}
+
+/*
+ * WHY: These targeted editor fixes must beat component defaults without relying
+ * on unlayered CSS.
+ */
+@layer overrides {
+.speed-dial-editor,
+.speed-dial-editor__form,
+.speed-dial-editor__form .modal-field,
+.speed-dial-editor__form :is(input, select, textarea, button) {
+    pointer-events: auto !important;
+}
+
+.speed-dial-editor__form {
+    contain: none !important;
+    content-visibility: visible !important;
+    min-block-size: 0 !important;
+}
+
+.speed-dial-editor__form .modal-field > label {
+    pointer-events: none !important;
+}
+
+/* WHY: Cap kept stacking footer groups — flat 3-col grid beats flex wrappers. */
+.speed-dial-editor__form .modal-actions {
+    display: grid !important;
+    grid-template-columns: 1fr auto auto !important;
+    align-items: center !important;
+    gap: 0.45rem !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+}
+
+.speed-dial-editor__form .modal-actions .btn {
+    white-space: nowrap !important;
+    min-inline-size: 0 !important;
+    max-inline-size: none !important;
+}
+
+/* WHY: Cap WebView dropped layered grid — button sat under the resource input. */
+.speed-dial-editor__form .sd-icon-resource-row {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) 2.5rem !important;
+    align-items: stretch !important;
+    gap: 0.45rem !important;
+    min-inline-size: 0 !important;
+    inline-size: 100% !important;
+}
+
+.speed-dial-editor__form .sd-icon-resource-row > input {
+    inline-size: 100% !important;
+    min-inline-size: 0 !important;
+    max-inline-size: none !important;
+}
+
+.speed-dial-editor__form .sd-icon-resource-pick {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    inline-size: 2.5rem !important;
+    block-size: auto !important;
+    min-inline-size: 2.5rem !important;
+    max-inline-size: 2.5rem !important;
+    min-block-size: 2.5rem !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    flex: 0 0 auto !important;
+}
+
+.speed-dial-editor__form .sd-icon-resource-pick ui-icon {
+    --icon-size: 1.25rem !important;
+    --icon-padding: 0 !important;
+    inline-size: 1.25rem !important;
+    block-size: 1.25rem !important;
+    pointer-events: none !important;
+}
+
+/* WHY: dialog is a full-viewport host (Cap cannot center a shrink-wrapped <dialog>). */
+.sd-icon-picker {
+    --sd-editor-seed: var(--base-color, var(--color-primary, #5a9ec8));
+    --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 100);
+    --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 900);
+    --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 860);
+    --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 16%, transparent);
+    --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 520);
+    color-scheme: dark;
+    position: fixed;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    margin: 0;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    place-content: center;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--sd-editor-ink);
+    overflow: auto;
+    box-shadow: none;
+}
+
+html[data-theme="light"] .sd-icon-picker,
+.sd-icon-picker[data-theme="light"] {
+    color-scheme: light only;
+    --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 900);
+    --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 140);
+    --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 120);
+    --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 900) 14%, transparent);
+    --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 480);
+    color: var(--sd-editor-ink);
+}
+
+.sd-icon-picker::backdrop {
+    background: color-mix(
+        in oklab,
+        --u2-color-mod(var(--base-color, var(--color-primary, #5a9ec8)), 920) 58%,
+        transparent
+    );
+    backdrop-filter: blur(10px) saturate(1.08);
+    -webkit-backdrop-filter: blur(10px) saturate(1.08);
+}
+
+.sd-icon-picker__form {
+    display: flex !important;
+    flex-direction: column !important;
+    inline-size: min(22rem, 100%) !important;
+    max-inline-size: 100% !important;
+    max-block-size: min(86dvh, 36rem);
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 1px solid var(--sd-editor-border);
+    border-radius: 18px;
+    background: color-mix(
+        in oklab,
+        var(--color-surface-container, var(--sd-editor-panel)) 92%,
+        transparent
+    );
+    color: inherit;
+    overflow: hidden;
+    box-shadow: 0 24px 64px -28px color-mix(in oklab, #000 60%, transparent);
+    backdrop-filter: blur(14px) saturate(1.12);
+    -webkit-backdrop-filter: blur(14px) saturate(1.12);
+    justify-self: center;
+    align-self: center;
+}
+
+.sd-icon-picker__header {
+    display: grid;
+    gap: 0.55rem;
+    padding: 0.9rem 0.95rem 0.55rem;
+}
+
+.sd-icon-picker__title {
+    margin: 0;
+    font: 650 1.15rem/1.25 ui-sans-serif, system-ui, sans-serif;
+    text-align: center;
+}
+
+.sd-icon-picker__tabs {
+    display: grid !important;
+    grid-auto-flow: column !important;
+    grid-auto-columns: 1fr !important;
+    gap: 0.28rem !important;
+    inline-size: 100%;
+    padding: 0.22rem;
+    border-radius: 999px;
+    background: color-mix(in oklab, var(--sd-editor-field-bg) 42%, transparent);
+}
+
+.sd-icon-picker__tabs[hidden] {
+    display: none !important;
+}
+
+.sd-icon-picker__tab {
+    appearance: none !important;
+    flex: 1 1 0 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 !important;
+    padding: 0.38rem 0.4rem !important;
+    inline-size: 100% !important;
+    min-inline-size: 0 !important;
+    block-size: auto !important;
+    border: 0 !important;
+    border-radius: 999px !important;
+    background: transparent !important;
+    color: inherit !important;
+    font: 600 0.74rem/1.2 ui-sans-serif, system-ui, sans-serif !important;
+    cursor: pointer;
+}
+
+.sd-icon-picker__tab[data-active] {
+    background: color-mix(in oklab, var(--sd-editor-accent, currentColor) 28%, transparent) !important;
+}
+
+.sd-icon-picker__search {
+    inline-size: 100% !important;
+    min-inline-size: 0 !important;
+    box-sizing: border-box !important;
+    padding: 0.4rem 0.65rem !important;
+    border-radius: 0.65rem !important;
+    font-size: 0.82rem !important;
+}
+
+.sd-icon-picker__search[hidden] {
+    display: none !important;
+}
+
+.sd-icon-picker__body {
+    padding: 0.45rem 0.75rem 0.35rem;
+    overflow: auto;
+    min-block-size: 0;
+    max-block-size: min(28rem, 58dvh);
+    background: transparent !important;
+}
+
+.sd-icon-picker__section {
+    min-inline-size: 0;
+}
+
+.sd-icon-picker__section[hidden] {
+    display: none !important;
+}
+
+.sd-icon-picker__grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)) !important;
+    gap: 0.5rem 0.4rem !important;
+    align-content: start;
+    min-inline-size: 0 !important;
+}
+
+.sd-icon-picker__grid--browse {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    grid-template-rows: auto minmax(0, 1fr) !important;
+    gap: 0.35rem !important;
+}
+
+.sd-icon-picker__pack-toolbar {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.3rem 0.4rem;
+    align-items: center;
+}
+
+.sd-icon-picker__pack-toolbar .sd-icon-picker__search {
+    grid-column: 1 / -1;
+}
+
+.sd-icon-picker__pack-back {
+    appearance: none !important;
+    margin: 0;
+    padding: 0.2rem 0.5rem;
+    border: 0 !important;
+    border-radius: 999px !important;
+    background: color-mix(in oklab, var(--sd-editor-field-bg, currentColor) 55%, transparent) !important;
+    color: inherit;
+    font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
+    cursor: pointer;
+}
+
+.sd-icon-picker__pack-title {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.74rem;
+    opacity: 0.78;
+}
+
+.sd-icon-picker__pack-wrap {
+    position: relative;
+    min-inline-size: 0;
+}
+
+.sd-icon-picker__pack-browse {
+    appearance: none !important;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+    display: grid !important;
+    place-items: center;
+    margin: 0 !important;
+    padding: 0 !important;
+    inline-size: 1.2rem !important;
+    block-size: 1.2rem !important;
+    min-inline-size: 1.2rem !important;
+    min-block-size: 1.2rem !important;
+    border: 0 !important;
+    border-radius: 999px !important;
+    background: color-mix(in oklab, var(--sd-editor-panel, Canvas) 82%, transparent) !important;
+    color: inherit;
+    cursor: pointer;
+}
+
+.sd-icon-picker__pack-browse ui-icon {
+    --icon-size: 0.72rem !important;
+    --icon-padding: 0 !important;
+    inline-size: 0.72rem !important;
+    block-size: 0.72rem !important;
+    pointer-events: none;
+}
+
+.sd-icon-picker__card {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    grid-template-rows: auto max-content !important;
+    justify-items: center !important;
+    align-content: start !important;
+    align-items: start !important;
+    flex-direction: column !important;
+    gap: 0.3rem !important;
+    margin: 0 !important;
+    padding: 0.2rem 0.08rem 0.15rem !important;
+    min-inline-size: 0 !important;
+    inline-size: 100% !important;
+    max-inline-size: 100% !important;
+    block-size: auto !important;
+    min-block-size: 0 !important;
+    border: 0 !important;
+    border-radius: 0.7rem !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: inherit !important;
+    cursor: pointer !important;
+    overflow: hidden !important;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    position: static !important;
+    z-index: auto !important;
+    text-align: center !important;
+}
+
+.sd-icon-picker__card:hover,
+.sd-icon-picker__card:focus-visible {
+    background: color-mix(in oklab, var(--sd-editor-accent, currentColor) 14%, transparent) !important;
+    outline: none;
+}
+
+.sd-icon-picker__card img {
+    display: block !important;
+    grid-row: 1 !important;
+    flex: 0 0 auto !important;
+    inline-size: 3rem !important;
+    block-size: 3rem !important;
+    max-inline-size: 3rem !important;
+    max-block-size: 3rem !important;
+    object-fit: cover !important;
+    border-radius: 50% !important;
+}
+
+.sd-icon-picker__card-label {
+    display: block !important;
+    grid-row: 2 !important;
+    font-size: 0.62rem !important;
+    line-height: 1.2 !important;
+    text-align: center !important;
+    inline-size: 100% !important;
+    max-inline-size: 100% !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+    opacity: 0.88;
+}
+
+.sd-icon-picker__card:disabled {
+    opacity: 0.45 !important;
+    cursor: not-allowed !important;
+}
+
+.sd-icon-picker__footer {
+    display: flex !important;
+    justify-content: flex-end !important;
+    align-items: center !important;
+    gap: 0.45rem;
+    padding: 0.55rem 0.85rem 0.75rem;
+    border-block-start: 1px solid var(--sd-editor-border);
+}
+
+.sd-icon-picker__cancel {
+    appearance: none !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex: 0 0 auto !important;
+    margin: 0 !important;
+    padding: 0.42rem 0.86rem !important;
+    inline-size: auto !important;
+    width: auto !important;
+    min-inline-size: 0 !important;
+    max-inline-size: none !important;
+    border: 1px solid var(--sd-editor-border) !important;
+    border-radius: 0.65rem !important;
+    background: color-mix(in oklab, var(--sd-editor-field-bg) 68%, transparent) !important;
+    color: inherit !important;
+    font: 600 0.82rem/1.2 ui-sans-serif, system-ui, sans-serif;
+    cursor: pointer;
+}
+
+.sd-widget-picker {
+    inline-size: min(90cqi, 92vw);
+    max-block-size: 80vh;
+    padding: 0.85rem;
+    border: none;
+    border-radius: 0.85rem;
+    background: Canvas;
+    color: CanvasText;
+}
+
+.sd-widget-picker__list {
+    display: grid;
+    gap: 0.4rem;
+    max-block-size: 60vh;
+    overflow: auto;
+    margin-block: 0.6rem;
+}
+
+.sd-widget-picker__item {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    inline-size: 100%;
+    padding: 0.45rem 0.55rem;
+    border: 1px solid color-mix(in oklab, CanvasText 14%, transparent);
+    border-radius: 0.55rem;
+    background: transparent;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+}
+
+.sd-widget-picker__item img {
+    inline-size: 2.2rem;
+    block-size: 2.2rem;
+    object-fit: contain;
+}
+}