Organize the categories of widget component props

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -529,7 +529,7 @@
 			<LayoutRow>
 				{@const hexDescription = "Color code in hexadecimal format. 6 digits if opaque, 8 with alpha. Accepts input of CSS color values including named colors."}
 				<TextLabel tooltipLabel="Hex Color Code" tooltipDescription={hexDescription}>Hex</TextLabel>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<LayoutRow>
 					<TextInput
 						value={newColor.toHexOptionalAlpha() || "-"}
@@ -547,11 +547,11 @@
 			</LayoutRow>
 			<LayoutRow>
 				<TextLabel tooltipLabel="Red/Green/Blue" tooltipDescription="Integers 0–255.">RGB</TextLabel>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<LayoutRow>
 					{#each rgbChannels as [channel, strength], index}
 						{#if index > 0}
-							<Separator type="Related" />
+							<Separator style="Related" />
 						{/if}
 						<NumberInput
 							value={strength}
@@ -578,11 +578,11 @@
 					tooltipLabel="Hue/Saturation/Value"
 					tooltipDescription="Also known as Hue/Saturation/Brightness (HSB). Not to be confused with Hue/Saturation/Lightness (HSL), a different color model.">HSV</TextLabel
 				>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<LayoutRow>
 					{#each hsvChannels as [channel, strength], index}
 						{#if index > 0}
-							<Separator type="Related" />
+							<Separator style="Related" />
 						{/if}
 						<NumberInput
 							value={strength}
@@ -616,7 +616,7 @@
 			<LayoutRow>
 				{@const alphaDescription = "The level of translucency, from transparent (0%) to opaque (100%)."}
 				<TextLabel tooltipLabel="Alpha" tooltipDescription={alphaDescription}>Alpha</TextLabel>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<NumberInput
 					value={!isNone ? alpha * 100 : undefined}
 					{disabled}
@@ -649,7 +649,7 @@
 						data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 						tabindex="0"
 					></button>
-					<Separator type="Related" />
+					<Separator style="Related" />
 				{/if}
 				<button
 					class="preset-color black"
@@ -659,7 +659,7 @@
 					data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 					tabindex="0"
 				></button>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<button
 					class="preset-color white"
 					{disabled}
@@ -668,7 +668,7 @@
 					data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 					tabindex="0"
 				></button>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<button class="preset-color pure" {disabled} on:click={setColorPresetSubtile} tabindex="-1">
 					{#each PURE_COLORS_GRAYABLE as [name, color, gray]}
 						<div
@@ -681,7 +681,7 @@
 					{/each}
 				</button>
 				{#if eyedropperSupported()}
-					<Separator type="Related" />
+					<Separator style="Related" />
 					<IconButton icon="Eyedropper" size={24} {disabled} action={activateEyedropperSample} tooltipLabel="Eyedropper" tooltipDescription="Sample a pixel color from the document." />
 				{/if}
 			</LayoutRow>

frontend/src/components/floating-menus/MenuList.svelte

@@ -437,7 +437,7 @@
 		{/if}
 		{#each reactiveEntries as section, sectionIndex (sectionIndex)}
 			{#if includeSeparator(reactiveEntries, section, sectionIndex, search)}
-				<Separator type="Section" direction="Vertical" />
+				<Separator style="Section" direction="Vertical" />
 			{/if}
 			{#each currentEntries(section, virtualScrollingEntryHeight, virtualScrollingStartIndex, virtualScrollingEndIndex, search) as entry, entryIndex (entryIndex + startIndex)}
 				<LayoutRow

frontend/src/components/floating-menus/NodeCatalog.svelte

@@ -12,7 +12,9 @@
 	const dispatch = createEventDispatcher<{ selectNodeType: string }>();
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
+	// Content
 	export let disabled = false;
+	// Behavior
 	export let initialSearchTerm = "";
 
 	let nodeSearchInput: TextInput | undefined = undefined;

frontend/src/components/panels/Document.svelte

@@ -714,7 +714,7 @@
 							// 	}
 							// }
 
-							&:not(.active) {
+							&:not(.emphasized) {
 								.color-general {
 									fill: var(--color-data-general);
 								}

frontend/src/components/widgets/WidgetSpan.svelte

@@ -28,7 +28,6 @@
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import ShortcutLabel from "@graphite/components/widgets/labels/ShortcutLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
 	const editor = getContext<Editor>("editor");
 
@@ -163,9 +162,7 @@
 		{/if}
 		{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
 		{#if popoverButton}
-			<PopoverButton {...exclude(popoverButton, ["popoverLayout"])}>
-				<WidgetLayout layout={popoverButton.popoverLayout} {layoutTarget} />
-			</PopoverButton>
+			<PopoverButton {...exclude(popoverButton)} {layoutTarget} />
 		{/if}
 		{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}
 		{#if radioInput}

frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte

@@ -4,8 +4,10 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 
+	// Content
 	export let labels: string[];
 	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/buttons/IconButton.svelte

@@ -4,11 +4,14 @@
 
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
+	// Content
 	export let icon: IconName;
 	export let hoverIcon: IconName | undefined = undefined;
 	export let size: IconSize;
 	export let disabled = false;
-	export let active = false;
+	// Styling
+	export let emphasized = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
@@ -28,13 +31,13 @@
 	class={`icon-button size-${size} ${className} ${extraClasses}`.trim()}
 	class:hover-icon={hoverIcon && !disabled}
 	class:disabled
-	class:active
+	class:emphasized
 	on:click={action}
 	{disabled}
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}
 	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
-	tabindex={active ? -1 : 0}
+	tabindex={emphasized ? -1 : 0}
 	{...$$restProps}
 >
 	<IconLabel {icon} />
@@ -86,7 +89,7 @@
 			}
 		}
 
-		&.active {
+		&.emphasized {
 			background: var(--color-e-nearwhite);
 
 			svg {

frontend/src/components/widgets/buttons/ImageButton.svelte

@@ -6,9 +6,11 @@
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
 
+	// Content
 	export let image: string;
 	export let width: string | undefined;
 	export let height: string | undefined;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/buttons/ParameterExposeButton.svelte

@@ -3,8 +3,10 @@
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
+	// Content
 	export let exposed: boolean;
 	export let dataType: FrontendGraphDataType;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/buttons/PopoverButton.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
 	import { type IconName, type PopoverButtonStyle } from "@graphite/icons";
 
-	import type { MenuDirection, ActionShortcut } from "@graphite/messages";
+	import type { MenuDirection, ActionShortcut, Layout, LayoutTarget } from "@graphite/messages";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
+	export let layoutTarget: LayoutTarget;
+
+	// Content
 	export let style: PopoverButtonStyle = "DropdownArrow";
-	export let menuDirection: MenuDirection = "Bottom";
 	export let icon: IconName | undefined = undefined;
+	export let disabled = false;
+	// Children
+	export let popoverLayout: Layout;
+	export let popoverMinWidth = 1;
+	export let menuDirection: MenuDirection = "Bottom";
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let disabled = false;
-	export let popoverMinWidth = 1;
-
 	// Callbacks
 	export let action: (() => void) | undefined = undefined;
 
@@ -46,7 +52,7 @@
 	{/if}
 
 	<FloatingMenu {open} on:open={({ detail }) => (open = detail)} minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>
-		<slot />
+		<WidgetLayout layout={popoverLayout} {layoutTarget} />
 	</FloatingMenu>
 </LayoutRow>
 

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -13,22 +13,27 @@
 
 	let self: MenuList;
 
-	// Note: IconButton should be used if only an icon, but no label, is desired.
+	// Note: IconButton should instead be used if only an icon, but no label, is desired.
 	// However, if multiple TextButton widgets are used in a group with only some having no label, this component is able to accommodate that.
+
+	// Content
 	export let label: string;
 	export let icon: IconName | undefined = undefined;
 	export let hoverIcon: IconName | undefined = undefined;
+	export let disabled = false;
+	// Children
+	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
+	export let menuListChildrenHash: bigint | undefined = undefined;
+	// Styling
 	export let emphasized = false;
 	export let flush = false;
-	export let minWidth = 0;
-	export let disabled = false;
 	export let narrow = false;
+	// Sizing
+	export let minWidth = 0;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
-	export let menuListChildrenHash: bigint | undefined = undefined;
-
 	// Callbacks
 	// TODO: Replace this with an event binding (and on other components that do this)
 	export let action: (() => void) | undefined;

frontend/src/components/widgets/inputs/CheckboxInput.svelte

@@ -8,19 +8,20 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
 	const dispatch = createEventDispatcher<{ checked: boolean }>();
+	const backupId = String(Math.random()).substring(2);
 
+	// Content
 	export let checked = false;
-	export let disabled = false;
 	export let icon: IconName = "Checkmark";
+	export let forLabel: bigint | undefined = undefined;
+	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let forLabel: bigint | undefined = undefined;
 
 	let inputElement: HTMLInputElement | undefined;
 
-	const backupId = String(Math.random()).substring(2);
-
 	$: id = forLabel !== undefined ? String(forLabel) : backupId;
 	$: displayIcon = (!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName;
 

frontend/src/components/widgets/inputs/ColorInput.svelte

@@ -9,18 +9,21 @@
 
 	const dispatch = createEventDispatcher<{ value: FillChoice; startHistoryTransaction: undefined }>();
 
-	let open = false;
-
+	// Content
 	export let value: FillChoice;
-	export let disabled = false;
-	export let narrow = false;
 	export let allowNone = false;
-	export let menuDirection: MenuDirection = "Bottom";
 	// export let allowTransparency = false; // TODO: Implement
+	export let menuDirection: MenuDirection = "Bottom";
+	export let disabled = false;
+	// Styling
+	export let narrow = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
+	let open = false;
+
 	$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
 	$: outlined = outlineFactor > 0.0001;
 	$: chosenGradient = value instanceof Gradient ? value.toLinearGradientCSS() : `linear-gradient(${value.toHexOptionalAlpha()}, ${value.toHexOptionalAlpha()})`;

frontend/src/components/widgets/inputs/CurveInput.svelte

@@ -10,18 +10,15 @@
 		value: Curve;
 	}>();
 
-	export let classes: Record<string, boolean> = {};
-	let styleName = "";
-	export { styleName as style };
-	export let styles: Record<string, string | number | undefined> = {};
+	const GRID_SIZE = 4;
+
+	// Content
 	export let value: Curve;
-	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
-	const GRID_SIZE = 4;
-
 	let manipulatorsList: CurveManipulatorGroup[] = [
 		{
 			anchor: [0, 0],
@@ -190,7 +187,7 @@
 	}
 </script>
 
-<LayoutRow class="curve-input" classes={{ disabled, ...classes }} style={styleName} {styles} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
+<LayoutRow class="curve-input" {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
 	<svg viewBox="0 0 1 1" on:pointermove={handlePointerMove} on:pointerup={handlePointerUp}>
 		{#each { length: GRID_SIZE - 1 } as _, i}
 			<path class="grid" d={`M 0 ${(i + 1) / GRID_SIZE} L 1 ${(i + 1) / GRID_SIZE}`} />

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -14,19 +14,25 @@
 
 	let self: LayoutRow | undefined;
 
-	export let entries: MenuListEntry[][];
-	export let entriesHash: bigint | undefined = undefined;
+	// Content
 	export let selectedIndex: number | undefined = undefined; // When not provided, a dash is displayed
 	export let drawIcon = false;
-	export let interactive = true;
 	export let disabled = false;
+	// Children
+	export let entries: MenuListEntry[][];
+	export let entriesHash: bigint | undefined = undefined;
+	// Styling
 	export let narrow = false;
+	// Behavior
 	export let virtualScrolling = false;
+	export let interactive = true;
+	// Sizing
+	export let minWidth = 0;
+	export let maxWidth = 0;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let minWidth = 0;
-	export let maxWidth = 0;
 
 	let activeEntry = makeActiveEntry();
 	let activeEntrySkipWatcher = false;

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -16,51 +16,44 @@
 
 	const dispatch = createEventDispatcher<{ value: number | undefined; startHistoryTransaction: undefined }>();
 
-	// Label
+	// Content
+	/// When `value` is not provided (i.e. it's `undefined`), a dash is displayed.
+	export let value: number | undefined = undefined;
 	export let label: string | undefined = undefined;
-	export let tooltipLabel: string | undefined = undefined;
-	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-
-	// Disabled
 	export let disabled = false;
-
-	// Narrow
+	// Styling
 	export let narrow = false;
-
-	// Value
-	// When `value` is not provided (i.e. it's `undefined`), a dash is displayed.
-	export let value: number | undefined = undefined; // NOTE: Do not update this directly, do so by calling `updateValue()` instead.
+	// Behavior
+	/// Mode behavior
+	/// "Increment" shows arrows and allows dragging left/right to change the value.
+	/// "Range" shows a range slider between some minimum and maximum value.
+	export let mode: NumberInputMode = "Increment";
 	export let min: number | undefined = undefined;
 	export let max: number | undefined = undefined;
+	/// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
+	/// They set the lower and upper values of the slider to drag between.
+	export let rangeMin = 0;
+	export let rangeMax = 1;
+	/// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
+	/// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
+	export let step = 1;
 	export let isInteger = false;
-
-	// Number presentation
+	/// `incrementBehavior` is only applicable with a `mode` of "Increment".
+	/// "Add"/"Multiply": The value is added or multiplied by `step`.
+	/// "None": the increment arrows are not shown.
+	/// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
+	export let incrementBehavior: NumberInputIncrementBehavior = "Add";
 	export let displayDecimalPlaces = 2;
 	export let unit = "";
 	export let unitIsHiddenWhenEditing = true;
 
-	// Mode behavior
-	// "Increment" shows arrows and allows dragging left/right to change the value.
-	// "Range" shows a range slider between some minimum and maximum value.
-	export let mode: NumberInputMode = "Increment";
-	// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
-	// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
-	export let step = 1;
-	// `incrementBehavior` is only applicable with a `mode` of "Increment".
-	// "Add"/"Multiply": The value is added or multiplied by `step`.
-	// "None": the increment arrows are not shown.
-	// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
-	export let incrementBehavior: NumberInputIncrementBehavior = "Add";
-	// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
-	// They set the lower and upper values of the slider to drag between.
-	export let rangeMin = 0;
-	export let rangeMax = 1;
-
-	// Styling
+	// Sizing
 	export let minWidth = 0;
 	export let maxWidth = 0;
-
+	// Tooltips
+	export let tooltipLabel: string | undefined = undefined;
+	export let tooltipDescription: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// Callbacks
 	export let incrementCallbackIncrease: (() => void) | undefined = undefined;
 	export let incrementCallbackDecrease: (() => void) | undefined = undefined;
@@ -91,7 +84,6 @@
 	let ctrlKeyDown = false;
 
 	$: watchValue(value, unit);
-
 	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
 	$: styles = {
 		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),

frontend/src/components/widgets/inputs/RadioInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import { type RadioEntries, type RadioEntryData } from "@graphite/messages";
+	import { type RadioEntryData } from "@graphite/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -9,11 +9,15 @@
 
 	const dispatch = createEventDispatcher<{ selectedIndex: number }>();
 
-	export let entries: RadioEntries;
+	// Content
 	export let selectedIndex: number | undefined = undefined;
 	export let disabled = false;
-	export let minWidth = 0;
+	// Children
+	export let entries: RadioEntryData[];
+	// Styling
 	export let narrow = false;
+	// Sizing
+	export let minWidth = 0;
 
 	$: mixed = selectedIndex === undefined && !disabled;
 

frontend/src/components/widgets/inputs/ReferencePointInput.svelte

@@ -5,8 +5,10 @@
 
 	const dispatch = createEventDispatcher<{ value: ReferencePoint }>();
 
+	// Content
 	export let value: string;
 	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/inputs/TextInput.svelte

@@ -7,22 +7,21 @@
 
 	const dispatch = createEventDispatcher<{ commitText: string }>();
 
-	// Label
+	// Content
+	export let value: string;
 	export let label: string | undefined = undefined;
+	export let placeholder: string | undefined = undefined;
+	export let disabled = false;
+	// Styling
+	export let narrow = false;
+	export let centered = false;
+	// Sizing
+	export let minWidth = 0;
+	export let maxWidth = 0;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let placeholder: string | undefined = undefined;
-	// Disabled
-	export let disabled = false;
-	// Narrow
-	export let narrow = false;
-	// Value
-	export let value: string;
-	// Styling
-	export let centered = false;
-	export let minWidth = 0;
-	export let maxWidth = 0;
 
 	let className = "";
 	export { className as class };

frontend/src/components/widgets/inputs/WorkingColorsInput.svelte

@@ -10,6 +10,7 @@
 
 	const editor = getContext<Editor>("editor");
 
+	// Content
 	export let primary: Color;
 	export let secondary: Color;
 

frontend/src/components/widgets/labels/IconLabel.svelte

@@ -7,9 +7,13 @@
 	let className = "";
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
-	export let icon: IconName;
+
 	export let iconSizeOverride: number | undefined = undefined;
+
+	// Content
+	export let icon: IconName;
 	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/labels/ImageLabel.svelte

@@ -5,9 +5,11 @@
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
 
+	// Content
 	export let url: string;
 	export let width: string | undefined;
 	export let height: string | undefined;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/labels/Separator.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { type SeparatorDirection, type SeparatorType } from "@graphite/messages";
+	import { type SeparatorDirection, type SeparatorStyle } from "@graphite/messages";
 
+	// Content
 	export let direction: SeparatorDirection = "Horizontal";
-	export let type: SeparatorType = "Unrelated";
+	export let style: SeparatorStyle = "Unrelated";
 </script>
 
-<div class={`separator ${direction.toLowerCase()} ${type.toLowerCase()}`}>
-	{#if type === "Section"}
+<div class={`separator ${direction.toLowerCase()} ${style.toLowerCase()}`}>
+	{#if style === "Section"}
 		<div />
 	{/if}
 </div>

frontend/src/components/widgets/labels/ShortcutLabel.svelte

@@ -7,6 +7,7 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
+	// Content
 	export let shortcut: ActionShortcut;
 
 	function keyTextOrIconList(keyGroup: LabeledShortcut): ({ label?: string; icon?: IconName }[] | { mouseMotion?: MouseMotion }[])[] {

frontend/src/components/widgets/labels/TextLabel.svelte

@@ -7,19 +7,26 @@
 	let styleName = "";
 	export { styleName as style };
 	export let styles: Record<string, string | number | undefined> = {};
+
+	// Content
+	// `value` is passed via slot
 	export let disabled = false;
+	export let forCheckbox: bigint | undefined = undefined;
+	// Styling
 	export let narrow = false;
 	export let bold = false;
 	export let italic = false;
 	export let monospace = false;
+	export let multiline = false;
 	export let centerAlign = false;
 	export let tableAlign = false;
-	export let minWidth = "";
-	export let multiline = false;
+	// Sizing
+	export let minWidth = 0;
+	export let minWidthCharacters = 0;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let forCheckbox: bigint | undefined = undefined;
 
 	$: extraClasses = Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
@@ -39,7 +46,7 @@
 	class:multiline
 	class:center-align={centerAlign}
 	class:table-align={tableAlign}
-	style:min-width={minWidth || undefined}
+	style:min-width={minWidthCharacters ? `${minWidthCharacters}ch` : minWidth || undefined}
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}