@placeholderco/placeholder-ui 1.0.12 → 2.1.0

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

@@ -1,35 +1,64 @@
-import type { ComboBoxGroup, ComboBoxItem, FetchFunctionType, RetrieveLabelFunctionType, SearchFunctionType } from "../models/ComboBoxItem.js";
-import { type Snippet } from "svelte";
-interface Props {
-    /** HTML name attribute for the select */
+import type { ComboBoxGroup, ComboBoxItem, FetchFunctionType, RetrieveLabelFunctionType, SearchFunctionType } from '../models/ComboBoxItem.js';
+import { type Snippet } from 'svelte';
+export interface SelectMultiProps {
+    /** HTML name attribute for the select (falls back to label, then auto-generated) */
     name?: string;
+    /** Label text displayed above the select */
     label?: string;
+    /** Array of selected values (bindable) */
     values?: string[];
+    /**
+     * Array of full selected item objects (bindable). Can be passed initially to preset
+     * the selection with known labels — no `values` or retrieveLabelFunction needed.
+     */
     rawValues?: ComboBoxItem[];
+    /** Placeholder text when no values are selected */
     placeholder?: string;
+    /** CSS classes for the select element */
     class?: string;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** Disable the select */
     disabled?: boolean;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Auto-focus on mount (first dialog open only) */
     autofocus?: boolean;
+    /** Auto-focus on every dialog open */
     autofocusDialog?: boolean;
+    /** Enable search/filter within options */
     allowSearch?: boolean;
-    showNoResultsMessage?: boolean;
+    /** Hide "no results" message when search finds nothing */
+    hideNoResults?: boolean;
+    /** Close dropdown after selecting an option */
     closeOnSelection?: boolean;
+    /** Text shown while loading options */
     loadingText?: string;
+    /** Flat list of selectable options */
     options?: ComboBoxItem[];
+    /** Options organized into groups */
     groupedOptions?: ComboBoxGroup[];
-    tooltipLocation?: "top" | "bottom" | "left" | "right";
+    /** Position of the tooltip */
+    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Async function to fetch options */
     fetchFunction?: FetchFunctionType | null;
+    /** Async function to search/filter options */
     searchFunction?: SearchFunctionType | null;
+    /** Async function to retrieve labels for values */
     retrieveLabelFunction?: RetrieveLabelFunctionType | null;
+    /** Rich tooltip content using a Svelte snippet */
     tooltipContent?: Snippet;
+    /** Simple tooltip text */
     tooltipText?: string;
+    /** Callback when selection changes (returns value strings) */
     onchange?: (e: string[]) => void;
+    /** Callback when selection changes (returns full item objects) */
     onchangeRaw?: (e: ComboBoxItem[]) => void;
 }
-declare const SelectMulti: import("svelte").Component<Props, {}, "values" | "rawValues">;
+declare const SelectMulti: import("svelte").Component<SelectMultiProps, {}, "values" | "rawValues">;
 type SelectMulti = ReturnType<typeof SelectMulti>;
 export default SelectMulti;

package/dist/form/Slider.svelte

@@ -1,150 +1,137 @@
 <script lang="ts">
-	import FormGroup from './FormGroup.svelte';
+	import Tooltip from '../ui/Tooltip.svelte';
+	import { Icon, iconInfoCircle } from '../icon/index.js';
 
-	interface Mark {
-		value: number;
-		label?: string;
-	}
+	const autoName = `slider-${crypto.randomUUID()}`;
 
-	interface Props {
-		/** HTML name attribute for the slider */
+	export interface SliderProps {
+		/** HTML name attribute for the slider (falls back to label, then auto-generated) */
 		name?: string;
+		/** Label text displayed above the slider */
 		label?: string;
+		/** Custom ID for the slider element */
+		inputId?: string;
+		/** Mark field as required (shows asterisk) */
+		required?: boolean;
+		/** Disable the slider */
+		disabled?: boolean;
+		/** CSS classes for the slider element */
+		class?: string;
+		/** CSS classes for the container element */
+		containerClass?: string;
+		/** Slider value (bindable) */
 		value?: number;
+		/** Minimum allowed value */
 		min?: number;
+		/** Maximum allowed value */
 		max?: number;
+		/** Increment/decrement step value */
 		step?: number;
-		marks?: Mark[] | boolean;
-		showValue?: boolean;
-		labelAlwaysOn?: boolean;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger';
-		radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-		disabled?: boolean;
-		class?: string;
-		containerClass?: string;
-		required?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Simple tooltip text */
 		tooltipText?: string;
+		/** Hide the current value next to the label */
+		hideValue?: boolean;
+		/** Format function for displaying the value */
+		formatValue?: (value: number) => string;
+		/** Callback when value changes (after interaction ends) */
 		onchange?: (value: number) => void;
+		/** Callback on input event (during dragging) */
 		oninput?: (value: number) => void;
+		/** Callback when slider gains focus */
+		onfocus?: (e: FocusEvent) => void;
+		/** Callback when slider loses focus */
+		onblur?: (e: FocusEvent) => void;
 	}
 
 	let {
 		name,
 		label = '',
-		value = $bindable(0),
-		min = 0,
-		max = 100,
-		step = 1,
-		marks = false,
-		showValue = false,
-		labelAlwaysOn = false,
-		size = 'md',
-		color = 'primary',
-		radius = 'full',
+		inputId = undefined,
+		required = false,
 		disabled = false,
 		class: classes = '',
 		containerClass = '',
-		required = false,
+		value = $bindable(50),
+		min = 0,
+		max = 100,
+		step = 1,
 		showError = false,
 		errorText = '',
 		tooltipLocation = 'top',
 		tooltipText = undefined,
-		onchange,
-		oninput
-	}: Props = $props();
-
-	let isDragging = $state(false);
-
-	const percentage = $derived(((value - min) / (max - min)) * 100);
-
-	// Generate marks if boolean true
-	const computedMarks = $derived.by(() => {
-		if (marks === false) return [];
-		if (marks === true) {
-			// Generate marks at 0%, 25%, 50%, 75%, 100%
-			const range = max - min;
-			return [
-				{ value: min, label: String(min) },
-				{ value: min + range * 0.25, label: String(min + range * 0.25) },
-				{ value: min + range * 0.5, label: String(min + range * 0.5) },
-				{ value: min + range * 0.75, label: String(min + range * 0.75) },
-				{ value: max, label: String(max) }
-			];
-		}
-		return marks;
+		hideValue = false,
+		formatValue = (v: number) => v.toString(),
+		onchange = undefined,
+		oninput = undefined,
+		onfocus = undefined,
+		onblur = undefined
+	}: SliderProps = $props();
+
+	let resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
+
+	let id = $derived.by(() => {
+		if (inputId) return inputId;
+		if (label) return `slider-${label.toLowerCase().replace(/ /g, '-')}`;
+		return Math.random().toString(36).substring(2, 8);
 	});
 
-	function handleInput(e: Event) {
-		const target = e.target as HTMLInputElement;
-		value = Number(target.value);
-		oninput?.(value);
-	}
+	const extraClasses: string[] = $derived.by(() => {
+		const result = [];
+		if (disabled) result.push('disabled');
+		if (showError) result.push('show-error');
+		return result;
+	});
 
-	function handleChange(e: Event) {
-		const target = e.target as HTMLInputElement;
-		value = Number(target.value);
-		onchange?.(value);
-	}
+	// Calculate fill percentage for the track
+	const fillPercent = $derived(((value - min) / (max - min)) * 100);
 </script>
 
 <div class="slider-container {containerClass}">
-	<FormGroup
-		{label}
-		{required}
-		class={classes}
-		{tooltipLocation}
-		{tooltipText}
-		{showError}
-		{errorText}
-	>
-		<div class="slider-wrapper size-{size}">
-			{#if showValue}
-				<div class="slider-value-display">
-					<span>{value}</span>
-				</div>
-			{/if}
-			<div class="slider-track-wrapper">
-				<input
-					type="range"
-					class="slider color-{color} radius-{radius}"
-					{min}
-					{max}
-					{step}
-					{disabled}
-					bind:value
-					oninput={handleInput}
-					onchange={handleChange}
-					onmousedown={() => (isDragging = true)}
-					onmouseup={() => (isDragging = false)}
-					ontouchstart={() => (isDragging = true)}
-					ontouchend={() => (isDragging = false)}
-					style="--slider-percentage: {percentage}%;"
-				/>
-				{#if labelAlwaysOn || isDragging}
-					<div class="slider-thumb-label" style="left: {percentage}%;">
-						{value}
-					</div>
+	{#if label}
+		<div class="label-row">
+			<label class="label" for={id}>
+				{label}
+				{#if required}
+					<span class="text-required">*</span>
 				{/if}
-			</div>
-			{#if computedMarks.length > 0}
-				<div class="slider-marks">
-					{#each computedMarks as mark}
-						{@const markPercentage = ((mark.value - min) / (max - min)) * 100}
-						<div class="slider-mark" style="left: {markPercentage}%;">
-							<div class="mark-dot" class:active={value >= mark.value}></div>
-							{#if mark.label}
-								<div class="mark-label">{mark.label}</div>
-							{/if}
-						</div>
-					{/each}
-				</div>
+				{#if tooltipText}
+					<Tooltip location={tooltipLocation} text={tooltipText}>
+						<Icon svg={iconInfoCircle} size="1em" stroke="var(--accent-color)" />
+					</Tooltip>
+				{/if}
+			</label>
+			{#if !hideValue}
+				<span class="label-value">{formatValue(value)}</span>
 			{/if}
 		</div>
-	</FormGroup>
+	{/if}
+	<div class="slider-wrapper">
+		<input
+			type="range"
+			class="slider {classes} {extraClasses.join(' ')}"
+			{id}
+			name={resolvedName}
+			{min}
+			{max}
+			{step}
+			{disabled}
+			bind:value
+			style="--fill-percent: {fillPercent}%"
+			onchange={() => onchange?.(value)}
+			oninput={() => oninput?.(value)}
+			{onfocus}
+			{onblur}
+		/>
+	</div>
+	{#if showError && errorText}
+		<div class="error-text">{errorText}</div>
+	{/if}
 </div>
 
 <style>
@@ -152,210 +139,137 @@
 		width: 100%;
 	}
 
-	.slider-wrapper {
-		width: 100%;
-		padding-top: var(--pui-spacing-1);
+	.label-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.25rem;
 	}
 
-	.slider-value-display {
-		text-align: right;
-		font-size: var(--pui-font-size-sm);
-		font-weight: var(--pui-font-weight-medium);
-		color: var(--pui-text-secondary);
-		margin-bottom: var(--pui-spacing-1);
+	.label {
+		font-size: 1rem;
+		line-height: 1.5rem;
+		color: var(--text-color);
 	}
 
-	:global(.dark) .slider-value-display {
-		color: var(--pui-color-gray-300);
+	.text-required {
+		color: var(--danger-text);
 	}
 
-	.slider-track-wrapper {
-		position: relative;
-		width: 100%;
+	.label-value {
+		font-size: 0.875rem;
+		color: var(--text-muted);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.slider-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 4px 0 4px 0;
 	}
 
 	.slider {
 		-webkit-appearance: none;
 		appearance: none;
 		width: 100%;
-		background: transparent;
-		cursor: pointer;
-	}
-
-	.slider:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* Track */
-	.slider::-webkit-slider-runnable-track {
-		height: var(--track-height, 6px);
-		background: linear-gradient(
-			to right,
-			var(--slider-color, var(--pui-color-primary)) 0%,
-			var(--slider-color, var(--pui-color-primary)) var(--slider-percentage),
-			var(--pui-color-gray-300) var(--slider-percentage),
-			var(--pui-color-gray-300) 100%
-		);
-		border-radius: var(--track-radius, var(--pui-radius-full));
-	}
-
-	:global(.dark) .slider::-webkit-slider-runnable-track {
+		height: 6px;
+		border-radius: 3px;
 		background: linear-gradient(
 			to right,
-			var(--slider-color, var(--pui-color-primary)) 0%,
-			var(--slider-color, var(--pui-color-primary)) var(--slider-percentage),
-			var(--pui-color-dark-border) var(--slider-percentage),
-			var(--pui-color-dark-border) 100%
+			var(--accent-color) 0%,
+			var(--accent-color) var(--fill-percent),
+			var(--border-color) var(--fill-percent),
+			var(--border-color) 100%
 		);
+		outline: none;
+		cursor: pointer;
 	}
 
-	.slider::-moz-range-track {
-		height: var(--track-height, 6px);
-		background: var(--pui-color-gray-300);
-		border-radius: var(--track-radius, var(--pui-radius-full));
-	}
-
-	.slider::-moz-range-progress {
-		background: var(--slider-color, var(--pui-color-primary));
-		height: var(--track-height, 6px);
-		border-radius: var(--track-radius, var(--pui-radius-full));
-	}
-
-	/* Thumb */
 	.slider::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		width: var(--thumb-size, 16px);
-		height: var(--thumb-size, 16px);
-		background: var(--pui-color-white);
-		border: 2px solid var(--slider-color, var(--pui-color-primary));
+		width: 16px;
+		height: 16px;
 		border-radius: 50%;
-		margin-top: calc((var(--track-height, 6px) - var(--thumb-size, 16px)) / 2);
-		box-shadow: var(--pui-shadow-sm);
-		transition: transform var(--pui-transition-fast) var(--pui-ease-out);
-	}
-
-	.slider::-webkit-slider-thumb:hover {
-		transform: scale(1.1);
+		background: var(--accent-color);
+		cursor: pointer;
+		border: 2px solid var(--bg-color);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+		transition:
+			transform 0.15s ease,
+			box-shadow 0.15s ease;
 	}
 
 	.slider::-moz-range-thumb {
-		width: var(--thumb-size, 16px);
-		height: var(--thumb-size, 16px);
-		background: var(--pui-color-white);
-		border: 2px solid var(--slider-color, var(--pui-color-primary));
+		width: 16px;
+		height: 16px;
 		border-radius: 50%;
-		box-shadow: var(--pui-shadow-sm);
+		background: var(--accent-color);
+		cursor: pointer;
+		border: 2px solid var(--bg-color);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+		transition:
+			transform 0.15s ease,
+			box-shadow 0.15s ease;
 	}
 
-	/* Sizes */
-	.size-xs {
-		--track-height: 4px;
-		--thumb-size: 12px;
-	}
-	.size-sm {
-		--track-height: 5px;
-		--thumb-size: 14px;
-	}
-	.size-md {
-		--track-height: 6px;
-		--thumb-size: 16px;
-	}
-	.size-lg {
-		--track-height: 8px;
-		--thumb-size: 20px;
-	}
-	.size-xl {
-		--track-height: 10px;
-		--thumb-size: 24px;
+	.slider::-webkit-slider-thumb:hover {
+		transform: scale(1.1);
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 	}
 
-	/* Colors */
-	.color-primary {
-		--slider-color: var(--pui-color-primary);
-	}
-	.color-secondary {
-		--slider-color: var(--pui-color-secondary);
-	}
-	.color-accent {
-		--slider-color: var(--pui-color-accent);
-	}
-	.color-success {
-		--slider-color: var(--pui-color-success);
-	}
-	.color-warning {
-		--slider-color: var(--pui-color-warning);
-	}
-	.color-danger {
-		--slider-color: var(--pui-color-danger);
+	.slider::-moz-range-thumb:hover {
+		transform: scale(1.1);
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 	}
 
-	/* Radius */
-	.radius-none {
-		--track-radius: 0;
+	.slider:focus {
+		outline: none;
 	}
-	.radius-sm {
-		--track-radius: var(--pui-radius-sm);
-	}
-	.radius-md {
-		--track-radius: var(--pui-radius-md);
-	}
-	.radius-lg {
-		--track-radius: var(--pui-radius-lg);
+
+	.slider:focus::-webkit-slider-thumb {
+		box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb, 59, 130, 246), 0.3);
 	}
-	.radius-full {
-		--track-radius: var(--pui-radius-full);
+
+	.slider:focus::-moz-range-thumb {
+		box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb, 59, 130, 246), 0.3);
 	}
 
-	/* Thumb label */
-	.slider-thumb-label {
-		position: absolute;
-		top: -28px;
-		transform: translateX(-50%);
-		background: var(--pui-color-gray-800);
-		color: var(--pui-color-white);
-		font-size: var(--pui-font-size-xs);
-		padding: 2px 6px;
-		border-radius: var(--pui-radius-sm);
-		white-space: nowrap;
-		pointer-events: none;
+	.slider.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
 	}
 
-	/* Marks */
-	.slider-marks {
-		position: relative;
-		width: 100%;
-		height: 20px;
-		margin-top: var(--pui-spacing-1);
+	.slider.disabled::-webkit-slider-thumb {
+		cursor: not-allowed;
 	}
 
-	.slider-mark {
-		position: absolute;
-		transform: translateX(-50%);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
+	.slider.disabled::-moz-range-thumb {
+		cursor: not-allowed;
 	}
 
-	.mark-dot {
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		background: var(--pui-color-gray-400);
-		margin-bottom: var(--pui-spacing-1);
+	.slider.show-error {
+		background: linear-gradient(
+			to right,
+			var(--danger-text) 0%,
+			var(--danger-text) var(--fill-percent),
+			var(--border-color) var(--fill-percent),
+			var(--border-color) 100%
+		);
 	}
 
-	.mark-dot.active {
-		background: var(--slider-color, var(--pui-color-primary));
+	.slider.show-error::-webkit-slider-thumb {
+		background: var(--danger-text);
 	}
 
-	.mark-label {
-		font-size: var(--pui-font-size-xs);
-		color: var(--pui-color-gray-600);
+	.slider.show-error::-moz-range-thumb {
+		background: var(--danger-text);
 	}
 
-	:global(.dark) .mark-label {
-		color: var(--pui-color-gray-400);
+	.error-text {
+		color: var(--danger-text);
+		font-size: 0.875rem;
+		margin-top: 0.25rem;
 	}
 </style>

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

@@ -1,32 +1,47 @@
-interface Mark {
-    value: number;
-    label?: string;
-}
-interface Props {
-    /** HTML name attribute for the slider */
+export interface SliderProps {
+    /** HTML name attribute for the slider (falls back to label, then auto-generated) */
     name?: string;
+    /** Label text displayed above the slider */
     label?: string;
+    /** Custom ID for the slider element */
+    inputId?: string;
+    /** Mark field as required (shows asterisk) */
+    required?: boolean;
+    /** Disable the slider */
+    disabled?: boolean;
+    /** CSS classes for the slider element */
+    class?: string;
+    /** CSS classes for the container element */
+    containerClass?: string;
+    /** Slider value (bindable) */
     value?: number;
+    /** Minimum allowed value */
     min?: number;
+    /** Maximum allowed value */
     max?: number;
+    /** Increment/decrement step value */
     step?: number;
-    marks?: Mark[] | boolean;
-    showValue?: boolean;
-    labelAlwaysOn?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger';
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-    disabled?: boolean;
-    class?: string;
-    containerClass?: string;
-    required?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Simple tooltip text */
     tooltipText?: string;
+    /** Hide the current value next to the label */
+    hideValue?: boolean;
+    /** Format function for displaying the value */
+    formatValue?: (value: number) => string;
+    /** Callback when value changes (after interaction ends) */
     onchange?: (value: number) => void;
+    /** Callback on input event (during dragging) */
     oninput?: (value: number) => void;
+    /** Callback when slider gains focus */
+    onfocus?: (e: FocusEvent) => void;
+    /** Callback when slider loses focus */
+    onblur?: (e: FocusEvent) => void;
 }
-declare const Slider: import("svelte").Component<Props, {}, "value">;
+declare const Slider: import("svelte").Component<SliderProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;