@klodd/ds 1.1.0 → 3.0.0

package/css/components/collapsible.css

@@ -0,0 +1,64 @@
+/* ================================================================
+   components/collapsible.css
+   Panel som expanderar pa klick. Anvands for budget-sektioner,
+   kategori-grupper, FAQ-rader.
+
+   Element: .collapsible-card (root) som ar bas.
+   - .collapsible__header  klickbar header (button-element)
+   - .collapsible__body    expanderat innehall (hidden default)
+   - .collapsible__chev    chevron som roterar 180deg
+
+   State drivs via [data-expanded] attribut pa root - JS togglar.
+   ================================================================ */
+.collapsible-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-20);
+  margin-bottom: var(--space-14);
+  padding: 0;
+}
+
+.collapsible__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-12);
+  width: 100%;
+  padding: var(--space-16) var(--space-18);
+  background: transparent;
+  border: 0;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  border-radius: inherit;
+}
+
+.collapsible__header:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+.collapsible__header-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.collapsible__chev {
+  flex-shrink: 0;
+  margin-top: var(--space-4);
+  color: var(--text-muted);
+  transition: transform var(--dur-medium) var(--ease-default);
+}
+
+.collapsible-card[data-expanded] .collapsible__chev {
+  transform: rotate(180deg);
+}
+
+.collapsible__body {
+  padding: 0 var(--space-18) var(--space-16);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapsible__chev { transition: none; }
+}

package/css/components/divider.css

@@ -0,0 +1,25 @@
+/* ================================================================
+   components/divider.css
+   Horisontell eller vertikal separator. Anvands mellan sektioner,
+   list-grupper, eller inom sheets/cards. Tva styrkor (subtle/strong).
+
+   Default ar horisontell. Modifier --vertical for sidled. Modifier
+   --strong for hogre kontrast (anvand sparsamt - subtle ar default).
+   ================================================================ */
+.divider {
+  border: none;
+  border-top: 1px solid var(--border-subtle);
+  margin: var(--space-16) 0;
+}
+
+.divider--vertical {
+  border-top: none;
+  border-left: 1px solid var(--border-subtle);
+  height: 100%;
+  margin: 0 var(--space-16);
+  align-self: stretch;
+}
+
+.divider--strong {
+  border-color: var(--border-default);
+}

package/css/components/dropdown.css

@@ -0,0 +1,88 @@
+/* ================================================================
+   components/dropdown.css
+   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>
+     </div>
+
+   JS togglar .is-open pa .dropdown-element. Inga inline-styles
+   (CSP-safe). Stang via klick utanfor / Escape via JS-helper.
+   ================================================================ */
+.dropdown {
+  position: relative;
+  display: inline-flex;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + var(--space-4));
+  left: 0;
+  min-width: 160px;
+  background: var(--surface-overlay);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-10);
+  padding: var(--space-4) 0;
+  box-shadow: 0 4px 16px color-mix(in oklch, black 40%, transparent);
+  z-index: var(--z-dropdown, 100);
+  display: none;
+}
+
+.dropdown.is-open .dropdown-menu {
+  display: block;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-family: inherit;
+  font-size: var(--fs-14);
+  color: var(--text-default);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-out);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .dropdown-item:hover {
+    background: var(--surface-hover);
+  }
+}
+
+.dropdown-item:active {
+  background: var(--surface-active);
+}
+
+.dropdown-item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+.dropdown-item[disabled],
+.dropdown-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.dropdown-item--danger {
+  color: var(--bg-danger);
+}
+
+.dropdown-divider {
+  border: none;
+  border-top: 1px solid var(--border-subtle);
+  margin: var(--space-4) 0;
+}

package/css/components/feedback.css

@@ -53,6 +53,12 @@
   100% { opacity: 1; transform: translateY(0) scale(1); }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    animation: none;
+  }
+}
+
 
 /* ================================================================
    ==== EMPTY-STATE

package/css/components/form.css

@@ -0,0 +1,67 @@
+/* ================================================================
+   components/form.css
+   Form-skelett. .form-section, .form-group, .form-row.
+
+   Skiljer sig fran input.css (input-elementen). form.css ar
+   wrapper-strukturen som gor formularet komplett.
+   ================================================================ */
+.form-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-20);
+  padding: var(--space-20);
+  max-width: 480px;
+  margin-bottom: var(--space-14);
+}
+
+.form-section {
+  margin-bottom: var(--space-20);
+}
+
+.form-section__title {
+  font-size: var(--fs-10);
+  font-weight: var(--fw-medium);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin: 0 0 var(--space-12);
+  padding-bottom: var(--space-8);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.form-group {
+  margin-bottom: var(--space-14);
+}
+
+.form-group__label {
+  display: block;
+  font-size: var(--fs-11);
+  color: var(--text-subtle);
+  margin-bottom: var(--space-6);
+  letter-spacing: 0.01em;
+}
+
+.form-hint {
+  font-size: var(--fs-11);
+  color: var(--text-muted);
+  margin-top: var(--space-6);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-12);
+}
+
+.form-row--inline {
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+.form-row--inline > .form-group {
+  margin-bottom: 0;
+  flex: 1;
+  min-width: 0;
+}
+.form-row--inline > .form-group.is-fixed {
+  flex: 0 0 auto;
+}

package/css/components/hbar.css

@@ -0,0 +1,64 @@
+/* ================================================================
+   components/hbar.css
+   Horisontell bar - generic single-bar med label + value + track + fill.
+   Anvands for kategori-utfall, score-distribution, kostnadsfordelningar.
+
+   .hbar ar bas. .hbar__track ar fyllbar bakgrund. .hbar__fill ar
+   det procent-fyllda overlayet. .hbar__label och .hbar__value ar
+   text-element under/over baren.
+
+   Bredd pa .hbar__fill satts via data-bar-width + bar-styles.js
+   (CSP-safe). Manuell override-class kan ocksa anvandas (.hbar__fill-50).
+   ================================================================ */
+.hbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  margin-bottom: var(--space-12);
+}
+
+.hbar__item {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-10);
+}
+
+.hbar__label {
+  font-size: var(--fs-13);
+  color: var(--text-subtle);
+  flex: 1;
+  min-width: 0;
+}
+
+.hbar__value {
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.hbar__track {
+  width: 100%;
+  height: var(--space-6);
+  background: var(--surface-active);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.hbar__fill {
+  height: 100%;
+  background: var(--accent-9);
+  border-radius: var(--radius-full);
+  transition: width var(--dur-medium) var(--ease-spring-snappy);
+}
+
+.hbar__fill--positive { background: var(--positive); }
+.hbar__fill--warning  { background: var(--warning); }
+.hbar__fill--negative { background: var(--negative); }
+
+@media (prefers-reduced-motion: reduce) {
+  .hbar__fill { transition: none; }
+}

package/css/components/hero.css

@@ -0,0 +1,85 @@
+/* ================================================================
+   components/hero.css
+   Stora display-rubriker med amount + meta. Anvands pa dashboard,
+   detaljvyer, primary-page-toppar.
+
+   Element: .hero (wrapper), .hero__heading, .hero__amount (default 80px),
+   .hero__amount--card (40px sekundar), .hero__amount-row, .hero__label,
+   .hero__label--muted, .hero__meta, .hero__actions.
+
+   .hero-amount och .hero__amount-roll anvands av hero-roll-animation
+   - se components/hero-roll.css for animation-styling.
+   ================================================================ */
+.hero {
+  padding: var(--space-20) var(--space-4) var(--space-24);
+  text-align: left;
+}
+
+.hero__heading {
+  font-size: var(--fs-17);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-tight);
+  color: var(--text-default);
+  margin: 0 0 var(--space-4);
+}
+
+.hero__label {
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  color: var(--text-muted);
+  letter-spacing: var(--ls-wider, 0.04em);
+  text-transform: uppercase;
+  margin: 0 0 var(--space-8);
+}
+
+.hero__label--muted {
+  font-size: var(--fs-10);
+  font-weight: var(--fw-regular);
+  color: var(--text-disabled);
+  letter-spacing: 0.03em;
+  text-transform: lowercase;
+  opacity: 0.7;
+}
+
+.hero__amount {
+  font-size: var(--fs-80);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-tightest, -0.04em);
+  color: var(--text-default);
+  line-height: var(--lh-tight);
+  margin: 0 0 var(--space-8);
+  font-variant-numeric: tabular-nums;
+}
+
+.hero__amount--card {
+  font-size: var(--fs-40);
+  letter-spacing: var(--ls-tighter, -0.035em);
+  line-height: var(--lh-snug);
+}
+
+.hero__amount--fluid {
+  font-size: clamp(40px, 12vw, 80px);
+}
+
+.hero__amount-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-10);
+  margin-bottom: var(--space-8);
+}
+
+.hero__amount-row .hero__amount,
+.hero__amount-row .hero__amount--card { margin-bottom: 0; }
+
+.hero__meta {
+  font-size: var(--fs-13);
+  color: var(--text-subtle);
+  margin: 0 0 var(--space-20);
+}
+
+.hero__actions {
+  display: flex;
+  gap: var(--space-8);
+  align-items: center;
+  flex-wrap: wrap;
+}

package/css/components/hub-card.css

@@ -0,0 +1,100 @@
+/* ================================================================
+   components/hub-card.css
+   Stora settings-hub-kort. Anvands i settings-hub-vyer dar varje
+   kort lankar till en sub-sida. Layout: ikon + titel + subtitle +
+   chev. Hela kortet ar klickbart.
+
+   .hub-list samlar flera hub-cards i en kolumn.
+   .hub-category ar group-rubrik over flera kort.
+   ================================================================ */
+.hub-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.hub-card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-14);
+  padding: var(--space-16) var(--space-18);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-16);
+  color: var(--text-default);
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition:
+    background var(--dur-base) var(--ease-spring-snappy),
+    transform var(--press-out-duration) var(--press-out-easing);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .hub-card:hover {
+    background: var(--surface-overlay);
+  }
+}
+
+.hub-card:active {
+  transform: scale(0.99);
+  transition: transform var(--press-in-duration) var(--press-in-easing);
+}
+
+.hub-card:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.hub-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--surface-default);
+  color: var(--accent-text);
+  border-radius: var(--radius-12);
+  flex-shrink: 0;
+}
+
+.hub-card__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.hub-card__title {
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  line-height: var(--lh-snug);
+}
+
+.hub-card__subtitle {
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+  line-height: var(--lh-snug);
+}
+
+.hub-card__chev {
+  flex-shrink: 0;
+  color: var(--text-disabled);
+}
+
+.hub-category {
+  font-size: var(--fs-11);
+  font-weight: var(--fw-medium);
+  color: var(--text-muted);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: var(--space-20) 0 var(--space-8);
+  padding: 0 var(--space-4);
+}
+.hub-category:first-child { margin-top: 0; }

package/css/components/inline-edit.css

@@ -0,0 +1,67 @@
+/* ================================================================
+   components/inline-edit.css
+   Inline-edit-monstret for klickbart text-falt som expanderas till
+   input vid pencil-click. Anvands for profil-namn, etiketter, taggar.
+
+   Tidigare hette komponenten .profile-name-edit (Ekonom-domain).
+   Nu generaliserad till .inline-edit.
+   ================================================================ */
+.inline-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+}
+
+.inline-edit__text {
+  font-size: var(--fs-17);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  letter-spacing: var(--ls-tight);
+}
+
+.inline-edit__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background var(--dur-fast) var(--ease-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .inline-edit__btn:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+
+.inline-edit__form {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  margin: 0;
+}
+
+.inline-edit__input {
+  display: inline-block;
+  height: 32px;
+  padding: 0 var(--space-10);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-8);
+  color: var(--text-default);
+  font-family: inherit;
+  font-size: 16px;
+  outline: none;
+}
+
+.inline-edit__input:focus {
+  border-color: var(--accent-9);
+  box-shadow: 0 0 0 3px var(--accent-a3);
+}

package/css/components/input.css

@@ -65,7 +65,7 @@
 .textarea:focus,
 .select:focus {
   border-color: var(--accent-9);
-  box-shadow: 0 0 0 3px var(--accent-a20);
+  box-shadow: 0 0 0 3px var(--accent-a3);
   background: var(--surface-default);
 }
 

package/css/components/list-row.css

@@ -0,0 +1,115 @@
+/* ================================================================
+   components/list-row.css
+   Generisk list-rad med ikon + body + amount. Anvands for transaktioner,
+   subscriptions, audit-logs, jobblistor.
+
+   Tidigare hette komponenten .tx-row (transaction) - nu generaliserad
+   till .list-row sa inte affarsdomanen sipprar in i namnet.
+
+   Element: .list-row__icon, .list-row__body, .list-row__desc,
+   .list-row__amount, .list-row__date, .list-row__meta.
+
+   Modifiers: --excluded (greyed out), --pending (with dashed border).
+
+   App-specifika domain-overrides (kategori-fargade ikoner) lever i
+   app-repots egna CSS - inte i paketet.
+   ================================================================ */
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.list-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding: var(--space-10) 0;
+  border-bottom: 1px solid var(--border-subtle);
+  min-height: 56px;
+}
+
+.list-row:last-child { border-bottom: none; }
+
+.list-row__icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--surface-default);
+  color: var(--text-subtle);
+}
+
+.list-row__icon svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+}
+
+.list-row__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.list-row__desc {
+  font-size: var(--fs-14);
+  color: var(--text-default);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list-row__desc a { color: inherit; }
+
+.list-row__meta {
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+}
+
+.list-row__date {
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+  white-space: nowrap;
+  min-width: 3.5rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.list-row__amount {
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  text-align: right;
+  white-space: nowrap;
+  min-width: 5rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.list-row__amount--positive { color: var(--positive); }
+.list-row__amount--negative { color: var(--negative); }
+
+.list-row--excluded {
+  opacity: 0.5;
+}
+
+.list-row--pending .list-row__icon {
+  border: 1px dashed var(--border-default);
+  background: transparent;
+}
+
+.list-row--clickable {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .list-row--clickable:hover { background: var(--surface-hover); }
+}

package/css/components/overlay.css

@@ -21,6 +21,9 @@ dialog.sheet::backdrop {
   background: color-mix(in oklch, var(--surface-page) 60%, transparent);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
+  /* Klickbar yta - JS lyssnar pa backdrop-klick for stang-action.
+     Signalerar interaktivitet visuellt via cursor. */
+  cursor: pointer;
 }