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

Draw the search bar and its view as the contained style

Browse Source 
Expressive deprecates the divided style, so the results lose their
divider; the full-screen layout takes its own surface-container-low, one
step from the docked one; the docked view opens over a scrim, as M3's
variants table says it does; and the bar is bounded at M3's 720px, grows
to that width while focused, and rests with the 24px leading and trailing
padding the specs table gives an unfocused bar. --search-width sets the
resting width for M3's 360px bar.

Plan step 20, findings IN-07, IN-08, IN-09, IN-20 and IN-21.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 05:58:42 +02:00
co-authored by Claude Fable 5.1
parent 66f9d36a37
commit f30fd575cf
5 changed files with 68 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/search.css
+53 -7
View File
@@ -4,12 +4,19 @@
*
* The bar is a 56px pill in surface-container-high: a leading search icon, the input in
* body-large, a clear button once something is typed, and whatever the caller trails it with (an
* avatar, an icon button). Focus opens the view. On a medium or wider window the view is docked:
* the bar grows down into an extra-large-cornered container at elevation 3 that holds the
* results. On a compact window it takes the whole screen, and the search icon turns into a back
* arrow. `docked` keeps it docked at every width.
* avatar, an icon button). Focus opens the view. On a medium or wider window the view is docked
* over a scrim: the bar grows down into an extra-large-cornered container at elevation 3 that
* holds the results. On a compact window it takes the whole screen, and the search icon turns into
* a back arrow. `docked` keeps it docked at every width.
*
* Widths are M3's: never wider than 720px, and the bar grows to that width while it is focused —
* `--search-width` is its resting width (the room it is given, by default) and
* `--search-open-width` the focused one, so a caller that wants M3's 360px resting bar sets
* `--search-width: 22.5rem` on a wrapper. The leading and trailing padding is 24px unfocused and
* 16px focused, as the search specs table gives it.
*
* [data-search] the root; data-open, data-full-screen
* [data-search-scrim] over the page while the view is docked
* [data-search-bar] the pill, above the view
* [data-search-leading], [data-search-field] (the combobox around [data-search-input]),
* [data-search-clear], [data-search-trailing]
@@ -21,25 +28,56 @@
@layer components {
[data-search] {
--search-height: 3.5rem;
/* M3: min 360px, max 720px, and wider while focused. */
--search-width: 100%;
--search-open-width: 45rem;
}
[data-search][data-open] {
z-index: 50;
}
/* Docked, the view opens over the page: M3 puts a scrim under it. Behind the bar and the view
inside the root's own stacking context, above everything the page draws outside it. */
[data-search-scrim] {
position: fixed;
inset: 0;
z-index: -1;
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
transition-property: opacity, display;
transition-duration: var(--md-sys-motion-effects-fast-duration);
transition-timing-function: var(--md-sys-motion-effects-fast);
transition-behavior: allow-discrete;
}
@starting-style {
[data-search-scrim] {
opacity: 0;
}
}
[data-search-bar] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 0.25rem;
width: min(100%, var(--search-width));
height: var(--search-height);
padding-inline: 0.25rem;
padding-inline: 0.75rem;
border-radius: var(--md-sys-shape-corner-full);
background-color: var(--md-sys-color-surface-container-high);
color: var(--md-sys-color-on-surface);
cursor: text;
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
transition-property: background-color, width, padding-inline;
transition-duration: var(--md-sys-motion-effects-fast-duration);
transition-timing-function: var(--md-sys-motion-effects-fast);
}
/* Focused: wider, and the padding drops from 24px to the contained style's 16px. */
[data-search][data-open] [data-search-bar] {
width: min(100%, var(--search-open-width));
padding-inline: 0.25rem;
}
@media (hover: hover) {
@@ -143,6 +181,9 @@
top: 0;
display: flex;
flex-direction: column;
max-width: var(--search-open-width);
/* M3: the docked container is at least 240px tall and at most two thirds of the window. */
min-height: 15rem;
max-height: min(40rem, 70dvh);
padding-top: var(--search-height);
overflow: hidden;
@@ -163,11 +204,12 @@
}
}
/* No divider: that belongs to the divided style, which Expressive deprecates in favour of the
contained one this file draws. */
[data-search-results] {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
border-top: 1px solid var(--md-sys-color-outline);
padding-block: 0.5rem;
}
@@ -175,6 +217,7 @@
[data-search][data-full-screen] [data-search-bar] {
position: fixed;
inset: 0 0 auto;
width: auto;
height: calc(4.5rem + var(--material-safe-top, env(safe-area-inset-top)));
padding-top: var(--material-safe-top, env(safe-area-inset-top));
padding-inline: 0.25rem;
@@ -184,8 +227,11 @@
[data-search][data-full-screen] [data-search-view] {
position: fixed;
inset: 0;
max-width: none;
max-height: none;
padding-top: calc(4.5rem + var(--material-safe-top, env(safe-area-inset-top)));
/* The full-screen layout has its own container role, one step from the docked one. */
background-color: var(--md-sys-color-surface-container-low);
border-radius: 0;
box-shadow: none;
}