@placeholderco/placeholder-ui 1.0.11 → 2.0.0

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

@@ -1,28 +1,77 @@
-import type { ComboBoxItem, FetchFunctionType, SearchFunctionType } from "../models/ComboBoxItem.js";
-import { type Snippet } from "svelte";
-interface Props {
+import type { ComboBoxGroup, ComboBoxItem, FetchFunctionType, RetrieveLabelFunctionType, SearchFunctionType } from '../models/ComboBoxItem.js';
+import type { Snippet } from 'svelte';
+export interface AutocompleteMultiProps {
+    /** HTML name attribute for the input */
+    name?: string;
+    /** Label text displayed above the input */
     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 nothing is selected */
     placeholder?: string;
+    /** Mark field as required (shows asterisk) */
+    required?: boolean;
+    /** CSS classes for the control element */
     class?: string;
+    /** CSS classes for the container element */
+    containerClass?: string;
+    /** CSS classes for the FormGroup wrapper */
+    groupClass?: string;
+    /** Disable the input */
     disabled?: boolean;
-    required?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Auto-focus the input on mount */
     autofocus?: boolean;
-    showNoResultsMessage?: boolean;
+    /** Auto-focus on every dialog open */
+    autofocusDialog?: boolean;
+    /** Hide "no results" message when search finds nothing */
+    hideNoResults?: boolean;
+    /** Close the dropdown after selecting an option */
+    closeOnSelection?: boolean;
+    /**
+     * Offer to add the typed text as a new chip when it doesn't match an existing option.
+     * On by default — set to `false` to restrict selection to the provided options.
+     */
+    allowAdd?: boolean;
+    /** Builds the label shown for the "add new value" suggestion (default: `Add "<value>"`) */
+    addItemLabel?: (value: string) => string;
+    /** Text shown while loading options */
     loadingText?: string;
+    /** SVG icon displayed on the left side */
+    leftIconSvg?: string;
+    /** Static list of autocomplete options */
     options?: ComboBoxItem[];
-    fetchFunction?: FetchFunctionType;
-    searchFunction?: SearchFunctionType;
-    tooltipLocation?: "top" | "bottom" | "left" | "right";
+    /** Options organized into groups */
+    groupedOptions?: ComboBoxGroup[];
+    /** Position of the tooltip */
+    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Async function to fetch all options */
+    fetchFunction?: FetchFunctionType | null;
+    /** Async function to search/filter options based on input */
+    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 Enter is pressed with the current filter text */
+    enterPressed?: (e: string) => void;
+    /** Callback when selection changes (returns value strings) */
     onchange?: (e: string[]) => void;
+    /** Callback when selection changes (returns full item objects) */
     onchangeRaw?: (e: ComboBoxItem[]) => void;
-    onCreate?: (value: string) => void;
+    /** Callback when the user chooses to add the typed value as a new item */
+    onItemAdded?: (value: string) => void;
 }
-declare const AutocompleteMulti: import("svelte").Component<Props, {}, "values" | "rawValues">;
+declare const AutocompleteMulti: import("svelte").Component<AutocompleteMultiProps, {}, "values" | "rawValues">;
 type AutocompleteMulti = ReturnType<typeof AutocompleteMulti>;
 export default AutocompleteMulti;

package/dist/form/Checkbox.svelte

@@ -1,17 +1,48 @@
-<script lang="ts">
-	interface Props {
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface CheckboxProps {
+		/** HTML name attribute for the checkbox (falls back to label, then auto-generated) */
+		name?: string;
+		/** Label text displayed next to the checkbox */
 		label?: string;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Additional CSS classes */
 		class?: string;
+		/** Custom ID for the input element */
 		inputId?: string;
+		/** Disable the checkbox */
 		disabled?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Whether the checkbox is checked (bindable) */
 		checked?: boolean;
+		/** When true, the checkbox state is controlled externally only. Clicking will call onchange but won't toggle the checkbox. */
+		controlled?: boolean;
+		/** Whether the checkbox is in an indeterminate state */
+		indeterminate?: boolean;
+		/** Callback when checked state changes */
 		onchange?: (e: boolean) => void;
+		/** Accessible label for screen readers (use when no visible label) */
+		ariaLabel?: string;
+		/** Simple tooltip text */
+		tooltipText?: string;
+		/** Position of the tooltip */
+		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Rich tooltip content using a Svelte snippet */
+		tooltipContent?: Snippet;
 	}
+</script>
+
+<script lang="ts">
+	import { Icon, iconInfoCircle } from '../icon/index.js';
+	import Tooltip from '../ui/Tooltip.svelte';
 
 	let {
+		name,
 		label,
 		required = false,
 		class: classes = '',
@@ -20,28 +51,67 @@
 		showError = false,
 		errorText = '',
 		checked = $bindable(false),
-		onchange = undefined
-	}: Props = $props();
+		controlled = false,
+		indeterminate = false,
+		onchange = undefined,
+		ariaLabel = undefined,
+		tooltipText = undefined,
+		tooltipLocation = 'top',
+		tooltipContent = undefined
+	}: CheckboxProps = $props();
 
+	const autoName = `checkbox-${crypto.randomUUID()}`;
 	const nonce = Math.random().toString(36).substring(2, 15);
 
+	let resolvedName = $derived(
+		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
+	);
+
 	const id = $derived(inputId ? inputId : label ? `input-${label}` : `input-${nonce}`);
+
+	let inputEl = $state<HTMLInputElement>();
+	$effect(() => { if (inputEl) inputEl.indeterminate = indeterminate; });
 </script>
 
 <div class="checkbox-container {disabled ? 'disabled' : ''}">
 	<label for={id}>
-		<input
-			class="checkbox {showError && 'error'} {classes}"
-			type="checkbox"
-			{id}
-			{disabled}
-			bind:checked
-			onchange={() => onchange?.(checked)}
-		/>
+		{#if controlled}
+			<input
+				bind:this={inputEl}
+				class="checkbox text-base accent-accent mr-1 {showError && 'error'} {classes}"
+				type="checkbox"
+				{id}
+				name={resolvedName}
+				{disabled}
+				{checked}
+				aria-label={ariaLabel}
+				onchange={(e) => {
+					e.currentTarget.checked = checked;
+					onchange?.(!checked);
+				}}
+			/>
+		{:else}
+			<input
+				bind:this={inputEl}
+				class="checkbox text-base accent-accent mr-1 {showError && 'error'} {classes}"
+				type="checkbox"
+				{id}
+				name={resolvedName}
+				{disabled}
+				bind:checked
+				aria-label={ariaLabel}
+				onchange={() => onchange?.(checked)}
+			/>
+		{/if}
 		<span class="label-text"
 			>{label}
 			{#if required}
 				<span class="required">*</span>
+			{/if}
+			{#if tooltipContent || tooltipText}
+				<Tooltip {tooltipContent} location={tooltipLocation} text={tooltipText}>
+					<Icon svg={iconInfoCircle} size="1em" stroke="var(--accent-color)" />
+				</Tooltip>
 			{/if}</span
 		>
 	</label>
@@ -51,12 +121,6 @@
 </div>
 
 <style>
-	.checkbox-container {
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-1_5);
-	}
-
 	label {
 		display: flex;
 		flex-direction: row;
@@ -87,28 +151,28 @@
 		box-sizing: content-box;
 		width: 16px;
 		height: 16px;
-		border: 2px solid var(--pui-border-disabled);
-		transition: border-color var(--pui-transition-fast) var(--pui-ease-out);
+		border: 2px solid #ccc;
+		transition: 0.2s border-color ease;
 	}
 	:global(.dark) input:before {
-		border-color: var(--pui-color-gray-600);
+		border-color: #666;
 	}
 	input:checked:before {
-		border-color: var(--pui-color-primary);
-		transition: border-color var(--pui-transition-slower) var(--pui-ease-out);
+		border-color: var(--ui-primary);
+		transition: 0.5s border-color ease;
 	}
 	:global(.dark) input:checked:before {
-		border-color: var(--pui-color-primary);
+		border-color: var(--ui-accent);
 	}
 
 	input:disabled:before {
-		border-color: var(--pui-border-disabled);
-		background-color: var(--pui-bg-disabled);
+		border-color: #ccc;
+		background-color: #ccc;
 		opacity: 0.5;
 	}
 	:global(.dark) input:disabled:before {
-		border-color: var(--pui-color-gray-600);
-		background-color: var(--pui-color-gray-600);
+		border-color: #666;
+		background-color: #666;
 	}
 	input:after {
 		content: '';
@@ -118,7 +182,7 @@
 		top: 50%;
 		left: 50%;
 		transform-origin: 50% 50%;
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-primary);
 		width: 16px;
 		height: 16px;
 		border-radius: 100vh;
@@ -128,11 +192,11 @@
 		opacity: 0.5;
 	}
 	:global(.dark) input:after {
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-accent);
 	}
 
 	input[type='checkbox']:before {
-		border-radius: var(--pui-radius-sm);
+		border-radius: 4px;
 	}
 	input[type='checkbox']:after {
 		width: 7px;
@@ -140,29 +204,46 @@
 		border-radius: 0;
 		transform: translate(-50%, -85%) scale(0) rotate(45deg);
 		background-color: transparent;
-		box-shadow: 4px 4px 0px 0px var(--pui-color-primary);
+		box-shadow: 4px 4px 0px 0px var(--ui-primary);
 	}
 	:global(.dark) input[type='checkbox']:after {
-		box-shadow: 4px 4px 0px 0px var(--pui-color-primary);
+		box-shadow: 4px 4px 0px 0px var(--ui-accent);
 	}
 	input[type='checkbox']:checked:after {
-		-webkit-animation: toggleOnCheckbox var(--pui-transition-fast) var(--pui-ease-out) forwards;
-		animation: toggleOnCheckbox var(--pui-transition-fast) var(--pui-ease-out) forwards;
+		-webkit-animation: toggleOnCheckbox 0.2s ease forwards;
+		animation: toggleOnCheckbox 0.2s ease forwards;
+	}
+	input[type='checkbox']:indeterminate:before {
+		border-color: var(--ui-primary);
+	}
+	:global(.dark) input[type='checkbox']:indeterminate:before {
+		border-color: var(--ui-accent);
+	}
+	input[type='checkbox']:indeterminate:after {
+		width: 10px;
+		height: 2px;
+		border-radius: 1px;
+		background-color: var(--ui-primary);
+		box-shadow: none;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	:global(.dark) input[type='checkbox']:indeterminate:after {
+		background-color: var(--ui-accent);
 	}
 	input[type='checkbox'].filled:before {
-		border-radius: var(--pui-radius-sm);
+		border-radius: 4px;
 		transition:
-			border-color var(--pui-transition-fast) var(--pui-ease-out),
-			background-color var(--pui-transition-fast) var(--pui-ease-out);
+			0.2s border-color ease,
+			0.2s background-color ease;
 	}
 	input[type='checkbox'].filled:checked:not(:disabled):before {
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-primary);
 	}
 	:global(.dark) input[type='checkbox'].filled:checked:not(:disabled):before {
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-accent);
 	}
 	input[type='checkbox'].filled:not(:disabled):after {
-		box-shadow: 4px 4px 0px 0px var(--pui-color-white);
+		box-shadow: 4px 4px 0px 0px white;
 	}
 	@-webkit-keyframes toggleOnCheckbox {
 		0% {
@@ -192,10 +273,10 @@
 	}
 
 	input.error:before {
-		border-color: var(--pui-text-danger) !important;
+		border-color: var(--danger-text) !important;
 	}
 
 	.error-text {
-		color: var(--pui-text-danger);
+		color: var(--danger-text);
 	}
 </style>

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

@@ -1,14 +1,38 @@
-interface Props {
+import type { Snippet } from 'svelte';
+export interface CheckboxProps {
+    /** HTML name attribute for the checkbox (falls back to label, then auto-generated) */
+    name?: string;
+    /** Label text displayed next to the checkbox */
     label?: string;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Additional CSS classes */
     class?: string;
+    /** Custom ID for the input element */
     inputId?: string;
+    /** Disable the checkbox */
     disabled?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Whether the checkbox is checked (bindable) */
     checked?: boolean;
+    /** When true, the checkbox state is controlled externally only. Clicking will call onchange but won't toggle the checkbox. */
+    controlled?: boolean;
+    /** Whether the checkbox is in an indeterminate state */
+    indeterminate?: boolean;
+    /** Callback when checked state changes */
     onchange?: (e: boolean) => void;
+    /** Accessible label for screen readers (use when no visible label) */
+    ariaLabel?: string;
+    /** Simple tooltip text */
+    tooltipText?: string;
+    /** Position of the tooltip */
+    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Rich tooltip content using a Svelte snippet */
+    tooltipContent?: Snippet;
 }
-declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/form/Chips.svelte

@@ -1,28 +1,52 @@
 <script lang="ts">
 	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
+	import type { ButtonVariant } from '../ui/ButtonVariant.js';
 	import FormGroup from './FormGroup.svelte';
 	import { iconCheck } from '../icon/index.js';
 	import Button from '../ui/Button.svelte';
 
-	interface Props {
-		label: string;
+	export interface ChipsProps {
+		/** Label text displayed above the chips */
+		label?: string;
+		/** Visual style variant for chips */
+		variant?: ButtonVariant;
+		/** Visual style variant for selected/checked chips */
+		selectedVariant?: ButtonVariant;
+		/** Visual style variant for deselected chips (overrides variant for unselected state) */
+		deselectedVariant?: ButtonVariant;
+		/** Available chip 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 chips */
 		disabled?: boolean;
+		/** Selected value for single selection mode (bindable) */
 		value?: string;
+		/** Selected values for multiple selection mode (bindable) */
 		values?: string[];
+		/** Allow selecting multiple chips */
 		multiple?: boolean;
+		/** Allow deselecting the current selection */
 		deselectable?: boolean;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Callback when selection changes */
 		onchange?: (e: string | string[] | undefined) => void;
 	}
 
 	let {
-		label,
+		label = '',
+		variant = undefined,
+		selectedVariant = undefined,
+		deselectedVariant = undefined,
 		options,
 		required = false,
 		showError = false,
@@ -36,7 +60,7 @@
 		multiple = false,
 		deselectable = true,
 		onchange = undefined
-	}: Props = $props();
+	}: ChipsProps = $props();
 
 	const nonce = Math.random().toString(36).substring(2, 15);
 	const randomName = $derived(label + nonce);
@@ -60,6 +84,8 @@
 			onchange?.(values.length > 0 ? values : undefined);
 		}
 	}
+
+
 </script>
 
 <div class="radio-container {containerClass}">
@@ -73,13 +99,17 @@
 		>
 			{#each options as option}
 				{@const checked = multiple ? values.includes(option.value) : option.value === value}
+				{@const hasSelection = multiple ? values.length > 0 : value !== undefined}
+				{@const chipVariant = checked
+					? (selectedVariant ?? variant)
+					: (deselectedVariant && (multiple || hasSelection) ? deselectedVariant : variant)}
 				<div class="flex">
 					{#if checked}
-						<Button class="chip checked" {disabled} onclick={() => handleChange(option)} svg={iconCheck} iconSize={'16px'}
+						<Button class="chip checked" {disabled} onclick={() => handleChange(option)} svg={iconCheck} iconSize={'16px'} variant={chipVariant}
 							>{option.label}</Button
 						>
 					{:else}
-						<Button class="chip" {disabled} onclick={() => handleChange(option)}
+						<Button class="chip" {disabled} onclick={() => handleChange(option)} variant={chipVariant}
 							>{option.label}</Button
 						>
 					{/if}
@@ -95,34 +125,34 @@
 <style>
 	.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);
+		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);
 	}
 
 	:global(.chip) {
-		padding: var(--pui-spacing-1) var(--pui-spacing-4) !important;
-		border-radius: var(--pui-radius-full) !important;
+		padding: 0.25rem 1rem !important;
+		border-radius: 5rem !important;
 	}
 
 	:global(.chip.checked) {
-		padding-left: var(--pui-spacing-1) !important;
-		padding-right: var(--pui-spacing-2) !important;
+		padding-left: 0.3rem !important;
+		padding-right: 0.5rem !important;
 	}
 
 	:global(.chip .button) {
-		gap: var(--pui-spacing-1);
+		gap: 0.25rem;
 	}
 </style>

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

@@ -1,20 +1,41 @@
 import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-interface Props {
-    label: string;
+import type { ButtonVariant } from '../ui/ButtonVariant.js';
+export interface ChipsProps {
+    /** Label text displayed above the chips */
+    label?: string;
+    /** Visual style variant for chips */
+    variant?: ButtonVariant;
+    /** Visual style variant for selected/checked chips */
+    selectedVariant?: ButtonVariant;
+    /** Visual style variant for deselected chips (overrides variant for unselected state) */
+    deselectedVariant?: ButtonVariant;
+    /** Available chip 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 chips */
     disabled?: boolean;
+    /** Selected value for single selection mode (bindable) */
     value?: string;
+    /** Selected values for multiple selection mode (bindable) */
     values?: string[];
+    /** Allow selecting multiple chips */
     multiple?: boolean;
+    /** Allow deselecting the current selection */
     deselectable?: boolean;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Callback when selection changes */
     onchange?: (e: string | string[] | undefined) => void;
 }
-declare const Chips: import("svelte").Component<Props, {}, "value" | "values">;
+declare const Chips: import("svelte").Component<ChipsProps, {}, "value" | "values">;
 type Chips = ReturnType<typeof Chips>;
 export default Chips;