@ixfx/components 0.5.19 → 0.6.0

package/dist/{tickled-styles-fNDdqf6l.js → tickled-controller-DkAU-0qL.js}

@@ -1,4 +1,3 @@
-import { css } from "lit";
 //#region src/interaction/tickled-controller.ts
 /**
 * ReactiveController that manages "tickled" state for interactive lists.
@@ -15,10 +14,11 @@ import { css } from "lit";
 *
 * ## Global Mouse Tracking
 *
-* This controller uses a singleton global `pointermove` listener to track actual
-* mouse movement. This prevents `pointerenter` events caused by content scrolling
-* from incorrectly switching to mouse mode when the user is actually using keyboard
-* navigation.
+* This controller uses a single, ref-counted global `pointermove` listener (shared
+* across all instances) to track actual mouse movement. This prevents `pointerenter`
+* events caused by content scrolling from incorrectly switching to mouse mode when
+* the user is actually using keyboard navigation. The listener is attached when the
+* first host connects and removed once the last host disconnects.
 *
 * @example
 * ```ts
@@ -65,7 +65,12 @@ var TickledController = class TickledController {
 		this._mouseMovedSinceKeyboard = true;
 	}
 	static {
-		this._globalListenerAttached = false;
+		this._listenerRefCount = 0;
+	}
+	static {
+		this._onGlobalPointerMove = (e) => {
+			TickledController.handleGlobalPointerMove(e.clientX, e.clientY);
+		};
 	}
 	constructor(host, config) {
 		this._tickledId = void 0;
@@ -75,14 +80,13 @@ var TickledController = class TickledController {
 		host.addController(this);
 	}
 	hostConnected() {
-		if (!TickledController._globalListenerAttached) {
-			document.addEventListener(`pointermove`, (e) => {
-				TickledController.handleGlobalPointerMove(e.clientX, e.clientY);
-			}, { passive: true });
-			TickledController._globalListenerAttached = true;
-		}
+		if (TickledController._listenerRefCount === 0) document.addEventListener(`pointermove`, TickledController._onGlobalPointerMove, { passive: true });
+		TickledController._listenerRefCount++;
+	}
+	hostDisconnected() {
+		TickledController._listenerRefCount--;
+		if (TickledController._listenerRefCount === 0) document.removeEventListener(`pointermove`, TickledController._onGlobalPointerMove);
 	}
-	hostDisconnected() {}
 	/**
 	* Get the current input mode
 	*/
@@ -216,96 +220,6 @@ var TickledController = class TickledController {
 	}
 };
 //#endregion
-//#region src/interaction/tickled-styles.ts
-/**
-* Shared CSS styles for tickled interaction pattern.
-*
-* Tickled state is controlled via the `.tickled` CSS class (applied by TickledController).
-* The `tickledItemStyles` provides base styling that all tickled components should use.
-*
-* ## CSS Variable Contract
-*
-* **Style variables (default values defined in `tickledItemStyles`):**
-* - `--item-bg`: Default background (default: transparent)
-* - `--item-bg-tickled`: Background when tickled (default: rgba(0, 0, 0, 0.06))
-* - `--item-bg-selected`: Background when selected (default: rgba(25, 118, 210, 1))
-* - `--item-bg-selected-tickled`: Background when selected AND tickled (default: rgba(21, 101, 192, 1))
-* - `--item-border`: Border style (default: 1px solid transparent)
-* - `--item-border-tickled`: Border when tickled (default: 1px solid var(--accent))
-* - `--item-border-selected`: Border when selected (default: 1px solid rgba(25, 118, 210, 1))
-* - `--item-text-tickled`: Text color when tickled (default: inherit)
-* - `--item-text-selected`: Text color when selected (default: #fff)
-* - `--item-padding`: Item padding (default: 4px 8px)
-* - `--item-border-radius`: Border radius (default: 4px)
-* - `--item-icon-spacing`: Gap between icon and text (default: 4px)
-*
-* ## Usage
-*
-* Components should import both `tickledStyles` and `tickledItemStyles`:
-*
-* ```ts
-* import { tickledStyles, tickledItemStyles } from '../interaction/index.js';
-*
-* class MyComponent extends LitElement {
-*   static styles = [
-*     tickledStyles,
-*     tickledItemStyles,
-*     css`
-*       :host {
-*         --item-bg-tickled: #e0e0e0;
-*         --item-bg-selected: #1976d2;
-*       }
-*     `
-*   ];
-* }
-* ```
-*/
-const tickledStyles = css`
-  /**
-   * No suppression needed - tickled styling is always active.
-   */
-`;
-/**
-* Shared item styling for tickled components.
-*
-* Provides base styles for interactive items with tickled and selected states.
-* Components should import this in addition to `tickledStyles` and can override
-* CSS variables to customize appearance.
-*/
-const tickledItemStyles = css`
-  .item {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--item-icon-spacing);
-    padding: var(--item-padding);
-    background: var(--item-bg);
-    border: var(--item-border);
-    border-radius: var(--item-border-radius);
-    cursor: pointer;
-    user-select: none;
-    white-space: nowrap;
-    transition: background var(--transition, 0.1s ease-out), border-color var(--transition, 0.1s ease-out);
-  }
-
-  .item.tickled {
-    background: var(--item-bg-tickled);
-    border-color: var(--item-border-tickled);
-    color: var(--item-text-tickled);
-  }
-
-  .item.selected {
-    background: var(--item-bg-selected);
-    border-color: var(--item-border-selected);
-    color: var(--item-text-selected);
-  }
-
-  .item.selected.tickled {
-    background: var(--item-bg-selected-tickled);
-    outline: 2px dashed var(--surface-3);
-    outline-offset: -2px;
-  }
-`;
-//#endregion
-export { tickledStyles as n, TickledController as r, tickledItemStyles as t };
+export { TickledController as t };
 
-//# sourceMappingURL=tickled-styles-fNDdqf6l.js.map
+//# sourceMappingURL=tickled-controller-DkAU-0qL.js.map

package/dist/tickled-controller-DkAU-0qL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tickled-controller-DkAU-0qL.js","names":[],"sources":["../src/interaction/tickled-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Represents an item that can be tickled (highlighted via hover or keyboard navigation)\n */\nexport type TickledItem<T = unknown> = {\n  /**\n   * Unique identifier for the item (e.g., index, id, path)\n   */\n  readonly id: T;\n\n  /**\n   * Whether the item is currently enabled/interactive\n   */\n  readonly enabled?: boolean;\n};\n\n/**\n * Input mode determines which mechanism controls the tickled state\n */\nexport type InputMode = `keyboard` | `mouse`;\n\n/**\n * Configuration for TickledController\n */\nexport type TickledControllerConfig<T> = {\n  /**\n   * Function to retrieve all items that can be tickled\n   */\n  getItems: () => ReadonlyArray<TickledItem<T>>;\n\n  /**\n   * Optional callback when an item becomes tickled\n   * Use this for side effects like opening submenus\n   * @param id - The id of the newly tickled item, or undefined if nothing is tickled\n   */\n  onTickle?: (id: T | undefined) => void;\n\n  /**\n   * Optional callback fired after any state change (tickled id or input mode)\n   * Use this to sync DOM attributes for slotted content that can't use reactive rendering\n   *\n   * For components that render items directly, this is usually not needed as\n   * Lit's reactive rendering will handle updates automatically via requestUpdate()\n   *\n   * @example\n   * ```ts\n   * onStateChange: () => {\n   *   // Sync data-tickled attributes for slotted items\n   *   const items = this.getItems();\n   *   items.forEach((item, i) => {\n   *     if (this.tickled.isTickled(i)) {\n   *       item.setAttribute('data-tickled', '');\n   *     } else {\n   *       item.removeAttribute('data-tickled');\n   *     }\n   *   });\n   * }\n   * ```\n   */\n  onStateChange?: () => void;\n\n  /**\n   * Optional initial input mode (defaults to 'mouse')\n   */\n  initialInputMode?: InputMode;\n};\n\n/**\n * ReactiveController that manages \"tickled\" state for interactive lists.\n *\n * A \"tickled\" item is one that is under active attention via hover (mouse mode)\n * or keyboard focus (keyboard mode). Only one item can be tickled at a time.\n *\n * The input mode determines which mechanism controls tickled state:\n * - Mouse mode: hover controls tickled, keyboard navigation ignored\n * - Keyboard mode: keyboard navigation controls tickled, hover ignored\n *\n * Last interaction wins - any mouse hover switches to mouse mode, any keyboard\n * navigation switches to keyboard mode.\n *\n * ## Global Mouse Tracking\n *\n * This controller uses a single, ref-counted global `pointermove` listener (shared\n * across all instances) to track actual mouse movement. This prevents `pointerenter`\n * events caused by content scrolling from incorrectly switching to mouse mode when\n * the user is actually using keyboard navigation. The listener is attached when the\n * first host connects and removed once the last host disconnects.\n *\n * @example\n * ```ts\n * class MyList extends LitElement {\n *   private tickled = new TickledController(this, {\n *     getItems: () => this.items.map((item, i) => ({ id: i, enabled: !item.disabled })),\n *     onTickle: (id) => {\n *       // Optional: perform side effect when item is tickled\n *       console.log('Tickled item:', id);\n *     }\n *   });\n *\n *   render() {\n *     return html`\n *       <ul @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}>\n *         ${this.items.map((item, i) => html`\n *           <li\n *             class=\"item ${this.tickled.isTickled(i) ? 'tickled' : ''}\"\n *             @pointerenter=${() => this.tickled.handlePointerEnter(i)}\n *           >${item.label}</li>\n *         `)}\n *       </ul>\n *     `;\n *   }\n *\n *   private handleKeyDown(e: KeyboardEvent) {\n *     if (e.key === 'ArrowDown') {\n *       this.tickled.handleKeyboardNavigation('next');\n *     } else if (e.key === 'ArrowUp') {\n *       this.tickled.handleKeyboardNavigation('previous');\n *     }\n *   }\n * }\n * ```\n */\nexport class TickledController<T = number> implements ReactiveController {\n  private host: ReactiveControllerHost;\n  private config: TickledControllerConfig<T>;\n  private _tickledId: T | undefined = undefined;\n  private _inputMode: InputMode;\n\n  private static _lastMouseClientX: number = Number.NaN;\n  private static _lastMouseClientY: number = Number.NaN;\n  private static _mouseMovedSinceKeyboard: boolean = true;\n  private static _listenerRefCount: number = 0;\n\n  private static readonly _onGlobalPointerMove = (e: PointerEvent): void => {\n    TickledController.handleGlobalPointerMove(e.clientX, e.clientY);\n  };\n\n  constructor(host: ReactiveControllerHost, config: TickledControllerConfig<T>) {\n    this.host = host;\n    this.config = config;\n    this._inputMode = config.initialInputMode ?? `mouse`;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    if (TickledController._listenerRefCount === 0) {\n      document.addEventListener(`pointermove`, TickledController._onGlobalPointerMove, { passive: true });\n    }\n    TickledController._listenerRefCount++;\n  }\n\n  hostDisconnected(): void {\n    TickledController._listenerRefCount--;\n    if (TickledController._listenerRefCount === 0) {\n      document.removeEventListener(`pointermove`, TickledController._onGlobalPointerMove);\n    }\n  }\n\n  /**\n   * Get the current input mode\n   */\n  get inputMode(): InputMode {\n    return this._inputMode;\n  }\n\n  /**\n   * Get the currently tickled item id\n   */\n  get tickledId(): T | undefined {\n    return this._tickledId;\n  }\n\n  /**\n   * Check if a specific item is tickled\n   */\n  isTickled(id: T): boolean {\n    return this._tickledId === id;\n  }\n\n  /**\n   * Handle global pointer move event.\n   * Called automatically by the global listener.\n   * Tracks mouse movement to distinguish real hover from content scrolling.\n   */\n  private static handleGlobalPointerMove(clientX: number, clientY: number): void {\n    if (!Number.isNaN(TickledController._lastMouseClientX)) {\n      if (\n        clientX !== TickledController._lastMouseClientX\n        || clientY !== TickledController._lastMouseClientY\n      ) {\n        TickledController._mouseMovedSinceKeyboard = true;\n      }\n    }\n    TickledController._lastMouseClientX = clientX;\n    TickledController._lastMouseClientY = clientY;\n  }\n\n  /**\n   * Check if actual mouse movement has occurred since last keyboard interaction.\n   * Used to distinguish real hover/leave from content-scrolling-induced events.\n   */\n  static get hasMouseMovedSinceKeyboard(): boolean {\n    return TickledController._mouseMovedSinceKeyboard;\n  }\n\n  /**\n   * Handle pointer enter event on an item (mouse hover).\n   * Only processes if actual mouse movement is detected (not content scrolling).\n   * Switches to mouse mode and tickles the item.\n   */\n  handlePointerEnter(id: T): void {\n    if (!TickledController._mouseMovedSinceKeyboard) {\n      return;\n    }\n\n    const items = this.config.getItems();\n    const item = items.find(item => item.id === id);\n    if (item && item.enabled === false) {\n      return;\n    }\n\n    const modeChanged = this._inputMode !== `mouse`;\n    this._inputMode = `mouse`;\n\n    const previousId = this._tickledId;\n    this._tickledId = id;\n\n    this.host.requestUpdate();\n\n    if (previousId !== id && this.config.onTickle) {\n      this.config.onTickle(id);\n    }\n\n    if ((previousId !== id || modeChanged) && this.config.onStateChange) {\n      this.config.onStateChange();\n    }\n  }\n\n  /**\n   * Handle pointer leave event on an item.\n   * Only clears tickled state if actual mouse movement is detected.\n   * @param _e The pointer event (not used, but kept for API compatibility)\n   */\n  handlePointerLeave(_e: PointerEvent): void {\n    if (TickledController._mouseMovedSinceKeyboard) {\n      this.clearTickled();\n    }\n  }\n\n  /**\n   * Handle keyboard navigation.\n   * Switches to keyboard mode and moves tickled state.\n   *\n   * @param direction - 'next', 'previous', 'first', 'last', or specific id\n   */\n  handleKeyboardNavigation(direction: `next` | `previous` | `first` | `last` | T): void {\n    const modeChanged = this._inputMode !== `keyboard`;\n    this._inputMode = `keyboard`;\n\n    const items = this.config.getItems();\n    const enabledItems = items.filter(item => item.enabled !== false);\n\n    if (enabledItems.length === 0) {\n      return;\n    }\n\n    let newId: T | undefined;\n\n    if (direction === `first`) {\n      newId = enabledItems[0].id;\n    } else if (direction === `last`) {\n      newId = enabledItems.at(-1)?.id;\n    } else if (direction === `next` || direction === `previous`) {\n      const currentIndex = enabledItems.findIndex(item => item.id === this._tickledId);\n\n      if (currentIndex === -1) {\n        newId = direction === `next` ? enabledItems[0].id : enabledItems.at(-1)?.id;\n      } else {\n        const delta = direction === `next` ? 1 : -1;\n        const newIndex = currentIndex + delta;\n\n        if (newIndex >= 0 && newIndex < enabledItems.length) {\n          newId = enabledItems[newIndex].id;\n        }\n        // If newIndex is out of bounds, keep current tickled item\n      }\n    } else {\n      const item = enabledItems.find(item => item.id === direction);\n      if (item) {\n        newId = item.id;\n      }\n    }\n\n    if (newId !== undefined) {\n      const previousId = this._tickledId;\n      this._tickledId = newId;\n      this.host.requestUpdate();\n\n      if (previousId !== newId && this.config.onTickle) {\n        this.config.onTickle(newId);\n      }\n\n      if ((previousId !== newId || modeChanged) && this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n\n  /**\n   * Manually set the tickled item (useful for programmatic control).\n   * Does NOT change input mode.\n   */\n  setTickled(id: T | undefined): void {\n    const previousId = this._tickledId;\n    this._tickledId = id;\n    this.host.requestUpdate();\n\n    if (previousId !== id && this.config.onTickle) {\n      this.config.onTickle(id);\n    }\n\n    if (previousId !== id && this.config.onStateChange) {\n      this.config.onStateChange();\n    }\n  }\n\n  /**\n   * Clear the tickled state (e.g., on pointer leave).\n   * Note: For pointer leave events, prefer using handlePointerLeave() which\n   * checks for actual mouse movement.\n   */\n  clearTickled(): void {\n    if (this._tickledId !== undefined) {\n      this._tickledId = undefined;\n      this.host.requestUpdate();\n\n      if (this.config.onTickle) {\n        this.config.onTickle(undefined);\n      }\n\n      if (this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n\n  /**\n   * Manually set the input mode.\n   * When switching to keyboard mode, resets the mouse movement tracking.\n   */\n  setInputMode(mode: InputMode): void {\n    if (this._inputMode !== mode) {\n      this._inputMode = mode;\n      this.host.requestUpdate();\n\n      if (mode === `keyboard`) {\n        TickledController._mouseMovedSinceKeyboard = false;\n      }\n\n      if (this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2HA,IAAa,oBAAb,MAAa,kBAA4D;;EAM5B,KAAA,oBAAA;;;EACA,KAAA,oBAAA;;;EACQ,KAAA,2BAAA;;;EACR,KAAA,oBAAA;;;EAEK,KAAA,wBAAA,MAA0B;GACxE,kBAAkB,wBAAwB,EAAE,SAAS,EAAE,OAAO;EAChE;;CAEA,YAAY,MAA8B,QAAoC;EAZ1C,KAAA,aAAA,KAAA;EAalC,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,aAAa,OAAO,oBAAoB;EAC7C,KAAK,cAAc,IAAI;CACzB;CAEA,gBAAsB;EACpB,IAAI,kBAAkB,sBAAsB,GAC1C,SAAS,iBAAiB,eAAe,kBAAkB,sBAAsB,EAAE,SAAS,KAAK,CAAC;EAEpG,kBAAkB;CACpB;CAEA,mBAAyB;EACvB,kBAAkB;EAClB,IAAI,kBAAkB,sBAAsB,GAC1C,SAAS,oBAAoB,eAAe,kBAAkB,oBAAoB;CAEtF;;;;CAKA,IAAI,YAAuB;EACzB,OAAO,KAAK;CACd;;;;CAKA,IAAI,YAA2B;EAC7B,OAAO,KAAK;CACd;;;;CAKA,UAAU,IAAgB;EACxB,OAAO,KAAK,eAAe;CAC7B;;;;;;CAOA,OAAe,wBAAwB,SAAiB,SAAuB;EAC7E,IAAI,CAAC,OAAO,MAAM,kBAAkB,iBAAiB,GAEjD;OAAA,YAAY,kBAAkB,qBAC3B,YAAY,kBAAkB,mBAEjC,kBAAkB,2BAA2B;EAAA;EAGjD,kBAAkB,oBAAoB;EACtC,kBAAkB,oBAAoB;CACxC;;;;;CAMA,WAAW,6BAAsC;EAC/C,OAAO,kBAAkB;CAC3B;;;;;;CAOA,mBAAmB,IAAa;EAC9B,IAAI,CAAC,kBAAkB,0BACrB;EAIF,MAAM,OADQ,KAAK,OAAO,SACT,CAAC,CAAC,MAAK,SAAQ,KAAK,OAAO,EAAE;EAC9C,IAAI,QAAQ,KAAK,YAAY,OAC3B;EAGF,MAAM,cAAc,KAAK,eAAe;EACxC,KAAK,aAAa;EAElB,MAAM,aAAa,KAAK;EACxB,KAAK,aAAa;EAElB,KAAK,KAAK,cAAc;EAExB,IAAI,eAAe,MAAM,KAAK,OAAO,UACnC,KAAK,OAAO,SAAS,EAAE;EAGzB,KAAK,eAAe,MAAM,gBAAgB,KAAK,OAAO,eACpD,KAAK,OAAO,cAAc;CAE9B;;;;;;CAOA,mBAAmB,IAAwB;EACzC,IAAI,kBAAkB,0BACpB,KAAK,aAAa;CAEtB;;;;;;;CAQA,yBAAyB,WAA6D;EACpF,MAAM,cAAc,KAAK,eAAe;EACxC,KAAK,aAAa;EAGlB,MAAM,eADQ,KAAK,OAAO,SACD,CAAC,CAAC,QAAO,SAAQ,KAAK,YAAY,KAAK;EAEhE,IAAI,aAAa,WAAW,GAC1B;EAGF,IAAI;EAEJ,IAAI,cAAc,SAChB,QAAQ,aAAa,EAAE,CAAC;OACnB,IAAI,cAAc,QACvB,QAAQ,aAAa,GAAG,EAAE,CAAC,EAAE;OACxB,IAAI,cAAc,UAAU,cAAc,YAAY;GAC3D,MAAM,eAAe,aAAa,WAAU,SAAQ,KAAK,OAAO,KAAK,UAAU;GAE/E,IAAI,iBAAiB,IACnB,QAAQ,cAAc,SAAS,aAAa,EAAE,CAAC,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE;QACpE;IAEL,MAAM,WAAW,gBADH,cAAc,SAAS,IAAI;IAGzC,IAAI,YAAY,KAAK,WAAW,aAAa,QAC3C,QAAQ,aAAa,SAAS,CAAC;GAGnC;EACF,OAAO;GACL,MAAM,OAAO,aAAa,MAAK,SAAQ,KAAK,OAAO,SAAS;GAC5D,IAAI,MACF,QAAQ,KAAK;EAEjB;EAEA,IAAI,UAAU,KAAA,GAAW;GACvB,MAAM,aAAa,KAAK;GACxB,KAAK,aAAa;GAClB,KAAK,KAAK,cAAc;GAExB,IAAI,eAAe,SAAS,KAAK,OAAO,UACtC,KAAK,OAAO,SAAS,KAAK;GAG5B,KAAK,eAAe,SAAS,gBAAgB,KAAK,OAAO,eACvD,KAAK,OAAO,cAAc;EAE9B;CACF;;;;;CAMA,WAAW,IAAyB;EAClC,MAAM,aAAa,KAAK;EACxB,KAAK,aAAa;EAClB,KAAK,KAAK,cAAc;EAExB,IAAI,eAAe,MAAM,KAAK,OAAO,UACnC,KAAK,OAAO,SAAS,EAAE;EAGzB,IAAI,eAAe,MAAM,KAAK,OAAO,eACnC,KAAK,OAAO,cAAc;CAE9B;;;;;;CAOA,eAAqB;EACnB,IAAI,KAAK,eAAe,KAAA,GAAW;GACjC,KAAK,aAAa,KAAA;GAClB,KAAK,KAAK,cAAc;GAExB,IAAI,KAAK,OAAO,UACd,KAAK,OAAO,SAAS,KAAA,CAAS;GAGhC,IAAI,KAAK,OAAO,eACd,KAAK,OAAO,cAAc;EAE9B;CACF;;;;;CAMA,aAAa,MAAuB;EAClC,IAAI,KAAK,eAAe,MAAM;GAC5B,KAAK,aAAa;GAClB,KAAK,KAAK,cAAc;GAExB,IAAI,SAAS,YACX,kBAAkB,2BAA2B;GAG/C,IAAI,KAAK,OAAO,eACd,KAAK,OAAO,cAAc;EAE9B;CACF;AACF"}

package/dist/tickled-styles-BrAHEj1q.js

@@ -0,0 +1,89 @@
+import { css } from "lit";
+//#region src/interaction/tickled-styles.ts
+/**
+* Shared CSS styles for tickled interaction pattern.
+*
+* Tickled state is controlled via the `.tickled` CSS class (applied by TickledController).
+* The `tickledItemStyles` provides base styling that all tickled components should use.
+*
+* ## CSS Variable Contract
+*
+* **Style variables** — `tickledItemStyles` only consumes these via `var()`; it
+* defines no defaults itself. Fallback values (used when no theme CSS is loaded)
+* are registered in `themeFallbacks` (`../styles/fallbacks.ts`) and mirror the
+* documented base theme in `user-theming.md`:
+* - `--item-bg`, `--item-bg-tickled`, `--item-bg-selected`, `--item-bg-selected-tickled`
+* - `--item-border`, `--item-border-tickled`, `--item-border-selected` (full border shorthands, not colours)
+* - `--item-text-tickled`, `--item-text-selected`
+* - `--item-padding`, `--item-border-radius`, `--item-icon-spacing`
+*
+* ## Usage
+*
+* Components should import both `tickledStyles` and `tickledItemStyles`:
+*
+* ```ts
+* import { tickledStyles, tickledItemStyles } from '../interaction/index.js';
+*
+* class MyComponent extends LitElement {
+*   static styles = [
+*     tickledStyles,
+*     tickledItemStyles,
+*     css`
+*       :host {
+*         --item-bg-tickled: #e0e0e0;
+*         --item-bg-selected: #1976d2;
+*       }
+*     `
+*   ];
+* }
+* ```
+*/
+const tickledStyles = css`
+  /**
+   * No suppression needed - tickled styling is always active.
+   */
+`;
+/**
+* Shared item styling for tickled components.
+*
+* Provides base styles for interactive items with tickled and selected states.
+* Components should import this in addition to `tickledStyles` and can override
+* CSS variables to customize appearance.
+*/
+const tickledItemStyles = css`
+  .item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--item-icon-spacing);
+    padding: var(--item-padding);
+    background: var(--item-bg);
+    border: var(--item-border);
+    border-radius: var(--item-border-radius);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: background var(--transition, 0.1s ease-out), border-color var(--transition, 0.1s ease-out);
+  }
+
+  .item.tickled {
+    background: var(--item-bg-tickled);
+    border: var(--item-border-tickled);
+    color: var(--item-text-tickled);
+  }
+
+  .item.selected {
+    background: var(--item-bg-selected);
+    border: var(--item-border-selected);
+    color: var(--item-text-selected);
+  }
+
+  .item.selected.tickled {
+    background: var(--item-bg-selected-tickled);
+    outline: 2px dashed var(--surface-3);
+    outline-offset: -2px;
+  }
+`;
+//#endregion
+export { tickledStyles as n, tickledItemStyles as t };
+
+//# sourceMappingURL=tickled-styles-BrAHEj1q.js.map

package/dist/tickled-styles-BrAHEj1q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tickled-styles-BrAHEj1q.js","names":[],"sources":["../src/interaction/tickled-styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared CSS styles for tickled interaction pattern.\n *\n * Tickled state is controlled via the `.tickled` CSS class (applied by TickledController).\n * The `tickledItemStyles` provides base styling that all tickled components should use.\n *\n * ## CSS Variable Contract\n *\n * **Style variables** — `tickledItemStyles` only consumes these via `var()`; it\n * defines no defaults itself. Fallback values (used when no theme CSS is loaded)\n * are registered in `themeFallbacks` (`../styles/fallbacks.ts`) and mirror the\n * documented base theme in `user-theming.md`:\n * - `--item-bg`, `--item-bg-tickled`, `--item-bg-selected`, `--item-bg-selected-tickled`\n * - `--item-border`, `--item-border-tickled`, `--item-border-selected` (full border shorthands, not colours)\n * - `--item-text-tickled`, `--item-text-selected`\n * - `--item-padding`, `--item-border-radius`, `--item-icon-spacing`\n *\n * ## Usage\n *\n * Components should import both `tickledStyles` and `tickledItemStyles`:\n *\n * ```ts\n * import { tickledStyles, tickledItemStyles } from '../interaction/index.js';\n *\n * class MyComponent extends LitElement {\n *   static styles = [\n *     tickledStyles,\n *     tickledItemStyles,\n *     css`\n *       :host {\n *         --item-bg-tickled: #e0e0e0;\n *         --item-bg-selected: #1976d2;\n *       }\n *     `\n *   ];\n * }\n * ```\n */\n\nexport const tickledStyles = css`\n  /**\n   * No suppression needed - tickled styling is always active.\n   */\n`;\n\n/**\n * Shared item styling for tickled components.\n *\n * Provides base styles for interactive items with tickled and selected states.\n * Components should import this in addition to `tickledStyles` and can override\n * CSS variables to customize appearance.\n */\nexport const tickledItemStyles = css`\n  .item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--item-icon-spacing);\n    padding: var(--item-padding);\n    background: var(--item-bg);\n    border: var(--item-border);\n    border-radius: var(--item-border-radius);\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    transition: background var(--transition, 0.1s ease-out), border-color var(--transition, 0.1s ease-out);\n  }\n\n  .item.tickled {\n    background: var(--item-bg-tickled);\n    border: var(--item-border-tickled);\n    color: var(--item-text-tickled);\n  }\n\n  .item.selected {\n    background: var(--item-bg-selected);\n    border: var(--item-border-selected);\n    color: var(--item-text-selected);\n  }\n\n  .item.selected.tickled {\n    background: var(--item-bg-selected-tickled);\n    outline: 2px dashed var(--surface-3);\n    outline-offset: -2px;\n  }\n`;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,gBAAgB,GAAG;;;;;;;;;;;;AAahC,MAAa,oBAAoB,GAAG"}

package/dist/transitory-label.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, PropertyValues } from "lit";
+//#region src/transitory-label/transitory-label.d.ts
+type Effect = `slide-right` | `slide-left` | `slide-up` | `slide-down` | `fade` | `character-swap`;
+declare class TransitoryLabelElement extends LitElement {
+  #private;
+  text: string;
+  effect: Effect;
+  duration: number;
+  easing: string;
+  private _currentText;
+  private _outgoingText;
+  private _activeEffect;
+  private _transitionId;
+  private _queue;
+  private _pendingEffect;
+  setText(msg: string, effect: Effect): void;
+  protected updated(changed: PropertyValues): void;
+  private _startTransition;
+  private _onTransitionEnd;
+  protected render(): import("lit").TemplateResult<1>;
+  static styles: import("lit").CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-transitory-label': TransitoryLabelElement;
+  }
+}
+//#endregion
+export { Effect, TransitoryLabelElement };
+//# sourceMappingURL=transitory-label.d.ts.map

package/dist/transitory-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitory-label.d.ts","names":[],"sources":["../src/transitory-label/transitory-label.ts"],"mappings":";;KAMY;cAKC,+BAA+B;;EACd;EACA,QAAQ;EACR;EACA;UAEX;UACA;UACA;UACA;UAET;UACA;EAER,QAAQ,aAAa,QAAQ;YAKV,QAAQ,SAAS;UAa5B;UAWA;YAgDW,wBAAM;SA4BT,sBAAM;;QAuIhB;YACI;IACR,yBAAyB"}

package/dist/transitory-label.js

@@ -0,0 +1,249 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { keyed } from "lit/directives/keyed.js";
+//#region src/transitory-label/transitory-label.ts
+let TransitoryLabelElement = class TransitoryLabelElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.text = ``;
+		this.effect = `fade`;
+		this.duration = 300;
+		this.easing = `ease`;
+		this._currentText = ``;
+		this._outgoingText = ``;
+		this._transitionId = 0;
+		this._queue = [];
+		this.#onOutgoingEnd = () => {
+			this._onTransitionEnd();
+		};
+		this.#onLastCharOut = () => {
+			this._onTransitionEnd();
+		};
+	}
+	setText(msg, effect) {
+		this._pendingEffect = effect;
+		this.text = msg;
+	}
+	updated(changed) {
+		if (changed.has(`text`) && this.text !== this._currentText) {
+			const effect = this._pendingEffect ?? this.effect;
+			this._pendingEffect = void 0;
+			if (this._activeEffect !== void 0) this._queue.push({
+				text: this.text,
+				effect
+			});
+			else this._startTransition(this.text, effect);
+		}
+	}
+	_startTransition(newText, effect) {
+		const prevText = this._currentText;
+		this._currentText = newText;
+		this._outgoingText = prevText;
+		if (prevText !== ``) {
+			this._transitionId++;
+			this._activeEffect = effect;
+		}
+	}
+	_onTransitionEnd() {
+		this._outgoingText = ``;
+		this._activeEffect = void 0;
+		if (this._queue.length > 0) {
+			const next = this._queue.shift();
+			this._startTransition(next.text, next.effect);
+		}
+	}
+	#onOutgoingEnd;
+	#onLastCharOut;
+	#renderCharSwap() {
+		const charDuration = Math.round(this.duration * .3);
+		const charStagger = Math.round(this.duration * .1);
+		const currentChars = this._currentText.split(``);
+		const outgoingChars = this._outgoingText.split(``);
+		const lastIdx = outgoingChars.length - 1;
+		const charStyle = (i) => `animation-duration:${charDuration}ms;animation-delay:${i * charStagger}ms;animation-timing-function:${this.easing}`;
+		return html`
+      ${keyed(`cc${this._transitionId}`, html`
+        <span class="layer current char-swap">
+          ${currentChars.map((ch, i) => html`<span class="char in" style=${charStyle(i)}>${ch}</span>`)}
+        </span>
+      `)}
+      ${this._outgoingText ? keyed(this._transitionId, html`
+          <span class="layer outgoing char-swap">
+            ${outgoingChars.map((ch, i) => html`<span
+                class="char out"
+                style=${charStyle(i)}
+                @animationend=${i === lastIdx ? this.#onLastCharOut : void 0}
+              >${ch}</span>`)}
+          </span>
+        `) : nothing}
+    `;
+	}
+	render() {
+		if (this._activeEffect === `character-swap`) return html`<span class="container">${this.#renderCharSwap()}</span>`;
+		const effect = this._activeEffect ?? ``;
+		const durStyle = this._activeEffect ? `animation-duration:${this.duration}ms;animation-timing-function:${this.easing}` : ``;
+		return html`
+      <span class="container">
+        ${this._outgoingText ? keyed(this._transitionId, html`
+            <span class="layer outgoing ${effect}" style=${durStyle} @animationend=${this.#onOutgoingEnd}>
+              ${this._outgoingText}
+            </span>
+          `) : nothing}
+        ${keyed(`c${this._transitionId}`, html`
+          <span class="layer current ${effect}" style=${durStyle}>
+            ${this._currentText}
+          </span>
+        `)}
+      </span>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: inline-block;
+      --transitory-label-easing: ease;
+    }
+
+    .container {
+      display: inline-grid;
+      overflow: hidden;
+    }
+
+    .layer {
+      grid-area: 1 / 1;
+      white-space: nowrap;
+    }
+
+    .layer.outgoing {
+      pointer-events: none;
+    }
+
+    /* slide-right */
+    .layer.current.slide-right {
+      transform: translateX(-100%);
+      animation: tl-slide-in-left var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-right {
+      animation: tl-slide-out-right var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-left {
+      from { transform: translateX(-100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes tl-slide-out-right {
+      from { transform: translateX(0); }
+      to   { transform: translateX(100%); }
+    }
+
+    /* slide-left */
+    .layer.current.slide-left {
+      transform: translateX(100%);
+      animation: tl-slide-in-right var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-left {
+      animation: tl-slide-out-left var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-right {
+      from { transform: translateX(100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes tl-slide-out-left {
+      from { transform: translateX(0); }
+      to   { transform: translateX(-100%); }
+    }
+
+    /* slide-up */
+    .layer.current.slide-up {
+      transform: translateY(100%);
+      animation: tl-slide-in-bottom var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-up {
+      animation: tl-slide-out-top var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-bottom {
+      from { transform: translateY(100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes tl-slide-out-top {
+      from { transform: translateY(0); }
+      to   { transform: translateY(-100%); }
+    }
+
+    /* slide-down */
+    .layer.current.slide-down {
+      transform: translateY(-100%);
+      animation: tl-slide-in-top var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-down {
+      animation: tl-slide-out-bottom var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-top {
+      from { transform: translateY(-100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes tl-slide-out-bottom {
+      from { transform: translateY(0); }
+      to   { transform: translateY(100%); }
+    }
+
+    /* fade */
+    .layer.current.fade {
+      opacity: 0;
+      animation: tl-fade-in var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.fade {
+      animation: tl-fade-out var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-fade-in {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    @keyframes tl-fade-out {
+      from { opacity: 1; }
+      to   { opacity: 0; }
+    }
+
+    /* character-swap */
+    .char {
+      display: inline-block;
+    }
+
+    .char.in {
+      opacity: 0;
+      animation: tl-char-in var(--transitory-label-easing) forwards;
+    }
+
+    .char.out {
+      animation: tl-char-out var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-char-in {
+      from { opacity: 0; transform: translateY(-0.3em) scale(0.8); }
+      to   { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    @keyframes tl-char-out {
+      from { opacity: 1; transform: translateY(0) scale(1); }
+      to   { opacity: 0; transform: translateY(0.3em) scale(0.8); }
+    }
+  `;
+	}
+};
+__decorate([property({ type: String })], TransitoryLabelElement.prototype, "text", void 0);
+__decorate([property({ type: String })], TransitoryLabelElement.prototype, "effect", void 0);
+__decorate([property({ type: Number })], TransitoryLabelElement.prototype, "duration", void 0);
+__decorate([property({ type: String })], TransitoryLabelElement.prototype, "easing", void 0);
+__decorate([state()], TransitoryLabelElement.prototype, "_currentText", void 0);
+__decorate([state()], TransitoryLabelElement.prototype, "_outgoingText", void 0);
+__decorate([state()], TransitoryLabelElement.prototype, "_activeEffect", void 0);
+__decorate([state()], TransitoryLabelElement.prototype, "_transitionId", void 0);
+TransitoryLabelElement = __decorate([safeCustomElement(`ixfx-transitory-label`)], TransitoryLabelElement);
+//#endregion
+export { TransitoryLabelElement };
+
+//# sourceMappingURL=transitory-label.js.map

package/dist/transitory-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitory-label.js","names":["#onLastCharOut","#renderCharSwap","#onOutgoingEnd","customElement"],"sources":["../src/transitory-label/transitory-label.ts"],"sourcesContent":["import type { PropertyValues } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type Effect = `slide-right` | `slide-left` | `slide-up` | `slide-down` | `fade` | `character-swap`;\n\ntype QueueEntry = { text: string; effect: Effect };\n\n@customElement(`ixfx-transitory-label`)\nexport class TransitoryLabelElement extends LitElement {\n  @property({ type: String }) text = ``;\n  @property({ type: String }) effect: Effect = `fade`;\n  @property({ type: Number }) duration = 300;\n  @property({ type: String }) easing = `ease`;\n\n  @state() private _currentText = ``;\n  @state() private _outgoingText = ``;\n  @state() private _activeEffect: Effect | undefined;\n  @state() private _transitionId = 0;\n\n  private _queue: QueueEntry[] = [];\n  private _pendingEffect: Effect | undefined;\n\n  setText(msg: string, effect: Effect): void {\n    this._pendingEffect = effect;\n    this.text = msg;\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(`text`) && this.text !== this._currentText) {\n      const effect = this._pendingEffect ?? this.effect;\n      this._pendingEffect = undefined;\n\n      if (this._activeEffect !== undefined) {\n        this._queue.push({ text: this.text, effect });\n      } else {\n        this._startTransition(this.text, effect);\n      }\n    }\n  }\n\n  private _startTransition(newText: string, effect: Effect): void {\n    const prevText = this._currentText;\n    this._currentText = newText;\n    this._outgoingText = prevText;\n\n    if (prevText !== ``) {\n      this._transitionId++;\n      this._activeEffect = effect;\n    }\n  }\n\n  private _onTransitionEnd(): void {\n    this._outgoingText = ``;\n    this._activeEffect = undefined;\n\n    if (this._queue.length > 0) {\n      const next = this._queue.shift()!;\n      this._startTransition(next.text, next.effect);\n    }\n  }\n\n  #onOutgoingEnd = (): void => {\n    this._onTransitionEnd();\n  };\n\n  #onLastCharOut = (): void => {\n    this._onTransitionEnd();\n  };\n\n  #renderCharSwap() {\n    const charDuration = Math.round(this.duration * 0.3);\n    const charStagger = Math.round(this.duration * 0.1);\n    const currentChars = this._currentText.split(``);\n    const outgoingChars = this._outgoingText.split(``);\n    const lastIdx = outgoingChars.length - 1;\n\n    const charStyle = (i: number) =>\n      `animation-duration:${charDuration}ms;animation-delay:${i * charStagger}ms;animation-timing-function:${this.easing}`;\n\n    return html`\n      ${keyed(`cc${this._transitionId}`, html`\n        <span class=\"layer current char-swap\">\n          ${currentChars.map((ch, i) => html`<span class=\"char in\" style=${charStyle(i)}>${ch}</span>`)}\n        </span>\n      `)}\n      ${this._outgoingText\n        ? keyed(this._transitionId, html`\n          <span class=\"layer outgoing char-swap\">\n            ${outgoingChars.map((ch, i) => html`<span\n                class=\"char out\"\n                style=${charStyle(i)}\n                @animationend=${i === lastIdx ? this.#onLastCharOut : undefined}\n              >${ch}</span>`)}\n          </span>\n        `)\n        : nothing}\n    `;\n  }\n\n  protected override render() {\n    if (this._activeEffect === `character-swap`) {\n      return html`<span class=\"container\">${this.#renderCharSwap()}</span>`;\n    }\n\n    const effect = this._activeEffect ?? ``;\n    const durStyle = this._activeEffect\n      ? `animation-duration:${this.duration}ms;animation-timing-function:${this.easing}`\n      : ``;\n\n    return html`\n      <span class=\"container\">\n        ${this._outgoingText\n          ? keyed(this._transitionId, html`\n            <span class=\"layer outgoing ${effect}\" style=${durStyle} @animationend=${this.#onOutgoingEnd}>\n              ${this._outgoingText}\n            </span>\n          `)\n          : nothing}\n        ${keyed(`c${this._transitionId}`, html`\n          <span class=\"layer current ${effect}\" style=${durStyle}>\n            ${this._currentText}\n          </span>\n        `)}\n      </span>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: inline-block;\n      --transitory-label-easing: ease;\n    }\n\n    .container {\n      display: inline-grid;\n      overflow: hidden;\n    }\n\n    .layer {\n      grid-area: 1 / 1;\n      white-space: nowrap;\n    }\n\n    .layer.outgoing {\n      pointer-events: none;\n    }\n\n    /* slide-right */\n    .layer.current.slide-right {\n      transform: translateX(-100%);\n      animation: tl-slide-in-left var(--transitory-label-easing) forwards;\n    }\n    .layer.outgoing.slide-right {\n      animation: tl-slide-out-right var(--transitory-label-easing) forwards;\n    }\n\n    @keyframes tl-slide-in-left {\n      from { transform: translateX(-100%); }\n      to   { transform: translateX(0); }\n    }\n    @keyframes tl-slide-out-right {\n      from { transform: translateX(0); }\n      to   { transform: translateX(100%); }\n    }\n\n    /* slide-left */\n    .layer.current.slide-left {\n      transform: translateX(100%);\n      animation: tl-slide-in-right var(--transitory-label-easing) forwards;\n    }\n    .layer.outgoing.slide-left {\n      animation: tl-slide-out-left var(--transitory-label-easing) forwards;\n    }\n\n    @keyframes tl-slide-in-right {\n      from { transform: translateX(100%); }\n      to   { transform: translateX(0); }\n    }\n    @keyframes tl-slide-out-left {\n      from { transform: translateX(0); }\n      to   { transform: translateX(-100%); }\n    }\n\n    /* slide-up */\n    .layer.current.slide-up {\n      transform: translateY(100%);\n      animation: tl-slide-in-bottom var(--transitory-label-easing) forwards;\n    }\n    .layer.outgoing.slide-up {\n      animation: tl-slide-out-top var(--transitory-label-easing) forwards;\n    }\n\n    @keyframes tl-slide-in-bottom {\n      from { transform: translateY(100%); }\n      to   { transform: translateY(0); }\n    }\n    @keyframes tl-slide-out-top {\n      from { transform: translateY(0); }\n      to   { transform: translateY(-100%); }\n    }\n\n    /* slide-down */\n    .layer.current.slide-down {\n      transform: translateY(-100%);\n      animation: tl-slide-in-top var(--transitory-label-easing) forwards;\n    }\n    .layer.outgoing.slide-down {\n      animation: tl-slide-out-bottom var(--transitory-label-easing) forwards;\n    }\n\n    @keyframes tl-slide-in-top {\n      from { transform: translateY(-100%); }\n      to   { transform: translateY(0); }\n    }\n    @keyframes tl-slide-out-bottom {\n      from { transform: translateY(0); }\n      to   { transform: translateY(100%); }\n    }\n\n    /* fade */\n    .layer.current.fade {\n      opacity: 0;\n      animation: tl-fade-in var(--transitory-label-easing) forwards;\n    }\n    .layer.outgoing.fade {\n      animation: tl-fade-out var(--transitory-label-easing) forwards;\n    }\n\n    @keyframes tl-fade-in {\n      from { opacity: 0; }\n      to   { opacity: 1; }\n    }\n    @keyframes tl-fade-out {\n      from { opacity: 1; }\n      to   { opacity: 0; }\n    }\n\n    /* character-swap */\n    .char {\n      display: inline-block;\n    }\n\n    .char.in {\n      opacity: 0;\n      animation: tl-char-in var(--transitory-label-easing) forwards;\n    }\n\n    .char.out {\n      animation: tl-char-out var(--transitory-label-easing) forwards;\n    }\n\n    @keyframes tl-char-in {\n      from { opacity: 0; transform: translateY(-0.3em) scale(0.8); }\n      to   { opacity: 1; transform: translateY(0) scale(1); }\n    }\n    @keyframes tl-char-out {\n      from { opacity: 1; transform: translateY(0) scale(1); }\n      to   { opacity: 0; transform: translateY(0.3em) scale(0.8); }\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-transitory-label': TransitoryLabelElement;\n  }\n}\n"],"mappings":"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"}

package/dist/{tree-BtiiDX1a.js → tree-BO6BXI2b.js}

@@ -1,7 +1,7 @@
-import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-fNDdqf6l.js";
-import { t as themeFallbacks } from "./fallbacks-DPgPEqo8.js";
+import { t as TickledController } from "./tickled-controller-DkAU-0qL.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-D6efrBLo.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -1418,4 +1418,4 @@ var TreeController = class {
 //#endregion
 export { TreeDataModel as i, TreeListElement as n, TreeBaseElement as r, TreeController as t };
 
-//# sourceMappingURL=tree-BtiiDX1a.js.map
+//# sourceMappingURL=tree-BO6BXI2b.js.map