Skip to content

Commit a73a99a

Browse files
mihar-22mihar-22
committed
fix(player): improve menu focus and scroll management
1 parent 2cc150b commit a73a99a

17 files changed

Lines changed: 165 additions & 135 deletions

File tree

‎packages/react/mangle.json‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -808,5 +808,20 @@
808808
"_watchSource": "co",
809809
"_watchStep": "Zn",
810810
"_watchToggle": "io",
811-
"_watchUpdates": "eo"
811+
"_watchUpdates": "eo",
812+
"_createDOMEvent": "lo",
813+
"_cueTracker": "po",
814+
"_currentTrack": "mo",
815+
"_dispatchDASHEvent": "uo",
816+
"_error": "qo",
817+
"_onEndPrecisionChange": "so",
818+
"_onFragmentLoadComplete": "wo",
819+
"_onFragmentLoadStart": "vo",
820+
"_onManifestLoaded": "xo",
821+
"_onTextFragmentLoaded": "zo",
822+
"_onTextTracksAdded": "yo",
823+
"_onUserAudioChange": "oo",
824+
"_onUserQualityChange": "no",
825+
"_parseContent": "to",
826+
"_switchAutoBitrate": "ro"
812827
}

‎packages/react/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,15 @@
4646
"esbuild": "^0.19.4",
4747
"fs-extra": "^11.0.0",
4848
"maverick.js": "0.41.5",
49-
"media-icons": "^1.1.2",
49+
"media-icons": "^1.1.3",
5050
"react": "^18.0.0",
5151
"react-dom": "^18.0.0",
5252
"remotion": "^4.0.76",
5353
"rimraf": "^3.0.0",
5454
"rollup": "^4.0.0",
5555
"rollup-plugin-dts": "^6.0.0",
5656
"rollup-plugin-esbuild": "^6.1.0",
57+
"type-fest": "^3.8.0",
5758
"typescript": "^5.3.0",
5859
"vidstack": "workspace:*",
5960
"vite": "^5.0.0"

‎packages/react/src/components/layouts/default/icons.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
import * as React from 'react';
22

3+
import accessibilityIconPaths from 'media-icons/dist/icons/accessibility.js';
34
import airPlayIconPaths from 'media-icons/dist/icons/airplay.js';
45
import arrowDownIconPaths from 'media-icons/dist/icons/arrow-down.js';
56
import arrowLeftIconPaths from 'media-icons/dist/icons/arrow-left.js';
67
import arrowUpIconPaths from 'media-icons/dist/icons/arrow-up.js';
78
import chaptersIconPaths from 'media-icons/dist/icons/chapters.js';
9+
import checkIconPaths from 'media-icons/dist/icons/check.js';
810
import arrowRightIconPaths from 'media-icons/dist/icons/chevron-right.js';
911
import googleCastIconPaths from 'media-icons/dist/icons/chromecast.js';
1012
import ccOnIconPaths from 'media-icons/dist/icons/closed-captions-on.js';
1113
import ccIconPaths from 'media-icons/dist/icons/closed-captions.js';
1214
import downloadIconPaths from 'media-icons/dist/icons/download.js';
15+
import eyeIconPaths from 'media-icons/dist/icons/eye.js';
1316
import fastBackwardIconPaths from 'media-icons/dist/icons/fast-backward.js';
1417
import fastForwardIconPaths from 'media-icons/dist/icons/fast-forward.js';
1518
import exitFullscreenIconPaths from 'media-icons/dist/icons/fullscreen-exit.js';
1619
import enterFullscreenIconPaths from 'media-icons/dist/icons/fullscreen.js';
1720
import musicIconPaths from 'media-icons/dist/icons/music.js';
1821
import muteIconPaths from 'media-icons/dist/icons/mute.js';
22+
import noEyeIconPaths from 'media-icons/dist/icons/no-eye.js';
1923
import pauseIconPaths from 'media-icons/dist/icons/pause.js';
2024
import exitPIPIconPaths from 'media-icons/dist/icons/picture-in-picture-exit.js';
2125
import enterPIPIconPaths from 'media-icons/dist/icons/picture-in-picture.js';
@@ -76,9 +80,7 @@ export const defaultLayoutIcons: DefaultLayoutIcons = {
7680
Default: createIcon(downloadIconPaths),
7781
},
7882
Menu: {
79-
Accessibility: createIcon(
80-
`<path d="M16 8c-.733 0-1.36-.261-1.883-.783a2.573 2.573 0 0 1-.784-1.884c0-.733.262-1.36.784-1.883A2.575 2.575 0 0 1 16 2.667a2.57 2.57 0 0 1 1.884.784c.523.523.784 1.15.783 1.883 0 .733-.261 1.361-.783 1.884A2.561 2.561 0 0 1 16 8Zm-4 20V12H5.333c-.377 0-.694-.128-.949-.384a1.296 1.296 0 0 1-.384-.95c0-.377.128-.694.384-.949s.572-.383.95-.384h21.333c.377 0 .694.128.95.384s.384.573.383.95c0 .377-.128.694-.384.95a1.285 1.285 0 0 1-.95.383H20v16c0 .378-.128.695-.384.95a1.285 1.285 0 0 1-.95.383c-.377 0-.694-.128-.949-.384a1.297 1.297 0 0 1-.384-.95v-6.666h-2.666V28c0 .378-.128.695-.384.95a1.285 1.285 0 0 1-.95.383c-.377 0-.694-.128-.949-.384A1.297 1.297 0 0 1 12 28Z" fill="currentColor"/>`,
81-
),
83+
Accessibility: createIcon(accessibilityIconPaths),
8284
ArrowLeft: createIcon(arrowLeftIconPaths),
8385
ArrowRight: createIcon(arrowRightIconPaths),
8486
Audio: createIcon(musicIconPaths),
@@ -92,21 +94,11 @@ export const defaultLayoutIcons: DefaultLayoutIcons = {
9294
SpeedDown: createIcon(fastBackwardIconPaths),
9395
QualityUp: createIcon(arrowUpIconPaths),
9496
QualityDown: createIcon(arrowDownIconPaths),
95-
FontSizeUp: createIcon(
96-
`<path d="M6.82634 18.6666L9.99967 10.2266L13.1597 18.6666M8.66634 6.66663L1.33301 25.3333H4.33301L5.82634 21.3333H14.1597L15.6663 25.3333H18.6663L11.333 6.66663H8.66634ZM23.9997 9.33329L17.333 16.0933L19.213 18L22.6663 14.5333V22.6666H25.333V14.5333L28.7863 18L30.6663 16.0933L23.9997 9.33329Z" fill="currentColor"/>`,
97-
),
98-
FontSizeDown: createIcon(
99-
`<path d="M6.82634 18.6666L9.99967 10.2266L13.1597 18.6666M8.66634 6.66663L1.33301 25.3333H4.33301L5.82634 21.3333H14.1597L15.6663 25.3333H18.6663L11.333 6.66663H8.66634ZM23.9997 22.6666L30.6663 15.9066L28.7863 14L25.333 17.4666V9.33329H22.6663V17.4666L19.213 14L17.333 15.9066L23.9997 22.6666Z" fill="currentColor"/>`,
100-
),
101-
OpacityUp: createIcon(
102-
`<path d="M12.3752 16C12.3752 16.9283 12.7439 17.8185 13.4003 18.4749C14.0567 19.1313 14.9469 19.5 15.8752 19.5C16.8034 19.5 17.6937 19.1313 18.3501 18.4749C19.0064 17.8185 19.3752 16.9283 19.3752 16C19.3752 15.0717 19.0064 14.1815 18.3501 13.5251C17.6937 12.8687 16.8034 12.5 15.8752 12.5C14.9469 12.5 14.0567 12.8687 13.4003 13.5251C12.7439 14.1815 12.3752 15.0717 12.3752 16ZM29.4439 15.1938C26.4814 8.95313 22.0033 5.8125 16.0002 5.8125C9.99393 5.8125 5.51893 8.95312 2.55643 15.1969C2.4376 15.4485 2.37598 15.7233 2.37598 16.0016C2.37598 16.2798 2.4376 16.5546 2.55643 16.8062C5.51893 23.0469 9.99706 26.1875 16.0002 26.1875C22.0064 26.1875 26.4814 23.0469 29.4439 16.8031C29.6846 16.2969 29.6846 15.7094 29.4439 15.1938ZM15.8752 21.5C12.8377 21.5 10.3752 19.0375 10.3752 16C10.3752 12.9625 12.8377 10.5 15.8752 10.5C18.9127 10.5 21.3752 12.9625 21.3752 16C21.3752 19.0375 18.9127 21.5 15.8752 21.5Z" fill="currentColor"/>`,
103-
),
104-
OpacityDown: createIcon(
105-
`<path d="M15.8752 19.5C16.8034 19.5 17.6937 19.1313 18.3501 18.4749C19.0064 17.8185 19.3752 16.9283 19.3752 16C19.3752 15.8975 19.3705 15.7959 19.3617 15.6956L15.5708 19.4866C15.6711 19.4953 15.7724 19.5 15.8752 19.5ZM27.4602 5.17376L26.1252 3.84001C26.0783 3.79316 26.0147 3.76685 25.9485 3.76685C25.8822 3.76685 25.8186 3.79316 25.7717 3.84001L22.3555 7.2572C20.4709 6.29407 18.3525 5.81251 16.0002 5.81251C9.99393 5.81251 5.51268 8.94064 2.55643 15.1969C2.4376 15.4485 2.37598 15.7233 2.37598 16.0016C2.37598 16.2798 2.4376 16.5546 2.55643 16.8063C3.73768 19.2944 5.16008 21.2887 6.82362 22.7891L3.51768 26.0938C3.47083 26.1406 3.44451 26.2042 3.44451 26.2705C3.44451 26.3368 3.47083 26.4003 3.51768 26.4472L4.85174 27.7813C4.89862 27.8281 4.96219 27.8544 5.02846 27.8544C5.09474 27.8544 5.1583 27.8281 5.20518 27.7813L27.4602 5.52751C27.4834 5.50429 27.5019 5.47672 27.5144 5.44637C27.527 5.41602 27.5335 5.38349 27.5335 5.35064C27.5335 5.31778 27.527 5.28525 27.5144 5.2549C27.5019 5.22455 27.4834 5.19698 27.4602 5.17376ZM10.3752 16C10.3751 15.05 10.6211 14.1162 11.0891 13.2896C11.5572 12.4629 12.2314 11.7716 13.0461 11.2829C13.8608 10.7943 14.7881 10.525 15.7378 10.5012C16.6875 10.4775 17.6271 10.7002 18.4652 11.1475L16.9458 12.6669C16.3331 12.4707 15.6781 12.4471 15.0528 12.5986C14.4275 12.7501 13.856 13.071 13.4011 13.5259C12.9461 13.9809 12.6253 14.5523 12.4738 15.1776C12.3222 15.8029 12.3459 16.4579 12.5421 17.0706L11.0227 18.59C10.5963 17.7934 10.3739 16.9036 10.3752 16Z" fill="currentColor"/><path d="M29.4441 15.1938C28.3441 12.8771 27.0348 10.9881 25.5163 9.52661L21.0119 14.0313C21.3916 15.0238 21.4757 16.1051 21.2542 17.1444C21.0327 18.1838 20.5149 19.1367 19.7634 19.8882C19.012 20.6396 18.0591 21.1574 17.0197 21.3789C15.9804 21.6005 14.8991 21.5163 13.9066 21.1366L10.0859 24.9572C11.8584 25.7774 13.8299 26.1875 16.0003 26.1875C22.0066 26.1875 26.4878 23.0594 29.4441 16.8032C29.5629 16.5516 29.6245 16.2768 29.6245 15.9985C29.6245 15.7202 29.5629 15.4454 29.4441 15.1938Z" fill="currentColor"/>`,
106-
),
107-
RadioCheck: createIcon(
108-
`<path d="M26.8838 8.98969L25.0856 7.12371C25.0141 7.04124 24.9018 7 24.7996 7C24.6872 7 24.585 7.04124 24.5135 7.12371L12.0494 19.7938L7.51326 15.2165C7.43153 15.134 7.32936 15.0928 7.2272 15.0928C7.12503 15.0928 7.02287 15.134 6.94113 15.2165L5.1226 17.0515C4.95913 17.2165 4.95913 17.4742 5.1226 17.6392L10.8438 23.4124C11.2116 23.7835 11.6612 24 12.0392 24C12.5806 24 13.0506 23.5979 13.2243 23.433H13.2345L26.894 9.57732C27.037 9.40206 27.037 9.14433 26.8838 8.98969Z" fill="currentColor"/>`,
109-
),
97+
FontSizeUp: createIcon(arrowUpIconPaths),
98+
FontSizeDown: createIcon(arrowDownIconPaths),
99+
OpacityUp: createIcon(eyeIconPaths),
100+
OpacityDown: createIcon(noEyeIconPaths),
101+
RadioCheck: createIcon(checkIconPaths),
110102
},
111103
KeyboardDisplay: {
112104
Play: createIcon(playIconPaths),

‎packages/react/src/components/layouts/default/ui/menus/audio-menu.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@ function DefaultAudioTracksMenu() {
147147
onSelect={select}
148148
key={value}
149149
>
150-
<div className="vds-radio-check" />
151150
<Icons.Menu.RadioCheck className="vds-icon" />
152151
<span className="vds-radio-label">{label}</span>
153152
</Menu.Radio>

‎packages/react/src/components/layouts/default/ui/menus/chapters-menu.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22

33
import { useSignal } from 'maverick.js/react';
4+
import { flushSync } from 'react-dom';
45

56
import { useChapterOptions } from '../../../../../hooks/options/use-chapter-options';
67
import { useMediaState } from '../../../../../hooks/use-media-state';
@@ -37,7 +38,9 @@ function DefaultChaptersMenu({ tooltip, placement, portalClass }: DefaultMediaMe
3738
if (disabled) return null;
3839

3940
function onOpen() {
40-
setIsOpen(true);
41+
flushSync(() => {
42+
setIsOpen(true);
43+
});
4144
}
4245

4346
function onClose() {

‎packages/react/src/components/layouts/default/ui/menus/settings-menu.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react';
22

3+
import { flushSync } from 'react-dom';
4+
35
import { useMediaState } from '../../../../../hooks/use-media-state';
46
import * as Menu from '../../../../ui/menu';
57
import type * as Tooltip from '../../../../ui/tooltip';
@@ -33,7 +35,9 @@ function DefaultSettingsMenu({ tooltip, placement, portalClass, slots }: Default
3335
[isOpen, setIsOpen] = React.useState(false);
3436

3537
function onOpen() {
36-
setIsOpen(true);
38+
flushSync(() => {
39+
setIsOpen(true);
40+
});
3741
}
3842

3943
function onClose() {

‎packages/vidstack/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"analyze": "maverick analyze \"src/**/*.ts\"",
3232
"dev": "pnpm clean && pnpm build:types && pnpm watch",
3333
"build": "rollup -c",
34+
"build:css": "node ./rollup.config.js --config-css",
3435
"build:cdn": "rimraf dist-cdn && rollup -c --config-cdn",
3536
"build:plugins": "rollup -c --config-plugins",
3637
"build:types": "tsc -p tsconfig.build.json",
@@ -71,7 +72,7 @@
7172
"just-throttle": "^4.2.0",
7273
"lit-html": "^2.7.4",
7374
"maverick.js": "0.41.5",
74-
"media-icons": "^1.1.2",
75+
"media-icons": "^1.1.3",
7576
"postcss": "^8.4.0",
7677
"rimraf": "^3.0.0",
7778
"rollup": "^4.0.0",

‎packages/vidstack/player/styles/default/layouts/audio.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@
387387
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
388388
*/
389389

390-
:where(.vds-audio-layout .vds-menu-items:not([data-submenu])) {
390+
:where(.vds-audio-layout .vds-menu-items[data-root]) {
391391
max-height: var(--audio-menu-max-height, 320px);
392392
}
393393

‎packages/vidstack/player/styles/default/menus.css‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,45 +5,45 @@
55
*/
66

77
:where(.vds-menu-items) {
8-
--color-inverse: white;
9-
--color-gray-50: rgb(245 245 245 / 0.1);
10-
--color-gray-100: rgb(245 245 245 / 0.45);
11-
--color-gray-200: rgb(10 10 10 / 0.6);
12-
--color-gray-300: rgb(27 27 27);
13-
--color-gray-400: rgb(10 10 10);
8+
--color-inverse: var(--media-menu-color-inverse, white);
9+
--color-gray-50: var(--media-menu-color-gray-50, rgb(245 245 245 / 0.1));
10+
--color-gray-100: var(--media-menu-color-gray-100, rgb(245 245 245 / 0.45));
11+
--color-gray-200: var(--media-menu-color-gray-200, rgb(10 10 10 / 0.6));
12+
--color-gray-300: var(--media-menu-color-gray-300, rgb(27 27 27));
13+
--color-gray-400: var(--media-menu-color-gray-400, rgb(10 10 10));
1414

1515
--text-color: var(--media-menu-text-color, #f5f5f5);
16-
--text-secondary-color: var(--media-menu-text-color, #8a8a8a);
16+
--text-secondary-color: var(--media-menu-text-secondary-color, #8a8a8a);
1717

1818
--root-border: var(--media-menu-border, 1px solid rgb(255 255 255 / 0.1));
1919
}
2020

2121
@media (prefers-color-scheme: light) {
2222
:where(.vds-menu-items) {
23-
--color-inverse: black;
24-
--color-gray-50: rgb(80 80 80 / 0.15);
25-
--color-gray-100: rgb(80 80 80 / 0.45);
26-
--color-gray-200: rgb(235 235 235 / 0.6);
27-
--color-gray-300: rgb(238 238 238);
28-
--color-gray-400: rgb(250 250 250);
23+
--color-inverse: var(--media-menu-color-inverse, black);
24+
--color-gray-50: var(--media-menu-color-gray-50, rgb(80 80 80 / 0.15));
25+
--color-gray-100: var(--media-menu-color-gray-100, rgb(80 80 80 / 0.45));
26+
--color-gray-200: var(--media-menu-color-gray-200, rgb(235 235 235 / 0.6));
27+
--color-gray-300: var(--media-menu-color-gray-300, rgb(238 238 238));
28+
--color-gray-400: var(--media-menu-color-gray-400, rgb(250 250 250));
2929

3030
--text-color: var(--media-menu-text-color, #1a1a1a);
31-
--text-secondary-color: var(--media-menu-text-color, #6b6b6b);
31+
--text-secondary-color: var(--media-menu-text-secondary-color, #6b6b6b);
3232

3333
--root-border: var(--media-menu-border, 1px solid rgb(10 10 10 / 0.1));
3434
}
3535
}
3636

3737
:where(.light .vds-menu-items) {
38-
--color-inverse: black;
39-
--color-gray-50: rgb(80 80 80 / 0.15);
40-
--color-gray-100: rgb(80 80 80 / 0.45);
41-
--color-gray-200: rgb(235 235 235 / 0.6);
42-
--color-gray-300: rgb(238 238 238);
43-
--color-gray-400: rgb(250 250 250);
38+
--color-inverse: var(--media-menu-color-inverse, black);
39+
--color-gray-50: var(--media-menu-color-gray-50, rgb(80 80 80 / 0.15));
40+
--color-gray-100: var(--media-menu-color-gray-100, rgb(80 80 80 / 0.45));
41+
--color-gray-200: var(--media-menu-color-gray-200, rgb(235 235 235 / 0.6));
42+
--color-gray-300: var(--media-menu-color-gray-300, rgb(238 238 238));
43+
--color-gray-400: var(--media-menu-color-gray-400, rgb(250 250 250));
4444

4545
--text-color: var(--media-menu-text-color, #1a1a1a);
46-
--text-secondary-color: var(--media-menu-text-color, #6b6b6b);
46+
--text-secondary-color: var(--media-menu-text-secondary-color, #6b6b6b);
4747

4848
--root-border: var(--media-menu-border, 1px solid rgb(10 10 10 / 0.1));
4949
}
@@ -72,8 +72,6 @@
7272
--chapter-active-bg: var(--media-chapters-item-active-bg, var(--color-gray-50));
7373
--chapter-active-border-left: var(--media-chapters-item-active-border-left);
7474

75-
--chapter-thumbnail-border: var(--media-chapters-thumbnail-border, 0);
76-
7775
--chapter-progress-bg: var(--media-chapters-progress-bg, var(--color-inverse));
7876

7977
--chapter-time-font-size: var(--media-chapters-time-font-size, 12px);
@@ -109,7 +107,7 @@
109107
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
110108
*/
111109

112-
:where(.vds-menu:not([data-submenu]) media-menu:not([data-submenu])) {
110+
:where(.vds-menu[data-root] media-menu[data-root]) {
113111
display: contents;
114112
}
115113

@@ -119,7 +117,7 @@
119117
font-weight: var(--font-weight);
120118
}
121119

122-
:where(.vds-menu[data-disabled]:not([data-submenu])) {
120+
:where(.vds-menu[data-disabled][data-root]) {
123121
display: none;
124122
}
125123

@@ -209,7 +207,7 @@
209207
}
210208

211209
:where(.vds-menu-button[aria-expanded='true'] .vds-rotate-icon) {
212-
transform: rotate(var(--media-menu-item-icon-rotate-deg, 90deg));
210+
transform: rotate(var(--media-menu-icon-rotate-deg, 90deg));
213211
transition: transform 0.2s ease-in;
214212
}
215213

@@ -247,7 +245,7 @@
247245
}
248246
}
249247

250-
:where(.vds-menu-items:not([data-submenu])) {
248+
:where(.vds-menu-items[data-root]) {
251249
padding: var(--root-padding);
252250
background-color: var(--root-bg);
253251
border-radius: var(--root-border-radius);
@@ -267,15 +265,15 @@
267265
);
268266
}
269267

270-
.vds-menu-items:not([data-submenu]) {
268+
.vds-menu-items[data-root] {
271269
border: var(--root-border);
272270
}
273271

274-
:where([data-view-type='video']) :where(.vds-menu-items:not([data-submenu])) {
272+
:where([data-view-type='video']) :where(.vds-menu-items[data-root]) {
275273
max-height: var(--media-menu-video-max-height, calc(var(--player-height) * 0.7));
276274
}
277275

278-
:where(.vds-menu-items[data-resizing]) {
276+
:where(.vds-menu-items[data-transition='height']) {
279277
--scrollbar-thumb-bg: rgba(0, 0, 0, 0);
280278
pointer-events: none;
281279
overflow: hidden;
@@ -293,21 +291,21 @@
293291
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
294292
*/
295293

296-
:where(.vds-menu-items:not([data-submenu])) {
294+
:where(.vds-menu-items[data-root]) {
297295
--enter-transform: translateY(0px);
298296
--exit-transform: translateY(12px);
299297
}
300298

301299
/* Mobile Popup */
302-
:where(.vds-menu-items:not([data-submenu]):not([data-placement])) {
300+
:where(.vds-menu-items[data-root]:not([data-placement])) {
303301
--enter-transform: translateY(-24px);
304302
}
305303

306-
:where(.vds-menu-items:not([data-submenu])[aria-hidden='true']) {
304+
:where(.vds-menu-items[data-root][aria-hidden='true']) {
307305
animation: var(--media-menu-exit-animation, vds-menu-exit 0.2s ease-out);
308306
}
309307

310-
:where(.vds-menu-items:not([data-submenu])[aria-hidden='false']) {
308+
:where(.vds-menu-items[data-root][aria-hidden='false']) {
311309
animation: var(--media-menu-enter-animation, vds-menu-enter 0.3s ease-out);
312310
animation-fill-mode: forwards;
313311
}
@@ -357,7 +355,7 @@
357355
display: contents;
358356
}
359357

360-
:where(.vds-menu-items:not([data-submenu]):not([data-placement])) {
358+
:where(.vds-menu-items[data-root]:not([data-placement])) {
361359
position: fixed;
362360
left: 16px;
363361
right: 16px;
@@ -367,13 +365,13 @@
367365
max-height: var(--media-sm-menu-portrait-max-height, 40dvh);
368366
}
369367

370-
:where(.vds-menu-items:not([data-submenu]):not([data-placement])) {
368+
:where(.vds-menu-items[data-root]:not([data-placement])) {
371369
max-width: 480px;
372370
margin: 0 auto;
373371
}
374372

375373
@media (orientation: landscape) and (pointer: coarse) {
376-
:where(.vds-menu-items:not([data-submenu]):not([data-placement])) {
374+
:where(.vds-menu-items[data-root]:not([data-placement])) {
377375
max-height: var(--media-sm-menu-landscape-max-height, min(70vh, 400px));
378376
max-height: var(--media-sm-menu-landscape-max-height, min(70dvh, 400px));
379377
}
@@ -533,7 +531,7 @@
533531
}
534532

535533
:where(.vds-menu-close-icon),
536-
:where(.vds-menu-item[aria-expanded='true'] .vds-menu-item-icon) {
534+
:where(.vds-menu-item[aria-expanded='true'] > .vds-icon) {
537535
display: none !important;
538536
}
539537

@@ -616,7 +614,7 @@
616614

617615
:where(.vds-menu-items .vds-slider) {
618616
--media-slider-track-bg: var(--media-menu-slider-track-bg, var(--color-gray-50));
619-
--media-slider-track-fill-bg: var(--media-menu-slider-track-bg, var(--color-inverse));
617+
--media-slider-track-fill-bg: var(--media-menu-slider-track-fill-bg, var(--color-inverse));
620618
--media-slider-height: var(--media-menu-slider-height, 32px);
621619
--track-focus-height: var(--track-height) !important;
622620
}
@@ -720,12 +718,12 @@
720718
padding-left: 0;
721719
}
722720

723-
:where(.vds-radio .vds-icon) {
721+
.vds-radio .vds-icon {
724722
display: none;
725723
color: var(--radio-icon-color);
726724
}
727725

728-
:where(.vds-radio[aria-checked='true'] .vds-icon) {
726+
.vds-radio[aria-checked='true'] .vds-icon {
729727
display: inline-block;
730728
margin-left: 6px;
731729
}
@@ -885,7 +883,7 @@
885883
}
886884

887885
.vds-chapters-radio-group .vds-thumbnail {
888-
border: var(--chapter-thumbnail-border);
886+
border: var(--media-chapters-thumbnail-border, 0);
889887
}
890888

891889
:where(.vds-chapters-radio-group .vds-chapter-radio-label) {

0 commit comments

Comments
 (0)