@rbxts/uiblox 0.2.0-alpha.37 → 0.2.0-alpha.38

package/out/ui/packages/colorPicker/components/ColorPicker.styles.luau

@@ -3,8 +3,11 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorText = _editorFace.editorText
 local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -15,7 +18,7 @@ local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.75)),
+			Padding = UDim.new(0, editorPad(theme)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		row = {
@@ -25,7 +28,7 @@ local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
 		},
 		rowLayout = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, editorPad(theme)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
@@ -86,72 +89,76 @@ local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
 			BorderSizePixel = 0,
 		},
 		channel = {
-			Size = UDim2.new(1 / 3, -theme.padding.calc(0.5), 0, theme.spacing.calc(3)),
+			Size = UDim2.new(1 / 3, -editorPad(theme), 0, theme.spacing.calc(3)),
 			BackgroundTransparency = 1,
 		},
-		label = {
-			Size = UDim2.new(0, theme.spacing.calc(1.5), 1, 0),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.button,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		channelField = {
-			Size = UDim2.new(1, -theme.spacing.calc(1.5), 1, 0),
-			BackgroundTransparency = 1,
-		},
-		field = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-		},
-		swatchButton = {
-			Size = UDim2.fromOffset(theme.spacing.calc(3), theme.spacing.calc(3)),
-			BorderSizePixel = 0,
-			AutoButtonColor = false,
-			Text = "",
-		},
-		value = {
-			Size = UDim2.new(1, -theme.spacing.calc(4), 1, 0),
-			BackgroundTransparency = 1,
-		},
-		shell = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.elevated,
-			BorderSizePixel = 0,
-		},
-		shellPad = {
-			PaddingTop = UDim.new(0, theme.padding.calc(1)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(1)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1)),
-		},
-		shellStroke = {
-			Color = theme.palette.divider,
-			Thickness = 1,
-		},
-		recent = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-		},
-		recentChip = {
-			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
-			BorderSizePixel = 0,
-			AutoButtonColor = false,
-			Text = "",
-		},
-		link = {
-			Size = UDim2.new(0, 0, 0, theme.spacing.calc(2)),
-			AutomaticSize = Enum.AutomaticSize.X,
-			BackgroundTransparency = 1,
-			AutoButtonColor = false,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.button,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(0, theme.spacing.calc(1.5), 1, 0),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.channelField = {
+		Size = UDim2.new(1, -theme.spacing.calc(1.5), 1, 0),
+		BackgroundTransparency = 1,
+	}
+	_object.field = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_object.swatchButton = {
+		Size = UDim2.fromOffset(theme.spacing.calc(3), theme.spacing.calc(3)),
+		BorderSizePixel = 0,
+		AutoButtonColor = false,
+		Text = "",
+	}
+	_object.value = {
+		Size = UDim2.new(1, -theme.spacing.calc(4), 1, 0),
+		BackgroundTransparency = 1,
+	}
+	_object.shell = {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundColor3 = theme.palette.surface.elevated,
+		BorderSizePixel = 0,
+	}
+	_object.shellPad = {
+		PaddingTop = UDim.new(0, editorPad(theme)),
+		PaddingBottom = UDim.new(0, editorPad(theme)),
+		PaddingLeft = UDim.new(0, editorPad(theme)),
+		PaddingRight = UDim.new(0, editorPad(theme)),
+	}
+	_object.shellStroke = {
+		Color = theme.palette.divider,
+		Thickness = 1,
+	}
+	_object.recent = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+		BackgroundTransparency = 1,
+	}
+	_object.recentChip = {
+		Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+		BorderSizePixel = 0,
+		AutoButtonColor = false,
+		Text = "",
+	}
+	local _left_1 = "link"
+	local _object_2 = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+		BackgroundTransparency = 1,
+		AutoButtonColor = false,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_2[_k] = _v
+	end
+	_object[_left_1] = _object_2
+	return createStyles(_object)
 end)
 local default = useColorPickerStyles
 return {

package/out/ui/packages/colorPicker/components/ColorSequenceEditor.luau

@@ -4,6 +4,7 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useRef = _react.useRef
 local useState = _react.useState
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local ColorPicker = TS.import(script, script.Parent, "ColorPicker").default
@@ -27,6 +28,7 @@ local function ColorSequenceEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useColorPickerStyles()
+	local hover = useEditorHover(disabled)
 	local active = canActivate(disabled)
 	local stops = readColorStops(value)
 	local selected, setSelected = useState(0)
@@ -55,12 +57,18 @@ local function ColorSequenceEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	_attributes.Selectable = false
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
@@ -140,9 +148,9 @@ local function ColorSequenceEditor(props)
 		_attributes_5.BackgroundColor3 = stop.color
 		_attributes_5.Position = UDim2.fromScale(stop.t, 0.5)
 		_attributes_5.ZIndex = if stopIndex == index then 2 else 1
-		return React.createElement("frame", _attributes_5, React.createElement("uicorner", {
-			CornerRadius = UDim.new(0, 2),
-		}), React.createElement("uistroke", {
+		local _attributes_6 = table.clone(styles.corner)
+		setmetatable(_attributes_6, nil)
+		return React.createElement("frame", _attributes_5, React.createElement("uicorner", _attributes_6), React.createElement("uistroke", {
 			Thickness = if stopIndex == index then 2 else 1,
 			Color = Color3.new(1, 1, 1),
 		}))

package/out/ui/packages/colorPicker/components/NumberSequenceEditor.luau

@@ -4,6 +4,7 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useRef = _react.useRef
 local useState = _react.useState
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
@@ -27,6 +28,7 @@ local function NumberSequenceEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useColorPickerStyles()
+	local hover = useEditorHover(disabled)
 	local active = canActivate(disabled)
 	local stops = readNumberStops(value)
 	local selected, setSelected = useState(0)
@@ -56,12 +58,18 @@ local function NumberSequenceEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	_attributes.Selectable = false
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
@@ -142,9 +150,9 @@ local function NumberSequenceEditor(props)
 		_attributes_5.BackgroundColor3 = Color3.new(0.85, 0.85, 0.85)
 		_attributes_5.Position = UDim2.fromScale(stop.t, 0.5)
 		_attributes_5.ZIndex = if stopIndex == index then 2 else 1
-		return React.createElement("frame", _attributes_5, React.createElement("uicorner", {
-			CornerRadius = UDim.new(0, 2),
-		}), React.createElement("uistroke", {
+		local _attributes_6 = table.clone(styles.corner)
+		setmetatable(_attributes_6, nil)
+		return React.createElement("frame", _attributes_5, React.createElement("uicorner", _attributes_6), React.createElement("uistroke", {
 			Thickness = if stopIndex == index then 2 else 1,
 			Color = Color3.new(1, 1, 1),
 		}))

package/out/ui/packages/dateRange/components/DateRangePicker.luau

@@ -1,7 +1,10 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
+local fieldChrome = TS.import(script, script.Parent.Parent.Parent, "input", "components", "fieldChrome").fieldChrome
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local _dateRangeValue = TS.import(script, script.Parent.Parent, "dateRangeValue")
 local dateStamp = _dateRangeValue.dateStamp
@@ -48,6 +51,9 @@ local function DateRangePicker(props)
 	local week = if weekMode then weekStamps(anchorStamp) else {}
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
+	local chrome = fieldChrome(controlMetrics(theme.density).height, theme.padding.calc(1))
+	local pad = chrome.padX
+	local row = chrome.height
 	local lead = weekday(year, month, 1)
 	local count = daysInMonth(year, month)
 	local cells = {}
@@ -140,24 +146,24 @@ local function DateRangePicker(props)
 	_attributes.className = className
 	_attributes.sx = sx
 	local _exp = React.createElement("uipadding", {
-		PaddingTop = UDim.new(0, 8),
-		PaddingBottom = UDim.new(0, 8),
-		PaddingLeft = UDim.new(0, 8),
-		PaddingRight = UDim.new(0, 8),
+		PaddingTop = UDim.new(0, pad),
+		PaddingBottom = UDim.new(0, pad),
+		PaddingLeft = UDim.new(0, pad),
+		PaddingRight = UDim.new(0, pad),
 	})
 	local _exp_1 = React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Vertical,
-		Padding = UDim.new(0, 8),
+		Padding = UDim.new(0, pad),
 		SortOrder = Enum.SortOrder.LayoutOrder,
 	})
 	local _exp_2 = React.createElement("frame", {
-		Size = UDim2.new(1, 0, 0, 28),
+		Size = UDim2.new(1, 0, 0, row),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		LayoutOrder = 0,
 	}, React.createElement("textbutton", {
 		Text = if weekMode then "Earlier" else "Prev",
-		Size = UDim2.fromOffset(if weekMode then 72 else 56, 28),
+		Size = UDim2.fromOffset(if weekMode then 72 else 56, row),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		TextColor3 = theme.palette.text.secondary,
@@ -172,9 +178,11 @@ local function DateRangePicker(props)
 		Text = title,
 		AnchorPoint = Vector2.new(0.5, 0),
 		Position = UDim2.fromScale(0.5, 0),
-		Size = UDim2.fromOffset(if weekMode then 200 else 140, 28),
+		Size = UDim2.new(1, -(if weekMode then 72 else 56) * 2, 1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
+		TextTruncate = Enum.TextTruncate.AtEnd,
+		TextWrapped = false,
 		TextColor3 = theme.palette.text.primary,
 		Font = theme.typography.fontFamilies.semibold,
 		TextSize = theme.typography.fontSizes.body,
@@ -182,7 +190,7 @@ local function DateRangePicker(props)
 		Text = if weekMode then "Later" else "Next",
 		AnchorPoint = Vector2.new(1, 0),
 		Position = UDim2.fromScale(1, 0),
-		Size = UDim2.fromOffset(if weekMode then 72 else 56, 28),
+		Size = UDim2.fromOffset(if weekMode then 72 else 56, row),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		TextColor3 = theme.palette.text.secondary,
@@ -196,9 +204,11 @@ local function DateRangePicker(props)
 	}))
 	local _exp_3 = React.createElement("textlabel", {
 		Text = if value.start == nil then "Choose a start and finish" elseif value.finish == nil then formatStamp(value.start) else `{formatStamp(value.start)} – {formatStamp(value.finish)}`,
-		Size = UDim2.new(1, 0, 0, 16),
+		Size = UDim2.new(1, 0, 0, row),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
+		TextTruncate = Enum.TextTruncate.AtEnd,
+		TextWrapped = false,
 		TextXAlignment = Enum.TextXAlignment.Left,
 		TextColor3 = theme.palette.text.secondary,
 		Font = theme.typography.fontFamilies.default,
@@ -209,7 +219,8 @@ local function DateRangePicker(props)
 	if weekMode then
 		local _exp_4 = React.createElement("uilistlayout", {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, 4),
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			Padding = UDim.new(0, pad),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		})
 		-- ▼ ReadonlyArray.map ▼
@@ -226,7 +237,7 @@ local function DateRangePicker(props)
 			end
 			_attributes_1.Text = `{_condition_2}\n{stamp % 100}`
 			_attributes_1.LayoutOrder = index
-			_attributes_1.Size = UDim2.new(1 / 7, -4, 1, 0)
+			_attributes_1.Size = UDim2.new(1 / 7, -math.ceil((pad * 6) / 7), 1, 0)
 			_attributes_1.BackgroundColor3 = if chosen then theme.palette.primary.main else theme.palette.surface.input
 			_attributes_1.BackgroundTransparency = if chosen and not endpoint then 0.55 else 0
 			_attributes_1.BorderSizePixel = 0
@@ -241,7 +252,7 @@ local function DateRangePicker(props)
 				end,
 			}
 			return React.createElement("textbutton", _attributes_1, React.createElement("uicorner", {
-				CornerRadius = UDim.new(0, 4),
+				CornerRadius = UDim.new(0, theme.shape.borderRadius),
 			}))
 		end
 		for _k, _v in week do
@@ -249,16 +260,17 @@ local function DateRangePicker(props)
 		end
 		-- ▲ ReadonlyArray.map ▲
 		_result_1 = (React.createElement("frame", {
-			Size = UDim2.new(1, 0, 0, 56),
+			Size = UDim2.new(1, 0, 0, row * 2),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			LayoutOrder = 2,
 		}, _exp_4, _newValue))
 	else
 		local _exp_4 = React.createElement("uigridlayout", {
-			CellSize = UDim2.fromOffset(36, 28),
-			CellPadding = UDim2.fromOffset(4, 4),
+			CellSize = UDim2.new(1 / 7, -math.ceil((pad * 6) / 7), 0, row),
+			CellPadding = UDim2.fromOffset(pad, pad),
 			FillDirectionMaxCells = 7,
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		})
 		-- ▼ ReadonlyArray.map ▼
@@ -310,7 +322,7 @@ local function DateRangePicker(props)
 					end,
 				},
 			}, React.createElement("uicorner", {
-				CornerRadius = UDim.new(0, 4),
+				CornerRadius = UDim.new(0, theme.shape.borderRadius),
 			}))
 		end
 		for _k, _v in cells do
@@ -318,7 +330,7 @@ local function DateRangePicker(props)
 		end
 		-- ▲ ReadonlyArray.map ▲
 		_result_1 = (React.createElement("frame", {
-			Size = UDim2.new(1, 0, 0, 248),
+			Size = UDim2.new(1, 0, 0, row * 7 + pad * 6),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			LayoutOrder = 2,

package/out/ui/packages/dialog/components/Dialog.styles.luau

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local useDialogStyles = componentStyles("Dialog", function(theme)
+	local heading = theme.typography.variants.h6
 	return createStyles({
 		column = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -22,8 +23,9 @@ local useDialogStyles = componentStyles("Dialog", function(theme)
 			Size = UDim2.new(1, 0, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.h6,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
 			TextColor3 = theme.palette.text.primary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextWrapped = true,

package/out/ui/packages/divider/components/Divider.luau

@@ -94,7 +94,9 @@ local function Divider(props)
 		_attributes_2.AutomaticSize = if fit > 0 then Enum.AutomaticSize.None else Enum.AutomaticSize.X
 		local _attributes_3 = table.clone(captionPad)
 		setmetatable(_attributes_3, nil)
-		return React.createElement(SxHost, _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3)))
+		return React.createElement(SxHost, _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3), if room > 0 then React.createElement("uisizeconstraint", {
+			MaxSize = Vector2.new(room, math.huge),
+		}) else nil))
 	end
 	local _attributes = {
 		tag = "frame",

package/out/ui/packages/divider/components/Divider.styles.luau

@@ -57,6 +57,7 @@ local useDividerStyles = componentStyles("Divider", function(theme, props)
 			TextSize = theme.typography.fontSizes.caption,
 			TextColor3 = theme.palette.text.secondary,
 			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextWrapped = false,
 			TextXAlignment = Enum.TextXAlignment.Center,
 			ZIndex = 2,
 		},

package/out/ui/packages/drawer/components/Drawer.d.ts

@@ -7,6 +7,7 @@ export interface DrawerProps {
     edge?: DrawerEdge;
     width?: number;
     height?: number;
+    title?: string;
     onClose: () => void;
     children?: React.ReactNode;
 }

package/out/ui/packages/drawer/components/Drawer.luau

@@ -6,14 +6,13 @@ local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
 local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local isDismissInput = TS.import(script, script.Parent.Parent.Parent, "modal", "components", "dismissInput").isDismissInput
 local _popup = TS.import(script, script.Parent.Parent.Parent, "popup")
 local Portal = _popup.Portal
 local portalTarget = _popup.portalTarget
-local _drawerPlacement = TS.import(script, script.Parent, "drawerPlacement")
-local drawerAnchor = _drawerPlacement.drawerAnchor
-local drawerBox = _drawerPlacement.drawerBox
+local drawerFit = TS.import(script, script.Parent, "drawerPlacement").drawerFit
 local useDrawerStyles = TS.import(script, script.Parent, "Drawer.styles").default
 local function Drawer(props)
 	local _binding = props
@@ -25,6 +24,7 @@ local function Drawer(props)
 	end
 	local width = _binding.width
 	local height = _binding.height
+	local title = _binding.title
 	local onClose = _binding.onClose
 	local children = _binding.children
 	local className = _binding.className
@@ -34,6 +34,8 @@ local function Drawer(props)
 	local styles = useDrawerStyles({
 		width = width,
 	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local close = useRef(onClose)
 	local anchor = useRef()
 	local layer, setLayer = useState(function()
@@ -56,18 +58,23 @@ local function Drawer(props)
 			return connection:Disconnect()
 		end
 	end, { open, layer })
-	local placement = drawerAnchor(edge)
 	local _result
 	if edge == "bottom" then
 		local _condition = height
 		if _condition == nil then
-			_condition = 0
+			_condition = theme.spacing.calc(20)
 		end
-		_result = drawerBox(edge, _condition)
+		_result = _condition
 	else
-		_result = nil
+		local _condition = width
+		if _condition == nil then
+			_condition = theme.spacing.calc(20)
+		end
+		_result = _condition
 	end
-	local sheet = _result
+	local span = _result
+	local room = if layer ~= nil then (if edge == "bottom" then layer.AbsoluteSize.Y else layer.AbsoluteSize.X) else 0
+	local box = drawerFit(edge, span, room)
 	local panelStyle = styles.panel
 	local _exp = React.createElement("frame", {
 		key = "DrawerAnchor",
@@ -108,15 +115,37 @@ local function Drawer(props)
 		_attributes_2.base = panelStyle
 		_attributes_2.className = className
 		_attributes_2.sx = sx
-		_attributes_2.AnchorPoint = Vector2.new(if sheet ~= nil then sheet.anchorX else placement, if sheet ~= nil then sheet.anchorY else 0)
-		_attributes_2.Position = UDim2.fromScale(if sheet ~= nil then sheet.posX else placement, if sheet ~= nil then sheet.posY else 0)
-		_attributes_2.Size = if sheet ~= nil then UDim2.new(sheet.sizeX, sheet.sizeXO, sheet.sizeY, sheet.sizeYO) else nil
+		_attributes_2.AnchorPoint = Vector2.new(box.anchorX, box.anchorY)
+		_attributes_2.Position = UDim2.fromScale(box.posX, box.posY)
+		_attributes_2.Size = UDim2.new(box.sizeX, box.sizeXO, box.sizeY, box.sizeYO)
 		_attributes_2.ZIndex = panelStyle.ZIndex
-		local _attributes_3 = table.clone(styles.padding)
-		setmetatable(_attributes_3, nil)
+		local _exp_2 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		})
+		local _result_1
+		if title ~= nil and #title > 0 then
+			local _attributes_3 = {
+				key = "Title",
+			}
+			for _k, _v in styles.title do
+				_attributes_3[_k] = _v
+			end
+			_attributes_3.Text = title
+			_result_1 = (React.createElement("textlabel", _attributes_3))
+		else
+			_result_1 = nil
+		end
 		_condition = (React.createElement(Portal, {
 			host = layer,
-		}, React.createElement("frame", _attributes, _exp_1, React.createElement(SxHost, _attributes_2, React.createElement("uipadding", _attributes_3), children))))
+		}, React.createElement("frame", _attributes, _exp_1, React.createElement(SxHost, _attributes_2, React.createElement("frame", {
+			key = "Pad",
+			Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4)),
+			Position = UDim2.new(0, theme.padding.calc(2), 0, theme.padding.calc(2)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, _exp_2, _result_1, children)))))
 	end
 	return React.createElement(React.Fragment, nil, _exp, _condition)
 end

package/out/ui/packages/drawer/components/Drawer.styles.luau

@@ -5,6 +5,7 @@ local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local useDrawerStyles = componentStyles("Drawer", function(theme, _param)
 	local width = _param.width
+	local heading = theme.typography.variants.h6
 	return createStyles({
 		root = {
 			Size = UDim2.fromScale(1, 1),
@@ -27,11 +28,18 @@ local useDrawerStyles = componentStyles("Drawer", function(theme, _param)
 			BorderSizePixel = 0,
 			ZIndex = 30001,
 		},
-		padding = {
-			PaddingTop = UDim.new(0, theme.padding.calc(2)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(2)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		title = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextWrapped = true,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
+			TextColor3 = theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			ZIndex = 30002,
 		},
 	})
 end)

package/out/ui/packages/drawer/components/drawerPlacement.d.ts

@@ -12,3 +12,5 @@ export interface DrawerBox {
 }
 /** Side drawers keep a column. A bottom sheet spans the width and sits on the lower edge. */
 export declare function drawerBox(edge: DrawerEdge, span: number): DrawerBox;
+/** Keep the panel on its edge and leave the scrim visible. */
+export declare function drawerFit(edge: DrawerEdge, span: number, limit: number): DrawerBox;

package/out/ui/packages/drawer/components/drawerPlacement.luau

@@ -29,7 +29,25 @@ local function drawerBox(edge, span)
 		sizeYO = 0,
 	}
 end
+--* Keep the panel on its edge and leave the scrim visible. 
+local function drawerFit(edge, span, limit)
+	local box = drawerBox(edge, span)
+	local room = if limit > 0 then limit else 0
+	if edge == "bottom" then
+		local size = if room > 0 and box.sizeYO > room then room else box.sizeYO
+		local _object = table.clone(box)
+		setmetatable(_object, nil)
+		_object.sizeYO = size
+		return _object
+	end
+	local size = if room > 0 and box.sizeXO > room then room else box.sizeXO
+	local _object = table.clone(box)
+	setmetatable(_object, nil)
+	_object.sizeXO = size
+	return _object
+end
 return {
 	drawerAnchor = drawerAnchor,
 	drawerBox = drawerBox,
+	drawerFit = drawerFit,
 }