@klodd/ds 3.21.1 → 3.21.3

package/css/10-semantic.css

@@ -43,6 +43,13 @@
      INTE for: modaler och popovers (anvand --surface-overlay). */
   --surface-raised:  light-dark(oklch(0.99 0.002 250), var(--gray-3));
 
+  /* Forhoejt kort - mellansteg mellan raised och overlay. Anvands for
+     kort som behover mer visuell prominens an --surface-raised men
+     inte ar overlays/modaler. Mappas till color-3 i app-overrides
+     (vs raised color-2). v3.21.3 - infort efter audit av Jubb's
+     job-card som behovde mer kontrast mot main-bakgrunden. */
+  --surface-elevated: light-dark(oklch(0.97 0.003 250), var(--gray-3));
+
   /* Svavande yta - modaler, popovers, dropdowns.
      Anvand for: dialog-bakgrund, tooltip, context-menu, sheets.
      INTE for: inbaddade kort (anvand --surface-raised). */

package/css/apps/jubb.css

@@ -25,13 +25,14 @@
 
      Blue-1 (#0d1520) är morkast - sidans bakgrund.
      Blue-2 (#111927) - sektioner, nav, tab-bar OCH kort (raised).
-     Blue-3 (#0d2847) - inte langre raised, frigjord for ev. framtida
-     niva mellan raised och overlay.
+     Blue-3 (#0d2847) - elevated kort (v3.21.3) - mellansteg mellan
+     raised och overlay för kort som behöver extra kontrast.
      Blue-4 (#003362) - modaler, popovers (overlay).
      Blue-5 (#004074) - active-state. */
   --surface-page:    var(--blue-1);
   --surface-default: var(--blue-2);
   --surface-raised:  var(--blue-2);
+  --surface-elevated: var(--blue-3);
   --surface-overlay: var(--blue-4);
   --surface-hover:   var(--blue-4);
   --surface-active:  var(--blue-5);

package/css/components/badge.css

@@ -131,3 +131,109 @@
 .score-pill--na.is-loading {
   background: var(--surface-active);
 }
+
+
+/* ================================================================
+   .score-circle - cirkulär relevance-score-display (v3.21.2)
+   Standardstorlek 36x36 matchar .avatar default. Tabular-nums för
+   visuellt-jämn siffer-rendering. Klickbart fall (--na) triggar
+   rescore med is-loading spinning animation.
+
+   Modifiers: --strong (grön), --medium (gul), --low (grå), --na (klickbar)
+   States på --na: :hover, :active, :focus-visible, :disabled, .is-loading
+
+   Användning:
+     <span class="score-circle score-circle--strong">8.4</span>
+     <button class="score-circle score-circle--na" data-action="rescore"
+             data-job-id="X" aria-label="Bedöm jobbet">N/A</button>
+   ================================================================ */
+.score-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.score-circle--strong {
+  color: var(--positive);
+  background: var(--positive-dim);
+  border-color: var(--positive-border);
+}
+
+.score-circle--medium {
+  color: var(--warning);
+  background: var(--warning-dim);
+  border-color: var(--warning-border);
+}
+
+.score-circle--low {
+  color: var(--text-muted);
+  background: var(--surface-default);
+  border-color: var(--border-subtle);
+}
+
+/* --na: klickbar (button-element) som triggar rescore via JS. Dashed
+   border signalerar "bedömning saknas, klicka för att försöka". */
+.score-circle--na {
+  color: var(--text-muted);
+  background: var(--surface-default);
+  border: 1px dashed var(--border-default);
+  cursor: pointer;
+  font-size: var(--fs-11);
+  font-family: inherit;
+  transition: background var(--dur-fast) var(--ease-default),
+              color var(--dur-fast) var(--ease-default);
+}
+@media (hover: hover) and (pointer: fine) {
+  .score-circle--na:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+.score-circle--na:active { transform: scale(0.96); }
+.score-circle--na:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.score-circle--na:disabled,
+.score-circle--na[aria-disabled="true"] {
+  cursor: progress;
+}
+
+/* is-loading: spinning border-segment medan AI bedömer. Texten döljs
+   visuellt (transparent) men ::after-pseudo ritar en roterande ring.
+   prefers-reduced-motion slowar ner animationen markant. */
+.score-circle--na.is-loading {
+  color: transparent;
+  background: var(--surface-default);
+  border-color: var(--border-default);
+  border-style: solid;
+}
+.score-circle--na.is-loading::after {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  border-top-color: var(--accent-9);
+  animation: score-circle-spin 0.8s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .score-circle--na.is-loading::after {
+    animation-duration: 2s;
+  }
+}
+@keyframes score-circle-spin {
+  to { transform: rotate(360deg); }
+}

package/package.json

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

package/references/02-components.md

@@ -33,12 +33,12 @@ För varje entry gäller:
 - **Tokens:** `--surface-sunken/-default`, `--accent-9`, `--accent-a3` (focus-ring), `--bg-danger` (error-state)
 
 ### badge (`badge.css`)
-- **Blocks:** `.badge`, `.score-pill` (sibling, kanonisk definition)
-- **Modifiers:** `.badge--neutral/-success/-warning/-danger/-accent`, `.score-pill--strong/-medium/-low`, `.score-pill--na` (v3.21.1 - klickbar N/A för rescore-trigger)
-- **States på `.score-pill--na`:** `.is-loading`, `[aria-disabled="true"]`, `:disabled` (cursor: progress)
-- **Anvand:** Status-pills (statiska) + score-pill--na som klickbar rescore-trigger (vanligtvis som `<button>`-element med `data-action="rescore"`)
+- **Blocks:** `.badge`, `.score-pill` (legacy rectangular form, behålls för bakåtkompat), `.score-circle` (v3.21.2 - cirkulär form, ersätter score-pill för relevance-displays)
+- **Modifiers:** `.badge--neutral/-success/-warning/-danger/-accent`, `.score-pill--strong/-medium/-low/-na`, `.score-circle--strong/-medium/-low/-na`
+- **States på `.score-pill--na` + `.score-circle--na`:** `.is-loading` (spinning animation), `[aria-disabled="true"]`, `:disabled` (cursor: progress)
+- **Anvand:** Status-pills (statiska) + score-circle--na som klickbar rescore-trigger med spinning loading-animation. Standardstorlek 36x36 matchar .avatar default.
 - **INTE:** Klickbara chips (anvand `.chip`)
-- **Tokens:** `--positive/-dim/-border`, `--warning/-dim/-border`, `--bg-danger`, `--accent-text/-a2/-a6`, `--surface-default/-hover/-active`, `--border-default/-focus/-subtle`
+- **Tokens:** `--positive/-dim/-border`, `--warning/-dim/-border`, `--bg-danger`, `--accent-text/-a2/-a6/--accent-9`, `--surface-default/-hover/-active`, `--border-default/-focus/-subtle`, `--dur-fast`, `--ease-default`
 
 ### card (`card.css`)
 - **Blocks:** `.card`