@lavalogic/scoria 0.37.43 → 0.37.45

package/dist/Helpers/dropdownPortal.d.ts

@@ -1,45 +1,35 @@
 /**
  * Portal helper for Svelecte-style dropdowns.
  *
- * Svelecte renders its `.sv_dropdown` element inline as a sibling of the
- * `.svelecte-control` trigger. That means the dropdown is clipped by
- * any ancestor with `overflow: hidden` / `overflow: auto`, sits below
- * any ancestor with a higher `z-index`, and is repositioned by any
- * `transform` / `filter` / `will-change: transform` on the way up to
- * the body.
+ * Svelecte renders its `.sv_dropdown` inline as a sibling of the
+ * `.svelecte-control` trigger, so the dropdown is clipped by ancestor
+ * overflow, sits below higher-z-index ancestors, and is repositioned by
+ * any `transform` / `filter` on the way up to the body. This helper fixes
+ * those without moving the element in the DOM.
  *
- * This helper does NOT move the dropdown in the DOM. Moving the
- * `.sv_dropdown` element to `document.body` (the original strategy)
- * broke Svelte 5's per-component event delegation: inline
- * `onmousedown` / `onclick` handlers declared in Svelecte's template
- * are dispatched by the app's root-level delegated listener, which
- * walks the live `parentNode` chain at dispatch time. Once the
- * dropdown was a sibling of the app root rather than a descendant,
- * the chain no longer reached the selection handler, so mouse clicks
- * silently did nothing (keyboard Enter still worked because that
- * path is wired on the input, not the dropdown).
+ * **Do NOT move the dropdown to `document.body`.** Svelte 5's root-level
+ * event delegation walks the live `parentNode` chain at dispatch time;
+ * if the dropdown is a sibling of the app root rather than a descendant
+ * of the mount target, Svelecte's inline `onmousedown` / `onclick` selection
+ * handlers never fire. Mouse selection silently breaks while keyboard Enter
+ * (wired on the input) keeps working, making the regression hard to spot.
  *
- * Instead, the helper:
+ * Instead, when the dropdown opens this helper:
  *
- *   1. Switches the dropdown to `position: fixed` and sets
- *      `top` / `left` / `width` / `bottom` from the trigger's
- *      `getBoundingClientRect()`, so it escapes ancestor
- *      `overflow: hidden` / `overflow: auto` clipping (which was
- *      the original motivation for portaling).
- *   2. Picks `top` vs `bottom` based on available space below vs
- *      above the trigger, so the dropdown auto-flips upwards when
- *      the trigger sits near the bottom of the viewport.
- *   3. Listens for capture-phase `scroll` events and for viewport
- *      `resize` events so the position tracks the trigger while
- *      the dropdown is open. Repositioning is rAF-throttled.
- *   4. Applies a very large `z-index` to the dropdown so it wins
- *      against the table's sticky-footer (`z-index: 10`) and
- *      pinned-column (`z-index: 5-11`) stacking layers. Note that
- *      `z-index` only competes within a shared stacking context;
- *      the dropdown's `position: fixed` + `z-index` makes it its
- *      own stacking context, but ancestor stacking contexts can
- *      still constrain it. See `_mixins.scss` `table-cell-svelecte`
- *      for the per-cell rules that avoid creating such ancestors.
+ *   1. Switches it to `position: fixed` and writes `top` / `left` / `width`
+ *      from the trigger's `getBoundingClientRect()`, escaping ancestor
+ *      overflow clipping.
+ *   2. Picks `top` vs `bottom` based on available viewport space, so the
+ *      dropdown flips upwards near the viewport bottom.
+ *   3. Listens (rAF-throttled) for capture-phase scroll + viewport resize
+ *      so the position tracks the trigger.
+ *   4. Sets a very large `z-index` on the dropdown AND lifts the dropdown's
+ *      nearest stacking-context ancestor for the lifetime of the open. The
+ *      lift is needed because z-index only competes inside the ancestor's
+ *      own stacking context: without it, a sibling sticky/isolated block
+ *      (the table footer, the table body) can paint over the dropdown
+ *      despite the dropdown's higher z-index. The lift is ref-counted so
+ *      two dropdowns sharing an ancestor coordinate cleanly.
  */
 export interface DropdownPortalOptions {
     /** The Svelecte root wrapper `<div class="svelecte">`. Used as the

package/dist/Helpers/dropdownPortal.js

@@ -1,72 +1,142 @@
 /**
  * Portal helper for Svelecte-style dropdowns.
  *
- * Svelecte renders its `.sv_dropdown` element inline as a sibling of the
- * `.svelecte-control` trigger. That means the dropdown is clipped by
- * any ancestor with `overflow: hidden` / `overflow: auto`, sits below
- * any ancestor with a higher `z-index`, and is repositioned by any
- * `transform` / `filter` / `will-change: transform` on the way up to
- * the body.
+ * Svelecte renders its `.sv_dropdown` inline as a sibling of the
+ * `.svelecte-control` trigger, so the dropdown is clipped by ancestor
+ * overflow, sits below higher-z-index ancestors, and is repositioned by
+ * any `transform` / `filter` on the way up to the body. This helper fixes
+ * those without moving the element in the DOM.
  *
- * This helper does NOT move the dropdown in the DOM. Moving the
- * `.sv_dropdown` element to `document.body` (the original strategy)
- * broke Svelte 5's per-component event delegation: inline
- * `onmousedown` / `onclick` handlers declared in Svelecte's template
- * are dispatched by the app's root-level delegated listener, which
- * walks the live `parentNode` chain at dispatch time. Once the
- * dropdown was a sibling of the app root rather than a descendant,
- * the chain no longer reached the selection handler, so mouse clicks
- * silently did nothing (keyboard Enter still worked because that
- * path is wired on the input, not the dropdown).
+ * **Do NOT move the dropdown to `document.body`.** Svelte 5's root-level
+ * event delegation walks the live `parentNode` chain at dispatch time;
+ * if the dropdown is a sibling of the app root rather than a descendant
+ * of the mount target, Svelecte's inline `onmousedown` / `onclick` selection
+ * handlers never fire. Mouse selection silently breaks while keyboard Enter
+ * (wired on the input) keeps working, making the regression hard to spot.
  *
- * Instead, the helper:
+ * Instead, when the dropdown opens this helper:
  *
- *   1. Switches the dropdown to `position: fixed` and sets
- *      `top` / `left` / `width` / `bottom` from the trigger's
- *      `getBoundingClientRect()`, so it escapes ancestor
- *      `overflow: hidden` / `overflow: auto` clipping (which was
- *      the original motivation for portaling).
- *   2. Picks `top` vs `bottom` based on available space below vs
- *      above the trigger, so the dropdown auto-flips upwards when
- *      the trigger sits near the bottom of the viewport.
- *   3. Listens for capture-phase `scroll` events and for viewport
- *      `resize` events so the position tracks the trigger while
- *      the dropdown is open. Repositioning is rAF-throttled.
- *   4. Applies a very large `z-index` to the dropdown so it wins
- *      against the table's sticky-footer (`z-index: 10`) and
- *      pinned-column (`z-index: 5-11`) stacking layers. Note that
- *      `z-index` only competes within a shared stacking context;
- *      the dropdown's `position: fixed` + `z-index` makes it its
- *      own stacking context, but ancestor stacking contexts can
- *      still constrain it. See `_mixins.scss` `table-cell-svelecte`
- *      for the per-cell rules that avoid creating such ancestors.
+ *   1. Switches it to `position: fixed` and writes `top` / `left` / `width`
+ *      from the trigger's `getBoundingClientRect()`, escaping ancestor
+ *      overflow clipping.
+ *   2. Picks `top` vs `bottom` based on available viewport space, so the
+ *      dropdown flips upwards near the viewport bottom.
+ *   3. Listens (rAF-throttled) for capture-phase scroll + viewport resize
+ *      so the position tracks the trigger.
+ *   4. Sets a very large `z-index` on the dropdown AND lifts the dropdown's
+ *      nearest stacking-context ancestor for the lifetime of the open. The
+ *      lift is needed because z-index only competes inside the ancestor's
+ *      own stacking context: without it, a sibling sticky/isolated block
+ *      (the table footer, the table body) can paint over the dropdown
+ *      despite the dropdown's higher z-index. The lift is ref-counted so
+ *      two dropdowns sharing an ancestor coordinate cleanly.
  */
 /**
- * Z-index applied to the open dropdown. Picked very high so the
- * dropdown sits above sticky table strips (`z 5-11` in the table
- * grid), the table footer (`z 10`), and the side-panel chrome, but
- * stays below modal overlays (`z 99999` in `Action`-based popovers).
+ * Z-index for the open dropdown. Above sticky table strips and the table
+ * footer, below modal overlays (`Action`-based popovers use `99999`).
  */
 const PORTAL_Z_INDEX = 99998;
 /**
- * Minimum free vertical space below the trigger before the dropdown
- * is flipped to open upwards. Picked to fit the default Svelecte
- * dropdown (six rows + search input + padding) plus a little air;
- * dropdowns with longer option lists will still scroll internally
- * inside their fixed-height box.
+ * Z-index applied to the dropdown's stacking-context ancestor while open.
+ * One below `PORTAL_Z_INDEX` so the dropdown still wins inside its own
+ * context, but high enough that the ancestor block paints above sibling
+ * stacking contexts (e.g. the sticky footer at `z-index: 10`, the body's
+ * `isolation: isolate` container).
+ */
+const STACKING_LIFT_Z_INDEX = 99997;
+/**
+ * Walk up from `el` and return the first ancestor that establishes a new
+ * CSS stacking context. The dropdown's z-index only competes inside this
+ * ancestor's context, so this is the element to lift. Stops at `body`.
+ */
+function findStackingContextAncestor(el) {
+    let current = el.parentElement;
+    while (current && current !== document.body) {
+        if (createsStackingContext(current)) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+/**
+ * True when the computed style of `el` establishes a new stacking context.
+ * Covers the cases scoria's tree actually produces (sticky / isolated
+ * strips, fixed popover ancestors). Not exhaustive against every CSS
+ * feature that triggers one — extend if a new case surfaces.
+ */
+function createsStackingContext(el) {
+    const cs = getComputedStyle(el);
+    if (cs.position === 'fixed' || cs.position === 'sticky') {
+        return true;
+    }
+    if ((cs.position === 'relative' || cs.position === 'absolute') &&
+        cs.zIndex !== 'auto') {
+        return true;
+    }
+    if (cs.isolation === 'isolate') {
+        return true;
+    }
+    if (cs.transform !== 'none') {
+        return true;
+    }
+    if (cs.filter !== 'none') {
+        return true;
+    }
+    if (cs.perspective !== 'none') {
+        return true;
+    }
+    if (cs.mixBlendMode !== 'normal') {
+        return true;
+    }
+    if (Number.parseFloat(cs.opacity) < 1) {
+        return true;
+    }
+    if (cs.willChange && cs.willChange !== 'auto') {
+        return true;
+    }
+    return false;
+}
+const raiseCounts = new WeakMap();
+function liftStackingContext(el) {
+    let info = raiseCounts.get(el);
+    if (!info) {
+        info = { count: 0, originalInlineZIndex: el.style.zIndex };
+        raiseCounts.set(el, info);
+        el.style.zIndex = String(STACKING_LIFT_Z_INDEX);
+    }
+    info.count++;
+    let released = false;
+    return () => {
+        if (released) {
+            return;
+        }
+        released = true;
+        const current = raiseCounts.get(el);
+        if (!current) {
+            return;
+        }
+        current.count--;
+        if (current.count <= 0) {
+            el.style.zIndex = current.originalInlineZIndex;
+            raiseCounts.delete(el);
+        }
+    };
+}
+/**
+ * Minimum free space below the trigger before the dropdown flips upwards.
+ * Sized for the default Svelecte dropdown (six rows + search + padding);
+ * longer lists scroll internally.
  */
 const FLIP_THRESHOLD_PX = 240;
 /**
- * Hard cap on the dropdown's open height, regardless of how much
- * vertical space the trigger leaves between itself and the viewport
- * edge. Matches Svelecte's own `--sv-dropdown-height` default (320px)
- * so a typical dropdown opens at a sensible "six rows plus search
- * input" size and only shrinks below that when the trigger is genuinely
- * close to the viewport edge.
+ * Cap on the dropdown's open height. Matches Svelecte's own
+ * `--sv-dropdown-height` default so typical dropdowns open at six rows plus
+ * search input and only shrink when the trigger is near a viewport edge.
  */
 const MAX_DROPDOWN_HEIGHT_PX = 320;
-/** Run a function on the next animation frame, coalescing repeat
- *  calls so we don't queue dozens of layout reads per scroll burst. */
+/** Run a function on the next animation frame, coalescing repeat calls so
+ *  we don't queue dozens of layout reads per scroll burst. */
 function rafThrottle(fn) {
     let handle = null;
     return {
@@ -109,6 +179,7 @@ export function attachDropdownPortal(options) {
         };
     }
     let isOpen = false;
+    let releaseStackingLift = null;
     const reposition = () => {
         if (!isOpen) {
             return;
@@ -125,13 +196,10 @@ export function attachDropdownPortal(options) {
         dropdown.style.minWidth = `${tr.width}px`;
         dropdown.style.maxWidth = `${tr.width}px`;
         dropdown.style.zIndex = String(PORTAL_Z_INDEX);
-        // Cap the dropdown height at `MAX_DROPDOWN_HEIGHT_PX` regardless
-        // of how much space the trigger has below / above it - we never
-        // want the dropdown to be as tall as the viewport just because
-        // the option list could fit. The `Math.max(..., 64)` floor
-        // stops the dropdown from collapsing to a single-row sliver
-        // when the trigger is genuinely pinned against the viewport
-        // edge; the inner scroll handles the rest.
+        // Cap at `MAX_DROPDOWN_HEIGHT_PX` so a long option list never paints
+        // at viewport height. The 64px floor keeps the dropdown legible when
+        // the trigger is pinned against a viewport edge; the inner scroll
+        // handles the rest.
         const availableHeightPx = openUp
             ? Math.min(MAX_DROPDOWN_HEIGHT_PX, Math.max(spaceAbove - 8, 64))
             : Math.min(MAX_DROPDOWN_HEIGHT_PX, Math.max(spaceBelow - 8, 64));
@@ -144,22 +212,11 @@ export function attachDropdownPortal(options) {
             dropdown.style.bottom = '';
         }
         dropdown.style.maxHeight = `${availableHeightPx}px`;
-        // Svelecte's inner `.sv-dropdown-scroll` element has its own
-        // `max-height: var(--sv-dropdown-height, 320px); overflow-y:
-        // auto` rule, AND the outer `.sv_dropdown` element has
-        // `overflow-y: auto` by default. When the trigger is near the
-        // viewport edge our outer `max-height` is forced below 320px,
-        // so both ended up with their own scrollbars (the visible "two
-        // scrollbars stacked" symptom). Two complementary fixes:
-        //   1. Override `--sv-dropdown-height` to match the outer's
-        //      max-height so the inner scroll container shrinks in
-        //      lockstep instead of staying at its 320px default.
-        //   2. Force the outer to `overflow: hidden` so even if the
-        //      inner's actual rendered height nudges a pixel or two
-        //      past the outer's content box (border / padding
-        //      rounding), the outer doesn't sprout its own scrollbar
-        //      on top of the inner's. The inner remains the single
-        //      scroll surface.
+        // Svelecte's outer `.sv_dropdown` and inner `.sv-dropdown-scroll`
+        // both default to scrolling, so when the outer's max-height is
+        // forced below the inner's 320px default the user sees two stacked
+        // scrollbars. Sync the inner's CSS variable to the outer's height
+        // and hide the outer's overflow so only the inner scrolls.
         dropdown.style.setProperty('--sv-dropdown-height', `${availableHeightPx}px`);
         dropdown.style.overflow = 'hidden';
     };
@@ -175,6 +232,15 @@ export function attachDropdownPortal(options) {
             return;
         }
         isOpen = true;
+        // Lift the dropdown's stacking-context ancestor so the whole block
+        // paints above sibling stacking contexts. Resolved from `trigger`
+        // rather than `dropdown` because `position: fixed` makes the
+        // dropdown its own stacking context — we want to lift the
+        // surrounding sticky / isolated strip, not the dropdown itself.
+        const stackingAncestor = findStackingContextAncestor(trigger);
+        if (stackingAncestor) {
+            releaseStackingLift = liftStackingContext(stackingAncestor);
+        }
         dropdown.style.display = '';
         dropdown.setAttribute('data-scoria-portal-dropdown', '');
         reposition();
@@ -189,6 +255,10 @@ export function attachDropdownPortal(options) {
         throttled.cancel();
         window.removeEventListener('scroll', handleScroll, { capture: true });
         window.removeEventListener('resize', handleResize);
+        if (releaseStackingLift) {
+            releaseStackingLift();
+            releaseStackingLift = null;
+        }
         dropdown.style.position = '';
         dropdown.style.top = '';
         dropdown.style.left = '';

package/dist/Types/Examples/ExampleModal.svelte

@@ -1,39 +1,39 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import DesktopModal from '../../Components/DesktopModal.svelte';
-	import { cssLength } from '../../Helpers/Helpers.svelte.js';
-	import Switch from '../../Components/Switch.svelte';
-	import type { DisplayModalProps } from '../../Components/Table/Types/Public/ColumnOptions.js';
-	import type { ExampleItem } from './ExampleItem.js';
-
-	const { row, close }: DisplayModalProps<ExampleItem> = $props();
-</script>
-
-<DesktopModal
-	width={cssLength('1220px')}
-	headerLabel="Hello World"
-	onclose={close}
-	onsubmit={close}
-	buttons={[{ label: 'Close', callback: close }]}
->
-	<div class="wrapper">
-		This is an Example modal where you can do additional work through the `row` prop or a custom
-		context.
-		<div>
-			<Switch
-				label="{row.id} checked?"
-				value={row.isChecked}
-				onchange={() => {
-					row.isChecked = !row.isChecked;
-				}}
-			/>
-		</div>
-	</div>
-</DesktopModal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import DesktopModal from '../../Components/DesktopModal.svelte';
+	import { cssLength } from '../../Helpers/Helpers.svelte.js';
+	import Switch from '../../Components/Switch.svelte';
+	import type { DisplayModalProps } from '../../Components/Table/Types/Public/ColumnOptions.js';
+	import type { ExampleItem } from './ExampleItem.js';
+
+	const { row, close }: DisplayModalProps<ExampleItem> = $props();
+</script>
+
+<DesktopModal
+	width={cssLength('1220px')}
+	headerLabel="Hello World"
+	onclose={close}
+	onsubmit={close}
+	buttons={[{ label: 'Close', callback: close }]}
+>
+	<div class="wrapper">
+		This is an Example modal where you can do additional work through the `row` prop or a custom
+		context.
+		<div>
+			<Switch
+				label="{row.id} checked?"
+				value={row.isChecked}
+				onchange={() => {
+					row.isChecked = !row.isChecked;
+				}}
+			/>
+		</div>
+	</div>
+</DesktopModal>
+
 <style>.wrapper div {
   box-sizing: border-box;
   margin-top: 1rem;
   width: 300px;
-}</style>
+}</style>

package/dist/index.d.ts

@@ -103,7 +103,6 @@ export { type SwitchProps } from './Components/SwitchProps.js';
 export type { TabGroupButtonProps } from './Components/TabGroupButtonProps.js';
 export { default as Table, type TableProps } from './Components/Table/Table.svelte';
 export { createTable, customRows, localRows, remoteRows, } from './Components/Table/createTable.svelte.js';
-export type { ColumnSpecInternals } from './Components/Table/ColumnFactory.svelte.js';
 export type { ActionsColumnOptions, AnyEditEvent, BaseColumnOptions, BooleanKeyOf, BubbleColumnOptions, CheckboxColumnOptions, ClipboardApi, ColumnFactory as TableColumnFactory, ColumnKind, ColumnSpec, ColumnsApi, CreateTableOptions, CustomRowSource, DateColumnOptions, DateKeyOf, DisplayColumnOptions, DisplayModalProps, ExpandColumnOptions, ExpandInnerTableOptions, FilterOnlyColumnOptions, FilteringApi, FocusApi, LiteralRowIdKey, LocalRowSource, ModalApi, NumberColumnOptions, NumberKeyOf, PaginationApi, PreferencesApi, ProgressColumnOptions, QueryColumnOptions, RemoteRowSource, RowAction, RowFetchRequest, RowFetchResponse, RowSelectionColumnOptions, RowSource, SavedPreset, SelectColumnOptions, SelectionApi, SelectionOptions, SortingApi, StringKeyOf, Table as TableInstance, TableInitialState, TablePersistence, TablePersistenceObject, TableStorageAdapter, TextColumnOptions, ValidityColumnOptions, } from './Components/Table/Types/Public/index.js';
 export { type CellCoordinates } from './Components/Table/Types/Coordinates/CellCoordinates.js';
 export { type ColumnPinningState } from './Components/Table/Types/Columns/ColumnPinningState.js';

package/dist/scss/_basics.scss

@@ -1,12 +1,12 @@
-@use './colours.scss';
-
-//border
-$border: solid 1px colours.$ui-blue-4;
-$border-mid: solid 2px colours.$ui-blue-4;
-$border-thick: solid 3px colours.$ui-blue-4;
-
-//box-shadow
-$table-focus: 0px 0px 1px 1px colours.$brand-primary inset;
-
-$box-shadow: 0px 0px 5px 0px #0002;
-$error-box-shadow: 0px 0px 5px 0px #aa141422;
+@use './colours.scss';
+
+//border
+$border: solid 1px colours.$ui-blue-4;
+$border-mid: solid 2px colours.$ui-blue-4;
+$border-thick: solid 3px colours.$ui-blue-4;
+
+//box-shadow
+$table-focus: 0px 0px 1px 1px colours.$brand-primary inset;
+
+$box-shadow: 0px 0px 5px 0px #0002;
+$error-box-shadow: 0px 0px 5px 0px #aa141422;