@klodd/ds 3.16.0 → 3.17.0

package/css/components/nav.css

@@ -112,18 +112,23 @@
 
 /* ================================================================
    ==== 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.
+   Tre slots: pwa-avatar/back (vanster) / titel-eller-month-pill
+   (center) / user-avatar (hoger). Display grid med 3 kolumner.
+
+   Layout-doktrin (2026-05-13):
+   - Kolumn 1 (vanster, auto): .pwa-avatar ELLER .topbar__back
+   - Kolumn 2 (center, 1fr):    .topbar__title ELLER .month-pill
+   - Kolumn 3 (hoger, auto):    .avatar (ev. wrappad i <a>)
+
+   Grid-positioning sker via explicit grid-column-rules nedan -
+   HTML-ordning paverkar inte visual position.
+
+   Doktrin gemensam for alla Klodd-appar (Ekonom, Jubb, framtida).
+   Se DESIGN-LANGUAGE.md sektion 13.
    ================================================================ */
 .topbar {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: var(--space-12);
   min-height: var(--touch-min);
@@ -131,11 +136,27 @@
   margin-bottom: var(--space-16);
 }
 
-/* Avatar alltid hogerstalld. Galler bade direkt <.avatar> och
-   wrapped <a href="/profil"><span class="avatar"></span></a>. */
+/* Vanster kolumn: pwa-avatar eller back-knapp */
+.topbar > .pwa-avatar,
+.topbar > .topbar__back {
+  grid-column: 1;
+  justify-self: start;
+}
+
+/* Center kolumn: titel eller month-pill */
+.topbar > .topbar__title,
+.topbar > .topbar__logo,
+.topbar > .month-pill,
+.topbar > .brand-pill {
+  grid-column: 2;
+  justify-self: center;
+}
+
+/* Hoger kolumn: user-avatar (direkt eller wrappad i <a>) */
 .topbar > .avatar,
 .topbar > a:has(> .avatar) {
-  margin-left: auto;
+  grid-column: 3;
+  justify-self: end;
 }
 
 .topbar__back {

package/css/components/pwa-avatar.css

@@ -0,0 +1,51 @@
+/* ================================================================
+   components/pwa-avatar.css
+   PWA-identifierande avatar i topbar (vansterstalld).
+   Skiljer sig fran .avatar (user-profile, hogerstalld) genom:
+   - Anvands for app-brand-identifiering (Jubb-J, Ekonom-E)
+   - Hard-refresh-trigger via klick (se hard-refresh.js)
+   - Subtle accent-soft-bg + accent-text istallet for accent-9-gradient
+
+   Storlek 36x36 matchar .avatar default + .month-pill for visuell
+   harmoni i topbar.
+
+   Blocks:
+     .pwa-avatar  - klickbar app-brand-avatar (button-element)
+   ================================================================ */
+.pwa-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  border: 1px solid var(--accent-a6);
+  border-radius: var(--radius-full);
+  font-family: inherit;
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  cursor: pointer;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition:
+    background var(--dur-fast) var(--ease-spring-snappy),
+    transform var(--dur-fast) var(--ease-spring-snappy);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .pwa-avatar:hover {
+    background: var(--accent-moderate);
+  }
+}
+
+.pwa-avatar:active {
+  transform: scale(0.95);
+}
+
+.pwa-avatar:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}

package/css/index.css

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

package/js/hard-refresh.js

@@ -0,0 +1,45 @@
+/* ================================================================
+   hard-refresh.js
+   PWA hard-refresh: rensa Cache Storage + unregister Service Worker
+   + reload. Motsvarar webbläsarens Cmd+Shift+R men funkar inom PWA
+   (installerad standalone-mode dar tangentbordsgenvagen inte finns).
+
+   Auto-bind: alla .pwa-avatar-element + [data-pwa-refresh]-element
+   triggar hardRefresh() pa klick med confirm-dialog.
+
+   Aktivera genom att inkludera i base.html:
+   <script defer src="/static/js/hard-refresh.js"></script>
+   ================================================================ */
+(function() {
+  'use strict';
+
+  async function hardRefresh() {
+    try {
+      if ('caches' in window) {
+        const keys = await caches.keys();
+        await Promise.all(keys.map(k => caches.delete(k)));
+      }
+      if ('serviceWorker' in navigator) {
+        const regs = await navigator.serviceWorker.getRegistrations();
+        await Promise.all(regs.map(r => r.unregister()));
+      }
+    } catch (err) {
+      console.error('hard-refresh: cleanup-fel', err);
+    } finally {
+      location.reload();
+    }
+  }
+
+  document.addEventListener('click', (e) => {
+    const target = e.target.closest('.pwa-avatar, [data-pwa-refresh]');
+    if (!target) return;
+    e.preventDefault();
+    const proceed = confirm('Hard refresh: rensar cache och laddar om PWA-en. Forsatta?');
+    if (proceed) {
+      hardRefresh();
+    }
+  });
+
+  // Exponera for programmatic-anvandning
+  window.kloddHardRefresh = hardRefresh;
+})();

package/package.json

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

package/references/02-components.md

@@ -200,8 +200,24 @@ För varje entry gäller:
 ### avatar (`avatar.css`)
 - **Blocks:** `.avatar`
 - **Modifiers:** `.avatar--sm`, `.avatar--lg`
-- **Anvand:** Cirkular initial-avatar med accent-gradient
-- **INTE:** Foto-avatar (overlapp via custom regel)
+- **Anvand:** Cirkular initial-avatar med accent-gradient. ALLTID
+  hogerstalld i topbar (kolumn 3) per DESIGN-LANGUAGE sektion 13.
+- **INTE:** Foto-avatar (overlapp via custom regel). Vansterstalld
+  i topbar (anvand `.pwa-avatar` istallet).
+
+### pwa-avatar (`pwa-avatar.css`) - v3.17.0
+- **Blocks:** `.pwa-avatar`
+- **Anvand:** App-brand-identifierare i topbar kolumn 1 (vansterstalld).
+  Klick triggar hard-refresh av PWA (rensar Cache Storage + unregister
+  SW + reload) via `js/hard-refresh.js`-auto-bind. Storlek 36x36
+  matchar `.avatar` for visuell harmoni.
+- **INTE:** User-profile-avatar (anvand `.avatar` i kolumn 3). Anvandning
+  utanfor topbar.
+- **Tokens:** `--accent-soft` (bg), `--accent-text` (color), `--accent-a6`
+  (border), `--accent-moderate` (hover-bg). Storlek 36x36, BR full.
+- **JS:** `hard-refresh.js` lyssnar pa klick. Confirm-dialog innan
+  destruktiv cache-cleanup + reload. Activated via base.html-include:
+  `<script defer src="/static/js/hard-refresh.js"></script>`
 
 ### list-row (`list-row.css`)
 - **Blocks:** `.list` (sibling-wrapper, `<ul>`-reset), `.list-row` (huvud-block med BEM-element)

package/references/DESIGN-LANGUAGE.md

@@ -294,62 +294,76 @@ 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)
+## 13. Topbar-layout-doktrin (3-column grid)
 
-**Regel:** topbar-elementen positioneras enligt strikt mall:
+**Regel:** topbar är 3-column grid med strikt slot-positioning:
 
-| 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 |
+| Kolumn | Bredd | Element | Användning |
+|---|---|---|---|
+| 1 (vänster) | auto | `.pwa-avatar` ELLER `.topbar__back` | App-brand-identifierare med hard-refresh-trigger ELLER back-navigation |
+| 2 (center) | 1fr | `.topbar__title`, `.topbar__logo`, `.month-pill` ELLER `.brand-pill` | View-namn ELLER månadsväljare ELLER app-namn-text |
+| 3 (höger) | auto | `.avatar` (ev. wrappad i `<a href="/jag">`) | Persistent user-profile-länk |
 
 **CSS-implementation** (paketets `nav.css`):
 
 ```css
-.topbar > .avatar,
-.topbar > a:has(> .avatar) {
-  margin-left: auto;
+.topbar {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--space-12);
 }
+
+.topbar > .pwa-avatar, .topbar > .topbar__back   { grid-column: 1; justify-self: start; }
+.topbar > .topbar__title, .topbar > .topbar__logo,
+.topbar > .month-pill, .topbar > .brand-pill     { grid-column: 2; justify-self: center; }
+.topbar > .avatar, .topbar > a:has(> .avatar)    { grid-column: 3; justify-self: end; }
 ```
 
-Avatar pushas automatiskt högerställd. Övriga element grupperas
-vänster med `gap: var(--space-12)`.
+Elementen positioneras automatiskt baserat på klass, inte HTML-ordning.
 
 **HTML-pattern:**
 
 ```html
-<!-- Standard topbar med kontext + avatar -->
+<!-- Standard topbar: pwa-avatar + titel + user-avatar -->
 <div class="topbar">
-  <span class="brand-pill">Jubb</span>           <!-- vänster -->
-  <a href="/jag"><span class="avatar">CE</span></a>  <!-- höger -->
+  <button class="pwa-avatar" data-pwa-refresh aria-label="Refresh PWA">J</button>
+  <span class="topbar__title">Jobb</span>
+  <a href="/jag"><span class="avatar">CE</span></a>
 </div>
 
-<!-- Topbar med back-knapp + avatar -->
+<!-- Topbar med back-knapp -->
 <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 -->
+  <a href="/jobb" class="topbar__back" aria-label="Tillbaka"><svg.../></a>
+  <span class="topbar__title">Jobbdetalj</span>
+  <a href="/jag"><span class="avatar">CE</span></a>
 </div>
 
-<!-- Topbar utan avatar (back-only-vyer som /installningar/X) -->
+<!-- Topbar med month-pill (Ekonom dashboards) -->
 <div class="topbar">
-  <a href="/installningar" class="topbar__back">←</a>
-  <span class="topbar__logo">Vart hushall</span>
+  <button class="pwa-avatar" data-pwa-refresh aria-label="Refresh PWA">E</button>
+  <span class="month-pill">[‹] Maj 2026 [›]</span>
+  <a href="/jag"><span class="avatar">CE</span></a>
 </div>
 ```
 
+**PWA-avatar = hard-refresh-trigger:**
+- Klick → confirm-dialog → rensa Cache Storage + unregister SW + reload
+- Auto-bind via `hard-refresh.js` (inkluderas i `base.html`)
+- Konfigurerbart via `<button class="pwa-avatar" data-pwa-refresh>` eller bara `<button class="pwa-avatar">`
+- Bg: `--accent-soft`, color: `--accent-text`, height 36px (matchar user-avatar)
+
 **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)
+- Avatar någon annanstans än i topbar kolumn 3
+- Två user-avatar-element i samma topbar (en pwa-avatar i kolumn 1 + en user-avatar i kolumn 3 är OK)
+- Manual `margin-left: auto` / `justify-self` på topbar-children i app-domain-CSS (paketet hanterar via grid)
+- Användning av `.pwa-avatar` utanför topbar
 
 **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".
+topbar-layout: PWA-brand vänster, kontext center, user höger. Plus
+universell PWA-refresh-action via tap på vänster avatar.
 
-**Etablerad 2026-05-12.** Lagt till paketets nav.css i samma commit.
+**Etablerad 2026-05-13.** Refaktor från flex till grid samma datum.
 
 ## 12. När ändra regler