@streamscloud/kit 0.9.5 → 0.9.7

package/dist/ui/avatar/cmp.avatar.svelte

@@ -72,6 +72,8 @@ load / error / stub state machine.
 | `--sc-kit--avatar--badge--size` | Badge mini-avatar box | 45% of the avatar diameter |
 | `--sc-kit--avatar--badge--ring-color` | Badge separation ring (override on active/hover row backgrounds to blend) | `--sc-kit--color--bg--panel` |
 | `--sc-kit--avatar--badge--ring-width` | Badge separation ring thickness | `1.5px` |
+| `--sc-kit--avatar--badge--initials--background` | Badge initials chip background (contrast element of org-with-user) | `--sc-kit--color--accent` |
+| `--sc-kit--avatar--badge--initials--color` | Badge initials chip text color | `--sc-kit--color--text--on-accent` |
 -->
 
 <style>.avatar {
@@ -86,6 +88,8 @@ load / error / stub state machine.
   --_avatar--badge-size: var(--sc-kit--avatar--badge--size, calc(var(--_avatar--size) * 0.45));
   --_avatar--badge-ring-color: var(--sc-kit--avatar--badge--ring-color, var(--sc-kit--color--bg--panel));
   --_avatar--badge-ring-width: var(--sc-kit--avatar--badge--ring-width, 1.5px);
+  --_avatar--badge-initials-background: var(--sc-kit--avatar--badge--initials--background, var(--sc-kit--color--accent));
+  --_avatar--badge-initials-color: var(--sc-kit--avatar--badge--initials--color, var(--sc-kit--color--text--on-accent));
   --_avatar--border-radius: var(--sc-kit--avatar--border-radius, 50%);
   --sc-kit--image--border-radius: var(--_avatar--border-radius);
   --sc-kit--image--background: var(--_avatar--background);
@@ -133,6 +137,8 @@ load / error / stub state machine.
 .avatar__initials--badge {
   border-radius: var(--sc-kit--radius--sm);
   font-size: calc(var(--_avatar--badge-size) * 0.5);
+  background: var(--_avatar--badge-initials-background);
+  color: var(--_avatar--badge-initials-color);
 }
 .avatar__badge {
   position: absolute;

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

@@ -35,6 +35,8 @@ type Props = {
  * | `--sc-kit--avatar--badge--size` | Badge mini-avatar box | 45% of the avatar diameter |
  * | `--sc-kit--avatar--badge--ring-color` | Badge separation ring (override on active/hover row backgrounds to blend) | `--sc-kit--color--bg--panel` |
  * | `--sc-kit--avatar--badge--ring-width` | Badge separation ring thickness | `1.5px` |
+ * | `--sc-kit--avatar--badge--initials--background` | Badge initials chip background (contrast element of org-with-user) | `--sc-kit--color--accent` |
+ * | `--sc-kit--avatar--badge--initials--color` | Badge initials chip text color | `--sc-kit--color--text--on-accent` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/card/cmp.card.svelte

@@ -37,8 +37,11 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
 | `--sc-kit--card--color` | Body text color | `var(--sc-kit--color--text--primary)` |
 | `--sc-kit--card--header--background` | Header bar background | `transparent` |
 | `--sc-kit--card--header--border-color` | Header bottom divider | `var(--sc-kit--color--border)` |
+| `--sc-kit--card--header--padding` | Header padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
+| `--sc-kit--card--body--padding` | Body padding (full shorthand) | the `padding` preset value |
 | `--sc-kit--card--footer--background` | Footer bar background | `var(--sc-kit--color--bg--element)` |
 | `--sc-kit--card--footer--border-color` | Footer top divider | `var(--sc-kit--color--border)` |
+| `--sc-kit--card--footer--padding` | Footer padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
 -->
 
 <style>.card {
@@ -53,6 +56,9 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
   --_card--header-border-color: var(--sc-kit--card--header--border-color, var(--sc-kit--color--border));
   --_card--footer-background: var(--sc-kit--card--footer--background, var(--sc-kit--color--bg--element));
   --_card--footer-border-color: var(--sc-kit--card--footer--border-color, var(--sc-kit--color--border));
+  --_card--header-padding: var(--sc-kit--card--header--padding, var(--sc-kit--space--3) var(--_card--chrome-padding-inline));
+  --_card--body-padding: var(--sc-kit--card--body--padding, var(--_card--body-padding-default));
+  --_card--footer-padding: var(--sc-kit--card--footer--padding, var(--sc-kit--space--3) var(--_card--chrome-padding-inline));
   display: block;
   width: 100%;
   box-sizing: border-box;
@@ -66,25 +72,32 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
 .card--raised {
   box-shadow: var(--_card--shadow);
 }
-.card--pad-none .card__body {
-  padding: 0;
+.card--pad-none {
+  --_card--body-padding-default: 0;
+  --_card--chrome-padding-inline: var(--sc-kit--space--5);
 }
-.card--pad-sm .card__body {
-  padding: var(--sc-kit--space--3);
+.card--pad-sm {
+  --_card--body-padding-default: var(--sc-kit--space--3);
+  --_card--chrome-padding-inline: var(--sc-kit--space--3);
 }
-.card--pad-md .card__body {
-  padding: var(--sc-kit--space--5);
+.card--pad-md {
+  --_card--body-padding-default: var(--sc-kit--space--5);
+  --_card--chrome-padding-inline: var(--sc-kit--space--5);
 }
-.card--pad-lg .card__body {
-  padding: var(--sc-kit--space--6);
+.card--pad-lg {
+  --_card--body-padding-default: var(--sc-kit--space--6);
+  --_card--chrome-padding-inline: var(--sc-kit--space--6);
+}
+.card__body {
+  padding: var(--_card--body-padding);
 }
 .card__header {
-  padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
+  padding: var(--_card--header-padding);
   background: var(--_card--header-background);
   border-bottom: 1px solid var(--_card--header-border-color);
 }
 .card__footer {
-  padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
+  padding: var(--_card--footer-padding);
   background: var(--_card--footer-background);
   border-top: 1px solid var(--_card--footer-border-color);
 }

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

@@ -4,7 +4,7 @@ type CardPadding = 'none' | 'sm' | 'md' | 'lg';
 type Props = {
     /** Visual elevation. @default 'flat' */
     elevation?: CardElevation;
-    /** Inner body padding preset. Header and footer have their own fixed chrome. @default 'md' */
+    /** Inner body padding preset. Header/footer inline padding follows it; their block padding stays fixed. @default 'md' */
     padding?: CardPadding;
     header?: Snippet;
     footer?: Snippet;
@@ -34,8 +34,11 @@ type Props = {
  * | `--sc-kit--card--color` | Body text color | `var(--sc-kit--color--text--primary)` |
  * | `--sc-kit--card--header--background` | Header bar background | `transparent` |
  * | `--sc-kit--card--header--border-color` | Header bottom divider | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--card--header--padding` | Header padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
+ * | `--sc-kit--card--body--padding` | Body padding (full shorthand) | the `padding` preset value |
  * | `--sc-kit--card--footer--background` | Footer bar background | `var(--sc-kit--color--bg--element)` |
  * | `--sc-kit--card--footer--border-color` | Footer top divider | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--card--footer--padding` | Footer padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/date-picker/cmp.date-picker.svelte

@@ -156,7 +156,8 @@ $effect(() => {
   {/if}
 
   {#if open}
-    <div bind:this={panelEl} class="date-picker__panel">
+    <!-- preventDefault cancels FormField's <label> activation — a dead-space click inside the panel would forward to the trigger and close the calendar. -->
+    <div bind:this={panelEl} class="date-picker__panel" role="presentation" onclick={(e) => e.preventDefault()} onkeydown={() => undefined}>
       <DatePickerCalendar
         selectedDate={selectedDate}
         minDate={minDate}

package/dist/ui/select/cmp.singleselect-async.svelte

@@ -74,6 +74,7 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
   class:singleselect--inert={inert}
   class:singleselect--borderless={borderless}
   onclick={core.handleClick}
+  onmousedown={core.handleMousedown}
   onkeydown={() => undefined}
   role="presentation">
   {#if icon}

package/dist/ui/select/multiselect-base.svelte

@@ -185,6 +185,7 @@ const handleDndFinalize = (e) => {
     class:multiselect-trigger--inert={inert}
     class:multiselect-trigger--borderless={borderless}
     onclick={core.handleClick}
+    onmousedown={core.handleMousedown}
     onkeydown={() => undefined}
     role="presentation">
     {#if icon}

package/dist/ui/select/select-core.svelte.d.ts

@@ -73,6 +73,7 @@ export type SelectCore<T> = {
     readonly interactionLocked: boolean;
     handleFocus: () => void;
     handleClick: (e: MouseEvent) => void;
+    handleMousedown: (e: MouseEvent) => void;
     handleInput: (e: Event) => void;
     handleKeydown: (e: KeyboardEvent) => void;
     openPopover: () => void;

package/dist/ui/select/select-core.svelte.js

@@ -250,6 +250,8 @@ export function createSelectCore(config) {
     };
     const handleFocus = () => undefined;
     const handleClick = (e) => {
+        // Cancels FormField's <label> activation — else its synthetic click re-toggles the popover on every pick.
+        e.preventDefault();
         if (!config.getInteractive() || isFiltering) {
             return;
         }
@@ -268,6 +270,12 @@ export function createSelectCore(config) {
             openPopover();
         }
     };
+    const handleMousedown = (e) => {
+        // Keeps the inner input focused — default mousedown on the chevron/padding blurs it (focus-ring flicker).
+        if (e.target !== config.getInputEl()) {
+            e.preventDefault();
+        }
+    };
     const handleInput = (e) => {
         if (!config.getInteractive()) {
             return;
@@ -357,6 +365,7 @@ export function createSelectCore(config) {
         },
         handleFocus,
         handleClick,
+        handleMousedown,
         handleInput,
         handleKeydown,
         openPopover,

package/dist/ui/select/select-listbox.svelte

@@ -116,7 +116,11 @@ $effect(() => {
     role="listbox"
     id={listboxId}
     tabindex="-1"
-    onclick={(e) => e.stopPropagation()}
+    onclick={(e) => {
+      // preventDefault cancels FormField's <label> activation — stopPropagation alone doesn't.
+      e.preventDefault();
+      e.stopPropagation();
+    }}
     onmousedown={(e) => e.stopPropagation()}
     onkeydown={() => undefined}>
     {#if headerSnippet}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",