noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Opt the select into base-select from its own stylesheet

Browse Source 
Plan step 36. menu.css left Tailwind's unlayered half for
material.components, where its `appearance: base-select` on the select
ties select.css's `appearance: none` in layer and specificity and loses
on order: select.css's block always follows the menu.css it imports. The
customizable select would have fallen back to the native list. The
select's own opt-in now sits in select.css's @supports block; menu.css
keeps the picker's. A test pins where each is written.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 17:05:56 +02:00
co-authored by Claude Opus 5
parent 99e73fdc58
commit d706eef01b
3 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/MenuTest.php
+12 -1
View File
@@ -392,7 +392,18 @@ it('draws the dropdown a select or a searchable choices field opens, the same fa
'background-color' => 'var(--md-sys-color-secondary-container)',
'color' => 'var(--md-sys-color-on-secondary-container)',
])
->and($css->css)->toContain('@supports (appearance: base-select) {')
->and($css->declarations('select[data-md-field-control]::picker(select)', ['@supports (appearance: base-select)']))->toMatchArray(['appearance' => 'base-select'])
->and(ComponentStylesheet::read('select')->imports())->toContain('./menu.css')
->and(ComponentStylesheet::read('choices')->imports())->toContain('./menu.css');
});
it('opts the select itself into the customizable select after its own appearance: none', function () {
// menu.css and select.css share `material.components` and the selector's specificity, and
// select.css's block always follows the menu.css it imports: the opt-in has to be written
// there, or `appearance: none` wins and the picker is never the menu.
$select = ComponentStylesheet::read('select');
expect($select->declarations('select[data-md-field-control]'))->toMatchArray(['appearance' => 'none'])
->and($select->declarations('select[data-md-field-control]', ['@supports (appearance: base-select)']))->toMatchArray(['appearance' => 'base-select'])
->and(ComponentStylesheet::read('menu')->has('select[data-md-field-control]', ['@supports (appearance: base-select)']))->toBeFalse();
});