@streamscloud/kit 0.2.42 → 0.9.0

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

@@ -1,9 +1,10 @@
 import type { Repository } from '../../core/repository';
-import type { BadgeColor } from '../badge';
+import type { BadgeVariant } from '../badge';
 import type { ButtonSize, ButtonVariant } from '../button';
 import { DynamicComponentModel } from '../dynamic-component';
-import type { IconColor } from '../icon';
-import type { SelectOption } from '../selects';
+import type { IconProp } from '../icon';
+import type { SelectOption } from '../select';
+import type { Snippet } from 'svelte';
 import type { ISchema } from 'yup';
 export type WithId = {
     id: string;
@@ -11,9 +12,9 @@ export type WithId = {
 export type IAnyTableColumn<T> = {
     [P in keyof T]: IOneOfTableColumn<T, P>;
 }[keyof T];
-export type IOneOfTableColumn<T, K extends keyof T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableCustomColumn<T> | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSelectColumn<T, K> | ITableTextColumn<T> | ITableTextInputColumn<T>;
+export type IOneOfTableColumn<T, K extends keyof T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableCustomColumn<T> | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSelectColumn<T, K> | ITableSnippetColumn<T> | ITableTextColumn<T> | ITableTextInputColumn<T>;
 export type IEditorColumn<T> = ITableTextInputColumn<T> | ITableSelectColumn<T, keyof T>;
-export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'custom' | 'icon' | 'image' | 'move-row' | 'select' | 'text' | 'text-input';
+export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'custom' | 'icon' | 'image' | 'move-row' | 'select' | 'snippet' | 'text' | 'text-input';
 interface ITableColumnBase {
     type: TableColumnType;
     fixedCssWidth?: string;
@@ -37,9 +38,8 @@ export interface ITableActionsColumn extends ITableColumnBase {
 }
 export interface ITableBadgeColumn<T> extends ITableColumn<T> {
     type: 'badge';
-    colorFactory?: ((item: T) => BadgeColor) | null;
+    variantFactory?: ((item: T) => BadgeVariant) | null;
     valueFactory?: ((item: T) => string) | null;
-    roundedBadge?: boolean;
 }
 export interface ITableByColumn<T> extends ITableColumn<T> {
     type: 'by';
@@ -76,8 +76,7 @@ export interface ITableCustomColumn<T> extends ITableColumn<T> {
 }
 export interface ITableIconColumn<T> extends ITableColumn<T> {
     type: 'icon';
-    colorFactory?: ((item: T) => IconColor) | null;
-    iconSrcFactory?: ((item: T) => string) | null;
+    iconFactory?: ((item: T) => IconProp) | null;
     tooltipTextFactory?: ((item: T) => string) | null;
 }
 export interface ITableImageColumn<T> extends ITableColumn<T> {
@@ -99,9 +98,14 @@ export interface ITableSelectColumn<T, K extends keyof T> extends ITableColumn<T
     placeholder?: string | null;
     disabledFactory?: ((item: T) => boolean) | null;
     visibilityFactory?: ((item: T) => boolean) | null;
-    allowReset?: boolean;
+    clearable?: boolean;
     onSelected: (item: T, value: T[K] | null) => void;
 }
+export interface ITableSnippetColumn<T> extends ITableColumn<T> {
+    type: 'snippet';
+    /** Render-prop snippet receiving the row item. Use for rich / custom cell composition without creating a separate cell component. */
+    cell: Snippet<[T]>;
+}
 export interface ITableTextColumn<T> extends ITableColumn<T> {
     type: 'text';
     format?: TableTextColumnFormat | null;
@@ -121,14 +125,21 @@ export type TableTextColumnFormat = 'text' | 'html' | 'money' | 'date' | 'date-t
 export type TableImageColumnFormat = 'circle' | 'square-contain' | 'square-cover';
 export type TableItemAction<T> = {
     title: string;
-    icon?: string;
-    color?: IconColor;
+    icon?: IconProp;
     action: (item: T) => void;
     visibilityFactory?: (item: T) => boolean;
 };
 export type TableStyles = {
+    /** Stick the table header to the scrolling ancestor. @default false */
     stickyHeader?: boolean;
-    actionsDropdownTopDirection?: boolean;
+    /** Show the per-row actions popover above the row instead of below. @default false */
+    actionsPopoverTopDirection?: boolean;
+    /** Row + cell padding preset. @default 'md' */
+    size?: 'sm' | 'md';
+    /** Alternate row backgrounds for readability on long lists. @default false */
+    zebra?: boolean;
+    /** Visual chrome around the table. `'plain'` blends with surrounding layout; `'card'` adds a bordered, rounded panel. @default 'plain' */
+    variant?: 'plain' | 'card';
 };
 export type TableOrderByState<TOrder> = {
     orderBy: TOrder;

package/dist/ui/tabs/cmp.tabs.svelte

@@ -0,0 +1,154 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">const { value, tabs, variant = 'default', size = 'md', compare, on } = $props();
+const isActive = (tab) => (compare ? compare(value, tab.value) : value === tab.value);
+const handleClick = (tab) => {
+    if (tab.disabled || isActive(tab)) {
+        return;
+    }
+    on?.change?.(tab.value);
+};
+</script>
+
+<div class="tabs tabs--{variant} tabs--{size}" role="tablist">
+  {#each tabs as tab, i (i)}
+    <button
+      type="button"
+      class="tabs__tab"
+      class:tabs__tab--active={isActive(tab)}
+      class:tabs__tab--disabled={tab.disabled}
+      role="tab"
+      aria-selected={isActive(tab)}
+      disabled={tab.disabled}
+      onclick={() => handleClick(tab)}>
+      <span class="tabs__label">{tab.label}</span>
+    </button>
+  {/each}
+</div>
+
+<!--
+@component
+Tabs — header strip for switching between content panels. Panel rendering is consumer-controlled
+(switch on the active `value`). Two visual variants:
+
+- **`default`**: underline — a 2px accent bar travels under the active tab; the strip has a bottom border.
+- **`pills`**: filled — the active tab lifts as a card on an inset tray.
+
+Each tab carries an optional `disabled` flag (non-interactive). For navigation, not single-choice
+form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this is a `tablist`).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--tabs--height` | Tab height | per size (28 / 36 px) |
+| `--sc-kit--tabs--font-size` | Tab label font size | per size |
+| `--sc-kit--tabs--padding-inline` | Per-tab horizontal padding | per size (10 / 14 px) |
+| `--sc-kit--tabs--radius` | Tab radius (pills) / tray radius | `--sc-kit--radius--sm` / `--sc-kit--radius--md` |
+| `--sc-kit--tabs--color` | Default tab text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--tabs--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--tabs--color--active` | Active tab text color | default: `--sc-kit--color--accent`, pills: `--sc-kit--color--text--primary` |
+| `--sc-kit--tabs--color--disabled` | Disabled tab text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--tabs--accent` | Underline bar color (default variant) | `--sc-kit--color--accent` |
+| `--sc-kit--tabs--border-color` | Bottom border color (default variant) | `--sc-kit--color--border` |
+| `--sc-kit--tabs--pills--background` | Inset tray background (pills variant) | `--sc-kit--color--bg--active` |
+| `--sc-kit--tabs--pills--background--active` | Active tab background (pills variant) | `--sc-kit--color--bg--panel` |
+| `--sc-kit--tabs--pills--shadow--active` | Active tab lift shadow (pills variant) | `--sc-kit--shadow--sm` |
+-->
+
+<style>.tabs {
+  --_tabs--height: var(--sc-kit--tabs--height, 2.25rem);
+  --_tabs--font-size: var(--sc-kit--tabs--font-size, var(--sc-kit--font-size--md));
+  --_tabs--padding-inline: var(--sc-kit--tabs--padding-inline, 0.875rem);
+  --_tabs--radius: var(--sc-kit--tabs--radius, var(--sc-kit--radius--sm));
+  --_tabs--color: var(--sc-kit--tabs--color, var(--sc-kit--color--text--secondary));
+  --_tabs--color-hover: var(--sc-kit--tabs--color--hover, var(--sc-kit--color--text--primary));
+  --_tabs--color-active: var(--sc-kit--tabs--color--active, var(--_tabs--color-active-default));
+  --_tabs--color-disabled: var(--sc-kit--tabs--color--disabled, var(--sc-kit--color--text--muted));
+  --_tabs--accent: var(--sc-kit--tabs--accent, var(--sc-kit--color--accent));
+  --_tabs--border-color: var(--sc-kit--tabs--border-color, var(--sc-kit--color--border));
+  --_tabs--pills-background: var(--sc-kit--tabs--pills--background, var(--sc-kit--color--bg--active));
+  --_tabs--pills-background-active: var(--sc-kit--tabs--pills--background--active, var(--sc-kit--color--bg--panel));
+  --_tabs--pills-shadow-active: var(--sc-kit--tabs--pills--shadow--active, var(--sc-kit--shadow--sm));
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: inherit;
+}
+.tabs--sm {
+  --sc-kit--tabs--height: 1.75rem;
+  --sc-kit--tabs--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--tabs--padding-inline: 0.625rem;
+}
+.tabs--md {
+  --sc-kit--tabs--height: 2.25rem;
+  --sc-kit--tabs--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--tabs--padding-inline: 0.875rem;
+}
+.tabs--default {
+  --_tabs--color-active-default: var(--_tabs--accent);
+  border-bottom: 1px solid var(--_tabs--border-color);
+}
+.tabs--default .tabs__tab {
+  border-radius: 0;
+}
+.tabs--default .tabs__tab--active {
+  color: var(--_tabs--color-active);
+}
+.tabs--default .tabs__tab--active::after {
+  content: "";
+  position: absolute;
+  left: var(--_tabs--padding-inline);
+  right: var(--_tabs--padding-inline);
+  bottom: -1px;
+  height: 2px;
+  background: var(--_tabs--accent);
+  border-radius: 2px;
+}
+.tabs--pills {
+  --_tabs--color-active-default: var(--sc-kit--color--text--primary);
+  gap: 0;
+  padding: 0.25rem;
+  background: var(--_tabs--pills-background);
+  border-radius: var(--sc-kit--radius--md);
+}
+.tabs--pills .tabs__tab--active {
+  color: var(--_tabs--color-active);
+  background: var(--_tabs--pills-background-active);
+  box-shadow: var(--_tabs--pills-shadow-active);
+}
+.tabs__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--_tabs--height);
+  padding: 0 var(--_tabs--padding-inline);
+  background: transparent;
+  border: none;
+  border-radius: var(--_tabs--radius);
+  color: var(--_tabs--color);
+  font-family: inherit;
+  font-size: var(--_tabs--font-size);
+  font-weight: var(--sc-kit--font-weight--medium);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: 0;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tabs__tab:where(:hover):not(.tabs__tab--disabled):not(.tabs__tab--active) {
+  color: var(--_tabs--color-hover);
+}
+.tabs__tab--disabled {
+  color: var(--_tabs--color-disabled);
+  cursor: default;
+}
+.tabs__tab:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.tabs__label {
+  display: inline-block;
+  max-width: 100%;
+}</style>

package/dist/ui/tabs/cmp.tabs.svelte.d.ts

@@ -0,0 +1,70 @@
+export type Tab<TValue = unknown> = {
+    value: TValue;
+    label: string;
+    /** Non-interactive — click does nothing. */
+    disabled?: boolean;
+};
+declare function $$render<T>(): {
+    props: {
+        value: T;
+        /** `NoInfer<T>` ensures `T` narrows from `value` only; inline tab literals type-check against the value's T without widening — no `as const` needed at callsites. */
+        tabs: Tab<NoInfer<T>>[];
+        /** @default 'default' */
+        variant?: "default" | "pills";
+        /** @default 'md' */
+        size?: "sm" | "md";
+        /** Equality for object T values. @default reference equality (`===`) */
+        compare?: (a: T, b: T) => boolean;
+        on?: {
+            change?: (value: T) => void;
+        };
+    };
+    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']>;
+}
+/**
+ * Tabs — header strip for switching between content panels. Panel rendering is consumer-controlled
+ * (switch on the active `value`). Two visual variants:
+ *
+ * - **`default`**: underline — a 2px accent bar travels under the active tab; the strip has a bottom border.
+ * - **`pills`**: filled — the active tab lifts as a card on an inset tray.
+ *
+ * Each tab carries an optional `disabled` flag (non-interactive). For navigation, not single-choice
+ * form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this is a `tablist`).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--tabs--height` | Tab height | per size (28 / 36 px) |
+ * | `--sc-kit--tabs--font-size` | Tab label font size | per size |
+ * | `--sc-kit--tabs--padding-inline` | Per-tab horizontal padding | per size (10 / 14 px) |
+ * | `--sc-kit--tabs--radius` | Tab radius (pills) / tray radius | `--sc-kit--radius--sm` / `--sc-kit--radius--md` |
+ * | `--sc-kit--tabs--color` | Default tab text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--tabs--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--tabs--color--active` | Active tab text color | default: `--sc-kit--color--accent`, pills: `--sc-kit--color--text--primary` |
+ * | `--sc-kit--tabs--color--disabled` | Disabled tab text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--tabs--accent` | Underline bar color (default variant) | `--sc-kit--color--accent` |
+ * | `--sc-kit--tabs--border-color` | Bottom border color (default variant) | `--sc-kit--color--border` |
+ * | `--sc-kit--tabs--pills--background` | Inset tray background (pills variant) | `--sc-kit--color--bg--active` |
+ * | `--sc-kit--tabs--pills--background--active` | Active tab background (pills variant) | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--tabs--pills--shadow--active` | Active tab lift shadow (pills variant) | `--sc-kit--shadow--sm` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Tabs } from './cmp.tabs.svelte';
+export type { Tab } from './cmp.tabs.svelte';

package/dist/ui/tabs/index.js

@@ -0,0 +1 @@
+export { default as Tabs } from './cmp.tabs.svelte';

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

@@ -0,0 +1,254 @@
+<script lang="ts">import { HtmlHelper } from '../../core/utils';
+import { InputEmojiPicker } from '../_internal/input-emoji-picker';
+const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, singleLine = false, submitOnEnter = false, placeholder = '', name = '', id = null, autofocus = false, maxLength = null, rows = 3, autoresize = true, maxRows = 12, autocomplete, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on } = $props();
+let textareaEl = $state.raw(undefined);
+const sanitizeLineBreaks = (text) => text.replace(/[\r\n]+/g, ' ');
+const valueParsed = $derived(singleLine && value ? sanitizeLineBreaks(value) : (value ?? ''));
+const effectiveRows = $derived(singleLine ? 1 : rows);
+/** Imperative API exposed via `bind:this` on `<Textarea>`. */
+export const focus = () => textareaEl?.focus();
+export const select = () => textareaEl?.select();
+const resize = () => {
+    if (!textareaEl || !autoresize) {
+        return;
+    }
+    textareaEl.style.overflow = 'hidden';
+    textareaEl.style.height = 'auto';
+    const styles = getComputedStyle(textareaEl);
+    const lineHeight = parseFloat(styles.lineHeight) || parseFloat(styles.fontSize) * 1.4;
+    const paddingY = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+    const max = lineHeight * maxRows + paddingY;
+    textareaEl.style.height = Math.min(textareaEl.scrollHeight, max) + 'px';
+    textareaEl.style.overflow = '';
+};
+const initTextarea = (node) => {
+    textareaEl = node;
+    if (autofocus) {
+        node.focus();
+    }
+    on?.mounted?.({ textarea: node });
+    resize();
+};
+$effect(() => {
+    void valueParsed;
+    resize();
+});
+const handleInput = () => {
+    if (!textareaEl) {
+        return;
+    }
+    resize();
+    on?.input?.(textareaEl.value);
+};
+const handleChange = () => {
+    if (!textareaEl) {
+        return;
+    }
+    on?.change?.(textareaEl.value);
+};
+const handleBeforeInput = (e) => {
+    if (!singleLine || !textareaEl) {
+        return;
+    }
+    if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
+        e.preventDefault();
+        return;
+    }
+    if (e.data && /[\r\n]/.test(e.data)) {
+        e.preventDefault();
+        const start = textareaEl.selectionStart;
+        const end = textareaEl.selectionEnd;
+        textareaEl.setRangeText(sanitizeLineBreaks(e.data), start, end, 'end');
+        textareaEl.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+};
+const handleKeydown = (e) => {
+    if (submitOnEnter && e.key === 'Enter' && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
+        e.preventDefault();
+        on?.submit?.();
+    }
+};
+const handleBlur = () => {
+    if (textareaEl) {
+        textareaEl.value = valueParsed;
+    }
+    on?.blur?.();
+};
+const handleEmojiSelect = (emojiChar) => {
+    if (textareaEl) {
+        HtmlHelper.pasteIntoInput(emojiChar, textareaEl);
+    }
+};
+const focusTextarea = () => textareaEl?.focus();
+</script>
+
+<div
+  class="textarea textarea--{size}"
+  class:textarea--disabled={disabled}
+  class:textarea--readonly={readonly}
+  class:textarea--inert={inert}
+  class:textarea--error={error}
+  class:textarea--borderless={borderless}
+  onclick={focusTextarea}
+  onkeydown={() => undefined}
+  role="none">
+  <!-- svelte-ignore a11y_autofocus -->
+  <textarea
+    use:initTextarea
+    class="textarea__el"
+    name={name}
+    id={id}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    inert={inert}
+    autofocus={autofocus}
+    autocomplete={autocomplete}
+    spellcheck={spellcheck}
+    rows={effectiveRows}
+    value={valueParsed}
+    maxlength={maxLength}
+    aria-invalid={error ? 'true' : undefined}
+    aria-describedby={ariaDescribedby}
+    aria-label={ariaLabel}
+    aria-required={ariaRequired ? 'true' : undefined}
+    oninput={handleInput}
+    onchange={handleChange}
+    onbeforeinput={handleBeforeInput}
+    onkeydown={handleKeydown}
+    onblur={handleBlur}
+    onfocus={() => on?.focus?.()}></textarea>
+
+  {#if emoji}
+    <InputEmojiPicker size={size} on={{ select: handleEmojiSelect }} />
+  {/if}
+</div>
+
+<!--
+@component
+Multi-line text input. Auto-resizes to content between `rows` and `maxRows` by default.
+Set `singleLine` to strip line breaks (paste-safe), `submitOnEnter` to fire `on.submit` on
+plain Enter, `emoji` to show the inline emoji picker. Imperative `focus()` / `select()`
+exposed via `bind:this`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--textarea--padding-block` | Vertical padding | per size |
+| `--sc-kit--textarea--padding-inline` | Horizontal padding | per size |
+| `--sc-kit--textarea--width` | Container width | `100%` |
+| `--sc-kit--textarea--background` | Container background | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--textarea--background--disabled` | Disabled / inert background | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--textarea--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--textarea--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--textarea--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+| `--sc-kit--textarea--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--textarea--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
+| `--sc-kit--textarea--font-size` | Text font size | per size |
+| `--sc-kit--textarea--color` | Text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--textarea--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+-->
+
+<style>.textarea {
+  --_ta--padding-block: var(--sc-kit--textarea--padding-block, 0.5rem);
+  --_ta--padding-inline: var(--sc-kit--textarea--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_ta--width: var(--sc-kit--textarea--width, 100%);
+  --_ta--background: var(--sc-kit--textarea--background, var(--sc-kit--color--bg--field));
+  --_ta--background-disabled: var(--sc-kit--textarea--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_ta--border-color: var(--sc-kit--textarea--border-color, var(--sc-kit--color--border--field));
+  --_ta--border-color-hover: var(--sc-kit--textarea--border-color--hover, var(--sc-kit--color--border--strong));
+  --_ta--border-color-error: var(--sc-kit--textarea--border-color--error, var(--sc-kit--color--danger));
+  --_ta--border-radius: var(--sc-kit--textarea--border-radius, var(--sc-kit--radius--sm));
+  --_ta--underline-color: var(--sc-kit--textarea--underline-color, transparent);
+  --_ta--font-size: var(--sc-kit--textarea--font-size, var(--sc-kit--font-size--md));
+  --_ta--color: var(--sc-kit--textarea--color, var(--sc-kit--color--text--primary));
+  --_ta--placeholder-color: var(--sc-kit--textarea--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.textarea:where(:hover), .textarea:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.textarea {
+  --_--input-affordance--scale: 1;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  width: var(--_ta--width);
+  max-width: 100%;
+  padding: var(--_ta--padding-block) var(--_ta--padding-inline);
+  background: var(--_ta--background);
+  border: 1px solid var(--_ta--border-color);
+  border-radius: var(--_ta--border-radius);
+  color: var(--_ta--color);
+  font-size: var(--_ta--font-size);
+  line-height: var(--sc-kit--leading--normal);
+  cursor: text;
+  box-shadow: inset 0 -0.13em var(--_ta--underline-color);
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.textarea--sm {
+  --sc-kit--textarea--padding-block: 0.375rem;
+  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --sc-kit--textarea--font-size: var(--sc-kit--font-size--sm);
+}
+.textarea--md {
+  --sc-kit--textarea--padding-block: 0.5rem;
+  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--md);
+  --sc-kit--textarea--font-size: var(--sc-kit--font-size--md);
+}
+.textarea--lg {
+  --sc-kit--textarea--padding-block: 0.625rem;
+  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --sc-kit--textarea--font-size: var(--sc-kit--font-size--lg);
+}
+.textarea:where(:hover) {
+  --sc-kit--textarea--border-color: var(--_ta--border-color-hover);
+}
+.textarea:where(:focus-within) {
+  --sc-kit--textarea--underline-color: var(--sc-kit--color--accent);
+}
+.textarea--error {
+  --sc-kit--textarea--border-color: var(--_ta--border-color-error);
+  --sc-kit--textarea--underline-color: var(--sc-kit--color--danger);
+}
+.textarea--disabled, .textarea--readonly, .textarea--inert {
+  --sc-kit--textarea--border-color: unset;
+  --sc-kit--textarea--underline-color: unset;
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+  cursor: default;
+}
+.textarea--disabled {
+  --sc-kit--textarea--background: var(--_ta--background-disabled);
+  --sc-kit--textarea--color: var(--sc-kit--color--text--muted);
+}
+.textarea--borderless {
+  --sc-kit--textarea--background: transparent;
+  --sc-kit--textarea--border-color: transparent;
+  --sc-kit--textarea--underline-color: transparent;
+  box-shadow: none;
+}
+.textarea__el {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  resize: none;
+}
+.textarea__el::placeholder {
+  color: var(--_ta--placeholder-color);
+}
+.textarea__el:disabled {
+  cursor: default;
+}</style>

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

@@ -0,0 +1,80 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type Props = {
+    value: string | null | undefined;
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Non-editable but selectable. */
+    readonly?: boolean;
+    /** Visual display mode — non-focusable, no hover/focus animations. */
+    inert?: boolean;
+    /** Visual error state — also sets `aria-invalid="true"`. */
+    error?: boolean;
+    /** Strip border + background + focus underline. */
+    borderless?: boolean;
+    /** Show emoji-picker trigger inside the textarea. */
+    emoji?: boolean;
+    /**
+     * Single-line mode: starts at 1 row, strips Enter and pasted line breaks. Long text
+     * still soft-wraps and the textarea grows vertically up to `maxRows` — that's the
+     * point of using a textarea over `<input>` for no-enter fields like article titles.
+     */
+    singleLine?: boolean;
+    /** Fire `on.submit` on Enter (without modifiers). Shift+Enter still inserts a newline. */
+    submitOnEnter?: boolean;
+    placeholder?: string;
+    name?: string;
+    id?: string | null;
+    autofocus?: boolean;
+    maxLength?: number | null;
+    /** Minimum visible rows. @default 3 */
+    rows?: number;
+    /** Auto-grow to content up to maxRows. @default true */
+    autoresize?: boolean;
+    /** Maximum auto-grown rows before scrolling kicks in. @default 12 */
+    maxRows?: number;
+    autocomplete?: HTMLTextareaAttributes['autocomplete'];
+    spellcheck?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-required'?: boolean;
+    on?: {
+        input?: (value: string) => void;
+        change?: (value: string) => void;
+        submit?: () => void;
+        mounted?: (data: {
+            textarea: HTMLTextAreaElement;
+        }) => void;
+        blur?: () => void;
+        focus?: () => void;
+    };
+};
+/**
+ * Multi-line text input. Auto-resizes to content between `rows` and `maxRows` by default.
+ * Set `singleLine` to strip line breaks (paste-safe), `submitOnEnter` to fire `on.submit` on
+ * plain Enter, `emoji` to show the inline emoji picker. Imperative `focus()` / `select()`
+ * exposed via `bind:this`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--textarea--padding-block` | Vertical padding | per size |
+ * | `--sc-kit--textarea--padding-inline` | Horizontal padding | per size |
+ * | `--sc-kit--textarea--width` | Container width | `100%` |
+ * | `--sc-kit--textarea--background` | Container background | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--textarea--background--disabled` | Disabled / inert background | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--textarea--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--textarea--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--textarea--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--textarea--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--textarea--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
+ * | `--sc-kit--textarea--font-size` | Text font size | per size |
+ * | `--sc-kit--textarea--color` | Text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--textarea--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    /** Imperative API exposed via `bind:this` on `<Textarea>`. */ focus: () => void;
+    select: () => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

package/dist/ui/textarea/index.js

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