@lolmath/ui 9.0.0 → 9.1.1

package/dist/index.css

@@ -211,22 +211,11 @@
 	}
 }
 @layer lol {
-	._round_16wcl_2 {
-		border-radius: 9999px;
-	}
-
-	._round_16wcl_2,
-	._square_16wcl_7 {
-		aspect-ratio: 1 / 1;
-		padding: 0px;
-		font-weight: 900;
-	}
-
-	._button_16wcl_13 {
+	._button_lhmqr_2 {
 		border-radius: 0px;
 		border: 2px solid transparent;
 
-		&._thin_16wcl_17 {
+		&._thin_lhmqr_6 {
 			border-width: 1px;
 		}
 
@@ -257,21 +246,37 @@
 			outline: none;
 		}
 
-		&._small_16wcl_48 {
+		&._small_lhmqr_37 {
 			font-size: var(--lol-font-size-sm);
 			min-height: var(--lol-form-height-small);
 		}
 
-		&._medium_16wcl_53 {
+		&._medium_lhmqr_42 {
 			font-size: var(--lol-font-size-base);
 			min-height: var(--lol-form-height-medium);
 		}
 
-		&._large_16wcl_58 {
+		&._large_lhmqr_47 {
 			font-size: var(--lol-font-size-base);
 			min-height: var(--lol-form-height-large);
 		}
 
+		/*
+		 * Nested so the shape wins on specificity: as a bare `.round` it ties with
+		 * `.button` and loses the border-radius and font-weight to whichever rule
+		 * is written last.
+		 */
+		&._round_lhmqr_53,
+		&._square_lhmqr_58 {
+			aspect-ratio: 1 / 1;
+			padding: 0px;
+			font-weight: 900;
+		}
+
+		&._round_lhmqr_53 {
+			border-radius: 9999px;
+		}
+
 		&:hover {
 			color: var(--lol-color-gold-100);
 		}
@@ -293,37 +298,79 @@
 		}
 	}
 
-	._primary_16wcl_84,
-	._secondary_16wcl_85,
-	._hextech_16wcl_86,
-	._dimmed_16wcl_87 {
-		&:not(._square_16wcl_7, ._round_16wcl_2) {
-			&._small_16wcl_48 {
+	/*
+	 * ToggleButtonGroup. Lives here rather than in its own module because it has
+	 * to reach into the button's border model: adjacent buttons are pulled
+	 * together by exactly one border width so their two gradient borders read as
+	 * a single seam instead of a double-thick one.
+	 */
+	._toggleButtonGroup_lhmqr_95 {
+		display: inline-flex;
+
+		& > ._button_lhmqr_2 + ._button_lhmqr_2 {
+			margin-left: -2px;
+		}
+
+		/* Must follow the rule above: thin buttons only need a 1px overlap. */
+		& > ._thin_lhmqr_6 + ._thin_lhmqr_6 {
+			margin-left: -1px;
+		}
+
+		/* Whichever button is highlighted owns the seams next to it. */
+		& > ._button_lhmqr_2:hover,
+		& > ._button_lhmqr_2:focus-visible,
+		& > ._button_lhmqr_2[data-selected] {
+			position: relative;
+			z-index: 1;
+		}
+
+		&[data-orientation="vertical"] {
+			flex-direction: column;
+			/* Equal widths keep the collapsed seams lined up. */
+			align-items: stretch;
+
+			& > ._button_lhmqr_2 + ._button_lhmqr_2 {
+				margin-left: 0;
+				margin-top: -2px;
+			}
+
+			& > ._thin_lhmqr_6 + ._thin_lhmqr_6 {
+				margin-top: -1px;
+			}
+		}
+	}
+
+	._primary_lhmqr_131,
+	._secondary_lhmqr_132,
+	._hextech_lhmqr_133,
+	._dimmed_lhmqr_134 {
+		&:not(._square_lhmqr_58, ._round_lhmqr_53) {
+			&._small_lhmqr_37 {
 				padding: 0 0.5rem;
 			}
 
-			&._medium_16wcl_53 {
+			&._medium_lhmqr_42 {
 				padding: 0 1rem;
 			}
 
-			&._large_16wcl_58 {
+			&._large_lhmqr_47 {
 				padding: 0 1rem;
 			}
 		}
 	}
 
-	._text_16wcl_103 {
-		&._round_16wcl_2,
-		&._square_16wcl_7 {
+	._text_lhmqr_150 {
+		&._round_lhmqr_53,
+		&._square_lhmqr_58 {
 			&:hover {
 				--lol-button-background-gradient: var(--lol-gradient-grey-300);
 				--lol-button-border-gradient: var(--lol-gradient-transparent);
 			}
 		}
 
-		&._round_16wcl_2,
-		&._square_16wcl_7,
-		&._normal_16wcl_114 {
+		&._round_lhmqr_53,
+		&._square_lhmqr_58,
+		&._normal_lhmqr_161 {
 			position: relative;
 
 			&::after {
@@ -341,7 +388,7 @@
 		}
 	}
 
-	._hextech_16wcl_86 {
+	._hextech_lhmqr_133 {
 		color: var(--lol-color-blue-100);
 		--lol-button-border-gradient: var(--lol-gradient-hextech);
 		--lol-button-background-gradient: var(--lol-gradient-grey-300);
@@ -366,17 +413,17 @@
 		}
 	}
 
-	._dimmed_16wcl_87 {
+	._dimmed_lhmqr_134 {
 		--lol-button-background-gradient: var(--lol-gradient-hextech-black);
 		--lol-button-border-gradient: var(--lol-gradient-grey-300);
 
-		&._selected_16wcl_161,
+		&._selected_lhmqr_208,
 		&:focus-visible {
 			--lol-button-border-gradient: var(--lol-gradient-gold);
 		}
 	}
 
-	._primary_16wcl_84 {
+	._primary_lhmqr_131 {
 		--lol-button-border-gradient: var(--lol-gradient-gold);
 		--lol-button-background-gradient: linear-gradient(
 			to top,
@@ -404,31 +451,31 @@
 		}
 	}
 
-	._secondary_16wcl_85 {
+	._secondary_lhmqr_132 {
 		--lol-button-border-gradient: var(--lol-gradient-gold);
 		--lol-button-background-gradient: var(--lol-gradient-grey-300);
 	}
 
-	._primary_16wcl_84:hover,
-	._secondary_16wcl_85:hover,
-	._dimmed_16wcl_87:hover {
+	._primary_lhmqr_131:hover,
+	._secondary_lhmqr_132:hover,
+	._dimmed_lhmqr_134:hover {
 		--lol-button-border-gradient: var(--lol-gradient-gold-hover);
 	}
 
-	._primary_16wcl_84:active,
-	._secondary_16wcl_85:active,
-	._dimmed_16wcl_87:active {
+	._primary_lhmqr_131:active,
+	._secondary_lhmqr_132:active,
+	._dimmed_lhmqr_134:active {
 		--lol-button-border-gradient: var(--lol-gradient-gold-press);
 	}
 
-	._primary_16wcl_84:disabled,
-	._secondary_16wcl_85:disabled,
-	._dimmed_16wcl_87:disabled {
+	._primary_lhmqr_131:disabled,
+	._secondary_lhmqr_132:disabled,
+	._dimmed_lhmqr_134:disabled {
 		--lol-button-border-gradient: var(--lol-gradient-disabled);
 	}
 
-	._primary_16wcl_84:focus-visible,
-	._secondary_16wcl_85:focus-visible {
+	._primary_lhmqr_131:focus-visible,
+	._secondary_lhmqr_132:focus-visible {
 		outline-color: var(--lol-color-gold-400);
 	}
 }
@@ -2003,3 +2050,218 @@
 		}
 	}
 }
+@layer lol {
+	._toolbar_pv0cj_2 {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+
+		/*
+		 * Controls keep their own width in a vertical toolbar; stretching them
+		 * blows up anything sized by aspect ratio, like square/round buttons.
+		 */
+		&[data-orientation="vertical"] {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+	}
+
+	._separator_pv0cj_17 {
+		border: none;
+		margin: 0;
+		flex: none;
+		align-self: stretch;
+		height: 1px;
+		background-image: linear-gradient(
+			to right,
+			rgba(0, 0, 0, 0),
+			var(--lol-color-gold-600),
+			rgba(0, 0, 0, 0)
+		);
+
+		/* A vertical separator renders as a <div>, so it has no implicit size. */
+		&[aria-orientation="vertical"] {
+			height: auto;
+			width: 1px;
+			background-image: linear-gradient(
+				to bottom,
+				rgba(0, 0, 0, 0),
+				var(--lol-color-gold-600),
+				rgba(0, 0, 0, 0)
+			);
+		}
+	}
+}
+@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;
+	}
+}