@websline/system-components 1.0.11 → 1.0.12

package/dist/components/atoms/actions/button/button.variants.d.ts

@@ -34,9 +34,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };
@@ -84,9 +81,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };
@@ -134,9 +128,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };

package/dist/components/atoms/actions/button/button.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const buttonVariants = tv({
 	slots: {
-		base: "inline-flex cursor-pointer items-center rounded align-middle transition duration-200 select-none focus:outline-offset-2",
+		base: "inline-flex cursor-pointer items-center rounded-lg border border-transparent align-middle transition duration-200 select-none focus:outline-offset-2",
 		icon: "flex h-lh items-center",
 		spinner: "flex h-lh items-center justify-center",
 	},
@@ -29,27 +29,24 @@ const buttonVariants = tv({
 		},
 		size: {
 			small: {
-				base: "gap-2 px-3 py-1.25 button-small",
+				base: "gap-2 px-3 py-1.25 ui-button-small",
 				spinner: "w-4",
 			},
 			medium: {
-				base: "gap-2 px-3 py-1.5 button-default",
+				base: "gap-2 px-3 py-[7px] ui-button-default",
 				spinner: "w-5",
 			},
 			large: {
-				base: "gap-3 px-3 py-2.5 button-default",
+				base: "gap-3 px-3 py-[7px] ui-button-default leading-6",
 				spinner: "w-5",
 			},
 		},
 		variant: {
-			filled: {
-				base: "border-1 border-transparent",
-			},
 			outlined: {
-				base: "border-1",
+				base: "border-current",
 			},
 			text: {
-				base: "relative !px-0 after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-0 after:transition-all after:duration-300 after:content-[''] hover:after:w-full",
+				base: "relative px-0! after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-0 after:transition-all after:duration-300 after:content-[''] hover:after:w-full",
 			},
 		},
 	},
@@ -65,7 +62,7 @@ const buttonVariants = tv({
 			color: "primary",
 			variant: "outlined",
 			class: {
-				base: "border-blue-500 text-blue-500 hover:border-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-400 dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-500",
+				base: "text-blue-500 hover:border-blue-600 hover:bg-blue-600 hover:text-white dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-500",
 			},
 		},
 		{
@@ -78,7 +75,7 @@ const buttonVariants = tv({
 			color: "secondary",
 			variant: "outlined",
 			class: {
-				base: "text-neutral-900 hover:border-neutral-700 hover:bg-neutral-700 hover:text-white dark:border-neutral-200 dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-500 dark:hover:text-inherit",
+				base: "text-neutral-900 hover:border-neutral-700 hover:bg-neutral-700 hover:text-white dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-500 dark:hover:text-neutral-900",
 			},
 		},
 		{
@@ -92,7 +89,7 @@ const buttonVariants = tv({
 			color: "success",
 			variant: "outlined",
 			class: {
-				base: "border-green-500 text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:border-green-500 dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
+				base: "text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
 			},
 		},
 		{
@@ -106,7 +103,7 @@ const buttonVariants = tv({
 			color: "error",
 			variant: "outlined",
 			class: {
-				base: "border-red-500 text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:border-red-500 dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
+				base: "text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
 			},
 		},
 		{

package/dist/components/atoms/actions/closeButton/CloseButton.svelte

@@ -67,7 +67,7 @@
 	onclick={handleClose}
 	onmouseenter={handleMouseOver}
 	{...rest}>
-	<Icon class="relative z-10" name="close" size={16} />
+	<Icon class="relative z-10" name="closeSmall" size={16} />
 	{#if animate}
 		<span
 			bind:this={barEl}

package/dist/components/atoms/actions/iconButton/iconButton.variants.js

@@ -19,9 +19,9 @@ const iconButtonVariants = tv({
 			large: "p-2.75",
 		},
 		variant: {
-			filled: "border-1 border-transparent",
-			outlined: "border-1",
-			transparent: "border-1 border-transparent",
+			filled: "border border-transparent",
+			outlined: "border",
+			transparent: "border border-transparent",
 		},
 	},
 	compoundVariants: [

package/dist/components/atoms/avatar/avatar.variants.js

@@ -5,7 +5,7 @@ const avatarVariants = tv({
 		base: "flex overflow-hidden",
 		image: "h-full w-full object-cover",
 		fallback:
-			"flex h-full w-full items-center justify-center bg-blue-100 heading-h6 text-neutral-900",
+			"flex h-full w-full items-center justify-center bg-blue-100 ui-title-2 text-neutral-900",
 	},
 	variants: {
 		as: {
@@ -13,7 +13,7 @@ const avatarVariants = tv({
 		},
 		shape: {
 			circle: "rounded-full",
-			square: "rounded",
+			square: "rounded-sm",
 		},
 	},
 });

package/dist/components/atoms/badge/badge.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const badgeVariants = tv({
 	slots: {
-		base: "absolute inline-flex items-center justify-center rounded-full body-extra-small select-none",
+		base: "absolute inline-flex items-center justify-center rounded-full ui-caption-helper select-none",
 		wrapper: "relative inline-flex gap-0.5",
 	},
 	variants: {

package/dist/components/atoms/chip/chip.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const chipVariants = tv({
 	base: [
-		"relative inline-flex items-center gap-1 rounded border align-middle select-none [button]:cursor-pointer",
+		"relative inline-flex items-center gap-1 rounded-sm border align-middle select-none [button]:cursor-pointer",
 		"ring-blue-500 ring-offset-1 ring-offset-transparent outline-0 focus-visible:ring-1 dark:ring-blue-400",
 	],
 	variants: {
@@ -15,7 +15,7 @@ const chipVariants = tv({
 			warning: "bg-yellow-500 text-neutral-900",
 		},
 		size: {
-			small: "min-h-[20px] px-2 py-0.5 body-extra-small",
+			small: "min-h-[20px] px-2 py-0.5 ui-tag-badge",
 			big: "min-h-[28px] px-3 py-1.5 body-small",
 		},
 		iconPosition: {

package/dist/components/atoms/feedback/progressBar/progressBar.variants.js

@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
 
 const progressBarVariants = tv({
 	slots: {
-		bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-[var(--progress)] after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
+		bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-(--progress) after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
 		base: "flex items-center gap-4",
-		label: "body-small text-nowrap text-neutral-500 tabular-nums",
+		label: "ui-select-label text-nowrap text-neutral-500 tabular-nums",
 	},
 });
 

package/dist/components/atoms/helperText/helperText.variants.d.ts

@@ -2,7 +2,7 @@ export const helperTextVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "body-extra-small text-neutral-500", {
+}, undefined, "ui-caption-helper text-neutral-500", {
     error: {
         true: string;
     };
@@ -10,4 +10,4 @@ export const helperTextVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "body-extra-small text-neutral-500", unknown, unknown, undefined>>;
+}, undefined, "ui-caption-helper text-neutral-500", unknown, unknown, undefined>>;

package/dist/components/atoms/helperText/helperText.variants.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 
 const helperTextVariants = tv({
-	base: "body-extra-small text-neutral-500",
+	base: "ui-caption-helper text-neutral-500",
 	variants: {
 		error: {
 			true: "text-red-500",

package/dist/components/atoms/icon/Icon.svelte

@@ -34,7 +34,7 @@
 	<Comp
 		aria-hidden={title ? undefined : "true"}
 		aria-label={title || undefined}
-		class={`cms-icon ${className}`}
+		class={`cms-icon${className ? ` ${className}` : ""}`}
 		{color}
 		height={wh}
 		role={title ? "img" : undefined}

package/dist/components/atoms/input/input.variants.js

@@ -6,7 +6,7 @@ import { tv } from "tailwind-variants";
 const inputBaseVariant = tv({
 	slots: {
 		base: [
-			"w-full rounded bg-transparent px-4 body-default",
+			"w-full rounded-lg px-4 body-small",
 			"text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
 			"bg-white dark:bg-neutral-800",
 			"outline-transparent transition-[border,color,outline] duration-300",
@@ -29,9 +29,9 @@ const inputBaseVariant = tv({
 			error: false,
 			class: {
 				base: [
-					"hover:ring-1 focus:ring-1",
-					"hover:border-blue-500 hover:ring-blue-500 focus:border-blue-500 focus:ring-blue-500",
-					"dark:hover:border-blue-400 dark:hover:ring-blue-400 dark:focus:border-blue-400 dark:focus:ring-blue-400",
+					"focus-within:ring-1 hover:ring-1",
+					"focus-within:border-blue-500 focus-within:ring-blue-500 hover:border-blue-500 hover:ring-blue-500",
+					"dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400 dark:hover:border-blue-400 dark:hover:ring-blue-400",
 				],
 			},
 		},

package/dist/components/atoms/label/label.variants.d.ts

@@ -5,7 +5,7 @@ export const labelVariants: import("tailwind-variants").TVReturnType<{
     hidden: {
         true: string;
     };
-}, undefined, "body-small text-neutral-500", {
+}, undefined, "ui-select-label text-neutral-500", {
     error: {
         true: string;
     };
@@ -19,4 +19,4 @@ export const labelVariants: import("tailwind-variants").TVReturnType<{
     hidden: {
         true: string;
     };
-}, undefined, "body-small text-neutral-500", unknown, unknown, undefined>>;
+}, undefined, "ui-select-label text-neutral-500", unknown, unknown, undefined>>;

package/dist/components/atoms/label/label.variants.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 
 const labelVariants = tv({
-	base: "body-small text-neutral-500",
+	base: "ui-select-label text-neutral-500",
 	variants: {
 		error: {
 			true: "text-red-500",

package/dist/components/atoms/select/Select.svelte

@@ -30,7 +30,6 @@
 		required = false,
 		value = $bindable(),
 		variant = "default",
-
 		...rest
 	} = $props();
 

package/dist/components/atoms/select/select.variants.js

@@ -6,7 +6,7 @@ const selectVariants = tv({
 	slots: {
 		base: [
 			"flex items-center",
-			"[&::picker(select)]:my-1 [&::picker(select)]:rounded [&::picker(select)]:border-0 [&::picker(select)]:p-1",
+			"[&::picker(select)]:my-1 [&::picker(select)]:rounded-sm [&::picker(select)]:border-0 [&::picker(select)]:p-1",
 			"[&::picker-icon]:hidden",
 			"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
 			"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
@@ -14,7 +14,7 @@ const selectVariants = tv({
 			"[&:open]:after:rotate-180",
 		],
 		option: [
-			"flex rounded p-2 body-small",
+			"flex rounded-sm p-2 ui-select-label",
 			"bg-white dark:bg-neutral-800",
 			"bg-linear-to-r to-transparent",
 			"[&::checkmark]:order-1 [&::checkmark]:ml-auto [&::checkmark]:shrink-0",

package/dist/components/molecules/notification/notification.variants.js

@@ -2,12 +2,12 @@ import { tv } from "tailwind-variants";
 
 const notificationVariants = tv({
 	slots: {
-		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border-1 border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
-		close: "col-[3] self-start",
+		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
+		close: "col-3 self-start",
 		icon: "flex h-10 w-10 items-center justify-center rounded-sm text-white",
 		content: "flex flex-col justify-center",
-		message: "body-extra-small text-neutral-500",
-		title: "body-default dark:text-white",
+		message: "ui-caption-helper text-neutral-500",
+		title: "body-small dark:text-white",
 	},
 	variants: {
 		variant: {

package/dist/components/molecules/pickers/colorSwatch/colorSwatch.variants.js

@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 
 const colorSwatchVariants = tv({
 	slots: {
-		base: "flex cursor-pointer items-center justify-center gap-1 rounded transition duration-200 select-none hover:bg-neutral-300 dark:hover:bg-neutral-700",
-		iconText: "flex h-4 w-4 items-center justify-center rounded",
+		base: "flex cursor-pointer items-center justify-center gap-1 rounded-sm transition duration-200 select-none hover:bg-neutral-300 dark:hover:bg-neutral-700",
+		iconText: "flex h-4 w-4 items-center justify-center rounded-sm",
 		iconArrow: "dark:text-white",
 	},
 	variants: {

package/dist/components/molecules/richTextEditor/richTextEditor.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const richTextEditorVariants = tv({
 	slots: {
-		base: "body-default text-neutral-800 dark:text-white",
+		base: "body-small text-neutral-800 dark:text-white",
 		toolbar:
 			"pointer flex gap-0.5 rounded-t-sm border border-b-0 border-neutral-300 px-5 py-2 dark:border-neutral-700",
 		field: [

package/dist/components/molecules/selectorCard/selectorCard.variants.js

@@ -2,11 +2,12 @@ import { tv } from "tailwind-variants";
 
 const selectorCardVariants = tv({
 	slots: {
-		base: "flex cursor-pointer gap-3 rounded-sm border border-neutral-300 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800",
-		content: "flex grow flex-col items-start gap-1",
-		helperText: "body-small text-neutral-500",
+		base: "flex cursor-pointer gap-3 rounded-lg border border-neutral-300 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800",
+		content: "",
+		helperText: "ui-caption-helper text-neutral-500",
 		input: "shrink-0",
-		label: "cursor-[inherit] heading-h6 text-neutral-900 dark:text-neutral-200",
+		label:
+			"mb-0.5 cursor-[inherit] ui-title-2 text-neutral-900 dark:text-neutral-200",
 	},
 	variants: {
 		disabled: {
@@ -16,7 +17,7 @@ const selectorCardVariants = tv({
 		},
 		error: {
 			true: {
-				base: "!border-red-500 outline-1 !outline-red-500",
+				base: "border-red-500! outline-1 outline-red-500!",
 				label: "text-red-500 dark:text-red-500",
 			},
 		},

package/dist/components/molecules/tagSelector/Dropdown.svelte

@@ -0,0 +1,111 @@
+<script>
+	import { Icon } from "../../../index.js";
+	import { onDestroy, onMount } from "svelte";
+	import { tagSelectorVariants } from "./tagSelector.variants.js";
+
+	let {
+		filtered,
+		highlighted,
+		inputRef,
+		labelCreate,
+		localValues,
+		onCreateItem,
+		onSelectItem,
+		query,
+		showCreate,
+		value = [],
+		...rest
+	} = $props();
+
+	let styles = $derived(tagSelectorVariants());
+
+	let dropdownPosition = $state("bottom");
+	let dropdownMaxHeight = $state(200);
+
+	const attachHighlightedItem = (item) => {
+		if (inputRef) {
+			// so the screen reader can read the highlighted option aloud
+			if (item.id) inputRef.setAttribute("aria-activedescendant", item.id);
+			else inputRef.removeAttribute("aria-activedescendant");
+		}
+
+		// maybe scroll item into view
+		if (item.offsetTop < item.offsetParent.scrollTop)
+			item.scrollIntoView({ block: "nearest" });
+		else if (
+			item.offsetTop + item.offsetHeight >
+			item.offsetParent.scrollTop + item.offsetParent.offsetHeight
+		)
+			item.scrollIntoView({ block: "nearest" });
+	};
+
+	const updateDropdownPosition = () => {
+		if (!inputRef) return;
+
+		const rect = inputRef.getBoundingClientRect();
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const spaceAbove = rect.top;
+
+		dropdownPosition = spaceBelow > spaceAbove ? "bottom" : "top";
+
+		dropdownMaxHeight =
+			dropdownPosition === "bottom"
+				? Math.min(300, spaceBelow - 24)
+				: Math.min(300, spaceAbove - 24);
+	};
+
+	const getOptionId = (itemId) =>
+		`${localValues?.id ?? "tagselector"}-option-${itemId}`;
+
+	onMount(() => updateDropdownPosition());
+	onDestroy(() => {
+		inputRef?.removeAttribute("aria-activedescendant");
+	});
+</script>
+
+<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />
+
+<div
+	class={styles.dropdown({ dropdownPosition })}
+	id={localValues.id}
+	role="listbox"
+	style={`max-height: ${dropdownMaxHeight}px`}
+	tabindex="-1"
+	{...rest}>
+	{#snippet option({ highlighted, id, label, selected, ...rest })}
+		<button
+			aria-selected={selected}
+			{@attach highlighted ? attachHighlightedItem : null}
+			class={styles.dropdownItem()}
+			data-highlighted={highlighted}
+			{id}
+			role="option"
+			tabindex="-1"
+			{...rest}>
+			{label}
+			{#if selected}
+				<Icon class={styles.dropdownCheckmark()} name="check" size={16} />
+			{/if}
+		</button>
+	{/snippet}
+
+	{#each filtered as item, i (item.id)}
+		{@render option({
+			highlighted: highlighted === i,
+			id: getOptionId(item.id),
+			label: item.label,
+			selected: value.includes(item.id),
+			onclick: () => onSelectItem(item.id),
+		})}
+	{/each}
+
+	{#if showCreate}
+		{@render option({
+			highlighted: highlighted === filtered.length,
+			id: getOptionId("create"),
+			label: `${labelCreate}: "${query}"`,
+			selected: false,
+			onclick: onCreateItem,
+		})}
+	{/if}
+</div>

package/dist/components/molecules/tagSelector/Dropdown.svelte.d.ts

@@ -0,0 +1,29 @@
+export default Dropdown;
+type Dropdown = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Dropdown: import("svelte").Component<{
+    filtered: any;
+    highlighted: any;
+    inputRef: any;
+    labelCreate: any;
+    localValues: any;
+    onCreateItem: any;
+    onSelectItem: any;
+    query: any;
+    showCreate: any;
+    value?: any[];
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    filtered: any;
+    highlighted: any;
+    inputRef: any;
+    labelCreate: any;
+    localValues: any;
+    onCreateItem: any;
+    onSelectItem: any;
+    query: any;
+    showCreate: any;
+    value?: any[];
+} & Record<string, any>;

package/dist/components/molecules/tagSelector/TagSelector.svelte

@@ -0,0 +1,241 @@
+<script>
+	import { getContext } from "svelte";
+	import Dropdown from "./Dropdown.svelte";
+	import ValueList from "./ValueList.svelte";
+	import { tagSelectorVariants } from "./tagSelector.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [autofocus=false] Whether the input should be autofocused on mount
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the component is disabled
+	 * @property {string} [id=""] The ID of the input element
+	 * @property {string} [labelCreate=""] The label for the create new tag option
+	 * @property {string} [name] The name of the input, used for form submission
+	 * @property {Array<{id: string | number, label: string}>} [options=[]] The available tag options
+	 * @property {string} [placeholder=""] The placeholder text for the input
+	 * @property {Array<string | number>} [value=[]] The currently selected tags, bound to the component
+	 */
+
+	/** @type {Props} */
+	let {
+		autofocus = false,
+		class: className = "",
+		disabled = false,
+		id = "",
+		labelCreate = "",
+		name,
+		options = [],
+		placeholder = "",
+		value = $bindable([]),
+		...rest
+	} = $props();
+
+	let store = getContext("form-field-store");
+
+	let localValues = $derived.by(() => {
+		if (store) {
+			return {
+				...store(),
+			};
+		}
+
+		return {
+			disabled,
+			id,
+		};
+	});
+
+	let open = $state(false);
+	let query = $state("");
+	let highlighted = $state(-1);
+
+	let inputRef = $state();
+	let rootRef = $state();
+
+	let normalized = $derived(query.trim().toLowerCase());
+
+	let filtered = $derived(
+		options.filter((i) => i.label.toLowerCase().includes(normalized)),
+	);
+
+	let showCreate = $derived(
+		normalized.length > 0 &&
+			!filtered.some((i) => i.label.toLowerCase() === normalized),
+	);
+
+	$effect(() => {
+		if (autofocus && inputRef) inputRef.focus();
+	});
+
+	const openDropdown = () => {
+		open = true;
+		highlighted = -1;
+	};
+
+	const closeDropdown = () => {
+		open = false;
+		highlighted = -1;
+	};
+
+	const dispatchChange = () => {
+		rootRef.dispatchEvent(new CustomEvent("change", { detail: value }));
+	};
+
+	const dispatchCreate = (item) => {
+		rootRef.dispatchEvent(new CustomEvent("create", { detail: item }));
+	};
+
+	const refocusInput = () => {
+		query = "";
+		open = true;
+		requestAnimationFrame(() => inputRef?.focus());
+	};
+
+	const removeItem = (id) => {
+		value = value.filter((vId) => vId !== id);
+		dispatchChange();
+	};
+
+	const selectItem = (id) => {
+		if (value.includes(id)) {
+			removeItem(id);
+		} else {
+			value = [...value, id];
+			dispatchChange();
+		}
+
+		refocusInput();
+	};
+
+	const handleFocusOut = (e) => {
+		const next = e.relatedTarget;
+
+		if (next && rootRef.contains(next)) return;
+		if (document.activeElement === inputRef) return;
+
+		closeDropdown();
+	};
+
+	const createItem = () => {
+		const label = query.trim();
+		if (label === "") return; // also reset here?
+
+		const lower = label.toLowerCase();
+
+		const preset = options.find((i) => i.label.toLowerCase() === lower);
+
+		if (preset) {
+			const alreadySelected = value.includes(preset.id);
+
+			if (!alreadySelected) {
+				value = [...value, preset.id];
+				dispatchChange();
+			}
+
+			refocusInput();
+			return;
+		}
+
+		const selectedMatch = value.find(
+			(id) => typeof id === "string" && id.toLowerCase() === lower,
+		);
+
+		if (!selectedMatch) {
+			value = [...value, label];
+			dispatchChange();
+			dispatchCreate(label);
+		}
+
+		refocusInput();
+	};
+
+	const handleKey = (e) => {
+		if (!open) return;
+
+		const total = filtered.length + (showCreate ? 1 : 0);
+		const presetHighlighted = highlighted >= 0 && highlighted < filtered.length;
+
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			highlighted = (highlighted + 1) % total;
+			return;
+		}
+
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			highlighted = (highlighted - 1 + total) % total;
+			return;
+		}
+
+		if (e.key === "Escape") {
+			e.preventDefault();
+			if (normalized === "") open = false;
+			else refocusInput();
+			return;
+		}
+
+		if (e.key === "Enter" || (e.key === " " && presetHighlighted)) {
+			e.preventDefault();
+
+			if (presetHighlighted) {
+				selectItem(filtered[highlighted].id);
+				return;
+			}
+
+			if (showCreate && highlighted === filtered.length) {
+				createItem();
+				return;
+			}
+
+			if (normalized !== "") {
+				createItem();
+				return;
+			}
+		}
+	};
+
+	let styles = $derived(tagSelectorVariants({ disabled: localValues.disabled }));
+</script>
+
+<div
+	bind:this={rootRef}
+	aria-expanded={open}
+	class={styles.base({ class: className })}
+	onfocusout={handleFocusOut}
+	role="combobox"
+	{...open
+		? {
+				"aria-controls": localValues.id,
+				"aria-haspopup": "listbox",
+				"aria-owns": localValues.id,
+			}
+		: {}}
+	{...rest}>
+	<input {name} readonly type="hidden" value={value.join(",")} />
+	<ValueList
+		bind:inputRef
+		{localValues}
+		onKeydown={handleKey}
+		onOpenDropdown={openDropdown}
+		onRemoveItem={removeItem}
+		{open}
+		{options}
+		{placeholder}
+		bind:query
+		{value} />
+
+	{#if open}
+		<Dropdown
+			{filtered}
+			{highlighted}
+			{inputRef}
+			{labelCreate}
+			{localValues}
+			onCreateItem={createItem}
+			onSelectItem={selectItem}
+			{query}
+			{showCreate}
+			{value} />
+	{/if}
+</div>

package/dist/components/molecules/tagSelector/TagSelector.svelte.d.ts

@@ -0,0 +1,87 @@
+export default TagSelector;
+type TagSelector = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const TagSelector: import("svelte").Component<{
+    /**
+     * Whether the input should be autofocused on mount
+     */
+    autofocus?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The label for the create new tag option
+     */
+    labelCreate?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * The available tag options
+     */
+    options?: Array<{
+        id: string | number;
+        label: string;
+    }>;
+    /**
+     * The placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * The currently selected tags, bound to the component
+     */
+    value?: Array<string | number>;
+}, {}, "value">;
+type Props = {
+    /**
+     * Whether the input should be autofocused on mount
+     */
+    autofocus?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The label for the create new tag option
+     */
+    labelCreate?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * The available tag options
+     */
+    options?: Array<{
+        id: string | number;
+        label: string;
+    }>;
+    /**
+     * The placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * The currently selected tags, bound to the component
+     */
+    value?: Array<string | number>;
+};

package/dist/components/molecules/tagSelector/ValueList.svelte

@@ -0,0 +1,52 @@
+<script>
+	import { Chip } from "../../../index.js";
+	import { tagSelectorVariants } from "./tagSelector.variants.js";
+
+	let {
+		inputRef = $bindable(),
+		localValues,
+		onKeydown,
+		onOpenDropdown,
+		onRemoveItem,
+		open = false,
+		options = [],
+		placeholder,
+		query = $bindable(),
+		value = [],
+	} = $props();
+
+	let styles = $derived(tagSelectorVariants());
+</script>
+
+<div class={styles.valueList()}>
+	{#each value as s (s)}
+		{@const opt = options.find((i) => i.id === s)}
+		<Chip
+			class={styles.item()}
+			clickable
+			icon="closeSmall"
+			onclick={() => onRemoveItem(s)}>
+			{opt?.label ?? s}
+		</Chip>
+	{/each}
+
+	{#if !localValues.disabled}
+		<Chip class={styles.searchField()} icon="add" variant="outline">
+			<input
+				bind:this={inputRef}
+				bind:value={query}
+				autocomplete="off"
+				class={styles.searchInput()}
+				onfocus={onOpenDropdown}
+				oninput={onOpenDropdown}
+				onkeydown={onKeydown}
+				{...open
+					? {
+							"aria-controls": localValues.id,
+						}
+					: {}}
+				{placeholder}
+				role="searchbox" />
+		</Chip>
+	{/if}
+</div>

package/dist/components/molecules/tagSelector/ValueList.svelte.d.ts

@@ -0,0 +1,29 @@
+export default ValueList;
+type ValueList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ValueList: import("svelte").Component<{
+    inputRef?: any;
+    localValues: any;
+    onKeydown: any;
+    onOpenDropdown: any;
+    onRemoveItem: any;
+    open?: boolean;
+    options?: any[];
+    placeholder: any;
+    query?: any;
+    value?: any[];
+}, {}, "inputRef" | "query">;
+type $$ComponentProps = {
+    inputRef?: any;
+    localValues: any;
+    onKeydown: any;
+    onOpenDropdown: any;
+    onRemoveItem: any;
+    open?: boolean;
+    options?: any[];
+    placeholder: any;
+    query?: any;
+    value?: any[];
+};

package/dist/components/molecules/tagSelector/tagSelector.variants.d.ts

@@ -0,0 +1,71 @@
+export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
+    dropdownPosition: {
+        bottom: {
+            dropdown: string;
+        };
+        top: {
+            dropdown: string;
+        };
+    };
+}, {
+    base: string;
+    valueList: string;
+    item: string;
+    searchField: string;
+    searchInput: string;
+    dropdown: string;
+    dropdownCheckmark: string;
+    dropdownItem: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

package/dist/components/molecules/tagSelector/tagSelector.variants.js

@@ -0,0 +1,36 @@
+import { tv } from "tailwind-variants";
+import { inputBaseVariant } from "../../atoms/input/input.variants.js";
+
+const tagSelectorVariants = tv({
+	extend: inputBaseVariant,
+	slots: {
+		base: "relative min-h-10 p-1",
+		valueList: "flex flex-wrap gap-1",
+		item: "h-7.5",
+		searchField: "relative h-7.5 w-30",
+		searchInput:
+			"absolute inset-0 appearance-none border-0 bg-transparent pr-1 pl-8 ui-tag-badge placeholder-current focus:ring-0",
+		dropdown:
+			"absolute w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
+		dropdownCheckmark: "ml-auto shrink-0",
+		dropdownItem: [
+			"flex w-full grow items-center gap-2 rounded-sm p-2 ui-select-label",
+			"bg-white dark:bg-neutral-800",
+			"bg-linear-to-r to-transparent",
+			"cursor-pointer text-neutral-900 hover:from-black/15 dark:text-neutral-200 dark:hover:from-white/15",
+			"data-[highlighted=true]:from-black/15 dark:data-[highlighted=true]:from-white/15",
+		],
+	},
+	variants: {
+		dropdownPosition: {
+			bottom: {
+				dropdown: "top-full mt-1",
+			},
+			top: {
+				dropdown: "bottom-full mb-1",
+			},
+		},
+	},
+});
+
+export { tagSelectorVariants };

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from "svelte";
+	import { Icon } from "../../../index.js";
 	import {
 		toggleGroupItemVariants,
 		toggleGroupItemTabVariants,
@@ -9,15 +10,16 @@
 	 * @typedef {Object} Props
 	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {string} [icon] The name of the icon to display alongside the content
 	 * @property {string} [value=""] The value of the toggle group item
 	 */
 
 	/** @type {Props} */
-	let { children, class: className = "", value: localeValue } = $props();
+	let { children, class: className = "", icon, value: localeValue } = $props();
 
-	let store = getContext("toggle-group-store");
-	let { appearance, send, receive, size, variant } = $derived(store());
-	let isActive = $derived(store().value === localeValue);
+	let store = $derived(getContext("toggle-group-store")());
+	let { appearance, send, receive, size, variant } = $derived(store);
+	let isActive = $derived(store.value === localeValue);
 
 	let stylesByVariant = $derived.by(() => {
 		if (variant === "tabs") {
@@ -33,10 +35,18 @@
 		class={stylesByVariant.button({ appearance, class: className, isActive, size })}
 		role="tab"
 		onclick={() => {
-			store().update(localeValue);
+			store.update(localeValue);
 		}}
 		type="button">
-		<span class={stylesByVariant.span()}>{@render children?.()}</span>
+		<span class={stylesByVariant.span()}>
+			{#if icon}
+				<Icon
+					class={stylesByVariant.icon()}
+					name={icon}
+					size={variant === "tabs" || size === "small" ? 16 : 24} />
+			{/if}
+			{@render children?.()}
+		</span>
 		{#if isActive}
 			<div
 				class={stylesByVariant.trigger({ appearance })}

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte.d.ts

@@ -12,6 +12,10 @@ declare const ToggleGroupItem: import("svelte").Component<{
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * The name of the icon to display alongside the content
+     */
+    icon?: string;
     /**
      * The value of the toggle group item
      */
@@ -26,6 +30,10 @@ type Props = {
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * The name of the icon to display alongside the content
+     */
+    icon?: string;
     /**
      * The value of the toggle group item
      */

package/dist/components/molecules/toggleGroup/toggleGroup.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const toggleGroupVariants = tv({
 	slots: {
-		base: "overflow-hidden rounded-sm bg-current",
+		base: "overflow-hidden rounded-lg bg-current",
 		tabs: "flex gap-1",
 	},
 	variants: {
@@ -12,7 +12,7 @@ const toggleGroupVariants = tv({
 		},
 		size: {
 			small: {
-				tabs: "h-6 p-0.5",
+				tabs: "h-9 p-1",
 			},
 			medium: {
 				tabs: "h-10 p-1",
@@ -24,7 +24,7 @@ const toggleGroupVariants = tv({
 const toggleGroupTabVariants = tv({
 	slots: {
 		base: "",
-		tabs: "flex h-10 gap-5 border-b border-b-neutral-500",
+		tabs: "flex h-9 gap-4 border-b border-neutral-300 dark:border-neutral-700",
 	},
 });
 

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts

@@ -18,6 +18,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, {
@@ -40,6 +41,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -62,6 +64,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;
@@ -77,6 +80,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, {
@@ -91,6 +95,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -105,6 +110,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js

@@ -4,8 +4,9 @@ const toggleGroupItemVariants = tv({
 	slots: {
 		base: "relative h-full w-full whitespace-nowrap",
 		button:
-			"block h-full w-full cursor-pointer rounded-sm bg-transparent button-small transition-[background,color]",
-		span: "relative z-2 block",
+			"block h-full w-full cursor-pointer rounded-sm bg-transparent ui-button-small transition-[background,color]",
+		icon: "shrink-0",
+		span: "relative z-2 flex items-center justify-center gap-2",
 		trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
 	},
 	variants: {
@@ -19,7 +20,7 @@ const toggleGroupItemVariants = tv({
 		},
 		size: {
 			small: {
-				button: "px-1.5",
+				button: "px-1",
 			},
 			medium: {
 				button: "px-3",
@@ -48,19 +49,19 @@ const toggleGroupItemVariants = tv({
 
 const toggleGroupItemTabVariants = tv({
 	slots: {
-		base: "relative h-full w-full px-1 whitespace-nowrap",
-		button: "h-full w-full cursor-pointer button-default transition-[color]",
-		span: "block",
-		trigger:
-			"absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-blue-500 dark:bg-blue-400",
+		base: "relative h-full w-full whitespace-nowrap text-neutral-900 dark:text-neutral-200",
+		button: "h-full w-full cursor-pointer ui-button-default transition-[color]",
+		icon: "shrink-0",
+		span: "flex items-center justify-center gap-1",
+		trigger: "absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-current",
 	},
 	variants: {
 		isActive: {
 			true: {
-				button: "text-neutral-900 dark:text-white",
+				button: "text-current",
 			},
 			false: {
-				button: "text-neutral-500 hover:text-neutral-900 dark:hover:text-white",
+				button: "text-neutral-500 hover:text-current",
 			},
 		},
 	},

package/dist/components/organisms/modal/modal.variants.js

@@ -4,11 +4,12 @@ const modalVariants = tv({
 	slots: {
 		close: "ml-auto",
 		container:
-			"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[auto_1fr] overflow-hidden rounded-2xl bg-white leading-[1.486] shadow-sm dark:bg-neutral-800 dark:text-neutral-200",
-		header: "flex items-start border-b border-neutral-300 px-4 py-3",
+			"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[auto_1fr] overflow-hidden rounded-lg bg-white body-small shadow-sm outline-8 outline-white/90 dark:bg-neutral-800 dark:text-neutral-200 dark:outline-neutral-800/90",
+		header:
+			"flex items-end border-b border-neutral-300 px-4 py-3 ui-title-2 dark:border-neutral-700",
 		body: "h-full overflow-auto",
 		overlay: "fixed inset-0 z-modal-backdrop bg-black/25",
-		positioner: "fixed inset-0 z-1 z-modal grid items-center justify-items-center",
+		positioner: "fixed inset-0 z-modal grid items-center justify-items-center",
 		trigger: "cursor-pointer",
 	},
 	variants: {

package/dist/components/organisms/popover/popover.variants.js

@@ -7,7 +7,7 @@ const popoverVariants = tv({
 		content:
 			"flex flex-col-reverse rounded-2xl bg-white shadow-sm dark:bg-neutral-800",
 		header:
-			"flex items-center justify-between gap-3 border-b border-gray-300 heading-h6 dark:text-neutral-200",
+			"flex items-center justify-between gap-3 border-b border-gray-300 ui-title-2 dark:text-neutral-200",
 		trigger: "cursor-pointer",
 	},
 	variants: {

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { default as FormLayout } from "./components/molecules/formLayout/FormLay
 export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
 export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
+export { default as TagSelector } from "./components/molecules/tagSelector/TagSelector.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
 export * as Dialog from "./components/organisms/dialog/index.js";

package/dist/index.js

@@ -35,6 +35,7 @@ export { default as FormLayout } from "./components/molecules/formLayout/FormLay
 export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
 export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
+export { default as TagSelector } from "./components/molecules/tagSelector/TagSelector.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "publishConfig": {
     "access": "public"
   },
@@ -53,7 +53,7 @@
     "@sveltejs/kit": "^2.49.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^25.0.3",