[Bottom sheet] New component: Bottom sheet by aguscruiz · Pull Request #1328 · brave/leo

aguscruiz · 2026-03-04T18:32:27Z

Resolves #1327

Summary

Adds <leo-bottomsheet> — a mobile-friendly bottom sheet that slides up from the bottom of the viewport. It reuses the same slotted content model as leo-menu (items, sections, titles, dividers), supports multiple dismissal paths, stacked sheets for nested flows, and full keyboard/a11y behavior.

Files: src/components/bottomSheet/bottomSheet.svelte, bottomSheet.stories.svelte

Features

Open / close

Controlled via isOpen; enters with a fly transition from the bottom.
Exits with the Web Animations API from the current position (including mid-drag), then calls onClose when finished.
Locks document.body scroll while any sheet in the stack is open.

Dismissal

Method	Behavior
Backdrop click	Closes topmost sheet when `backdropClickCloses` (default `true`)
Outside click	Same, with 100ms debounce after open to avoid accidental close from the opening click
Escape	Closes topmost sheet when `escapeCloses` (default `true`)
Drag handle	Pull down past 30% of sheet height to dismiss from current offset (`dragToClose`, default `true`)
Menu item click	Auto-closes on `leo-menu-item` / `leo-option` click unless `data-is-interactive` is set (for items that open another sheet)

The drag handle UI is only rendered when dragToClose is enabled.

Backdrop

Rendered only by the bottom-most sheet in the stack (no duplicate overlays).
Fades in on open (Svelte fade, 200ms).
Fades out on close via WAAPI, in sync with sheet dismiss when the bottom sheet closes.

Stacking

Multiple sheets can be open at once (e.g. menu item opens a nested sheet). A module-level sheetStack store tracks order.

Sheets behind the top are scaled down, shifted up, dimmed, and blurred by depth.
Only the topmost sheet receives pointer events and keyboard handling.
When the top sheet dismisses, a dismissingSheetId store temporarily compresses the stack so sheets beneath animate forward smoothly — no visible gap under the dismissing sheet.

The Stacked story demonstrates three sheets with data-is-interactive items opening the next layer.

Keyboard navigation

Arrow Up / Down cycles focus through leo-menu-item and leo-option inside the sheet, wrapping at boundaries.

Slotted content & styling

Default slot accepts: leo-menu-item, leo-option, leo-title, leo-menu-section, <hr>. Scoped CSS mirrors leo-menu item styling (margins, padding, hover/active/focus-visible). Content area scrolls internally; bottom padding respects safe-area-inset-bottom.

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	`false`	Sheet visibility
`onClose`	`() => void`	—	Fired after close animation completes
`escapeCloses`	`boolean`	`true`	Escape dismisses top sheet
`backdropClickCloses`	`boolean`	`true`	Backdrop / outside click dismisses
`dragToClose`	`boolean`	`true`	Drag handle can dismiss

CSS custom properties

Property	Default	Description
`--leo-bottomsheet-max-width`	`480px`	Max sheet width
`--leo-bottomsheet-max-height`	`85vh`	Max sheet height
`--leo-bottomsheet-background`	`--leo-color-container-background`	Background
`--leo-bottomsheet-border-radius`	`--leo-radius-xl`	Top corner radius

Storybook

Story	What it shows
Default	Title + menu items
With Sections	Multiple sections separated by `<hr>`
Scrollable Sections	`leo-menu-section` with `--leo-menu-section-max-height`
Stacked	Three nested sheets via interactive menu items
Slots	Default slot documentation

Stories include role="menuitem", tabindex, and keyboard handlers for a11y compliance in Storybook.

Test plan

Resolves #1327 Adding the first commit for a bottom sheet component

github-actions · 2026-03-04T18:35:10Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-502cf7a2981c764df65234206e2fbcac39863651/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 126006 bytes
+ ./tokens/css/variables.css: 126006 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-03-04 18:33:46.511871440 +0000
+++ ./tokens/css/variables-android.css	2026-03-04 18:33:12.077933523 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:12 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-03-04 18:33:46.859085058 +0000
+++ ./tokens/css/variables-browser.css	2026-03-04 18:33:12.060933658 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:12 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-03-04 18:33:47.214032057 +0000
+++ ./tokens/css/variables-ios.css	2026-03-04 18:33:12.093933395 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:12 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-03-04 18:33:47.592613283 +0000
+++ ./tokens/css/variables-marketing.css	2026-03-04 18:33:12.113933236 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:12 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-03-04 18:33:47.932239545 +0000
+++ ./tokens/css/variables-news.css	2026-03-04 18:33:12.172932766 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:12 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-03-04 18:33:48.339062830 +0000
+++ ./tokens/css/variables-newtab.css	2026-03-04 18:33:12.181932694 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:12 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-03-04 18:33:48.729602957 +0000
+++ ./tokens/css/variables-search.css	2026-03-04 18:33:12.143932997 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:12 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-03-04 18:33:49.075230755 +0000
+++ ./tokens/css/variables-web3.css	2026-03-04 18:33:12.187932647 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:12 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-03-04 18:33:49.598595063 +0000
+++ ./tokens/css/variables.css	2026-03-04 18:33:11.936934646 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 18:33:11 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

…view

github-actions · 2026-03-04T19:07:36Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-119255ef8feb6446616edb1984ea0f7c7cee2eed/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 126006 bytes
+ ./tokens/css/variables.css: 126006 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-03-04 19:06:09.007010175 +0000
+++ ./tokens/css/variables-android.css	2026-03-04 19:05:34.581683162 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-03-04 19:06:09.208963204 +0000
+++ ./tokens/css/variables-browser.css	2026-03-04 19:05:34.563682929 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-03-04 19:06:09.400500531 +0000
+++ ./tokens/css/variables-ios.css	2026-03-04 19:05:34.596683356 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-03-04 19:06:09.572275572 +0000
+++ ./tokens/css/variables-marketing.css	2026-03-04 19:05:34.619683653 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-03-04 19:06:09.748058969 +0000
+++ ./tokens/css/variables-news.css	2026-03-04 19:05:34.687684533 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-03-04 19:06:09.902680116 +0000
+++ ./tokens/css/variables-newtab.css	2026-03-04 19:05:34.694684623 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-03-04 19:06:10.047110292 +0000
+++ ./tokens/css/variables-search.css	2026-03-04 19:05:34.651684067 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-03-04 19:06:10.167806938 +0000
+++ ./tokens/css/variables-web3.css	2026-03-04 19:05:34.699684688 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-03-04 19:06:10.370114300 +0000
+++ ./tokens/css/variables.css	2026-03-04 19:05:34.436681287 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:05:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2026-03-04T19:11:13Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-6aef24215278bd1d83fc581b77728af1bc60f061/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 126006 bytes
+ ./tokens/css/variables.css: 126006 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-03-04 19:09:45.301766279 +0000
+++ ./tokens/css/variables-android.css	2026-03-04 19:09:10.241252061 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-03-04 19:09:45.443515777 +0000
+++ ./tokens/css/variables-browser.css	2026-03-04 19:09:10.225252112 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-03-04 19:09:45.708221105 +0000
+++ ./tokens/css/variables-ios.css	2026-03-04 19:09:10.257252009 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-03-04 19:09:45.950989393 +0000
+++ ./tokens/css/variables-marketing.css	2026-03-04 19:09:10.278251942 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-03-04 19:09:46.174678492 +0000
+++ ./tokens/css/variables-news.css	2026-03-04 19:09:10.330251774 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-03-04 19:09:46.396141896 +0000
+++ ./tokens/css/variables-newtab.css	2026-03-04 19:09:10.340251742 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-03-04 19:09:46.677122078 +0000
+++ ./tokens/css/variables-search.css	2026-03-04 19:09:10.307251848 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-03-04 19:09:46.921770693 +0000
+++ ./tokens/css/variables-web3.css	2026-03-04 19:09:10.345251726 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-03-04 19:09:47.236119967 +0000
+++ ./tokens/css/variables.css	2026-03-04 19:09:10.100252514 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:09:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2026-03-04T19:40:05Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-0883dfd7806d31f9a2855f22585943d8b3f1f04a/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 126006 bytes
+ ./tokens/css/variables.css: 126006 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-03-04 19:38:40.200978543 +0000
+++ ./tokens/css/variables-android.css	2026-03-04 19:38:05.400663782 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-03-04 19:38:40.546134070 +0000
+++ ./tokens/css/variables-browser.css	2026-03-04 19:38:05.385663645 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-03-04 19:38:40.881940189 +0000
+++ ./tokens/css/variables-ios.css	2026-03-04 19:38:05.415663918 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-03-04 19:38:41.166211395 +0000
+++ ./tokens/css/variables-marketing.css	2026-03-04 19:38:05.437664119 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-03-04 19:38:41.445540369 +0000
+++ ./tokens/css/variables-news.css	2026-03-04 19:38:05.498664674 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-03-04 19:38:41.580568048 +0000
+++ ./tokens/css/variables-newtab.css	2026-03-04 19:38:05.512664801 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-03-04 19:38:41.922985748 +0000
+++ ./tokens/css/variables-search.css	2026-03-04 19:38:05.468664401 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-03-04 19:38:42.236750915 +0000
+++ ./tokens/css/variables-web3.css	2026-03-04 19:38:05.519664865 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-03-04 19:38:42.702992703 +0000
+++ ./tokens/css/variables.css	2026-03-04 19:38:05.258662489 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Mar 03 2026 20:01:41 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 04 2026 19:38:05 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Add on:keydown handlers, role="menuitem", and tabindex="0" to leo-menu-item elements to resolve Svelte accessibility warnings. Made-with: Cursor

github-actions · 2026-05-12T12:41:37Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-495a7f25a7de06ec34c7945dd457395214a43850/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 126006 bytes
+ ./tokens/css/variables.css: 126006 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-05-12 12:40:09.472088932 +0000
+++ ./tokens/css/variables-android.css	2026-05-12 12:39:34.276769796 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-05-12 12:40:09.792647468 +0000
+++ ./tokens/css/variables-browser.css	2026-05-12 12:39:34.260769885 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-05-12 12:40:10.080999037 +0000
+++ ./tokens/css/variables-ios.css	2026-05-12 12:39:34.292769707 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-05-12 12:40:10.360149987 +0000
+++ ./tokens/css/variables-marketing.css	2026-05-12 12:39:34.310769607 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-05-12 12:40:10.649765055 +0000
+++ ./tokens/css/variables-news.css	2026-05-12 12:39:34.361769323 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-05-12 12:40:10.956916283 +0000
+++ ./tokens/css/variables-newtab.css	2026-05-12 12:39:34.374769251 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-05-12 12:40:11.149511226 +0000
+++ ./tokens/css/variables-search.css	2026-05-12 12:39:34.336769462 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-05-12 12:40:11.444813579 +0000
+++ ./tokens/css/variables-web3.css	2026-05-12 12:39:34.380769217 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-05-12 12:40:11.896506150 +0000
+++ ./tokens/css/variables.css	2026-05-12 12:39:34.143770536 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon May 11 2026 23:36:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue May 12 2026 12:39:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2026-06-02T16:33:59Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-3999c26b84316b2239135eac2c5c7d4a5babd7f3/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125980 bytes
+ ./tokens/css/variables.css: 125980 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-06-02 16:32:29.575154825 +0000
+++ ./tokens/css/variables-android.css	2026-06-02 16:31:52.040088856 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-06-02 16:32:29.929601587 +0000
+++ ./tokens/css/variables-browser.css	2026-06-02 16:31:52.026088988 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-06-02 16:32:30.293176181 +0000
+++ ./tokens/css/variables-ios.css	2026-06-02 16:31:52.057088695 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-06-02 16:32:30.595701854 +0000
+++ ./tokens/css/variables-marketing.css	2026-06-02 16:31:52.078088496 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-06-02 16:32:30.878902183 +0000
+++ ./tokens/css/variables-news.css	2026-06-02 16:31:52.128088023 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-06-02 16:32:31.209150291 +0000
+++ ./tokens/css/variables-newtab.css	2026-06-02 16:31:52.141087900 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-06-02 16:32:31.655691197 +0000
+++ ./tokens/css/variables-search.css	2026-06-02 16:31:52.101088278 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-06-02 16:32:31.954731929 +0000
+++ ./tokens/css/variables-web3.css	2026-06-02 16:31:52.146087853 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:52 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-06-02 16:32:32.438683330 +0000
+++ ./tokens/css/variables.css	2026-06-02 16:31:51.913090057 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Jun 02 2026 16:31:51 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

…y space beneath them visible

github-actions · 2026-06-03T14:58:06Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-8006fb2b0cebde0133b3b65ca403ef5309a4658b/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125980 bytes
+ ./tokens/css/variables.css: 125980 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-06-03 14:56:29.870419580 +0000
+++ ./tokens/css/variables-android.css	2026-06-03 14:55:52.169215716 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-06-03 14:56:30.174137613 +0000
+++ ./tokens/css/variables-browser.css	2026-06-03 14:55:52.154215699 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-06-03 14:56:30.518695808 +0000
+++ ./tokens/css/variables-ios.css	2026-06-03 14:55:52.183215731 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-06-03 14:56:30.821432456 +0000
+++ ./tokens/css/variables-marketing.css	2026-06-03 14:55:52.205215756 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-06-03 14:56:31.104980370 +0000
+++ ./tokens/css/variables-news.css	2026-06-03 14:55:52.252215808 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-06-03 14:56:31.410290775 +0000
+++ ./tokens/css/variables-newtab.css	2026-06-03 14:55:52.261215818 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-06-03 14:56:31.823048720 +0000
+++ ./tokens/css/variables-search.css	2026-06-03 14:55:52.231215785 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-06-03 14:56:32.141588155 +0000
+++ ./tokens/css/variables-web3.css	2026-06-03 14:55:52.266215824 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-06-03 14:56:32.587046011 +0000
+++ ./tokens/css/variables.css	2026-06-03 14:55:52.031215563 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:55:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2026-06-03T15:00:24Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-167980c6aebca050f0e64ad65495ffb888acaccf/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125980 bytes
+ ./tokens/css/variables.css: 125980 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-06-03 14:58:59.767208495 +0000
+++ ./tokens/css/variables-android.css	2026-06-03 14:58:21.971986902 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:21 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-06-03 14:59:00.039665379 +0000
+++ ./tokens/css/variables-browser.css	2026-06-03 14:58:21.950986879 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:21 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-06-03 14:59:00.338049982 +0000
+++ ./tokens/css/variables-ios.css	2026-06-03 14:58:21.994986928 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:21 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-06-03 14:59:00.653330742 +0000
+++ ./tokens/css/variables-marketing.css	2026-06-03 14:58:22.018986955 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:22 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-06-03 14:59:00.983156893 +0000
+++ ./tokens/css/variables-news.css	2026-06-03 14:58:22.094987040 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:22 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-06-03 14:59:01.249134426 +0000
+++ ./tokens/css/variables-newtab.css	2026-06-03 14:58:22.115987064 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:22 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-06-03 14:59:01.575757656 +0000
+++ ./tokens/css/variables-search.css	2026-06-03 14:58:22.054986995 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:22 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-06-03 14:59:01.844244628 +0000
+++ ./tokens/css/variables-web3.css	2026-06-03 14:58:22.121987071 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:22 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-06-03 14:59:02.291754174 +0000
+++ ./tokens/css/variables.css	2026-06-03 14:58:21.801986712 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 14:58:21 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Wrap the drag-handle area in an {#if dragToClose} block so the drag handle and its pointer event handlers are only rendered when drag-to-close is enabled. This prevents unnecessary event listeners and UI affordances when dragToClose is false.

github-actions · 2026-06-03T15:05:51Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-fe84c8e7fb0fae6ca8de86a12d92bbdf5b202f70/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125980 bytes
+ ./tokens/css/variables.css: 125980 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-06-03 15:04:16.931164468 +0000
+++ ./tokens/css/variables-android.css	2026-06-03 15:03:40.416970524 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-06-03 15:04:17.285450086 +0000
+++ ./tokens/css/variables-browser.css	2026-06-03 15:03:40.401970437 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-06-03 15:04:17.597941875 +0000
+++ ./tokens/css/variables-ios.css	2026-06-03 15:03:40.430970605 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-06-03 15:04:17.742653503 +0000
+++ ./tokens/css/variables-marketing.css	2026-06-03 15:03:40.453970738 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-06-03 15:04:17.884724474 +0000
+++ ./tokens/css/variables-news.css	2026-06-03 15:03:40.500971009 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-06-03 15:04:18.183890885 +0000
+++ ./tokens/css/variables-newtab.css	2026-06-03 15:03:40.507971050 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-06-03 15:04:18.627163020 +0000
+++ ./tokens/css/variables-search.css	2026-06-03 15:03:40.479970888 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-06-03 15:04:18.888087896 +0000
+++ ./tokens/css/variables-web3.css	2026-06-03 15:03:40.512971079 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-06-03 15:04:19.370166516 +0000
+++ ./tokens/css/variables.css	2026-06-03 15:03:40.284969761 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu May 28 2026 21:06:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 15:03:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2026-06-03T21:17:56Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-8166252729484693999f435f8b4afddaf5eee838/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125980 bytes
+ ./tokens/css/variables.css: 125980 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-06-03 21:16:28.234042288 +0000
+++ ./tokens/css/variables-android.css	2026-06-03 21:15:57.964331928 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:57 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-06-03 21:16:28.386155909 +0000
+++ ./tokens/css/variables-browser.css	2026-06-03 21:15:57.953331914 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:57 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-06-03 21:16:28.557779671 +0000
+++ ./tokens/css/variables-ios.css	2026-06-03 21:15:57.975331941 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:57 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-06-03 21:16:29.248279661 +0000
+++ ./tokens/css/variables-marketing.css	2026-06-03 21:15:57.991331960 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:57 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-06-03 21:16:29.414148529 +0000
+++ ./tokens/css/variables-news.css	2026-06-03 21:15:58.028332004 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:58 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-06-03 21:16:29.547797576 +0000
+++ ./tokens/css/variables-newtab.css	2026-06-03 21:15:58.034332011 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:58 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-06-03 21:16:29.696155077 +0000
+++ ./tokens/css/variables-search.css	2026-06-03 21:15:58.012331985 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:58 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-06-03 21:16:29.836626908 +0000
+++ ./tokens/css/variables-web3.css	2026-06-03 21:15:58.038548085 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:58 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-06-03 21:16:29.970161438 +0000
+++ ./tokens/css/variables.css	2026-06-03 21:15:57.861331804 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 03 2026 21:15:57 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Introduce a drag-to-expand feature for BottomSheet: add a new prop `dragToExpand` and a CSS variable `--leo-bottomsheet-expanded-max-height` (default 100dvh). Implement expanded state tracking, preserve the collapsed snap height, compute dynamic max-height during drag, and adjust dismiss/translate logic to support expanding to full viewport and collapsing back. Update styles to include an `.is-expanded` state and transitions, and ensure the drag handle is enabled when either `dragToClose` or `dragToExpand` is set. Also add an "Expandable" story demonstrating the new behavior and add relevant story argTypes. These changes improve UX by allowing users to drag the sheet up to fully expand while preserving existing drag-to-close behavior.

github-actions · 2026-06-04T15:12:14Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-00664fe29c8ade1a7c4607f7195d26fa7f7998dc/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125980 bytes
+ ./tokens/css/variables.css: 125980 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-06-04 15:10:40.914727169 +0000
+++ ./tokens/css/variables-android.css	2026-06-04 15:10:10.897961409 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-06-04 15:10:41.295412202 +0000
+++ ./tokens/css/variables-browser.css	2026-06-04 15:10:10.885961082 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-06-04 15:10:41.683099298 +0000
+++ ./tokens/css/variables-ios.css	2026-06-04 15:10:10.909961735 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-06-04 15:10:41.950834257 +0000
+++ ./tokens/css/variables-marketing.css	2026-06-04 15:10:10.927962225 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-06-04 15:10:42.304534211 +0000
+++ ./tokens/css/variables-news.css	2026-06-04 15:10:10.962963178 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-06-04 15:10:42.458336188 +0000
+++ ./tokens/css/variables-newtab.css	2026-06-04 15:10:10.968963341 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-06-04 15:10:42.848827598 +0000
+++ ./tokens/css/variables-search.css	2026-06-04 15:10:10.946962742 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-06-04 15:10:43.157304318 +0000
+++ ./tokens/css/variables-web3.css	2026-06-04 15:10:10.972539527 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-06-04 15:10:43.618848490 +0000
+++ ./tokens/css/variables.css	2026-06-04 15:10:10.796958660 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jun 03 2026 20:40:31 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Jun 04 2026 15:10:10 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2026-06-12T14:25:18Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-0d120d02dc17a0ac399981dcb47c58ee53f950af/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125980 bytes
+ ./tokens/css/variables.css: 125980 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-06-12 14:23:25.598922926 +0000
+++ ./tokens/css/variables-android.css	2026-06-12 14:22:47.155142332 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-06-12 14:23:25.882982539 +0000
+++ ./tokens/css/variables-browser.css	2026-06-12 14:22:47.140142382 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-06-12 14:23:26.379909693 +0000
+++ ./tokens/css/variables-ios.css	2026-06-12 14:22:47.172142276 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-06-12 14:23:26.688263846 +0000
+++ ./tokens/css/variables-marketing.css	2026-06-12 14:22:47.200142184 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-06-12 14:23:26.952881004 +0000
+++ ./tokens/css/variables-news.css	2026-06-12 14:22:47.259141989 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-06-12 14:23:27.208764287 +0000
+++ ./tokens/css/variables-newtab.css	2026-06-12 14:22:47.267141963 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-06-12 14:23:27.347310994 +0000
+++ ./tokens/css/variables-search.css	2026-06-12 14:22:47.232142078 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-06-12 14:23:27.664624916 +0000
+++ ./tokens/css/variables-web3.css	2026-06-12 14:22:47.272141947 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-06-12 14:23:28.051003011 +0000
+++ ./tokens/css/variables.css	2026-06-12 14:22:47.011142807 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Jun 11 2026 21:30:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Jun 12 2026 14:22:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2026-06-17T17:25:26Z

[puLL-Merge] - brave/leo@1328

Description

Adds a new BottomSheet component to the Leo design system — a mobile-style slide-up panel with drag-to-dismiss, drag-to-expand, stacking support, keyboard navigation, and backdrop overlay. Includes comprehensive Storybook stories demonstrating default, expandable, sectioned, scrollable, stacked, and slot variants.

Possible Issues

getViewportHeight() called inside reactive declarations — Svelte reactive statements ($:) with expandRange and dragMaxHeight call getViewportHeight(), but nothing triggers re-evaluation when the viewport resizes. The computed values will be stale after resize/rotation. Should use a reactive viewport height variable updated via a resize/visualViewport listener.
collapsedSnapHeight reactive block races with itself — The block $: if (isOpen && sheetEl && !isExpanded && !isDragging && !dismissing) { collapsedSnapHeight = sheetEl.offsetHeight } reads offsetHeight synchronously. On first open, sheetEl may exist but not yet be laid out (zero height). Consider using tick() or afterUpdate.
Module-scoped sheetStack shared across all instances — document.body.style.overflow is set reactively in every component instance. Multiple instances compete over the same property. Last-wins behavior is fragile; only one instance should own this.
onClose default undefined — onClose?.() is safe, but TypeScript type is () => void = undefined, which is technically () => void | undefined. Minor, but onClose?: () => void would be cleaner if the API supported optional props.
No out: transition on sheet — in:fly is used but no out: transition. Dismiss relies on imperative animate(), so if isOpen becomes false externally (without calling close()), the sheet disappears instantly with no animation.
Memory leak potential — svelte:window on:keydown and on:click handlers fire for every instance regardless of isOpen. Many closed sheets still intercept all window events. Filter early, but adds unnecessary listener count.
handleWindowClick + backdrop click double-fire — Both handleBackdropClick and handleWindowClick can trigger close() on the same click. The dismissing guard prevents double-close, but the intent seems redundant.

Security Hotspots

e.composedPath() in handleItemClick — Uses composedPath() to match click targets. If the sheet contains untrusted slotted content, a malicious element could intercept or spoof composed path entries. Low risk in a design system context but worth noting.

Changes

Changes

src/components/bottomSheet/bottomSheet.svelte

New component with fixed-position bottom sheet, backdrop overlay, drag handle, keyboard navigation (arrow keys, Escape).
Module-level sheetStack store tracks open sheets for stacking (scale + translate transforms, brightness/blur filters).
dismissingSheetId store enables compressed stack animation during dismiss.
Drag gesture handling via pointer events: drag-down to dismiss, drag-up to expand (when dragToExpand enabled).
Imperative Web Animations API for dismiss/backdrop fade-out.
Extensive :global() CSS rules replicating menu item styles for leo-menu-item, leo-option, leo-title, hr, leo-menu-section.

src/components/bottomSheet/bottomSheet.stories.svelte

Stories: Default, Expandable, With Sections, Scrollable Sections, Stacked (3-deep), Slots.
Documents CSS custom properties via argTypes.

sequenceDiagram
    participant User
    participant Button
    participant BottomSheet
    participant SheetStack as sheetStack (store)
    participant DOM

    User->>Button: Click "Open"
    Button->>BottomSheet: isOpen = true
    BottomSheet->>SheetStack: update(add id)
    BottomSheet->>DOM: Render backdrop (fade in)
    BottomSheet->>DOM: Render sheet (fly in from bottom)
    DOM->>DOM: body.overflow = 'hidden'

    alt Drag to dismiss
        User->>BottomSheet: pointerdown on drag handle
        BottomSheet->>BottomSheet: isDragging = true
        User->>BottomSheet: pointermove (drag down)
        BottomSheet->>DOM: translateY(deltaY)
        User->>BottomSheet: pointerup
        BottomSheet->>BottomSheet: check threshold
        BottomSheet->>DOM: animate slide-out + fade backdrop
        BottomSheet->>SheetStack: update(remove id)
        BottomSheet->>DOM: isOpen = false, onClose()
    end

    alt Drag to expand
        User->>BottomSheet: pointerdown on drag handle
        User->>BottomSheet: pointermove (drag up)
        BottomSheet->>DOM: increase max-height
        User->>BottomSheet: pointerup
        BottomSheet->>BottomSheet: isExpanded = true
        BottomSheet->>DOM: max-height = 100dvh, border-radius = 0
    end

    alt Backdrop click
        User->>DOM: Click backdrop
        DOM->>BottomSheet: handleBackdropClick()
        BottomSheet->>BottomSheet: close()
    end

    alt Escape key
        User->>DOM: Press Escape
        DOM->>BottomSheet: handleKeydown()
        BottomSheet->>BottomSheet: close()
    end

github-actions · 2026-06-17T17:33:53Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1328.pr.nala.bravesoftware.com/
✅ Commit preview: https://1328.pr.nala.bravesoftware.com/commit-46274b011dce27a0e191f4638cfacd2eff0b484f/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125980 bytes
+ ./tokens/css/variables.css: 125980 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2026-06-17 17:32:17.302591482 +0000
+++ ./tokens/css/variables-android.css	2026-06-17 17:31:54.470675564 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2026-06-17 17:32:17.549039483 +0000
+++ ./tokens/css/variables-browser.css	2026-06-17 17:31:54.462675433 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2026-06-17 17:32:17.744703253 +0000
+++ ./tokens/css/variables-ios.css	2026-06-17 17:31:54.479675711 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2026-06-17 17:32:17.949065026 +0000
+++ ./tokens/css/variables-marketing.css	2026-06-17 17:31:54.490675891 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2026-06-17 17:32:18.168788384 +0000
+++ ./tokens/css/variables-news.css	2026-06-17 17:31:54.519676365 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2026-06-17 17:32:18.358493272 +0000
+++ ./tokens/css/variables-newtab.css	2026-06-17 17:31:54.525676463 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2026-06-17 17:32:18.601074956 +0000
+++ ./tokens/css/variables-search.css	2026-06-17 17:31:54.507676169 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2026-06-17 17:32:18.694767082 +0000
+++ ./tokens/css/variables-web3.css	2026-06-17 17:31:54.529202742 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2026-06-17 17:32:19.013082386 +0000
+++ ./tokens/css/variables.css	2026-06-17 17:31:54.393674305 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Jun 14 2026 20:50:11 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Jun 17 2026 17:31:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Bottom sheet component

502cf7a

Resolves #1327 Adding the first commit for a bottom sheet component

aguscruiz requested review from AlanBreck, fallaciousreasoning and petemill as code owners March 4, 2026 18:32

aguscruiz changed the title ~~Bottom sheet component~~ [New component] Bottom sheet Mar 4, 2026

aguscruiz self-assigned this Mar 4, 2026

aguscruiz changed the title ~~[New component] Bottom sheet~~ [Bottom sheet] Bottom sheet Mar 4, 2026

aguscruiz changed the title ~~[Bottom sheet] Bottom sheet~~ [Bottom sheet] New component: Bottom sheet Mar 4, 2026

Added stacking for bottom sheet items that open another bottom sheet …

119255e

…view

tweak offset

6aef242

fix stutter when dragging to close sheet

0883dfd

aguscruiz and others added 2 commits March 5, 2026 13:39

fix a11y warnings in bottomSheet stories

076ad3d

Add on:keydown handlers, role="menuitem", and tabindex="0" to leo-menu-item elements to resolve Svelte accessibility warnings. Made-with: Cursor

Merge branch 'main' into bottom-sheet

495a7f2

Merge branch 'main' into bottom-sheet

3999c26

aguscruiz added 2 commits June 3, 2026 11:55

Improve transition of back to front stacked sheets so there's no empt…

8006fb2

…y space beneath them visible

animate backdrop transition

167980c

Render drag handle only when dragToClose

fe84c8e

Wrap the drag-handle area in an {#if dragToClose} block so the drag handle and its pointer event handlers are only rendered when drag-to-close is enabled. This prevents unnecessary event listeners and UI affordances when dragToClose is false.

Merge branch 'main' into bottom-sheet

8166252

github-actions Bot added the puLL-Merge label Jun 4, 2026

Merge branch 'main' into bottom-sheet

0d120d0

aguscruiz requested a review from Copilot June 12, 2026 14:22

Copilot started reviewing on behalf of aguscruiz June 12, 2026 14:22 View session

aguscruiz removed the request for review from Copilot June 12, 2026 14:23

Merge branch 'main' into bottom-sheet

46274b0

Conversation

aguscruiz commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Features

Open / close

Dismissal

Backdrop

Stacking

Keyboard navigation

Slotted content & styling

Props

CSS custom properties

Storybook

Test plan

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

github-actions Bot commented May 12, 2026

Uh oh!

github-actions Bot commented Jun 2, 2026

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

github-actions Bot commented Jun 4, 2026

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

github-actions Bot commented Jun 17, 2026

Description

Possible Issues

Security Hotspots

Changes

Uh oh!

github-actions Bot commented Jun 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

aguscruiz commented Mar 4, 2026 •

edited

Loading