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

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

@@ -13,7 +13,7 @@ local function switchPointer(hovering, pressed, focused)
 end
 local function switchTrackTransparency(on, disabled, pointer)
 	if disabled then
-		return if on then 0.55 else 0.65
+		return 0.5
 	end
 	if not on then
 		if pointer == "press" then
@@ -33,19 +33,13 @@ local function switchTrackTransparency(on, disabled, pointer)
 	return 0
 end
 local function switchThumbTransparency(disabled)
-	return if disabled then 0.35 else 0
+	return if disabled then 0.5 else 0
 end
 local function switchStrokeTransparency(disabled, pointer)
-	if disabled then
+	if disabled or pointer ~= "focus" then
 		return 1
 	end
-	if pointer == "focus" or pointer == "press" then
-		return 0
-	end
-	if pointer == "hover" then
-		return 0.35
-	end
-	return 1
+	return 0
 end
 local function switchThumbPlacement(on, inset)
 	return {

package/out/ui/packages/table/components/Table.d.ts

@@ -7,6 +7,7 @@ export interface TableColumn {
     flex?: number;
     align?: TableAlign;
     sortable?: boolean;
+    wrap?: boolean;
 }
 export type TableCell = string | React.ReactNode;
 export interface TableProps {

package/out/ui/packages/table/components/Table.luau

@@ -1,9 +1,12 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local rowSelected = TS.import(script, script.Parent, "rowSelected").rowSelected
+local sortedRowOrder = TS.import(script, script.Parent, "tableSort").sortedRowOrder
 local _tableColumns = TS.import(script, script.Parent, "tableColumns")
 local canSort = _tableColumns.canSort
 local columnSizes = _tableColumns.columnSizes
@@ -11,6 +14,41 @@ local headerText = _tableColumns.headerText
 local isTextCell = _tableColumns.isTextCell
 local resolveColumn = _tableColumns.resolveColumn
 local useTableStyles = TS.import(script, script.Parent, "Table.styles").default
+local function TableRow(props)
+	local hovering, setHovering = useState(false)
+	local face = if props.selected then props.styles.selected elseif hovering then props.styles.hover else nil
+	local _attributes = {
+		key = `r-{props.rowIndex}`,
+	}
+	for _k, _v in cx(props.styles.row, face) do
+		_attributes[_k] = _v
+	end
+	_attributes.LayoutOrder = props.place + 1
+	_attributes.Event = {
+		Activated = props.onActivated,
+		MouseEnter = function()
+			return setHovering(true)
+		end,
+		MouseLeave = function()
+			return setHovering(false)
+		end,
+	}
+	local _attributes_1 = table.clone(props.styles.rowStroke)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uistroke", _attributes_1)
+	local _attributes_2 = table.clone(props.styles.tail)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uipadding", _attributes_2)
+	local _attributes_3 = {
+		key = "Band",
+	}
+	for _k, _v in props.styles.band do
+		_attributes_3[_k] = _v
+	end
+	local _attributes_4 = table.clone(props.styles.cells)
+	setmetatable(_attributes_4, nil)
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), props.children))
+end
 local function textAlign(align)
 	if align == "center" then
 		return Enum.TextXAlignment.Center
@@ -48,6 +86,7 @@ local function Table(props)
 	-- ▲ ReadonlyArray.map ▲
 	local resolved = _newValue
 	local sizes = columnSizes(resolved)
+	local order = sortedRowOrder(rows, sortColumn, sortDirection)
 	local _attributes = {
 		tag = "frame",
 	}
@@ -73,12 +112,21 @@ local function Table(props)
 		_attributes_3[_k] = _v
 	end
 	_attributes_3.LayoutOrder = 0
-	local _attributes_4 = table.clone(styles.padding)
+	local _attributes_4 = table.clone(styles.rowStroke)
 	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("uipadding", _attributes_4)
-	local _attributes_5 = table.clone(styles.cells)
+	local _exp_2 = React.createElement("uistroke", _attributes_4)
+	local _attributes_5 = table.clone(styles.tail)
 	setmetatable(_attributes_5, nil)
-	local _exp_3 = React.createElement("uilistlayout", _attributes_5)
+	local _exp_3 = React.createElement("uipadding", _attributes_5)
+	local _attributes_6 = {
+		key = "Band",
+	}
+	for _k, _v in styles.band do
+		_attributes_6[_k] = _v
+	end
+	local _attributes_7 = table.clone(styles.cells)
+	setmetatable(_attributes_7, nil)
+	local _exp_4 = React.createElement("uilistlayout", _attributes_7)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue_1 = table.create(#resolved)
 	local _callback_1 = function(column, index)
@@ -90,22 +138,22 @@ local function Table(props)
 		local label = if type(_header) == "string" then headerText(column.header, active, sortDirection) else nil
 		local clickable = canSort(column.sortable, onSort ~= nil)
 		if clickable then
-			local _attributes_6 = {
+			local _attributes_8 = {
 				key = `h-{index}`,
 			}
 			for _k, _v in (cx(styles.cell, styles.headerCell)) do
-				_attributes_6[_k] = _v
+				_attributes_8[_k] = _v
 			end
 			local _condition_1 = label
 			if _condition_1 == nil then
 				_condition_1 = ""
 			end
-			_attributes_6.Text = _condition_1
-			_attributes_6.Size = box
-			_attributes_6.TextXAlignment = align
-			_attributes_6.AutoButtonColor = false
-			_attributes_6.LayoutOrder = index
-			_attributes_6.Event = {
+			_attributes_8.Text = _condition_1
+			_attributes_8.Size = box
+			_attributes_8.TextXAlignment = align
+			_attributes_8.AutoButtonColor = false
+			_attributes_8.LayoutOrder = index
+			_attributes_8.Event = {
 				Activated = function()
 					local _result = onSort
 					if _result ~= nil then
@@ -114,20 +162,20 @@ local function Table(props)
 					return _result
 				end,
 			}
-			return React.createElement("textbutton", _attributes_6, label == nil and (column.header))
+			return React.createElement("textbutton", _attributes_8, label == nil and (column.header))
 		end
 		if label ~= nil then
-			local _attributes_6 = {
+			local _attributes_8 = {
 				key = `h-{index}`,
 			}
 			for _k, _v in cx(styles.cell, styles.headerCell) do
-				_attributes_6[_k] = _v
+				_attributes_8[_k] = _v
 			end
-			_attributes_6.Text = label
-			_attributes_6.Size = box
-			_attributes_6.TextXAlignment = align
-			_attributes_6.LayoutOrder = index
-			return React.createElement("textlabel", _attributes_6)
+			_attributes_8.Text = label
+			_attributes_8.Size = box
+			_attributes_8.TextXAlignment = align
+			_attributes_8.LayoutOrder = index
+			return React.createElement("textlabel", _attributes_8)
 		end
 		return React.createElement("frame", {
 			key = `h-{index}`,
@@ -142,32 +190,11 @@ local function Table(props)
 		_newValue_1[_k] = _callback_1(_v, _k - 1, resolved)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement(React.Fragment, nil, _newValue_1))
+	local _exp_5 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement("frame", _attributes_6, _exp_4, React.createElement(React.Fragment, nil, _newValue_1)))
 	-- ▼ ReadonlyArray.map ▼
-	local _newValue_2 = table.create(#rows)
-	local _callback_2 = function(cells, rowIndex)
-		local _attributes_6 = {
-			key = `r-{rowIndex}`,
-		}
-		for _k, _v in cx(styles.row, rowSelected(rowIndex, selected) and styles.selected) do
-			_attributes_6[_k] = _v
-		end
-		_attributes_6.LayoutOrder = rowIndex + 1
-		_attributes_6.Event = {
-			Activated = function()
-				local _result = onRowActivated
-				if _result ~= nil then
-					_result = _result(rowIndex)
-				end
-				return _result
-			end,
-		}
-		local _attributes_7 = table.clone(styles.padding)
-		setmetatable(_attributes_7, nil)
-		local _exp_5 = React.createElement("uipadding", _attributes_7)
-		local _attributes_8 = table.clone(styles.cells)
-		setmetatable(_attributes_8, nil)
-		local _exp_6 = React.createElement("uilistlayout", _attributes_8)
+	local _newValue_2 = table.create(#order)
+	local _callback_2 = function(rowIndex, place)
+		local cells = rows[rowIndex + 1]
 		-- ▼ ReadonlyArray.map ▼
 		local _newValue_3 = table.create(#resolved)
 		local _callback_3 = function(column, colIndex)
@@ -175,21 +202,23 @@ local function Table(props)
 			local box = UDim2.new(size.scale, size.offset, 0, 0)
 			local value = cells[colIndex + 1]
 			if isTextCell(value) then
-				local _attributes_9 = {
+				local _attributes_8 = {
 					key = `c-{rowIndex}-{colIndex}`,
 				}
 				for _k, _v in styles.cell do
-					_attributes_9[_k] = _v
+					_attributes_8[_k] = _v
 				end
 				local _condition_1 = value
 				if _condition_1 == nil then
 					_condition_1 = ""
 				end
-				_attributes_9.Text = _condition_1
-				_attributes_9.Size = box
-				_attributes_9.TextXAlignment = textAlign(column.align)
-				_attributes_9.LayoutOrder = colIndex
-				return React.createElement("textlabel", _attributes_9)
+				_attributes_8.Text = _condition_1
+				_attributes_8.Size = box
+				_attributes_8.TextXAlignment = textAlign(column.align)
+				_attributes_8.TextWrapped = column.wrap
+				_attributes_8.TextTruncate = if column.wrap then Enum.TextTruncate.None else Enum.TextTruncate.AtEnd
+				_attributes_8.LayoutOrder = colIndex
+				return React.createElement("textlabel", _attributes_8)
 			end
 			return React.createElement("frame", {
 				key = `c-{rowIndex}-{colIndex}`,
@@ -204,13 +233,26 @@ local function Table(props)
 			_newValue_3[_k] = _callback_3(_v, _k - 1, resolved)
 		end
 		-- ▲ ReadonlyArray.map ▲
-		return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, React.createElement(React.Fragment, nil, _newValue_3))
+		return React.createElement(TableRow, {
+			key = `r-{rowIndex}`,
+			rowIndex = rowIndex,
+			place = place,
+			selected = rowSelected(rowIndex, selected),
+			styles = styles,
+			onActivated = function()
+				local _result = onRowActivated
+				if _result ~= nil then
+					_result = _result(rowIndex)
+				end
+				return _result
+			end,
+		}, React.createElement(React.Fragment, nil, _newValue_3))
 	end
-	for _k, _v in rows do
-		_newValue_2[_k] = _callback_2(_v, _k - 1, rows)
+	for _k, _v in order do
+		_newValue_2[_k] = _callback_2(_v, _k - 1, order)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_4, React.createElement(React.Fragment, nil, _newValue_2))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_5, React.createElement(React.Fragment, nil, _newValue_2))
 end
 local default = Table
 return {

package/out/ui/packages/table/components/Table.styles.luau

@@ -7,6 +7,7 @@ local useTableStyles = componentStyles("Table", function(theme, _param)
 	local dense = _param.dense
 	local padY = theme.padding.calc(if dense == true then 0.5 else 1)
 	local padX = theme.padding.calc(if dense == true then 1 else 1.5)
+	local heading = theme.typography.variants.h6
 	local textSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body
 	return createStyles({
 		root = {
@@ -33,12 +34,22 @@ local useTableStyles = componentStyles("Table", function(theme, _param)
 			BackgroundColor3 = theme.palette.action.selected,
 			BackgroundTransparency = 0,
 		},
+		hover = {
+			BackgroundColor3 = theme.palette.action.hover,
+			BackgroundTransparency = 0,
+		},
 		header = {
 			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundColor3 = theme.palette.surface.input,
+			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 		},
+		rowStroke = {
+			Color = theme.palette.divider,
+			Thickness = 1,
+			Transparency = 0,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
 		cells = {
 			FillDirection = Enum.FillDirection.Horizontal,
 			SortOrder = Enum.SortOrder.LayoutOrder,
@@ -54,14 +65,20 @@ local useTableStyles = componentStyles("Table", function(theme, _param)
 			TextTruncate = Enum.TextTruncate.AtEnd,
 		},
 		headerCell = {
-			Font = theme.typography.fontFamilies.semibold,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
 			TextColor3 = theme.palette.text.secondary,
 		},
-		padding = {
-			PaddingTop = UDim.new(0, padY),
+		band = {
+			Position = UDim2.new(0, padX, 0, padY),
+			Size = UDim2.new(1, -(padX * 2), 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		tail = {
 			PaddingBottom = UDim.new(0, padY),
-			PaddingLeft = UDim.new(0, padX),
-			PaddingRight = UDim.new(0, padX),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/out/ui/packages/table/components/tableColumns.d.ts

@@ -6,6 +6,7 @@ export interface TableColumnSpec {
     flex?: number;
     align?: TableAlign;
     sortable?: boolean;
+    wrap?: boolean;
 }
 export interface ResolvedColumn {
     header: unknown;
@@ -13,6 +14,7 @@ export interface ResolvedColumn {
     flex?: number;
     align: TableAlign;
     sortable: boolean;
+    wrap: boolean;
 }
 export interface ColumnSize {
     scale: number;

package/out/ui/packages/table/components/tableColumns.luau

@@ -6,6 +6,7 @@ local function resolveColumn(column)
 			header = column,
 			align = "left",
 			sortable = false,
+			wrap = false,
 		}
 	end
 	return {
@@ -14,6 +15,7 @@ local function resolveColumn(column)
 		flex = column.flex,
 		align = column.align or "left",
 		sortable = column.sortable == true,
+		wrap = column.wrap == true,
 	}
 end
 --* Scale/offset for each column. Number widths are scales. Flex shares whatever scale is left. 

package/out/ui/packages/table/components/tableSort.d.ts

@@ -0,0 +1,2 @@
+/** Source indexes in sort order. Ties keep the original row order. */
+export declare function sortedRowOrder(rows: ReadonlyArray<ReadonlyArray<unknown>>, column?: number, direction?: "asc" | "desc"): number[];

package/out/ui/packages/table/components/tableSort.luau

@@ -0,0 +1,95 @@
+-- Compiled with roblox-ts v3.0.0
+local function sortKey(value)
+	local _value = value
+	if type(_value) == "number" then
+		return value
+	end
+	local _value_1 = value
+	local _condition = type(_value_1) == "string"
+	if _condition then
+		_condition = value ~= ""
+	end
+	if _condition then
+		local numeric = tonumber(value)
+		if numeric ~= nil then
+			return numeric
+		end
+		return value
+	end
+	return ""
+end
+local function keyBefore(left, right)
+	local _left = left
+	local _condition = type(_left) == "number"
+	if _condition then
+		local _right = right
+		_condition = type(_right) == "number"
+	end
+	if _condition then
+		return left < right
+	end
+	local _left_1 = left
+	local leftText = if type(_left_1) == "number" then `{left}` else left
+	local _right = right
+	local rightText = if type(_right) == "number" then `{right}` else right
+	return leftText < rightText
+end
+local function rowBefore(rows, left, right, column, desc)
+	local leftKey = sortKey(rows[left + 1][column + 1])
+	local rightKey = sortKey(rows[right + 1][column + 1])
+	if leftKey == rightKey then
+		return false
+	end
+	local before = keyBefore(leftKey, rightKey)
+	return if desc then not before else before
+end
+--* Source indexes in sort order. Ties keep the original row order. 
+local function sortedRowOrder(rows, column, direction)
+	local count = #rows
+	local order = {}
+	do
+		local index = 0
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				index += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (index < count) then
+				break
+			end
+			local _index = index
+			table.insert(order, _index)
+		end
+	end
+	if column == nil then
+		return order
+	end
+	local desc = direction == "desc"
+	do
+		local index = 1
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				index += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (index < count) then
+				break
+			end
+			local current = order[index + 1]
+			local slot = index
+			while slot > 0 and rowBefore(rows, current, order[slot], column, desc) do
+				order[slot + 1] = order[slot]
+				slot -= 1
+			end
+			order[slot + 1] = current
+		end
+	end
+	return order
+end
+return {
+	sortedRowOrder = sortedRowOrder,
+}

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

@@ -1,3 +1,4 @@
 export { default as Table } from "./components/Table";
 export { TableProps, TableColumn, TableCell } from "./components/Table";
 export { TableAlign, TableSortDirection } from "./components/tableColumns";
+export { sortedRowOrder } from "./components/tableSort";

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

@@ -2,4 +2,5 @@
 local TS = _G[script]
 local exports = {}
 exports.Table = TS.import(script, script, "components", "Table").default
+exports.sortedRowOrder = TS.import(script, script, "components", "tableSort").sortedRowOrder
 return exports

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

@@ -1,10 +1,14 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local stepChoice = TS.import(script, script.Parent.Parent.Parent, "select", "components", "stepChoice").stepChoice
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local tabScroll = TS.import(script, script.Parent, "tabScroll").tabScroll
 local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
 local useTabsStyles = TS.import(script, script.Parent, "Tabs.styles").default
 local function Tabs(props)
@@ -24,12 +28,61 @@ local function Tabs(props)
 		centered = centered,
 	})
 	local vertical = tabsIsVertical(orientation)
+	local frame = useRef()
+	local tabs = useRef({})
 	local choose = function(index)
 		local choice = options[index + 1]
 		if choice ~= nil and canActivate(disabled or choice.disabled) and choice.value ~= value then
 			onChange(choice.value)
 		end
 	end
+	useEffect(function()
+		local alive = true
+		local reveal = function()
+			if not alive then
+				return nil
+			end
+			local host = frame.current
+			if host == nil then
+				return nil
+			end
+			-- ▼ ReadonlyArray.findIndex ▼
+			local _callback = function(option)
+				return option.value == value
+			end
+			local _result = -1
+			for _i, _v in options do
+				if _callback(_v, _i - 1, options) == true then
+					_result = _i - 1
+					break
+				end
+			end
+			-- ▲ ReadonlyArray.findIndex ▲
+			local index = _result
+			local tab = tabs.current[index + 1]
+			if tab == nil then
+				return nil
+			end
+			local current = if vertical then host.CanvasPosition.Y else host.CanvasPosition.X
+			local origin = if vertical then host.AbsolutePosition.Y else host.AbsolutePosition.X
+			local start = if vertical then tab.AbsolutePosition.Y else tab.AbsolutePosition.X
+			local size = if vertical then tab.AbsoluteSize.Y else tab.AbsoluteSize.X
+			local view = if vertical then host.AbsoluteSize.Y else host.AbsoluteSize.X
+			if view <= 0 then
+				return nil
+			end
+			local scrolled = tabScroll(current, start - (origin - current), size, view)
+			if math.abs(scrolled - current) < 1 then
+				return nil
+			end
+			host.CanvasPosition = if vertical then Vector2.new(host.CanvasPosition.X, scrolled) else Vector2.new(scrolled, host.CanvasPosition.Y)
+		end
+		-- Next frame. A deferred scroll write runs inside this effect flush and re-enters render.
+		task.delay(0, reveal)
+		return function()
+			alive = false
+		end
+	end, { value, vertical, #options })
 	local onKey = function(_, input)
 		-- ▼ ReadonlyArray.findIndex ▼
 		local _callback = function(option)
@@ -60,7 +113,17 @@ local function Tabs(props)
 		_condition = "Tabs"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
+	_attributes.hostRef = function(instance)
+		frame.current = instance
+		if ref == nil then
+			return nil
+		end
+		if type(ref) == "function" then
+			ref(instance)
+		else
+			ref.current = instance
+		end
+	end
 	_attributes.base = styles.root
 	_attributes.className = className
 	_attributes.sx = sx
@@ -83,6 +146,11 @@ local function Tabs(props)
 		end
 		_attributes_2.Text = choice.label
 		_attributes_2.LayoutOrder = index
+		_attributes_2.ref = function(rbx)
+			if rbx ~= nil then
+				tabs.current[index + 1] = rbx
+			end
+		end
 		_attributes_2.Active = active
 		_attributes_2.Selectable = active
 		_attributes_2.Event = {
@@ -94,17 +162,20 @@ local function Tabs(props)
 		local _attributes_3 = table.clone(styles.padding)
 		setmetatable(_attributes_3, nil)
 		local _exp_1 = React.createElement("uipadding", _attributes_3)
+		local _attributes_4 = table.clone(styles.cap)
+		setmetatable(_attributes_4, nil)
+		local _exp_2 = React.createElement("uisizeconstraint", _attributes_4)
 		local _condition_1 = selected
 		if _condition_1 then
-			local _attributes_4 = {
+			local _attributes_5 = {
 				key = "Indicator",
 			}
 			for _k, _v in styles.indicator do
-				_attributes_4[_k] = _v
+				_attributes_5[_k] = _v
 			end
-			_condition_1 = React.createElement("frame", _attributes_4)
+			_condition_1 = React.createElement("frame", _attributes_5)
 		end
-		return React.createElement("textbutton", _attributes_2, _exp_1, _condition_1)
+		return React.createElement("textbutton", _attributes_2, _exp_1, _exp_2, _condition_1)
 	end
 	for _k, _v in options do
 		_newValue[_k] = _callback(_v, _k - 1, options)

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

@@ -3,12 +3,15 @@ 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 tabIndicatorBox = TS.import(script, script.Parent, "tabIndicator").tabIndicatorBox
 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)
+	local gutter = theme.padding.calc(2)
+	local mark = tabIndicatorBox(vertical, bar, gutter)
 	return createStyles({
 		root = {
 			Size = if vertical then UDim2.new(0, theme.spacing.calc(16), 1, 0) else UDim2.new(1, 0, 0, theme.spacing.calc(4)),
@@ -37,6 +40,10 @@ local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextXAlignment = if vertical then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+		},
+		cap = {
+			MaxSize = Vector2.new(if vertical then math.huge else theme.spacing.calc(16), math.huge),
 		},
 		selected = {
 			TextColor3 = theme.palette.text.primary,
@@ -50,19 +57,13 @@ local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 			PaddingTop = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
 			PaddingBottom = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
 		},
-		indicator = if vertical then ({
-			Size = UDim2.new(0, bar, 1, -theme.padding.calc(2)),
-			Position = UDim2.new(0, 0, 0.5, 0),
-			AnchorPoint = Vector2.new(0, 0.5),
-			BackgroundColor3 = theme.palette.primary.main,
-			BorderSizePixel = 0,
-		}) else ({
-			Size = UDim2.new(1, theme.padding.calc(4), 0, bar),
-			Position = UDim2.fromScale(0.5, 1),
-			AnchorPoint = Vector2.new(0.5, 1),
+		indicator = {
+			Size = UDim2.new(mark.widthScale, mark.widthOffset, mark.heightScale, mark.heightOffset),
+			Position = if vertical then UDim2.new(0, 0, 0.5, 0) else UDim2.fromScale(0.5, 1),
+			AnchorPoint = if vertical then Vector2.new(0, 0.5) else Vector2.new(0.5, 1),
 			BackgroundColor3 = theme.palette.primary.main,
 			BorderSizePixel = 0,
-		}),
+		},
 	})
 end)
 local default = useTabsStyles

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

@@ -0,0 +1,7 @@
+/** Indicator box inside a tab. Horizontal width stays on the tab; a positive width offset spills into the next one. */
+export declare function tabIndicatorBox(vertical: boolean, bar: number, gutter: number): {
+    widthScale: number;
+    widthOffset: number;
+    heightScale: number;
+    heightOffset: number;
+};