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

package/out/ui/packages/sparkline/sparklineLayout.luau

@@ -1,12 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
---* Line segments for a number series. Empty and single-point series draw nothing. 
-local function sparklineLayout(values, width, height, pad)
-	if pad == nil then
-		pad = 4
-	end
+local function sparklinePoints(values, width, height, pad)
 	local count = #values
 	if count < 2 or width <= pad * 2 or height <= pad * 2 then
-		return {}
+		return nil
 	end
 	local min = values[1]
 	local max = values[1]
@@ -42,7 +38,22 @@ local function sparklineLayout(values, width, height, pad)
 			table.insert(points, _arg0)
 		end
 	end
+	return {
+		points = points,
+		baseline = pad + innerH,
+	}
+end
+--* Line segments for a number series. Empty and single-point series draw nothing. 
+local function sparklineLayout(values, width, height, pad)
+	if pad == nil then
+		pad = 4
+	end
+	local laid = sparklinePoints(values, width, height, pad)
+	if laid == nil then
+		return {}
+	end
 	local segments = {}
+	local count = #laid.points
 	do
 		local index = 0
 		local _shouldIncrement = false
@@ -55,8 +66,8 @@ local function sparklineLayout(values, width, height, pad)
 			if not (index < count - 1) then
 				break
 			end
-			local start = points[index + 1]
-			local finish = points[index + 2]
+			local start = laid.points[index + 1]
+			local finish = laid.points[index + 2]
 			local dx = finish.x - start.x
 			local dy = finish.y - start.y
 			local _arg0 = {
@@ -70,6 +81,119 @@ local function sparklineLayout(values, width, height, pad)
 	end
 	return segments
 end
+--* Vertical slices under the line. Missing when the series cannot draw. 
+local function sparklineArea(values, width, height, pad)
+	if pad == nil then
+		pad = 4
+	end
+	local laid = sparklinePoints(values, width, height, pad)
+	if laid == nil then
+		return {}
+	end
+	local bars = {}
+	local count = #laid.points
+	do
+		local index = 0
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				index += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (index < count - 1) then
+				break
+			end
+			local start = laid.points[index + 1]
+			local finish = laid.points[index + 2]
+			local span = finish.x - start.x
+			local slices = math.max(1, math.floor(span / 4))
+			local sliceW = span / slices
+			do
+				local slice = 0
+				local _shouldIncrement_1 = false
+				while true do
+					if _shouldIncrement_1 then
+						slice += 1
+					else
+						_shouldIncrement_1 = true
+					end
+					if not (slice < slices) then
+						break
+					end
+					local y = start.y + (finish.y - start.y) * (slice / slices)
+					local top = math.min(y, laid.baseline)
+					local _arg0 = {
+						x = start.x + slice * sliceW,
+						y = top,
+						width = sliceW,
+						height = math.max(0, laid.baseline - top),
+					}
+					table.insert(bars, _arg0)
+				end
+			end
+		end
+	end
+	return bars
+end
+--* Nearest sample from a local x. Undefined when the trace cannot be hit. 
+local function sparklineIndex(localX, count, width, pad)
+	if pad == nil then
+		pad = 4
+	end
+	if count < 1 or width <= pad * 2 then
+		return nil
+	end
+	local span = width - pad * 2
+	local along = (localX - pad) / span
+	if along < 0 then
+		along = 0
+	end
+	if along > 1 then
+		along = 1
+	end
+	if count == 1 then
+		return 0
+	end
+	local index = math.floor(along * (count - 1) + 0.5)
+	if index < 0 then
+		return 0
+	end
+	if index > count - 1 then
+		return count - 1
+	end
+	return index
+end
+--* Calls onPick with the nearest sample. Does nothing when the callback is absent. 
+local function sparklinePick(localX, count, width, onPick, pad)
+	if pad == nil then
+		pad = 4
+	end
+	if onPick == nil then
+		return nil
+	end
+	local index = sparklineIndex(localX, count, width, pad)
+	if index == nil then
+		return nil
+	end
+	onPick(index)
+	return index
+end
+--* Point for a sample, used to mark the trace. 
+local function sparklinePoint(values, index, width, height, pad)
+	if pad == nil then
+		pad = 4
+	end
+	local laid = sparklinePoints(values, width, height, pad)
+	if laid == nil or index < 0 or index >= #laid.points then
+		return nil
+	end
+	return laid.points[index + 1]
+end
 return {
 	sparklineLayout = sparklineLayout,
+	sparklineArea = sparklineArea,
+	sparklineIndex = sparklineIndex,
+	sparklinePick = sparklinePick,
+	sparklinePoint = sparklinePoint,
 }

package/out/ui/packages/speedDial/components/SpeedDial.d.ts

@@ -3,6 +3,7 @@ import { Icons } from "../../../enums/index";
 import { SpeedDialDirection } from "./SpeedDial.styles";
 export interface SpeedDialAction {
     icon: Icons;
+    label?: string;
     disabled?: boolean;
     onClick?: () => void;
 }

package/out/ui/packages/speedDial/components/SpeedDial.luau

@@ -5,6 +5,9 @@ local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Ico
 local Fab = TS.import(script, script.Parent.Parent.Parent, "fab").Fab
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useSpeedDialStyles = TS.import(script, script.Parent, "SpeedDial.styles").default
+local _speedDialLabel = TS.import(script, script.Parent, "speedDialLabel")
+local speedDialLabel = _speedDialLabel.speedDialLabel
+local speedDialLabelFirst = _speedDialLabel.speedDialLabelFirst
 local function SpeedDial(props)
 	local _binding = props
 	local open = _binding.open
@@ -27,9 +30,24 @@ local function SpeedDial(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	-- ▼ ReadonlyArray.some ▼
+	local _result = false
+	local _callback = function(action)
+		return speedDialLabel(action.label) ~= nil
+	end
+	for _k, _v in actions do
+		if _callback(_v, _k - 1, actions) then
+			_result = true
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.some ▲
+	local labeled = _result
 	local styles = useSpeedDialStyles({
 		direction = direction,
+		labeled = labeled,
 	})
+	local labelFirst = speedDialLabelFirst(direction)
 	local mainFirst = direction == "down" or direction == "right"
 	local mainOrder = if mainFirst then 0 else 1000
 	local actionBase = if mainFirst then 1 else 0
@@ -55,26 +73,58 @@ local function SpeedDial(props)
 	if _condition_1 then
 		-- ▼ ReadonlyArray.map ▼
 		local _newValue = table.create(#actions)
-		local _callback = function(action, index)
-			return React.createElement(Fab, {
-				key = `Action-{index}`,
+		local _callback_1 = function(action, index)
+			local name = speedDialLabel(action.label)
+			local order = actionBase + index
+			local button = (React.createElement(Fab, {
+				key = if name == nil then `Action-{index}` else "Action",
 				icon = action.icon,
 				size = "small",
 				disabled = disabled == true or action.disabled == true,
 				onClick = function()
-					local _result = action.onClick
-					if _result ~= nil then
-						_result()
+					local _result_1 = action.onClick
+					if _result_1 ~= nil then
+						_result_1()
 					end
 					onOpenChange(false)
 				end,
 				className = {
-					LayoutOrder = actionBase + index,
+					LayoutOrder = if name == nil then order elseif labelFirst then 2 else 1,
 				},
-			})
+			}))
+			if name == nil then
+				return button
+			end
+			local _attributes_2 = {
+				key = `Action-{index}`,
+			}
+			for _k, _v in styles.action do
+				_attributes_2[_k] = _v
+			end
+			_attributes_2.LayoutOrder = order
+			local _attributes_3 = table.clone(styles.actionRow)
+			setmetatable(_attributes_3, nil)
+			local _exp_1 = React.createElement("uilistlayout", _attributes_3)
+			local _attributes_4 = {
+				key = "Label",
+			}
+			for _k, _v in styles.actionLabel do
+				_attributes_4[_k] = _v
+			end
+			_attributes_4.Text = name
+			_attributes_4.LayoutOrder = if labelFirst then 1 else 2
+			local _attributes_5 = table.clone(styles.actionPad)
+			setmetatable(_attributes_5, nil)
+			local _exp_2 = React.createElement("uipadding", _attributes_5)
+			local _attributes_6 = table.clone(styles.actionCorner)
+			setmetatable(_attributes_6, nil)
+			local _exp_3 = React.createElement("uicorner", _attributes_6)
+			local _attributes_7 = table.clone(styles.actionCap)
+			setmetatable(_attributes_7, nil)
+			return React.createElement("frame", _attributes_2, _exp_1, React.createElement("textlabel", _attributes_4, _exp_2, _exp_3, React.createElement("uisizeconstraint", _attributes_7)), button)
 		end
 		for _k, _v in actions do
-			_newValue[_k] = _callback(_v, _k - 1, actions)
+			_newValue[_k] = _callback_1(_v, _k - 1, actions)
 		end
 		-- ▲ ReadonlyArray.map ▲
 		_condition_1 = (React.createElement(React.Fragment, nil, _newValue))

package/out/ui/packages/speedDial/components/SpeedDial.styles.d.ts

@@ -1,5 +1,6 @@
 export type SpeedDialDirection = "up" | "down" | "left" | "right";
 declare const useSpeedDialStyles: (props: {
     direction?: SpeedDialDirection;
+    labeled?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useSpeedDialStyles;

package/out/ui/packages/speedDial/components/SpeedDial.styles.luau

@@ -8,8 +8,12 @@ local useSpeedDialStyles = componentStyles("SpeedDial", function(theme, _param)
 	if direction == nil then
 		direction = "up"
 	end
+	local labeled = _param.labeled
+	if labeled == nil then
+		labeled = false
+	end
 	local vertical = direction == "up" or direction == "down"
-	return createStyles({
+	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
@@ -18,12 +22,55 @@ local useSpeedDialStyles = componentStyles("SpeedDial", function(theme, _param)
 		},
 		list = {
 			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
-			HorizontalAlignment = if direction == "left" then Enum.HorizontalAlignment.Right elseif direction == "right" then Enum.HorizontalAlignment.Left else Enum.HorizontalAlignment.Center,
+			HorizontalAlignment = if vertical and labeled then Enum.HorizontalAlignment.Right elseif direction == "left" then Enum.HorizontalAlignment.Right elseif direction == "right" then Enum.HorizontalAlignment.Left else Enum.HorizontalAlignment.Center,
 			VerticalAlignment = if direction == "up" then Enum.VerticalAlignment.Bottom elseif direction == "down" then Enum.VerticalAlignment.Top else Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 			Padding = UDim.new(0, theme.padding.calc(1)),
 		},
-	})
+		action = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		actionRow = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+		},
+	}
+	local _left = "actionLabel"
+	local _object_1 = {
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(0, 0),
+		BackgroundColor3 = theme.palette.surface.paper,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+	}
+	local _left_1 = "TextSize"
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = theme.typography.fontSizes.body
+	end
+	_object_1[_left_1] = _condition
+	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextTruncate = Enum.TextTruncate.AtEnd
+	_object_1.TextWrapped = false
+	_object[_left] = _object_1
+	_object.actionCap = {
+		MaxSize = Vector2.new(theme.spacing.calc(16), math.huge),
+	}
+	_object.actionPad = {
+		PaddingLeft = UDim.new(0, theme.padding.calc(1)),
+		PaddingRight = UDim.new(0, theme.padding.calc(1)),
+		PaddingTop = UDim.new(0, theme.padding.calc(0.5)),
+		PaddingBottom = UDim.new(0, theme.padding.calc(0.5)),
+	}
+	_object.actionCorner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	return createStyles(_object)
 end)
 local default = useSpeedDialStyles
 return {

package/out/ui/packages/speedDial/components/speedDialLabel.d.ts

@@ -0,0 +1,4 @@
+/** An empty name stays off the action. */
+export declare function speedDialLabel(text?: string): string | undefined;
+/** The name sits beside the button, opposite the way the dial travels. */
+export declare function speedDialLabelFirst(direction: "up" | "down" | "left" | "right"): direction is "down" | "up" | "right";

package/out/ui/packages/speedDial/components/speedDialLabel.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+--* An empty name stays off the action. 
+local function speedDialLabel(text)
+	if text == nil or text == "" then
+		return nil
+	end
+	return text
+end
+--* The name sits beside the button, opposite the way the dial travels. 
+local function speedDialLabelFirst(direction)
+	return direction ~= "left"
+end
+return {
+	speedDialLabel = speedDialLabel,
+	speedDialLabelFirst = speedDialLabelFirst,
+}

package/out/ui/packages/splitPane/components/splitLook.d.ts

@@ -1,5 +1,5 @@
 export type SplitPointer = "rest" | "hover" | "press";
 export declare function splitPointer(hovering: boolean, pressed: boolean): SplitPointer;
-export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.7 | 0.55 | 0.35;
+export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.35 | 0.7 | 0.55;
 export declare function splitMarkTransparency(pointer: SplitPointer, disabled?: boolean): 0 | 0.55 | 0.1;
 export declare function splitHitTransparency(pointer: SplitPointer, disabled?: boolean): 1 | 0.9 | 0.94;

package/out/ui/packages/stateMatrix.d.ts

@@ -28,5 +28,6 @@ export interface StateCapture {
     density?: StateDensity;
     row?: boolean;
     marks?: boolean;
+    multiline?: boolean;
 }
 export declare const stateMatrix: StateCapture[];

package/out/ui/packages/stateMatrix.luau

@@ -146,6 +146,11 @@ local function controlsRows()
 		text = LONG,
 		width = NARROW,
 	})
+	pushPair(out, "Input", "multiline", {
+		text = "First line\nSecond line",
+		width = NARROW,
+		multiline = true,
+	})
 	pushPair(out, "Input", "sx", {
 		variant = "sx",
 	})
@@ -282,6 +287,10 @@ local function editorsRows()
 		value = "0,0,0",
 		disabled = true,
 	})
+	pushPair(out, "CFrameEditor", "narrow", {
+		value = "0,0,0",
+		width = 320,
+	})
 	pushPair(out, "CFrameEditor", "sx", {
 		value = "0,0,0",
 	})

package/out/ui/packages/stepper/components/Stepper.d.ts

@@ -3,6 +3,8 @@ export interface StepperProps {
     steps: string[];
     activeStep: number;
     orientation?: "horizontal" | "vertical";
+    errorStep?: number;
+    onStep?: (index: number) => void;
 }
 declare function Stepper(props: CustomizedProps<Frame, StepperProps>): JSX.Element;
 export default Stepper;

package/out/ui/packages/stepper/components/Stepper.luau

@@ -2,7 +2,9 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
-local stepState = TS.import(script, script.Parent, "stepState").stepState
+local _stepState = TS.import(script, script.Parent, "stepState")
+local stepPress = _stepState.stepPress
+local stepState = _stepState.stepState
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useStepperStyles = TS.import(script, script.Parent, "Stepper.styles").default
 local function Stepper(props)
@@ -13,6 +15,8 @@ local function Stepper(props)
 	if orientation == nil then
 		orientation = "horizontal"
 	end
+	local errorStep = _binding.errorStep
+	local onStep = _binding.onStep
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -37,17 +41,41 @@ local function Stepper(props)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#steps)
-	local _callback = function(label, index)
-		local state = stepState(index, activeStep)
+	local _callback = function(title, index)
+		local state = stepState(index, activeStep, errorStep)
+		local caption = `{index + 1}. {title}`
+		local look = cx(styles.step, state == "active" and styles.active, state == "complete" and styles.complete, state == "error" and styles.error)
+		local press = if onStep ~= nil then stepPress(index, activeStep) else nil
+		if onStep == nil then
+			local _attributes_2 = {
+				key = `{title}-{index}`,
+			}
+			for _k, _v in look do
+				_attributes_2[_k] = _v
+			end
+			_attributes_2.Text = caption
+			_attributes_2.LayoutOrder = index
+			return React.createElement("textlabel", _attributes_2)
+		end
 		local _attributes_2 = {
-			key = `{label}-{index}`,
+			key = `{title}-{index}`,
 		}
-		for _k, _v in cx(styles.step, state == "active" and styles.active, state == "complete" and styles.complete) do
+		for _k, _v in look do
 			_attributes_2[_k] = _v
 		end
-		_attributes_2.Text = `{index + 1}. {label}`
+		_attributes_2.Text = caption
 		_attributes_2.LayoutOrder = index
-		return React.createElement("textlabel", _attributes_2)
+		_attributes_2.AutoButtonColor = false
+		_attributes_2.Active = press ~= nil
+		_attributes_2.Selectable = press ~= nil
+		_attributes_2.Event = {
+			Activated = function()
+				if press ~= nil then
+					onStep(press)
+				end
+			end,
+		}
+		return React.createElement("textbutton", _attributes_2)
 	end
 	for _k, _v in steps do
 		_newValue[_k] = _callback(_v, _k - 1, steps)

package/out/ui/packages/stepper/components/Stepper.styles.luau

@@ -8,10 +8,11 @@ local useStepperStyles = componentStyles("Stepper", function(theme, _param)
 	if orientation == nil then
 		orientation = "horizontal"
 	end
+	local heading = theme.typography.variants.h6
 	return createStyles({
 		root = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = if orientation == "vertical" then Enum.AutomaticSize.Y else Enum.AutomaticSize.XY,
+			Size = if orientation == "vertical" then UDim2.new(1, 0, 0, 0) else UDim2.fromScale(0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -21,12 +22,14 @@ local useStepperStyles = componentStyles("Stepper", function(theme, _param)
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		step = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = if orientation == "vertical" then Enum.AutomaticSize.Y else Enum.AutomaticSize.XY,
+			Size = if orientation == "vertical" then UDim2.new(1, 0, 0, 0) else UDim2.fromScale(0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
+			TextWrapped = true,
 			TextColor3 = theme.palette.text.secondary,
 		},
 		active = {
@@ -35,6 +38,9 @@ local useStepperStyles = componentStyles("Stepper", function(theme, _param)
 		complete = {
 			TextColor3 = theme.palette.text.primary,
 		},
+		error = {
+			TextColor3 = theme.palette.status.error.main,
+		},
 	})
 end)
 local default = useStepperStyles

package/out/ui/packages/stepper/components/stepState.d.ts

@@ -1,2 +1,4 @@
-export type StepState = "complete" | "active" | "pending";
-export declare function stepState(index: number, activeStep: number): StepState;
+export type StepState = "complete" | "active" | "pending" | "error";
+export declare function stepState(index: number, activeStep: number, errorStep?: number): StepState;
+/** Completed and current steps can be pressed. A later step cannot. */
+export declare function stepPress(index: number, activeStep: number): number | undefined;

package/out/ui/packages/stepper/components/stepState.luau

@@ -1,5 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
-local function stepState(index, activeStep)
+local function stepState(index, activeStep, errorStep)
+	if errorStep ~= nil and index == errorStep then
+		return "error"
+	end
 	if index < activeStep then
 		return "complete"
 	end
@@ -8,6 +11,14 @@ local function stepState(index, activeStep)
 	end
 	return "pending"
 end
+--* Completed and current steps can be pressed. A later step cannot. 
+local function stepPress(index, activeStep)
+	if index < 0 or index > activeStep then
+		return nil
+	end
+	return index
+end
 return {
 	stepState = stepState,
+	stepPress = stepPress,
 }

package/out/ui/packages/stepper/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Stepper } from "./components/Stepper";
 export { StepperProps } from "./components/Stepper";
-export { stepState, StepState } from "./components/stepState";
+export { stepPress, stepState, StepState } from "./components/stepState";

package/out/ui/packages/stepper/init.luau

@@ -2,5 +2,7 @@
 local TS = _G[script]
 local exports = {}
 exports.Stepper = TS.import(script, script, "components", "Stepper").default
-exports.stepState = TS.import(script, script, "components", "stepState").stepState
+local _stepState = TS.import(script, script, "components", "stepState")
+exports.stepPress = _stepState.stepPress
+exports.stepState = _stepState.stepState
 return exports

package/out/ui/packages/switch/components/Switch.luau

@@ -7,6 +7,7 @@ local useRef = _react.useRef
 local useState = _react.useState
 local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlFade = _theme.controlFade
 local controlMetrics = _theme.controlMetrics
 local cx = _theme.cx
 local useTheme = _theme.useTheme
@@ -100,7 +101,6 @@ local function Switch(props)
 	}
 	_attributes.Active = active
 	_attributes.Selectable = not disabled
-	_attributes.BackgroundTransparency = if focused and active then 0.85 else 1
 	_attributes.Event = {
 		MouseButton1Click = function()
 			if active then
@@ -163,7 +163,7 @@ local function Switch(props)
 		local _attributes_7 = table.clone(labelStyle)
 		setmetatable(_attributes_7, nil)
 		_attributes_7.Text = label
-		_attributes_7.TextTransparency = if disabled == true then 0.5 else 0
+		_attributes_7.TextTransparency = if disabled == true then controlFade else 0
 		_attributes_7.LayoutOrder = 2
 		_condition_1 = (React.createElement("textlabel", _attributes_7))
 	end

package/out/ui/packages/switch/components/Switch.styles.luau

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local focusRing = _theme.focusRing
 local useSwitchStyles = componentStyles("Switch", function(theme, _param)
 	local size = _param.size
 	local color = _param.color
@@ -54,11 +55,7 @@ local useSwitchStyles = componentStyles("Switch", function(theme, _param)
 		corner = {
 			CornerRadius = UDim.new(theme.shape.pillScale, 0),
 		},
-		stroke = {
-			Color = theme.palette.focus,
-			Thickness = 2,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
+		stroke = focusRing(theme.palette.focus),
 	})
 end)
 local default = useSwitchStyles

package/out/ui/packages/switch/components/switchLook.d.ts

@@ -1,8 +1,8 @@
 export type SwitchPointer = "rest" | "hover" | "press" | "focus";
 export declare function switchPointer(hovering: boolean, pressed: boolean, focused: boolean): SwitchPointer;
-export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.55 | 0.35 | 0.15 | 0.65 | 0.08;
-export declare function switchThumbTransparency(disabled: boolean): 0 | 0.35;
-export declare function switchStrokeTransparency(disabled: boolean, pointer: SwitchPointer): 1 | 0 | 0.35;
+export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.5 | 0.25 | 0.35 | 0.15 | 0.08;
+export declare function switchThumbTransparency(disabled: boolean): 0 | 0.5;
+export declare function switchStrokeTransparency(disabled: boolean, pointer: SwitchPointer): 1 | 0;
 export declare function switchThumbPlacement(on: boolean, inset: number): {
     scaleX: number;
     offsetX: number;