@klodd/ds 3.11.2 → 3.11.3

package/css/10-semantic.css

@@ -304,8 +304,15 @@
 
   /* Bottom-nav-clearance: utrymme under nav for fixed-positioning +
      safe-area pa iPhone notch-modeller. Anvands som body padding-bottom
-     i app-CSS sa scroll-content inte hamnar under nav. */
-  --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--space-12) + var(--safe-bottom) + var(--space-12));
+     i app-CSS sa scroll-content inte hamnar under nav. Pill-form-
+     versionen: pillen sitter --space-12 ovan home-indikatorn, sa
+     clearance = safe-bottom + space-12 + nav-height. Safe-area lever
+     numera UTANFOR komponenten, inte i dess padding. */
+  --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--space-12) + var(--safe-bottom));
+
+  /* DEPRECATED: anvands inte sedan pill-nav (flex). Tas bort nar inga
+     app-CSS refererar den. */
+  --bottom-nav-cols: 4;
 }
 
 

package/css/components/nav.css

@@ -22,26 +22,28 @@
 
 /* ================================================================
    ==== BOTTOM-NAV (fixed, mobil-primar)
-   Edge-to-edge pa botten med safe-area-padding for hemskarms-knapp.
-   N kolumner via grid (--bottom-nav-cols custom property om appen
-   vill annat an default 4).
+   Flytande pill ovan home-indikatorn. --space-12 clearance ner till
+   safe-area, --space-16 inset fran viewport-kanten. --shadow-float
+   loftar pillen visuellt fran sidans bakgrund. Flex-layout med
+   justify-content: space-around for jamn distribution av items
+   (utan flex: 1 pa items - inga item-nivaforandringar).
    ================================================================ */
 .bottom-nav {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  bottom: calc(var(--safe-bottom) + var(--space-12));
+  left: var(--space-16);
+  right: var(--space-16);
   z-index: var(--z-nav);
-  display: grid;
-  grid-template-columns: repeat(var(--bottom-nav-cols, 4), 1fr);
+  display: flex;
+  justify-content: space-around;
   padding: 0;
-  padding-bottom: var(--safe-bottom);
+  padding-inline: var(--space-8);
   margin: 0;
   max-width: none;
-  background: var(--surface-default);
-  border: 0;
-  border-top: 1px solid var(--border-subtle);
-  border-radius: 0;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-float);
 }
 
 .bottom-nav__item {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.11.2",
+  "version": "3.11.3",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {