@klodd/ds 5.9.0 → 5.10.0

package/css/base/interactions.css

@@ -2,77 +2,19 @@
    base/interactions.css
    Delade interaktions- och beteendelager, lyfta från appernas
    byte-identiska ds/base.css i Sprint 3:
-     - Reset + html/body
      - Touch-cleanup (eliminera webb-tells: tap-callout, 300ms-delay)
      - Hero-glow (radial gradient, opt-in via .with-hero-glow)
      - First-load entry animation (hero/stat-cards/bottom-nav)
      - Press-feedback (asymmetri 80ms in / 160ms out, iOS-feel)
      - Pull-to-refresh indicator
      - View transitions (same-document, 160ms snappy)
-   Laddas efter base/pwa.css, typography.css, layout.css.
-   ================================================================ */
 
+   Reset + html/body-defaults flyttades till base/reset.css 2026-05-22
+   (Åtgärd 1, @layer-fasen). Reset hör i @layer klodd.reset, denna fil
+   i @layer klodd.base.
 
-/* ================================================================
-   ==== RESET
+   Laddas efter base/pwa.css, typography.css, layout.css.
    ================================================================ */
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  /* Sprint A4: Touch-cleanup. Eliminera webb-tells. */
-  -webkit-tap-highlight-color: transparent;
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-  /* Sprint E4: smooth scroll for hash-anchors. Reduced-motion-safe. */
-  scroll-behavior: smooth;
-}
-
-html, body {
-  min-height: 100vh;        /* fallback */
-  min-height: 100dvh;       /* dynamisk viewport, tar hansyn till iOS-toolbar */
-  background: var(--surface-page);
-  color: var(--text-default);
-  font-family: var(--font-sans);
-  font-size: var(--fs-14);
-  font-weight: var(--fw-regular);
-  line-height: var(--lh-base);
-  letter-spacing: var(--ls-base);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overscroll-behavior: none;
-}
-
-/* Sprint G2: reservera utrymme i botten sa sista content inte goms
-   bakom fixed bottom-nav. */
-body {
-  padding-bottom: var(--bottom-nav-clearance);
-}
-
-a {
-  color: var(--accent-9);
-  text-decoration: none;
-}
-@media (hover: hover) and (pointer: fine) {
-  a:hover { text-decoration: underline; }
-}
-
-button { font-family: inherit; }
-
-/* Tabular numerals dar siffror jamfors visuellt. */
-.num,
-.num-display,
-.num-value,
-.num-inline,
-.stat-card__value,
-.list-row__amount,
-.hero__amount,
-.hero__amount--card {
-  font-variant-numeric: tabular-nums;
-}
 
 
 /* ================================================================

package/css/base/reset.css

@@ -0,0 +1,58 @@
+/* ================================================================
+   base/reset.css
+   Reset-lager: nollstallning + element-defaults. Wrappas i
+   @layer klodd.reset (lagsta cascade-prioritet) av css/index.css.
+
+   Box-sizing samt html/body bas-styling (bakgrund, farg, font,
+   font-smoothing, tap-highlight, text-size-adjust, overscroll-
+   behavior) ags av base/pwa.css och dupliceras medvetet INTE har -
+   pwa.css har identiska varden och tar det ansvaret. Denna fil
+   haller bara de reset-deklarationer som pwa.css inte tacker.
+
+   Lyft ur base/interactions.css 2026-05-22 (Atgard 1, @layer-fasen).
+   ================================================================ */
+
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  /* Sprint E4: smooth scroll for hash-anchors. Reduced-motion-safe. */
+  scroll-behavior: smooth;
+}
+
+html, body {
+  min-height: 100vh;        /* fallback */
+  min-height: 100dvh;       /* dynamisk viewport, tar hansyn till iOS-toolbar */
+  font-weight: var(--fw-regular);
+  letter-spacing: var(--ls-base);
+}
+
+/* Sprint G2: reservera utrymme i botten sa sista content inte goms
+   bakom fixed bottom-nav. */
+body {
+  padding-bottom: var(--bottom-nav-clearance);
+}
+
+a {
+  color: var(--accent-9);
+  text-decoration: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  a:hover { text-decoration: underline; }
+}
+
+button { font-family: inherit; }
+
+/* Tabular numerals dar siffror jamfors visuellt. */
+.num,
+.num-display,
+.num-value,
+.num-inline,
+.stat-card__value,
+.list-row__amount,
+.hero__amount,
+.hero__amount--card {
+  font-variant-numeric: tabular-nums;
+}

package/css/index.css

@@ -1,8 +1,24 @@
 /* ================================================================
    @klodd/ds - convenience-import
-   Importerar hela designsystemet i kanonisk ordning. App-specifika
-   tema-filer (apps/jubb.css, apps/ekonom.css, apps/klodd.css)
-   importeras separat eftersom bara en ar aktiv per pageload.
+   Importerar hela designsystemet i kanonisk ordning, wrappat i en
+   namngiven @layer-hierarki (Atgard 1, 2026-05-22).
+
+   Cascade-lager (lag prioritet -> hog):
+     klodd.reset      - base/reset.css (nollstallning, element-defaults)
+     klodd.tokens     - 00-primitives.css + 10-semantic.css
+     klodd.base       - base/pwa.css, typography.css, layout.css,
+                        interactions.css
+     klodd.components - components/*.css
+     klodd.utilities  - utilities.css
+
+   Per-app-overrides (Jubb/Ekonom ds/<app>.css) wrappas i
+   @layer klodd.theme, som deklareras efter klodd.utilities och
+   darmed vinner over komponenter via cascade-ordning - inte via
+   hogre specificitet.
+
+   App-specifika tema-filer (apps/jubb.css, apps/ekonom.css,
+   apps/klodd.css) importeras separat via base.html eftersom bara
+   en ar aktiv per pageload - de ingar inte i denna fil.
 
    Anvandning:
      <link rel="stylesheet" href="@klodd/ds/css/index.css">
@@ -13,73 +29,72 @@
      @import '@klodd/ds/css/apps/jubb.css';
    ================================================================ */
 
-/* Foundation */
-@import './00-primitives.css';
-@import './10-semantic.css';
-@import './utilities.css';
+/* Layer-ordning deklareras forst sa cascade-prioriteten ar bestamd
+   innan nagon regel laddas. Maste sta fore alla @import. */
+@layer klodd.reset, klodd.tokens, klodd.base,
+       klodd.components, klodd.utilities;
 
-/* Base layer */
-@import './base/pwa.css';
-@import './base/typography.css';
-@import './base/layout.css';
-@import './base/interactions.css';
+/* Reset */
+@import url('base/reset.css') layer(klodd.reset);
 
-/* Komponenter */
-@import './components/button.css';
-@import './components/input.css';
-@import './components/badge.css';
-@import './components/card.css';
-@import './components/nav.css';
-@import './components/feedback.css';
-@import './components/overlay.css';
-@import './components/icon.css';
-@import './components/hero-roll.css';
-@import './components/divider.css';
-@import './components/progress.css';
-@import './components/progress-bar.css';
-@import './components/async-progress.css';
-@import './components/tooltip.css';
-@import './components/dropdown.css';
-
-/* v2.0.0 - flyttade fran app-repona */
-@import './components/banner.css';
-@import './components/panel.css';
-@import './components/profile-panel.css';
-@import './components/hub-card.css';
-@import './components/stat.css';
-@import './components/form.css';
-@import './components/setting-row.css';
-@import './components/collapsible.css';
-/* hbar.css + split-bar.css RADERADE v5.0.0 (ADR 0022) - .progress
-   med composition-pattern (label utanfor + .progress) ersatter hbar.
-   split-bar ersatt av kv-list (siffror) eller flera .progress
-   side-by-side. */
-@import './components/hero.css';
-@import './components/chip.css';
-@import './components/avatar.css';
-@import './components/list-row.css';
-@import './components/table.css';
-@import './components/auth.css';
-@import './components/swipe-stack.css';
-@import './components/inline-edit.css';
-@import './components/upload-spinner.css';
-@import './components/tab-bar.css';
-@import './components/pill-nav.css';
-@import './components/pwa-avatar.css';
+/* Tokens */
+@import url('00-primitives.css') layer(klodd.tokens);
+@import url('10-semantic.css') layer(klodd.tokens);
 
-/* v3.1.0 - generic kategori-monster (token-binding via app-domain-CSS) */
-@import './components/colored-row.css';
-/* colored-bar.css RADERAD v5.0.0 (ADR 0022) - .progress aterkonsolidering
-   ovanfor inkorporerar --bar-accent-binding. */
+/* Base */
+@import url('base/pwa.css') layer(klodd.base);
+@import url('base/typography.css') layer(klodd.base);
+@import url('base/layout.css') layer(klodd.base);
+@import url('base/interactions.css') layer(klodd.base);
 
-/* v3.5.1 - sheet-content (sprint-65 form-monster, generiska BEM-namn) */
-@import './components/sheet-content.css';
+/* Komponenter */
+@import url('components/button.css') layer(klodd.components);
+@import url('components/input.css') layer(klodd.components);
+@import url('components/badge.css') layer(klodd.components);
+@import url('components/card.css') layer(klodd.components);
+@import url('components/nav.css') layer(klodd.components);
+@import url('components/feedback.css') layer(klodd.components);
+@import url('components/overlay.css') layer(klodd.components);
+@import url('components/icon.css') layer(klodd.components);
+@import url('components/hero-roll.css') layer(klodd.components);
+@import url('components/divider.css') layer(klodd.components);
+@import url('components/progress.css') layer(klodd.components);
+@import url('components/progress-bar.css') layer(klodd.components);
+@import url('components/async-progress.css') layer(klodd.components);
+@import url('components/tooltip.css') layer(klodd.components);
+@import url('components/dropdown.css') layer(klodd.components);
+@import url('components/banner.css') layer(klodd.components);
+@import url('components/panel.css') layer(klodd.components);
+@import url('components/profile-panel.css') layer(klodd.components);
+@import url('components/hub-card.css') layer(klodd.components);
+@import url('components/stat.css') layer(klodd.components);
+@import url('components/form.css') layer(klodd.components);
+@import url('components/setting-row.css') layer(klodd.components);
+@import url('components/collapsible.css') layer(klodd.components);
+@import url('components/hero.css') layer(klodd.components);
+@import url('components/chip.css') layer(klodd.components);
+@import url('components/avatar.css') layer(klodd.components);
+@import url('components/list-row.css') layer(klodd.components);
+@import url('components/table.css') layer(klodd.components);
+@import url('components/auth.css') layer(klodd.components);
+@import url('components/swipe-stack.css') layer(klodd.components);
+@import url('components/inline-edit.css') layer(klodd.components);
+@import url('components/upload-spinner.css') layer(klodd.components);
+@import url('components/tab-bar.css') layer(klodd.components);
+@import url('components/pill-nav.css') layer(klodd.components);
+@import url('components/pwa-avatar.css') layer(klodd.components);
+@import url('components/colored-row.css') layer(klodd.components);
+@import url('components/sheet-content.css') layer(klodd.components);
+@import url('components/kv-list.css') layer(klodd.components);
+@import url('components/offline.css') layer(klodd.components);
 
-/* v3.9.0 - lyft fran Ekonoms LEGACY-sektion (Sprint 5 MADR 0009) */
-@import './components/kv-list.css';
-@import './components/offline.css';
+/* Utilities */
+@import url('utilities.css') layer(klodd.utilities);
 
-/* column-bar.css + dual-bar.css RADERADE v5.0.0 (ADR 0022) -
-   amorterings-historik visas som kv-list (siffror) istallet for
-   vertikala staplar; equity-split visas som tva .progress med
-   label-row ovan istallet for dual-bar. */
+/* ----------------------------------------------------------------
+   Raderade komponenter (ater-introducera inte):
+     hbar.css, split-bar.css, colored-bar.css, column-bar.css,
+     dual-bar.css - RADERADE v5.0.0 (ADR 0022). .progress med
+     composition-pattern ersatter hbar/colored-bar; kv-list eller
+     flera .progress side-by-side ersatter split-/column-/dual-bar.
+   ---------------------------------------------------------------- */

package/package.json

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