@lolmath/ui 9.1.2 → 9.3.0

package/dist/index.css

@@ -515,7 +515,696 @@
 	}
 }
 @layer lol {
-	._checkbox_1rldq_2 {
+	._text_1tvjr_2 {
+		font-family: var(--lol-font-family-spiegel);
+	}
+
+	._label_1tvjr_6 {
+		font-size: var(--lol-font-size-label);
+		line-height: var(--lol-line-height-label);
+		letter-spacing: var(--lol-letter-spacing-label);
+		font-weight: var(--lol-font-weight-label);
+	}
+
+	._stat_1tvjr_13 {
+		font-size: var(--lol-font-size-stat);
+		line-height: var(--lol-line-height-stat);
+		letter-spacing: var(--lol-letter-spacing-stat);
+		font-weight: var(--lol-font-weight-stat);
+	}
+
+	._largeNumber_1tvjr_20 {
+		font-size: var(--lol-font-size-large-number);
+		line-height: var(--lol-line-height-large-number);
+		letter-spacing: var(--lol-letter-spacing-large-number);
+		font-weight: var(--lol-font-weight-large-number);
+	}
+
+	._sm_1tvjr_27 {
+		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);
+	}
+
+	._base_1tvjr_34 {
+		font-size: var(--lol-font-size-base);
+		line-height: var(--lol-line-height-base);
+		letter-spacing: var(--lol-letter-spacing-base);
+		font-weight: var(--lol-font-weight-base);
+	}
+
+	._md_1tvjr_41 {
+		font-size: var(--lol-font-size-md);
+		line-height: var(--lol-line-height-md);
+		letter-spacing: var(--lol-letter-spacing-md);
+		font-weight: var(--lol-font-weight-md);
+	}
+
+	._lg_1tvjr_48 {
+		font-size: var(--lol-font-size-lg);
+		line-height: var(--lol-line-height-lg);
+		letter-spacing: var(--lol-letter-spacing-lg);
+		font-weight: var(--lol-font-weight-lg);
+	}
+
+	._grey100_1tvjr_55 {
+		color: var(--lol-color-grey-100);
+	}
+
+	._grey150_1tvjr_59 {
+		color: var(--lol-color-grey-150);
+	}
+
+	._gold100_1tvjr_63 {
+		color: var(--lol-color-gold-100);
+	}
+}
+@layer lol {
+	._button_2pv2a_2 {
+		/* A <button>; the trigger's whole look is drawn below. */
+		appearance: none;
+		margin: 0;
+		font-family: var(--lol-font-family-spiegel);
+		display: inline-block;
+		min-width: 200px;
+		outline: none;
+
+		border: 1px solid transparent;
+
+		color: var(--lol-color-grey-100);
+		padding: 0 1.5rem 0 0.5rem;
+
+		font-size: 0.75rem;
+		font-weight: 500;
+		line-height: 1rem;
+		letter-spacing: 0.025em;
+		text-align: left;
+
+		--lol-select-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=");
+		--lol-select-border-gradient: var(--lol-gradient-gold);
+		--lol-select-background-gradient: var(--lol-gradient-hextech-black);
+
+		&[data-open] {
+			--lol-select-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==");
+			color: var(--lol-color-gold-600);
+			--lol-select-background-gradient: var(--lol-gradient-grey-300);
+			--lol-select-border-gradient: var(--lol-gradient-gold-press);
+		}
+
+		&[data-pressed] {
+			--lol-select-border-gradient: var(--lol-gradient-gold-press);
+		}
+
+		&[data-hovered] {
+			--lol-select-border-gradient: var(--lol-gradient-gold-hover);
+		}
+
+		&[data-disabled] {
+			--lol-select-border-gradient: var(--lol-gradient-disabled);
+			/* make the image gray */
+			filter: grayscale(100%);
+		}
+
+		&._small_2pv2a_47 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_2pv2a_51 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_2pv2a_55 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._singleSelect_2pv2a_60 {
+		background:
+			var(--lol-select-image) no-repeat right 0.5rem center,
+			var(--lol-select-background-gradient) padding-box,
+			var(--lol-select-border-gradient) border-box;
+	}
+
+	._multiSelect_2pv2a_67 {
+		background:
+			var(--lol-select-background-gradient) padding-box,
+			var(--lol-select-border-gradient) border-box;
+	}
+
+	._listBox_2pv2a_73 {
+		background-color: var(--lol-color-hextech-black);
+		border: 1px solid var(--lol-color-gold-600);
+		outline: none;
+		overflow-y: auto;
+	}
+
+	._item_2pv2a_80 {
+		border-bottom: 1px solid var(--lol-color-grey-300);
+		color: var(--lol-color-gold-300);
+		font-size: var(--lol-font-size-sm);
+		font-weight: var(--lol-font-weight-sm);
+		line-height: var(--lol-line-height-sm);
+		letter-spacing: var(--lol-letter-spacing-sm);
+		padding: 0.375rem 0.5rem;
+		outline: none;
+		cursor: pointer;
+
+		&[data-hovered] {
+			background-color: var(--lol-color-grey-300);
+			color: var(--lol-color-gold-100);
+		}
+
+		&[data-pressed],
+		&._focus_2pv2a_97 {
+			background-color: color-mix(
+				in srgb,
+				var(--lol-color-grey-300),
+				transparent 50%
+			);
+			color: var(--lol-color-gold-600);
+		}
+
+		&._selected_2pv2a_106 {
+			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAsElEQVR42pTQXQoBURTA8ZmbdxuxAi/WgfLmQb4pYgMi36QUJUuxBIvw7FEi/qfOrds0NPfW7+We85+mG95v18DjhGjglPKMNqjibTyilUYTbE3CaIE65ujLZZJQlptYomsvJUyjp1+Oi1pYo+MOjA7GmEWiKdrY6c7HHcqrjpDRpQeGGslv7VGLRjZ8Ii9PjAFyyOKISlxkQzkvFDUu4Izyr8gNA41KuODwL5LzFWAAUJ8mTIVblvcAAAAASUVORK5CYII=);
+			background-position: right 0.5rem center;
+			background-repeat: no-repeat;
+		}
+	}
+
+	._popover_2pv2a_113 {
+		width: var(--trigger-width);
+		display: flex;
+		flex-direction: column;
+	}
+
+	._emptyList_2pv2a_119 {
+		padding: 0.5rem 0.25rem;
+		text-align: left;
+	}
+}
+@layer lol {
+	._calendar_dpi4c_2,
+	._rangeCalendar_dpi4c_3 {
+		--lol-calendar-cell-size: 2.5rem;
+
+		display: flex;
+		flex-direction: column;
+		/*
+		 * A flex column is still a normal block box for its own sizing: with
+		 * no explicit width it fills its parent (a popover, a wide form)
+		 * rather than shrinking to its content. `fit-content` makes the
+		 * calendar itself only as wide as its widest child (the grid), and
+		 * `align-items: stretch` (the default, kept intentionally) then
+		 * stretches every other child — including the `header="picker"` nav
+		 * row, which sits directly in this container rather than inside
+		 * `.month` — to match that same width, instead of each shrinking
+		 * independently to its own content.
+		 */
+		width: fit-content;
+		gap: 0.75rem;
+		outline: none;
+
+		&[data-disabled] {
+			opacity: 0.6;
+		}
+	}
+
+	._months_dpi4c_28 {
+		display: flex;
+		gap: 1.5rem;
+	}
+
+	._month_dpi4c_16 {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	._nav_dpi4c_39 {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	._pickerGroup_dpi4c_46 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		flex: 1;
+	}
+
+	._chevronFlipped_dpi4c_54 {
+		transform: rotate(180deg);
+	}
+
+	._heading_dpi4c_58 {
+		flex: 1;
+		margin: 0;
+		text-align: center;
+		color: var(--lol-color-gold-100);
+		font-family: var(--lol-font-family-beaufort);
+		text-transform: uppercase;
+		font-size: var(--lol-font-size-sm);
+		font-weight: var(--lol-font-weight-h5);
+		letter-spacing: var(--lol-letter-spacing-h5);
+	}
+
+	._grid_dpi4c_70 {
+		/*
+		 * `separate` (not `collapse`) is what makes the continuous-selection
+		 * border below work at all: `collapse` merges each pair of adjacent
+		 * cells' touching borders into one, picking a winner between a
+		 * selected row's colored edge and its unselected neighbor's
+		 * transparent one — which silently erases every other segment of the
+		 * "continuous" line. `separate` keeps each cell's border independent.
+		 *
+		 * The table is sized to exactly 7 cells wide rather than `100%`: with
+		 * no intrinsic width, it stretches to fill whatever it's placed in
+		 * (a popover, a wide form), dragging the popover along with it and
+		 * spacing the 7 columns far enough apart that `.cell`'s fixed size
+		 * reads as small islands with visible gaps instead of a tight grid.
+		 *
+		 * `border-spacing` is 0 horizontally (columns within a week must
+		 * touch, or the continuous selection border above breaks into
+		 * islands again) but 3px vertically: with no gap between rows, two
+		 * consecutive fully-selected weeks touch top-border-to-bottom-border
+		 * and read as one tall block instead of two separate rounded bars.
+		 */
+		border-collapse: separate;
+		border-spacing: 0 3px;
+		table-layout: fixed;
+		width: calc(var(--lol-calendar-cell-size) * 7);
+	}
+
+	._gridHeader_dpi4c_97 {
+		/* thead: no visual treatment of its own beyond the cells within it. */
+	}
+
+	._headerCell_dpi4c_101 {
+		padding: 0 0 0.5rem 0;
+		font-family: var(--lol-font-family-spiegel);
+		font-size: var(--lol-font-size-xs);
+		font-weight: 700;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		text-align: center;
+		color: var(--lol-color-grey-100);
+	}
+
+	._cell_dpi4c_82 {
+		position: relative;
+		z-index: 0;
+		width: 100%;
+		height: var(--lol-calendar-cell-size);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		font-family: var(--lol-font-family-spiegel);
+		font-size: var(--lol-font-size-sm);
+		font-weight: 500;
+		color: var(--lol-color-gold-100);
+
+		border-radius: 9999px;
+		outline: none;
+		cursor: default;
+		-webkit-tap-highlight-color: transparent;
+
+		&[data-outside-month] {
+			color: var(--lol-color-grey-150);
+		}
+
+		&[data-outside-visible-range] {
+			visibility: hidden;
+		}
+
+		&[data-unavailable] {
+			color: var(--lol-color-grey-150);
+			text-decoration: line-through;
+		}
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+		}
+
+		&[data-hovered]:not([data-disabled], [data-selected]) {
+			background-color: var(--lol-color-grey-300);
+		}
+
+		&[data-pressed]:not([data-disabled]) {
+			background-color: var(--lol-color-grey-200);
+		}
+
+		&[data-focus-visible] {
+			z-index: 2;
+			outline: 2px solid var(--lol-color-gold-400);
+			outline-offset: 2px;
+		}
+
+		&[data-invalid] {
+			color: var(--lol-color-gold-400);
+		}
+
+		&[data-today]:not([data-selected]) {
+			color: var(--lol-color-gold-400);
+			font-weight: 700;
+
+			&::after {
+				content: "";
+				position: absolute;
+				bottom: 0.25rem;
+				width: 3px;
+				height: 3px;
+				border-radius: 9999px;
+				background-color: var(--lol-color-gold-400);
+			}
+		}
+	}
+
+	/*
+	 * `border-color` can't be a gradient, and `border-image` (which can) turns
+	 * out not to clip to `border-radius` — it paints a sharp rectangular frame
+	 * regardless, which is exactly wrong for a rounded pill. So the ring is
+	 * drawn the other way around: the cell's own `background` is the gold
+	 * gradient, filling its full (possibly rounded) shape, and a `::before`
+	 * sits on top with the hextech fill, inset by the ring's 2px thickness —
+	 * the same `--lol-gradient-hextech` a selected `ToggleButton` fills itself
+	 * with, so a selected date reads as the same "active" surface as
+	 * everywhere else in the library. `border-radius: inherit` copies
+	 * whatever radius the cell itself ends up with, so the hextech layer's
+	 * corners always match the gold shape's. Where its inset is 0 on a given
+	 * side, it covers that side's gold completely — which is how a
+	 * RangeCalendar's row-interior cells (below) suppress the ring on their
+	 * left/right and stay open into their neighbors, so the hextech fill
+	 * (identical in every selected cell) reads as one continuous surface
+	 * running the length of the range, across as many rows as it spans.
+	 * `z-index: -1` keeps it behind the day number: an absolutely-positioned
+	 * box otherwise paints above plain in-flow text regardless of source
+	 * order, which would bury the digit under it. No inset `box-shadow` here
+	 * (unlike the selected `ToggleButton` it borrows the fill from): a
+	 * per-cell shadow is a per-cell seam, visible at every date within a
+	 * selected run instead of once around the whole shape.
+	 */
+	._calendar_dpi4c_2 ._cell_dpi4c_82[data-selected],
+	._rangeCalendar_dpi4c_3 ._cell_dpi4c_82[data-selected] {
+		position: relative;
+		background: var(--lol-gradient-gold);
+		color: var(--lol-color-blue-100);
+
+		&::before {
+			content: "";
+			position: absolute;
+			z-index: -1;
+			top: 2px;
+			bottom: 2px;
+			left: 0;
+			right: 0;
+			background: var(--lol-gradient-hextech);
+			border-radius: inherit;
+		}
+	}
+
+	/*
+	 * Single-selection Calendar: exactly one date can be selected, so it's
+	 * always drawn as a standalone rounded pill — there's no row to stay
+	 * continuous with.
+	 */
+	._calendar_dpi4c_2 ._cell_dpi4c_82[data-selected] {
+		border-radius: 9999px;
+
+		&::before {
+			left: 2px;
+			right: 2px;
+		}
+	}
+
+	/*
+	 * RangeCalendar: the selection is a run of adjacent cells, and the ring
+	 * needs to read as one continuous gold outline around that whole shape
+	 * rather than a stack of separate pills. By default a selected cell is
+	 * square and open on both sides (the black layer covers left/right
+	 * completely), so the gold shows only along the top/bottom and one cell's
+	 * fill runs straight into the next. Only the actual start/end of the
+	 * range, or a cell sitting at the edge of its own week row (the range
+	 * wraps there), opens up a side and rounds that corner — capping the bar
+	 * at the true ends and at every row break. The two rules below only ever
+	 * touch their own side, so a single-day range (both start and end) still
+	 * gets both sides capped.
+	 *
+	 * A multi-month display (`visibleDuration: {months: 2+}`) adds a second
+	 * way a row can "break": when one calendar week straddles two displayed
+	 * months, each month's own grid still renders all 7 columns for that
+	 * week, padding out with the days that belong to the *other* grid. Those
+	 * padding days are dimmed (`data-outside-month`) but very much still in
+	 * the DOM and, crucially, never carry `data-selected` themselves — even
+	 * when the date they show *is* selected in its own home grid — to avoid
+	 * two different interactive elements both claiming to be the selected
+	 * Sept 1st. So `td:last-child`/`td:first-child` land on those always-
+	 * unselected padding cells, not on the last/first cell that's actually
+	 * part of the run, and the real edge (e.g. the 31st, sitting right next
+	 * to a dimmed, unselected "1") never matches either selector — left
+	 * square instead of capped. The two extra rules below cap a selected
+	 * cell whenever its neighbor plainly isn't selected, for whatever
+	 * reason: this padding, an unavailable date, or anything else that
+	 * breaks the run — which is the same condition `td:first-child`/
+	 * `td:last-child` are really standing in for at a genuine row edge.
+	 */
+	._rangeCalendar_dpi4c_3 ._cell_dpi4c_82[data-selected] {
+		border-radius: 0;
+	}
+
+	._rangeCalendar_dpi4c_3 ._cell_dpi4c_82[data-selected][data-selection-start],
+	._rangeCalendar_dpi4c_3 td:first-child > ._cell_dpi4c_82[data-selected],
+	._rangeCalendar_dpi4c_3
+		td:has(._cell_dpi4c_82:not([data-selected]))
+		+ td
+		> ._cell_dpi4c_82[data-selected] {
+		border-top-left-radius: 9999px;
+		border-bottom-left-radius: 9999px;
+
+		&::before {
+			left: 2px;
+		}
+	}
+
+	._rangeCalendar_dpi4c_3 ._cell_dpi4c_82[data-selected][data-selection-end],
+	._rangeCalendar_dpi4c_3 td:last-child > ._cell_dpi4c_82[data-selected],
+	._rangeCalendar_dpi4c_3
+		td:has(+ td ._cell_dpi4c_82:not([data-selected]))
+		> ._cell_dpi4c_82[data-selected] {
+		border-top-right-radius: 9999px;
+		border-bottom-right-radius: 9999px;
+
+		&::before {
+			right: 2px;
+		}
+	}
+}
+@layer lol {
+	._dateInput_qxz9d_2 {
+		background:
+			var(--lol-input-background-gradient) padding-box,
+			var(--lol-input-border-gradient) border-box;
+
+		--lol-input-border-gradient: var(--lol-gradient-gold);
+		--lol-input-background-gradient: var(--lol-gradient-hextech-black);
+
+		border: 1px solid transparent;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		margin: 0;
+		padding: 0 0.75rem;
+		outline: none;
+
+		font-family: var(--lol-font-family-spiegel);
+
+		&[data-disabled] {
+			--lol-input-border-gradient: var(--lol-gradient-disabled);
+		}
+
+		&[data-focus-within] {
+			--lol-input-border-gradient: var(--lol-gradient-gold-hover);
+			--lol-input-background-gradient: var(--lol-gradient-grey-focus);
+		}
+
+		&._small_qxz9d_29 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_qxz9d_33 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_qxz9d_37 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._segment_qxz9d_42 {
+		padding: 0 0.125rem;
+		border-radius: 2px;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		font-weight: 500;
+		letter-spacing: 0.025em;
+		color: var(--lol-color-gold-100);
+		font-variant-numeric: tabular-nums;
+		outline: none;
+		caret-color: transparent;
+
+		/* Literal separators ("/", ":", ",") sit between segments; they are not
+		   editable so they shouldn't pick up hover/focus affordances. */
+		&[data-type="literal"] {
+			padding: 0 0.125rem;
+			color: var(--lol-color-grey-100);
+		}
+
+		&[data-placeholder] {
+			color: var(--lol-color-grey-100);
+		}
+
+		&[data-hovered]:not([data-type="literal"]) {
+			background-color: var(--lol-color-grey-300);
+		}
+
+		&[data-focused]:not([data-type="literal"]) {
+			background-color: var(--lol-color-gold-600);
+			color: var(--lol-color-gold-100);
+		}
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+		}
+
+		&[data-readonly] {
+			color: var(--lol-color-grey-100);
+		}
+	}
+}
+@layer lol {
+	._group_1dgbw_2 {
+		display: flex;
+		align-items: stretch;
+		gap: 1px;
+		padding: 1px;
+		outline: none;
+
+		background-image: var(--lol-gradient-gold);
+
+		&[data-disabled] {
+			background-image: var(--lol-gradient-disabled);
+		}
+
+		&[data-focus-within] {
+			background-image: var(--lol-gradient-gold-hover);
+		}
+
+		&._small_1dgbw_19 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_1dgbw_23 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_1dgbw_27 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._input_1dgbw_32 {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		min-width: 0;
+		background-color: var(--lol-color-hextech-black);
+		padding: 0 0.75rem;
+		outline: none;
+		font-family: var(--lol-font-family-spiegel);
+
+		&[data-disabled] {
+			background-color: var(--lol-color-grey-300);
+		}
+	}
+
+	._separator_1dgbw_47 {
+		display: flex;
+		align-items: center;
+		background-color: var(--lol-color-hextech-black);
+		color: var(--lol-color-grey-100);
+		padding: 0 0.125rem;
+		font-family: var(--lol-font-family-spiegel);
+		/* Match the date segments' line-height so flex-centering the dash
+		   against the same line-box height keeps it optically level. */
+		font-size: 0.75rem;
+		line-height: 1rem;
+		/*
+		 * `.group`'s `gap` is what shows its gold background between every
+		 * pair of children — including the two 1px slivers flanking this
+		 * dash, which reads as the dash sitting in its own gold-bordered box
+		 * rather than as a plain separator between the two dates. Negative
+		 * margin pulls it 1px into each neighboring gap, so its own opaque
+		 * fill covers those two slivers instead.
+		 */
+		margin: 0 -1px;
+
+		&[data-disabled] {
+			background-color: var(--lol-color-grey-300);
+			color: var(--lol-color-grey-150);
+		}
+	}
+
+	._button_1dgbw_74 {
+		/* 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;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 0.625rem;
+
+		color: var(--lol-color-gold-300);
+		background-color: var(--lol-color-hextech-black);
+
+		&[data-hovered] {
+			color: var(--lol-color-gold-100);
+		}
+
+		&[data-pressed] {
+			color: var(--lol-color-gold-600);
+		}
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+			background-color: var(--lol-color-grey-300);
+		}
+	}
+
+	/*
+	 * The gold border + hextech-black fill are drawn once, on the popover
+	 * itself, and cover it edge to edge — the header and grid inside stay
+	 * transparent so it reads as one continuous surface rather than a stack
+	 * of separately-filled sections. The visible "hextech" gradient lives on
+	 * selected dates themselves (see calendar.module.css), not the popover.
+	 */
+	._popover_1dgbw_110 {
+		padding: 0.75rem;
+		border: 2px solid transparent;
+		box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
+		background:
+			var(--lol-gradient-hextech-black) padding-box,
+			var(--lol-gradient-gold) border-box;
+	}
+}
+@layer lol {
+	._checkbox_6xifu_2 {
 		font-family: var(--lol-font-family-spiegel);
 		color: var(--lol-color-grey-100);
 		display: flex;
@@ -535,10 +1224,10 @@
 		}
 	}
 
-	._icon_1rldq_22 {
+	._icon_6xifu_22 {
 		/* Off the text baseline, so the box is the glyph. */
 		display: block;
-		max-width: 100%;
+		flex-shrink: 0;
 		width: 0.875rem;
 		height: 0.875rem;
 	}
@@ -664,6 +1353,92 @@
 		flex-grow: 1;
 	}
 }
+@layer lol {
+	._group_74tda_2 {
+		display: flex;
+		align-items: stretch;
+		outline: none;
+
+		/*
+		 * Unlike NumberField's Group, the pieces here (name + tag, start date +
+		 * end date, ...) read as one field, not separately-boxed controls — so
+		 * the border and fill are drawn once, on the group itself, instead of
+		 * per-child with gaps between them.
+		 */
+		background:
+			var(--lol-input-background-gradient) padding-box,
+			var(--lol-input-border-gradient) border-box;
+
+		--lol-input-border-gradient: var(--lol-gradient-gold);
+		--lol-input-background-gradient: var(--lol-gradient-hextech-black);
+
+		border: 1px solid transparent;
+
+		&[data-disabled] {
+			--lol-input-border-gradient: var(--lol-gradient-disabled);
+		}
+
+		&[data-focus-within] {
+			--lol-input-border-gradient: var(--lol-gradient-gold-hover);
+		}
+
+		&._small_74tda_30 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_74tda_34 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_74tda_38 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._input_74tda_43 {
+		/* Transparent so the group's own fill shows through with no seam. */
+		border: 0;
+		margin: 0;
+		flex: 1;
+		min-width: 0;
+		background-color: transparent;
+		color: var(--lol-color-gold-100);
+		font-family: var(--lol-font-family-spiegel);
+		font-weight: 500;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		letter-spacing: 0.025em;
+		padding: 0 0.75rem;
+		outline: none;
+
+		&[data-disabled] {
+			background-color: var(--lol-color-grey-300);
+			color: var(--lol-color-grey-100);
+		}
+
+		&[data-focused] {
+			background-image: var(--lol-gradient-grey-focus);
+		}
+	}
+
+	._separator_74tda_69 {
+		display: flex;
+		align-items: center;
+		flex: none;
+		color: var(--lol-color-gold-300);
+		font-family: var(--lol-font-family-spiegel);
+		font-weight: 700;
+		font-size: 0.75rem;
+		/* Match `.input`'s line-height so flex-centering both glyphs against
+		   the same line-box height keeps them optically level. */
+		line-height: 1rem;
+		padding: 0 0.5rem;
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+		}
+	}
+}
 @layer lol {
 	._heading_4cie6_2 {
 		/* Rendered as h1-h5, which the UA gives block margins scaled to the font. */
@@ -980,7 +1755,7 @@
 	}
 }
 @layer lol {
-	._popover_uemk0_2 {
+	._popover_18zyh_2 {
 		padding: 2px;
 		box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
 		border: 2px solid transparent;
@@ -990,24 +1765,28 @@
 		--lol-button-border-gradient: var(--lol-gradient-gold-press);
 		--lol-button-background-gradient: var(--lol-gradient-grey-300);
 
-		&._top_uemk0_12 {
+		&._top_18zyh_12 {
 			margin-bottom: 0.5rem;
 		}
 
-		&._bottom_uemk0_16 {
+		&._bottom_18zyh_16 {
 			margin-top: 0.5rem;
 		}
 
-		&._left_uemk0_20 {
+		&._left_18zyh_20 {
 			margin-right: 0.5rem;
 		}
 
-		&._right_uemk0_24 {
+		&._right_18zyh_24 {
 			margin-left: 0.5rem;
 		}
 	}
 
-	._arrow_uemk0_29 {
+	._body_18zyh_29 {
+		padding: 1rem;
+	}
+
+	._arrow_18zyh_33 {
 		/*
 		 * React aria anchors the arrow's wrapper with `bottom: 100%`, so the
 		 * wrapper's box has to *be* the glyph. Left inline the svg sits on a text
@@ -1016,31 +1795,31 @@
 		 */
 		display: block;
 
-		._outer_uemk0_38 {
+		._outer_18zyh_42 {
 			fill: var(--lol-color-gold-600);
 		}
 
-		._inner_uemk0_42 {
+		._inner_18zyh_46 {
 			fill: var(--lol-color-grey-300);
 		}
 
-		&._top_uemk0_12 {
+		&._top_18zyh_12 {
 			transform: translateX(-1.5px);
 		}
 
-		&._bottom_uemk0_16 {
+		&._bottom_18zyh_16 {
 			transform: translateX(-1.5px) rotate(180deg);
 
-			._outer_uemk0_38 {
+			._outer_18zyh_42 {
 				fill: var(--lol-color-gold-500);
 			}
 		}
 
-		&._left_uemk0_20 {
+		&._left_18zyh_20 {
 			transform: translateY(-2px) translateX(-5px) rotate(-90deg);
 		}
 
-		&._right_uemk0_24 {
+		&._right_18zyh_24 {
 			transform: translateY(-2px) translateX(5px) rotate(90deg);
 		}
 	}
@@ -1243,7 +2022,7 @@
 }
 @layer lol {
 	/* Base tag sets up CSS variables; variants (gold/hextech) define actual gradients */
-	._tag_baprz_3 {
+	._tag_1db70_3 {
 		background:
 			var(--lol-multiple-select-background-gradient) padding-box,
 			var(--lol-multiple-select-border-gradient) border-box;
@@ -1264,32 +2043,32 @@
 		padding: 0 0.3rem 0 0.5rem;
 	}
 
-	._gold_baprz_24 {
+	._gold_1db70_24 {
 		border-width: 1px;
 		--lol-multiple-select-border-gradient: var(--lol-gradient-gold);
 		--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
 		color: var(--lol-color-gold-300);
 	}
 
-	._hextech_baprz_31 {
+	._hextech_1db70_31 {
 		border-width: 1px;
 		--lol-multiple-select-border-gradient: var(--lol-gradient-hextech);
 		--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
 		color: var(--lol-color-blue-100);
 	}
 
-	._grey_baprz_38 {
+	._grey_1db70_38 {
 		border-width: 1px;
 		--lol-multiple-select-border-gradient: var(--lol-color-grey-100);
 		--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
 		color: var(--lol-color-gold-100);
 	}
 
-	._text_baprz_45 {
+	._text_1db70_45 {
 		padding: 0.25rem 0;
 	}
 
-	._remove_baprz_49 {
+	._remove_1db70_49 {
 		/* A <button> we never paint: without this it falls back to the UA's
 		   `buttonface` slab, which is grey under `color-scheme: dark`. The mask is
 		   filled with `currentColor`, so the inherited colour matters too. */
@@ -1316,13 +2095,13 @@
 		}
 	}
 
-	._tagGroup_baprz_76 {
+	._tagGroup_1db70_76 {
 		padding: 0.25rem;
 		display: flex;
-		justify-content: center;
+		justify-content: flex-start;
 	}
 
-	._tagList_baprz_82 {
+	._tagList_1db70_82 {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0.25rem;
@@ -1330,209 +2109,27 @@
 	}
 }
 @layer lol {
-	._popover_1bri3_2 {
+	._popover_1gisa_2 {
 		width: 250px;
 		display: flex;
 		flex-direction: column;
 	}
 
-	._select_1bri3_8 {
-		border-right: none;
-		display: flex;
-		align-items: center;
-	}
-
-	._triggerContainer_1bri3_14 {
+	._triggerContainer_1gisa_8 {
 		display: inline-flex;
 	}
-}
-@layer lol {
-	._text_1tvjr_2 {
-		font-family: var(--lol-font-family-spiegel);
-	}
-
-	._label_1tvjr_6 {
-		font-size: var(--lol-font-size-label);
-		line-height: var(--lol-line-height-label);
-		letter-spacing: var(--lol-letter-spacing-label);
-		font-weight: var(--lol-font-weight-label);
-	}
-
-	._stat_1tvjr_13 {
-		font-size: var(--lol-font-size-stat);
-		line-height: var(--lol-line-height-stat);
-		letter-spacing: var(--lol-letter-spacing-stat);
-		font-weight: var(--lol-font-weight-stat);
-	}
-
-	._largeNumber_1tvjr_20 {
-		font-size: var(--lol-font-size-large-number);
-		line-height: var(--lol-line-height-large-number);
-		letter-spacing: var(--lol-letter-spacing-large-number);
-		font-weight: var(--lol-font-weight-large-number);
-	}
-
-	._sm_1tvjr_27 {
-		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);
-	}
-
-	._base_1tvjr_34 {
-		font-size: var(--lol-font-size-base);
-		line-height: var(--lol-line-height-base);
-		letter-spacing: var(--lol-letter-spacing-base);
-		font-weight: var(--lol-font-weight-base);
-	}
-
-	._md_1tvjr_41 {
-		font-size: var(--lol-font-size-md);
-		line-height: var(--lol-line-height-md);
-		letter-spacing: var(--lol-letter-spacing-md);
-		font-weight: var(--lol-font-weight-md);
-	}
-
-	._lg_1tvjr_48 {
-		font-size: var(--lol-font-size-lg);
-		line-height: var(--lol-line-height-lg);
-		letter-spacing: var(--lol-letter-spacing-lg);
-		font-weight: var(--lol-font-weight-lg);
-	}
-
-	._grey100_1tvjr_55 {
-		color: var(--lol-color-grey-100);
-	}
-
-	._grey150_1tvjr_59 {
-		color: var(--lol-color-grey-150);
-	}
-
-	._gold100_1tvjr_63 {
-		color: var(--lol-color-gold-100);
-	}
-}
-@layer lol {
-	._button_y5tgp_2 {
-		/* A <button>; the trigger's whole look is drawn below. */
-		appearance: none;
-		margin: 0;
-		font-family: var(--lol-font-family-spiegel);
-		display: inline-block;
-		min-width: 200px;
-		outline: none;
-
-		border: 1px solid transparent;
-
-		color: var(--lol-color-grey-100);
-		padding: 0 1.5rem 0 0.5rem;
-
-		font-size: 0.75rem;
-		font-weight: 500;
-		line-height: 1rem;
-		letter-spacing: 0.025em;
-		text-align: left;
-
-		--lol-select-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=");
-		--lol-select-border-gradient: var(--lol-gradient-gold);
-		--lol-select-background-gradient: var(--lol-gradient-hextech-black);
-
-		&[data-open] {
-			--lol-select-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==");
-			color: var(--lol-color-gold-600);
-			--lol-select-background-gradient: var(--lol-gradient-grey-300);
-			--lol-select-border-gradient: var(--lol-gradient-gold-press);
-		}
-
-		&[data-pressed] {
-			--lol-select-border-gradient: var(--lol-gradient-gold-press);
-		}
-
-		&[data-hovered] {
-			--lol-select-border-gradient: var(--lol-gradient-gold-hover);
-		}
-
-		&[data-disabled] {
-			--lol-select-border-gradient: var(--lol-gradient-disabled);
-			/* make the image gray */
-			filter: grayscale(100%);
-		}
-
-		&._small_y5tgp_47 {
-			min-height: var(--lol-form-height-small);
-		}
-
-		&._medium_y5tgp_51 {
-			min-height: var(--lol-form-height-medium);
-		}
-
-		&._large_y5tgp_55 {
-			min-height: var(--lol-form-height-large);
-		}
-	}
-
-	._singleSelect_y5tgp_60 {
-		background:
-			var(--lol-select-image) no-repeat right 0.5rem center,
-			var(--lol-select-background-gradient) padding-box,
-			var(--lol-select-border-gradient) border-box;
-	}
-
-	._multiSelect_y5tgp_67 {
-		background:
-			var(--lol-select-background-gradient) padding-box,
-			var(--lol-select-border-gradient) border-box;
-	}
-
-	._listBox_y5tgp_73 {
-		background-color: var(--lol-color-hextech-black);
-		border: 1px solid var(--lol-color-gold-600);
-		outline: none;
-		overflow-y: auto;
-	}
-
-	._item_y5tgp_80 {
-		border-bottom: 1px solid var(--lol-color-grey-300);
-		color: var(--lol-color-gold-300);
-		font-size: var(--lol-font-size-sm);
-		font-weight: var(--lol-font-weight-sm);
-		line-height: var(--lol-line-height-sm);
-		letter-spacing: var(--lol-letter-spacing-sm);
-		padding: 0.375rem 0.5rem;
-		outline: none;
-		cursor: pointer;
-
-		&[data-hovered] {
-			background-color: var(--lol-color-grey-300);
-			color: var(--lol-color-gold-100);
-		}
-
-		&[data-pressed],
-		&._focus_y5tgp_97 {
-			background-color: color-mix(
-				in srgb,
-				var(--lol-color-grey-300),
-				transparent 50%
-			);
-			color: var(--lol-color-gold-600);
-		}
-
-		&._selected_y5tgp_106 {
-			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAsElEQVR42pTQXQoBURTA8ZmbdxuxAi/WgfLmQb4pYgMi36QUJUuxBIvw7FEi/qfOrds0NPfW7+We85+mG95v18DjhGjglPKMNqjibTyilUYTbE3CaIE65ujLZZJQlptYomsvJUyjp1+Oi1pYo+MOjA7GmEWiKdrY6c7HHcqrjpDRpQeGGslv7VGLRjZ8Ii9PjAFyyOKISlxkQzkvFDUu4Izyr8gNA41KuODwL5LzFWAAUJ8mTIVblvcAAAAASUVORK5CYII=);
-			background-position: right 0.5rem center;
-			background-repeat: no-repeat;
-		}
-	}
 
-	._popover_y5tgp_113 {
-		width: var(--trigger-width);
+	/* Descendant selector, not just `.select`: needs higher specificity than
+	   `.button`'s `display: inline-block` (select.module.css), since equal-
+	   specificity rules would otherwise resolve by CSS source order — which
+	   depends on unrelated bundling details, not intent. Losing that race
+	   blockifies to `display: block` (this is a flex item) and silently
+	   drops `align-items`, so tags/empty text stick to the top instead of
+	   centering. */
+	._triggerContainer_1gisa_8 ._select_1gisa_12 {
+		border-right: none;
 		display: flex;
-		flex-direction: column;
-	}
-
-	._emptyList_y5tgp_119 {
-		padding: 0.5rem 0.25rem;
-		text-align: center;
+		align-items: center;
 	}
 }
 @layer lol {