svelte-multiselect 10.0.0 → 10.2.0

package/dist/CircleSpinner.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         color?: string | undefined;
@@ -13,6 +13,6 @@ declare const __propDef: {
 export type CircleSpinnerProps = typeof __propDef.props;
 export type CircleSpinnerEvents = typeof __propDef.events;
 export type CircleSpinnerSlots = typeof __propDef.slots;
-export default class CircleSpinner extends SvelteComponentTyped<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
+export default class CircleSpinner extends SvelteComponent<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
 }
 export {};

package/dist/CmdPalette.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -26,6 +26,6 @@ declare const __propDef: {
 export type CmdPaletteProps = typeof __propDef.props;
 export type CmdPaletteEvents = typeof __propDef.events;
 export type CmdPaletteSlots = typeof __propDef.slots;
-export default class CmdPalette extends SvelteComponentTyped<CmdPaletteProps, CmdPaletteEvents, CmdPaletteSlots> {
+export default class CmdPalette extends SvelteComponent<CmdPaletteProps, CmdPaletteEvents, CmdPaletteSlots> {
 }
 export {};

package/dist/MultiSelect.svelte

@@ -3,6 +3,7 @@ import { flip } from 'svelte/animate';
 import CircleSpinner from './CircleSpinner.svelte';
 import Wiggle from './Wiggle.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
+import { get_label, get_style } from './utils';
 export let activeIndex = null;
 export let activeOption = null;
 export let createOptionMsg = `Create this option...`;
@@ -25,7 +26,7 @@ export let filterFunc = (opt, searchText) => {
         return true;
     return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
 };
-export let focusInputOnSelect = `desktop`;
+export let closeDropdownOnSelect = `desktop`;
 export let form_input = null;
 export let highlightMatches = true;
 export let id = null;
@@ -59,26 +60,26 @@ export let resetFilterOnAdd = true;
 export let searchText = ``;
 export let selected = options
     ?.filter((opt) => opt instanceof Object && opt?.preselected)
-    .slice(0, maxSelect ?? undefined) ?? [];
+    .slice(0, maxSelect ?? undefined) ?? []; // don't allow more than maxSelect preselected options
 export let sortSelected = false;
 export let selectedOptionsDraggable = !sortSelected;
 export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
 export let value = null;
-// get the label key from an option object or the option itself if it's a string or number
-export const get_label = (opt) => {
-    if (opt instanceof Object) {
-        if (opt.label === undefined) {
-            console.error(`MultiSelect option ${JSON.stringify(opt)} is an object but has no label key`);
-        }
-        return opt.label;
-    }
-    return `${opt}`;
+const selected_to_value = (selected) => {
+    value = maxSelect === 1 ? selected[0] ?? null : selected;
+};
+const value_to_selected = (value) => {
+    if (maxSelect === 1)
+        selected = value ? [value] : [];
+    else
+        selected = value ?? [];
 };
 // if maxSelect=1, value is the single item in selected (or null if selected is empty)
 // this solves both https://github.com/janosh/svelte-multiselect/issues/86 and
 // https://github.com/janosh/svelte-multiselect/issues/136
-$: value = maxSelect === 1 ? selected[0] ?? null : selected;
+$: selected_to_value(selected);
+$: value_to_selected(value);
 let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
 if (!(options?.length > 0)) {
     if (allowUserOptions || loading || disabled || allowEmpty) {
@@ -185,10 +186,13 @@ function add(option, event) {
                 selected = selected.sort(sortSelected);
             }
         }
-        if (selected.length === maxSelect)
+        const reached_max_select = selected.length === maxSelect;
+        const dropdown_should_close = closeDropdownOnSelect === true ||
+            (closeDropdownOnSelect === `desktop` && window_width < breakpoint);
+        if (reached_max_select || dropdown_should_close) {
             close_dropdown(event);
-        else if (focusInputOnSelect === true ||
-            (focusInputOnSelect === `desktop` && window_width > breakpoint)) {
+        }
+        else if (!dropdown_should_close) {
             input?.focus();
         }
         dispatch(`add`, { option });
@@ -301,10 +305,10 @@ async function handle_keydown(event) {
     }
 }
 function remove_all() {
-    selected = [];
-    searchText = ``;
     dispatch(`removeAll`, { options: selected });
     dispatch(`change`, { options: selected, type: `removeAll` });
+    selected = [];
+    searchText = ``;
 }
 $: is_selected = (label) => selected.map(get_label).includes(label);
 const if_enter_or_space = (handler) => (event) => {
@@ -455,6 +459,7 @@ function highlight_matching_options(event) {
         on:dragenter={() => (drag_idx = idx)}
         on:dragover|preventDefault
         class:active={drag_idx === idx}
+        style={get_style(option, `selected`)}
       >
         <!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
         <slot name="selected" {option} {idx}>
@@ -597,6 +602,7 @@ function highlight_matching_options(event) {
           on:blur={() => (activeIndex = null)}
           role="option"
           aria-selected="false"
+          style={get_style(option, `option`)}
         >
           <slot name="option" {option} {idx}>
             <slot {option} {idx}>
@@ -608,16 +614,25 @@ function highlight_matching_options(event) {
             </slot>
           </slot>
         </li>
-      {:else}
-        {@const textInputIsDuplicate = selected.map(get_label).includes(searchText)}
-        <!-- set msg to duplicateOptionMsg if duplicates are not allowed and the user-entered
-          searchText is a duplicate, else set to createOptionMsg -->
-        {@const msg =
-          !duplicates && textInputIsDuplicate ? duplicateOptionMsg : createOptionMsg}
-        {#if allowUserOptions && searchText && msg}
+      {/each}
+      {#if searchText}
+        {@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
+        {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
+        {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
+        {@const no_match =
+          Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) && `no-match`}
+        {@const msgType = is_dupe || can_create || no_match}
+        {#if msgType}
+          {@const msg = {
+            dupe: duplicateOptionMsg,
+            create: createOptionMsg,
+            'no-match': noMatchingOptionsMsg,
+          }[msgType]}
           <li
             on:mousedown|stopPropagation
-            on:mouseup|stopPropagation={(event) => add(searchText, event)}
+            on:mouseup|stopPropagation={(event) => {
+              if (allowUserOptions) add(searchText, event)
+            }}
             title={createOptionMsg}
             class:active={option_msg_is_active}
             on:mouseover={() => (option_msg_is_active = true)}
@@ -627,24 +642,18 @@ function highlight_matching_options(event) {
             role="option"
             aria-selected="false"
             class="user-msg"
+            style:cursor={{
+              dupe: `not-allowed`,
+              create: `pointer`,
+              'no-match': `default`,
+            }[msgType]}
           >
-            <slot
-              name="user-msg"
-              {duplicateOptionMsg}
-              {createOptionMsg}
-              {textInputIsDuplicate}
-              {searchText}
-              {msg}
-            >
+            <slot name="user-msg" {searchText} {msgType} {msg}>
               {msg}
             </slot>
           </li>
-        {:else if noMatchingOptionsMsg}
-          <!-- use span to not have cursor: pointer -->
-          <span class="user-msg">{noMatchingOptionsMsg}</span>
         {/if}
-        <!-- Show nothing if all messages are empty -->
-      {/each}
+      {/if}
     </ul>
   {/if}
 </div>

package/dist/MultiSelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { MultiSelectEvents, Option as T } from './types';
 declare class __sveltets_Render<Option extends T> {
     props(): {
@@ -17,7 +17,7 @@ declare class __sveltets_Render<Option extends T> {
         duplicates?: boolean | undefined;
         key?: ((opt: T) => unknown) | undefined;
         filterFunc?: ((opt: Option, searchText: string) => boolean) | undefined;
-        focusInputOnSelect?: boolean | "desktop" | undefined;
+        closeDropdownOnSelect?: boolean | "desktop" | undefined;
         form_input?: HTMLInputElement | null | undefined;
         highlightMatches?: boolean | undefined;
         id?: string | null | undefined;
@@ -55,7 +55,6 @@ declare class __sveltets_Render<Option extends T> {
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
         value?: Option | Option[] | null | undefined;
-        get_label?: ((opt: T) => string | number) | undefined;
     };
     events(): MultiSelectEvents;
     slots(): {
@@ -87,10 +86,8 @@ declare class __sveltets_Render<Option extends T> {
             idx: any;
         };
         'user-msg': {
-            duplicateOptionMsg: string;
-            createOptionMsg: string | null;
-            textInputIsDuplicate: any;
             searchText: string;
+            msgType: any;
             msg: any;
         };
     };
@@ -98,7 +95,6 @@ declare class __sveltets_Render<Option extends T> {
 export type MultiSelectProps<Option extends T> = ReturnType<__sveltets_Render<Option>['props']>;
 export type MultiSelectEvents<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
 export type MultiSelectSlots<Option extends T> = ReturnType<__sveltets_Render<Option>['slots']>;
-export default class MultiSelect<Option extends T> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
-    get get_label(): (opt: T) => string | number;
+export default class MultiSelect<Option extends T> extends SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
 }
 export {};

package/dist/Wiggle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         wiggle?: boolean | undefined;
@@ -20,6 +20,6 @@ declare const __propDef: {
 export type WiggleProps = typeof __propDef.props;
 export type WiggleEvents = typeof __propDef.events;
 export type WiggleSlots = typeof __propDef.slots;
-export default class Wiggle extends SvelteComponentTyped<WiggleProps, WiggleEvents, WiggleSlots> {
+export default class Wiggle extends SvelteComponent<WiggleProps, WiggleEvents, WiggleSlots> {
 }
 export {};

package/dist/icons/ChevronExpand.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  ChevronExpandProps */
 /** @typedef {typeof __propDef.events}  ChevronExpandEvents */
 /** @typedef {typeof __propDef.slots}  ChevronExpandSlots */
-export default class ChevronExpand extends SvelteComponentTyped<{
+export default class ChevronExpand extends SvelteComponent<{
     [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class ChevronExpand extends SvelteComponentTyped<{
 export type ChevronExpandProps = typeof __propDef.props;
 export type ChevronExpandEvents = typeof __propDef.events;
 export type ChevronExpandSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/icons/Cross.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  CrossProps */
 /** @typedef {typeof __propDef.events}  CrossEvents */
 /** @typedef {typeof __propDef.slots}  CrossSlots */
-export default class Cross extends SvelteComponentTyped<{
+export default class Cross extends SvelteComponent<{
     [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class Cross extends SvelteComponentTyped<{
 export type CrossProps = typeof __propDef.props;
 export type CrossEvents = typeof __propDef.events;
 export type CrossSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/icons/Disabled.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  DisabledProps */
 /** @typedef {typeof __propDef.events}  DisabledEvents */
 /** @typedef {typeof __propDef.slots}  DisabledSlots */
-export default class Disabled extends SvelteComponentTyped<{
+export default class Disabled extends SvelteComponent<{
     [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class Disabled extends SvelteComponentTyped<{
 export type DisabledProps = typeof __propDef.props;
 export type DisabledEvents = typeof __propDef.events;
 export type DisabledSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/icons/Octocat.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  OctocatProps */
 /** @typedef {typeof __propDef.events}  OctocatEvents */
 /** @typedef {typeof __propDef.slots}  OctocatSlots */
-export default class Octocat extends SvelteComponentTyped<{
+export default class Octocat extends SvelteComponent<{
     [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class Octocat extends SvelteComponentTyped<{
 export type OctocatProps = typeof __propDef.props;
 export type OctocatEvents = typeof __propDef.events;
 export type OctocatSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/types.d.ts

@@ -1,4 +1,8 @@
 export type Option = string | number | ObjectOption;
+export type OptionStyle = string | {
+    option: string;
+    selected: string;
+};
 export type ObjectOption = {
     label: string | number;
     value?: unknown;
@@ -7,6 +11,7 @@ export type ObjectOption = {
     preselected?: boolean;
     disabledTitle?: string;
     selectedTitle?: string;
+    style?: OptionStyle;
     [key: string]: unknown;
 };
 export type DispatchEvents<T = Option> = {

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+import type { Option, OptionStyle } from './types';
+export declare const get_label: (opt: Option) => string | number;
+export declare function get_style(option: {
+    style?: OptionStyle;
+    [key: string]: unknown;
+} | string | number, key?: 'selected' | 'option' | null): string | null | undefined;

package/dist/utils.js

@@ -0,0 +1,30 @@
+// get the label key from an option object or the option itself if it's a string or number
+export const get_label = (opt) => {
+    if (opt instanceof Object) {
+        if (opt.label === undefined) {
+            console.error(`MultiSelect option ${JSON.stringify(opt)} is an object but has no label key`);
+        }
+        return opt.label;
+    }
+    return `${opt}`;
+};
+export function get_style(option, key = null) {
+    if (!option?.style)
+        return null;
+    if (![`selected`, `option`, null].includes(key)) {
+        console.error(`MultiSelect: Invalid key=${key} for get_style`);
+        return;
+    }
+    if (typeof option == `object` && option.style) {
+        if (typeof option.style == `string`) {
+            return option.style;
+        }
+        if (typeof option.style == `object`) {
+            if (key && key in option.style)
+                return option.style[key];
+            else {
+                console.error(`Invalid style object for option=${JSON.stringify(option)}`);
+            }
+        }
+    }
+}

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "10.0.0",
+  "version": "10.2.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -23,37 +23,37 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^4.0.1"
+    "svelte": "^4.2.0"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.1.4",
-    "@playwright/test": "^1.35.1",
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.21.0",
-    "@sveltejs/package": "2.1.0",
-    "@sveltejs/vite-plugin-svelte": "2.4.2",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "@vitest/coverage-v8": "^0.32.2",
-    "eslint": "^8.44.0",
-    "eslint-plugin-svelte": "^2.32.2",
-    "hastscript": "^7.2.0",
+    "@playwright/test": "^1.37.1",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.24.1",
+    "@sveltejs/package": "2.2.2",
+    "@sveltejs/vite-plugin-svelte": "2.4.5",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "@vitest/coverage-v8": "^0.34.4",
+    "eslint": "^8.49.0",
+    "eslint-plugin-svelte": "^2.33.1",
+    "hastscript": "^8.0.0",
     "highlight.js": "^11.8.0",
     "jsdom": "^22.1.0",
     "mdsvex": "^0.11.0",
-    "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.4",
+    "mdsvexamples": "^0.4.1",
+    "prettier": "^3.0.3",
+    "prettier-plugin-svelte": "^3.0.3",
+    "rehype-autolink-headings": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "svelte-check": "^3.5.1",
     "svelte-preprocess": "^5.0.4",
-    "svelte-toc": "^0.5.5",
-    "svelte-zoo": "^0.4.8",
-    "svelte2tsx": "^0.6.16",
-    "typescript": "5.1.6",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "svelte-toc": "^0.5.6",
+    "svelte-zoo": "^0.4.9",
+    "svelte2tsx": "^0.6.21",
+    "typescript": "5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -194,10 +194,10 @@ Full list of props/bindable variables for this component. The `Option` type you
    Customize how dropdown options are filtered when user enters search string into `<MultiSelect />`. Defaults to:
 
 1. ```ts
-   focusInputOnSelect: boolean | 'desktop' = `desktop`
+   closeDropdownOnSelect: boolean | 'desktop' = `desktop`
    ```
 
-   One of `true`, `false` or `'desktop'`. Whether to set the cursor back to the input element after selecting an element. 'desktop' means only do so if current window width is larger than the current value of `breakpoint` prop (default 800).
+   One of `true`, `false` or `'desktop'`. Whether to close the dropdown list after selecting a dropdown item. If `true`, component will loose focus and `dropdown` is closed. `'desktop'` means `false` if current window width is larger than the current value of `breakpoint` prop (default is 800, meaning screen width in pixels). This is to align with the default behavior of many mobile browsers like Safari which close dropdowns after selecting an option while desktop browsers facilitate multi-selection by leaving dropdowns open.
 
 1. ```ts
    form_input: HTMLInputElement | null = null
@@ -385,7 +385,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    value: Option | Option[] | null = null
    ```
 
-   If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: `value` supports 1-way binding only, meaning `bind:value` will update `value` when internal component state changes but changing `value` externally will not update internal component state. This is because `value` is already reactive to `selected` and making `selected` reactive to `value` would be cyclic. Suggestions for better solutions that solve both [#86](https://github.com/janosh/svelte-multiselect/issues/86) and [#136](https://github.com/janosh/svelte-multiselect/issues/136) welcome!
+   If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: Setting `value` does not rendered state on initial mount, meaning `bind:value` will update local variable `value` whenever internal component state changes but passing a `value` when component first mounts won't be reflected in UI. This is because the source of truth for rendering is `bind:selected`. `selected` is reactive to `value` internally but only on reassignment from initial value. Suggestions for better solutions than [#249](https://github.com/janosh/svelte-multiselect/issues/249) welcome!
 
 ## 🎰 &thinsp; Slots
 
@@ -397,13 +397,11 @@ Full list of props/bindable variables for this component. The `Option` type you
 1. `slot="disabled-icon"`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `<span slot="disabled-icon" />` or `div` to remove the default disabled icon.
 1. `slot="expand-icon"`: Allows setting a custom icon to indicate to users that the Multiselect text input field is expandable into a dropdown list. Receives prop `open: boolean` which is true if the Multiselect dropdown is visible and false if it's hidden.
 1. `slot="remove-icon"`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props.
-1. `slot="user-msg"`: Displayed like a dropdown item when the list is empty and user is allowed to create custom options based on text input (or if the user's text input clashes with an existing option). `let:props`:
-   - `duplicateOptionMsg: string`: See [props](#🔣-props).
-   - `createOptionMsg: string`: See [props](#🔣-props).
-   - `textInputIsDuplicate: boolean`: Whether user has typed text that matches an already existing option.
-   - `searchText: string`: The text user typed into search input.
-   - `msg: string`: `duplicateOptionMsg` if user input is a duplicate else `createOptionMsg`.
-1. `slot='after-input'`: ForPlaced after the search input. For arbitrary content like icons or temporary messages. Receives props `selected`, `disabled`, `invalid`, `id`, `placeholder`, `open`, `required`.
+1. `slot="user-msg"`: Displayed like a dropdown item when the list is empty and user is allowed to create custom options based on text input (or if the user's text input clashes with an existing option). Receives props:
+   - `searchText`: The text user typed into search input.
+   - `msgType: false | 'create' | 'dupe' | 'no-match'`: `'dupe'` means user input is a duplicate of an existing option. `'create'` means user is allowed to convert their input into a new option not previously in the dropdown. `'no-match'` means user input doesn't match any dropdown items and users are not allowed to create new options. `false` means none of the above.
+   - `msg`: Will be `duplicateOptionMsg` or `createOptionMsg` (see [props](#🔣-props)) based on whether user input is a duplicate or can be created as new option. Note this slot replaces the default UI for displaying these messages so the slot needs to render them instead (unless purposely not showing a message).
+1. `slot='after-input'`: Placed after the search input. For arbitrary content like icons or temporary messages. Receives props `selected: Option[]`, `disabled: boolean`, `invalid: boolean`, `id: string | null`, `placeholder: string`, `open: boolean`, `required: boolean`. Can serve as a more dynamic, more customizable alternative to the `placeholder` prop.
 
 Example using several slots: