@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/form/RadioGroup.svelte

@@ -1,22 +1,41 @@
 <script lang="ts">
 	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
 	import FormGroup from './FormGroup.svelte';
+	import Radio from './Radio.svelte';
 
-	interface Props {
+	export interface RadioGroupProps {
+		/** HTML name attribute for the radio group (falls back to label, then auto-generated) */
+		name?: string;
+		/** Label text displayed above the radio group */
 		label: string;
+		/** Available radio options */
 		options: ComboBoxItem[];
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Additional CSS classes */
 		class?: string;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Disable all radio options */
 		disabled?: boolean;
+		/** When true, the radio state is controlled externally only. Clicking will call onchange but won't change the value. */
+		controlled?: boolean;
+		/** Display options vertically instead of horizontally */
+		vertical?: boolean;
+		/** Currently selected value (bindable) */
 		value?: string;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Callback when selection changes */
 		onchange?: (e: string | undefined) => void;
 	}
 
 	let {
+		name,
 		label,
 		options,
 		required = false,
@@ -24,20 +43,26 @@
 		errorText = '',
 		class: classes = '',
 		containerClass = '',
+		vertical = false,
 		disabled = false,
+		controlled = false,
 		tooltipLocation = 'top',
 		value = $bindable(),
 		onchange = undefined
-	}: Props = $props();
+	}: RadioGroupProps = $props();
 
-	const nonce = Math.random().toString(36).substring(2, 15);
-	const randomName = $derived(label + nonce);
+	const autoName = `radio-${crypto.randomUUID()}`;
+	const resolvedName = $derived(
+		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
+	);
 
 	function handleChange(option: ComboBoxItem) {
 		if (option.value === value) return;
 
-		value = option.value;
-		onchange?.(value);
+		if (!controlled) {
+			value = option.value;
+		}
+		onchange?.(option.value);
 	}
 </script>
 
@@ -46,26 +71,21 @@
 		<div
 			class="
         radio-options
+		{vertical ? 'radio-vertical' : ''}
         {required ? 'radio-required' : ''}
 		{showError ? 'error' : ''}
         {disabled ? 'disabled' : ''}"
 		>
 			{#each options as option, i}
-				{@const id = randomName + i}
-				<div class="flex">
-					<label class={disabled ? 'cursor-not-allowed' : ''} for={id}>
-						<input
-							{id}
-							type="radio"
-							class="disabled:cursor-not-allowed accent-accent"
-							name={randomName}
-							{disabled}
-							checked={option.value === value}
-							onchange={() => handleChange(option)}
-						/>
-						{option.label}
-					</label>
-				</div>
+				<Radio
+					id={resolvedName + i}
+					name={resolvedName}
+					label={option.label}
+					{disabled}
+					checked={option.value === value}
+					controlled={true}
+					onchange={() => handleChange(option)}
+				/>
 			{/each}
 		</div>
 		{#if showError && errorText}
@@ -75,136 +95,30 @@
 </div>
 
 <style>
-	label {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		user-select: none;
-		cursor: pointer;
-	}
-
-	.disabled label,
-	.disabled input {
-		cursor: not-allowed;
-	}
-
-	input {
-		position: relative !important;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		margin: var(--pui-spacing-2);
-		box-sizing: content-box;
-		overflow: hidden;
-		cursor: pointer;
-	}
-
-	input:before {
-		content: '';
-		display: block;
-		box-sizing: content-box;
-		width: 16px;
-		height: 16px;
-		border: 2px solid var(--pui-border-disabled);
-		transition: var(--pui-transition-fast) border-color var(--pui-ease-out);
-	}
-
 	.radio-options {
 		display: flex;
-		gap: var(--pui-spacing-2);
-		border-radius: var(--pui-radius-lg);
+		gap: 0.5rem;
+		border-radius: 6px;
 	}
 
-	.radio-required {
-		padding: var(--pui-spacing-1);
+	.radio-vertical.radio-options {
+		gap: 0.25rem;
 	}
 
-	:global(.dark) input:before {
-		border-color: var(--pui-color-gray-600);
-	}
-	input:checked:before {
-		border-color: var(--pui-color-primary);
-		transition: var(--pui-transition-slow) border-color var(--pui-ease-out);
-	}
-	:global(.dark) input:checked:before {
-		border-color: var(--pui-color-primary);
+	.radio-vertical {
+		flex-direction: column;
 	}
 
-	input:disabled:before {
-		border-color: var(--pui-border-disabled);
-		background-color: var(--pui-border-disabled);
-		opacity: 0.5;
-	}
-	:global(.dark) input:disabled:before {
-		border-color: var(--pui-color-gray-600);
-		background-color: var(--pui-color-gray-600);
-	}
-	input:after {
-		content: '';
-		display: block;
-		position: absolute;
-		box-sizing: content-box;
-		top: 50%;
-		left: 50%;
-		transform-origin: 50% 50%;
-		background-color: var(--pui-color-primary);
-		width: 16px;
-		height: 16px;
-		border-radius: var(--pui-radius-full);
-		transform: translate(-50%, -50%) scale(0);
-	}
-	input:disabled:after {
-		opacity: 0.5;
-	}
-	:global(.dark) input:after {
-		background-color: var(--pui-color-primary);
-	}
-	input[type='radio']:before {
-		border-radius: var(--pui-radius-full);
-	}
-	input[type='radio']:after {
-		width: 16px;
-		height: 16px;
-		border-radius: var(--pui-radius-full);
-		transform: translate(-50%, -50%) scale(0);
-	}
-	input[type='radio']:checked:after {
-		-webkit-animation: toggleOnRadio var(--pui-transition-fast) ease forwards;
-		animation: toggleOnRadio var(--pui-transition-fast) ease forwards;
-	}
-	@-webkit-keyframes toggleOnRadio {
-		0% {
-			opacity: 0;
-			transform: translate(-50%, -50%) scale(0);
-		}
-		70% {
-			opacity: 1;
-			transform: translate(-50%, -50%) scale(0.9);
-		}
-		100% {
-			transform: translate(-50%, -50%) scale(0.8);
-		}
-	}
-	@keyframes toggleOnRadio {
-		0% {
-			opacity: 0;
-			transform: translate(-50%, -50%) scale(0);
-		}
-		70% {
-			opacity: 1;
-			transform: translate(-50%, -50%) scale(0.9);
-		}
-		100% {
-			transform: translate(-50%, -50%) scale(0.8);
-		}
+	.radio-required {
+		padding: 0.25rem;
 	}
 
 	.error {
-		border: 1px solid var(--pui-text-danger);
+		border: 1px solid var(--danger-text);
 	}
 
 	.error-text {
-		margin-top: var(--pui-spacing-1);
-		color: var(--pui-text-danger);
+		margin-top: 0.25rem;
+		color: var(--danger-text);
 	}
 </style>

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

@@ -1,17 +1,34 @@
 import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-interface Props {
+export interface RadioGroupProps {
+    /** HTML name attribute for the radio group (falls back to label, then auto-generated) */
+    name?: string;
+    /** Label text displayed above the radio group */
     label: string;
+    /** Available radio options */
     options: ComboBoxItem[];
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Additional CSS classes */
     class?: string;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** Disable all radio options */
     disabled?: boolean;
+    /** When true, the radio state is controlled externally only. Clicking will call onchange but won't change the value. */
+    controlled?: boolean;
+    /** Display options vertically instead of horizontally */
+    vertical?: boolean;
+    /** Currently selected value (bindable) */
     value?: string;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Callback when selection changes */
     onchange?: (e: string | undefined) => void;
 }
-declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/form/SegmentedControl.svelte

@@ -1,14 +1,30 @@
 <script lang="ts">
 	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-	import { onMount, tick } from 'svelte';
+	import FormGroup from './FormGroup.svelte';
+	import { onMount } from 'svelte';
 
-	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' (sized to match Textbox/Select) or 'lg' */
+		size?: SegmentedControlSize;
+		/** Callback when selection changes */
 		onchange?: (value: string) => void;
 	}
 
-	let { options, value = $bindable(), onchange }: Props = $props();
+	let {
+		options,
+		value = $bindable(),
+		label,
+		size = 'default',
+		onchange
+	}: SegmentedControlProps = $props();
 
 	let containerRef: HTMLDivElement;
 	let buttonElements = $state<HTMLButtonElement[]>([]);
@@ -18,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();
@@ -50,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) {
@@ -68,82 +86,110 @@
 	}
 </script>
 
-<div class="segmented-control" bind:this={containerRef}>
-	<div class="segmented-control-background" style={backgroundStyle}></div>
-	{#each options as option, index}
-		{@const isSelected = option.value === value}
-
-		<button
-			bind:this={buttonElements[index]}
-			class="segmented-control-item {isSelected ? 'selected' : ''}"
-			onclick={() => setValue(option.value)}
-		>
-			{option.label}
-		</button>
-	{/each}
-</div>
+{#snippet control()}
+	<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}
+
+			<button
+				bind:this={buttonElements[index]}
+				class="segmented-control-item {isSelected ? 'selected' : ''}"
+				onclick={() => setValue(option.value)}
+			>
+				{option.label}
+			</button>
+		{/each}
+	</div>
+{/snippet}
+
+{#if label}
+	<FormGroup {label}>
+		<div class="segmented-control-container">
+			{@render control()}
+		</div>
+	</FormGroup>
+{:else}
+	{@render control()}
+{/if}
 
 <style>
 	.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);
+		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,9 +1,19 @@
 import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-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' (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;