@rbxts/uiblox 0.2.0-alpha.3 → 0.2.0-alpha.31

package/out/ui/packages/select/components/Select.luau

@@ -17,10 +17,12 @@ local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "co
 local spinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").spinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
-local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion").playProperty
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
-local VirtualList = TS.import(script, script.Parent.Parent.Parent, "virtualList").VirtualList
+local _virtualList = TS.import(script, script.Parent.Parent.Parent, "virtualList")
+local EmptyListHint = _virtualList.EmptyListHint
+local VirtualList = _virtualList.VirtualList
 local useSelectStyles = TS.import(script, script.Parent, "Select.styles").default
 local optionLabel = TS.import(script, script.Parent, "optionLabel").optionLabel
 local _selectFilter = TS.import(script, script.Parent, "selectFilter")
@@ -31,7 +33,6 @@ local _selectGroups = TS.import(script, script.Parent, "selectGroups")
 local groupRows = _selectGroups.groupRows
 local rowForOption = _selectGroups.rowForOption
 local shouldHandleSelectKey = TS.import(script, script.Parent, "selectKey").shouldHandleSelectKey
-local menuHold = TS.import(script, script.Parent, "selectMotion").menuHold
 local _selectMulti = TS.import(script, script.Parent, "selectMulti")
 local includesChoice = _selectMulti.includesChoice
 local selectionLabel = _selectMulti.selectionLabel
@@ -53,6 +54,10 @@ local function Select(props)
 		placeholder = ""
 	end
 	local searchable = _binding.searchable
+	local defaultOpen = _binding.defaultOpen
+	local defaultQuery = _binding.defaultQuery
+	local emptyText = _binding.emptyText
+	local empty = _binding.empty
 	local reducedProp = _binding.reducedMotion
 	local size = _binding.size
 	local className = _binding.className
@@ -68,16 +73,18 @@ local function Select(props)
 	local row = controlMetrics(theme.density, size).height
 	local active = canActivate(disabled, loading)
 	local anchor, setAnchor = useState()
-	local open, setOpen = useState(false)
-	local held, setHeld = useState(false)
+	local open, setOpen = useState(defaultOpen == true and not loading)
 	local focused, setFocused = useState(false)
 	local highlight, setHighlight = useState(-1)
-	local query, setQuery = useState("")
+	local _condition = defaultQuery
+	if _condition == nil then
+		_condition = ""
+	end
+	local query, setQuery = useState(_condition)
 	local recent = useRef()
 	local typed = useRef()
 	local onKeyRef = useRef()
 	local listRef = useRef()
-	local menuRef = useRef()
 	-- ▼ ReadonlyArray.find ▼
 	local _callback = function(option)
 		return option.value == value
@@ -95,7 +102,20 @@ local function Select(props)
 	local search = usesSelectSearch(#options, searchable)
 	local filtered = filterChoices(options, query)
 	local rows = groupRows(filtered)
-	local menuHeight = math.min(#rows * row, theme.spacing.calc(16)) + (if search then row else 0)
+	local listHeight = if #rows == 0 then row else math.min(#rows * row, theme.spacing.calc(16))
+	local menuHeight = listHeight + (if search then row else 0)
+	local _condition_1 = empty
+	if _condition_1 == nil then
+		local _attributes = {}
+		local _condition_2 = emptyText
+		if _condition_2 == nil then
+			_condition_2 = (if #query > 0 or #options > 0 then "No results" else "No options")
+		end
+		_attributes.text = _condition_2
+		_attributes.height = row
+		_condition_1 = (React.createElement(EmptyListHint, _attributes))
+	end
+	local emptyHint = _condition_1
 	local close = function()
 		setOpen(false)
 		setQuery("")
@@ -125,15 +145,15 @@ local function Select(props)
 		if fromPointer == nil then
 			fromPointer = false
 		end
-		local _condition = fromPointer
-		if _condition then
+		local _condition_2 = fromPointer
+		if _condition_2 then
 			local _result_1 = listRef.current
 			if _result_1 ~= nil then
 				_result_1 = _result_1.suppressClick()
 			end
-			_condition = _result_1
+			_condition_2 = _result_1
 		end
-		if _condition then
+		if _condition_2 then
 			return nil
 		end
 		local choice = filtered[index + 1]
@@ -219,60 +239,28 @@ local function Select(props)
 			_result_1.ensureVisible(rowForOption(rows, highlight))
 		end
 	end, { shown, highlight })
-	useEffect(function()
-		if shown then
-			setHeld(true)
-		end
-	end, { shown })
 	useEffect(function()
 		if loading and open then
 			setOpen(false)
 			setQuery("")
 		end
 	end, { loading, open })
-	useEffect(function()
-		local menu = menuRef.current
-		if not menu or not held then
-			return nil
-		end
-		local stop = playProperty(menu, {
-			GroupTransparency = if shown then 0 else 1,
-		}, 0.12, reducedMotion)
-		local seconds = menuHold(shown, reducedMotion)
-		if seconds == 0 then
-			if not shown then
-				setHeld(false)
-			end
-			return stop
-		end
-		local wait = task.delay(seconds, function()
-			return setHeld(false)
-		end)
-		return function()
-			stop()
-			task.cancel(wait)
-		end
-	end, { shown, held, reducedMotion })
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Select"
-	end
-	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition_2 = id
+	if not (_condition_2 ~= 0 and _condition_2 == _condition_2 and _condition_2 ~= "" and _condition_2) then
+		_condition_2 = "Select"
 	end
+	_attributes.key = _condition_2
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+		loading = loading,
+	}
 	local _attributes_1 = {
 		key = "Trigger",
 		ref = setAnchor,
@@ -290,11 +278,11 @@ local function Select(props)
 		if _result_2 ~= nil then
 			_result_2 = _result_2.label
 		end
-		local _condition_1 = _result_2
-		if _condition_1 == nil then
-			_condition_1 = placeholder
+		local _condition_3 = _result_2
+		if _condition_3 == nil then
+			_condition_3 = placeholder
 		end
-		_result_1 = _condition_1
+		_result_1 = _condition_3
 	end
 	_attributes_1.Text = _result_1
 	_attributes_1.Active = active
@@ -337,8 +325,8 @@ local function Select(props)
 			Position = UDim2.new(1, -theme.padding.calc(1), 0.5, 0),
 		},
 	})))
-	local _condition_1 = (shown or held)
-	if _condition_1 then
+	local _condition_3 = shown
+	if _condition_3 then
 		local _attributes_5 = {
 			key = "Menu",
 		}
@@ -356,8 +344,8 @@ local function Select(props)
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		})
-		local _condition_2 = search
-		if _condition_2 then
+		local _condition_4 = search
+		if _condition_4 then
 			local _attributes_8 = {
 				key = "Search",
 			}
@@ -365,7 +353,7 @@ local function Select(props)
 				_attributes_8[_k] = _v
 			end
 			_attributes_8.LayoutOrder = 1
-			_condition_2 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
+			_condition_4 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
 				text = query,
 				placeholder = "Search",
 				width = UDim.new(1, 0),
@@ -375,19 +363,14 @@ local function Select(props)
 				end,
 			})))
 		end
-		_condition_1 = (React.createElement(Popup, {
+		_condition_3 = (React.createElement(Popup, {
 			anchor = anchor,
 			preferredHeight = menuHeight,
 			onDismiss = close,
 			onInput = function(input)
 				return onKey(input, true)
 			end,
-		}, React.createElement("canvasgroup", {
-			ref = menuRef,
-			Size = UDim2.fromScale(1, 1),
-			BackgroundTransparency = 1,
-			GroupTransparency = 1,
-		}, React.createElement("frame", _attributes_5, _exp_3, _exp_4, _exp_5, _exp_6, _condition_2, React.createElement("frame", {
+		}, React.createElement("frame", _attributes_5, _exp_3, _exp_4, _exp_5, _exp_6, _condition_4, React.createElement("frame", {
 			key = "ListHost",
 			Size = UDim2.new(1, 0, 1, if search then -row else 0),
 			BackgroundTransparency = 1,
@@ -400,6 +383,7 @@ local function Select(props)
 			end,
 			itemHeight = row,
 			listRef = listRef,
+			empty = emptyHint,
 			className = styles.list,
 			renderItem = function(row)
 				if row.kind == "header" then
@@ -445,9 +429,9 @@ local function Select(props)
 				setmetatable(_attributes_9, nil)
 				return React.createElement("textbutton", _attributes_8, React.createElement("uipadding", _attributes_9))
 			end,
-		}))))))
+		})))))
 	end
-	return React.createElement("frame", _attributes, _exp_2, _condition_1)
+	return React.createElement(SxHost, _attributes, _exp_2, _condition_3)
 end
 local default = Select
 return {

package/out/ui/packages/select/components/Select.styles.luau

@@ -44,7 +44,7 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 		},
 		list = {
 			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.elevated,
+			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ScrollBarThickness = theme.padding.default,
 			ScrollBarImageColor3 = theme.palette.text.secondary,

package/out/ui/packages/shadow/components/Shadow.d.ts

@@ -1,2 +1,3 @@
-declare function Shadow(): JSX.Element;
+import { CustomizedProps } from "../../../../theme/index";
+declare function Shadow(props: CustomizedProps<Frame>): JSX.Element;
 export default Shadow;

package/out/ui/packages/shadow/components/Shadow.luau

@@ -4,49 +4,63 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useShadowStyles = TS.import(script, script.Parent, "Shadow.styles").default
-local function Shadow()
+local function Shadow(props)
 	local _binding = useShadowStyles()
 	local container = _binding.container
+	local blob = _binding.blob
 	local parent, setParent = useState(nil)
 	local cornerRadius, setCornerRadius = useState()
+	local blobSize, setBlobSize = useState(UDim2.fromOffset(0, 0))
+	local _binding_1 = props
+	local className = _binding_1.className
+	local sx = _binding_1.sx
+	local id = _binding_1.id
+	local ref = _binding_1.ref
 	local _condition = container.ZIndex
 	if _condition == nil then
 		_condition = 0
 	end
 	local defaultZIndex = _condition
 	local zIndex, setZIndex = useState(defaultZIndex)
-	-- Set any inherited properties
 	useEffect(function()
 		if not parent then
 			return nil
 		end
-		local _cornerRadius = parent
+		local _cornerRadius = parent:FindFirstChildOfClass("UICorner")
 		if _cornerRadius ~= nil then
-			_cornerRadius = _cornerRadius:FindFirstChildOfClass("UICorner")
-			if _cornerRadius ~= nil then
-				_cornerRadius = _cornerRadius.CornerRadius
-			end
+			_cornerRadius = _cornerRadius.CornerRadius
 		end
 		local cornerRadius = _cornerRadius
 		setCornerRadius(cornerRadius)
-		local _result = parent
-		if _result ~= nil then
-			_result = _result.ZIndex
-		end
-		local _condition_1 = _result
+		local _condition_1 = parent.ZIndex
 		if _condition_1 == nil then
 			_condition_1 = defaultZIndex
 		end
 		setZIndex(_condition_1 - 1)
 		parent.ClipsDescendants = false
+		local sync = function()
+			setBlobSize(UDim2.fromOffset(parent.AbsoluteSize.X, parent.AbsoluteSize.Y))
+		end
+		sync()
+		local conn = parent:GetPropertyChangedSignal("AbsoluteSize"):Connect(sync)
+		return function()
+			return conn:Disconnect()
+		end
 	end, { parent })
 	local _attributes = {
-		key = "Shadow",
+		tag = "frame",
 	}
-	for _k, _v in container do
-		_attributes[_k] = _v
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "Shadow"
 	end
+	_attributes.key = _condition_1
+	_attributes.hostRef = ref
+	_attributes.base = container
+	_attributes.className = className
+	_attributes.sx = sx
 	_attributes.ZIndex = zIndex
 	_attributes.Event = {
 		AncestryChanged = function(rbx, parent)
@@ -55,10 +69,18 @@ local function Shadow()
 			end
 		end,
 	}
-	return React.createElement("frame", _attributes, cornerRadius ~= nil and React.createElement("uicorner", {
+	local _attributes_1 = {
+		key = "Blob",
+	}
+	for _k, _v in blob do
+		_attributes_1[_k] = _v
+	end
+	_attributes_1.Size = blobSize
+	_attributes_1.ZIndex = zIndex
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, cornerRadius ~= nil and React.createElement("uicorner", {
 		key = "Corner",
 		CornerRadius = cornerRadius,
-	}))
+	})))
 end
 local default = Shadow
 return {

package/out/ui/packages/shadow/components/Shadow.styles.luau

@@ -6,11 +6,16 @@ local componentStyles = _theme.componentStyles
 local useShadowStyles = componentStyles("Shadow", function(theme)
 	return createStyles({
 		container = {
-			Size = UDim2.new(1, theme.spacing.calc(0.25), 1, theme.spacing.calc(0.25)),
+			Size = UDim2.fromOffset(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = -100,
+		},
+		blob = {
 			BackgroundColor3 = theme.palette.shadow,
 			BackgroundTransparency = 0.8,
 			BorderSizePixel = 0,
-			ZIndex = -100,
+			Position = UDim2.fromOffset(theme.spacing.calc(0.25), theme.spacing.calc(0.25)),
 		},
 	})
 end)

package/out/ui/packages/sidebar/components/Sidebar.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useSidebarStyles = TS.import(script, script.Parent, "Sidebar.styles").default
 local function Sidebar(props)
 	local _binding = props
@@ -12,33 +13,25 @@ local function Sidebar(props)
 	local _binding_1 = useSidebarStyles(props)
 	local root = _binding_1.root
 	local container = _binding_1.container
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Sidebar"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
-	if className ~= 0 and className == className and className ~= "" and className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx ~= 0 and sx == sx and sx ~= "" and sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _attributes_1 = {
 		key = "Container",
 	}
 	for _k, _v in container do
 		_attributes_1[_k] = _v
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, children))
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, children))
 end
 local default = Sidebar
 return {

package/out/ui/packages/skeleton/components/Skeleton.luau

@@ -5,6 +5,7 @@ local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local loopProperty = TS.import(script, script.Parent.Parent.Parent, "motion").loopProperty
 local useSkeletonStyles = TS.import(script, script.Parent, "Skeleton.styles").default
 local _skeletonMotion = TS.import(script, script.Parent, "skeletonMotion")
@@ -30,6 +31,7 @@ local function SkeletonBlock(props)
 	local circular = _binding_1.circular
 	local fillRef = useRef()
 	local gradientRef = useRef()
+	local showGradient = motion ~= "pulse"
 	useEffect(function()
 		local fill = fillRef.current
 		local gradient = gradientRef.current
@@ -45,7 +47,7 @@ local function SkeletonBlock(props)
 		if motion == "pulse" then
 			fill.BackgroundTransparency = 0
 			return loopProperty(fill, {
-				BackgroundTransparency = 0.55,
+				BackgroundTransparency = 0.45,
 			}, 0.9, true)
 		end
 		fill.BackgroundTransparency = 0
@@ -55,25 +57,21 @@ local function SkeletonBlock(props)
 	end, { motion })
 	local corner = if variant == "circular" then circular elseif variant == "rectangular" then nil else rounded
 	local side = if variant == "circular" then width else nil
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Skeleton"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	_attributes.BackgroundTransparency = 1
-	_attributes.BorderSizePixel = 0
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_attributes.className = className
+	_attributes.sx = sx
 	local _condition_1 = side
 	if _condition_1 == nil then
 		_condition_1 = width
@@ -90,7 +88,7 @@ local function SkeletonBlock(props)
 		_attributes_1[_k] = _v
 	end
 	_attributes_1.Size = UDim2.new(1, 0, 1, 0)
-	local _condition_3 = motion == "shimmer"
+	local _condition_3 = showGradient
 	if _condition_3 then
 		local _attributes_2 = {
 			ref = gradientRef,
@@ -106,7 +104,7 @@ local function SkeletonBlock(props)
 		setmetatable(_attributes_2, nil)
 		_condition_4 = React.createElement("uicorner", _attributes_2)
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _condition_3, _condition_4))
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _condition_3, _condition_4))
 end
 local function Skeleton(props)
 	local _binding = props
@@ -169,23 +167,17 @@ local function Skeleton(props)
 		end
 	end
 	local blockHeight = height * count + gap * (count - 1)
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Skeleton"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.className = className
+	_attributes.sx = sx
 	_attributes.Size = UDim2.new(0, width, 0, blockHeight)
 	_attributes.BackgroundTransparency = 1
 	_attributes.BorderSizePixel = 0
@@ -209,7 +201,7 @@ local function Skeleton(props)
 		_newValue[_k] = _callback(_v, _k - 1, rows)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement("frame", _attributes, _exp, _newValue)
+	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
 end
 local function SkeletonText(props)
 	local _attributes = table.clone(props)

package/out/ui/packages/skeleton/components/Skeleton.styles.luau

@@ -3,15 +3,20 @@ 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 skeletonTone = TS.import(script, script.Parent, "skeletonTone").skeletonTone
 local useSkeletonStyles = componentStyles("Skeleton", function(theme)
+	local _binding = skeletonTone(theme)
+	local bone = _binding.bone
+	local shine = _binding.shine
 	return createStyles({
 		block = {
-			BackgroundColor3 = theme.palette.surface.paper,
+			BackgroundColor3 = bone,
 			BackgroundTransparency = 0,
 			BorderSizePixel = 0,
 		},
 		highlight = {
-			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, theme.palette.surface.paper), ColorSequenceKeypoint.new(0.5, theme.palette.text.secondary), ColorSequenceKeypoint.new(1, theme.palette.surface.paper) }),
+			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, bone), ColorSequenceKeypoint.new(0.5, shine), ColorSequenceKeypoint.new(1, bone) }),
+			Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 0.35), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 0.35) }),
 		},
 		rounded = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/out/ui/packages/skeleton/components/skeletonMotion.luau

@@ -3,7 +3,7 @@ local function skeletonMotion(animation, reducedMotion)
 	if animation == false or reducedMotion == true then
 		return false
 	end
-	return animation or "pulse"
+	return animation or "shimmer"
 end
 local function skeletonLineWidth(width, index, count)
 	if count > 1 and index == count - 1 then

package/out/ui/packages/skeleton/components/skeletonTone.d.ts

@@ -0,0 +1,20 @@
+interface SkeletonPalette {
+    surface: {
+        canvas: Color3;
+        elevated: Color3;
+    };
+    action: {
+        hover: Color3;
+    };
+    text: {
+        secondary: Color3;
+    };
+}
+/** Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. */
+export declare function skeletonTone(theme: {
+    palette: SkeletonPalette;
+}): {
+    bone: Color3;
+    shine: Color3;
+};
+export {};

package/out/ui/packages/skeleton/components/skeletonTone.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local relativeLuminance = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme", "utilites", "colorMath").relativeLuminance
+--* Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. 
+local function skeletonTone(theme)
+	local lightCanvas = relativeLuminance(theme.palette.surface.canvas) > 0.5
+	return {
+		bone = theme.palette.action.hover,
+		shine = if lightCanvas then theme.palette.surface.elevated else theme.palette.text.secondary,
+	}
+end
+return {
+	skeletonTone = skeletonTone,
+}

package/out/ui/packages/slider/components/Slider.d.ts

@@ -1,4 +1,5 @@
 import { ControlSize, CustomizedProps } from "../../../../theme/index";
+import { SliderColor } from "./Slider.styles";
 export interface SliderProps {
     value: number;
     onChange: (value: number) => void;
@@ -8,6 +9,8 @@ export interface SliderProps {
     step?: number;
     disabled?: boolean;
     size?: ControlSize;
+    marks?: boolean | ReadonlyArray<number>;
+    color?: SliderColor;
 }
 declare function Slider(props: CustomizedProps<Frame, SliderProps>): JSX.Element;
 export default Slider;