@klodd/ds 5.11.0 → 5.12.0

package/css/00-primitives.css

@@ -407,6 +407,17 @@
   --bp-tablet:  768px;
   --bp-desktop: 1024px;
 
+  /* Desktop layout breakpoints
+     Använd BARA för sidlayout (media queries på makronivå).
+     Komponentresponsivitet → container queries, inte dessa.
+     --bp-medium (1024px) sammanfaller avsiktligt med --bp-desktop:
+     --bp-desktop är legacy-token som komponenter redan kan referera,
+     --bp-medium är desktop-fasens nya makrolayout-token. Olika
+     semantisk roll, samma värde. */
+  --bp-compact:  720px;   /* mobil → mellanbredd */
+  --bp-medium:   1024px;  /* mellanbredd → desktop */
+  --bp-expanded: 1440px;  /* desktop → wide */
+
   --max-w-mobile:               600px;
   --max-w-tablet:               680px;
   --max-w-desktop:              1280px;

package/css/10-semantic.css

@@ -300,6 +300,11 @@
      border-radius full) ska fa visuellt luftrum mot pillens border. */
   --bottom-nav-height: 72px;
 
+  /* Desktop-nav-bredder (Fas 2). Rail = ikonbar (721-1024px),
+     drawer = sidebar med etiketter (>=1024px). */
+  --nav-rail-width:   72px;
+  --nav-drawer-width: 220px;
+
   /* 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. Pill-form-

package/css/base/layout.css

@@ -6,9 +6,24 @@
 .main-content {
   max-width: var(--content-max-default);
   margin: 0 auto;
-  padding: calc(var(--safe-top) + var(--space-16)) var(--space-14) var(--bottom-nav-clearance);
+  padding: calc(var(--safe-top) + var(--space-16)) var(--space-14) 0;
   position: relative;
-  min-height: calc(100dvh - var(--bottom-nav-clearance));
+  min-height: 100dvh;
+}
+
+/* Nav-clearance breakpoint-villkorad (Fas 2). Bottom-nav (bar) ligger
+   under content pa mobil; rail/drawer ligger till vanster pa desktop. */
+@media (max-width: 720px) {
+  .main-content {
+    padding-bottom: var(--bottom-nav-clearance);
+    min-height: calc(100dvh - var(--bottom-nav-clearance));
+  }
+}
+@media (min-width: 721px) and (max-width: 1024px) {
+  .main-content { padding-left: var(--nav-rail-width); }
+}
+@media (min-width: 1024px) {
+  .main-content { padding-left: var(--nav-drawer-width); }
 }
 
 .main-content--narrow { max-width: var(--content-max-narrow); }

package/css/base/reset.css

@@ -30,9 +30,12 @@ html, body {
 }
 
 /* Sprint G2: reservera utrymme i botten sa sista content inte goms
-   bakom fixed bottom-nav. */
-body {
-  padding-bottom: var(--bottom-nav-clearance);
+   bakom fixed bottom-nav. Breakpoint-villkorad i Fas 2 - galler bara
+   mobil (bar); rail/drawer hanteras via .main-content padding-left. */
+@media (max-width: 720px) {
+  body {
+    padding-bottom: var(--bottom-nav-clearance);
+  }
 }
 
 a {

package/css/components/nav.css

@@ -110,6 +110,104 @@
 }
 
 
+/* ================================================================
+   ==== NAV-VARIANTER (desktop, Fas 2)
+   .bottom-nav skalas i tre steg via breakpoints. Markup är identisk
+   i alla tre - CSS styr formen:
+     <=720px   bar    - flytande pill i botten (basreglerna ovan)
+     721-1024  rail   - vertikal ikonbar längs vänsterkanten
+     >=1024px  drawer - full sidebar med etiketter
+   ================================================================ */
+@media (min-width: 721px) and (max-width: 1024px) {
+  .bottom-nav {
+    /* Rail: vertikal ikonbar längs vänsterkanten */
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: auto;
+    width: var(--nav-rail-width, 72px);
+    min-height: 100dvh;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: var(--space-16) 0;
+    border-radius: 0;
+    border-right: 1px solid var(--border-subtle);
+    border-bottom: none;
+    box-shadow: none;
+  }
+
+  .bottom-nav__item {
+    flex: 0 0 auto;
+    flex-direction: column;
+    width: 100%;
+    padding: var(--space-12) 0;
+    border-radius: 0;
+    /* Etikett döljs i rail */
+    font-size: 0;
+  }
+
+  .bottom-nav__item .icon,
+  .bottom-nav__item svg {
+    width: var(--space-22);
+    height: var(--space-22);
+  }
+
+  .bottom-nav__item--active {
+    position: relative;
+  }
+
+  .bottom-nav__item--active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 25%;
+    height: 50%;
+    width: 3px;
+    background: var(--accent-9);
+    border-radius: 0 var(--radius-4) var(--radius-4) 0;
+  }
+}
+
+@media (min-width: 1024px) {
+  .bottom-nav {
+    /* Drawer: full sidebar med etiketter */
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: auto;
+    width: var(--nav-drawer-width, 220px);
+    min-height: 100dvh;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: var(--space-24) var(--space-8);
+    border-radius: 0;
+    border-right: 1px solid var(--border-subtle);
+    border-bottom: none;
+    box-shadow: none;
+  }
+
+  .bottom-nav__item {
+    flex: 0 0 auto;
+    flex-direction: row;
+    width: 100%;
+    justify-content: flex-start;
+    gap: var(--space-12);
+    padding: var(--space-12) var(--space-16);
+    border-radius: var(--radius-4);
+    font-size: var(--fs-14);
+  }
+
+  .bottom-nav__item .icon,
+  .bottom-nav__item svg {
+    width: var(--space-20);
+    height: var(--space-20);
+    flex-shrink: 0;
+  }
+}
+
+
 /* ================================================================
    ==== TOPBAR (in-flow header)
    Tre slots: pwa-avatar/back (vanster) / titel-eller-month-pill

package/package.json

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