@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_form.scss

@@ -0,0 +1,601 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'breakpoints' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'motion' as *;
+@use 'layout' as *;
+@use 'interaction' as *;
+@use 'position' as *;
+@use 'focus' as *;
+@use 'btn' as *;
+
+// ─── Form layout ────────────────────────────────────────────────
+
+@mixin form-label {
+	@include block;
+	font-size: var(--text-label-md);
+	line-height: var(--lh-label-md);
+	@include font-medium;
+	color: var(--color-fg);
+	// Structural label-to-input gap (not shell rhythm).
+	--margin-block: var(--size-xs);
+	margin-bottom: var(--margin-block);
+
+	// Required indicator — red * after label text
+	// Triggered by sibling input[required] via parent :has()
+	.form-element:has([required]) > & {
+		&::after {
+			content: ' *';
+			color: hsl(var(--color-error));
+			@include font-bold;
+		}
+	}
+}
+
+@mixin form-grid {
+	--gap: var(--size-md);
+	container-type: inline-size;
+	container-name: form-grid;
+	display: grid;
+	grid-template-columns: repeat(6, minmax(0, 1fr));
+	gap: var(--gap);
+
+	> * { margin: 0; }
+
+	@include cq-down(md, form-grid) {
+		grid-template-columns: repeat(1, minmax(0, 1fr));
+	}
+}
+
+@mixin form-actions {
+	--gap: var(--size-sm-up);
+	@include flex;
+	@include justify-end;
+	gap: var(--gap);
+	// Structural margin-top (not shell rhythm).
+	--margin-block: var(--size-lg);
+	margin-top: var(--margin-block);
+	// Structural padding-top (border-t offset). Kept literal to avoid
+	// cascading --padding-y into nested anchors, which use button-standard
+	// --padding-y from :root.
+	--padding-y: var(--size-md);
+	padding-top: var(--padding-y);
+	@include border-t;
+
+	a {
+		// Anchor-as-button: inherit neutral button chrome from the library,
+		// then reset the --gap rebind (form-actions parent sets a wider
+		// action-button gap; anchors want the tighter icon+text gap) and
+		// strip default anchor underline.
+		--gap: var(--size-sm);
+		@include button-base;
+		text-decoration: none;
+	}
+}
+
+// ─── Focus treatment (shared by form-input and icon-group) ─────
+
+@mixin _form-focus-style {
+	border-color: var(--color-accent);
+	@include focus-background-shift;
+}
+
+// ─── Text inputs, textareas, selects ────────────────────────────
+
+@mixin form-input {
+	@include w-full;
+	--padding-y: var(--size-sm);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	font-size: var(--font-size);
+	line-height: var(--line-height);
+	color: var(--color-fg);
+	background: var(--color-bg);
+	@include border;
+	border-radius: var(--radius);
+	@include transition;
+	outline: none;
+
+	&:focus-visible {
+		@include _form-focus-style;
+	}
+
+	&::placeholder {
+		--color-fg: var(--fg-subtle);
+		color: var(--color-fg);
+	}
+
+	&:disabled {
+		@include opacity-50;
+		@include cursor-not-allowed;
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+	}
+
+	// Hide native UA clear button on <input type="search"> — we never use it;
+	// it's visually inconsistent across browsers and fights our icon-group layout.
+	&[type="search"]::-webkit-search-cancel-button {
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+@mixin form-textarea {
+	min-height: 6rem;
+	resize: vertical;
+}
+
+@mixin form-select {
+	appearance: none;
+	// Arrow icon — override --select-arrow to change per-theme
+	// (SVG data-URIs can't reference CSS custom properties, so the icon is static)
+	--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+	background-image: var(--select-arrow);
+	background-repeat: no-repeat;
+	// Intrinsic arrow offset (not shell padding rhythm).
+	background-position: right var(--size-sm-up) center;
+	padding-right: 2.5rem;
+}
+
+// ─── Input group — label wrapping icon(s) + input ──────────────────
+//
+// Pattern:
+//   <label>
+//     <svg class="ln-icon"/>   ← leading icon (optional)
+//     <input type="…">
+//     <svg class="ln-icon"/>   ← trailing icon (optional)
+//   </label>
+//
+// The <label> becomes the visual container (border, padding, focus
+// ring). The nested <input> strips its form-input container chrome so
+// that horizontal rhythm is owned by the label's px + gap, and vertical
+// rhythm by the label's py. Without this, the input keeps its own
+// padding and fights the wrapper — see the asymmetric spacing that
+// motivated this mixin.
+//
+// Applied via semantic selector in components/_form.scss — no class
+// needed on the <label>.
+
+@mixin form-input-icon-group {
+	@include inline-flex;
+	@include items-center;
+	gap: var(--gap);
+	// Compact padding: tight vertical to keep total height close to a
+	// regular form-input despite the icon's fixed size.
+	--padding-y: var(--size-xs);
+	--padding-x: var(--size-sm);
+	padding: var(--padding-y) var(--padding-x);
+	background: var(--color-bg);
+	@include border;
+	border-radius: var(--radius);
+	@include transition;
+	font-size: var(--font-size);
+	line-height: var(--line-height);
+	// Wrapping-label reset: undo form-label defaults that would otherwise leak.
+	margin-bottom: 0;
+
+	&:focus-within {
+		@include _form-focus-style;
+	}
+
+	> .ln-icon {
+		@include flex-shrink-0;
+		--color-fg: var(--fg-subtle);
+		color: var(--color-fg);
+	}
+
+	> input {
+		// Strip container chrome inherited from form-input — label owns it now.
+		padding: 0;
+		@include border-none;
+		background: transparent;
+		outline: none;
+		box-shadow: none;
+
+		// Tighten leading for a single-line control. form-input inherits
+		// --lh-body-md (1.6) which is tuned for prose readability, not form
+		// controls — that leaves ~7px of wasted leading above and below the
+		// glyph inside the input's own line box, which compounds with the
+		// label's padding and makes icon-group feel airy. 1.25 keeps
+		// descenders (g/p/j/y) safe and brings the label down to ~36px total.
+		line-height: 1.25;
+
+		// Take the remaining flex space. width: auto cancels form-input's
+		// width: 100%; flex-1 + min-width: 0 lets the field shrink below
+		// its intrinsic min-content inside a narrow label.
+		width: auto;
+		@include flex-1;
+		min-width: 0;
+
+		&:focus-visible {
+			border-color: transparent;
+			box-shadow: none;
+		}
+
+		// Hide clear button when input is empty
+		&:placeholder-shown ~ [data-ln-search-clear] {
+			@include hidden;
+		}
+	}
+
+	> [data-ln-search-clear] {
+		@include flex-shrink-0;
+		--padding-y: var(--size-2xs);
+		--padding-x: var(--size-2xs);
+		padding: var(--padding-y) var(--padding-x);
+		@include cursor-pointer;
+		--color-fg: var(--fg-subtle);
+		color: var(--color-fg);
+		@include transition-colors;
+
+		&:hover {
+			color: var(--color-fg);
+		}
+	}
+}
+
+// ─── Checkbox & Radio ───────────────────────────────────────────
+
+@mixin form-check {
+	appearance: none;
+	@include size(1.25rem);
+	padding: 0;
+	@include flex-shrink-0;
+	// Non-standard 1.5px stroke — optical weight at small checkbox size.
+	border: 1.5px solid var(--color-border);
+	background: var(--color-bg);
+	@include cursor-pointer;
+	@include transition;
+	vertical-align: middle;
+
+	&:checked {
+		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");
+		background-size: 0.75rem;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	&:focus-visible {
+		@include focus-ring;
+	}
+
+	&:disabled {
+		@include opacity-50;
+		@include cursor-not-allowed;
+	}
+}
+
+@mixin form-checkbox {
+	@include form-check;
+	@include rounded-sm;
+}
+
+@mixin form-radio {
+	@include form-check;
+	border-radius: 50%;
+
+	&:checked {
+		background-image: none;
+		box-shadow: inset 0 0 0 3px var(--color-bg);
+	}
+}
+
+// ─── Pill outline — base label (structure + visible border) ────
+//
+// Self-contained outline variant: transparent background, visible native
+// input indicator, accent border + accent text on checked.
+//
+// Must be idempotent when re-applied over `@include pill` (the filled
+// default installed globally by components/_form.scss on fieldset pills).
+// Each rule below resets a behavior that `pill` adds: bg-sunken fill,
+// hidden input, accent-fg text on checked.
+
+@mixin pill-outline {
+	@include flex;
+	@include items-center;
+	gap: var(--gap);
+	--padding-y: var(--size-sm);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	@include cursor-pointer;
+	@include transition;
+	@include text-sm;
+	@include font-medium;
+	margin-bottom: 0;
+	border-radius: var(--radius);
+	border: var(--border-width) solid var(--color-border);
+	// Reset pill's filled bg. Outline = transparent surface.
+	background: transparent;
+	position: relative;
+
+	// Restore the native input indicator. `display: revert` returns the
+	// UA default (inline-block for checkbox/radio) and cleanly undoes
+	// pill's `display: none` when pill-outline is applied as an override.
+	> input { display: revert; }
+
+	&:has(> input:checked) {
+		border-color: var(--color-accent);
+		color: var(--color-accent);
+		// Reset pill's accent fill on checked — outline stays transparent.
+		background: transparent;
+		z-index: 1;
+	}
+
+	&:hover:not(:has(> input:checked)) {
+		border-color: var(--color-accent);
+		z-index: 1;
+	}
+}
+
+// ─── Pill filled — extends pill-outline, hides input ───────────
+
+@mixin pill {
+	@include pill-outline;
+	--color-bg: var(--bg-sunken);
+	// Derive hover from --color-accent at this scope (label element).
+	// Lets .error/.success/.warning/.info parents cascade to the checked-
+	// state hover via the .success { --color-primary } chain. See
+	// _btn.scss for the syntax rationale (number form, not percentage).
+	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 8));
+
+	background-color: var(--color-bg);
+	border-color: transparent;
+
+	> input { display: none; }
+
+	&:has(> input:checked) {
+		background-color: var(--color-accent);
+		color: var(--color-accent-fg);
+	}
+
+	&:hover:not(:has(> input:checked)) {
+		border-color: var(--color-border);
+	}
+
+	&:hover:has(> input:checked) {
+		background-color: var(--color-accent-hover);
+	}
+}
+
+@mixin pill-group {
+	@include inline-flex;
+
+	li label {
+		border-radius: 0;
+	}
+
+	li:first-child label {
+		border-radius: var(--radius) 0 0 var(--radius);
+	}
+
+	li:last-child label {
+		border-radius: 0 var(--radius) var(--radius) 0;
+	}
+
+	li:only-child label {
+		border-radius: var(--radius);
+	}
+}
+
+// ─── Pills — GCD for joined-pill checkbox/radio lists ──────────
+// Joined-group filled pills: pill on each <li><label><input>, with
+// joined-corner border-radius (square middles, partial-radius first/
+// last) inlined here rather than composed via pill-group. Inlining
+// is required because pill-group's `li label` selectors (0,1,5) are
+// out-specificityed by pill's :has selector (0,2,5), which would
+// reassert full radius on every pill. The selectors below match
+// pill's :has shape so source-order/specificity resolves cleanly.
+// Apply to a <ul> whose direct children are <li><label><input> pairs.
+//
+// Usage: project SCSS applies this on its own ul selector:
+//
+//     #my-filter-pills { @include pills; }
+//
+// where the structure is:
+//
+//     <ul id="my-filter-pills">
+//         <li><label><input type="checkbox"> Label</label></li>
+//         ...
+//     </ul>
+
+@mixin pills {
+	@include inline-flex;
+
+	> li > label:has(> input[type="checkbox"]),
+	> li > label:has(> input[type="radio"]) {
+		@include pill;
+		border-radius: 0;
+	}
+
+	> li:first-child > label:has(> input[type="checkbox"]),
+	> li:first-child > label:has(> input[type="radio"]) {
+		border-radius: var(--radius) 0 0 var(--radius);
+	}
+
+	> li:last-child > label:has(> input[type="checkbox"]),
+	> li:last-child > label:has(> input[type="radio"]) {
+		border-radius: 0 var(--radius) var(--radius) 0;
+	}
+
+	> li:only-child > label:has(> input[type="checkbox"]),
+	> li:only-child > label:has(> input[type="radio"]) {
+		border-radius: var(--radius);
+	}
+}
+
+@mixin pills-outline {
+	@include inline-flex;
+
+	> li {
+		position: relative;
+
+		&:not(:first-child) {
+			margin-left: calc(var(--border-width) * -1);
+		}
+
+		&:hover,
+		&:has(> label > input:checked) {
+			z-index: 1;
+		}
+	}
+
+	> li > label:has(> input[type="checkbox"]),
+	> li > label:has(> input[type="radio"]) {
+		@include pill-outline;
+		border-radius: 0;
+	}
+
+	> li:first-child > label:has(> input[type="checkbox"]),
+	> li:first-child > label:has(> input[type="radio"]) {
+		border-radius: var(--radius) 0 0 var(--radius);
+	}
+
+	> li:last-child > label:has(> input[type="checkbox"]),
+	> li:last-child > label:has(> input[type="radio"]) {
+		border-radius: 0 var(--radius) var(--radius) 0;
+	}
+
+	> li:only-child > label:has(> input[type="checkbox"]),
+	> li:only-child > label:has(> input[type="radio"]) {
+		border-radius: var(--radius);
+	}
+}
+
+@mixin toggle-switch {
+	appearance: none;
+	position: relative;
+	width: 2.5rem;
+	height: 1.5rem;
+	--color-bg: var(--border-strong);
+	background: var(--color-bg);
+	border-radius: var(--radius-full);
+	cursor: pointer;
+	vertical-align: middle;
+	flex-shrink: 0;
+	border: none;
+	transition: none;
+
+	@include motion-safe {
+		transition: background-color var(--transition-fast);
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: 1.25rem;
+		height: 1.25rem;
+		background: hsl(var(--color-white));
+		border-radius: 50%;
+		--shadow: var(--shadow-resting);
+		box-shadow: var(--shadow);
+
+		@include motion-safe {
+			transition: transform var(--transition-fast);
+		}
+	}
+
+	&:checked {
+		background: var(--color-accent);
+
+		&::before {
+			transform: translateX(1rem);
+		}
+	}
+
+	&:focus-visible {
+		@include focus-ring;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+}
+
+@mixin pill-switch {
+	@include row(var(--size-sm));
+	@include cursor-pointer;
+	@include text-sm;
+	@include font-medium;
+	color: var(--color-fg);
+	margin-bottom: 0;
+
+	> input[type="checkbox"] {
+		@include toggle-switch;
+	}
+}
+
+@mixin pills-switch {
+	@include stack(var(--size-sm));
+	list-style: none;
+	padding: 0;
+	margin: 0;
+
+	> li > label {
+		@include pill-switch;
+	}
+}
+
+// ─── Check list outline — vertical list with outlined labels ───
+// <ul><li><label><input> — same structure as pill-group but vertical.
+// List reset + pill-outline on labels (visible input, bordered).
+//
+// Usage:
+//   #dept-filter { @include check-list-outline; }
+
+@mixin check-list-outline {
+	li label { @include pill-outline; }
+}
+
+// ─── Check list filled — vertical list with filled labels ──────
+// Extends check-list-outline: hides input, fills bg on checked.
+//
+// Usage:
+//   #dept-filter { @include check-list; }
+
+@mixin check-list {
+	@include check-list-outline;
+
+	li label { @include pill; }
+}
+
+// ─── Validation states ─────────────────────────────────────────
+// Status colors (error/success) stay raw — no logical --color-status
+// token in scope (see parent plan §6.2).
+
+@mixin form-validate-invalid {
+	border-color: hsl(var(--color-error));
+
+	&:focus-visible {
+		border-color: hsl(var(--color-error));
+		box-shadow: 0 0 0 3px hsl(var(--color-error) / 0.15);
+	}
+}
+
+@mixin form-validate-valid {
+	border-color: hsl(var(--color-success));
+
+	&:focus-visible {
+		border-color: hsl(var(--color-success));
+		box-shadow: 0 0 0 3px hsl(var(--color-success) / 0.15);
+	}
+}
+
+@mixin form-validate-errors {
+	// Structural error-list margin (not shell rhythm).
+	--margin-block: var(--size-xs);
+	margin-top: var(--margin-block);
+	font-size: var(--text-caption);
+	line-height: var(--lh-caption);
+	color: hsl(var(--color-error));
+}

package/scss/config/mixins/_index.scss

@@ -0,0 +1,58 @@
+// 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 'modal';
+@forward 'breadcrumbs';
+@forward 'loader';
+@forward 'tabs';
+@forward 'table';
+@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 'kbd';
+@forward 'tooltip';
+@forward 'popover';
+@forward 'progress';
+@forward 'link';
+@forward 'confirm';
+@forward 'circular-progress';
+@forward 'dropdown';
+@forward 'toast';
+@forward 'upload';
+@forward 'translations';
+@forward 'data-table';
+@forward 'ln-table';
+@forward 'ajax';

package/scss/config/mixins/_interaction.scss

@@ -0,0 +1,15 @@
+// Cursor, Interaction & Z-Index
+
+@mixin cursor-pointer     { cursor: pointer; }
+@mixin cursor-not-allowed { cursor: not-allowed; }
+@mixin select-none        { user-select: none; }
+@mixin opacity-50         { opacity: 0.5; }
+
+// Z-Index — references --z-* tokens
+@mixin z-dropdown { z-index: var(--z-dropdown); }
+@mixin z-sticky   { z-index: var(--z-sticky); }
+@mixin z-overlay  { z-index: var(--z-overlay); }
+@mixin z-modal    { z-index: var(--z-modal); }
+@mixin z-toast    { z-index: var(--z-toast); }
+
+@mixin z($val) { z-index: $val; }

package/scss/config/mixins/_kbd.scss

@@ -0,0 +1,22 @@
+@use 'spacing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+
+@mixin kbd {
+	--color-bg: var(--bg-sunken);
+	display: inline-block;
+	--padding-y: var(--size-2xs);
+	--padding-x: var(--size-xs-up);
+	padding: var(--padding-y) var(--padding-x);
+	@include typography(caption);
+	font-family: var(--font-mono);
+	color: var(--color-fg);
+	background: var(--color-bg);
+	border: var(--border-width) solid var(--color-border);
+	border-bottom-width: 2px;
+	--radius: var(--radius-sm);
+	border-radius: var(--radius);
+	line-height: 1;
+	white-space: nowrap;
+}