@ixfx/components 0.9.7 → 0.10.0

package/dist/{grid-list-CSw1VMXT.d.ts → grid-list-BGvoWbZz.d.ts}

@@ -1,7 +1,8 @@
-import { L as ListNativeDragStartEvent, P as ListDragPreviewRenderer } from "./tree-component-BW2iCFq9.js";
-import { S as ListSearchController } from "./index--qnhBWZJ.js";
+import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-mw8x-n2Y.js";
+import { S as ListSearchController } from "./index--5BSdbnL.js";
+import "./pan-text-CoYmt2qd.js";
 import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-B5ioL-dG.js";
-import "./list-native-drag-controller-Cmpx7jnx.js";
+import "./list-native-drag-controller-DWiXQZou.js";
 import { i as TickledItem, n as TickledController } from "./tickled-controller-C1ZsHpyg.js";
 import { LitElement, PropertyValues, ReactiveController, ReactiveControllerHost, html } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
@@ -365,70 +366,6 @@ interface GridListFullElementEventMap extends GridListElementEventMap {
   'list-native-drag-start': ListNativeDragStartEvent;
 }
 //#endregion
-//#region src/pan-text/pan-text.d.ts
-type PanTextMode = `hover` | `loop`;
-declare class PanTextElement extends LitElement {
-  direction: `start` | `end`;
-  disabled: boolean;
-  /**
-   * Interaction mode.
-   * - `hover` (default): pans once while hovered.
-   * - `loop`: pans repeatedly — dwell 2s at the end, reset to the start,
-   *   and pan again — until `stopLoop()` is called. Auto-starts when set.
-   */
-  mode: PanTextMode;
-  private _isOverflowing;
-  private _isHovering;
-  private _loopActive;
-  private _loopAtEnd;
-  private _textEl;
-  private _overflow;
-  private _resizeObserver;
-  private _loopTimer;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  firstUpdated(): void;
-  protected updated(changed: PropertyValues<this>): void;
-  /**
-   * Whether a loop pan is currently active (between `startLoop()` and `stopLoop()`).
-   */
-  get looping(): boolean;
-  /**
-   * Begin looping: pan to the end, dwell there for 2 seconds, reset to the
-   * start and pan again, repeating until `stopLoop()` is called. A no-op when
-   * `disabled`, when there is nothing to reveal, or under reduced-motion.
-   */
-  startLoop(): void;
-  /**
-   * Stop a loop started with `startLoop()` and snap back to the rest position.
-   */
-  stopLoop(): void;
-  private _prefersReducedMotion;
-  private _panDuration;
-  private _clearLoopTimer;
-  private _scheduleLoopPan;
-  private _onMouseEnter;
-  private _onMouseLeave;
-  /**
-   * Measures how far the slotted text overflows its container. The measurement
-   * is taken on the inner `.text` span (which clips with an ellipsis), not on
-   * the host — the host never overflows, so measuring it always yielded zero
-   * and the hover interaction never activated.
-   *
-   * Skipped while hovering, because the hover styles switch `.text` to
-   * `overflow: visible` and the measurement would collapse to zero mid-pan.
-   */
-  private _measure;
-  private _textStyle;
-  protected render(): import("lit").TemplateResult<1>;
-  static styles: import("lit").CSSResult[];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-pan-text': PanTextElement;
-  }
-}
-//#endregion
 //#region src/grid-list/grid-list.d.ts
 declare class GridListElement<T = unknown> extends LitElement {
   #private;
@@ -511,7 +448,31 @@ declare class GridListElement<T = unknown> extends LitElement {
    * as selection changes. Defaults to the shared built-in preview.
    */
   dragPreviewRenderer: ListDragPreviewRenderer<T> | undefined;
+  /**
+   * Optional synchronous resolver that supplies an already-loaded
+   * `CanvasImageSource` for each drag entry's preview thumbnail.
+   *
+   * Called before the default descendant-`<img>` lookup. Must return an
+   * already-decoded image (e.g. `<img>`, `<canvas>`, `<video>`, `ImageBitmap`)
+   * or `undefined`. Returning `undefined` defers to standard DOM discovery.
+   * The consumer owns the returned source and its lifetime.
+   *
+   * This allows consumers to provide images that live inside their own shadow
+   * roots or other encapsulated contexts without grid-list needing to
+   * traverse those boundaries.
+   */
+  dragPreviewSource: ListDragPreviewSourceResolver<T> | undefined;
   searchModes: string | undefined;
+  /**
+   * Opt-in scroll snapping for `row` / `column` orientations (no effect in
+   * `grid`). Cells are virtualized — only the visible window is ever in the
+   * DOM, absolutely positioned via transform — so native CSS
+   * `scroll-snap-type` can't be used (it can only snap to boxes that actually
+   * exist, and the snap target would pop in/out as the window shifts).
+   * Instead, once scrolling settles, the viewport is nudged with a smooth
+   * `scrollTo` to the nearest item/row boundary.
+   */
+  snapToItem: boolean;
   /**
    * Data items for data-backed mode. When set along with `itemAdapter`, the
    * component operates in data mode instead of element mode.
@@ -644,5 +605,5 @@ interface GridListElement {
   addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 }
 //#endregion
-export { ListSelectionModes as A, TreeKeyboardNavCallbacks as C, ListSelectionController as D, TreeKeyboardNavItemId as E, DragSelectRect as M, ListDragSelectController as N, ListSelectionControllerConfig as O, ListDragSelectControllerConfig as P, GridListViewportChangeEvent as S, TreeKeyboardNavControllerConfig as T, GridListSelectDetail as _, GridListActivateEvent as a, GridListTickleEvent as b, GridListCaptionPosition as c, GridListElementEventMap as d, GridListFullElementEventMap as f, GridListOrientation as g, GridListItemEventDetail as h, GridListActivateDetail as i, isMultiMode as j, ListSelectionGesture as k, GridListCaptionStyle as l, GridListItemClickEvent as m, PanTextElement as n, GridListCaptionAlign as o, GridListItemClickDetail as p, PanTextMode as r, GridListCaptionBackdrop as s, GridListElement as t, GridListDataAdapter as u, GridListSelectEvent as v, TreeKeyboardNavController as w, GridListViewportChangeDetail as x, GridListTickleDetail as y };
-//# sourceMappingURL=grid-list-CSw1VMXT.d.ts.map
+export { DragSelectRect as A, TreeKeyboardNavControllerConfig as C, ListSelectionGesture as D, ListSelectionControllerConfig as E, ListDragSelectControllerConfig as M, ListSelectionModes as O, TreeKeyboardNavController as S, ListSelectionController as T, GridListTickleDetail as _, GridListCaptionBackdrop as a, GridListViewportChangeEvent as b, GridListDataAdapter as c, GridListItemClickDetail as d, GridListItemClickEvent as f, GridListSelectEvent as g, GridListSelectDetail as h, GridListCaptionAlign as i, ListDragSelectController as j, isMultiMode as k, GridListElementEventMap as l, GridListOrientation as m, GridListActivateDetail as n, GridListCaptionPosition as o, GridListItemEventDetail as p, GridListActivateEvent as r, GridListCaptionStyle as s, GridListElement as t, GridListFullElementEventMap as u, GridListTickleEvent as v, TreeKeyboardNavItemId as w, TreeKeyboardNavCallbacks as x, GridListViewportChangeDetail as y };
+//# sourceMappingURL=grid-list-BGvoWbZz.d.ts.map

package/dist/grid-list-BGvoWbZz.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-list-BGvoWbZz.d.ts","names":[],"sources":["../src/interaction/list-drag-select-controller.ts","../src/interaction/list-selection-controller.ts","../src/interaction/tree-keyboard-controller.ts","../src/grid-list/types.ts","../src/grid-list/grid-list.ts"],"mappings":"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"}

package/dist/{grid-list-mL0GJTQR.js → grid-list-DSnYOGh7.js}

@@ -1,19 +1,19 @@
 import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { c as createElementListSearchAdapter, d as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-C05WjbZh.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-B0hWdbtM.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-D97TYjn1.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
 import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-BskmlA9t.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
+import "./pan-text-CqtvjPyK.js";
 import { LitElement, css, html } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { classMap } from "lit/directives/class-map.js";
 //#region src/grid-list/grid-list-source.ts
 const ITEM_SELECTOR$1 = `:scope > *`;
 const SYNTHETIC_PREFIX = `gl-auto-`;
@@ -234,236 +234,11 @@ var DataGridListSource = class {
 	}
 };
 //#endregion
-//#region src/pan-text/pan-text.ts
-const SPEED = 45;
-const END_PADDING = 4;
-const START_DELAY = 300;
-const END_DWELL = 2e3;
-const RESET_DURATION = 400;
-const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
-let PanTextElement = class PanTextElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.direction = `end`;
-		this.disabled = false;
-		this.mode = `hover`;
-		this._isOverflowing = false;
-		this._isHovering = false;
-		this._loopActive = false;
-		this._loopAtEnd = false;
-		this._overflow = 0;
-		this._resizeObserver = null;
-		this._loopTimer = 0;
-		this._onMouseEnter = () => {
-			this._isHovering = true;
-		};
-		this._onMouseLeave = () => {
-			this._isHovering = false;
-		};
-		this._measure = () => {
-			if (this._isHovering || this._loopAtEnd) return;
-			const el = this._textEl;
-			if (!el) return;
-			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
-			const overflowing = this._overflow > 0;
-			this.classList.toggle(`is-overflowing`, overflowing);
-			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
-			if (this._loopActive && this.mode === `loop` && !this.disabled && overflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
-			if (!overflowing && this._loopAtEnd) {
-				this._loopAtEnd = false;
-				this.requestUpdate();
-			}
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(() => this._measure());
-		this.addEventListener(`mouseenter`, this._onMouseEnter);
-		this.addEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._clearLoopTimer();
-		this._loopActive = false;
-		this._loopAtEnd = false;
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = null;
-		this.removeEventListener(`mouseenter`, this._onMouseEnter);
-		this.removeEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	firstUpdated() {
-		this._measure();
-		this._resizeObserver?.observe(this);
-		document.fonts?.ready.then(() => this._measure());
-		if (this.mode === `loop`) this.startLoop();
-	}
-	updated(changed) {
-		if (changed.has(`mode`)) {
-			if (this.mode === `loop`) this.startLoop();
-			else this.stopLoop();
-		}
-		if (changed.has(`disabled`) && this.disabled) this.stopLoop();
-		this._measure();
-	}
-	/**
-	* Whether a loop pan is currently active (between `startLoop()` and `stopLoop()`).
-	*/
-	get looping() {
-		return this._loopActive;
-	}
-	/**
-	* Begin looping: pan to the end, dwell there for 2 seconds, reset to the
-	* start and pan again, repeating until `stopLoop()` is called. A no-op when
-	* `disabled`, when there is nothing to reveal, or under reduced-motion.
-	*/
-	startLoop() {
-		if (this.disabled || this._prefersReducedMotion()) return;
-		this._loopActive = true;
-		this._loopAtEnd = false;
-		this.requestUpdate();
-		if (this._isOverflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
-	}
-	/**
-	* Stop a loop started with `startLoop()` and snap back to the rest position.
-	*/
-	stopLoop() {
-		if (!this._loopActive && !this._loopAtEnd && this._loopTimer === 0) return;
-		this._clearLoopTimer();
-		this._loopActive = false;
-		this._loopAtEnd = false;
-		this.requestUpdate();
-	}
-	_prefersReducedMotion() {
-		return globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches ?? false;
-	}
-	_panDuration() {
-		return Math.max(1.5, (this._overflow + END_PADDING) / SPEED);
-	}
-	_clearLoopTimer() {
-		if (this._loopTimer !== 0) {
-			clearTimeout(this._loopTimer);
-			this._loopTimer = 0;
-		}
-	}
-	_scheduleLoopPan(delay) {
-		this._clearLoopTimer();
-		this._loopTimer = window.setTimeout(() => {
-			this._loopTimer = 0;
-			if (!this._loopActive || this.disabled || !this._isOverflowing) return;
-			this._loopAtEnd = true;
-			this.requestUpdate();
-			const dwell = this._panDuration() * 1e3 + END_DWELL;
-			this._loopTimer = window.setTimeout(() => {
-				this._loopTimer = 0;
-				if (!this._loopActive) return;
-				this._loopAtEnd = false;
-				this.requestUpdate();
-				this._scheduleLoopPan(700);
-			}, dwell);
-		}, delay);
-	}
-	_textStyle() {
-		if (!this._isOverflowing) return ``;
-		const distance = this._overflow + END_PADDING;
-		const duration = Math.max(1.5, distance / SPEED);
-		const revealEnd = this.direction === `end`;
-		const restX = revealEnd ? 0 : -distance;
-		const hoverX = revealEnd ? -distance : 0;
-		if (this._loopActive && this.mode === `loop`) {
-			if (this._loopAtEnd) return [
-				`transform: translateX(${hoverX}px)`,
-				`transition: transform ${duration}s ${PAN_EASING}`,
-				`overflow: visible`,
-				`text-overflow: clip`
-			].join(`; `);
-			return [
-				`transform: translateX(${restX}px)`,
-				`transition: transform ${RESET_DURATION}ms ${PAN_EASING}`,
-				revealEnd ? `` : `overflow: visible; text-overflow: clip`
-			].filter(Boolean).join(`; `);
-		}
-		if (this._isHovering) return [
-			`transform: translateX(${hoverX}px)`,
-			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
-			`overflow: visible`,
-			`text-overflow: clip`
-		].join(`; `);
-		return [
-			`transform: translateX(${restX}px)`,
-			`transition: transform 400ms ${PAN_EASING}`,
-			revealEnd ? `` : `overflow: visible; text-overflow: clip`
-		].filter(Boolean).join(`; `);
-	}
-	render() {
-		const textClasses = {
-			"is-overflowing": this._isOverflowing,
-			"is-hovering": this._isHovering
-		};
-		return html`
-      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
-        <slot @slotchange=${this._measure}></slot>
-      </span>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, css`
-    /* Renders like plain inline text: no colours, border, padding or margin
-       of its own — it only adds the clipping needed to pan on hover. */
-    :host {
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      max-width: 100%;
-      box-sizing: border-box;
-      font: inherit;
-      color: inherit;
-    }
-
-    :host([disabled]) {
-      opacity: var(--disabled-opacity, 0.5);
-      pointer-events: none;
-    }
-
-    .text {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      will-change: transform;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .text {
-        transition: none !important;
-        transform: none !important;
-      }
-    }
-  `];
-	}
-};
-__decorate([property({
-	type: String,
-	attribute: `direction`
-})], PanTextElement.prototype, "direction", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `disabled`
-})], PanTextElement.prototype, "disabled", void 0);
-__decorate([property({
-	type: String,
-	attribute: `mode`,
-	reflect: true
-})], PanTextElement.prototype, "mode", void 0);
-__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
-__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
-__decorate([state()], PanTextElement.prototype, "_loopActive", void 0);
-__decorate([state()], PanTextElement.prototype, "_loopAtEnd", void 0);
-__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
-PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
-//#endregion
 //#region src/grid-list/grid-list.ts
 const ITEM_SELECTOR = `:scope > *`;
 const MIN_ITEM_SIZE = 16;
+/** How long scrolling must be idle before `snap-to-item` settles the viewport. */
+const SNAP_DEBOUNCE_MS = 120;
 /**
 * How long the host keeps the `[reflowing]` attribute after items are inserted
 * mid-list — long enough for the cell move-transition and the enter animation
@@ -558,6 +333,7 @@ let GridListElement = class GridListElement extends LitElement {
 		this.itemWrap = `stop`;
 		this.itemsDraggable = false;
 		this.marqueeFromCellBlank = false;
+		this.snapToItem = false;
 		this.items = [];
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
@@ -565,6 +341,7 @@ let GridListElement = class GridListElement extends LitElement {
 		this._viewportWidth = 0;
 		this.#viewportRef = createRef();
 		this.#scrollRaf = 0;
+		this.#snapTimer = 0;
 		this.#items = [];
 		this.#itemWrap = `stop`;
 		this.#entering = /* @__PURE__ */ new Set();
@@ -624,6 +401,7 @@ let GridListElement = class GridListElement extends LitElement {
 				rowHeight: this.#rowHeight()
 			}),
 			getRenderer: () => this.dragPreviewRenderer,
+			getDragPreviewSourceResolver: () => this.dragPreviewSource,
 			dispatch: (detail) => this._dispatch(`list-native-drag-start`, detail, true),
 			onActiveChange: (active, originKey) => {
 				this.#nativeDragging = active;
@@ -689,6 +467,7 @@ let GridListElement = class GridListElement extends LitElement {
 				this._scrollLeft = el.scrollLeft;
 				this.#emitViewportChange();
 			});
+			this.#scheduleSnap();
 		};
 		this._onKeyDown = (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
@@ -799,6 +578,7 @@ let GridListElement = class GridListElement extends LitElement {
       }
       .viewport {
         position: relative;
+        box-sizing: border-box;
         height: 100%;
         overflow-y: auto;
         overflow-x: hidden;
@@ -1104,6 +884,8 @@ let GridListElement = class GridListElement extends LitElement {
 	#resizeObserver;
 	#mutationObserver;
 	#scrollRaf;
+	/** Debounce handle for {@link snapToItem} — fires once scrolling settles. */
+	#snapTimer;
 	#items;
 	#itemWrap;
 	/** Items added mid-list that are still playing their enter animation. */
@@ -1310,6 +1092,7 @@ let GridListElement = class GridListElement extends LitElement {
 		this.#resizeObserver = void 0;
 		this.#mutationObserver?.disconnect();
 		this.#cancelScrollRaf();
+		this.#cancelSnapTimer();
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
@@ -2006,6 +1789,48 @@ let GridListElement = class GridListElement extends LitElement {
 			this.#scrollRaf = 0;
 		}
 	}
+	#cancelSnapTimer() {
+		if (this.#snapTimer !== 0) {
+			clearTimeout(this.#snapTimer);
+			this.#snapTimer = 0;
+		}
+	}
+	#scheduleSnap() {
+		if (!this.snapToItem || this.orientation !== `row` && this.orientation !== `column`) return;
+		this.#cancelSnapTimer();
+		this.#snapTimer = window.setTimeout(() => {
+			this.#snapTimer = 0;
+			this.#snapToNearestLine();
+		}, SNAP_DEBOUNCE_MS);
+	}
+	/**
+	* Settle the viewport on the nearest item (`row` orientation) or row
+	* (`column` orientation) boundary, using the same stride arithmetic as
+	* {@link computeGridWindow} — no DOM measurement needed since off-screen
+	* lines are never rendered.
+	*/
+	#snapToNearestLine() {
+		const vp = this.#viewportRef.value;
+		if (!vp) return;
+		const win = this.#currentWindow();
+		const horizontal = win.horizontal;
+		const stride = horizontal ? win.colStride : win.rowStride;
+		if (stride <= 0) return;
+		const offset = horizontal ? vp.scrollLeft : vp.scrollTop;
+		const extent = horizontal ? win.totalWidth : win.totalHeight;
+		const viewportExtent = horizontal ? this._viewportWidth : this._viewportHeight;
+		const maxScroll = Math.max(0, extent - viewportExtent);
+		const index = Math.round(offset / stride);
+		const target = Math.min(maxScroll, Math.max(0, index * stride));
+		if (Math.abs(target - offset) < .5) return;
+		vp.scrollTo(horizontal ? {
+			left: target,
+			behavior: `smooth`
+		} : {
+			top: target,
+			behavior: `smooth`
+		});
+	}
 	#onCellClick(e, key) {
 		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		this.selection.handleClick(key, e);
@@ -2091,11 +1916,17 @@ __decorate([property({
 	reflect: true
 })], GridListElement.prototype, "marqueeFromCellBlank", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "dragPreviewRenderer", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "dragPreviewSource", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
 	reflect: true
 })], GridListElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `snap-to-item`,
+	reflect: true
+})], GridListElement.prototype, "snapToItem", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "items", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "itemAdapter", void 0);
 __decorate([state()], GridListElement.prototype, "_scrollTop", void 0);
@@ -2104,6 +1935,6 @@ __decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
 __decorate([state()], GridListElement.prototype, "_viewportWidth", void 0);
 GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElement);
 //#endregion
-export { PanTextElement as n, GridListElement as t };
+export { GridListElement as t };
 
-//# sourceMappingURL=grid-list-mL0GJTQR.js.map
+//# sourceMappingURL=grid-list-DSnYOGh7.js.map