Add symbol part for #84 workaround

barvian · Dec 16, 2024 · 46ab8bd · 46ab8bd
1 parent e626a3f
commit 46ab8bd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/.changeset/brown-oranges-beam.md b/.changeset/brown-oranges-beam.md
@@ -0,0 +1,8 @@
+---
+'number-flow': patch
+'@number-flow/react': patch
+'@number-flow/svelte': patch
+'@number-flow/vue': patch
+---
+
+Add symbol part for styling all symbols
diff --git a/packages/number-flow/src/index.ts b/packages/number-flow/src/index.ts
@@ -737,7 +737,7 @@ class Sym extends Char<KeyedSymbolPart> {
 			createElement(
 				'span',
 				{
-					part: type,
+					part: `symbol ${type}`,
 					className: `symbol`
 				},
 				[val]

diff --git a/packages/number-flow/src/styles.ts b/packages/number-flow/src/styles.ts
@@ -73,8 +73,9 @@ const styles = css`
 		display: inline-block;
 		direction: ltr;
 		white-space: nowrap;
-		line-height: ${charHeight} !important;
 		isolation: isolate; /* for .number z-index */
+		/* Technically this is only needed on the .number, but applying it here makes the ::selection the same height for the whole element: */
+		line-height: ${charHeight} !important;
 	}
 
 	.number,
@@ -160,7 +161,6 @@ const styles = css`
 		 */
 		content: '\200b'; /* zero-width space */
 		display: inline-block;
-		padding: ${halfMaskHeight} 0;
 	}
 
 	.section--justify-left {
@@ -184,12 +184,18 @@ const styles = css`
 		--c: var(--current) + var(${deltaVar});
 	}
 
+	.digit__num,
+	.number .section::after {
+		padding: ${halfMaskHeight} 0;
+	}
+
 	.digit__num {
 		display: inline-block;
-		padding: ${halfMaskHeight} 0;
 		/* Claude + https://buildui.com/recipes/animated-counter */
 		--offset-raw: mod(var(--length) + var(--n) - mod(var(--c), var(--length)), var(--length));
-		--offset: calc(var(--offset-raw) - var(--length) * round(down, var(--offset-raw) / (var(--length)/2), 1));
+		--offset: calc(
+			var(--offset-raw) - var(--length) * round(down, var(--offset-raw) / (var(--length) / 2), 1)
+		);
 		/* Technically we just need var(--offset)*100%, but clamping should reduce the layer size: */
 		--y: clamp(-100%, var(--offset) * 100%, 100%);
 		transform: translateY(var(--y));

diff --git a/site/src/pages/[...framework]/_Hero.tsx b/site/src/pages/[...framework]/_Hero.tsx
@@ -82,8 +82,7 @@ export default function Hero({ sandbox }: { sandbox: string }) {
 				/>
 			</div>
 			<p className="~text-base/lg prose prose-muted dark:prose-invert text-balance">
-				An animated number component. Dependency-free. Accessible.
-				Customizable.
+				An animated number component. Dependency-free. Accessible. Customizable.
 			</p>
 			<div className="~mt-3/5 flex w-full flex-wrap items-stretch justify-center gap-3">
 				<button