@klodd/ds 1.2.0 → 3.0.1

package/css/base/layout.css

@@ -0,0 +1,45 @@
+/* ================================================================
+   base/layout.css
+   App-niva-layout: main-content, page-header, page-title.
+   Anvands som default-skelett pa varje vy.
+   ================================================================ */
+.main-content {
+  max-width: var(--content-max-default, 600px);
+  margin: 0 auto;
+  padding: calc(var(--safe-top) + var(--space-16)) var(--space-14) var(--bottom-nav-clearance);
+  position: relative;
+  min-height: calc(100dvh - var(--bottom-nav-clearance));
+}
+
+.main-content--narrow { max-width: var(--content-max-narrow, 480px); }
+.main-content--wide   { max-width: var(--content-max-wide, 800px); }
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  margin-bottom: var(--space-16);
+  flex-wrap: wrap;
+}
+
+.page-title {
+  font-size: var(--fs-22);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-tight);
+  color: var(--text-default);
+  margin: 0;
+}
+
+.page-subtitle {
+  font-size: var(--fs-13);
+  color: var(--text-subtle);
+  margin-top: var(--space-2);
+}
+
+.split-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-12);
+  margin-bottom: var(--space-14);
+}

package/css/components/auth.css

@@ -0,0 +1,28 @@
+/* ================================================================
+   components/auth.css
+   Centrerad layout for inloggning + onboarding.
+   ================================================================ */
+.auth-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+  gap: var(--space-8);
+  padding: var(--space-20);
+  text-align: center;
+}
+
+.auth-container__title {
+  font-size: var(--fs-22);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-tight);
+  color: var(--text-default);
+  margin: 0;
+}
+
+.auth-container__subtitle {
+  color: var(--text-subtle);
+  margin: 0 0 var(--space-24);
+  font-size: var(--fs-13);
+}

package/css/components/avatar.css

@@ -0,0 +1,31 @@
+/* ================================================================
+   components/avatar.css
+   Cirkular initial-avatar. Modifier --lg pa profil-vyer.
+   ================================================================ */
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--accent-9) 0%, var(--accent-10) 100%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-on-accent);
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  text-transform: uppercase;
+  line-height: var(--lh-tight);
+}
+
+.avatar--sm {
+  width: 28px;
+  height: 28px;
+  font-size: var(--fs-12);
+}
+
+.avatar--lg {
+  width: 56px;
+  height: 56px;
+  font-size: var(--fs-24);
+}

package/css/components/banner.css

@@ -0,0 +1,63 @@
+/* ================================================================
+   components/banner.css
+   .banner ar bred informations-rad med titel + sub + content.
+   Modifiers: --hero, --accent, --positive, --negative, --warning.
+   BEM: .banner__title, .banner__sub, .banner__content.
+   ================================================================ */
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-14);
+  padding: var(--space-14) var(--space-16);
+  border-radius: var(--radius-16);
+  margin-bottom: var(--space-14);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+}
+
+.banner__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.banner__title {
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  margin: 0;
+}
+
+.banner__sub {
+  font-size: var(--fs-12);
+  color: var(--text-subtle);
+}
+
+.banner--accent {
+  background: var(--accent-a3);
+  border-color: var(--accent-a6);
+}
+
+.banner--positive {
+  background: var(--positive-dim);
+  border-color: var(--positive-border);
+}
+
+.banner--negative {
+  background: var(--negative-dim);
+  border-color: var(--negative-border);
+}
+
+.banner--warning {
+  background: var(--warning-dim);
+  border-color: var(--warning-border);
+  border-left-width: 3px;
+}
+
+.banner--hero {
+  flex-direction: column;
+  align-items: flex-start;
+  padding: var(--space-20);
+}

package/css/components/chip.css

@@ -0,0 +1,257 @@
+/* ================================================================
+   components/chip.css
+   Sma status-pills. .chip ar bas. Modifiers: --accent, --positive,
+   --negative, --warning, --faint.
+
+   Plus relaterade pill-mont:
+   - .brand-pill: liten pill med projekt-namn
+   - .month-pill: navigations-pill for manads-byte
+   - .install-chip: PWA install-prompt floating-pill
+   - .score-pill: ratings-pill (variants --strong/--medium/--low)
+
+   .chip-list ar wrapper for flera chips i rad (form-edit-flode).
+   ================================================================ */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  font-size: var(--fs-11);
+  font-weight: var(--fw-medium);
+  padding: var(--space-4) var(--space-10);
+  border-radius: var(--radius-full);
+  background: var(--surface-default);
+  color: var(--text-subtle);
+  border: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+
+.chip::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+  display: inline-block;
+  opacity: 0.75;
+}
+
+.chip--accent   { color: var(--accent-text); background: var(--accent-a3);  border-color: var(--accent-a6); }
+.chip--positive { color: var(--positive);    background: var(--positive-dim); border-color: var(--positive-border); }
+.chip--negative { color: var(--negative);    background: var(--negative-dim); border-color: var(--negative-border); }
+.chip--warning  { color: var(--warning);     background: var(--warning-dim);  border-color: var(--warning-border); }
+.chip--faint    { color: var(--text-muted);  background: transparent; border-color: var(--border-subtle); }
+
+.chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip-list__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  height: 32px;
+  padding: 0 var(--space-12);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  color: var(--text-default);
+  font-size: var(--fs-13);
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.chip-list__delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  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) {
+  .chip-list__delete:hover {
+    background: color-mix(in oklch, var(--accent-danger) 15%, transparent);
+    color: var(--accent-danger);
+  }
+}
+
+.chip-list__add {
+  background: transparent;
+  border-style: dashed;
+  color: var(--text-subtle);
+  cursor: pointer;
+  font-weight: var(--fw-medium);
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: background var(--dur-fast) var(--ease-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .chip-list__add:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+    border-color: var(--text-muted);
+  }
+}
+
+
+/* ================================================================
+   ==== BRAND-PILL
+   Liten pill med projekt-namn i topbar.
+   ================================================================ */
+.brand-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-4) var(--space-12);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-snug);
+  color: var(--text-default);
+}
+
+
+/* ================================================================
+   ==== MONTH-PILL
+   Navigations-pill med manadsbyte (anvands i topbar pa Ekonom).
+   ================================================================ */
+.month-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  height: 28px;
+  padding: 0 var(--space-12);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+
+/* ================================================================
+   ==== SCORE-PILL
+   Tabular-nums for sifferjustering. Modifiers: --strong/--medium/--low.
+   ================================================================ */
+.score-pill {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-11);
+  font-weight: var(--fw-medium);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--ls-wide, 0.01em);
+  padding: var(--space-2) var(--space-8);
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+.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);
+}
+
+
+/* ================================================================
+   ==== INSTALL-CHIP
+   PWA install-prompt som flyter ovan bottom-nav.
+   ================================================================ */
+.install-chip {
+  position: fixed;
+  bottom: calc(84px + var(--safe-bottom));
+  left: var(--space-12);
+  right: var(--space-12);
+  max-width: 480px;
+  margin: 0 auto;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-18);
+  display: flex;
+  align-items: center;
+  gap: var(--space-10);
+  font-size: var(--fs-13);
+  color: var(--text-default);
+  z-index: var(--z-overlay, 60);
+  animation: install-chip-up 0.28s var(--ease-out);
+  box-shadow: var(--shadow-float);
+}
+
+.install-chip__text { flex: 1; min-width: 0; }
+
+.install-chip__install {
+  background: var(--accent-9);
+  color: var(--text-on-accent);
+  border: none;
+  padding: var(--space-8) var(--space-14);
+  border-radius: var(--radius-full);
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--dur-fast) var(--ease-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .install-chip__install:hover { background: var(--accent-10); }
+}
+
+.install-chip__dismiss {
+  background: transparent;
+  border: none;
+  color: var(--text-subtle);
+  font-size: var(--fs-18);
+  line-height: 1;
+  padding: var(--space-6) var(--space-10);
+  cursor: pointer;
+  min-width: 36px;
+  transition: color var(--dur-fast) var(--ease-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .install-chip__dismiss:hover { color: var(--text-default); }
+}
+
+@keyframes install-chip-up {
+  from { transform: translateY(calc(100% + 100px)); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .install-chip { animation: none; }
+}

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