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

Add chips, choices and search
tests / lint (push) Successful in 1m4s
Details
tests / feature (8.4) (push) Successful in 1m8s
Details
tests / feature (8.5) (push) Successful in 1m8s
Details
tests / browser (chrome, chromium) (push) Successful in 3m6s
Details
tests / browser (firefox, firefox) (push) Successful in 3m45s
Details
tests / browser (safari, webkit) (push) Successful in 5m0s
Details

Browse Source 
M3's assist, filter, input and suggestion chips with chip sets; choices
as filter chips or a searchable combobox whose list is an anchored
popover; and the search bar that opens into a docked or full-screen
search view.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 08:07:59 +02:00
co-authored by Claude Opus 5
parent 7f92f1cb29
commit 0fee2a0952
21 changed files with 2061 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/search.css
+182
View File
@@ -0,0 +1,182 @@
/*
* M3's search: a search bar that opens into a search view (SearchBarTokens, SearchViewTokens,
* androidx Compose Material 3, Apache-2.0).
*
* 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.
*
* [data-search] the root; data-open, data-full-screen
* [data-search-bar] the pill, above the view
* [data-search-leading], [data-search-input], [data-search-clear], [data-search-trailing]
* [data-search-view] the container behind the bar
* [data-search-results]
*/
@layer components {
[data-search] {
--search-height: 3.5rem;
}
[data-search][data-open] {
z-index: 50;
}
[data-search-bar] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 0.25rem;
height: var(--search-height);
padding-inline: 0.25rem;
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);
}
@media (hover: hover) {
[data-search]:not([data-open]) [data-search-bar]:hover {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-high));
}
}
[data-search][data-open] [data-search-bar] {
background-color: transparent;
}
[data-search-leading],
[data-search-clear] {
display: grid;
flex: none;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: var(--md-sys-shape-corner-full);
}
[data-search-leading] {
color: var(--md-sys-color-on-surface);
}
[data-search-clear] {
color: var(--md-sys-color-on-surface-variant);
cursor: pointer;
}
[data-search-bar] button {
outline: none;
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
}
@media (hover: hover) {
[data-search-bar] button:hover {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}
}
[data-search-bar] button:focus-visible {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 10%, transparent);
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: -3px;
}
[data-search-input] {
flex: 1 1 0%;
min-width: 0;
height: 100%;
padding-inline: 0.25rem;
appearance: none;
background: transparent;
color: var(--md-sys-color-on-surface);
caret-color: var(--md-sys-color-primary);
outline: none;
font: var(--md-sys-typescale-body-lg);
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
}
[data-search-input]::placeholder {
color: var(--md-sys-color-on-surface-variant);
opacity: 1;
}
[data-search-input]::-webkit-search-cancel-button,
[data-search-input]::-webkit-search-decoration {
appearance: none;
display: none;
}
[data-search-bar]:has([data-search-input]:placeholder-shown) [data-search-clear] {
display: none;
}
[data-search-trailing] {
display: flex;
flex: none;
align-items: center;
gap: 0.25rem;
padding-inline-end: 0.25rem;
}
[data-search][data-open] [data-search-trailing] {
display: none;
}
[data-search-view] {
position: absolute;
inset-inline: 0;
top: 0;
display: flex;
flex-direction: column;
max-height: min(40rem, 70dvh);
padding-top: var(--search-height);
overflow: hidden;
border-radius: var(--md-sys-shape-corner-xl);
background-color: var(--md-sys-color-surface-container-high);
box-shadow: var(--md-sys-elevation-3);
transform-origin: top;
transition-property: opacity, scale, display;
transition-duration: var(--md-sys-motion-spatial-fast-duration);
transition-timing-function: var(--md-sys-motion-spatial-fast);
transition-behavior: allow-discrete;
}
@starting-style {
[data-search-view] {
opacity: 0;
scale: 1 0.9;
}
}
[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;
}
/* Full screen, on a compact window. */
[data-search][data-full-screen] [data-search-bar] {
position: fixed;
inset: 0 0 auto;
height: calc(4.5rem + env(safe-area-inset-top));
padding-top: env(safe-area-inset-top);
padding-inline: 0.25rem;
border-radius: 0;
}
[data-search][data-full-screen] [data-search-view] {
position: fixed;
inset: 0;
max-height: none;
padding-top: calc(4.5rem + env(safe-area-inset-top));
border-radius: 0;
box-shadow: none;
}
}