@klodd/ds 1.2.0 → 3.0.0

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

package/css/components/table.css

@@ -0,0 +1,39 @@
+/* ================================================================
+   components/table.css
+   Tabell med header + rader. Tabular-nums for nummerkolumner.
+   ================================================================ */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-13);
+}
+
+.table th {
+  font-size: var(--fs-10);
+  font-weight: var(--fw-medium);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  text-align: left;
+  padding: var(--space-8) var(--space-6);
+  border-bottom: 1px solid var(--border-default);
+}
+
+.table td {
+  padding: var(--space-12) var(--space-6);
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-default);
+}
+
+.table tbody tr:last-child td { border-bottom: none; }
+
+@media (hover: hover) and (pointer: fine) {
+  .table tbody tr:hover { background: var(--surface-hover); }
+}
+
+.table td.num,
+.table th.num {
+  text-align: right;
+  font-weight: var(--fw-medium);
+  font-variant-numeric: tabular-nums;
+}

package/css/components/upload-spinner.css

@@ -0,0 +1,55 @@
+/* ================================================================
+   components/upload-spinner.css
+   Stor loading-overlay som tacker viewport. Anvands for OCR-uploads,
+   AI-anrop och andra langa async-operations dar appen ar blockerad.
+
+   .upload-spinner-overlay ar fixed-positionerat overlay som visas
+   nar .is-visible-klassen togglas via JS.
+   ================================================================ */
+.upload-spinner-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--backdrop-spinner);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--space-20);
+  z-index: var(--z-overlay, 70);
+  padding: var(--space-32);
+  text-align: center;
+}
+
+.upload-spinner-overlay.is-visible { display: flex; }
+
+.upload-spinner {
+  width: 56px;
+  height: 56px;
+  border: 3px solid var(--accent-a3);
+  border-top-color: var(--accent-9);
+  border-radius: var(--radius-full);
+  animation: upload-spinner-rotate var(--dur-slowest, 0.9s) linear infinite;
+}
+
+.upload-spinner-overlay__label {
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  letter-spacing: -0.01em;
+}
+
+.upload-spinner-overlay__hint {
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+  max-width: 280px;
+}
+
+@keyframes upload-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .upload-spinner { animation-duration: 2.4s; }
+}

package/css/index.css

@@ -13,10 +13,17 @@
      @import '@klodd/ds/css/apps/jubb.css';
    ================================================================ */
 
+/* Foundation */
 @import './00-primitives.css';
 @import './10-semantic.css';
+@import './utilities.css';
+
+/* Base layer */
 @import './base/pwa.css';
 @import './base/typography.css';
+@import './base/layout.css';
+
+/* Komponenter */
 @import './components/button.css';
 @import './components/input.css';
 @import './components/badge.css';
@@ -30,3 +37,24 @@
 @import './components/progress.css';
 @import './components/tooltip.css';
 @import './components/dropdown.css';
+
+/* v2.0.0 - flyttade fran app-repona */
+@import './components/banner.css';
+@import './components/panel.css';
+@import './components/hub-card.css';
+@import './components/stat.css';
+@import './components/form.css';
+@import './components/setting-row.css';
+@import './components/collapsible.css';
+@import './components/hbar.css';
+@import './components/split-bar.css';
+@import './components/hero.css';
+@import './components/chip.css';
+@import './components/avatar.css';
+@import './components/list-row.css';
+@import './components/table.css';
+@import './components/auth.css';
+@import './components/swipe-stack.css';
+@import './components/inline-edit.css';
+@import './components/upload-spinner.css';
+@import './components/tab-bar.css';

package/css/utilities.css

@@ -0,0 +1,81 @@
+/* ================================================================
+   utilities.css
+   Single-purpose helper-classes for sma layout-detaljer.
+   Bygger pa pixel-numerisk konvention (.m-0, .mt-12, .gap-8).
+
+   Ingen styling-logik - bara en CSS-property per klass.
+   ================================================================ */
+
+/* Margin */
+.m-0   { margin: 0; }
+.mt-0  { margin-top: 0; }
+.mt-4  { margin-top: var(--space-4); }
+.mt-8  { margin-top: var(--space-8); }
+.mt-12 { margin-top: var(--space-12); }
+.mt-16 { margin-top: var(--space-16); }
+.mt-20 { margin-top: var(--space-20); }
+.mt-24 { margin-top: var(--space-24); }
+.mb-0  { margin-bottom: 0; }
+.mb-4  { margin-bottom: var(--space-4); }
+.mb-8  { margin-bottom: var(--space-8); }
+.mb-12 { margin-bottom: var(--space-12); }
+.mb-16 { margin-bottom: var(--space-16); }
+.mb-20 { margin-bottom: var(--space-20); }
+.mb-24 { margin-bottom: var(--space-24); }
+
+/* Padding */
+.p-0   { padding: 0; }
+.pt-0  { padding-top: 0; }
+.pb-0  { padding-bottom: 0; }
+
+/* Display */
+.is-hidden { display: none !important; }
+.flex      { display: flex; }
+.inline-flex { display: inline-flex; }
+
+/* Width */
+.w-full { width: 100%; }
+
+/* Flex */
+.gap-4  { gap: var(--space-4); }
+.gap-8  { gap: var(--space-8); }
+.gap-12 { gap: var(--space-12); }
+.gap-16 { gap: var(--space-16); }
+.flex-column { flex-direction: column; }
+.align-center { align-items: center; }
+.align-self-start { align-self: flex-start; }
+.justify-between { justify-content: space-between; }
+
+/* Position (CSP-migration: ersatter style="position: ...") */
+.absolute      { position: absolute; }
+.absolute-fill { position: absolute; inset: 0; }
+.relative      { position: relative; }
+
+/* Text */
+.text-center { text-align: center; }
+.text-right  { text-align: right; }
+.break-word  { word-break: break-word; overflow-wrap: anywhere; }
+.tabular-nums { font-variant-numeric: tabular-nums; }
+
+/* Text-color (semantic shortcuts) */
+.text-default  { color: var(--text-default); }
+.text-subtle   { color: var(--text-subtle); }
+.text-muted    { color: var(--text-muted); }
+.text-disabled { color: var(--text-disabled); }
+.text-positive { color: var(--positive); }
+.text-negative { color: var(--negative); }
+.text-warning  { color: var(--warning); }
+.text-accent   { color: var(--accent-text); }
+
+/* Visibility */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/js/bar-styles.js

@@ -0,0 +1,37 @@
+/* bar-styles.js - applicerar dynamiska CSS-varden via data-attribut.
+ * CSP-sakert: JS-runtime bypass:ar HTML-parser-restriktioner pa
+ * style-src 'unsafe-inline'. Element kan deklarera dynamic dimensions
+ * via data-attribut istallet for inline style="..."-attribut.
+ *
+ * Stodda attribut:
+ *   data-bar-width="N"   sa style.width = N + '%'
+ *   data-bar-height="N"  sa style.height = N + '%'
+ *   data-z-index="N"     sa style.zIndex = N
+ *
+ * Re-init pa turbo:swap + turbo:navigated for SPA-flow sa nyrenderade
+ * element pa swapped-DOM aktiveras.
+ */
+(function () {
+  'use strict';
+
+  function applyBarStyles() {
+    document.querySelectorAll('[data-bar-width]').forEach(function (el) {
+      el.style.width = el.dataset.barWidth + '%';
+    });
+    document.querySelectorAll('[data-bar-height]').forEach(function (el) {
+      el.style.height = el.dataset.barHeight + '%';
+    });
+    document.querySelectorAll('[data-z-index]').forEach(function (el) {
+      el.style.zIndex = el.dataset.zIndex;
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', applyBarStyles);
+  } else {
+    applyBarStyles();
+  }
+
+  document.addEventListener('turbo:swap', applyBarStyles);
+  document.addEventListener('turbo:navigated', applyBarStyles);
+})();