@skipleague/design 0.4.7 → 0.4.8

package/dist/BottomNav.js

@@ -97,7 +97,12 @@ export function BottomNav({ tabs, action, groups }) {
     const glow = activeTab?.color
         ? `0 0 22px 4px color-mix(in srgb, ${activeTab.color} 55%, transparent), 0 10px 22px color-mix(in srgb, ${activeTab.color} 30%, transparent)`
         : ACTION_GLOW;
-    return (_jsxs("nav", { style: { position: "relative", flex: "none" }, children: [_jsxs("div", { style: {
+    return (
+    // `display: block` is set explicitly (not left to the nav default) so a host
+    // app's global `nav { display: grid/flex }` rule can't override it and
+    // collapse the full-width bar — the children below rely on normal block flow
+    // (the bar fills the width; the floating "+" is absolutely positioned).
+    _jsxs("nav", { style: { display: "block", position: "relative", flex: "none" }, children: [_jsxs("div", { style: {
                     background: "var(--skl-color-surface)",
                     borderTop: "1px solid var(--skl-color-border)",
                     position: "relative",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skipleague/design",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "SkipUI — the SkipLeague design system: shared tokens and React components for every SkipLeague app.",
   "type": "module",
   "repository": {

package/src/BottomNav.tsx

@@ -168,7 +168,11 @@ export function BottomNav({ tabs, action, groups }: BottomNavProps) {
     : ACTION_GLOW;
 
   return (
-    <nav style={{ position: "relative", flex: "none" }}>
+    // `display: block` is set explicitly (not left to the nav default) so a host
+    // app's global `nav { display: grid/flex }` rule can't override it and
+    // collapse the full-width bar — the children below rely on normal block flow
+    // (the bar fills the width; the floating "+" is absolutely positioned).
+    <nav style={{ display: "block", position: "relative", flex: "none" }}>
       {/* Bar — clips the glow at its top edge ("the line"). */}
       <div
         style={{