@lolmath/ui 0.0.0-20260726105326 → 0.0.0-20260726214151

package/dist/index.css

@@ -2003,3 +2003,176 @@
 		}
 	}
 }
+@layer lol {
+	._tree_1jyu5_2 {
+		--lol-tree-indent: 1.125rem;
+
+		box-sizing: border-box;
+		overflow: auto;
+		outline: none;
+
+		font-family: var(--lol-font-family-spiegel);
+		font-size: var(--lol-font-size-sm);
+		line-height: var(--lol-line-height-sm);
+		letter-spacing: var(--lol-letter-spacing-sm);
+		font-weight: var(--lol-font-weight-sm);
+
+		&[data-focus-visible] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: 0.25rem;
+		}
+	}
+
+	._item_1jyu5_21 {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		/* Rows are flattened siblings, so the nesting comes from the level react
+		   aria exposes on each row rather than from the DOM. */
+		padding: 0.375rem 0.75rem 0.375rem
+			calc(0.5rem + (var(--tree-item-level) - 1) * var(--lol-tree-indent));
+		color: var(--lol-color-grey-100);
+		outline: none;
+		cursor: default;
+		transition: color 0.3s ease;
+
+		/* Every decoration is a background layer so the row keeps a single box:
+		   the chevron and the checkbox already own the inline start. */
+		--lol-tree-item-spine: none;
+		--lol-tree-item-hover: none;
+		--lol-tree-item-highlight: none;
+
+		background-image:
+			var(--lol-tree-item-spine), var(--lol-tree-item-hover),
+			var(--lol-tree-item-highlight);
+		background-repeat: no-repeat;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
+		/* Branches read as the client's collapsible section headers, leaves as
+		   list content. */
+		&[data-has-child-items] {
+			font-family: var(--lol-font-family-beaufort);
+			font-size: 0.75rem;
+			font-weight: 700;
+			letter-spacing: 0.075em;
+			line-height: 1rem;
+			text-transform: uppercase;
+			color: var(--lol-color-gold-300);
+		}
+
+		&[data-selection-mode]:not([data-disabled]),
+		&[data-href] {
+			cursor: pointer;
+		}
+
+		&[data-hovered] {
+			color: var(--lol-color-gold-100);
+			--lol-tree-item-hover: linear-gradient(
+				90deg,
+				rgb(from var(--lol-color-gold-100) r g b / 0.08),
+				transparent
+			);
+		}
+
+		&[data-selected] {
+			color: var(--lol-color-gold-100);
+			/* Gold spine plus hextech wash on the selected row, matching the
+			   client's "current" row. */
+			--lol-tree-item-spine: linear-gradient(
+				90deg,
+				var(--lol-color-gold-500) 0 0.25rem,
+				transparent 0.25rem
+			);
+			--lol-tree-item-highlight: linear-gradient(
+				90deg,
+				rgb(from var(--lol-color-blue-400) r g b / 0.55),
+				rgb(from var(--lol-color-blue-300) r g b / 0.1)
+			);
+		}
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+			cursor: default;
+		}
+
+		&[data-focus-visible] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: -1px;
+		}
+	}
+
+	/* Top-level items are separated by the client's faint gold hairline. The
+	   sibling combinator keeps it off the first row, whichever level follows. */
+	._item_1jyu5_21 + ._item_1jyu5_21[data-level="1"] {
+		border-top: 1px solid var(--lol-color-gold-600);
+	}
+
+	._chevron_1jyu5_108 {
+		flex: none;
+		width: 0.5rem;
+		height: 0.75rem;
+		padding: 0;
+		border: none;
+		outline: none;
+		cursor: pointer;
+
+		--lol-tree-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABF0lEQVR42r3WMY7CQAxA0R8r2oobUMBB9hTLPegguQJUNHuJLbZb7RU4BvQIiZaKJiNFo0wy8dhYiiJNLD+N5RmlOv9sGYgtsAQajKJOICeg6p69BSQjCMAOOFpDMYIlJhOIGSbAqitSTeQWYQJcgQ3wzMhXY6F1f8CXJ9YfBlcsHm83TAbWXDBJrJtjMvLNFJOJAmaYZBQwwSRzaIoxmXEUijCZecDVmCiuLRVWKy/jgP0CHxmYakchHpm7ArhpoU/gH1hk5DbAUd6BaFqnQuZCamQOVITkQsVIDmSCTEFmyBhkiqQgc2QIckFiyA3pQ65IgNbeSIAuwLcn0m9dCxy8kHgYUlgxMjTeMWaCpP4Z2u59t0IAXn+VXtMKZ5riAAAAAElFTkSuQmCC");
+		background: var(--lol-tree-chevron) no-repeat center / contain;
+		transition: rotate 0.15s ease;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
+		&[data-focus-visible] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: 0.125rem;
+		}
+	}
+
+	._chevronSpacer_1jyu5_131 {
+		flex: none;
+		width: 0.5rem;
+	}
+
+	._item_1jyu5_21[data-expanded] ._chevron_1jyu5_108 {
+		rotate: 90deg;
+	}
+
+	._item_1jyu5_21[data-hovered] ._chevron_1jyu5_108,
+	._chevron_1jyu5_108[data-hovered],
+	._chevron_1jyu5_108[data-focus-visible] {
+		--lol-tree-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABGElEQVR42r3WO47CMBCA4T+jaCtuQLEcZE+x3IOOxxVIRcM1tlvtPTgBNFQIQUu1TSxFVpw44xlGiiI5o/nk0dhK9bie6IkVMAe2GEWdQA5A1T4bC0gGEIA10FhDMYIlJiOIGSbAZ1ukGsktwgS4AEvglZGvxkLrfoFvT6w7DK5YPN5umPSsuWCSWDfHZOCbKSYjBcwwyShggknm0BRjMuEoFGEy8YCrMVFcWyqsVl7GAfsBPjIw1Y5CPDN3BXDTQl/AHzDLyN0CjbwD0bROhUyF1MgUqAjJhYqRHMgEGYPMkCHIFElB5kgf5ILEkBvShVyRAC28kQCdgaMn0m3dDth7IfEwpLBipG+8Y8wESf0z7Nr33QoB+AdPzF+bRdCP8QAAAABJRU5ErkJggg==");
+	}
+
+	._item_1jyu5_21[data-disabled] ._chevron_1jyu5_108 {
+		cursor: default;
+		filter: grayscale(100%);
+	}
+
+	._label_1jyu5_151 {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	._empty_1jyu5_159 {
+		padding: 1rem 0.75rem;
+		text-align: center;
+	}
+
+	._loadMore_1jyu5_164 {
+		display: flex;
+		justify-content: center;
+		padding: 0.5rem;
+	}
+
+	._spinner_1jyu5_170 {
+		width: 1.5rem;
+	}
+}