@streamscloud/kit 0.51.1 → 0.53.0

package/dist/ui/breadcrumb/cmp.breadcrumb.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { BreadcrumbLocalization } from './breadcrumb-localization';
-let { items, separator = '/' } = $props();
+let { items, separator = '/', underline = 'hover' } = $props();
 const localization = new BreadcrumbLocalization();
 </script>
 
-<div class="breadcrumb" role="navigation" aria-label={localization.navLabel}>
+<div class="breadcrumb breadcrumb--underline-{underline}" role="navigation" aria-label={localization.navLabel}>
   {#each items as item, i (item.label + i)}
     {#if i > 0}<span class="breadcrumb__separator" aria-hidden="true">{separator}</span>{/if}
     {#if i === items.length - 1}
@@ -26,7 +26,8 @@ A horizontal trail of crumbs ending at the current page. Each non-last item rend
 - `<button>` styled like an anchor when only `item.on.click` is set (callback-only mode),
 - plain text `<span>` when neither is set.
 
-The last item is always plain text with `aria-current="page"`.
+The last item is always plain text with `aria-current="page"`. `underline` decides whether the crumb
+links show their underline on hover only (default), always, or never.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -46,6 +47,8 @@ The last item is always plain text with `aria-current="page"`.
   --_breadcrumb--link-color: var(--sc-kit--breadcrumb--link--color, var(--sc-kit--color--text--secondary));
   --_breadcrumb--link-color-hover: var(--sc-kit--breadcrumb--link--color--hover, var(--sc-kit--color--accent));
   --_breadcrumb--current-color: var(--sc-kit--breadcrumb--current--color, var(--sc-kit--color--text--primary));
+  --_breadcrumb--link-text-decoration: none;
+  --_breadcrumb--link-text-decoration-hover: underline;
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
@@ -54,14 +57,20 @@ The last item is always plain text with `aria-current="page"`.
   line-height: var(--sc-kit--leading--tight);
   color: var(--_breadcrumb--color);
 }
+.breadcrumb--underline-always {
+  --_breadcrumb--link-text-decoration: underline;
+}
+.breadcrumb--underline-never {
+  --_breadcrumb--link-text-decoration-hover: none;
+}
 .breadcrumb__link {
   color: var(--_breadcrumb--link-color);
-  text-decoration: none;
+  text-decoration: var(--_breadcrumb--link-text-decoration);
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .breadcrumb__link:hover {
   color: var(--_breadcrumb--link-color-hover);
-  text-decoration: underline;
+  text-decoration: var(--_breadcrumb--link-text-decoration-hover);
 }
 .breadcrumb__link:focus-visible {
   outline: 2px solid var(--sc-kit--color--border--focus);

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

@@ -3,6 +3,8 @@ type Props = {
     items: BreadcrumbItem[];
     /** Separator character between crumbs. @default '/' */
     separator?: string;
+    /** When the crumb links show their underline: only on hover, permanently, or not at all. @default 'hover' */
+    underline?: 'hover' | 'always' | 'never';
 };
 /**
  * A horizontal trail of crumbs ending at the current page. Each non-last item renders as:
@@ -11,7 +13,8 @@ type Props = {
  * - `<button>` styled like an anchor when only `item.on.click` is set (callback-only mode),
  * - plain text `<span>` when neither is set.
  *
- * The last item is always plain text with `aria-current="page"`.
+ * The last item is always plain text with `aria-current="page"`. `underline` decides whether the crumb
+ * links show their underline on hover only (default), always, or never.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/link/cmp.link.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { href, variant = 'default', external = false, on, children } = $props();
+<script lang="ts">let { href, variant = 'default', underline = 'hover', external = false, on, children } = $props();
 const isAnchor = $derived(href !== undefined);
 const target = $derived(isAnchor && external ? '_blank' : undefined);
 const rel = $derived(isAnchor && external ? 'noopener noreferrer' : undefined);
@@ -6,11 +6,11 @@ export {};
 </script>
 
 {#if isAnchor}
-  <a class="link link--{variant}" href={href} target={target} rel={rel} onclick={(e) => on?.click?.(e)}>
+  <a class="link link--{variant} link--underline-{underline}" href={href} target={target} rel={rel} onclick={(e) => on?.click?.(e)}>
     {@render children()}
   </a>
 {:else}
-  <button type="button" class="link link--{variant}" onclick={(e) => on?.click?.(e)}>
+  <button type="button" class="link link--{variant} link--underline-{underline}" onclick={(e) => on?.click?.(e)}>
     {@render children()}
   </button>
 {/if}
@@ -19,8 +19,8 @@ export {};
 @component
 A semantic link with three color variants. `default` reads as the standard accent link; `subtle`
 sits inline in body text with a secondary tint that picks up on hover; `danger` is for destructive
-navigation hints (e.g. "delete this account"). All variants animate color on hover and gain an
-underline.
+navigation hints (e.g. "delete this account"). All variants animate color on hover; `underline`
+decides whether the underline shows on hover only (default), always, or never.
 
 Renders as an `<a>` when `href` is set, otherwise as `<button type="button">` styled identically —
 useful for callback-only actions that read as inline links (e.g. "edit this", "show more"). The
@@ -40,30 +40,38 @@ useful for callback-only actions that read as inline links (e.g. "edit this", "s
   --_link--color-subtle-hover: var(--sc-kit--link--color--hover, var(--sc-kit--color--text--primary));
   --_link--color-danger: var(--sc-kit--link--color, var(--sc-kit--color--danger));
   --_link--color-danger-hover: var(--sc-kit--link--color--hover, var(--sc-kit--color--danger--hover));
-  text-decoration: none;
+  --_link--text-decoration: none;
+  --_link--text-decoration-hover: underline;
+  text-decoration: var(--_link--text-decoration);
   cursor: pointer;
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
+.link:hover {
+  text-decoration: var(--_link--text-decoration-hover);
+}
+.link--underline-always {
+  --_link--text-decoration: underline;
+}
+.link--underline-never {
+  --_link--text-decoration-hover: none;
+}
 .link--default {
   color: var(--_link--color-default);
 }
 .link--default:hover {
   color: var(--_link--color-default-hover);
-  text-decoration: underline;
 }
 .link--subtle {
   color: var(--_link--color-subtle);
 }
 .link--subtle:hover {
   color: var(--_link--color-subtle-hover);
-  text-decoration: underline;
 }
 .link--danger {
   color: var(--_link--color-danger);
 }
 .link--danger:hover {
   color: var(--_link--color-danger-hover);
-  text-decoration: underline;
 }
 .link:focus-visible {
   outline: 2px solid var(--sc-kit--color--border--focus);

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

@@ -5,6 +5,8 @@ type Props = {
     href?: string;
     /** Visual variant. @default 'default' */
     variant?: LinkVariant;
+    /** When the underline shows: only on hover, permanently, or not at all. @default 'hover' */
+    underline?: 'hover' | 'always' | 'never';
     /** External link — opens in a new tab and adds `rel="noopener noreferrer"`. Ignored in button mode. */
     external?: boolean;
     on?: {
@@ -15,8 +17,8 @@ type Props = {
 /**
  * A semantic link with three color variants. `default` reads as the standard accent link; `subtle`
  * sits inline in body text with a secondary tint that picks up on hover; `danger` is for destructive
- * navigation hints (e.g. "delete this account"). All variants animate color on hover and gain an
- * underline.
+ * navigation hints (e.g. "delete this account"). All variants animate color on hover; `underline`
+ * decides whether the underline shows on hover only (default), always, or never.
  *
  * Renders as an `<a>` when `href` is set, otherwise as `<button type="button">` styled identically —
  * useful for callback-only actions that read as inline links (e.g. "edit this", "show more"). The

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

@@ -2,7 +2,7 @@ export { default as Table } from './cmp.table.svelte';
 export { default as DraggableTable } from './cmp.table-draggable.svelte';
 export { default as TableColumnsManager } from './table-columns-manager/cmp.table-columns-manager.svelte';
 export { default as TableGroupActions } from './table-group-actions/cmp.table-group-actions.svelte';
-export type { ColumnsConfig, TableColumnSortDirection, TableColumnType, TableImageColumnFormat, TableItemAction, TableTextColumnFormat, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
+export type { ColumnsConfig, TableColumnSortDirection, TableColumnType, TableItemAction, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
 export type { TableGroupAction } from './table-group-actions/types.svelte';
 export { TableModel } from './table-model.svelte';
 export { pickDirectionFromOrderByState, generatePagination } from './service';

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

@@ -14,6 +14,7 @@ const getDateValueForColumn = (column, item) => {
 };
 const dateTime = $derived(getDateValueForColumn(column, item));
 const by = $derived(column.byValueFactory ? column.byValueFactory(item) : null);
+const underline = $derived(column.underline ?? 'hover');
 const getHref = (by) => {
     return column.hrefFactory ? column.hrefFactory(by) : null;
 };
@@ -26,7 +27,7 @@ const navigateToUser = (event, by) => {
 };
 </script>
 
-<span class="table-by-cell">
+<span class="table-by-cell table-by-cell--underline-{underline}">
   {#if dateTime}
     {#if by}
       <span class="table-by-cell__by">
@@ -73,6 +74,8 @@ const navigateToUser = (event, by) => {
 <style>.table-by-cell {
   --_table-by-cell--font-size: var(--sc-kit--table--cell--font-size, 0.875em);
   --_table-by-cell--no-date--color: var(--sc-kit--color--text--muted);
+  --_table-by-cell--name-text-decoration: none;
+  --_table-by-cell--name-text-decoration-hover: underline;
   height: 3.125em;
   min-height: 3.125em;
   max-height: 3.125em;
@@ -113,12 +116,18 @@ const navigateToUser = (event, by) => {
   white-space: nowrap;
   overflow: hidden;
 }
+.table-by-cell--underline-always {
+  --_table-by-cell--name-text-decoration: underline;
+}
+.table-by-cell--underline-never {
+  --_table-by-cell--name-text-decoration-hover: none;
+}
 .table-by-cell__name--link {
   color: inherit;
-  text-decoration: none;
+  text-decoration: var(--_table-by-cell--name-text-decoration);
 }
 .table-by-cell__name--link:hover {
-  text-decoration: underline;
+  text-decoration: var(--_table-by-cell--name-text-decoration-hover);
 }
 .table-by-cell__by-image {
   display: flex;

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

@@ -65,6 +65,8 @@ export interface ITableByColumn<T> extends ITableColumn<T> {
         id: string;
         handle: string;
     }) => void) | null;
+    /** When the person-name link shows its underline: only on hover, permanently, or not at all. @default 'hover' */
+    underline?: 'hover' | 'always' | 'never';
 }
 export interface ITableButtonColumn<T> extends ITableColumn<T> {
     type: 'button';
@@ -83,7 +85,7 @@ export interface ITableIconColumn<T> extends ITableColumn<T> {
 export interface ITableImageColumn<T> extends ITableColumn<T> {
     type: 'image';
     valueFactory?: ((item: T) => string) | null;
-    format?: TableImageColumnFormat;
+    format?: 'circle' | 'square-contain' | 'square-cover' | 'vertical-cover' | 'horizontal-cover';
     coverAspectRatio?: number;
     sizeCss?: string;
 }
@@ -98,13 +100,11 @@ export interface ITableSnippetColumn<T> extends ITableColumn<T> {
 }
 export interface ITableTextColumn<T> extends ITableColumn<T> {
     type: 'text';
-    format?: TableTextColumnFormat | null;
+    format?: 'text' | 'html' | 'money' | 'date' | 'date-time' | null;
     /** @default 1 */
     maxLines?: number | 'single-line-no-trim' | null;
     valueFactory?: ((item: T) => string) | null;
 }
-export type TableTextColumnFormat = 'text' | 'html' | 'money' | 'date' | 'date-time';
-export type TableImageColumnFormat = 'circle' | 'square-contain' | 'square-cover' | 'vertical-cover' | 'horizontal-cover';
 export type TableItemAction<T> = {
     title: string;
     icon?: IconProp;

package/dist/ui/video/cmp.video.svelte

@@ -196,6 +196,7 @@ const onTimeUpdate = () => {
     }
     percentageCompleted = video.currentTime / video.duration || 0;
     notifyProgress();
+    on?.timeUpdate?.({ id, seconds: video.currentTime });
 };
 const onLoaded = () => {
     setVolume(MediaVolumeManager.volumeLevel);
@@ -238,6 +239,7 @@ const handleSeek = (percent) => {
         video.currentTime = video.duration * percent;
         percentageCompleted = percent;
         notifyProgress();
+        on?.timeUpdate?.({ id, seconds: video.currentTime });
     }
 };
 </script>

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

@@ -38,6 +38,15 @@ type Props = {
         }) => void;
         /** Fires on timeupdate with the completion ratio (0-1) */
         progress?: (value: number) => void;
+        /**
+         * Fires on timeupdate with the raw playback position in seconds. Position-change
+         * samples, not a heartbeat: nothing fires while paused, seeks fire once, and a
+         * stopped/reset player emits a trailing `seconds: 0`.
+         */
+        timeUpdate?: (data: {
+            id: string;
+            seconds: number;
+        }) => void;
         ended?: (data: {
             id: string;
             src: string;

package/package.json

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