@livenetworks/ashlar 1.6.1 → 2.0.0

package/{scss → theme}/config/mixins/_status-badge.scss

@@ -23,10 +23,11 @@
 	align-items: center;
 	gap: 0;
 	border-radius: var(--radius-full);
-	padding: 0.2em 0.65em;
+	padding: 0.18em 0.65em;
 	font-size: var(--text-xs);
 	font-weight: var(--font-medium);
-	@include tinted-surface(0.12);
+	border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 20%, transparent);
+	@include tinted-surface(0.09);
 	line-height: 1.5;
 
 	// Colored dot
@@ -81,3 +82,15 @@
 		}
 	}
 }
+
+// ─── Outline variant ──────────────────────────────────
+@mixin badge-outline {
+	background: transparent;
+	border: var(--border-width) solid color-mix(in srgb, currentColor 30%, transparent);
+
+	&:is(button) {
+		&:hover {
+			background: color-mix(in srgb, currentColor 10%, transparent);
+		}
+	}
+}

package/{scss → theme}/config/mixins/_table.scss

@@ -27,6 +27,10 @@
 	--shadow: var(--shadow-resting);
 	box-shadow: var(--shadow);
 	
+	// Scoped logical rhythm primitives for table cells
+	--padding-y: var(--size-xs-up);
+	--padding-x: var(--size-sm-up);
+
 	@if $sticky {
 		@include relative;
 		border-collapse: separate;
@@ -37,13 +41,12 @@
 	font-variant-numeric: tabular-nums;
 
 	// Row hover transition color. Default to a discrete tint of the primary color
-	// mixed with transparent to create a harmonious background shift across themes.
-	--bg-row-hover: var(--color-row-hover, color-mix(in srgb, var(--color-primary) 6%, transparent));
+	--bg-row-hover: var(--color-row-hover, color-mix(in srgb, var(--color-accent) var(--tint-hover), var(--bg-sunken)));
 
 	thead {
 		--color-bg: var(--bg-sunken);
 		background: var(--color-bg);
-		border-block-end: var(--border-block-end, var(--border-width-strong) solid var(--color-border));
+		border-block-end: var(--border-block-end, var(--border-width) solid var(--border-subtle));
 		
 		@if $sticky {
 			@include sticky-top;
@@ -59,15 +62,17 @@
 
 	th {
 		@include text-left;
-		padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
+		padding: var(--padding-y) var(--padding-x);
 		@include font-semibold;
-		@include typography(label-sm);
-		letter-spacing: 0.06em;
+		font-size: var(--text-xs);
+		letter-spacing: 0.05em;
 		@include uppercase;
+		--color-fg: var(--fg-muted);
 		color: var(--color-fg);
 		position: relative;
 		top: auto;
 		z-index: auto;
+		vertical-align: middle;
 
 		// Shared header-button stack — keyed off the unprefixed structural filter button
 		// class and the [data-ln-sort] JS-component selector, so table / ln-table /
@@ -124,18 +129,24 @@
 			--color-bg: var(--bg-row-hover);
 			background: var(--color-bg);
 		}
+
+		&.selected,
+		&:has(input[type="checkbox"]:checked) {
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-selected), var(--color-bg));
+		}
 	}
 
 	td {
-		padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
-		@include border-b;
-		font-size: var(--font-size);
+		padding: var(--padding-y) var(--padding-x);
+		border-block-end: var(--border-width) solid var(--border-subtle);
+		font-size: var(--text-sm);
 		line-height: var(--line-height);
-		vertical-align: top;
+		vertical-align: middle;
+		color: var(--color-fg);
 	}
 
 	tr:last-child td {
-		@include border-none;
+		border-block-end: none;
 	}
 
 	td.numeric,
@@ -157,7 +168,7 @@
 	// Sticky section footer inside sticky/enhanced tables
 	@if $sticky {
 		> footer {
-			padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
+			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);
@@ -286,8 +297,8 @@
 	transition: all 0.15s ease-in-out;
 
 	&:hover {
-		background-color: hsl(var(--color-primary) / 0.12);
-		color: hsl(var(--color-primary));
+		background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
+		color: var(--color-accent);
 		opacity: 1;
 	}
 }

package/{scss → theme}/config/mixins/_tabs.scss

@@ -46,7 +46,7 @@
 
 	&:hover {
 		color: var(--color-accent);
-		background-color: color-mix(in srgb, var(--color-accent) 5%, transparent);
+		background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 		border-bottom-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
 	}
 

package/{scss → theme}/config/mixins/_toast.scss

@@ -1,179 +1,174 @@
-@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 'btn' as *;
-@use 'card' as *;
-@use 'breakpoints' as *;
-
-// Toast notification -- side-accent card with icon, title, body, close button.
-// The <li> IS the card; the type IS its class (.success/.error/.warn/.info).
-//
-// Usage:
-//   [data-ln-toast]      { @include toast-container; }
-//   [data-ln-toast] > li { @include toast-item; @include toast-card; }
-//
-// Tone: the type class on the <li> rebinds --color-primary/--color-accent via
-// semantic-color() — see components/_toast.scss. SSR authors the class; the
-// dynamic path fills it (data-ln-attr="class:type"). warn maps to the warning
-// family in that binding.
-
-@mixin toast-container {
-	@include fixed;
-	@include z-toast;
-	border: none;
-	background: transparent;
-	inset: auto;
-	right: var(--size-lg);
-	bottom: var(--size-lg);
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	pointer-events: none;
-	display: flex;
-	flex-direction: column-reverse;
-	overflow: visible;
-
-	&:popover-open {
-		display: flex;
-	}
-
-	@include mq-down(md) {
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-}
-
-// Base = final visible resting state, so SSR-authored <li> render with
-// zero JS. .ln-enter (below) is a transient pre-mount override applied
-// only to JS-created items — see ln-toast.js _buildItem/_append.
-@mixin toast-item {
-	list-style: none;
-	pointer-events: auto;
-	opacity: 1;
-	@include motion-safe {
-		transform: translateX(0);
-		transition: all var(--transition-base) var(--easing-standard);
-	}
-
-	& + & {
-		--margin-block: var(--size-md);
-		margin-bottom: var(--margin-block);
-	}
-}
-
-@mixin toast-item-enter {
-	opacity: 0;
-	@include motion-safe {
-		transform: translateX(30px);
-	}
-}
-
-@mixin toast-item-out {
-	opacity: 0 !important;
-	@include motion-safe {
-		transform: scale(0.95) !important;
-		transition: all var(--transition-fast) !important;
-	}
-}
-
-@mixin toast-card {
-	@include floating-panel;
-	@include flex;
-	min-width: 320px;
-	max-width: 450px;
-	@include overflow-hidden;
-
-	@include mq-down(md) {
-		min-width: 0;
-		max-width: none;
-		width: 100%;
-		border-radius: 0;
-		border-inline: 0;
-		border-block-end: 0;
-	}
-}
-
-@mixin toast-icon {
-	--color-accent:    hsl(var(--color-primary));
-	--color-accent-fg: hsl(var(--color-white));
-	flex: 0 0 44px;
-	@include flex;
-	align-items: flex-start;
-	@include justify-center;
-	--padding-y: var(--size-md);
-	padding-top: var(--padding-y);
-	background: var(--color-accent);
-	color: var(--color-accent-fg);
-
-	&::before {
-		width: 2rem;
-		height: 2rem;
-	}
-}
-
-// The icon variant list — 4 authored icons, CSS shows the one matching the
-// card's type class (see components/_toast.scss for the when-toggle).
-// display:contents dissolves the <ul> box so the visible <li> becomes a direct
-// flex child of .icon (parity with the SSR path's direct <svg> child).
-@mixin toast-icon-list {
-	display: contents;
-
-	> li { @include hidden; }
-}
-
-@mixin toast-content {
-	@include flex-1;
-	--padding-y: var(--size-md);
-	--padding-x: var(--size-md);
-	padding: var(--padding-y) var(--padding-x) var(--padding-y) var(--size-sm);  // 4th arm: icon-side gutter, component-design intrinsic.
-	@include relative;
-
-	button[data-ln-toast-close] {
-		--btn-padding-y: var(--size-2xs);
-		--btn-padding-x: var(--size-2xs);
-		@include absolute;
-		// Geometric — close button positioned inside content padding.
-		top: var(--size-sm);
-		right: var(--size-sm);
-	}
-}
-
-@mixin toast-title {
-	@include font-bold;
-	@include text-base;
-	color: var(--color-fg);
-	line-height: 1.25;
-}
-
-@mixin toast-body {
-	--color-fg: var(--fg-muted);
-	--margin-block: var(--size-sm);
-	margin-top: var(--margin-block);
-	font-size: var(--text-base);
-	color: var(--color-fg);
-	line-height: 1.5;
-
-	p { @include m(0); }
-
-	ul {
-		--margin-block: var(--size-sm);
-		margin: var(--margin-block) 0 0 0;
-		--padding-x: var(--size-md-up);
-		padding-left: var(--padding-x);
-		@include text-sm;
-	}
-
-	li + li {
-		--margin-block: var(--size-xs);
-		margin-top: var(--margin-block);
-	}
-}
+@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 'btn' as *;
+@use 'card' as *;
+@use 'breakpoints' as *;
+
+// Toast notification -- side-accent card with icon, title, body, close button.
+// The <li> IS the card; the type IS its class (.success/.error/.warn/.info).
+//
+// Usage:
+//   [data-ln-toast]      { @include toast-container; }
+//   [data-ln-toast] > li { @include toast-item; @include toast-card; }
+//
+// Tone: the type class on the <li> rebinds --color-primary/--color-accent via
+// semantic-color() — see components/_toast.scss. SSR authors the class; the
+// dynamic path fills it (data-ln-attr="class:type"). warn maps to the warning
+// family in that binding.
+
+@mixin toast-container {
+	@include fixed;
+	@include z-toast;
+	border: none;
+	background: transparent;
+	inset: auto;
+	right: var(--size-lg);
+	bottom: var(--size-lg);
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	pointer-events: none;
+	display: flex;
+	flex-direction: column-reverse;
+	overflow: visible;
+
+	&:popover-open {
+		display: flex;
+	}
+
+	@include mq-down(md) {
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+}
+
+// Base = final visible resting state, so SSR-authored <li> render with
+// zero JS. .ln-enter (below) is a transient pre-mount override applied
+// only to JS-created items — see ln-toast.js _buildItem/_append.
+@mixin toast-item {
+	list-style: none;
+	pointer-events: auto;
+	opacity: 1;
+	@include motion-safe {
+		transform: translateX(0);
+		transition: all var(--transition-base) var(--easing-standard);
+	}
+
+	& + & {
+		--margin-block: var(--size-md);
+		margin-bottom: var(--margin-block);
+	}
+}
+
+@mixin toast-item-enter {
+	opacity: 0;
+	@include motion-safe {
+		transform: translateX(30px);
+	}
+}
+
+@mixin toast-item-out {
+	opacity: 0;
+	@include motion-safe {
+		transform: scale(0.95);
+		transition: all var(--transition-fast);
+	}
+}
+
+@mixin toast-card {
+	@include floating-panel;
+	@include flex;
+	min-width: 320px;
+	max-width: 450px;
+	@include overflow-hidden;
+
+	@include mq-down(md) {
+		min-width: 0;
+		max-width: none;
+		width: 100%;
+		border-radius: 0;
+		border-inline: 0;
+		border-block-end: 0;
+	}
+}
+
+@mixin toast-icon {
+	--color-accent:    hsl(var(--color-primary));
+	--color-accent-fg: hsl(var(--color-white));
+	flex: 0 0 44px;
+	@include flex;
+	align-items: flex-start;
+	@include justify-center;
+	--padding-y: var(--size-md);
+	padding-top: var(--padding-y);
+	background: var(--color-accent);
+	color: var(--color-accent-fg);
+}
+
+// The icon variant list — 4 authored icons, CSS shows the one matching the
+// card's type class (see components/_toast.scss for the when-toggle).
+// display:contents dissolves the <ul> box so the visible <li> becomes a direct
+// flex child of .icon (parity with the SSR path's direct <svg> child).
+@mixin toast-icon-list {
+	display: contents;
+
+	> li { @include hidden; }
+}
+
+@mixin toast-content {
+	@include flex-1;
+	--padding-y: var(--size-md);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x) var(--padding-y) var(--size-sm);  // 4th arm: icon-side gutter, component-design intrinsic.
+	@include relative;
+
+	button[data-ln-toast-close] {
+		--btn-padding-y: var(--size-2xs);
+		--btn-padding-x: var(--size-2xs);
+		@include absolute;
+		// Geometric — close button positioned inside content padding.
+		top: var(--size-sm);
+		right: var(--size-sm);
+	}
+}
+
+@mixin toast-title {
+	@include font-bold;
+	@include text-base;
+	color: var(--color-fg);
+	line-height: 1.25;
+}
+
+@mixin toast-body {
+	--color-fg: var(--fg-muted);
+	--margin-block: var(--size-sm);
+	margin-top: var(--margin-block);
+	font-size: var(--text-base);
+	color: var(--color-fg);
+	line-height: 1.5;
+
+	p { @include m(0); }
+
+	ul {
+		--margin-block: var(--size-sm);
+		margin: var(--margin-block) 0 0 0;
+		--padding-x: var(--size-md-up);
+		padding-left: var(--padding-x);
+		@include text-sm;
+	}
+
+	li + li {
+		--margin-block: var(--size-xs);
+		margin-top: var(--margin-block);
+	}
+}

package/{scss → theme}/config/mixins/_tooltip.scss

@@ -5,8 +5,8 @@
 @use 'spacing' as *;
 @use 'motion' as *;
 
-// Shared dark-bubble chrome for ::after pseudo-tooltips (tooltip, confirm)
-// and JS-portal tooltip-element. Reads the theme-root token pair
+// Shared dark-bubble chrome for the ::after pseudo-tooltip and the
+// JS-portal tooltip-element. Reads the theme-root token pair
 // (--fg-default / --bg-base) NOT the rebindable --color-fg / --color-bg:
 // the ::after inherits custom properties from its trigger, and many
 // components locally rebind --color-fg/--color-bg (btn, accordion,

package/{scss → theme}/config/mixins/_typography.scss

@@ -23,8 +23,16 @@
 @mixin capitalize { text-transform: capitalize; }
 @mixin normal-case { text-transform: none; }
 
-@mixin tracking-wide   { letter-spacing: var(--tracking-wide); }
-@mixin tracking-wider  { letter-spacing: 0.05em; }
+@mixin tracking-tighter { letter-spacing: var(--tracking-tighter); }
+@mixin tracking-tight   { letter-spacing: var(--tracking-tight); }
+@mixin tracking-normal  { letter-spacing: var(--tracking-normal); }
+@mixin tracking-wide    { letter-spacing: var(--tracking-wide); }
+@mixin tracking-wider   { letter-spacing: var(--tracking-wider); }
+
+@mixin font-tabular {
+	font-variant-numeric: tabular-nums;
+	font-feature-settings: 'tnum';
+}
 
 @mixin truncate {
 	overflow: hidden;
@@ -53,7 +61,10 @@
 	font-size:     var(--font-size);
 	--line-height: var(--lh-#{$role});
 	line-height:   var(--line-height);
-}
 
-@mixin tracking-tight  { letter-spacing: var(--tracking-tight); }
-@mixin tracking-normal { letter-spacing: var(--tracking-normal); }
+	@if $role == display-lg or $role == display-md or $role == display-sm {
+		letter-spacing: var(--tracking-tighter);
+	} @else if $role == heading-lg or $role == heading-md {
+		letter-spacing: var(--tracking-tight);
+	}
+}

package/{scss → theme}/config/mixins/_upload.scss

@@ -11,10 +11,6 @@
 @use 'btn' as *;
 
 // Upload component -- drag-and-drop zone, file list, progress bar.
-//
-// Usage:
-//   .ln-upload { @include upload; }
-//   .ln-upload__zone { @include upload-zone; }
 
 @mixin upload {
 	width: 100%;
@@ -99,7 +95,7 @@
 		flex-shrink: 0;
 	}
 
-	> .ln-upload__remove {
+	> [data-ln-upload-action="remove"] {
 		--btn-padding-y: var(--size-2xs);
 		--btn-padding-x: var(--size-2xs);
 		--margin-inline: var(--size-sm);
@@ -144,7 +140,7 @@
 	border-color: hsl(var(--color-error));
 	background-color: hsl(var(--color-error) / 0.1);
 
-	.ln-upload__progress-bar {
+	[data-ln-progress] {
 		background-color: hsl(var(--color-error));
 	}
 }
@@ -166,3 +162,9 @@
 	}
 	flex-shrink: 0;
 }
+
+@keyframes ln-upload-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}

package/theme/ln-ashlar-core.scss

@@ -0,0 +1,24 @@
+// ==========================================================================
+// ln-ashlar Core Functional Stylesheet
+// ==========================================================================
+// Master aggregator for all component-specific behavioral/state SCSS modules.
+// ZERO design tokens, ZERO theme colors, ZERO typography, ZERO decorative borders.
+// ==========================================================================
+
+@use '../components/ln-accordion/ln-accordion';
+@use '../components/ln-chart/ln-chart';
+@use '../components/ln-confirm/ln-confirm';
+@use '../components/ln-dropdown/ln-dropdown';
+@use '../components/ln-editor/ln-editor';
+@use '../components/ln-filter/ln-filter';
+@use '../components/ln-list/ln-list';
+@use '../components/ln-modal/ln-modal';
+@use '../components/ln-popover/ln-popover';
+@use '../components/ln-search/ln-search';
+@use '../components/ln-table/ln-table';
+@use '../components/ln-tabs/ln-tabs';
+@use '../components/ln-toast/ln-toast';
+@use '../components/ln-toggle/ln-toggle';
+@use '../components/ln-tooltip/ln-tooltip';
+@use '../components/ln-upload/ln-upload';
+@use '../components/ln-validate/ln-validate';

package/theme/ln-ashlar-dev.scss

@@ -0,0 +1,66 @@
+// ==========================================================================
+// Dev & Validation Diagnostics — ln-ashlar
+// ==========================================================================
+// This stylesheet contains diagnostic CSS tools to validate correct HTML 
+// structure, missing integration attributes, and accessibility warnings during 
+// development. Do not compile or deploy this file to production.
+// ==========================================================================
+
+@use 'config/mixins' as *;
+
+// --- Modular Component Diagnostics ---
+@use '../components/ln-accordion/ln-accordion-dev';
+@use '../components/ln-ajax/ln-ajax-dev';
+@use '../components/ln-autoresize/ln-autoresize-dev';
+@use '../components/ln-autosave/ln-autosave-dev';
+@use '../components/ln-chart/ln-chart-dev';
+@use '../components/ln-circular-progress/ln-circular-progress-dev';
+@use '../components/ln-confirm/ln-confirm-dev';
+@use '../components/ln-data-coordinator/ln-data-coordinator-dev';
+@use '../components/ln-data-store/ln-data-store-dev';
+@use '../components/ln-date/ln-date-dev';
+@use '../components/ln-dropdown/ln-dropdown-dev';
+@use '../components/ln-editor/ln-editor-dev';
+@use '../components/ln-filter/ln-filter-dev';
+@use '../components/ln-form/ln-form-dev';
+@use '../components/ln-include/ln-include-dev';
+@use '../components/ln-key/ln-key-dev';
+@use '../components/ln-link/ln-link-dev';
+@use '../components/ln-list/ln-list-dev';
+@use '../components/ln-modal/ln-modal-dev';
+@use '../components/ln-number/ln-number-dev';
+@use '../components/ln-options/ln-options-dev';
+@use '../components/ln-picklist/ln-picklist-dev';
+@use '../components/ln-popover/ln-popover-dev';
+@use '../components/ln-progress/ln-progress-dev';
+@use '../components/ln-router/ln-router-dev';
+@use '../components/ln-search/ln-search-dev';
+@use '../components/ln-slug/ln-slug-dev';
+@use '../components/ln-sort/ln-sort-dev';
+@use '../components/ln-sortable/ln-sortable-dev';
+@use '../components/ln-stat/ln-stat-dev';
+@use '../components/ln-table/ln-table-dev';
+@use '../components/ln-tabs/ln-tabs-dev';
+@use '../components/ln-time/ln-time-dev';
+@use '../components/ln-toast/ln-toast-dev';
+@use '../components/ln-toggle/ln-toggle-dev';
+@use '../components/ln-tooltip/ln-tooltip-dev';
+@use '../components/ln-translations/ln-translations-dev';
+@use '../components/ln-ui-coordinator/ln-ui-coordinator-dev';
+@use '../components/ln-upload/ln-upload-dev';
+@use '../components/ln-validate/ln-validate-dev';
+
+// --- General HTML/Accessibility Diagnostics ---
+[data-ln-debug] {
+	// 1. Image Missing Alt: accessibility warning
+	// Flags an <img> with NO alt attribute (empty alt="" is the valid decorative pattern and is intentionally NOT flagged)
+	img:not([alt]) {
+		@include dev-replaced-error;
+	}
+
+	// 2. Abbr Missing Title: accessibility warning
+	// Flags an <abbr> with no title — the abbreviation has no expansion and is meaningless to readers
+	abbr:not([title]) {
+		@include dev-inline-error("abbr is missing a title attribute");
+	}
+}