Safe Area

1<script lang="ts">2	import { SafeArea, Text } from 'omaris';3	import type { Snippet } from 'svelte';4​5	/* A desktop reports no insets, so the frame below pretends: `--safe-top`6	   and `--safe-bottom` are exactly what the component reads, and a notch7	   is nothing more than those two variables arriving with a value. */8	const PHONE = '[--safe-top:44px] [--safe-bottom:34px]';9</script>10​11{#snippet bar(label: string)}12	<div class="rounded-shape-sm bg-primary-container px-3 py-2">13		<Text variant="label-md" class="text-primary-container-foreground">{label}</Text>14	</div>15{/snippet}16​17{#snippet phone(caption: string, children: Snippet)}18	<figure class="flex flex-col items-center gap-2">19		<div20			class="relative h-72 w-52 overflow-hidden rounded-shape-xl border-4 border-foreground/70 bg-surface-container-low {PHONE} max-w-full"21		>22			<div23				class="pointer-events-none absolute inset-x-0 top-0 z-10 h-(--safe-top) bg-destructive/20"24			></div>25			<div26				class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-(--safe-bottom) bg-destructive/20"27			></div>28			{@render children()}29		</div>30		<figcaption><Text variant="label-sm" tone="muted">{caption}</Text></figcaption>31	</figure>32{/snippet}33​34{#snippet bare()}35	<div class="flex h-full flex-col justify-between p-2">36		{@render bar('Header')}37		{@render bar('Footer')}38	</div>39{/snippet}40​41{#snippet safe()}42	<SafeArea class="flex h-full flex-col justify-between p-2">43		{@render bar('Header')}44		{@render bar('Footer')}45	</SafeArea>46{/snippet}47​48<div class="flex flex-wrap justify-center gap-8">49	{@render phone('A plain div', bare)}50	{@render phone('SafeArea', safe)}51</div>

1<script lang="ts">2	import { SafeArea, Text } from 'omaris';3​4	const PHONE = '[--safe-top:44px] [--safe-bottom:34px]';5</script>6​7<div class="flex justify-center">8	<div9		class="relative h-72 w-52 overflow-hidden rounded-shape-xl border-4 border-foreground/70 bg-surface-container-low {PHONE} max-w-full"10	>11		<div12			class="pointer-events-none absolute inset-x-0 top-0 z-10 h-(--safe-top) bg-destructive/20"13		></div>14		<div15			class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-(--safe-bottom) bg-destructive/20"16		></div>17​18		<div class="flex h-full flex-col justify-between">19			<!-- The bar's own background runs under the notch, the way an app's does. -->20			<header class="bg-surface-container-high">21				<SafeArea edges={['top']} min={10} class="px-3 pb-2">22					<Text variant="label-md">Inbox</Text>23				</SafeArea>24			</header>25​26			<footer class="bg-surface-container-high">27				<SafeArea edges={['bottom']} min={10} class="px-3 pt-2">28					<Text variant="label-md">Compose</Text>29				</SafeArea>30			</footer>31		</div>32	</div>33</div>

1<script lang="ts">2	import { safeArea, Text } from 'omaris';3​4	const rows = $derived([5		['top', safeArea.top],6		['bottom', safeArea.bottom],7		['start', safeArea.start],8		['end', safeArea.end],9		['keyboard', safeArea.keyboard]10	] as const);11</script>12​13<div class="flex flex-col gap-3">14	<dl class="grid w-fit grid-cols-2 gap-x-6 gap-y-1 font-mono text-sm tabular-nums">15		{#each rows as [name, px] (name)}16			<dt class="text-muted-foreground">{name}</dt>17			<dd class="text-end">{px}px</dd>18		{/each}19	</dl>20​21	<Text variant="body-sm" tone="muted">22		{safeArea.supported23			? 'This browser understands env(safe-area-inset-*).'24			: 'This browser has no env(safe-area-inset-*).'}25		{safeArea.inset26			? ' Something is in the way.'27			: ' Nothing is in the way — a window has no notch, and a page without viewport-fit=cover is never told about one.'}28	</Text>29</div>

1<script lang="ts">2	import { Button, SafeArea, Text } from 'omaris';3​4	const PHONE = '[--safe-top:44px] [--safe-bottom:34px]';5</script>6​7<div class="flex justify-center">8	<div9		class="relative h-72 w-52 overflow-hidden rounded-shape-xl border-4 border-foreground/70 bg-surface-container-low {PHONE} max-w-full"10	>11		<div12			class="pointer-events-none absolute inset-x-0 top-0 z-10 h-(--safe-top) bg-destructive/20"13		></div>14		<div15			class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-(--safe-bottom) bg-destructive/20"16		></div>17​18		<!-- `as="section"`, a floor of 2rem, and a `pt-2` the component's own19		     top padding does not fight — the class prop merges last. -->20		<SafeArea as="section" edges={['top']} min="2rem" class="h-full pt-2">21			<Text variant="label-md" class="px-3">Settings</Text>22		</SafeArea>23​24		<div class="absolute inset-x-0 bottom-0 flex justify-end p-3">25			<SafeArea edges={['bottom']} mode="margin">26				<Button size="sm">Save</Button>27			</SafeArea>28		</div>29	</div>30</div>