@lolmath/ui 0.0.0-20260620204307 → 0.0.0-20260726214151

package/dist/index.css

@@ -1654,6 +1654,237 @@
 		}
 	}
 }
+@layer lol {
+	._resizableContainer_1vns6_2 {
+		overflow: auto;
+		position: relative;
+	}
+
+	._table_1vns6_7 {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+		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;
+		}
+	}
+
+	._row_1vns6_25 {
+		color: var(--lol-color-grey-100);
+		outline: none;
+		transition: color 0.3s ease;
+
+		/* Every decoration is a background layer: a pseudo element on a table row
+		   is laid out as an anonymous cell and would shift the columns. */
+		--lol-table-row-spine: none;
+		--lol-table-row-hover: none;
+		--lol-table-row-highlight: none;
+
+		background-image:
+			var(--lol-table-row-spine), var(--lol-table-row-hover),
+			var(--lol-table-row-highlight);
+		background-repeat: no-repeat;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
+		&[data-href] {
+			cursor: pointer;
+		}
+
+		&[data-hovered] {
+			color: var(--lol-color-gold-100);
+			--lol-table-row-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 on the selected row, matching the client's "current" row. */
+			--lol-table-row-spine: linear-gradient(
+				90deg,
+				var(--lol-color-gold-500) 0 0.25rem,
+				transparent 0.25rem
+			);
+			--lol-table-row-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;
+		}
+	}
+
+	._cell_1vns6_84 {
+		padding: 0.375rem 0.75rem;
+		vertical-align: middle;
+		outline: none;
+
+		&[data-focus-visible] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: -1px;
+		}
+	}
+
+	._resizer_1vns6_95 {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-end: 0;
+		width: 0.75rem;
+		box-sizing: border-box;
+		border-inline: 0.3125rem solid transparent;
+		background-color: rgb(from var(--lol-color-gold-500) r g b / 0.6);
+		background-clip: content-box;
+		touch-action: none;
+		outline: none;
+		cursor: col-resize;
+
+		&[data-resizable-direction="left"] {
+			cursor: e-resize;
+		}
+
+		&[data-resizable-direction="right"] {
+			cursor: w-resize;
+		}
+
+		&[data-hovered],
+		&[data-resizing] {
+			background-color: var(--lol-color-gold-400);
+		}
+
+		&[data-focus-visible] {
+			background-color: var(--lol-color-gold-200);
+		}
+	}
+
+	/* Fixed footprint so toggling the sort direction never shifts the header. */
+	._sortIndicator_1vns6_127 {
+		display: inline-block;
+		vertical-align: middle;
+		width: 0.5rem;
+		margin-left: 0.375rem;
+		opacity: 0;
+		transition: opacity 0.3s ease;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
+		&::after {
+			content: "";
+			display: block;
+			width: 0;
+			height: 0;
+			border-style: solid;
+			border-color: transparent;
+			border-width: 0 0.25rem 0.375rem;
+			border-bottom-color: currentColor;
+		}
+	}
+
+	._column_1vns6_151 {
+		position: relative;
+		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 client separates the header from the rows with a faint hairline
+		   rather than a full border. */
+		border-bottom: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		outline: none;
+
+		/* Only sortable columns are interactive, so they are the only ones react
+		   aria marks as hovered or pressed. */
+		&[data-allows-sorting] {
+			cursor: pointer;
+			user-select: none;
+			transition: color 0.3s ease;
+
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
+		}
+
+		&[data-hovered] {
+			color: var(--lol-color-gold-200);
+		}
+
+		&[data-pressed] {
+			color: var(--lol-color-gold-500);
+		}
+
+		&[data-hovered] ._sortIndicator_1vns6_127 {
+			opacity: 0.5;
+		}
+
+		&[data-sort-direction] ._sortIndicator_1vns6_127 {
+			opacity: 1;
+		}
+
+		&[data-sort-direction="descending"] ._sortIndicator_1vns6_127::after {
+			border-width: 0.375rem 0.25rem 0;
+			border-top-color: currentColor;
+			border-bottom-color: transparent;
+		}
+
+		&[data-focus-visible] {
+			outline: 1px solid var(--lol-color-gold-400);
+			outline-offset: -1px;
+		}
+	}
+
+	._footer_1vns6_207 {
+		color: var(--lol-color-gold-300);
+
+		& ._cell_1vns6_84 {
+			border-top: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
+		}
+	}
+
+	._empty_1vns6_215 {
+		padding: 1rem 0.75rem;
+		text-align: center;
+	}
+
+	._start_1vns6_220 {
+		text-align: start;
+	}
+
+	._center_1vns6_224 {
+		text-align: center;
+	}
+
+	._end_1vns6_228 {
+		text-align: end;
+	}
+}
 @layer lol {
 	._list_nrxix_2 {
 		margin-left: -1rem;
@@ -1772,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;
+	}
+}