@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_toast.scss

@@ -0,0 +1,148 @@
+@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 *;
+
+// Toast notification -- side-accent card with icon, title, body, close button.
+//
+// Usage:
+//   [data-ln-toast] { @include toast-container; }
+//   .ln-toast__card { @include toast-card; }
+//
+// Color: attach .success/.error/.warning/.info utility class on the card to cascade --color-accent.
+
+@mixin toast-container {
+	@include fixed;
+	@include z-toast;
+	pointer-events: none;
+	// Viewport-edge offsets — toast container distance from viewport,
+	// not shell rhythm.
+	right: var(--size-lg);
+	bottom: var(--size-lg);
+	display: flex;
+	flex-direction: column-reverse;
+}
+
+@mixin toast-item {
+	opacity: 0;
+	pointer-events: auto;
+	@include motion-safe {
+		transform: translateX(30px);
+		transition: all var(--transition-base) var(--easing-standard);
+	}
+
+	& + & {
+		--margin-block: var(--size-md);
+		margin-bottom: var(--margin-block);
+	}
+}
+
+@mixin toast-item-in {
+	opacity: 1;
+	@include motion-safe {
+		transform: translateX(0);
+	}
+}
+
+@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;
+}
+
+@mixin toast-side {
+	--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;
+	}
+}
+
+@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;
+
+	.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);
+	}
+}
+
+// ─── Header & close ────────────────────────────────────
+
+@mixin toast-head {
+	@include flex;
+	align-items: flex-start;
+	@include justify-between;
+	--gap: var(--size-md);
+	gap: var(--gap);
+}
+
+@mixin toast-title {
+	@include font-bold;
+	@include text-base;
+	color: var(--color-fg);
+	line-height: 1.25;
+}
+
+// ─── Body ──────────────────────────────────────────────
+
+@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/config/mixins/_tooltip.scss

@@ -0,0 +1,111 @@
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'shadows' as *;
+@use 'spacing' as *;
+@use 'motion' as *;
+
+// Shared dark-bubble chrome for ::after pseudo-tooltips (tooltip, confirm)
+// and JS-portal tooltip-element. Semantic token pair — in dark mode the
+// neutral scale inversion naturally flips the bubble to light-on-dark.
+@mixin tooltip-bubble {
+	--padding-y: var(--size-xs);
+	--padding-x: var(--size-sm);
+	padding: var(--padding-y) var(--padding-x);
+	background: var(--color-fg);
+	color: var(--color-bg);
+	@include typography(caption);
+	--radius: var(--radius-sm);
+	border-radius: var(--radius);
+	white-space: nowrap;
+	pointer-events: none;
+	z-index: var(--z-dropdown);
+	--shadow: var(--shadow-floating);
+	box-shadow: var(--shadow);
+}
+
+@mixin tooltip {
+	position: relative;
+
+	&::after {
+		@include tooltip-bubble;
+		content: attr(data-ln-tooltip);
+		position: absolute;
+		opacity: 0;
+
+		// Default placement: top, centered above the trigger.
+		// Position overrides below reset `bottom` / `left` to `auto` so
+		// the pseudo-element is not stretched between two coordinates.
+		--gap: var(--size-xs-up);
+		bottom: calc(100% + var(--gap));
+		left: 50%;
+		transform: translateX(-50%);
+
+		@include motion-safe {
+			transition: opacity var(--transition-fast);
+		}
+	}
+
+	// Fallback: when data-ln-tooltip has no value, pull text from `title`.
+	// Enables the semantic `<abbr data-ln-tooltip title="full form">short</abbr>`
+	// pattern. Same specificity as the base rule — wins by source order.
+	&[data-ln-tooltip=""]::after {
+		content: attr(title);
+	}
+
+	&:hover::after,
+	&:focus-visible::after {
+		opacity: 1;
+	}
+
+	// Bottom — push below the trigger. Must reset `bottom` from the default
+	// top placement or the pseudo-element stretches vertically.
+	&[data-ln-tooltip-position="bottom"]::after {
+		--gap: var(--size-xs-up);
+		bottom: auto;
+		top: calc(100% + var(--gap));
+	}
+
+	// Left — reset `bottom` + `left` from the default, position to the left
+	// of the trigger, vertical-center via top + translateY.
+	&[data-ln-tooltip-position="left"]::after {
+		--gap: var(--size-xs-up);
+		bottom: auto;
+		left: auto;
+		right: calc(100% + var(--gap));
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	// Right — reset `bottom` from the default, override `left` to the right
+	// edge, vertical-center via top + translateY.
+	&[data-ln-tooltip-position="right"]::after {
+		--gap: var(--size-xs-up);
+		bottom: auto;
+		left: calc(100% + var(--gap));
+		top: 50%;
+		transform: translateY(-50%);
+	}
+}
+
+// ─── JS Portal (real DOM tooltip) ──────────────────────
+// When JS enhance is active, tooltips render as positioned
+// DOM elements inside #ln-tooltip-portal instead of ::after.
+
+@mixin tooltip-portal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	z-index: var(--z-toast);
+}
+
+@mixin tooltip-element {
+	@include tooltip-bubble;
+	position: fixed;
+	max-width: 20rem;
+
+	@include motion-safe {
+		animation: ln-tooltip-fade var(--transition-fast);
+	}
+}

package/scss/config/mixins/_transitions.scss

@@ -0,0 +1,10 @@
+// Transitions — references --transition-* tokens
+
+@mixin transition      { transition: all var(--transition-base); }
+@mixin transition-fast { transition: all var(--transition-fast); }
+@mixin transition-slow { transition: all var(--transition-slow); }
+@mixin transition-colors {
+	transition: color var(--transition-base),
+	            background-color var(--transition-base),
+	            border-color var(--transition-base);
+}

package/scss/config/mixins/_translations.scss

@@ -0,0 +1,124 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'motion' as *;
+
+// Translation management -- flag icons, badges, trigger button.
+//
+// Usage:
+//   [data-ln-translatable-lang] { @include translations-flag-input; }
+//   [data-ln-translations-active] { @include translations-active-list; }
+
+// ─── Flag icon in input background ───────────────────────────────
+
+@mixin translations-flag-input {
+	// Intrinsic flag-icon decoration math — pad-left + bg-pos + bg-size
+	// composed against the icon's own dimensions, not shell rhythm.
+	padding-left: calc(var(--size-sm-up) + var(--size-md-up) + var(--size-sm-up));
+	background-repeat: no-repeat;
+	background-size: var(--size-md-up) auto;
+	background-position: var(--size-sm-up) calc(var(--size-sm) + (var(--size-lg) - var(--size-md-up) * 3 / 4) / 2);
+}
+
+// ─── Dropdown menu item: flag via ::before ───────────────────────
+
+@mixin translations-dropdown-flag {
+	@include flex;
+	@include items-center;
+	gap: var(--gap);
+
+	&::before {
+		content: '';
+		@include inline-block;
+		width: 1.25rem;
+		aspect-ratio: 4 / 3;
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: center;
+		flex-shrink: 0;
+	}
+}
+
+// ─── Header actions ──────────────────────────────────────────────
+
+@mixin translations-actions {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	margin-left: auto;
+}
+
+// ─── Active translations list ────────────────────────────────────
+
+@mixin translations-active-list {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+}
+
+// ─── Badge with flag ─────────────────────────────────────────────
+
+@mixin translations-badge {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	--padding-y: var(--size-2xs);
+	--padding-x: var(--size-xs);
+	padding: var(--padding-y) var(--padding-x);
+	@include text-xs;
+	@include font-semibold;
+	@include rounded-sm;
+	@include tinted-surface(0.08);
+	@include select-none;
+	margin: 0;
+	background-repeat: no-repeat;
+	background-position: var(--size-xs) center; // Intrinsic flag-icon position, not shell rhythm.
+	background-size: 1rem auto;
+	--padding-x: var(--size-lg);
+	padding-left: var(--padding-x);
+}
+
+// ─── Badge remove button ─────────────────────────────────────────
+
+@mixin translations-badge-remove {
+	background: none;
+	border: none;
+	@include cursor-pointer;
+	@include text-sm;
+	@include font-bold;
+	color: inherit;
+	--btn-padding-y: 0;
+	--btn-padding-x: 0;
+	line-height: 1;
+	@include transition-fast;
+
+	&:hover {
+		@include text-error;
+	}
+}
+
+// ─── Trigger button ──────────────────────────────────────────────
+
+@mixin translations-add-button {
+	@include inline-flex;
+	@include items-center;
+	@include justify-center;
+	@include size(1.5rem);
+	@include rounded-sm;
+	@include cursor-pointer;
+	@include transition-fast;
+	@include tinted-surface(0.08);
+	border: none;
+
+	&:hover {
+		@include tinted-surface(0.15);
+	}
+}

package/scss/config/mixins/_typography.scss

@@ -0,0 +1,57 @@
+@use 'sass:list';
+
+// Typography — references --text-* and --font-* tokens
+
+@mixin text-xs   { font-size: var(--text-xs);   line-height: 1rem; }
+@mixin text-sm   { font-size: var(--text-sm);   line-height: 1.25rem; }
+@mixin text-base { font-size: var(--text-base);  line-height: 1.5rem; }
+@mixin text-lg   { font-size: var(--text-lg);   line-height: 1.75rem; }
+@mixin text-xl   { font-size: var(--text-xl);   line-height: 1.75rem; }
+@mixin text-2xl  { font-size: var(--text-2xl);  line-height: 2rem; }
+
+@mixin font-normal    { font-weight: var(--font-normal); }
+@mixin font-medium    { font-weight: var(--font-medium); }
+@mixin font-semibold  { font-weight: var(--font-semibold); }
+@mixin font-bold      { font-weight: var(--font-bold); }
+
+@mixin text-left   { text-align: left; }
+@mixin text-center { text-align: center; }
+@mixin text-right  { text-align: right; }
+
+@mixin uppercase { text-transform: uppercase; }
+@mixin lowercase { text-transform: lowercase; }
+@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 truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+@mixin whitespace-nowrap { white-space: nowrap; }
+@mixin font-mono { font-family: var(--font-mono); }
+@mixin font-sans { font-family: var(--font-sans); }
+
+// Semantic role mixin — v1.1.
+// Usage: @include typography(display-lg) / typography(body-md) / etc.
+@mixin typography($role) {
+	$valid-roles: (display-lg, display-md, display-sm,
+	               heading-lg, heading-md, heading-sm,
+	               title-md, title-sm,
+	               body-lg, body-md, body-sm,
+	               label-md, label-sm, caption);
+
+	@if not list.index($valid-roles, $role) {
+		@error "typography(): unknown role '#{$role}'. Valid roles: #{$valid-roles}";
+	}
+
+	font-size:   var(--text-#{$role});
+	line-height: var(--lh-#{$role});
+}
+
+@mixin tracking-tight  { letter-spacing: var(--tracking-tight); }
+@mixin tracking-normal { letter-spacing: var(--tracking-normal); }

package/scss/config/mixins/_upload.scss

@@ -0,0 +1,168 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'position' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'motion' as *;
+@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%;
+}
+
+@mixin upload-zone {
+	--color-bg: var(--bg-sunken);
+	border: 2px dashed var(--color-border);
+	border-radius: var(--radius);
+	--padding-y: var(--size-lg);
+	--padding-x: var(--size-lg);
+	padding: var(--padding-y) var(--padding-x);
+	text-align: center;
+	@include cursor-pointer;
+	@include motion-safe {
+		transition: border-color var(--transition),
+		            background-color var(--transition);
+	}
+	background-color: var(--color-bg);
+
+	&:hover {
+		border-color: var(--color-accent);
+		background-color: var(--color-accent-tint);
+	}
+
+	span {
+		--color-fg: var(--fg-muted);
+		display: block;
+		color: var(--color-fg);
+		font-size: var(--text-sm);
+	}
+
+	small {
+		--color-fg: var(--fg-subtle);
+		display: block;
+		color: var(--color-fg);
+		font-size: var(--text-xs);
+		--margin-block: var(--size-xs);
+		margin-top: var(--margin-block);
+	}
+}
+
+@mixin upload-zone-dragover {
+	border-color: var(--color-accent);
+	background-color: var(--color-accent-tint-strong);
+	border-style: solid;
+}
+
+@mixin upload-list {
+	--margin-block: var(--size-sm);
+	margin-top: var(--margin-block);
+
+	&:empty {
+		display: none;
+	}
+}
+
+@mixin upload-item {
+	--color-bg: var(--bg-sunken);
+	@include relative;
+	@include flex;
+	@include items-center;
+	flex-wrap: wrap;
+	--padding-y: var(--size-sm);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	background-color: var(--color-bg);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-sm);
+	--margin-block: var(--size-sm);
+	margin-bottom: var(--margin-block);
+	font-size: var(--text-sm);
+	@include overflow-hidden;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	> svg.ln-icon {
+		--margin-inline: var(--size-sm);
+		margin-right: var(--margin-inline);
+		flex-shrink: 0;
+	}
+
+	> .ln-upload__remove {
+		--btn-padding-y: var(--size-2xs);
+		--btn-padding-x: var(--size-2xs);
+		--margin-inline: var(--size-sm);
+		margin-left: var(--margin-inline);
+	}
+}
+
+@mixin upload-name {
+	flex: 1;
+	@include truncate;
+	color: var(--color-fg);
+}
+
+@mixin upload-size {
+	--color-fg: var(--fg-subtle);
+	color: var(--color-fg);
+	font-size: var(--text-xs);
+	--margin-inline: var(--size-md);
+	margin-left: var(--margin-inline);
+	flex-shrink: 0;
+}
+
+@mixin upload-progress {
+	@include absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background-color: var(--color-border);
+}
+
+@mixin upload-progress-bar {
+	height: 100%;
+	width: 0;
+	background-color: var(--color-accent);
+	@include motion-safe {
+		transition: width 0.15s ease-out;
+	}
+}
+
+@mixin upload-item-error {
+	border-color: hsl(var(--color-error));
+	background-color: hsl(var(--color-error) / 0.1);
+
+	.ln-upload__progress-bar {
+		background-color: hsl(var(--color-error));
+	}
+}
+
+@mixin upload-item-deleting-spinner {
+	content: '';
+	box-sizing: border-box;
+	display: inline-block;
+	width: 1.25rem;
+	height: 1.25rem;
+	--margin-inline: var(--size-sm);
+	margin-right: var(--margin-inline);
+	border: 2px solid var(--color-border);
+	border-radius: 50%;
+	border-top-color: var(--color-accent);
+	background-image: none !important;
+	@include motion-safe {
+		animation: ln-upload-spin 0.6s linear infinite;
+	}
+	flex-shrink: 0;
+}

package/scss/ln-ashlar.scss

@@ -0,0 +1,62 @@
+@use 'config/tokens';
+@use 'config/breakpoints';
+@use 'config/density';
+@use 'config/theme';
+@use 'config/icons';
+
+@use 'base/reset';
+@use 'base/global';
+@use 'base/typography';
+
+@use 'components/button';
+@use 'components/form';
+@use 'components/layout';
+@use 'components/table';
+@use 'components/tabs';
+@use 'components/toggle';
+@use 'components/accordion';
+@use 'components/card';
+@use 'components/sections';
+@use 'components/nav';
+@use 'components/sidebar';
+@use 'components/app-shell';
+@use 'components/breadcrumbs';
+@use 'components/avatar';
+@use 'components/status-badge';
+@use 'components/alert';
+@use 'components/empty-state';
+@use 'components/page-header';
+@use 'components/stepper';
+@use 'components/timeline';
+@use 'components/stat-card';
+@use 'components/prose';
+@use 'components/scrollbar';
+@use 'components/tooltip';
+@use 'components/popover';
+@use 'components/chip';
+@use 'components/loader';
+@use 'components/progress';
+@use 'components/link';
+@use 'components/confirm';
+@use 'components/circular-progress';
+@use 'components/modal';
+@use 'components/dropdown';
+@use 'components/toast';
+@use 'components/upload';
+@use 'components/translations';
+@use 'components/data-table';
+@use 'components/ln-table';
+@use 'components/ajax';
+
+@use 'utilities/utilities';
+@use 'utilities/animations';
+
+// JS component co-located styles
+@use '../js/ln-modal/ln-modal';
+@use '../js/ln-dropdown/ln-dropdown';
+@use '../js/ln-tooltip/ln-tooltip';
+@use '../js/ln-upload/ln-upload';
+@use '../js/ln-filter/ln-filter';
+@use '../js/ln-search/ln-search';
+@use '../js/ln-table/ln-table' as ln-table-state;
+@use '../js/ln-data-table/ln-data-table';