@klodd/ds 5.15.7 → 5.16.1

package/css/components/avatar.css

@@ -23,6 +23,9 @@
   line-height: var(--lh-tight);
 }
 
+/* --sm ar dekorativ storlek (28px) - INTE en sjalvstandig tap-target.
+   Wrapper-elementet (<a>, <button>) ansvarar for min 44px klickyta.
+   Anvand aldrig .avatar--sm som ensamt klickbart element. */
 .avatar--sm {
   width: var(--circle-size-sm);
   height: var(--circle-size-sm);

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

@@ -19,10 +19,14 @@
    v3.13.0: .install-chip (PWA install-prompt) borttagen tillsammans
    med tillhörande JS i pwa-register.js.
    ================================================================ */
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Padding/font-size oforandrade - chipset stannar visuellt
+   kompakt men yta blir 44px tall sa klickytan motsvarar standarden. */
 .chip {
   display: inline-flex;
   align-items: center;
   gap: var(--space-6);
+  min-height: var(--touch-min);
   font-size: var(--fs-11);
   font-weight: var(--fw-medium);
   padding: var(--space-4) var(--space-10);
@@ -87,12 +91,15 @@
   padding: 0;
 }
 
+/* 2026-05-26: 18x18 -> --touch-min (44x44) for WCAG AA. Den visuella
+   x-ikonen inuti behaller sin smaa storlek (template-SVG-attribut) -
+   bara tap-targeten utokas till 44x44. */
 .chip-list__delete {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--space-18);
-  height: var(--space-18);
+  width: var(--touch-min);
+  height: var(--touch-min);
   padding: 0;
   background: transparent;
   border: 0;
@@ -127,7 +134,11 @@
   pointer-events: none;
 }
 
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Bredd, padding och font behalls (komposition med .chip-list
+   __item-styling). */
 .chip-list__add {
+  min-height: var(--touch-min);
   background: transparent;
   border-style: dashed;
   color: var(--text-subtle);
@@ -186,13 +197,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 +221,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/dropdown.css

@@ -41,11 +41,15 @@
   display: block;
 }
 
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Text centreras vertikalt via existerande align-items.
+   Padding-inline 12 + fs-14 behalls - menyrad blir luftigare. */
 .dropdown__item {
   display: flex;
   align-items: center;
   gap: var(--space-8);
   width: 100%;
+  min-height: var(--touch-min);
   padding: var(--space-8) var(--space-12);
   font-family: inherit;
   font-size: var(--fs-14);

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/pill-nav.css

@@ -45,11 +45,14 @@
   display: none;
 }
 
+/* 2026-05-26: height var(--circle-size) (36px) -> min-height
+   var(--touch-min) (44px) for WCAG AA tap-target. Padding och fs-13
+   behalls - pillen vaxer bara vertikalt. */
 .pill-nav__item {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: var(--circle-size);
+  min-height: var(--touch-min);
   padding: 0 var(--space-16);
   background: var(--surface-default);
   border: 1px solid var(--border-subtle);

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/components/sheet-content.css

@@ -200,9 +200,13 @@
   gap: var(--space-8);
 }
 
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Tidigare ~43px (1px under). Padding och centrering
+   oforandrade. */
 .sheet__item {
   display: block;
   width: 100%;
+  min-height: var(--touch-min);
   padding: var(--space-12) var(--space-14);
   background: var(--surface-default);
   border: 1px solid var(--border-default);

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.7",
+  "version": "5.16.1",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {