From 0f0c3fd13b51dbd775ffcf68d86b9f0fa52bc257 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Tue, 14 Jan 2025 16:07:24 -0800
Subject: [PATCH] Changed how the shorthand font is obtained

---
 .../calcite-components/src/components/slider/slider.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
index 2d428073013..9e535ff6f2a 100644
--- a/packages/calcite-components/src/components/slider/slider.tsx
+++ b/packages/calcite-components/src/components/slider/slider.tsx
@@ -987,10 +987,10 @@ export class Slider
 
     if (intersects(minHandleBounds, maxHandleBounds)) {
       leftValueLabel.classList.add(CSS.hyphen, CSS.hyphenWrap);
-      const width = getTextWidth(
-        leftValueLabel.textContent,
-        window.getComputedStyle(leftValueLabel)["font"],
-      );
+      const computedStyle = getComputedStyle(leftValueLabel);
+      // we recreate the shorthand vs using computedStyle.font because browsers will return "" instead of the expected value
+      const shorthandFont = `${computedStyle.fontStyle} ${computedStyle.fontVariant} ${computedStyle.fontWeight} ${computedStyle.fontSize}/${computedStyle.lineHeight} ${computedStyle.fontFamily}`;
+      const width = getTextWidth(leftValueLabel.textContent, shorthandFont);
       leftValueLabel.style.transform = `translateY(-${width / 2 - 4}px) rotate(90deg)`;
     } else {
       leftValueLabel.classList.remove(CSS.hyphen, CSS.hyphenWrap);