@asteby/metacore-theme 2.23.0 → 2.25.1

package/README.md

@@ -66,6 +66,37 @@ the brand painted by `applyBranding`. Import it after your tokens:
 It includes a near-opaque fallback for browsers without `backdrop-filter`
 and for `prefers-reduced-transparency`.
 
+#### Host chrome and mobile floating panel (optional variables)
+
+A host with fixed chrome around the shell publishes its sizes on `:root`. All
+variables are optional and default to `0`/flat: without them the compiled CSS
+behaves exactly as before.
+
+| Variable | Default | Effect |
+|---|---|---|
+| `--app-topbar-h` | `0px` | Fixed top bar: pushes the inset (and `@asteby/metacore-ui` `Sidebar`) down |
+| `--app-notice-h` | `0px` | Notice strip under the top bar (0 when hidden) |
+| `--app-bottombar-h` | `0px` | Bottom dock on mobile: bottom margin of the inset and the mobile sidebar sheet |
+| `--glass-inset-max-height` | `none` | Cap for the inset when the wrapper is not height-bound, e.g. `calc(100svh - var(--app-topbar-h) - var(--app-notice-h) - 1rem)` |
+| `--glass-mobile-gutter` | `0px` | Margin around the inset on phones (e.g. `0.5rem`) |
+| `--glass-mobile-radius` | `0px` | Corner radius of the inset on phones (e.g. `var(--glass-radius)`) |
+| `--glass-mobile-border-width` | `0px` | Rim width on phones (e.g. `1px`) |
+| `--glass-mobile-shadow` | `none` | Shadow on phones (e.g. `var(--glass-highlight), var(--glass-shadow)`) |
+
+```css
+:root {
+  --app-topbar-h: 3rem;
+  --app-bottombar-h: 4rem; /* 0 from sm up if the dock is mobile-only */
+  --glass-mobile-gutter: 0.5rem;
+  --glass-mobile-radius: var(--glass-radius);
+  --glass-mobile-border-width: 1px;
+  --glass-mobile-shadow: var(--glass-highlight), var(--glass-shadow);
+}
+```
+
+An inset with no sidebar sibling (chat-like screens) floats on desktop with
+`<SidebarInset data-glass-float>`.
+
 ## Usage from JS/TS
 
 For programmatic access (Storybook, charts, PDF):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-theme",
-  "version": "2.23.0",
+  "version": "2.25.1",
   "description": "Metacore design tokens + Tailwind 4 preset (oklch, shadows, fonts, dark mode)",
   "license": "Apache-2.0",
   "repository": {

package/styles/glass.css

@@ -179,6 +179,29 @@
   overflow: hidden;
 }
 
+/*
+ * ─── Nested surfaces: any plain `.bg-card` inside the shell ───
+ * `.bg-card` already gets translucency + blur from the rule above, but none
+ * of the "floating panel" treatment (rim, lift, clip) that sidebar-inset and
+ * dialogs get — so a card sitting on the page (a settings panel, an empty
+ * state) reads as a flat, barely-differentiated rectangle instead of a
+ * floating one.
+ *
+ * Deliberately NOT `--glass-rim` here: that token is white, meant to catch
+ * light on a panel's OUTER edge against the colorful gradient backdrop
+ * (sidebar-inset, dialogs sit directly on it). A `.bg-card` is nested one
+ * layer deeper, already inside that panel's own blur-diluted near-white
+ * backdrop — a white rim there is white-on-white, invisible. `--border` is
+ * the token already defined above for exactly this ("a dark hairline reads
+ * on white glass, a white one doesn't") — reuse it instead of inventing a
+ * second rim color.
+ */
+[data-ui-theme='glass'] .bg-card {
+  border-color: var(--border);
+  box-shadow: var(--glass-highlight), var(--glass-shadow);
+  background-clip: padding-box;
+}
+
 /*
  * The plain `sidebar` variant is flush to the viewport edge with a border:
  * give it the same 0.5rem gutter the floating/inset variants have, and the
@@ -197,19 +220,53 @@
   width: calc(var(--sidebar-width-icon) + 1rem);
 }
 
+/*
+ * Host chrome awareness. A host with fixed chrome around the app shell
+ * publishes its sizes as CSS variables on :root (all default to 0, so without
+ * them nothing changes):
+ *
+ *   --app-topbar-h     height of a fixed top bar
+ *   --app-notice-h     height of a notice strip under it (0 when hidden)
+ *   --app-bottombar-h  height of a bottom dock (mobile)
+ *
+ * The floating inset leaves them free: top margin = topbar + notice + gutter,
+ * bottom margin (mobile) = bottombar + gutter. Optionally cap the panel with
+ *   --glass-inset-max-height: calc(100svh - var(--app-topbar-h) - var(--app-notice-h) - 1rem);
+ * when the shell wrapper is not height-bound (min-h-svh) — the SDK
+ * SidebarProvider is h-svh, where the panel already stretches to fit.
+ */
 @media (min-width: 768px) {
   [data-ui-theme='glass'] [data-slot='sidebar'][data-variant='sidebar'] ~ [data-slot='sidebar-inset'] {
-    margin: 0.5rem;
+    margin: calc(var(--app-topbar-h, 0px) + var(--app-notice-h, 0px) + 0.5rem) 0.5rem 0.5rem;
     margin-inline-start: 0;
+    max-height: var(--glass-inset-max-height, none);
+  }
+
+  /*
+   * Opt-in: an inset with no sidebar sibling (chat-like screens) floats the
+   * same way with <SidebarInset data-glass-float>.
+   */
+  [data-ui-theme='glass'] [data-slot='sidebar-inset'][data-glass-float] {
+    margin: calc(var(--app-topbar-h, 0px) + var(--app-notice-h, 0px) + 0.5rem) 0.5rem 0.5rem;
+    max-height: var(--glass-inset-max-height, none);
   }
 }
 
 @media (max-width: 767px) {
-  /* No sidebar panel beside it on phones: the inset is the whole screen. */
+  /*
+   * No sidebar panel beside it on phones: by default the inset is the whole
+   * screen, flat. Opt in to a floating panel with --glass-mobile-gutter
+   * (e.g. 0.5rem), --glass-mobile-radius (e.g. var(--glass-radius)),
+   * --glass-mobile-border-width (e.g. 1px) and --glass-mobile-shadow
+   * (e.g. var(--glass-highlight), var(--glass-shadow)).
+   */
   [data-ui-theme='glass'] [data-slot='sidebar-inset'] {
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
+    margin: calc(var(--app-topbar-h, 0px) + var(--app-notice-h, 0px) + var(--glass-mobile-gutter, 0px))
+      var(--glass-mobile-gutter, 0px) calc(var(--app-bottombar-h, 0px) + var(--glass-mobile-gutter, 0px));
+    max-height: var(--glass-inset-max-height, none);
+    border-width: var(--glass-mobile-border-width, 0px);
+    border-radius: var(--glass-mobile-radius, 0px);
+    box-shadow: var(--glass-mobile-shadow, none);
   }
 }
 
@@ -219,7 +276,8 @@
  * gutter, over the dimmed overlay, so it takes the denser popover glass.
  */
 [data-ui-theme='glass'] [data-mobile='true'][data-slot='sidebar'] {
-  inset-block: 0.5rem;
+  inset-block-start: calc(var(--app-topbar-h, 0px) + var(--app-notice-h, 0px) + 0.5rem);
+  inset-block-end: calc(var(--app-bottombar-h, 0px) + 0.5rem);
   inset-inline-start: 0.5rem;
   height: auto;
   background-color: var(--popover);