@streamscloud/kit 0.2.1 → 0.2.3

package/dist/ui/emoji-picker/emoji-picker-localization.d.ts

@@ -0,0 +1,5 @@
+export declare class EmojiPickerLocalization {
+    get searchPlaceholder(): string;
+    get notFound(): string;
+    get categories(): Record<string, string>;
+}

package/dist/ui/emoji-picker/emoji-picker-localization.js

@@ -0,0 +1,40 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    searchPlaceholder: { en: 'Search emoji...', no: 'Sok etter emoji...' },
+    notFound: { en: 'No emoji found', no: 'Ingen emoji funnet' }
+};
+const categories = {
+    emotions: { en: 'Smileys & Emotion', no: 'Smileys og folelser' },
+    people: { en: 'People & Body', no: 'Mennesker og kropp' },
+    nature: { en: 'Animals & Nature', no: 'Dyr og natur' },
+    food: { en: 'Food & Drink', no: 'Mat og drikke' },
+    travel: { en: 'Travel & Places', no: 'Reise og steder' },
+    activities: { en: 'Activities', no: 'Aktiviteter' },
+    objects: { en: 'Objects', no: 'Objekter' },
+    symbols: { en: 'Symbols', no: 'Symboler' },
+    flags: { en: 'Flags', no: 'Flagg' },
+    search: { en: 'Search Results', no: 'Sokeresultater' }
+};
+export class EmojiPickerLocalization {
+    get searchPlaceholder() {
+        return loc.searchPlaceholder[AppLocale.current];
+    }
+    get notFound() {
+        return loc.notFound[AppLocale.current];
+    }
+    get categories() {
+        const l = AppLocale.current;
+        return {
+            emotions: categories.emotions[l],
+            people: categories.people[l],
+            nature: categories.nature[l],
+            food: categories.food[l],
+            travel: categories.travel[l],
+            activities: categories.activities[l],
+            objects: categories.objects[l],
+            symbols: categories.symbols[l],
+            flags: categories.flags[l],
+            search: categories.search[l]
+        };
+    }
+}

package/dist/ui/emoji-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EmojiPanel } from './cmp.emoji-panel.svelte';
+export { default as EmojiPicker } from './cmp.emoji-picker.svelte';

package/dist/ui/emoji-picker/index.js

@@ -0,0 +1,2 @@
+export { default as EmojiPanel } from './cmp.emoji-panel.svelte';
+export { default as EmojiPicker } from './cmp.emoji-picker.svelte';

package/dist/ui/emoji-picker/types.d.ts

@@ -0,0 +1,8 @@
+export type Emoji = {
+    text: string;
+    unicode: string;
+};
+export type EmojiCategory = {
+    name: string;
+    emojis: Emoji[];
+};

package/dist/ui/emoji-picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/form-group/cmp.form-group-label.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 type Props = {
+    /** Enable flex layout for label + tooltip icon */
     withTooltip?: boolean;
     children: Snippet;
 };

package/dist/ui/form-group/cmp.form-group.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 type Props = {
+    /** Remove bottom margin */
     noMargin?: boolean;
     children: Snippet;
 };

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">import { Icon } from '../icon';
-let { icon, iconColor, iconPosition = 'left', trimText = false, children } = $props();
+let { icon, iconColor, iconPosition = 'left', secondaryIcon, secondaryIconColor, trimText = false, children } = $props();
 const iconAsSnippet = $derived(icon && typeof icon === 'function' ? icon : null);
 const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
+const secondaryIconAsSnippet = $derived(secondaryIcon && typeof secondaryIcon === 'function' ? secondaryIcon : null);
+const secondaryIconAsString = $derived(secondaryIcon && typeof secondaryIcon !== 'function' ? secondaryIcon : null);
 </script>
 
 <span class="icon-text" class:icon-text--right={iconPosition === 'right'}>
@@ -17,53 +19,56 @@ const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
       {@render children()}
     </span>
   {/if}
+  {#if secondaryIconAsSnippet || secondaryIconAsString}
+    <span class="icon-text__secondary-icon">
+      {#if secondaryIconAsSnippet}
+        {@render secondaryIconAsSnippet()}
+      {:else if secondaryIconAsString}
+        <Icon src={secondaryIconAsString} color={secondaryIconColor} />
+      {/if}
+    </span>
+  {/if}
 </span>
 
 <!--
 @component
 Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
 (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
-before or after the text.
-
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `icon` | `string \| Snippet` | — | SVG string or custom snippet for the icon |
-| `iconColor` | `IconColor \| null` | `null` | Color preset passed to `Icon` |
-| `iconPosition` | `'left' \| 'right'` | `'left'` | Icon placement relative to text |
-| `trimText` | `boolean` | `false` | Truncate text with ellipsis when overflowing |
-| `children` | `Snippet` | — | Text content |
+before or after the text. The optional `secondaryIcon` is always rendered on the
+opposite side of the text from the primary icon.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--icon-text--global--font-size` | Root font size of the component | `1em` |
-| `--sc-kit--icon-text--global--color` | Root text color | — |
+| `--sc-kit--icon-text--root--font-size` | Root font size of the component | `1em` |
+| `--sc-kit--icon-text--root--color` | Root text color | — |
 | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
 | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
 | `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
 | `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
-| `--sc-kit--icon-text--icon--size` | Icon width/height (forwarded to `Icon`) | `1em` |
 | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
 | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
+| `--sc-kit--icon-text--secondary-icon--font-size` | Font size of the secondary icon | text font size |
+| `--sc-kit--icon-text--secondary-icon--color` | Secondary icon color | global color |
 -->
 
 <style>.icon-text {
-  --_icon-text--global--font-size: var(--sc-kit--icon-text--global--font-size, 1em);
-  --_icon-text--global--color: var(--sc-kit--icon-text--global--color);
+  --_icon-text--root--font-size: var(--sc-kit--icon-text--root--font-size, 1em);
+  --_icon-text--root--color: var(--sc-kit--icon-text--root--color);
   --_icon-text--text--display: var(--sc-kit--icon-text--text--display, flex);
   --_icon-text--text--font-size: var(--sc-kit--icon-text--text--font-size, 1em);
   --_icon-text--icon--font-size: var(--sc-kit--icon-text--icon--font-size, var(--_icon-text--text--font-size));
-  --_icon-text--icon--color: var(--sc-kit--icon-text--icon--color);
+  --_icon-text--icon--color: var(--sc-kit--icon-text--icon--color, var(--_icon-text--root--color));
   --_icon-text--gap: var(--sc-kit--icon-text--gap, 0.5em);
   --_icon-text--justify-content: var(--sc-kit--icon-text--justify-content, normal);
-  --_icon-text--icon--size: var(--sc-kit--icon-text--icon--size, 1em);
+  --_icon-text--secondary-icon--font-size: var(--sc-kit--icon-text--secondary-icon--font-size, var(--_icon-text--text--font-size));
+  --_icon-text--secondary-icon--color: var(--sc-kit--icon-text--secondary-icon--color, var(--_icon-text--root--color));
   display: flex;
   align-items: center;
   justify-content: var(--_icon-text--justify-content);
-  font-size: var(--_icon-text--global--font-size);
+  font-size: var(--_icon-text--root--font-size);
   gap: var(--_icon-text--gap);
-  color: var(--_icon-text--global--color);
+  color: var(--_icon-text--root--color);
   min-width: 0;
 }
 .icon-text--right {
@@ -85,6 +90,13 @@ before or after the text.
   font-size: var(--_icon-text--icon--font-size);
   color: var(--_icon-text--icon--color);
   display: flex;
-  --sc-kit--icon--color: var(--_icon-text--icon--color, var(--_icon-text--global--color));
-  --sc-kit--icon--size: var(--_icon-text--icon--size);
+  --sc-kit--icon--color: var(--_icon-text--icon--color);
+  --sc-kit--icon--size: 1em;
+}
+.icon-text__secondary-icon {
+  font-size: var(--_icon-text--secondary-icon--font-size);
+  color: var(--_icon-text--secondary-icon--color);
+  display: flex;
+  --sc-kit--icon--color: var(--_icon-text--secondary-icon--color);
+  --sc-kit--icon--size: 1em;
 }</style>

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -1,38 +1,39 @@
 import { type IconColor } from '../icon';
 import type { Snippet } from 'svelte';
 type Props = {
+    /** SVG string or custom snippet for the icon */
     icon?: string | Snippet;
+    /** Color preset passed to the Icon component */
     iconColor?: IconColor | null;
+    /** Icon placement relative to text @default 'left' */
     iconPosition?: 'left' | 'right';
+    /** SVG string or custom snippet for a secondary icon on the opposite side of text from the primary icon */
+    secondaryIcon?: string | Snippet;
+    /** Color preset for the secondary icon */
+    secondaryIconColor?: IconColor | null;
+    /** Truncate text with ellipsis on overflow */
     trimText?: boolean;
     children?: Snippet;
 };
 /**
  * Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
  * (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
- * before or after the text.
- *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `icon` | `string \| Snippet` | — | SVG string or custom snippet for the icon |
- * | `iconColor` | `IconColor \| null` | `null` | Color preset passed to `Icon` |
- * | `iconPosition` | `'left' \| 'right'` | `'left'` | Icon placement relative to text |
- * | `trimText` | `boolean` | `false` | Truncate text with ellipsis when overflowing |
- * | `children` | `Snippet` | — | Text content |
+ * before or after the text. The optional `secondaryIcon` is always rendered on the
+ * opposite side of the text from the primary icon.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--icon-text--global--font-size` | Root font size of the component | `1em` |
- * | `--sc-kit--icon-text--global--color` | Root text color | — |
+ * | `--sc-kit--icon-text--root--font-size` | Root font size of the component | `1em` |
+ * | `--sc-kit--icon-text--root--color` | Root text color | — |
  * | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
  * | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
  * | `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
  * | `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
- * | `--sc-kit--icon-text--icon--size` | Icon width/height (forwarded to `Icon`) | `1em` |
  * | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
  * | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
+ * | `--sc-kit--icon-text--secondary-icon--font-size` | Font size of the secondary icon | text font size |
+ * | `--sc-kit--icon-text--secondary-icon--color` | Secondary icon color | global color |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -0,0 +1,6 @@
+export { Input, InputValidatable } from './input';
+export { NumeralInput, NumeralInputValidatable } from './numeral-input';
+export { PinInput } from './pin-input';
+export { RichTextInput } from './rich-text-input';
+export type { RichTextInputOptions } from './rich-text-input';
+export { Textarea, TextareaValidatable } from './textarea';

package/dist/ui/inputs/index.js

@@ -0,0 +1,5 @@
+export { Input, InputValidatable } from './input';
+export { NumeralInput, NumeralInputValidatable } from './numeral-input';
+export { PinInput } from './pin-input';
+export { RichTextInput } from './rich-text-input';
+export { Textarea, TextareaValidatable } from './textarea';

package/dist/ui/inputs/input/cmp.input-validatable.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" generics="T extends Record<string, unknown>">import { Utils } from '../../../core/utils';
+import { FormValidationHandler } from '../../../core/validation';
+import { Validatable } from '../../validatable';
+import { default as Input } from './cmp.input.svelte';
+let { name, handler, id = undefined, type = 'text', debounce = 0, disabled = false, autofocus = false, placeholder = '', maxLength = null, clearable = false, validateOnChange = false, on, icon, clearButton } = $props();
+let inputRef = null;
+const onInput = (value) => {
+    if (!validateOnChange) {
+        handler.updateValidateField(name, value);
+    }
+    on?.input?.(value);
+};
+const onChange = (value) => {
+    if (validateOnChange) {
+        handler.updateValidateField(name, value);
+    }
+    on?.change?.(value);
+};
+const onBlur = () => {
+    if (inputRef) {
+        handler.updateValidateField(name, inputRef.value);
+    }
+};
+const handleMounted = (input) => {
+    inputRef = input;
+    on?.mounted?.({ input });
+};
+const handleInputDebounced = $derived(debounce ? Utils.debounce(onInput, debounce) : onInput);
+const handleChangeDebounced = $derived(debounce ? Utils.debounce(onChange, debounce) : onChange);
+</script>
+
+<Validatable handler={handler} name={name}>
+  <Input
+    value={handler.form[name] as string | null | undefined}
+    name={name}
+    id={id}
+    type={type}
+    autofocus={autofocus}
+    disabled={disabled}
+    placeholder={placeholder}
+    maxLength={maxLength}
+    clearable={clearable}
+    title={!!handler.touched[name] && !!handler.errors[name] ? handler.errors[name] : ''}
+    on={{
+      input: handleInputDebounced,
+      change: handleChangeDebounced,
+      mounted: (e) => handleMounted(e.input),
+      blur: onBlur
+    }}
+    icon={icon}
+    clearButton={clearButton} />
+</Validatable>
+
+<!--
+@component
+Input wrapped with form validation. Validates on input or change based on `validateOnChange` prop.
+-->

package/dist/ui/inputs/input/cmp.input-validatable.svelte.d.ts

@@ -0,0 +1,56 @@
+import { FormValidationHandler } from '../../../core/validation';
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        /** Field name in the form handler */
+        name: keyof T & string;
+        /** Form validation handler instance */
+        handler: FormValidationHandler<T>;
+        id?: string;
+        type?: "text" | "password";
+        /** Debounce delay in ms for input/change handlers @default 0 */
+        debounce?: number;
+        disabled?: boolean;
+        autofocus?: boolean;
+        placeholder?: string;
+        maxLength?: number | null;
+        /** Show clear button when value is present */
+        clearable?: boolean;
+        /** Validate on change event instead of input @default false */
+        validateOnChange?: boolean;
+        on?: {
+            input?: (value: string) => void;
+            change?: (value: string) => void;
+            /** Fires after mount, provides the input element ref */
+            mounted?: (data: {
+                input: HTMLInputElement;
+            }) => void;
+        };
+        /** Left icon snippet */
+        icon?: Snippet;
+        /** Custom clear button snippet */
+        clearButton?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Input wrapped with form validation. Validates on input or change based on `validateOnChange` prop. */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,235 @@
+<script lang="ts">import { HtmlHelper } from '../../../core/utils';
+import { Icon } from '../../icon';
+import { InputEmojiPicker, inputEmojiPickerContainer } from '../input-emoji-picker';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+let { value, type = 'text', name = '', id = null, placeholder = '', disabled = false, inert = false, autofocus = false, clearable = false, emoji = false, borderless = false, title = '', maxLength = null, on, icon, clearButton } = $props();
+let inputRef = $state(undefined);
+const valueParsed = $derived(value ?? '');
+const initInput = (node) => {
+    inputRef = node;
+    if (autofocus) {
+        node.focus();
+    }
+    on?.mounted?.({ input: node });
+};
+const clearButtonVisible = $derived(!disabled && clearable && !!value);
+const onInput = () => {
+    if (!inputRef) {
+        return;
+    }
+    on?.input?.(inputRef.value);
+};
+const onChange = () => {
+    if (!inputRef) {
+        return;
+    }
+    on?.change?.(inputRef.value);
+};
+const clearValue = (e) => {
+    e.preventDefault();
+    if (!inputRef) {
+        return;
+    }
+    inputRef.value = '';
+    onInput();
+    onChange();
+    inputRef.focus();
+};
+const focusInput = () => {
+    inputRef?.focus();
+};
+const onBlur = () => {
+    if (inputRef) {
+        inputRef.value = valueParsed;
+    }
+    on?.blur?.();
+};
+const onEmojiSelected = (emojiChar) => {
+    if (inputRef) {
+        HtmlHelper.pasteIntoInput(emojiChar, inputRef);
+    }
+};
+</script>
+
+<div
+  class="input"
+  class:input--disabled={disabled}
+  class:input--inert={inert}
+  class:input--borderless={borderless}
+  class:input--has-emoji={emoji}
+  use:inputEmojiPickerContainer
+  onclick={focusInput}
+  onkeydown={() => ({})}
+  role="none">
+  {#if icon}
+    <div class="input__icon">
+      {@render icon()}
+    </div>
+  {/if}
+  <input
+    use:initInput
+    inert={inert}
+    type={type}
+    name={name}
+    id={id}
+    placeholder={placeholder}
+    class="input__input"
+    value={valueParsed}
+    disabled={disabled}
+    title={title}
+    maxlength={maxLength}
+    oninput={onInput}
+    onchange={onChange}
+    onblur={() => onBlur()}
+    onfocus={() => on?.focus?.()} />
+  {#if clearButtonVisible || clearButton}
+    <div class="input__clear-wrapper">
+      {#if clearButton}
+        {@render clearButton()}
+      {:else}
+        <button type="button" class="input__clear-button" onclick={clearValue}>
+          <Icon src={IconDismiss} />
+        </button>
+      {/if}
+    </div>
+  {/if}
+  {#if emoji}
+    <InputEmojiPicker on={{ select: onEmojiSelected }} />
+  {/if}
+</div>
+
+<!--
+@component
+Text/password input with optional clear button, icon, and emoji picker.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--input--root--font-size` | Root font size for em scaling | `1rem` |
+| `--sc-kit--input--height` | Container height | `2em` |
+| `--sc-kit--input--width` | Container width | `100%` |
+| `--sc-kit--input--padding--block` | Block (vertical) padding | `0` |
+| `--sc-kit--input--padding--inline` | Inline (horizontal) padding | `0.5em` |
+| `--sc-kit--input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+| `--sc-kit--input--background` | Background color | light-dark white/gray-900 |
+| `--sc-kit--input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+| `--sc-kit--input--border-color` | Border color | light-dark neutral-300/neutral-600 |
+| `--sc-kit--input--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--input--text--font-size` | Text font size | `0.875em` |
+| `--sc-kit--input--text--color` | Text color | light-dark gray-800/white |
+| `--sc-kit--input--placeholder--color` | Placeholder text color | inherited from border |
+| `--sc-kit--input--icon--size` | Icon size | `1em` |
+| `--sc-kit--input--icon--color` | Icon color | inherited from border |
+| `--sc-kit--input--cursor--inert` | Cursor when inert | `default` |
+-->
+
+<style>.input {
+  --_--input--root--font-size: var(--sc-kit--input--root--font-size);
+  --_--input--height: var(--sc-kit--input--height);
+  --_--input--width: var(--sc-kit--input--width);
+  --_--input--background: var(--sc-kit--input--background);
+  --_--input--background--disabled: var(--sc-kit--input--background--disabled);
+  --_--input--border-color: var(--sc-kit--input--border-color);
+  --_--input--border-radius: var(--sc-kit--input--border-radius);
+  --_--input--icon--size: var(--sc-kit--input--icon--size);
+  --_--input--icon--color: var(--sc-kit--input--icon--color);
+  --_--input--text--font-size: var(--sc-kit--input--text--font-size);
+  --_--input--text--color: var(--sc-kit--input--text--color);
+  --_--input--placeholder--color: var(--sc-kit--input--placeholder--color);
+  --_--input--accent-color: var(--sc-kit--input--accent-color);
+  --_--input--padding--inline: var(--sc-kit--input--padding--inline);
+  --_--input--padding--block: var(--sc-kit--input--padding--block);
+  --_input--cursor--inert: var(--sc-kit--input--cursor--inert);
+  --_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);
+}
+.input:focus, .input:focus-within {
+  --_input--default-shadow-color: var(--_input--accent-color);
+}
+.input--disabled {
+  background-color: var(--_input--background--disabled);
+  cursor: default;
+}
+.input {
+  display: flex;
+  align-items: center;
+  cursor: text;
+  position: relative;
+}
+.input--inert {
+  cursor: var(--_input--cursor--inert);
+}
+.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;
+}
+.input--has-emoji {
+  --_--input--padding-right: 1.5em;
+}
+.input__input {
+  flex: 1;
+  height: 100%;
+  padding: 0;
+  background-color: transparent !important;
+  font-size: var(--_input--text--font-size);
+  color: var(--_input--text--color);
+}
+.input__input::placeholder {
+  color: var(--_input--placeholder--color);
+}
+.input__input:-webkit-autofill {
+  -webkit-text-fill-color: var(--_input--text--color) !important;
+}
+.input__icon {
+  margin-right: 0.625em;
+  color: var(--_input--icon--color);
+  font-size: var(--_input--icon--size);
+}
+:global(.input__icon:not(:has(*))) {
+  margin-right: 0 !important;
+}
+.input__clear-wrapper {
+  color: var(--_input--icon--color);
+  font-size: var(--_input--icon--size);
+}
+.input__clear-button {
+  margin-left: 0.625em;
+}</style>

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

@@ -0,0 +1,60 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    value: string | null | undefined;
+    type?: 'text' | 'password';
+    name?: string;
+    id?: string | null;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Make input non-interactive (visual display only) */
+    inert?: boolean;
+    autofocus?: boolean;
+    /** Show clear button when value is present */
+    clearable?: boolean;
+    /** Show emoji picker trigger */
+    emoji?: boolean;
+    /** Remove border, background, and accent shadow */
+    borderless?: boolean;
+    title?: string;
+    maxLength?: number | null;
+    on: {
+        input?: (value: string) => void;
+        change?: (value: string) => void;
+        /** Fires after mount, provides the input element ref */
+        mounted?: (data: {
+            input: HTMLInputElement;
+        }) => void;
+        blur?: () => void;
+        focus?: () => void;
+    };
+    /** Left icon snippet */
+    icon?: Snippet;
+    /** Custom clear button snippet */
+    clearButton?: Snippet;
+};
+/**
+ * Text/password input with optional clear button, icon, and emoji picker.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--input--root--font-size` | Root font size for em scaling | `1rem` |
+ * | `--sc-kit--input--height` | Container height | `2em` |
+ * | `--sc-kit--input--width` | Container width | `100%` |
+ * | `--sc-kit--input--padding--block` | Block (vertical) padding | `0` |
+ * | `--sc-kit--input--padding--inline` | Inline (horizontal) padding | `0.5em` |
+ * | `--sc-kit--input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+ * | `--sc-kit--input--background` | Background color | light-dark white/gray-900 |
+ * | `--sc-kit--input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+ * | `--sc-kit--input--border-color` | Border color | light-dark neutral-300/neutral-600 |
+ * | `--sc-kit--input--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--input--text--font-size` | Text font size | `0.875em` |
+ * | `--sc-kit--input--text--color` | Text color | light-dark gray-800/white |
+ * | `--sc-kit--input--placeholder--color` | Placeholder text color | inherited from border |
+ * | `--sc-kit--input--icon--size` | Icon size | `1em` |
+ * | `--sc-kit--input--icon--color` | Icon color | inherited from border |
+ * | `--sc-kit--input--cursor--inert` | Cursor when inert | `default` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Input } from './cmp.input.svelte';
+export { default as InputValidatable } from './cmp.input-validatable.svelte';