@rbxts/uiblox 0.2.0-alpha.13 → 0.2.0-alpha.15

package/out/ui/packages/appBar/components/AppBar.d.ts

@@ -1,9 +1,10 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
-import { AppBarElevation } from "./AppBar.styles";
+import { AppBarColor, AppBarElevation } from "./AppBar.styles";
 export interface AppBarProps {
     title?: string;
     elevation?: AppBarElevation;
+    color?: AppBarColor;
     children?: React.ReactNode;
 }
 declare function AppBar(props: CustomizedProps<Frame, AppBarProps>): JSX.Element;

package/out/ui/packages/appBar/components/AppBar.luau

@@ -13,6 +13,10 @@ local function AppBar(props)
 	if elevation == nil then
 		elevation = "raised"
 	end
+	local color = _binding.color
+	if color == nil then
+		color = "default"
+	end
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
@@ -20,6 +24,7 @@ local function AppBar(props)
 	local ref = _binding.ref
 	local styles = useAppBarStyles({
 		elevation = elevation,
+		color = color,
 		hasActions = children ~= nil,
 	})
 	local _attributes = {}

package/out/ui/packages/appBar/components/AppBar.styles.d.ts

@@ -1,6 +1,8 @@
 export type AppBarElevation = "flat" | "raised";
+export type AppBarColor = "default" | "primary";
 declare const useAppBarStyles: (props: {
     elevation?: AppBarElevation;
+    color?: AppBarColor;
     hasActions?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAppBarStyles;

package/out/ui/packages/appBar/components/AppBar.styles.luau

@@ -8,6 +8,10 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	if elevation == nil then
 		elevation = "raised"
 	end
+	local color = _param.color
+	if color == nil then
+		color = "default"
+	end
 	local hasActions = _param.hasActions
 	if hasActions == nil then
 		hasActions = false
@@ -15,7 +19,7 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
-			BackgroundColor3 = if elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
+			BackgroundColor3 = if color == "primary" then theme.palette.primary.main elseif elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
 			BorderSizePixel = 0,
 			ZIndex = 11000,
 		},
@@ -37,7 +41,7 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextColor3 = if color == "primary" then theme.palette.primary.on else theme.palette.text.primary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextYAlignment = Enum.TextYAlignment.Center
 	_object_1.TextTruncate = Enum.TextTruncate.AtEnd

package/out/ui/packages/avatar/components/Avatar.d.ts

@@ -1,8 +1,10 @@
 import { CustomizedProps } from "../../../../theme/index";
+import { AvatarVariant } from "./Avatar.styles";
 export interface AvatarProps {
     name?: string;
     image?: string;
     size?: number;
+    variant?: AvatarVariant;
 }
 declare function Avatar(props: CustomizedProps<Frame, AvatarProps>): JSX.Element;
 export default Avatar;

package/out/ui/packages/avatar/components/Avatar.luau

@@ -11,12 +11,17 @@ local function Avatar(props)
 	end
 	local image = _binding.image
 	local size = _binding.size
+	local variant = _binding.variant
+	if variant == nil then
+		variant = "circular"
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useAvatarStyles({
 		size = size,
+		variant = variant,
 	})
 	local _attributes = {}
 	local _condition = id
@@ -38,30 +43,33 @@ local function Avatar(props)
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(styles.corner)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uicorner", _attributes_1)
+	local _condition_1 = variant ~= "square"
+	if _condition_1 then
+		local _attributes_1 = table.clone(styles.corner)
+		setmetatable(_attributes_1, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_1)
+	end
 	local _result
 	if image ~= nil then
-		local _attributes_2 = {
+		local _attributes_1 = {
 			key = "Image",
 		}
 		for _k, _v in styles.image do
-			_attributes_2[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes_2.Image = image
-		_result = (React.createElement("imagelabel", _attributes_2))
+		_attributes_1.Image = image
+		_result = (React.createElement("imagelabel", _attributes_1))
 	else
-		local _attributes_2 = {
+		local _attributes_1 = {
 			key = "Initials",
 		}
 		for _k, _v in styles.text do
-			_attributes_2[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes_2.Text = avatarInitials(name)
-		_result = (React.createElement("textlabel", _attributes_2))
+		_attributes_1.Text = avatarInitials(name)
+		_result = (React.createElement("textlabel", _attributes_1))
 	end
-	return React.createElement("frame", _attributes, _exp, _result)
+	return React.createElement("frame", _attributes, _condition_1, _result)
 end
 local default = Avatar
 return {

package/out/ui/packages/avatar/components/Avatar.styles.d.ts

@@ -1,4 +1,6 @@
+export type AvatarVariant = "circular" | "rounded" | "square";
 declare const useAvatarStyles: (props: {
     size?: number;
+    variant?: AvatarVariant;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAvatarStyles;

package/out/ui/packages/avatar/components/Avatar.styles.luau

@@ -8,6 +8,10 @@ local useAvatarStyles = componentStyles("Avatar", function(theme, _param)
 	if size == nil then
 		size = 40
 	end
+	local variant = _param.variant
+	if variant == nil then
+		variant = "circular"
+	end
 	return createStyles({
 		root = {
 			Size = UDim2.fromOffset(size, size),
@@ -29,7 +33,7 @@ local useAvatarStyles = componentStyles("Avatar", function(theme, _param)
 			TextColor3 = theme.palette.primary.on,
 		},
 		corner = {
-			CornerRadius = UDim.new(1, 0),
+			CornerRadius = if variant == "rounded" then UDim.new(0, theme.shape.borderRadius) else UDim.new(1, 0),
 		},
 	})
 end)

package/out/ui/packages/checkbox/components/checkboxLook.d.ts

@@ -2,4 +2,4 @@ export type CheckboxPointer = "rest" | "hover" | "press" | "focus";
 export declare function checkboxMark(value: boolean, mixed?: boolean): "" | "–" | "✓";
 export declare function checkboxPointer(hovering: boolean, pressed: boolean, focused: boolean): CheckboxPointer;
 export declare function checkboxBoxTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 1 | 0 | 0.7 | 0.55 | 0.85;
-export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.25 | 0.55 | 0.45 | 0.2;
+export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.25 | 0.45 | 0.55 | 0.2;

package/out/ui/packages/chip/components/Chip.d.ts

@@ -4,6 +4,7 @@ export interface ChipProps {
     selected?: boolean;
     disabled?: boolean;
     size?: ControlSize;
+    variant?: "filled" | "outlined";
     onActivated?: () => void;
     onDelete?: () => void;
 }

package/out/ui/packages/chip/components/Chip.luau

@@ -9,6 +9,10 @@ local function Chip(props)
 	local selected = _binding.selected
 	local disabled = _binding.disabled
 	local size = _binding.size
+	local variant = _binding.variant
+	if variant == nil then
+		variant = "filled"
+	end
 	local onActivated = _binding.onActivated
 	local onDelete = _binding.onDelete
 	local className = _binding.className
@@ -21,6 +25,7 @@ local function Chip(props)
 		disabled = disabled,
 		deletable = deletable,
 		size = size,
+		variant = variant,
 	})
 	local _attributes = {}
 	local _condition = id

package/out/ui/packages/chip/components/Chip.styles.d.ts

@@ -4,5 +4,6 @@ declare const useChipStyles: (props: {
     disabled?: boolean;
     deletable?: boolean;
     size?: ControlSize;
+    variant?: "filled" | "outlined";
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useChipStyles;

package/out/ui/packages/chip/components/Chip.styles.luau

@@ -18,6 +18,10 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 		deletable = false
 	end
 	local size = _param.size
+	local variant = _param.variant
+	if variant == nil then
+		variant = "filled"
+	end
 	local metrics = controlMetrics(theme.density, size)
 	local padY = if size == "small" then 0.25 elseif size == "large" then 0.75 else 0.5
 	local padX = if size == "small" then 1 elseif size == "large" then 2 else 1.5
@@ -27,6 +31,7 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
 			BackgroundColor3 = if selected then theme.palette.action.selected else theme.palette.surface.input,
+			BackgroundTransparency = if variant == "outlined" and selected ~= true then 1 else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Active = not disabled,
@@ -47,7 +52,7 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 		stroke = {
 			Color = theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-			Transparency = if selected then 1 else 0,
+			Transparency = if variant == "outlined" then (if disabled then 0.5 else 0) elseif selected then 1 else 0,
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,

package/out/ui/packages/imageList/components/ImageList.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 imageListTitle = TS.import(script, script.Parent, "imageListLayout").imageListTitle
 local useImageListStyles = TS.import(script, script.Parent, "ImageList.styles").default
 local function ImageList(props)
 	local _binding = props
@@ -44,6 +45,7 @@ local function ImageList(props)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#items)
 	local _callback = function(item, index)
+		local title = imageListTitle(item.title)
 		local _attributes_2 = {
 			key = `Tile-{index}`,
 		}
@@ -70,7 +72,21 @@ local function ImageList(props)
 			_attributes_4[_k] = _v
 		end
 		_attributes_4.Image = item.src
-		return React.createElement("imagebutton", _attributes_2, _exp_1, React.createElement("imagelabel", _attributes_4))
+		local _exp_2 = React.createElement("imagelabel", _attributes_4)
+		local _condition_1 = title ~= nil
+		if _condition_1 then
+			local _attributes_5 = {
+				key = "Title",
+			}
+			for _k, _v in styles.title do
+				_attributes_5[_k] = _v
+			end
+			_attributes_5.Text = title
+			local _attributes_6 = table.clone(styles.titlePad)
+			setmetatable(_attributes_6, nil)
+			_condition_1 = (React.createElement("textlabel", _attributes_5, React.createElement("uipadding", _attributes_6)))
+		end
+		return React.createElement("imagebutton", _attributes_2, _exp_1, _exp_2, _condition_1)
 	end
 	for _k, _v in items do
 		_newValue[_k] = _callback(_v, _k - 1, items)

package/out/ui/packages/imageList/components/ImageList.styles.luau

@@ -13,6 +13,7 @@ local useImageListStyles = componentStyles("ImageList", function(theme, _param)
 	local itemSize = _param.itemSize
 	local size = imageListItemSize(itemSize)
 	local pad = theme.spacing.calc(imageListGap(gap))
+	local bar = theme.spacing.calc(2.5)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -35,6 +36,7 @@ local useImageListStyles = componentStyles("ImageList", function(theme, _param)
 			BackgroundColor3 = theme.palette.surface.input,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
+			ClipsDescendants = true,
 			Text = "",
 		},
 		corner = {
@@ -46,6 +48,23 @@ local useImageListStyles = componentStyles("ImageList", function(theme, _param)
 			BorderSizePixel = 0,
 			ScaleType = Enum.ScaleType.Crop,
 		},
+		title = {
+			Size = UDim2.new(1, 0, 0, bar),
+			Position = UDim2.new(0, 0, 1, -bar),
+			BackgroundColor3 = theme.palette.surface.overlay,
+			BackgroundTransparency = 0.25,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextColor3 = theme.palette.text.inverse,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			ZIndex = 2,
+		},
+		titlePad = {
+			PaddingLeft = UDim.new(0, theme.spacing.calc(0.5)),
+			PaddingRight = UDim.new(0, theme.spacing.calc(0.5)),
+		},
 	})
 end)
 local default = useImageListStyles

package/out/ui/packages/imageList/components/imageListLayout.d.ts

@@ -1,3 +1,4 @@
 export declare function imageListCols(cols?: number): number;
 export declare function imageListGap(gap?: number): number;
 export declare function imageListItemSize(itemSize?: number): number;
+export declare function imageListTitle(title?: string): string | undefined;

package/out/ui/packages/imageList/components/imageListLayout.luau

@@ -17,8 +17,15 @@ local function imageListItemSize(itemSize)
 	end
 	return math.floor(itemSize)
 end
+local function imageListTitle(title)
+	if title == nil or #title == 0 then
+		return nil
+	end
+	return title
+end
 return {
 	imageListCols = imageListCols,
 	imageListGap = imageListGap,
 	imageListItemSize = imageListItemSize,
+	imageListTitle = imageListTitle,
 }

package/out/ui/packages/pagination/components/Pagination.d.ts

@@ -1,10 +1,11 @@
-import { CustomizedProps } from "../../../../theme/index";
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
 export interface PaginationProps {
     count: number;
     page: number;
     disabled?: boolean;
     siblingCount?: number;
     boundaryCount?: number;
+    size?: ControlSize;
     onChange: (page: number) => void;
 }
 declare function Pagination(props: CustomizedProps<Frame, PaginationProps>): JSX.Element;

package/out/ui/packages/pagination/components/Pagination.luau

@@ -11,12 +11,15 @@ local function Pagination(props)
 	local disabled = _binding.disabled
 	local siblingCount = _binding.siblingCount
 	local boundaryCount = _binding.boundaryCount
+	local size = _binding.size
 	local onChange = _binding.onChange
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = usePaginationStyles()
+	local styles = usePaginationStyles({
+		size = size,
+	})
 	local tokens = pageRange(count, page, siblingCount, boundaryCount)
 	local _attributes = {}
 	local _condition = id

package/out/ui/packages/pagination/components/Pagination.styles.d.ts

@@ -1,2 +1,5 @@
-declare const usePaginationStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+import { ControlSize } from "../../../../theme/index";
+declare const usePaginationStyles: (props: {
+    size?: ControlSize;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default usePaginationStyles;

package/out/ui/packages/pagination/components/Pagination.styles.luau

@@ -3,7 +3,13 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local usePaginationStyles = componentStyles("Pagination", function(theme)
+local usePaginationStyles = componentStyles("Pagination", function(theme, _param)
+	local size = _param.size
+	if size == nil then
+		size = "medium"
+	end
+	local box = if size == "small" then theme.spacing.calc(2.5) elseif size == "large" then theme.spacing.calc(4) else theme.spacing.calc(3)
+	local text = if size == "small" then theme.typography.fontSizes.caption elseif size == "large" then theme.typography.fontSizes.h6 else theme.typography.fontSizes.body
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -13,27 +19,27 @@ local usePaginationStyles = componentStyles("Pagination", function(theme)
 		},
 		list = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, theme.padding.calc(if size == "small" then 0.25 else 0.5)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		page = {
-			Size = UDim2.fromOffset(theme.spacing.calc(3), theme.spacing.calc(3)),
+			Size = UDim2.fromOffset(box, box),
 			BackgroundColor3 = theme.palette.surface.input,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = text,
 			TextColor3 = theme.palette.text.primary,
 		},
 		selected = {
 			BackgroundColor3 = theme.palette.action.selected,
 		},
 		ellipsis = {
-			Size = UDim2.fromOffset(theme.spacing.calc(3), theme.spacing.calc(3)),
+			Size = UDim2.fromOffset(box, box),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = text,
 			TextColor3 = theme.palette.text.secondary,
 			Text = "…",
 		},

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.35 | 0.7 | 0.55;
+export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.7 | 0.55 | 0.35;
 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.luau

@@ -938,115 +938,123 @@ local function compositeRows()
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Tabs", "hover", {
+	local _array_23 = pair("Tabs", "centered", {
 		value = "Continue",
 		options = { "Continue", "Docs", "Actions" },
-		pointer = "hover",
+		variant = "centered",
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("Tabs", "long", {
-		value = LONG,
-		options = { LONG, "Docs", "Actions", "Source", "Settings" },
-		text = LONG,
-		width = NARROW,
+	local _array_24 = pair("Tabs", "hover", {
+		value = "Continue",
+		options = { "Continue", "Docs", "Actions" },
+		pointer = "hover",
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("SplitPane", "default", {
-		value = 160,
+	local _array_25 = pair("Tabs", "long", {
+		value = LONG,
+		options = { LONG, "Docs", "Actions", "Source", "Settings" },
+		text = LONG,
+		width = NARROW,
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("SplitPane", "disabled", {
+	local _array_26 = pair("SplitPane", "default", {
 		value = 160,
-		disabled = true,
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("SplitPane", "hover", {
+	local _array_27 = pair("SplitPane", "disabled", {
 		value = 160,
-		pointer = "hover",
+		disabled = true,
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("SplitPane", "drag", {
+	local _array_28 = pair("SplitPane", "hover", {
 		value = 160,
-		pointer = "press",
+		pointer = "hover",
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("SplitPane", "long", {
-		value = 80,
-		text = LONG,
-		width = NARROW,
+	local _array_29 = pair("SplitPane", "drag", {
+		value = 160,
+		pointer = "press",
 	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Tooltip", "hidden")
+	local _array_30 = pair("SplitPane", "long", {
+		value = 80,
+		text = LONG,
+		width = NARROW,
+	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Tooltip", "shown", {
-		pointer = "hover",
-	})
+	local _array_31 = pair("Tooltip", "hidden")
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Tooltip", "long", {
-		text = LONG,
-		width = NARROW,
+	local _array_32 = pair("Tooltip", "shown", {
 		pointer = "hover",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("TreeView", "default", {
-		selected = "Fixture/Styled",
+	local _array_33 = pair("Tooltip", "long", {
+		text = LONG,
+		width = NARROW,
+		pointer = "hover",
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("TreeView", "hover", {
+	local _array_34 = pair("TreeView", "default", {
 		selected = "Fixture/Styled",
-		pointer = "hover",
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("TreeView", "filter", {
+	local _array_35 = pair("TreeView", "hover", {
 		selected = "Fixture/Styled",
-		filter = "sty",
+		pointer = "hover",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("TreeView", "long", {
-		selected = `Fixture/{LONG}`,
-		text = LONG,
-		width = NARROW,
+	local _array_36 = pair("TreeView", "filter", {
+		selected = "Fixture/Styled",
+		filter = "sty",
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("IconButton", "loading", {
-		loading = true,
+	local _array_37 = pair("TreeView", "long", {
+		selected = `Fixture/{LONG}`,
+		text = LONG,
+		width = NARROW,
 	})
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("IconButton", "loading-disabled", {
+	local _array_38 = pair("IconButton", "loading", {
+		loading = true,
+	})
+	local _Length_37 = #_array_38
+	table.move(_array_38, 1, _Length_37, _length + 1, _array)
+	_length += _Length_37
+	local _array_39 = pair("IconButton", "loading-disabled", {
 		loading = true,
 		disabled = true,
 	})
-	table.move(_array_38, 1, #_array_38, _length + 1, _array)
+	table.move(_array_39, 1, #_array_39, _length + 1, _array)
 	return _array
 end
 local function surfacesRows()
@@ -1295,16 +1303,22 @@ local function surfacesRows()
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("Badge", "count", {
-		value = 3,
+	local _array_40 = pair("Chip", "outlined", {
+		variant = "outlined",
 	})
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("Badge", "max", {
+	local _array_41 = pair("Badge", "count", {
+		value = 3,
+	})
+	local _Length_40 = #_array_41
+	table.move(_array_41, 1, _Length_40, _length + 1, _array)
+	_length += _Length_40
+	local _array_42 = pair("Badge", "max", {
 		value = 100,
 	})
-	table.move(_array_41, 1, #_array_41, _length + 1, _array)
+	table.move(_array_42, 1, #_array_42, _length + 1, _array)
 	return _array
 end
 local function chromeRows()
@@ -1340,267 +1354,287 @@ local function chromeRows()
 	local _Length_4 = #_array_5
 	table.move(_array_5, 1, _Length_4, _length + 1, _array)
 	_length += _Length_4
-	local _array_6 = pair("Drawer", "closed", {
-		open = false,
+	local _array_6 = pair("Avatar", "rounded", {
+		variant = "rounded",
 	})
 	local _Length_5 = #_array_6
 	table.move(_array_6, 1, _Length_5, _length + 1, _array)
 	_length += _Length_5
-	local _array_7 = pair("Drawer", "left", {
-		open = true,
-		variant = "left",
+	local _array_7 = pair("Drawer", "closed", {
+		open = false,
 	})
 	local _Length_6 = #_array_7
 	table.move(_array_7, 1, _Length_6, _length + 1, _array)
 	_length += _Length_6
-	local _array_8 = pair("Drawer", "right", {
+	local _array_8 = pair("Drawer", "left", {
 		open = true,
-		variant = "right",
+		variant = "left",
 	})
 	local _Length_7 = #_array_8
 	table.move(_array_8, 1, _Length_7, _length + 1, _array)
 	_length += _Length_7
-	local _array_9 = pair("Drawer", "wide", {
+	local _array_9 = pair("Drawer", "right", {
 		open = true,
-		variant = "wide",
+		variant = "right",
 	})
 	local _Length_8 = #_array_9
 	table.move(_array_9, 1, _Length_8, _length + 1, _array)
 	_length += _Length_8
-	local _array_10 = pair("Breadcrumbs", "single", {
-		text = "Home",
+	local _array_10 = pair("Drawer", "wide", {
+		open = true,
+		variant = "wide",
 	})
 	local _Length_9 = #_array_10
 	table.move(_array_10, 1, _Length_9, _length + 1, _array)
 	_length += _Length_9
-	local _array_11 = pair("Breadcrumbs", "trail", {
-		text = "Home / Library / Item",
+	local _array_11 = pair("Breadcrumbs", "single", {
+		text = "Home",
 	})
 	local _Length_10 = #_array_11
 	table.move(_array_11, 1, _Length_10, _length + 1, _array)
 	_length += _Length_10
-	local _array_12 = pair("Breadcrumbs", "collapsed", {
-		text = "Home / … / Item",
-		size = "small",
+	local _array_12 = pair("Breadcrumbs", "trail", {
+		text = "Home / Library / Item",
 	})
 	local _Length_11 = #_array_12
 	table.move(_array_12, 1, _Length_11, _length + 1, _array)
 	_length += _Length_11
-	local _array_13 = pair("Breadcrumbs", "custom-separator", {
-		text = "Home > Item",
+	local _array_13 = pair("Breadcrumbs", "collapsed", {
+		text = "Home / … / Item",
+		size = "small",
 	})
 	local _Length_12 = #_array_13
 	table.move(_array_13, 1, _Length_12, _length + 1, _array)
 	_length += _Length_12
-	local _array_14 = pair("Pagination", "first", {
-		value = 1,
+	local _array_14 = pair("Breadcrumbs", "custom-separator", {
+		text = "Home > Item",
 	})
 	local _Length_13 = #_array_14
 	table.move(_array_14, 1, _Length_13, _length + 1, _array)
 	_length += _Length_13
-	local _array_15 = pair("Pagination", "middle", {
-		value = 3,
+	local _array_15 = pair("Pagination", "first", {
+		value = 1,
 	})
 	local _Length_14 = #_array_15
 	table.move(_array_15, 1, _Length_14, _length + 1, _array)
 	_length += _Length_14
-	local _array_16 = pair("Pagination", "collapsed", {
-		value = 10,
-		size = "large",
+	local _array_16 = pair("Pagination", "middle", {
+		value = 3,
 	})
 	local _Length_15 = #_array_16
 	table.move(_array_16, 1, _Length_15, _length + 1, _array)
 	_length += _Length_15
-	local _array_17 = pair("Pagination", "disabled", {
-		value = 2,
-		disabled = true,
+	local _array_17 = pair("Pagination", "collapsed", {
+		value = 10,
+		size = "large",
 	})
 	local _Length_16 = #_array_17
 	table.move(_array_17, 1, _Length_16, _length + 1, _array)
 	_length += _Length_16
-	local _array_18 = pair("Stepper", "first", {
-		value = 0,
+	local _array_18 = pair("Pagination", "disabled", {
+		value = 2,
+		disabled = true,
 	})
 	local _Length_17 = #_array_18
 	table.move(_array_18, 1, _Length_17, _length + 1, _array)
 	_length += _Length_17
-	local _array_19 = pair("Stepper", "middle", {
-		value = 1,
+	local _array_19 = pair("Pagination", "size-small", {
+		value = 2,
+		size = "small",
 	})
 	local _Length_18 = #_array_19
 	table.move(_array_19, 1, _Length_18, _length + 1, _array)
 	_length += _Length_18
-	local _array_20 = pair("Stepper", "last", {
-		value = 2,
+	local _array_20 = pair("Stepper", "first", {
+		value = 0,
 	})
 	local _Length_19 = #_array_20
 	table.move(_array_20, 1, _Length_19, _length + 1, _array)
 	_length += _Length_19
-	local _array_21 = pair("Stepper", "vertical", {
+	local _array_21 = pair("Stepper", "middle", {
 		value = 1,
-		variant = "vertical",
 	})
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("Accordion", "closed", {
-		open = false,
+	local _array_22 = pair("Stepper", "last", {
+		value = 2,
 	})
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Accordion", "open", {
-		open = true,
+	local _array_23 = pair("Stepper", "vertical", {
+		value = 1,
+		variant = "vertical",
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("Accordion", "disabled", {
+	local _array_24 = pair("Accordion", "closed", {
 		open = false,
-		disabled = true,
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("Snackbar", "open", {
+	local _array_25 = pair("Accordion", "open", {
 		open = true,
-		text = "Saved",
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("Snackbar", "closed", {
+	local _array_26 = pair("Accordion", "disabled", {
 		open = false,
-		text = "Saved",
+		disabled = true,
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("Table", "empty", {
-		text = "",
+	local _array_27 = pair("Snackbar", "open", {
+		open = true,
+		text = "Saved",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("Table", "default", {
-		text = "Name / Role",
+	local _array_28 = pair("Snackbar", "closed", {
+		open = false,
+		text = "Saved",
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("Table", "selected", {
-		text = "Name / Role",
-		value = 0,
+	local _array_29 = pair("Table", "empty", {
+		text = "",
 	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Table", "dense", {
+	local _array_30 = pair("Table", "default", {
 		text = "Name / Role",
-		variant = "dense",
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Autocomplete", "default", {
-		value = "Continue",
-		options = { "Continue", "Other" },
+	local _array_31 = pair("Table", "selected", {
+		text = "Name / Role",
+		value = 0,
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Autocomplete", "open", {
-		value = "Continue",
-		options = { "Continue", "Other" },
-		open = true,
+	local _array_32 = pair("Table", "dense", {
+		text = "Name / Role",
+		variant = "dense",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("Autocomplete", "disabled", {
+	local _array_33 = pair("Autocomplete", "default", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		disabled = true,
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("Autocomplete", "empty", {
-		value = "",
-		options = {},
+	local _array_34 = pair("Autocomplete", "open", {
+		value = "Continue",
+		options = { "Continue", "Other" },
 		open = true,
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("Autocomplete", "no-results", {
+	local _array_35 = pair("Autocomplete", "disabled", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		open = true,
-		filter = "zzz",
+		disabled = true,
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("Fab", "default")
+	local _array_36 = pair("Autocomplete", "empty", {
+		value = "",
+		options = {},
+		open = true,
+	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("Fab", "extended", {
-		text = "Compose",
+	local _array_37 = pair("Autocomplete", "no-results", {
+		value = "Continue",
+		options = { "Continue", "Other" },
+		open = true,
+		filter = "zzz",
 	})
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("Fab", "small", {
-		size = "small",
-	})
+	local _array_38 = pair("Fab", "default")
 	local _Length_37 = #_array_38
 	table.move(_array_38, 1, _Length_37, _length + 1, _array)
 	_length += _Length_37
-	local _array_39 = pair("Fab", "large", {
-		size = "large",
+	local _array_39 = pair("Fab", "extended", {
+		text = "Compose",
 	})
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("Fab", "disabled", {
-		disabled = true,
+	local _array_40 = pair("Fab", "small", {
+		size = "small",
 	})
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("Fab", "loading", {
-		loading = true,
+	local _array_41 = pair("Fab", "large", {
+		size = "large",
 	})
 	local _Length_40 = #_array_41
 	table.move(_array_41, 1, _Length_40, _length + 1, _array)
 	_length += _Length_40
-	local _array_42 = pair("AppBar", "default", {
-		text = "Storyblox",
+	local _array_42 = pair("Fab", "disabled", {
+		disabled = true,
 	})
 	local _Length_41 = #_array_42
 	table.move(_array_42, 1, _Length_41, _length + 1, _array)
 	_length += _Length_41
-	local _array_43 = pair("AppBar", "flat", {
-		text = "Storyblox",
-		variant = "flat",
+	local _array_43 = pair("Fab", "loading", {
+		loading = true,
 	})
 	local _Length_42 = #_array_43
 	table.move(_array_43, 1, _Length_42, _length + 1, _array)
 	_length += _Length_42
-	local _array_44 = pair("AppBar", "raised", {
+	local _array_44 = pair("AppBar", "default", {
 		text = "Storyblox",
-		variant = "raised",
 	})
 	local _Length_43 = #_array_44
 	table.move(_array_44, 1, _Length_43, _length + 1, _array)
 	_length += _Length_43
-	local _array_45 = pair("BottomNavigation", "default", {
+	local _array_45 = pair("AppBar", "flat", {
+		text = "Storyblox",
+		variant = "flat",
+	})
+	local _Length_44 = #_array_45
+	table.move(_array_45, 1, _Length_44, _length + 1, _array)
+	_length += _Length_44
+	local _array_46 = pair("AppBar", "raised", {
+		text = "Storyblox",
+		variant = "raised",
+	})
+	local _Length_45 = #_array_46
+	table.move(_array_46, 1, _Length_45, _length + 1, _array)
+	_length += _Length_45
+	local _array_47 = pair("AppBar", "primary", {
+		text = "Storyblox",
+		variant = "primary",
+	})
+	local _Length_46 = #_array_47
+	table.move(_array_47, 1, _Length_46, _length + 1, _array)
+	_length += _Length_46
+	local _array_48 = pair("BottomNavigation", "default", {
 		value = "Home",
 		options = { "Home", "Search", "Profile" },
 	})
-	table.move(_array_45, 1, #_array_45, _length + 1, _array)
+	table.move(_array_48, 1, #_array_48, _length + 1, _array)
 	return _array
 end
 local function miscRows()
@@ -1851,89 +1885,95 @@ local function miscRows()
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("SpeedDial", "closed", {
-		open = false,
+	local _array_40 = pair("ImageList", "titled", {
+		text = "Cove",
 	})
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("SpeedDial", "open", {
-		open = true,
+	local _array_41 = pair("SpeedDial", "closed", {
+		open = false,
 	})
 	local _Length_40 = #_array_41
 	table.move(_array_41, 1, _Length_40, _length + 1, _array)
 	_length += _Length_40
-	local _array_42 = pair("SpeedDial", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_42 = pair("SpeedDial", "open", {
+		open = true,
 	})
 	local _Length_41 = #_array_42
 	table.move(_array_42, 1, _Length_41, _length + 1, _array)
 	_length += _Length_41
-	local _array_43 = pair("SpeedDial", "down", {
-		open = true,
-		variant = "down",
+	local _array_43 = pair("SpeedDial", "disabled", {
+		open = false,
+		disabled = true,
 	})
 	local _Length_42 = #_array_43
 	table.move(_array_43, 1, _Length_42, _length + 1, _array)
 	_length += _Length_42
-	local _array_44 = pair("FormLabel", "default", {
-		text = "Email",
+	local _array_44 = pair("SpeedDial", "down", {
+		open = true,
+		variant = "down",
 	})
 	local _Length_43 = #_array_44
 	table.move(_array_44, 1, _Length_43, _length + 1, _array)
 	_length += _Length_43
-	local _array_45 = pair("FormLabel", "required", {
+	local _array_45 = pair("FormLabel", "default", {
 		text = "Email",
-		value = true,
 	})
 	local _Length_44 = #_array_45
 	table.move(_array_45, 1, _Length_44, _length + 1, _array)
 	_length += _Length_44
-	local _array_46 = pair("FormLabel", "error", {
+	local _array_46 = pair("FormLabel", "required", {
 		text = "Email",
-		hasError = true,
+		value = true,
 	})
 	local _Length_45 = #_array_46
 	table.move(_array_46, 1, _Length_45, _length + 1, _array)
 	_length += _Length_45
-	local _array_47 = pair("FormHelperText", "default", {
-		text = "We never share this",
+	local _array_47 = pair("FormLabel", "error", {
+		text = "Email",
+		hasError = true,
 	})
 	local _Length_46 = #_array_47
 	table.move(_array_47, 1, _Length_46, _length + 1, _array)
 	_length += _Length_46
-	local _array_48 = pair("FormHelperText", "error", {
-		text = "Required",
-		hasError = true,
+	local _array_48 = pair("FormHelperText", "default", {
+		text = "We never share this",
 	})
 	local _Length_47 = #_array_48
 	table.move(_array_48, 1, _Length_47, _length + 1, _array)
 	_length += _Length_47
-	local _array_49 = pair("Menu", "closed", {
-		open = false,
+	local _array_49 = pair("FormHelperText", "error", {
+		text = "Required",
+		hasError = true,
 	})
 	local _Length_48 = #_array_49
 	table.move(_array_49, 1, _Length_48, _length + 1, _array)
 	_length += _Length_48
-	local _array_50 = pair("Menu", "open", {
-		open = true,
+	local _array_50 = pair("Menu", "closed", {
+		open = false,
 	})
 	local _Length_49 = #_array_50
 	table.move(_array_50, 1, _Length_49, _length + 1, _array)
 	_length += _Length_49
-	local _array_51 = pair("Menu", "empty", {
+	local _array_51 = pair("Menu", "open", {
 		open = true,
-		options = {},
 	})
 	local _Length_50 = #_array_51
 	table.move(_array_51, 1, _Length_50, _length + 1, _array)
 	_length += _Length_50
-	local _array_52 = pair("Menu", "dense", {
+	local _array_52 = pair("Menu", "empty", {
+		open = true,
+		options = {},
+	})
+	local _Length_51 = #_array_52
+	table.move(_array_52, 1, _Length_51, _length + 1, _array)
+	_length += _Length_51
+	local _array_53 = pair("Menu", "dense", {
 		open = true,
 		variant = "dense",
 	})
-	table.move(_array_52, 1, #_array_52, _length + 1, _array)
+	table.move(_array_53, 1, #_array_53, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)

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

@@ -1,6 +1,6 @@
 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.35 | 0.65 | 0.55 | 0.15 | 0.08;
+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 switchThumbPlacement(on: boolean, inset: number): {

package/out/ui/packages/tabs/components/Tabs.d.ts

@@ -7,6 +7,7 @@ export interface TabsProps<T> {
     onChange: (value: T) => void;
     disabled?: boolean;
     orientation?: TabsOrientation;
+    centered?: boolean;
 }
 declare function Tabs<T>(props: CustomizedProps<ScrollingFrame, TabsProps<T>>): JSX.Element;
 export default Tabs;

package/out/ui/packages/tabs/components/Tabs.luau

@@ -13,12 +13,14 @@ local function Tabs(props)
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
 	local orientation = _binding.orientation
+	local centered = _binding.centered
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useTabsStyles({
 		orientation = orientation,
+		centered = centered,
 	})
 	local vertical = tabsIsVertical(orientation)
 	local choose = function(index)

package/out/ui/packages/tabs/components/Tabs.styles.d.ts

@@ -1,5 +1,6 @@
 import { TabsOrientation } from "./tabsOrientation";
 declare const useTabsStyles: (props: {
     orientation?: TabsOrientation;
+    centered?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useTabsStyles;

package/out/ui/packages/tabs/components/Tabs.styles.luau

@@ -6,6 +6,7 @@ local componentStyles = _theme.componentStyles
 local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
 local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 	local orientation = _param.orientation
+	local centered = _param.centered
 	local vertical = tabsIsVertical(orientation)
 	local bar = theme.padding.calc(0.5)
 	return createStyles({
@@ -23,6 +24,7 @@ local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 		},
 		list = {
 			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
+			HorizontalAlignment = if centered == true and vertical ~= true then Enum.HorizontalAlignment.Center else Enum.HorizontalAlignment.Left,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		tab = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.13",
+	"version": "0.2.0-alpha.15",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",
@@ -8,7 +8,7 @@
 		"build": "rbxtsc",
 		"watch": "rbxtsc -w",
 		"pack:check": "node scripts/pack-check.mjs",
-		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
+		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
 		"prepublishOnly": "pnpm build"
 	},
 	"keywords": [