thingsboard · rusikv · May 25, 2026 · May 25, 2026 · May 25, 2026 · May 25, 2026
diff --git a/src/components/DeferredLoadTrigger.astro b/src/components/DeferredLoadTrigger.astro
@@ -25,6 +25,9 @@
 			runCallback(cb);
 		};
 
+		// Default API: if the user already interacted earlier in the session,
+		// run immediately; otherwise wait for interaction on this page or the
+		// fallback timer.
 		window.__deferOnInteraction = function (cb, fallbackMs) {
 			if (fired) return runCallback(cb);
 			const ms = typeof fallbackMs === 'number' ? fallbackMs : 2500;

diff --git a/src/components/Pricing/CalculatorModal.astro b/src/components/Pricing/CalculatorModal.astro
@@ -1379,12 +1379,31 @@ const { id } = Astro.props as Props;
 
 	// ─── Shared slider utilities (global) ───
 
+	// Cache the two theme-dependent CSS custom properties on `window` so
+	// continuous slider `input` events don't force a fresh style recalc per call.
+	// State lives on `window` because this `is:inline` script is inlined once per
+	// <CalculatorModal /> instance on the page — a block-scoped `let` would throw
+	// "already declared" on the 2nd/3rd inlining. Bust the cache when Starlight
+	// flips `data-theme` on <html>.
+	function _readSliderColors() {
+		const cs = getComputedStyle(document.documentElement);
+		window._sliderColors = {
+			primary: cs.getPropertyValue('--sl-color-text-accent').trim() || '#3D50F5',
+			track: cs.getPropertyValue('--sl-color-gray-5').trim() || '#E0E1E2',
+		};
+		return window._sliderColors;
+	}
+	if (!window._sliderColorsObserved) {
+		window._sliderColorsObserved = true;
+		new MutationObserver(function() { window._sliderColors = null; })
+			.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+	}
+
 	/** Update slider track fill via background linear-gradient */
 	window.sliderProgress = function(slider) {
 		const progress = ((parseFloat(slider.value) - parseFloat(slider.min)) / (parseFloat(slider.max) - parseFloat(slider.min))) * 100;
-		const primary = getComputedStyle(document.documentElement).getPropertyValue('--sl-color-text-accent').trim() || '#3D50F5';
-		const track = getComputedStyle(document.documentElement).getPropertyValue('--sl-color-gray-5').trim() || '#E0E1E2';
-		slider.style.background = 'linear-gradient(to right, ' + primary + ' ' + progress + '%, ' + track + ' ' + progress + '%)';
+		const c = window._sliderColors || _readSliderColors();
+		slider.style.background = 'linear-gradient(to right, ' + c.primary + ' ' + progress + '%, ' + c.track + ' ' + progress + '%)';
 	};
 
 	/** Position tick marks using JS (compensates for thumb width) */

diff --git a/src/components/Pricing/CommunityEditionCard.astro b/src/components/Pricing/CommunityEditionCard.astro
@@ -25,7 +25,13 @@ const { data } = Astro.props;
 			))}
 		</ul>
 		<div class="ce-card-actions">
-			<NButton href={data.ctaOnclick ? '#' : data.ctaHref} variant="filled" size="sm" class="gtm_button" onclick={data.ctaOnclick}>
+			<NButton
+				href={data.ctaOnclick ? '#' : data.ctaHref}
+				variant="filled"
+				size="sm"
+				class="gtm_button"
+				onclick={data.ctaOnclick ? `event.preventDefault();${data.ctaOnclick}` : undefined}
+			>
 				{data.ctaText}
 			</NButton>
 			{data.secondaryCtaText && (
@@ -34,7 +40,13 @@ const { data } = Astro.props;
 					variant="outlined"
 					size="sm"
 					class="gtm_button"
-					onclick={data.secondaryCtaHref ? undefined : data.secondaryCtaOnclick}
+					onclick={
+						data.secondaryCtaHref
+							? undefined
+							: data.secondaryCtaOnclick
+								? `event.preventDefault();${data.secondaryCtaOnclick}`
+								: undefined
+					}
 					target={data.secondaryCtaHref ? '_blank' : undefined}
 					rel={data.secondaryCtaHref ? 'noopener noreferrer' : undefined}
 				>

diff --git a/src/components/Pricing/ProductSubTabs.astro b/src/components/Pricing/ProductSubTabs.astro
@@ -22,7 +22,6 @@ const { product, tabs } = Astro.props;
 ---
 
 <div class="segment-tabs segment-tabs--sub" data-product-subtabs={product}>
-	<div class="segment-highlight"></div>
 	{tabs.map((tab) => (
 		<button
 			type="button"
@@ -79,15 +78,10 @@ const { product, tabs } = Astro.props;
 				align-self: stretch;
 			}
 
-			// Sliding highlight can't follow vertical layout — hide it
-			.segment-highlight {
-				display: none;
-			}
-
-			// Use simple background instead
+			// Vertical layout uses a wider corner radius on the active tab.
+			// The active background + shadow inherits from `.segment-tab.active`
+			// (now applied at all viewports — see ProductTabs.astro).
 			.segment-tab.active {
-				background: var(--color-bg-surface);
-				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
 				border-radius: $radius-lg;
 			}
 		}

diff --git a/src/components/Pricing/ProductTabs.astro b/src/components/Pricing/ProductTabs.astro
@@ -9,7 +9,6 @@ const tabs = [
 ---
 
 <nav class="segment-tabs segment-tabs--product" aria-label="Product selection">
-	<div class="segment-highlight"></div>
 	{tabs.map((tab) => (
 		<button
 			type="button"
@@ -41,24 +40,11 @@ const tabs = [
 		width: fit-content;
 	}
 
-	.segment-highlight {
-		position: absolute;
-		top: 4px;
-		left: 4px;
-		height: calc(100% - 8px);
-		border-radius: $radius-full;
-		background: var(--color-bg-surface);
-		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
-		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		pointer-events: none;
-		z-index: 0;
-
-		[data-theme='dark'] & {
-			background: var(--color-bg-surface);
-			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
-		}
-	}
-
+	// Active tab gets its own background + shadow. Previously a separate
+	// .segment-highlight element slid between tabs, but that required JS
+	// `getBoundingClientRect()` reads after class writes — a forced reflow
+	// flagged by PageSpeed. Per-tab styling has no slide animation; the
+	// active-state transition is a cross-fade instead.
 	.segment-tab {
 		position: relative;
 		z-index: 1;
@@ -73,7 +59,7 @@ const tabs = [
 		border: none;
 		border-radius: $radius-full;
 		cursor: pointer;
-		transition: color 0.2s ease;
+		transition: color 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease;
 		white-space: nowrap;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
@@ -85,6 +71,12 @@ const tabs = [
 
 		&.active {
 			color: var(--color-text);
+			background: var(--color-bg-surface);
+			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
+
+			[data-theme='dark'] & {
+				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
+			}
 		}
 	}
 
@@ -138,10 +130,6 @@ const tabs = [
 			gap: $spacing-3;
 			padding: 0;
 
-			.segment-highlight {
-				display: none;
-			}
-
 			.segment-tab {
 				padding: $spacing-2 $spacing-5;
 				font-size: $font-size-base;
@@ -152,6 +140,9 @@ const tabs = [
 				&.active {
 					border-color: var(--color-primary);
 					color: var(--color-primary);
+					// Mobile uses an outlined-button style — drop the
+					// desktop pill shadow so the border reads cleanly.
+					box-shadow: none;
 				}
 			}
 		}