@klodd/ds 5.15.6 → 5.16.0

package/css/components/avatar.css

@@ -1,10 +1,15 @@
 /* ================================================================
    components/avatar.css
-   Cirkular initial-avatar. Modifier --lg pa profil-vyer.
+   Cirkular initial-avatar. Modifier --sm/--lg pa kompakta/profil-vyer.
+
+   2026-05-26: bas-storlek 36px -> 44px via var(--touch-min).
+   Matchar WCAG AA tap-target (.avatar ar klickbar nar wrappad i <a>)
+   och .pwa-avatar-storleken (visuell harmoni mellan vanster/hoger
+   topbar-slot). --sm/--lg-varianter oforandrade.
    ================================================================ */
 .avatar {
-  width: var(--circle-size);
-  height: var(--circle-size);
+  width: var(--touch-min);
+  height: var(--touch-min);
   border-radius: var(--radius-full);
   background: linear-gradient(135deg, var(--accent-9) 0%, var(--accent-10) 100%);
   display: inline-flex;

package/css/components/button.css

@@ -161,9 +161,14 @@
 /* ================================================================
    ==== STORLEKAR
    --md ar default (44px). Anvand bara --sm eller --lg explicit.
+
+   2026-05-26: --sm min-height bytt fran --touch-sm (40px) till
+   --touch-min (44px) for WCAG AA tap-target-paritet. fs-13 + smalare
+   padding behalls sa --sm visuellt fortfarande skiljer sig fran --md.
+   --touch-sm-tokenen finns kvar for andra konsumenter (chip etc).
    ================================================================ */
 .btn--sm {
-  min-height: var(--touch-sm);
+  min-height: var(--touch-min);
   padding: 0 var(--space-20);
   font-size: var(--fs-13);
 }

package/css/components/chip.css

@@ -186,13 +186,18 @@
 /* ================================================================
    ==== MONTH-PILL
    Navigations-pill med manadsbyte (anvands i topbar pa Ekonom).
-   Hojd 36px = matchar .avatar default i topbar for visuell harmoni.
+
+   2026-05-26: pill-hojd 36px -> var(--touch-min) (44px) och prev/
+   next-knappar 28px -> var(--touch-min). WCAG AA tap-target. Pillen
+   stannar visuellt en pill (flex centrerar pilar + label vertikalt)
+   men yta blir 44px tall - paritet med .avatar och .pwa-avatar i
+   samma topbar-rad.
    ================================================================ */
 .month-pill {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  height: var(--circle-size);
+  min-height: var(--touch-min);
   padding: 0 var(--space-6);
   background: var(--surface-default);
   border: 1px solid var(--border-subtle);
@@ -205,16 +210,16 @@
   white-space: nowrap;
 }
 
-/* Prev/next-knappar inom month-pill: cirkulara tap-targets som passar
-   in i 36px-pillen. Inte WCAG-44x44 eftersom hela pillen ar liten
-   topbar-navigation (manadsbyte) - tap-target ar pill-segment. */
+/* Prev/next-knappar inom month-pill: 44x44 cirkulara tap-targets per
+   WCAG AA. SVG-ikonen inuti ar 16px - tap-targeten ar utokad, inte
+   ikonen. */
 .month-pill a,
 .month-pill button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--circle-size-sm);
-  height: var(--circle-size-sm);
+  width: var(--touch-min);
+  height: var(--touch-min);
   border-radius: var(--radius-full);
   color: var(--text-subtle);
   background: transparent;

package/css/components/inline-edit.css

@@ -19,12 +19,15 @@
   letter-spacing: var(--ls-tight);
 }
 
+/* 2026-05-26: width/height bumpat fran --circle-size-sm (28px) till
+   --touch-min (44px) for WCAG AA tap-target. Pencil-ikonen inuti
+   ar fortfarande liten (14px via template-SVG-attribut). */
 .inline-edit__btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--circle-size-sm);
-  height: var(--circle-size-sm);
+  width: var(--touch-min);
+  height: var(--touch-min);
   padding: 0;
   background: transparent;
   border: 0;

package/css/components/setting-row.css

@@ -155,12 +155,17 @@
    ==== TOGGLE (iOS-stil)
    Native checkbox dolt visuellt men a11y-tillganglig.
    ================================================================ */
+/* 2026-05-26: wrapper bumpat till min-height var(--touch-min) (44px)
+   for WCAG AA tap-target. Track behaller 26px-hojden (22px thumb +
+   2x2px inset) och centreras vertikalt via flex i wrappern. Klickytan
+   ar nu 44x44 medan visuell toggle-grafik forblir oforandrad. */
 .setting-toggle {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: var(--touch-min);
-  /* stylelint-disable-next-line klodd/no-literal-dimension -- toggle-track 26px (22px thumb + 2x2px inset), dokumenterat en-off */
-  height: 26px;
+  min-height: var(--touch-min);
   flex-shrink: 0;
 }
 .setting-toggle input {
@@ -176,7 +181,8 @@
 .setting-toggle__track {
   display: block;
   width: 100%;
-  height: 100%;
+  /* stylelint-disable-next-line klodd/no-literal-dimension -- toggle-track 26px (22px thumb + 2x2px inset), dokumenterat en-off */
+  height: 26px;
   background: var(--border-strong);
   border-radius: var(--radius-full);
   transition: background var(--dur-medium) var(--ease-spring-snappy);

package/css/utilities.css

@@ -154,10 +154,16 @@
      <a href="#main" class="skip-link">Hoppa till innehall</a>
    Lyft fran Ekonom + Jubb v4.3.0 (identical implementation efter
    konsekvens-cykel 2026-05-14 Sprint 5). */
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Padding 8/16 ger inte 44px hojd pa kort text, flex
+   centrerar text vertikalt i den storre ytan. */
 .skip-link {
   position: absolute;
   top: -100px;
   left: var(--space-8);
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--touch-min);
   padding: var(--space-8) var(--space-16);
   background: var(--accent-9);
   color: var(--surface-page);

package/package.json

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