@streamscloud/kit 0.2.42-1778522742378 → 0.9.0

package/dist/core/utils/href-validator.js

@@ -1,40 +1,29 @@
-export var ValidationError;
-(function (ValidationError) {
-    ValidationError[ValidationError["NotString"] = 0] = "NotString";
-    ValidationError[ValidationError["Empty"] = 1] = "Empty";
-    ValidationError[ValidationError["ControlChars"] = 2] = "ControlChars";
-    ValidationError[ValidationError["DisallowedScheme"] = 3] = "DisallowedScheme";
-    ValidationError[ValidationError["MissingHost"] = 4] = "MissingHost";
-    ValidationError[ValidationError["EmbeddedCredentials"] = 5] = "EmbeddedCredentials";
-    ValidationError[ValidationError["Relative"] = 6] = "Relative";
-    ValidationError[ValidationError["BareRelative"] = 7] = "BareRelative";
-})(ValidationError || (ValidationError = {}));
 const DEFAULT_ALLOWED_SCHEMES = new Set(['http:', 'https:', 'mailto:', 'tel:']);
 export const validateHref = (input, opts = {}) => {
     if (typeof input !== 'string') {
-        return { valid: false, error: ValidationError.NotString };
+        return { valid: false, error: 'NotString' };
     }
     const s = input.trim();
     if (s.length === 0) {
-        return { valid: false, error: ValidationError.Empty };
+        return { valid: false, error: 'Empty' };
     }
     for (let i = 0; i < s.length; i++) {
         const code = s.charCodeAt(i);
         if ((code >= 0 && code <= 31) || code === 127) {
-            return { valid: false, error: ValidationError.ControlChars };
+            return { valid: false, error: 'ControlChars' };
         }
     }
     try {
         const u = new URL(s);
         const proto = u.protocol.toLowerCase();
         if (!(opts.allowedSchemes ?? DEFAULT_ALLOWED_SCHEMES).has(proto)) {
-            return { valid: false, error: ValidationError.DisallowedScheme };
+            return { valid: false, error: 'DisallowedScheme' };
         }
         if ((proto === 'http:' || proto === 'https:') && !u.hostname) {
-            return { valid: false, error: ValidationError.MissingHost };
+            return { valid: false, error: 'MissingHost' };
         }
         if (u.username || u.password) {
-            return { valid: false, error: ValidationError.EmbeddedCredentials };
+            return { valid: false, error: 'EmbeddedCredentials' };
         }
         return { valid: true };
     }
@@ -42,11 +31,11 @@ export const validateHref = (input, opts = {}) => {
         // Not an absolute URL, continue with relative checks
     }
     if (!opts.allowRelative) {
-        return { valid: false, error: ValidationError.Relative };
+        return { valid: false, error: 'Relative' };
     }
     const hasAllowedRelativePrefix = s.startsWith('/') || s.startsWith('./') || s.startsWith('../') || s.startsWith('#') || s.startsWith('?') || s.startsWith('//');
     if (hasAllowedRelativePrefix) {
         return { valid: true };
     }
-    return opts.allowRelative === 'all' ? { valid: true } : { valid: false, error: ValidationError.BareRelative };
+    return opts.allowRelative === 'all' ? { valid: true } : { valid: false, error: 'BareRelative' };
 };

package/dist/core/validation/form-validation-handler/form-validation-handler.svelte.js

@@ -106,6 +106,8 @@ export class FormValidationHandler {
                 return element.value;
             }
         };
+        // The DOM value is resolved at runtime (string / boolean / etc.) without a way to narrow it
+        // statically to the form's per-field union T[keyof T] — caller-provided schema validates it.
         const value = resolveValue();
         return this.updateValidateField(field, value);
     };

package/dist/fonts.d.ts

@@ -0,0 +1,11 @@
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/900.css';
+import '@fontsource/jetbrains-mono/400.css';
+import '@fontsource/jetbrains-mono/500.css';
+import '@fontsource/source-sans-pro/900.css';
+export type KitFontFamily = 'sans' | 'mono' | 'display';
+/** Maps a `KitFontFamily` value to its kit CSS-var reference. */
+export declare const KIT_FONT_VARS: Record<KitFontFamily, string>;

package/dist/fonts.js

@@ -0,0 +1,19 @@
+// Side-effect module — importing this file injects the CSS @font-face
+// declarations for every weight the design system uses. Vite picks up
+// the .css side-effect imports during dev and bundle.
+//
+// Consumers: `import '@streamscloud/kit/fonts';` at app entry. Once.
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/900.css';
+import '@fontsource/jetbrains-mono/400.css';
+import '@fontsource/jetbrains-mono/500.css';
+import '@fontsource/source-sans-pro/900.css';
+/** Maps a `KitFontFamily` value to its kit CSS-var reference. */
+export const KIT_FONT_VARS = {
+    sans: 'var(--sc-kit--font--sans)',
+    mono: 'var(--sc-kit--font--mono)',
+    display: 'var(--sc-kit--font--display)'
+};

package/dist/styles/_functions.scss

@@ -3,11 +3,11 @@
 
 $browser-font-size: 16; // Default
 
-@function rem($pixels) {
+@function to-rem($pixels) {
   @return #{restrict-decimal-places(calc($pixels/$browser-font-size))}rem;
 }
 
-@function em($pixels, $context: $browser-font-size) {
+@function to-em($pixels, $context: $browser-font-size) {
   @return #{restrict-decimal-places(calc($pixels/$context))}em;
 }
 

package/dist/styles/_index.scss

@@ -2,5 +2,4 @@
 
 @use 'normalize';
 @use 'reset';
-@use 'form-group';
-@use 'row';
+@use 'semantic';

package/dist/styles/_primitives.scss

@@ -0,0 +1,68 @@
+$color-white: #ffffff;
+$color-black: #000000;
+
+$color-dark-50: #383838;
+$color-dark-100: #343434;
+$color-dark-200: #333333;
+$color-dark-300: #2e2e2e;
+$color-dark-400: #2c2c2c;
+$color-dark-500: #272727;
+$color-dark-600: #242424;
+$color-dark-700: #222222;
+$color-dark-800: #1e1e1e;
+$color-dark-900: #121212;
+
+$color-neutral-50: #f9fafb;
+$color-neutral-100: #f2f2f3;
+$color-neutral-200: #e5e7eb;
+$color-neutral-300: #d1d5db;
+$color-neutral-400: #9ca3af;
+$color-neutral-500: #6b7280;
+$color-neutral-600: #4b5563;
+$color-neutral-700: #374151;
+$color-neutral-800: #1f2937;
+$color-neutral-900: #111827;
+
+$color-blue-50: #f1f6fd;
+$color-blue-100: #dfe9fb;
+$color-blue-200: #bad0f7;
+$color-blue-300: #91b3f3;
+$color-blue-400: #5a8dec;
+$color-blue-500: #144ab0;
+$color-blue-600: #1244a0;
+$color-blue-700: #103a89;
+$color-blue-800: #0c2d69;
+$color-blue-900: #0a2557;
+
+$color-green-50: #ecfef4;
+$color-green-100: #d4fce7;
+$color-green-200: #bbf7d0;
+$color-green-300: #39f393;
+$color-green-400: #0de374;
+$color-green-500: #0cce6b;
+$color-green-600: #0bbc60;
+$color-green-700: #0aa454;
+$color-green-800: #088745;
+$color-green-900: #066031;
+
+$color-orange-50: #fffbeb;
+$color-orange-100: #fef3c7;
+$color-orange-200: #fde68a;
+$color-orange-300: #fcd34d;
+$color-orange-400: #fbbf24;
+$color-orange-500: #ffa62b;
+$color-orange-600: #d97706;
+$color-orange-700: #b45309;
+$color-orange-800: #92400e;
+$color-orange-900: #78350f;
+
+$color-red-50: #fef1f3;
+$color-red-100: #fde8ea;
+$color-red-200: #f9c8cd;
+$color-red-300: #f6a7b1;
+$color-red-400: #f17e8b;
+$color-red-500: #e71d36;
+$color-red-600: #d4172d;
+$color-red-700: #b81427;
+$color-red-800: #981020;
+$color-red-900: #730c18;

package/dist/styles/_reset.scss

@@ -112,7 +112,7 @@ input {
   min-width: 0;
 
   &::placeholder {
-    color: $input-placeholder-color !important;
+    color: $input-placeholder-color;
   }
 
   &:-webkit-autofill,
@@ -138,7 +138,7 @@ textarea {
   @include mixins.scrollbar;
 
   &::placeholder {
-    color: $input-placeholder-color !important;
+    color: $input-placeholder-color;
   }
 }
 

package/dist/styles/_semantic.scss

@@ -0,0 +1,188 @@
+@use 'sass:color';
+@use 'primitives' as *;
+
+:root {
+  color-scheme: light dark;
+
+  // ============================================================
+  // COLOR — SURFACES
+  // ============================================================
+  --sc-kit--color--bg--app: light-dark(#f6f7f9, #{$color-dark-900});
+  --sc-kit--color--bg--panel: light-dark(#{$color-white}, #{$color-dark-800});
+  --sc-kit--color--bg--element: light-dark(#{$color-neutral-50}, #{$color-dark-800});
+  --sc-kit--color--bg--field: light-dark(#{$color-white}, #{$color-dark-700});
+  --sc-kit--color--bg--field-alt: light-dark(#f8f9fb, #{$color-dark-700});
+  --sc-kit--color--bg--hover: light-dark(#f3f5f8, #{$color-dark-700});
+  --sc-kit--color--bg--active: light-dark(#eef2f8, #{$color-dark-600});
+  --sc-kit--color--bg--menu-active: light-dark(#{$color-blue-50}, #{$color-dark-500});
+  --sc-kit--color--bg--images: light-dark(#{$color-neutral-300}, #{$color-neutral-700});
+
+  // ============================================================
+  // COLOR — TEXT
+  // ============================================================
+  --sc-kit--color--text--primary: light-dark(#1a1d21, #{$color-white});
+  --sc-kit--color--text--secondary: light-dark(#5c6370, #{$color-neutral-300});
+  --sc-kit--color--text--muted: light-dark(#9aa0aa, #{$color-neutral-400});
+  --sc-kit--color--text--placeholder: light-dark(#b4b9c2, #{$color-neutral-500});
+  --sc-kit--color--text--label: light-dark(#{$color-neutral-500}, #{$color-neutral-300});
+  --sc-kit--color--text--on-accent: #{$color-white};
+
+  // ============================================================
+  // COLOR — BORDERS
+  // ============================================================
+  --sc-kit--color--border: light-dark(#{$color-neutral-200}, #{$color-dark-600});
+  --sc-kit--color--border--strong: light-dark(#d5d8de, #{$color-dark-500});
+  --sc-kit--color--border--field: light-dark(#e3e6eb, #{$color-dark-600});
+  --sc-kit--color--border--focus: light-dark(#{$color-blue-500}, #{$color-blue-400});
+
+  // ============================================================
+  // COLOR — BRAND / ACCENT — anchored at #144AB0
+  // ============================================================
+  --sc-kit--color--accent: light-dark(#{$color-blue-500}, #{$color-blue-400});
+  --sc-kit--color--accent--hover: light-dark(#0f3a8c, #{$color-blue-500});
+  --sc-kit--color--accent--soft: light-dark(#e3ebf8, #{$color-blue-900});
+  --sc-kit--color--accent--softer: light-dark(#f1f5fb, #{$color-blue-900});
+
+  // ============================================================
+  // COLOR — STATUS
+  // ============================================================
+  --sc-kit--color--danger: light-dark(#e05252, #{$color-red-400});
+  --sc-kit--color--danger--hover: light-dark(#{$color-red-600}, #{$color-red-300});
+  --sc-kit--color--danger--soft: light-dark(#{$color-red-50}, #{$color-red-900});
+
+  --sc-kit--color--success: light-dark(#2ea97a, #{$color-green-400});
+  --sc-kit--color--success--hover: light-dark(#{$color-green-700}, #{$color-green-300});
+  --sc-kit--color--success--soft: light-dark(#{$color-green-50}, #{$color-green-900});
+
+  --sc-kit--color--warning: light-dark(#e0a73a, #{$color-orange-400});
+  --sc-kit--color--warning--soft: light-dark(#{$color-orange-50}, #{$color-orange-900});
+
+  --sc-kit--color--info: light-dark(#{$color-blue-500}, #{$color-blue-400});
+  --sc-kit--color--info--hover: light-dark(#{$color-blue-700}, #{$color-blue-300});
+  --sc-kit--color--info--soft: light-dark(#{$color-blue-50}, #{$color-blue-900});
+
+  // ============================================================
+  // COLOR — OVERLAYS
+  // ============================================================
+  --sc-kit--color--bg--scrim: light-dark(rgb(0 0 0 / 45%), rgb(0 0 0 / 65%));
+  --sc-kit--color--bg--tooltip: light-dark(#1a1d21, #{$color-dark-700});
+  --sc-kit--color--text--tooltip: #{$color-white};
+
+  // Z-scale — relative stacking order for the library's overlay components.
+  // 100-unit gaps leave room for consumers to inject custom layers between.
+  // Tooltip sits above modals so tooltips work inside dialogs.
+  --sc-kit--z-index--popover: 1000;
+  --sc-kit--z-index--modal: 1100;
+  --sc-kit--z-index--toast: 1200;
+  --sc-kit--z-index--tooltip: 1300;
+
+  // ============================================================
+  // SPACING (px-as-rem; 1rem = 16px)
+  // ============================================================
+  --sc-kit--space--0: 0;
+  --sc-kit--space--1: 0.25rem;
+  --sc-kit--space--2: 0.5rem;
+  --sc-kit--space--3: 0.75rem;
+  --sc-kit--space--4: 1rem;
+  --sc-kit--space--5: 1.25rem;
+  --sc-kit--space--6: 1.5rem;
+  --sc-kit--space--8: 2rem;
+  --sc-kit--space--10: 2.5rem;
+  --sc-kit--space--12: 3rem;
+  --sc-kit--space--16: 4rem;
+  --sc-kit--space--20: 5rem;
+
+  // ============================================================
+  // FIELD SIZING — cross-cutting for input-shaped controls
+  // (Input, Textarea, NumeralInput, DatePicker, Select triggers)
+  // ============================================================
+  --sc-kit--field--height--sm: 1.75rem; // 28px
+  --sc-kit--field--height--md: 2rem; // 32px
+  --sc-kit--field--height--lg: 2.5rem; // 40px
+
+  --sc-kit--field--padding-inline--sm: 0.5rem; // 8px
+  --sc-kit--field--padding-inline--md: 0.625rem; // 10px
+  --sc-kit--field--padding-inline--lg: 0.75rem; // 12px
+
+  --sc-kit--field--icon--size--sm: 0.875rem; // 14px
+  --sc-kit--field--icon--size--md: 1rem; // 16px
+  --sc-kit--field--icon--size--lg: 1.125rem; // 18px
+
+  // ============================================================
+  // RADII
+  // ============================================================
+  --sc-kit--radius--none: 0;
+  --sc-kit--radius--sm: 4px;
+  --sc-kit--radius--md: 6px;
+  --sc-kit--radius--lg: 8px;
+  --sc-kit--radius--xl: 12px;
+  --sc-kit--radius--pill: 999px;
+  --sc-kit--radius--circle: 50%;
+
+  // ============================================================
+  // TYPOGRAPHY
+  // ============================================================
+  --sc-kit--font-size--xs: 11px;
+  --sc-kit--font-size--sm: 12px;
+  --sc-kit--font-size--md: 14px;
+  --sc-kit--font-size--lg: 16px;
+  --sc-kit--font-size--xl: 20px;
+  --sc-kit--font-size--2xl: 26px;
+  --sc-kit--font-size--3xl: 32px;
+  --sc-kit--font-size--4xl: 40px;
+
+  --sc-kit--line-height--xs: 16px;
+  --sc-kit--line-height--sm: 18px;
+  --sc-kit--line-height--md: 20px;
+  --sc-kit--line-height--lg: 24px;
+  --sc-kit--line-height--xl: 28px;
+  --sc-kit--line-height--2xl: 34px;
+  --sc-kit--line-height--3xl: 40px;
+  --sc-kit--line-height--4xl: 48px;
+
+  --sc-kit--font-weight--regular: 400;
+  --sc-kit--font-weight--medium: 500;
+  --sc-kit--font-weight--semibold: 600;
+  --sc-kit--font-weight--bold: 700;
+  --sc-kit--font-weight--black: 900;
+
+  --sc-kit--letter-spacing--tight: -0.01em;
+  --sc-kit--letter-spacing--normal: 0;
+  --sc-kit--letter-spacing--wide: 0.04em;
+
+  --sc-kit--leading--tight: 1.2;
+  --sc-kit--leading--normal: 1.5;
+  --sc-kit--leading--relaxed: 1.65;
+
+  --sc-kit--font--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --sc-kit--font--display: 'Source Sans Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --sc-kit--font--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
+  // ============================================================
+  // SHADOWS
+  // ============================================================
+  --sc-kit--shadow--none: none;
+  --sc-kit--shadow--sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --sc-kit--shadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
+  --sc-kit--shadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+  --sc-kit--shadow--xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --sc-kit--shadow--card: 0 1px 1px rgba(0, 0, 0, 0.1);
+  --sc-kit--shadow--focus: var(--sc-kit--focus-ring);
+
+  // ============================================================
+  // MOTION
+  // ============================================================
+  --sc-kit--duration--fast: 80ms;
+  --sc-kit--duration--base: 160ms;
+  --sc-kit--duration--slow: 240ms;
+
+  --sc-kit--ease--default: cubic-bezier(0.4, 0, 0.2, 1);
+  --sc-kit--ease--in: cubic-bezier(0.4, 0, 1, 1);
+  --sc-kit--ease--out: cubic-bezier(0, 0, 0.2, 1);
+
+  // ============================================================
+  // FOCUS RING
+  // ============================================================
+  --sc-kit--focus-ring: 0 0 0 3px #{color.change($color-blue-500, $alpha: 0.18)};
+  --sc-kit--focus-ring--error: 0 0 0 3px #{color.change($color-red-500, $alpha: 0.18)};
+}

package/dist/styles/_transitions.scss

@@ -1,19 +1,6 @@
 @use 'sass:list';
 
-$transition-duration-fast: 150ms;
-$transition-duration-base: 250ms;
-$transition-duration-slow: 350ms;
-
-$transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
-$transition-easing-in: cubic-bezier(0.4, 0, 1, 1);
-$transition-easing-out: cubic-bezier(0, 0, 0.2, 1);
-
-// Transition mixin
-// Usage:
-//   @include transition(opacity);
-//   @include transition(background-color color, $transition-duration-fast);
-//   @include transition(width, $transition-duration-slow, linear);
-@mixin transition($properties: all, $duration: $transition-duration-base, $easing: $transition-easing-default) {
+@mixin transition($properties: all, $duration: var(--sc-kit--duration--base), $easing: var(--sc-kit--ease--default)) {
   $result: ();
 
   @each $property in $properties {

package/dist/styles/reset.css

@@ -105,7 +105,7 @@ input {
   min-width: 0;
 }
 input::placeholder {
-  color: var(--input--placeholder--color, #c1c1c1) !important;
+  color: var(--input--placeholder--color, #c1c1c1);
 }
 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
   -webkit-background-clip: text;
@@ -143,7 +143,7 @@ textarea::-webkit-scrollbar-thumb {
   }
 }
 textarea::placeholder {
-  color: var(--input--placeholder--color, #c1c1c1) !important;
+  color: var(--input--placeholder--color, #c1c1c1);
 }
 
 input:focus,

package/dist/ui/_internal/_affordance.scss

@@ -0,0 +1,58 @@
+// Kit-internal mixins for host inputs that embed `_internal/` affordances (clear button,
+// emoji picker, password toggle, ...). NOT exported through `styles/` — relative-imported
+// only from host components inside `src/lib/ui/`. The `--_--input-affordance--opacity` and
+// `--_--input-affordance--scale` custom properties are INTENTIONALLY referenced only inside
+// this file — host components and affordances consume them through these mixins, never by
+// name.
+//
+// Layout contract: affordances are revealed by binding `opacity` to the host's reveal
+// state, and they collapse their own width + leading margin to zero when hidden (so the
+// input text can use the full available width). Hosts opt out of the size collapse by
+// overriding `--_--input-affordance--scale: 1` after including `host` (e.g. Textarea,
+// where collapsing affordance width in a bottom-aligned layout would shift the trailing
+// edge while the textarea grows).
+
+// Declare the host as an input-affordance container. Hides affordances by default and
+// reveals them on the universal `:hover` / `:focus-within` triggers (lowered specificity
+// via `:where()` so non-interactive host modifiers can override by source order). Hosts
+// that need extra component-specific reveal triggers (e.g. DatePicker's `&--open` when
+// the popover is portaled outside the host) wrap their selector around
+// `@include affordance.reveal;`. Hosts that need to PIN affordances hidden in
+// non-interactive states (`&--disabled`, `&--readonly`, `&--inert`) use `affordance.suppress`.
+@mixin host {
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+
+  &:where(:hover),
+  &:where(:focus-within) {
+    @include reveal;
+  }
+}
+
+// Force affordances visible at the current scope. Used by hosts to add component-specific
+// reveal triggers on top of the universal `:hover` / `:focus-within` defaults from `host`,
+// and by `InputAffordances static` to disable collapse entirely.
+@mixin reveal {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+
+// Pin affordances to their hidden state regardless of host hover/focus — used by hosts in
+// non-interactive modifier blocks (`--disabled`, `--readonly`, `--inert`) to prevent the
+// universal `:where(:hover)` reveal from kicking in. Defined AFTER `host` in source so
+// cascade order wins at equal specificity.
+@mixin suppress {
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+
+// Mark an element as affordance-revealed: its opacity, inline-size, and leading margin
+// are bound to the host's reveal state. The intrinsic (revealed) inline-size and the
+// leading-gap value are supplied by the affordance via its own CSS vars — pass them as
+// arguments so the mixin can multiply them by the shared scale. Defaults to `1` for both
+// vars so the element stays visible if used outside a host context.
+@mixin revealed($size, $gap) {
+  opacity: var(--_--input-affordance--opacity, 1);
+  inline-size: calc(#{$size} * var(--_--input-affordance--scale, 1));
+  margin-inline-start: calc(#{$gap} * var(--_--input-affordance--scale, 1));
+}

package/dist/ui/_internal/input-clear-button/cmp.input-clear-button.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">import { Icon } from '../../icon';
+import { InputClearButtonLocalization } from './input-clear-button-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
+const { size = 'md', 'aria-label': ariaLabel, on } = $props();
+const localization = new InputClearButtonLocalization();
+const label = $derived(ariaLabel ?? localization.clearInput);
+const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    on.clear();
+};
+const handleKeydown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        e.stopPropagation();
+        on.clear();
+    }
+};
+</script>
+
+<span class="input-clear-button input-clear-button--{size}" role="button" tabindex="-1" aria-label={label} onclick={handleClick} onkeydown={handleKeydown}>
+  <Icon src={IconDismiss} />
+</span>
+
+<!--
+@component
+Internal shared affordance — the × that clears an input-like value (text input, numeral
+input, date picker, etc.). NOT a public package entry; lives under `_internal/` to signal
+kit-only use. Renders as `<span role="button">` so it can sit inside another `<button>`
+(e.g. DatePicker's trigger) without nested-button invalidity. `tabindex="-1"` — reachable
+by click, not in tab order.
+
+The public CSS API is scoped to this component and is intentionally NOT re-exposed
+through host-input surfaces — callers customize the host input separately. If you need
+to tweak this specific affordance, override the variables directly on a kit-wide selector.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--input-clear-button--size` | Container size (square) | per size |
+| `--sc-kit--input-clear-button--icon-size` | Dismiss icon size | per size |
+| `--sc-kit--input-clear-button--color` | Icon color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--input-clear-button--color--hover` | Icon color on hover | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--input-clear-button--background--hover` | Background on hover | `var(--sc-kit--color--bg--hover)` |
+| `--sc-kit--input-clear-button--border-radius` | Corner radius | `var(--sc-kit--radius--sm)` |
+-->
+
+<style>.input-clear-button {
+  --_icb--size: var(--sc-kit--input-clear-button--size, 1.125rem);
+  --_icb--icon-size: var(--sc-kit--input-clear-button--icon-size, 0.75rem);
+  --_icb--color: var(--sc-kit--input-clear-button--color, var(--sc-kit--color--text--muted));
+  --_icb--color-hover: var(--sc-kit--input-clear-button--color--hover, var(--sc-kit--color--text--primary));
+  --_icb--background-hover: var(--sc-kit--input-clear-button--background--hover, var(--sc-kit--color--bg--hover));
+  --_icb--border-radius: var(--sc-kit--input-clear-button--border-radius, var(--sc-kit--radius--sm));
+  --sc-kit--icon--color: var(--_icb--color);
+  --sc-kit--icon--size: var(--_icb--icon-size);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: var(--_icb--size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  line-height: 0;
+  border-radius: var(--_icb--border-radius);
+  cursor: pointer;
+  opacity: var(--_--input-affordance--opacity, 1);
+  inline-size: calc(var(--_icb--size) * var(--_--input-affordance--scale, 1));
+  margin-inline-start: calc(var(--sc-kit--space--1) * var(--_--input-affordance--scale, 1));
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default), inline-size var(--sc-kit--duration--base) var(--sc-kit--ease--default), margin-inline-start var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.input-clear-button--sm {
+  --sc-kit--input-clear-button--size: 1rem;
+  --sc-kit--input-clear-button--icon-size: 0.625rem;
+}
+.input-clear-button--md {
+  --sc-kit--input-clear-button--size: 1.125rem;
+  --sc-kit--input-clear-button--icon-size: 0.75rem;
+}
+.input-clear-button--lg {
+  --sc-kit--input-clear-button--size: 1.25rem;
+  --sc-kit--input-clear-button--icon-size: 0.875rem;
+}
+.input-clear-button:hover {
+  --sc-kit--icon--color: var(--_icb--color-hover);
+  background: var(--_icb--background-hover);
+}</style>

package/dist/ui/_internal/input-clear-button/cmp.input-clear-button.svelte.d.ts

@@ -0,0 +1,33 @@
+type Props = {
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Override the default localized aria-label (e.g. DatePicker passes "Clear date"). */
+    'aria-label'?: string;
+    on: {
+        clear: () => void;
+    };
+};
+/**
+ * Internal shared affordance — the × that clears an input-like value (text input, numeral
+ * input, date picker, etc.). NOT a public package entry; lives under `_internal/` to signal
+ * kit-only use. Renders as `<span role="button">` so it can sit inside another `<button>`
+ * (e.g. DatePicker's trigger) without nested-button invalidity. `tabindex="-1"` — reachable
+ * by click, not in tab order.
+ *
+ * The public CSS API is scoped to this component and is intentionally NOT re-exposed
+ * through host-input surfaces — callers customize the host input separately. If you need
+ * to tweak this specific affordance, override the variables directly on a kit-wide selector.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--input-clear-button--size` | Container size (square) | per size |
+ * | `--sc-kit--input-clear-button--icon-size` | Dismiss icon size | per size |
+ * | `--sc-kit--input-clear-button--color` | Icon color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--input-clear-button--color--hover` | Icon color on hover | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--input-clear-button--background--hover` | Background on hover | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--input-clear-button--border-radius` | Corner radius | `var(--sc-kit--radius--sm)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/_internal/input-clear-button/index.d.ts

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

package/dist/ui/_internal/input-clear-button/index.js

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

package/dist/ui/_internal/input-clear-button/input-clear-button-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class InputClearButtonLocalization {
+    get clearInput(): string;
+}

package/dist/ui/_internal/input-clear-button/input-clear-button-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../../core/locale';
+export class InputClearButtonLocalization {
+    get clearInput() {
+        return loc.clearInput[AppLocale.current];
+    }
+}
+const loc = {
+    clearInput: {
+        en: 'Clear input',
+        no: 'Tøm felt'
+    }
+};