@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_breakpoints.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@use '../breakpoints' as bp;
+
+// ==========================================================================
+// Breakpoint mixins — resolve against $breakpoints map in
+// scss/config/_breakpoints.scss. Never hardcode px inside @media or
+// @container; always use these.
+//
+// Usage:
+//   @include mq-up(md)                     → @media (min-width: 768px)
+//   @include mq-down(lg)                   → @media (max-width: 1023px)
+//   @include cq-up(medium, page-header)    → @container page-header (min-width: 880px)
+//   @include cq-down(compact)              → anonymous @container, max-width: 579px
+//
+// Unknown $name raises @error.
+// ==========================================================================
+
+@function _resolve($name) {
+	$value: map.get(bp.$breakpoints, $name);
+	@if $value == null {
+		@error "Unknown breakpoint name: #{$name}. Valid keys: #{map.keys(bp.$breakpoints)}";
+	}
+	@return $value;
+}
+
+@mixin mq-up($name) {
+	@media (min-width: _resolve($name)) {
+		@content;
+	}
+}
+
+@mixin mq-down($name) {
+	@media (max-width: _resolve($name) - 1px) {
+		@content;
+	}
+}
+
+@mixin cq-up($name, $container: null) {
+	$min: _resolve($name);
+	@if $container {
+		@container #{$container} (min-width: #{$min}) {
+			@content;
+		}
+	} @else {
+		@container (min-width: #{$min}) {
+			@content;
+		}
+	}
+}
+
+@mixin cq-down($name, $container: null) {
+	$max: _resolve($name);
+	@if $container {
+		@container #{$container} (max-width: #{$max - 1px}) {
+			@content;
+		}
+	} @else {
+		@container (max-width: #{$max - 1px}) {
+			@content;
+		}
+	}
+}

package/scss/config/mixins/_btn.scss

@@ -0,0 +1,179 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'focus' as *;
+
+// Buttons
+// button-base  — shared neutral chrome (global button + anchor-as-button)
+// btn          — accent variant of button-base; rebinds --btn-* to accent colors
+// btn-sm       — smaller size modifier
+// btn-lg       — larger size modifier
+// btn-group    — inline list of peer action buttons (ghost rebind)
+
+// ─── button-base ──────────────────────────────────────
+// Neutral chrome shared by <button>, <input type="submit|reset|button">,
+// and anchors used as buttons (e.g. inside form-actions). Reads the
+// six-token --btn-* surface: --btn-bg/fg/border (idle) and
+// --btn-bg-hover/fg-hover/border-hover (hover + active). Both the
+// neutral default and the accent variant are fully token-driven —
+// the difference is which values --btn-* resolves to.
+//
+// Neutral default: --btn-* read from :root, where they wire to
+// --color-bg / --color-fg / --border-strong (and --border-strong-hover
+// companions for the hover state). Theme overrides rebind --btn-*
+// (e.g. Glass rebinds --btn-bg to --bg-elevated, --btn-border
+// to --color-accent for an outlined neutral chrome).
+//
+// Accent variant (submit + @mixin btn): rebinds --btn-* on the
+// consumer element to accent values. Because the rebind happens on
+// the button itself (not at :root), and because @mixin btn first
+// re-declares --color-accent: hsl(var(--color-primary)) at the same
+// scope, .success/.error/.warning/.info classes that override
+// --color-primary cascade through --color-accent → --btn-* →
+// background/color/border-color cleanly. var() always resolves at
+// the declaration site, and the declaration site for both the
+// rebind and button-base's reads is the button element.
+//
+// Why cross-cutting --color-accent-bg-* companions, not per-component
+// --btn-accent-* tokens at :root: a per-component surface declared at
+// :root (--btn-accent-bg: var(--color-accent)) would freeze
+// --color-accent at :root scope and break the
+// .success/.error/.warning/.info cascade for descendant overrides.
+// Cross-cutting --color-accent-bg-* companions (read via fallback to
+// --color-accent / --color-accent-fg) sidestep that: the default
+// theme leaves them unset (mixin falls back to solid + white), Glass
+// rebinds them at theme :root to flip the accent button to
+// translucent. Solid-accent consumers (toast-side, pill-checked,
+// stepper active/complete) read --color-accent / --color-accent-fg
+// directly and are unaffected by Glass's rebind because Glass leaves
+// --color-accent-fg alone. See CLAUDE.md ## Theme Architecture for
+// the full contract.
+
+@mixin button-base {
+	@include inline-flex;
+	@include items-center;
+	@include justify-center;
+	gap: var(--gap);
+	padding: var(--padding-y) var(--padding-x);
+	@include text-sm;
+	@include font-medium;
+	border-radius: var(--radius);
+	white-space: nowrap;
+	border: var(--border-width) solid var(--btn-border);
+	outline: none;
+	background: var(--btn-bg);
+	color: var(--btn-fg);
+	@include transition-colors;
+
+	&:hover:not(:disabled) {
+		background: var(--btn-bg-hover);
+		color: var(--btn-fg-hover);
+		border-color: var(--btn-border-hover);
+	}
+
+	&:active:not(:disabled) {
+		background: var(--btn-bg-hover);
+		border-color: var(--btn-border-hover);
+	}
+
+	&:focus-visible {
+		@include focus-ring;
+	}
+
+	&:disabled {
+		@include opacity-50;
+		@include cursor-not-allowed;
+	}
+}
+
+@mixin btn {
+	// Accent variant — rebinds the --btn-* token surface to accent
+	// values. button-base reads --btn-bg/fg/border (idle) and
+	// --btn-bg-hover/fg-hover/border-hover (hover + active), so this
+	// mixin only needs to set tokens. No direct background/color/
+	// border-color, no &:hover/&:active blocks.
+	//
+	// Re-declares --color-accent on the consumer element so
+	// var(--color-primary) re-resolves at this scope.
+	// .success/.error/.warning/.info classes override --color-primary;
+	// without these re-declarations, --color-accent stays frozen at
+	// :root and semantic colors don't cascade.
+	//
+	// --color-accent-fg is NOT re-declared — the :root default
+	// (hsl(var(--color-white))) already cascades, and re-declaring
+	// here would shadow theme companion overrides on solid-only
+	// surfaces (which there are none here, but the redundancy is
+	// noise either way).
+	--color-accent:       hsl(var(--color-primary));
+
+	// Hover state derived from --color-accent at THIS scope via CSS
+	// relative color syntax — same hue + saturation, lightness reduced
+	// by 8. Computing here (consumer scope) instead of reading a
+	// separate :root token means a consumer override (e.g.
+	// `style="--color-primary: var(--color-error)"` or a .error
+	// ancestor via @mixin semantic-color) cascades to BOTH the idle
+	// and hover surfaces — the whole state machine follows from a
+	// single token change.
+	//
+	// IMPORTANT — `calc(l - 8)` not `calc(l - 8%)`. Inside
+	// relative color syntax, channel keywords (h/s/l) evaluate to
+	// <number> tokens, not <percentage>. `l - 8%` mixes types →
+	// invalid color → browser falls back to `transparent` and the
+	// hover bg vanishes. The number form is what the spec mandates;
+	// hsl(216 95 34) without `%` is valid CSS Color 4 and reads as
+	// "lightness 34%" exactly like the legacy hsl(216 95% 34%) form.
+	//
+	// Pattern shared with @mixin pill, @mixin data-table-row-focused,
+	// the anchor hover in _global.scss, and @mixin semantic-color's
+	// status-family cascade. -light / -lighter remain explicit tokens
+	// (theme-controlled, not derivable from base).
+	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 8));
+
+	// --btn-bg / --btn-fg read translucent companions via fallback.
+	// Default theme: companions unset → falls back to --color-accent
+	// / --color-accent-fg (solid + white). Glass theme: companions
+	// rebound at :root → translucent fill + accent-colored fg. The
+	// var() fallback resolves at the consumer (this button), so the
+	// .success/.error/.warning/.info cascade through --color-primary
+	// still works in both themes.
+	--btn-bg:           var(--color-accent-bg,       var(--color-accent));
+	--btn-fg:           var(--color-accent-bg-fg,    var(--color-accent-fg));
+	--btn-border:       var(--color-accent);
+	--btn-bg-hover:     var(--color-accent-bg-hover, var(--color-accent-hover));
+	--btn-fg-hover:     var(--color-accent-bg-fg,    var(--color-accent-fg));
+	--btn-border-hover: var(--color-accent-hover);
+}
+
+@mixin btn-sm {
+	--btn-padding-x: var(--size-sm-up);
+	--gap:           var(--size-xs);
+	gap: var(--gap);
+	@include text-xs;
+}
+
+@mixin btn-lg {
+	--btn-padding-x: var(--size-lg);
+	--btn-padding-y: var(--size-md);
+	--gap:           var(--size-sm-up);
+	gap: var(--gap);
+	@include text-base;
+}
+
+@mixin btn-group {
+	--gap: var(--size-xs);
+	@include inline-flex;
+	@include items-center;
+	gap: var(--gap);
+
+	button {
+		--btn-bg: transparent;
+		--btn-border: transparent;
+		color: var(--fg-subtle);
+	}
+}
+

package/scss/config/mixins/_card.scss

@@ -0,0 +1,338 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'shadows' as *;
+@use 'transitions' as *;
+@use 'position' as *;
+
+// Card & Section — composite mixins
+
+@mixin card {
+	background: var(--color-bg);
+	@include border;
+	@include w-full;
+	@include flex-col;
+	border-radius: var(--radius);
+	@include overflow-hidden;
+	@include transition;
+	--shadow: var(--shadow-resting);
+	box-shadow: var(--shadow);
+
+	&:hover {
+		--color-border: var(--border-strong);
+		--shadow: var(--shadow-floating);
+	}
+
+	// Direct-child selectors only — nested <header>/<main>/<footer>
+	// inside card content are consumer-owned and must not inherit the
+	// card's chrome. Same rationale as @mixin section-card.
+	> header { @include panel-header; }
+	> main   { @include panel-body; }
+	> footer { @include panel-footer; }
+
+	// Card-tile behavior: main stretches to equalize heights when
+	// cards are placed in a grid row, and provides rhythm between
+	// stacked children (h3, p, .field) via the logical gap token.
+	> main {
+		@include flex-1;
+		gap: var(--gap);
+	}
+
+	// Whole-card-as-link: <a> wraps card content and fills the card.
+	> a {
+		@include flex-col;
+		@include flex-1;
+		text-decoration: none;
+		color: inherit;
+	}
+
+	// Tile-header h3: when a card carries a title inside > main
+	// without a <header> wrapper, the global h3 cascade (heading-sm)
+	// is too large for tile context. Tighten to tile-title sizing.
+	> main h3 {
+		font-size: var(--text-body-sm);
+		@include font-semibold;
+		color: inherit;
+		margin: 0;
+	}
+}
+
+@mixin panel-header {
+	@include flex;
+	@include items-center;
+	@include justify-between;
+	padding: var(--padding-y) var(--padding-x);
+	@include border-b;
+	--color-bg: var(--bg-sunken);
+	background: var(--color-bg);
+	@include transition;
+
+	h3 {
+		font-size: var(--text-body-sm);
+		line-height: var(--lh-body-sm);
+		@include font-medium;
+		color: var(--color-fg);
+		margin: 0;
+	}
+
+	// Equalize control chrome inside the header. Geometric height lock
+	// matching @mixin app-header-actions: icon-content (1.25rem) + 2 ×
+	// rebound --padding-y + 2 × border-width. Buttons inherit --padding-y
+	// from this rebind; search-icon labels read it from
+	// @mixin form-input-icon-group (same var(--size-xs) value), so the
+	// formula resolves identically for both. Descendant selector — these
+	// controls are commonly wrapped in <aside>/<nav>/<div> inside the
+	// header. panel-header is chrome (no body labels), so descendant
+	// `label` here is always a search-icon-group, never a field label.
+	label {
+		--padding-y: var(--size-xs);
+	}
+
+	button {
+		--btn-padding-y: var(--size-xs);
+	}
+
+	:is(button, label) {
+		min-height: calc(1.25rem + 2 * var(--padding-y) + 2 * var(--border-width));
+	}
+
+	// Close/dismiss and toggle buttons inside the header should be tight and flat.
+	button[data-ln-modal-close],
+	button[aria-label="Close"],
+	button[data-ln-toggle] {
+		--btn-padding-y: var(--size-2xs);
+		--btn-padding-x: var(--size-2xs);
+		--shadow: none;
+	}
+}
+
+@mixin panel-body {
+	padding: var(--padding-y) var(--padding-x);
+
+	// Auto-flush: ONLY when the table (or .table-container) is the
+	// sole child of main — i.e. the card is a pure table card.
+	// Strip padding so the table spans edge-to-edge, and drop the
+	// table's own radius/shadow (card's overflow:hidden handles
+	// rounded corners).
+	//
+	// If main has mixed content (intro <p>, demo-split, <h4>,
+	// then <table>), :only-child doesn't match, padding stays,
+	// and the table keeps its own inset.
+	&:has(> table:only-child),
+	&:has(> .table-container:only-child) {
+		padding: 0;
+
+		> table,
+		> .table-container > table {
+			border-radius: 0;
+			box-shadow: none;
+			margin-bottom: 0;
+		}
+	}
+}
+
+@mixin panel-footer {
+	padding: var(--padding-y) var(--padding-x);
+	@include border-t;
+	@include flex;
+	@include justify-end;
+	gap: var(--gap);
+}
+
+@mixin section {
+	--margin-block: var(--size-xl);
+	margin-bottom: var(--margin-block);
+
+	header {
+		@include flex;
+		@include items-center;
+		@include justify-between;
+		--margin-block: var(--size-md);
+		margin-bottom: var(--margin-block);
+		--padding-y: var(--size-sm);
+		padding-bottom: var(--padding-y);
+		@include border-b;
+
+		h2 {
+			@include text-xl;
+			@include font-bold;
+			color: var(--color-fg);
+			margin: 0;
+		}
+
+		.section-actions {
+			@include flex;
+			gap: var(--gap);
+		}
+	}
+
+	main {
+		padding: 0;
+	}
+}
+
+// ─── Card accents (Tabler-inspired colored lines) ──────
+// Accent reads --color-accent (solid) for borders, --color-primary
+// (raw triplet) for alpha hover tints — see plan §0.3.
+// Usage: #my-card { @include card; @include card-accent-top; }
+
+@mixin _card-accent-base {
+	&:hover {
+		background-color: color-mix(in srgb, var(--color-accent) 4%, transparent);
+	}
+}
+
+@mixin card-accent-top {
+	@include _card-accent-base;
+	border-top: 3px solid var(--color-accent);
+	&:hover {
+		border-top-color: var(--color-accent);
+	}
+}
+
+@mixin card-accent-bottom {
+	@include _card-accent-base;
+	border-bottom: 3px solid var(--color-accent);
+	&:hover {
+		border-bottom-color: var(--color-accent);
+	}
+}
+
+@mixin card-accent-left {
+	@include _card-accent-base;
+	border-left: 3px solid var(--color-accent);
+	&:hover {
+		border-left-color: var(--color-accent);
+	}
+}
+
+// ─── Card tinted background ────────────────────────────
+
+@mixin card-bg {
+	background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
+	border-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
+}
+
+// ─── Card stacked (visual depth illusion) ──────────────
+
+@mixin card-stacked {
+	@include relative;
+
+	&::after {
+		content: '';
+		@include absolute;
+		bottom: -5px;
+		left: 6px;
+		right: 6px;
+		height: 10px;
+		background: var(--color-bg);
+		border-radius: var(--radius);
+		--shadow: var(--shadow-resting);
+		box-shadow: var(--shadow);
+		--color-border: var(--border-subtle);
+		border: var(--border-width) solid var(--color-border);
+		z-index: -1;
+	}
+}
+
+@mixin section-card {
+	background: var(--color-bg);
+	@include border;
+	border-radius: var(--radius);
+	// `overflow: clip` not `overflow: hidden` — clips at rounded corners
+	// without establishing a scroll container, so sticky descendants
+	// (e.g. ln-table's <thead>) bind to the outer .app-main > section
+	// scroll surface instead of being trapped inside this card.
+	overflow: clip;
+	@include transition;
+	--shadow: var(--shadow-resting);
+	box-shadow: var(--shadow);
+	--margin-block: var(--size-md);
+	margin-bottom: var(--margin-block);
+
+	// Direct-child selectors only — nested <header>/<main>/<footer>
+	// elements inside the card's content are consumer-owned and
+	// must not inherit the card's own chrome styles.
+	> header { @include panel-header; }
+	> main   { @include panel-body; }
+	> footer { @include panel-footer; }
+}
+
+// ─── Floating panel ────────────────────────────────────
+// Chrome recipe for floating overlays (popover, dropdown menu, toast).
+// Rebinds --color-bg to elevated surface and --shadow to floating
+// shadow so floating panels lift off the page surface correctly.
+
+@mixin floating-panel {
+	--color-bg:     var(--bg-elevated);
+	--color-border: var(--border-subtle);
+	--shadow:       var(--shadow-floating);
+	background: var(--color-bg);
+	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);
+	z-index: var(--z-dropdown);
+}
+
+// ─── Card field list (label/value rows) ────────────────
+// Dashboard/settings pattern: card body contains .field rows
+// with .label + .value. Separator between rows, none after last.
+// Apply on a scope that contains .field descendants — typically
+// the `.card` global binding, but any container works.
+//
+// Expected HTML:
+//   <div class="card">
+//     <main>
+//       <div class="field"><span class="label">Name</span><span class="value">Marko</span></div>
+//       <div class="field"><span class="label">Email</span><span class="value">m@x</span></div>
+//     </main>
+//   </div>
+
+@mixin card-field-list {
+	.field {
+		@include flex;
+		align-items: baseline;
+		@include justify-between;
+		gap: var(--gap);
+		--padding-y: var(--size-xs-up);
+		padding-block: var(--padding-y);
+		@include border-b;
+
+		&:last-child {
+			@include border-none;
+			padding-bottom: 0;
+		}
+
+		.label {
+			@include text-xs;
+			@include font-semibold;
+			@include uppercase;
+			@include tracking-wider;
+			--color-fg: var(--fg-muted);
+			color: var(--color-fg);
+			@include flex-shrink-0;
+		}
+
+		.value {
+			@include text-sm;
+			@include font-medium;
+			color: var(--color-fg);
+			text-align: right;
+			margin: 0;
+
+			em {
+				--color-fg: var(--fg-subtle);
+				color: var(--color-fg);
+				@include text-xs;
+				font-style: normal;
+				font-weight: normal;
+			}
+		}
+	}
+}

package/scss/config/mixins/_chip.scss

@@ -0,0 +1,66 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'focus' as *;
+
+@mixin chip {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	--padding-y: var(--size-xs);
+	--padding-x: var(--size-sm-up);
+	padding: var(--padding-y) var(--padding-x);
+	@include typography(label-sm);
+	--color-bg: var(--bg-recessed);
+	background: var(--color-bg);
+	color: var(--color-fg);
+	@include rounded-full;
+	white-space: nowrap;
+	line-height: 1.4;
+
+	> button {
+		all: unset;
+		cursor: pointer;
+		@include inline-flex-center;
+		width: 1rem;
+		height: 1rem;
+		border-radius: 50%;
+		--color-fg: var(--fg-muted);
+		color: var(--color-fg);
+
+		&:hover {
+			background: var(--color-border);
+			color: var(--color-fg);
+		}
+
+		&:focus-visible {
+			@include focus-ring;
+		}
+
+		svg.ln-icon {
+			width: 0.75rem;
+			height: 0.75rem;
+		}
+	}
+
+	// Tone variants
+	&.success {
+		background: hsl(var(--color-success) / 0.12);
+		color: hsl(var(--color-success));
+	}
+	&.warning {
+		background: hsl(var(--color-warning) / 0.12);
+		color: hsl(var(--color-warning));
+	}
+	&.error {
+		background: hsl(var(--color-error) / 0.12);
+		color: hsl(var(--color-error));
+	}
+	&.info {
+		background: hsl(var(--color-info) / 0.12);
+		color: hsl(var(--color-info));
+	}
+}