@streamscloud/kit 0.2.0 → 0.2.2

package/dist/ui/inputs/textarea/cmp.textarea.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">import { DomHelper, HtmlHelper, Utils } from '../../../core/utils';
+import { InputEmojiPicker, inputEmojiPickerContainer } from '../input-emoji-picker';
+import { untrack } from 'svelte';
+let { value, placeholder = '', debounce = 0, hidePlaceholderOnFocus = true, submitOnEnter = false, singleLine = false, rows = 0, maxlength = 50000, id = '', disabled = false, autofocus = false, emoji = false, borderless = false, title = '', on } = $props();
+let textareaRef = $state(undefined);
+let placeholderInternal = $state(untrack(() => placeholder));
+const initTextarea = (node) => {
+    textareaRef = node;
+    if (rows) {
+        node.style.minHeight = DomHelper.calcHeightBasedOnRows(node, rows);
+    }
+    on?.mounted?.({ textarea: node });
+    autoHeightTextArea();
+    if (autofocus) {
+        node.focus();
+    }
+};
+const autoHeightTextArea = () => {
+    if (!textareaRef) {
+        return;
+    }
+    textareaRef.style.overflow = 'hidden';
+    textareaRef.style.height = 'auto';
+    textareaRef.style.height = textareaRef.scrollHeight + 'px';
+    textareaRef.style.overflow = '';
+};
+$effect(() => {
+    if (value !== undefined) {
+        autoHeightTextArea();
+    }
+});
+const onFocus = () => {
+    placeholderInternal = !hidePlaceholderOnFocus ? placeholder : '';
+};
+const onBlur = () => {
+    placeholderInternal = placeholder;
+};
+const sanitizeLineBreaks = (text) => text.replace(/[\r\n]+/g, ' ');
+const textChanged = () => {
+    if (textareaRef) {
+        on?.change?.(textareaRef.value);
+    }
+};
+const onBeforeInput = (event) => {
+    if (!singleLine || !textareaRef) {
+        return;
+    }
+    if (event.inputType === 'insertLineBreak' || event.inputType === 'insertParagraph') {
+        event.preventDefault();
+        return;
+    }
+    if (event.data && /[\r\n]/.test(event.data)) {
+        event.preventDefault();
+        const start = textareaRef.selectionStart;
+        const end = textareaRef.selectionEnd;
+        const clean = sanitizeLineBreaks(event.data);
+        textareaRef.setRangeText(clean, start, end, 'end');
+        textareaRef.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+};
+const onKeyDown = (event) => {
+    if (submitOnEnter && event.key === 'Enter' && !(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)) {
+        event.preventDefault();
+        on?.submit?.();
+    }
+};
+const handleChangeDebounced = $derived(debounce ? Utils.debounce(textChanged, debounce) : textChanged);
+const onEmojiSelected = (emojiChar) => {
+    if (textareaRef) {
+        HtmlHelper.pasteIntoInput(emojiChar, textareaRef);
+    }
+};
+</script>
+
+<div
+  class="textarea-input"
+  class:textarea-input--disabled={disabled}
+  class:textarea-input--borderless={borderless}
+  class:textarea-input--has-emoji={emoji}
+  use:inputEmojiPickerContainer>
+  <textarea
+    use:initTextarea
+    disabled={disabled}
+    placeholder={placeholderInternal}
+    maxlength={maxlength}
+    class="textarea-input__textarea"
+    class:textarea-input--disabled={disabled}
+    rows="1"
+    id={id}
+    title={title}
+    oninput={(e) => {
+      autoHeightTextArea();
+      handleChangeDebounced(e);
+    }}
+    onbeforeinput={onBeforeInput}
+    onfocus={onFocus}
+    onblur={onBlur}
+    onkeydown={onKeyDown}>{singleLine && value ? sanitizeLineBreaks(value) : value}</textarea>
+  {#if emoji}
+    <InputEmojiPicker on={{ select: onEmojiSelected }} />
+  {/if}
+</div>
+
+<!--
+@component
+Auto-resizing textarea with optional emoji picker, single-line mode, and submit-on-enter.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--textarea--root--font-size` | Root font size for em scaling | `1rem` |
+| `--sc-kit--textarea--width` | Container width | `100%` |
+| `--sc-kit--textarea--min-height` | Minimum height | `none` |
+| `--sc-kit--textarea--max-height` | Maximum height | `none` |
+| `--sc-kit--textarea--padding--block` | Block (vertical) padding | `0.5em` |
+| `--sc-kit--textarea--padding--inline` | Inline (horizontal) padding | `0.5em` |
+| `--sc-kit--textarea--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+| `--sc-kit--textarea--background` | Background color | light-dark white/gray-900 |
+| `--sc-kit--textarea--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+| `--sc-kit--textarea--border-color` | Border color | light-dark neutral-300/neutral-600 |
+| `--sc-kit--textarea--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--textarea--text--font-size` | Text font size | `0.875em` |
+| `--sc-kit--textarea--text--color` | Text color | light-dark gray-800/white |
+| `--sc-kit--textarea--text-align` | Text alignment | inherited |
+| `--sc-kit--textarea--placeholder--color` | Placeholder text color | inherited from border |
+-->
+
+<style>.textarea-input {
+  --_textarea--padding-block: var(--sc-kit--textarea--padding--block, 0.5em);
+  --_textarea--text-align: var(--sc-kit--textarea--text-align);
+  --_textarea--max-height: var(--sc-kit--textarea--max-height);
+  --_textarea--min-height: var(--sc-kit--textarea--min-height, none);
+  --_--input--root--font-size: var(--sc-kit--textarea--root--font-size);
+  --_--input--height: auto;
+  --_--input--width: var(--sc-kit--textarea--width);
+  --_--input--background: var(--sc-kit--textarea--background);
+  --_--input--background--disabled: var(--sc-kit--textarea--background--disabled);
+  --_--input--border-color: var(--sc-kit--textarea--border-color);
+  --_--input--border-radius: var(--sc-kit--textarea--border-radius);
+  --_--input--text--font-size: var(--sc-kit--textarea--text--font-size);
+  --_--input--text--color: var(--sc-kit--textarea--text--color);
+  --_--input--placeholder--color: var(--sc-kit--textarea--placeholder--color);
+  --_--input--accent-color: var(--sc-kit--textarea--accent-color);
+  --_--input--padding--inline: var(--sc-kit--textarea--padding--inline);
+  --_--input--padding--block: var(--_textarea--padding-block);
+  --_input--root--font-size: var(--_--input--root--font-size, 1rem);
+  --_input--height: var(--_--input--height, 2em);
+  --_input--width: var(--_--input--width, 100%);
+  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
+  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
+  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
+  --_input--border-radius: var(--_--input--border-radius, 0.25em);
+  --_input--icon--size: var(--_--input--icon--size, 1em);
+  --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
+  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
+  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
+  --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
+  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
+  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
+  --_input--padding--block: var(--_--input--padding--block, 0);
+  --_input--padding-top: var(--_--input--padding-top, var(--_input--padding--block));
+  --_input--padding-right: var(--_--input--padding-right, var(--_input--padding--inline));
+  --_input--padding-bottom: var(--_--input--padding-bottom, var(--_input--padding--block));
+  --_input--padding-left: var(--_--input--padding-left, var(--_input--padding--inline));
+  font-size: var(--_input--root--font-size);
+  height: var(--_input--height);
+  color: var(--_input--text--color);
+  border: 1px solid var(--_input--border-color);
+  border-radius: var(--_input--border-radius);
+  width: var(--_input--width);
+  min-width: var(--_input--width);
+  background: var(--_input--background);
+  padding-top: var(--_input--padding-top);
+  padding-right: var(--_input--padding-right);
+  padding-bottom: var(--_input--padding-bottom);
+  padding-left: var(--_input--padding-left);
+  --_input--default-shadow-color: transparent;
+  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
+  position: relative;
+  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
+  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.textarea-input:focus, .textarea-input:focus-within {
+  --_input--default-shadow-color: var(--_input--accent-color);
+}
+.textarea-input--disabled {
+  background-color: var(--_input--background--disabled);
+  cursor: default;
+}
+.textarea-input {
+  position: relative;
+}
+.textarea-input--borderless {
+  --_input--border-color: transparent;
+  --_input--background: transparent;
+  --_input--background--disabled: transparent;
+  --_input--accent-color: transparent;
+  --_input--explicit-shadow-color: transparent;
+  --_input--height: auto;
+}
+.textarea-input--has-emoji {
+  --_--input--padding-right: 1.5em;
+}
+.textarea-input__textarea {
+  min-height: var(--_textarea--min-height);
+  height: auto;
+  max-height: var(--_textarea--max-height);
+  width: 100%;
+  resize: none;
+  text-align: var(--_textarea--text-align);
+  padding: 0;
+  background-color: transparent !important;
+  font-size: var(--_input--text--font-size);
+  color: var(--_input--text--color);
+}
+.textarea-input__textarea::placeholder {
+  color: var(--_input--placeholder--color);
+}
+.textarea-input__textarea:-webkit-autofill {
+  -webkit-text-fill-color: var(--_input--text--color) !important;
+}
+.textarea-input__textarea {
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.textarea-input__textarea:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.textarea-input__textarea::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.textarea-input__textarea::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.textarea-input__textarea::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .textarea-input__textarea {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}</style>

package/dist/ui/inputs/textarea/cmp.textarea.svelte.d.ts

@@ -0,0 +1,57 @@
+type Props = {
+    value: string | null | undefined;
+    placeholder?: string;
+    /** Debounce delay in ms for change events @default 0 */
+    debounce?: number;
+    /** Hide placeholder text when textarea is focused @default true */
+    hidePlaceholderOnFocus?: boolean;
+    /** Fire submit callback on Enter key @default false */
+    submitOnEnter?: boolean;
+    /** Prevent line breaks, sanitize pasted text @default false */
+    singleLine?: boolean;
+    /** Minimum visible rows (0 = auto height) @default 0 */
+    rows?: number;
+    maxlength?: number;
+    id?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    /** Show emoji picker trigger */
+    emoji?: boolean;
+    /** Remove border, background, and accent shadow */
+    borderless?: boolean;
+    title?: string;
+    on: {
+        change?: (value: string) => void;
+        /** Fires on Enter when submitOnEnter is enabled */
+        submit?: () => void;
+        /** Fires after mount, provides the textarea element ref */
+        mounted?: (data: {
+            textarea: HTMLTextAreaElement;
+        }) => void;
+    };
+};
+/**
+ * Auto-resizing textarea with optional emoji picker, single-line mode, and submit-on-enter.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--textarea--root--font-size` | Root font size for em scaling | `1rem` |
+ * | `--sc-kit--textarea--width` | Container width | `100%` |
+ * | `--sc-kit--textarea--min-height` | Minimum height | `none` |
+ * | `--sc-kit--textarea--max-height` | Maximum height | `none` |
+ * | `--sc-kit--textarea--padding--block` | Block (vertical) padding | `0.5em` |
+ * | `--sc-kit--textarea--padding--inline` | Inline (horizontal) padding | `0.5em` |
+ * | `--sc-kit--textarea--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+ * | `--sc-kit--textarea--background` | Background color | light-dark white/gray-900 |
+ * | `--sc-kit--textarea--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+ * | `--sc-kit--textarea--border-color` | Border color | light-dark neutral-300/neutral-600 |
+ * | `--sc-kit--textarea--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--textarea--text--font-size` | Text font size | `0.875em` |
+ * | `--sc-kit--textarea--text--color` | Text color | light-dark gray-800/white |
+ * | `--sc-kit--textarea--text-align` | Text alignment | inherited |
+ * | `--sc-kit--textarea--placeholder--color` | Placeholder text color | inherited from border |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/inputs/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Textarea } from './cmp.textarea.svelte';
+export { default as TextareaValidatable } from './cmp.textarea-validatable.svelte';

package/dist/ui/inputs/textarea/index.js

@@ -0,0 +1,2 @@
+export { default as Textarea } from './cmp.textarea.svelte';
+export { default as TextareaValidatable } from './cmp.textarea-validatable.svelte';

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte.d.ts

@@ -1,7 +1,9 @@
 import { type DialogController } from '../dialog';
 import type { MediaViewerData } from './types';
 type Props = {
+    /** Dialog controller instance */
     controller: DialogController;
+    /** Media items and viewer configuration */
     data: MediaViewerData;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/media-viewer-dialog/index.d.ts

@@ -9,6 +9,7 @@ import type { MediaViewerData } from './types';
  * - `index` — zero-based index of the initially visible item
  * - `backgroundOpacity` — backdrop opacity (default `0.6`)
  * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
+ * - `host` — mount target for the dialog element (default `document.body`)
  */
-export declare const openMediaViewer: (data: MediaViewerData) => Promise<DialogResult<void>>;
+export declare const openMediaViewer: (data: MediaViewerData, host?: ParentNode) => Promise<DialogResult<void>>;
 export type { MediaViewerData, MediaViewerItem, MediaViewerItemType } from './types';

package/dist/ui/media-viewer-dialog/index.js

@@ -9,10 +9,12 @@ import { default as MediaViewerDialog } from './cmp.media-viewer-dialog.svelte';
  * - `index` — zero-based index of the initially visible item
  * - `backgroundOpacity` — backdrop opacity (default `0.6`)
  * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
+ * - `host` — mount target for the dialog element (default `document.body`)
  */
-export const openMediaViewer = (data) => {
+export const openMediaViewer = (data, host) => {
     return Dialogs.open({
         view: MediaViewerDialog,
-        data
+        data,
+        host
     });
 };

package/dist/ui/selects/_multiselect.scss

@@ -0,0 +1,282 @@
+@use 'styles/colors';
+@use 'styles/functions';
+@use 'styles/mixins';
+
+@mixin multiselect {
+  --_multiselect--root--font-size: var(--sc-kit--multiselect--root--font-size, 1rem);
+  --_multiselect--height: var(--sc-kit--multiselect--height, #{functions.em(32)});
+  --_multiselect--width: var(--sc-kit--multiselect--width, 100%);
+  --_multiselect--background: var(--sc-kit--multiselect--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
+  --_multiselect--background--disabled: var(--sc-kit--multiselect--background--disabled, light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800}));
+  --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
+  --_multiselect--border-radius: var(--sc-kit--multiselect--border-radius, #{functions.em(4)});
+  --_multiselect--text--font-size: var(--sc-kit--multiselect--text--font-size, #{functions.em(14)});
+  --_multiselect--text--color: var(--sc-kit--multiselect--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
+  --_multiselect--placeholder--color: var(--sc-kit--multiselect--placeholder--color, var(--_multiselect--border-color));
+  --_multiselect--icon--color: var(--sc-kit--multiselect--icon--color, var(--_multiselect--border-color));
+  --_multiselect--padding-inline: var(--sc-kit--multiselect--padding-inline, #{functions.em(8)});
+  --_multiselect--padding-block: var(--sc-kit--multiselect--padding-block, #{functions.em(4)});
+
+  --_multiselect--options--max-height: var(--sc-kit--multiselect--options--max-height, #{functions.em(320)});
+  --_multiselect--item--hover--background: var(
+    --sc-kit--multiselect--item--hover--background,
+    light-dark(#{colors.$color-gray-100}, #{colors.$color-gray-800})
+  );
+  --_multiselect--item--active--background: var(
+    --sc-kit--multiselect--item--active--background,
+    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-700})
+  );
+
+  --_multiselect--tag--color: var(--sc-kit--multiselect--tag--color, var(--_multiselect--text--color));
+  --_multiselect--tag--background: var(--sc-kit--multiselect--tag--background, var(--_multiselect--background));
+  --_multiselect--tag--border-color: var(--sc-kit--multiselect--tag--border-color, var(--_multiselect--border-color));
+  --_multiselect--tag--border-radius: var(--sc-kit--multiselect--tag--border-radius, var(--_multiselect--border-radius));
+  --_multiselect--tag--font-size: var(--sc-kit--multiselect--tag--font-size, calc(var(--_multiselect--text--font-size) * 0.9));
+  --_multiselect--tag--padding-inline: var(--sc-kit--multiselect--tag--padding-inline, var(--_multiselect--padding-inline));
+  --_multiselect--tag--padding-block: var(--sc-kit--multiselect--tag--padding-block, var(--_multiselect--padding-block));
+
+  --_multiselect--chevron--pointer-events: var(--sc-kit--multiselect--chevron--pointer-events, none);
+
+  --_multiselect--group-header--color: var(--sc-kit--multiselect--group-header--color, var(--_multiselect--placeholder--color));
+  --_multiselect--group-header--font-weight: var(--sc-kit--multiselect--group-header--font-weight, 500);
+  --_multiselect--group-item--padding-left: var(--sc-kit--multiselect--group-item--padding-left, #{functions.em(16)});
+
+  --_multiselect--inline--tag--background: var(
+    --sc-kit--multiselect--inline--tag--background,
+    light-dark(#{colors.$color-neutral-100}, #{colors.$color-neutral-700})
+  );
+
+  // svelte-select CSS variable mappings
+  --background: var(--_multiselect--background);
+  --border: 1px solid var(--_multiselect--border-color);
+  --border-focused: var(--border);
+  --border-hover: var(--border);
+  --border-radius: var(--_multiselect--border-radius);
+  --border-radius-focused: var(--border-radius);
+  --box-sizing: border-box;
+  --chevron-background: transparent;
+  --chevron-border: transparent;
+  --chevron-color: transparent;
+  --chevron-height: auto;
+  --chevron-pointer-events: var(--_multiselect--chevron--pointer-events);
+  --chevron-width: auto;
+  --disabled-background: var(--_multiselect--background--disabled);
+  --disabled-border-color: var(--_multiselect--border-color);
+  --disabled-color: var(--_multiselect--text--color);
+  --disabled-placeholder-color: var(--placeholder-color);
+  --disabled-placeholder-opacity: var(--placeholder-opacity);
+  --font-size: var(--_multiselect--text--font-size);
+  --height: var(--_multiselect--height);
+  --icons-color: var(--_multiselect--icon--color);
+  --indicators-bottom: auto;
+  --indicators-position: static;
+  --indicators-right: auto;
+  --indicators-top: auto;
+  --input--color: var(--_multiselect--text--color);
+  --input-left: 0;
+  --input-letter-spacing: 1;
+  --input-margin: 0;
+  --input-padding: 0 var(--_multiselect--padding-inline) 0 0;
+  --item-active-background: var(--_multiselect--item--active--background);
+  --item-color: var(--_multiselect--text--color);
+  --item-first-border-radius: 0;
+  --item-height: auto;
+  --item-hover-bg: var(--_multiselect--item--hover--background);
+  --item-hover-color: var(--_multiselect--text--color);
+  --item-is-active-bg: var(--_multiselect--item--active--background);
+  --item-is-active-color: var(--_multiselect--text--color);
+  --item-is-not-selectable-color: var(--_multiselect--group-header--color);
+  --item-line-height: 1;
+  --item-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
+  --item-transition: auto;
+  --list-background: var(--background);
+  --list-border: var(--border);
+  --list-border-radius: var(--border-radius);
+  --list-max-height: var(--_multiselect--options--max-height);
+  --list-position: absolute;
+  --list-shadow: none;
+  --list-z-index: 2;
+  --loading--margin: 0;
+  --loading-color: var(--icons-color);
+  --loading-height: max-content;
+  --loading-width: max-content;
+  --margin: 0;
+  --max-height: var(--height);
+  --multi-item-active-outline: none;
+  --multi-item-bg: transparent;
+  --multi-item-border-radius: 0;
+  --multi-item-clear-icon-color: transparent;
+  --multi-item-color: transparent;
+  --multi-item-gap: 0;
+  --multi-item-height: 0;
+  --multi-item-margin: 0;
+  --multi-item-outline: none;
+  --multi-item-padding: 0;
+  --multi-max-width: 0;
+  --multi-select-input-margin: 0;
+  --multi-select-input-padding: 0;
+  --multi-select-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline) var(--_multiselect--padding-block) 0;
+  --padding: 0;
+  --placeholder-color: var(--_multiselect--placeholder--color);
+  --placeholder-opacity: 0.8;
+  --selected-item-color: auto;
+  --selected-item-overflow: auto;
+  --selected-item-padding: auto;
+  --spinner-color: var(--icons-color);
+  --spinner-height: var(--_multiselect--text--font-size);
+  --spinner-width: var(--_multiselect--text--font-size);
+  --value-container-overflow: hidden;
+  --value-container-padding: 0 var(--_multiselect--padding-inline) 0 0;
+  --width: var(--_multiselect--width);
+  --group-title-color: var(--_multiselect--group-header--color);
+  --group-title-font-weight: var(--_multiselect--group-header--font-weight);
+  --group-title-font-size: var(--_multiselect--text--font-size);
+  --group-title-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
+  --group-item-padding-left: var(--_multiselect--group-item--padding-left);
+
+  font-size: var(--_multiselect--root--font-size);
+  width: var(--_multiselect--width);
+  position: relative;
+
+  &__icon {
+    --sc-kit--icon--color: var(--_multiselect--icon--color);
+    --sc-kit--icon--size: 1.25em;
+    display: flex;
+    align-items: center;
+
+    &--prepend {
+      padding: 0 var(--_multiselect--padding-inline);
+
+      :global &:not(:has(*)) {
+        padding-right: 0 !important;
+      }
+    }
+  }
+
+  &__option {
+    font-size: var(--_multiselect--text--font-size);
+  }
+
+  &__selection {
+    font-size: var(--_multiselect--tag--font-size);
+    @include mixins.width(100%);
+    @include mixins.height(100%);
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__selection-text {
+    @include mixins.ellipsis;
+  }
+
+  &__no-options {
+    color: var(--_multiselect--placeholder--color);
+    padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
+  }
+
+  &--disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &--loading {
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 3%));
+      opacity: 0.5;
+    }
+  }
+
+  :global(.value-container) {
+    gap: 0 !important;
+  }
+
+  &--inline {
+    --max-height: auto;
+    --multi-item-active-outline: none;
+    --multi-item-bg: var(--_multiselect--inline--tag--background);
+    --multi-item-border-radius: var(--_multiselect--border-radius);
+    --multi-item-clear-icon-color: var(--_multiselect--icon--color);
+    --multi-item-color: var(--_multiselect--text--color);
+    --multi-item-gap: var(--_multiselect--padding-inline);
+    --multi-item-height: calc(var(--_multiselect--height) - 2 * var(--_multiselect--padding-block));
+    --multi-item-margin: 0;
+    --multi-item-outline: 1px solid var(--_multiselect--border-color);
+    --multi-item-padding: var(--_multiselect--tag--padding-block) var(--_multiselect--tag--padding-inline);
+    --multi-max-width: #{functions.em(150)};
+    --multi-select-input-margin: 0;
+    --multi-select-input-padding: 0;
+    --multi-select-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline) var(--_multiselect--padding-block) 0;
+
+    :global(.value-container) {
+      gap: #{functions.em(4)} !important;
+    }
+  }
+
+  &--inline-full-item {
+    --multi-max-width: none;
+  }
+
+  &--list-hidden {
+    --list-border: none;
+  }
+}
+
+@mixin multiselect-tags {
+  @include mixins.no-select;
+  display: flex;
+  flex-wrap: wrap;
+  gap: #{functions.em(4)};
+  margin-bottom: #{functions.em(4)};
+  min-width: 0;
+  width: 100%;
+
+  &__item {
+    display: flex;
+    gap: #{functions.em(6)};
+    vertical-align: middle;
+    border: 1px solid var(--_multiselect--tag--border-color);
+    font-size: var(--_multiselect--tag--font-size);
+    padding: var(--_multiselect--tag--padding-block) var(--_multiselect--tag--padding-inline);
+    color: var(--_multiselect--tag--color);
+    background: var(--_multiselect--tag--background);
+    border-radius: var(--_multiselect--tag--border-radius);
+    max-width: 100%;
+  }
+
+  &__item-text {
+    @include mixins.ellipsis;
+  }
+
+  &__deselect {
+    --sc-kit--icon--color: var(--_multiselect--icon--color);
+    --sc-kit--icon--size: #{functions.rem(20)};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  &__drag-handle {
+    --sc-kit--icon--color: var(--_multiselect--icon--color);
+    --sc-kit--icon--size: #{functions.rem(16)};
+    cursor: grab;
+    display: flex;
+    align-items: center;
+    font-size: 0.7em;
+    user-select: none;
+  }
+}
+
+@mixin multiselect-tags-others {
+  color: var(--_multiselect--placeholder--color);
+  font-size: var(--_multiselect--tag--font-size);
+  padding: var(--_multiselect--tag--padding-block) 0;
+}