@livenetworks/ashlar 1.3.2

package/scss/components/_button.scss

@@ -0,0 +1,20 @@
+@use '../config/mixins' as *;
+
+// Prototype-tier classes.
+// These classes are provided for prototyping, inspector experimentation,
+// and demo HTML only. In production, apply the corresponding mixin to a
+// semantic selector:
+//
+//   #add-user        { @include btn; }
+//   #users-table ul  { @include btn-group; }
+//
+// See CLAUDE.md "Button Architecture" and "Button Groups vs Pill Groups"
+// for the production pattern.
+
+.btn    { @include btn; }
+.btn-sm { @include btn-sm; }
+.btn-lg { @include btn-lg; }
+
+.btn-group {
+	@include btn-group;
+}

package/scss/components/_card.scss

@@ -0,0 +1,10 @@
+@use '../config/mixins' as *;
+
+.card {
+	@include card;
+	@include card-field-list;
+}
+
+.section-card {
+	@include section-card;
+}

package/scss/components/_chip.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+.ln-chip {
+	@include chip;
+}

package/scss/components/_circular-progress.scss

@@ -0,0 +1,29 @@
+@use '../config/mixins' as *;
+
+[data-ln-circular-progress] {
+	@include circular-progress;
+}
+
+[data-ln-circular-progress].sm {
+	@include circular-progress-sm;
+}
+
+[data-ln-circular-progress].lg {
+	@include circular-progress-lg;
+}
+
+[data-ln-circular-progress].xl {
+	@include circular-progress-xl;
+}
+
+[data-ln-circular-progress].success .ln-circular-progress__fill {
+	stroke: hsl(var(--color-success));
+}
+
+[data-ln-circular-progress].error .ln-circular-progress__fill {
+	stroke: hsl(var(--color-error));
+}
+
+[data-ln-circular-progress].warning .ln-circular-progress__fill {
+	stroke: hsl(var(--color-warning));
+}

package/scss/components/_confirm.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+.ln-confirm-tooltip {
+	@include confirm-tooltip;
+}

package/scss/components/_data-table.scss

@@ -0,0 +1,83 @@
+@use '../config/mixins' as *;
+
+[data-ln-data-table] {
+	@include data-table;
+}
+
+// ─── Sort indicators ──────────────────────────────────────
+
+[data-ln-col-sort] {
+	@include data-table-sort-button;
+}
+
+th:hover [data-ln-col-sort] {
+	opacity: 0.7;
+}
+
+.ln-sort-asc [data-ln-col-sort],
+.ln-sort-desc [data-ln-col-sort] {
+	@include data-table-sort-active;
+}
+
+// Active-state icon swap — hide the neutral dual-arrow, show the
+// matching directional icon. Mixin defaults all three to "none shown,
+// asc/desc hidden"; we override per active class.
+.ln-sort-asc [data-ln-col-sort] {
+	[data-ln-sort-icon="none"] { display: none; }
+	[data-ln-sort-icon="asc"]  { display: inline-block; }
+}
+
+.ln-sort-desc [data-ln-col-sort] {
+	[data-ln-sort-icon="none"] { display: none; }
+	[data-ln-sort-icon="desc"] { display: inline-block; }
+}
+
+// ─── Filter button ────────────────────────────────────────
+
+[data-ln-col-filter] {
+	@include data-table-filter-button;
+}
+
+th:hover [data-ln-col-filter] {
+	opacity: 0.7;
+}
+
+.ln-filter-active {
+	@include data-table-filter-active;
+}
+
+// ─── Filter dropdown ──────────────────────────────────────
+
+.column-filter-dropdown {
+	@include data-table-filter-dropdown;
+}
+
+// ─── Row action buttons ─────────────────────────────────
+
+[data-ln-row-action] {
+	@include data-table-row-action;
+}
+
+[data-ln-row-action="delete"] {
+	@include data-table-row-action-delete;
+}
+
+// ─── Row interaction states ─────────────────────────────
+
+[data-ln-row] {
+	@include data-table-row;
+}
+
+.ln-row-selected {
+	@include data-table-row-selected;
+}
+
+.ln-row-focused {
+	@include data-table-row-focused;
+}
+
+// ─── Virtual-scroll spacer ──────────────────────────────
+
+.ln-data-table__spacer {
+	@include data-table-spacer-row;
+}

package/scss/components/_dropdown.scss

@@ -0,0 +1,25 @@
+@use '../config/mixins' as *;
+
+[data-ln-dropdown] {
+	@include dropdown;
+}
+
+[data-ln-dropdown-menu] {
+	@include dropdown-menu;
+
+	// Reset right-alignment when teleported to body to prevent 100% width stretching
+	body > & {
+		right: auto;
+	}
+}
+
+@keyframes ln-dropdown-in {
+	from {
+		opacity: 0;
+		transform: translateY(-4px) scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}

package/scss/components/_empty-state.scss

@@ -0,0 +1,22 @@
+@use '../config/mixins' as *;
+
+[data-ln-empty-state] {
+	@include empty-state;
+
+	svg.ln-icon,
+	svg.ln-icon--xl {
+		--color-fg: var(--fg-subtle);
+		color: var(--color-fg);
+	}
+
+	h3 {
+		@include typography(heading-sm);
+		color: var(--color-fg);
+	}
+
+	p {
+		@include typography(body-md);
+		--color-fg: var(--fg-muted);
+		color: var(--color-fg);
+	}
+}

package/scss/components/_form.scss

@@ -0,0 +1,100 @@
+@use '../config/mixins' as *;
+
+// ─── Inputs ─────────────────────────────────────────────────────
+
+input,
+textarea,
+select {
+	@include form-input;
+}
+
+textarea {
+	@include form-textarea;
+}
+
+select {
+	@include form-select;
+}
+
+// ─── Checkbox & Radio ───────────────────────────────────────────
+
+input[type="checkbox"] {
+	@include form-checkbox;
+}
+
+input[type="radio"] {
+	@include form-radio;
+}
+
+// ─── Icon input group ───────────────────────────────────────────
+// Semantic trigger: any <label> that directly contains a <svg class="ln-icon">
+// AND a text-ish <input>. Excludes checkbox/radio/file/button types via the
+// :is() allowlist.
+
+label:has(> .ln-icon):has(> :is(
+	input[type="text"],
+	input[type="search"],
+	input[type="email"],
+	input[type="url"],
+	input[type="tel"],
+	input[type="password"],
+	input[type="number"]
+)) {
+	@include form-input-icon-group;
+}
+
+// ─── Label & Actions ────────────────────────────────────────────
+
+// Non-wrapping labels only — the label sits above/beside its input, not
+// around it. The icon-group pattern owns its full styling and must not
+// inherit block + margin-bottom from here.
+label:not(:has(> input)) {
+	@include form-label;
+}
+
+// ─── Pill groups — radio & checkbox lists ──────────────────────────
+// Clean class-driven segmented controls and switch panels.
+// No <fieldset> tag dependency to prevent layout collisions.
+
+.pills {
+	@include pills;
+}
+
+.pills-outline {
+	@include pills-outline;
+}
+
+.pills-switch {
+	@include pills-switch;
+}
+
+.pill {
+	@include pill;
+}
+
+.pill-outline {
+	@include pill-outline;
+}
+
+.pill-switch {
+	@include pill-switch;
+}
+
+
+.form-actions {
+	@include form-actions;
+}
+
+// ─── Validation states ─────────────────────────────────────────
+
+.ln-validate-invalid {
+	@include form-validate-invalid;
+}
+
+.ln-validate-valid {
+	@include form-validate-valid;
+}
+
+[data-ln-validate-errors] {
+	@include form-validate-errors;
+}

package/scss/components/_layout.scss

@@ -0,0 +1,8 @@
+@use '../config/mixins' as *;
+
+// Prototype-tier class bindings for layout mixins. Production code
+// applies @include on semantic selectors — this class exists for
+// rapid prototyping and inspector experimentation.
+.flat-stack {
+	@include flat-stack;
+}

package/scss/components/_link.scss

@@ -0,0 +1,11 @@
+@use '../config/mixins' as *;
+
+[data-ln-link] tr,
+tr[data-ln-link],
+[data-ln-link]:not(table):not(tbody):not(tr) {
+	@include link-row;
+}
+
+.ln-link-status {
+	@include link-status;
+}

package/scss/components/_ln-table.scss

@@ -0,0 +1,60 @@
+@use '../config/mixins' as *;
+
+[data-ln-table] {
+	@include ln-table;
+	@include ln-table-column-filter;
+	@include ln-table-sort;
+}
+
+// In-thead toolbar — first thead row's colspan th.
+[data-ln-table] thead > tr:first-child:has(> th[colspan]) > th {
+	@include ln-table-thead-toolbar;
+}
+
+.ln-table__toolbar {
+	@include ln-table-toolbar;
+}
+
+.ln-table__toolbar label:has(> input[type="search"]) > input {
+	@include ln-table-toolbar-search;
+}
+
+.ln-table__count {
+	@include ln-table-count;
+}
+
+.table-container {
+	@include ln-table-card-mode;
+}
+
+.ln-table__footer {
+	@include ln-table-footer;
+}
+
+.ln-table__timing {
+	@include ln-table-timing;
+}
+
+.ln-table__filters {
+	@include ln-table-filters;
+}
+
+.ln-table__chips {
+	@include ln-table-chips;
+}
+
+.ln-table__chip {
+	@include ln-table-chip;
+}
+
+.ln-table__clear-all {
+	@include ln-table-clear-all;
+}
+
+.ln-table__empty-state {
+	@include ln-table-empty-state;
+}
+
+.ln-table__spacer {
+	@include ln-table-spacer-row;
+}

package/scss/components/_loader.scss

@@ -0,0 +1,6 @@
+@use '../config/mixins' as *;
+
+.loader {
+	@include loader;
+	margin-block: var(--size-3xl);
+}

package/scss/components/_modal.scss

@@ -0,0 +1,20 @@
+@use '../config/mixins' as *;
+
+.ln-modal {
+	@include modal-overlay;
+}
+
+.ln-modal > form {
+	@include modal-panel;
+}
+
+@keyframes ln-modal-slideIn {
+	from {
+		transform: translateY(-50px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}

package/scss/components/_nav.scss

@@ -0,0 +1,9 @@
+@use '../config/mixins' as *;
+
+// Sidebar/top navigation — opt-in via `data-ln-nav` (the same attribute that
+// activates the ln-nav JS highlighter). Scoping to an explicit marker prevents
+// this rule from capturing every other `<nav>` on the page (breadcrumbs,
+// pagination, in-page TOCs, etc.) which have their own styling contracts.
+nav[data-ln-nav] {
+	@include nav;
+}

package/scss/components/_page-header.scss

@@ -0,0 +1,10 @@
+@use '../config/mixins' as *;
+
+// Prototype-tier class — available out of the box for prototyping and
+// inspector experimentation. Production projects apply the mixin on
+// their own semantic selector:
+//
+//   #my-header { @include page-header; }
+.page-header {
+	@include page-header;
+}

package/scss/components/_popover.scss

@@ -0,0 +1,10 @@
+@use '../config/mixins' as *;
+
+[data-ln-popover] {
+	@include popover;
+}
+
+@keyframes ln-popover-fade {
+	from { opacity: 0; transform: translateY(-4px); }
+	to   { opacity: 1; transform: translateY(0); }
+}

package/scss/components/_progress.scss

@@ -0,0 +1,17 @@
+@use '../config/mixins' as *;
+
+.progress {
+	@include progress;
+}
+
+[data-ln-progress].success {
+	@include progress-success;
+}
+
+[data-ln-progress].error {
+	@include progress-error;
+}
+
+[data-ln-progress].warning {
+	@include progress-warning;
+}

package/scss/components/_prose.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+.prose {
+	@include prose;
+}

package/scss/components/_scrollbar.scss

@@ -0,0 +1,32 @@
+@use '../config/mixins' as *;
+
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	--color-bg: var(--bg-sunken);
+	background: var(--color-bg);
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--color-border);
+	border-radius: 4px;
+	border: 2px solid transparent;
+	background-clip: content-box;
+
+	&:hover {
+		--color-fg: var(--fg-subtle);
+		background-color: var(--color-fg);
+	}
+}
+
+::-webkit-scrollbar-corner {
+	background: transparent;
+}
+
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-border) var(--bg-sunken);
+}

package/scss/components/_sections.scss

@@ -0,0 +1,12 @@
+@use '../config/mixins' as *;
+
+// Opt-in only — applying to bare `section` is too greedy.
+// `<section>` is a generic semantic container used all over the place
+// (nested groupings inside cards, split layouts, etc.). Binding to the
+// bare element made every `.section-card` also inherit page-section
+// chrome (header margin, bottom border), causing doubled borders and
+// unwanted gaps. Projects that want page-section styling apply the
+// mixin to their own selector.
+.section {
+	@include section;
+}

package/scss/components/_sidebar.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+.sidebar {
+	@include sidebar;
+}

package/scss/components/_stat-card.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+[data-ln-stat-card] {
+	@include stat-card;
+}

package/scss/components/_status-badge.scss

@@ -0,0 +1,4 @@
+@use '../config/mixins' as *;
+
+.badge      { @include badge; }
+.badge.live { @include badge-live; }

package/scss/components/_stepper.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+[data-ln-stepper] {
+	@include stepper;
+}

package/scss/components/_table.scss

@@ -0,0 +1,19 @@
+@use '../config/mixins' as *;
+
+table {
+	@include table-base;
+	@include table-filter-button;
+
+	tr.section-header td {
+		@include table-section-header;
+	}
+}
+
+.table-container {
+	@include container(table);
+	overflow-x: auto;
+
+	@container table (max-width: 640px) {
+		table { @include table-responsive; }
+	}
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,21 @@
+@use '../config/mixins' as *;
+
+// ==========================================================================
+// Tabs — underline style
+// ==========================================================================
+
+[data-ln-tabs] nav {
+	@include tabs-nav;
+}
+
+[data-ln-tabs] [data-ln-tab] {
+	@include tabs-tab;
+}
+
+[data-ln-tabs] [data-ln-panel] {
+	@include tabs-panel;
+}
+
+[data-ln-tabs] [data-ln-panel].hidden {
+	@include hidden;
+}

package/scss/components/_timeline.scss

@@ -0,0 +1,14 @@
+@use '../config/mixins' as *;
+
+// Prototype-tier class — available out of the box for prototyping and
+// inspector experimentation. Production projects apply the mixin on
+// their own semantic selector:
+//
+//   #audit-log { @include timeline; }
+.timeline {
+	@include timeline;
+}
+
+#audit-log {
+	@include timeline;
+}

package/scss/components/_toast.scss

@@ -0,0 +1,41 @@
+@use '../config/mixins' as *;
+
+[data-ln-toast] {
+	@include toast-container;
+}
+
+[data-ln-toast] > .ln-toast__item {
+	@include toast-item;
+}
+
+[data-ln-toast] > .ln-toast__item--in {
+	@include toast-item-in;
+}
+
+.ln-toast__item--out {
+	@include toast-item-out;
+}
+
+.ln-toast__card {
+	@include toast-card;
+}
+
+.ln-toast__side {
+	@include toast-side;
+}
+
+.ln-toast__content {
+	@include toast-content;
+}
+
+.ln-toast__head {
+	@include toast-head;
+}
+
+.ln-toast__title {
+	@include toast-title;
+}
+
+.ln-toast__body {
+	@include toast-body;
+}