@streamscloud/kit 0.48.0 → 0.50.0

package/dist/ui/popover/cmp.popover.svelte

@@ -42,14 +42,24 @@ $effect(() => {
     const t = triggerEl;
     const c = contentEl;
     const update = async () => {
-        const middleware = [offsetMiddleware(offset), flip({ padding: boundaryMargin }), shift({ padding: boundaryMargin })];
-        if (matchWidth) {
-            middleware.push(size({
-                apply({ rects, elements }) {
-                    elements.floating.style.width = `${rects.reference.width}px`;
+        const middleware = [
+            offsetMiddleware(offset),
+            flip({ padding: boundaryMargin }),
+            shift({ padding: boundaryMargin }),
+            size({
+                padding: boundaryMargin,
+                apply({ rects, elements, availableWidth, availableHeight }) {
+                    elements.floating.style.setProperty('--_--popover--available-width', `${availableWidth}px`);
+                    elements.floating.style.setProperty('--_--popover--available-height', `${availableHeight}px`);
+                    if (matchWidth) {
+                        // Clamped here too, not just in CSS: the max-width rule is gated on `panel`, so panel={false} has no other bound.
+                        const width = Math.min(rects.reference.width, availableWidth);
+                        elements.floating.style.width = `${width}px`;
+                        elements.floating.style.minWidth = `${width}px`;
+                    }
                 }
-            }));
-        }
+            })
+        ];
         const result = await computePosition(t, c, {
             placement: position,
             strategy: fixedPosition ? 'fixed' : 'absolute',
@@ -187,13 +197,15 @@ const handleBackdropClick = (e) => {
     <div
       bind:this={contentEl}
       class="popover__content"
-      class:popover__content--panel={panel}
+      class:popover__content--bounded={panel}
       data-placement={resolvedPlacement}
       role="dialog"
       tabindex="-1"
       onclick={handleContentClick}
       onkeydown={() => undefined}>
-      {@render children()}
+      <div class="popover__panel" class:popover__panel--styled={panel}>
+        {@render children()}
+      </div>
     </div>
   {/if}
 </div>
@@ -224,6 +236,23 @@ let dd: PopoverInstance | undefined = $state.raw(undefined);
 <button onclick={() => dd?.open()}>Open externally</button>
 ```
 
+With `panel` on, content sizes to `max-content` and, above the `min-width` floor, never exceeds the room Floating UI measures around the trigger: the `size()` middleware feeds the space left after
+`flip` / `shift` into the max-width / max-height defaults. So the panel always has a definite width — which is what makes a consumer's own
+`text-overflow: ellipsis` (on a `min-inline-size: 0` flex child) resolve inside the panel — and a long list scrolls instead of running off-screen. Set
+`--sc-kit--popover--content--max-width` for a tighter cap than the available space.
+
+Because the panel fits itself to the available height, it is a scroll container by default. With `panel={false}` none of the three bounds apply — no width
+cap, no height fit, no clipping — since that consumer owns the box entirely. Floating content nested inside it — a submenu, a `Tooltip` on
+an item — is not clipped **once the panel has appeared**: those bubbles resolve their position against the popover's own positioned box, which sits outside
+the scrolling area, so `fixedPosition` on a nested Popover stays optional. During the appear animation the panel does carry a transform and therefore does
+clip, so a bubble opening within that window (a `Tooltip` with a near-zero `delay`) is cut off for its duration.
+
+Two consequences of the panel being a scroll container. `--sc-kit--popover--content--overflow: visible` removes the clipping but not the height fit — the
+panel is still shrunk and its content would paint outside the chrome, so pair it with `--sc-kit--popover--content--max-height: none` to opt out of both. And
+the clip is tight to the panel's box, whose inline padding is `0` by default: content that paints a focus ring outside its own border box (kit's pattern is
+`outline: 2px` + `outline-offset: 2px`, so 4px) needs inline padding of its own — either via `--sc-kit--popover--content--padding` or a wrapper. `PopoverItem`
+already carries the margin that keeps it clear.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
@@ -232,7 +261,10 @@ let dd: PopoverInstance | undefined = $state.raw(undefined);
 | `--sc-kit--popover--content--border-color` | Content border color | `var(--sc-kit--color--border)` |
 | `--sc-kit--popover--content--border-radius` | Content corner radius | `var(--sc-kit--radius--md)` |
 | `--sc-kit--popover--content--box-shadow` | Content shadow | `var(--sc-kit--shadow--lg)` |
-| `--sc-kit--popover--content--min-width` | Content min width | `12rem` |
+| `--sc-kit--popover--content--max-height` | Content max height. Applies only with `panel` on — a `panel={false}` consumer owns its own bounds | available height around the trigger |
+| `--sc-kit--popover--content--max-width` | Content max width — the upper bound content shrinks against. Applies only with `panel` on | available width around the trigger |
+| `--sc-kit--popover--content--min-width` | Content min width. Wins over max-width when the two conflict; ignored under `matchWidth` | `12.5rem` |
+| `--sc-kit--popover--content--overflow` | Panel overflow, both axes. Applies only with `panel` on. `visible` opts out of clipping | `hidden auto` |
 | `--sc-kit--popover--content--padding` | Content padding | `var(--sc-kit--space--1) 0` |
 | `--sc-kit--popover--content--z-index` | Content z-index | `var(--sc-kit--z-index--popover)` |
 
@@ -298,7 +330,10 @@ Props for keeping the popover open during interaction:
   --_dd--content-border-color: var(--sc-kit--popover--content--border-color, var(--sc-kit--color--border));
   --_dd--content-border-radius: var(--sc-kit--popover--content--border-radius, var(--sc-kit--radius--md));
   --_dd--content-shadow: var(--sc-kit--popover--content--box-shadow, var(--sc-kit--shadow--lg));
-  --_dd--content-min-width: var(--sc-kit--popover--content--min-width, 12rem);
+  --_dd--content-max-height: var(--sc-kit--popover--content--max-height, var(--_--popover--available-height, 100vh));
+  --_dd--content-max-width: var(--sc-kit--popover--content--max-width, var(--_--popover--available-width, 100vw));
+  --_dd--content-min-width: var(--sc-kit--popover--content--min-width, 12.5rem);
+  --_dd--content-overflow: var(--sc-kit--popover--content--overflow, hidden auto);
   --_dd--content-padding: var(--sc-kit--popover--content--padding, var(--sc-kit--space--1) 0);
   --_dd--content-z-index: var(--sc-kit--popover--content--z-index, var(--sc-kit--z-index--popover));
   --_dd--anim-shift-x: 0;
@@ -311,15 +346,9 @@ Props for keeping the popover open during interaction:
   z-index: var(--_dd--content-z-index);
   width: max-content;
   min-width: var(--_dd--content-min-width);
-  transform-origin: var(--_dd--anim-origin-x) var(--_dd--anim-origin-y);
-  animation: popover-appear var(--sc-kit--duration--fast) var(--sc-kit--ease--out) both;
 }
-.popover__content--panel {
-  background: var(--_dd--content-background);
-  border: 1px solid var(--_dd--content-border-color);
-  border-radius: var(--_dd--content-border-radius);
-  box-shadow: var(--_dd--content-shadow);
-  padding: var(--_dd--content-padding);
+.popover__content--bounded {
+  max-width: var(--_dd--content-max-width);
 }
 .popover__content:focus-visible {
   outline: none;
@@ -364,6 +393,39 @@ Props for keeping the popover open during interaction:
 .popover__content[data-placement=right-end] {
   --_dd--anim-origin-y: bottom;
 }
+.popover__panel {
+  transform-origin: var(--_dd--anim-origin-x) var(--_dd--anim-origin-y);
+  animation: popover-appear var(--sc-kit--duration--fast) var(--sc-kit--ease--out);
+}
+.popover__panel--styled {
+  background: var(--_dd--content-background);
+  border: 1px solid var(--_dd--content-border-color);
+  border-radius: var(--_dd--content-border-radius);
+  box-shadow: var(--_dd--content-shadow);
+  padding: var(--_dd--content-padding);
+  max-height: var(--_dd--content-max-height);
+  overflow: var(--_dd--content-overflow);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.popover__panel--styled::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.popover__panel--styled::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.popover__panel--styled::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .popover__panel--styled {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
 
 @keyframes popover-appear {
   from {

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

@@ -12,7 +12,7 @@ type Props = {
     boundaryMargin?: number;
     /** Render a semi-transparent backdrop behind the content. */
     backdrop?: boolean;
-    /** Make the content match the trigger element width. */
+    /** Make the content match the trigger element width, overriding `--sc-kit--popover--content--min-width` (never growing past the available space). */
     matchWidth?: boolean;
     /** Apply built-in panel styling (background, shadow, border-radius). @default true */
     panel?: boolean;
@@ -61,6 +61,23 @@ type Props = {
  * <button onclick={() => dd?.open()}>Open externally</button>
  * ```
  *
+ * With `panel` on, content sizes to `max-content` and, above the `min-width` floor, never exceeds the room Floating UI measures around the trigger: the `size()` middleware feeds the space left after
+ * `flip` / `shift` into the max-width / max-height defaults. So the panel always has a definite width — which is what makes a consumer's own
+ * `text-overflow: ellipsis` (on a `min-inline-size: 0` flex child) resolve inside the panel — and a long list scrolls instead of running off-screen. Set
+ * `--sc-kit--popover--content--max-width` for a tighter cap than the available space.
+ *
+ * Because the panel fits itself to the available height, it is a scroll container by default. With `panel={false}` none of the three bounds apply — no width
+ * cap, no height fit, no clipping — since that consumer owns the box entirely. Floating content nested inside it — a submenu, a `Tooltip` on
+ * an item — is not clipped **once the panel has appeared**: those bubbles resolve their position against the popover's own positioned box, which sits outside
+ * the scrolling area, so `fixedPosition` on a nested Popover stays optional. During the appear animation the panel does carry a transform and therefore does
+ * clip, so a bubble opening within that window (a `Tooltip` with a near-zero `delay`) is cut off for its duration.
+ *
+ * Two consequences of the panel being a scroll container. `--sc-kit--popover--content--overflow: visible` removes the clipping but not the height fit — the
+ * panel is still shrunk and its content would paint outside the chrome, so pair it with `--sc-kit--popover--content--max-height: none` to opt out of both. And
+ * the clip is tight to the panel's box, whose inline padding is `0` by default: content that paints a focus ring outside its own border box (kit's pattern is
+ * `outline: 2px` + `outline-offset: 2px`, so 4px) needs inline padding of its own — either via `--sc-kit--popover--content--padding` or a wrapper. `PopoverItem`
+ * already carries the margin that keeps it clear.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
@@ -69,7 +86,10 @@ type Props = {
  * | `--sc-kit--popover--content--border-color` | Content border color | `var(--sc-kit--color--border)` |
  * | `--sc-kit--popover--content--border-radius` | Content corner radius | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--popover--content--box-shadow` | Content shadow | `var(--sc-kit--shadow--lg)` |
- * | `--sc-kit--popover--content--min-width` | Content min width | `12rem` |
+ * | `--sc-kit--popover--content--max-height` | Content max height. Applies only with `panel` on — a `panel={false}` consumer owns its own bounds | available height around the trigger |
+ * | `--sc-kit--popover--content--max-width` | Content max width — the upper bound content shrinks against. Applies only with `panel` on | available width around the trigger |
+ * | `--sc-kit--popover--content--min-width` | Content min width. Wins over max-width when the two conflict; ignored under `matchWidth` | `12.5rem` |
+ * | `--sc-kit--popover--content--overflow` | Panel overflow, both axes. Applies only with `panel` on. `visible` opts out of clipping | `hidden auto` |
  * | `--sc-kit--popover--content--padding` | Content padding | `var(--sc-kit--space--1) 0` |
  * | `--sc-kit--popover--content--z-index` | Content z-index | `var(--sc-kit--z-index--popover)` |
  *

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

@@ -3,7 +3,7 @@ import { EmptyState } from '../empty-state';
 import { Icon } from '../icon';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
-import { createTableView, cssWidth } from './table-view.svelte';
+import { columnWidthStyle, createTableView } from './table-view.svelte';
 import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
 import { flip } from 'svelte/animate';
 import { dndzone } from 'svelte-dnd-action';
@@ -73,7 +73,7 @@ const transformDraggedElement = (draggedRow) => {
           <th class="table__th table__drag-handle">&nbsp;</th>
           {#each model.columns as column (column)}
             <TableHideableCell column={column}>
-              <th class="table__th" class:table__th--centered={column.centered} style={cssWidth(column)} title={column.title}>
+              <th class="table__th" class:table__th--centered={column.centered} style={columnWidthStyle(column)} title={column.title}>
                 <DynamicComponent model={column.headerView} />
               </th>
             </TableHideableCell>
@@ -132,7 +132,7 @@ const transformDraggedElement = (draggedRow) => {
                     class:table__td--centered={column.centered}
                     class:table__td--clickable={!!column.onClick}
                     class:table__td--flush={flushBottom}
-                    style={cssWidth(column)}
+                    style={columnWidthStyle(column)}
                     onclick={() => column.onClick && column.onClick(item)}>
                     <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
                   </td>

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

@@ -2,7 +2,7 @@
 import { EmptyState } from '../empty-state';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
-import { createTableView, cssWidth } from './table-view.svelte';
+import { columnWidthStyle, createTableView } from './table-view.svelte';
 let { model, showPlaceholder = false, showAlternativeView = false, grouping, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
 const view = createTableView(() => model, () => on);
@@ -58,7 +58,7 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
         <tr>
           {#each model.columns as column (column)}
             <TableHideableCell column={column}>
-              <th class="table__th" class:table__th--centered={column.centered} style={cssWidth(column)} title={column.title}>
+              <th class="table__th" class:table__th--centered={column.centered} style={columnWidthStyle(column)} title={column.title}>
                 <DynamicComponent model={column.headerView} />
               </th>
             </TableHideableCell>
@@ -112,7 +112,7 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
                       class:table__td--centered={column.centered}
                       class:table__td--clickable={!!column.onClick}
                       class:table__td--flush={flushBottom}
-                      style={cssWidth(column)}
+                      style={columnWidthStyle(column)}
                       onclick={() => column.onClick && column.onClick(item)}>
                       <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
                     </td>

package/dist/ui/table/table-column-models.svelte.d.ts

@@ -24,7 +24,8 @@ export declare class ResolvedColumn<T extends WithId> {
     get id(): keyof T;
     get title(): string;
     get centered(): boolean;
-    get fixedCssWidth(): string;
+    get cssWidth(): string;
+    get minCssWidth(): string;
     get hideable(): boolean;
     get sortLabelsOverride(): {
         asc: string;

package/dist/ui/table/table-column-models.svelte.js

@@ -31,8 +31,11 @@ export class ResolvedColumn {
     get centered() {
         return this.def.centered ?? false;
     }
-    get fixedCssWidth() {
-        return this.def.fixedCssWidth ?? '';
+    get cssWidth() {
+        return this.def.cssWidth ?? '';
+    }
+    get minCssWidth() {
+        return this.def.minCssWidth ?? '';
     }
     get hideable() {
         if ('hideable' in this.def) {

package/dist/ui/table/table-model.svelte.js

@@ -113,7 +113,7 @@ export class TableModel {
         }
         // Append actions column if needed
         if (this._itemActions.length) {
-            const actionsColumn = new ResolvedColumn({ type: 'actions', centered: true, fixedCssWidth: Css.em(75) });
+            const actionsColumn = new ResolvedColumn({ type: 'actions', centered: true, cssWidth: Css.em(75) });
             actionsColumn.headerView = new DynamicComponentModel({
                 component: TableHeader,
                 props: { column: { title: 'Actions' } }
@@ -151,7 +151,7 @@ export class TableModel {
                 const resolved = new ResolvedColumn({
                     ...column,
                     centered: true,
-                    fixedCssWidth: column.fixedCssWidth || Css.em(50)
+                    cssWidth: column.cssWidth || Css.em(50)
                 });
                 resolved.headerView = new DynamicComponentModel({
                     component: TableCheckboxHeader,
@@ -163,7 +163,7 @@ export class TableModel {
                 const resolved = new ResolvedColumn({
                     ...column,
                     centered: true,
-                    fixedCssWidth: column.fixedCssWidth || Css.em(75)
+                    cssWidth: column.cssWidth || Css.em(75)
                 });
                 resolved.headerView = resolveSortableHeader(resolved);
                 return resolved;

package/dist/ui/table/table-view.svelte.d.ts

@@ -6,7 +6,8 @@ type SelectionCallbacks<T> = {
     itemsSelected?: (e: T[]) => void;
     itemsDeselected?: (e: T[]) => void;
 };
-export declare const cssWidth: <T extends WithId>(column: ResolvedColumn<T>) => string;
+/** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
+export declare const columnWidthStyle: <T extends WithId>(column: ResolvedColumn<T>) => string;
 /** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
 export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined) => {
     readonly showNoItemsPlaceholder: boolean;

package/dist/ui/table/table-view.svelte.js

@@ -1,5 +1,9 @@
 import { untrack } from 'svelte';
-export const cssWidth = (column) => (column.fixedCssWidth ? `width: ${column.fixedCssWidth};` : 'width: auto;');
+/** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
+export const columnWidthStyle = (column) => {
+    const width = column.cssWidth ? `width: ${column.cssWidth};` : 'width: auto;';
+    return column.minCssWidth ? `${width} min-width: ${column.minCssWidth};` : width;
+};
 /** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
 export const createTableView = (model, on) => {
     let showNoItemsPlaceholder = $state(false);

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

@@ -11,7 +11,13 @@ export type IOneOfTableColumn<T> = ITableBadgeColumn<T> | ITableButtonColumn<T>
 export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'icon' | 'image' | 'move-row' | 'snippet' | 'text';
 interface ITableColumnBase {
     type: TableColumnType;
-    fixedCssWidth?: string;
+    /**
+     * Preferred column width. Under the table's `table-layout: auto` this is a suggestion: content can push a column wider, and a column with no width of its
+     * own is left with whatever the others do not claim. Use `minCssWidth` for a width the browser must honour.
+     */
+    cssWidth?: string;
+    /** Floor the column will not shrink below, taken out of columns whose `cssWidth` is merely a suggestion. Use it on the column that must keep space. */
+    minCssWidth?: string;
     centered?: boolean;
 }
 export interface ITableColumn<T> extends ITableColumnBase {

package/package.json

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