diff --git a/resources/css/components/menu.css b/resources/css/components/menu.css index 0ad92292..b3fbeabb 100644 --- a/resources/css/components/menu.css +++ b/resources/css/components/menu.css @@ -298,8 +298,8 @@ cursor: pointer; } - /* `data-active` is the row the arrow keys or the pointer are on. */ - [data-md-field-option][data-active] { + /* `data-md-active` is the row the arrow keys or the pointer are on. */ + [data-md-field-option][data-md-active] { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } @@ -308,7 +308,7 @@ color: var(--md-sys-color-on-secondary-container); } - [data-md-field-option][aria-selected="true"][data-active] { + [data-md-field-option][aria-selected="true"][data-md-active] { background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container)); } diff --git a/resources/views/components/choices.blade.php b/resources/views/components/choices.blade.php index 1c66c8eb..fb1e21bb 100644 --- a/resources/views/components/choices.blade.php +++ b/resources/views/components/choices.blade.php @@ -128,7 +128,7 @@ this.open = false; }, reveal() { - this.$refs.list.querySelector('[data-active]')?.scrollIntoView({ block: 'nearest' }); + this.$refs.list.querySelector('[data-md-active]')?.scrollIntoView({ block: 'nearest' }); }, }" @if ($model === null) x-modelable="value" @endif @@ -185,7 +185,7 @@ x-bind:id="'{{ $id }}-option-' + index" x-bind:aria-selected="(option.value === value).toString()" x-bind:aria-disabled="option.disabled ? 'true' : null" - x-bind:data-active="index === active ? '' : null" + x-bind:data-md-active="index === active ? '' : null" x-on:mousedown.prevent="choose(option)" x-on:mousemove="active = index" data-md-field-option