@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/form/SegmentedControl.svelte

@@ -1,21 +1,30 @@
 <script lang="ts">
 	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
 	import FormGroup from './FormGroup.svelte';
-	import { onMount, tick } from 'svelte';
+	import { onMount } from 'svelte';
 
-	export type SegmentedControlSize = 'default' | 'sm';
+	export type SegmentedControlSize = 'default' | 'lg';
 
-	interface Props {
+	export interface SegmentedControlProps {
+		/** Available segment options */
 		options: ComboBoxItem[];
+		/** Currently selected value (bindable) */
 		value?: any;
 		/** Label text displayed above the control */
 		label?: string;
-		/** Visual size: 'default' or 'sm' (sized to match Textbox/Select) */
+		/** Visual size: 'default' (sized to match Textbox/Select) or 'lg' */
 		size?: SegmentedControlSize;
+		/** Callback when selection changes */
 		onchange?: (value: string) => void;
 	}
 
-	let { options, value = $bindable(), label, size = 'default', onchange }: Props = $props();
+	let {
+		options,
+		value = $bindable(),
+		label,
+		size = 'default',
+		onchange
+	}: SegmentedControlProps = $props();
 
 	let containerRef: HTMLDivElement;
 	let buttonElements = $state<HTMLButtonElement[]>([]);
@@ -25,25 +34,13 @@
 	const selectedIndex = $derived(options.findIndex((option) => option.value === value));
 
 	onMount(() => {
-		// Recalculate after initial DOM render
-		tick().then(() => {
-			if (selectedIndex >= 0 && buttonElements[selectedIndex]) {
-				recalculateBackground();
-			}
-		});
-
-		// Use ResizeObserver to handle layout shifts (e.g. font loading, container resize)
-		const observer = new ResizeObserver(() => {
-			if (selectedIndex >= 0 && buttonElements[selectedIndex]) {
-				recalculateBackground();
-			}
-		});
-		observer.observe(containerRef);
-
-		return () => observer.disconnect();
+		// recalculate 10 times on startup to ensure background is positioned correctly
+		for (let i = 0; i < 10; i++) {
+			setTimeout(() => recalculateBackground(), 100 * i);
+		}
 	});
 
-	// Update background position and size when selection changes
+	// Update background position and size based on selected element
 	$effect(() => {
 		if (selectedIndex >= 0 && buttonElements[selectedIndex] && containerRef) {
 			recalculateBackground();
@@ -57,16 +54,30 @@
 		}
 	});
 
-	function recalculateBackground() {
+	/**
+	 * Recalculate the selected item background position/size (e.g. after a layout change).
+	 * @param delay Optional delay in milliseconds before measuring (e.g. to let a transition finish)
+	 */
+	export function recalculateBackground(delay?: number) {
+		if (delay) {
+			setTimeout(() => recalculateBackground(), delay);
+			return;
+		}
+
 		const selectedButton = buttonElements[selectedIndex];
+		if (!selectedButton || !containerRef) return;
+
 		const containerRect = containerRef.getBoundingClientRect();
 		const buttonRect = selectedButton.getBoundingClientRect();
 
-		const offsetLeft = buttonRect.left - containerRect.left;
+		// Absolute positioning is relative to the padding box, but getBoundingClientRect
+		// measures from the border's outer edge — subtract the border (clientLeft/clientTop)
+		const offsetLeft = buttonRect.left - containerRect.left - containerRef.clientLeft;
+		const offsetTop = buttonRect.top - containerRect.top - containerRef.clientTop;
 		const width = buttonRect.width;
 		const height = buttonRect.height;
 
-		backgroundStyle = `left: ${offsetLeft}px; width: ${width}px; height: ${height}px; top: ${buttonRect.top - containerRect.top}px;`;
+		backgroundStyle = `left: ${offsetLeft}px; width: ${width}px; height: ${height}px; top: ${offsetTop}px;`;
 	}
 
 	function setValue(newValue: any) {
@@ -76,7 +87,7 @@
 </script>
 
 {#snippet control()}
-	<div class="segmented-control size-{size}" bind:this={containerRef}>
+	<div class="segmented-control {size === 'lg' ? 'large' : ''}" bind:this={containerRef}>
 		<div class="segmented-control-background" style={backgroundStyle}></div>
 		{#each options as option, index}
 			{@const isSelected = option.value === value}
@@ -94,7 +105,9 @@
 
 {#if label}
 	<FormGroup {label}>
-		{@render control()}
+		<div class="segmented-control-container">
+			{@render control()}
+		</div>
 	</FormGroup>
 {:else}
 	{@render control()}
@@ -104,72 +117,79 @@
 	.segmented-control {
 		position: relative;
 		display: inline-flex;
-		background-color: var(--pui-color-gray-200);
-		border-radius: var(--pui-radius-lg);
-		padding: var(--pui-spacing-1);
+		background-color: #e5e7eb;
+		border-radius: 0.5rem;
+		border: 1px solid var(--border-color);
+		padding: 0.125rem;
 		user-select: none;
 	}
 
 	.segmented-control-background {
 		position: absolute;
-		background-color: var(--pui-color-white);
-		border-radius: var(--pui-radius-md);
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-		box-shadow: var(--pui-shadow-sm);
-	}
-
-	.segmented-control.size-sm {
-		padding: 2px;
-	}
-
-	.segmented-control.size-sm .segmented-control-item {
-		padding: var(--pui-spacing-1) var(--pui-spacing-3);
-		font-size: var(--pui-font-size-xs);
+		background-color: white;
+		border-radius: 0.375rem;
+		transition: all 0.2s ease-in-out;
+		box-shadow:
+			0 1px 3px 0 rgba(0, 0, 0, 0.1),
+			0 1px 2px 0 rgba(0, 0, 0, 0.06);
 	}
 
 	.segmented-control-item {
 		position: relative;
 		align-items: center;
 		justify-content: center;
-		padding: var(--pui-spacing-2) var(--pui-spacing-4);
 		cursor: pointer;
 		user-select: none;
 		border: none;
 		background: transparent;
-		border-radius: var(--pui-radius-md);
-		font-size: var(--pui-font-size-sm);
-		font-weight: var(--pui-font-weight-medium);
-		color: var(--pui-color-gray-500);
-		transition: color var(--pui-transition-fast) var(--pui-ease-in-out);
+		border-radius: 0.375rem;
+		padding: 0.125rem 0.75rem;
+		font-size: 0.875rem;
+		line-height: 1.5rem;
+		font-weight: 500;
+		color: #6b7280;
+		transition: color 0.2s ease-in-out;
 		z-index: 1;
 	}
 
 	.segmented-control-item:hover {
-		color: var(--pui-color-gray-700);
+		color: #374151;
 	}
 
 	.segmented-control-item.selected {
-		color: var(--pui-color-gray-900);
+		color: #111827;
+	}
+
+	/* Large size */
+	.segmented-control.large {
+		border: none;
+		padding: 0.25rem;
+	}
+
+	.segmented-control.large .segmented-control-item {
+		padding: 0.5rem 1rem;
+		line-height: inherit;
 	}
 
 	/* Dark mode styles */
 	:global(.dark) .segmented-control {
-		background-color: var(--pui-input-bg);
+		background-color: var(--input-bg-color);
+		border-color: var(--border-color);
 	}
 
 	:global(.dark) .segmented-control-background {
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-primary);
 	}
 
 	:global(.dark) .segmented-control-item {
-		color: var(--pui-color-gray-400);
+		color: #9ca3af;
 	}
 
 	:global(.dark) .segmented-control-item:hover {
-		color: var(--pui-color-gray-300);
+		color: #d1d5db;
 	}
 
 	:global(.dark) .segmented-control-item.selected {
-		color: var(--pui-color-gray-100);
+		color: #f9fafb;
 	}
 </style>

package/dist/form/SegmentedControl.svelte.d.ts

@@ -1,14 +1,19 @@
 import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-export type SegmentedControlSize = 'default' | 'sm';
-interface Props {
+export type SegmentedControlSize = 'default' | 'lg';
+export interface SegmentedControlProps {
+    /** Available segment options */
     options: ComboBoxItem[];
+    /** Currently selected value (bindable) */
     value?: any;
     /** Label text displayed above the control */
     label?: string;
-    /** Visual size: 'default' or 'sm' (sized to match Textbox/Select) */
+    /** Visual size: 'default' (sized to match Textbox/Select) or 'lg' */
     size?: SegmentedControlSize;
+    /** Callback when selection changes */
     onchange?: (value: string) => void;
 }
-declare const SegmentedControl: import("svelte").Component<Props, {}, "value">;
+declare const SegmentedControl: import("svelte").Component<SegmentedControlProps, {
+    recalculateBackground: (delay?: number) => void;
+}, "value">;
 type SegmentedControl = ReturnType<typeof SegmentedControl>;
 export default SegmentedControl;