Imagine a user presses ⌘F to find some text on a page. The text is there, but it's tucked inside a closed accordion or an inactive tab.
Normally, they're out of luck. Because that content is hidden, the browser can't find it.
Modern browsers now have an answer: hidden="until-found". It keeps content visually hidden while making it discoverable by the browser's find-in-page feature. When a match is found, the browser reveals the content, scrolls to it, and highlights the result.
We wanted Flux components to ship with this behavior out of the box.
Collapsed accordion content is findable by default. There's no prop to add and nothing to configure:
<flux:accordion> <flux:accordion.item heading="Do I need to be home for delivery?"> Orders over $500 require a signature upon delivery. </flux:accordion.item></flux:accordion>
When a match is found, Flux opens the associated item automatically.
Tabs are opt-in because inactive tabs often represent separate views where this behavior may not be desirable. Add findable to the tab group when you want their content included in browser search:
<flux:tab.group findable> <flux:tabs> <flux:tab name="profile">Profile</flux:tab> <flux:tab name="billing">Billing</flux:tab> </flux:tabs> <flux:tab.panel name="profile">...</flux:tab.panel> <flux:tab.panel name="billing">...</flux:tab.panel></flux:tab.group>
When a match is found, Flux selects the associated tab automatically.
That's it. Another thing you never have to think about—Flux takes care of it using modern browser affordances.
Enjoy!
What's Changed
Add slider dot ticks by @calebporzio
Select improvements by @ganyicz in #2700
Show page-based carousel indicators with advance="page" by @joshhanley
Prevent selected values from overflowing selects by @calebporzio
Fix dark mode option styling inside select optgroups by @760524mkfa00 in #2721
New Contributors
@760524mkfa00 made their first contribution in #2721
Forward icon:variant to navbar item trailing icon by @ghabriel25 in #2583
Add empty string checking on flux:input leading and trailing icon by @ghabriel25 in #2588
Replace blade directive with php syntax by @ghabriel25 in #2596
Support iconDot for trailing icon in flux:navbar.item and flux:navlist.item by @ghabriel25 in #2585
Fix sidebar brand not truncating by @joshhanley in #2619
Fix Blaze safe list in select option by @ganyicz in #2626
Fix description:trailing not showing without label or description by @ghabriel25 in #2625
Add Carousel to pro components publish list by @calebporzio in #2633
Fix table cell icon alignment by @calebporzio in #2645
Make table cell padding overridable by @ganyicz in #2641
Add toast link support by @calebporzio in #2655
Fix flux:select selected text not truncating with ellipsis by @joshhanley
Fix flux:date-picker clear button hidden when type="input" and max is set by @joshhanley
Fix flux:date-picker with-inputs="custom" corrupting day segment when typing by @joshhanley
Fix colour picker in RTL by @joshhanley
Fix Color Picker browser hang when conditionally rendered by @joshhanley
Fix file upload crashing with Lucide icons by @joshhanley
Fix composer textarea cleared when toggling header or footer slot by @joshhanley
Add carousel component by @calebporzio
Improve carousel controls and autoplay by @calebporzio
Fix memory leak: clean up global listeners when components unmount by @calebporzio
Fix incorrect class name by @ghabriel25 in #2543
Fix RTL pagination arrows by @ganyicz in #2537
Add custom date inputs to date picker by @joshhanley
Fix toast group remaining expanded after all toasts closed by @ganyicz
What's Changed
Fix aware in select option by @ganyicz in #2469
Make toast a free component by @calebporzio in #2505
Fix CSP violations for editor nonces and pagination scroll-to by @calebporzio in #2509
Fix timeline content overflow with long unbreakable content by @ganyicz in #2510
Fix with-field.blade.php ComponentAttributeBag::all() for Laravel 10 compatibility by @Gabbo7474 in #2486
Add progress component to publish command by @ghabriel25 in #2455
Fix inconsistent sidebar item and group spacing by @ganyicz in #2513
Mark unsafe forwarded props by @ganyicz in #2496
Add scroll="body" prop to modal by @ganyicz in #2520
Fix bottom flyout width in Firefox by @ganyicz in #2518
Allow progress bar color to be controlled dynamically by @ganyicz in #2512
Add minimum width to navlist and navbar badges by @ganyicz in #2511
Fix timeline line width break when size="lg" is set on individual item by @joshhanley in #2476
Mark unsafe forwarded props by @ganyicz
Allow timeline status to be controlled dynamically by @ganyicz
Fix timeline line colour break when size="lg" is set on individual item by @joshhanley
Fix ResizeObserver loop error in Safari by @ganyicz
Remove RTL from OTP input by @ganyicz
Fix calendar memory leak by @ganyicz
Fix disabled attribute on accordion items by @joshhanley
Skip rendering <flux:chart.point> for missing values by @joshhanley
Prevent filter change on mutation by @ganyicz
Fix uneven hover spacing on date picker calendar button by @joshhanley
Add scroll="body" prop to modal by @ganyicz
Fix checkbox.all toggling disabled checkboxes by @ganyicz
New Contributors
@Gabbo7474 made their first contribution in #2486
@ghabriel25 made their first contribution in #2455
What's Changed
Add future date range presets by @ganyicz in #2377
Unify profile hover background color with button by @ganyicz in #2338
Truncate sidebar item text by @ganyicz in #2340
Fix label/slot precedence by @ganyicz in #2371
Fix trailing badge icon size by @ganyicz in #2375
Fix sortable column hover area by @ganyicz in #2379
Fix brand icon alignment in collapsed sidebar by @ganyicz in #2383
Fix select clear when options are not in DOM by @ganyicz
Reuse stylesheet by @ganyicz
Close menu when clicking on an item with wire:navigate by @ganyicz
Hide timepicker clearable button when empty by @ganyicz
Fix label/slot precedence by @ganyicz
Fix clearable date picker with presets by @ganyicz
Add future date range preset calculations by @ganyicz
Disable search autofocus on mobile by @ganyicz
Fix pillbox tests by @ganyicz
Add bar charts by @joshhanley
Fix modal outside Livewire by @ganyicz in #2330
Add tests for native form submissions by @ganyicz
Fix native form submission in pillbox by @ganyicz
Fix failing tests by @ganyicz
Add test for modal outside Livewire by @ganyicz
Restore "Allow forcing of data-current in links" by @joshhanley in #2260
Fix wire:current.ignore by @ganyicz in #2258
Support binding wire:model to accordion by @ganyicz
Add inputmode="numeric" to timepicker input by @ganyicz