@klodd/ds 3.11.2 → 3.11.4

package/css/10-semantic.css

@@ -223,7 +223,7 @@
      aldrig fake gradients.
      Anvand for: kort, modaler, popovers.
      Inte for: knappar, inputs, inline-element. */
-  --shadow-card:  0 8px 16px rgba(51, 51, 51, 0.08);
+  --shadow-card:  0 8px 16px color-mix(in oklch, var(--gray-12) 8%, transparent);
 
   /* Bakat-kompat: --shadow-float ar nu alias till --shadow-card.
      Befintliga komponenter (chip.install-chip, overlay.dialog/sheet,
@@ -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.4",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {

package/references/01-tokens.md

@@ -161,7 +161,7 @@ Radix-stegen, anvand `color-mix(in oklch, var(--accent-9) 25%, transparent)`.
 ## Component tokens (DRY-mekanism)
 
 ```
---bottom-nav-height-semantic
+--bottom-nav-height
 --bottom-nav-clearance
 --touch-min: 44px
 --card-radius