@inglorious/ui 7.5.0 → 7.6.0

package/README.md

@@ -46,17 +46,22 @@ The public CSS exports are:
 
 ## Safe-area utilities
 
-The base styles also expose CSS variables and utility classes for iPhone notch and home-indicator safe areas.
+The base styles also expose CSS variables and utility classes for the system bars' insets: the notch, rounded corners, the home indicator and Android's status and navigation bars. They are in `base.css`, or on their own in `@inglorious/ui/safe-area.css`.
 
 ```css
 :root {
-  --safe-area-top: env(safe-area-inset-top, 0px);
-  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
-  --safe-area-left: env(safe-area-inset-left, 0px);
-  --safe-area-right: env(safe-area-inset-right, 0px);
+  --safe-area-top: …;
+  --safe-area-bottom: …;
+  --safe-area-left: …;
+  --safe-area-right: …;
 }
 ```
 
+They are `env(safe-area-inset-*)`, with two corrections:
+
+- **In a Capacitor app on Android**, they use the `--safe-area-inset-*` variables Capacitor's SystemBars plugin injects. `env()` alone doubles the status bar on WebViews that Capacitor already pads natively.
+- **In a browser tab, the top inset is 0.** The browser's chrome always sits between the page and the status bar, but browsers that embed a WebView can still report one (DuckDuckGo on Android reports 37px under its toolbar). The top inset applies in the installed PWA and in the native app, which `mount` from `@inglorious/web` marks with the `iw-native` class on `<html>`.
+
 The following utility classes are available:
 
 ```css
@@ -73,5 +78,3 @@ The following utility classes are available:
   padding-right: var(--safe-area-right);
 }
 ```
-
-These are useful for mobile layouts that need to respect notches, rounded corners, and the home indicator. They are intentionally generic utilities so apps can opt into them without having to define custom safe-area values repeatedly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "7.5.0",
+  "version": "7.6.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -35,6 +35,7 @@
     "./navigation.css": "./src/navigation/navigation.css",
     "./surfaces.css": "./src/surfaces/surfaces.css",
     "./tokens.css": "./src/styles/tokens.css",
+    "./safe-area.css": "./src/styles/safe-area.css",
     "./themes/inglorious.css": "./src/styles/themes/inglorious.css",
     "./themes/material.css": "./src/styles/themes/material.css",
     "./themes/bootstrap.css": "./src/styles/themes/bootstrap.css",
@@ -305,10 +306,10 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "10.0.5",
+    "@inglorious/charts": "10.0.6",
     "@inglorious/store": "11.0.3",
     "@inglorious/utils": "5.0.0",
-    "@inglorious/web": "6.5.2"
+    "@inglorious/web": "6.6.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.3.5",
@@ -317,7 +318,7 @@
     "@inglorious/store": "11.0.3",
     "@inglorious/vite-plugin-jsx": "2.0.3",
     "@inglorious/vite-plugin-vue": "1.0.4",
-    "@inglorious/web": "6.5.2",
+    "@inglorious/web": "6.6.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",

package/src/styles/safe-area.css

@@ -1,8 +1,39 @@
+/* The system bars' insets.
+
+   In a native app on Android, Capacitor's SystemBars plugin injects
+   --safe-area-inset-* with the right value in every case: 0 where it pads the
+   WebView natively (WebView < 140), the real inset where the app is
+   edge-to-edge. env() is only right on the newer WebViews, and adding it on top
+   of that native padding doubles the status bar. Everywhere else there is no
+   injected variable, and env() is the fallback.
+
+   The top inset is the exception: in a browser tab the browser's own chrome
+   always sits between the page and the status bar, so it is 0 there even when
+   the browser reports otherwise. Browsers that embed a WebView can (DuckDuckGo
+   on Android says 37px with its toolbar in the way). It only applies where the
+   page can reach the status bar: the installed PWA, and the native app, which
+   `mount` from @inglorious/web marks with `iw-native`. */
 :root {
-  --safe-area-top: env(safe-area-inset-top, 0px);
-  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
-  --safe-area-left: env(safe-area-inset-left, 0px);
-  --safe-area-right: env(safe-area-inset-right, 0px);
+  --safe-area-top: var(--safe-area-inset-top, 0px);
+  --safe-area-bottom: var(
+    --safe-area-inset-bottom,
+    env(safe-area-inset-bottom, 0px)
+  );
+  --safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
+  --safe-area-right: var(
+    --safe-area-inset-right,
+    env(safe-area-inset-right, 0px)
+  );
+}
+
+@media (display-mode: standalone), (display-mode: fullscreen) {
+  :root {
+    --safe-area-top: env(safe-area-inset-top, 0px);
+  }
+}
+
+:root.iw-native {
+  --safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
 }
 
 .pt-safe {