@klodd/ds 3.5.4 → 3.5.6

package/SKILL.md

@@ -108,4 +108,16 @@ 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.
-Sprint C fas 2 template-migration pagaar.)
+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).
+v3.5.6 (Sprint F) konsoliderar BEM over 5 komponenter (card, dropdown,
+hero-roll, overlay, nav) - 23 flat-hyphen element-klasser konverterade
+till .block__element-syntax. Inkluderar JS-koordinering pa hero-roll,
+sheet-drag, turbo-nav, nav-optimistic dar querySelector/classList
+adresserar de bytta klasserna. .bottom-nav-item.active konverterad till
+BEM-modifier .bottom-nav__item--active. tooltip-wrapper bevarad som
+compound block per references/03-quality-bar.md regel 1. Sprint C fas 2
+template-migration pagaar.)

package/css/components/card.css

@@ -5,8 +5,8 @@
    pa klickbara kort. .card--flush tar bort padding (anvand for
    inbaddat innehall som hanterar egen padding).
 
-   Slot-konvention: .card-header / .card-body / .card-footer for
-   strukturerat innehall. .card-divider for horisontell separator.
+   Slot-konvention: .card__header / .card__body / .card__footer for
+   strukturerat innehall. .card__divider for horisontell separator.
    ================================================================ */
 
 
@@ -54,7 +54,7 @@
 
 /* --flush tar bort default padding sa innehallet kan ga edge-to-edge.
    Anvand nar barn-element har egen padding (ex. lista med list-rows). */
-.card--flush > .card-body {
+.card--flush > .card__body {
   padding: 0;
 }
 
@@ -62,24 +62,24 @@
 /* ================================================================
    ==== SLOTS
    Header och footer har samma padding som body men separator-linjer.
-   Anvand .card-divider for visuell uppdelning inom samma slot.
+   Anvand .card__divider for visuell uppdelning inom samma slot.
    ================================================================ */
-.card-header {
+.card__header {
   padding: var(--space-16) var(--space-16) var(--space-12);
   border-bottom: 1px solid var(--border-subtle);
 }
 
-.card-body {
+.card__body {
   padding: var(--space-16);
 }
 
-.card-footer {
+.card__footer {
   padding: var(--space-12) var(--space-16);
   border-top: 1px solid var(--border-subtle);
   background: var(--surface-default);
 }
 
-.card-divider {
+.card__divider {
   height: 1px;
   background: var(--border-subtle);
   margin: 0 calc(-1 * var(--space-16));

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/dropdown.css

@@ -1,15 +1,15 @@
 /* ================================================================
    components/dropdown.css
-   Kontextuell meny. Wrapper med trigger + .dropdown-menu som
+   Kontextuell meny. Wrapper med trigger + .dropdown__menu som
    visas via .is-open-toggling fran JS.
 
    Markup-pattern:
      <div class="dropdown" data-dropdown>
        <button class="btn btn--icon" data-dropdown-trigger>...</button>
-       <div class="dropdown-menu" role="menu">
-         <button class="dropdown-item" role="menuitem">Item 1</button>
-         <hr class="dropdown-divider">
-         <button class="dropdown-item dropdown-item--danger">Ta bort</button>
+       <div class="dropdown__menu" role="menu">
+         <button class="dropdown__item" role="menuitem">Item 1</button>
+         <hr class="dropdown__divider">
+         <button class="dropdown__item dropdown__item--danger">Ta bort</button>
        </div>
      </div>
 
@@ -21,7 +21,7 @@
   display: inline-flex;
 }
 
-.dropdown-menu {
+.dropdown__menu {
   position: absolute;
   top: calc(100% + var(--space-4));
   left: 0;
@@ -35,11 +35,11 @@
   display: none;
 }
 
-.dropdown.is-open .dropdown-menu {
+.dropdown.is-open .dropdown__menu {
   display: block;
 }
 
-.dropdown-item {
+.dropdown__item {
   display: flex;
   align-items: center;
   gap: var(--space-8);
@@ -56,32 +56,32 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .dropdown-item:hover {
+  .dropdown__item:hover {
     background: var(--surface-hover);
   }
 }
 
-.dropdown-item:active {
+.dropdown__item:active {
   background: var(--surface-active);
 }
 
-.dropdown-item:focus-visible {
+.dropdown__item:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: -2px;
 }
 
-.dropdown-item[disabled],
-.dropdown-item:disabled {
+.dropdown__item[disabled],
+.dropdown__item:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.dropdown-item--danger {
+.dropdown__item--danger {
   color: var(--bg-danger);
 }
 
-.dropdown-divider {
+.dropdown__divider {
   border: none;
   border-top: 1px solid var(--border-subtle);
   margin: var(--space-4) 0;

package/css/components/hero-roll.css

@@ -42,7 +42,7 @@
    En per siffra. Containrar en track av siffror som translateY:as
    till slutvardet. Overflow:hidden klipper allt utom synlig position.
    ================================================================ */
-.hero-digit-roller {
+.hero-amount__digit-roller {
   display: inline-block;
   height: var(--hero-digit-height, 1em);
   line-height: var(--hero-digit-height, 1em);
@@ -54,8 +54,8 @@
 /* Vignett over och under sa siffrorna fadar ut nar de rullar in/ut.
    --hero-vignette-color satts av app-konsumenten om subtle fade
    onskas mot bg, default transparent. */
-.hero-digit-roller::before,
-.hero-digit-roller::after {
+.hero-amount__digit-roller::before,
+.hero-amount__digit-roller::after {
   content: '';
   position: absolute;
   left: 0;
@@ -66,7 +66,7 @@
   background: transparent;
 }
 
-.hero-digit-roller::before {
+.hero-amount__digit-roller::before {
   top: 0;
   background: linear-gradient(
     to bottom,
@@ -75,7 +75,7 @@
   );
 }
 
-.hero-digit-roller::after {
+.hero-amount__digit-roller::after {
   bottom: 0;
   background: linear-gradient(
     to top,
@@ -91,13 +91,13 @@
    transition + transform. tabular-nums upprepad pa span-niva som
    safety-net om hero-amount-arvet skulle brytas av nan parent.
    ================================================================ */
-.hero-digit-track {
+.hero-amount__digit-track {
   display: flex;
   flex-direction: column;
   will-change: transform;
 }
 
-.hero-digit-track > span {
+.hero-amount__digit-track > span {
   height: var(--hero-digit-height, 1em);
   line-height: var(--hero-digit-height, 1em);
   display: block;
@@ -110,7 +110,7 @@
    Mellanslag och "kr"-suffix runt rollers. white-space: pre bevarar
    exakta blanksteg.
    ================================================================ */
-.hero-static-char {
+.hero-amount__static-char {
   display: inline-block;
   white-space: pre;
 }
@@ -123,7 +123,7 @@
    denna regel bara safety-net for befintliga inline-transitions.
    ================================================================ */
 @media (prefers-reduced-motion: reduce) {
-  .hero-digit-track {
+  .hero-amount__digit-track {
     transition: none !important;
   }
 }

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

@@ -31,7 +31,7 @@
   border-radius: 0;
 }
 
-.bottom-nav-item {
+.bottom-nav__item {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -51,17 +51,22 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .bottom-nav-item:hover {
+  .bottom-nav__item:hover {
     color: var(--text-default);
   }
 }
 
-.bottom-nav-item.active {
+.bottom-nav__item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.bottom-nav__item--active {
   color: var(--accent-text);
 }
 
-.bottom-nav-item .icon,
-.bottom-nav-item svg {
+.bottom-nav__item .icon,
+.bottom-nav__item svg {
   width: var(--space-20);
   height: var(--space-20);
 }
@@ -80,7 +85,7 @@
   margin-bottom: var(--space-16);
 }
 
-.topbar-back {
+.topbar__back {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -97,17 +102,17 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .topbar-back:hover {
+  .topbar__back:hover {
     background: var(--surface-hover);
   }
 }
 
-.topbar-back:focus-visible {
+.topbar__back:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
 }
 
-.topbar-title {
+.topbar__title {
   flex: 1;
   min-width: 0;
   font-size: var(--fs-17);
@@ -120,7 +125,7 @@
   white-space: nowrap;
 }
 
-.topbar-action {
+.topbar__action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -136,11 +141,16 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .topbar-action:hover {
+  .topbar__action:hover {
     color: var(--text-default);
   }
 }
 
+.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/overlay.css

@@ -13,9 +13,9 @@
    ==== DIALOG-BACKDROP
    Halvtransparent overlay med blur. Anvands av bade .dialog och
    .sheet. native ::backdrop pseudo-element (om <dialog>) eller en
-   konkret <div class="dialog-backdrop"> for portal-baserade modaler.
+   konkret <div class="dialog__backdrop"> for portal-baserade modaler.
    ================================================================ */
-.dialog-backdrop,
+.dialog__backdrop,
 dialog.dialog::backdrop,
 dialog.sheet::backdrop {
   background: color-mix(in oklch, var(--surface-page) 60%, transparent);
@@ -54,7 +54,7 @@ dialog.sheet::backdrop {
   inset: auto;
 }
 
-.dialog-header {
+.dialog__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -63,13 +63,13 @@ dialog.sheet::backdrop {
   border-bottom: 1px solid var(--border-subtle);
 }
 
-.dialog-body {
+.dialog__body {
   padding: var(--space-20);
   overflow-y: auto;
   max-height: 60vh;
 }
 
-.dialog-footer {
+.dialog__footer {
   display: flex;
   justify-content: flex-end;
   gap: var(--space-8);
@@ -111,7 +111,7 @@ dialog.sheet::backdrop {
   inset: auto 0 0 0;
 }
 
-.sheet-handle {
+.sheet__handle {
   width: 32px;
   height: 4px;
   margin: 0 auto var(--space-16);
@@ -119,12 +119,12 @@ dialog.sheet::backdrop {
   border-radius: var(--radius-full);
 }
 
-.sheet-body {
+.sheet__body {
   padding-top: var(--space-4);
 }
 
 /* Sheet-section divider for grupper inom samma sheet. */
-.sheet-divider {
+.sheet__divider {
   height: 1px;
   background: var(--border-subtle);
   margin: var(--space-16) calc(-1 * var(--space-20));

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

@@ -13,7 +13,13 @@
    tooltip-elementet sa det inte snor klick fran wrappern.
 
    prefers-reduced-motion respekteras (opacity-fade tas bort).
-   ================================================================ */
+
+   BEM-anteckning (Sprint F): .tooltip-wrapper ar ett COMPOUND BLOCK,
+   inte ett flat-element av .tooltip. Wrappern ar utanfor .tooltip i
+   DOM (parent, inte child). Compound-block-monstret foljer .hub-card-
+   konventionen per references/03-quality-bar.md regel 1 ("Block:
+   substantiv (.card, .banner, .hub-card)"). Ingen __wrapper-syntax
+   eftersom wrappern inte ar ett element AV tooltip. */
 .tooltip-wrapper {
   position: relative;
   display: inline-flex;

package/js/hero-roll.js

@@ -77,10 +77,10 @@
 
 	function buildRoller ( targetDigit ) {
 		const roller = document.createElement( 'span' );
-		roller.className = 'hero-digit-roller';
+		roller.className = 'hero-amount__digit-roller';
 
 		const track = document.createElement( 'span' );
-		track.className = 'hero-digit-track';
+		track.className = 'hero-amount__digit-track';
 
 		const totalSteps = targetDigit + ( EXTRA_ROUNDS * 10 );
 		for ( let i = 0; i <= totalSteps; i++ ) {
@@ -95,7 +95,7 @@
 
 	function buildStaticChar ( text ) {
 		const span = document.createElement( 'span' );
-		span.className = 'hero-static-char';
+		span.className = 'hero-amount__static-char';
 		span.textContent = text;
 		return span;
 	}

package/js/nav-optimistic.js

@@ -41,11 +41,11 @@
 
 		const pod = e.target.closest( '.nav-pod' );
 		if ( ! pod || ! nav.contains( pod ) ) return;
-		if ( pod.classList.contains( 'active' ) ) return;
+		if ( pod.classList.contains( 'bottom-nav__item--active' ) ) return;
 
 		const previousActive = nav.querySelector( '.nav-pod.active' );
-		previousActive && previousActive.classList.remove( 'active' );
-		pod.classList.add( 'active' );
+		previousActive && previousActive.classList.remove( 'bottom-nav__item--active' );
+		pod.classList.add( 'bottom-nav__item--active' );
 
 		pendingNav = { from: previousActive, to: pod };
 
@@ -55,8 +55,8 @@
 		clearTimeout( failsafeTimer );
 		failsafeTimer = setTimeout( () => {
 			if ( pendingNav ) {
-				pendingNav.to.classList.remove( 'active' );
-				pendingNav.from && pendingNav.from.classList.add( 'active' );
+				pendingNav.to.classList.remove( 'bottom-nav__item--active' );
+				pendingNav.from && pendingNav.from.classList.add( 'bottom-nav__item--active' );
 				reset();
 			}
 		}, 3000 );

package/js/sheet-drag.js

@@ -1,7 +1,7 @@
 /*--------------------------------------------------------------
  Ekonom - Sheet drag-to-dismiss (Sprint C2).
 
- Pointer Events-baserad drag fran sheet-handle (eller sheet-toppen
+ Pointer Events-baserad drag fran sheet__handle (eller sheet-toppen
  nar sheet ar scrollad till topp). 1:1 tracking under drag.
  Threshold for dismiss: 40% av sheet-hojd ELLER velocity > 0.5 px/ms.
  Spring-back om under threshold (CSS bounce-easing).
@@ -22,7 +22,7 @@
 		if (dialog.dataset.dragAttached) return;
 		dialog.dataset.dragAttached = '1';
 
-		const handle = dialog.querySelector('.sheet-handle');
+		const handle = dialog.querySelector('.sheet__handle');
 		if (!handle) return;
 
 		let dragging = false;

package/js/turbo-nav.js

@@ -186,12 +186,12 @@
 		if ( newNav && liveNav ) {
 			const newActiveHref = newNav.querySelector( '.nav-pod.active' );
 			const liveActive = liveNav.querySelector( '.nav-pod.active' );
-			if ( liveActive ) liveActive.classList.remove( 'active' );
+			if ( liveActive ) liveActive.classList.remove( 'bottom-nav__item--active' );
 			if ( newActiveHref ) {
 				const target = liveNav.querySelector(
 					'a[href="' + newActiveHref.getAttribute( 'href' ) + '"]'
 				);
-				if ( target ) target.classList.add( 'active' );
+				if ( target ) target.classList.add( 'bottom-nav__item--active' );
 			}
 		}
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.5.4",
+  "version": "3.5.6",
   "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/02-components.md

@@ -54,7 +54,7 @@ inga primitives. BEM-konvention (block__element--modifier).
 - **Tokens:** `currentColor` - parent-element styr fargen
 
 ### hero-roll (`hero-roll.css`)
-- **Klasser:** `.hero-amount[data-animate-roll]`, `.hero-digit-track`
+- **Klasser:** `.hero-amount[data-animate-roll]`, `.hero-amount__digit-track`
 - **Anvand:** Display-siffer-animation pa hero-vyer (kodlas-rullning)
 - **INTE:** Vanliga numeriska varden (anvand `.hero__amount` utan data-animate-roll)
 - **Tokens:** `--text-default`, `--lh-tight`, `--ls-tightest`, `--fs-80`. **Undantag:** `font-weight: 600` (display-undantaget fran 400/500-policyn).

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