@klodd/ds 1.1.0 → 3.0.0

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/tooltip.css

@@ -0,0 +1,50 @@
+/* ================================================================
+   components/tooltip.css
+   Kortfattad hjalptext vid hover/focus. Pure CSS - ingen JS.
+
+   Markup-pattern:
+     <span class="tooltip-wrapper">
+       <button class="btn btn--icon">...</button>
+       <span class="tooltip" role="tooltip">Hjalptext har</span>
+     </span>
+
+   Tooltip visas vid hover OCH focus-within sa tangentbordsanvandare
+   far samma feedback som musanvandare. Pointer-events:none pa
+   tooltip-elementet sa det inte snor klick fran wrappern.
+
+   prefers-reduced-motion respekteras (opacity-fade tas bort).
+   ================================================================ */
+.tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: calc(100% + var(--space-6));
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--surface-overlay);
+  color: var(--text-default);
+  font-size: var(--fs-12);
+  line-height: var(--lh-snug);
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-6);
+  border: 1px solid var(--border-default);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease-out);
+  z-index: var(--z-tooltip, 50);
+}
+
+.tooltip-wrapper:hover .tooltip,
+.tooltip-wrapper:focus-within .tooltip {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip {
+    transition: none;
+  }
+}

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';
@@ -26,3 +33,28 @@
 @import './components/overlay.css';
 @import './components/icon.css';
 @import './components/hero-roll.css';
+@import './components/divider.css';
+@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);
+})();

package/js/hero-roll.js

@@ -0,0 +1,287 @@
+/* Hero Roll Animation - delad komponent
+ * Krav: .hero-amount[data-animate-roll] i HTML
+ * Krav: font-variant-numeric: tabular-nums pa elementet
+ * Krav: --lh-tight definierad i CSS (anvands som rullhojd)
+ * Turbo: triggar via turbo:swap-event om Turbo finns, annars fresh-session only
+ *
+ * Delad mellan Jubb och Ekonom (extraherad fran Ekonom 2026-05-07).
+ * Filen ar oforandrad fran Ekonom-originalet - portabel utan wrapper.
+ */
+
+/*--------------------------------------------------------------
+ Sprint J + J.4 + J.5: Hero-siffra rullnings-animation pa /avstamning.
+
+ Inspirerat av kodlas-rullning (parallella siffror som rullar med
+ olika sluttider). Triggers:
+ 1. **Fresh session** (J.5): kallstart-detektering via sessionStorage-
+    marker. Animation kor vid forsta page-load efter att PWA/tab
+    stangts helt. Sprint D3:s `body[data-first-load]` (cookie-baserad)
+    fungerar bara for helt nya anvandare; J.5-trigger fungerar for
+    return-anvandare som har `ekonom_seen`-cookie satt sedan tidigare.
+ 2. Manadsbyte via < / > i manads-pillen pa /avstamning
+
+ Sprint J.4 (CE-rapport: 000 kr syns lite val lange + hela processen
+ ar lang):
+ - Turbo-nav.js skip:ar VT vid month-change. Original DOM byts
+   omedelbart till rollers - ingen 160ms VT-fade-paus. Animation
+   borjar pa samma frame som DOM-swap.
+ - Korta animation-durations: BASE 800ms -> 500ms, STEP 200ms ->
+   100ms. Total animation 500/600/700ms istallet for 800/1000/1200ms.
+ - Riv ut J.3:s tva-fas-arkitektur (BUILD/ANIMATE separation). Allt
+   sker synchron inom buildAndAnimate.
+ - Behaller force-reflow-pattern (`void el.offsetHeight`) sa browser
+   registrerar initial state innan transition triggas.
+
+ Total perceived tid (klick till slutvarde): ~720ms vid month-change
+ (network ~50ms + animation 700ms). Tidigare: ~1400ms.
+
+ Bredd-glitch-fix (J.3 oforandrat):
+ Default `<p>`-block-flow med inline-block rollers. Content-driven
+ width via tabular-nums - identisk packning som server-text.
+--------------------------------------------------------------*/
+( function () {
+	'use strict';
+
+	// Sprint J.4: kortare durations. 500/600/700ms for tre siffror.
+	const ROLLER_DURATION_BASE = 500;   // var 800ms
+	const ROLLER_DURATION_STEP = 100;   // var 200ms
+	const EXTRA_ROUNDS = 3;
+	// Sprint J.6: linear istallet for cubic-bezier(0.22, 1, 0.36, 1)
+	// (ease-out-quart). Quart-easing packar 95%+ av rorelsen i forsta
+	// halvan av tiden - sista 10% av tiden tacker bara 0.01% av rorelse,
+	// vilket gor sista rollers slutfas visuellt ororlig ("byts ut" istallet
+	// for "rullar"). Linear ger konstant hastighet sa alla siffror rullar
+	// synligt fran start till slut. Aven mer mekaniskt-korrekt - faktiska
+	// kodlas rullar med moment-konstant rotation.
+	const EASING = 'linear';
+
+	// Sprint J.5: sessionStorage-marker for fresh-session-detektering.
+	// sessionStorage rensas vid PWA-stangning/tab-close, persisterar
+	// mellan reloads/nav inom samma session.
+	// Delad sessionStorage-key for hero-roll. Bytt fran ekonom_hero_session
+	// 2026-05-08 nar komponenten porterades tillbaka till Ekonom som shared-
+	// system. Befintliga session-markers fran gamla nyckeln tappar persist
+	// engang per anvandare - ny markering satts vid nasta kallstart.
+	const SESSION_KEY = 'ds_hero_session';
+
+	let hasRunInitial = false;
+	let lastSeenUrl = window.location.href;
+
+	function getHeroEl () {
+		return document.querySelector( '.hero-amount[data-animate-roll]' );
+	}
+
+	function prefersReducedMotion () {
+		return window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
+	}
+
+	function buildRoller ( targetDigit ) {
+		const roller = document.createElement( 'span' );
+		roller.className = 'hero-digit-roller';
+
+		const track = document.createElement( 'span' );
+		track.className = 'hero-digit-track';
+
+		const totalSteps = targetDigit + ( EXTRA_ROUNDS * 10 );
+		for ( let i = 0; i <= totalSteps; i++ ) {
+			const span = document.createElement( 'span' );
+			span.textContent = String( i % 10 );
+			track.appendChild( span );
+		}
+
+		roller.appendChild( track );
+		return { roller: roller, track: track, steps: totalSteps };
+	}
+
+	function buildStaticChar ( text ) {
+		const span = document.createElement( 'span' );
+		span.className = 'hero-static-char';
+		span.textContent = text;
+		return span;
+	}
+
+	/*--------------------------------------------------------------
+	 Bygg digit-rollers + starta transition synchron i samma frame.
+	 Idempotent via data-rolled-attribut.
+	--------------------------------------------------------------*/
+	function buildAndAnimate ( el ) {
+		if ( ! el ) return;
+		if ( el.dataset.rolled === 'true' ) return;
+		const target = parseInt( el.dataset.animateRoll, 10 );
+		if ( isNaN( target ) ) return;
+
+		// No-op for 0
+		if ( target === 0 ) {
+			el.dataset.rolled = 'true';
+			return;
+		}
+
+		el.dataset.rolled = 'true';
+
+		const originalText = el.textContent;
+		const isNegative = target < 0;
+		const absTarget = Math.abs( target );
+		const digits = String( absTarget ).split( '' ).map( Number );
+		const len = digits.length;
+
+		const fragment = document.createDocumentFragment();
+
+		if ( isNegative ) {
+			fragment.appendChild( buildStaticChar( '−' ) );
+		}
+
+		const rollers = [];
+		digits.forEach( function ( d, i ) {
+			const r = buildRoller( d );
+			fragment.appendChild( r.roller );
+			rollers.push( r );
+			const fromRight = len - 1 - i;
+			if ( fromRight > 0 && fromRight % 3 === 0 ) {
+				fragment.appendChild( buildStaticChar( ' ' ) );
+			}
+		} );
+
+		fragment.appendChild( buildStaticChar( ' kr' ) );
+
+		// Mat font-line-height for digit-roller-hojd.
+		const computed = window.getComputedStyle( el );
+		const fontSize = parseFloat( computed.fontSize );
+		const lineHeightRaw = computed.lineHeight;
+		let lineHeight;
+		if ( lineHeightRaw === 'normal' ) {
+			lineHeight = fontSize * 1.05;
+		} else {
+			lineHeight = parseFloat( lineHeightRaw );
+		}
+		el.style.setProperty( '--hero-digit-height', lineHeight + 'px' );
+
+		// Replace content
+		el.innerHTML = '';
+		el.appendChild( fragment );
+
+		// Reduced-motion: hopppa direkt till slutposition utan transition.
+		if ( prefersReducedMotion() ) {
+			rollers.forEach( function ( r ) {
+				r.track.style.transform =
+					'translateY(calc(-1 * var(--hero-digit-height) * ' + r.steps + '))';
+			} );
+			requestAnimationFrame( function () {
+				el.textContent = originalText;
+			} );
+			return;
+		}
+
+		// Sprint J.4: force reflow sa browser registrerar initial state
+		// (translateY default 0) innan transition triggas. Utan reflow
+		// hoppar browser direkt till slut-state utan animation.
+		void el.offsetHeight;
+
+		// Trigga transition synchron i samma frame.
+		rollers.forEach( function ( r, i ) {
+			const duration = ROLLER_DURATION_BASE + ( i * ROLLER_DURATION_STEP );
+			r.track.style.transition =
+				'transform ' + duration + 'ms ' + EASING;
+			r.track.style.transform =
+				'translateY(calc(-1 * var(--hero-digit-height) * ' + r.steps + '))';
+		} );
+
+		// Vid done: restora till server-text for klean DOM-state.
+		const totalDuration = ROLLER_DURATION_BASE + ( ( rollers.length - 1 ) * ROLLER_DURATION_STEP );
+		setTimeout( function () {
+			el.textContent = originalText;
+		}, totalDuration + 60 );
+	}
+
+	/*--------------------------------------------------------------
+	 Trigger-detektering.
+	--------------------------------------------------------------*/
+	function isMonthChange ( fromUrl, toUrl ) {
+		if ( ! fromUrl ) return false;
+		try {
+			const f = new URL( fromUrl );
+			const t = new URL( toUrl );
+			if ( f.pathname !== '/avstamning' || t.pathname !== '/avstamning' ) return false;
+			const fromMonth = f.searchParams.get( 'month' );
+			const toMonth = t.searchParams.get( 'month' );
+			return fromMonth !== toMonth;
+		} catch ( _ ) {
+			return false;
+		}
+	}
+
+	/*--------------------------------------------------------------
+	 Sprint J.5: trigger animation vid fresh session (kallstart fran
+	 stangd PWA/tab). sessionStorage-marker satts forsta gang per
+	 session - om saknad ar det en ny session.
+
+	 Behaller `data-first-load`-trigger som fallback for browsers utan
+	 sessionStorage-stod (extremt sallsynt) och for konsistens med
+	 Sprint D3 splash-animations.
+	--------------------------------------------------------------*/
+	function tryAnimateInitial () {
+		if ( hasRunInitial ) return;
+
+		// Fresh-session-detektering via sessionStorage.
+		let isFreshSession = false;
+		try {
+			if ( ! sessionStorage.getItem( SESSION_KEY ) ) {
+				isFreshSession = true;
+				sessionStorage.setItem( SESSION_KEY, '1' );
+			}
+		} catch ( _ ) {
+			// sessionStorage kan kasta i restricted contexts (extremt
+			// sallsynt). Falla tillbaka till data-first-load.
+		}
+
+		const isFirstEver = document.body.dataset.firstLoad === 'true';
+
+		if ( ! isFreshSession && ! isFirstEver ) return;
+
+		const el = getHeroEl();
+		if ( ! el ) return;
+		hasRunInitial = true;
+		buildAndAnimate( el );
+	}
+
+	/*--------------------------------------------------------------
+	 First-load via DOMContentLoaded.
+	--------------------------------------------------------------*/
+	if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', tryAnimateInitial );
+	} else {
+		tryAnimateInitial();
+	}
+
+	/*--------------------------------------------------------------
+	 Sprint J.4: month-change via turbo:swap (synchron inom turbo-nav.js
+	 swap-kornplats). Eftersom turbo-nav.js skip:ar VT vid month-change,
+	 ar swap synchron och original DOM ar synlig direkt - animation
+	 borjar pa samma frame som DOM-byte.
+	--------------------------------------------------------------*/
+	document.addEventListener( 'turbo:swap', function ( e ) {
+		const detail = e.detail || {};
+		const newUrl = detail.url || window.location.href;
+
+		if ( ! isMonthChange( lastSeenUrl, newUrl ) ) {
+			lastSeenUrl = newUrl;
+			return;
+		}
+
+		const el = getHeroEl();
+		if ( ! el ) {
+			lastSeenUrl = newUrl;
+			return;
+		}
+
+		buildAndAnimate( el );
+		lastSeenUrl = newUrl;
+	} );
+
+	/*--------------------------------------------------------------
+	 Fallback: turbo:navigated (efter VT-end) for first-load om
+	 DOMContentLoaded inte hunnit.
+	--------------------------------------------------------------*/
+	document.addEventListener( 'turbo:navigated', function () {
+		tryAnimateInitial();
+	} );
+} )();

package/js/index.js

@@ -0,0 +1,95 @@
+/* @klodd/ds - JavaScript entry point.
+ *
+ * Convenience-aggregator som kor enskilda init-funktioner. Default
+ * fungerar utan konfiguration (LLM-vanligt). Konfig-objektet kan
+ * over-rida vad som ska aktiveras.
+ *
+ * Anvandning:
+ *
+ *   <script src="https://unpkg.com/@klodd/ds/js/index.js" defer></script>
+ *   <script>
+ *     window.addEventListener('DOMContentLoaded', () => {
+ *       KloddDS.init();
+ *     });
+ *   </script>
+ *
+ * Eller med konfig:
+ *
+ *   KloddDS.init({
+ *     swPath: '/service-worker.js',
+ *     lucide: true,
+ *     barStyles: true,
+ *     heroRoll: true,
+ *     pullToRefresh: false,
+ *     turboNav: false,
+ *     navOptimistic: true,
+ *     sheetDrag: true,
+ *     pwaRegister: false,  // satt true + swPath for SW + install-prompts
+ *   });
+ *
+ * Individuella moduler kan ocksa importeras separat fran js/-mappen.
+ * KloddDS.init() ar bara en convenience-wrapper - den inkluderar inte
+ * filerna sjalv, dvs varje modul-fil maste laddas via <script>-tag.
+ *
+ * Defaults ar konservativa: heavy beteenden (PtR, Turbo Drive, PWA
+ * register) ar OFF default. App-mantainern aktiverar opt-in.
+ */
+'use strict';
+
+(function (root) {
+  const defaults = {
+    lucide: true,
+    barStyles: true,
+    heroRoll: true,
+    navOptimistic: true,
+    sheetDrag: true,
+    pullToRefresh: false,
+    turboNav: false,
+    pwaRegister: false,
+    swPath: '/static/sw.js',
+  };
+
+  const KloddDS = {
+    init(config) {
+      const cfg = Object.assign({}, defaults, config || {});
+
+      if (cfg.lucide && typeof root.initLucide === 'function') {
+        root.initLucide();
+      } else if (cfg.lucide && root.lucide && typeof root.lucide.createIcons === 'function') {
+        root.lucide.createIcons();
+      }
+
+      if (cfg.barStyles && typeof root.initBarStyles === 'function') {
+        root.initBarStyles();
+      }
+
+      if (cfg.heroRoll && typeof root.initHeroRoll === 'function') {
+        root.initHeroRoll();
+      }
+
+      if (cfg.navOptimistic && typeof root.initNavOptimistic === 'function') {
+        root.initNavOptimistic();
+      }
+
+      if (cfg.sheetDrag && typeof root.initSheetDrag === 'function') {
+        root.initSheetDrag();
+      }
+
+      if (cfg.pullToRefresh && typeof root.initPullToRefresh === 'function') {
+        root.initPullToRefresh();
+      }
+
+      if (cfg.turboNav && typeof root.initTurboNav === 'function') {
+        root.initTurboNav();
+      }
+
+      if (cfg.pwaRegister && typeof root.initPwaRegister === 'function') {
+        root.initPwaRegister({ swPath: cfg.swPath });
+      }
+    },
+
+    version: '2.0.0',
+  };
+
+  root.KloddDS = KloddDS;
+})(typeof window !== 'undefined' ? window : globalThis);