@klodd/ds 3.5.4 → 3.5.5

package/SKILL.md

@@ -108,4 +108,9 @@ v3.5.3 lagger till .heading-utan-N (17px) for dialog-titlar och sheet-rubriker.
 v3.5.4 (Sprint D-3) introducerar --fs-16 token (16px) for iOS-anti-zoom
 pa inputs och applicerar pa inline-edit__input. Token ar dokumenterad
 som BARA for input-element - vanlig text anvander fortfarande 15 eller 17.
+v3.5.5 (Sprint E) konsoliderar :focus-visible over 7 komponenter (chip,
+list-row, tab-bar, nav, swipe-stack, inline-edit) - 11 nya selectorer
+fick outline 2px solid var(--border-focus) med outline-offset 2px. Plus
+.tab outline-offset normaliserad 1px->2px. input.css och .inline-edit__input
+ar dokumenterade undantag som behaller :focus (text-input-konvention).
 Sprint C fas 2 template-migration pagaar.)

package/css/components/chip.css

@@ -101,6 +101,11 @@
   }
 }
 
+.chip-list__delete:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .chip-list__add {
   background: transparent;
   border-style: dashed;
@@ -120,6 +125,11 @@
   }
 }
 
+.chip-list__add:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 
 /* ================================================================
    ==== BRAND-PILL
@@ -245,6 +255,11 @@
   .install-chip__install:hover { background: var(--accent-10); }
 }
 
+.install-chip__install:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .install-chip__dismiss {
   background: transparent;
   border: none;
@@ -261,6 +276,11 @@
   .install-chip__dismiss:hover { color: var(--text-default); }
 }
 
+.install-chip__dismiss:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 @keyframes install-chip-up {
   from { transform: translateY(calc(100% + 100px)); opacity: 0; }
   to   { transform: translateY(0); opacity: 1; }

package/css/components/inline-edit.css

@@ -41,6 +41,11 @@
   }
 }
 
+.inline-edit__btn:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .inline-edit__form {
   display: inline-flex;
   align-items: center;
@@ -68,6 +73,10 @@
   outline: none;
 }
 
+/* :focus (INTE :focus-visible) - text-input-undantag analogt med
+   input.css. Anvandare klickar/touchar inputen och forvantar sig
+   visuell feedback oavsett input-method. Border + box-shadow ar
+   integrerad i input-utseendet. */
 .inline-edit__input:focus {
   border-color: var(--accent-9);
   box-shadow: 0 0 0 3px var(--accent-a3);

package/css/components/input.css

@@ -61,6 +61,18 @@
 /* ================================================================
    ==== STATES
    ================================================================ */
+
+/* Inputs anvander :focus (INTE :focus-visible) som dokumenterat
+   undantag fran paketets generella focus-visible-monster.
+
+   Skal: text-inputs ar specialfall - anvandare klickar/touchar dem
+   och forvantar sig visuell feedback oavsett input-method (mus eller
+   tangentbord). Att gomma fokus-ring vid mus-klick (vilket
+   :focus-visible skulle gora) kan forvirra anvandare om vilket falt
+   som ar aktivt. Konvention foljer Radix UI, MUI, shadcn etc.
+
+   Fokus-feedback ar border-color + box-shadow ring (inte outline) -
+   integrerad i input-utseendet snarare an "added on top". */
 .input:focus,
 .textarea:focus,
 .select:focus {

package/css/components/list-row.css

@@ -113,3 +113,8 @@
 @media (hover: hover) and (pointer: fine) {
   .list-row--clickable:hover { background: var(--surface-hover); }
 }
+
+.list-row--clickable:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}

package/css/components/nav.css

@@ -56,6 +56,11 @@
   }
 }
 
+.bottom-nav-item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .bottom-nav-item.active {
   color: var(--accent-text);
 }
@@ -141,6 +146,11 @@
   }
 }
 
+.topbar-action:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 
 /* ================================================================
    ==== TAB-BAR (inline tabs i panel)
@@ -188,5 +198,5 @@
 
 .tab:focus-visible {
   outline: 2px solid var(--border-focus);
-  outline-offset: 1px;
+  outline-offset: 2px;
 }

package/css/components/swipe-stack.css

@@ -47,6 +47,11 @@
 
 .swipe-card:active { cursor: grabbing; }
 
+.swipe-card:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .swipe-card--back {
   transform: scale(0.96);
   opacity: 0.85;
@@ -154,6 +159,11 @@
   transition: transform var(--press-in-duration) var(--press-in-easing);
 }
 
+.swipe-action-btn:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .swipe-action-btn--save  { color: var(--positive); }
 .swipe-action-btn--dismiss { color: var(--negative); }
 

package/css/components/tab-bar.css

@@ -56,3 +56,8 @@
   transform: scale(0.985);
   transition: transform 80ms var(--ease-spring-snappy);
 }
+
+.tab-bar__item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.5.4",
+  "version": "3.5.5",
   "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.5.3 (2026-05-09): tillagg .heading (17px medium tight) i base/typography.css for dialog-titlar och sheet-rubriker. Tackar luckan mellan .heading-2 (18px) och .heading-3 (15px) - matchar Ekonoms gamla .heading-class.",
   "main": "css/index.css",
   "bin": {

package/references/03-quality-bar.md

@@ -62,6 +62,13 @@ Lista over absoluta krav som inte ska brytas. Varje krav har konkret
 - ALDRIG `rgba(0, 0, 0, 0.4)` - anvand `color-mix(in oklch, ...)` eller
   semantic alpha-token
 
+**Scope:**
+Galler komponenter i `components/*.css` och per-app domain-filer
+(`X-domain.css`, `X.css`). Galler INTE `apps/X.css` - den filen ar
+per definition det lager som haller app-specifika ravarden och
+far referera primitives eller explicita hex-varden for app-karaktar
+som saknar Radix-ekvivalent.
+
 **Varfor:**
 - Single source of truth: andring i 00-primitives.css landar omedelbart
   i alla komponenter