@zylem/ui 0.9.0 → 0.9.1

package/dist/styles.js

@@ -1 +1 @@
-import"./chunk-V47CGFWX.js";
+import"./chunk-YJVLOHJL.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,5 @@
 import { Accordion as KAccordion } from '@kobalte/core';
+import ChevronDown from 'lucide-solid/icons/chevron-down';
 import { For } from 'solid-js';
 import type { JSX } from 'solid-js';
 import { headingTag, type HeadingLevel } from '../shared/Heading';
@@ -53,6 +54,7 @@ export function Accordion(props: AccordionProps) {
             <KAccordion.Header as={headingTag(props.headingLevel ?? 3)} class="accordion-header">
               <KAccordion.Trigger class="accordion-trigger">
                 {item.title}
+                <ChevronDown class="accordion-chevron" aria-hidden="true" />
               </KAccordion.Trigger>
             </KAccordion.Header>
             <KAccordion.Content

package/src/components/Button/Button.css.ts

@@ -9,119 +9,138 @@ import { vars } from '../../theme.css';
  */
 
 globalStyle('.zylem-button', {
-  boxSizing: 'border-box',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: vars.spacing.xs,
-  minHeight: '28px',
-  padding: `0 ${vars.spacing.md}`,
-  cursor: 'pointer',
-  userSelect: 'none',
-  whiteSpace: 'nowrap',
-  borderRadius: vars.radii.button,
-  border: '1px solid rgba(150, 210, 255, 0.55)',
-  color: '#F4FAFF',
-  background: vars.material.buttonGlass,
-  boxShadow: vars.effects.shadowButton,
-  textShadow: '0 1px 1px rgba(0,0,0,0.72)',
-  fontFamily: vars.typography.fontFamily,
-  fontSize: vars.typography.fontSize,
-  fontWeight: 600,
-  transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}`,
+	boxSizing: 'border-box',
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	gap: vars.spacing.xs,
+	minHeight: '28px',
+	padding: `0 ${vars.spacing.md}`,
+	cursor: 'pointer',
+	userSelect: 'none',
+	whiteSpace: 'nowrap',
+	borderRadius: vars.radii.button,
+	border: '1px solid rgba(150, 210, 255, 0.55)',
+	color: '#F4FAFF',
+	background: vars.material.buttonGlass,
+	boxShadow: vars.effects.shadowButton,
+	textShadow: '0 1px 1px rgba(0,0,0,0.72)',
+	fontFamily: vars.typography.fontFamily,
+	fontSize: vars.typography.fontSize,
+	fontWeight: 600,
+	transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.zylem-button:hover:not([disabled])', {
-  background: vars.material.buttonGlassHover,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
-  transform: 'translateY(-1px)',
-  color: '#F4FAFF',
+	background: vars.material.buttonGlassHover,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
+	transform: 'translateY(-1px)',
+	color: '#F4FAFF',
 });
 
 globalStyle('.zylem-button:active:not([disabled])', {
-  transform: 'translateY(1px)',
-  filter: 'brightness(0.92)',
-  // CodePen-inspired press: compressed drop shadow + bright bottom rim flash.
-  boxShadow:
-    'inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.55), inset 0 2px 3px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.28)',
+	transform: 'translateY(1px)',
+	filter: 'brightness(0.92)',
+	// CodePen-inspired press: compressed drop shadow + bright bottom rim flash.
+	boxShadow:
+		'inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.55), inset 0 2px 3px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.28)',
 });
 
 globalStyle('.zylem-button:focus-visible', {
-  outline: 'none',
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
+	outline: 'none',
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
 });
 
 globalStyle('.zylem-button[disabled], .zylem-button[data-disabled]', {
-  opacity: 0.45,
-  cursor: 'not-allowed',
+	opacity: 0.45,
+	cursor: 'not-allowed',
 });
 
 // Variants
 
 globalStyle('.zylem-button[data-variant="primary"]', {
-  borderColor: 'rgba(178, 219, 255, 0.8)',
-  background: vars.material.buttonGlassHover,
+	borderColor: 'rgba(178, 219, 255, 0.8)',
+	background: vars.material.buttonGlassHover,
 });
 
 globalStyle('.zylem-button[data-variant="primary"]:hover:not([disabled])', {
-  filter: 'brightness(1.08)',
+	filter: 'brightness(1.08)',
 });
 
 globalStyle('.zylem-button[data-variant="active"]', {
-  borderColor: 'rgba(20, 255, 60, 0.78)',
-  background: vars.material.buttonGlassActive,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
+	borderColor: 'rgba(20, 255, 60, 0.78)',
+	background: vars.material.buttonGlassActive,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
 });
 
 globalStyle('.zylem-button[data-variant="active"]:hover:not([disabled])', {
-  background: vars.material.buttonGlassActive,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
-  filter: 'brightness(1.1)',
+	background: vars.material.buttonGlassActive,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
+	filter: 'brightness(1.1)',
 });
 
 globalStyle('.zylem-button[data-variant="danger"]', {
-  borderColor: 'rgba(255, 132, 114, 0.78)',
-  background: vars.material.buttonGlassDanger,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
+	borderColor: 'rgba(255, 132, 114, 0.78)',
+	background: vars.material.buttonGlassDanger,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
 });
 
 globalStyle('.zylem-button[data-variant="danger"]:hover:not([disabled])', {
-  background: vars.material.buttonGlassDanger,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
-  filter: 'brightness(1.1)',
+	background: vars.material.buttonGlassDanger,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
+	filter: 'brightness(1.1)',
 });
 
 globalStyle('.zylem-button[data-variant="ghost"]', {
-  border: '1px solid rgba(97, 166, 232, 0.35)',
-  background: 'transparent',
-  boxShadow: 'none',
-  color: vars.colors.primary,
-  textShadow: 'none',
+	border: '1px solid rgba(97, 166, 232, 0.35)',
+	background: 'transparent',
+	boxShadow: 'none',
+	color: vars.colors.primary,
+	textShadow: 'none',
 });
 
 globalStyle('.zylem-button[data-variant="ghost"]:hover:not([disabled])', {
-  background: 'rgba(97, 166, 232, 0.12)',
-  boxShadow: vars.effects.glowPrimary,
-  color: vars.colors.primary,
+	background: 'rgba(97, 166, 232, 0.12)',
+	boxShadow: vars.effects.glowPrimary,
+	color: vars.colors.primary,
 });
 
 // Sizes
 
 globalStyle('.zylem-button[data-size="sm"]', {
-  minHeight: '22px',
-  padding: `0 ${vars.spacing.sm}`,
-  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+	minHeight: '22px',
+	padding: `0 ${vars.spacing.sm}`,
+	fontSize: `calc(${vars.typography.fontSize} - 2px)`,
 });
 
 globalStyle('.zylem-button[data-size="lg"]', {
-  minHeight: '36px',
-  padding: `0 ${vars.spacing.lg}`,
-  fontSize: `calc(${vars.typography.fontSize} + 1px)`,
+	minHeight: '36px',
+	padding: `0 ${vars.spacing.lg}`,
+	fontSize: `calc(${vars.typography.fontSize} + 4px)`,
 });
 
 globalStyle('.zylem-button[data-size="icon"]', {
-  minHeight: '28px',
-  minWidth: '28px',
-  padding: vars.spacing.xs,
-  borderRadius: vars.radii.control,
+	minHeight: '24px',
+	minWidth: '28px',
+	padding: vars.spacing.xs,
+	borderRadius: vars.radii.control,
+});
+
+globalStyle('.zylem-button-icon', {
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	flexShrink: 0,
+});
+
+globalStyle('.zylem-button svg', {
+	width: '16px',
+	height: '16px',
+	flexShrink: 0,
+	stroke: 'currentColor',
+});
+
+globalStyle('.zylem-button[data-size="sm"] svg', {
+	width: '14px',
+	height: '14px',
 });

package/src/components/Button/Button.tsx

@@ -1,5 +1,4 @@
-import type { JSX } from 'solid-js';
-import { splitProps } from 'solid-js';
+import { Show, splitProps, type JSX } from 'solid-js';
 
 export type ButtonVariant = 'default' | 'primary' | 'active' | 'danger' | 'ghost';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
@@ -8,6 +7,8 @@ export interface ButtonProps
   extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   size?: ButtonSize;
+  /** Icon drawn before the label. Omitted, the button is label only. */
+  icon?: JSX.Element | undefined;
 }
 
 /**
@@ -19,7 +20,7 @@ export interface ButtonProps
  * `@zylem/ui/styles.css`), selected via `data-variant` / `data-size`.
  */
 export function Button(props: ButtonProps) {
-  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children', 'icon']);
   return (
     <button
       type="button"
@@ -28,6 +29,11 @@ export function Button(props: ButtonProps) {
       data-size={local.size ?? 'md'}
       {...rest}
     >
+      <Show when={local.icon}>
+        <span class="zylem-button-icon" aria-hidden="true">
+          {local.icon}
+        </span>
+      </Show>
       {local.children}
     </button>
   );

package/src/components/Callout/Callout.css.ts

@@ -22,7 +22,7 @@ globalStyle('.zylem-callout-title', {
 });
 
 globalStyle('.zylem-callout-message code', {
-  fontFamily: "'Courier New', monospace",
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '0.95em',
 });
 

package/src/components/Console/Console.css.ts

@@ -35,7 +35,7 @@ globalStyle('.zylem-console', {
   background: 'rgba(4, 12, 20, 0.72)',
   boxShadow: vars.effects.shadowInset,
   color: vars.colors.consoleText,
-  fontFamily: "'Courier New', monospace",
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: `calc(${vars.typography.fontSize} - 1px)`,
   lineHeight: 1.45,
   outline: 'none',

package/src/components/FrameStrip/FrameStrip.css.ts

@@ -101,6 +101,7 @@ globalStyle('.zylem-frame-thumb-index', {
   alignItems: 'center',
   justifyContent: 'center',
   flex: '1 1 auto',
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '11px',
   fontWeight: 600,
   fontVariantNumeric: 'tabular-nums',

package/src/components/MenuButton/MenuButton.css.ts

@@ -7,15 +7,15 @@ import { vars } from '../../theme.css';
  */
 
 globalStyle('.zylem-menu-button', {
-  position: 'relative',
-  display: 'inline-flex',
-  alignItems: 'stretch',
+	position: 'relative',
+	display: 'inline-flex',
+	alignItems: 'stretch',
 });
 
 globalStyle('.zylem-menu-button__face', {
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
 });
 
 /*
@@ -24,23 +24,27 @@ globalStyle('.zylem-menu-button__face', {
  * rhythm.
  */
 globalStyle('.zylem-menu-button__chevron', {
-  position: 'absolute',
-  right: '-2px',
-  bottom: '-2px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '14px',
-  height: '14px',
-  padding: 0,
-  fontSize: '9px',
-  lineHeight: 1,
-  color: 'rgba(255, 255, 255, 0.75)',
-  background: 'rgba(20, 24, 32, 0.92)',
-  border: '1px solid rgba(255, 255, 255, 0.16)',
-  borderRadius: vars.radii.control,
-  cursor: 'pointer',
-  transition: `color ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
+	position: 'absolute',
+	right: '-5px',
+	bottom: '-5px',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	width: '18px',
+	height: '18px',
+	padding: 0,
+	color: vars.colors.text,
+	background: vars.colors.border,
+	border: `0.5px solid ${vars.colors.surface}`,
+	borderRadius: '50%',
+	cursor: 'pointer',
+	transition: `color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-menu-button__chevron svg', {
+	width: '18px',
+	height: '18px',
+	stroke: 'currentColor',
 });
 
 /*
@@ -49,43 +53,42 @@ globalStyle('.zylem-menu-button__chevron', {
  * control, and lets clicks through to the face beneath.
  */
 globalStyle('.zylem-menu-button__chevron--static', {
-  pointerEvents: 'none',
+	pointerEvents: 'none',
 });
 
 globalStyle('.zylem-menu-button__chevron:hover:not([disabled])', {
-  color: '#fff',
-  borderColor: 'rgba(255, 255, 255, 0.4)',
+	color: '#fff',
 });
 
 globalStyle('.zylem-menu-button__chevron:focus-visible', {
-  outline: 'none',
-  boxShadow: vars.effects.focusRing,
+	outline: 'none',
+	boxShadow: vars.effects.focusRing,
 });
 
 globalStyle('.zylem-menu-button__chevron[disabled]', {
-  opacity: 0.45,
-  cursor: 'not-allowed',
+	opacity: 0.45,
+	cursor: 'not-allowed',
 });
 
 globalStyle('.zylem-menu-button__panel', {
-  zIndex: vars.layers.menu,
-  color: vars.colors.text,
-  fontFamily: vars.typography.fontFamily,
-  borderRadius: vars.radii.panel,
-  border: '1px solid rgba(97, 166, 232, 0.45)',
-  background: vars.material.glassPanelDark,
-  boxShadow: vars.effects.shadowPanel,
-  backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
-  outline: 'none',
-  '@supports': {
-    'not (backdrop-filter: blur(1px))': {
-      background: vars.colors.surface,
-    },
-  },
+	zIndex: vars.layers.menu,
+	color: vars.colors.text,
+	fontFamily: vars.typography.fontFamily,
+	borderRadius: vars.radii.panel,
+	border: '1px solid rgba(97, 166, 232, 0.45)',
+	background: vars.material.glassPanelDark,
+	boxShadow: vars.effects.shadowPanel,
+	backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
+	outline: 'none',
+	'@supports': {
+		'not (backdrop-filter: blur(1px))': {
+			background: vars.colors.surface,
+		},
+	},
 });
 
 /** Icon glyphs supplied as inline SVG markup rather than components. */
 globalStyle('.zylem-menu-button__face svg', {
-  width: '18px',
-  height: '18px',
+	width: '18px',
+	height: '18px',
 });

package/src/components/MenuButton/MenuButton.tsx

@@ -1,4 +1,5 @@
 import { Popover as KPopover } from '@kobalte/core';
+import CircleChevronDown from 'lucide-solid/icons/circle-chevron-down';
 import { Show, createSignal, type JSX } from 'solid-js';
 import { createDismissGuard, useLayer } from '../../layers';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -40,9 +41,12 @@ export interface MenuButtonProps {
 
 /**
  * Shown in both modes, because a chevron means "this has a menu" and that is
- * true whether or not the face carries its own action.
+ * true whether or not the face carries its own action. The circle is the icon's
+ * own stroke, so the badge does not draw a second plate behind it.
  */
-const CHEVRON = '▾';
+function MenuChevron() {
+  return <CircleChevronDown aria-hidden="true" />;
+}
 
 /**
  * A toolbar button that owns a menu, optionally split.
@@ -70,11 +74,18 @@ export function MenuButton(props: MenuButtonProps) {
   const isSplit = () => props.onAction !== undefined;
   const tooltipText = () =>
     props.tooltip === null ? null : props.tooltip ?? props.label;
+  /** The menu takes one side of the button, so the label takes the other. */
+  const tooltipPlacement = () =>
+    (props.placement ?? 'bottom-start').startsWith('top') ? 'bottom' : 'top';
 
   /** Wrap in a tooltip only when there is text for one. */
   const described = (content: JSX.Element) => (
     <Show when={tooltipText()} fallback={content} keyed>
-      {(text) => <Tooltip content={text}>{content}</Tooltip>}
+      {(text) => (
+        <Tooltip content={text} placement={tooltipPlacement()}>
+          {content}
+        </Tooltip>
+      )}
     </Show>
   );
 
@@ -107,7 +118,7 @@ export function MenuButton(props: MenuButtonProps) {
                 class="zylem-menu-button__chevron zylem-menu-button__chevron--static"
                 aria-hidden="true"
               >
-                {CHEVRON}
+                <MenuChevron />
               </span>
             </KPopover.Trigger>,
           )}
@@ -130,7 +141,7 @@ export function MenuButton(props: MenuButtonProps) {
             aria-label={`${props.label} options`}
             disabled={props.disabled}
           >
-            <span aria-hidden="true">{CHEVRON}</span>
+            <MenuChevron />
           </KPopover.Trigger>
         </Show>
 

package/src/components/Menubar/Menubar.css.ts

@@ -33,7 +33,7 @@ globalStyle('.zylem-menubar-trigger', {
 
 globalStyle('.zylem-menubar-trigger:hover', {
 	background: 'rgba(97, 166, 232, 0.12)',
-	color: vars.colors.primaryHover,
+	color: vars.colors.text,
 });
 
 globalStyle('.zylem-menubar-trigger[data-expanded]', {

package/src/components/Mixer/Mixer.css.ts

@@ -73,6 +73,7 @@ globalStyle('.zylem-knob-label', {
 });
 
 globalStyle('.zylem-knob-value', {
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '10px',
   fontVariantNumeric: 'tabular-nums',
   color: vars.colors.text,
@@ -216,6 +217,7 @@ globalStyle('.zylem-mixer-meter-fill', {
 });
 
 globalStyle('.zylem-mixer-readout', {
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '10px',
   fontVariantNumeric: 'tabular-nums',
   color: vars.colors.textSecondary,

package/src/components/NumberField/NumberField.css.ts

@@ -3,45 +3,51 @@ import { vars } from '../../theme.css';
 import '../shared/field.css';
 
 globalStyle('.zylem-numberfield-group', {
-  display: 'inline-flex',
-  alignItems: 'stretch',
-  position: 'relative',
-  width: '100%',
+	display: 'inline-flex',
+	alignItems: 'stretch',
+	position: 'relative',
+	width: '100%',
 });
 
 globalStyle('.zylem-numberfield-input', {
-  width: '100%',
-  height: '28px',
-  paddingRight: '26px',
-  fontVariantNumeric: 'tabular-nums',
+	width: '100%',
+	height: '28px',
+	paddingRight: '26px',
+	fontFamily: vars.typography.fontFamilyMono,
+	fontVariantNumeric: 'tabular-nums',
 });
 
 globalStyle('.zylem-numberfield-stepper', {
-  position: 'absolute',
-  right: '3px',
-  width: '20px',
-  height: '11px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  cursor: 'pointer',
-  border: '1px solid rgba(150, 210, 255, 0.4)',
-  borderRadius: '4px',
-  background: vars.material.buttonGlass,
-  color: '#F4FAFF',
-  fontSize: '8px',
-  lineHeight: 1,
-  padding: 0,
-  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}`,
+	position: 'absolute',
+	right: '3px',
+	width: '20px',
+	height: '9px',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	cursor: 'pointer',
+	border: '0.5px solid rgba(150, 210, 255, 0.4)',
+	borderRadius: '4px',
+	background: vars.material.buttonGlass,
+	color: '#F4FAFF',
+	lineHeight: 1,
+	padding: 0,
+	transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.zylem-numberfield-stepper:hover', {
-  filter: 'brightness(1.25)',
+	filter: 'brightness(1.25)',
 });
 
 globalStyle('.zylem-numberfield-stepper:active', {
-  filter: 'brightness(0.85)',
+	filter: 'brightness(0.85)',
 });
 
 globalStyle('.zylem-numberfield-stepper--up', { top: '3px' });
 globalStyle('.zylem-numberfield-stepper--down', { bottom: '3px' });
+
+globalStyle('.zylem-numberfield-stepper svg', {
+	width: '10px',
+	height: '8px',
+	stroke: 'currentColor',
+});

package/src/components/NumberField/NumberField.tsx

@@ -1,4 +1,6 @@
 import { NumberField as KNumberField } from '@kobalte/core';
+import ChevronDown from 'lucide-solid/icons/chevron-down';
+import ChevronUp from 'lucide-solid/icons/chevron-up';
 import { Show } from 'solid-js';
 
 export interface NumberFieldProps {
@@ -54,13 +56,13 @@ export function NumberField(props: NumberFieldProps) {
           class="zylem-numberfield-stepper zylem-numberfield-stepper--up"
           aria-label="Increment"
         >
-          <span aria-hidden="true">▲</span>
+          <ChevronUp aria-hidden="true" />
         </KNumberField.IncrementTrigger>
         <KNumberField.DecrementTrigger
           class="zylem-numberfield-stepper zylem-numberfield-stepper--down"
           aria-label="Decrement"
         >
-          <span aria-hidden="true">▼</span>
+          <ChevronDown aria-hidden="true" />
         </KNumberField.DecrementTrigger>
       </div>
       <Show when={props.error}>

package/src/components/Progress/Progress.css.ts

@@ -25,7 +25,7 @@ globalStyle('.zylem-progress-label', {
 globalStyle('.zylem-progress-value', {
   fontSize: `calc(${vars.typography.fontSize} - 2px)`,
   color: vars.colors.primary,
-  fontFamily: vars.typography.fontFamily,
+  fontFamily: vars.typography.fontFamilyMono,
   fontVariantNumeric: 'tabular-nums',
 });
 

package/src/components/Select/Select.css.ts

@@ -20,12 +20,18 @@ globalStyle('.zylem-select-value', {
 });
 
 globalStyle('.zylem-select-icon', {
+  display: 'flex',
   flexShrink: 0,
-  fontSize: '9px',
   color: vars.colors.primary,
   transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
+globalStyle('.zylem-select-icon svg', {
+  width: '14px',
+  height: '14px',
+  stroke: 'currentColor',
+});
+
 globalStyle('.zylem-select-trigger[data-expanded] .zylem-select-icon', {
   transform: 'rotate(180deg)',
 });