@livenetworks/ashlar 1.4.1 → 1.6.0

package/scss/config/mixins/_data-table.scss

@@ -1,346 +0,0 @@
-@use 'display' as *;
-@use 'spacing' as *;
-@use 'sizing' as *;
-@use 'typography' as *;
-@use 'colors' as *;
-@use 'borders' as *;
-@use 'shadows' as *;
-@use 'position' as *;
-@use 'transitions' as *;
-@use 'interaction' as *;
-@use 'motion' as *;
-@use 'form' as *;
-@use 'btn' as *;
-@use 'card' as *;
-@use 'ln-table';
-
-// Data Table -- enhanced table with toolbar, sort, filter, virtual scroll.
-//
-// Usage:
-//   [data-ln-data-table] { @include data-table; }
-//
-// State-driven CSS (loading, selected, focused, spacer) stays in
-// the co-located JS SCSS file.
-
-@mixin data-table {
-	@include relative;
-
-	// Row hover token — local to data-table so chrome (toolbar, thead,
-	// footer) reading --bg-sunken stays visually distinct from the row
-	// the cursor is on. --bg-elevated is unsuitable: it equals --bg-base
-	// in light theme, making hover invisible. Derive a 4-point lightness
-	// step from --bg-base via CSS relative color syntax (number form, see
-	// _btn.scss header for percentage-vs-number rationale).
-	//
-	// Light theme:  hsl(white)            → ~hsl(0 0% 96%)
-	// Dark theme:   hsl(220 16% 13%)      → hsl(220 16% 17%)  ≈ --bg-elevated dark
-	//
-	// The 4-point step is monotonically distinct from --bg-sunken
-	// (light: neutral-100 ≈ 95%; dark: 220 16% 20%) on both sides.
-	--bg-row-hover: hsl(from var(--bg-base) h s calc(l - 4));
-
-	// Override @mixin table-base's `tbody tr:hover` to use the local hover
-	// token instead of --bg-sunken. Default hover stays --bg-sunken for
-	// standalone tables; data-table re-binds so its hover disambiguates from
-	// chrome that also uses --bg-sunken.
-	> table tbody tr:hover {
-		--color-bg: var(--bg-row-hover);
-		background: var(--color-bg);
-	}
-
-	// Inner table — `border-collapse: separate` + `border-spacing: 0` is
-	// required for `position: sticky` on `<thead> th` to actually pin in
-	// Chrome. With the `border-collapse: collapse` that `@mixin table-base`
-	// sets by default, Chrome silently drops sticky behavior on table cells —
-	// the same reason `@mixin ln-table` applies this exact override. Borders
-	// are restored cell-by-cell via table-base's `td { @include border-b }`,
-	// so no visual change.
-	> table {
-		border-collapse: separate;
-		border-spacing: 0;
-	}
-
-
-
-	// Sticky header - Pins the entire thead (including the in-thead toolbar) at top:0
-	thead {
-		@include sticky-top;
-	}
-
-	thead th {
-		position: relative;
-		top: auto;
-		z-index: auto;
-		background: var(--bg-sunken);
-
-		&[data-ln-col] {
-			// Maintain standard table-cell layout so columns don't break or stack vertically
-			white-space: normal;
-
-			// Add padding-inline-end to prevent text from overlapping absolute buttons
-			
-			// Case 1: Has both sort and filter buttons
-			&:has([data-ln-col-sort]):has([data-ln-col-filter]) {
-				padding-inline-end: calc(var(--padding-x) + 2.5rem);
-
-				[data-ln-col-filter] {
-					position: absolute;
-					top: 50%;
-					transform: translateY(-50%);
-					right: var(--padding-x);
-					margin: 0;
-				}
-
-				[data-ln-col-sort] {
-					position: absolute;
-					top: 50%;
-					transform: translateY(-50%);
-					right: calc(var(--padding-x) + 1.25rem);
-					margin: 0;
-				}
-			}
-
-			// Case 2: Has only sort button
-			&:has([data-ln-col-sort]):not(:has([data-ln-col-filter])) {
-				padding-inline-end: calc(var(--padding-x) + 1.25rem);
-
-				[data-ln-col-sort] {
-					position: absolute;
-					top: 50%;
-					transform: translateY(-50%);
-					right: var(--padding-x);
-					margin: 0;
-				}
-			}
-
-			// Case 3: Has only filter button
-			&:has([data-ln-col-filter]):not(:has([data-ln-col-sort])) {
-				padding-inline-end: calc(var(--padding-x) + 1.25rem);
-
-				[data-ln-col-filter] {
-					position: absolute;
-					top: 50%;
-					transform: translateY(-50%);
-					right: var(--padding-x);
-					margin: 0;
-				}
-			}
-		}
-	}
-
-	// Support for the in-thead toolbar row inside ln-data-table
-	thead > tr:first-child:has(> th[colspan]) > th {
-		@include ln-table.ln-table-thead-toolbar;
-	}
-
-	// Section footer — sibling of <table>, NOT inside it. Moved out of
-	// <tfoot> because Chromium drops sticky on table cells when a
-	// virtual-scroll spacer <tr> sits between the data and the tfoot row.
-	// As a section-level <footer> sticky works reliably and shares the
-	// same scroll container as the toolbar.
-	//
-	// Chrome surface visually symmetric with panel-header: --bg-sunken
-	// fill, muted fg, body-sm text, border-block-start for separation.
-	> footer {
-		padding: var(--padding-y) var(--padding-x);
-		border-block-start: var(--border-block-start, var(--border-width) solid var(--color-border));
-		--color-bg: var(--bg-sunken);
-		background: var(--color-bg);
-		--color-fg: var(--fg-muted);
-		color: var(--color-fg);
-		font-size: var(--text-body-sm);
-		position: sticky;
-		bottom: 0;
-		z-index: var(--z-sticky);
-	}
-}
-
-// ─── Sort indicators ──────────────────────────────────────
-
-@mixin data-table-sort-button {
-	opacity: 0.4;
-	@include motion-safe {
-		transition: opacity 0.15s;
-	}
-	@include cursor-pointer;
-	background: none;
-	border: none;
-	--btn-padding-y: var(--size-2xs);
-	--btn-padding-x: var(--size-2xs);
-	--margin-inline: var(--size-xs);
-	margin-inline-start: var(--margin-inline);
-	vertical-align: middle;
-
-	// Icon-trio visibility — neutral state shows the dual-arrow icon.
-	// Active states (.ln-sort-asc / .ln-sort-desc on ancestor <th>)
-	// flip to a single directional icon. See component file for the
-	// active-state overrides.
-	[data-ln-sort-icon="asc"],
-	[data-ln-sort-icon="desc"] {
-		display: none;
-	}
-}
-
-@mixin data-table-sort-active {
-	opacity: 1;
-	color: var(--color-accent);
-}
-
-// ─── Filter button ────────────────────────────────────────
-
-@mixin data-table-filter-button {
-	opacity: 0.4;
-	@include motion-safe {
-		transition: opacity 0.15s;
-	}
-	@include cursor-pointer;
-	background: none;
-	border: none;
-	--btn-padding-y: var(--size-2xs);
-	--btn-padding-x: var(--size-2xs);
-	--margin-inline: var(--size-2xs);
-	margin-inline-start: var(--margin-inline);
-	vertical-align: middle;
-	@include relative;
-}
-
-@mixin data-table-filter-active {
-	opacity: 1;
-	color: var(--color-accent);
-
-	&::after {
-		content: '';
-		@include absolute;
-		top: 0;
-		right: 0;
-		width: 0.375rem;
-		height: 0.375rem;
-		border-radius: var(--radius-full);
-		background: var(--color-accent);
-	}
-}
-
-// ─── Row action buttons ───────────────────────────────────
-//
-// `[data-ln-row-action]` is the ln-data-table attribute for in-row
-// action buttons (edit, delete, custom). They're conventionally
-// icon-only and live in narrow `<td>` cells — full button chrome
-// inflates row height and visually competes with the row content.
-//
-// Style is ghost: no bg, no border, no shadow, dim opacity at rest,
-// full opacity on hover. Targets the BUTTON via its own attribute,
-// not via ancestor selectors — a `data-ln-row-action` button looks
-// the same anywhere.
-
-@mixin data-table-row-action {
-	background: none;
-	border: none;
-	--shadow: none;
-	--btn-padding-y: var(--size-2xs);
-	--btn-padding-x: var(--size-2xs);
-	opacity: 0.5;
-	@include motion-safe {
-		transition: opacity 0.15s;
-	}
-
-	&:hover:not(:disabled) {
-		background: none;
-		opacity: 1;
-	}
-}
-
-// Destructive variant — semantic-color cascade via --color-primary
-// rebind so the icon and any confirm-state overlay both read the
-// same source. Applied on top of `data-table-row-action`.
-@mixin data-table-row-action-delete {
-	--color-primary: var(--color-error);
-	color: hsl(var(--color-primary));
-}
-
-// ─── Filter dropdown ──────────────────────────────────────
-
-@mixin data-table-filter-dropdown {
-	@include absolute;
-	top: 100%;
-	left: 0;
-	z-index: var(--z-dropdown);
-	--color-bg: var(--bg-elevated);
-	background: var(--color-bg);
-	--shadow: var(--shadow-floating);
-	border-block-start:  var(--border-block-start,  var(--border-width) solid var(--color-border));
-	border-block-end:    var(--border-block-end,    var(--border-width) solid var(--color-border));
-	border-inline-start: var(--border-inline-start, var(--border-width) solid var(--color-border));
-	border-inline-end:   var(--border-inline-end,   var(--border-width) solid var(--color-border));
-	border-radius: var(--radius);
-	box-shadow: var(--shadow);
-	--padding-y: var(--size-sm);
-	--padding-x: var(--size-sm);
-	padding: var(--padding-y) var(--padding-x);
-	min-width: 12rem;
-	max-height: 20rem;
-	overflow-y: auto;
-
-	[data-ln-filter-search] {
-		@include form-input;
-		width: 100%;
-		--margin-block: var(--size-sm);
-		margin-bottom: var(--margin-block);
-	}
-
-	ul {
-	}
-
-	li {
-		--padding-y: var(--size-xs);
-		padding: var(--padding-y) 0;
-	}
-
-	label {
-		display: flex;
-		align-items: center;
-		gap: var(--gap);
-		@include cursor-pointer;
-		font-size: var(--text-sm);
-	}
-
-	[data-ln-filter-clear] {
-		@include btn;
-		width: 100%;
-		--margin-block: var(--size-sm);
-		margin-top: var(--margin-block);
-		font-size: var(--text-sm);
-	}
-}
-
-// Row interaction state — applied to JS-marked clickable rows.
-
-@mixin data-table-row {
-	cursor: pointer;
-
-	&:hover {
-		--color-bg: var(--bg-sunken);
-		background: var(--color-bg);
-	}
-}
-
-@mixin data-table-row-selected {
-	background: var(--color-accent-tint);
-}
-
-@mixin data-table-row-focused {
-	// Derive focus from --color-accent at this scope (same hue/saturation,
-	// lightness +8). Number form (not percentage) — see _btn.scss for the
-	// syntax rationale.
-	--color-accent-focus: hsl(from var(--color-accent) h s calc(l + 8));
-	outline: 2px solid var(--color-accent-focus);
-	outline-offset: -2px;
-}
-
-// Virtual-scroll spacer rows (JS-injected) — neutralize default cell padding/border.
-
-@mixin data-table-spacer-row {
-	td {
-		padding: 0 !important;
-		border: none !important;
-	}
-}