Organize the categories of widget component props

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;