@lolmath/ui 9.3.0 → 9.5.0

package/dist/index.css

@@ -1004,7 +1004,7 @@
 	}
 }
 @layer lol {
-	._dateInput_qxz9d_2 {
+	._dateInput_xrlax_2 {
 		background:
 			var(--lol-input-background-gradient) padding-box,
 			var(--lol-input-border-gradient) border-box;
@@ -1022,8 +1022,12 @@
 
 		font-family: var(--lol-font-family-spiegel);
 
+		/* Matches the fill DatePicker/DateRangePicker's own date input takes when
+		   disabled, so a standalone DateField/TimeField greys out the same way as
+		   the pickers it sits next to in a form. */
 		&[data-disabled] {
 			--lol-input-border-gradient: var(--lol-gradient-disabled);
+			--lol-input-background-gradient: var(--lol-gradient-grey-300);
 		}
 
 		&[data-focus-within] {
@@ -1031,20 +1035,20 @@
 			--lol-input-background-gradient: var(--lol-gradient-grey-focus);
 		}
 
-		&._small_qxz9d_29 {
+		&._small_xrlax_33 {
 			min-height: var(--lol-form-height-small);
 		}
 
-		&._medium_qxz9d_33 {
+		&._medium_xrlax_37 {
 			min-height: var(--lol-form-height-medium);
 		}
 
-		&._large_qxz9d_37 {
+		&._large_xrlax_41 {
 			min-height: var(--lol-form-height-large);
 		}
 	}
 
-	._segment_qxz9d_42 {
+	._segment_xrlax_46 {
 		padding: 0 0.125rem;
 		border-radius: 2px;
 		font-size: 0.75rem;
@@ -2408,12 +2412,14 @@
 	}
 }
 @layer lol {
-	._resizableContainer_1iv6r_2 {
+	._resizableContainer_1ftu2_2 {
 		overflow: auto;
 		position: relative;
 	}
 
-	._table_1iv6r_7 {
+	._table_1ftu2_7 {
+		--lol-table-indent: 1.125rem;
+
 		border-collapse: collapse;
 		border-spacing: 0;
 		width: 100%;
@@ -2429,9 +2435,38 @@
 			outline: 1px solid var(--lol-color-gold-400);
 			outline-offset: 0.25rem;
 		}
+
+		/* The whole table is the drop target when a drag is dropped on it rather
+		   than between two of its rows. */
+		&[data-drop-target] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: 0.25rem;
+		}
 	}
 
-	._row_1iv6r_25 {
+	/* Inside a `Virtualizer` the table is a <div> whose rows are placed by the
+	   layout, and it scrolls them itself — which is what the virtualizer measures
+	   against, so it is the one table that needs a height of its own. */
+	div._table_1ftu2_7 {
+		overflow: auto;
+		position: relative;
+
+		/* That also makes the header stick over the rows as they scroll past. The
+		   header cells tile the full width of the row, so frosting each one covers
+		   the strip; without it the rows read straight through the labels. The
+		   tint is the client's page black, which is what any surface the table
+		   sits on is a shade of. */
+		& ._column_1ftu2_46 {
+			background-color: color-mix(
+				in srgb,
+				var(--lol-color-hextech-black),
+				transparent 4%
+			);
+			backdrop-filter: blur(12px);
+		}
+	}
+
+	._row_1ftu2_56 {
 		color: var(--lol-color-grey-100);
 		outline: none;
 		transition: color 0.3s ease;
@@ -2484,13 +2519,28 @@
 			cursor: default;
 		}
 
+		&[data-dragging] {
+			opacity: 0.4;
+		}
+
 		&[data-focus-visible] {
 			outline: 1px solid var(--lol-color-gold-400);
 			outline-offset: -1px;
 		}
+
+		/* A row is only its own drop target when the table takes drops onto rows;
+		   reordering draws the `.dropIndicator` between them instead. */
+		&[data-drop-target] {
+			color: var(--lol-color-gold-100);
+			--lol-table-row-highlight: linear-gradient(
+				90deg,
+				rgb(from var(--lol-color-gold-400) r g b / 0.35),
+				rgb(from var(--lol-color-gold-400) r g b / 0.1)
+			);
+		}
 	}
 
-	._cell_1iv6r_84 {
+	._cell_1ftu2_130 {
 		/*
 		 * Collapsed borders are resolved between neighbours, and Chrome paints the
 		 * winning hairline once per edge when the losing side is styled `none`. The
@@ -2508,7 +2558,7 @@
 		}
 	}
 
-	._resizer_1iv6r_102 {
+	._resizer_1ftu2_148 {
 		position: absolute;
 		inset-block: 0;
 		inset-inline-end: 0;
@@ -2540,7 +2590,7 @@
 	}
 
 	/* Fixed footprint so toggling the sort direction never shifts the header. */
-	._sortIndicator_1iv6r_134 {
+	._sortIndicator_1ftu2_180 {
 		display: inline-block;
 		vertical-align: middle;
 		width: 0.5rem;
@@ -2564,7 +2614,7 @@
 		}
 	}
 
-	._column_1iv6r_158 {
+	._column_1ftu2_46 {
 		position: relative;
 		font-family: var(--lol-font-family-beaufort);
 		color: var(--lol-color-gold-100);
@@ -2600,15 +2650,15 @@
 			color: var(--lol-color-gold-500);
 		}
 
-		&[data-hovered] ._sortIndicator_1iv6r_134 {
+		&[data-hovered] ._sortIndicator_1ftu2_180 {
 			opacity: 0.5;
 		}
 
-		&[data-sort-direction] ._sortIndicator_1iv6r_134 {
+		&[data-sort-direction] ._sortIndicator_1ftu2_180 {
 			opacity: 1;
 		}
 
-		&[data-sort-direction="descending"] ._sortIndicator_1iv6r_134::after {
+		&[data-sort-direction="descending"] ._sortIndicator_1ftu2_180::after {
 			border-width: 0.375rem 0.25rem 0;
 			border-top-color: currentColor;
 			border-bottom-color: transparent;
@@ -2620,34 +2670,170 @@
 		}
 	}
 
-	._footer_1iv6r_214 {
+	/* The checkbox and the drag handle sit in columns of their own, added by
+	   `TableHeader` and `TableRow`. Both shrink to their content: a percentage
+	   width smaller than the content is the table layout's way of saying "as
+	   narrow as this can go". */
+	._selectionColumn_1ftu2_264,
+	._selectionCell_1ftu2_265,
+	._gripColumn_1ftu2_266,
+	._gripCell_1ftu2_267 {
+		width: 1%;
+		white-space: nowrap;
+	}
+
+	._selectionCell_1ftu2_265,
+	._gripCell_1ftu2_267 {
+		padding-inline-end: 0;
+	}
+
+	._grip_1ftu2_266 {
+		/* 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;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		color: inherit;
+
+		display: block;
+		width: 0.625rem;
+		height: 0.75rem;
+		outline: none;
+		/* Three hairlines, the client's drag affordance. */
+		background: repeating-linear-gradient(
+			to bottom,
+			currentColor 0 1px,
+			transparent 1px 0.25rem
+		);
+	}
+
+	/* React aria drags the row itself and leaves the handle inert, so the cursor
+	   has to come from the row. */
+	._table_1ftu2_7[data-allows-dragging] ._row_1ftu2_56 {
+		cursor: grab;
+	}
+
+	/* The indicator is a row of its own with a single full-width cell, so the
+	   line is drawn by a pseudo element that takes up no space of its own. */
+	._dropIndicator_1ftu2_119 {
+		& > td,
+		& > th {
+			position: relative;
+		}
+
+		&[data-drop-target] > td::after,
+		&[data-drop-target] > th::after {
+			content: "";
+			position: absolute;
+			inset-inline: 0;
+			top: -1px;
+			height: 2px;
+			background-color: var(--lol-color-gold-400);
+		}
+	}
+
+	/* The expand chevron of a `treeColumn` cell, and the indent that puts a
+	   nested row under its parent. React aria sets `--table-row-level` on every
+	   row, starting at 1. */
+	._treeContent_1ftu2_327 {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding-inline-start: calc(
+			(var(--table-row-level, 1) - 1) *
+			var(--lol-table-indent)
+		);
+	}
+
+	._chevron_1ftu2_337 {
+		appearance: none;
+		border: 0;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		letter-spacing: inherit;
+		color: inherit;
+
+		flex: none;
+		width: 0.5rem;
+		height: 0.75rem;
+		outline: none;
+		cursor: pointer;
+
+		--lol-table-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABF0lEQVR42r3WMY7CQAxA0R8r2oobUMBB9hTLPegguQJUNHuJLbZb7RU4BvQIiZaKJiNFo0wy8dhYiiJNLD+N5RmlOv9sGYgtsAQajKJOICeg6p69BSQjCMAOOFpDMYIlJhOIGSbAqitSTeQWYQJcgQ3wzMhXY6F1f8CXJ9YfBlcsHm83TAbWXDBJrJtjMvLNFJOJAmaYZBQwwSRzaIoxmXEUijCZecDVmCiuLRVWKy/jgP0CHxmYakchHpm7ArhpoU/gH1hk5DbAUd6BaFqnQuZCamQOVITkQsVIDmSCTEFmyBhkiqQgc2QIckFiyA3pQ65IgNbeSIAuwLcn0m9dCxy8kHgYUlgxMjTeMWaCpP4Z2u59t0IAXn+VXtMKZ5riAAAAAElFTkSuQmCC");
+		background: var(--lol-table-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_1ftu2_366 {
+		flex: none;
+		width: 0.5rem;
+	}
+
+	._row_1ftu2_56[data-expanded] ._chevron_1ftu2_337 {
+		rotate: 90deg;
+	}
+
+	._row_1ftu2_56[data-hovered] ._chevron_1ftu2_337,
+	._chevron_1ftu2_337[data-hovered],
+	._chevron_1ftu2_337[data-focus-visible] {
+		--lol-table-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABGElEQVR42r3WO47CMBCA4T+jaCtuQLEcZE+x3IOOxxVIRcM1tlvtPTgBNFQIQUu1TSxFVpw44xlGiiI5o/nk0dhK9bie6IkVMAe2GEWdQA5A1T4bC0gGEIA10FhDMYIlJiOIGSbAZ1ukGsktwgS4AEvglZGvxkLrfoFvT6w7DK5YPN5umPSsuWCSWDfHZOCbKSYjBcwwyShggknm0BRjMuEoFGEy8YCrMVFcWyqsVl7GAfsBPjIw1Y5CPDN3BXDTQl/AHzDLyN0CjbwD0bROhUyF1MgUqAjJhYqRHMgEGYPMkCHIFElB5kgf5ILEkBvShVyRAC28kQCdgaMn0m3dDth7IfEwpLBipG+8Y8wESf0z7Nr33QoB+AdPzF+bRdCP8QAAAABJRU5ErkJggg==");
+	}
+
+	._row_1ftu2_56[data-disabled] ._chevron_1ftu2_337 {
+		cursor: default;
+		filter: grayscale(100%);
+	}
+
+	._loadMore_1ftu2_386 > td,
+	._loadMore_1ftu2_386 > th {
+		padding: 0.5rem;
+	}
+
+	._spinner_1ftu2_391 {
+		width: 1.5rem;
+		margin-inline: auto;
+	}
+
+	._footer_1ftu2_396 {
 		color: var(--lol-color-gold-300);
 
-		& ._cell_1iv6r_84 {
+		& ._cell_1ftu2_130 {
 			border-top: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
 		}
 	}
 
-	._empty_1iv6r_222 {
+	._empty_1ftu2_404 {
 		padding: 1rem 0.75rem;
 		text-align: center;
 	}
 
 	/* React aria renders the empty state in a row it builds itself, so that cell
 	   never gets `.cell` and keeps the UA's 1px padding. */
-	._table_1iv6r_7 [data-empty] > tr > td {
+	._table_1ftu2_7 [data-empty] > tr > td {
 		padding: 0;
 	}
 
-	._start_1iv6r_233 {
+	._start_1ftu2_415 {
 		text-align: start;
 	}
 
-	._center_1iv6r_237 {
+	._center_1ftu2_419 {
 		text-align: center;
 	}
 
-	._end_1iv6r_241 {
+	._end_1ftu2_423 {
 		text-align: end;
 	}
 }
@@ -2772,6 +2958,123 @@
 		}
 	}
 }
+@layer lol {
+	._tokenField_isyx7_2 {
+		display: grid;
+		grid-template-areas:
+			"label"
+			"input"
+			"help";
+
+		color: var(--lol-color-gold-100);
+	}
+
+	._input_isyx7_12 {
+		background:
+			var(--lol-token-field-background-gradient) padding-box,
+			var(--lol-token-field-border-gradient) border-box;
+
+		--lol-token-field-border-gradient: var(--lol-gradient-gold);
+		--lol-token-field-background-gradient: var(--lol-gradient-hextech-black);
+
+		border: 1px solid transparent;
+		grid-area: input;
+		margin: 0;
+		padding: 0.375rem 0.75rem;
+		outline: none;
+
+		font-family: var(--lol-font-family-spiegel);
+		font-size: 0.75rem;
+		font-weight: 500;
+		letter-spacing: 0.025em;
+		line-height: 1.25rem;
+		color: var(--lol-color-gold-100);
+
+		/* The editable area is a contenteditable box holding a mix of text nodes
+		   and token spans, so it has to stay a block formatting context: a flex
+		   container would wrap each run of text in an anonymous box and the caret
+		   would no longer move across the boundaries between them. */
+		display: block;
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+
+		&[data-disabled] {
+			--lol-token-field-border-gradient: var(--lol-gradient-disabled);
+			color: var(--lol-color-grey-150);
+		}
+
+		&[data-focused] {
+			--lol-token-field-border-gradient: var(--lol-gradient-gold-hover);
+			--lol-token-field-background-gradient: var(--lol-gradient-grey-focus);
+		}
+
+		/* The field holds no value of its own to hang a `::placeholder` on — its
+		   content is the editable DOM — so an empty box paints the hint itself. */
+		&:empty::before {
+			content: attr(data-placeholder);
+			color: var(--lol-color-grey-150);
+		}
+
+		&._small_isyx7_58 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_isyx7_62 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_isyx7_66 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._token_isyx7_2 {
+		background:
+			var(--lol-token-background-gradient) padding-box,
+			var(--lol-token-border-gradient) border-box;
+
+		--lol-token-border-gradient: var(--lol-gradient-hextech);
+		--lol-token-background-gradient: var(--lol-gradient-grey-300);
+
+		border: 1px solid transparent;
+		border-radius: 9999px;
+		padding: 0 0.4rem;
+
+		/* Inline, so a token flows with the text it sits between and wraps with
+		   it; inline-block would still be one atom but cannot break onto the next
+		   line as a run of text does around it. */
+		display: inline;
+		color: var(--lol-color-blue-100);
+		white-space: nowrap;
+
+		&._hextech_isyx7_90 {
+			--lol-token-border-gradient: var(--lol-gradient-hextech);
+			color: var(--lol-color-blue-100);
+		}
+
+		&._gold_isyx7_95 {
+			--lol-token-border-gradient: var(--lol-gradient-gold);
+			color: var(--lol-color-gold-300);
+		}
+
+		&._grey_isyx7_100 {
+			--lol-token-border-gradient: var(--lol-color-grey-100);
+			color: var(--lol-color-gold-100);
+		}
+
+		/* `userSelect: all` makes a token select as one atom, so the selected
+		   state is all-or-nothing and can be painted as such. */
+		&[data-selected] {
+			--lol-token-background-gradient: var(--lol-gradient-gold-hover);
+			color: var(--lol-color-hextech-black);
+		}
+
+		&[data-disabled] {
+			--lol-token-border-gradient: var(--lol-gradient-disabled);
+			color: var(--lol-color-grey-150);
+		}
+	}
+}
 @layer lol {
 	._toolbar_1j7x4_2 {
 		display: flex;
@@ -2998,3 +3301,90 @@
 		width: 1.5rem;
 	}
 }
+@layer lol {
+	._table_v9mcp_2 {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+
+		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);
+		color: var(--lol-color-grey-100);
+	}
+
+	/*
+	 * Both headings are set the same way — the client's heading face, in gold
+	 * over the grey of the data. What tells them apart is only which edge of the
+	 * table they run along.
+	 *
+	 * The zero-width `solid` on the edges each one leaves alone is the guard the
+	 * table's own cells carry: collapsed borders are resolved between
+	 * neighbours, and Chrome paints the winning hairline once per edge when the
+	 * losing side is styled `none`, so a 25%-opacity line blends twice and comes
+	 * out twice as bright.
+	 */
+	._fieldHeader_v9mcp_26,
+	._recordHeader_v9mcp_27,
+	._corner_v9mcp_28 {
+		border: 0 solid;
+	}
+
+	._fieldHeader_v9mcp_26,
+	._recordHeader_v9mcp_27 {
+		font-family: var(--lol-font-family-beaufort);
+		color: var(--lol-color-gold-100);
+		font-size: 0.75rem;
+		font-weight: 700;
+		letter-spacing: 0.075em;
+		line-height: 1rem;
+		text-transform: uppercase;
+		white-space: nowrap;
+		padding: 0.375rem 0.75rem;
+	}
+
+	/* The field names head their rows, so the hairline that separates the
+	   heading from the data runs down the table rather than across it. */
+	._fieldHeader_v9mcp_26 {
+		text-align: start;
+		border-inline-end: 1px solid
+			rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		/* Shrink to the names: a percentage under the content width is the table
+		   layout's way of saying "as narrow as this can go". */
+		width: 1%;
+	}
+
+	._recordHeader_v9mcp_27 {
+		border-bottom: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+	}
+
+	/* The blank corner over the field names carries both hairlines, so the one
+	   under the record names and the one beside the field names meet instead of
+	   stopping short of each other. */
+	._corner_v9mcp_28 {
+		padding: 0;
+		border-bottom: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		border-inline-end: 1px solid
+			rgb(from var(--lol-color-grey-100) r g b / 0.25);
+	}
+
+	._cell_v9mcp_70 {
+		border: 0 solid;
+		padding: 0.375rem 0.75rem;
+		vertical-align: middle;
+	}
+
+	._start_v9mcp_76 {
+		text-align: start;
+	}
+
+	._center_v9mcp_80 {
+		text-align: center;
+	}
+
+	._end_v9mcp_84 {
+		text-align: end;
+	}
+}