@ixfx/components 0.11.4 → 0.11.6

package/dist/{detail-list-DxQZkK-C.d.ts → detail-list-CmdCxddo.d.ts}

@@ -1,10 +1,10 @@
-import "./icon-DR_3rSyZ.js";
+import "./icon-CDGprSdE.js";
 import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
-import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-CMGeqyjZ.js";
+import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-DukLqesg.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-CHbuPyLL.js";
+import { S as ListSearchController } from "./index-CMsmZ6Or.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
-import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-R25WqAVO.js";
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-DTp-UIUE.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
 //#region src/detail-list/types.d.ts
@@ -51,6 +51,22 @@ declare class DetailListElement extends LitElement {
   displayProperty: string;
   formatter: DetailFormatter | undefined;
   iconProperty: string;
+  /**
+   * Property on each `items` entry holding a CSS colour for the item's
+   * `<ixfx-icon>`. Only read when `iconProperty` also resolves an icon.
+   */
+  iconColorProperty: string;
+  /**
+   * Property on each `items` entry holding a CSS colour for the item's caption
+   * text. Inline, so it wins over the selected/tickled text colours.
+   */
+  textColorProperty: string;
+  /**
+   * Property on each `items` entry holding a Finder-style badge — a
+   * `TemplateResult`, a DOM `Node`, or anything Lit can render. Rendered
+   * right-justified on the row, after the caption.
+   */
+  badgeProperty: string;
   keyProperty: string;
   filterPredicate: ((el: Element) => boolean) | undefined;
   /**
@@ -165,6 +181,7 @@ declare class DetailListElement extends LitElement {
    */
   fitColumnWidth(): Promise<number>;
   private _isCheckable;
+  /** Appends the caption span; returns it so callers can style it per item. */
   private _setLabel;
   private _syncItemStates;
   private _syncCheckboxes;
@@ -202,4 +219,4 @@ interface DetailListElementEventMap extends ListElementEventMap {
 }
 //#endregion
 export { DetailSortItem as a, DetailSortComparator as i, DetailListElementEventMap as n, DetailSortMode as o, DetailFormatter as r, DetailListElement as t };
-//# sourceMappingURL=detail-list-DxQZkK-C.d.ts.map
+//# sourceMappingURL=detail-list-CmdCxddo.d.ts.map

package/dist/detail-list-CmdCxddo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-list-CmdCxddo.d.ts","names":[],"sources":["../src/detail-list/types.ts","../src/detail-list/detail-list.ts"],"mappings":";;;;;;;;;;;KACY;;KAGA;WACD,SAAS;WACT;WACA;;;KAIC,wBAAwB,GAAG,gBAAgB,GAAG;;KAG9C,mBAAmB,eAAe,2BAA2B;;;;;;;;;;;;;;;;;;;;cC+H5D,0BAA0B;;EAErC,eAAe;EAGf,iBAAiB;EAGjB,MAAM;EAGN;EAGA,gBAAgB;EAGhB;EAGA,UAAU;EAGV;EAGA,WAAW;EAGX;;;;;EAOA;;;;;EAOA;;;;;;EAQA;EAGA;EAGA,mBAAmB,IAAI;;;;;;EAQvB;;EAIA,oBAAoB,gCAAgC;;;;;;EAQpD;;;;;;EAQA;;;;;EAOA,qBAAqB,wBAAwB;EAG7C,mBAAmB,8BAA8B;UAGzC;mBAoBS;UAeT;UAyFA;;WAkGC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EA8DA;EA2BA;EASA,QAAQ,SAAS;;MAuDtB,gBAAgB;;MAKhB,iBAAiB,YAAY;;;;;;EASjC;EAIA,QAAQ,MAAM,kBAAkB,UAAU;;;;;EAuB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;EAYA,SAAS,gBAAgB;;;;;EAgBzB,YAAY,MAAM;;;;;;;;;;EAalB;;;;;;EAsBA,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;EAKzB,SAAS;EAgBP,eAAe,0CAA0C,UAAU;UA0b7D;;;;;;;;;EAkBF,kBAAkB;UAwBhB;;UAOA;UA2DA;UAiBA;;;;;;;UA2DA;;UAoBA;UAcA;UAYA;UAQA;UA6DA;UAMA;UAIA;UA4EA;UAWA;UAMA;UAUA;SAUQ,sBAAM;EAqJb,wBAAM;;QAsBT;YACI;IACR,oBAAoB;;YAGZ,4BAA4B;;UAGvB,kCAAkC;EACjD,+BAA+B;EAC/B,0BAA0B,yBAAyB"}

package/dist/detail-list.d.ts

@@ -1,5 +1,5 @@
-import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-CMGeqyjZ.js";
+import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-DukLqesg.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
-import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-R25WqAVO.js";
-import { a as DetailSortItem, i as DetailSortComparator, n as DetailListElementEventMap, o as DetailSortMode, r as DetailFormatter, t as DetailListElement } from "./detail-list-DxQZkK-C.js";
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-DTp-UIUE.js";
+import { a as DetailSortItem, i as DetailSortComparator, n as DetailListElementEventMap, o as DetailSortMode, r as DetailFormatter, t as DetailListElement } from "./detail-list-CmdCxddo.js";
 export { type AddItemOptions, type CustomCheckboxOptions, type DetailFormatter, DetailListElement, DetailListElementEventMap, type DetailSortComparator, type DetailSortItem, type DetailSortMode, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListViewportChangeDetail, type ListViewportChangeEvent };

package/dist/detail-list.js

@@ -8,6 +8,7 @@ import { t as ListNativeDragController } from "./list-native-drag-controller-B9x
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
+import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import { LitElement, css, html, nothing, render } from "lit";
 import { property, query } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -15,6 +16,14 @@ import { createCommandRegistry } from "@clinth/ui-commands";
 const ITEM_SELECTOR = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
+/**
+* Layout for the per-item badge wrapper `#ensureBadge` adds. Applied as inline
+* `cssText` rather than shadow CSS because `::slotted()` only matches the
+* host's *direct* children — the badge lives inside a slotted `<li>`, so a
+* `::slotted()` rule could never reach it. The values still read the CSS
+* custom property, so it stays themeable from the outside.
+*/
+const BADGE_EL_CSS = `flex-shrink:0;display:inline-flex;align-items:center;margin-inline-start:auto;padding-inline-start:var(--detail-list-badge-gap,8px)`;
 function pointInRect(x, y, rect) {
 	return rect.width > 0 && rect.height > 0 && x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
 }
@@ -48,6 +57,9 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.items = [];
 		this.displayProperty = ``;
 		this.iconProperty = ``;
+		this.iconColorProperty = ``;
+		this.textColorProperty = ``;
+		this.badgeProperty = ``;
 		this.keyProperty = ``;
 		this.itemWrap = `stop`;
 		this.itemsDraggable = false;
@@ -249,7 +261,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 		};
 		this._onWheel = (e) => {
 			e.preventDefault();
-			this._listEl.scrollLeft += e.deltaY;
+			const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+			this._listEl.scrollLeft += delta;
 		};
 	}
 	#itemData;
@@ -454,7 +467,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			});
 			return;
 		}
-		if (changed.has(`items`) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items);
+		if ((changed.has(`items`) || changed.has(`displayProperty`) || changed.has(`formatter`) || changed.has(`iconProperty`) || changed.has(`iconColorProperty`) || changed.has(`textColorProperty`) || changed.has(`badgeProperty`) || changed.has(`keyProperty`)) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items);
 		this.#syncFromProvider();
 		if (changed.has(`sort`) || changed.has(`sortBy`) || changed.has(`sortComparator`)) this.#applySort();
 		if (changed.has(`filterPredicate`)) {
@@ -659,24 +672,36 @@ let DetailListElement = class DetailListElement extends LitElement {
 		const li = document.createElement(`li`);
 		this.#itemData.set(li, item);
 		const content = this.formatter ? this.formatter(item, index) : this.displayProperty ? this.#propertyValue(item, this.displayProperty) : item;
+		const textColor = this.#colorValue(item, this.textColorProperty);
+		const iconColor = this.#colorValue(item, this.iconColorProperty);
+		if (iconColor !== void 0) li.setAttribute(`data-icon-color`, iconColor);
 		if (typeof content === `string`) {
-			this._setLabel(li, content);
+			const span = this._setLabel(li, content);
+			if (textColor !== void 0) span.style.color = textColor;
 			if (this.iconProperty) {
 				const icon = this.#propertyValue(item, this.iconProperty);
 				if (typeof icon === `string` && icon.length > 0) li.setAttribute(`data-icon`, icon);
 			}
-		} else if (content instanceof Node) li.appendChild(content);
+		} else if (content instanceof Node) {
+			li.appendChild(content);
+			if (textColor !== void 0) li.style.color = textColor;
+		}
 		if (this.keyProperty) {
 			const key = this.#propertyValue(item, this.keyProperty);
 			if (key !== void 0 && key !== null) li.setAttribute(`data-key`, String(key));
 		}
 		this.#ensureIcon(li);
+		this.#ensureBadge(li, this.#propertyValue(item, this.badgeProperty));
 		return li;
 	}
 	#propertyValue(item, prop) {
 		if (typeof item !== `object` || item === null || !(prop in item)) return void 0;
 		return item[prop];
 	}
+	/** A non-empty string from `item[prop]`, else `undefined`. */
+	#colorValue(item, prop) {
+		return prop ? appearanceColor(this.#propertyValue(item, prop)) : void 0;
+	}
 	#syncFromProvider() {
 		if (this.provider === void 0) return;
 		const items = this.#data.items;
@@ -934,12 +959,14 @@ let DetailListElement = class DetailListElement extends LitElement {
 		if (this.interactionMode !== `checked`) return true;
 		return !item.hasAttribute(`not-checked`);
 	}
+	/** Appends the caption span; returns it so callers can style it per item. */
 	_setLabel(li, label) {
 		const span = document.createElement(`span`);
 		span.style.cssText = LABEL_SPAN_CSS;
 		span.textContent = label;
 		li.appendChild(span);
 		li.setAttribute(`data-search-label`, label);
+		return span;
 	}
 	/**
 	* Inject a leading `<ixfx-icon>` into an item carrying `data-icon`.
@@ -953,8 +980,28 @@ let DetailListElement = class DetailListElement extends LitElement {
 		icon.setAttribute(`name`, name);
 		icon.style.marginInlineEnd = `var(--detail-list-icon-gap, 6px)`;
 		icon.style.flexShrink = `0`;
+		const color = li.getAttribute(`data-icon-color`);
+		if (color) icon.style.color = color;
 		li.prepend(icon);
 	}
+	/**
+	* Append a right-justified Finder-style badge. `badge` may be a DOM `Node`
+	* or anything Lit can render (typically a `TemplateResult`). Idempotent —
+	* a second call replaces the existing badge.
+	*/
+	#ensureBadge(li, badge) {
+		if (appearanceAbsent(badge)) return;
+		let holder = li.querySelector(`:scope > .item-badge`);
+		if (!holder) {
+			holder = document.createElement(`span`);
+			holder.className = `item-badge`;
+			holder.style.cssText = BADGE_EL_CSS;
+			li.appendChild(holder);
+		}
+		holder.replaceChildren();
+		if (badge instanceof Node) holder.appendChild(badge);
+		else render(badge, holder);
+	}
 	/** Scan light-DOM children for unprocessed `data-icon` items. */
 	#processChildren() {
 		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#ensureIcon(el);
@@ -1228,6 +1275,10 @@ let DetailListElement = class DetailListElement extends LitElement {
       opacity: 0.6;
     }
 
+    /* Per-item icon / badge (adapter mode) are styled inline by
+       #ensureBadge — ::slotted() only reaches the host's direct children,
+       and these spans live inside a slotted <li>. */
+
     /* checked mode: the injected checkbox communicates selection — suppress bg */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -1302,6 +1353,18 @@ __decorate([property({
 	type: String,
 	attribute: `icon-property`
 })], DetailListElement.prototype, "iconProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-color-property`
+})], DetailListElement.prototype, "iconColorProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `text-color-property`
+})], DetailListElement.prototype, "textColorProperty", void 0);
+__decorate([property({
+	type: String,
+	attribute: `badge-property`
+})], DetailListElement.prototype, "badgeProperty", void 0);
 __decorate([property({
 	type: String,
 	attribute: `key-property`