@livenetworks/ashlar 2.1.13 → 2.2.1

package/theme/config/mixins/_translations.scss

@@ -1,124 +1,126 @@
-@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);
-	}
-}
+@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-inline-start: 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) center;
+}
+
+// ─── Dropdown menu item: flag via ::before ───────────────────────
+
+@mixin translations-dropdown-flag {
+	@include flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	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-inline-start: 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-block: var(--padding-y);
+	padding-inline: 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-inline-start: 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/theme/designs/relaxed/_card.scss

@@ -0,0 +1,12 @@
+@use '../../config/mixins' as *;
+
+// Same bindings as components/_card.scss, except .section-card renders a
+// transparent titled group on the canvas (header = title row, no frame).
+.card {
+	@include card;
+	@include card-field-list;
+}
+
+.section-card {
+	@include section-card($group: true);
+}

package/theme/designs/relaxed/_layout.scss

@@ -0,0 +1,24 @@
+@use '../../config/mixins' as *;
+
+// Relaxed groupings — grid/flex layouts bound on markup the demo already
+// uses. Composition only: no tokens are declared here.
+
+// Cards placed directly in a section's body flow into an auto-fit grid.
+.section-card > main:has(> .card) {
+	@include grid-auto;
+}
+
+// Stat-card lists flow as a wrapping row; the cards drop their elevation.
+ul:has(> li > [data-ln-stat-card]) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--size-lg);
+
+	> li {
+		flex: 1 1 var(--grid-item-min-width);
+	}
+
+	[data-ln-stat-card] {
+		--shadow: none;
+	}
+}

package/theme/ln-ashlar-core.scss

@@ -10,6 +10,7 @@
 @use '../components/ln-confirm/ln-confirm';
 @use '../components/ln-dropdown/ln-dropdown';
 @use '../components/ln-editor/ln-editor';
+@use '../components/ln-external-links/ln-external-links';
 @use '../components/ln-filter/ln-filter';
 @use '../components/ln-list/ln-list';
 @use '../components/ln-modal/ln-modal';

package/theme/ln-ashlar-dev.scss

@@ -31,7 +31,6 @@
 @use '../components/ln-options/ln-options-dev';
 @use '../components/ln-picklist/ln-picklist-dev';
 @use '../components/ln-popover/ln-popover-dev';
-@use '../components/ln-progress/ln-progress-dev';
 @use '../components/ln-router/ln-router-dev';
 @use '../components/ln-search/ln-search-dev';
 @use '../components/ln-slug/ln-slug-dev';

package/theme/ln-ashlar-relaxed.scss

@@ -0,0 +1,67 @@
+// ==========================================================================
+// ln-ashlar relaxed design — mirrors ln-ashlar-theme.scss and adds the
+// designs/relaxed/* bindings after it. Same palette and tokens: a design
+// declares no tokens, only composition.
+// ==========================================================================
+
+@use 'ln-ashlar-core';
+
+@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/date';
+@use 'components/layout';
+@use 'components/table';
+@use 'components/sort';
+@use 'components/sortable';
+@use 'components/tabs';
+@use 'components/toggle';
+@use 'components/accordion';
+@use 'designs/relaxed/card';
+@use 'components/sections';
+@use 'designs/relaxed/layout' as relaxed-layout;
+@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/editor';
+@use 'components/scrollbar';
+@use 'components/tooltip';
+@use 'components/popover';
+@use 'components/filter';
+@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/picklist';
+@use 'components/translations';
+@use 'components/ln-table';
+@use 'components/chart';
+@use 'components/ajax';
+
+@use 'utilities/utilities';
+@use 'utilities/animations';