@klodd/ds 3.15.1 → 3.16.0

package/css/components/nav.css

@@ -113,6 +113,14 @@
 /* ================================================================
    ==== TOPBAR (in-flow header)
    Tre slots: back-knapp / titel / action. Display flex, full bredd.
+
+   Layout-doktrin (2026-05-12):
+   - Avatar (.avatar) ar ALLTID hogerstalld via margin-left: auto.
+   - Gor month-pill, brand-pill, topbar__logo eller back-knapp pa
+     vanster sida automatiskt vanster-positionerade.
+   - Galler aven nar avatar ar wrappad i <a href> for navigation.
+   - Doktrin gemensam for alla Klodd-appar (Ekonom, Jubb, framtida).
+     Se DESIGN-LANGUAGE.md sektion 13.
    ================================================================ */
 .topbar {
   display: flex;
@@ -123,6 +131,13 @@
   margin-bottom: var(--space-16);
 }
 
+/* Avatar alltid hogerstalld. Galler bade direkt <.avatar> och
+   wrapped <a href="/profil"><span class="avatar"></span></a>. */
+.topbar > .avatar,
+.topbar > a:has(> .avatar) {
+  margin-left: auto;
+}
+
 .topbar__back {
   display: inline-flex;
   align-items: center;

package/css/components/pill-nav.css

@@ -0,0 +1,102 @@
+/* ================================================================
+   components/pill-nav.css
+   Horizontal scrollbar pill-navigation. Anvands for filter/status-
+   val nar tab-bar (segmented control) blir for trang.
+
+   Patterns:
+     - 4+ filter-options som inte far plats pa skarmen
+     - Status-filter, kategori-filter, datum-filter
+     - iOS App Store / Netflix / Spotify-stil chip-row
+
+   Skiljer sig fran .tab-bar (segmented control):
+     - .tab-bar:    fixed bredd, items delar plats lika (flex: 1)
+     - .pill-nav:   variable bredd, items scrollar horizontellt
+
+   Blocks:
+     .pill-nav         - <nav>-wrapper med horizontal scroll
+     .pill-nav__item   - individuell pill (a, button)
+
+   States:
+     .pill-nav__item.is-active  - aktiv-state (accent-bg + on-accent-text)
+
+   Layout:
+     - Item-hojd 36px (matchar .avatar default + .month-pill)
+     - Border-radius: full (pill-form)
+     - Negative margin LR = main-padding for scroll-area edge-to-edge
+   ================================================================ */
+.pill-nav {
+  display: flex;
+  gap: var(--space-8);
+  margin: 0 0 var(--space-16);
+  /* Edge-to-edge scroll: extender utanfor main-padding (14) sa
+     forsta/sista pill kan scrollas in i bild. Sidan i sig
+     ska inte scrolla horizontellt - bara pill-nav-en. */
+  margin-left: calc(-1 * var(--space-14));
+  margin-right: calc(-1 * var(--space-14));
+  padding: var(--space-2) var(--space-14);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+}
+
+.pill-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.pill-nav__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 var(--space-16);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  color: var(--text-subtle);
+  font-family: inherit;
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition:
+    background var(--dur-fast) var(--ease-spring-snappy),
+    color var(--dur-fast) var(--ease-spring-snappy),
+    border-color var(--dur-fast) var(--ease-spring-snappy);
+}
+
+.pill-nav__item.is-active {
+  background: var(--accent-9);
+  border-color: var(--accent-9);
+  color: var(--text-on-accent);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .pill-nav__item:not(.is-active):hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+    border-color: var(--border-default);
+  }
+}
+
+.pill-nav__item:active:not(.is-active) {
+  transform: scale(0.97);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.pill-nav__item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.pill-nav__item:disabled,
+.pill-nav__item[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/css/index.css

@@ -58,6 +58,7 @@
 @import './components/inline-edit.css';
 @import './components/upload-spinner.css';
 @import './components/tab-bar.css';
+@import './components/pill-nav.css';
 
 /* v3.1.0 - generic kategori-monster (token-binding via app-domain-CSS) */
 @import './components/colored-row.css';

package/package.json

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

package/references/02-components.md

@@ -250,10 +250,31 @@ För varje entry gäller:
 - **Blocks:** `.tab-bar` (definieras aven i `nav.css` med 5 identiska properties + skillnad i margin)
 - **Element:** `.tab-bar__item`
 - **States:** `.tab-bar__item.is-active`
-- **Anvand:** Inline tab-grupp for format-val (CSV/Avi etc.) - 44px touch-target
-- **INTE:** Bottom-nav (anvand `.bottom-nav`)
+- **Anvand:** Inline segmented control for format-val med 2-3 alternativ
+  som alla far plats utan scroll - t.ex. CSV/Avi. Items har `flex: 1`
+  (lika bredd), 44px touch-target.
+- **INTE:** Filter-listor med 4+ items (anvand `.pill-nav` istallet).
+  Bottom-nav (anvand `.bottom-nav`).
 - **Special:** Importordning i `index.css`: `nav.css` fore `tab-bar.css`. `.tab-bar`-block-styling fran tab-bar.css vinner via cascade.
 
+### pill-nav (`pill-nav.css`) - v3.16.0
+- **Blocks:** `.pill-nav` (horizontal scroll-container)
+- **Element:** `.pill-nav__item`
+- **States:** `.pill-nav__item.is-active` (accent-bg + on-accent-text)
+- **Anvand:** Horizontal scrollbar filter-pills nar 4+ alternativ inte
+  far plats pa skarmen. iOS App Store / Netflix-stil chip-row. Pill-
+  hojd 36px (matchar .avatar default + .month-pill). Items har
+  variable bredd, scrollar horizontellt med touch/swipe.
+- **INTE:** Segmented control 2-3 items (anvand `.tab-bar`). Permanent
+  bottom-nav (anvand `.bottom-nav`).
+- **Tokens:** `--surface-default` + `--border-subtle` (default state),
+  `--accent-9` + `--text-on-accent` (active), `--radius-full`,
+  `--fs-13`, height 36px.
+- **Special:** `.pill-nav` har negativa LR-marginer (-14px) for att
+  scroll-area ska natta kant-till-kant pa mobile - sidan i sig
+  scrollar inte horizontellt, bara pill-nav-en. Scrollbar dold via
+  `scrollbar-width: none` + `::-webkit-scrollbar { display: none }`.
+
 ### colored-row (`colored-row.css`) - v3.1.0
 - **Blocks:** `.colored-row`
 - **Modifiers:** `.colored-row--sm`, `.colored-row--lg`

package/references/DESIGN-LANGUAGE.md

@@ -294,6 +294,63 @@ Future custom stylelint-plugin kan enforce:
 Tills sådan plugin finns: visual-coherence är CC-disciplin baserat
 på denna fil.
 
+## 13. Topbar-layout-doktrin (alla appar)
+
+**Regel:** topbar-elementen positioneras enligt strikt mall:
+
+| Position | Element | Användning |
+|---|---|---|
+| Vänster | `.month-pill`, `.brand-pill`, `.topbar__logo`, `.topbar__back` | Kontext/navigation per vy |
+| Höger | `.avatar` (ev. wrappad i `<a href="/jag">`) | Persistent profil-länk |
+
+**CSS-implementation** (paketets `nav.css`):
+
+```css
+.topbar > .avatar,
+.topbar > a:has(> .avatar) {
+  margin-left: auto;
+}
+```
+
+Avatar pushas automatiskt högerställd. Övriga element grupperas
+vänster med `gap: var(--space-12)`.
+
+**HTML-pattern:**
+
+```html
+<!-- Standard topbar med kontext + avatar -->
+<div class="topbar">
+  <span class="brand-pill">Jubb</span>           <!-- vänster -->
+  <a href="/jag"><span class="avatar">CE</span></a>  <!-- höger -->
+</div>
+
+<!-- Topbar med back-knapp + avatar -->
+<div class="topbar">
+  <a href="/jobb" class="topbar__back">←</a>     <!-- vänster -->
+  <span class="topbar__logo">Jobbdetalj</span>    <!-- center-ish -->
+  <a href="/jag"><span class="avatar">CE</span></a>  <!-- höger -->
+</div>
+
+<!-- Topbar utan avatar (back-only-vyer som /installningar/X) -->
+<div class="topbar">
+  <a href="/installningar" class="topbar__back">←</a>
+  <span class="topbar__logo">Vart hushall</span>
+</div>
+```
+
+**Förbjudet:**
+- Avatar någon annanstans än i topbar
+- Två avatar-element i samma topbar
+- Manual flexbox-positioning som strider mot auto-margin-pattern
+- Hardkodad `margin-left: auto` på avatar i app-domain-CSS (paketet
+  hanterar det)
+
+**Konsekvens:** alla Klodd-appar (Ekonom, Jubb, framtida) får identisk
+topbar-layout. Användaren får visuell anchor: "avatar = mitt konto =
+alltid uppe höger".
+
+**Etablerad 2026-05-12.** Lagt till paketets nav.css i samma commit.
+
 ## 12. När ändra regler
 
 Denna fil är **locked**. Ändringar kräver: