@ixfx/components 0.18.0 → 0.18.1

package/dist/index.js

@@ -9,28 +9,27 @@ import { TitlebarElement } from "./titlebar.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-BOX1dfyd.js";
 import { t as prominenceStyles } from "./prominence-BOOQVWF-.js";
 import { t as IxfxIconElement } from "./icon-DvTQuylG.js";
-import "./menu-item-D0zy1yax.js";
+import "./menu-item-CbywH4Xo.js";
 import { Checkbox } from "./checkbox.js";
-import { t as CheckedSelect } from "./checked-select-DsQ-o9lI.js";
+import { t as CheckedSelect } from "./checked-select-CC-qSO1P.js";
 import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-_6ELsqLb.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-D8g-bTSF.js";
 import { t as DataController } from "./data-controller-q-rXRMzJ.js";
 import { t as collectDataResult } from "./data-provider-C6ZNAcaT.js";
 import { a as toGroupKey, i as resolveGroupKey, n as defaultGroupLabel, o as toggleInSet, r as partitionByGroup, t as EMPTY_GROUP_LABEL } from "./grouping-kENdqzSV.js";
-import { a as listItemFadeKeyframes, c as captionForEntry, i as animateListItemOut, l as createDefaultListDragPreview, n as LIST_ITEM_MOTION_MS, o as prefersReducedMotion, r as animateListItemIn, s as startListItemOutAnimation, t as ListNativeDragController } from "./list-native-drag-controller-Brk30s5d.js";
+import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-C3rgEEmm.js";
 import { i as ListDragSelectController, n as gestureOf, r as isMultiMode, t as ListSelectionController } from "./list-selection-controller-Dkh3m3hX.js";
 import { a as capKeys, c as keysAsFlags, d as partitionKeys, f as withoutFlag, i as capFlags, l as keysToArray, n as EMPTY_KEYS, o as flagsFromRecord, r as MAX_PENDING_KEYS, s as flagsToRecord, t as EMPTY_FLAGS, u as partitionFlags } from "./pending-Afl4LT64.js";
 import { i as sameKeySet, n as applyPartialAttributes, r as isPartialKey, t as PARTIAL_DESCRIPTION } from "./partial-keys-D4l_ede_.js";
 import { n as createScrollHoverGuard, t as SCROLL_HOVER_SUPPRESS_ATTR } from "./scroll-hover-guard-BGAjtyXT.js";
-import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-1CSNgw72.js";
-import { t as CrumbNavigationElement } from "./crumb-navigation-09YFje6W.js";
+import { t as CrumbNavigationElement } from "./crumb-navigation-C78edQGt.js";
 import { t as popupSurfaceStyles } from "./popup-D8IxN1Eq.js";
 import { t as scrollFadeStyles } from "./scroll-fade-DH8OXSqL.js";
 import { DataDisplayComponent } from "./data-display.js";
-import { t as DataGridElement } from "./data-grid-BGmJbMCb.js";
-import "./interaction-BEcBIY0d.js";
+import { t as DataGridElement } from "./data-grid-CJrbLzLr.js";
+import "./interaction-DNuFnTm0.js";
 import { DateInputElement, formatDateInput, parseDateInput } from "./date-input.js";
-import { t as DetailListElement } from "./detail-list-CrHASoAx.js";
+import { t as DetailListElement } from "./detail-list-Dk9oSvAZ.js";
 import { t as createDragGhost } from "./drag-ghost-DNWu_RyN.js";
 import { a as distribute, c as preserveRestoreWeights, d as toSnapshot, f as walk, i as buildModel, l as resolveTracks, n as SplitPanelElement, o as findPanelNode, r as applySnapshot, s as normalise, t as SplitLayoutElement, u as setPanelRestoreWeight } from "./split-layout-BMN_s6d7.js";
 import { t as TabListElement } from "./tab-list-CFJy3hVm.js";
@@ -38,12 +37,12 @@ import { EditableLabel } from "./editable-label.js";
 import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-CfRKd5kC.js";
 import { FlatListElement } from "./flat-list.js";
 import { n as formStyles, r as adoptLightDomStyles, t as FormElement } from "./form-Cxx2sO8_.js";
-import { t as GridListElement } from "./grid-list-DYU_z2K9.js";
+import { t as GridListElement } from "./grid-list-0wC2xGBS.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
-import { t as VerticalListElement } from "./vertical-list-BNCRA_zy.js";
+import { t as VerticalListElement } from "./vertical-list-By-yuhkw.js";
 import { t as IxfxHexEditorElement } from "./hex-editor-DephDhuu.js";
-import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, f as createDataListSearchAdapter, g as createFuzzySearch, h as createAcCompletionProvider, i as ListSearchController, l as KeyedElementIndex, m as createIncrSearch, n as listSearchStyles, o as registerListSearchCommands, p as IncrSearchTreeController, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-C5114RxZ.js";
-import { t as TickledController } from "./tickled-controller-BVhGKzjZ.js";
+import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, f as createDataListSearchAdapter, g as createFuzzySearch, h as createAcCompletionProvider, i as ListSearchController, l as KeyedElementIndex, m as createIncrSearch, n as listSearchStyles, o as registerListSearchCommands, p as IncrSearchTreeController, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-Bk4acsCM.js";
+import { t as TickledController } from "./tickled-controller-BsFFr_1N.js";
 import { a as resolveKeyPath, i as reconcileSelection$1, n as reconcileCursor, t as pathFromJson } from "./tree-DUc-iQcg.js";
 import { a as restoreElementScroll, c as VIEW_STATE_VERSION, i as onUserScrollIntent, n as anchorFromRow, o as scrollToOffset, r as captureElementScroll, s as VIEW_STATE_CHANGE, t as ViewStateController } from "./view-state-controller-DiPAPiA7.js";
 import "./icons.js";
@@ -51,11 +50,12 @@ import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { LedElement } from "./led.js";
 import { ListGroupHeaderElement } from "./list-group-header.js";
-import { a as menuFromTreeToElements, t as menu_exports } from "./menu-B6NFqEtm.js";
-import { n as MillerListElement, r as MillerBaseElement, t as MillerTreeController } from "./miller-B0qbnWwe.js";
+import { a as menuFromTreeToElements, t as menu_exports } from "./menu-CgT60B3-.js";
+import { n as MillerListElement, r as MillerBaseElement, t as MillerTreeController } from "./miller-Dyv4UM7k.js";
 import { a as iconBus, c as setIconFont, i as hasIcon, l as svgToDataUri, n as getIconEntry, o as registerFontIcon, r as getIconFont, s as registerIcon, t as getIcon } from "./registry-DcF0fO7l.js";
+import { _ as sameTags, a as listItemFadeKeyframes, c as captionForEntry, d as ItemTagResolver, f as TAG_PART_PREFIX, g as sameTagKeys, h as resolveTagFlags, i as animateListItemOut, l as createDefaultListDragPreview, m as collectTags, n as LIST_ITEM_MOTION_MS, o as prefersReducedMotion, p as applyTagAttributes, r as animateListItemIn, s as startListItemOutAnimation, t as ListNativeDragController, u as DEFAULT_ITEM_TAG_FLAGS, v as tagPartTokens, y as tagsAttribute } from "./list-native-drag-controller-B_INa6_G.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
-import { $ as forceState, A as marqueeStyle, At as outDegreeOf, B as NODE_SHAPES, C as zoomAt, Ct as edgeId, D as MARQUEE_THRESHOLD_PX, Dt as inDegreeOf, E as NodeDragController, Et as hasWire, F as findSnapTarget, Ft as toEdges, G as resizeRect, H as shapeSpec, I as proximityFactor, It as toNodeGraph, J as blinkPeriodSeconds, K as GraphPortElement, L as settled, M as rectFromPoints, Mt as portId, N as rectsIntersect, Nt as removeNode, O as MarqueeController, Ot as incomingEdge, P as wantsMarquee, Pt as removeWire, Q as forcePositions, R as smoothStep, S as screenToFlow, St as cycleBlockedNodes, T as DRAG_THRESHOLD_PX, Tt as fromEdges, U as RESIZE_HANDLES, V as isNodeShape, W as isResizeHandle, X as forceMovement, Y as DEFAULT_FORCE_OPTIONS, Z as forcePin, _ as clampZoom, _t as normaliseConnection, a as selectionAfterNodePress, at as edgeShape, b as flowToScreen, bt as addWire, c as collapsedOffset, ct as polylinePath, d as sanitizeFlowSpeed, dt as EASY_CONNECT_MARGIN, et as forceStep, f as withEntry, ft as inEasyConnectZone, g as boundsOf, gt as findValidWire, h as isEditableTarget, ht as canConnect, i as selectionAfterEdgeClick, it as edgePath, j as nodesInRect, jt as parsePortId, k as combineSelection, kt as incomingEdges, l as measureNode, lt as polylineShape, m as PanZoomController, mt as removeNodes, n as renderWires, nt as defaultSide, o as findProximityConnection, ot as extendFromSide, p as withWireFlow, pt as pickStartPort, q as MAX_BLINK_HZ, r as WireDragController, rt as edgeMidpoint, s as rectGap, st as polylineMidpoint, t as NodeGraphElement, tt as EDGE_CORNER_RADIUS, u as MAX_FLOW_SPEED, ut as stepPoints, v as fitBounds, vt as resolveConnection, w as nodeGraphStyles, wt as ensurePort, x as panBy, xt as connectContext, y as fitRects, yt as typesCompatible, z as GraphNodeElement } from "./node-graph-D9iovxQp.js";
+import { $ as forceState, A as marqueeStyle, At as outDegreeOf, B as NODE_SHAPES, C as zoomAt, Ct as edgeId, D as MARQUEE_THRESHOLD_PX, Dt as inDegreeOf, E as NodeDragController, Et as hasWire, F as findSnapTarget, Ft as toEdges, G as resizeRect, H as shapeSpec, I as proximityFactor, It as toNodeGraph, J as blinkPeriodSeconds, K as GraphPortElement, L as settled, M as rectFromPoints, Mt as portId, N as rectsIntersect, Nt as removeNode, O as MarqueeController, Ot as incomingEdge, P as wantsMarquee, Pt as removeWire, Q as forcePositions, R as smoothStep, S as screenToFlow, St as cycleBlockedNodes, T as DRAG_THRESHOLD_PX, Tt as fromEdges, U as RESIZE_HANDLES, V as isNodeShape, W as isResizeHandle, X as forceMovement, Y as DEFAULT_FORCE_OPTIONS, Z as forcePin, _ as clampZoom, _t as normaliseConnection, a as selectionAfterNodePress, at as edgeShape, b as flowToScreen, bt as addWire, c as collapsedOffset, ct as polylinePath, d as sanitizeFlowSpeed, dt as EASY_CONNECT_MARGIN, et as forceStep, f as withEntry, ft as inEasyConnectZone, g as boundsOf, gt as findValidWire, h as isEditableTarget, ht as canConnect, i as selectionAfterEdgeClick, it as edgePath, j as nodesInRect, jt as parsePortId, k as combineSelection, kt as incomingEdges, l as measureNode, lt as polylineShape, m as PanZoomController, mt as removeNodes, n as renderWires, nt as defaultSide, o as findProximityConnection, ot as extendFromSide, p as withWireFlow, pt as pickStartPort, q as MAX_BLINK_HZ, r as WireDragController, rt as edgeMidpoint, s as rectGap, st as polylineMidpoint, t as NodeGraphElement, tt as EDGE_CORNER_RADIUS, u as MAX_FLOW_SPEED, ut as stepPoints, v as fitBounds, vt as resolveConnection, w as nodeGraphStyles, wt as ensurePort, x as panBy, xt as connectContext, y as fitRects, yt as typesCompatible, z as GraphNodeElement } from "./node-graph-yrbOLbYo.js";
 import { NotificationPillElement } from "./notifier.js";
 import { t as PanTextElement } from "./pan-text-DrJYKQKN.js";
 import { PanelElement } from "./panel.js";
@@ -71,7 +71,7 @@ import { t as WheelNudgeMixin } from "./wheel-nudge-DgJzrL28.js";
 import { t as SliderInputElement } from "./slider-input-C3mbUBZi.js";
 import { SnackbarElement } from "./snackbar.js";
 import { SnapContainer } from "./snap-container.js";
-import { a as findSunburstId, c as sunburstChildId, d as sunburstParentId, f as sunburstPathToId, i as defaultSunburstValueAccessor, l as sunburstHasChildren, n as computeSunburstLayout, o as findSunburstNodeById, p as SUNBURST_PATH_SEPARATOR, r as createValueResolver, s as isSunburstAncestorId, t as SunburstTreeListElement, u as sunburstIdToPath } from "./sunbursttree-list-C-FuZB5z.js";
+import { a as findSunburstId, c as sunburstChildId, d as sunburstParentId, f as sunburstPathToId, i as defaultSunburstValueAccessor, l as sunburstHasChildren, n as computeSunburstLayout, o as findSunburstNodeById, p as SUNBURST_PATH_SEPARATOR, r as createValueResolver, s as isSunburstAncestorId, t as SunburstTreeListElement, u as sunburstIdToPath } from "./sunbursttree-list-CJdznPzN.js";
 import { SwipeElement } from "./swipe.js";
 import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-Br5JIeLI.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
@@ -1014,6 +1014,11 @@ let SplitButton = class SplitButton extends ButtonElement {
 		super(..._args);
 		this.mode = `default`;
 		this.defaultValue = ``;
+		this.popoverTarget = ``;
+		this._hasPopoverSlot = false;
+		this._popoverOpen = false;
+		this.#caretWasOpenOnPress = false;
+		this.#buildingPopover = false;
 		this._selectedCommand = ``;
 		this._selectedLabel = ``;
 		this._selectedIcon = ``;
@@ -1021,6 +1026,12 @@ let SplitButton = class SplitButton extends ButtonElement {
 		this._dynamicItems = [];
 		this._loadingItems = false;
 		this._menuHasItems = false;
+		this._onPopoverSlotChange = (e) => {
+			this._hasPopoverSlot = e.target.assignedElements({ flatten: true }).length > 0;
+		};
+		this._onPopoverToggle = (e) => {
+			this._popoverOpen = e.newState === `open`;
+		};
 		this._onDefaultMenuSlotChange = (e) => {
 			const slot = e.target;
 			this._menuHasItems = slot.assignedElements({ flatten: true }).length > 0;
@@ -1059,6 +1070,17 @@ let SplitButton = class SplitButton extends ButtonElement {
 		};
 		this._handleCaretClick = async (e) => {
 			e.stopPropagation();
+			if (this._popoverMode) {
+				const wasOpen = this.#caretWasOpenOnPress;
+				this.#caretWasOpenOnPress = false;
+				if (wasOpen) {
+					const el = this._resolvePopover();
+					if (el?.matches(`:popover-open`)) el.hidePopover();
+					return;
+				}
+				await this._showPopover(true);
+				return;
+			}
 			if (this._menuTrigger?.isOpen) {
 				this._menuTrigger.closeMenu();
 				return;
@@ -1084,25 +1106,21 @@ let SplitButton = class SplitButton extends ButtonElement {
 		this._handlePrimaryKeyDown = (e) => {
 			if (e.key === `ArrowDown`) {
 				e.preventDefault();
-				this._menuTrigger?.openMenu();
+				this._openOverlay();
 			}
 		};
 		this._handleCaretKeyDown = (e) => {
 			if (e.key === `ArrowDown`) {
 				e.preventDefault();
-				this._menuTrigger?.openMenu();
+				this._openOverlay();
 			}
 		};
+		this._handleCaretPointerDown = () => {
+			this.#caretWasOpenOnPress = this._resolvePopover()?.matches(`:popover-open`) ?? false;
+		};
 	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._menuTrigger?.removeEventListener(`menu-command`, this._handleSwitcherMenuCommand);
-	}
-	firstUpdated() {
-		this.updateComplete.then(() => {
-			this._menuTrigger?.addEventListener(`menu-command`, this._handleSwitcherMenuCommand);
-		});
-	}
+	#caretWasOpenOnPress;
+	#buildingPopover;
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if ((changedProperties.has(`items`) || changedProperties.has(`mode`)) && this.items && !this.itemsProvider) this._applyItems(this.items);
@@ -1145,11 +1163,41 @@ let SplitButton = class SplitButton extends ButtonElement {
 	}
 	/** True when there is (or will be) popup content. Used to dim the caret visually. */
 	get _caretHasContent() {
+		if (this._popoverMode) return true;
 		if (this.itemsProvider) return true;
 		if (this.items && this.items.length > 0) return true;
 		if (this.mode === `switcher`) return this._switcherItems.length > 1;
 		return this._menuHasItems;
 	}
+	/** The caret toggles a popover (slotted content, `popover-target` or `popoverProvider`) rather than the menu. */
+	get _popoverMode() {
+		return this.popoverTarget !== `` || this.popoverProvider !== void 0 || this._hasPopoverSlot;
+	}
+	_resolvePopover() {
+		if (this.popoverTarget !== ``) {
+			const el = this.getRootNode().getElementById?.(this.popoverTarget);
+			return el instanceof HTMLElement && el.popover !== null ? el : void 0;
+		}
+		return this._popoverPanel;
+	}
+	/** Show the popover (building its content first). `toggle`: hide it instead when already open. */
+	async _showPopover(toggle) {
+		const el = this._resolvePopover();
+		if (!el || this.#buildingPopover) return;
+		if (el.matches(`:popover-open`)) {
+			if (toggle) el.hidePopover();
+			return;
+		}
+		if (this.popoverProvider) {
+			this.#buildingPopover = true;
+			try {
+				await this.popoverProvider(el);
+			} finally {
+				this.#buildingPopover = false;
+			}
+		}
+		el.showPopover({ source: this._caretEl });
+	}
 	_applySwitcherItems(items) {
 		this._switcherItems = items;
 		if (!this._selectedCommand && items.length > 0) {
@@ -1159,6 +1207,10 @@ let SplitButton = class SplitButton extends ButtonElement {
 			this._selectedIcon = picked.icon;
 		}
 	}
+	_openOverlay() {
+		if (this._popoverMode) this._showPopover(false);
+		else this._menuTrigger?.openMenu();
+	}
 	render() {
 		return this.mode === `switcher` ? this._renderSwitcher() : this._renderDefault();
 	}
@@ -1171,13 +1223,36 @@ let SplitButton = class SplitButton extends ButtonElement {
         part="caret"
         ?disabled=${this.disabled}
         ?data-empty=${empty}
-        aria-haspopup="true"
+        aria-haspopup=${this._popoverMode ? `dialog` : `true`}
+        aria-expanded=${this._popoverMode ? String(this._popoverOpen) : nothing}
         aria-label=${ariaLabel}
+        @pointerdown=${this._handleCaretPointerDown}
         @click=${this._handleCaretClick}
         @keydown=${this._handleCaretKeyDown}
       >
         <ixfx-icon name="${iconName}"></ixfx-icon>
       </button>
+    `;
+	}
+	/** The caret with its overlay: the popover panel in popover mode, otherwise the menu trigger + menu. */
+	_renderCaretArea(iconName, ariaLabel, menuContent) {
+		const panel = html`
+      <div class="popover-panel" part="popover" popover="auto" @toggle=${this._onPopoverToggle}>
+        <slot name="popover" @slotchange=${this._onPopoverSlotChange}></slot>
+      </div>
+    `;
+		if (this._popoverMode) return html`
+        <div class="caret-area">
+          ${this._renderCaret(iconName, ariaLabel)}
+          ${this.popoverTarget === `` ? panel : nothing}
+        </div>
+      `;
+		return html`
+      <ixfx-menu-trigger .registry=${this.registry} .keyboardManager=${this.keyboardManager} @menu-command=${this._handleSwitcherMenuCommand}>
+        ${this._renderCaret(iconName, ariaLabel)}
+        ${menuContent}
+      </ixfx-menu-trigger>
+      ${panel}
     `;
 	}
 	_renderLoadingOrItems(items) {
@@ -1208,10 +1283,7 @@ let SplitButton = class SplitButton extends ButtonElement {
         >
           ${this._renderIcon()}${label}
         </button>
-        <ixfx-menu-trigger .registry=${this.registry} .keyboardManager=${this.keyboardManager}>
-          ${this._renderCaret(`chevron-down`, `Open menu`)}
-          ${menuContent}
-        </ixfx-menu-trigger>
+        ${this._renderCaretArea(`chevron-down`, `Open menu`, menuContent)}
       </div>
     `;
 	}
@@ -1238,12 +1310,11 @@ let SplitButton = class SplitButton extends ButtonElement {
         >
           ${primaryIcon}${primaryLabel}
         </button>
-        <ixfx-menu-trigger .registry=${this.registry} .keyboardManager=${this.keyboardManager}>
-          ${this._renderCaret(`chevron-right`, `Choose action`)}
+        ${this._renderCaretArea(`chevron-right`, `Choose action`, html`
           <ixfx-menu-container slot="menu">
             ${popupItems}
           </ixfx-menu-container>
-        </ixfx-menu-trigger>
+        `)}
       </div>
     `;
 	}
@@ -1386,10 +1457,33 @@ let SplitButton = class SplitButton extends ButtonElement {
         background: color-mix(in oklch, var(--surface-3, #ccc) 70%, transparent);
       }
 
-      ixfx-menu-trigger {
+      ixfx-menu-trigger,
+      .caret-area {
         display: inline-flex;
         align-items: stretch;
       }
+
+      button.caret {
+        anchor-name: --split-caret;
+      }
+
+      .popover-panel {
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        position-anchor: --split-caret;
+        top: calc(anchor(bottom) + var(--space-s, 4px));
+        right: anchor(right);
+        position-try-fallbacks: flip-block, flip-inline;
+        padding: var(--space-m, 8px);
+        background: var(--surface-3, #ccc);
+        color: var(--surface-3-text, #000);
+        border: var(--border, 1px solid #999);
+        border-radius: var(--radius-l, 8px);
+        box-shadow: 0 4px 16px color-mix(in oklch, black 30%, transparent);
+        max-width: min(90vw, var(--ixfx-split-button-popover-max-width, 40ch));
+        overflow: auto;
+      }
     `
 		];
 	}
@@ -1403,7 +1497,16 @@ __decorate([property({
 })], SplitButton.prototype, "defaultValue", void 0);
 __decorate([property({ attribute: false })], SplitButton.prototype, "itemsProvider", void 0);
 __decorate([property({ attribute: false })], SplitButton.prototype, "items", void 0);
+__decorate([property({
+	type: String,
+	attribute: `popover-target`
+})], SplitButton.prototype, "popoverTarget", void 0);
+__decorate([property({ attribute: false })], SplitButton.prototype, "popoverProvider", void 0);
 __decorate([query(`ixfx-menu-trigger`)], SplitButton.prototype, "_menuTrigger", void 0);
+__decorate([query(`.popover-panel`)], SplitButton.prototype, "_popoverPanel", void 0);
+__decorate([query(`button.caret`)], SplitButton.prototype, "_caretEl", void 0);
+__decorate([state()], SplitButton.prototype, "_hasPopoverSlot", void 0);
+__decorate([state()], SplitButton.prototype, "_popoverOpen", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedCommand", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedLabel", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedIcon", void 0);
@@ -11072,6 +11175,7 @@ var MulticolColumnController = class {
 		if (this.#listerEl) {
 			this.#pushItems();
 			this.#restoreAfterSync();
+			this.#applyTags();
 		}
 		if (r.changed) this.#onSelectionChange(this.id, r.selected, r.restored ? `restore` : `data`);
 	}
@@ -11110,6 +11214,38 @@ var MulticolColumnController = class {
 	#applyPartialKeys() {
 		if (!this.#listerEl) return;
 		for (const list of this.#listerEl.querySelectorAll(`ixfx-vertical-list`)) list.partialKeys = this.#partialKeys;
+		this.#applyTags();
+	}
+	#tagKeys;
+	#tagHook;
+	#tagBehaviour;
+	/**
+	* Item tags for this column: `keys` (by item key) merged with `hook` results,
+	* and the behaviour per tag. Forwarded to the column's inner lists.
+	*/
+	setTags(keys, hook, behaviour) {
+		this.#tagKeys = keys;
+		this.#tagHook = hook;
+		this.#tagBehaviour = behaviour;
+		this.#applyTags();
+	}
+	#applyTags() {
+		if (!this.#listerEl) return;
+		let merged = this.#tagKeys;
+		if (this.#tagHook) {
+			const byTag = /* @__PURE__ */ new Map();
+			for (const [tag, keys] of this.#tagKeys ?? []) byTag.set(tag, new Set(keys));
+			for (const item of this.#lastItems) for (const tag of this.#tagHook(item, this.id) ?? []) {
+				const set = byTag.get(tag) ?? /* @__PURE__ */ new Set();
+				set.add(item.key);
+				byTag.set(tag, set);
+			}
+			merged = byTag;
+		}
+		for (const list of this.#listerEl.querySelectorAll(`ixfx-vertical-list`)) {
+			list.tagBehaviour = this.#tagBehaviour;
+			list.tagKeys = merged;
+		}
 	}
 	#handleSelect = () => {
 		if (this.#syncingSelection || this.#syncsInFlight > 0) return;
@@ -11658,6 +11794,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	}
 	updated(changedProperties) {
 		if (changedProperties.has(`categories`)) this.#resolvePendingColumns();
+		if (changedProperties.has(`tags`)) this.refreshTags();
 		const seedCategory = flattenCategories(this.categories)[0];
 		if (!this._autoSeeded && this._columns.length === 0 && seedCategory) {
 			this._autoSeeded = true;
@@ -11729,6 +11866,30 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	_getCategoryTooltip(key) {
 		return findCategory(this.categories, key)?.description ?? `Change category`;
 	}
+	#tagKeys;
+	#tagBehaviour;
+	/** Tags by item key, in every column with an item of that key: tag name → keys. */
+	get tagKeys() {
+		return this.#tagKeys;
+	}
+	set tagKeys(value) {
+		if (sameTagKeys(value, this.#tagKeys)) return;
+		this.#tagKeys = value;
+		this.refreshTags();
+	}
+	/** Interaction flags per tag name (`selectable`, `focusable`, `draggable`, `searchable`); the most restrictive flag wins. */
+	get tagBehaviour() {
+		return this.#tagBehaviour;
+	}
+	set tagBehaviour(value) {
+		if (value === this.#tagBehaviour) return;
+		this.#tagBehaviour = value;
+		this.refreshTags();
+	}
+	/** Re-evaluate every column's tags. */
+	refreshTags() {
+		for (const col of this._columns) col.setTags(this.#tagKeys, this.tags, this.#tagBehaviour);
+	}
 	#partialKeys;
 	#columnPartialKeys;
 	/**
@@ -11775,6 +11936,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	#createController(id, category) {
 		const controller = this.#createColumnController(id, category);
 		controller.setPartialKeys(this.#partialFor(id));
+		controller.setTags(this.#tagKeys, this.tags, this.#tagBehaviour);
 		return controller;
 	}
 	#createColumnController(id, category) {
@@ -12141,6 +12303,7 @@ __decorate([state()], MulticolListElement.prototype, "_resizingColumnId", void 0
 __decorate([state()], MulticolListElement.prototype, "_draggingColumnId", void 0);
 __decorate([state()], MulticolListElement.prototype, "_dropCaretX", void 0);
 __decorate([query(`#container`)], MulticolListElement.prototype, "_containerEl", void 0);
+__decorate([property({ attribute: false })], MulticolListElement.prototype, "tags", void 0);
 MulticolListElement = __decorate([safeCustomElement(`ixfx-multicol-list`)], MulticolListElement);
 function withoutKey(map, key) {
 	const next = new Map(map);
@@ -17993,4 +18156,4 @@ function monitorIndeterminate(targetElOrQuery, watchedElsOrQueries) {
 function init() {
 	console.log(`Init`);
 }
-export { AGE_UNITS, AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_FORCE_OPTIONS, DEFAULT_SIBLING_SPACING, DRAG_THRESHOLD_PX, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DateInputElement, DetailListElement, DockHostElement, DockPanelElement, EASY_CONNECT_MARGIN, EDGE_CORNER_RADIUS, EMPTY_FLAGS, EMPTY_GROUP_LABEL, EMPTY_KEYS, EditableLabel, EditableNumber, FlatListElement, FormElement, FormGroupElement, FormOptionsElement, FormPartElement, FormRowElement, GraphNodeElement, GraphPortElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListGroupHeaderElement, ListNativeDragController, ListSearchController, ListSelectionController, MARQUEE_THRESHOLD_PX, MAX_BLINK_HZ, MAX_FLOW_SPEED, MAX_PENDING_KEYS, MarqueeController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NODE_SHAPES, NarrowedTextElement, NodeDragController, NodeGraphElement, NotificationManager, NotificationPillElement, PARTIAL_DESCRIPTION, PanTextElement, PanZoomController, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RESIZE_HANDLES, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SCROLL_HOVER_SUPPRESS_ATTR, SIZE_UNITS, SUNBURST_PATH_SEPARATOR, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SunburstTreeListElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, UnitInputElement, VIEW_STATE_CHANGE, VIEW_STATE_VERSION, VerticalListElement, ViewStateController, WireDragController, XyPad, addPanelToStack, addWire, anchorFromRow, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applyPartialAttributes, applySnapshot, applyTreeDrop, attachTimelineInteractions, bestUnit, bindViewState, blinkPeriodSeconds, bottomDrawerCommandId, boundsOf, buildHighlightTargets, buildModel, canConnect, capFlags, capKeys, captionForEntry, captureElementScroll, clampToDisk, clampZoom, clearHighlights, collapsedOffset, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, combineSelection, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeSunburstLayout, computeTreemapLayout, connectContext, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createNotificationManager, createPillRenderer, createScrollHoverGuard, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createValueResolver, createVerticalListAdapter, cycleBlockedNodes, decomposeViewIsometry, defaultGroupLabel, defaultSide, defaultSunburstValueAccessor, distribute, dropTargetFor, edgeId, edgeMidpoint, edgePath, edgeShape, ensurePort, euclideanRadiusForHyperbolicDistance, extendFromSide, extractStack, findEmptiedStacks, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleKeyPath, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findProximityConnection, findSnapTarget, findStackOf, findStackPathByName, findSunburstId, findSunburstNodeById, findTreemapNode, findTreemapPath, findValidWire, fitBounds, fitRects, flagsFromRecord, flagsToRecord, flowToScreen, forceMovement, forcePin, forcePositions, forceState, forceStep, formatDateInput, fromEdges, geodesicInterpolate, geodesicPath, geodesicSegment, gestureOf, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hasWire, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, inDegreeOf, inEasyConnectZone, incomingEdge, incomingEdges, init, insertBeside, invertIsometry, isDragging, isEditableTarget, isHyperbolicDescendantId, isMultiMode, isNodeShape, isPartialKey, isResizeHandle, isSplit, isStack, isSunburstAncestorId, isViewStateful, keyForElement, keysAsFlags, keysToArray, listItemFadeKeyframes, listSearchStyles, marqueeStyle, measureNode, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, nodeGraphStyles, nodesInRect, norm, normalise, normaliseConnection, normaliseValue, normalize, onUserScrollIntent, outDegreeOf, panBy, panelGapIndex, parseColourScaleAttr, parseDateInput, parseLayout, parsePortId, partitionByGroup, partitionFlags, partitionKeys, pickStartPort, poincareDistance, pointerOverAnyHost, polylineMidpoint, polylinePath, polylineShape, portId, prefersReducedMotion, preserveRestoreWeights, proximityFactor, pruneDraggedDescendants, readBaseColour, rectFromPoints, rectGap, rectsIntersect, registerFontIcon, registerIcon, registerListSearchCommands, removeNode, removeNodes, removePanelFromStack, removeWire, renderWires, resizeRect, resolveConnection, resolveCssVars, resolveGrid, resolveGroupKey, resolveIcicleKeyPath, resolveLeafPath, resolveTracks, restoreElementScroll, rotationIsometry, sameKeySet, sanitizeFlowSpeed, screenToFlow, scrollToOffset, selectionAfterEdgeClick, selectionAfterNodePress, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, settled, shapeSpec, smoothStep, snapshotNonEmptyStacks, startListItemOutAnimation, stepPoints, sunburstChildId, sunburstHasChildren, sunburstIdToPath, sunburstParentId, sunburstPathToId, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toBase, toEdges, toGroupKey, toNodeGraph, toSnapshot, toggleInSet, toolbarGapIndex, translationFromOrigin, typesCompatible, viewIsometry, walk, wantsMarquee, withEntry, withWireFlow, withoutFlag, wrapRoot, zoomAt };
+export { AGE_UNITS, AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, CheckedSelect, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DEFAULT_FORCE_OPTIONS, DEFAULT_ITEM_TAG_FLAGS, DEFAULT_SIBLING_SPACING, DRAG_THRESHOLD_PX, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DateInputElement, DetailListElement, DockHostElement, DockPanelElement, EASY_CONNECT_MARGIN, EDGE_CORNER_RADIUS, EMPTY_FLAGS, EMPTY_GROUP_LABEL, EMPTY_KEYS, EditableLabel, EditableNumber, FlatListElement, FormElement, FormGroupElement, FormOptionsElement, FormPartElement, FormRowElement, GraphNodeElement, GraphPortElement, GridListElement, GroupedItemListerElement, HyperbolicTreeListElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, ItemTagResolver, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListGroupHeaderElement, ListNativeDragController, ListSearchController, ListSelectionController, MARQUEE_THRESHOLD_PX, MAX_BLINK_HZ, MAX_FLOW_SPEED, MAX_PENDING_KEYS, MarqueeController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NODE_SHAPES, NarrowedTextElement, NodeDragController, NodeGraphElement, NotificationManager, NotificationPillElement, PARTIAL_DESCRIPTION, PanTextElement, PanZoomController, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RESIZE_HANDLES, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SCROLL_HOVER_SUPPRESS_ATTR, SIZE_UNITS, SUNBURST_PATH_SEPARATOR, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SunburstTreeListElement, SwipeElement, TAG_PART_PREFIX, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, UnitInputElement, VIEW_STATE_CHANGE, VIEW_STATE_VERSION, VerticalListElement, ViewStateController, WireDragController, XyPad, addPanelToStack, addWire, anchorFromRow, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applyIsometry, applyPartialAttributes, applySnapshot, applyTagAttributes, applyTreeDrop, attachTimelineInteractions, bestUnit, bindViewState, blinkPeriodSeconds, bottomDrawerCommandId, boundsOf, buildHighlightTargets, buildModel, canConnect, capFlags, capKeys, captionForEntry, captureElementScroll, clampToDisk, clampZoom, clearHighlights, collapsedOffset, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, collectTags, combineSelection, composeIsometry, computeCanonicalPositions, computeColour, computeHyperbolicLayout, computeIcicleLayout, computeLeafGeoms, computeSunburstLayout, computeTreemapLayout, connectContext, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createNotificationManager, createPillRenderer, createScrollHoverGuard, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createValueResolver, createVerticalListAdapter, cycleBlockedNodes, decomposeViewIsometry, defaultGroupLabel, defaultSide, defaultSunburstValueAccessor, distribute, dropTargetFor, edgeId, edgeMidpoint, edgePath, edgeShape, ensurePort, euclideanRadiusForHyperbolicDistance, extendFromSide, extractStack, findEmptiedStacks, findHyperbolicIdOf, findHyperbolicKeyPath, findHyperbolicNode, findHyperbolicPath, findHyperbolicPathById, findIcicleKeyPath, findIcicleNode, findIciclePath, findNode, findPanelNode, findParentOf, findProximityConnection, findSnapTarget, findStackOf, findStackPathByName, findSunburstId, findSunburstNodeById, findTreemapNode, findTreemapPath, findValidWire, fitBounds, fitRects, flagsFromRecord, flagsToRecord, flowToScreen, forceMovement, forcePin, forcePositions, forceState, forceStep, formatDateInput, fromEdges, geodesicInterpolate, geodesicPath, geodesicSegment, gestureOf, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, hasWire, hyperbolicBranchId, hyperbolicChildIds, hyperbolicDistanceForEuclideanRadius, hyperbolicIdDepth, hyperbolicRelativeFrame, iconBus, identityIsometry, inDegreeOf, inEasyConnectZone, incomingEdge, incomingEdges, init, insertBeside, invertIsometry, isDragging, isEditableTarget, isHyperbolicDescendantId, isMultiMode, isNodeShape, isPartialKey, isResizeHandle, isSplit, isStack, isSunburstAncestorId, isViewStateful, keyForElement, keysAsFlags, keysToArray, listItemFadeKeyframes, listSearchStyles, marqueeStyle, measureNode, mobiusAdd, mobiusFromOrigin, mobiusToOrigin, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, nodeGraphStyles, nodesInRect, norm, normalise, normaliseConnection, normaliseValue, normalize, onUserScrollIntent, outDegreeOf, panBy, panelGapIndex, parseColourScaleAttr, parseDateInput, parseLayout, parsePortId, partitionByGroup, partitionFlags, partitionKeys, pickStartPort, poincareDistance, pointerOverAnyHost, polylineMidpoint, polylinePath, polylineShape, portId, prefersReducedMotion, preserveRestoreWeights, proximityFactor, pruneDraggedDescendants, readBaseColour, rectFromPoints, rectGap, rectsIntersect, registerFontIcon, registerIcon, registerListSearchCommands, removeNode, removeNodes, removePanelFromStack, removeWire, renderWires, resizeRect, resolveConnection, resolveCssVars, resolveGrid, resolveGroupKey, resolveIcicleKeyPath, resolveLeafPath, resolveTagFlags, resolveTracks, restoreElementScroll, rotationIsometry, sameKeySet, sameTagKeys, sameTags, sanitizeFlowSpeed, screenToFlow, scrollToOffset, selectionAfterEdgeClick, selectionAfterNodePress, serializeLayout, setActive, setIconFont, setPanelRestoreWeight, settled, shapeSpec, smoothStep, snapshotNonEmptyStacks, startListItemOutAnimation, stepPoints, sunburstChildId, sunburstHasChildren, sunburstIdToPath, sunburstParentId, sunburstPathToId, svgToDataUri, swapLeaves, tagPartTokens, tagsAttribute, tickledItemStyles, tickledStyles, timelineStyles, toBase, toEdges, toGroupKey, toNodeGraph, toSnapshot, toggleInSet, toolbarGapIndex, translationFromOrigin, typesCompatible, viewIsometry, walk, wantsMarquee, withEntry, withWireFlow, withoutFlag, wrapRoot, zoomAt };

package/dist/interaction-DNuFnTm0.js

@@ -0,0 +1,3 @@
+import "./list-native-drag-controller-B_INa6_G.js";
+import "./tickled-controller-BsFFr_1N.js";
+import "./tickled-styles-pnieYweS.js";

package/dist/item-tags-Dz-jQq-4.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Caller-assigned item tags, shared by every list-like component
+ * (`ixfx-grid-list`, `ixfx-detail-list`, `ixfx-data-grid`, `ixfx-multicol-list`).
+ *
+ * What a tag *means* belongs to the caller. The component only
+ *
+ * 1. exposes it for styling: a `tag-<name>` token in the item's `part`, and
+ *    `data-tags` (space-separated, so `[data-tags~="foo"]` matches);
+ * 2. applies the generic interaction flags declared for it in `tagBehaviour`.
+ *
+ * Tokens are prefixed so a caller tag called `selected` cannot collide with
+ * the built-in state token.
+ */
+/** Generic interaction flags a tag can switch off. Omitted flags keep the default (`true`). */
+type ItemTagBehaviourFlags = {
+  /** `false`: no selection or tickle, no `list-select-intent`; range and select-all skip the item. */
+  selectable?: boolean;
+  /** `false`: keyboard cursor movement skips the item. */
+  focusable?: boolean;
+  /** `false`: no drag starts from the item. */
+  draggable?: boolean;
+  /** `false`: the item is left out of incremental search. */
+  searchable?: boolean;
+};
+/** Behaviour declarations keyed by tag name. */
+type ItemTagBehaviour = Readonly<Record<string, ItemTagBehaviourFlags>>;
+/** Tag assignment by key set: tag name → keys that carry it. Like `partialKeys`, for tags kept apart from the data. */
+type ItemTagKeys = ReadonlyMap<string, ReadonlySet<string>>;
+/** The effective flags for an item: every flag is explicit. */
+type ResolvedItemTagFlags = Required<ItemTagBehaviourFlags>;
+declare const DEFAULT_ITEM_TAG_FLAGS: ResolvedItemTagFlags;
+/** Prefix of a tag's `part` token. */
+declare const TAG_PART_PREFIX = "tag-";
+/**
+ * Merge the tags from the per-item hook and from `tagKeys`, de-duplicated,
+ * in first-seen order. Empty and whitespace-containing names are dropped
+ * (they could not be a single `part` token).
+ */
+declare function collectTags(key: string | undefined, fromHook: readonly string[] | undefined, tagKeys: ItemTagKeys | undefined): readonly string[];
+/** Most restrictive wins: any `false` among the item's tags beats the default and any `true`. */
+declare function resolveTagFlags(tags: readonly string[], behaviour: ItemTagBehaviour | undefined): ResolvedItemTagFlags;
+/** ` tag-foo tag-bar` — append to a `part` value. Empty string when there are no tags. */
+declare function tagPartTokens(tags: readonly string[]): string;
+/** Value for `data-tags` (`"foo bar"`), or `undefined` when there are no tags. */
+declare function tagsAttribute(tags: readonly string[]): string | undefined;
+/** Reflect tags onto an element (element mode / light DOM): `data-tags`, and `tag-*` tokens in `part` it didn't set. */
+declare function applyTagAttributes(el: Element, tags: readonly string[], basePart?: string): void;
+/** Whether two tag lists are identical (order matters; lists are tiny). */
+declare function sameTags(a: readonly string[], b: readonly string[]): boolean;
+/** Whether two `tagKeys` maps hold the same tags with the same keys. */
+declare function sameTagKeys(a: ItemTagKeys | undefined, b: ItemTagKeys | undefined): boolean;
+/**
+ * Per-component holder for the two assignment forms and `tagBehaviour`.
+ * Resolves an item's tags and flags; caches nothing (callers re-render on change).
+ */
+declare class ItemTagResolver {
+  tagKeys: ItemTagKeys | undefined;
+  behaviour: ItemTagBehaviour | undefined;
+  /** Tags for an item, merging the hook's result with `tagKeys`. */
+  tagsFor(key: string | undefined, fromHook?: readonly string[]): readonly string[];
+  flagsFor(tags: readonly string[]): ResolvedItemTagFlags;
+  /** Convenience: flags for an item straight from its key and hook result. */
+  flagsForItem(key: string | undefined, fromHook?: readonly string[]): ResolvedItemTagFlags;
+}
+export { ItemTagResolver as a, applyTagAttributes as c, sameTagKeys as d, sameTags as f, ItemTagKeys as i, collectTags as l, tagsAttribute as m, ItemTagBehaviour as n, ResolvedItemTagFlags as o, tagPartTokens as p, ItemTagBehaviourFlags as r, TAG_PART_PREFIX as s, DEFAULT_ITEM_TAG_FLAGS as t, resolveTagFlags as u };

package/dist/{list-native-drag-controller-Brk30s5d.js → list-native-drag-controller-B_INa6_G.js}

@@ -1,5 +1,110 @@
 import { n as getIconEntry, r as getIconFont } from "./registry-DcF0fO7l.js";
 import { css } from "lit";
+// src/interaction/item-tags.ts
+const DEFAULT_ITEM_TAG_FLAGS = Object.freeze({
+	selectable: true,
+	focusable: true,
+	draggable: true,
+	searchable: true
+});
+const NO_TAGS = Object.freeze([]);
+/** Prefix of a tag's `part` token. */
+const TAG_PART_PREFIX = `tag-`;
+/**
+* Merge the tags from the per-item hook and from `tagKeys`, de-duplicated,
+* in first-seen order. Empty and whitespace-containing names are dropped
+* (they could not be a single `part` token).
+*/
+function collectTags(key, fromHook, tagKeys) {
+	let out;
+	const add = (tag) => {
+		if (tag === `` || /\s/.test(tag)) return;
+		out ??= [];
+		if (!out.includes(tag)) out.push(tag);
+	};
+	if (fromHook) for (const tag of fromHook) add(tag);
+	if (tagKeys && key !== void 0) {
+		for (const [tag, keys] of tagKeys) if (keys.has(key)) add(tag);
+	}
+	return out ?? NO_TAGS;
+}
+/** Most restrictive wins: any `false` among the item's tags beats the default and any `true`. */
+function resolveTagFlags(tags, behaviour) {
+	if (tags.length === 0 || !behaviour) return DEFAULT_ITEM_TAG_FLAGS;
+	let selectable = true;
+	let focusable = true;
+	let draggable = true;
+	let searchable = true;
+	for (const tag of tags) {
+		const flags = Object.hasOwn(behaviour, tag) ? behaviour[tag] : void 0;
+		if (!flags) continue;
+		if (flags.selectable === false) selectable = false;
+		if (flags.focusable === false) focusable = false;
+		if (flags.draggable === false) draggable = false;
+		if (flags.searchable === false) searchable = false;
+	}
+	return selectable && focusable && draggable && searchable ? DEFAULT_ITEM_TAG_FLAGS : {
+		selectable,
+		focusable,
+		draggable,
+		searchable
+	};
+}
+/** ` tag-foo tag-bar` — append to a `part` value. Empty string when there are no tags. */
+function tagPartTokens(tags) {
+	let out = ``;
+	for (const tag of tags) out += ` ${TAG_PART_PREFIX}${tag}`;
+	return out;
+}
+/** Value for `data-tags` (`"foo bar"`), or `undefined` when there are no tags. */
+function tagsAttribute(tags) {
+	return tags.length === 0 ? void 0 : tags.join(` `);
+}
+/** Reflect tags onto an element (element mode / light DOM): `data-tags`, and `tag-*` tokens in `part` it didn't set. */
+function applyTagAttributes(el, tags, basePart) {
+	const value = tagsAttribute(tags);
+	if (value === void 0) el.removeAttribute(`data-tags`);
+	else el.setAttribute(`data-tags`, value);
+	if (basePart !== void 0) {
+		const part = basePart + tagPartTokens(tags);
+		if (part === ``) el.removeAttribute(`part`);
+		else el.setAttribute(`part`, part);
+	}
+}
+/** Whether two tag lists are identical (order matters; lists are tiny). */
+function sameTags(a, b) {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+	return a.every((tag, i) => tag === b[i]);
+}
+/** Whether two `tagKeys` maps hold the same tags with the same keys. */
+function sameTagKeys(a, b) {
+	if (a === b) return true;
+	if (!a || !b || a.size !== b.size) return false;
+	for (const [tag, keys] of a) {
+		const other = b.get(tag);
+		if (!other || other.size !== keys.size) return false;
+		for (const key of keys) if (!other.has(key)) return false;
+	}
+	return true;
+}
+/**
+* Per-component holder for the two assignment forms and `tagBehaviour`.
+* Resolves an item's tags and flags; caches nothing (callers re-render on change).
+*/
+var ItemTagResolver = class {
+	/** Tags for an item, merging the hook's result with `tagKeys`. */
+	tagsFor(key, fromHook) {
+		return collectTags(key, fromHook, this.tagKeys);
+	}
+	flagsFor(tags) {
+		return resolveTagFlags(tags, this.behaviour);
+	}
+	/** Convenience: flags for an item straight from its key and hook result. */
+	flagsForItem(key, fromHook) {
+		return resolveTagFlags(collectTags(key, fromHook, this.tagKeys), this.behaviour);
+	}
+};
 // src/interaction/list-drag-preview-row.ts
 const ROW_MIN = 24;
 const ROW_MAX = 36;
@@ -818,4 +923,4 @@ var ListNativeDragController = class {
 		} catch {}
 	};
 };
-export { listItemFadeKeyframes as a, captionForEntry as c, animateListItemOut as i, createDefaultListDragPreview as l, LIST_ITEM_MOTION_MS as n, prefersReducedMotion as o, animateListItemIn as r, startListItemOutAnimation as s, ListNativeDragController as t };
+export { sameTags as _, listItemFadeKeyframes as a, captionForEntry as c, ItemTagResolver as d, TAG_PART_PREFIX as f, sameTagKeys as g, resolveTagFlags as h, animateListItemOut as i, createDefaultListDragPreview as l, collectTags as m, LIST_ITEM_MOTION_MS as n, prefersReducedMotion as o, applyTagAttributes as p, animateListItemIn as r, startListItemOutAnimation as s, ListNativeDragController as t, DEFAULT_ITEM_TAG_FLAGS as u, tagPartTokens as v, tagsAttribute as y };