@klodd/ds 1.1.0 → 3.0.0

package/css/components/panel.css

@@ -0,0 +1,95 @@
+/* ================================================================
+   components/panel.css
+   Allmanna paneler. .panel ar bas. Modifiers: --info, --danger,
+   --attention. Slot-element: .panel__title, .panel__title-row,
+   .panel__step-row.
+
+   Skiljer sig fran .card sa: panel ar mer noga med padding och
+   margin-bottom (flode i lista). Card ar mer flexibel med slots
+   (.card-header, .card-body, .card-footer).
+   ================================================================ */
+.panel {
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-20);
+  padding: var(--space-16) var(--space-18);
+  margin-bottom: var(--space-14);
+}
+
+.panel__title {
+  font-size: var(--fs-10);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-tracker-xl, 0.12em);
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin: 0 0 var(--space-12);
+}
+
+.panel__title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-10);
+  margin-bottom: var(--space-12);
+}
+.panel__title-row .panel__title { margin-bottom: 0; }
+
+.panel__title-meta {
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+  font-weight: var(--fw-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+.panel__title-link {
+  font-size: var(--fs-12);
+  color: var(--accent-text);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .panel__title-link:hover { text-decoration: underline; }
+}
+
+.panel--info {
+  border-left: 3px solid var(--positive-border);
+}
+
+.panel--info-warning {
+  border-left: 3px solid var(--warning-border);
+}
+
+.panel--danger {
+  border: 1px solid var(--accent-danger-border);
+  background: var(--accent-danger-dim);
+}
+
+.panel--attention {
+  background: var(--warning-dim);
+  border: 1px solid var(--warning-border);
+}
+.panel--attention .panel__title {
+  color: var(--warning);
+}
+
+.panel__step-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+.panel__step-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 var(--space-8);
+  background: var(--surface-active);
+  color: var(--accent-text);
+  font-size: var(--fs-11);
+  font-weight: var(--fw-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}

package/css/components/progress.css

@@ -0,0 +1,39 @@
+/* ================================================================
+   components/progress.css
+   Linjar progress-indikator. Anvands for budget-burndown, upload-
+   status, multi-step-flows. Modifiers for status-fargning.
+
+   .progress ar wrappern (track), .progress-bar ar fyllnaden.
+   Sätt width via inline style eller data-attribut + JS (CSP-safe).
+
+   Brief-pattern fran Ekonom:
+     <div class="progress">
+       <div class="progress-bar progress-bar--warning"
+            data-bar-width="73%"></div>
+     </div>
+   bar-styles.js applicerar style.width fran data-bar-width.
+   ================================================================ */
+.progress {
+  width: 100%;
+  height: var(--space-6);
+  background: var(--surface-raised);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: var(--accent-9);
+  border-radius: var(--radius-full);
+  transition: width var(--dur-base) var(--ease-out);
+}
+
+.progress-bar--success { background: var(--bg-success); }
+.progress-bar--warning { background: var(--bg-warning); }
+.progress-bar--danger  { background: var(--bg-danger); }
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar {
+    transition: none;
+  }
+}

package/css/components/setting-row.css

@@ -0,0 +1,186 @@
+/* ================================================================
+   components/setting-row.css
+   Tap-to-edit-rad som triggar bottom-sheet. Vanster: label + sub.
+   Hoger: varde + chevron. Anvands i settings-vyer.
+
+   Plus iOS-stil .setting-toggle med native checkbox dolt.
+
+   .setting-list samlar flera setting-rows med subtle dividers.
+   ================================================================ */
+.setting-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.setting-list > li { display: block; }
+.setting-list > li + li {
+  border-top: 1px solid var(--border-subtle);
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  width: 100%;
+  padding: var(--space-14) var(--space-16);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-12);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: background var(--dur-fast) var(--ease-spring-snappy);
+}
+
+.setting-row + .setting-row {
+  border-top: 1px solid var(--border-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .setting-row:hover { background: var(--surface-hover); }
+}
+
+.setting-row:active {
+  background: var(--surface-active);
+  transform: scale(0.985);
+  transition:
+    transform 80ms var(--ease-spring-snappy),
+    background var(--dur-fast) var(--ease-spring-snappy);
+}
+
+.setting-row:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+.setting-row__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.setting-row__label {
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  line-height: var(--lh-snug);
+}
+
+.setting-row__sub {
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+  line-height: var(--lh-snug);
+}
+
+.setting-row__value {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  flex-shrink: 0;
+}
+
+.setting-row__amount {
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  color: var(--text-subtle);
+  font-variant-numeric: tabular-nums;
+}
+
+.setting-row__chevron {
+  color: var(--text-disabled);
+  flex-shrink: 0;
+}
+
+.setting-row__avatar {
+  margin-right: var(--space-12);
+  flex-shrink: 0;
+}
+
+.setting-row--static {
+  cursor: default;
+}
+.setting-row--static:active {
+  background: transparent;
+  transform: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .setting-row--static:hover { background: transparent; }
+}
+
+.setting-row--danger .setting-row__label {
+  color: var(--accent-danger);
+}
+
+.setting-row__pill {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 var(--space-12);
+  background: var(--accent-9);
+  color: var(--text-on-accent);
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+}
+
+
+/* ================================================================
+   ==== TOGGLE (iOS-stil)
+   Native checkbox dolt visuellt men a11y-tillganglig.
+   ================================================================ */
+.setting-toggle {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 26px;
+  flex-shrink: 0;
+}
+.setting-toggle input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.setting-toggle__track {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--border-strong);
+  border-radius: var(--radius-full);
+  transition: background var(--dur-medium) var(--ease-spring-snappy);
+  position: relative;
+}
+.setting-toggle__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 22px;
+  height: 22px;
+  background: var(--surface-page);
+  border-radius: 50%;
+  transition: transform var(--dur-medium) var(--ease-spring-snappy);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+.setting-toggle input:checked + .setting-toggle__track {
+  background: var(--accent-9);
+}
+.setting-toggle input:checked + .setting-toggle__track .setting-toggle__thumb {
+  transform: translateX(18px);
+}
+.setting-toggle input:focus-visible + .setting-toggle__track {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}

package/css/components/split-bar.css

@@ -0,0 +1,53 @@
+/* ================================================================
+   components/split-bar.css
+   Visuell proportionsbar dar tva eller flera segment delar baren.
+   Anvands for cost-split (vem betalar), debt-vs-equity, time-allocation.
+
+   Modell: .split-bar har N stycken .split-bar__segment som tillsammans
+   fyller 100%. Brett valbart segment satts genom data-bar-width-pattern
+   eller manuella width-classes.
+   ================================================================ */
+.split-bar {
+  display: flex;
+  height: 8px;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  background: var(--surface-active);
+  margin: var(--space-8) 0 var(--space-12);
+}
+
+.split-bar__segment {
+  height: 100%;
+  transition: width var(--dur-medium) var(--ease-spring-snappy);
+}
+
+.split-bar__segment--primary    { background: var(--accent-9); }
+.split-bar__segment--secondary  { background: var(--text-disabled); flex: 1; }
+.split-bar__segment--positive   { background: var(--positive); }
+.split-bar__segment--negative   { background: var(--negative); }
+.split-bar__segment--warning    { background: var(--warning); }
+
+.split-bar__label {
+  font-size: var(--fs-13);
+  color: var(--text-subtle);
+  margin: 0 0 var(--space-6);
+  line-height: var(--lh-snug);
+}
+
+.split-bar__label strong {
+  color: var(--text-default);
+  font-weight: var(--fw-medium);
+}
+
+.split-bar__labels {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-10);
+  margin-top: var(--space-6);
+  font-size: var(--fs-12);
+  color: var(--text-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .split-bar__segment { transition: none; }
+}

package/css/components/stat.css

@@ -0,0 +1,55 @@
+/* ================================================================
+   components/stat.css
+   Stat-card och metric-card - sma kort med stor siffra + label.
+   .stat-grid lagger ut flera kort i grid (2 kol mobil, 4 desktop).
+
+   .stat-card ar nyare BEM-versionen. .metric-card behalls for
+   bakatkompat med befintliga vyer som anvander metric-grid.
+   ================================================================ */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-12);
+  margin-bottom: var(--space-14);
+}
+.stat-grid--single { grid-template-columns: 1fr; }
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-4);
+  padding: var(--space-16);
+  background: var(--surface-default);
+  border-radius: var(--radius-12);
+}
+
+.stat-card__value {
+  font-size: var(--fs-22);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.stat-card__label {
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+}
+
+.stat-card__value--positive { color: var(--positive); }
+.stat-card__value--negative { color: var(--negative); }
+.stat-card__value--accent   { color: var(--accent-text); }
+.stat-card__value--warning  { color: var(--warning); }
+
+.stat-card__unit {
+  font-size: var(--fs-11);
+  color: var(--text-muted);
+  margin-top: var(--space-2);
+}
+
+.stat-card__sub {
+  font-size: var(--fs-11);
+  color: var(--text-subtle);
+  margin-top: var(--space-4);
+}

package/css/components/swipe-stack.css

@@ -0,0 +1,200 @@
+/* ================================================================
+   components/swipe-stack.css
+   Tinder-stil swipe-card-stack med drag-physics. Anvands for
+   triage-flow, decision-cards, tutorial-stacks.
+
+   Klassnamn ar generiska (.swipe-*) - inte vy-specifika (.triage-*).
+   App-repots vyer applicerar dessa pa sina specifika data-cards.
+
+   Element:
+   - .swipe-stack: container med relative position
+   - .swipe-card: individuellt kort (absolute positionerat)
+   - .swipe-card__header: ovre header-omrade
+   - .swipe-card__body: huvud-innehall
+   - .swipe-card__footer: nedre actions-rad
+   - .swipe-card__back: nasta kort i stacken (visuellt bakom)
+   - .swipe-decision-overlay: overlay med "spara"/"avfard" indikator
+   - .swipe-actions: knapp-rad under stacken
+   - .swipe-meta: kort-meta-info
+   - .swipe-progress: progress-indikator
+   - .swipe-empty: tomt-state
+   ================================================================ */
+.swipe-stack {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  margin: 0 auto;
+  height: 480px;
+  isolation: isolate;
+}
+
+.swipe-card {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-20);
+  padding: var(--space-20);
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: pan-y;
+  transition: transform var(--dur-medium) var(--ease-spring-snappy);
+}
+
+.swipe-card:active { cursor: grabbing; }
+
+.swipe-card--back {
+  transform: scale(0.96);
+  opacity: 0.85;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.swipe-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  margin-bottom: var(--space-12);
+}
+
+.swipe-card__title {
+  font-size: var(--fs-17);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  letter-spacing: var(--ls-tight);
+  margin: 0 0 var(--space-6);
+}
+
+.swipe-card__body {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  font-size: var(--fs-14);
+  color: var(--text-subtle);
+  line-height: var(--lh-base);
+}
+
+.swipe-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  margin-top: var(--space-16);
+  padding-top: var(--space-12);
+  border-top: 1px solid var(--border-subtle);
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+}
+
+.swipe-decision-overlay {
+  position: absolute;
+  top: var(--space-20);
+  padding: var(--space-8) var(--space-16);
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border-radius: var(--radius-10);
+  border: 2px solid currentColor;
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease-default);
+  pointer-events: none;
+}
+
+.swipe-decision-overlay--save {
+  right: var(--space-20);
+  color: var(--positive);
+  transform: rotate(8deg);
+}
+
+.swipe-decision-overlay--dismiss {
+  left: var(--space-20);
+  color: var(--negative);
+  transform: rotate(-8deg);
+}
+
+.swipe-decision-overlay--visible { opacity: 1; }
+
+.swipe-actions {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-20);
+  margin-top: var(--space-20);
+}
+
+.swipe-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-full);
+  color: var(--text-default);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition:
+    background var(--dur-fast) var(--ease-spring-snappy),
+    transform var(--press-out-duration) var(--press-out-easing);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .swipe-action-btn:hover { background: var(--surface-hover); }
+}
+
+.swipe-action-btn:active {
+  transform: scale(0.92);
+  transition: transform var(--press-in-duration) var(--press-in-easing);
+}
+
+.swipe-action-btn--save  { color: var(--positive); }
+.swipe-action-btn--dismiss { color: var(--negative); }
+
+.swipe-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+}
+
+.swipe-meta-sep {
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  background: var(--text-disabled);
+  border-radius: var(--radius-full);
+}
+
+.swipe-progress {
+  text-align: center;
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+  margin: 0 0 var(--space-12);
+  font-variant-numeric: tabular-nums;
+}
+
+.swipe-empty {
+  text-align: center;
+  padding: var(--space-40) var(--space-20);
+  color: var(--text-subtle);
+}
+
+.swipe-hint {
+  text-align: center;
+  font-size: var(--fs-12);
+  color: var(--text-disabled);
+  margin-top: var(--space-12);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .swipe-card { transition: none; }
+  .swipe-decision-overlay { transition: none; }
+}

package/css/components/tab-bar.css

@@ -0,0 +1,58 @@
+/* ================================================================
+   components/tab-bar.css
+   Inline tab-grupp for format-val (CSV/Avi, dashboard-vyer m.fl.).
+   Inte sticky - placeras inline i template.
+
+   Existerande nav.css har en kompaktare .tab-bar-variant.
+   Denna fil definierar OM och ersatter den - lasta en gang.
+   ================================================================ */
+.tab-bar {
+  display: flex;
+  gap: var(--space-4);
+  margin: 0 0 var(--space-16);
+  padding: var(--space-4);
+  background: var(--surface-default);
+  border-radius: var(--radius-12);
+}
+
+.tab-bar__item {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0 var(--space-12);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-8);
+  color: var(--text-subtle);
+  font-family: inherit;
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition:
+    background var(--dur-fast) var(--ease-spring-snappy),
+    color var(--dur-fast) var(--ease-spring-snappy);
+}
+
+.tab-bar__item.is-active {
+  background: var(--surface-raised);
+  color: var(--text-default);
+  font-weight: var(--fw-medium);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tab-bar__item:not(.is-active):hover {
+    color: var(--text-default);
+    background: var(--surface-hover);
+  }
+}
+
+.tab-bar__item:active:not(.is-active) {
+  transform: scale(0.985);
+  transition: transform 80ms var(--ease-spring-snappy);
+}