@ixfx/components 0.4.3 → 0.4.4

package/dist/tabs.js

@@ -1,209 +1,2 @@
-import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
-import { LitElement, css, html } from "lit";
-import { property } from "lit/decorators.js";
-//#region src/tabs/tab-list.ts
-let TabListElement = class TabListElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.orientation = `horizontal`;
-		this.flip = false;
-		this.scrollable = false;
-		this.#items = [];
-		this.#onSlotChange = () => {
-			this.updateComplete.then(() => {
-				this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
-				this.#syncIndicatorColors();
-			});
-		};
-		this.#onKeyUp = (event) => {
-			const key = event.key;
-			if (this.#isVertical) {
-				if (key === `ArrowUp`) this.#selectPrevious();
-				else if (key === `ArrowDown`) this.#selectNext();
-			} else if (key === `ArrowRight`) this.#selectNext();
-			else if (key === `ArrowLeft`) this.#selectPrevious();
-		};
-		this.#onSlotClick = (event) => {
-			this.focus();
-			const t = event.target.closest(`ixfx-tab-list-item`);
-			if (!t) return;
-			const previous = this.getSelectedElement();
-			this.selectElement(t);
-			const forId = t.getAttribute(`for`);
-			const previousId = previous?.id;
-			this.dispatchEvent(new CustomEvent(`change`, {
-				bubbles: true,
-				detail: {
-					previous: previousId,
-					selected: t.id,
-					for: forId ?? ``
-				}
-			}));
-		};
-	}
-	#items;
-	get #isVertical() {
-		return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;
-	}
-	get #containerClass() {
-		return this.scrollable ? `${this.orientation} scrollable` : this.orientation;
-	}
-	render() {
-		return html`
-    <div 
-      tabindex=0 
-      @keyup=${this.#onKeyUp} 
-      @click=${this.#onSlotClick} 
-      id="container" 
-      class=${this.#containerClass}
-    >
-      <slot @slotchange=${this.#onSlotChange}></slot>
-    </div>`;
-	}
-	#onSlotChange;
-	firstUpdated() {
-		this.updateComplete.then(() => {
-			if (this.#items.length > 0) this.#syncIndicatorColors();
-		});
-	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		this.classList.toggle(`scrollable`, this.scrollable);
-	}
-	#syncIndicatorColors() {
-		for (const item of this.#items) {
-			item.style.setProperty(`--indicator-color-bottom`, `transparent`);
-			item.style.setProperty(`--indicator-color-top`, `transparent`);
-			item.style.setProperty(`--indicator-color-left`, `transparent`);
-			item.style.setProperty(`--indicator-color-right`, `transparent`);
-			if (item.hasAttribute(`selected`)) {
-				if (this.orientation === `horizontal` && !this.flip) item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
-				else if (this.orientation === `horizontal` && this.flip) item.style.setProperty(`--indicator-color-top`, `var(--accent)`);
-				else if (this.#isVertical && !this.flip) item.style.setProperty(`--indicator-color-right`, `var(--accent)`);
-				else if (this.#isVertical && this.flip) item.style.setProperty(`--indicator-color-left`, `var(--accent)`);
-			}
-		}
-	}
-	#onKeyUp;
-	getSelectedElement() {
-		for (const el of this.#items) if (this.#isSelected(el)) return el;
-		const slot = this.shadowRoot?.querySelector(`slot`);
-		if (slot) {
-			const els = slot.assignedElements({ flatten: true });
-			for (const el of els) if (this.#isSelected(el)) return el;
-		}
-	}
-	#isSelected(el) {
-		if (el.getAttribute(`selected`) === null) return false;
-		return el.hasAttribute(`selected`);
-	}
-	selectElement(el) {
-		const existing = this.getSelectedElement();
-		if (existing) {
-			existing.removeAttribute(`selected`);
-			existing.style.setProperty(`--indicator-color-bottom`, `transparent`);
-			existing.style.setProperty(`--indicator-color-top`, `transparent`);
-			existing.style.setProperty(`--indicator-color-left`, `transparent`);
-			existing.style.setProperty(`--indicator-color-right`, `transparent`);
-		}
-		el.setAttribute(`selected`, ``);
-		if (this.orientation === `horizontal` && !this.flip) el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
-		else if (this.orientation === `horizontal` && this.flip) el.style.setProperty(`--indicator-color-top`, `var(--accent)`);
-		else if (this.#isVertical && !this.flip) el.style.setProperty(`--indicator-color-right`, `var(--accent)`);
-		else if (this.#isVertical && this.flip) el.style.setProperty(`--indicator-color-left`, `var(--accent)`);
-	}
-	#selectNext() {
-		let found = false;
-		for (const el of this.#items) if (this.#isSelected(el) && !found) found = true;
-		else if (found) {
-			this.selectElement(el);
-			break;
-		}
-	}
-	#selectPrevious() {
-		let prev;
-		for (const el of this.#items) if (this.#isSelected(el) && prev) this.selectElement(prev);
-		else prev = el;
-	}
-	#onSlotClick;
-	static {
-		this.styles = [themeFallbacks, css`
-  :host {
-      display: inline-block;
-      --activated-colour: var(--accent);
-      --colour: var(--surface-4);
-      --scroll-max-height: 200px;
-      --allow-overflow: hidden;
-    }
-    :host(.scrollable) {
-      max-height: var(--scroll-max-height);
-    }
-    text {
-      user-select:none;
-    }
-    #container {
-      display:flex;
-    }
-    #container.horizontal {
-      flex-direction: row;
-      overflow: hidden;
-    }
-    #container.horizontal.scrollable {
-      overflow-x: auto;
-      --allow-overflow: visible;
-    }
-    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {
-      flex-shrink: 0;
-    }
-    #container.vertical-stack {
-      flex-direction: column;
-    }
-    #container.vertical-stack.flip {
-      flex-direction: column-reverse;
-    }
-    #container.vertical-stack.scrollable {
-      overflow-y: auto;
-      max-height: var(--scroll-max-height);
-      --allow-overflow: visible;
-    }
-    #container.vertical-side {
-      flex-direction: column;
-    }
-    #container.vertical-side.flip {
-      flex-direction: column-reverse;
-    }
-    #container.vertical-side.scrollable {
-      overflow-y: auto;
-      max-height: var(--scroll-max-height);
-      --allow-overflow: visible;
-    }
-
-    ::slotted(ixfx-tab-list-item) {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-
-    #container.vertical-side ::slotted(ixfx-tab-list-item) {
-      writing-mode: vertical-lr;
-      text-orientation: mixed;
-    }
-    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {
-      writing-mode: vertical-rl;
-      text-orientation: mixed;
-    }
-
-    ::slotted(.activated) {
-      --colour: var(--activated-colour);
-    }
-  `];
-	}
-};
-__decorate([property({ type: String })], TabListElement.prototype, "orientation", void 0);
-__decorate([property({ type: Boolean })], TabListElement.prototype, "flip", void 0);
-__decorate([property({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
-TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement);
-//#endregion
+import { t as TabListElement } from "./tab-list-DzknpdSo.js";
 export { TabListElement };
-
-//# sourceMappingURL=tabs.js.map

package/dist/{tickled-controller-BjYCzGrU.d.ts → tickled-controller-BF2Ea0DE.d.ts}

@@ -1,33 +1,4 @@
 import { ReactiveController, ReactiveControllerHost } from "lit";
-
-//#region node_modules/.pnpm/@ixfx+collections@0.56.13/node_modules/@ixfx/collections/dist/index-rrpZOWbs.d.ts
-/**
-* Traversable Tree.
-*
-* Creatable from:
-* {@link Trees.FromObject.asDynamicTraversable}: Create based on dynamic reading of an object
-* {@link Trees.TraversableTree}: Create based on an {@link Trees.TreeNode}, a {@link Trees.TraversableTree} or an object (same as calling asDynamicTraversable).
-* Use {@link Trees.isTraversable} to check if an object is this type.
-*/
-type TraversableTree<TValue> = {
-  /**
-  * Direct children of node
-  */
-  children: () => IterableIterator<TraversableTree<TValue>>;
-  /**
-  * Direct parent of node
-  */
-  getParent: () => TraversableTree<TValue> | undefined;
-  /**
-  * Value of node
-  */
-  getValue: () => TValue;
-  /**
-  * Object reference that acts as the identity of the node
-  */
-  getIdentity: () => any;
-};
-//#endregion
 //#region src/interaction/tickled-controller.d.ts
 /**
  * Represents an item that can be tickled (highlighted via hover or keyboard navigation)
@@ -214,5 +185,5 @@ declare class TickledController<T = number> implements ReactiveController {
   setInputMode(mode: InputMode): void;
 }
 //#endregion
-export { TraversableTree as n, TickledController as t };
-//# sourceMappingURL=tickled-controller-BjYCzGrU.d.ts.map
+export { TickledController as t };
+//# sourceMappingURL=tickled-controller-BF2Ea0DE.d.ts.map

package/dist/tickled-controller-BF2Ea0DE.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tickled-controller-BF2Ea0DE.d.ts","names":[],"sources":["../src/interaction/tickled-controller.ts"],"mappings":";;;;;KAKY,YAAY;;;;WAIb,IAAI;;;;WAKJ;;;;;KAMC;;;;KAKA,wBAAwB;;;;EAIlC,gBAAgB,cAAc,YAAY;;;;;;EAO1C,YAAY,IAAI;;;;;;;;;;;;;;;;;;;;;;;EAwBhB;;;;EAKA,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyDR,kBAAkB,uBAAuB;UAC5C;UACA;UACA;UACA;iBAEO;iBACA;iBACA;iBACA;EAEH,YAAA,MAAM,wBAAwB,QAAQ,wBAAwB;EAO1E;EASA;;;;MAOI,aAAa;;;;MAOb,aAAa;;;;EAOjB,UAAU,IAAI;;;;;;iBASC;;;;;aAiBJ;;;;;;EASX,mBAAmB,IAAI;;;;;;EAiCvB,mBAAmB,IAAI;;;;;;;EAYvB,yBAAyB,oDAAoD;;;;;EAyD7E,WAAW,IAAI;;;;;;EAmBf;;;;;EAmBA,aAAa,MAAM"}

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

@@ -1 +1 @@
-{"version":3,"file":"tickled-styles-fNDdqf6l.js","names":[],"sources":["../src/interaction/tickled-controller.ts","../src/interaction/tickled-styles.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 singleton global `pointermove` listener to track actual\n * mouse movement. This prevents `pointerenter` events caused by content scrolling\n * from incorrectly switching to mouse mode when the user is actually using keyboard\n * navigation.\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 _globalListenerAttached: boolean = false;\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._globalListenerAttached) {\n      document.addEventListener(`pointermove`, (e: PointerEvent) => {\n        TickledController.handleGlobalPointerMove(e.clientX, e.clientY);\n      }, { passive: true });\n      TickledController._globalListenerAttached = true;\n    }\n  }\n\n  hostDisconnected(): void {\n    // No-op: global listener persists for the lifetime of the page\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","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 (default values defined in `tickledItemStyles`):**\n * - `--item-bg`: Default background (default: transparent)\n * - `--item-bg-tickled`: Background when tickled (default: rgba(0, 0, 0, 0.06))\n * - `--item-bg-selected`: Background when selected (default: rgba(25, 118, 210, 1))\n * - `--item-bg-selected-tickled`: Background when selected AND tickled (default: rgba(21, 101, 192, 1))\n * - `--item-border`: Border style (default: 1px solid transparent)\n * - `--item-border-tickled`: Border when tickled (default: 1px solid var(--accent))\n * - `--item-border-selected`: Border when selected (default: 1px solid rgba(25, 118, 210, 1))\n * - `--item-text-tickled`: Text color when tickled (default: inherit)\n * - `--item-text-selected`: Text color when selected (default: #fff)\n * - `--item-padding`: Item padding (default: 4px 8px)\n * - `--item-border-radius`: Border radius (default: 4px)\n * - `--item-icon-spacing`: Gap between icon and text (default: 4px)\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-color: var(--item-border-tickled);\n    color: var(--item-text-tickled);\n  }\n\n  .item.selected {\n    background: var(--item-bg-selected);\n    border-color: 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":"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"}
+{"version":3,"file":"tickled-styles-fNDdqf6l.js","names":[],"sources":["../src/interaction/tickled-controller.ts","../src/interaction/tickled-styles.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 singleton global `pointermove` listener to track actual\n * mouse movement. This prevents `pointerenter` events caused by content scrolling\n * from incorrectly switching to mouse mode when the user is actually using keyboard\n * navigation.\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 _globalListenerAttached: boolean = false;\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._globalListenerAttached) {\n      document.addEventListener(`pointermove`, (e: PointerEvent) => {\n        TickledController.handleGlobalPointerMove(e.clientX, e.clientY);\n      }, { passive: true });\n      TickledController._globalListenerAttached = true;\n    }\n  }\n\n  hostDisconnected(): void {\n    // No-op: global listener persists for the lifetime of the page\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","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 (default values defined in `tickledItemStyles`):**\n * - `--item-bg`: Default background (default: transparent)\n * - `--item-bg-tickled`: Background when tickled (default: rgba(0, 0, 0, 0.06))\n * - `--item-bg-selected`: Background when selected (default: rgba(25, 118, 210, 1))\n * - `--item-bg-selected-tickled`: Background when selected AND tickled (default: rgba(21, 101, 192, 1))\n * - `--item-border`: Border style (default: 1px solid transparent)\n * - `--item-border-tickled`: Border when tickled (default: 1px solid var(--accent))\n * - `--item-border-selected`: Border when selected (default: 1px solid rgba(25, 118, 210, 1))\n * - `--item-text-tickled`: Text color when tickled (default: inherit)\n * - `--item-text-selected`: Text color when selected (default: #fff)\n * - `--item-padding`: Item padding (default: 4px 8px)\n * - `--item-border-radius`: Border radius (default: 4px)\n * - `--item-icon-spacing`: Gap between icon and text (default: 4px)\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-color: var(--item-border-tickled);\n    color: var(--item-text-tickled);\n  }\n\n  .item.selected {\n    background: var(--item-bg-selected);\n    border-color: 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":"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"}