@websline/system-components 1.0.10-beta → 1.0.12

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-lg bg-transparent px-4 body-small",
+			"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/select/Select.svelte

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

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/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.10-beta",
+  "version": "1.0.12",
   "publishConfig": {
     "access": "public"
   },
@@ -44,37 +44,37 @@
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.0",
-    "@eslint/js": "^9.39.1",
-    "@storybook/addon-a11y": "^10.1.6",
-    "@storybook/addon-docs": "^10.1.6",
+    "@eslint/js": "^9.39.2",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
     "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/sveltekit": "^10.1.6",
+    "@storybook/sveltekit": "^10.1.10",
     "@sveltejs/adapter-auto": "^7.0.0",
     "@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.17",
-    "@types/node": "^24.10.2",
-    "@vitest/browser": "^4.0.15",
-    "eslint": "^9.39.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^25.0.3",
+    "@vitest/browser": "^4.0.16",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.1.6",
+    "eslint-plugin-storybook": "^10.1.10",
     "eslint-plugin-svelte": "^3.13.1",
     "globals": "^16.5.0",
     "playwright": "^1.57.0",
     "postcss-url": "^10.1.3",
     "prettier": "^3.7.4",
-    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-svelte": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.16",
-    "storybook": "^10.1.6",
-    "svelte": "^5.45.8",
-    "tailwindcss": "^4.1.17",
+    "storybook": "^10.1.10",
+    "svelte": "^5.46.0",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
-    "vite": "^7.2.7",
-    "vitest": "^4.0.15",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16",
     "vitest-browser-svelte": "^2.0.1"
   },
   "keywords": [