@streamscloud/kit 0.9.19 → 0.10.1

package/dist/ui/badge/cmp.badge.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', children } = $props();
+<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, children } = $props();
 export {};
 </script>
 
-<span class="badge badge--{size} badge--{variant}-{style}">
-  {@render children()}
+<span class="badge badge--{size} badge--{variant}-{style}" class:badge--full={fullWidth}>
+  <span class="badge__content">{@render children()}</span>
 </span>
 
 <!--
@@ -39,10 +39,18 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   font-size: var(--_badge--font-size);
   font-weight: var(--_badge--font-weight);
   line-height: 1.4;
-  white-space: nowrap;
+  max-width: 100%;
+}
+.badge__content {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
+  white-space: nowrap;
+}
+.badge--full {
+  display: flex;
+  width: 100%;
+  justify-content: center;
 }
 .badge--sm {
   --_badge--padding-block: var(--sc-kit--badge--padding-block, 0.25rem);

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

@@ -7,6 +7,8 @@ type Props = {
     size?: 'sm' | 'md';
     /** Filled chip vs soft-tinted fill @default 'soft' */
     style?: 'soft' | 'solid';
+    /** Stretch to fill the parent's inline axis, centering the content. @default false */
+    fullWidth?: boolean;
     children: Snippet;
 };
 /**

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

@@ -104,7 +104,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
 | `--sc-kit--button--font-size` | Label font size | per size |
 | `--sc-kit--button--gap` | Gap between icon and label | per size |
 | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
-| `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
+| `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
 | `--sc-kit--button--width` | Explicit width | `fit-content` |
 | `--sc-kit--button--min-width` | Minimum width | `0` |
 | `--sc-kit--button--max-width` | Maximum width | `100%` |
@@ -126,7 +126,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   --_btn--min-width: var(--sc-kit--button--min-width, 0);
   --_btn--max-width: var(--sc-kit--button--max-width, 100%);
   --_btn--border-radius: var(--sc-kit--button--border-radius, var(--sc-kit--radius--md));
-  --_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--medium));
+  --_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--regular));
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -199,7 +199,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   --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: 1rem;
+  --sc-kit--icon--size: 0.875rem;
 }
 .btn--md {
   --sc-kit--button--height: 2rem;

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

@@ -62,7 +62,7 @@ type Props = ButtonModeProps | AnchorModeProps;
  * | `--sc-kit--button--font-size` | Label font size | per size |
  * | `--sc-kit--button--gap` | Gap between icon and label | per size |
  * | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
- * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
+ * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
  * | `--sc-kit--button--width` | Explicit width | `fit-content` |
  * | `--sc-kit--button--min-width` | Minimum width | `0` |
  * | `--sc-kit--button--max-width` | Maximum width | `100%` |

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -9,7 +9,7 @@ let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText
   class:icon-text--md={size === 'md'}
   class:icon-text--lg={size === 'lg'}>
   <span class="icon-text__icon">
-    <IconSlot icon={icon} size={size} />
+    <IconSlot icon={icon} />
   </span>
   {#if children && !hideText}
     <span class="icon-text__text" class:icon-text__text--trim={trimText}>
@@ -18,7 +18,7 @@ let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText
   {/if}
   {#if secondaryIcon}
     <span class="icon-text__secondary">
-      <IconSlot icon={secondaryIcon} size={size} />
+      <IconSlot icon={secondaryIcon} />
     </span>
   {/if}
 </span>
@@ -70,12 +70,15 @@ status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, a
 }
 .icon-text--sm {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--icon-text--icon--font-size: 0.875rem;
 }
 .icon-text--md {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--icon-text--icon--font-size: 1rem;
 }
 .icon-text--lg {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--lg);
+  --sc-kit--icon-text--icon--font-size: 1.25rem;
 }
 .icon-text__text {
   font-size: var(--_icon-text--text--font-size);

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -11,7 +11,7 @@ type Props = {
     trimText?: boolean;
     /** Hide text, showing only the icon(s) */
     hideText?: boolean;
-    /** Font-size preset — scales icon + text together (em-based). Inherits (`1em`) when unset. */
+    /** Size preset matching `Button` of the same size — text/icon px: sm 12/14, md 14/16, lg 16/20. Unset: text + icon follow the inherited font size (`1em`). */
     size?: 'sm' | 'md' | 'lg';
     children?: Snippet;
 };

package/dist/ui/table/cmp.table.svelte

@@ -65,15 +65,22 @@ const transformDraggedElement = (draggedRow) => {
     if (!draggedRow) {
         return;
     }
-    const referenceColumns = tableRef.querySelector('tbody')?.querySelector('tr')?.querySelectorAll('td') || [];
+    const referenceRow = tableRef.querySelector('tbody tr:not([data-is-dnd-shadow-item-internal])') ?? tableRef.querySelector('tbody tr');
+    const referenceColumns = referenceRow?.querySelectorAll('td') ?? [];
     const draggedColumns = draggedRow.querySelectorAll('td');
-    if (referenceColumns.length !== draggedColumns.length) {
+    if (!referenceRow || referenceColumns.length !== draggedColumns.length) {
         console.error('not equal count of model.columns withing table rows');
         return;
     }
     for (let i = 0, length = referenceColumns.length; i < length; i++) {
         draggedColumns[i].style.width = `${referenceColumns[i].clientWidth}px`;
+        draggedColumns[i].style.height = `${referenceColumns[i].clientHeight}px`;
     }
+    // Clone is reparented to <body>, losing the .table-container --_table--* vars; cells collapse without this.
+    const cellStyle = window.getComputedStyle(referenceColumns[0]);
+    draggedRow.style.setProperty('--_table--cell--font-size', cellStyle.fontSize);
+    draggedRow.style.setProperty('--_table--cell--horizontal-padding', cellStyle.paddingInlineStart);
+    draggedRow.style.setProperty('--_table--border-color', cellStyle.borderBottomColor);
 };
 // endregion Drag and Drop
 const changeItemPosition = (item, positionChange) => {
@@ -177,7 +184,7 @@ const getEditorColumnOrDefault = (column, editMode) => {
                       {#each model.itemActions as action (action)}
                         {#if action.visibilityFactory ? action.visibilityFactory(item) : true}
                           <PopoverItem on={{ click: () => action.action(item) }}>
-                            <IconText icon={action.icon}>
+                            <IconText icon={action.icon} size="md">
                               {action.title}
                             </IconText>
                           </PopoverItem>
@@ -452,11 +459,6 @@ Data table component with support for sorting, selection, drag-and-drop row reor
 }
 .table__actions {
   display: contents;
-  --sc-kit--popover-item--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--popover-item--min-width: 8.75rem;
-  --sc-kit--popover-item--padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
-  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--icon-text--icon--font-size: 1.125rem;
 }
 .table__drag-handle {
   width: 2.25rem;

package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte

@@ -24,7 +24,7 @@ const singleGroupAction = $derived(availableGroupActions[0]);
         {#each groupActions as action (action)}
           {#if isActionVisible(action, selection.items)}
             <PopoverItem on={{ click: () => action.action(selection.items) }}>
-              <IconText icon={action.icon}>
+              <IconText icon={action.icon} size="sm">
                 {action.title}
               </IconText>
             </PopoverItem>
@@ -33,7 +33,7 @@ const singleGroupAction = $derived(availableGroupActions[0]);
       </Popover>
     {:else if singleGroupAction}
       <Button type="button" variant="secondary" size="sm" on={{ click: () => singleGroupAction.action(selection.items) }}>
-        <IconText icon={singleGroupAction.icon}>
+        <IconText icon={singleGroupAction.icon} size="sm">
           {singleGroupAction.title}
         </IconText>
       </Button>
@@ -48,9 +48,4 @@ Group actions toolbar for table selections. Shows a single button or popover wit
 
 <style>.table-group-actions {
   display: contents;
-  --sc-kit--popover-item--font-size: 0.875rem;
-  --sc-kit--popover-item--min-width: 11.25rem;
-  --sc-kit--popover-item--padding: 0.75rem 1.25rem;
-  --sc-kit--icon-text--text--font-size: 0.875rem;
-  --sc-kit--icon-text--icon--font-size: 1.125rem;
 }</style>

package/package.json

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