@lavalogic/scoria 0.37.19 → 0.37.21

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -724,10 +724,11 @@
 div.input-cell {
   background-color: #f4f7f9;
   height: var(--height);
-  overflow: visible;
+  overflow-x: clip;
+  overflow-y: visible;
   padding-left: 0;
   padding-right: 0;
-  border-right: solid 1px #cbd4da !important;
+  border-right: none;
   box-sizing: border-box;
 }
 div.input-cell div.stick-right {

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -7,7 +7,6 @@
 	import Action from '../../../Action.svelte';
 	import Checkbox from '../../../Checkbox.svelte';
 	import ThreeStateRadio from '../../../ThreeStateRadio.svelte';
-	import { ColumnType } from '../../Types/Columns/ColumnType.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
 	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 	import { Size } from '../../../../Types/Internal/Size.js';
@@ -18,7 +17,6 @@
 
 	const { columnDef }: ColumnListRowProps<T> = $props();
 
-	const isExpandColumn = $derived(columnDef?.columnType === ColumnType.Expand);
 
 	/**
 	 * Position of this column inside the sorted column list, used to
@@ -412,13 +410,9 @@
 						Expand columns can never be pinned, so the group goes
 						fully disabled for them.
 					-->
-					<div
-						class="pin-selector"
-						class:disabled={isExpandColumn}
-					>
+					<div class="pin-selector">
 						<ThreeStateRadio
 							value={pinSide}
-							disabled={isExpandColumn}
 							noLabel="Pin to left"
 							neutralLabel="Unpinned"
 							yesLabel="Pin to right"

package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte

@@ -115,11 +115,24 @@
 		tableContext.endFocus(focusDetails.coordinates);
 	}}
 >
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="slot-wrapper"
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}
 		bind:this={cellRef}
+		onmousedown={(e) => {
+			// Stop the browser's default mousedown -> focus side effect
+			// on the inner Action button. The default focus call
+			// implicitly calls `scrollIntoView` against the button (which
+			// sits inside a sticky right-pinned cell whose layout position
+			// is at the far right end of the row), causing the table to
+			// jump horizontally on every click of the ellipsis menu. We
+			// still want focus / activation behaviour, so the click handler
+			// on the Action proper handles the popup toggle and the outer
+			// `.focusable` cell handler manages the focus state.
+			e.preventDefault();
+		}}
 	>
 		<!-- TODO {isMultiFocusStart} -->
 		<Action

package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte

@@ -83,11 +83,17 @@
 >
 	<div class="bubble-parent">
 		{#await values then values}
-			<!-- The label string itself is not guaranteed unique so the key combines
-			     index and value; both pieces are required because duplicate labels
-			     would otherwise collapse and reordering with identical labels
-			     would force unrelated bubbles to swap. -->
-			{#each values as value, index (`${index}:${value}`)}
+			<!-- `maxBubbles` (default 3) caps how many pills render inline;
+			     anything beyond gets a single `"+N more"` overflow chip with
+			     the hidden labels as a hover tooltip. Key combines index and
+			     value because duplicate labels would otherwise collapse and
+			     reordering with identical labels would force unrelated
+			     bubbles to swap. -->
+			{@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
+			{@const visibleBubbles = values.slice(0, maxBubbles)}
+			{@const overflowCount = Math.max(0, values.length - maxBubbles)}
+			{@const overflowTitle = values.slice(maxBubbles).join(', ')}
+			{#each visibleBubbles as value, index (`${index}:${value}`)}
 				{@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
 					cell.row.original,
 					cell.row.originalIndex,
@@ -105,6 +111,12 @@
 					{/await}
 				{/if}
 			{/each}
+			{#if overflowCount > 0}
+				<span
+					class="bubble-overflow"
+					title={overflowTitle}
+				>+{overflowCount} more</span>
+			{/if}
 		{/await}
 	</div>
 </div>
@@ -186,7 +198,7 @@
 
 div.bubble-parent {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row nowrap;
   max-width: 100%;
   height: 100%;
   overflow-x: clip;
@@ -194,4 +206,16 @@ div.bubble-parent {
   align-items: center;
   gap: 0.75rem;
   --line-height: 1;
+}
+
+.bubble-overflow {
+  flex-shrink: 0;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background-color: #e9ecf1;
+  color: #647d8e;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: default;
 }</style>

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -370,6 +370,7 @@ export function createColumnFactory() {
                 id,
                 ...commonProps(opts, 'bubble'),
                 accessorFn: opts.value,
+                maxBubbles: opts.maxBubbles,
                 getColour: opts.colour,
                 // Default to a string-typed filter so bubble columns appear in
                 // the quick-filter row and advanced filter panel by default

package/dist/Components/Table/Headers/TableHead.svelte

@@ -360,7 +360,11 @@
 							handler(e);
 						}}
 						ondblclick={() => {
-							tableContext.autoResize(header.column.columnDef).catch(devCatch);
+							// Reset the column back to its factory-default width
+							// (clears the user-resized flag too, so the grid
+							// track returns to its original `minmax(W, 1fr)` /
+							// fixed-`${W}px` branch as configured).
+							header.column.columnDef.resetWidth();
 						}}
 						class="resizer right"
 						class:isResizing={header.column.getIsResizing()}

package/dist/Components/Table/Misc/TableFooter.svelte

@@ -349,12 +349,17 @@
   --input-width: 4rem;
   --input-border: none;
 }
-.spread_row .block.nopad {
+.spread_row .records-per-page {
+  --input-width: 4.5rem;
+  padding: 0 0.5rem;
+  gap: 0.375rem;
+}
+.spread_row .records-per-page.nopad {
   padding: 0;
   --button-padding-horizontal: 1rem;
   --button-padding-vertical: 0.56rem;
 }
-.spread_row .block.nopad.page-arrow {
+.spread_row .records-per-page.nopad.page-arrow {
   --button-padding-horizontal: 0.6rem;
   --button-padding-vertical: 0.42rem;
 }

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -162,6 +162,17 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = neve
      *  track, false = `minmax(width, 1fr)` flex track. */
     get widthIsFixed(): boolean;
     set widthIsFixed(v: boolean);
+    private readonly _originalWidth;
+    private readonly _originalMaxWidth;
+    private readonly _originalWidthIsFixed;
+    /**
+     * Reset this column's width-related state back to the values the
+     * factory created it with. Clears `userResized` so the grid track
+     * goes back to its flexible / fixed branch as originally configured.
+     * Used by the header resize handle's double-click to give consumers
+     * a single-action "restore default size" affordance.
+     */
+    resetWidth(): void;
     private _isResizing;
     /** Whether the resize handle is currently active. */
     get isResizing(): boolean;

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -36,9 +36,12 @@ export class ColumnDef {
         this.accessorFn = $derived(props.accessorFn);
         this._minSize = $state(props.minSize ?? 48);
         this._width = $state(props.width ?? props.minSize ?? 48);
+        this._originalWidth = props.width ?? props.minSize ?? 48;
         this._maxWidth = $state(props.maxWidth);
+        this._originalMaxWidth = props.maxWidth;
         this._wrapValue = $state(props.wrapValue ?? false);
         this._widthIsFixed = $state(props.widthIsFixed ?? false);
+        this._originalWidthIsFixed = props.widthIsFixed ?? false;
         this.isEditable = $derived(props.isEditable ?? (() => Promise.resolve(false)));
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
@@ -119,6 +122,26 @@ export class ColumnDef {
     set widthIsFixed(v) {
         this._widthIsFixed = v;
     }
+    // Snapshots of width / maxWidth / widthIsFixed taken at construction
+    // time. The user can revert any in-place mutation (drag-resize,
+    // programmatic write) back to these values via `resetWidth()`. They
+    // are plain fields (not `$state`) because they never change.
+    _originalWidth;
+    _originalMaxWidth;
+    _originalWidthIsFixed;
+    /**
+     * Reset this column's width-related state back to the values the
+     * factory created it with. Clears `userResized` so the grid track
+     * goes back to its flexible / fixed branch as originally configured.
+     * Used by the header resize handle's double-click to give consumers
+     * a single-action "restore default size" affordance.
+     */
+    resetWidth() {
+        this._width = this._originalWidth;
+        this._maxWidth = this._originalMaxWidth;
+        this._widthIsFixed = this._originalWidthIsFixed;
+        this._userResized = false;
+    }
     _isResizing = $state(false);
     /** Whether the resize handle is currently active. */
     get isResizing() {

package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts

@@ -14,6 +14,10 @@ import { AbstractDisplayDef, type AbstractDisplayDefProps } from './AbstractDisp
 export interface BubbleDefProps<T extends object, in FilterValueType, out FilterOptionsType> extends AbstractDisplayDefProps<T, FilterValueType, FilterOptionsType> {
     /** Per-bubble colour mapper. Invoked per bubble value per render. */
     getColour?: (item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>;
+    /** Maximum number of pills shown per cell before the overflow chip
+     *  kicks in. Pills beyond this cap are hidden and a single
+     *  `"+N more"` chip is rendered in their place. Defaults to 3. */
+    maxBubbles?: number;
 }
 /**
  * `BubbleDef<T, FilterValueType, FilterOptionsType>` renders the cell
@@ -29,4 +33,6 @@ export declare class BubbleDef<T extends object, in FilterValueType = StringFilt
     set filterFn(v: FilterFn<T, FilterValueType> | undefined);
     /** Per-bubble colour mapper. */
     readonly getColour: ((item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>) | undefined;
+    /** Cap on rendered pills before the overflow chip. */
+    readonly maxBubbles: number;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js

@@ -15,6 +15,7 @@ export class BubbleDef extends AbstractDisplayDef {
         // props.getColour re-derives the wrapper and discards the stale cache.
         this.getColour = $derived(memoiseRowValueAccessor(props.getColour));
         this._filterFn = $state(props.filterFn);
+        this.maxBubbles = $derived(props.maxBubbles ?? 3);
     }
     _filterFn;
     /** Filter predicate. Reassignable. */
@@ -26,4 +27,6 @@ export class BubbleDef extends AbstractDisplayDef {
     }
     /** Per-bubble colour mapper. */
     getColour;
+    /** Cap on rendered pills before the overflow chip. */
+    maxBubbles;
 }

package/dist/Components/Table/Types/Public/ColumnOptions.d.ts

@@ -208,6 +208,12 @@ export interface BubbleColumnOptions<TRow extends object, TValue = unknown> exte
      * supported (scoria internally wraps it in `Promise.resolve`).
      */
     getOptions?: () => ReadonlyArray<SelectOption<TValue>> | Promise<ReadonlyArray<SelectOption<TValue>>>;
+    /**
+     * Maximum number of pills rendered before they collapse into an
+     * overflow chip (`"+N more"`). Defaults to 3. Set a larger number
+     * to show more pills inline; set `Infinity` to disable the cap.
+     */
+    maxBubbles?: number;
 }
 /** Options for `col.progress({ header, value, ... })`. Renders a horizontal
  *  progress bar from a numeric ratio. */

package/dist/Components/Table/createTable.svelte.js

@@ -107,6 +107,44 @@ export function createTable(options) {
     if (options.initialState) {
         applyInitialState(ctx, options.initialState);
     }
+    // ── 9. Auto-pin structural columns ──────────────────────────────
+    // `col.actions` (the ellipsis menu) and `col.rowSelection` (the
+    // select-row checkbox) are conventionally pinned to the right and
+    // left respectively across every table in the app, so apply that
+    // pin automatically here. The caller can override either pin via
+    // `initialState.columnPinning` (which runs first above), or via
+    // the live `setColumnPinning` updater on the table context.
+    const autoPinLeft = new Map();
+    const autoPinRight = new Map();
+    for (const spec of specs) {
+        const d = specsById.get(spec.id);
+        if (!d) {
+            continue;
+        }
+        const def = unwrapColumnSpec(d).def;
+        if (spec.kind === 'actions') {
+            autoPinRight.set(spec.id, def.width);
+        }
+        else if (spec.kind === 'rowSelection') {
+            autoPinLeft.set(spec.id, def.width);
+        }
+    }
+    if (autoPinLeft.size > 0 || autoPinRight.size > 0) {
+        const current = ctx.columnPinning;
+        const nextLeft = new Map(current.left ?? []);
+        const nextRight = new Map(current.right ?? []);
+        for (const [id, width] of autoPinLeft) {
+            if (!nextLeft.has(id) && !nextRight.has(id)) {
+                nextLeft.set(id, width);
+            }
+        }
+        for (const [id, width] of autoPinRight) {
+            if (!nextLeft.has(id) && !nextRight.has(id)) {
+                nextRight.set(id, width);
+            }
+        }
+        ctx.columnPinning = { left: nextLeft, right: nextRight };
+    }
     // ── 9. Build the structured Table instance ─────────────────────
     const table = Object.freeze({
         get name() {

package/dist/scss/_mixins.scss

@@ -1866,19 +1866,22 @@
 	div.input-cell {
 		background-color: colours.$ui-blue-1;
 		height: var(--height);
-		overflow: visible;
+		// `overflow-x: clip` so a narrow filter cell's internal widget
+		// (select chevron, filter-mode funnel, etc.) cannot paint past
+		// the column boundary. The column-separator border now lives on
+		// the outer grid item (`.quick-filter-row > .cell` in
+		// `TableBody.svelte`), so clipping here keeps both the widget
+		// AND the cell's own background inside the track and the border
+		// stays visible. `overflow-y: visible` preserves the inline
+		// dropdown spillage for select / date popups.
+		overflow-x: clip;
+		overflow-y: visible;
 		padding-left: 0;
 		padding-right: 0;
-		// Reassert the column-separator border-right here so it survives
-		// even when a narrow select-filter cell's internal widget (the
-		// SingleSelect / MultiSelect dropdown trigger) paints flush to
-		// the right edge. Without this rule, two adjacent select filters
-		// visually merge because the inner widget's background covers
-		// the cell's table-cell-basic border. `!important` is here to
-		// override the more-specific .focusable rule from
-		// table-cell-basic that occasionally re-paints the right edge
-		// transparent during focus.
-		border-right: solid 1px colours.$ui-blue-4 !important;
+		// Inner widget no longer paints a border-right - the outer cell
+		// wrapper owns the column divider so adjacent filters cannot
+		// visually merge regardless of what the widget paints inside.
+		border-right: none;
 		box-sizing: border-box;
 
 		div.stick-right {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.19",
+  "version": "0.37.21",
   "publishConfig": {
     "access": "restricted"
   },