@streamscloud/kit 0.2.42 → 0.9.0

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

@@ -0,0 +1,327 @@
+<script lang="ts">import { HtmlHelper } from '../../core/utils';
+import { InputClearButton } from '../_internal/input-clear-button';
+import { InputEmojiPicker } from '../_internal/input-emoji-picker';
+import { InputPasswordToggle } from '../_internal/input-password-toggle';
+import { IconSlot } from '../icon';
+const { value, type = 'text', size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, clearable = false, emoji = false, placeholder = '', title = '', name = '', id = null, autofocus = false, maxLength = null, autocomplete, autocapitalize, inputmode, enterkeyhint, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on, icon, iconPosition = 'leading', secondaryIcon, prefix, suffix } = $props();
+let inputEl = $state.raw(undefined);
+let passwordRevealed = $state(false);
+const valueParsed = $derived(value ?? '');
+const clearButtonVisible = $derived(clearable && !disabled && !readonly && !inert && !!valueParsed);
+const passwordToggleVisible = $derived(type === 'password' && !disabled && !readonly && !inert);
+const effectiveType = $derived(type === 'password' && passwordRevealed ? 'text' : type);
+/** Imperative API exposed via `bind:this` on `<Input>`. */
+export const focus = () => inputEl?.focus();
+export const select = () => inputEl?.select();
+const initInput = (node) => {
+    inputEl = node;
+    if (autofocus) {
+        node.focus();
+    }
+    on?.mounted?.({ input: node });
+};
+const handleInput = () => {
+    if (!inputEl) {
+        return;
+    }
+    on?.input?.(inputEl.value);
+};
+const handleChange = () => {
+    if (!inputEl) {
+        return;
+    }
+    on?.change?.(inputEl.value);
+};
+const handleClear = () => {
+    if (!inputEl) {
+        return;
+    }
+    inputEl.value = '';
+    handleInput();
+    handleChange();
+    inputEl.focus();
+};
+const handlePasswordToggle = () => {
+    passwordRevealed = !passwordRevealed;
+    inputEl?.focus();
+};
+const handleBlur = () => {
+    // Force re-sync to the controlled value on blur — covers the case where the consumer
+    // didn't update the prop in response to input events (e.g. yup rejected the value).
+    if (inputEl) {
+        inputEl.value = valueParsed;
+    }
+    on?.blur?.();
+};
+const handleEmojiSelect = (emojiChar) => {
+    if (inputEl) {
+        HtmlHelper.pasteIntoInput(emojiChar, inputEl);
+    }
+};
+const focusInput = () => inputEl?.focus();
+</script>
+
+<div
+  class="input input--{size}"
+  class:input--disabled={disabled}
+  class:input--readonly={readonly}
+  class:input--inert={inert}
+  class:input--error={error}
+  class:input--borderless={borderless}
+  class:input--has-prefix={!!prefix}
+  onclick={focusInput}
+  onkeydown={() => undefined}
+  role="none">
+  {#if prefix}
+    <span class="input__prefix">{@render prefix()}</span>
+  {/if}
+  {#if icon && iconPosition === 'leading'}
+    <span class="input__icon input__icon--leading" aria-hidden="true"><IconSlot icon={icon} /></span>
+  {/if}
+  {#if secondaryIcon && iconPosition === 'trailing'}
+    <span class="input__icon input__icon--leading" aria-hidden="true"><IconSlot icon={secondaryIcon} /></span>
+  {/if}
+
+  <!-- svelte-ignore a11y_autofocus -->
+  <input
+    use:initInput
+    class="input__el"
+    type={effectiveType}
+    name={name}
+    id={id}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    inert={inert}
+    autofocus={autofocus}
+    title={title}
+    autocomplete={autocomplete}
+    autocapitalize={autocapitalize}
+    inputmode={inputmode}
+    enterkeyhint={enterkeyhint}
+    spellcheck={spellcheck}
+    value={valueParsed}
+    maxlength={maxLength}
+    aria-invalid={error ? 'true' : undefined}
+    aria-describedby={ariaDescribedby}
+    aria-label={ariaLabel}
+    aria-required={ariaRequired ? 'true' : undefined}
+    oninput={handleInput}
+    onchange={handleChange}
+    onblur={handleBlur}
+    onfocus={() => on?.focus?.()} />
+
+  {#if suffix}
+    <span class="input__suffix">{@render suffix()}</span>
+  {/if}
+
+  {#if clearButtonVisible}
+    <InputClearButton size={size} on={{ clear: handleClear }} />
+  {/if}
+
+  {#if passwordToggleVisible}
+    <InputPasswordToggle size={size} revealed={passwordRevealed} on={{ toggle: handlePasswordToggle }} />
+  {/if}
+
+  {#if emoji}
+    <InputEmojiPicker size={size} on={{ select: handleEmojiSelect }} />
+  {/if}
+
+  {#if icon && iconPosition === 'trailing'}
+    <span class="input__icon input__icon--trailing" aria-hidden="true"><IconSlot icon={icon} /></span>
+  {/if}
+  {#if secondaryIcon && iconPosition === 'leading'}
+    <span class="input__icon input__icon--trailing" aria-hidden="true"><IconSlot icon={secondaryIcon} /></span>
+  {/if}
+</div>
+
+<!--
+@component
+Text input field with leading/trailing icon slots, clear button, emoji picker, and an inset
+focus underline. Discriminated `type` selects native input mode (`text` / `password` / `email` /
+`search` / `url` / `tel`). Set `inert` for display mode (no focus, no animations), `readonly`
+for non-editable but selectable, `error` for the visual + a11y error state. Imperative
+`focus()` / `select()` exposed via `bind:this`.
+
+Two snippet slots widen the chrome: `prefix` for a full-height segmented leading addon (see
+`WebsiteInput`), and `suffix` for a free-form trailing addon rendered before any trailing icons
+or the clear button (see `HandleInput`'s availability pill).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--input--height` | Container height | per size |
+| `--sc-kit--input--padding-inline` | Horizontal padding | per size |
+| `--sc-kit--input--gap` | Gap between value and icons / clear | `var(--sc-kit--space--2)` |
+| `--sc-kit--input--width` | Container width | `100%` |
+| `--sc-kit--input--background` | Container background | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--input--background--disabled` | Disabled / inert background | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+| `--sc-kit--input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--input--underline-color` | Inset bottom-underline indicator (transparent default, accent on focus-within, danger on error) | `transparent` |
+| `--sc-kit--input--font-size` | Text font size | per size |
+| `--sc-kit--input--color` | Text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--input--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+| `--sc-kit--input--icon--color` | Leading / trailing icon color (does NOT affect inner affordances — clear, password, emoji) | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--input--icon--size` | Leading / trailing icon size (does NOT affect inner affordances) | per size |
+-->
+
+<style>.input {
+  /* Public CSS API resolved with defaults (this block IS the API documentation) */
+  --_in--height: var(--sc-kit--input--height, var(--sc-kit--field--height--md));
+  --_in--padding-inline: var(--sc-kit--input--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_in--gap: var(--sc-kit--input--gap, var(--sc-kit--space--2));
+  --_in--width: var(--sc-kit--input--width, 100%);
+  --_in--background: var(--sc-kit--input--background, var(--sc-kit--color--bg--field));
+  --_in--background-disabled: var(--sc-kit--input--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_in--border-color: var(--sc-kit--input--border-color, var(--sc-kit--color--border--field));
+  --_in--border-color-hover: var(--sc-kit--input--border-color--hover, var(--sc-kit--color--border--strong));
+  --_in--border-color-error: var(--sc-kit--input--border-color--error, var(--sc-kit--color--danger));
+  --_in--border-radius: var(--sc-kit--input--border-radius, var(--sc-kit--radius--sm));
+  --_in--underline-color: var(--sc-kit--input--underline-color, transparent);
+  --_in--font-size: var(--sc-kit--input--font-size, var(--sc-kit--font-size--md));
+  --_in--color: var(--sc-kit--input--color, var(--sc-kit--color--text--primary));
+  --_in--placeholder-color: var(--sc-kit--input--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_in--icon-color: var(--sc-kit--input--icon--color, var(--sc-kit--color--text--muted));
+  --_in--icon-size: var(--sc-kit--input--icon--size, var(--sc-kit--field--icon--size--md));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.input:where(:hover), .input:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.input {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  width: var(--_in--width);
+  max-width: 100%;
+  height: var(--_in--height);
+  padding: 0 var(--_in--padding-inline);
+  background: var(--_in--background);
+  border: 1px solid var(--_in--border-color);
+  border-radius: var(--_in--border-radius);
+  color: var(--_in--color);
+  font-size: var(--_in--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: text;
+  position: relative;
+  overflow: hidden;
+  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);
+}
+.input::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 0.13em;
+  background: var(--_in--underline-color);
+  pointer-events: none;
+  z-index: 1;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.input--sm {
+  --sc-kit--input--height: var(--sc-kit--field--height--sm);
+  --sc-kit--input--padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --sc-kit--input--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--input--icon--size: var(--sc-kit--field--icon--size--sm);
+}
+.input--md {
+  --sc-kit--input--height: var(--sc-kit--field--height--md);
+  --sc-kit--input--padding-inline: var(--sc-kit--field--padding-inline--md);
+  --sc-kit--input--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--input--icon--size: var(--sc-kit--field--icon--size--md);
+}
+.input--lg {
+  --sc-kit--input--height: var(--sc-kit--field--height--lg);
+  --sc-kit--input--padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --sc-kit--input--font-size: var(--sc-kit--font-size--lg);
+  --sc-kit--input--icon--size: var(--sc-kit--field--icon--size--lg);
+}
+.input:where(:hover) {
+  --sc-kit--input--border-color: var(--_in--border-color-hover);
+}
+.input:where(:focus-within) {
+  --sc-kit--input--underline-color: var(--sc-kit--color--accent);
+}
+.input--error {
+  --sc-kit--input--border-color: var(--_in--border-color-error);
+  --sc-kit--input--underline-color: var(--sc-kit--color--danger);
+}
+.input--disabled, .input--readonly, .input--inert {
+  --sc-kit--input--border-color: unset;
+  --sc-kit--input--underline-color: unset;
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+  cursor: default;
+}
+.input--disabled {
+  --sc-kit--input--background: var(--_in--background-disabled);
+  --sc-kit--input--color: var(--sc-kit--color--text--muted);
+}
+.input--borderless {
+  --sc-kit--input--background: transparent;
+  --sc-kit--input--border-color: transparent;
+  --sc-kit--input--underline-color: transparent;
+}
+.input--has-prefix {
+  padding-inline-start: 0;
+}
+.input__el {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+.input__el::placeholder {
+  color: var(--_in--placeholder-color);
+}
+.input__el:disabled {
+  cursor: default;
+}
+.input__el:-webkit-autofill, .input__el:-webkit-autofill:hover, .input__el:-webkit-autofill:focus, .input__el:-webkit-autofill:active {
+  -webkit-text-fill-color: var(--_in--color);
+  -webkit-box-shadow: 0 0 0 1000px var(--_in--background) inset;
+  caret-color: var(--_in--color);
+  transition: background-color 9999s ease-in-out 0s;
+}
+.input__icon {
+  --sc-kit--icon--color: var(--_in--icon-color);
+  --sc-kit--icon--size: var(--_in--icon-size);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.input__icon--leading {
+  margin-inline-end: var(--_in--gap);
+}
+.input__icon--trailing {
+  margin-inline-start: var(--_in--gap);
+}
+.input__prefix {
+  flex-shrink: 0;
+  align-self: stretch;
+  display: inline-flex;
+  margin-inline-end: var(--_in--padding-inline);
+  font-size: var(--_in--font-size);
+}
+.input__suffix {
+  flex-shrink: 0;
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: var(--_in--gap);
+  font-size: var(--_in--font-size);
+}</style>

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

@@ -0,0 +1,38 @@
+import type { InputProps } from './types';
+/**
+ * Text input field with leading/trailing icon slots, clear button, emoji picker, and an inset
+ * focus underline. Discriminated `type` selects native input mode (`text` / `password` / `email` /
+ * `search` / `url` / `tel`). Set `inert` for display mode (no focus, no animations), `readonly`
+ * for non-editable but selectable, `error` for the visual + a11y error state. Imperative
+ * `focus()` / `select()` exposed via `bind:this`.
+ *
+ * Two snippet slots widen the chrome: `prefix` for a full-height segmented leading addon (see
+ * `WebsiteInput`), and `suffix` for a free-form trailing addon rendered before any trailing icons
+ * or the clear button (see `HandleInput`'s availability pill).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--input--height` | Container height | per size |
+ * | `--sc-kit--input--padding-inline` | Horizontal padding | per size |
+ * | `--sc-kit--input--gap` | Gap between value and icons / clear | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--input--width` | Container width | `100%` |
+ * | `--sc-kit--input--background` | Container background | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--input--background--disabled` | Disabled / inert background | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--input--underline-color` | Inset bottom-underline indicator (transparent default, accent on focus-within, danger on error) | `transparent` |
+ * | `--sc-kit--input--font-size` | Text font size | per size |
+ * | `--sc-kit--input--color` | Text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--input--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+ * | `--sc-kit--input--icon--color` | Leading / trailing icon color (does NOT affect inner affordances — clear, password, emoji) | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--input--icon--size` | Leading / trailing icon size (does NOT affect inner affordances) | per size |
+ */
+declare const Cmp: import("svelte").Component<InputProps, {
+    /** Imperative API exposed via `bind:this` on `<Input>`. */ focus: () => void;
+    select: () => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Input } from './cmp.input.svelte';
+export type { InputForwardedProps, InputProps, InputSize, InputType } from './types';

package/dist/ui/input/index.js

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

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

@@ -0,0 +1,77 @@
+import type { IconProp } from '../icon';
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type InputType = 'text' | 'password' | 'email' | 'search' | 'url' | 'tel';
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputProps = {
+    value: string | null | undefined;
+    /** @default 'text' */
+    type?: InputType;
+    /** @default 'md' */
+    size?: InputSize;
+    disabled?: boolean;
+    /** Non-editable but selectable. The value is still submitted with a form. */
+    readonly?: boolean;
+    /** Visual display mode — non-focusable, no hover/focus animations, hidden clear button. */
+    inert?: boolean;
+    /** Visual error state — also sets `aria-invalid="true"`. */
+    error?: boolean;
+    /** Strip border + background + focus underline. */
+    borderless?: boolean;
+    /** Show the default × clear button when value is non-empty. */
+    clearable?: boolean;
+    /** Show the emoji-picker trigger inside the input. */
+    emoji?: boolean;
+    placeholder?: string;
+    title?: string;
+    name?: string;
+    id?: string | null;
+    autofocus?: boolean;
+    maxLength?: number | null;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    spellcheck?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-required'?: boolean;
+    on?: {
+        input?: (value: string) => void;
+        change?: (value: string) => void;
+        mounted?: (data: {
+            input: HTMLInputElement;
+        }) => void;
+        blur?: () => void;
+        focus?: () => void;
+    };
+    /** Primary icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+    /** Side of the input where the primary icon sits. @default 'leading' */
+    iconPosition?: 'leading' | 'trailing';
+    /** Optional secondary icon — always rendered on the opposite side of the input from the primary. */
+    secondaryIcon?: IconProp;
+    /**
+     * Leading prefix slot — full-height segment rendered flush to the field's left rounded edge,
+     * before all icons. Hands full visual control to the snippet (used by WebsiteInput for the
+     * `https://` chunk). When set, the field's left padding is suppressed; the prefix segment
+     * provides its own inline padding and a trailing gap equal to the field's padding.
+     */
+    prefix?: Snippet;
+    /**
+     * Trailing suffix slot — free-form trailing addon rendered between the native input and any
+     * trailing icons / clear button. Used for inline badges (e.g. HandleInput's availability pill)
+     * and counters. Unlike `prefix`, this slot is NOT segmented — it carries no background or
+     * separator by default; the snippet supplies its own chrome.
+     */
+    suffix?: Snippet;
+};
+/**
+ * The subset of `InputProps` that a proxy wrapper (e.g. `WebsiteInput`, `HandleInput`) typically
+ * forwards verbatim. Excludes Input-only visual knobs (`type`, `icon*`, `clearable`, `emoji`,
+ * `prefix`, `suffix`) which a proxy controls itself.
+ *
+ * Proxies should declare their Props as `Omit<InputForwardedProps, 'hardwiredKey1' | ...> & OwnProps`
+ * to surgically remove forwarded props that the proxy hard-wires (so consumers can't override them).
+ */
+export type InputForwardedProps = Pick<InputProps, 'value' | 'size' | 'disabled' | 'readonly' | 'inert' | 'error' | 'borderless' | 'placeholder' | 'title' | 'name' | 'id' | 'autofocus' | 'maxLength' | 'autocomplete' | 'autocapitalize' | 'inputmode' | 'enterkeyhint' | 'spellcheck' | 'aria-describedby' | 'aria-label' | 'aria-required' | 'on'>;

package/dist/ui/input/types.js

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

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte

@@ -68,16 +68,19 @@ $effect(() => {
 
 <!--
 @component
-Automatically calculates the maximum number of visible lines based on parent height, then truncates with an optional "show more" toggle.
+Automatically calculates the maximum number of visible lines based on parent height, then truncates with
+an optional "show more" toggle.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--line-clamp--white-space` | White-space mode for wrapped text | `pre-line` |
+| `--sc-kit--line-clamp--toggle-color` | Color of the "show less" button | `--sc-kit--color--accent` |
 -->
 
 <style>.line-clamp {
   --_line-clamp--white-space: var(--sc-kit--line-clamp--white-space, pre-line);
+  --_line-clamp--toggle-color: var(--sc-kit--line-clamp--toggle-color, var(--sc-kit--color--accent));
   width: 100%;
   height: 100%;
   display: flex;
@@ -98,8 +101,16 @@ Automatically calculates the maximum number of visible lines based on parent hei
   -webkit-box-orient: vertical;
 }
 .line-clamp__show-more-button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
   font-size: 0.9em;
   font-style: italic;
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--_line-clamp--toggle-color);
+  cursor: pointer;
   pointer-events: auto;
   margin-top: 0.5em;
+  align-self: flex-start;
 }</style>

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte.d.ts

@@ -5,12 +5,14 @@ type Props = {
     children: Snippet;
 };
 /**
- * Automatically calculates the maximum number of visible lines based on parent height, then truncates with an optional "show more" toggle.
+ * Automatically calculates the maximum number of visible lines based on parent height, then truncates with
+ * an optional "show more" toggle.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--line-clamp--white-space` | White-space mode for wrapped text | `pre-line` |
+ * | `--sc-kit--line-clamp--toggle-color` | Color of the "show less" button | `--sc-kit--color--accent` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -43,18 +43,22 @@ const trackTruncatedState = (node) => {
 
 <!--
 @component
-Truncates text content to a fixed number of lines with an optional "show more / show less" toggle.
+Truncates text content to a fixed number of lines (`maxLines`) with an optional "show more / show less"
+toggle. When `enableShowMore` is set, clicking the truncated text expands it; a "show less" button
+collapses it back.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--line-clamp--white-space` | White-space mode for wrapped text | `pre-line` |
 | `--sc-kit--line-clamp--line-clamp` | Number of lines before truncation | `1` |
+| `--sc-kit--line-clamp--toggle-color` | Color of the "show less" button | `--sc-kit--color--accent` |
 -->
 
 <style>.line-clamp {
   --_line-clamp--white-space: var(--sc-kit--line-clamp--white-space, pre-line);
   --_line-clamp--line-clamp: var(--sc-kit--line-clamp--line-clamp, 1);
+  --_line-clamp--toggle-color: var(--sc-kit--line-clamp--toggle-color, var(--sc-kit--color--accent));
   width: 100%;
   height: 100%;
   display: flex;
@@ -81,8 +85,16 @@ Truncates text content to a fixed number of lines with an optional "show more /
   --_line-clamp--line-clamp: none;
 }
 .line-clamp__show-more-button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
   font-size: 0.9em;
   font-style: italic;
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--_line-clamp--toggle-color);
+  cursor: pointer;
   pointer-events: auto;
   margin-top: 0.5em;
+  align-self: flex-start;
 }</style>

package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts

@@ -7,13 +7,16 @@ type Props = {
     children: Snippet;
 };
 /**
- * Truncates text content to a fixed number of lines with an optional "show more / show less" toggle.
+ * Truncates text content to a fixed number of lines (`maxLines`) with an optional "show more / show less"
+ * toggle. When `enableShowMore` is set, clicking the truncated text expands it; a "show less" button
+ * collapses it back.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--line-clamp--white-space` | White-space mode for wrapped text | `pre-line` |
  * | `--sc-kit--line-clamp--line-clamp` | Number of lines before truncation | `1` |
+ * | `--sc-kit--line-clamp--toggle-color` | Color of the "show less" button | `--sc-kit--color--accent` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/link/cmp.link.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">let { href, variant = 'default', external = false, on, children } = $props();
+const isAnchor = $derived(href !== undefined);
+const target = $derived(isAnchor && external ? '_blank' : undefined);
+const rel = $derived(isAnchor && external ? 'noopener noreferrer' : undefined);
+export {};
+</script>
+
+{#if isAnchor}
+  <a class="link link--{variant}" href={href} target={target} rel={rel} onclick={(e) => on?.click?.(e)}>
+    {@render children()}
+  </a>
+{:else}
+  <button type="button" class="link link--{variant}" onclick={(e) => on?.click?.(e)}>
+    {@render children()}
+  </button>
+{/if}
+
+<!--
+@component
+A semantic link with three color variants. `default` reads as the standard accent link; `subtle`
+sits inline in body text with a secondary tint that picks up on hover; `danger` is for destructive
+navigation hints (e.g. "delete this account"). All variants animate color on hover and gain an
+underline.
+
+Renders as an `<a>` when `href` is set, otherwise as `<button type="button">` styled identically —
+useful for callback-only actions that read as inline links (e.g. "edit this", "show more"). The
+`external` flag is ignored in button mode.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--link--color` | Text color | per `variant` preset |
+| `--sc-kit--link--color--hover` | Text color on hover | per `variant` preset |
+-->
+
+<style>.link {
+  --_link--color-default: var(--sc-kit--link--color, var(--sc-kit--color--accent));
+  --_link--color-default-hover: var(--sc-kit--link--color--hover, var(--sc-kit--color--accent--hover));
+  --_link--color-subtle: var(--sc-kit--link--color, var(--sc-kit--color--text--secondary));
+  --_link--color-subtle-hover: var(--sc-kit--link--color--hover, var(--sc-kit--color--text--primary));
+  --_link--color-danger: var(--sc-kit--link--color, var(--sc-kit--color--danger));
+  --_link--color-danger-hover: var(--sc-kit--link--color--hover, var(--sc-kit--color--danger--hover));
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.link--default {
+  color: var(--_link--color-default);
+}
+.link--default:hover {
+  color: var(--_link--color-default-hover);
+  text-decoration: underline;
+}
+.link--subtle {
+  color: var(--_link--color-subtle);
+}
+.link--subtle:hover {
+  color: var(--_link--color-subtle-hover);
+  text-decoration: underline;
+}
+.link--danger {
+  color: var(--_link--color-danger);
+}
+.link--danger:hover {
+  color: var(--_link--color-danger-hover);
+  text-decoration: underline;
+}
+.link:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+  border-radius: var(--sc-kit--radius--sm);
+}</style>

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

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+type LinkVariant = 'default' | 'subtle' | 'danger';
+type Props = {
+    /** Destination URL. Omit to render as a `<button>` styled like the link (use with `on.click`). */
+    href?: string;
+    /** Visual variant. @default 'default' */
+    variant?: LinkVariant;
+    /** External link — opens in a new tab and adds `rel="noopener noreferrer"`. Ignored in button mode. */
+    external?: boolean;
+    on?: {
+        click?: (event: MouseEvent) => void;
+    };
+    children: Snippet;
+};
+/**
+ * A semantic link with three color variants. `default` reads as the standard accent link; `subtle`
+ * sits inline in body text with a secondary tint that picks up on hover; `danger` is for destructive
+ * navigation hints (e.g. "delete this account"). All variants animate color on hover and gain an
+ * underline.
+ *
+ * Renders as an `<a>` when `href` is set, otherwise as `<button type="button">` styled identically —
+ * useful for callback-only actions that read as inline links (e.g. "edit this", "show more"). The
+ * `external` flag is ignored in button mode.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--link--color` | Text color | per `variant` preset |
+ * | `--sc-kit--link--color--hover` | Text color on hover | per `variant` preset |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;