zabi-components 8.1.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (273) hide show
  1. package/CHANGELOG.md +1011 -0
  2. package/README.md +1 -1
  3. package/THEME.md +18 -5
  4. package/THEMING.md +308 -74
  5. package/dist/atoms/ActionPanel.svelte +1 -1
  6. package/dist/atoms/Avatar.svelte +19 -3
  7. package/dist/atoms/Avatar.svelte.d.ts +12 -0
  8. package/dist/atoms/Badge.svelte +37 -8
  9. package/dist/atoms/Badge.svelte.d.ts +6 -0
  10. package/dist/atoms/Block.svelte +74 -0
  11. package/dist/atoms/Block.svelte.d.ts +29 -0
  12. package/dist/atoms/Button.svelte +52 -15
  13. package/dist/atoms/Button.svelte.d.ts +3 -2
  14. package/dist/atoms/Card.svelte +181 -25
  15. package/dist/atoms/Card.svelte.d.ts +55 -3
  16. package/dist/atoms/Checkbox.svelte +33 -0
  17. package/dist/atoms/Checkbox.svelte.d.ts +27 -0
  18. package/dist/atoms/Chip.svelte +351 -0
  19. package/dist/atoms/Chip.svelte.d.ts +57 -0
  20. package/dist/atoms/CodeField.svelte +385 -0
  21. package/dist/atoms/CodeField.svelte.d.ts +61 -0
  22. package/dist/atoms/ColorPicker.svelte +1 -0
  23. package/dist/atoms/DateField.svelte +41 -3
  24. package/dist/atoms/DateField.svelte.d.ts +31 -3
  25. package/dist/atoms/FloatingActionButton.svelte +5 -3
  26. package/dist/atoms/FloatingActionButton.svelte.d.ts +1 -1
  27. package/dist/atoms/Heading.svelte +27 -1
  28. package/dist/atoms/Heading.svelte.d.ts +7 -0
  29. package/dist/atoms/IconButton.svelte +81 -9
  30. package/dist/atoms/IconButton.svelte.d.ts +13 -0
  31. package/dist/atoms/Input.svelte +10 -5
  32. package/dist/atoms/Input.svelte.d.ts +3 -2
  33. package/dist/atoms/List.svelte +3 -2
  34. package/dist/atoms/ListItem.svelte +31 -7
  35. package/dist/atoms/ListItem.svelte.d.ts +6 -0
  36. package/dist/atoms/PickerField.svelte +239 -0
  37. package/dist/atoms/PickerField.svelte.d.ts +67 -0
  38. package/dist/atoms/Progress.svelte +78 -17
  39. package/dist/atoms/Progress.svelte.d.ts +11 -1
  40. package/dist/atoms/Radio.svelte +32 -0
  41. package/dist/atoms/Radio.svelte.d.ts +26 -0
  42. package/dist/atoms/Rating.svelte +132 -6
  43. package/dist/atoms/Rating.svelte.d.ts +24 -3
  44. package/dist/atoms/Select.svelte +24 -26
  45. package/dist/atoms/Select.svelte.d.ts +12 -0
  46. package/dist/atoms/SelectionControl.svelte +99 -6
  47. package/dist/atoms/SelectionControl.svelte.d.ts +25 -0
  48. package/dist/atoms/Skeleton.svelte +114 -18
  49. package/dist/atoms/Skeleton.svelte.d.ts +30 -3
  50. package/dist/atoms/SkeletonGroup.svelte +43 -0
  51. package/dist/atoms/SkeletonGroup.svelte.d.ts +20 -0
  52. package/dist/atoms/Slider.svelte +35 -0
  53. package/dist/atoms/Sparkline.svelte +109 -0
  54. package/dist/atoms/Sparkline.svelte.d.ts +27 -0
  55. package/dist/atoms/SpeechBubble.svelte +187 -0
  56. package/dist/atoms/SpeechBubble.svelte.d.ts +33 -0
  57. package/dist/atoms/Stat.svelte +72 -0
  58. package/dist/atoms/Stat.svelte.d.ts +19 -0
  59. package/dist/atoms/TemporalField.svelte +342 -10
  60. package/dist/atoms/TemporalField.svelte.d.ts +20 -4
  61. package/dist/atoms/Textarea.svelte +100 -5
  62. package/dist/atoms/Textarea.svelte.d.ts +21 -0
  63. package/dist/atoms/TimeColumn.svelte +150 -0
  64. package/dist/atoms/TimeColumn.svelte.d.ts +25 -0
  65. package/dist/atoms/TimeField.svelte +46 -3
  66. package/dist/atoms/TimeField.svelte.d.ts +34 -3
  67. package/dist/atoms/Toast.svelte +6 -5
  68. package/dist/atoms/Toggle.svelte +61 -10
  69. package/dist/atoms/Toggle.svelte.d.ts +15 -0
  70. package/dist/atoms/Tooltip.svelte +20 -1
  71. package/dist/atoms/Tooltip.svelte.d.ts +7 -0
  72. package/dist/atoms/index.d.ts +21 -0
  73. package/dist/atoms/index.js +17 -0
  74. package/dist/atoms/selection-control.styles.d.ts +15 -4
  75. package/dist/atoms/selection-control.styles.js +16 -5
  76. package/dist/components/atoms/index.d.ts +21 -0
  77. package/dist/components/atoms/index.d.ts.map +1 -1
  78. package/dist/components/atoms/selection-control.styles.d.ts +15 -4
  79. package/dist/components/atoms/selection-control.styles.d.ts.map +1 -1
  80. package/dist/components/index.d.ts +27 -3
  81. package/dist/components/index.d.ts.map +1 -1
  82. package/dist/components/map.d.ts +11 -0
  83. package/dist/components/map.d.ts.map +1 -0
  84. package/dist/components/molecules/index.d.ts +7 -2
  85. package/dist/components/molecules/index.d.ts.map +1 -1
  86. package/dist/components/molecules/toast-store.d.ts +30 -0
  87. package/dist/components/molecules/toast-store.d.ts.map +1 -1
  88. package/dist/components/organisms/index.d.ts +6 -1
  89. package/dist/components/organisms/index.d.ts.map +1 -1
  90. package/dist/components/types/variants.d.ts +12 -3
  91. package/dist/components/types/variants.d.ts.map +1 -1
  92. package/dist/components/util/app-shell.d.ts +55 -4
  93. package/dist/components/util/app-shell.d.ts.map +1 -1
  94. package/dist/components/util/avatar.d.ts +3 -0
  95. package/dist/components/util/avatar.d.ts.map +1 -1
  96. package/dist/components/util/bottom-tab-bar.d.ts +6 -0
  97. package/dist/components/util/bottom-tab-bar.d.ts.map +1 -1
  98. package/dist/components/util/chart.d.ts +140 -0
  99. package/dist/components/util/chart.d.ts.map +1 -0
  100. package/dist/components/util/chip.d.ts +66 -0
  101. package/dist/components/util/chip.d.ts.map +1 -0
  102. package/dist/components/util/cn.d.ts.map +1 -1
  103. package/dist/components/util/code-field.d.ts +63 -0
  104. package/dist/components/util/code-field.d.ts.map +1 -0
  105. package/dist/components/util/collapsible.d.ts +6 -0
  106. package/dist/components/util/collapsible.d.ts.map +1 -1
  107. package/dist/components/util/display-voice.d.ts +10 -0
  108. package/dist/components/util/display-voice.d.ts.map +1 -0
  109. package/dist/components/util/field-control.d.ts +30 -0
  110. package/dist/components/util/field-control.d.ts.map +1 -0
  111. package/dist/components/util/field.d.ts +6 -0
  112. package/dist/components/util/field.d.ts.map +1 -1
  113. package/dist/components/util/focus-utils.d.ts +2 -0
  114. package/dist/components/util/focus-utils.d.ts.map +1 -1
  115. package/dist/components/util/map-view.d.ts +144 -0
  116. package/dist/components/util/map-view.d.ts.map +1 -0
  117. package/dist/components/util/photo.d.ts +19 -0
  118. package/dist/components/util/photo.d.ts.map +1 -1
  119. package/dist/components/util/progress.d.ts +19 -0
  120. package/dist/components/util/progress.d.ts.map +1 -0
  121. package/dist/components/util/scroll-edge.d.ts +33 -0
  122. package/dist/components/util/scroll-edge.d.ts.map +1 -0
  123. package/dist/components/util/sheet-drag.d.ts +25 -1
  124. package/dist/components/util/sheet-drag.d.ts.map +1 -1
  125. package/dist/components/util/skeleton.d.ts +15 -0
  126. package/dist/components/util/skeleton.d.ts.map +1 -0
  127. package/dist/components/util/sliding-indicator.d.ts +25 -0
  128. package/dist/components/util/sliding-indicator.d.ts.map +1 -0
  129. package/dist/components/util/temporal-field.d.ts +89 -0
  130. package/dist/components/util/temporal-field.d.ts.map +1 -0
  131. package/dist/components/util/toaster.d.ts +40 -0
  132. package/dist/components/util/toaster.d.ts.map +1 -1
  133. package/dist/components/util/tone-surface.d.ts +34 -0
  134. package/dist/components/util/tone-surface.d.ts.map +1 -0
  135. package/dist/components/util/top-navbar.d.ts +26 -2
  136. package/dist/components/util/top-navbar.d.ts.map +1 -1
  137. package/dist/components/util/zabi-strings.d.ts +9 -0
  138. package/dist/components/util/zabi-strings.d.ts.map +1 -1
  139. package/dist/create-theme/cli.js +6 -2
  140. package/dist/create-theme/index.d.ts +17 -3
  141. package/dist/create-theme/index.js +252 -35
  142. package/dist/create-theme/lib/resolve.js +97 -0
  143. package/dist/create-theme/theme-data.js +1618 -90
  144. package/dist/index.d.ts +27 -3
  145. package/dist/index.js +18 -0
  146. package/dist/map.d.ts +10 -0
  147. package/dist/map.js +9 -0
  148. package/dist/molecules/Alert.svelte +31 -12
  149. package/dist/molecules/Alert.svelte.d.ts +12 -1
  150. package/dist/molecules/AppBar.svelte +287 -28
  151. package/dist/molecules/AppBar.svelte.d.ts +62 -0
  152. package/dist/molecules/AvatarGroup.svelte +1 -1
  153. package/dist/molecules/BarChart.svelte +381 -0
  154. package/dist/molecules/BarChart.svelte.d.ts +45 -0
  155. package/dist/molecules/BottomSheet.svelte +88 -20
  156. package/dist/molecules/BottomSheet.svelte.d.ts +17 -1
  157. package/dist/molecules/BottomTabBar.svelte +134 -28
  158. package/dist/molecules/BottomTabBar.svelte.d.ts +36 -2
  159. package/dist/molecules/Calendar.svelte.d.ts +1 -1
  160. package/dist/molecules/ChipGroup.svelte +325 -0
  161. package/dist/molecules/ChipGroup.svelte.d.ts +41 -0
  162. package/dist/molecules/Collapsible.svelte +158 -54
  163. package/dist/molecules/Collapsible.svelte.d.ts +23 -6
  164. package/dist/molecules/CollapsibleGroup.svelte +16 -6
  165. package/dist/molecules/ConfirmDialog.svelte +5 -1
  166. package/dist/molecules/ConfirmDialog.svelte.d.ts +3 -0
  167. package/dist/molecules/Drawer.svelte +33 -12
  168. package/dist/molecules/Dropdown.svelte +9 -1
  169. package/dist/molecules/Dropdown.svelte.d.ts +2 -0
  170. package/dist/molecules/DropdownItem.svelte +1 -1
  171. package/dist/molecules/ImageUpload.svelte +230 -120
  172. package/dist/molecules/ImageUpload.svelte.d.ts +38 -3
  173. package/dist/molecules/LineChart.svelte +459 -0
  174. package/dist/molecules/LineChart.svelte.d.ts +53 -0
  175. package/dist/molecules/MapView.svelte +565 -0
  176. package/dist/molecules/MapView.svelte.d.ts +88 -0
  177. package/dist/molecules/Modal.svelte +11 -6
  178. package/dist/molecules/PhotoGrid.svelte +100 -10
  179. package/dist/molecules/PhotoGrid.svelte.d.ts +11 -0
  180. package/dist/molecules/PhotoViewer.svelte +121 -24
  181. package/dist/molecules/PhotoViewer.svelte.d.ts +18 -0
  182. package/dist/molecules/PieChart.svelte +421 -0
  183. package/dist/molecules/PieChart.svelte.d.ts +51 -0
  184. package/dist/molecules/RadioGroup.svelte +20 -4
  185. package/dist/molecules/RadioGroup.svelte.d.ts +5 -0
  186. package/dist/molecules/SegmentedControl.svelte +136 -3
  187. package/dist/molecules/SegmentedControl.svelte.d.ts +6 -0
  188. package/dist/molecules/SidebarFooter.svelte +1 -1
  189. package/dist/molecules/SidebarNavSection.svelte +1 -1
  190. package/dist/molecules/SortableList.svelte +1 -0
  191. package/dist/molecules/Stepper.svelte +21 -7
  192. package/dist/molecules/StickyActionBar.svelte +67 -8
  193. package/dist/molecules/StickyActionBar.svelte.d.ts +14 -1
  194. package/dist/molecules/Tabs.svelte +79 -2
  195. package/dist/molecules/Toaster.svelte +171 -7
  196. package/dist/molecules/Toaster.svelte.d.ts +60 -2
  197. package/dist/molecules/ToasterToast.svelte +292 -60
  198. package/dist/molecules/ToasterToast.svelte.d.ts +6 -0
  199. package/dist/molecules/UnsavedChangesBar.svelte +13 -2
  200. package/dist/molecules/index.d.ts +7 -2
  201. package/dist/molecules/index.js +4 -0
  202. package/dist/molecules/toast-store.d.ts +30 -0
  203. package/dist/molecules/toast-store.js +4 -1
  204. package/dist/organisms/AppNavigation.svelte +440 -0
  205. package/dist/organisms/AppNavigation.svelte.d.ts +72 -0
  206. package/dist/organisms/AppShell.svelte +539 -39
  207. package/dist/organisms/AppShell.svelte.d.ts +102 -6
  208. package/dist/organisms/AppShellHeaderPart.svelte +163 -0
  209. package/dist/organisms/AppShellHeaderPart.svelte.d.ts +57 -0
  210. package/dist/organisms/SidebarNavigation.svelte +23 -36
  211. package/dist/organisms/SidebarPanel.svelte +10 -14
  212. package/dist/organisms/SidebarPanel.svelte.d.ts +1 -0
  213. package/dist/organisms/SidebarShell.svelte +2 -3
  214. package/dist/organisms/TopNavbar.svelte +117 -28
  215. package/dist/organisms/TopNavbar.svelte.d.ts +22 -1
  216. package/dist/organisms/TopNavbarSheetContent.svelte +145 -0
  217. package/dist/organisms/TopNavbarSheetContent.svelte.d.ts +24 -0
  218. package/dist/organisms/index.d.ts +6 -1
  219. package/dist/organisms/index.js +4 -0
  220. package/dist/types/components.d.ts +17 -1
  221. package/dist/types/components.d.ts.map +1 -1
  222. package/dist/types/index.d.ts +497 -10
  223. package/dist/types/index.d.ts.map +1 -1
  224. package/dist/types/variants.ts +14 -3
  225. package/dist/util/app-shell.d.ts +55 -4
  226. package/dist/util/app-shell.js +32 -7
  227. package/dist/util/avatar.d.ts +3 -0
  228. package/dist/util/bottom-tab-bar.d.ts +6 -0
  229. package/dist/util/chart.d.ts +139 -0
  230. package/dist/util/chart.js +305 -0
  231. package/dist/util/chip.d.ts +65 -0
  232. package/dist/util/chip.js +58 -0
  233. package/dist/util/cn.js +28 -2
  234. package/dist/util/code-field.d.ts +62 -0
  235. package/dist/util/code-field.js +112 -0
  236. package/dist/util/collapsible.d.ts +6 -0
  237. package/dist/util/display-voice.d.ts +9 -0
  238. package/dist/util/display-voice.js +9 -0
  239. package/dist/util/field-control.d.ts +29 -0
  240. package/dist/util/field-control.js +32 -0
  241. package/dist/util/field.d.ts +6 -0
  242. package/dist/util/focus-utils.d.ts +2 -0
  243. package/dist/util/focus-utils.js +4 -0
  244. package/dist/util/map-view.d.ts +143 -0
  245. package/dist/util/map-view.js +121 -0
  246. package/dist/util/photo.d.ts +19 -0
  247. package/dist/util/photo.js +3 -0
  248. package/dist/util/progress.d.ts +18 -0
  249. package/dist/util/progress.js +17 -0
  250. package/dist/util/scroll-edge.d.ts +32 -0
  251. package/dist/util/scroll-edge.js +87 -0
  252. package/dist/util/sheet-drag.d.ts +25 -1
  253. package/dist/util/sheet-drag.js +71 -1
  254. package/dist/util/skeleton.d.ts +14 -0
  255. package/dist/util/skeleton.js +22 -0
  256. package/dist/util/sliding-indicator.d.ts +24 -0
  257. package/dist/util/sliding-indicator.js +44 -0
  258. package/dist/util/temporal-field.d.ts +88 -0
  259. package/dist/util/temporal-field.js +136 -0
  260. package/dist/util/toaster.d.ts +40 -0
  261. package/dist/util/toaster.js +55 -0
  262. package/dist/util/tone-surface.d.ts +33 -0
  263. package/dist/util/tone-surface.js +35 -0
  264. package/dist/util/top-navbar.d.ts +26 -2
  265. package/dist/util/top-navbar.js +23 -0
  266. package/dist/util/zabi-strings.d.ts +9 -0
  267. package/dist/zabi-components-colors.css +9 -3
  268. package/dist/zabi-components-theme-dark-only.css +474 -164
  269. package/dist/zabi-components-theme-dark.css +474 -164
  270. package/dist/zabi-components-theme-only.css +933 -99
  271. package/dist/zabi-components-theme.css +933 -99
  272. package/dist/zabi-components.css +2275 -321
  273. package/package.json +11 -1
package/dist/organisms/AppShell.svelte CHANGED
@@ -2,8 +2,17 @@
2
2
  import type { Snippet } from "svelte";
3
3
  import type { HTMLAttributes } from "svelte/elements";
4
4
  import { untrack } from "svelte";
5
- import { markAppShell, publishAppShellInsets } from "../util/app-shell.js";
5
+ import {
6
+ APP_SHELL_RAIL_MIN_WIDTH,
7
+ APP_SHELL_SIDEBAR_MIN_WIDTH,
8
+ markAppShell,
9
+ publishAppShellInsets,
10
+ type AppShellNavigationContext,
11
+ type AppShellNavigationMode,
12
+ type AppShellNavigationPlacement,
13
+ } from "../util/app-shell.js";
6
14
  import { cn } from "../util/cn.js";
15
+ import { watchScrollEdge } from "../util/scroll-edge.js";
7
16
 
8
17
  /**
9
18
  * The layout of a phone app: a bar at the top, content that scrolls, a
@@ -12,7 +21,9 @@
12
21
  *
13
22
  * The shell is exactly as tall as the visible screen (`100dvh`, so the
14
23
  * browser's own bars are accounted for) and only the middle scrolls. The
15
- * header stays at the top of that scrolling area; the footer sits below it.
24
+ * header stays at the top of that scrolling area. The footer lies over
25
+ * the bottom of it, so content passes beneath both bars: they are the
26
+ * page colour at rest and turn to glass once content is under them.
16
27
  *
17
28
  * ```svelte
18
29
  * <AppShell>
@@ -30,11 +41,40 @@
30
41
  * take, safe areas included, so anything inside the shell can stay clear
31
42
  * of them:
32
43
  *
33
- * - `--app-shell-top-inset`: the height of the header;
44
+ * - `--app-shell-top-inset`: the height of the header (with an `AppBar`
45
+ * `largeTitle`, the height it condenses to);
34
46
  * - `--app-shell-bottom-inset`: the height of the footer.
35
47
  *
36
- * Without a bar the value is the safe-area inset alone. The host is the
37
- * containing block for anything positioned inside it, and such an element
48
+ * Without a bar the value is the safe-area inset alone. With a footer the
49
+ * content takes the bottom inset as padding and the scroller as
50
+ * `scroll-padding-bottom`, so the end of the content and a focused field
51
+ * clear the footer.
52
+ *
53
+ * A third, on the scroller, is for what sits in the content and has to
54
+ * stay above the footer (`StickyActionBar` and `UnsavedChangesBar` read it):
55
+ *
56
+ * - `--app-shell-footer-overlay`: the bottom inset when a footer lies over
57
+ * the scroller, `0px` when there is no footer.
58
+ *
59
+ * The host also says where content is: `data-scrolled-top="true"` once it
60
+ * has scrolled under the header, `data-scrolled-bottom="true"` while it
61
+ * passes under the footer (both `"false"` on the server and before the
62
+ * first measurement). The bars read the same state.
63
+ *
64
+ * To let the consumer choose what stays, compose the header from
65
+ * `AppShellHeaderPart`s: each says `sticky` (the default) or `sticky={false}`
66
+ * and scrolls away with the content, so a bar can leave while the filter
67
+ * row stays, or a large title can go while the bar and the tabs stay. The
68
+ * shell measures the parts to stack the ones that stick, reports only
69
+ * what is stuck as `--app-shell-top-inset` and `scroll-padding-top`, and
70
+ * puts the glass and the hairline under the lowest one. Without parts the
71
+ * header is one block that sticks, as before.
72
+ *
73
+ * With `canvas` the shell is painted with the page colour and the brand
74
+ * wash (`bg-canvas`), and the header bar rests transparent so the wash
75
+ * shows through it.
76
+ *
77
+ * The host is the containing block for anything positioned inside it, and such an element
38
78
  * does not scroll with the content, so a floating button above the tab bar
39
79
  * is `absolute` with `bottom: calc(var(--app-shell-bottom-inset) + 1rem)`.
40
80
  *
@@ -42,9 +82,41 @@
42
82
  * `<html>`, so an overlay that is moved to `document.body` (a sheet, a
43
83
  * toast) can read them too. With more than one shell on the page, the one
44
84
  * mounted last is the one mirrored there.
85
+ *
86
+ * With `navigation` the shell holds one navigation that is drawn as tabs
87
+ * over the bottom of the screen on a phone, a rail on a tablet and a
88
+ * sidebar on a desktop, and the app writes one layout, not three
89
+ * (`AppNavigation` is the ready-made content). The snippet is rendered
90
+ * once and only CSS moves it, so the server's markup is right at every
91
+ * width and nothing jumps when scripts load. As tabs it lies over the
92
+ * bottom like `footer` (the footer then sits directly above it); as a
93
+ * rail or sidebar it is a full-height column at the inline start, and the
94
+ * header, content and footer take the rest. The host says which with
95
+ * `data-navigation-placement`, and the bottom inset counts the tabs, so a
96
+ * sticky action bar or a floating button clears them too.
97
+ *
98
+ * ```svelte
99
+ * <AppShell>
100
+ * {#snippet header()}<AppBar title="Quizrundan" largeTitle />{/snippet}
101
+ * {#snippet navigation()}<AppNavigation {items} active={page.url.pathname} />{/snippet}
102
+ * <div class="p-4">…</div>
103
+ * </AppShell>
104
+ * ```
105
+ *
106
+ * One more custom property: `--app-shell-start-inset`, the width of the
107
+ * rail or sidebar (`0px` as tabs), also mirrored onto `<html>`.
108
+ *
109
+ * With `flushTop` and no `header` the content starts at the top edge of
110
+ * the screen, under the status bar, so a block of colour at the top of it
111
+ * can run there. The content then handles the safe area itself: pad by
112
+ * `--app-shell-top-inset`, or let an `AppBar position="static"` in the
113
+ * block do it.
45
114
  */
46
115
  type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> & {
47
- /** The top bar, an `AppBar`. It handles the safe area above it. */
116
+ /**
117
+ * The top bar, an `AppBar`. It handles the safe area above it. Or
118
+ * several `AppShellHeaderPart`s, each of which sticks or scrolls away.
119
+ */
48
120
  header?: Snippet;
49
121
  /** The scrolling content, rendered in the element `contentElement` names. */
50
122
  children?: Snippet;
@@ -55,8 +127,40 @@
55
127
  * its own.
56
128
  */
57
129
  contentElement?: "main" | "div";
58
- /** The bottom bar, a `BottomTabBar`. It handles the safe area below it. */
130
+ /**
131
+ * The bottom bar, a `BottomTabBar`. It lies over the bottom of the
132
+ * scrolling area and handles the safe area below it.
133
+ */
59
134
  footer?: Snippet;
135
+ /**
136
+ * Paints the shell with the page colour and the brand wash (`bg-canvas`)
137
+ * instead of the plain page colour, and lets the wash show through the
138
+ * header bar at rest.
139
+ */
140
+ canvas?: boolean;
141
+ /**
142
+ * One navigation, drawn as tabs, a rail or a sidebar by
143
+ * `navigationPlacement`. Rendered once, first in the DOM: the Tab order
144
+ * is navigation, header, content. `placement` is the forced value, or
145
+ * in `auto` what the viewport says once mounted (`tabs` on the server
146
+ * and before mount); use it only to render different markup per
147
+ * placement, since the layout itself is CSS and right without it.
148
+ */
149
+ navigation?: Snippet<[AppShellNavigationContext]>;
150
+ /**
151
+ * Where the `navigation` goes. `auto` follows the viewport in CSS:
152
+ * tabs below 48rem (768px), a rail from 48rem, a sidebar from 64rem
153
+ * (1024px). The others apply at every width.
154
+ */
155
+ navigationPlacement?: AppShellNavigationMode;
156
+ /**
157
+ * Without a `header`, leaves out the padding the content has for the
158
+ * status bar and the notch, so it starts at the top of the screen and
159
+ * handles the safe area itself. `--app-shell-top-inset` keeps its
160
+ * value. With a `header` it does nothing: the header covers the safe
161
+ * area.
162
+ */
163
+ flushTop?: boolean;
60
164
  class?: string;
61
165
  /** Added after the two custom properties the shell sets. */
62
166
  style?: string;
@@ -67,13 +171,15 @@
67
171
  children,
68
172
  contentElement = "main",
69
173
  footer,
174
+ canvas = false,
175
+ navigation,
176
+ navigationPlacement = "auto",
177
+ flushTop = false,
70
178
  class: className = "",
71
179
  style = "",
72
180
  ...restProps
73
181
  }: Props = $props();
74
182
 
75
- markAppShell();
76
-
77
183
  let headerRegion: HTMLDivElement | undefined = $state();
78
184
  let footerRegion: HTMLDivElement | undefined = $state();
79
185
  /** Measured heights in px; null on the server and until the first measurement. */
@@ -85,9 +191,9 @@
85
191
  * heights of AppBar and BottomTabBar. The real size replaces it once the
86
192
  * shell runs, which matters when the text is enlarged or a label wraps.
87
193
  */
88
- // In px: AppBar and BottomTabBar keep their height when the text is enlarged.
89
- const HEADER_ESTIMATE = "calc(57px + env(safe-area-inset-top, 0px))";
90
- const FOOTER_ESTIMATE = "calc(65px + env(safe-area-inset-bottom, 0px))";
194
+ // In px: AppBar (56) and BottomTabBar (64) keep their height when the text is enlarged.
195
+ const HEADER_ESTIMATE = "calc(56px + env(safe-area-inset-top, 0px))";
196
+ const FOOTER_ESTIMATE = "calc(64px + env(safe-area-inset-bottom, 0px))";
91
197
 
92
198
  function track(region: HTMLElement | undefined, set: (height: number | null) => void) {
93
199
  if (!region) {
@@ -106,55 +212,293 @@
106
212
  return () => observer.disconnect();
107
213
  }
108
214
 
215
+ let navRegion: HTMLDivElement | undefined = $state();
216
+ /** Measured size of the navigation region in px; null on the server and until the first measurement. */
217
+ let navBox = $state<{ width: number; height: number } | null>(null);
218
+ /** What the viewport says in `auto`, after mount. `tabs` before, as on the server. */
219
+ let viewportPlacement = $state<AppShellNavigationPlacement>("tabs");
220
+ const placement = $derived<AppShellNavigationPlacement>(
221
+ navigationPlacement === "auto" ? viewportPlacement : navigationPlacement,
222
+ );
223
+ /** The navigation lies over the bottom of the scroller, like a footer. */
224
+ const navigationOverlays = $derived(!!navigation && placement === "tabs");
225
+
226
+ // The same two breakpoints as the stylesheet below, for the `placement` the snippet is given.
227
+ $effect(() => {
228
+ if (!navigation || navigationPlacement !== "auto") return;
229
+ if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
230
+ const rail = window.matchMedia(`(min-width: ${APP_SHELL_RAIL_MIN_WIDTH})`);
231
+ const sidebar = window.matchMedia(`(min-width: ${APP_SHELL_SIDEBAR_MIN_WIDTH})`);
232
+ const read = () => {
233
+ viewportPlacement = sidebar.matches ? "sidebar" : rail.matches ? "rail" : "tabs";
234
+ };
235
+ read();
236
+ rail.addEventListener?.("change", read);
237
+ sidebar.addEventListener?.("change", read);
238
+ return () => {
239
+ rail.removeEventListener?.("change", read);
240
+ sidebar.removeEventListener?.("change", read);
241
+ };
242
+ });
243
+
244
+ $effect(() => {
245
+ const region = navRegion;
246
+ if (!region) {
247
+ navBox = null;
248
+ return;
249
+ }
250
+ const measure = () => {
251
+ const { width, height } = region.getBoundingClientRect();
252
+ navBox = width > 0 && height > 0 ? { width, height } : null;
253
+ };
254
+ measure();
255
+ if (typeof ResizeObserver === "undefined") return;
256
+ const observer = new ResizeObserver(measure);
257
+ observer.observe(region);
258
+ return () => observer.disconnect();
259
+ });
260
+
261
+ let scroller: HTMLDivElement | undefined = $state();
262
+ /** Content is under the header / the footer. False until the browser has measured. */
263
+ let scrolledTop = $state(false);
264
+ let scrolledBottom = $state(false);
265
+ /** How far the header wrapper sticks above the top of the scroller: a large title's row (px). */
266
+ let headerOverscroll = $state(0);
267
+ /**
268
+ * What the `AppShellHeaderPart`s measure to: the px that cover content while
269
+ * the stuck parts are stuck (status bar strip included) and how far the
270
+ * content scrolls before it passes under them. Null without parts, on the
271
+ * server and until measured.
272
+ */
273
+ let partsLayout = $state<{ inset: number; threshold: number } | null>(null);
274
+ let strip: HTMLDivElement | undefined = $state();
275
+
276
+ markAppShell({
277
+ get scrolledTop() {
278
+ return scrolledTop;
279
+ },
280
+ get scrolledBottom() {
281
+ return scrolledBottom;
282
+ },
283
+ get footerOverlays() {
284
+ return !!footer || navigationOverlays;
285
+ },
286
+ get footerHeight() {
287
+ return (footer ? (footerHeight ?? 0) : 0) + (navigationOverlays ? (navBox?.height ?? 0) : 0);
288
+ },
289
+ get navigationPlacement() {
290
+ return navigation ? placement : "tabs";
291
+ },
292
+ setHeaderOverscroll(px) {
293
+ headerOverscroll = px > 0 ? px : 0;
294
+ },
295
+ });
296
+
297
+ $effect(() => {
298
+ if (!scroller) return;
299
+ // Under the header means past the large title's row, when there is one.
300
+ return watchScrollEdge(
301
+ scroller,
302
+ (edge) => {
303
+ scrolledTop = edge.top;
304
+ scrolledBottom = edge.bottom;
305
+ },
306
+ partsLayout ? partsLayout.threshold : headerOverscroll,
307
+ );
308
+ });
309
+
310
+ /** Stuck parts may cover this much of the scroller; the lower ones then scroll (WCAG 2.4.11, 200% text). */
311
+ const PARTS_MAX_COVER = 0.4;
312
+
313
+ $effect(() => {
314
+ const region = headerRegion;
315
+ const area = scroller;
316
+ if (!region || !area) {
317
+ partsLayout = null;
318
+ return;
319
+ }
320
+ const partsOf = () =>
321
+ Array.from(region.querySelectorAll<HTMLElement>(":scope > [data-app-shell-part]"));
322
+ const heightOf = (part: HTMLElement) => part.getBoundingClientRect().height;
323
+
324
+ const layout = () => {
325
+ const parts = partsOf();
326
+ const env = strip ? strip.getBoundingClientRect().height : 0;
327
+ const heights = parts.map(heightOf);
328
+ // No parts, or no layout (a hidden shell, a test DOM): the header measure applies.
329
+ if (parts.length === 0 || heights.every((height) => height === 0)) {
330
+ for (const part of parts) part.removeAttribute("data-released");
331
+ partsLayout = null;
332
+ return;
333
+ }
334
+ const overscrolls = parts.map((part) => Number(part.dataset.overscroll) || 0);
335
+ let natural = 0;
336
+ const items = parts.map((part, index) => {
337
+ const top = natural;
338
+ natural += heights[index];
339
+ return {
340
+ part,
341
+ natural: top,
342
+ height: heights[index],
343
+ overscroll: overscrolls[index],
344
+ sticky: part.dataset.sticky === "true",
345
+ // Pads the status bar itself: an AppBar, or the part at the very top.
346
+ atTop: index === 0 || part.querySelector("[data-appbar]") !== null,
347
+ };
348
+ });
349
+ const stuck = items.filter((item) => item.sticky);
350
+ // The stack, top down, for the first `count` stuck parts.
351
+ const stack = (count: number) => {
352
+ let cover = 0;
353
+ const placed = stuck.slice(0, count).map((item, index) => {
354
+ if (index === 0) cover = item.atTop ? 0 : env;
355
+ const top = cover - item.overscroll;
356
+ cover = top + item.height;
357
+ return { item, top };
358
+ });
359
+ return { placed, cover: placed.length ? cover : env };
360
+ };
361
+ let count = stuck.length;
362
+ const limit = area.clientHeight * PARTS_MAX_COVER;
363
+ // Keep at least the first: a stack of one is the author's choice.
364
+ while (count > 1 && area.clientHeight > 0 && stack(count).cover > limit) count -= 1;
365
+ const { placed, cover } = stack(count);
366
+ const released = new Set(stuck.slice(count).map((item) => item.part));
367
+ for (const item of items) {
368
+ if (released.has(item.part)) item.part.setAttribute("data-released", "");
369
+ else item.part.removeAttribute("data-released");
370
+ }
371
+ for (const { item, top } of placed) {
372
+ item.part.style.setProperty("--app-shell-part-top", `${top}px`);
373
+ }
374
+ const last = placed[placed.length - 1];
375
+ // Content is under the stuck parts once the lowest has reached its place.
376
+ const threshold = last ? Math.max(0, last.item.natural - last.top) : 0;
377
+ const current = untrack(() => partsLayout);
378
+ if (!current || current.inset !== cover || current.threshold !== threshold) {
379
+ partsLayout = { inset: cover, threshold };
380
+ }
381
+ };
382
+
383
+ const resize = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(layout);
384
+ const watch = () => {
385
+ if (!resize) return;
386
+ resize.disconnect();
387
+ resize.observe(area);
388
+ if (strip) resize.observe(strip);
389
+ for (const part of partsOf()) resize.observe(part);
390
+ };
391
+ // Parts come and go, and `sticky` and a large title's height change.
392
+ const changes =
393
+ typeof MutationObserver === "undefined"
394
+ ? undefined
395
+ : new MutationObserver(() => {
396
+ watch();
397
+ layout();
398
+ });
399
+ changes?.observe(region, {
400
+ childList: true,
401
+ subtree: true,
402
+ attributes: true,
403
+ attributeFilter: ["data-sticky", "data-overscroll"],
404
+ });
405
+ watch();
406
+ untrack(layout);
407
+ return () => {
408
+ resize?.disconnect();
409
+ changes?.disconnect();
410
+ partsLayout = null;
411
+ };
412
+ });
413
+
109
414
  $effect(() => track(headerRegion, (height) => (headerHeight = height)));
110
415
  $effect(() => track(footerRegion, (height) => (footerHeight = height)));
111
416
 
112
417
  const topInset = $derived(
113
418
  !header
114
419
  ? "env(safe-area-inset-top, 0px)"
115
- : headerHeight === null
116
- ? HEADER_ESTIMATE
117
- : `${headerHeight}px`,
420
+ : partsLayout
421
+ ? `${partsLayout.inset}px`
422
+ : headerHeight === null
423
+ ? HEADER_ESTIMATE
424
+ : // What covers content while scrolled: the header less the large row that scrolls away.
425
+ `${Math.max(0, headerHeight - headerOverscroll)}px`,
118
426
  );
427
+ /** The footer's height: measured, or the estimate. */
428
+ const footerPart = $derived(
429
+ footer ? (footerHeight === null ? FOOTER_ESTIMATE : `${footerHeight}px`) : null,
430
+ );
431
+ /** The tabs' height when the navigation lies over the bottom: measured, or the estimate. */
432
+ const navigationPart = $derived(
433
+ navigationOverlays ? (navBox === null ? FOOTER_ESTIMATE : `${navBox.height}px`) : null,
434
+ );
435
+ /**
436
+ * What lies over the bottom of the content, resolved for the placement the
437
+ * script knows. The host itself says it in CSS (see `hostStyle`), which is
438
+ * right before any script runs; this value is for `<html>`, where the
439
+ * stylesheet's own properties do not reach.
440
+ */
119
441
  const bottomInset = $derived(
120
- !footer
121
- ? "env(safe-area-inset-bottom, 0px)"
122
- : footerHeight === null
123
- ? FOOTER_ESTIMATE
124
- : `${footerHeight}px`,
442
+ footerPart && navigationPart
443
+ ? `calc(${footerPart} + ${navigationPart})`
444
+ : (footerPart ?? navigationPart ?? "env(safe-area-inset-bottom, 0px)"),
445
+ );
446
+ const startInset = $derived(
447
+ !navigation
448
+ ? undefined
449
+ : placement === "tabs"
450
+ ? "0px"
451
+ : navBox
452
+ ? `${navBox.width}px`
453
+ : placement === "rail"
454
+ ? "80px"
455
+ : "256px",
456
+ );
457
+ /**
458
+ * With a navigation the bottom inset and the start inset are CSS
459
+ * expressions over the placement, so they are right on the server; the
460
+ * measured sizes only replace the estimates in them.
461
+ */
462
+ const hostStyle = $derived(
463
+ navigation
464
+ ? `--app-shell-top-inset: ${topInset}; --app-shell-bottom-inset: calc(var(--shell-overlay) + ${footer ? "0px" : "var(--shell-safe-bottom)"}); --app-shell-start-inset: var(--shell-start); --shell-footer: ${footerPart ?? "0px"};${navBox ? ` --shell-nav-h: ${navBox.height}px; --shell-nav-w: ${navBox.width}px;` : ""} ${style}`
465
+ : `--app-shell-top-inset: ${topInset}; --app-shell-bottom-inset: ${bottomInset}; ${style}`,
125
466
  );
126
467
 
127
468
  // On `<html>` as well, for what is rendered outside the shell.
128
469
  let published: ReturnType<typeof publishAppShellInsets> | undefined;
129
470
  $effect(() => {
130
- published = untrack(() => publishAppShellInsets(topInset, bottomInset));
471
+ published = untrack(() => publishAppShellInsets(topInset, bottomInset, startInset));
131
472
  return () => {
132
473
  published?.leave();
133
474
  published = undefined;
134
475
  };
135
476
  });
136
477
  $effect(() => {
137
- published?.update(topInset, bottomInset);
478
+ published?.update(topInset, bottomInset, startInset);
138
479
  });
139
480
 
140
481
  const contentClasses = $derived(
141
- cn(
142
- "min-w-0 flex-1 pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]",
143
- !header && "pt-[env(safe-area-inset-top)]",
144
- !footer && "pb-[env(safe-area-inset-bottom)]",
145
- ),
482
+ navigation
483
+ ? cn(
484
+ // A rail or sidebar clears the inline-start safe area itself: not twice.
485
+ "min-w-0 flex-1 pl-(--shell-content-pl) pr-[env(safe-area-inset-right)]",
486
+ !header && !flushTop && "pt-[env(safe-area-inset-top)]",
487
+ // Whatever lies over the bottom (footer, tabs), or the safe area alone.
488
+ "pb-(--app-shell-bottom-inset)",
489
+ )
490
+ : cn(
491
+ "min-w-0 flex-1 pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]",
492
+ !header && !flushTop && "pt-[env(safe-area-inset-top)]",
493
+ // With a footer over the scroller the content ends above it.
494
+ footer ? "pb-(--app-shell-bottom-inset)" : "pb-[env(safe-area-inset-bottom)]",
495
+ ),
146
496
  );
497
+ /** Whether the content ends above something that lies over the scroller. */
498
+ const padsBottom = $derived(!!footer || !!navigation);
147
499
  </script>
148
500
 
149
- <div
150
- data-app-shell
151
- class={cn(
152
- "relative flex h-dvh w-full flex-col overflow-hidden bg-background text-body",
153
- className,
154
- )}
155
- style="--app-shell-top-inset: {topInset}; --app-shell-bottom-inset: {bottomInset}; {style}"
156
- {...restProps}
157
- >
501
+ {#snippet body()}
158
502
  <!--
159
503
  The header is inside the scrolling area and sticks to its top. It keeps
160
504
  its place in the flow, so the content starts below it with nothing to
@@ -162,15 +506,40 @@
162
506
  content moving. scroll-padding keeps a focused field from landing under it.
163
507
  -->
164
508
  <div
509
+ bind:this={scroller}
165
510
  data-app-shell-scroller
166
- class="flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-y-contain scroll-pt-(--app-shell-top-inset)"
511
+ class={cn(
512
+ "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-y-contain scroll-pt-(--app-shell-top-inset)",
513
+ // Shared with StickyActionBar's reservation: the larger one is set inline.
514
+ padsBottom && "scroll-pb-(--app-shell-bottom-inset)",
515
+ )}
516
+ style="--app-shell-footer-overlay: {navigation
517
+ ? 'var(--shell-overlay)'
518
+ : footer
519
+ ? 'var(--app-shell-bottom-inset)'
520
+ : '0px'}"
167
521
  >
168
522
  {#if header}
523
+ <!-- With header parts: the status bar's strip. Clear at rest, the glass of the bars once
524
+ content is under the stuck parts, so content never shows through the status bar when
525
+ the first part has scrolled away. It takes no room. -->
526
+ <div
527
+ bind:this={strip}
528
+ data-app-shell-strip
529
+ aria-hidden="true"
530
+ data-scrolled-under={String(scrolledTop)}
531
+ class="material-bar app-shell-strip [--color-bar:transparent]"
532
+ ></div>
169
533
  <!-- An empty strip is left when the bar slides away; it must not take taps. -->
170
534
  <div
171
535
  bind:this={headerRegion}
172
536
  data-app-shell-header
173
- class="pointer-events-none sticky top-0 z-sticky shrink-0 *:pointer-events-auto"
537
+ style:top={headerOverscroll > 0 ? `-${headerOverscroll}px` : undefined}
538
+ class={cn(
539
+ "pointer-events-none sticky top-0 z-sticky shrink-0 *:pointer-events-auto",
540
+ // The wash shows through a bar at rest (glass still takes over once scrolled).
541
+ canvas && "[--color-bar:transparent]",
542
+ )}
174
543
  >
175
544
  {@render header()}
176
545
  </div>
@@ -189,8 +558,139 @@
189
558
  {/if}
190
559
  </div>
191
560
  {#if footer}
192
- <div bind:this={footerRegion} data-app-shell-footer class="shrink-0">
561
+ <!-- Over the bottom of the scroller, not a row of its own: content passes beneath it.
562
+ Above the tabs when the navigation is placed there. -->
563
+ <div
564
+ bind:this={footerRegion}
565
+ data-app-shell-footer
566
+ class={cn(
567
+ "absolute inset-x-0",
568
+ navigation ? "bottom-(--shell-nav-bottom)" : "bottom-0",
569
+ "z-sticky",
570
+ )}
571
+ >
193
572
  {@render footer()}
194
573
  </div>
195
574
  {/if}
575
+ {/snippet}
576
+
577
+ <div
578
+ data-app-shell
579
+ class={cn(
580
+ navigation
581
+ ? "relative flex h-dvh w-full overflow-hidden text-body"
582
+ : "relative flex h-dvh w-full flex-col overflow-hidden text-body",
583
+ canvas ? "bg-canvas" : "bg-background",
584
+ className,
585
+ )}
586
+ class:app-shell--nav={!!navigation}
587
+ data-navigation-placement={navigation ? navigationPlacement : undefined}
588
+ data-scrolled-top={String(scrolledTop)}
589
+ data-scrolled-bottom={String(scrolledBottom)}
590
+ style={hostStyle}
591
+ {...restProps}
592
+ >
593
+ {#if navigation}
594
+ <!-- First in the DOM: Tab reaches the navigation, then the header, then the content.
595
+ Over the bottom as tabs, a column at the start as a rail or a sidebar: the stylesheet
596
+ below moves it, the snippet is rendered once. -->
597
+ <div bind:this={navRegion} data-app-shell-navigation class="shell-nav z-sticky">
598
+ {@render navigation({ placement })}
599
+ </div>
600
+ <div data-app-shell-column class="relative flex min-h-0 min-w-0 flex-1 flex-col">
601
+ {@render body()}
602
+ </div>
603
+ {:else}
604
+ {@render body()}
605
+ {/if}
196
606
  </div>
607
+
608
+ <style>
609
+ /*
610
+ * Global on purpose: a scoped class would be added to every element of the
611
+ * shell, and a shell without `navigation` renders what it always did.
612
+ *
613
+ * The navigation's placement is two things: the host's data attribute
614
+ * (forced) or the viewport (`auto`, below 48rem tabs, from 48rem a rail,
615
+ * from 64rem a sidebar: the constants in util/app-shell.ts). Both only set
616
+ * the same two flags; every length the shell uses is derived from them, so
617
+ * the rules are written once. `--is-side` is 1 for a rail or a sidebar,
618
+ * `--is-wide` is 1 for a sidebar. Server and client render the same
619
+ * markup; only these rules decide.
620
+ */
621
+ :global(.app-shell--nav) {
622
+ --is-side: 0;
623
+ --is-wide: 0;
624
+ /* A flex item of the host as a column, over the bottom as tabs. */
625
+ --nav-position: absolute;
626
+ /* What the navigation takes over the bottom: its height as tabs, nothing as a side column. */
627
+ --shell-nav-bottom: calc(
628
+ (1 - var(--is-side)) * var(--shell-nav-h, calc(64px + env(safe-area-inset-bottom, 0px)))
629
+ );
630
+ /* The width of the side column: the estimates until the shell has measured it. */
631
+ --shell-start: calc(var(--is-side) * var(--shell-nav-w, calc(80px + var(--is-wide) * 176px)));
632
+ /* Without a footer, a side column leaves the safe area under the content. Tabs carry their own. */
633
+ --shell-safe-bottom: calc(var(--is-side) * env(safe-area-inset-bottom, 0px));
634
+ /* The side column clears the inline-start safe area itself. */
635
+ --shell-content-pl: calc((1 - var(--is-side)) * env(safe-area-inset-left, 0px));
636
+ /* Everything that lies over the bottom of the content: footer plus tabs. */
637
+ --shell-overlay: calc(var(--shell-footer, 0px) + var(--shell-nav-bottom));
638
+ }
639
+ :global(.app-shell--nav[data-navigation-placement="rail"]),
640
+ :global(.app-shell--nav[data-navigation-placement="sidebar"]) {
641
+ --is-side: 1;
642
+ --nav-position: static;
643
+ }
644
+ :global(.app-shell--nav[data-navigation-placement="sidebar"]) {
645
+ --is-wide: 1;
646
+ }
647
+ @media (min-width: 48rem) {
648
+ :global(.app-shell--nav[data-navigation-placement="auto"]) {
649
+ --is-side: 1;
650
+ --nav-position: static;
651
+ }
652
+ }
653
+ @media (min-width: 64rem) {
654
+ :global(.app-shell--nav[data-navigation-placement="auto"]) {
655
+ --is-wide: 1;
656
+ }
657
+ }
658
+
659
+ /*
660
+ * Header parts. A header whose children are `AppShellHeaderPart`s is not
661
+ * one sticky block: the wrapper drops out of the layout so that each part
662
+ * is a flex item of the scroller and sticks (or not) by itself. The
663
+ * decision is made in CSS, so the server's markup is right.
664
+ */
665
+ :global([data-app-shell-header]:has(> [data-app-shell-part])) {
666
+ display: contents;
667
+ }
668
+ :global(.app-shell-strip) {
669
+ display: none;
670
+ }
671
+ /* The strip is only for parts: the height of the status bar, taking no room, over the stuck parts' place. */
672
+ :global(.app-shell-strip:has(+ [data-app-shell-header] > [data-app-shell-part])) {
673
+ display: block;
674
+ position: sticky;
675
+ top: 0;
676
+ z-index: var(--z-sticky);
677
+ flex-shrink: 0;
678
+ height: env(safe-area-inset-top, 0px);
679
+ margin-bottom: calc(-1 * env(safe-area-inset-top, 0px));
680
+ pointer-events: none;
681
+ }
682
+ /* The surface is the bars' (`material-bar`): glass without the hairline, which belongs to the lowest part. */
683
+ :global(.app-shell-strip::before) {
684
+ border-width: 0;
685
+ }
686
+
687
+ :global(.shell-nav) {
688
+ position: var(--nav-position);
689
+ inset-inline: 0;
690
+ bottom: 0;
691
+ display: flex;
692
+ flex-direction: column;
693
+ flex: none;
694
+ min-height: 0;
695
+ }
696
+ </style>