@livenetworks/ashlar 1.5.1 → 1.6.0

package/scss/components/_table.scss

@@ -14,32 +14,30 @@ table {
 
 	@container table (max-width: 640px) {
 		table { @include table-responsive; }
+
+		.table-row-actions {
+			position: static !important;
+			opacity: 1 !important;
+			visibility: visible !important;
+			pointer-events: auto !important;
+			transform: none !important;
+			background: transparent !important;
+			padding-left: 0 !important;
+			justify-content: flex-end;
+			margin-top: var(--size-xs);
+
+			&::before {
+				display: none !important;
+			}
+		}
 	}
 }
 
-// ─── Shared Column Sort & Filter Buttons ────────────────────────
+// ─── Shared Column Filter Button ─────────────────────────────────
 // CSS targets the unprefixed structural helper class on the button, NOT the data-ln-* JS
-// hook. .table-sort / .table-filter are thin bindings that mirror the mixins; a consumer
-// may instead @include table-sort / table-filter on their own selector (the class is a
-// convenience, not a mandate — see "Naming & class architecture"). Behavior hooks
-// (data-ln-col-sort / data-ln-table-sort / data-ln-popover-for / data-ln-col-filter) are
-// the per-system functional layer and intentionally differ.
-
-.table-sort { @include table-sort; }
-th:hover .table-sort { opacity: 0.7; }
-
-// Active sort — JS-state class on the <th>, set by sort JS (client) or server.
-.ln-sort-asc .table-sort,
-.ln-sort-desc .table-sort { @include table-sort-active; }
-
-.ln-sort-asc .table-sort {
-	[data-ln-sort-icon="none"] { display: none; }
-	[data-ln-sort-icon="asc"]  { display: inline-block; }
-}
-.ln-sort-desc .table-sort {
-	[data-ln-sort-icon="none"] { display: none; }
-	[data-ln-sort-icon="desc"] { display: inline-block; }
-}
+// hook. .table-filter is a thin binding that mirrors the mixin; a consumer may instead
+// @include table-filter on their own selector (the class is a convenience, not a mandate).
+// Sort lives in scss/components/_sort.scss — see [data-ln-sort].
 
 .table-filter { @include table-filter; }
 th:hover .table-filter { opacity: 0.7; }
@@ -67,7 +65,22 @@ th:hover .table-filter { opacity: 0.7; }
 }
 
 // Virtual-scroll spacer
-.ln-data-table__spacer {
+.ln-table__spacer {
 	@include table-spacer-row;
 }
 
+// ─── Table Row Actions ──────────────────────────────────────────
+td:has(.table-row-actions) {
+	position: relative;
+}
+
+.table-row-actions {
+	@include table-row-actions;
+}
+
+tr:hover .table-row-actions {
+	opacity: 1;
+	pointer-events: auto;
+	visibility: visible;
+}
+

package/scss/components/_toast.scss

@@ -1,41 +1,68 @@
-@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;
-}
+@use '../config/mixins' as *;
+
+[data-ln-toast] {
+	@include toast-container;
+}
+
+// The <li> IS the card: structural (item) + visual (card) styling both bind
+// here, contextually — the <li> carries no static class (no-BEM), only the
+// filled/authored type class.
+[data-ln-toast] > li {
+	@include toast-item;
+	@include toast-card;
+}
+
+[data-ln-toast] > li.ln-enter {
+	@include toast-item-enter;
+}
+
+[data-ln-toast] > li.ln-out {
+	@include toast-item-out;
+}
+
+// Type → tone. The status→tone map lives here (one place): warn maps to the
+// warning family. SSR authors the class; the dynamic path fills it verbatim.
+[data-ln-toast] > li.success { @include semantic-color(success); }
+[data-ln-toast] > li.error   { @include semantic-color(error); }
+[data-ln-toast] > li.warn    { @include semantic-color(warning); }
+[data-ln-toast] > li.info    { @include semantic-color(info); }
+
+[data-ln-toast] .icon {
+	@include toast-icon;
+}
+
+[data-ln-toast] .icon ul {
+	@include toast-icon-list;
+}
+
+// When-toggle — dynamic template ships all 4 icon variants; CSS shows the
+// one matching the card's type class. Unknown/absent type → no matching
+// class → no icon (documented degradation, see js/ln-toast/README.md).
+[data-ln-toast] > li.success .icon li[data-ln-toast-when="success"],
+[data-ln-toast] > li.error .icon li[data-ln-toast-when="error"],
+[data-ln-toast] > li.warn .icon li[data-ln-toast-when="warn"],
+[data-ln-toast] > li.info .icon li[data-ln-toast-when="info"] {
+	@include block;
+}
+
+[data-ln-toast] .content {
+	@include toast-content;
+}
+
+[data-ln-toast] .title {
+	@include toast-title;
+}
+
+// No default titles are ever filled by JS — an empty title collapses.
+[data-ln-toast] .title:empty {
+	@include hidden;
+}
+
+[data-ln-toast] .body {
+	@include toast-body;
+}
+
+// No hasBody flag — an unfilled body collapses via :empty.
+[data-ln-toast] .body:empty {
+	@include hidden;
+}

package/scss/components/_toggle.scss

@@ -35,6 +35,22 @@
 	}
 }
 
+// Default internal spacing for EVERY collapsible panel — plain toggle and
+// accordion alike — so no consumer has to re-solve it.
+//
+// Spacing lives on the body's CHILDREN, never on .collapsible-body itself:
+// that element is the overflow:hidden grid-track child, so any padding/border
+// on it feeds its automatic min-height and stops the panel collapsing to 0px
+// (a sliver of the first line leaks through when "closed"). Padding the
+// children — and zeroing their margins — keeps .collapsible-body's own min
+// at 0. Rebind --padding-x / --padding-y on the body to retune per context.
+.collapsible-body > * {
+	--padding-y: var(--size-sm-up);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	margin: 0;
+}
+
 // ──────────────────────────────────────────────────────────────────────
 // Chevron — generic toggle behavior
 // ──────────────────────────────────────────────────────────────────────

package/scss/config/_density.scss

@@ -1,117 +1,205 @@
-// ==========================================================================
-// Density — ln-ashlar v1.2
-// ==========================================================================
-// Global spacing compression toggle. Flip one class, the entire UI
-// tightens. Tables show more rows, forms pack denser, cards shrink
-// padding, headings scale down. Same components, same markup, same
-// selectors — the `.density-compact` class re-tunes base design tokens
-// (spacing, typography) and every consumer reacts via the cascade.
-//
-// This file contains NO parallel `--density-*` token scale. Density
-// is an override of base tokens at a region root, exactly like theme
-// colors. Read `docs/css/density.md` for the full spec and rationale.
-//
-// Activation:
-//   <html class="density-compact">       ← global
-//   <main class="density-compact">       ← scoped to a region
-//
-// Density is an explicit user choice (consumer's settings toggle).
-// It is NEVER auto-switched by viewport — viewport breakpoints handle
-// layout, density handles information density inside that layout.
-//
-// What reacts: everything that reads `--size-*`, `--text-body-*`,
-// `--text-label-*`, `--text-title-*`, `--text-heading-*`,
-// `--text-display-sm`, or `--density-row-h`. That is the majority of
-// the library (tables, forms, cards, stat-card, nav, breadcrumbs,
-// alerts, banners, tabs, prose, headings, page content).
-//
-// What does NOT react: buttons and pill-controls — their padding and
-// font are hardcoded rem/raw-scale values in `_btn.scss`, `_form.scss`
-// (pill), and `_global.scss` (native <button>). This is deliberate —
-// WCAG 2.5.5 hit-target size floor (~44px) must not be shrunk by a
-// visual density toggle.
-// ==========================================================================
-
-:root {
-
-	// -----------------------------------------------------------------------
-	// Density — Row height
-	// Minimum row height for table rows. Padding alone determines visual
-	// height in comfortable mode; compact uses this as a min-height floor
-	// so rows stay scannable when content is short. Kept density-named
-	// because it has no analogue in the base token scale.
-	// -----------------------------------------------------------------------
-	--density-row-h:    2.75rem;  // 44px — comfortable input/row min
-}
-
-// ---------------------------------------------------------------------------
-// Compact override
-// Activated by the `.density-compact` class. Re-tunes base spacing and
-// typography tokens to tighter values. The cascade does the rest — every
-// component referencing these tokens shrinks automatically.
-//
-// Anti-pattern this avoids: writing
-//   .density-compact table td { padding: ...; }
-// for every component. That explodes specificity and duplicates
-// rules. The token-override route keeps the compact surface to one
-// place — this block.
-// ---------------------------------------------------------------------------
-.density-compact {
-
-	// -- Spacing — structural compression ---------------------------------
-	--padding-y:    var(--size-xs-up);  // 4px (compact) — was 12px (normal)
-	--size-xs:      0.125rem;   // 2px
-	--size-xs-up:   0.25rem;    // 4px
-	--size-sm:      0.375rem;   // 6px
-	--size-sm-up:   0.5rem;     // 8px
-	--size-md:      0.625rem;   // 10px
-	--size-md-up:   0.8125rem;  // 13px
-	--size-lg:      1rem;       // 16px
-
-	// -- Body text --------------------------------------------------------
-	--text-body-md: 0.875rem;
-	--lh-body-md:   1.5;
-
-	--text-body-sm: 0.8125rem;
-	--lh-body-sm:   1.45;
-
-	// Explicit rebind — `--font-size` is defined at `:root` as
-	// `var(--text-body-md)`. Lazy resolution SHOULD cascade, but
-	// form inputs (font-size: var(--font-size)) don't shrink in
-	// practice. Explicit rebind here forces the compact value to
-	// reach every consumer of --font-size.
-	--font-size:    var(--text-body-md);
-	--line-height:  var(--lh-body-md);
-
-	// -- Labels -----------------------------------------------------------
-	--text-label-md: 0.8125rem;
-	--lh-label-md:   1.4;
-
-	--text-label-sm: 0.6875rem;
-	--lh-label-sm:   1.4;
-
-	// -- Titles -----------------------------------------------------------
-	--text-title-md: 1rem;
-	--lh-title-md:   1.3;
-
-	--text-title-sm: 0.875rem;
-	--lh-title-sm:   1.3;
-
-	// -- Headings — user opted in; see docs/css/density.md §stat-card ----
-	// heading-lg is the stat-card value. Intentionally a GENTLE reduction
-	// (1.875rem → 1.75rem, only 0.125rem) so the "big number" stays
-	// visually dominant — 2x body text, 0.5rem above heading-md.
-	// See plan D1 for the hierarchy math and rejected alternatives.
-	--text-heading-sm: 1.125rem;  --lh-heading-sm: 1.25;
-	--text-heading-md: 1.25rem;   --lh-heading-md: 1.2;
-	--text-heading-lg: 1.75rem;   --lh-heading-lg: 1.15;
-
-	// -- Display ---------------------------------------------------------
-	// Only display-sm shrinks — that's what page h1 uses. lg/md kept
-	// at their comfortable values because they're marketing-page scale
-	// that shouldn't appear in dense data contexts anyway.
-	--text-display-sm: 1.875rem;  --lh-display-sm: 1.1;
-
-	// -- Row height — density-specific (no base-token analogue) ---------
-	--density-row-h:    2.25rem;
-}
+// ==========================================================================
+// Density — ln-ashlar v2.0
+// ==========================================================================
+// Inverted density system. The :root default is DENSE (DocuFlow scale:
+// 14px body, 52px header, 232px sidebar). Density goes UP via the
+// [data-density] attribute, mirroring how [data-theme] works.
+//
+// Activation:
+//   <html>                              ← default: dense (DocuFlow look)
+//   <html data-density="compact">       ← explicit dense handle (same as base)
+//   <html data-density="comfortable">   ← pre-v2 default (16px / roomier)
+//   <html data-density="spacious">      ← large type, generous padding
+//   <main data-density="compact">       ← scope dense within comfortable page
+//
+// Density is an explicit user choice (settings toggle).
+// It is NEVER auto-switched by viewport — viewport breakpoints handle
+// layout, density handles information density inside that layout.
+//
+// What reacts: everything reading --padding-y, --gap, --text-body-*,
+// --text-label-*, --text-title-*, --text-heading-*, --text-display-sm,
+// --lh-*, --app-header-height, --app-sidebar-width, --density-row-h,
+// --btn-padding-y, --input-padding-y.
+//
+// Interactive controls (buttons, inputs, pills): density-reactive UPWARD.
+// Base (~38px) = WCAG AA. Comfortable (≥46px) and Spacious (≥54px) = AAA.
+// Controls rebind --btn-padding-y and --input-padding-y in up-tier scopes.
+// See docs/css/density.md §wcag for the height math.
+//
+// No parallel --density-* token scale. Density overrides existing base
+// tokens at the scope root, exactly like theme color overrides.
+// ==========================================================================
+
+:root {
+
+	// -----------------------------------------------------------------------
+	// Density — Row height
+	// Minimum row height for table rows and data lists. Kept density-named
+	// because it has no analogue in the base token scale.
+	// -----------------------------------------------------------------------
+	--density-row-h:    2.25rem;  // 36px — dense base
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="compact"] — explicit handle for the dense base.
+//
+// Identical to :root. Exists so:
+//   (a) a switcher can write a single attribute across all tiers including
+//       returning to base (rather than removing the attribute)
+//   (b) a region inside a comfortable page can be scoped dense:
+//       <table data-density="compact">
+//
+// Rebinds --density-row-h so a compact-scoped region keeps the dense row
+// floor inside a comfortable/spacious page. NOTE: only row-h is restored —
+// full dense region-scoping (type, padding) would re-declare the base
+// surface; deferred. The global switcher returns to base via :root (dense).
+// ---------------------------------------------------------------------------
+[data-density="compact"] {
+	--density-row-h:    2.25rem;  // 36px — restore dense base in scoped context
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="comfortable"] — pre-v2 default, now an explicit opt-in.
+//
+// Restores the roomy 16px / lh 1.6 scale that was the :root default before
+// design-v2. WCAG 2.5.5 AAA: buttons 46px, inputs/pills ≥44px.
+//
+// <html data-density="comfortable">   ← global comfortable
+// <aside data-density="comfortable">  ← scoped comfortable sidebar
+// ---------------------------------------------------------------------------
+[data-density="comfortable"] {
+
+	// -- Logical rhythm --------------------------------------------------
+	--padding-y:          var(--size-sm);       // 8px (was dense 6px)
+	--gap:                var(--size-sm);       // 8px (was dense 6px)
+
+	// -- Body text (restore 16px / 1.6 scale) ----------------------------
+	--text-body-md:       1rem;
+	--lh-body-md:         1.6;
+
+	--text-body-sm:       0.875rem;
+	--lh-body-sm:         1.5;
+
+	// Explicit rebind — form inputs consume --font-size and don't always
+	// cascade lazy var(--text-body-md) resolutions under a scope.
+	--font-size:          var(--text-body-md);
+	--line-height:        var(--lh-body-md);
+
+	// -- Labels ----------------------------------------------------------
+	--text-label-md:      0.875rem;
+	--lh-label-md:        1.4;
+
+	--text-label-sm:      0.8125rem;   // 13px (was dense 12px) — form-label, table th
+	--lh-label-sm:        1.4;
+
+	// -- Caption ---------------------------------------------------------
+	--text-caption:       0.8125rem;   // 13px — modal subtitle, validation errors
+	--lh-caption:         1.4;
+
+	// -- Titles ----------------------------------------------------------
+	--text-title-md:      1.125rem;
+	--lh-title-md:        1.4;
+
+	--text-title-sm:      1rem;
+	--lh-title-sm:        1.4;
+
+	// -- Headings --------------------------------------------------------
+	--text-heading-sm:    1.25rem;   --lh-heading-sm:  1.3;
+	--text-heading-md:    1.5rem;    --lh-heading-md:  1.25;
+	--text-heading-lg:    1.875rem;  --lh-heading-lg:  1.2;
+
+	// -- Display ---------------------------------------------------------
+	--text-display-sm:    2.25rem;   --lh-display-sm:  1.15;
+
+	// -- App shell -------------------------------------------------------
+	--app-header-height:  3.5rem;    // 56px (was dense 3.25rem)
+	--app-sidebar-width:  16rem;     // 256px (was dense 14.5rem)
+
+	// -- Row height ------------------------------------------------------
+	--density-row-h:      2.75rem;   // 44px (was dense 2.25rem)
+
+	// -- Interactive controls — WCAG 2.5.5 AAA ≥44px --------------------
+	// btn-padding-y: 2×12px + 20px line-height + 2px borders = 46px
+	// input-padding-y: indirection token read by form-input + pill-outline
+	--btn-padding-y:      var(--size-sm-up);    // 12px → buttons 46px
+	--btn-padding-x:      var(--size-md);       // 16px — restore roomy width
+	--input-padding-y:    var(--size-sm-up);    // 12px → inputs/pills ≥44px
+
+	// -- Card and table padding — roomier at comfortable/spacious --------
+	--card-padding-y:        var(--size-md);       // 16px
+	--card-padding-x:        var(--size-lg);       // 24px
+	--table-cell-padding-y:  var(--size-sm-up);    // 12px
+	--table-cell-padding-x:  var(--size-lg);       // 24px
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="spacious"] — NEW tier above comfortable.
+//
+// For low-vision, touch-primary, or presentation contexts.
+// Body 18px, generous padding, larger shell. WCAG 2.5.5 AAA:
+// buttons 54px, inputs/pills ≥48px.
+//
+// <html data-density="spacious">
+// ---------------------------------------------------------------------------
+[data-density="spacious"] {
+
+	// -- Logical rhythm --------------------------------------------------
+	--padding-y:          var(--size-md);       // 16px
+	--gap:                var(--size-md);       // 16px
+
+	// -- Body text -------------------------------------------------------
+	--text-body-md:       1.125rem;             // 18px
+	--lh-body-md:         1.75;
+
+	--text-body-sm:       1rem;
+	--lh-body-sm:         1.6;
+
+	--font-size:          var(--text-body-md);
+	--line-height:        var(--lh-body-md);
+
+	// -- Labels ----------------------------------------------------------
+	--text-label-md:      1rem;
+	--lh-label-md:        1.5;
+
+	--text-label-sm:      0.9375rem;   // 15px (was dense 12px) — form-label, table th
+	--lh-label-sm:        1.45;
+
+	// -- Caption ---------------------------------------------------------
+	--text-caption:       0.9375rem;   // 15px — modal subtitle, validation errors
+	--lh-caption:         1.45;
+
+	// -- Titles ----------------------------------------------------------
+	--text-title-md:      1.25rem;
+	--lh-title-md:        1.5;
+
+	--text-title-sm:      1.125rem;
+	--lh-title-sm:        1.45;
+
+	// -- Headings --------------------------------------------------------
+	--text-heading-sm:    1.5rem;    --lh-heading-sm:  1.35;
+	--text-heading-md:    1.875rem;  --lh-heading-md:  1.3;
+	--text-heading-lg:    2.25rem;   --lh-heading-lg:  1.25;
+
+	// -- Display ---------------------------------------------------------
+	--text-display-sm:    2.75rem;   --lh-display-sm:  1.2;
+
+	// -- App shell -------------------------------------------------------
+	--app-header-height:  4rem;      // 64px
+	--app-sidebar-width:  17.5rem;   // 280px
+
+	// -- Row height ------------------------------------------------------
+	--density-row-h:      3rem;      // 48px
+
+	// -- Interactive controls — WCAG 2.5.5 AAA ≥48px --------------------
+	// btn-padding-y: 2×16px + 20px line-height + 2px borders = 54px
+	// input-padding-y: indirection token read by form-input + pill-outline
+	--btn-padding-y:      var(--size-md);       // 16px → buttons 54px
+	--btn-padding-x:      var(--size-lg);       // 24px — spacious width
+	--input-padding-y:    var(--size-md);       // 16px → inputs/pills ≥48px
+
+	// -- Card and table padding ------------------------------------------
+	--card-padding-y:        var(--size-lg);       // 24px
+	--card-padding-x:        var(--size-xl);       // 32px
+	--table-cell-padding-y:  var(--size-md);       // 16px
+	--table-cell-padding-x:  var(--size-xl);       // 32px
+}

package/scss/config/_icons.scss

@@ -1,14 +1,14 @@
 // ==========================================================================
 // Icons — SVG sprite system
 // ==========================================================================
-// Icons are rendered via an SVG sprite injected by ln-icons.js.
+// Icons are rendered via an SVG sprite injected by ln-icon.js.
 // Color is inherited from the parent's `color` property (currentColor).
 //
 // Usage:
-//   <svg class="ln-icon" aria-hidden="true"><use href="#ln-home"></use></svg>
-//   <svg class="ln-icon ln-icon--sm" aria-hidden="true"><use href="#ln-close"></use></svg>
+//   <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-home"></use></svg>
+//   <svg class="ln-icon ln-icon--sm" aria-hidden="true"><use href="#ln-icon-close"></use></svg>
 //
-// Available IDs: #ln-{name} where name = filename in js/ln-icons/icons/
+// Available IDs: #ln-{name} where name = filename in js/ln-icon/icons/
 //   home, close, menu, users, settings, logout, books, lodges
 //   plus, edit, delete, view, save, search, check, copy, link
 //   upload, download, refresh, print, lock, star, filter, calendar
@@ -24,14 +24,15 @@
 
 svg.ln-icon {
 	display: inline-block;
-	width: 1.25rem;
-	height: 1.25rem;
+	--icon-size: 1.25rem;   // intrinsic icon dimension (component primitive — rebind to resize)
+	width: var(--icon-size);
+	height: var(--icon-size);
 	flex-shrink: 0;
 	vertical-align: middle;
 	// fill/stroke are set per icon via the SVG source
 	// currentColor is applied directly in each <symbol>
 }
 
-svg.ln-icon.ln-icon--sm { width: 1rem;  height: 1rem; }
-svg.ln-icon.ln-icon--lg { width: 1.5rem; height: 1.5rem; }
-svg.ln-icon.ln-icon--xl { width: 4rem;  height: 4rem; }
+svg.ln-icon.ln-icon--sm { --icon-size: 1rem; }
+svg.ln-icon.ln-icon--lg { --icon-size: 1.5rem; }
+svg.ln-icon.ln-icon--xl { --icon-size: 4rem; }