tldraw 3.16.0-canary.c1bcdabc9513 → 3.16.0-canary.c7d3f7d5729d

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

@@ -22,7 +22,6 @@ import {
 import { useActions } from '../../context/actions'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'
 import {
@@ -32,6 +31,7 @@ import {
 	TldrawUiDropdownMenuTrigger,
 } from '../primitives/TldrawUiDropdownMenu'
 import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface DefaultImageToolbarContentProps {
@@ -226,9 +226,13 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 				/>
 				<TldrawUiDropdownMenuRoot id="image-toolbar-aspect-ratio">
 					<TldrawUiDropdownMenuTrigger>
-						<TldrawUiButton title={msg('tool.aspect-ratio')} type="icon">
+						<TldrawUiToolbarButton
+							title={msg('tool.aspect-ratio')}
+							type="icon"
+							data-testid="tool.image-aspect-ratio"
+						>
 							<TldrawUiButtonIcon icon="corners" />
-						</TldrawUiButton>
+						</TldrawUiToolbarButton>
 					</TldrawUiDropdownMenuTrigger>
 					<TldrawUiDropdownMenuContent side="top" align="center">
 						{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {
@@ -268,14 +272,15 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 						})}
 					</TldrawUiDropdownMenuContent>
 				</TldrawUiDropdownMenuRoot>
-				<TldrawUiButton
+				<TldrawUiToolbarButton
 					type="icon"
 					onClick={onManipulatingEnd}
-					data-testid="tool.image-confirm"
+					data-testid="tool.image-crop-confirm"
 					style={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}
+					title={msg('tool.image-crop-confirm')}
 				>
 					<TldrawUiButtonIcon small icon="check" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			</>
 		)
 	}
@@ -283,33 +288,45 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 	return (
 		<>
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.replace-media')} onClick={handleImageReplace}>
+				<TldrawUiToolbarButton
+					type="icon"
+					data-testid="tool.image-replace"
+					onClick={handleImageReplace}
+					title={msg('tool.replace-media')}
+				>
 					<TldrawUiButtonIcon small icon="tool-media" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.image-crop')} onClick={onManipulatingStart}>
+				<TldrawUiToolbarButton
+					type="icon"
+					title={msg('tool.image-crop')}
+					onClick={onManipulatingStart}
+					data-testid="tool.image-crop"
+				>
 					<TldrawUiButtonIcon small icon="crop" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
-			<TldrawUiButton
+			<TldrawUiToolbarButton
 				type="icon"
 				title={msg('action.download-original')}
 				onClick={handleImageDownload}
+				data-testid="tool.image-download"
 			>
 				<TldrawUiButtonIcon small icon="download" />
-			</TldrawUiButton>
+			</TldrawUiToolbarButton>
 			{(altText || !isReadonly) && (
-				<TldrawUiButton
-					type="normal"
+				<TldrawUiToolbarButton
+					type="icon"
 					title={msg('tool.media-alt-text')}
+					data-testid="tool.image-alt-text"
 					onClick={() => {
 						trackEvent('alt-text-start', { source })
 						onEditAltTextStart()
 					}}
 				>
 					<TldrawUiButtonIcon small icon="alt" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 		</>
 	)

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

@@ -5,6 +5,7 @@ import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface DefaultVideoToolbarContentProps {
@@ -44,7 +45,12 @@ export const DefaultVideoToolbarContent = track(function DefaultVideoToolbarCont
 	return (
 		<>
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.replace-media')} onClick={handleVideoReplace}>
+				<TldrawUiButton
+					type="icon"
+					title={msg('tool.replace-media')}
+					onClick={handleVideoReplace}
+					data-testid="tool.video-replace"
+				>
 					<TldrawUiButtonIcon small icon="tool-media" />
 				</TldrawUiButton>
 			)}
@@ -52,21 +58,23 @@ export const DefaultVideoToolbarContent = track(function DefaultVideoToolbarCont
 				type="icon"
 				title={msg('action.download-original')}
 				onClick={handleVideoDownload}
+				data-testid="tool.video-download"
 			>
 				<TldrawUiButtonIcon small icon="download" />
 			</TldrawUiButton>
 			{(altText || !isReadonly) && (
-				<TldrawUiButton
-					type="normal"
+				<TldrawUiToolbarButton
+					type="icon"
 					isActive={!!altText}
 					title={msg('tool.media-alt-text')}
+					data-testid="tool.video-alt-text"
 					onClick={() => {
 						trackEvent('alt-text-start', { source })
 						onEditAltTextStart()
 					}}
 				>
 					<TldrawUiButtonIcon small icon="alt" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 		</>
 	)

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

@@ -2,9 +2,9 @@ import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
 import { useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface LinkEditorProps {
@@ -76,7 +76,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onCancel={handleLinkCancel}
 				placeholder="example.com"
 			/>
-			<TldrawUiButton
+			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-visit"
 				title={msg('tool.rich-text-link-visit')}
 				type="icon"
@@ -85,8 +85,8 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				disabled={!value}
 			>
 				<TldrawUiButtonIcon small icon="external-link" />
-			</TldrawUiButton>
-			<TldrawUiButton
+			</TldrawUiToolbarButton>
+			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-remove"
 				title={msg('tool.rich-text-link-remove')}
 				data-testid="rich-text.link-remove"
@@ -95,7 +95,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onClick={handleRemoveLink}
 			>
 				<TldrawUiButtonIcon small icon="trash" />
-			</TldrawUiButton>
+			</TldrawUiToolbarButton>
 		</>
 	)
 }

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

@@ -172,7 +172,12 @@ export const TldrawUiContextualToolbar = ({
 			className={classNames('tlui-contextual-toolbar', className)}
 			onPointerDown={stopEventPropagation}
 		>
-			<TldrawUiToolbar orientation="horizontal" className="tlui-menu" label={label}>
+			<TldrawUiToolbar
+				orientation="horizontal"
+				className="tlui-menu"
+				label={label}
+				tooltipSide="top"
+			>
 				{children}
 			</TldrawUiToolbar>
 		</div>

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

@@ -1,7 +1,9 @@
+import { tltime } from '@tldraw/editor'
 import { Slider as _Slider } from 'radix-ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiSliderProps {
@@ -32,6 +34,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	ref
 ) {
 	const msg = useTranslation()
+	const [titleAndLabel, setTitleAndLabel] = useState('')
 
 	// XXX: Radix starts out our slider with a tabIndex of 0
 	// This causes some tab focusing issues, most prevelant in MobileStylePanel,
@@ -49,9 +52,25 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	)
 
 	const handlePointerDown = useCallback(() => {
+		tooltipManager.hideAllTooltips()
 		onHistoryMark('click slider')
 	}, [onHistoryMark])
 
+	// N.B. This is a bit silly. The Radix slider auto-focuses which
+	// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,
+	// which in turn makes the tooltip display prematurely.
+	// This makes it wait until we've focused to show the tooltip.
+	useEffect(() => {
+		const timeout = tltime.setTimeout(
+			'set title and label',
+			() => {
+				setTitleAndLabel(title + ' — ' + msg(label as TLUiTranslationKey))
+			},
+			0
+		)
+		return () => clearTimeout(timeout)
+	}, [label, msg, title])
+
 	// N.B. Annoying. For a11y purposes, we need Tab to work.
 	// For some reason, Radix has some custom behavior here
 	// that interferes with tabbing past the slider and then
@@ -64,36 +83,37 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 
 	return (
 		<div className="tlui-slider__container">
-			<_Slider.Root
-				data-testid={testId}
-				className="tlui-slider"
-				dir="ltr"
-				min={min ?? 0}
-				max={steps}
-				step={1}
-				value={value !== null ? [value] : undefined}
-				onPointerDown={handlePointerDown}
-				onValueChange={handleValueChange}
-				onKeyDownCapture={handleKeyEvent}
-				onKeyUpCapture={handleKeyEvent}
-				title={title + ' — ' + msg(label as TLUiTranslationKey)}
-			>
-				<_Slider.Track className="tlui-slider__track" dir="ltr">
-					{value !== null && <_Slider.Range className="tlui-slider__range" dir="ltr" />}
-				</_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)}
-						className="tlui-slider__thumb"
-						dir="ltr"
-						ref={ref}
-						tabIndex={tabIndex}
-					/>
-				)}
-			</_Slider.Root>
+			<TldrawUiTooltip content={titleAndLabel}>
+				<_Slider.Root
+					data-testid={testId}
+					className="tlui-slider"
+					dir="ltr"
+					min={min ?? 0}
+					max={steps}
+					step={1}
+					value={value !== null ? [value] : undefined}
+					onPointerDown={handlePointerDown}
+					onValueChange={handleValueChange}
+					onKeyDownCapture={handleKeyEvent}
+					onKeyUpCapture={handleKeyEvent}
+				>
+					<_Slider.Track className="tlui-slider__track" dir="ltr">
+						{value !== null && <_Slider.Range className="tlui-slider__range" dir="ltr" />}
+					</_Slider.Track>
+					{value !== null && (
+						<_Slider.Thumb
+							aria-valuemin={(min ?? 0) * ariaValueModifier}
+							aria-valuenow={value * ariaValueModifier}
+							aria-valuemax={steps * ariaValueModifier}
+							aria-label={titleAndLabel}
+							className="tlui-slider__thumb"
+							dir="ltr"
+							ref={ref}
+							tabIndex={tabIndex}
+						/>
+					)}
+				</_Slider.Root>
+			</TldrawUiTooltip>
 		</div>
 	)
 })

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

@@ -34,7 +34,7 @@ class TooltipManager {
 		sideOffset: number
 		showOnMobile: boolean
 		targetElement: HTMLElement
-		delayDuration: number | undefined
+		delayDuration: number
 	} | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
 
@@ -52,7 +52,7 @@ class TooltipManager {
 		side: 'top' | 'right' | 'bottom' | 'left',
 		sideOffset: number,
 		showOnMobile: boolean,
-		delayDuration: number | undefined
+		delayDuration: number
 	) {
 		// Clear any existing destroy timeout
 		if (this.destroyTimeoutId) {
@@ -139,11 +139,9 @@ export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderPro
 
 // The singleton tooltip component that renders once
 function TooltipSingleton() {
-	const editor = useMaybeEditor()
 	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<HTMLDivElement>(null)
 	const isFirstShowRef = useRef(true)
-	const showTimeoutRef = useRef<number | null>(null)
 
 	const currentTooltip = useValue(
 		'current tooltip',
@@ -153,12 +151,7 @@ function TooltipSingleton() {
 
 	// Update open state and trigger position
 	useEffect(() => {
-		// Clear any existing show timeout
-		if (showTimeoutRef.current) {
-			clearTimeout(showTimeoutRef.current)
-			showTimeoutRef.current = null
-		}
-
+		let timer: ReturnType<typeof setTimeout> | null = null
 		if (currentTooltip && triggerRef.current) {
 			// Position the invisible trigger element over the active element
 			const activeRect = currentTooltip.targetElement.getBoundingClientRect()
@@ -173,11 +166,12 @@ function TooltipSingleton() {
 			trigger.style.zIndex = '9999'
 
 			// Handle delay for first show
-			if (isFirstShowRef.current && editor) {
-				showTimeoutRef.current = editor.timers.setTimeout(() => {
+			if (isFirstShowRef.current) {
+				// eslint-disable-next-line no-restricted-globals
+				timer = setTimeout(() => {
 					setIsOpen(true)
 					isFirstShowRef.current = false
-				}, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs)
+				}, currentTooltip.delayDuration)
 			} else {
 				// Subsequent tooltips show immediately
 				setIsOpen(true)
@@ -188,7 +182,13 @@ function TooltipSingleton() {
 			// Reset first show state after tooltip is hidden
 			isFirstShowRef.current = true
 		}
-	}, [editor, currentTooltip])
+
+		return () => {
+			if (timer !== null) {
+				clearTimeout(timer)
+			}
+		}
+	}, [currentTooltip])
 
 	if (!currentTooltip) {
 		return null
@@ -235,6 +235,8 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const orientationCtx = useTldrawUiOrientation()
 		const sideToUse = side ?? orientationCtx.tooltipSide
 
+		const camera = useValue('camera', () => editor?.getCamera(), [])
+
 		useEffect(() => {
 			const currentTooltipId = tooltipId.current
 			return () => {
@@ -244,20 +246,22 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			}
 		}, [editor, hasProvider])
 
+		useEffect(() => {
+			tooltipManager.hideTooltip(editor, tooltipId.current, true)
+		}, [editor, camera])
+
 		// Don't show tooltip if disabled, no content, or UI labels are disabled
 		if (disabled || !content) {
 			return <>{children}</>
 		}
 
+		const delayDurationToUse =
+			delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+
 		// Fallback to old behavior if no provider
 		if (!hasProvider) {
 			return (
-				<_Tooltip.Root
-					delayDuration={
-						delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
-					}
-					disableHoverableContent
-				>
+				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>
@@ -288,7 +292,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				sideToUse,
 				sideOffset,
 				showOnMobile,
-				delayDuration
+				delayDurationToUse
 			)
 		}
 
@@ -306,7 +310,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				sideToUse,
 				sideOffset,
 				showOnMobile,
-				delayDuration
+				delayDurationToUse
 			)
 		}
 

package/src/lib/ui/context/actions.tsx

@@ -36,6 +36,7 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 import { TLUiIconType } from '../icon-types'
 import { TLUiOverrideHelpers, useDefaultHelpers } from '../overrides'
 import { useA11y } from './a11y'
+import { useTldrawUiComponents } from './components'
 import { TLUiEventSource, useUiEvents } from './events'
 
 /** @public */
@@ -98,6 +99,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 	const _editor = useMaybeEditor()
 	const showCollaborationUi = useShowCollaborationUi()
 	const helpers = useDefaultHelpers()
+	const components = useTldrawUiComponents()
 	const trackEvent = useUiEvents()
 	const a11y = useA11y()
 	const msg = useTranslation()
@@ -176,7 +178,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				kbd: 'cmd+alt+/,ctrl+alt+/',
 				onSelect(source) {
 					trackEvent('open-kbd-shortcuts', { source })
-					helpers.addDialog({ component: DefaultKeyboardShortcutsDialog })
+					helpers.addDialog({
+						component: components.KeyboardShortcutsDialog ?? DefaultKeyboardShortcutsDialog,
+					})
 				},
 			},
 			{
@@ -1755,7 +1759,17 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 		}
 
 		return actions
-	}, [helpers, _editor, trackEvent, overrides, defaultDocumentName, showCollaborationUi, msg, a11y])
+	}, [
+		helpers,
+		_editor,
+		trackEvent,
+		overrides,
+		defaultDocumentName,
+		showCollaborationUi,
+		msg,
+		a11y,
+		components,
+	])
 
 	return <ActionsContext.Provider value={asActions(actions)}>{children}</ActionsContext.Provider>
 }

package/src/lib/ui/context/components.tsx

@@ -12,6 +12,7 @@ import {
 import { CursorChatBubble } from '../components/CursorChatBubble'
 import { DefaultDebugMenu } from '../components/DebugMenu/DefaultDebugMenu'
 import { DefaultDebugPanel } from '../components/DefaultDebugPanel'
+import { DefaultFollowingIndicator } from '../components/DefaultFollowingIndicator'
 import { DefaultMenuPanel } from '../components/DefaultMenuPanel'
 import { DefaultDialogs } from '../components/Dialogs'
 import { TLUiHelpMenuProps } from '../components/HelpMenu/DefaultHelpMenu'
@@ -72,6 +73,7 @@ export interface TLUiComponents {
 	Dialogs?: ComponentType | null
 	Toasts?: ComponentType | null
 	A11y?: ComponentType | null
+	FollowingIndicator?: ComponentType | null
 }
 
 const TldrawUiComponentsContext = createContext<TLUiComponents | null>(null)
@@ -119,6 +121,7 @@ export function TldrawUiComponentsProvider({
 					Dialogs: DefaultDialogs,
 					Toasts: DefaultToasts,
 					A11y: DefaultA11yAnnouncer,
+					FollowingIndicator: DefaultFollowingIndicator,
 					..._overrides,
 				}),
 				[_overrides, showCollaborationUi]

package/src/lib/ui/context/events.tsx

@@ -123,7 +123,7 @@ export interface TLUiEventMap {
 	'shrink-shapes': null
 	'flatten-to-image': null
 	'a11y-repeat-shape-announce': null
-	'open-url': { url: string }
+	'open-url': { destinationUrl: string }
 	'open-context-menu': null
 	'adjust-shape-styles': null
 	'copy-link': null

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -186,6 +186,7 @@ export type TLUiTranslationKey =
 	| 'geo-style.pentagon'
 	| 'geo-style.rectangle'
 	| 'geo-style.rhombus'
+	| 'geo-style.rhombus-2'
 	| 'geo-style.star'
 	| 'geo-style.trapezoid'
 	| 'geo-style.triangle'
@@ -260,6 +261,7 @@ export type TLUiTranslationKey =
 	| 'tool.aspect-ratio.wide'
 	| 'tool.image-toolbar-title'
 	| 'tool.image-crop'
+	| 'tool.image-crop-confirm'
 	| 'tool.media-alt-text'
 	| 'tool.media-alt-text-desc'
 	| 'tool.media-alt-text-confirm'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -187,6 +187,7 @@ export const DEFAULT_TRANSLATION = {
 	'geo-style.pentagon': 'Pentagon',
 	'geo-style.rectangle': 'Rectangle',
 	'geo-style.rhombus': 'Rhombus',
+	'geo-style.rhombus-2': 'Rhombus left',
 	'geo-style.star': 'Star',
 	'geo-style.trapezoid': 'Trapezoid',
 	'geo-style.triangle': 'Triangle',
@@ -261,6 +262,7 @@ export const DEFAULT_TRANSLATION = {
 	'tool.aspect-ratio.wide': 'Wide (16:9)',
 	'tool.image-toolbar-title': 'Image tools',
 	'tool.image-crop': 'Crop image',
+	'tool.image-crop-confirm': 'Confirm',
 	'tool.media-alt-text': 'Alternative text',
 	'tool.media-alt-text-desc': 'Give a description…',
 	'tool.media-alt-text-confirm': 'Confirm',

package/src/lib/ui/kbd-utils.ts

@@ -31,9 +31,16 @@ export function kbd(str: string) {
 			)
 			.flat()
 			.map((sub, index) => {
-				if (sub === '__CTRL__') return 'Ctrl'
-				if (sub === '__ALT__') return 'Alt'
-				const modifiedKey = sub[0].toUpperCase() + sub.slice(1)
+				if (sub[0] === '+') return []
+
+				let modifiedKey
+				if (sub === '__CTRL__') {
+					modifiedKey = 'Ctrl'
+				} else if (sub === '__ALT__') {
+					modifiedKey = 'Alt'
+				} else {
+					modifiedKey = sub[0].toUpperCase() + sub.slice(1)
+				}
 				return tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]
 			})
 			.flat()

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.16.0-canary.c1bcdabc9513'
+export const version = '3.16.0-canary.c7d3f7d5729d'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-17T08:02:22.032Z',
-	patch: '2025-08-17T08:02:22.032Z',
+	minor: '2025-08-28T15:31:21.677Z',
+	patch: '2025-08-28T15:31:21.677Z',
 }

package/src/lib/ui.css

@@ -1047,6 +1047,9 @@
 }
 
 @media (hover: hover) {
+	.tlui-style-panel .tlui-button[aria-expanded='true'] {
+		background: none;
+	}
 	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
 		opacity: 1;
 		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);