@streamscloud/kit 0.10.6 → 0.10.7-1781472368663

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} variant={action.variant} on={action.on} />
+      <GridCardButton icon={action.icon} text={action.text} ariaLabel={action.ariaLabel} variant={action.variant} on={action.on} />
     {/each}
   </div>
 </GridCardField>

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

@@ -4,6 +4,8 @@ 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;
+    /** Accessible name — required for text-less (icon-only) actions. */
+    ariaLabel?: string;
     /** @default 'ghost' */
     variant?: ButtonVariant;
     on: {

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

@@ -1,15 +1,22 @@
 <script lang="ts">import { Button } from '../../button';
-const { icon, text, variant = 'ghost', on } = $props();
+const { icon, text, ariaLabel, variant = 'ghost', on } = $props();
 const handleClick = (e) => {
     e.stopPropagation();
     on.click(e);
 };
 </script>
 
+{#snippet label()}{text}{/snippet}
+
 <span class="grid-card-button">
-  <Button type="button" variant={variant} icon={icon} size="xs" on={{ click: handleClick }}>
-    {text}
-  </Button>
+  <Button
+    type="button"
+    variant={variant}
+    icon={icon}
+    size="xs"
+    aria-label={ariaLabel ?? text}
+    children={text ? label : undefined}
+    on={{ click: handleClick }} />
 </span>
 
 <!--

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

@@ -3,6 +3,8 @@ import type { IconProp } from '../../icon';
 type Props = {
     icon: IconProp;
     text?: string;
+    /** Accessible name — required for text-less (icon-only) actions. */
+    ariaLabel?: string;
     /** @default 'ghost' */
     variant?: ButtonVariant;
     on: {

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

@@ -65,6 +65,7 @@ const navigateToUser = (event, by) => {
   min-height: 3.125em;
   max-height: 3.125em;
   display: inline-flex;
+  align-items: center;
   flex-wrap: nowrap;
 }
 .table-by-cell__date {

package/dist/ui/tooltip/cmp.tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { arrow as arrowMiddleware, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { tick } from 'svelte';
-const { text, placement = 'top', delay = 250, children } = $props();
+const { text, placement = 'top', delay = 250, fillHeight = false, children } = $props();
 let triggerEl = $state.raw(undefined);
 let bubbleEl = $state.raw(undefined);
 let arrowEl = $state.raw(undefined);
@@ -65,6 +65,7 @@ $effect(() => () => {
 <span
   bind:this={triggerEl}
   class="tooltip"
+  class:tooltip--fill-height={fillHeight}
   aria-describedby={visible ? id : undefined}
   onmouseenter={show}
   onmouseleave={hide}
@@ -105,6 +106,10 @@ or plain text. Bubble flips and shifts on viewport collision; an arrow points to
 
 <style>.tooltip {
   display: inline-flex;
+  align-items: center;
+}
+.tooltip--fill-height {
+  block-size: 100%;
 }
 .tooltip__bubble {
   --_tt--background: var(--sc-kit--tooltip--background, var(--sc-kit--color--bg--tooltip));

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

@@ -7,6 +7,8 @@ type Props = {
     placement?: Placement;
     /** Delay before show in ms. @default 250 */
     delay?: number;
+    /** Stretch the trigger to the parent's full height (content stays vertically centered). @default false */
+    fillHeight?: boolean;
     /** Wrapped element — anything passed becomes the tooltip trigger (icon, button, link, plain text). */
     children: Snippet;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.10.6",
+  "version": "0.10.7-1781472368663",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",