tldraw 3.16.0-next.f9f54ec051f3 → 3.16.0-next.fe14f1b4181f

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -123,7 +123,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="text-header"
 					label="tool.rich-text-header"
-					kbd="cmd+shift+[[1-6]]"
+					kbd="cmd+alt+[[1-6]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -157,7 +157,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-direction"
 					label="a11y.select-shape-direction"
-					kbd="cmd+↑→↓←"
+					kbd="cmd+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -165,7 +165,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-container"
 					label="a11y.enter-leave-container"
-					kbd="cmd+shift+↑→"
+					kbd="cmd+shift+[[↑→]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -173,7 +173,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-pan-camera"
 					label="a11y.pan-camera"
-					kbd="[[Space]]+↑→↓←"
+					kbd="[[Space]]+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -197,7 +197,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-move-shape"
 					label="a11y.move-shape"
-					kbd="↑→↓←"
+					kbd="[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -205,7 +205,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-move-shape-faster"
 					label="a11y.move-shape-faster"
-					kbd="shift+↑→↓←"
+					kbd="shift+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -1,4 +1,5 @@
 import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'
+import { AccessibilityMenu } from '../AccessibilityMenu'
 import { ColorSchemeMenu } from '../ColorSchemeMenu'
 import { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'
 import { LanguageMenu } from '../LanguageMenu'
@@ -19,10 +20,8 @@ import {
 	ToggleEdgeScrollingItem,
 	ToggleFocusModeItem,
 	ToggleGridItem,
-	ToggleKeyboardShortcutsItem,
 	ToggleLockMenuItem,
 	TogglePasteAtCursorItem,
-	ToggleReduceMotionItem,
 	ToggleSnapModeItem,
 	ToggleToolLockItem,
 	ToggleTransparentBgMenuItem,
@@ -161,8 +160,6 @@ export function PreferencesGroup() {
 					<ToggleWrapModeItem />
 					<ToggleFocusModeItem />
 					<ToggleEdgeScrollingItem />
-					<ToggleReduceMotionItem />
-					<ToggleKeyboardShortcutsItem />
 					<ToggleDynamicSizeModeItem />
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />
@@ -170,6 +167,9 @@ export function PreferencesGroup() {
 				<TldrawUiMenuGroup id="color-scheme">
 					<ColorSchemeMenu />
 				</TldrawUiMenuGroup>
+				<TldrawUiMenuGroup id="accessibility-menu">
+					<AccessibilityMenu />
+				</TldrawUiMenuGroup>
 			</TldrawUiMenuSubmenu>
 			<LanguageMenu />
 			<KeyboardShortcutsMenuItem />

package/src/lib/ui/components/Minimap/MinimapManager.ts

@@ -46,10 +46,10 @@ export class MinimapManager {
 		const style = getComputedStyle(this.editor.getContainer())
 
 		return {
-			shapeFill: getRgba(style.getPropertyValue('--color-text-3').trim()),
-			selectFill: getRgba(style.getPropertyValue('--color-selected').trim()),
-			viewportFill: getRgba(style.getPropertyValue('--color-muted-1').trim()),
-			background: getRgba(style.getPropertyValue('--color-low').trim()),
+			shapeFill: getRgba(style.getPropertyValue('--tl-color-text-3').trim()),
+			selectFill: getRgba(style.getPropertyValue('--tl-color-selected').trim()),
+			viewportFill: getRgba(style.getPropertyValue('--tl-color-muted-1').trim()),
+			background: getRgba(style.getPropertyValue('--tl-color-low').trim()),
 		}
 	}
 

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

@@ -1,6 +1,7 @@
 import {
 	DefaultColorStyle,
 	TLDefaultColorStyle,
+	getColorValue,
 	getDefaultColorTheme,
 	useEditor,
 	useValue,
@@ -16,18 +17,20 @@ import {
 	TldrawUiPopoverContent,
 	TldrawUiPopoverTrigger,
 } from './primitives/TldrawUiPopover'
+import { useTldrawUiOrientation } from './primitives/layout'
 
 /** @public @react */
 export function MobileStylePanel() {
 	const editor = useEditor()
 	const msg = useTranslation()
-
+	const { orientation } = useTldrawUiOrientation()
 	const relevantStyles = useRelevantStyles()
 	const color = relevantStyles?.get(DefaultColorStyle)
 	const theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })
-	const currentColor = (
-		color?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black
-	).solid
+	const currentColor =
+		color?.type === 'shared'
+			? getColorValue(theme, color.value as TLDefaultColorStyle, 'solid')
+			: getColorValue(theme, 'black', 'solid')
 
 	const disableStylePanel = useValue(
 		'disable style panel',
@@ -54,7 +57,7 @@ export function MobileStylePanel() {
 					type="tool"
 					data-testid="mobile-styles.button"
 					style={{
-						color: disableStylePanel ? 'var(--color-muted-1)' : currentColor,
+						color: disableStylePanel ? 'var(--tl-color-muted-1)' : currentColor,
 					}}
 					title={msg('style-panel.title')}
 					disabled={disableStylePanel}
@@ -64,7 +67,7 @@ export function MobileStylePanel() {
 					/>
 				</TldrawUiButton>
 			</TldrawUiPopoverTrigger>
-			<TldrawUiPopoverContent side="top" align="end">
+			<TldrawUiPopoverContent side={orientation === 'horizontal' ? 'top' : 'right'} align="end">
 				{StylePanel && <StylePanel isMobile />}
 			</TldrawUiPopoverContent>
 		</TldrawUiPopover>

package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx

@@ -33,7 +33,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 
 	return (
 		<div ref={ref} className="tlui-navigation-panel">
-			<TldrawUiToolbar className="tlui-buttons__horizontal" label={msg('navigation-zone.title')}>
+			<TldrawUiToolbar orientation="horizontal" label={msg('navigation-zone.title')}>
 				{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (
 					<ZoomMenu />
 				) : (

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -24,6 +24,7 @@ import {
 	TldrawUiPopoverContent,
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
+import { TldrawUiRow } from '../primitives/layout'
 import { PageItemInput } from './PageItemInput'
 import { PageItemSubmenu } from './PageItemSubmenu'
 import { onMovePage } from './edit-pages-shared'
@@ -329,7 +330,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 					<div className="tlui-page-menu__header">
 						<div className="tlui-page-menu__header__title">{msg('page-menu.title')}</div>
 						{!isReadonlyMode && (
-							<div className="tlui-buttons__horizontal">
+							<TldrawUiRow>
 								<TldrawUiButton
 									type="icon"
 									data-testid="page-menu.edit"
@@ -351,7 +352,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 								>
 									<TldrawUiButtonIcon icon="plus" />
 								</TldrawUiButton>
-							</div>
+							</TldrawUiRow>
 						)}
 					</div>
 					<div

package/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
+import { TldrawUiRow } from '../primitives/layout'
 
 export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {
 	const editor = useEditor()
@@ -29,8 +30,8 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 	if (!presence) return null
 
 	return (
-		<div
-			className="tlui-people-menu__item tlui-buttons__horizontal"
+		<TldrawUiRow
+			className="tlui-people-menu__item"
 			data-follow={youAreFollowingThem || theyAreFollowingYou}
 		>
 			<TldrawUiButton
@@ -61,6 +62,6 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 					icon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}
 				/>
 			</TldrawUiButton>
-		</div>
+		</TldrawUiRow>
 	)
 })

package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.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 { TldrawUiGrid } from '../primitives/layout'
 
 export const UserPresenceColorPicker = track(function UserPresenceColorPicker() {
 	const editor = useEditor()
@@ -100,7 +101,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 					side="left"
 					sideOffset={8}
 				>
-					<div className={'tlui-buttons__grid'}>
+					<TldrawUiGrid>
 						{USER_COLORS.map((item: string) => (
 							<TldrawUiButton
 								type="icon"
@@ -110,7 +111,6 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								aria-label={item}
 								isActive={value === item}
 								title={item}
-								className={'tlui-button-grid__button'}
 								style={{ color: item }}
 								onPointerEnter={handleButtonPointerEnter}
 								onPointerDown={handleButtonPointerDown}
@@ -120,7 +120,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								<TldrawUiButtonIcon icon="color" />
 							</TldrawUiButton>
 						))}
-					</div>
+					</TldrawUiGrid>
 				</_Popover.Content>
 			</_Popover.Portal>
 		</_Popover.Root>

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

@@ -1,4 +1,4 @@
-import { useEditor, usePassThroughWheelEvents } from '@tldraw/editor'
+import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
 import { useRelevantStyles } from '../../hooks/useRelevantStyles'
@@ -16,6 +16,7 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
@@ -50,6 +51,7 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 			ref={ref}
 			className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
 			data-ismobile={isMobile}
+			data-show-ui-labels={showUiLabels}
 			onPointerLeave={handlePointerOut}
 		>
 			{content}

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

@@ -35,6 +35,11 @@ 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>
@@ -115,6 +120,7 @@ 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()
 
@@ -129,70 +135,90 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 		<>
 			<div className="tlui-style-panel__section__common" data-testid="style.panel">
 				{color === undefined ? null : (
-					<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 : (
-						<TldrawUiToolbar label={msg('style-panel.fill')}>
+					<>
+						{showUiLabels && (
+							<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>
+						)}
+						<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.color')}>
 							<TldrawUiButtonPicker
-								title={msg('style-panel.fill')}
-								uiType="fill"
-								style={DefaultFillStyle}
-								items={STYLES.fill}
-								value={fill}
+								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 orientation="horizontal" 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 : (
-						<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>
+						<>
+							{showUiLabels && (
+								<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>
+							)}
+							<TldrawUiToolbar orientation="horizontal" 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 : (
-						<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>
+						<>
+							{showUiLabels && (
+								<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>
+							)}
+							<TldrawUiToolbar orientation="horizontal" 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>
 			)}
@@ -207,6 +233,8 @@ 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)
@@ -219,33 +247,37 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 	return (
 		<div className="tlui-style-panel__section">
 			{font === undefined ? null : (
-				<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>
+				<>
+					{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}
+					<TldrawUiToolbar orientation="horizontal" 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 : (
-				<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">
+				<>
+					{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
+						<TldrawUiButtonPicker
+							title={msg('style-panel.align')}
+							uiType="align"
+							style={DefaultTextAlignStyle}
+							items={STYLES.textAlign}
+							value={textAlign}
+							onValueChange={handleValueChange}
+							theme={theme}
+							onHistoryMark={onHistoryMark}
+						/>
 						<TldrawUiToolbarButton
 							type="icon"
 							title={msg('style-panel.vertical-align')}
@@ -254,23 +286,26 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 						>
 							<TldrawUiButtonIcon icon="vertical-align-middle" />
 						</TldrawUiToolbarButton>
-					</div>
-				</TldrawUiToolbar>
+					</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">
+				<>
+					{showUiLabels && (
+						<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>
+					)}
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
+						<TldrawUiButtonPicker
+							title={msg('style-panel.label-align')}
+							uiType="align"
+							style={DefaultHorizontalAlignStyle}
+							items={STYLES.horizontalAlign}
+							value={labelAlign}
+							onValueChange={handleValueChange}
+							theme={theme}
+							onHistoryMark={onHistoryMark}
+						/>
 						{verticalLabelAlign === undefined ? (
 							<TldrawUiToolbarButton
 								type="icon"
@@ -292,8 +327,8 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 								onValueChange={handleValueChange}
 							/>
 						)}
-					</div>
-				</TldrawUiToolbar>
+					</TldrawUiToolbar>
+				</>
 			)}
 		</div>
 	)
@@ -309,7 +344,7 @@ export function GeoStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.geo')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.geo')}>
 			<DropdownPicker
 				id="geo"
 				type="menu"
@@ -335,7 +370,7 @@ export function SplineStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.spline')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.spline')}>
 			<DropdownPicker
 				id="spline"
 				type="menu"
@@ -361,7 +396,7 @@ export function ArrowStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.arrow-kind')}>
 			<DropdownPicker
 				id="arrow-kind"
 				type="menu"
@@ -410,6 +445,7 @@ 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()
@@ -443,15 +479,18 @@ export function OpacitySlider() {
 				)
 
 	return (
-		<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}
-		/>
+		<>
+			{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}
+			/>
+		</>
 	)
 }

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

@@ -68,7 +68,7 @@ function DoubleDropdownPickerInner<T extends string>({
 			<div title={msg(label)} className="tlui-style-panel__double-select-picker-label">
 				{msg(label)}
 			</div>
-			<TldrawUiToolbar label={msg(label)} className="tlui-buttons__horizontal">
+			<TldrawUiToolbar orientation="horizontal" label={msg(label)}>
 				<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>
 					<TldrawUiPopoverTrigger>
 						<TldrawUiToolbarButton
@@ -86,7 +86,7 @@ function DoubleDropdownPickerInner<T extends string>({
 						</TldrawUiToolbarButton>
 					</TldrawUiPopoverTrigger>
 					<TldrawUiPopoverContent side="left" align="center" sideOffset={80} alignOffset={0}>
-						<TldrawUiToolbar label={msg(labelA)} className="tlui-buttons__grid">
+						<TldrawUiToolbar orientation="grid" label={msg(labelA)}>
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsA.map((item) => {
 									return (
@@ -126,7 +126,7 @@ function DoubleDropdownPickerInner<T extends string>({
 						</TldrawUiToolbarButton>
 					</TldrawUiPopoverTrigger>
 					<TldrawUiPopoverContent side="left" align="center" sideOffset={116} alignOffset={0}>
-						<TldrawUiToolbar label={msg(labelB)} className="tlui-buttons__grid">
+						<TldrawUiToolbar orientation="grid" label={msg(labelB)}>
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsB.map((item) => {
 									return (