luxen-ui 0.9.0 → 0.9.2

package/cdn/standalone.js

@@ -5081,7 +5081,7 @@ __decorate([n$1({ attribute: "min-width" })], Dropdown.prototype, "minWidth", nu
 define("dropdown", Dropdown);
 //#endregion
 //#region src/html/elements/dropdown-item/dropdown-item.ts
-var styles$10 = r$6(":host {\n  display: block;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0.375rem 0.5rem;\n  cursor: pointer;\n  outline: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  color: var(--l-color-text-primary, CanvasText);\n  white-space: nowrap;\n}\n\n.item:focus-visible {\n  background: var(--l-color-bg-state-hover);\n}\n\n@media (hover: hover) {\n  .item:hover {\n    background: var(--l-color-bg-state-hover);\n  }\n}\n\n.check {\n  display: flex;\n  width: 16px;\n  flex-shrink: 0;\n}\n\n:host(:not([checked])) .check svg {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  display: flex;\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n}\n");
+var styles$10 = r$6(":host {\n  display: block;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0.375rem 0.5rem;\n  cursor: pointer;\n  outline: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  color: var(--l-color-text-primary, CanvasText);\n  white-space: nowrap;\n  text-align: start;\n}\n\n.item:focus-visible {\n  background: var(--l-color-bg-state-hover);\n}\n\n@media (hover: hover) {\n  .item:hover {\n    background: var(--l-color-bg-state-hover);\n  }\n}\n\n.check {\n  display: flex;\n  width: 16px;\n  flex-shrink: 0;\n}\n\n:host(:not([checked])) .check svg {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  display: flex;\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n}\n");
 /**
 * A menu item for use inside `<l-dropdown>`.
 *
@@ -33104,12 +33104,18 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
 		this.#_toolbarPlacement_accessor_storage = "top";
 		this.#_autofocus_accessor_storage = false;
 		this.#_placeholder_accessor_storage = "";
-		this.#__emojiPickerActive_accessor_storage = false;
+		this._emojiOpenAtPointerDown = false;
 		this._onFocus = () => {
 			if (!this.disabled && document.activeElement !== this.editor?.view.dom) this.focus();
 		};
 		this._onKeyDown = (event) => {
-			if (event.key === "Escape") this._emojiPickerActive = false;
+			if (event.key !== "Escape" || !this._emojiPicker?.matches(":popover-open")) return;
+			this._emojiPicker.hidePopover();
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		this._onEmojiButtonPointerDown = () => {
+			this._emojiOpenAtPointerDown = !!this._emojiPicker?.matches(":popover-open");
 		};
 	}
 	static {
@@ -33171,13 +33177,6 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
 	set placeholder(value) {
 		this.#_placeholder_accessor_storage = value;
 	}
-	#__emojiPickerActive_accessor_storage;
-	get _emojiPickerActive() {
-		return this.#__emojiPickerActive_accessor_storage;
-	}
-	set _emojiPickerActive(value) {
-		this.#__emojiPickerActive_accessor_storage = value;
-	}
 	get validationTarget() {
 		return this._editorRoot;
 	}
@@ -33203,19 +33202,18 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
 			onTransaction: () => this.requestUpdate(),
 			onSelectionUpdate: () => this.requestUpdate()
 		});
-		document.addEventListener("keydown", this._onKeyDown);
 		this.addEventListener("focus", this._onFocus);
+		document.addEventListener("keydown", this._onKeyDown, true);
 		this._syncValue();
 		this.requestUpdate();
 	}
 	updated(changed) {
 		if (changed.has("disabled") && this.editor) this.editor.setEditable(!this.disabled);
-		if (changed.has("_emojiPickerActive")) this._positionEmojiPicker();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.removeEventListener("keydown", this._onKeyDown);
 		this.removeEventListener("focus", this._onFocus);
+		document.removeEventListener("keydown", this._onKeyDown, true);
 		this.editor?.destroy();
 		this._editorRoot?.remove();
 		this._emojiPicker?.remove();
@@ -33328,24 +33326,28 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
 		this._editorRoot = root;
 		return root;
 	}
-	async _toggleEmojiPicker() {
-		if (!this._emojiPicker) {
+	async _onEmojiButtonClick(event) {
+		const picker = await this._ensureEmojiPicker();
+		if (event.detail === 0 ? picker.matches(":popover-open") : this._emojiOpenAtPointerDown) {
+			if (picker.matches(":popover-open")) picker.hidePopover();
+		} else if (!picker.matches(":popover-open")) picker.showPopover();
+	}
+	_ensureEmojiPicker() {
+		if (this._emojiPicker) return Promise.resolve(this._emojiPicker);
+		return this._emojiPickerPromise ??= (async () => {
 			const [{ Picker }, { default: data }] = await Promise.all([Promise.resolve().then(() => (init_module(), module_exports)), Promise.resolve().then(() => (init_native(), native_exports))]);
 			const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-			this._emojiPicker = new Picker({
+			const picker = new Picker({
 				parent: this._topLayerContainer(),
 				data,
 				theme: dark ? "dark" : "light",
 				onEmojiSelect: ({ native }) => {
 					this.editor.chain().focus().insertContent(native).run();
-					this._emojiPickerActive = false;
-				},
-				onClickOutside: (event) => {
-					if (!event.composedPath().includes(this._emojiButton)) this._emojiPickerActive = false;
+					picker.hidePopover();
 				}
 			});
-			this._emojiPicker.setAttribute("popover", "manual");
-			Object.assign(this._emojiPicker.style, {
+			picker.setAttribute("popover", "auto");
+			Object.assign(picker.style, {
 				position: "fixed",
 				inset: "auto",
 				margin: "0",
@@ -33353,8 +33355,12 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
 				border: "0",
 				background: "transparent"
 			});
-		}
-		this._emojiPickerActive = !this._emojiPickerActive;
+			picker.addEventListener("toggle", (event) => {
+				if (event.newState === "open") this._positionEmojiPicker();
+			});
+			this._emojiPicker = picker;
+			return picker;
+		})();
 	}
 	/**
 	* The element the emoji picker is appended to. Inside a modal `<l-dialog>` the
@@ -33378,13 +33384,8 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
 	}
 	async _positionEmojiPicker() {
 		const button = this._emojiButton;
-		if (!button || !this._emojiPicker) return;
 		const picker = this._emojiPicker;
-		if (!this._emojiPickerActive) {
-			if (picker.matches(":popover-open")) picker.hidePopover();
-			return;
-		}
-		if (!picker.matches(":popover-open")) picker.showPopover();
+		if (!button || !picker || !picker.matches(":popover-open")) return;
 		const { x, y } = await computePosition(button, picker, {
 			strategy: "fixed",
 			placement: "bottom",
@@ -33399,7 +33400,7 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
 			top: `${y}px`
 		});
 	}
-	_renderButton(command, label, icon, onClick, active = false) {
+	_renderButton(command, label, icon, onClick, active = false, onPointerDown) {
 		const iconTag = staticTag("icon");
 		return u`
       <button
@@ -33410,6 +33411,7 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
         aria-label=${label}
         aria-pressed=${active}
         title=${label}
+        @pointerdown=${onPointerDown}
         @click=${onClick}
       >
         <${iconTag} name=${icon}></${iconTag}>
@@ -33437,7 +33439,7 @@ var ProseEditor = class extends LuxenFormAssociatedElement {
 			case "code-block": return this._renderButton("code-block", "Code block", "ri:code-box-line", () => this.toggleCodeBlock(), editor.isActive("codeBlock"));
 			case "horizontal-rule": return this._renderButton("horizontal-rule", "Horizontal rule", "ri:separator", () => this.setHorizontalRule());
 			case "link": return this._renderButton("link", "Link", "ri:link", () => this.toggleLink(), editor.isActive("link"));
-			case "emoji": return this._renderButton("emoji", "Emoji", "ri:emotion-line", () => void this._toggleEmojiPicker());
+			case "emoji": return this._renderButton("emoji", "Emoji", "ri:emotion-line", (event) => void this._onEmojiButtonClick(event), false, this._onEmojiButtonPointerDown);
 			case "attachment": return this._renderButton("attachment", "Attach file", "ri:attachment-2", () => this.emit("add-file"));
 			case "undo": return this._renderButton("undo", "Undo", "ri:arrow-go-back-line", () => this.undo());
 			case "redo": return this._renderButton("redo", "Redo", "ri:arrow-go-forward-line", () => this.redo());
@@ -33487,7 +33489,6 @@ __decorate([n$1({
 	reflect: true
 })], ProseEditor.prototype, "autofocus", null);
 __decorate([n$1()], ProseEditor.prototype, "placeholder", null);
-__decorate([r$2()], ProseEditor.prototype, "_emojiPickerActive", null);
 //#endregion
 //#region src/html/elements/prose-editor/index.ts
 define("prose-editor", ProseEditor);
@@ -34533,10 +34534,13 @@ __decorate([n$1()], Tooltip.prototype, "trigger", null);
 define("tooltip", Tooltip);
 //#endregion
 //#region src/html/elements/tree/tree.ts
-var styles$1 = r$6(":host {\n  --indent-size: 1rem;\n  --indent-guide-width: 1px;\n  --indent-guide-style: solid;\n  --indent-guide-color: var(--l-color-border-interactive, light-dark(#d1d5db, #3a4048));\n  --row-height: 1.75rem;\n  --row-padding-inline: 0.25rem;\n  --chevron-size: 1.125rem;\n  --item-gap: 0.375rem;\n\n  display: block;\n  color: var(--l-color-text-primary, CanvasText);\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.tree {\n  display: block;\n  outline: none;\n}\n\n.tree:focus-visible {\n  outline: 2px solid var(--l-focus-ring, Highlight);\n  outline-offset: 2px;\n  border-radius: 0.375rem;\n}\n");
+var styles$1 = r$6(":host {\n  --indent-size: 1rem;\n  --indent-guide-width: 1px;\n  --indent-guide-style: solid;\n  --indent-guide-color: var(--l-color-border-interactive, light-dark(#d1d5db, #3a4048));\n  --row-height: 1.75rem;\n  --row-padding-inline: 0.25rem;\n  --chevron-size: 1.125rem;\n  --item-gap: 0.375rem;\n\n  display: block;\n  color: var(--l-color-text-primary, CanvasText);\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.tree {\n  display: block;\n  outline: none;\n}\n\n.tree:focus-visible {\n  outline: 2px solid var(--l-focus-ring);\n  outline-offset: 2px;\n  border-radius: 0.375rem;\n}\n");
 /**
 * A hierarchical tree view composed of `<l-tree-item>` children.
 *
+* The host carries `role="tree"`, so give it an accessible name with
+* `aria-label` or `aria-labelledby` (e.g. `<l-tree aria-label="Files">`).
+*
 * @slot - One or more `l-tree-item` elements.
 *
 * @csspart base - The root tree container.
@@ -34557,6 +34561,7 @@ var styles$1 = r$6(":host {\n  --indent-size: 1rem;\n  --indent-guide-width: 1px
 var Tree = class extends LuxenElement {
 	constructor(..._args) {
 		super(..._args);
+		this._internals = this.attachInternals();
 		this._lastFocusedItem = null;
 		this.#_selection_accessor_storage = "single";
 		this.#_independent_accessor_storage = false;
@@ -34697,6 +34702,8 @@ var Tree = class extends LuxenElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		this._internals.role = "tree";
+		if (!this.hasAttribute("role")) this.setAttribute("role", "tree");
 		this._mutationObserver = new MutationObserver(() => this._syncAll());
 		this._mutationObserver.observe(this, {
 			childList: true,
@@ -34711,6 +34718,11 @@ var Tree = class extends LuxenElement {
 		this.removeEventListener("l-tree-item-toggle", this._onItemToggle);
 	}
 	updated(changed) {
+		if (changed.has("selection")) {
+			const multiselectable = this.selection === "multiple" ? "true" : "false";
+			this._internals.ariaMultiSelectable = multiselectable;
+			this.setAttribute("aria-multiselectable", multiselectable);
+		}
 		if (changed.has("selection") || changed.has("independent")) this._syncAll();
 	}
 	/** Returns all items in document (flat) order, including nested ones. */
@@ -34739,14 +34751,24 @@ var Tree = class extends LuxenElement {
 			return;
 		}
 		const showCheckbox = this.selection === "multiple";
-		for (const root of roots) this._syncSubtree(root, 0, showCheckbox);
+		this._syncLevel(roots, 0, showCheckbox);
 		this._updateBranchStates();
 		this._ensureTabStop();
 	}
-	_syncSubtree(item, depth, showCheckbox) {
-		item.depth = depth;
-		item.showCheckbox = showCheckbox && this._canShowCheckboxOn(item);
-		for (const child of item.getChildrenItems()) this._syncSubtree(child, depth + 1, showCheckbox);
+	/**
+	* Sync depth, checkbox visibility and ARIA position for a sibling group, then
+	* recurse. `aria-level`/`aria-setsize`/`aria-posinset` let screen readers
+	* announce "level N, M of K" — valuable here because `lazy` items mean the
+	* full set isn't always in the DOM (see WAI-ARIA Tree View pattern).
+	*/
+	_syncLevel(items, depth, showCheckbox) {
+		const setSize = items.length;
+		items.forEach((item, index) => {
+			item.depth = depth;
+			item.showCheckbox = showCheckbox && this._canShowCheckboxOn(item);
+			item.setPosition(depth + 1, index + 1, setSize);
+			this._syncLevel(item.getChildrenItems(), depth + 1, showCheckbox);
+		});
 	}
 	_canShowCheckboxOn(_item) {
 		if (this.selection !== "multiple") return false;
@@ -34781,6 +34803,7 @@ var Tree = class extends LuxenElement {
 		switch (this.selection) {
 			case "single":
 				this._setSingleSelection(item);
+				if (!item.isLeaf()) item.toggle();
 				break;
 			case "leaf":
 				if (item.isLeaf()) this._setSingleSelection(item);
@@ -34864,8 +34887,6 @@ var Tree = class extends LuxenElement {
       <div
         class="tree"
         part="base"
-        role="tree"
-        aria-multiselectable=${this.selection === "multiple" ? "true" : "false"}
         @click=${this._onClick}
         @keydown=${this._onKeyDown}
         @focusin=${this._onFocusIn}
@@ -34894,7 +34915,7 @@ define("tree", Tree);
 var checkbox_appearance_styles_default = r$6("/* Shared checkbox appearance — the visual skin behind `.l-checkbox`.\n\n   Colocated with its `checkbox-appearance.styles.ts` wrapper so Shadow-DOM\n   elements that render their own native checkbox (e.g. `<l-tree-item>` in\n   `selection=\"multiple\"`) can pull in the exact same look via `static styles`.\n   The global light-DOM `checkbox.css` primitive `@import`s this file too, so\n   both surfaces stay in sync. The global `.l-checkbox` class cannot pierce a\n   shadow boundary, but the `--l-form-control-*` tokens this rule relies on DO\n   inherit across shadow roots.\n\n   The checkmark / indeterminate dash are drawn with a `background-image` SVG on\n   the input itself — `::before`/`::after` do not paint on replaced elements\n   like `<input>`. `background-image` can't read the host's `currentColor`, so\n   the glyph color is baked white. This stays legible because the accent\n   (`--l-form-control-activated-color`) is a stable color that does not invert\n   between light and dark. Override `--checkmark` to swap the icon. */\n\n@layer components {\n  .l-checkbox,\n  :where(l-form-field:not([unstyled])) > input[type='checkbox']:not([role='switch']) {\n    /* Public knobs */\n    --size: var(--l-form-control-toggle-size);\n    --accent: var(--l-form-control-activated-color);\n    --checkmark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>');\n    --_dash: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>');\n\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    inline-size: var(--size);\n    block-size: var(--size);\n    margin: 0;\n    padding: 0;\n    appearance: none;\n    border: var(--l-form-control-border-width) solid var(--l-form-control-border-color);\n    border-radius: calc(var(--size) * 0.2);\n    background-color: var(--l-form-control-background-color);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: 75%;\n    vertical-align: middle;\n    cursor: pointer;\n    transition-property: background-color, border-color;\n    transition-duration: 150ms;\n\n    &:checked,\n    &:indeterminate {\n      border-color: var(--accent);\n      background-color: var(--accent);\n    }\n\n    &:checked {\n      background-image: var(--checkmark);\n    }\n\n    &:indeterminate {\n      background-image: var(--_dash);\n    }\n\n    @media (hover: hover) {\n      &:hover:not(:disabled) {\n        border-color: var(--l-form-control-border-color-hover);\n      }\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--l-focus-ring);\n      outline-offset: 2px;\n    }\n\n    /* Invalid: only after interaction (`:user-invalid`), or forced via\n       `aria-invalid` (set by `l-form-field` / server-side validation).\n       Overriding `--accent` makes a checked invalid box fill with the error\n       color too (not just the border). */\n    &:user-invalid,\n    &[aria-invalid='true'] {\n      --accent: var(--l-form-control-border-color-invalid);\n      border-color: var(--l-form-control-border-color-invalid);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.4;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .l-checkbox,\n    :where(l-form-field:not([unstyled])) > input[type='checkbox']:not([role='switch']) {\n      transition-duration: 0ms;\n    }\n  }\n}\n");
 //#endregion
 //#region src/html/elements/tree-item/tree-item.ts
-var styles = r$6(":host {\n  display: block;\n  color: var(--l-color-text-primary, CanvasText);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n:host([disabled]) {\n  opacity: 0.4;\n}\n\n:host([disabled]) .item {\n  cursor: not-allowed;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--item-gap);\n  min-block-size: var(--row-height);\n  padding-inline: var(--row-padding-inline);\n  padding-inline-start: calc(var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline));\n  border-radius: 0.375rem;\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n  transition:\n    background-color 120ms ease,\n    color 120ms ease;\n  position: relative;\n}\n\n.item:focus-visible,\n:host(:focus-visible) .item {\n  outline: 2px solid var(--l-focus-ring, Highlight);\n  outline-offset: 1px;\n}\n\n@media (hover: hover) {\n  :host(:not([disabled])) .item:hover {\n    background-color: var(--l-color-bg-state-hover);\n  }\n}\n\n:host([selected]:not([disabled])) .item {\n  background-color: var(--l-color-bg-state-selected);\n}\n\n.expand {\n  inline-size: var(--chevron-size);\n  block-size: var(--chevron-size);\n  display: grid;\n  place-items: center;\n  flex: none;\n  color: var(--l-color-text-secondary, CanvasText);\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n/* Hide the DEFAULT fallback chevron SVG on a leaf — slotted content\n   (user-provided icon, avatar, etc.) remains visible because it lives outside\n   the slot in the DOM tree. The `.expand` span keeps its fixed --chevron-size\n   so leaf rows stay aligned with branches. */\n\n:host(:not(:state(has-children)):not([lazy])) .expand > slot > svg {\n  display: none;\n}\n\n.expand svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* The checkbox appearance comes from the shared `.l-checkbox` skin imported\n   above; this rule only governs visibility. */\n\n:host(:not(:state(checkbox))) .checkbox {\n  display: none;\n}\n\n.label {\n  flex: 1;\n  min-inline-size: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label ::slotted(*) {\n  min-inline-size: 0;\n}\n\n/* Wrapper around the content slot + children — anchor for the indent guide. */\n\n.branch {\n  position: relative;\n}\n\n/* Content slot — block area between the row and the children.\n   Aligned under the label text: same left offset as the row's label\n   (depth indent + row padding + chevron + gap). Visible for leaves (no\n   children) and for expanded branches; hidden when a branch is collapsed\n   (mirrors the children visibility). */\n\n.content {\n  display: block;\n  padding-inline-start: calc(\n    var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline) + var(--chevron-size) +\n      var(--item-gap)\n  );\n  padding-inline-end: var(--row-padding-inline);\n}\n\n:host(:state(has-children):not([expanded])) .content {\n  display: none;\n}\n\n.children {\n  display: none;\n}\n\n:host([expanded]) .children {\n  display: block;\n}\n\n/* Vertical indent guide — spans the content + children block, starting\n   right below the row so it never overlaps the chevron/avatar.\n   The guide's visual centre sits exactly on the parent chevron's centre. */\n\n.branch::before {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(\n    var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline) + (var(--chevron-size) / 2) -\n      (var(--indent-guide-width) / 2)\n  );\n  inline-size: 0;\n  border-inline-start: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n  pointer-events: none;\n}\n\n/* Only render the guide for open branches that have children. */\n\n:host(:not([expanded])) .branch::before,\n:host(:not(:state(has-children))) .branch::before {\n  display: none;\n}\n\n.spinner {\n  inline-size: 0.875rem;\n  block-size: 0.875rem;\n  border-radius: 50%;\n  border: 2px solid var(--l-color-border, currentColor);\n  border-block-start-color: transparent;\n  animation: spin 700ms linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .spinner {\n    animation: none;\n  }\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
+var styles = r$6(":host {\n  display: block;\n  color: var(--l-color-text-primary, CanvasText);\n  font-size: 0.875rem;\n  line-height: 1.5;\n  /* The host is the roving-tabindex focus target, but the visible ring is drawn\n     on the inner `.item` row. Suppress the host's UA outline so it doesn't paint\n     a second ring around the whole subtree (row + children). */\n  outline: none;\n}\n\n:host([disabled]) {\n  opacity: 0.4;\n}\n\n:host([disabled]) .item {\n  cursor: not-allowed;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--item-gap);\n  min-block-size: var(--row-height);\n  padding-inline: var(--row-padding-inline);\n  padding-inline-start: calc(var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline));\n  border-radius: 0.375rem;\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n  transition:\n    background-color 120ms ease,\n    color 120ms ease;\n  position: relative;\n}\n\n.item:focus-visible,\n:host(:focus-visible) .item {\n  outline: 2px solid var(--l-focus-ring);\n  outline-offset: 1px;\n}\n\n@media (hover: hover) {\n  :host(:not([disabled])) .item:hover {\n    background-color: var(--l-color-bg-state-hover);\n  }\n}\n\n:host([selected]:not([disabled])) .item {\n  background-color: var(--l-color-bg-state-selected);\n}\n\n.expand {\n  inline-size: var(--chevron-size);\n  block-size: var(--chevron-size);\n  display: grid;\n  place-items: center;\n  flex: none;\n  color: var(--l-color-text-secondary, CanvasText);\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n/* Hide the DEFAULT fallback chevron SVG on a leaf — slotted content\n   (user-provided icon, avatar, etc.) remains visible because it lives outside\n   the slot in the DOM tree. The `.expand` span keeps its fixed --chevron-size\n   so leaf rows stay aligned with branches. */\n\n:host(:not(:state(has-children)):not([lazy])) .expand > slot > svg {\n  display: none;\n}\n\n.expand svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* The checkbox appearance comes from the shared `.l-checkbox` skin imported\n   above; this rule only governs visibility. */\n\n:host(:not(:state(checkbox))) .checkbox {\n  display: none;\n}\n\n.label {\n  flex: 1;\n  min-inline-size: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label ::slotted(*) {\n  min-inline-size: 0;\n}\n\n/* Wrapper around the content slot + children — anchor for the indent guide. */\n\n.branch {\n  position: relative;\n}\n\n/* Content slot — block area between the row and the children.\n   Aligned under the label text: same left offset as the row's label\n   (depth indent + row padding + chevron + gap). Visible for leaves (no\n   children) and for expanded branches; hidden when a branch is collapsed\n   (mirrors the children visibility). */\n\n.content {\n  display: block;\n  padding-inline-start: calc(\n    var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline) + var(--chevron-size) +\n      var(--item-gap)\n  );\n  padding-inline-end: var(--row-padding-inline);\n}\n\n:host(:state(has-children):not([expanded])) .content {\n  display: none;\n}\n\n.children {\n  display: none;\n}\n\n:host([expanded]) .children {\n  display: block;\n}\n\n/* Vertical indent guide — spans the content + children block, starting\n   right below the row so it never overlaps the chevron/avatar.\n   The guide's visual centre sits exactly on the parent chevron's centre. */\n\n.branch::before {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(\n    var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline) + (var(--chevron-size) / 2) -\n      (var(--indent-guide-width) / 2)\n  );\n  inline-size: 0;\n  border-inline-start: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n  pointer-events: none;\n}\n\n/* Only render the guide for open branches that have children. */\n\n:host(:not([expanded])) .branch::before,\n:host(:not(:state(has-children))) .branch::before {\n  display: none;\n}\n\n.spinner {\n  inline-size: 0.875rem;\n  block-size: 0.875rem;\n  border-radius: 50%;\n  border: 2px solid var(--l-color-border, currentColor);\n  border-block-start-color: transparent;\n  animation: spin 700ms linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .spinner {\n    animation: none;\n  }\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
 /**
 * A node inside `<l-tree>`. Nested `<l-tree-item>` children become sub-nodes.
 *
@@ -35014,6 +35035,17 @@ var TreeItem = class extends LuxenElement {
 	get depth() {
 		return this._depth;
 	}
+	/**
+	* Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,
+	* `posInSet`/`setSize` describe the item's rank among its siblings. These let
+	* screen readers announce "level 2, 3 of 5" even when `lazy` children keep the
+	* full set out of the DOM.
+	*/
+	setPosition(level, posInSet, setSize) {
+		this._aria("ariaLevel", "aria-level", String(level));
+		this._aria("ariaPosInSet", "aria-posinset", String(posInSet));
+		this._aria("ariaSetSize", "aria-setsize", String(setSize));
+	}
 	/** Whether this item has nested tree-item children. */
 	get hasChildren() {
 		return this._hasChildren;
@@ -35036,6 +35068,7 @@ var TreeItem = class extends LuxenElement {
 	connectedCallback() {
 		super.connectedCallback();
 		this._internals.role = "treeitem";
+		if (!this.hasAttribute("role")) this.setAttribute("role", "treeitem");
 		this._childObserver = new MutationObserver(() => this._syncChildren());
 		this._childObserver.observe(this, { childList: true });
 		this._syncChildren();
@@ -35046,11 +35079,28 @@ var TreeItem = class extends LuxenElement {
 	}
 	updated(changed) {
 		if (changed.has("expanded")) {
-			this._internals.ariaExpanded = this.isLeaf() ? null : String(this.expanded);
+			this._reflectExpanded();
+			if (this.expanded && this.lazy) this.emit("lazy-load");
 			this.emit(this.expanded ? "expand" : "collapse");
 		}
-		if (changed.has("selected")) this._internals.ariaSelected = String(this.selected);
-		if (changed.has("disabled")) this._internals.ariaDisabled = this.disabled ? "true" : null;
+		if (changed.has("selected")) this._aria("ariaSelected", "aria-selected", String(this.selected));
+		if (changed.has("disabled")) this._aria("ariaDisabled", "aria-disabled", this.disabled ? "true" : null);
+		if (changed.has("loading")) this._aria("ariaBusy", "aria-busy", this.loading ? "true" : null);
+	}
+	/** Leaf items omit `aria-expanded` entirely; branches reflect their state. */
+	_reflectExpanded() {
+		this._aria("ariaExpanded", "aria-expanded", this.isLeaf() ? null : String(this.expanded));
+	}
+	/**
+	* Write an ARIA state to BOTH ElementInternals (the semantic source, in the
+	* accessibility tree) and a content attribute (so `[aria-*]` CSS / query / test
+	* selectors keep matching — same belt-and-suspenders as the mirrored `role`).
+	* A `null` value clears both.
+	*/
+	_aria(key, attr, value) {
+		this._internals[key] = value;
+		if (value === null) this.removeAttribute(attr);
+		else this.setAttribute(attr, value);
 	}
 	_setState(name, on) {
 		if (!this._internals.states) return;
@@ -35067,14 +35117,12 @@ var TreeItem = class extends LuxenElement {
 		this._hasChildren = count > 0;
 		this._setState("has-children", this._hasChildren);
 		if (!this._hasChildren && !this.lazy && this.expanded) this.expanded = false;
-		this._internals.ariaExpanded = this.isLeaf() ? null : String(this.expanded);
+		this._reflectExpanded();
 	}
-	/** Toggle expand state. Emits `lazy-load` the first time a lazy item opens. */
+	/** Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`). */
 	toggle() {
 		if (this.isLeaf() && !this.lazy) return;
-		const next = !this.expanded;
-		if (next && this.lazy) this.emit("lazy-load");
-		this.expanded = next;
+		this.expanded = !this.expanded;
 	}
 	render() {
 		return b`
@@ -35124,6 +35172,7 @@ var TreeItem = class extends LuxenElement {
           part="checkbox"
           type="checkbox"
           tabindex="-1"
+          aria-hidden="true"
           .checked=${this.selected}
           .indeterminate=${this.indeterminate}
           ?disabled=${this.disabled}