@klodd/ds 1.0.0

package/css/components/icon.css

@@ -0,0 +1,60 @@
+/* ================================================================
+   components/icon.css
+   .icon - generisk ikon-wrapper med fem size-modifiers.
+   Anvands for bade Lucide-ikoner (via <i data-lucide="X" class="icon icon--md">)
+   och custom inline-SVG (<svg class="icon icon--md">).
+
+   color: currentColor sa parent-elementet styr fargen via color-property.
+
+   Custom SVG-monster (.icon-custom svg) ger standardiserade
+   stroke-attribut for handritade ikoner som Lucide saknar.
+   ================================================================ */
+
+
+/* ================================================================
+   ==== BAS
+   ================================================================ */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: currentColor;
+  vertical-align: middle;
+}
+
+/* Lucide ersatter <i data-lucide="X"> med <svg>. Tvinga svg att fylla
+   wrappern sa size-modifiers fungerar konsekvent. */
+.icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+
+/* ================================================================
+   ==== STORLEKAR
+   --md ar default storlek (20px). Anvand --xs/--sm/--lg/--xl explicit.
+   ================================================================ */
+.icon--xs { width: var(--space-12); height: var(--space-12); }
+.icon--sm { width: var(--space-16); height: var(--space-16); }
+.icon--md { width: var(--space-20); height: var(--space-20); }
+.icon--lg { width: var(--space-24); height: var(--space-24); }
+.icon--xl { width: var(--space-32); height: var(--space-32); }
+
+
+/* ================================================================
+   ==== CUSTOM SVG-MONSTER
+   App-specifika ikoner som Lucide saknar. Anvand som wrapper:
+     <span class="icon icon--md icon-custom">
+       <svg viewBox="0 0 24 24">...</svg>
+     </span>
+   stroke-width 1.5 matchar Lucide-default. linecap/linejoin round
+   ger samma mjuka look.
+   ================================================================ */
+.icon-custom svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}

package/css/components/input.css

@@ -0,0 +1,144 @@
+/* ================================================================
+   components/input.css
+   .input + .textarea + .select med konsekvent styling.
+   States: :focus, :disabled, [aria-invalid="true"] (error).
+   Tillagg: .input-group (label + input + error), .input-icon (input
+   med leading ikon).
+
+   Regel: font-size 17px sa iOS Safari inte auto-zoomar in vid focus.
+   Aldrig under 16px pa input-element.
+   ================================================================ */
+
+
+/* ================================================================
+   ==== BAS
+   ================================================================ */
+.input,
+.textarea,
+.select {
+  display: block;
+  width: 100%;
+  min-height: var(--touch-min);
+  padding: 0 var(--space-14);
+  font-family: inherit;
+  font-size: var(--fs-17);
+  line-height: 1.4;
+  color: var(--text-default);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-10);
+  outline: none;
+  transition:
+    border-color var(--dur-base) var(--ease-spring-snappy),
+    box-shadow var(--dur-base) var(--ease-spring-snappy),
+    background var(--dur-base) var(--ease-spring-snappy);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.textarea {
+  min-height: 96px;
+  padding: var(--space-12) var(--space-14);
+  line-height: var(--lh-base);
+  resize: vertical;
+}
+
+.select {
+  padding-right: var(--space-32);
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390919E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 14px;
+  cursor: pointer;
+}
+
+.input::placeholder,
+.textarea::placeholder {
+  color: var(--text-muted);
+}
+
+
+/* ================================================================
+   ==== STATES
+   ================================================================ */
+.input:focus,
+.textarea:focus,
+.select:focus {
+  border-color: var(--accent-9);
+  box-shadow: 0 0 0 3px var(--accent-a20);
+  background: var(--surface-default);
+}
+
+.input:disabled,
+.textarea:disabled,
+.select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--surface-default);
+}
+
+.input[aria-invalid="true"],
+.textarea[aria-invalid="true"],
+.select[aria-invalid="true"] {
+  border-color: var(--bg-danger);
+}
+
+.input[aria-invalid="true"]:focus,
+.textarea[aria-invalid="true"]:focus,
+.select[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--bg-danger) 20%, transparent);
+}
+
+
+/* ================================================================
+   ==== INPUT-GROUP (label + input + error)
+   Wrapper for ett komplett input-falt med metadata.
+   ================================================================ */
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.input-group__label {
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  color: var(--text-subtle);
+  letter-spacing: 0.02em;
+}
+
+.input-group__hint {
+  font-size: var(--fs-11);
+  color: var(--text-muted);
+  line-height: var(--lh-base);
+}
+
+.input-group__error {
+  font-size: var(--fs-11);
+  color: var(--bg-danger);
+  line-height: var(--lh-base);
+}
+
+
+/* ================================================================
+   ==== INPUT-ICON (leading icon)
+   Wrapper med ikon till vanster om input. Anvands for sok-falt eller
+   amount-input med suffix.
+   ================================================================ */
+.input-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-icon > .icon,
+.input-icon > svg {
+  position: absolute;
+  left: var(--space-12);
+  pointer-events: none;
+  color: var(--text-muted);
+}
+
+.input-icon > .input {
+  padding-left: var(--space-40);
+}

package/css/components/nav.css

@@ -0,0 +1,192 @@
+/* ================================================================
+   components/nav.css
+   Bottom-nav, topbar och tab-bar - tre standardnavigations-monster.
+
+   Bottom-nav ar position:fixed och ALLTID synlig pa mobil. Topbar
+   ar in-flow under safe-area. Tab-bar ar inline (inom en panel).
+   ================================================================ */
+
+
+/* ================================================================
+   ==== BOTTOM-NAV (fixed, mobil-primar)
+   Edge-to-edge pa botten med safe-area-padding for hemskarms-knapp.
+   N kolumner via grid (--bottom-nav-cols custom property om appen
+   vill annat an default 4).
+   ================================================================ */
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--z-nav);
+  display: grid;
+  grid-template-columns: repeat(var(--bottom-nav-cols, 4), 1fr);
+  padding: 0;
+  padding-bottom: var(--safe-bottom);
+  margin: 0;
+  max-width: none;
+  background: var(--surface-default);
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  border-radius: 0;
+}
+
+.bottom-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--touch-min);
+  padding: var(--space-8) var(--space-6);
+  font-size: var(--fs-10);
+  font-weight: var(--fw-medium);
+  color: var(--text-muted);
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition:
+    color var(--dur-base) var(--ease-spring-snappy),
+    background var(--dur-base) var(--ease-spring-snappy);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .bottom-nav-item:hover {
+    color: var(--text-default);
+  }
+}
+
+.bottom-nav-item.active {
+  color: var(--accent-text);
+}
+
+.bottom-nav-item .icon,
+.bottom-nav-item svg {
+  width: var(--space-20);
+  height: var(--space-20);
+}
+
+
+/* ================================================================
+   ==== TOPBAR (in-flow header)
+   Tre slots: back-knapp / titel / action. Display flex, full bredd.
+   ================================================================ */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  min-height: var(--touch-min);
+  padding: 0 var(--space-4);
+  margin-bottom: var(--space-16);
+}
+
+.topbar-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  background: var(--surface-default);
+  color: var(--text-default);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--dur-base) var(--ease-spring-snappy);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .topbar-back:hover {
+    background: var(--surface-hover);
+  }
+}
+
+.topbar-back:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.topbar-title {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--fs-17);
+  font-weight: var(--fw-medium);
+  line-height: var(--lh-tight);
+  color: var(--text-default);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.topbar-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  min-height: 36px;
+  padding: 0 var(--space-10);
+  background: transparent;
+  border: 0;
+  color: var(--text-subtle);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color var(--dur-base) var(--ease-spring-snappy);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .topbar-action:hover {
+    color: var(--text-default);
+  }
+}
+
+
+/* ================================================================
+   ==== TAB-BAR (inline tabs i panel)
+   Segmented control monster. Active-tab har highlighted bg.
+   ================================================================ */
+.tab-bar {
+  display: flex;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  background: var(--surface-default);
+  border-radius: var(--radius-12);
+}
+
+.tab {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 0 var(--space-12);
+  font-family: inherit;
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  color: var(--text-subtle);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-8);
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    background var(--dur-fast) var(--ease-spring-snappy),
+    color var(--dur-fast) var(--ease-spring-snappy);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tab:not(.active):hover {
+    color: var(--text-default);
+  }
+}
+
+.tab.active {
+  background: var(--surface-raised);
+  color: var(--text-default);
+}
+
+.tab:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 1px;
+}

package/css/components/overlay.css

@@ -0,0 +1,128 @@
+/* ================================================================
+   components/overlay.css
+   Dialog/modal och bottom-sheet - tva overlay-monster.
+
+   Dialog: centrerad modal for forms och bekraftelser.
+   Sheet: bottom-attached for mobile-first sheet-monster.
+
+   Bagge anvander backdrop med blur for visuell hierarki.
+   ================================================================ */
+
+
+/* ================================================================
+   ==== DIALOG-BACKDROP
+   Halvtransparent overlay med blur. Anvands av bade .dialog och
+   .sheet. native ::backdrop pseudo-element (om <dialog>) eller en
+   konkret <div class="dialog-backdrop"> for portal-baserade modaler.
+   ================================================================ */
+.dialog-backdrop,
+dialog.dialog::backdrop,
+dialog.sheet::backdrop {
+  background: color-mix(in oklch, var(--surface-page) 60%, transparent);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+
+
+/* ================================================================
+   ==== DIALOG (centrerad modal)
+   Native <dialog>-element rekommenderas for fokus-trap + ESC-stang.
+   Klassen .dialog kan ocksa anvandas pa <div role="dialog"> nar
+   native inte passar (ex. icke-modal panel).
+   ================================================================ */
+.dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--z-overlay);
+  width: calc(100vw - 2 * var(--space-20));
+  max-width: 480px;
+  max-height: calc(100dvh - 2 * var(--space-40));
+  margin: 0;
+  padding: 0;
+  background: var(--surface-raised);
+  color: var(--text-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-14);
+  box-shadow: var(--shadow-float);
+  overflow: hidden;
+  /* Native <dialog>: aterstall default-sytling. */
+  inset: auto;
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  padding: var(--space-16) var(--space-20);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.dialog-body {
+  padding: var(--space-20);
+  overflow-y: auto;
+  max-height: 60vh;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-8);
+  padding: var(--space-12) var(--space-20);
+  border-top: 1px solid var(--border-subtle);
+  background: var(--surface-default);
+}
+
+
+/* ================================================================
+   ==== SHEET (bottom-attached)
+   <dialog class="sheet"> ar standardpattern. Native focus-trap, ESC,
+   ::backdrop. JS anvander .showModal() / .close().
+
+   max-height 90svh sa sheet alltid laemnar lite plats overst sa
+   anvandaren ser kontexten bakom.
+   ================================================================ */
+.sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: auto;
+  z-index: var(--z-overlay);
+  width: 100%;
+  max-width: 600px;
+  max-height: 90svh;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-20) calc(var(--space-28) + var(--safe-bottom));
+  background: var(--surface-raised);
+  color: var(--text-default);
+  border: 1px solid var(--border-subtle);
+  border-bottom: 0;
+  border-radius: var(--radius-24) var(--radius-24) 0 0;
+  box-shadow: var(--shadow-float);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  inset: auto 0 0 0;
+}
+
+.sheet-handle {
+  width: 32px;
+  height: 4px;
+  margin: 0 auto var(--space-16);
+  background: var(--text-disabled);
+  border-radius: var(--radius-full);
+}
+
+.sheet-body {
+  padding-top: var(--space-4);
+}
+
+/* Sheet-section divider for grupper inom samma sheet. */
+.sheet-divider {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: var(--space-16) calc(-1 * var(--space-20));
+}

package/css/index.css

@@ -0,0 +1,28 @@
+/* ================================================================
+   @klodd/ds - convenience-import
+   Importerar hela designsystemet i kanonisk ordning. App-specifika
+   tema-filer (apps/jubb.css, apps/ekonom.css) importeras separat
+   eftersom bara en ar aktiv per pageload.
+
+   Anvandning:
+     <link rel="stylesheet" href="@klodd/ds/css/index.css">
+     <link rel="stylesheet" href="@klodd/ds/css/apps/jubb.css">
+
+   Eller via CSS:
+     @import '@klodd/ds/css/index.css';
+     @import '@klodd/ds/css/apps/jubb.css';
+   ================================================================ */
+
+@import './00-primitives.css';
+@import './10-semantic.css';
+@import './base/pwa.css';
+@import './base/typography.css';
+@import './components/button.css';
+@import './components/input.css';
+@import './components/badge.css';
+@import './components/card.css';
+@import './components/nav.css';
+@import './components/feedback.css';
+@import './components/overlay.css';
+@import './components/icon.css';
+@import './components/hero-roll.css';

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@klodd/ds",
+  "version": "1.0.0",
+  "description": "Klodd Design System - shared tokens, typography, and components for Jubb, Ekonom, and future apps",
+  "main": "css/index.css",
+  "files": [
+    "css/"
+  ],
+  "keywords": [
+    "design-system",
+    "css",
+    "tokens",
+    "dark-mode",
+    "radix-colors"
+  ],
+  "author": "Carl-Eric Persson",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/drawn124578/klodd-ds.git"
+  },
+  "homepage": "https://github.com/drawn124578/klodd-ds#readme"
+}