@streamscloud/kit 0.10.3 → 0.10.5

package/dist/ui/button/cmp.button.svelte

@@ -103,6 +103,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
 | `--sc-kit--button--padding-inline` | Inline (horizontal) padding | per size |
 | `--sc-kit--button--font-size` | Label font size | per size |
 | `--sc-kit--button--gap` | Gap between icon and label | per size |
+| `--sc-kit--button--icon-size` | Icon / spinner size | per size (12 / 14 / 16 / 20 px for xs/sm/md/lg) |
 | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
 | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
 | `--sc-kit--button--width` | Explicit width | `fit-content` |
@@ -118,10 +119,11 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   --_btn--border: var(--sc-kit--button--border, 1px solid transparent);
   --_btn--box-shadow: var(--sc-kit--button--box-shadow, inset 0 2px 0 rgba(255, 255, 255, 0.3));
   --_btn--focus-ring-color: var(--sc-kit--button--focus-ring-color, var(--sc-kit--color--border--focus));
-  --_btn--height: var(--sc-kit--button--height, 2rem);
-  --_btn--padding-inline: var(--sc-kit--button--padding-inline, var(--sc-kit--space--4));
-  --_btn--font-size: var(--sc-kit--button--font-size, var(--sc-kit--font-size--md));
-  --_btn--gap: var(--sc-kit--button--gap, var(--sc-kit--space--2));
+  --_btn--height: var(--sc-kit--button--height, var(--_btn--size-height));
+  --_btn--padding-inline: var(--sc-kit--button--padding-inline, var(--_btn--size-padding-inline));
+  --_btn--font-size: var(--sc-kit--button--font-size, var(--_btn--size-font-size));
+  --_btn--gap: var(--sc-kit--button--gap, var(--_btn--size-gap));
+  --_btn--icon-size: var(--sc-kit--button--icon-size, var(--_btn--size-icon-size));
   --_btn--width: var(--sc-kit--button--width, fit-content);
   --_btn--min-width: var(--sc-kit--button--min-width, 0);
   --_btn--max-width: var(--sc-kit--button--max-width, 100%);
@@ -173,15 +175,16 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   text-overflow: ellipsis;
 }
 .btn__icon {
+  --sc-kit--icon--size: var(--_btn--icon-size);
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--sc-kit--icon--size);
-  height: var(--sc-kit--icon--size);
+  width: var(--_btn--icon-size);
+  height: var(--_btn--icon-size);
 }
 .btn__spinner {
-  --sc-kit--spinner--size: var(--sc-kit--icon--size);
+  --sc-kit--spinner--size: var(--_btn--icon-size);
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -194,26 +197,33 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
 .btn--disabled {
   cursor: default;
 }
+.btn--xs {
+  --_btn--size-height: 1.5rem;
+  --_btn--size-padding-inline: var(--sc-kit--space--2);
+  --_btn--size-font-size: var(--sc-kit--font-size--xs);
+  --_btn--size-gap: var(--sc-kit--space--1);
+  --_btn--size-icon-size: 0.875rem;
+}
 .btn--sm {
-  --sc-kit--button--height: 1.75rem;
-  --sc-kit--button--padding-inline: var(--sc-kit--space--3);
-  --sc-kit--button--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--button--gap: var(--sc-kit--space--1);
-  --sc-kit--icon--size: 0.875rem;
+  --_btn--size-height: 1.75rem;
+  --_btn--size-padding-inline: var(--sc-kit--space--3);
+  --_btn--size-font-size: var(--sc-kit--font-size--sm);
+  --_btn--size-gap: var(--sc-kit--space--1);
+  --_btn--size-icon-size: 0.875rem;
 }
 .btn--md {
-  --sc-kit--button--height: 2rem;
-  --sc-kit--button--padding-inline: var(--sc-kit--space--4);
-  --sc-kit--button--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--button--gap: var(--sc-kit--space--2);
-  --sc-kit--icon--size: 1rem;
+  --_btn--size-height: 2rem;
+  --_btn--size-padding-inline: var(--sc-kit--space--4);
+  --_btn--size-font-size: var(--sc-kit--font-size--md);
+  --_btn--size-gap: var(--sc-kit--space--2);
+  --_btn--size-icon-size: 1rem;
 }
 .btn--lg {
-  --sc-kit--button--height: 2.5rem;
-  --sc-kit--button--padding-inline: var(--sc-kit--space--6);
-  --sc-kit--button--font-size: var(--sc-kit--font-size--lg);
-  --sc-kit--button--gap: var(--sc-kit--space--2);
-  --sc-kit--icon--size: 1.25rem;
+  --_btn--size-height: 2.5rem;
+  --_btn--size-padding-inline: var(--sc-kit--space--6);
+  --_btn--size-font-size: var(--sc-kit--font-size--lg);
+  --_btn--size-gap: var(--sc-kit--space--2);
+  --_btn--size-icon-size: 1.25rem;
 }
 .btn--icon-only {
   --sc-kit--button--padding-inline: 0;

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

@@ -61,6 +61,7 @@ type Props = ButtonModeProps | AnchorModeProps;
  * | `--sc-kit--button--padding-inline` | Inline (horizontal) padding | per size |
  * | `--sc-kit--button--font-size` | Label font size | per size |
  * | `--sc-kit--button--gap` | Gap between icon and label | per size |
+ * | `--sc-kit--button--icon-size` | Icon / spinner size | per size (12 / 14 / 16 / 20 px for xs/sm/md/lg) |
  * | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
  * | `--sc-kit--button--width` | Explicit width | `fit-content` |

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

@@ -1,2 +1,2 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'info' | 'success' | 'warning' | 'danger';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';

package/dist/ui/divider/cmp.divider.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { orientation = 'horizontal', label } = $props();
+<script lang="ts">"use strict";
+let { orientation = 'horizontal', label } = $props();
 </script>
 
 {#if label}

package/dist/ui/duration/cmp.duration.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">const { seconds, variant = 'raw', showZero = false } = $props();
+<script lang="ts">"use strict";
+const { seconds, variant = 'raw', showZero = false } = $props();
 const format = (secs) => {
     const total = Math.max(0, Math.round(secs));
     const hours = Math.floor(total / 3600);

package/dist/ui/grid-card/fields/cmp.grid-card-actions-field.svelte

@@ -6,7 +6,7 @@ const { label, actions } = $props();
 <GridCardField label={label}>
   <div class="grid-card-actions-field">
     {#each actions as action (action)}
-      <GridCardButton icon={action.icon} text={action.text} on={action.on} />
+      <GridCardButton icon={action.icon} text={action.text} variant={action.variant} on={action.on} />
     {/each}
   </div>
 </GridCardField>

package/dist/ui/grid-card/fields/cmp.grid-card-actions-field.svelte.d.ts

@@ -1,8 +1,11 @@
+import type { ButtonVariant } from '../../button';
 import type { IconProp } from '../../icon';
 export type GridCardAction = {
     /** Use the `{ src, color }` object form to tint the icon (e.g. `'danger'` for delete) without coloring the whole button. */
     icon: IconProp;
     text?: string;
+    /** @default 'ghost' */
+    variant?: ButtonVariant;
     on: {
         click: (e: MouseEvent) => void;
     };

package/dist/ui/grid-card/fields/cmp.grid-card-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Button } from '../../button';
 import { IconText } from '../../icon-text';
-const { icon, text, on } = $props();
+const { icon, text, variant = 'ghost', on } = $props();
 const handleClick = (e) => {
     e.stopPropagation();
     on.click(e);
@@ -8,7 +8,7 @@ const handleClick = (e) => {
 </script>
 
 <span class="grid-card-button">
-  <Button type="button" variant="ghost" size="sm" on={{ click: handleClick }}>
+  <Button type="button" variant={variant} size="xs" on={{ click: handleClick }}>
     <IconText icon={icon} hideText={!text} trimText>
       {#if text}{text}{/if}
     </IconText>
@@ -17,10 +17,10 @@ const handleClick = (e) => {
 
 <!--
 @component
-Internal compact action button for `GridCard` rows. Kit `Button` `size='sm'` + `variant='ghost'`
-wrapping an `IconText` so individual action icons can be tinted (e.g. `{ src, color: 'danger' }`
-on delete) without coloring the whole button. Click handler stops propagation so it doesn't fire
-the card's `on.activate`.
+Internal compact action button for `GridCard` rows. Kit `Button` (`size='xs'`, `variant='ghost'` by
+default — override via `variant`) wrapping an `IconText` so individual action icons can be tinted
+(e.g. `{ src, color: 'danger' }` on delete) without coloring the whole button. Click handler stops
+propagation so it doesn't fire the card's `on.activate`.
 -->
 
 <style>.grid-card-button {

package/dist/ui/grid-card/fields/cmp.grid-card-button.svelte.d.ts

@@ -1,16 +1,19 @@
+import { type ButtonVariant } from '../../button';
 import type { IconProp } from '../../icon';
 type Props = {
     icon: IconProp;
     text?: string;
+    /** @default 'ghost' */
+    variant?: ButtonVariant;
     on: {
         click: (e: MouseEvent) => void;
     };
 };
 /**
- * Internal compact action button for `GridCard` rows. Kit `Button` `size='sm'` + `variant='ghost'`
- * wrapping an `IconText` so individual action icons can be tinted (e.g. `{ src, color: 'danger' }`
- * on delete) without coloring the whole button. Click handler stops propagation so it doesn't fire
- * the card's `on.activate`.
+ * Internal compact action button for `GridCard` rows. Kit `Button` (`size='xs'`, `variant='ghost'` by
+ * default — override via `variant`) wrapping an `IconText` so individual action icons can be tinted
+ * (e.g. `{ src, color: 'danger' }` on delete) without coloring the whole button. Click handler stops
+ * propagation so it doesn't fire the card's `on.activate`.
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/grid-card/fields/cmp.grid-card-id-field.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">const { label = 'Id:', text } = $props();
+<script lang="ts">"use strict";
+const { label = 'Id:', text } = $props();
 </script>
 
 <div class="grid-card-id-field">

package/dist/ui/logo/cmp.logo.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { mark = false, subheading = null, variant = 'mono', ariaLabel } = $props();
+<script lang="ts">"use strict";
+let { mark = false, subheading = null, variant = 'mono', ariaLabel } = $props();
 // Resolve fills per variant. `mono` keeps the existing currentColor behavior;
 // `standard` paints the mark in the brand accent and the type in primary text,
 // matching the Figma master Standard lockup.

package/dist/ui/navigation/cmp.nav-menu-divider.svelte

@@ -1,4 +1,5 @@
-<script lang="ts"></script>
+<script lang="ts">"use strict";
+</script>
 
 <div class="nav-menu-divider" role="separator"></div>
 

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

@@ -1,4 +1,5 @@
-<script lang="ts">const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, on } = $props();
+<script lang="ts">"use strict";
+const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, on } = $props();
 let cells = $state([]);
 const cellValue = (i) => value[i] ?? '';
 const emit = (next) => {

package/dist/ui/progress/cmp.progress.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { value, size = 'md', color, label } = $props();
+<script lang="ts">"use strict";
+let { value, size = 'md', color, label } = $props();
 const clamped = $derived(Math.max(0, Math.min(1, value)));
 const cssWidth = $derived(`${100 * clamped}%`);
 const percent = $derived(Math.round(100 * clamped));

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

@@ -1,4 +1,5 @@
-<script lang="ts">const { selected, title, description, disabled = false, name, on } = $props();
+<script lang="ts">"use strict";
+const { selected, title, description, disabled = false, name, on } = $props();
 const handleClick = (event) => {
     event.stopPropagation();
     if (disabled || selected) {

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T">const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, on } = $props();
+<script lang="ts" generics="T">"use strict";
+const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, on } = $props();
 const isActive = (segment) => (compare ? compare(value, segment.value) : value === segment.value);
 const handleClick = (segment) => {
     if (segment.disabled || isActive(segment)) {

package/dist/ui/skeleton/cmp.skeleton.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { shape = 'rect', lines = 1 } = $props();
+<script lang="ts">"use strict";
+let { shape = 'rect', lines = 1 } = $props();
 </script>
 
 {#if shape === 'text' && lines > 1}

package/dist/ui/slider/cmp.slider.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { value, min = 0, max = 100, step = 1, disabled = false, showValue = false, withInput = false, ticks = [], valueSuffix = '', on } = $props();
+<script lang="ts">"use strict";
+let { value, min = 0, max = 100, step = 1, disabled = false, showValue = false, withInput = false, ticks = [], valueSuffix = '', on } = $props();
 let focused = $state(false);
 const fillPct = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
 const handleInput = (e) => {

package/dist/ui/spinner/cmp.spinner.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { size = 'md', color, label, position, blocking = false, timeout = 0 } = $props();
+<script lang="ts">"use strict";
+let { size = 'md', color, label, position, blocking = false, timeout = 0 } = $props();
 let visible = $state(false);
 $effect(() => {
     if (timeout <= 0) {

package/dist/ui/table/table-cells/table-badge-cell.svelte

@@ -6,7 +6,7 @@ const variant = $derived(column.variantFactory ? column.variantFactory(item) : '
 
 {#if getValueForColumn(column, item) !== null}
   <div class="table-badge-cell">
-    <Badge variant={variant}>{getValueForColumn(column, item)}</Badge>
+    <Badge variant={variant} fullWidth={column.fullWidth}>{getValueForColumn(column, item)}</Badge>
   </div>
 {/if}
 

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

@@ -40,6 +40,8 @@ export interface ITableBadgeColumn<T> extends ITableColumn<T> {
     type: 'badge';
     variantFactory?: ((item: T) => BadgeVariant) | null;
     valueFactory?: ((item: T) => string) | null;
+    /** Stretch the badge to fill the column width. @default false */
+    fullWidth?: boolean;
 }
 export interface ITableByColumn<T> extends ITableColumn<T> {
     type: 'by';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -519,7 +519,7 @@
     "nanoid": "^5.1.11",
     "p-limit": "^7.3.0",
     "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.5.2",
+    "prettier-plugin-svelte": "^4.1.0",
     "publint": "^0.3.21",
     "rfdc": "^1.4.1",
     "sass": "^1.99.0",
@@ -528,7 +528,7 @@
     "svelte-check": "^4.4.8",
     "svelte-dnd-action": "^0.9.69",
     "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.3",
     "vite": "^8.0.13",
     "vite-tsconfig-paths": "^6.1.1",