@revikornmann/muka-ui 0.2.3 → 0.2.4

package/dist/cjs/components/BottomBar/BottomBar.css

@@ -121,6 +121,15 @@
   backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   -webkit-backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   padding: var(--bottombar-floating-padding-top) var(--bottombar-floating-margin-x) var(--bottombar-floating-margin-bottom);
+
+  /* The transparent frosted margin around the pill overlays scrolling content;
+     let scroll/taps fall through to that content, keeping only the pill itself
+     interactive (re-enabled on __content below). */
+  pointer-events: none;
+}
+
+.muka-bottombar--floating .muka-bottombar__content {
+  pointer-events: auto;
 }
 
 .muka-bottombar--floating .muka-bottombar__content {

package/dist/cjs/components/TopBar/TopBar.css

@@ -28,6 +28,7 @@
   --tb-title-line-height: var(--text-heading-xs-lineHeight);
   --tb-title-letter-spacing: var(--text-heading-xs-letterSpacing);
   --tb-breadcrumb-display: none;
+  --tb-pad-y: 0;
 }
 
 /* ─── Medium tier ─── */
@@ -58,16 +59,17 @@
   .muka-topbar:not([data-size]) {
     --tb-height: var(--topbar-height-lg);
     --tb-pad: var(--topbar-padding-x-lg);
+    --tb-pad-y: var(--spacing-4);
     --tb-title-position: static;
     --tb-title-left: auto;
     --tb-title-transform: none;
     --tb-title-align: left;
     --tb-title-max-width: none;
-    --tb-title-font-family: var(--text-heading-lg-fontFamily);
-    --tb-title-font-weight: var(--text-heading-lg-fontWeight);
-    --tb-title-font-size: var(--text-heading-lg-fontSize);
-    --tb-title-line-height: var(--text-heading-lg-lineHeight);
-    --tb-title-letter-spacing: var(--text-heading-lg-letterSpacing);
+    --tb-title-font-family: var(--text-heading-md-fontFamily);
+    --tb-title-font-weight: var(--text-heading-md-fontWeight);
+    --tb-title-font-size: var(--text-heading-md-fontSize);
+    --tb-title-line-height: var(--text-heading-md-lineHeight);
+    --tb-title-letter-spacing: var(--text-heading-md-letterSpacing);
     --tb-breadcrumb-display: flex;
   }
 }
@@ -75,16 +77,17 @@
 .muka-topbar[data-size='lg'] {
   --tb-height: var(--topbar-height-lg);
   --tb-pad: var(--topbar-padding-x-lg);
+  --tb-pad-y: var(--spacing-4);
   --tb-title-position: static;
   --tb-title-left: auto;
   --tb-title-transform: none;
   --tb-title-align: left;
   --tb-title-max-width: none;
-  --tb-title-font-family: var(--text-heading-lg-fontFamily);
-  --tb-title-font-weight: var(--text-heading-lg-fontWeight);
-  --tb-title-font-size: var(--text-heading-lg-fontSize);
-  --tb-title-line-height: var(--text-heading-lg-lineHeight);
-  --tb-title-letter-spacing: var(--text-heading-lg-letterSpacing);
+  --tb-title-font-family: var(--text-heading-md-fontFamily);
+  --tb-title-font-weight: var(--text-heading-md-fontWeight);
+  --tb-title-font-size: var(--text-heading-md-fontSize);
+  --tb-title-line-height: var(--text-heading-md-lineHeight);
+  --tb-title-letter-spacing: var(--text-heading-md-letterSpacing);
   --tb-breadcrumb-display: flex;
 }
 
@@ -109,17 +112,11 @@
   border-radius: var(--topbar-drag-handle-radius);
 }
 
-/* ─── Breadcrumb row (large tier) ─────────────────────── */
+/* ─── Breadcrumb (large tier, stacked above the title) ── */
 
 .muka-topbar__breadcrumb {
   display: var(--tb-breadcrumb-display);
   align-items: center;
-  padding: var(--spacing-3) var(--tb-pad) 0;
-}
-
-.muka-topbar:not(.muka-topbar--no-safe-area) .muka-topbar__breadcrumb {
-  padding-left: max(var(--tb-pad), env(safe-area-inset-left));
-  padding-right: max(var(--tb-pad), env(safe-area-inset-right));
 }
 
 /* ─── Container (the bar itself) ──────────────────────── */
@@ -128,8 +125,8 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: var(--tb-height);
-  padding: 0 var(--tb-pad);
+  min-height: var(--tb-height);
+  padding: var(--tb-pad-y) var(--tb-pad);
 }
 
 /* Inset content on iPhone landscape with notch / iPad with curved corners. */
@@ -156,6 +153,36 @@
   display: none;
 }
 
+/* ─── Heading (breadcrumb + title) ────────────────────── */
+
+/* Base/sm/md: transparent wrapper so the title keeps its absolute-centered
+   layout (containing block stays the positioned container) and the breadcrumb
+   stays hidden — identical to the pre-refinement mobile bar. */
+.muka-topbar__heading {
+  display: contents;
+}
+
+/* Large tier: a tight column with the breadcrumb stacked above the title. */
+@media (min-width: 1024px) {
+  .muka-topbar:not([data-size]) .muka-topbar__heading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-1);
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+}
+
+.muka-topbar[data-size='lg'] .muka-topbar__heading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-1);
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
 /* ─── Title ───────────────────────────────────────────── */
 
 .muka-topbar__title {

package/dist/cjs/components/TopBar/TopBar.js

@@ -29,7 +29,7 @@ const TopBar = ({ title, leading, trailing, trailingSecondary, variant = 'defaul
         disableSafeArea && 'muka-topbar--no-safe-area',
         className,
     ].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsxs)("header", { className: topBarClasses, "data-size": size, children: [variant === 'draggable' && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__drag-handle-container", children: (0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__drag-handle" }) })), breadcrumb && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__breadcrumb", children: breadcrumb })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-topbar__container", children: [leading && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__leading", children: leading })), title && ((0, jsx_runtime_1.jsx)("p", { className: "muka-topbar__title", "aria-live": "polite", children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-topbar__trailing", children: [trailingSecondary && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__trailing-action", children: trailingSecondary })), trailing && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__trailing-action", children: trailing }))] })] }), controlBar && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__controlbar", children: controlBar }))] }));
+    return ((0, jsx_runtime_1.jsxs)("header", { className: topBarClasses, "data-size": size, children: [variant === 'draggable' && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__drag-handle-container", children: (0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__drag-handle" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-topbar__container", children: [leading && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__leading", children: leading })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-topbar__heading", children: [breadcrumb && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__breadcrumb", children: breadcrumb })), title && ((0, jsx_runtime_1.jsx)("p", { className: "muka-topbar__title", "aria-live": "polite", children: title }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "muka-topbar__trailing", children: [trailingSecondary && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__trailing-action", children: trailingSecondary })), trailing && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__trailing-action", children: trailing }))] })] }), controlBar && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__controlbar", children: controlBar }))] }));
 };
 exports.TopBar = TopBar;
 exports.default = exports.TopBar;

package/dist/cjs/components/TopBar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../../../../components/TopBar/TopBar.tsx"],"names":[],"mappings":";;;;AACA,wBAAsB;AA8CtB;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,eAAe,GAAG,KAAK,EACvB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,aAAa,GAAG;QACpB,aAAa;QACb,OAAO,KAAK,WAAW,IAAI,wBAAwB;QACnD,eAAe,IAAI,2BAA2B;QAC9C,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,oCAAQ,SAAS,EAAE,aAAa,eAAa,IAAI,aAC9C,OAAO,KAAK,WAAW,IAAI,CAC1B,gCAAK,SAAS,EAAC,oCAAoC,YACjD,gCAAK,SAAS,EAAC,0BAA0B,GAAG,GACxC,CACP,EAEA,UAAU,IAAI,CACb,gCAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,EAED,iCAAK,SAAS,EAAC,wBAAwB,aACpC,OAAO,IAAI,CACV,gCAAK,SAAS,EAAC,sBAAsB,YAClC,OAAO,GACJ,CACP,EAEA,KAAK,IAAI,CACR,8BAAG,SAAS,EAAC,oBAAoB,eAAW,QAAQ,YACjD,KAAK,GACJ,CACL,EAED,iCAAK,SAAS,EAAC,uBAAuB,aACnC,iBAAiB,IAAI,CACpB,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,iBAAiB,GACd,CACP,EACA,QAAQ,IAAI,CACX,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,QAAQ,GACL,CACP,IACG,IACF,EAEL,UAAU,IAAI,CACb,gCAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,IACM,CACV,CAAC;AACJ,CAAC,CAAC;AAnEW,QAAA,MAAM,UAmEjB;AAEF,kBAAe,cAAM,CAAC"}
+{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../../../../components/TopBar/TopBar.tsx"],"names":[],"mappings":";;;;AACA,wBAAsB;AA8CtB;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,eAAe,GAAG,KAAK,EACvB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,aAAa,GAAG;QACpB,aAAa;QACb,OAAO,KAAK,WAAW,IAAI,wBAAwB;QACnD,eAAe,IAAI,2BAA2B;QAC9C,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,oCAAQ,SAAS,EAAE,aAAa,eAAa,IAAI,aAC9C,OAAO,KAAK,WAAW,IAAI,CAC1B,gCAAK,SAAS,EAAC,oCAAoC,YACjD,gCAAK,SAAS,EAAC,0BAA0B,GAAG,GACxC,CACP,EAED,iCAAK,SAAS,EAAC,wBAAwB,aACpC,OAAO,IAAI,CACV,gCAAK,SAAS,EAAC,sBAAsB,YAClC,OAAO,GACJ,CACP,EAED,iCAAK,SAAS,EAAC,sBAAsB,aAClC,UAAU,IAAI,CACb,gCAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,EAEA,KAAK,IAAI,CACR,8BAAG,SAAS,EAAC,oBAAoB,eAAW,QAAQ,YACjD,KAAK,GACJ,CACL,IACG,EAEN,iCAAK,SAAS,EAAC,uBAAuB,aACnC,iBAAiB,IAAI,CACpB,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,iBAAiB,GACd,CACP,EACA,QAAQ,IAAI,CACX,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,QAAQ,GACL,CACP,IACG,IACF,EAEL,UAAU,IAAI,CACb,gCAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,IACM,CACV,CAAC;AACJ,CAAC,CAAC;AArEW,QAAA,MAAM,UAqEjB;AAEF,kBAAe,cAAM,CAAC"}

package/dist/cjs/components/View/View.css

@@ -50,6 +50,12 @@
   overflow-y: auto;
   overflow-x: clip;
   z-index: 1;
+
+  /* Column flow so the footer (now a scroll-area child) can pin to the bottom and
+     content scrolls *behind* it — letting a floating BottomBar's frosted backdrop
+     reveal the content underneath. */
+  display: flex;
+  flex-direction: column;
 }
 
 /* Inner wrapper constrains content width at the large tier (enterprise desktop)
@@ -57,6 +63,9 @@
    width. Full-bleed below large. */
 .muka-view__body-inner {
   width: 100%;
+  /* Grow on short content so the sticky footer is pushed to the bottom rather
+     than floating mid-screen. */
+  flex: 1 0 auto;
 }
 
 @media (min-width: 1024px) {
@@ -76,6 +85,8 @@
 /* ─── Footer (e.g. BottomBar) ─────────────────────────── */
 
 .muka-view__footer {
+  position: sticky;
+  bottom: 0;
   flex-shrink: 0;
   z-index: 2;
 }

package/dist/cjs/components/View/View.js

@@ -24,7 +24,7 @@ const View = ({ level, title, leading, trailing, trailingSecondary, controlBar,
         `muka-view--surface-${surfaceLevel}`,
         className,
     ].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: viewClasses, "data-size": size, children: [(0, jsx_runtime_1.jsx)(TopBar_1.TopBar, { title: title, leading: leading, trailing: trailing, trailingSecondary: trailingSecondary, controlBar: controlBar, breadcrumb: breadcrumb, size: size }), (0, jsx_runtime_1.jsx)("main", { className: "muka-view__body", children: (0, jsx_runtime_1.jsx)("div", { className: "muka-view__body-inner", children: children }) }), footer && ((0, jsx_runtime_1.jsx)("div", { className: "muka-view__footer", children: footer }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: viewClasses, "data-size": size, children: [(0, jsx_runtime_1.jsx)(TopBar_1.TopBar, { title: title, leading: leading, trailing: trailing, trailingSecondary: trailingSecondary, controlBar: controlBar, breadcrumb: breadcrumb, size: size }), (0, jsx_runtime_1.jsxs)("main", { className: "muka-view__body", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-view__body-inner", children: children }), footer && ((0, jsx_runtime_1.jsx)("div", { className: "muka-view__footer", children: footer }))] })] }));
 };
 exports.View = View;
 exports.default = exports.View;

package/dist/cjs/components/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../components/View/View.tsx"],"names":[],"mappings":";;;;AACA,sCAAmC;AACnC,sBAAoB;AAiDpB;;;;;;;;;;;;GAYG;AACI,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,YAAY,GAAG,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,cAAc,KAAK,EAAE;QACrB,sBAAsB,YAAY,EAAE;QACpC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCAAK,SAAS,EAAE,WAAW,eAAa,IAAI,aAC1C,uBAAC,eAAM,IACL,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EAEF,iCAAM,SAAS,EAAC,iBAAiB,YAC/B,gCAAK,SAAS,EAAC,uBAAuB,YACnC,QAAQ,GACL,GACD,EAEN,MAAM,IAAI,CACT,gCAAK,SAAS,EAAC,mBAAmB,YAC/B,MAAM,GACH,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,IAAI,QA8Cf;AAEF,kBAAe,YAAI,CAAC"}
+{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../components/View/View.tsx"],"names":[],"mappings":";;;;AACA,sCAAmC;AACnC,sBAAoB;AAiDpB;;;;;;;;;;;;GAYG;AACI,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,YAAY,GAAG,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,cAAc,KAAK,EAAE;QACrB,sBAAsB,YAAY,EAAE;QACpC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCAAK,SAAS,EAAE,WAAW,eAAa,IAAI,aAC1C,uBAAC,eAAM,IACL,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EAEF,kCAAM,SAAS,EAAC,iBAAiB,aAC/B,gCAAK,SAAS,EAAC,uBAAuB,YACnC,QAAQ,GACL,EAEL,MAAM,IAAI,CACT,gCAAK,SAAS,EAAC,mBAAmB,YAC/B,MAAM,GACH,CACP,IACI,IACH,CACP,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,IAAI,QA8Cf;AAEF,kBAAe,YAAI,CAAC"}

package/dist/esm/components/BottomBar/BottomBar.css

@@ -121,6 +121,15 @@
   backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   -webkit-backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   padding: var(--bottombar-floating-padding-top) var(--bottombar-floating-margin-x) var(--bottombar-floating-margin-bottom);
+
+  /* The transparent frosted margin around the pill overlays scrolling content;
+     let scroll/taps fall through to that content, keeping only the pill itself
+     interactive (re-enabled on __content below). */
+  pointer-events: none;
+}
+
+.muka-bottombar--floating .muka-bottombar__content {
+  pointer-events: auto;
 }
 
 .muka-bottombar--floating .muka-bottombar__content {

package/dist/esm/components/TopBar/TopBar.css

@@ -28,6 +28,7 @@
   --tb-title-line-height: var(--text-heading-xs-lineHeight);
   --tb-title-letter-spacing: var(--text-heading-xs-letterSpacing);
   --tb-breadcrumb-display: none;
+  --tb-pad-y: 0;
 }
 
 /* ─── Medium tier ─── */
@@ -58,16 +59,17 @@
   .muka-topbar:not([data-size]) {
     --tb-height: var(--topbar-height-lg);
     --tb-pad: var(--topbar-padding-x-lg);
+    --tb-pad-y: var(--spacing-4);
     --tb-title-position: static;
     --tb-title-left: auto;
     --tb-title-transform: none;
     --tb-title-align: left;
     --tb-title-max-width: none;
-    --tb-title-font-family: var(--text-heading-lg-fontFamily);
-    --tb-title-font-weight: var(--text-heading-lg-fontWeight);
-    --tb-title-font-size: var(--text-heading-lg-fontSize);
-    --tb-title-line-height: var(--text-heading-lg-lineHeight);
-    --tb-title-letter-spacing: var(--text-heading-lg-letterSpacing);
+    --tb-title-font-family: var(--text-heading-md-fontFamily);
+    --tb-title-font-weight: var(--text-heading-md-fontWeight);
+    --tb-title-font-size: var(--text-heading-md-fontSize);
+    --tb-title-line-height: var(--text-heading-md-lineHeight);
+    --tb-title-letter-spacing: var(--text-heading-md-letterSpacing);
     --tb-breadcrumb-display: flex;
   }
 }
@@ -75,16 +77,17 @@
 .muka-topbar[data-size='lg'] {
   --tb-height: var(--topbar-height-lg);
   --tb-pad: var(--topbar-padding-x-lg);
+  --tb-pad-y: var(--spacing-4);
   --tb-title-position: static;
   --tb-title-left: auto;
   --tb-title-transform: none;
   --tb-title-align: left;
   --tb-title-max-width: none;
-  --tb-title-font-family: var(--text-heading-lg-fontFamily);
-  --tb-title-font-weight: var(--text-heading-lg-fontWeight);
-  --tb-title-font-size: var(--text-heading-lg-fontSize);
-  --tb-title-line-height: var(--text-heading-lg-lineHeight);
-  --tb-title-letter-spacing: var(--text-heading-lg-letterSpacing);
+  --tb-title-font-family: var(--text-heading-md-fontFamily);
+  --tb-title-font-weight: var(--text-heading-md-fontWeight);
+  --tb-title-font-size: var(--text-heading-md-fontSize);
+  --tb-title-line-height: var(--text-heading-md-lineHeight);
+  --tb-title-letter-spacing: var(--text-heading-md-letterSpacing);
   --tb-breadcrumb-display: flex;
 }
 
@@ -109,17 +112,11 @@
   border-radius: var(--topbar-drag-handle-radius);
 }
 
-/* ─── Breadcrumb row (large tier) ─────────────────────── */
+/* ─── Breadcrumb (large tier, stacked above the title) ── */
 
 .muka-topbar__breadcrumb {
   display: var(--tb-breadcrumb-display);
   align-items: center;
-  padding: var(--spacing-3) var(--tb-pad) 0;
-}
-
-.muka-topbar:not(.muka-topbar--no-safe-area) .muka-topbar__breadcrumb {
-  padding-left: max(var(--tb-pad), env(safe-area-inset-left));
-  padding-right: max(var(--tb-pad), env(safe-area-inset-right));
 }
 
 /* ─── Container (the bar itself) ──────────────────────── */
@@ -128,8 +125,8 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: var(--tb-height);
-  padding: 0 var(--tb-pad);
+  min-height: var(--tb-height);
+  padding: var(--tb-pad-y) var(--tb-pad);
 }
 
 /* Inset content on iPhone landscape with notch / iPad with curved corners. */
@@ -156,6 +153,36 @@
   display: none;
 }
 
+/* ─── Heading (breadcrumb + title) ────────────────────── */
+
+/* Base/sm/md: transparent wrapper so the title keeps its absolute-centered
+   layout (containing block stays the positioned container) and the breadcrumb
+   stays hidden — identical to the pre-refinement mobile bar. */
+.muka-topbar__heading {
+  display: contents;
+}
+
+/* Large tier: a tight column with the breadcrumb stacked above the title. */
+@media (min-width: 1024px) {
+  .muka-topbar:not([data-size]) .muka-topbar__heading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-1);
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+}
+
+.muka-topbar[data-size='lg'] .muka-topbar__heading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-1);
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
 /* ─── Title ───────────────────────────────────────────── */
 
 .muka-topbar__title {

package/dist/esm/components/TopBar/TopBar.js

@@ -26,7 +26,7 @@ export const TopBar = ({ title, leading, trailing, trailingSecondary, variant =
         disableSafeArea && 'muka-topbar--no-safe-area',
         className,
     ].filter(Boolean).join(' ');
-    return (_jsxs("header", { className: topBarClasses, "data-size": size, children: [variant === 'draggable' && (_jsx("div", { className: "muka-topbar__drag-handle-container", children: _jsx("div", { className: "muka-topbar__drag-handle" }) })), breadcrumb && (_jsx("div", { className: "muka-topbar__breadcrumb", children: breadcrumb })), _jsxs("div", { className: "muka-topbar__container", children: [leading && (_jsx("div", { className: "muka-topbar__leading", children: leading })), title && (_jsx("p", { className: "muka-topbar__title", "aria-live": "polite", children: title })), _jsxs("div", { className: "muka-topbar__trailing", children: [trailingSecondary && (_jsx("div", { className: "muka-topbar__trailing-action", children: trailingSecondary })), trailing && (_jsx("div", { className: "muka-topbar__trailing-action", children: trailing }))] })] }), controlBar && (_jsx("div", { className: "muka-topbar__controlbar", children: controlBar }))] }));
+    return (_jsxs("header", { className: topBarClasses, "data-size": size, children: [variant === 'draggable' && (_jsx("div", { className: "muka-topbar__drag-handle-container", children: _jsx("div", { className: "muka-topbar__drag-handle" }) })), _jsxs("div", { className: "muka-topbar__container", children: [leading && (_jsx("div", { className: "muka-topbar__leading", children: leading })), _jsxs("div", { className: "muka-topbar__heading", children: [breadcrumb && (_jsx("div", { className: "muka-topbar__breadcrumb", children: breadcrumb })), title && (_jsx("p", { className: "muka-topbar__title", "aria-live": "polite", children: title }))] }), _jsxs("div", { className: "muka-topbar__trailing", children: [trailingSecondary && (_jsx("div", { className: "muka-topbar__trailing-action", children: trailingSecondary })), trailing && (_jsx("div", { className: "muka-topbar__trailing-action", children: trailing }))] })] }), controlBar && (_jsx("div", { className: "muka-topbar__controlbar", children: controlBar }))] }));
 };
 export default TopBar;
 //# sourceMappingURL=TopBar.js.map

package/dist/esm/components/TopBar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../../../../components/TopBar/TopBar.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AA8CtB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,eAAe,GAAG,KAAK,EACvB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,aAAa,GAAG;QACpB,aAAa;QACb,OAAO,KAAK,WAAW,IAAI,wBAAwB;QACnD,eAAe,IAAI,2BAA2B;QAC9C,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,kBAAQ,SAAS,EAAE,aAAa,eAAa,IAAI,aAC9C,OAAO,KAAK,WAAW,IAAI,CAC1B,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,0BAA0B,GAAG,GACxC,CACP,EAEA,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,EAED,eAAK,SAAS,EAAC,wBAAwB,aACpC,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,sBAAsB,YAClC,OAAO,GACJ,CACP,EAEA,KAAK,IAAI,CACR,YAAG,SAAS,EAAC,oBAAoB,eAAW,QAAQ,YACjD,KAAK,GACJ,CACL,EAED,eAAK,SAAS,EAAC,uBAAuB,aACnC,iBAAiB,IAAI,CACpB,cAAK,SAAS,EAAC,8BAA8B,YAC1C,iBAAiB,GACd,CACP,EACA,QAAQ,IAAI,CACX,cAAK,SAAS,EAAC,8BAA8B,YAC1C,QAAQ,GACL,CACP,IACG,IACF,EAEL,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,IACM,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../../../../components/TopBar/TopBar.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AA8CtB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,eAAe,GAAG,KAAK,EACvB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,aAAa,GAAG;QACpB,aAAa;QACb,OAAO,KAAK,WAAW,IAAI,wBAAwB;QACnD,eAAe,IAAI,2BAA2B;QAC9C,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,kBAAQ,SAAS,EAAE,aAAa,eAAa,IAAI,aAC9C,OAAO,KAAK,WAAW,IAAI,CAC1B,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,0BAA0B,GAAG,GACxC,CACP,EAED,eAAK,SAAS,EAAC,wBAAwB,aACpC,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,sBAAsB,YAClC,OAAO,GACJ,CACP,EAED,eAAK,SAAS,EAAC,sBAAsB,aAClC,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,EAEA,KAAK,IAAI,CACR,YAAG,SAAS,EAAC,oBAAoB,eAAW,QAAQ,YACjD,KAAK,GACJ,CACL,IACG,EAEN,eAAK,SAAS,EAAC,uBAAuB,aACnC,iBAAiB,IAAI,CACpB,cAAK,SAAS,EAAC,8BAA8B,YAC1C,iBAAiB,GACd,CACP,EACA,QAAQ,IAAI,CACX,cAAK,SAAS,EAAC,8BAA8B,YAC1C,QAAQ,GACL,CACP,IACG,IACF,EAEL,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,IACM,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/esm/components/View/View.css

@@ -50,6 +50,12 @@
   overflow-y: auto;
   overflow-x: clip;
   z-index: 1;
+
+  /* Column flow so the footer (now a scroll-area child) can pin to the bottom and
+     content scrolls *behind* it — letting a floating BottomBar's frosted backdrop
+     reveal the content underneath. */
+  display: flex;
+  flex-direction: column;
 }
 
 /* Inner wrapper constrains content width at the large tier (enterprise desktop)
@@ -57,6 +63,9 @@
    width. Full-bleed below large. */
 .muka-view__body-inner {
   width: 100%;
+  /* Grow on short content so the sticky footer is pushed to the bottom rather
+     than floating mid-screen. */
+  flex: 1 0 auto;
 }
 
 @media (min-width: 1024px) {
@@ -76,6 +85,8 @@
 /* ─── Footer (e.g. BottomBar) ─────────────────────────── */
 
 .muka-view__footer {
+  position: sticky;
+  bottom: 0;
   flex-shrink: 0;
   z-index: 2;
 }

package/dist/esm/components/View/View.js

@@ -21,7 +21,7 @@ export const View = ({ level, title, leading, trailing, trailingSecondary, contr
         `muka-view--surface-${surfaceLevel}`,
         className,
     ].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: viewClasses, "data-size": size, children: [_jsx(TopBar, { title: title, leading: leading, trailing: trailing, trailingSecondary: trailingSecondary, controlBar: controlBar, breadcrumb: breadcrumb, size: size }), _jsx("main", { className: "muka-view__body", children: _jsx("div", { className: "muka-view__body-inner", children: children }) }), footer && (_jsx("div", { className: "muka-view__footer", children: footer }))] }));
+    return (_jsxs("div", { className: viewClasses, "data-size": size, children: [_jsx(TopBar, { title: title, leading: leading, trailing: trailing, trailingSecondary: trailingSecondary, controlBar: controlBar, breadcrumb: breadcrumb, size: size }), _jsxs("main", { className: "muka-view__body", children: [_jsx("div", { className: "muka-view__body-inner", children: children }), footer && (_jsx("div", { className: "muka-view__footer", children: footer }))] })] }));
 };
 export default View;
 //# sourceMappingURL=View.js.map

package/dist/esm/components/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../components/View/View.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,YAAY,CAAC;AAiDpB;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,YAAY,GAAG,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,cAAc,KAAK,EAAE;QACrB,sBAAsB,YAAY,EAAE;QACpC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAE,WAAW,eAAa,IAAI,aAC1C,KAAC,MAAM,IACL,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EAEF,eAAM,SAAS,EAAC,iBAAiB,YAC/B,cAAK,SAAS,EAAC,uBAAuB,YACnC,QAAQ,GACL,GACD,EAEN,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,mBAAmB,YAC/B,MAAM,GACH,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../components/View/View.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,YAAY,CAAC;AAiDpB;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,YAAY,GAAG,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,cAAc,KAAK,EAAE;QACrB,sBAAsB,YAAY,EAAE;QACpC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAE,WAAW,eAAa,IAAI,aAC1C,KAAC,MAAM,IACL,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EAEF,gBAAM,SAAS,EAAC,iBAAiB,aAC/B,cAAK,SAAS,EAAC,uBAAuB,YACnC,QAAQ,GACL,EAEL,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,mBAAmB,YAC/B,MAAM,GACH,CACP,IACI,IACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/styles/components/BottomBar.css

@@ -121,6 +121,15 @@
   backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   -webkit-backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   padding: var(--bottombar-floating-padding-top) var(--bottombar-floating-margin-x) var(--bottombar-floating-margin-bottom);
+
+  /* The transparent frosted margin around the pill overlays scrolling content;
+     let scroll/taps fall through to that content, keeping only the pill itself
+     interactive (re-enabled on __content below). */
+  pointer-events: none;
+}
+
+.muka-bottombar--floating .muka-bottombar__content {
+  pointer-events: auto;
 }
 
 .muka-bottombar--floating .muka-bottombar__content {

package/dist/styles/components/View.css

@@ -50,6 +50,12 @@
   overflow-y: auto;
   overflow-x: clip;
   z-index: 1;
+
+  /* Column flow so the footer (now a scroll-area child) can pin to the bottom and
+     content scrolls *behind* it — letting a floating BottomBar's frosted backdrop
+     reveal the content underneath. */
+  display: flex;
+  flex-direction: column;
 }
 
 /* Inner wrapper constrains content width at the large tier (enterprise desktop)
@@ -57,6 +63,9 @@
    width. Full-bleed below large. */
 .muka-view__body-inner {
   width: 100%;
+  /* Grow on short content so the sticky footer is pushed to the bottom rather
+     than floating mid-screen. */
+  flex: 1 0 auto;
 }
 
 @media (min-width: 1024px) {
@@ -76,6 +85,8 @@
 /* ─── Footer (e.g. BottomBar) ─────────────────────────── */
 
 .muka-view__footer {
+  position: sticky;
+  bottom: 0;
   flex-shrink: 0;
   z-index: 2;
 }