@klodd/ds 3.17.2 → 3.19.0

package/css/00-primitives.css

@@ -328,19 +328,28 @@
    ==== RADIUS - pixel-numerisk
    --radius-N dar N = exakt antal pixlar.
    --radius-full = 9999px (pill-form OCH cirkel for kvadratiska element).
+
+   Pill-doktrin (DESIGN-LANGUAGE.md sektion 1, 2026-05-13):
+   komponenter ska anvanda BARA en av fyra:
+     --radius-4    thin bars + skeleton-placeholder
+     --radius-14   kort/paneler/containers
+     50% / full    cirklar + pills (knappar, inputs, en-rads-element med kant)
+
+   --radius-10 borttagen 2026-05-13 efter pill-konsolidering.
+   Ovriga tokens (2/6/8/12/16/20/24) ar legacy - anvand inte i
+   komponent-CSS. Kvar enbart for bakat-kompat under deprecation.
    ================================================================ */
 :root {
-  --radius-2:    2px;     /* mikro-staplar (cat-bar, hour-bar) */
-  --radius-4:    4px;     /* small bars, info-block-corners */
-  --radius-6:    6px;     /* equity-bars, focus-outlines */
-  --radius-8:    8px;     /* mellan-radius, sub-pills */
-  --radius-10:   10px;    /* mode-toggles */
-  --radius-12:   12px;    /* tx-icon, btn-md, sheet-pattern */
-  --radius-14:   14px;    /* input, btn, avi-image */
-  --radius-16:   16px;    /* banners */
-  --radius-20:   20px;    /* panels, cards */
-  --radius-24:   24px;    /* sheet top */
-  --radius-full: 9999px;  /* chips, knappar, nav, avatars */
+  --radius-2:    2px;     /* legacy - anvand inte */
+  --radius-4:    4px;     /* thin bars, skeleton-placeholder */
+  --radius-6:    6px;     /* legacy - anvand inte */
+  --radius-8:    8px;     /* legacy - anvand inte */
+  --radius-12:   12px;    /* legacy - anvand inte */
+  --radius-14:   14px;    /* kort, paneler, containers, textarea */
+  --radius-16:   16px;    /* legacy - anvand inte */
+  --radius-20:   20px;    /* legacy - anvand inte */
+  --radius-24:   24px;    /* legacy - anvand inte (sheet-top via sheet-token) */
+  --radius-full: 9999px;  /* pills, knappar, inputs, en-rads-element, avatars */
 }
 
 

package/css/components/button.css

@@ -24,7 +24,11 @@
 /* ================================================================
    ==== BAS
    Alla knappar har samma fundamental: 44px touch-target, medium-vikt,
-   10px radius, smooth transitions, fokusring.
+   pill-radius, smooth transitions, fokusring.
+
+   Pill-doktrin (DESIGN-LANGUAGE.md sektion 1, 2026-05-13): knappar
+   och en-rads-element med kant ska ha radius-full. Bara kort/paneler
+   har 14px radius.
    ================================================================ */
 .btn {
   display: inline-flex;
@@ -40,7 +44,7 @@
   color: var(--text-default);
   background: transparent;
   border: 1px solid transparent;
-  border-radius: var(--radius-10);
+  border-radius: var(--radius-full);
   cursor: pointer;
   text-decoration: none;
   white-space: nowrap;

package/css/components/dropdown.css

@@ -28,7 +28,7 @@
   min-width: 160px;
   background: var(--surface-overlay);
   border: 1px solid var(--border-default);
-  border-radius: var(--radius-10);
+  border-radius: var(--radius-14);
   padding: var(--space-4) 0;
   /* Sprint 3a 2026-05-12: surface-overlay (parent) + border-default ger
      djupkanslag istallet for shadow. Dark-mode-doktrin (regel 10). */

package/css/components/feedback.css

@@ -142,7 +142,7 @@
     var(--surface-default) 100%
   );
   background-size: 200% 100%;
-  border-radius: var(--radius-10);
+  border-radius: var(--radius-4);
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 

package/css/components/hero.css

@@ -36,12 +36,15 @@
 }
 
 .hero__label {
+  /* 2026-05-13: text-transform: uppercase borttaget. Labels skrivs
+     sentence-case i template ("Din dagsbudget", inte "DIN DAGSBUDGET").
+     Det matchar svensk grafisk konvention + var hero-hierarki kommer
+     fran font-size och weight, inte fran caps. */
   font-size: var(--fs-12);
   font-weight: var(--fw-medium);
   color: var(--text-muted);
-  letter-spacing: var(--ls-wider, 0.04em);
-  text-transform: uppercase;
-  margin: 0 0 var(--space-8);
+  letter-spacing: var(--ls-tight);
+  margin: 0 0 var(--space-12);
 }
 
 .hero__label--muted {
@@ -49,7 +52,6 @@
   font-weight: var(--fw-regular);
   color: var(--text-disabled);
   letter-spacing: 0.03em;
-  text-transform: lowercase;
   opacity: 0.7;
 }
 
@@ -60,7 +62,7 @@
   letter-spacing: var(--ls-tightest, -0.04em);
   color: var(--text-default);
   line-height: var(--lh-tight);
-  margin: 0 0 var(--space-8);
+  margin: 0 0 var(--space-12);
   font-variant-numeric: tabular-nums;
 }
 
@@ -75,11 +77,17 @@
 }
 
 .hero__amount-row {
+  /* 2026-05-13: justify-content center → flex-start och gap 10 → 16.
+     Amount-row anvands inom .panel/.collapsible-kontext (Ekonom
+     Gemensamma utgifter) dar parent ar text-align:left. Center-just
+     overrode den left-align via flex. Nu foljer amount-row parent-
+     justification. Gap-16 ger luft mellan summa och adjacent
+     actions-knappar (btn-copy, btn-bank). */
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: var(--space-10);
-  margin-bottom: var(--space-8);
+  justify-content: flex-start;
+  gap: var(--space-16);
+  margin-bottom: var(--space-12);
 }
 
 .hero__amount-row .hero__amount,

package/css/components/inline-edit.css

@@ -66,7 +66,7 @@
   padding: 0 var(--space-10);
   background: var(--surface-sunken);
   border: 1px solid var(--border-default);
-  border-radius: var(--radius-10);
+  border-radius: var(--radius-full);
   color: var(--text-default);
   font-family: inherit;
   font-size: var(--fs-16);

package/css/components/input.css

@@ -27,6 +27,9 @@
 
 /* ================================================================
    ==== BAS
+   Pill-doktrin (DESIGN-LANGUAGE.md sektion 1, 2026-05-13): en-rads-
+   element med kant har radius-full. .input + .select är en-rads,
+   .textarea är multi-rad och behåller container-radius (14).
    ================================================================ */
 .input,
 .textarea,
@@ -41,7 +44,7 @@
   color: var(--text-default);
   background: var(--surface-sunken);
   border: 1px solid var(--border-default);
-  border-radius: var(--radius-10);
+  border-radius: var(--radius-full);
   outline: none;
   transition:
     border-color var(--dur-base) var(--ease-spring-snappy),
@@ -55,6 +58,7 @@
   min-height: 96px;
   padding: var(--space-12) var(--space-14);
   line-height: var(--lh-base);
+  border-radius: var(--radius-14);
   resize: vertical;
 }
 

package/css/components/swipe-stack.css

@@ -144,7 +144,7 @@
   font-weight: var(--fw-medium);
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  border-radius: var(--radius-10);
+  border-radius: var(--radius-full);
   border: 2px solid currentColor;
   opacity: 0;
   transition: opacity var(--dur-fast) var(--ease-default);

package/css/components/tab-bar.css

@@ -24,7 +24,7 @@
   padding: 0 var(--space-12);
   background: transparent;
   border: 0;
-  border-radius: var(--radius-10);
+  border-radius: var(--radius-full);
   color: var(--text-subtle);
   font-family: inherit;
   font-size: var(--fs-14);

package/css/components/tooltip.css

@@ -35,7 +35,7 @@
   font-size: var(--fs-12);
   line-height: var(--lh-snug);
   padding: var(--space-4) var(--space-8);
-  border-radius: var(--radius-10);
+  border-radius: var(--radius-full);
   border: 1px solid var(--border-default);
   white-space: nowrap;
   pointer-events: none;

package/package.json

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

package/references/DESIGN-LANGUAGE.md

@@ -12,30 +12,41 @@ annat utan att layout-rytm bryts.
 Etablerad 2026-05-12 baserat på audit av 17 vyer (se
 `AUDIT-VISUAL-COHERENCE-2026-05-12.md`).
 
-## 1. Border-radius-skala (fem värden)
+## 1. Border-radius-skala (fyra värden, pill-doktrin)
 
 **Regel:** all border-radius i komponent-CSS ska vara EN av:
 
 | Värde | Token | Användning |
 |---|---|---|
-| 4px | `--radius-4` | Thin-bars: progress, skeleton-line, split-bar-segment |
-| 10px | `--radius-10` | Button, inputs, tab-bar__item, small-action-button |
-| 14px | `--radius-14` | All cards/containers: card, panel, hub-card, job-card, swipe-card, banner, form-card, stat-card, list-row, setting-row, toast, dialog, sheet, collapsible, offline-wrap, sheet-content fields |
+| 4px | `--radius-4` | Thin bars: progress, skeleton-placeholder, split-bar-segment |
+| 14px | `--radius-14` | Kort/paneler/containers: card, panel, hub-card, job-card, swipe-card, banner, form-card, stat-card, list-row, setting-row, toast, dialog, sheet, collapsible, offline-wrap, dropdown-menu, textarea (multi-rad) |
 | 50% | (calculated) | Avatars, icon-circles, toggle-thumb |
-| 9999px | `--radius-full` | Pills: badge, chip, status-pill, dot-separator, score-pill |
-
-**Förbjudet:** 2px, 6px, 8px, 12px, 16px, 18px, 20px, 22px, 24px på
-komponent-element. (Existerar som tokens men ska inte appliceras
-direkt på BR i komponent-CSS efter denna konsolidering.)
-
-**Rationale:** ögat skiljer på fem kategorier: thin-bar, button,
-container, circle, pill. 11+ värden ger visuell brus utan
-informations-värde. Calle's audit-observation "olika former" var
-denna BR-spridning.
-
-**Migration-not:** existerande paket-komponenter med BR=6/8/12/16/20/24
-flyttas till närmaste av de fem. Sprint 3b 2026-05-12 genomförde
-migrationen i paketet. App-domain-CSS följer samma regel.
+| 9999px | `--radius-full` | Pills: alla knappar (.btn), inputs (single-rad), tab-bar__item, status-pill, score-pill, swipe-action-btn, swipe-decision-overlay, tooltip, badge, chip, dot-separator, alla en-rads-element med kant |
+
+**Pill-doktrin (2026-05-13):** "Bara kort ska ha radius i hörnen.
+Alla knappar och en-rads-element som har en kant ska ha en pill-form."
+(Calle 2026-05-13.) Calle's tidigare audit-observation "olika former
+nära varandra" var BR-spridningen + button-radius-10. Pill-formen
+löser bägge.
+
+**Förbjudet:** 2px, 6px, 8px, 10px, 12px, 16px, 18px, 20px, 22px, 24px på
+komponent-element. (--radius-10 borttagen 2026-05-13.) Övriga tokens
+existerar i primitives som legacy men appliceras INTE i komponent-CSS.
+
+**Rationale:** ögat skiljer på fyra kategorier:
+- thin-bar (4px) - aldrig en kant, bara fill för progress
+- container (14px) - kort, paneler, multi-rad-block
+- circle (50%) - kvadratiska element som ska vara perfekt runda
+- pill (full) - alla en-rads interaktiva element + alla en-rads med kant
+
+Färre värden ger starkare visuell rytm. Pill-formen på knappar
+markerar interaktivitet tydligare än mjuk 10px-radius och matchar
+iOS-konvention (Apple HIG, SF Symbols badges).
+
+**Migration-not:** Sprint 3b 2026-05-12 konsoliderade till fem värden
+(4/10/14/50%/9999). 2026-05-13 reduceras till fyra (4/14/50%/9999) -
+radius-10 → radius-full för button + en-rads-element med kant. App-
+domain-CSS följer samma regel.
 
 ## 2. Shadow-policy (restriktiv)