tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6

package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx

@@ -35,11 +35,6 @@ import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiTo
 import { DoubleDropdownPicker } from './DoubleDropdownPicker'
 import { DropdownPicker } from './DropdownPicker'
 
-// Local component for style panel subheadings
-function StylePanelSubheading({ children }: { children: React.ReactNode }) {
-	return <h3 className="tlui-style-panel__subheading">{children}</h3>
-}
-
 /** @public */
 export interface TLUiStylePanelContentProps {
 	styles: ReturnType<typeof useRelevantStyles>
@@ -120,7 +115,6 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 	const editor = useEditor()
 
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const handleValueChange = useStyleChangeCallback()
 
@@ -135,90 +129,70 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 		<>
 			<div className="tlui-style-panel__section__common" data-testid="style.panel">
 				{color === undefined ? null : (
-					<>
-						{showUiLabels && (
-							<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>
-						)}
-						<TldrawUiToolbar label={msg('style-panel.color')}>
-							<TldrawUiButtonPicker
-								title={msg('style-panel.color')}
-								uiType="color"
-								style={DefaultColorStyle}
-								items={STYLES.color}
-								value={color}
-								onValueChange={handleValueChange}
-								theme={theme}
-								onHistoryMark={onHistoryMark}
-							/>
-						</TldrawUiToolbar>
-					</>
+					<TldrawUiToolbar label={msg('style-panel.color')}>
+						<TldrawUiButtonPicker
+							title={msg('style-panel.color')}
+							uiType="color"
+							style={DefaultColorStyle}
+							items={STYLES.color}
+							value={color}
+							onValueChange={handleValueChange}
+							theme={theme}
+							onHistoryMark={onHistoryMark}
+						/>
+					</TldrawUiToolbar>
 				)}
 				<OpacitySlider />
 			</div>
 			{showPickers && (
 				<div className="tlui-style-panel__section">
 					{fill === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar label={msg('style-panel.fill')}>
-								<TldrawUiButtonPicker
-									title={msg('style-panel.fill')}
-									uiType="fill"
-									style={DefaultFillStyle}
-									items={STYLES.fill}
-									value={fill}
-									onValueChange={handleValueChange}
-									theme={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
+						<TldrawUiToolbar label={msg('style-panel.fill')}>
+							<TldrawUiButtonPicker
+								title={msg('style-panel.fill')}
+								uiType="fill"
+								style={DefaultFillStyle}
+								items={STYLES.fill}
+								value={fill}
+								onValueChange={handleValueChange}
+								theme={theme}
+								onHistoryMark={onHistoryMark}
+							/>
+						</TldrawUiToolbar>
 					)}
 					{dash === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar label={msg('style-panel.dash')}>
-								<TldrawUiButtonPicker
-									title={msg('style-panel.dash')}
-									uiType="dash"
-									style={DefaultDashStyle}
-									items={STYLES.dash}
-									value={dash}
-									onValueChange={handleValueChange}
-									theme={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
+						<TldrawUiToolbar label={msg('style-panel.dash')}>
+							<TldrawUiButtonPicker
+								title={msg('style-panel.dash')}
+								uiType="dash"
+								style={DefaultDashStyle}
+								items={STYLES.dash}
+								value={dash}
+								onValueChange={handleValueChange}
+								theme={theme}
+								onHistoryMark={onHistoryMark}
+							/>
+						</TldrawUiToolbar>
 					)}
 					{size === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar label={msg('style-panel.size')}>
-								<TldrawUiButtonPicker
-									title={msg('style-panel.size')}
-									uiType="size"
-									style={DefaultSizeStyle}
-									items={STYLES.size}
-									value={size}
-									onValueChange={(style, value) => {
-										handleValueChange(style, value)
-										const selectedShapeIds = editor.getSelectedShapeIds()
-										if (selectedShapeIds.length > 0) {
-											kickoutOccludedShapes(editor, selectedShapeIds)
-										}
-									}}
-									theme={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
+						<TldrawUiToolbar label={msg('style-panel.size')}>
+							<TldrawUiButtonPicker
+								title={msg('style-panel.size')}
+								uiType="size"
+								style={DefaultSizeStyle}
+								items={STYLES.size}
+								value={size}
+								onValueChange={(style, value) => {
+									handleValueChange(style, value)
+									const selectedShapeIds = editor.getSelectedShapeIds()
+									if (selectedShapeIds.length > 0) {
+										kickoutOccludedShapes(editor, selectedShapeIds)
+									}
+								}}
+								theme={theme}
+								onHistoryMark={onHistoryMark}
+							/>
+						</TldrawUiToolbar>
 					)}
 				</div>
 			)}
@@ -233,8 +207,6 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 
 	const editor = useEditor()
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
-	const labelStr = showUiLabels && msg('style-panel.font')
 
 	const font = styles.get(DefaultFontStyle)
 	const textAlign = styles.get(DefaultTextAlignStyle)
@@ -247,38 +219,59 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 	return (
 		<div className="tlui-style-panel__section">
 			{font === undefined ? null : (
-				<>
-					{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}
-					<TldrawUiToolbar label={msg('style-panel.font')}>
-						<TldrawUiButtonPicker
-							title={msg('style-panel.font')}
-							uiType="font"
-							style={DefaultFontStyle}
-							items={STYLES.font}
-							value={font}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
-					</TldrawUiToolbar>
-				</>
+				<TldrawUiToolbar label={msg('style-panel.font')}>
+					<TldrawUiButtonPicker
+						title={msg('style-panel.font')}
+						uiType="font"
+						style={DefaultFontStyle}
+						items={STYLES.font}
+						value={font}
+						onValueChange={handleValueChange}
+						theme={theme}
+						onHistoryMark={onHistoryMark}
+					/>
+				</TldrawUiToolbar>
 			)}
 
 			{textAlign === undefined ? null : (
-				<>
-					{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}
-					<TldrawUiToolbar label={msg('style-panel.align')} className="tlui-style-panel__row">
-						<TldrawUiButtonPicker
-							title={msg('style-panel.align')}
-							uiType="align"
-							style={DefaultTextAlignStyle}
-							items={STYLES.textAlign}
-							value={textAlign}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
-						<div className="tlui-style-panel__row__extra-button">
+				<TldrawUiToolbar label={msg('style-panel.align')} className="tlui-style-panel__row">
+					<TldrawUiButtonPicker
+						title={msg('style-panel.align')}
+						uiType="align"
+						style={DefaultTextAlignStyle}
+						items={STYLES.textAlign}
+						value={textAlign}
+						onValueChange={handleValueChange}
+						theme={theme}
+						onHistoryMark={onHistoryMark}
+					/>
+					<div className="tlui-style-panel__row__extra-button">
+						<TldrawUiToolbarButton
+							type="icon"
+							title={msg('style-panel.vertical-align')}
+							data-testid="vertical-align"
+							disabled
+						>
+							<TldrawUiButtonIcon icon="vertical-align-middle" />
+						</TldrawUiToolbarButton>
+					</div>
+				</TldrawUiToolbar>
+			)}
+
+			{labelAlign === undefined ? null : (
+				<TldrawUiToolbar label={msg('style-panel.label-align')} className="tlui-style-panel__row">
+					<TldrawUiButtonPicker
+						title={msg('style-panel.label-align')}
+						uiType="align"
+						style={DefaultHorizontalAlignStyle}
+						items={STYLES.horizontalAlign}
+						value={labelAlign}
+						onValueChange={handleValueChange}
+						theme={theme}
+						onHistoryMark={onHistoryMark}
+					/>
+					<div className="tlui-style-panel__row__extra-button">
+						{verticalLabelAlign === undefined ? (
 							<TldrawUiToolbarButton
 								type="icon"
 								title={msg('style-panel.vertical-align')}
@@ -287,52 +280,20 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 							>
 								<TldrawUiButtonIcon icon="vertical-align-middle" />
 							</TldrawUiToolbarButton>
-						</div>
-					</TldrawUiToolbar>
-				</>
-			)}
-
-			{labelAlign === undefined ? null : (
-				<>
-					{showUiLabels && (
-						<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>
-					)}
-					<TldrawUiToolbar label={msg('style-panel.label-align')} className="tlui-style-panel__row">
-						<TldrawUiButtonPicker
-							title={msg('style-panel.label-align')}
-							uiType="align"
-							style={DefaultHorizontalAlignStyle}
-							items={STYLES.horizontalAlign}
-							value={labelAlign}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
-						<div className="tlui-style-panel__row__extra-button">
-							{verticalLabelAlign === undefined ? (
-								<TldrawUiToolbarButton
-									type="icon"
-									title={msg('style-panel.vertical-align')}
-									data-testid="vertical-align"
-									disabled
-								>
-									<TldrawUiButtonIcon icon="vertical-align-middle" />
-								</TldrawUiToolbarButton>
-							) : (
-								<DropdownPicker
-									type="icon"
-									id="geo-vertical-alignment"
-									uiType="verticalAlign"
-									stylePanelType="vertical-align"
-									style={DefaultVerticalAlignStyle}
-									items={STYLES.verticalAlign}
-									value={verticalLabelAlign}
-									onValueChange={handleValueChange}
-								/>
-							)}
-						</div>
-					</TldrawUiToolbar>
-				</>
+						) : (
+							<DropdownPicker
+								type="icon"
+								id="geo-vertical-alignment"
+								uiType="verticalAlign"
+								stylePanelType="vertical-align"
+								style={DefaultVerticalAlignStyle}
+								items={STYLES.verticalAlign}
+								value={verticalLabelAlign}
+								onValueChange={handleValueChange}
+							/>
+						)}
+					</div>
+				</TldrawUiToolbar>
 			)}
 		</div>
 	)
@@ -449,7 +410,6 @@ export function OpacitySlider() {
 	const editor = useEditor()
 
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])
 	const trackEvent = useUiEvents()
@@ -483,18 +443,14 @@ export function OpacitySlider() {
 				)
 
 	return (
-		<>
-			{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}
-			<TldrawUiSlider
-				data-testid="style.opacity"
-				value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
-				label={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}
-				onValueChange={handleOpacityValueChange}
-				steps={tldrawSupportedOpacities.length - 1}
-				title={msg('style-panel.opacity')}
-				onHistoryMark={onHistoryMark}
-				ariaValueModifier={25}
-			/>
-		</>
+		<TldrawUiSlider
+			data-testid="style.opacity"
+			value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
+			label={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}
+			onValueChange={handleOpacityValueChange}
+			steps={tldrawSupportedOpacities.length - 1}
+			title={msg('style-panel.opacity')}
+			onHistoryMark={onHistoryMark}
+		/>
 	)
 }

package/src/lib/ui/components/Toolbar/DefaultImageToolbar.tsx

@@ -1,5 +1,5 @@
-import { Box, TLImageShape, useEditor, useValue } from '@tldraw/editor'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { Box, TLImageShape, track, useEditor, useValue } from '@tldraw/editor'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiContextualToolbar } from '../primitives/TldrawUiContextualToolbar'
 import { AltTextEditor } from './AltTextEditor'
@@ -11,7 +11,9 @@ export interface TLUiImageToolbarProps {
 }
 
 /** @public @react */
-export function DefaultImageToolbar({ children }: TLUiImageToolbarProps) {
+export const DefaultImageToolbar = track(function DefaultImageToolbar({
+	children,
+}: TLUiImageToolbarProps) {
 	const editor = useEditor()
 	const imageShapeId = useValue(
 		'imageShape',
@@ -22,11 +24,7 @@ export function DefaultImageToolbar({ children }: TLUiImageToolbarProps) {
 		},
 		[editor]
 	)
-	const showToolbar = useValue(
-		'showToolbar',
-		() => editor.isInAny('select.idle', 'select.pointing_shape', 'select.crop'),
-		[editor]
-	)
+	const showToolbar = editor.isInAny('select.idle', 'select.pointing_shape', 'select.crop')
 	const isLocked = useValue(
 		'locked',
 		() => (imageShapeId ? editor.getShape<TLImageShape>(imageShapeId)?.isLocked : false),
@@ -39,7 +37,7 @@ export function DefaultImageToolbar({ children }: TLUiImageToolbarProps) {
 			{children}
 		</ContextualToolbarInner>
 	)
-}
+})
 
 function ContextualToolbarInner({
 	children,
@@ -51,18 +49,8 @@ function ContextualToolbarInner({
 	const editor = useEditor()
 	const msg = useTranslation()
 
-	const isChangingCrop = useValue(
-		'editor path',
-		() =>
-			editor.isInAny(
-				'select.crop.cropping',
-				'select.crop.pointing_crop_handle',
-				'select.crop.translating_crop'
-			),
-		[editor]
-	)
-	const camera = useValue('camera', () => editor.getCamera(), [editor])
 	const isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])
+	const isCropping = useValue('editor path', () => editor.isIn('select.crop.cropping'), [editor])
 	const previousSelectionBounds = useRef<Box | undefined>()
 	const handleManipulatingEnd = useCallback(() => {
 		editor.setCroppingShape(null)
@@ -77,10 +65,6 @@ function ContextualToolbarInner({
 	)
 	const onEditAltTextClose = useCallback(() => setIsEditingAltText(false), [])
 
-	useEffect(() => {
-		previousSelectionBounds.current = undefined
-	}, [camera])
-
 	const getSelectionBounds = useCallback(() => {
 		if (isInCropTool && previousSelectionBounds.current) {
 			// If we're cropping we want to be able to keep the toolbar in the same position.
@@ -93,7 +77,7 @@ function ContextualToolbarInner({
 		return bounds
 	}, [editor, isInCropTool])
 
-	if (isChangingCrop) {
+	if (isCropping) {
 		previousSelectionBounds.current = undefined
 		return null
 	}

package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx

@@ -61,13 +61,13 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 		const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : ''
 
 		return `
-			#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {
+			#${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} {
 				display: none;
 			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
+			#${id}_more > *:nth-child(-n + ${overflowIndex}) {
 				display: none;
 			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex + 4}):not([data-radix-popper-content-wrapper]) {
+			#${id}_more > *:nth-child(-n + ${overflowIndex + 4}) {
 				margin-top: 0;
 			}
         `

package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -5,14 +5,11 @@ import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
-import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
 
-/** @public */
-export interface ToggleToolLockedButtonProps {
+interface ToggleToolLockedButtonProps {
 	activeToolId?: string
 }
 
-/** @public @react */
 export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()
@@ -26,18 +23,16 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 	if (!activeToolId || !tool.isLockable) return null
 
 	return (
-		<TldrawUiTooltip content={msg('action.toggle-tool-lock')}>
-			<TldrawUiButton
-				type="normal"
-				title={msg('action.toggle-tool-lock')}
-				data-testid="tool-lock"
-				className={classNames('tlui-toolbar__lock-button', {
-					'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
-				})}
-				onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
-			>
-				<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
-			</TldrawUiButton>
-		</TldrawUiTooltip>
+		<TldrawUiButton
+			type="normal"
+			title={msg('action.toggle-tool-lock')}
+			data-testid="tool-lock"
+			className={classNames('tlui-toolbar__lock-button', {
+				'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+			})}
+			onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
+		>
+			<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
+		</TldrawUiButton>
 	)
 }

package/src/lib/ui/components/menu-items.tsx

@@ -634,31 +634,6 @@ export function ToggleReduceMotionItem() {
 	)
 }
 
-/** @public @react */
-export function ToggleKeyboardShortcutsItem() {
-	const editor = useEditor()
-	const keyboardShortcuts = useValue(
-		'keyboardShortcuts',
-		() => editor.user.getAreKeyboardShortcutsEnabled(),
-		[editor]
-	)
-
-	return (
-		<TldrawUiMenuActionCheckboxItem
-			actionId="toggle-keyboard-shortcuts"
-			checked={keyboardShortcuts}
-		/>
-	)
-}
-
-/** @public @react */
-export function ToggleUiLabelsItem() {
-	const editor = useEditor()
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
-
-	return <TldrawUiMenuActionCheckboxItem actionId="toggle-ui-labels" checked={showUiLabels} />
-}
-
 /** @public @react */
 export function ToggleDebugModeItem() {
 	const editor = useEditor()

package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx

@@ -1,8 +1,8 @@
-import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
+import { TldrawUiIcon } from '../TldrawUiIcon'
 
 /** @public */
 export interface TLUiButtonIconProps {
-	icon: string | TLUiIconJsx
+	icon: string
 	small?: boolean
 	invertIcon?: boolean
 }

package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx

@@ -121,7 +121,6 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 			data-testid={`style.${uiType}`}
 			type="single"
 			className={classNames('tlui-buttons__grid')}
-			value={value.type === 'shared' ? value.value : undefined}
 		>
 			{items.map((item) => {
 				const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
@@ -133,7 +132,6 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 						data-testid={`style.${uiType}.${item.value}`}
 						aria-label={label}
 						value={item.value}
-						data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
 						data-isactive={value.type === 'shared' && value.value === item.value}
 						title={label}
 						className={classNames('tlui-button-grid__button')}

package/src/lib/ui/components/primitives/TldrawUiDialog.tsx

@@ -65,7 +65,7 @@ export interface TLUiDialogBodyProps {
 /** @public @react */
 export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {
 	return (
-		<div className={classNames('tlui-dialog__body', className)} style={style} tabIndex={0}>
+		<div className={classNames('tlui-dialog__body', className)} style={style}>
 			{children}
 		</div>
 	)

package/src/lib/ui/components/primitives/TldrawUiIcon.tsx

@@ -1,14 +1,11 @@
 import classNames from 'classnames'
-import { cloneElement, memo, ReactElement, useLayoutEffect, useRef } from 'react'
+import { memo, useLayoutEffect, useRef } from 'react'
 import { useAssetUrls } from '../../context/asset-urls'
 import { TLUiIconType } from '../../icon-types'
 
-/** @public */
-export type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>
-
 /** @public */
 export interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
-	icon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx
+	icon: TLUiIconType | Exclude<string, TLUiIconType>
 	label: string
 	small?: boolean
 	color?: string
@@ -27,41 +24,6 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 	className,
 	...props
 }: TLUiIconProps) {
-	if (typeof icon === 'string') {
-		return (
-			<TldrawUIIconInner
-				label={label}
-				small={small}
-				invertIcon={invertIcon}
-				icon={icon}
-				color={color}
-				className={className}
-				{...props}
-			/>
-		)
-	}
-
-	return cloneElement(icon, {
-		...props,
-		className: classNames({ 'tlui-icon__small': small }, className, icon.props.className),
-		'aria-label': label,
-		style: {
-			color,
-			transform: invertIcon ? 'scale(-1, 1)' : undefined,
-			...icon.props.style,
-		},
-	})
-})
-
-function TldrawUIIconInner({
-	label,
-	small,
-	invertIcon,
-	icon,
-	color,
-	className,
-	...props
-}: TLUiIconProps & { icon: TLUiIconType | Exclude<string, TLUiIconType> }) {
 	const assetUrls = useAssetUrls()
 	const asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']
 	const ref = useRef<HTMLDivElement>(null)
@@ -107,4 +69,4 @@ function TldrawUIIconInner({
 			}}
 		/>
 	)
-}
+})

package/src/lib/ui/components/primitives/TldrawUiSlider.tsx

@@ -13,7 +13,6 @@ export interface TLUiSliderProps {
 	onValueChange(value: number): void
 	onHistoryMark(id: string): void
 	'data-testid'?: string
-	ariaValueModifier?: number
 }
 
 /** @public @react */
@@ -27,7 +26,6 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 		label,
 		onValueChange,
 		['data-testid']: testId,
-		ariaValueModifier = 1,
 	}: TLUiSliderProps,
 	ref
 ) {
@@ -83,10 +81,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 				</_Slider.Track>
 				{value !== null && (
 					<_Slider.Thumb
-						aria-valuemin={(min ?? 0) * ariaValueModifier}
-						aria-valuenow={value * ariaValueModifier}
-						aria-valuemax={steps * ariaValueModifier}
-						aria-label={title + ' — ' + msg(label as TLUiTranslationKey)}
+						aria-label={msg('style-panel.opacity')}
 						className="tlui-slider__thumb"
 						dir="ltr"
 						ref={ref}