@klodd/ds 1.2.0 → 3.0.0

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/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/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/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);
+}