@streamscloud/kit 0.10.4 → 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/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/package.json

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