@streamscloud/kit 0.2.1 → 0.2.2

package/dist/ui/selects/cmp.singleselect.svelte

@@ -0,0 +1,381 @@
+<script lang="ts" generics="T">import { Icon } from '../icon';
+import { SelectLocalization } from './select-localization';
+import IconAdd from '@fluentui/svg-icons/icons/add_16_filled.svg?raw';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import Fuse from 'fuse.js';
+import Select from 'svelte-select';
+let { value = null, options = [], placeholder = '', disabled = false, loading = false, creatable = null, allowReset = false, groupHeaderSelectable = false, on, icon, optionSnippet, selectionSnippet } = $props();
+const loc = new SelectLocalization();
+let listOpen = $state(false);
+let filterText = $state('');
+const floatingConfig = { strategy: 'absolute' };
+const flattenGroupedOptions = (opts) => {
+    const result = [];
+    for (const opt of opts) {
+        if ('options' in opt) {
+            for (const child of opt.options) {
+                result.push({ label: child.label, value: child.value, group: opt.label });
+            }
+        }
+        else {
+            result.push({ label: opt.label, value: opt.value });
+        }
+    }
+    return result;
+};
+const flatOptions = $derived(flattenGroupedOptions(options));
+let selectValue = $state.raw(null);
+$effect(() => {
+    const existent = flatOptions.find((x) => x.value === value);
+    if (existent) {
+        selectValue = {
+            label: existent.label,
+            value: existent.value,
+            $isCreated: false,
+            group: existent.group
+        };
+    }
+    else {
+        selectValue = null;
+    }
+});
+const generateOptions = (includeReset = true) => {
+    const generated = flatOptions.map((x) => ({
+        label: x.label,
+        value: x.value,
+        $isCreated: false,
+        group: x.group
+    }));
+    if (allowReset && includeReset) {
+        return [
+            {
+                label: placeholder || '-',
+                value: undefined,
+                $isCreated: false,
+                $isResetOption: true
+            },
+            ...generated
+        ];
+    }
+    return generated;
+};
+const groupBy = (item) => item.group;
+let optionItems = $state.raw([]);
+$effect(() => {
+    let generated = generateOptions();
+    if (!listOpen) {
+        generated = generated.filter((x) => !x.$isCreated);
+    }
+    optionItems = generated;
+});
+const onSelectChange = (item) => {
+    if (item.$isResetOption) {
+        on?.change?.(null);
+        return;
+    }
+    if (item.groupHeader) {
+        const group = options.find((opt) => 'options' in opt && opt.label === item.label);
+        if (group?.value !== undefined) {
+            on?.change?.(group.value);
+        }
+        return;
+    }
+    if (item.$isCreated === true) {
+        on?.create?.(item.value);
+        if (selectValue) {
+            const val = selectValue;
+            selectValue = null;
+            selectValue = val;
+        }
+        else {
+            selectValue = null;
+        }
+    }
+    else {
+        on?.change?.(item.value);
+    }
+};
+const itemFilter = (label, query) => {
+    if (!query) {
+        return true;
+    }
+    const fuse = new Fuse([label]);
+    const result = fuse.search(query);
+    return result.length > 0;
+};
+const onSelectFilter = (itemsFiltered) => {
+    if (!creatable || loading) {
+        return;
+    }
+    if (!creatable.validateFn(filterText)) {
+        return;
+    }
+    if (selectValue?.value === filterText) {
+        return;
+    }
+    const exactMatch = itemsFiltered.find((x) => x.label.toLowerCase() === filterText.toLowerCase());
+    if (!exactMatch) {
+        const isExistentOption = (opt) => opt.$isCreated === false && !opt.$isResetOption;
+        const allExistingOptions = optionItems.filter(isExistentOption);
+        const newOption = { value: filterText, label: filterText, $isCreated: true };
+        optionItems = [
+            newOption,
+            ...allExistingOptions.map((x) => ({
+                label: x.label,
+                value: x.value,
+                $isCreated: false,
+                group: flatOptions.find((f) => f.value === x.value)?.group
+            }))
+        ];
+    }
+    else if (!exactMatch.$isCreated) {
+        if (optionItems.some((x) => x.$isCreated)) {
+            optionItems = optionItems.filter((x) => !x.$isCreated);
+        }
+    }
+};
+</script>
+
+<div class="select" class:select--disabled={disabled} class:select--loading={loading}>
+  <Select
+    containerStyles="font-size: 1em;"
+    value={selectValue}
+    items={optionItems}
+    disabled={disabled}
+    floatingConfig={floatingConfig}
+    placeholder={placeholder}
+    bind:loading={loading}
+    clearable={false}
+    bind:listOpen={listOpen}
+    listOffset={2}
+    showChevron={!loading}
+    itemFilter={itemFilter}
+    groupBy={groupBy}
+    groupHeaderSelectable={groupHeaderSelectable}
+    bind:filterText={filterText}
+    inputAttributes={{ title: selectValue?.label ?? placeholder ?? '' }}
+    on:change={({ detail }) => onSelectChange(detail)}
+    on:filter={({ detail }) => onSelectFilter(detail)}>
+    <div slot="item" let:item class="select__option" title={item.label} class:select__option--faded={item.$isResetOption}>
+      {#if optionSnippet}
+        {@render optionSnippet({ item })}
+      {:else}
+        {#if item.$isCreated}
+          <Icon src={IconAdd} />
+        {/if}
+        {item.label}
+      {/if}
+    </div>
+    <div class="select__selection" slot="selection" let:selection>
+      <span class="select__selection-text">
+        {#if selectionSnippet}
+          {@render selectionSnippet({ selection })}
+        {:else}
+          {selection.label}
+        {/if}
+      </span>
+    </div>
+    <span slot="prepend" class="select__icon select__icon--prepend">
+      {#if icon}
+        {@render icon()}
+      {/if}
+    </span>
+    <span slot="chevron-icon" class="select__icon">
+      <Icon src={IconChevronDown} />
+    </span>
+    <svelte:fragment slot="empty">
+      <div class="select__no-options">{loc.noMatch}</div>
+    </svelte:fragment>
+  </Select>
+</div>
+
+<!--
+@component
+Single-value select dropdown built on svelte-select with fuzzy search. Supports groups, item creation, and reset option.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--singleselect--root--font-size` | Root font size | `1rem` |
+| `--sc-kit--singleselect--height` | Control height | `2em` |
+| `--sc-kit--singleselect--width` | Control width | `100%` |
+| `--sc-kit--singleselect--padding-block` | Vertical padding | `0.25em` |
+| `--sc-kit--singleselect--padding-inline` | Horizontal padding | `0.5em` |
+| `--sc-kit--singleselect--background` | Background color | `light-dark(white, gray-900)` |
+| `--sc-kit--singleselect--background--disabled` | Disabled background | `light-dark(neutral-50, neutral-800)` |
+| `--sc-kit--singleselect--border-color` | Border color | `light-dark(neutral-300, neutral-600)` |
+| `--sc-kit--singleselect--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--singleselect--text--font-size` | Text font size | `0.875em` |
+| `--sc-kit--singleselect--text--color` | Text color | `light-dark(gray-800, white)` |
+| `--sc-kit--singleselect--placeholder--color` | Placeholder color | border-color |
+| `--sc-kit--singleselect--icon--color` | Icon color | border-color |
+| `--sc-kit--singleselect--options--max-height` | Options list max height | `20em` |
+| `--sc-kit--singleselect--item--active--background` | Active item background | `light-dark(neutral-50, neutral-700)` |
+| `--sc-kit--singleselect--item--hover--background` | Item hover background | `light-dark(gray-100, gray-800)` |
+| `--sc-kit--singleselect--group-header--color` | Group header color | placeholder-color |
+| `--sc-kit--singleselect--group-header--font-weight` | Group header font weight | `500` |
+| `--sc-kit--singleselect--group-item--padding-left` | Group item left padding | `1em` |
+-->
+
+<style>.select {
+  --_singleselect--root--font-size: var(--sc-kit--singleselect--root--font-size, 1rem);
+  --_singleselect--height: var(--sc-kit--singleselect--height, 2em);
+  --_singleselect--width: var(--sc-kit--singleselect--width, 100%);
+  --_singleselect--background: var(--sc-kit--singleselect--background, light-dark(#ffffff, #1c1c1c));
+  --_singleselect--background--disabled: var(
+    --sc-kit--singleselect--background--disabled,
+    light-dark(#f9fafb, #1f2937)
+  );
+  --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#d1d5db, #4b5563));
+  --_singleselect--border-radius: var(--sc-kit--singleselect--border-radius, 0.25em);
+  --_singleselect--text--font-size: var(--sc-kit--singleselect--text--font-size, 0.875em);
+  --_singleselect--text--color: var(--sc-kit--singleselect--text--color, light-dark(#2e2e2e, #ffffff));
+  --_singleselect--placeholder--color: var(--sc-kit--singleselect--placeholder--color, var(--_singleselect--border-color));
+  --_singleselect--icon--color: var(--sc-kit--singleselect--icon--color, var(--_singleselect--border-color));
+  --_singleselect--padding-inline: var(--sc-kit--singleselect--padding-inline, 0.5em);
+  --_singleselect--padding-block: var(--sc-kit--singleselect--padding-block, 0.25em);
+  --_singleselect--options--max-height: var(--sc-kit--singleselect--options--max-height, 20em);
+  --_singleselect--item--hover--background: var(
+    --sc-kit--singleselect--item--hover--background,
+    light-dark(#f2f2f2, #2e2e2e)
+  );
+  --_singleselect--item--active--background: var(
+    --sc-kit--singleselect--item--active--background,
+    light-dark(#f9fafb, #374151)
+  );
+  --_singleselect--group-header--color: var(--sc-kit--singleselect--group-header--color, var(--_singleselect--placeholder--color));
+  --_singleselect--group-header--font-weight: var(--sc-kit--singleselect--group-header--font-weight, 500);
+  --_singleselect--group-item--padding-left: var(--sc-kit--singleselect--group-item--padding-left, 1em);
+  --background: var(--_singleselect--background);
+  --border: 1px solid var(--_singleselect--border-color);
+  --border-focused: var(--border);
+  --border-hover: var(--border);
+  --border-radius: var(--_singleselect--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: none;
+  --chevron-width: auto;
+  --disabled-background: var(--_singleselect--background--disabled);
+  --disabled-border-color: var(--_singleselect--border-color);
+  --disabled-color: var(--_singleselect--text--color);
+  --disabled-placeholder-color: var(--placeholder-color);
+  --disabled-placeholder-opacity: var(--placeholder-opacity);
+  --font-size: var(--_singleselect--text--font-size);
+  --height: var(--_singleselect--height);
+  --icons-color: var(--_singleselect--icon--color);
+  --indicators-bottom: auto;
+  --indicators-position: static;
+  --indicators-right: auto;
+  --indicators-top: auto;
+  --input--color: var(--_singleselect--text--color);
+  --input-left: 0;
+  --input-letter-spacing: 1;
+  --input-margin: 0;
+  --input-padding: 0 var(--_singleselect--padding-inline) 0 0;
+  --item-active-background: var(--_singleselect--item--active--background);
+  --item-color: var(--_singleselect--text--color);
+  --item-first-border-radius: 0;
+  --item-height: auto;
+  --item-hover-bg: var(--_singleselect--item--hover--background);
+  --item-hover-color: var(--_singleselect--text--color);
+  --item-is-active-bg: var(--_singleselect--item--active--background);
+  --item-is-active-color: var(--_singleselect--text--color);
+  --item-is-not-selectable-color: var(--_singleselect--group-header--color);
+  --item-line-height: 1;
+  --item-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+  --item-transition: auto;
+  --list-background: var(--background);
+  --list-border: var(--border);
+  --list-border-radius: var(--border-radius);
+  --list-max-height: var(--_singleselect--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);
+  --padding: 0 var(--_singleselect--padding-inline) 0 0;
+  --placeholder-color: var(--_singleselect--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(--_singleselect--text--font-size);
+  --spinner-width: var(--_singleselect--text--font-size);
+  --value-container-overflow: hidden;
+  --value-container-padding: 0;
+  --width: var(--_singleselect--width);
+  --group-title-color: var(--_singleselect--group-header--color);
+  --group-title-font-weight: var(--_singleselect--group-header--font-weight);
+  --group-title-font-size: var(--_singleselect--text--font-size);
+  --group-title-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+  --group-item-padding-left: var(--_singleselect--group-item--padding-left);
+  font-size: var(--_singleselect--root--font-size);
+  width: var(--_singleselect--width);
+  position: relative;
+}
+.select__icon {
+  --sc-kit--icon--color: var(--_singleselect--icon--color);
+  --sc-kit--icon--size: 1.25em;
+  display: flex;
+  align-items: center;
+}
+.select__icon--prepend {
+  padding: 0 var(--_singleselect--padding-inline);
+}
+:global(.select__icon--prepend:not(:has(*))) {
+  padding-right: 0 !important;
+}
+.select__option {
+  font-size: var(--_singleselect--text--font-size);
+}
+.select__option--faded {
+  color: var(--_singleselect--placeholder--color);
+  opacity: 0.5;
+}
+.select__selection {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.select__selection-text {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.select__no-options {
+  color: var(--_singleselect--placeholder--color);
+  padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+}
+.select--disabled {
+  cursor: default;
+  pointer-events: none;
+}
+.select--loading {
+  pointer-events: none;
+}
+.select--loading::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;
+}</style>

package/dist/ui/selects/cmp.singleselect.svelte.d.ts

@@ -0,0 +1,78 @@
+import type { SelectCreateItemSettings, SelectOption, SelectOptionGroup } from './types';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        value?: T | null;
+        options?: (SelectOption<T> | SelectOptionGroup<T>)[];
+        placeholder?: string;
+        disabled?: boolean;
+        loading?: boolean;
+        /** Settings for creating new items in the dropdown */
+        creatable?: SelectCreateItemSettings | null;
+        /** Adds a reset option at the top of the list to clear the value */
+        allowReset?: boolean;
+        /** Allow clicking group headers to select them */
+        groupHeaderSelectable?: boolean;
+        on?: {
+            change?: (value: T | null) => void;
+            create?: (label: string) => void;
+        };
+        /** Left icon snippet */
+        icon?: Snippet;
+        /** Custom option rendering */
+        optionSnippet?: Snippet<[{
+            item: SelectOption<T>;
+        }]>;
+        /** Custom selection rendering */
+        selectionSnippet?: Snippet<[{
+            selection: SelectOption<T>;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Single-value select dropdown built on svelte-select with fuzzy search. Supports groups, item creation, and reset option.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--singleselect--root--font-size` | Root font size | `1rem` |
+ * | `--sc-kit--singleselect--height` | Control height | `2em` |
+ * | `--sc-kit--singleselect--width` | Control width | `100%` |
+ * | `--sc-kit--singleselect--padding-block` | Vertical padding | `0.25em` |
+ * | `--sc-kit--singleselect--padding-inline` | Horizontal padding | `0.5em` |
+ * | `--sc-kit--singleselect--background` | Background color | `light-dark(white, gray-900)` |
+ * | `--sc-kit--singleselect--background--disabled` | Disabled background | `light-dark(neutral-50, neutral-800)` |
+ * | `--sc-kit--singleselect--border-color` | Border color | `light-dark(neutral-300, neutral-600)` |
+ * | `--sc-kit--singleselect--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--singleselect--text--font-size` | Text font size | `0.875em` |
+ * | `--sc-kit--singleselect--text--color` | Text color | `light-dark(gray-800, white)` |
+ * | `--sc-kit--singleselect--placeholder--color` | Placeholder color | border-color |
+ * | `--sc-kit--singleselect--icon--color` | Icon color | border-color |
+ * | `--sc-kit--singleselect--options--max-height` | Options list max height | `20em` |
+ * | `--sc-kit--singleselect--item--active--background` | Active item background | `light-dark(neutral-50, neutral-700)` |
+ * | `--sc-kit--singleselect--item--hover--background` | Item hover background | `light-dark(gray-100, gray-800)` |
+ * | `--sc-kit--singleselect--group-header--color` | Group header color | placeholder-color |
+ * | `--sc-kit--singleselect--group-header--font-weight` | Group header font weight | `500` |
+ * | `--sc-kit--singleselect--group-item--padding-left` | Group item left padding | `1em` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,5 @@
+export { default as Multiselect } from './cmp.multiselect.svelte';
+export { default as SearchMultiselect } from './cmp.search-multiselect.svelte';
+export { default as Singleselect } from './cmp.singleselect.svelte';
+export { SelectLocalization } from './select-localization';
+export type { SelectCreateItemSettings, SelectOption, SelectOptionGroup } from './types';

package/dist/ui/selects/index.js

@@ -0,0 +1,4 @@
+export { default as Multiselect } from './cmp.multiselect.svelte';
+export { default as SearchMultiselect } from './cmp.search-multiselect.svelte';
+export { default as Singleselect } from './cmp.singleselect.svelte';
+export { SelectLocalization } from './select-localization';

package/dist/ui/selects/select-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class SelectLocalization {
+    get empty(): string;
+    get noMatch(): string;
+    get createLabel(): (value: string) => string;
+    get nMore(): (count: number) => string;
+}

package/dist/ui/selects/select-localization.js

@@ -0,0 +1,27 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    empty: { en: 'No options', no: 'Ingen alternativer' },
+    noMatch: { en: 'No options found', no: 'Ingen alternativer funnet' },
+    createLabel: {
+        en: (value) => `Create "${value}"`,
+        no: (value) => `Opprett "${value}"`
+    },
+    nMore: {
+        en: (count) => `+${count} more`,
+        no: (count) => `+${count} til`
+    }
+};
+export class SelectLocalization {
+    get empty() {
+        return loc.empty[AppLocale.current];
+    }
+    get noMatch() {
+        return loc.noMatch[AppLocale.current];
+    }
+    get createLabel() {
+        return loc.createLabel[AppLocale.current];
+    }
+    get nMore() {
+        return loc.nMore[AppLocale.current];
+    }
+}

package/dist/ui/selects/types.d.ts

@@ -0,0 +1,29 @@
+export type SelectOption<T = string> = {
+    label: string;
+    value: T;
+};
+export type SelectOptionGroup<T = string> = {
+    label: string;
+    /** Value emitted when the group header is selected (requires groupHeaderSelectable) */
+    value?: T;
+    options: SelectOption<T>[];
+};
+export type SelectCreateItemSettings = {
+    /** Validates whether the typed value can be created as a new item */
+    validateFn: (value: string) => boolean;
+};
+export type SelectOptionItem<T> = SelectCreatedOptionItem | SelectExistentOptionItem<T>;
+export type SelectCreatedOptionItem = {
+    $isCreated: true;
+    $isResetOption?: boolean;
+    label: string;
+    value: string;
+    group?: string;
+};
+export type SelectExistentOptionItem<T> = {
+    $isCreated: false;
+    $isResetOption?: boolean;
+    label: string;
+    value: T;
+    group?: string;
+};

package/dist/ui/selects/types.js

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

package/dist/ui/time-ago/cmp.time-ago.svelte

@@ -71,10 +71,4 @@ const disableTimeout = () => {
 @component
 Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates.
 Falls back to an absolute date after the threshold is exceeded.
-
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `date` | `Date \| string \| null` | `null` | The date to display relative to now |
-| `thresholdMinutes` | `number` | `2880` (2 days) | Minutes after which absolute date is shown instead |
 -->

package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts

@@ -1,16 +1,12 @@
 type Props = {
+    /** Date to display relative to now */
     date: Date | string | null;
+    /** Minutes after which absolute date format is used @default 2880 */
     thresholdMinutes?: number;
 };
 /**
  * Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates.
  * Falls back to an absolute date after the threshold is exceeded.
- *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `date` | `Date \| string \| null` | `null` | The date to display relative to now |
- * | `thresholdMinutes` | `number` | `2880` (2 days) | Minutes after which absolute date is shown instead |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/validatable/_validatable.scss

@@ -0,0 +1,34 @@
+@use 'styles/input';
+@use 'styles/colors';
+
+@mixin validatable() {
+  --_validatable--error--color: var(--sc-kit--validatable--error--color, #{colors.$color-destructive-500});
+  --_validatable--error--position: var(--sc-kit--validatable--error--position, absolute);
+  --_validatable--error--left: var(--sc-kit--validatable--error--left, 0);
+  --_validatable--error--right: var(--sc-kit--validatable--error--right, 0);
+  --_validatable--margin-bottom: var(--sc-kit--validatable--margin-bottom, 1.1em);
+  --_validatable--margin-right: var(--sc-kit--validatable--margin-right, 0);
+  --_validatable--display: var(--sc-kit--validatable--display, block);
+  --_validatable--width: var(--sc-kit--validatable--width, auto);
+
+  position: relative;
+  margin-bottom: var(--_validatable--margin-bottom);
+  margin-right: var(--_validatable--margin-right);
+  display: var(--_validatable--display);
+  width: var(--_validatable--width);
+
+  &--errored {
+    @include input.input-accented(var(--_validatable--error--color));
+  }
+
+  &__error {
+    position: var(--_validatable--error--position);
+    top: calc(100% + 0.1em);
+    left: var(--_validatable--error--left);
+    right: var(--_validatable--error--right);
+    display: block;
+    color: var(--_validatable--error--color);
+    font-size: 0.7rem;
+    font-weight: 400;
+  }
+}

package/dist/ui/validatable/cmp.validatable.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" generics="T extends Record<string, unknown>">let { name, handler, disableTouchedTracking = false, children } = $props();
+const showErrors = $derived(handler.errors[name] && (disableTouchedTracking || handler.touched[name]));
+export {};
+</script>
+
+<div class="validatable" class:validatable--errored={showErrors}>
+  {@render children()}
+  {#if showErrors}
+    <small class="validatable__error">{handler.errors[name]}</small>
+  {/if}
+</div>
+
+<!--
+@component
+Wraps a form field and displays validation errors from a FormValidationHandler.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--validatable--error--color` | Error text and accent color | destructive-500 |
+| `--sc-kit--validatable--error--position` | Error message positioning | `absolute` |
+| `--sc-kit--validatable--error--left` | Error left offset | `0` |
+| `--sc-kit--validatable--error--right` | Error right offset | `0` |
+| `--sc-kit--validatable--margin-bottom` | Bottom margin for spacing | `1.1em` |
+| `--sc-kit--validatable--margin-right` | Right margin for spacing | `0` |
+| `--sc-kit--validatable--display` | Display mode | `block` |
+| `--sc-kit--validatable--width` | Container width | `auto` |
+-->
+
+<style>.validatable {
+  --_validatable--error--color: var(--sc-kit--validatable--error--color, #e71d36);
+  --_validatable--error--position: var(--sc-kit--validatable--error--position, absolute);
+  --_validatable--error--left: var(--sc-kit--validatable--error--left, 0);
+  --_validatable--error--right: var(--sc-kit--validatable--error--right, 0);
+  --_validatable--margin-bottom: var(--sc-kit--validatable--margin-bottom, 1.1em);
+  --_validatable--margin-right: var(--sc-kit--validatable--margin-right, 0);
+  --_validatable--display: var(--sc-kit--validatable--display, block);
+  --_validatable--width: var(--sc-kit--validatable--width, auto);
+  position: relative;
+  margin-bottom: var(--_validatable--margin-bottom);
+  margin-right: var(--_validatable--margin-right);
+  display: var(--_validatable--display);
+  width: var(--_validatable--width);
+}
+.validatable--errored {
+  --_input--explicit-shadow-color: var(--_validatable--error--color);
+}
+.validatable__error {
+  position: var(--_validatable--error--position);
+  top: calc(100% + 0.1em);
+  left: var(--_validatable--error--left);
+  right: var(--_validatable--error--right);
+  display: block;
+  color: var(--_validatable--error--color);
+  font-size: 0.7rem;
+  font-weight: 400;
+}</style>