@lolmath/ui 0.0.0-20260901231349 → 0.0.0-20260902190338

package/dist/index.css

@@ -1533,7 +1533,7 @@
 	}
 }
 @layer lol {
-	._tree_1cw7p_2 {
+	._tree_spjot_2 {
 		--lol-navigation-tree-indent: 1.125rem;
 
 		box-sizing: border-box;
@@ -1547,16 +1547,16 @@
 		font-weight: var(--lol-font-weight-sm);
 	}
 
-	._item_1cw7p_16 {
+	._item_spjot_16 {
 		display: flex;
-		/* The link stretches to the row's full height so the whole row is the
-		   target, not just the text. */
+		/* The link and the chevron stretch to the row's full height so the whole
+		   row is the target, not just the text. */
 		align-items: stretch;
-		gap: 0.375rem;
+		gap: 0.25rem;
 		/* Rows are flattened siblings, so the nesting comes from the level react
 		   aria exposes on each row rather than from the DOM. */
 		padding-inline: calc(
-				0.5rem +
+				0.25rem +
 				(var(--tree-item-level) - 1) *
 				var(--lol-navigation-tree-indent)
 			)
@@ -1633,11 +1633,11 @@
 
 	/* 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_1cw7p_16 + ._item_1cw7p_16[data-level="1"] {
+	._item_spjot_16 + ._item_spjot_16[data-level="1"] {
 		border-top: 1px solid var(--lol-color-gold-600);
 	}
 
-	._link_1cw7p_106 {
+	._link_spjot_106 {
 		flex: 1;
 		min-width: 0;
 		padding-block: 0.375rem;
@@ -1657,7 +1657,7 @@
 		}
 	}
 
-	._chevron_1cw7p_126 {
+	._chevron_spjot_126 {
 		/* A <button> we never paint: without this it falls back to the UA's
 		   `buttonface` slab, which is grey under `color-scheme: dark`. */
 		appearance: none;
@@ -1667,56 +1667,73 @@
 		font: inherit;
 		letter-spacing: inherit;
 		color: inherit;
+		background: none;
 
+		position: relative;
 		flex: none;
-		align-self: center;
-		width: 0.5rem;
-		height: 0.75rem;
+		/* The arrow is eight pixels across, which is not something to ask anyone
+		   to hit. The button is the target rather than the drawing — the row's
+		   full height and wide enough to land on — and ::after does the drawing,
+		   so turning the arrow does not turn the target with it. */
+		align-self: stretch;
+		width: 1.5rem;
 		outline: none;
 		cursor: pointer;
 
 		--lol-navigation-tree-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABF0lEQVR42r3WMY7CQAxA0R8r2oobUMBB9hTLPegguQJUNHuJLbZb7RU4BvQIiZaKJiNFo0wy8dhYiiJNLD+N5RmlOv9sGYgtsAQajKJOICeg6p69BSQjCMAOOFpDMYIlJhOIGSbAqitSTeQWYQJcgQ3wzMhXY6F1f8CXJ9YfBlcsHm83TAbWXDBJrJtjMvLNFJOJAmaYZBQwwSRzaIoxmXEUijCZecDVmCiuLRVWKy/jgP0CHxmYakchHpm7ArhpoU/gH1hk5DbAUd6BaFqnQuZCamQOVITkQsVIDmSCTEFmyBhkiqQgc2QIckFiyA3pQ65IgNbeSIAuwLcn0m9dCxy8kHgYUlgxMjTeMWaCpP4Z2u59t0IAXn+VXtMKZ5riAAAAAElFTkSuQmCC");
-		background: var(--lol-navigation-tree-chevron) no-repeat center / contain;
-		transition: rotate 0.15s ease;
+
+		&::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			/* Sized off the height so the arrow stays what it was, whatever the
+			   button around it grows to. */
+			background:
+				var(--lol-navigation-tree-chevron) no-repeat center / auto 0.75rem;
+			transition: rotate 0.15s ease;
+			/* The target is the button's box, never this one's rotated box. */
+			pointer-events: none;
+		}
 
 		@media (prefers-reduced-motion: reduce) {
-			transition: none;
+			&::after {
+				transition: none;
+			}
 		}
 
 		&[data-focus-visible] {
 			outline: 1px solid var(--lol-color-gold-400);
-			outline-offset: 0.125rem;
+			outline-offset: -1px;
 		}
 	}
 
-	._chevronSpacer_1cw7p_158 {
+	._chevronSpacer_spjot_176 {
 		flex: none;
-		align-self: center;
-		width: 0.5rem;
+		width: 1.5rem;
 	}
 
-	._item_1cw7p_16[data-expanded] ._chevron_1cw7p_126 {
+	._item_spjot_16[data-expanded] ._chevron_spjot_126::after {
 		rotate: 90deg;
 	}
 
-	._item_1cw7p_16[data-hovered] ._chevron_1cw7p_126,
-	._chevron_1cw7p_126[data-hovered],
-	._chevron_1cw7p_126[data-focus-visible] {
+	._item_spjot_16[data-hovered] ._chevron_spjot_126,
+	._chevron_spjot_126[data-hovered],
+	._chevron_spjot_126[data-focus-visible] {
 		--lol-navigation-tree-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABGElEQVR42r3WO47CMBCA4T+jaCtuQLEcZE+x3IOOxxVIRcM1tlvtPTgBNFQIQUu1TSxFVpw44xlGiiI5o/nk0dhK9bie6IkVMAe2GEWdQA5A1T4bC0gGEIA10FhDMYIlJiOIGSbAZ1ukGsktwgS4AEvglZGvxkLrfoFvT6w7DK5YPN5umPSsuWCSWDfHZOCbKSYjBcwwyShggknm0BRjMuEoFGEy8YCrMVFcWyqsVl7GAfsBPjIw1Y5CPDN3BXDTQl/AHzDLyN0CjbwD0bROhUyF1MgUqAjJhYqRHMgEGYPMkCHIFElB5kgf5ILEkBvShVyRAC28kQCdgaMn0m3dDth7IfEwpLBipG+8Y8wESf0z7Nr33QoB+AdPzF+bRdCP8QAAAABJRU5ErkJggg==");
 	}
 
-	._item_1cw7p_16[data-disabled] ._chevron_1cw7p_126 {
+	._item_spjot_16[data-disabled] ._chevron_spjot_126 {
 		cursor: default;
 		filter: grayscale(100%);
 	}
 
 	/* Sections are separated by the same hairline as top-level rows, so a header
 	   and a first-level row read as one break rather than two. */
-	._section_1cw7p_181 + ._section_1cw7p_181 {
+	._section_spjot_198 + ._section_spjot_198 {
 		border-top: 1px solid var(--lol-color-gold-600);
 	}
 
-	._header_1cw7p_185 {
+	._header_spjot_202 {
 		padding: 0.75rem 0.75rem 0.25rem;
 
 		font-family: var(--lol-font-family-beaufort);

package/dist/index.mjs

@@ -1010,13 +1010,13 @@ function DialogButtons({ children }) {
 //#endregion
 //#region src/components/navigation-tree/navigation-tree.module.css
 var navigation_tree_module_default = {
-	"tree": "_tree_1cw7p_2",
-	"item": "_item_1cw7p_16",
-	"link": "_link_1cw7p_106",
-	"chevron": "_chevron_1cw7p_126",
-	"chevronSpacer": "_chevronSpacer_1cw7p_158",
-	"section": "_section_1cw7p_181",
-	"header": "_header_1cw7p_185"
+	"tree": "_tree_spjot_2",
+	"item": "_item_spjot_16",
+	"link": "_link_spjot_106",
+	"chevron": "_chevron_spjot_126",
+	"chevronSpacer": "_chevronSpacer_spjot_176",
+	"section": "_section_spjot_198",
+	"header": "_header_spjot_202"
 };
 //#endregion
 //#region src/components/navigation-tree/navigation-tree.tsx