@livenetworks/ashlar 1.6.1 → 2.0.1

package/theme/config/mixins/_dropdown.scss

@@ -0,0 +1,169 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'typography' as *;
+@use 'position' as *;
+@use 'interaction' as *;
+@use 'motion' as *;
+@use 'card' as *;
+
+// Dropdown menu — floating panel with menu items.
+//
+// Usage:
+//   [data-ln-dropdown] { @include dropdown; }
+//   [data-ln-dropdown-menu] { @include dropdown-menu; }
+//
+// Open/close state (display:none ↔ display:block + .open) is JS-driven
+// and lives in the co-located JS SCSS, not here.
+
+@mixin dropdown {
+	@include relative;
+}
+
+// ─── Menu items — shared recipe ────────────────────────
+// Compact interactive list recipe for floating overlays (dropdown, popover, pickers).
+
+@mixin menu-items {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	:is(ul, ol) {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	li {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	li + li {
+		margin-top: var(--size-2xs);
+	}
+
+	form {
+		margin: 0;
+		padding: 0;
+		display: contents;
+	}
+
+	:is(li, form) > :is(a, button, input[type="submit"], input[type="reset"], input[type="button"]) {
+		width: 100%;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: var(--gap);
+		padding: var(--padding-y) var(--padding-x);
+		border-radius: var(--radius);
+		background: transparent;
+		border: none;
+		outline: none;
+		box-shadow: none;
+		text-align: left;
+		text-decoration: none;
+		cursor: pointer;
+		font-family: inherit;
+		@include typography(body-sm);
+		color: var(--color-fg);
+		transition: background-color 120ms ease, color 120ms ease;
+
+		&:hover:not(:disabled) {
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
+			color: var(--color-fg);
+		}
+
+		&:active:not(:disabled) {
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-active), transparent);
+			color: var(--color-fg);
+		}
+
+		// Single-select active state (theme/language pickers)
+		&[aria-current="true"],
+		&.active {
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-selected), transparent);
+			color: var(--color-accent);
+			font-weight: var(--font-medium);
+		}
+	}
+
+	hr {
+		border: none;
+		border-top: var(--border-width) solid var(--color-border);
+		margin: var(--size-xs) 0;
+	}
+}
+
+// ─── Panel search — search field inside a floating panel ───────
+// Shared by @mixin dropdown-menu and @mixin popover (which already @use's
+// this file for menu-items). The <search> icon-group base makes the widget
+// inline-flex and shrink-to-fit; in a block panel that leaves a baseline
+// descender gap under the field and lets it under-fill the panel.
+//
+// :has(> input[type="search"]) is structural, not decorative — <search> is
+// a REGION per spec, so a <search> wrapping a whole form must not match. It
+// also carries the weight this rule needs: under a [data-*] panel the
+// selector is (0,2,2) and outranks `search:has(> input[type="search"])`
+// (0,1,2), whose `width: min(100%, 20rem)` would otherwise cap the field.
+//
+// box-sizing is not restated — base/_reset.scss sets border-box on *.
+
+@mixin panel-search {
+	> search:has(> input[type="search"]) {
+		@include flex;      // block-level — kills the inline-flex baseline gap
+		@include w-full;
+		margin-bottom: var(--size-xs);
+	}
+
+	// Bare input shape (no <search> wrapper) — form-input already gives w-full.
+	> input[type="search"] {
+		margin-bottom: var(--size-xs);
+	}
+
+	// Divider when the search precedes the option list. The margin-top here
+	// collapses with the margin-bottom above (both block-level, same BFC),
+	// so the border sits in a symmetric size-xs gap — not a doubled one.
+	> :is(search:has(> input[type="search"]), input[type="search"]) + :is(ul, nav) {
+		border-top: var(--border-width) solid var(--color-border);
+		padding-top: var(--size-xs);
+		margin-top: var(--size-xs);
+	}
+}
+
+// ─── Dropdown menu — floating panel + menu items ───────
+@mixin dropdown-menu {
+	@include floating-panel;
+	@include fixed;
+	inset: auto;
+	margin: 0;
+	padding: var(--padding-y);
+	min-width: var(--dropdown-min-width, 14rem);
+	@include enter-scale-fade;
+
+	@include panel-search;
+
+	ul[data-ln-search] {
+		max-height: 15rem;
+		overflow-y: auto;
+		scrollbar-width: thin;
+		scrollbar-color: var(--border-subtle) transparent;
+
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+		&::-webkit-scrollbar-thumb {
+			background-color: var(--border-subtle);
+			border-radius: var(--radius-sm);
+		}
+	}
+
+	@include menu-items;
+}

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

@@ -96,13 +96,6 @@
 		outline: none;
 		cursor: text;
 
-		// Counter the global reset (`ul li, ol li { list-style: none }`).
-		// The reset kills markers on <li> directly; prose only sets
-		// list-style on the <ul>/<ol> container. Restore inheritance
-		// so the container's disc/decimal flows through to each item.
-		ul li { list-style: disc; }
-		ol li { list-style: decimal; }
-
 		// Empty placeholder via CSS
 		&:empty::before {
 			content: attr(data-placeholder);

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

@@ -1,47 +1,47 @@
-@use 'spacing' as *;
-@use 'display' as *;
-@use 'interaction' as *;
-@use 'transitions' as *;
-@use 'form' as *;
-
-// ─── Filter dropdown — content chrome only ─────────────────────────
-// The floating shell (chrome, fixed positioning, min-width, show/hide)
-// comes from `@mixin popover` on the popover-driven path, OR from
-// `@mixin floating-panel` + scroll box on the ln-data-table dynamic
-// path (see components/_filter.scss). This mixin styles ONLY the inner
-// content: scrollable options box, search input, and the options list
-// (pills via check-list).
-//
-// NOTE: there is intentionally NO clear-button block. The redundant
-// "Clear Filter" button was removed library-wide — the `data-ln-filter-reset`
-// "All" sentinel checkbox already performs the reset. Do not re-introduce a
-// `[data-ln-filter-clear]` selector here.
-//
-// Tunables (consumer-overridable via --var with sane defaults):
-//   --filter-dropdown-max-height  (default 20rem)
-//   --filter-dropdown-overflow-y  (default auto)
-//   --filter-dropdown-item-pad-y  (default var(--size-3xs))
-//
-// Usage:
-//   .column-filter-dropdown { @include filter-dropdown; }
-
-@mixin filter-dropdown {
-	max-height: var(--filter-dropdown-max-height, 20rem);
-	overflow-y: var(--filter-dropdown-overflow-y, auto);
-	text-transform: none; // reset inherited header uppercase
-
-	[data-ln-filter-search] {
-		@include form-input;
-		font-size: var(--filter-dropdown-text, var(--text-xs));
-		--padding-y: var(--size-2xs);
-		--padding-x: var(--size-sm);
-		width: 100%;
-		margin-bottom: var(--size-xs);
-	}
-
-	[data-ln-filter-options] {
-		@include check-list-nav;
-
-		li { padding: var(--filter-dropdown-item-pad-y, var(--size-3xs)) 0; }
-	}
-}
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'interaction' as *;
+@use 'transitions' as *;
+@use 'form' as *;
+
+// ─── Filter dropdown — content chrome only ─────────────────────────
+// The floating shell (chrome, fixed positioning, min-width, show/hide)
+// comes from `@mixin popover` on the popover-driven path, OR from
+// `@mixin floating-panel` + scroll box on the ln-data-table dynamic
+// path (see components/_filter.scss). This mixin styles ONLY the inner
+// content: scrollable options box, search input, and the options list
+// (pills via check-list).
+//
+// NOTE: there is intentionally NO clear-button block. The redundant
+// "Clear Filter" button was removed library-wide — the `data-ln-filter-reset`
+// "All" sentinel checkbox already performs the reset. Do not re-introduce a
+// `[data-ln-filter-clear]` selector here.
+//
+// Tunables (consumer-overridable via --var with sane defaults):
+//   --filter-dropdown-max-height  (default 20rem)
+//   --filter-dropdown-overflow-y  (default auto)
+//   --filter-dropdown-item-pad-y  (default var(--size-3xs))
+//
+// Usage:
+//   .column-filter-dropdown { @include filter-dropdown; }
+
+@mixin filter-dropdown {
+	max-height: var(--filter-dropdown-max-height, 20rem);
+	overflow-y: var(--filter-dropdown-overflow-y, auto);
+	text-transform: none; // reset inherited header uppercase
+
+	[data-ln-filter-search] {
+		@include form-input;
+		font-size: var(--filter-dropdown-text, var(--text-xs));
+		--padding-y: var(--size-2xs);
+		--padding-x: var(--size-sm);
+		width: 100%;
+		margin-bottom: var(--size-xs);
+	}
+
+	[data-ln-filter-options] {
+		@include check-list-nav;
+
+		li { padding: var(--filter-dropdown-item-pad-y, var(--size-3xs)) 0; }
+	}
+}

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

@@ -34,7 +34,7 @@
 
 	> small,
 	> span:last-child {
-		--color-fg: var(--fg-subtle);
+		--color-fg: var(--fg-muted);
 		color: var(--color-fg);
 		font-size: inherit;
 	}

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

@@ -18,10 +18,10 @@
 @mixin form-label {
 	@include block;
 	@include typography(label-sm);
-	@include font-semibold;
+	@include font-medium;
 	color: var(--color-fg);
 	// Structural label-to-input gap (not shell rhythm).
-	--margin-block: var(--size-xs);
+	--margin-block: 0.375rem;
 	margin-bottom: var(--margin-block);
 
 	// Required indicator — red * after label text.
@@ -96,8 +96,10 @@
 	font-size: var(--font-size);
 	line-height: var(--line-height);
 	color: var(--color-fg);
-	--color-bg: var(--input-bg, var(--bg-recessed));
+	--color-bg: var(--bg-sunken);
 	background: var(--color-bg);
+	// Control boundary, not a divider — 1.4.11 wants 3:1 here.
+	--color-border: var(--border-ui);
 	@include border;
 	border-radius: var(--radius);
 	@include transition;
@@ -162,10 +164,12 @@
 // shell via :focus-within; children suppress their own focus ring.
 //
 // Applied via semantic selectors (no class on the wrapper):
-//   - components/_form.scss → label:has(.ln-icon):has(text input)
+//   - components/_form.scss → :is(label, div, span, search):has(.ln-icon):has(text input)
 //   - components/_date.scss → [data-ln-date-field]
 
-@mixin form-field-group {
+// Split shell/parts so the binding can emit the wrapper's own chrome at base
+// weight while the child resets and state chrome keep full weight.
+@mixin form-field-group-shell {
 	@include form-input;       // visual shell: border, bg, radius, transition, outline
 	@include inline-flex;      // override form-input's block display
 	@include items-center;
@@ -174,7 +178,9 @@
 	width: auto;               // cancel form-input's w-full
 	padding: 0;                // shell owns NO padding; children manage their own
 	margin-bottom: 0;          // defensive: wrapping <label> carries form-label margin
+}
 
+@mixin form-field-group-parts {
 	&:focus-within {
 		@include _form-focus-style;
 
@@ -255,13 +261,18 @@
 	}
 }
 
+@mixin form-field-group {
+	@include form-field-group-shell;
+	@include form-field-group-parts;
+}
+
 // ─── Icon input group — search/icon field (thin wrapper) ──────────
 //
 // form-field-group + the search-clear control, which is the only piece
 // unique to this binding.
 
-@mixin form-input-icon-group {
-	@include form-field-group;
+@mixin form-input-icon-group-parts {
+	@include form-field-group-parts;
 
 	// Visually hide the clear button while the field is empty (visibility:hidden
 	// preserves layout space so the input width stays stable).
@@ -320,16 +331,22 @@
 	}
 }
 
+@mixin form-input-icon-group {
+	@include form-field-group-shell;
+	@include form-input-icon-group-parts;
+}
+
 // ─── Search field — compact icon-group variant (delta-only) ───────
 //
 // Opt-in refinements layered on top of the icon-group chrome that the
-// global auto-bind (components/_form.scss: label:has(> .ln-icon):has(>
-// search/text input)) already supplies. PREREQUISITE: the consumer is an
-// icon + search-input <label> so the auto-bind provides the base shell;
-// on a plain label this emits only the tweaks below, no chrome.
+// global auto-bind (components/_form.scss: :is(label, div, span, search):has(>
+// .ln-icon):has(> search/text input)) already supplies. PREREQUISITE: the
+// consumer is an icon + search-input <search> (or <label>) so the auto-bind
+// provides the base shell; on a plain wrapper this emits only the tweaks
+// below, no chrome.
 //
 // Usage (project/demo SCSS):
-//   label.search { @include search; }
+//   search:has(> input[type="search"]) { @include search; }
 
 @mixin search {
 	width: min(100%, 20rem);          // intrinsic capped field width
@@ -360,7 +377,7 @@
 	padding: 0;
 	@include flex-shrink-0;
 	// Non-standard 1.5px stroke — optical weight at small checkbox size.
-	border: 1.5px solid var(--color-border);
+	border: 1.5px solid var(--border-ui);
 	background: var(--color-bg);
 	@include cursor-pointer;
 	@include transition;
@@ -370,8 +387,11 @@
 		background-color: var(--color-accent);
 		border-color: var(--color-accent);
 		// Inline SVG: native <input type="checkbox"> cannot contain child elements,
-		// so a data URI is the only way to embed a checkmark here.
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
+		// so a data URI is the only way to embed a checkmark here. The stroke is
+		// baked in — data URIs can't read custom properties — so the mark ships as
+		// two variants and themes point --check-mark at the one matching their
+		// --color-accent-fg pole. Same pattern as --select-arrow above.
+		background-image: var(--check-mark);
 		background-size: 0.75rem;
 		background-position: center;
 		background-repeat: no-repeat;
@@ -775,7 +795,7 @@
 
 		// Hover (unchecked) — subtle accent wash (nav hover).
 		&:hover:not(:has(> input:checked)) {
-			background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 		}
 
 		// Selected — nav active vocabulary (replaces solid-accent + white).
@@ -814,16 +834,27 @@
 	}
 }
 
+// ─── Field feedback slot (Reserved space for errors, output & hints) ──
+
+@mixin form-slot {
+	@include block;
+	min-height: 1.25rem; // Reserves space to prevent form layout shifts
+	font-size: var(--text-xs);
+	line-height: 1.25rem;
+	--margin-block: var(--size-2xs);
+	margin-top: var(--margin-block);
+	margin-bottom: 0;
+}
+
 @mixin form-validate-errors {
+	@include form-slot;
 	// Structural error-list margin (not shell rhythm).
 	--margin-block: var(--size-xs);
 	margin-top: var(--margin-block);
 	@include typography(caption);
 	color: hsl(var(--color-error));
-	min-height: 1.25rem; // Reserves space to prevent form layout shifts when errors appear
 	list-style: none;
 	padding: 0;
-	margin-bottom: 0;
 
 	li {
 		margin: 0;

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

@@ -1,61 +1,62 @@
-// Mixins index — @forward all in correct order
-// Primitives first, composites after (they depend on primitives)
-
-// Primitives
-@forward 'spacing';
-@forward 'breakpoints';
-@forward 'display';
-@forward 'sizing';
-@forward 'typography';
-@forward 'colors';
-@forward 'borders';
-@forward 'shadows';
-@forward 'transitions';
-@forward 'motion';
-@forward 'position';
-@forward 'interaction';
-@forward 'focus';
-
-// Composites (depend on primitives)
-@forward 'layout';
-@forward 'collapsible';
-@forward 'accordion';
-@forward 'card';
-@forward 'chip';
-@forward 'nav';
-@forward 'btn';
-@forward 'form';
-@forward 'filter';
-@forward 'modal';
-@forward 'breadcrumbs';
-@forward 'loader';
-@forward 'tabs';
-@forward 'table';
-@forward 'sort';
-@forward 'avatar';
-@forward 'footer';
-@forward 'sidebar';
-@forward 'app-shell';
-@forward 'status-badge';
-@forward 'alert';
-@forward 'empty-state';
-@forward 'page-header';
-@forward 'stepper';
-@forward 'timeline';
-@forward 'stat-card';
-@forward 'prose';
-@forward 'editor';
-@forward 'kbd';
-@forward 'tooltip';
-@forward 'popover';
-@forward 'progress';
-@forward 'link';
-@forward 'confirm';
-@forward 'circular-progress';
-@forward 'dropdown';
-@forward 'toast';
-@forward 'upload';
-@forward 'translations';
-@forward 'ln-table';
-@forward 'ajax';
-@forward 'diagnostics';
+// Mixins index — @forward all in correct order
+// Primitives first, composites after (they depend on primitives)
+
+// Primitives
+@forward 'spacing';
+@forward 'breakpoints';
+@forward 'display';
+@forward 'sizing';
+@forward 'typography';
+@forward 'colors';
+@forward 'borders';
+@forward 'shadows';
+@forward 'transitions';
+@forward 'motion';
+@forward 'position';
+@forward 'interaction';
+@forward 'focus';
+
+// Composites (depend on primitives)
+@forward 'layout';
+@forward 'collapsible';
+@forward 'accordion';
+@forward 'card';
+@forward 'chip';
+@forward 'nav';
+@forward 'btn';
+@forward 'form';
+@forward 'filter';
+@forward 'modal';
+@forward 'breadcrumbs';
+@forward 'loader';
+@forward 'tabs';
+@forward 'table';
+@forward 'sort';
+@forward 'avatar';
+@forward 'footer';
+@forward 'sidebar';
+@forward 'app-shell';
+@forward 'status-badge';
+@forward 'alert';
+@forward 'empty-state';
+@forward 'page-header';
+@forward 'stepper';
+@forward 'timeline';
+@forward 'stat-card';
+@forward 'prose';
+@forward 'editor';
+@forward 'kbd';
+@forward 'tooltip';
+@forward 'popover';
+@forward 'progress';
+@forward 'link';
+@forward 'circular-progress';
+@forward 'dropdown';
+@forward 'toast';
+@forward 'upload';
+@forward 'picklist';
+@forward 'translations';
+@forward 'ln-table';
+@forward 'chart';
+@forward 'ajax';
+@forward 'diagnostics';

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

@@ -73,7 +73,7 @@
 // Breakpoints: 480px, 580px, 880px, 1120px
 @mixin container($name: null) {
 	// Nameless form is intentional — models native anonymous @container queries.
-	// See docs/css/layout.md ("Anonymous container") and demo/admin/mixins.html.
+	// See docs-mcp/css/layout.md ("Anonymous container") and demo/admin/mixins.html.
 	container-type: inline-size;
 	@if $name { container-name: $name; }
 }
@@ -92,7 +92,11 @@
 //
 // Cascade note: the --radius / --shadow re-binds cascade
 // into grandchildren. If a consumer nests a rounded card inside a
-// flat-stack panel, re-bind --radius on that nested element.
+// flat-stack panel, re-bind --radius on that nested element. Exception: a
+// grandchild carrying [data-mode] / [data-theme] / [data-skin] matches the
+// four-axis base-defaults block in _palette.scss, which re-derives --radius
+// and --shadow on it directly — no flat-stack rule reaches a grandchild to
+// contest that, so it silently gets root radius/shadow back.
 //
 // Block-axis only. For horizontal joined controls use btn-group or
 // pill-group — they use border-radius tricks on first/last children

package/{scss → theme}/config/mixins/_ln-table.scss

@@ -85,7 +85,16 @@
 	position: sticky;
 	top: 0;
 	z-index: var(--z-sticky);
-	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+	border-radius: 0;
+	background: var(--color-bg);
+	border-bottom: var(--border-width) solid var(--border-subtle);
+
+	h3 {
+		margin: 0;
+		font-size: 1rem;
+		font-weight: 600;
+		color: var(--color-fg);
+	}
 }
 
 // ─── In-thead toolbar (first thead row, single colspan th) ───────
@@ -117,12 +126,22 @@
 		@include panel-header;
 		justify-content: flex-start;
 		gap: var(--size-md);
+		border-radius: 0;
+		background: var(--color-bg);
+		border-bottom: var(--border-width) solid var(--border-subtle);
+
+		h3 {
+			margin: 0;
+			font-size: 1rem;
+			font-weight: 600;
+			color: var(--color-fg);
+		}
 	}
 }
 
 @mixin ln-table-toolbar-search {
-	--padding-y: var(--size-2xs);   // lowers panel-header min-height floor for this label
-	width: auto;                    // hug the 10rem input; cancel .search's 20rem label cap inside toolbars
+	--padding-y: var(--size-2xs);   // lowers panel-header min-height floor for this wrapper
+	width: auto;                    // hug the 10rem input
 
 	> .ln-icon {
 		padding-top: var(--size-2xs);     // tighten leading icon vertical padding (was var(--size-xs))
@@ -138,7 +157,8 @@
 // ─── Count badge ──────────────────────────────────────────
 
 @mixin ln-table-count {
-	@include text-sm;
+	font-size: var(--text-xs);
+	font-weight: 500;
 	--color-fg: var(--fg-muted);
 	color: var(--color-fg);
 
@@ -164,14 +184,15 @@
 	@include flex;
 	@include items-center;
 	@include justify-between;
-	--padding-y: var(--size-sm);
+	--padding-y: var(--size-xs-up);
 	--padding-x: var(--size-md);
 	padding: var(--padding-y) var(--padding-x);
-	@include border-t;
+	border-top: var(--border-width) solid var(--border-subtle);
 	--color-bg: var(--bg-sunken);
 	background: var(--color-bg);
-	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-	@include text-sm;
+	border-radius: 0;
+	font-size: var(--text-xs);
+	font-weight: 500;
 	--color-fg: var(--fg-muted);
 	color: var(--color-fg);
 	position: sticky;
@@ -243,13 +264,13 @@
 			border: none;
 
 			&:hover {
-				--color-bg: var(--bg-sunken);
+				--color-bg: var(--bg-hover);
 				background-color: var(--color-bg);
 				color: var(--color-fg);
 			}
 
 			&[data-active] {
-				background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
+				background-color: color-mix(in srgb, var(--color-accent) var(--tint-selected), transparent);
 				color: var(--color-accent);
 			}
 		}