@preference-sl/pref-viewer 2.18.0-beta.1 → 3.0.0-beta.0

package/src/styles.js

@@ -15,38 +15,13 @@ const PrefViewerDefaultStyleVariables = {
 };
 
 /**
- * Reads persisted runtime style overrides in browser contexts.
- * Only `colorPrimary` is consumed by `PrefViewerStyleVariables`; other keys are ignored by the host component.
- * @returns {object} Parsed persisted style overrides, or an empty object when unavailable or invalid.
- */
-function readPersistedStyleVariables() {
-    if (typeof window === "undefined") {
-        return {};
-    }
-    try {
-        const serialized = window.localStorage?.getItem(PREF_VIEWER_STYLES_STORAGE_KEY);
-        return serialized ? JSON.parse(serialized) : {};
-    } catch (_error) {
-        return {};
-    }
-}
-
-/** @type {object} Persisted raw style overrides loaded during module initialization. */
-const persistedStyleVariables = readPersistedStyleVariables();
-
-/**
- * Shared style variables consumed by PrefViewer CSS templates and Babylon defaults.
- * `colorPrimary` can be overridden at runtime through `<pref-viewer styles>`, `viewer.styles`, `viewer.setStyles()`, or `loadConfig({ styles })`.
+ * Default style variables consumed by internal CSS templates and Babylon defaults.
+ * Root viewer overrides are instance-owned by PrefViewerStyleController and never mutate this object.
  * @type {{colorPrimary: string, fontFamily: string, fontSize: string}}
  */
-export const PrefViewerStyleVariables = {
-    ...PrefViewerDefaultStyleVariables,
-    colorPrimary: typeof persistedStyleVariables.colorPrimary === "string" && persistedStyleVariables.colorPrimary.trim().length > 0
-        ? persistedStyleVariables.colorPrimary.trim()
-        : PrefViewerDefaultStyleVariables.colorPrimary,
-};
+export const PrefViewerStyleVariables = { ...PrefViewerDefaultStyleVariables };
 
-/** Root `<pref-viewer>` host styles. Uses `--pref-viewer-color-primary` so `setStyles({ colorPrimary })` can update mounted instances. */
+/** Root host layout; API appearance tokens are initialized on the private shadow wrapper. */
 export const PrefViewerStyles = `
     :host {
         all: initial;
@@ -150,38 +125,513 @@ export const PrefViewer3DStyles = `
     }
 `;
 
+/** Scoped presentation rules shared by root and standalone viewers; sizes are CSS pixels, independent of DPR. */
+export const ViewerControlsPresentationStyles = `
+    [data-controls-density] {
+        --pref-viewer-controls-toggle-bg-color: rgba(19, 21, 28, 0.6);
+        --pref-viewer-controls-toggle-bg-hover-color: rgba(19, 21, 28, 0.85);
+        --pref-viewer-controls-toggle-border-color: rgba(255, 255, 255, 0.25);
+        --pref-viewer-controls-toggle-border-width: 1px;
+        --pref-viewer-controls-toggle-height: calc(var(--pref-viewer-controls-toggle-icon-size) + var(--pref-viewer-controls-toggle-spacing) * 2 + var(--pref-viewer-controls-toggle-border-width) * 2);
+        --pref-viewer-controls-toggle-radius: 50%;
+        --pref-viewer-controls-toggle-transition-duration: 0.2s;
+        --pref-viewer-controls-edge-spacing: 16px;
+        --pref-viewer-controls-overlay-gap: 12px;
+        --pref-viewer-controls-ar-font-size: 16px;
+        --pref-viewer-controls-ar-width: var(--pref-viewer-controls-toggle-height);
+        --pref-viewer-controls-dialog-spacing: 16px;
+        --pref-viewer-controls-dialog-font-size: ${PrefViewerStyleVariables.fontSize};
+        --pref-viewer-controls-dialog-title-font-size: calc(1.1 * ${PrefViewerStyleVariables.fontSize});
+        --pref-viewer-controls-dialog-section-font-size: calc(1.05 * ${PrefViewerStyleVariables.fontSize});
+        --pref-viewer-controls-dialog-button-font-size: calc(0.95 * ${PrefViewerStyleVariables.fontSize});
+        --pref-viewer-controls-dialog-width: auto;
+        --pref-viewer-controls-dialog-control-height: 0px;
+        --pref-viewer-controls-dialog-option-size: auto;
+        --pref-viewer-controls-panel-bg-color: rgba(19, 21, 28, 0.85);
+    }
+
+    [data-controls-density="compact"] {
+        --pref-viewer-controls-cube-size: 120px;
+        --pref-viewer-controls-toggle-spacing: 10px;
+        --pref-viewer-controls-toggle-icon-size: 24px;
+        --pref-viewer-controls-button-size: 32px;
+        --pref-viewer-controls-icon-size: 24px;
+        --pref-viewer-controls-gap: 2px;
+    }
+
+    [data-controls-density="comfortable"] {
+        --pref-viewer-controls-cube-size: 140px;
+        --pref-viewer-controls-toggle-spacing: 9px;
+        --pref-viewer-controls-toggle-icon-size: 28px;
+        --pref-viewer-controls-button-size: 40px;
+        --pref-viewer-controls-icon-size: 28px;
+        --pref-viewer-controls-gap: 4px;
+        --pref-viewer-controls-menu-font-size-large: 18px;
+        --pref-viewer-controls-menu-font-size-medium: 16px;
+        --pref-viewer-controls-menu-font-size-small: 14px;
+        --pref-viewer-controls-menu-slider-thumb-size: 28px;
+        --pref-viewer-controls-dialog-font-size: 16px;
+        --pref-viewer-controls-dialog-title-font-size: 18px;
+        --pref-viewer-controls-dialog-section-font-size: 16px;
+        --pref-viewer-controls-dialog-button-font-size: 16px;
+        --pref-viewer-controls-dialog-width: 480px;
+        --pref-viewer-controls-dialog-control-height: 48px;
+        --pref-viewer-controls-dialog-option-size: 20px;
+    }
+
+    [data-controls-density] .menu-close {
+        display: none;
+    }
+
+    :is([data-controls-density="comfortable"], [data-controls-touch="true"]) pref-viewer-menu-3d>.menu-wrapper>.menu-toggle {
+        opacity: 1;
+        transform: none;
+        pointer-events: auto;
+    }
+
+    [data-controls-density="comfortable"] .pref-viewer-view-cube {
+        --cube-text-font-size: var(--pref-viewer-view-cube-text-font-size, 10px);
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d {
+        inset: 0;
+        width: auto;
+        height: auto;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d>.menu-wrapper {
+        height: 100%;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d>.menu-wrapper>.menu-toggle {
+        position: absolute;
+        right: 16px;
+        top: var(--menu-top);
+        width: var(--toggle-height);
+        height: var(--toggle-height);
+        box-sizing: border-box;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d>.menu-wrapper>.menu-panel {
+        position: absolute;
+        right: 16px;
+        top: calc(var(--menu-top) + 56px);
+        max-width: calc(100% - 32px);
+        max-height: max(0px, calc(var(--pref-viewer-controls-height) - var(--menu-top) - 72px));
+        overscroll-behavior: contain;
+        box-sizing: border-box;
+    }
+
+    [data-controls-density="comfortable"][data-controls-narrow="true"] pref-viewer-menu-3d>.menu-wrapper>.menu-panel {
+        top: auto;
+        bottom: 16px;
+        left: 16px;
+        right: 16px;
+        width: auto;
+        max-height: max(0px, calc(var(--pref-viewer-controls-height) - 32px));
+    }
+
+    [data-controls-density] pref-viewer-menu-3d[data-controls-menu-side="beside-cube"] {
+        --menu-top: var(--toggle-margin);
+        --menu-side-right: var(--pref-viewer-controls-cube-actual-size, var(--pref-viewer-controls-cube-size));
+        --menu-side-panel-width: max(0px, calc(var(--pref-viewer-controls-width) - var(--menu-side-right) - var(--toggle-margin)));
+
+        left: auto;
+        right: var(--menu-side-right);
+    }
+
+    [data-controls-density] pref-viewer-menu-3d[data-controls-menu-side="beside-cube"]>.menu-wrapper>.menu-panel {
+        max-width: var(--menu-side-panel-width);
+        box-sizing: border-box;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d[data-controls-menu-side="beside-cube"] {
+        inset: 0;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d[data-controls-menu-side="beside-cube"]>.menu-wrapper>.menu-toggle,
+    [data-controls-density="comfortable"] pref-viewer-menu-3d[data-controls-menu-side="beside-cube"]>.menu-wrapper>.menu-panel {
+        left: auto;
+        right: var(--menu-side-right);
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d[data-controls-menu-side="beside-cube"]>.menu-wrapper>.menu-panel {
+        top: calc(var(--menu-top) + 56px);
+        bottom: auto;
+        width: var(--panel-width);
+        max-height: max(0px, calc(var(--pref-viewer-controls-height) - var(--menu-top) - 72px));
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d .menu-header {
+        position: relative;
+        padding-right: 48px;
+    }
+
+    :is([data-controls-density="comfortable"], [data-controls-touch="true"]) pref-viewer-menu-3d .menu-close {
+        display: grid;
+        place-items: center;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 48px;
+        height: 48px;
+        font-size: 28px;
+        color: inherit;
+        background: transparent;
+        border: 1px solid currentColor;
+        border-radius: 8px;
+        cursor: pointer;
+    }
+
+    [data-controls-touch="true"] pref-viewer-menu-3d .menu-header {
+        position: relative;
+        padding-right: 48px;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d .menu-switch-control {
+        min-height: 48px;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d .menu-switch-control input {
+        width: 100%;
+        height: 100%;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d .menu-switch-visual {
+        top: 10px !important;
+        bottom: 10px !important;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d>.menu-wrapper>.menu-panel>:is(.menu-color-picker,.menu-lighting-slider)>input[type="range"] {
+        height: 48px;
+        background-size: 100% 12px;
+        background-repeat: no-repeat;
+        background-position: center;
+        border: none;
+        touch-action: pan-y;
+    }
+
+    [data-controls-density="comfortable"] pref-viewer-menu-3d .lighting-play-button {
+        min-width: 48px;
+        min-height: 48px;
+    }
+
+    [data-controls-density] .xr-button-overlay {
+        bottom: var(--pref-viewer-controls-edge-spacing) !important;
+        right: var(--pref-viewer-controls-edge-spacing) !important;
+    }
+
+    [data-controls-density] :is(button.babylonVRicon, a.babylonVRicon) {
+        width: var(--pref-viewer-controls-ar-width);
+        height: var(--pref-viewer-controls-toggle-height);
+        box-sizing: border-box;
+        margin: 0;
+        padding: var(--pref-viewer-controls-toggle-spacing, 10px);
+        border: var(--pref-viewer-controls-toggle-border-width) solid var(--pref-viewer-controls-toggle-border-color);
+        border-radius: var(--pref-viewer-controls-toggle-radius);
+        background-color: var(--pref-viewer-controls-toggle-bg-color, rgba(19, 21, 28, 0.6));
+        background-origin: content-box;
+        background-size: var(--pref-viewer-controls-toggle-icon-size) auto;
+        font-size: var(--pref-viewer-controls-ar-font-size);
+        transition: background-color var(--pref-viewer-controls-toggle-transition-duration) ease;
+    }
+
+    [data-controls-density] :is(button.babylonVRicon, a.babylonVRicon):hover,
+    [data-controls-density] :is(button.babylonVRicon, a.babylonVRicon):focus-visible {
+        transform: none;
+        background-color: var(--pref-viewer-controls-toggle-bg-hover-color, rgba(19, 21, 28, 0.85));
+    }
+
+    [data-controls-density] .pref-viewer-quick-look {
+        bottom: var(--pref-viewer-controls-edge-spacing);
+        right: var(--pref-viewer-controls-edge-spacing);
+    }
+
+    [data-controls-density] div.pref-viewer-3d.animation-menu {
+        width: min(var(--width), calc(100% - 24px));
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+        bottom: var(--pref-viewer-controls-playback-bottom, var(--pref-viewer-controls-edge-spacing));
+        max-height: max(0px, calc(var(--pref-viewer-controls-height) - var(--pref-viewer-controls-playback-bottom, var(--pref-viewer-controls-edge-spacing)) - var(--pref-viewer-controls-edge-spacing)));
+        overflow: auto;
+        overscroll-behavior: contain;
+        box-sizing: border-box;
+    }
+
+    [data-controls-density="comfortable"] div.pref-viewer-3d.animation-menu {
+        animation: none;
+    }
+
+    [data-controls-density] div.pref-viewer-3d.animation-menu>.animation-menu-buttons {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    [data-controls-density] div.pref-viewer-3d.animation-menu>.animation-menu-buttons>button {
+        flex: 0 0 var(--button-size);
+        width: var(--button-size);
+        height: var(--button-size);
+        box-sizing: border-box;
+    }
+
+    [data-controls-density="comfortable"] div.pref-viewer-3d.animation-menu>.animation-menu-buttons>button>svg {
+        width: 28px;
+        height: 28px;
+    }
+
+    [data-controls-density="comfortable"] div.pref-viewer-3d.animation-menu>.animation-menu-selector>button {
+        min-height: 48px;
+        font-size: 16px;
+        overflow-wrap: anywhere;
+    }
+
+`;
+
+/**
+ * Shared SVG/Canvas ViewCube palette. CSS tokens and renderer defaults originate here.
+ * Static immutable defaults own no graphics resources; host CSS overrides are resolved by each presentation.
+ */
+export class PrefViewerViewCubePalette {
+    /** Base gray for Canvas edge prisms, independent of SVG borders and corner spheres. */
+    static #canvasEdgeColor = "#d5d5da";
+    /** Darker Canvas corner base, with the same subtle blue-channel boost as the edge color. */
+    static #canvasCornerColor = "#c8c6c8";
+    static #darkColors = Object.freeze({
+        fill: "#2f363a",
+        border: "#9ba4a9",
+        text: "#e6e3da",
+        edge: "#56606a",
+        corner: "#6b7886",
+    });
+    static #defaults = Object.freeze({
+        fill: "#eef0f3",
+        border: "#78838f",
+        text: "#29323b",
+        hoverOpacity: 0.5,
+        currentOpacity: 0.15,
+    });
+
+    /** @returns {Readonly<object>} Fresh frozen renderer defaults with independent edge/corner base colors and the default primary tint. */
+    static get colors() {
+        const defaults = PrefViewerViewCubePalette.#defaults;
+        return Object.freeze({ ...defaults, edge: PrefViewerViewCubePalette.#canvasEdgeColor, corner: PrefViewerViewCubePalette.#canvasCornerColor, hover: PrefViewerDefaultStyleVariables.colorPrimary, current: PrefViewerDefaultStyleVariables.colorPrimary });
+    }
+
+    /** @returns {Readonly<object>} Optional immutable dark palette for internal renderer hosts. */
+    static get darkColors() {
+        return PrefViewerViewCubePalette.#darkColors;
+    }
+
+    /** @returns {string} Shared inheritable palette aliases with independent Canvas edge and corner defaults. */
+    static get styles() {
+        const defaults = PrefViewerViewCubePalette.#defaults;
+        return `
+            .pref-viewer-view-cube {
+                --cube-fill-color: var(--pref-viewer-view-cube-fill-color, ${defaults.fill});
+                --cube-border-color: var(--pref-viewer-view-cube-border-color, ${defaults.border});
+                --cube-text-color: var(--pref-viewer-view-cube-text-color, ${defaults.text});
+                --cube-hover-color: var(--pref-viewer-view-cube-hover-color, var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary}));
+                --cube-hover-opacity: var(--pref-viewer-view-cube-hover-opacity, ${defaults.hoverOpacity});
+                --cube-active-color: var(--pref-viewer-view-cube-active-color, var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary}));
+                --cube-active-opacity: var(--pref-viewer-view-cube-active-opacity, ${defaults.currentOpacity});
+            }
+
+            .pref-viewer-view-cube[data-renderer="canvas"] {
+                --cube-edge-color: var(--pref-viewer-view-cube-edge-color, ${PrefViewerViewCubePalette.#canvasEdgeColor});
+                --cube-corner-color: var(--pref-viewer-view-cube-corner-color, ${PrefViewerViewCubePalette.#canvasCornerColor});
+            }
+        `;
+    }
+}
+
+/** Shared label typography for SVG text and Canvas texture painting; owns no DOM or graphics resources. */
+export class PrefViewerViewCubeTypography {
+    /** @returns {Readonly<object>} Typography in SVG reference units, before texture scaling. */
+    static get defaults() {
+        return Object.freeze({ fontFamily: PrefViewerDefaultStyleVariables.fontFamily, fontSize: 9, fontWeight: "600", letterSpacing: 1, textTransform: "uppercase" });
+    }
+
+    /** @returns {string} Shared variables and an invisible computed-style probe for Canvas labels. */
+    static get styles() {
+        const defaults = PrefViewerViewCubeTypography.defaults;
+        return `
+            .pref-viewer-view-cube {
+                --cube-text-font-family: var(--pref-viewer-view-cube-text-font-family, ${PrefViewerStyleVariables.fontFamily});
+                --cube-text-font-size: var(--pref-viewer-view-cube-text-font-size, ${defaults.fontSize}px);
+                --cube-text-font-weight: var(--pref-viewer-view-cube-text-font-weight, ${defaults.fontWeight});
+                --cube-text-letter-spacing: var(--pref-viewer-view-cube-text-letter-spacing, ${defaults.letterSpacing}px);
+                --cube-text-transform: var(--pref-viewer-view-cube-text-transform, ${defaults.textTransform});
+            }
+
+            .pref-viewer-view-cube .pref-viewer-view-cube-label-style {
+                position: absolute;
+                visibility: hidden;
+                pointer-events: none;
+                font-family: var(--cube-text-font-family);
+                font-size: var(--cube-text-font-size);
+                font-weight: var(--cube-text-font-weight);
+                letter-spacing: var(--cube-text-letter-spacing);
+                text-transform: var(--cube-text-transform);
+            }
+        `;
+    }
+}
+
+/** Shared SVG/Canvas CSS sizing; presentation density supplies the requested side. */
+export const PrefViewerViewCubeSizingStyles = `
+    .pref-viewer-view-cube {
+        --cube-size: var(--pref-viewer-controls-cube-size, 120px);
+
+        width: var(--cube-size);
+        height: var(--cube-size);
+    }
+`;
+
+/** Rotation cursor image and hotspot shared by both ViewCube implementations. */
+export const PrefViewerViewCubeCursorStyles = `
+    .pref-viewer-view-cube[data-renderer="svg"],
+    .pref-viewer-view-cube[data-renderer="canvas"] {
+        --cube-rotation-cursor: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22rotate_cube%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2031.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.5%20Build%2064)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22drop-shadow-1%22%20x%3D%220%22%20y%3D%221%22%20width%3D%2234%22%20height%3D%2232%22%20filterUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3CfeOffset%20dx%3D%221%22%20dy%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20result%3D%22blur%22%20stdDeviation%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3CfeFlood%20flood-color%3D%22%23000%22%20flood-opacity%3D%22.25%22%2F%3E%0A%20%20%20%20%20%20%3CfeComposite%20in2%3D%22blur%22%20operator%3D%22in%22%2F%3E%0A%20%20%20%20%20%20%3CfeComposite%20in%3D%22SourceGraphic%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20filter%3D%22url(%23drop-shadow-1)%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16%2C24c-.094%2C0-.182-.026-.257-.071l-6.493-3.746c-.155-.089-.25-.254-.25-.433v-7.491c-.001-.084.018-.169.06-.247h0s0%2C0%2C.001-.001c0%2C0%2C0-.002%2C0-.001l.012-.021s.002-.002.001-.001c.047-.076.111-.135.183-.176l6.493-3.745c.155-.089.345-.089.5%2C0l6.492%2C3.745c.073.041.137.1.184.176h0s0%2C0%2C0%2C.001l.012.021h0s.001%2C0%2C.001%2C0h0c.043.08.063.165.061.249v7.491c0%2C.179-.096.344-.25.433l-6.493%2C3.746C16.182%2C23.974%2C16.094%2C24%2C16%2C24ZM11.97%2C3.499c-4.106%2C0-7.47%2C3.365-7.47%2C7.501h-2.293l2.793%2C2.793%2C2.793-2.793h-2.293c0-3.584%2C2.916-6.5%2C6.5-6.5L11.97%2C3.499ZM20.03%2C28.501c4.106-.001%2C7.47-3.365%2C7.47-7.501h2.293l-2.793-2.793-2.793%2C2.793h2.293c0%2C3.584-2.916%2C6.5-6.5%2C6.5L20.03%2C28.501Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cpolygon%20points%3D%2216.5%2016.289%2016.5%2022.635%2022%2019.461%2022%2013.116%2016.5%2016.289%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%3Cpolygon%20points%3D%2210.501%2012.25%2016%2015.423%2021.499%2012.25%2016%209.077%2010.501%2012.25%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%3Cpolygon%20points%3D%2210%2019.461%2015.5%2022.635%2015.5%2016.289%2010%2013.116%2010%2019.461%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E") 16 16, grabbing;
+    }
+`;
+
+export const PrefViewerViewCubeStyles = `${PrefViewerViewCubePalette.styles}${PrefViewerViewCubeTypography.styles}${PrefViewerViewCubeSizingStyles}${PrefViewerViewCubeCursorStyles}
+    .pref-viewer-view-cube[data-renderer="svg"] {
+        --cube-border-width: 1.3px;
+
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        z-index: 900;
+        pointer-events: none;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"],
+    .pref-viewer-view-cube[data-renderer="svg"] * {
+        -webkit-tap-highlight-color: transparent;
+        -webkit-user-select: none;
+        user-select: none;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"][hidden] {
+        display: none;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] svg {
+        touch-action: none;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        pointer-events: none;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] polygon {
+        stroke-width: var(--cube-border-width);
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] .cube-shell {
+        fill: var(--cube-fill-color);
+        stroke: var(--cube-border-color);
+        pointer-events: none;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] polygon[data-region] {
+        fill: transparent;
+        stroke: transparent;
+        pointer-events: visiblePainted;
+        cursor: pointer;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"][data-dragging="true"],
+    .pref-viewer-view-cube[data-renderer="svg"][data-dragging="true"] svg,
+    .pref-viewer-view-cube[data-renderer="svg"][data-dragging="true"] svg * {
+        cursor: var(--cube-rotation-cursor);
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"][data-locked="true"] polygon {
+        cursor: default;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] polygon[data-current] {
+        fill: var(--cube-active-color);
+        fill-opacity: var(--cube-active-opacity);
+        stroke: transparent;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] polygon[data-hover] {
+        fill: var(--cube-hover-color);
+        fill-opacity: var(--cube-hover-opacity);
+        stroke: transparent;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] .hover-outline {
+        display: none;
+        fill: none;
+        stroke: var(--cube-hover-color);
+        stroke-opacity: 1;
+        stroke-width: var(--cube-border-width);
+        pointer-events: none;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] .hover-outline[data-hover] {
+        display: inline;
+    }
+
+    .pref-viewer-view-cube[data-renderer="svg"] text {
+        -webkit-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        fill: var(--cube-text-color);
+        font-family: var(--cube-text-font-family);
+        font-size: var(--cube-text-font-size);
+        font-weight: var(--cube-text-font-weight);
+        letter-spacing: var(--cube-text-letter-spacing);
+        text-transform: var(--cube-text-transform);
+        text-anchor: middle;
+        dominant-baseline: middle;
+    }
+`;
+
 export const PrefViewerMenu3DStyles = `
     pref-viewer-menu-3d {
         --font-family: ${PrefViewerStyleVariables.fontFamily};
         --font-weight-bold: 600;
         --font-weight-medium: 500;
-        --font-size-large: calc(1.1 * ${PrefViewerStyleVariables.fontSize});
-        --font-size-medium: calc(0.95 * ${PrefViewerStyleVariables.fontSize});
-        --font-size-small: calc(0.75 * ${PrefViewerStyleVariables.fontSize});
+        --font-size-large: var(--pref-viewer-controls-menu-font-size-large, calc(1.1 * ${PrefViewerStyleVariables.fontSize}));
+        --font-size-medium: var(--pref-viewer-controls-menu-font-size-medium, calc(0.95 * ${PrefViewerStyleVariables.fontSize}));
+        --font-size-small: var(--pref-viewer-controls-menu-font-size-small, calc(0.75 * ${PrefViewerStyleVariables.fontSize}));
         --text-color: #ffffff;
         --muted-color: #b2b2b2;
         --accent-color: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
 
         --separator-border: 1px solid rgba(255, 255, 255, 0.1);
         
-        --toggle-margin: 16px;
-        --toggle-bg-color: rgba(19, 21, 28, 0.6);
-        --toggle-bg-hover-color: rgba(19, 21, 28, 0.85);
-        --toggle-border-color: rgba(255, 255, 255, 0.25);
-        --toggle-spacing: 10px;
+        --toggle-margin: var(--pref-viewer-controls-edge-spacing, 16px);
+        --toggle-spacing: var(--pref-viewer-controls-toggle-spacing, 10px);
+        --toggle-icon-size: var(--pref-viewer-controls-toggle-icon-size, 24px);
+        --toggle-bg-color: var(--pref-viewer-controls-toggle-bg-color, rgba(19, 21, 28, 0.6));
+        --toggle-bg-hover-color: var(--pref-viewer-controls-toggle-bg-hover-color, rgba(19, 21, 28, 0.85));
+        --toggle-border-color: var(--pref-viewer-controls-toggle-border-color, rgba(255, 255, 255, 0.25));
+        --toggle-border-width: var(--pref-viewer-controls-toggle-border-width, 1px);
+        --toggle-height: var(--pref-viewer-controls-toggle-height, calc(var(--toggle-icon-size) + var(--toggle-spacing) * 2 + var(--toggle-border-width) * 2));
+        --toggle-radius: var(--pref-viewer-controls-toggle-radius, calc((var(--toggle-icon-size) + var(--toggle-spacing) * 2) / 2));
+        --toggle-transition-duration: var(--pref-viewer-controls-toggle-transition-duration, 0.2s);
         --toggle-icon-color: #ffffff;
-        --toggle-icon-size: 24px;
 
         --button-font-color: #000000;
         --button-font-size: var(--font-size-medium);
         --button-font-weight: 600;
         --button-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
+        --button-feedback-bg-color: rgba(255, 255, 255, 0.15);
+        --button-feedback-border-color: rgba(255, 255, 255, 0.3);
+        --control-feedback-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
         --button-radius: 8px;
 
+        --panel-bg-color: var(--pref-viewer-controls-panel-bg-color, rgba(19, 21, 28, 0.85));
         --panel-width: 300px;
         --panel-spacing: 16px;
         --panel-spacing-large: calc(var(--panel-spacing) * 1.5);
-        --panel-bg-color: rgba(19, 21, 28, 0.85);
         --panel-border-color: rgba(255, 255, 255, 0.25);
         --panel-shadow: 0 16px 32px rgba(0, 0, 0, 0.65);
         --panel-radius: calc(var(--button-radius) + var(--panel-spacing));
@@ -195,15 +645,17 @@ export const PrefViewerMenu3DStyles = `
         --switch-control-width: calc((var(--switch-control-thumb-size) * 2) + (var(--switch-control-bar-spacing) * 2));
         --switch-control-height: calc(var(--switch-control-thumb-size) + (var(--switch-control-bar-spacing) * 2));
 
-        --slider-thumb-size: 18px;
+        --slider-thumb-size: var(--pref-viewer-controls-menu-slider-thumb-size, 18px);
         --slider-thumb-color: #ffffff;
         --slider-thumb-border: 1px solid rgba(0, 0, 0, 0.25);
         --slider-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
         --slider-bar-height: 12px;
         --slider-bar-border: 1px solid rgba(255, 255, 255, 0.5);
 
+        --menu-top: var(--pref-viewer-render-menu-top, var(--toggle-margin));
+
         position: absolute;
-        top: var(--pref-viewer-render-menu-top, var(--toggle-margin));
+        top: var(--menu-top);
         right: var(--toggle-margin);
         z-index: 1200;
         /* The closed panel keeps its place in the flex column (opacity:0, not display:none), so
@@ -218,6 +670,11 @@ export const PrefViewerMenu3DStyles = `
         user-select: none;
     }
 
+    pref-viewer-menu-3d,
+    pref-viewer-menu-3d * {
+        -webkit-tap-highlight-color: transparent;
+    }
+
     pref-viewer-menu-3d>.menu-wrapper {
         display: flex;
         flex-direction: column;
@@ -225,22 +682,22 @@ export const PrefViewerMenu3DStyles = `
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-toggle {
-        padding: var(--toggle-spacing);
-        border-radius: calc((var(--toggle-icon-size) + var(--toggle-spacing) * 2) / 2);
-        border: 1px solid var(--toggle-border-color);
-        background: var(--toggle-bg-color);
+        padding: var(--toggle-spacing, 10px);
+        border-radius: var(--toggle-radius, calc((var(--toggle-icon-size, 24px) + var(--toggle-spacing, 10px) * 2) / 2));
+        border: var(--toggle-border-width, 1px) solid var(--toggle-border-color, rgba(255, 255, 255, 0.25));
+        background: var(--toggle-bg-color, rgba(19, 21, 28, 0.6));
         display: grid;
         place-items: center;
         cursor: pointer;
         opacity: 0;
         transform: translateY(calc(-1 * var(--toggle-margin) / 2));
-        transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
+        transition: opacity var(--toggle-transition-duration, 0.2s) ease, transform var(--toggle-transition-duration, 0.2s) ease, background var(--toggle-transition-duration, 0.2s) ease;
         pointer-events: none;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-toggle>svg {
-        width: var(--toggle-icon-size);
-        height: var(--toggle-icon-size);
+        width: var(--toggle-icon-size, 24px);
+        height: var(--toggle-icon-size, 24px);
         fill: var(--toggle-icon-color);
     }
 
@@ -250,18 +707,18 @@ export const PrefViewerMenu3DStyles = `
         pointer-events: auto;
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-toggle:hover,
+    pref-viewer-menu-3d>.menu-wrapper>.menu-toggle:is(:active, [data-touch-pressed]),
     pref-viewer-menu-3d>.menu-wrapper>.menu-toggle:focus-visible {
-        background: var(--toggle-bg-hover-color);
+        background: var(--toggle-bg-hover-color, rgba(19, 21, 28, 0.85));
         outline: none;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel {
         width: var(--panel-width);
-        max-height: min(70vh, calc(var(--pref-viewer-viewport-height, 100vh) - var(--pref-viewer-render-menu-top, var(--toggle-margin)) - 84px));
+        max-height: min(70vh, calc(var(--pref-viewer-viewport-height, 100vh) - var(--menu-top) - 84px));
         overflow-y: auto;
         border-radius: var(--panel-radius);
-        background: var(--panel-bg-color);
+        background: var(--panel-bg-color, rgba(19, 21, 28, 0.85));
         border: 1px solid var(--panel-border-color);
         box-shadow: var(--panel-shadow);
         padding: 18px 20px 16px;
@@ -577,26 +1034,51 @@ export const PrefViewerMenu3DStyles = `
         cursor: pointer;
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:hover,
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:focus-visible {
-        background: rgba(255, 255, 255, 0.15);
-        border-color: rgba(255, 255, 255, 0.3);
-        outline: none;
-        box-shadow: var(--button-shadow);
-    }
-
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer {
         margin-top: calc(var(--panel-spacing) / 2);
         display: flex;
         flex-direction: column;
         gap: calc(var(--panel-spacing) / 2);
     }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel :is(.lighting-play-button, .menu-close):not(:disabled):is(:active, :focus-visible, [data-touch-pressed]) {
+        background: var(--button-feedback-bg-color);
+        border-color: var(--button-feedback-border-color);
+        box-shadow: var(--button-shadow);
+        outline: none;
+    }
+
+    pref-viewer-menu-3d .menu-switch:not([data-disabled]):has(input:enabled):is(:active, [data-touch-pressed]) .menu-switch-visual,
+    pref-viewer-menu-3d .menu-switch:not([data-disabled]):has(input:enabled) input:focus-visible + .menu-switch-visual,
+    pref-viewer-menu-3d .menu-panel input[type="range"]:enabled:is(:active, :focus-visible, [data-touch-pressed]) {
+        box-shadow: var(--control-feedback-shadow);
+        outline: none;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        pref-viewer-menu-3d>.menu-wrapper>.menu-toggle:hover {
+            background: var(--toggle-bg-hover-color);
+        }
+
+        pref-viewer-menu-3d>.menu-wrapper>.menu-panel :is(.lighting-play-button, .menu-close):not(:disabled):hover {
+            background: var(--button-feedback-bg-color);
+            border-color: var(--button-feedback-border-color);
+            box-shadow: var(--button-shadow);
+        }
+
+        pref-viewer-menu-3d .menu-switch:not([data-disabled]):has(input:enabled):hover .menu-switch-visual,
+        pref-viewer-menu-3d .menu-panel input[type="range"]:enabled:hover {
+            box-shadow: var(--control-feedback-shadow);
+        }
+    }
+
 `;
 
 export const PrefViewer3DAnimationMenuStyles = `
     div.pref-viewer-3d.animation-menu, div.pref-viewer-3d.animation-menu * {
         padding: 0;
         margin: 0;
+        -webkit-tap-highlight-color: transparent;
     }
 
     div.pref-viewer-3d.animation-menu {
@@ -608,10 +1090,12 @@ export const PrefViewer3DAnimationMenuStyles = `
         --color-disabled: #bdbdbd;
         --color-icon: #FFFFFF;
         --color-border: #FFFFFF;
-        --button-size: 32px;
+        --control-focus-outline: 2px solid var(--color-border);
+        --control-focus-offset: 2px;
+        --button-size: var(--pref-viewer-controls-button-size, 32px);
         --icon-size: 24px;
         --button-loop-margin-left: 3px;
-        --button-spacing: 2px;
+        --button-spacing: var(--pref-viewer-controls-gap, 2px);
         --slider-thumb-width: 20px;
         --slider-bar-height: 8px;
         --slider-bar-offset: 10px;
@@ -633,12 +1117,16 @@ export const PrefViewer3DAnimationMenuStyles = `
     }
           
     @keyframes fadeTo085 {
-        from { opacity: 0; }
-        to   { opacity: 0.85; }
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 0.85;
+        }
     }
 
     div.pref-viewer-3d.animation-menu>div.animation-menu-selector {
-        fore
         padding: 0;
         margin: 0;
         display: flex;
@@ -667,18 +1155,10 @@ export const PrefViewer3DAnimationMenuStyles = `
         background: var(--color-active);
     }
 
-    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button.active:hover {
-        background: var(--color-active-hover);
-    }
-
     div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button:not(.active) {
         cursor: pointer;
     }
 
-    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button:not(.active):hover {
-        background: var(--color-enabled-hover);
-    }
-
     div.pref-viewer-3d.animation-menu>div.animation-menu-buttons {
         padding: 0;
         margin: 0;
@@ -708,21 +1188,12 @@ export const PrefViewer3DAnimationMenuStyles = `
         background: var(--color-active);
     }
 
-    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.active:hover {
-        background: var(--color-active-hover);
-    }
-
     div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.enabled {
         background: var(--color-enabled);
         cursor: pointer;
     }
 
-    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.enabled:hover {
-        background: var(--color-enabled-hover);
-    }
-
-    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled,
-    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled:hover {
+    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled {
         background: var(--color-disabled);
     }
 
@@ -766,10 +1237,6 @@ export const PrefViewer3DAnimationMenuStyles = `
         transition: background .2s;
     }
 
-    div.pref-viewer-3d.animation-menu>input[type="range"]::-webkit-slider-thumb:hover {
-        background: var(--color-active-hover);
-    }
-
     div.pref-viewer-3d.animation-menu>input[type="range"]::-moz-range-track {
         height: var(--slider-thumb-width);
         width: var(--slider-thumb-width);
@@ -784,16 +1251,68 @@ export const PrefViewer3DAnimationMenuStyles = `
     div.pref-viewer-3d.animation-menu>input[type="range"]::-moz-range-track:hover {
         background: var(--color-active-hover);
     }
+    div.pref-viewer-3d.animation-menu>:is(.animation-menu-buttons, .animation-menu-selector)>button:not(.disabled):not(:disabled).active:is(:active, :focus-visible, [data-touch-pressed]) {
+        background: var(--color-active-hover);
+    }
+
+    div.pref-viewer-3d.animation-menu>:is(.animation-menu-buttons, .animation-menu-selector)>button:not(.disabled):not(:disabled):not(.active):is(:active, :focus-visible, [data-touch-pressed]) {
+        background: var(--color-enabled-hover);
+    }
+
+    div.pref-viewer-3d.animation-menu :is(button, input[type="range"]):enabled:focus-visible {
+        outline: var(--control-focus-outline);
+        outline-offset: var(--control-focus-offset);
+    }
+
+    div.pref-viewer-3d.animation-menu>input[type="range"]:enabled:is(:active, :focus-visible, [data-touch-pressed])::-webkit-slider-thumb {
+        background: var(--color-active-hover);
+    }
+
+    div.pref-viewer-3d.animation-menu>input[type="range"]:enabled:is(:active, :focus-visible, [data-touch-pressed])::-moz-range-thumb {
+        background: var(--color-active-hover);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        div.pref-viewer-3d.animation-menu>:is(.animation-menu-buttons, .animation-menu-selector)>button:not(.disabled):not(:disabled).active:hover {
+            background: var(--color-active-hover);
+        }
+
+        div.pref-viewer-3d.animation-menu>:is(.animation-menu-buttons, .animation-menu-selector)>button:not(.disabled):not(:disabled):not(.active):hover {
+            background: var(--color-enabled-hover);
+        }
+
+        div.pref-viewer-3d.animation-menu>input[type="range"]:enabled:hover::-webkit-slider-thumb {
+            background: var(--color-active-hover);
+        }
+
+        div.pref-viewer-3d.animation-menu>input[type="range"]:enabled:hover::-moz-range-thumb {
+            background: var(--color-active-hover);
+        }
+    }
+
 `;
 
 export const PrefViewerDialogStyles = `
     pref-viewer-dialog {
         --color-primary: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
-        --dialog-general-space: 16px;
+        --dialog-general-space: var(--pref-viewer-controls-dialog-spacing, 16px);
+        --dialog-font-size: var(--pref-viewer-controls-dialog-font-size, ${PrefViewerStyleVariables.fontSize});
+        --dialog-title-font-size: var(--pref-viewer-controls-dialog-title-font-size, calc(1.1 * ${PrefViewerStyleVariables.fontSize}));
+        --dialog-section-font-size: var(--pref-viewer-controls-dialog-section-font-size, calc(1.05 * ${PrefViewerStyleVariables.fontSize}));
+        --dialog-button-font-size: var(--pref-viewer-controls-dialog-button-font-size, calc(0.95 * ${PrefViewerStyleVariables.fontSize}));
+        --dialog-width: var(--pref-viewer-controls-dialog-width, auto);
+        --dialog-min-width: 320px;
+        --dialog-control-height: var(--pref-viewer-controls-dialog-control-height, 0px);
+        --dialog-option-size: var(--pref-viewer-controls-dialog-option-size, auto);
+        --dialog-option-gap: 8px;
         --dialog-bg-color: #ffffff;
         --dialog-backdrop-color: rgba(0, 0, 0, 0.25);
         --dialog-border-color: #e7e7e7;
         --dialog-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+        --dialog-control-feedback-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+        --dialog-control-feedback-shadow: 0 0 0 3px var(--dialog-control-feedback-color);
+        --dialog-control-feedback-outline: 3px solid var(--dialog-control-feedback-color);
+        --dialog-control-feedback-offset: 1px;
         --button-default-bg-color: #bbbbbb;
         --button-default-bg-color-hover: color-mix(in oklab, var(--button-default-bg-color), black 10%);
         --button-primary-bg-color: var(--color-primary);
@@ -804,12 +1323,18 @@ export const PrefViewerDialogStyles = `
         --dialog-border-radius: calc(var(--button-border-radius) + var(--dialog-general-space));
     }
 
-    pref-viewer-dialog:not {
+    pref-viewer-dialog,
+    pref-viewer-dialog * {
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    pref-viewer-dialog:not([open]) {
         display: none;
     }
 
     pref-viewer-dialog[open] {
         font-family: ${PrefViewerStyleVariables.fontFamily};
+        font-size: var(--dialog-font-size);
         grid-row: 1;
         grid-column: 1;
         overflow: hidden;
@@ -835,10 +1360,14 @@ export const PrefViewerDialogStyles = `
         border-radius: var(--dialog-border-radius);
         box-shadow: var(--dialog-box-shadow);
         padding: 0;
-        min-width: 320px;
-        max-width: 90%;
-        max-height: 90%;
+        box-sizing: border-box;
+        width: var(--dialog-width);
+        min-width: min(var(--dialog-min-width), calc(100% - var(--dialog-general-space) * 2));
+        max-width: min(90%, calc(100% - var(--dialog-general-space) * 2));
+        max-height: max(0px, calc(100% - var(--dialog-general-space) * 2));
         overflow: auto;
+        overscroll-behavior: contain;
+        overflow-wrap: anywhere;
     }
 
     pref-viewer-dialog .dialog-header {
@@ -849,7 +1378,7 @@ export const PrefViewerDialogStyles = `
     pref-viewer-dialog .dialog-header h3 {
         margin: 0;
         font-weight: 500;
-        font-size: calc(1.1 * ${PrefViewerStyleVariables.fontSize});
+        font-size: var(--dialog-title-font-size);
     }
 
     pref-viewer-dialog .dialog-content {
@@ -859,20 +1388,23 @@ export const PrefViewerDialogStyles = `
     pref-viewer-dialog .dialog-content h4 {
         margin: 0;
         font-weight: 500;
-        font-size: calc(1.05 * ${PrefViewerStyleVariables.fontSize});
+        font-size: var(--dialog-section-font-size);
     }
 
     pref-viewer-dialog .dialog-footer {
         border-top: 1px solid var(--dialog-border-color);
         padding: var(--dialog-general-space);
         display: flex;
+        flex-wrap: wrap;
         gap: var(--dialog-general-space);
         justify-content: stretch;
     }
 
     pref-viewer-dialog .dialog-footer button {
-        width: 100%;
-        font-size: calc(0.95 * ${PrefViewerStyleVariables.fontSize});
+        flex: 1 1 100px;
+        min-height: var(--dialog-control-height);
+        font-family: inherit;
+        font-size: var(--dialog-button-font-size);
         font-weight: 600;
         padding: var(--button-padding-vertical) var(--button-padding-horizontal);
         border-radius: var(--button-border-radius);
@@ -886,11 +1418,83 @@ export const PrefViewerDialogStyles = `
         background: var(--button-primary-bg-color);
     }
 
-    pref-viewer-dialog .dialog-footer button:hover {
+    pref-viewer-dialog .dialog-content label {
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--dialog-option-gap);
+        min-height: var(--dialog-control-height);
+        max-width: 100%;
+    }
+
+    pref-viewer-dialog .dialog-content :is(button, input, select, textarea) {
+        font: inherit;
+        box-sizing: border-box;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    pref-viewer-dialog .dialog-content :is(button, select, input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])) {
+        min-height: var(--dialog-control-height);
+    }
+
+    pref-viewer-dialog .dialog-content :is(input[type="radio"], input[type="checkbox"]) {
+        width: var(--dialog-option-size);
+        height: var(--dialog-option-size);
+        flex-shrink: 0;
+    }
+
+    pref-viewer-dialog .download-dialog-form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dialog-general-space);
+    }
+
+    pref-viewer-dialog .download-dialog-options {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--dialog-option-gap) var(--dialog-general-space);
+    }
+    pref-viewer-dialog :is(.dialog-content, .dialog-footer) button:enabled:is(:active, :focus-visible, [data-touch-pressed]) {
         background: var(--button-default-bg-color-hover);
+        box-shadow: var(--dialog-control-feedback-shadow);
     }
 
-    pref-viewer-dialog .dialog-footer button.primary:hover {
+    pref-viewer-dialog :is(.dialog-content, .dialog-footer) button:enabled.primary:is(:active, :focus-visible, [data-touch-pressed]) {
         background: var(--button-primary-bg-color-hover);
     }
+
+    pref-viewer-dialog[data-keyboard-navigation] :is(input:not([type="hidden"]), select, textarea):enabled:focus,
+    pref-viewer-dialog :is(input:not([type="hidden"]), select, textarea):enabled:is(:active, :focus-visible, [data-touch-pressed]),
+    pref-viewer-dialog a[href]:not([aria-disabled="true"]):is(:active, :focus-visible, [data-touch-pressed]) {
+        outline: var(--dialog-control-feedback-outline);
+        outline-offset: var(--dialog-control-feedback-offset);
+    }
+
+    pref-viewer-dialog :is(input[type="radio"], input[type="checkbox"]) {
+        accent-color: var(--color-primary);
+    }
+
+    pref-viewer-dialog input[type="radio"] {
+        border-radius: 50%;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        pref-viewer-dialog :is(.dialog-content, .dialog-footer) button:enabled:hover {
+            background: var(--button-default-bg-color-hover);
+            box-shadow: var(--dialog-control-feedback-shadow);
+        }
+
+        pref-viewer-dialog :is(.dialog-content, .dialog-footer) button:enabled.primary:hover {
+            background: var(--button-primary-bg-color-hover);
+        }
+
+        pref-viewer-dialog :is(input:not([type="hidden"]), select, textarea):enabled:hover,
+        pref-viewer-dialog label:hover :is(input[type="radio"], input[type="checkbox"]):enabled,
+        pref-viewer-dialog a[href]:not([aria-disabled="true"]):hover {
+            outline: var(--dialog-control-feedback-outline);
+            outline-offset: var(--dialog-control-feedback-offset);
+        }
+    }
+
 `;