Let an application replace the safe-area insets and dock on the bottom bar

Components read the device's safe-area insets straight from env(), which a
browser test cannot fake and an application drawing its own status strip
cannot extend. Every inset the package reads, in its CSS and its views, is
now var(--material-safe-top|bottom|left|right, env(safe-area-inset-…)):
unchanged while the variables are unset.

The app shell's --material-bottom-bar also adds
var(--material-bottom-extra, 0px), so an application that docks something on
the phone's navigation bar (an offline banner) sets its height once and the
snackbar, a fab button and the page's bottom padding clear it.

A guard test fails on any env(safe-area-inset-*) outside such a variable, and
AppShellTest's assertion on the bar height's class follows the new value.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2

resources/views/components/app-shell.blade.php

@@ -35,7 +35,10 @@
 
      The page is `<main id="content">` with `wire:transition.navigate`, behind a skip link that is
      the first thing a keyboard reaches. The snackbar host (`<x-toast />`) is part of the shell;
-     below `sm` it, and a `fab` button, sit above the bottom bar through `--material-bottom-bar`.
+     below `sm` it, and a `fab` button, sit above the bottom bar through `--material-bottom-bar`:
+     the bar's 64px, the bottom safe area (`--material-safe-bottom`, else the device's inset) and
+     `--material-bottom-extra` (0px unless the application docks something, an offline banner, on
+     top of the bar).
 
      `max-lg:overflow-x-clip` on the content region is the backstop under every page, and it stays
      `clip`: `overflow-x: hidden` would force `overflow-y` to `auto`, turn the region into a scroll
@@ -79,13 +82,13 @@
     data-app-shell
     @class([
         'min-h-dvh bg-surface text-on-surface sm:flex',
-        'max-sm:[--material-bottom-bar:calc(4rem+env(safe-area-inset-bottom))]' => $barItems->isNotEmpty(),
+        'max-sm:[--material-bottom-bar:calc(4rem+var(--material-safe-bottom,env(safe-area-inset-bottom))+var(--material-bottom-extra,0px))]' => $barItems->isNotEmpty(),
     ])
 >
     <a
         href="#content"
         data-skip-link
-        class="sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-[calc(env(safe-area-inset-top)+1rem)] focus:z-[60] focus:rounded-corner-full focus:bg-inverse-surface focus:px-4 focus:py-2 focus:type-label-lg focus:text-inverse-on-surface focus:shadow-elevation-3 focus:outline-none"
+        class="sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-[calc(var(--material-safe-top,env(safe-area-inset-top))+1rem)] focus:z-[60] focus:rounded-corner-full focus:bg-inverse-surface focus:px-4 focus:py-2 focus:type-label-lg focus:text-inverse-on-surface focus:shadow-elevation-3 focus:outline-none"
     >{{ __('Skip to content') }}</a>
 
     <x-livewire-material::navigation-rail mode="adaptive" :label="$label" :width="$railWidth">

resources/views/components/bottom-sheet.blade.php

@@ -52,7 +52,7 @@
         @if (filled($title)) aria-labelledby="{{ $id }}-title" @endif
         style="--sheet-max-height: {{ $height }}"
         {{ $attributes->whereDoesntStartWith('wire:model')->except(['id', 'class'])->class([
-            'fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-(--sheet-max-height) w-full max-w-160 touch-pan-y flex-col rounded-t-corner-xl bg-surface-container-low pb-[env(safe-area-inset-bottom)] text-on-surface shadow-elevation-1',
+            'fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-(--sheet-max-height) w-full max-w-160 touch-pan-y flex-col rounded-t-corner-xl bg-surface-container-low pb-[var(--material-safe-bottom,env(safe-area-inset-bottom))] text-on-surface shadow-elevation-1',
             $attributes->get('class'),
         ]) }}
     >

resources/views/components/drawer.blade.php

@@ -59,7 +59,7 @@
     data-sheet="{{ $id }}"
     @if ($pane)
         x-bind:class="! open && 'xl:hidden'"
-        class="xl:sticky xl:top-[calc(env(safe-area-inset-top)+1.25rem)] xl:shrink-0 xl:self-start"
+        class="xl:sticky xl:top-[calc(var(--material-safe-top,env(safe-area-inset-top))+1.25rem)] xl:shrink-0 xl:self-start"
         data-pane
     @endif
 >
@@ -90,11 +90,11 @@
         @if (filled($title)) aria-labelledby="{{ $id }}-title" @endif
         style="--sheet-width: {{ $width }}; --pane-width: {{ $paneWidth ?? $width }}"
         {{ $attributes->whereDoesntStartWith('wire:model')->except(['id', 'class'])->class([
-            'fixed top-[env(safe-area-inset-top)] bottom-0 z-50 flex w-full flex-col overflow-y-auto bg-surface-container-low p-6 text-on-surface shadow-elevation-1',
+            'fixed top-[var(--material-safe-top,env(safe-area-inset-top))] bottom-0 z-50 flex w-full flex-col overflow-y-auto bg-surface-container-low p-6 text-on-surface shadow-elevation-1',
             'end-0 sm:rounded-s-corner-lg' => ! $start,
             'start-0 sm:rounded-e-corner-lg' => $start,
             'sm:w-(--sheet-width) sm:max-w-[calc(100vw-4rem)]',
-            'xl:relative xl:top-0 xl:z-auto xl:max-h-[calc(100dvh-2.5rem-env(safe-area-inset-top))] xl:w-(--pane-width) xl:max-w-none xl:rounded-corner-lg xl:bg-surface-container xl:shadow-none' => $pane,
+            'xl:relative xl:top-0 xl:z-auto xl:max-h-[calc(100dvh-2.5rem-var(--material-safe-top,env(safe-area-inset-top)))] xl:w-(--pane-width) xl:max-w-none xl:rounded-corner-lg xl:bg-surface-container xl:shadow-none' => $pane,
             $attributes->get('class'),
         ]) }}
     >

resources/views/components/modal.blade.php

@@ -64,7 +64,7 @@
 >
     <div @class([
         'flex max-h-[inherit] flex-col overflow-y-auto rounded-corner-xl bg-surface-container-high p-6 shadow-elevation-3',
-        'max-sm:h-full max-sm:rounded-none max-sm:p-0 max-sm:pt-[env(safe-area-inset-top)]' => $fullscreen,
+        'max-sm:h-full max-sm:rounded-none max-sm:p-0 max-sm:pt-[var(--material-safe-top,env(safe-area-inset-top))]' => $fullscreen,
         $boxClass,
     ])>
         @if ($fullscreen)

resources/views/showcase/shell.blade.php

@@ -59,7 +59,7 @@
             </x-slot:actions>
 
             <x-slot:top>
-                <header class="sticky top-0 z-20 flex h-16 items-center gap-1 bg-surface px-1 pt-[env(safe-area-inset-top)] sm:px-4">
+                <header class="sticky top-0 z-20 flex h-16 items-center gap-1 bg-surface px-1 pt-[var(--material-safe-top,env(safe-area-inset-top))] sm:px-4">
                     <span class="sm:hidden"><x-livewire-material::button icon="menu" tooltip="Open navigation" x-data x-on:click="$store.rail.show()" data-test="shell-menu" /></span>
                     <h1 class="min-w-0 flex-1 truncate px-3 type-title-lg sm:px-0">{{ $current['title'] }}</h1>
                     <x-livewire-material::button icon="search" tooltip="Search" />