@klodd/ds 1.0.0

package/css/components/badge.css

@@ -0,0 +1,98 @@
+/* ================================================================
+   components/badge.css
+   .badge - generisk pill med variants for status.
+   .score-pill - tabular-nums-pill speciellt for relevance-scores.
+
+   BEM-konvention med double-dash for varianter.
+   ================================================================ */
+
+
+/* ================================================================
+   ==== BADGE (generisk)
+   Inline-flex pill med valfri ikon + text. Default = neutral surface.
+   ================================================================ */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-2) var(--space-10);
+  font-size: var(--fs-11);
+  font-weight: var(--fw-medium);
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  color: var(--text-subtle);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+}
+
+.badge--neutral {
+  color: var(--text-subtle);
+  background: var(--surface-default);
+  border-color: var(--border-subtle);
+}
+
+.badge--success {
+  color: var(--positive);
+  background: var(--positive-dim);
+  border-color: var(--positive-border);
+}
+
+.badge--warning {
+  color: var(--warning);
+  background: var(--warning-dim);
+  border-color: var(--warning-border);
+}
+
+.badge--danger {
+  color: var(--accent-danger);
+  background: var(--accent-danger-dim);
+  border-color: var(--accent-danger-border);
+}
+
+.badge--accent {
+  color: var(--accent-text);
+  background: var(--accent-a10);
+  border-color: var(--accent-a40);
+}
+
+
+/* ================================================================
+   ==== SCORE-PILL (tabular-nums for justering)
+   Anvands pa relevance-scores i jobblistan, triage, job-detail.
+   Modifiers: --strong (gron), --medium (gul), --low (gra).
+   ================================================================ */
+.score-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--space-2) var(--space-8);
+  font-size: var(--fs-11);
+  font-weight: var(--fw-medium);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+}
+
+.score-pill--strong {
+  color: var(--positive);
+  background: var(--positive-dim);
+  border-color: var(--positive-border);
+}
+
+.score-pill--medium {
+  color: var(--warning);
+  background: var(--warning-dim);
+  border-color: var(--warning-border);
+}
+
+.score-pill--low {
+  color: var(--text-muted);
+  background: var(--surface-default);
+  border-color: var(--border-subtle);
+}

package/css/components/button.css

@@ -0,0 +1,200 @@
+/* ================================================================
+   components/button.css
+   BEM-konvention: .btn (bas), .btn--<variant>, .btn--<size>, .btn--<state>.
+   States via :hover, :active, :focus-visible, [disabled], .btn--loading.
+
+   Standardvarianter:
+   - --primary   solid accent
+   - --secondary surface med border
+   - --ghost     transparent text
+   - --danger    solid danger
+
+   Standardstorlekar:
+   - --sm  36px tall, fs-13
+   - --md  44px tall, fs-14 (default - inget --md klass behovs)
+   - --lg  52px tall, fs-15
+
+   Tilläggsformer:
+   - --icon    kvadratisk, bara ikon
+   - --circle  rund (pill)
+   ================================================================ */
+
+
+/* ================================================================
+   ==== BAS
+   Alla knappar har samma fundamental: 44px touch-target, medium-vikt,
+   10px radius, smooth transitions, fokusring.
+   ================================================================ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  min-height: var(--touch-min);
+  padding: 0 var(--space-16);
+  font-family: inherit;
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  line-height: 1;
+  color: var(--text-default);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-10);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition:
+    background var(--dur-base) var(--ease-spring-snappy),
+    border-color var(--dur-base) var(--ease-spring-snappy),
+    color var(--dur-base) var(--ease-spring-snappy),
+    transform var(--press-out-duration) var(--press-out-easing);
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.btn:active {
+  transform: scale(0.97);
+  transition:
+    background var(--press-in-duration) var(--press-in-easing),
+    transform var(--press-in-duration) var(--press-in-easing);
+}
+
+.btn[disabled],
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+
+/* ================================================================
+   ==== VARIANTER
+   ================================================================ */
+
+/* --primary: solid accent. Default action. */
+.btn--primary {
+  background: var(--accent-9);
+  color: var(--text-on-accent);
+  border-color: var(--accent-9);
+}
+@media (hover: hover) and (pointer: fine) {
+  .btn--primary:hover {
+    background: var(--accent-10);
+    border-color: var(--accent-10);
+  }
+}
+
+/* --secondary: surface med border. Sekundar action. */
+.btn--secondary {
+  background: var(--surface-default);
+  color: var(--text-default);
+  border-color: var(--border-default);
+}
+@media (hover: hover) and (pointer: fine) {
+  .btn--secondary:hover {
+    background: var(--surface-hover);
+    border-color: var(--border-strong);
+  }
+}
+
+/* --ghost: transparent. Tertiar action / cancel. */
+.btn--ghost {
+  background: transparent;
+  color: var(--text-subtle);
+  border-color: transparent;
+}
+@media (hover: hover) and (pointer: fine) {
+  .btn--ghost:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+
+/* --danger: solid danger. Destruktiv action. */
+.btn--danger {
+  background: var(--bg-danger);
+  color: var(--text-on-status);
+  border-color: var(--bg-danger);
+}
+@media (hover: hover) and (pointer: fine) {
+  .btn--danger:hover {
+    filter: brightness(1.1);
+  }
+}
+
+
+/* ================================================================
+   ==== STORLEKAR
+   --md ar default (44px). Anvand bara --sm eller --lg explicit.
+   ================================================================ */
+.btn--sm {
+  min-height: 36px;
+  padding: 0 var(--space-12);
+  font-size: var(--fs-13);
+}
+
+.btn--lg {
+  min-height: 52px;
+  padding: 0 var(--space-20);
+  font-size: var(--fs-15);
+}
+
+
+/* ================================================================
+   ==== FORMER
+   --icon: kvadratisk for bara ikon (32x32 sm, 44x44 md, 52x52 lg).
+   --circle: rund (pill via radius-full). Anvands for cirkel-cta.
+   ================================================================ */
+.btn--icon {
+  width: var(--touch-min);
+  height: var(--touch-min);
+  padding: 0;
+}
+.btn--icon.btn--sm { width: 36px; height: 36px; }
+.btn--icon.btn--lg { width: 52px; height: 52px; }
+
+.btn--circle {
+  border-radius: var(--radius-full);
+}
+
+
+/* ================================================================
+   ==== LOADING-STATE
+   Doljer text och visar spinner via ::after. Behaller knappens
+   bredd sa layout inte hoppar.
+   ================================================================ */
+.btn--loading {
+  color: transparent !important;
+  pointer-events: none;
+}
+
+.btn--loading::after {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-full);
+  color: var(--text-default);
+  animation: btn-spin 0.6s linear infinite;
+  opacity: 1;
+}
+
+.btn--primary.btn--loading::after,
+.btn--danger.btn--loading::after {
+  color: var(--text-on-accent);
+}
+
+@keyframes btn-spin {
+  to { transform: rotate(360deg); }
+}

package/css/components/card.css

@@ -0,0 +1,86 @@
+/* ================================================================
+   components/card.css
+   .card - upphojd yta med subtil border. Standardcontainer for
+   panel-stylade sektioner. .card--interactive ger hover/active-feel
+   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.
+   ================================================================ */
+
+
+/* ================================================================
+   ==== BAS
+   ================================================================ */
+.card {
+  background: var(--surface-raised);
+  color: var(--text-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-14);
+  overflow: hidden;
+  transition:
+    background var(--dur-base) var(--ease-spring-snappy),
+    border-color var(--dur-base) var(--ease-spring-snappy),
+    transform var(--press-out-duration) var(--press-out-easing);
+}
+
+
+/* ================================================================
+   ==== VARIANTER
+   ================================================================ */
+.card--interactive {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .card--interactive:hover {
+    background: var(--surface-overlay);
+    border-color: var(--border-default);
+  }
+}
+
+.card--interactive:active {
+  transform: scale(0.99);
+  transition: transform var(--press-in-duration) var(--press-in-easing);
+}
+
+.card--interactive:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+/* --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 {
+  padding: 0;
+}
+
+
+/* ================================================================
+   ==== SLOTS
+   Header och footer har samma padding som body men separator-linjer.
+   Anvand .card-divider for visuell uppdelning inom samma slot.
+   ================================================================ */
+.card-header {
+  padding: var(--space-16) var(--space-16) var(--space-12);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.card-body {
+  padding: var(--space-16);
+}
+
+.card-footer {
+  padding: var(--space-12) var(--space-16);
+  border-top: 1px solid var(--border-subtle);
+  background: var(--surface-default);
+}
+
+.card-divider {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 0 calc(-1 * var(--space-16));
+}

package/css/components/feedback.css

@@ -0,0 +1,187 @@
+/* ================================================================
+   components/feedback.css
+   Toast, empty-state, skeleton-loader, spinner.
+   Komponenter for transient feedback och loading-states.
+   ================================================================ */
+
+
+/* ================================================================
+   ==== TOAST
+   Transient meddelande, oftast ankrat top-center via .toast-region
+   wrapper. Fyra varianter: default (neutral), --success, --error,
+   --warning. Animerad in via @keyframes toast-in.
+   ================================================================ */
+.toast {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-10);
+  padding: var(--space-12) var(--space-16);
+  font-size: var(--fs-14);
+  line-height: 1.4;
+  color: var(--text-default);
+  background: var(--surface-overlay);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-12);
+  box-shadow: var(--shadow-float);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  pointer-events: auto;
+  max-width: 90vw;
+  animation: toast-in 0.32s var(--ease-spring-bounce);
+}
+
+.toast--success {
+  background: var(--bg-success);
+  border-color: var(--positive-border);
+  color: var(--text-on-status);
+}
+
+.toast--error {
+  background: var(--bg-danger);
+  border-color: var(--accent-danger-border);
+  color: var(--text-on-status);
+}
+
+.toast--warning {
+  background: var(--bg-warning);
+  border-color: var(--warning-border);
+  color: var(--text-on-status);
+}
+
+@keyframes toast-in {
+  0%   { opacity: 0; transform: translateY(-8px) scale(0.96); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+
+/* ================================================================
+   ==== EMPTY-STATE
+   Centrerad ikon + rubrik + text + valfri knapp. Anvands i listor
+   utan resultat, dashboards utan data, eller efter genomforda
+   actions ("Allt klart").
+   ================================================================ */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-12);
+  padding: var(--space-40) var(--space-20);
+  text-align: center;
+}
+
+.empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  background: var(--surface-default);
+  color: var(--text-muted);
+  border-radius: var(--radius-full);
+  margin-bottom: var(--space-4);
+}
+
+.empty-state__title {
+  font-size: var(--fs-17);
+  font-weight: var(--fw-medium);
+  line-height: var(--lh-snug);
+  color: var(--text-default);
+  margin: 0;
+}
+
+.empty-state__text {
+  font-size: var(--fs-14);
+  line-height: var(--lh-base);
+  color: var(--text-subtle);
+  max-width: 320px;
+  margin: 0;
+}
+
+
+/* ================================================================
+   ==== SKELETON
+   Loading-placeholder med subtle pulse-animation. Storleksvarianter
+   for vanliga formfaktorer: --text (en rad), --circle (avatar),
+   --card (full kort).
+   ================================================================ */
+.skeleton {
+  display: block;
+  background: linear-gradient(
+    90deg,
+    var(--surface-default) 0%,
+    var(--surface-overlay) 50%,
+    var(--surface-default) 100%
+  );
+  background-size: 200% 100%;
+  border-radius: var(--radius-6);
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+.skeleton--text {
+  height: var(--space-12);
+  border-radius: var(--radius-4);
+}
+
+.skeleton--circle {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+}
+
+.skeleton--card {
+  height: 80px;
+  border-radius: var(--radius-14);
+}
+
+@keyframes skeleton-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+    background: var(--surface-default);
+  }
+}
+
+
+/* ================================================================
+   ==== SPINNER
+   Roterande loader. Tre storlekar via --sm/--lg modifiers (default md).
+   Anvander currentColor sa parent kan styra fargen.
+   ================================================================ */
+.spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-full);
+  color: var(--accent-9);
+  animation: spinner-rotate 0.7s linear infinite;
+  vertical-align: middle;
+}
+
+.spinner--sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.spinner--lg {
+  width: 40px;
+  height: 40px;
+  border-width: 3px;
+}
+
+@keyframes spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-duration: 2s;
+  }
+}

package/css/components/hero-roll.css

@@ -0,0 +1,129 @@
+/* ================================================================
+   components/hero-roll.css
+   Delad animationskomponent: kodlas-rullnings-animation pa hero-siffror.
+   Aktiveras via <p class="hero-amount" data-animate-roll="N">N kr</p>
+   och hero-roll.js. Ursprung: Ekonom Sprint J + J.3-J.6 (2026-04-27 ff).
+
+   Helt app-token-fri - referar bara primitives (--lh-tight, --space-N,
+   --fs-N, --fw-medium) och en text-color (--text-default). Inga
+   --accent-*, --blue-*, --purple-* eller andra app-overrides. Samma
+   styling for Jubb och Ekonom.
+
+   Krav for korrekt rendering:
+   - font-variant-numeric: tabular-nums (sa 0-9-glyfer ar lika breda)
+   - --lh-tight definierad i primitives (anvands som rullhojd)
+   - prefers-reduced-motion respekteras (hoppar direkt till slut-state)
+   ================================================================ */
+
+
+/* ================================================================
+   ==== HERO-AMOUNT BAS
+   Display-siffran. Storre an UI-text och tyngre vikt for visuell
+   prioritet. Server renderar slutvardet som text - JS bygger
+   digit-roller-DOM vid trigger och restoreraar tillbaka till server-
+   text vid done.
+   ================================================================ */
+.hero-amount {
+  font-size: var(--hero-amount-fz, var(--fs-80));
+  /* Undantag fran 400/500-policy: display-siffra, inte UI-text.
+     600 ger nodvandig visuell tyngd pa hero-storlekar. */
+  font-weight: 600;
+  letter-spacing: var(--ls-tightest);
+  color: var(--text-default);
+  line-height: var(--lh-tight);
+  /* Tabular-nums kritisk for rullnings-animationen: alla 0-9-glyfer
+     packas identiskt sa layout inte vibrerar nar siffran roterar. */
+  font-variant-numeric: tabular-nums;
+}
+
+
+/* ================================================================
+   ==== DIGIT-ROLLER
+   En per siffra. Containrar en track av siffror som translateY:as
+   till slutvardet. Overflow:hidden klipper allt utom synlig position.
+   ================================================================ */
+.hero-digit-roller {
+  display: inline-block;
+  height: var(--hero-digit-height, 1em);
+  line-height: var(--hero-digit-height, 1em);
+  overflow: hidden;
+  position: relative;
+  vertical-align: top;
+}
+
+/* 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 {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 14px;
+  pointer-events: none;
+  z-index: 1;
+  background: transparent;
+}
+
+.hero-digit-roller::before {
+  top: 0;
+  background: linear-gradient(
+    to bottom,
+    var(--hero-vignette-color, transparent) 0%,
+    transparent 100%
+  );
+}
+
+.hero-digit-roller::after {
+  bottom: 0;
+  background: linear-gradient(
+    to top,
+    var(--hero-vignette-color, transparent) 0%,
+    transparent 100%
+  );
+}
+
+
+/* ================================================================
+   ==== DIGIT-TRACK
+   Vertikal stack av siffer-spans. translateY-styrt av JS via inline
+   transition + transform. tabular-nums upprepad pa span-niva som
+   safety-net om hero-amount-arvet skulle brytas av nan parent.
+   ================================================================ */
+.hero-digit-track {
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
+}
+
+.hero-digit-track > span {
+  height: var(--hero-digit-height, 1em);
+  line-height: var(--hero-digit-height, 1em);
+  display: block;
+  font-variant-numeric: tabular-nums;
+}
+
+
+/* ================================================================
+   ==== STATIC CHARS
+   Mellanslag och "kr"-suffix runt rollers. white-space: pre bevarar
+   exakta blanksteg.
+   ================================================================ */
+.hero-static-char {
+  display: inline-block;
+  white-space: pre;
+}
+
+
+/* ================================================================
+   ==== REDUCED-MOTION
+   Hoppa direkt till slut-state utan transition. JS hanterar
+   transformen sjalv (translateY till slutposition utan animation),
+   denna regel bara safety-net for befintliga inline-transitions.
+   ================================================================ */
+@media (prefers-reduced-motion: reduce) {
+  .hero-digit-track {
+    transition: none !important;
+  }
+}