@livenetworks/ashlar 1.3.2

package/scss/components/_toggle.scss

@@ -0,0 +1,81 @@
+@use '../config/mixins' as *;
+
+// ==========================================================================
+// Toggle — collapse/expand CSS
+// ==========================================================================
+// data-ln-toggle = JS (adds .open class)
+// .collapsible   = CSS (grid collapse animation)
+//
+// The parent (.collapsible) NEVER has padding — it collapses to 0.
+// Padding/margins go on the child element (.collapsible-body).
+//
+// HTML structure:
+//   <main data-ln-toggle class="collapsible">
+//       <section class="collapsible-body">
+//           <p>...</p>     ← content with padding, margins etc.
+//       </section>
+//   </main>
+//
+// Or via @include in project SCSS:
+//   .my-panel          { @include collapsible; }
+//   .my-panel > .inner { @include collapsible-content; }
+// ==========================================================================
+
+// .collapsible parent is always a zero-padding grid container — that
+// contract comes from @include collapsible. The child (.collapsible-body
+// or anything else @include collapsible-content lands on) owns padding
+// and margins. Do NOT re-bind `.collapsible` on a selector that forces a
+// different display or non-zero padding — it will break the
+// grid-template-rows animation.
+.collapsible {
+	@include collapsible;
+
+	> * {
+		@include collapsible-content;
+	}
+}
+
+// ──────────────────────────────────────────────────────────────────────
+// Chevron — generic toggle behavior
+// ──────────────────────────────────────────────────────────────────────
+// .ln-chevron is the icon-class convention for "this is a chevron-style
+// indicator inside a toggle trigger". The rotation is driven by
+// aria-expanded (set by ln-toggle.js on every [data-ln-toggle-for]
+// when its target panel opens/closes). Works for accordion items and
+// standalone toggles alike — no DOM-proximity dependency.
+
+[data-ln-toggle-for] .ln-chevron {
+	@include flex-shrink-0;
+	@include motion-safe {
+		transition: transform var(--transition);
+	}
+}
+
+[data-ln-toggle-for][aria-expanded="true"] .ln-chevron {
+	transform: rotate(180deg);
+}
+
+// ──────────────────────────────────────────────────────────────────────
+// Icon-only trigger button — strip default button chrome
+// ──────────────────────────────────────────────────────────────────────
+// When the trigger is <button data-ln-toggle-for> with a single .ln-icon
+// child, it should read as a subtle affordance, not a chunky action
+// button. Hover gets a soft bg lift to confirm clickability.
+//
+// Text triggers (<button data-ln-toggle-for>Options</button>) and
+// triggers with class="btn" keep full button chrome — the
+// :has(> .ln-icon:only-child) predicate excludes them.
+// <header data-ln-toggle-for> in accordion is unaffected — element
+// match is `button` only.
+//
+// Per CLAUDE.md "Variant rebinds the surface, doesn't redeclare":
+// this rebinds --btn-* tokens; the @mixin button-base body still
+// owns background/border-color declarations and hover/active blocks.
+
+button[data-ln-toggle-for]:has(> .ln-icon:only-child) {
+	--btn-bg:           transparent;
+	--btn-border:       transparent;
+	--btn-bg-hover:     var(--bg-sunken);
+	--btn-border-hover: transparent;
+	--btn-fg-hover:     var(--color-fg);
+}

package/scss/components/_tooltip.scss

@@ -0,0 +1,18 @@
+@use '../config/mixins' as *;
+
+[data-ln-tooltip] {
+	@include tooltip;
+}
+
+#ln-tooltip-portal {
+	@include tooltip-portal;
+}
+
+.ln-tooltip {
+	@include tooltip-element;
+}
+
+@keyframes ln-tooltip-fade {
+	from { opacity: 0; transform: translateY(2px); }
+	to   { opacity: 1; transform: translateY(0); }
+}

package/scss/components/_translations.scss

@@ -0,0 +1,111 @@
+@use '../config/mixins' as *;
+
+[data-ln-translatable-lang] {
+	@include translations-flag-input;
+}
+
+[data-ln-toggle] button[data-ln-translations-lang] {
+	@include translations-dropdown-flag;
+}
+
+// ─── Flag icons per language ─────────────────────────────────────
+// Lang code (ISO 639-1) -> country flag (ISO 3166-1 alpha-2).
+
+$lang-flag-overrides: (
+	en: 'gb',
+	sq: 'al',
+	sr: 'rs',
+	ja: 'jp',
+	ko: 'kr',
+	zh: 'cn',
+	cs: 'cz',
+	da: 'dk',
+	el: 'gr',
+	he: 'il',
+	hi: 'in',
+	uk: 'ua',
+	vi: 'vn',
+	sv: 'se',
+	nb: 'no',
+	nn: 'no',
+	ca: 'es',
+	eu: 'es',
+	gl: 'es',
+	fa: 'ir',
+	ar: 'sa',
+	ms: 'my',
+	sl: 'si',
+	et: 'ee',
+	ka: 'ge',
+	hy: 'am',
+	be: 'by',
+	bs: 'ba',
+	hr: 'hr',
+	ga: 'ie',
+	cy: 'gb',
+	sw: 'ke',
+	bn: 'bd',
+	ur: 'pk',
+	ta: 'lk',
+	te: 'in',
+	ml: 'in',
+	kn: 'in',
+	mr: 'in',
+	gu: 'in',
+	pa: 'in',
+	ne: 'np',
+	km: 'kh',
+	lo: 'la',
+	my: 'mm',
+	af: 'za',
+	zu: 'za',
+);
+
+$lang-auto: mk, de, fr, it, bg, pt, ro, nl, pl, fi, hu, lt, lv, tr, az, is, mt, lb, no, ru, th, id;
+
+@each $lang, $country in $lang-flag-overrides {
+	[data-ln-translatable-lang="#{$lang}"],
+	[data-ln-translations-active] [data-ln-translations-lang="#{$lang}"],
+	[data-ln-toggle] button[data-ln-translations-lang="#{$lang}"]::before {
+		background-image: url('/assets/flags/#{$country}.svg');
+	}
+}
+
+@each $lang in $lang-auto {
+	[data-ln-translatable-lang="#{$lang}"],
+	[data-ln-translations-active] [data-ln-translations-lang="#{$lang}"],
+	[data-ln-toggle] button[data-ln-translations-lang="#{$lang}"]::before {
+		background-image: url('/assets/flags/#{$lang}.svg');
+	}
+}
+
+// ─── Header actions ──────────────────────────────────────────────
+
+.ln-translations__actions {
+	@include translations-actions;
+}
+
+[data-ln-translations-active] {
+	@include translations-active-list;
+}
+
+[data-ln-translations-active] p {
+	@include translations-badge;
+}
+
+[data-ln-translations-active] button {
+	@include translations-badge-remove;
+}
+
+[data-ln-translations-add] {
+	@include translations-add-button;
+}
+
+// ─── Reduced motion ─────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+	[data-ln-translations-add],
+	[data-ln-translations-active] button {
+		transition: none;
+	}
+}

package/scss/components/_upload.scss

@@ -0,0 +1,51 @@
+@use '../config/mixins' as *;
+
+.ln-upload {
+	@include upload;
+}
+
+.ln-upload__zone {
+	@include upload-zone;
+}
+
+.ln-upload__zone--dragover {
+	@include upload-zone-dragover;
+}
+
+.ln-upload__list {
+	@include upload-list;
+}
+
+.ln-upload__item {
+	@include upload-item;
+}
+
+.ln-upload__name {
+	@include upload-name;
+}
+
+.ln-upload__size {
+	@include upload-size;
+}
+
+.ln-upload__progress {
+	@include upload-progress;
+}
+
+.ln-upload__progress-bar {
+	@include upload-progress-bar;
+}
+
+.ln-upload__item--error {
+	@include upload-item-error;
+}
+
+.ln-upload__item--deleting::before {
+	@include upload-item-deleting-spinner;
+}
+
+@keyframes ln-upload-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}

package/scss/config/_breakpoints.scss

@@ -0,0 +1,72 @@
+@use 'sass:map';
+
+// ==========================================================================
+// Breakpoints — ln-ashlar
+// ==========================================================================
+// App-shell media breakpoints:
+//   @use 'config/breakpoints' as *;
+//   @media (min-width: $bp-md) { ... }
+//
+// Container-query breakpoints:
+//   @use 'config/breakpoints' as *;
+//   @container foldersgrid (min-width: $cq-medium) { ... }
+//
+// CSS custom properties are also exposed at :root so JS can read via
+// getComputedStyle(document.documentElement).getPropertyValue('--bp-md').
+//
+// See docs/css/breakpoints.md for full usage guide.
+// See docs/ln-ashlar-container-queries.md for container-query doctrine.
+// ==========================================================================
+
+// -----------------------------------------------------------------------
+// App-shell media breakpoints (for @media — layout columns only)
+// -----------------------------------------------------------------------
+$bp-sm:  480px;
+$bp-md:  768px;
+$bp-lg:  1024px;
+$bp-xl:  1280px;
+$bp-2xl: 1536px;
+$bp-3xl: 1920px;
+
+// -----------------------------------------------------------------------
+// Container-query breakpoints (for @container — components)
+// -----------------------------------------------------------------------
+$cq-narrow:  480px;
+$cq-compact: 580px;
+$cq-medium:  880px;
+$cq-wide:    1120px;
+
+// -----------------------------------------------------------------------
+// CSS custom properties — JS readable via getComputedStyle
+// -----------------------------------------------------------------------
+:root {
+	--bp-sm:  #{$bp-sm};
+	--bp-md:  #{$bp-md};
+	--bp-lg:  #{$bp-lg};
+	--bp-xl:  #{$bp-xl};
+	--bp-2xl: #{$bp-2xl};
+	--bp-3xl: #{$bp-3xl};
+
+	--cq-narrow:  #{$cq-narrow};
+	--cq-compact: #{$cq-compact};
+	--cq-medium:  #{$cq-medium};
+	--cq-wide:    #{$cq-wide};
+}
+
+// -----------------------------------------------------------------------
+// Unified breakpoint map — resolved by mq-*/cq-* mixins.
+// Keeps both scales looking up the same way; call-site mixin choice
+// (mq vs cq) decides media vs container emission.
+// -----------------------------------------------------------------------
+$breakpoints: (
+	sm:      $bp-sm,
+	md:      $bp-md,
+	lg:      $bp-lg,
+	xl:      $bp-xl,
+	2xl:     $bp-2xl,
+	3xl:     $bp-3xl,
+	narrow:  $cq-narrow,
+	compact: $cq-compact,
+	medium:  $cq-medium,
+	wide:    $cq-wide,
+);

package/scss/config/_density.scss

@@ -0,0 +1,117 @@
+// ==========================================================================
+// 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;
+}

package/scss/config/_icons.scss

@@ -0,0 +1,37 @@
+// ==========================================================================
+// Icons — SVG sprite system
+// ==========================================================================
+// Icons are rendered via an SVG sprite injected by ln-icons.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>
+//
+// Available IDs: #ln-{name} where name = filename in js/ln-icons/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
+//   arrow-up, arrow-down, chart, clock, envelope, book, globe, list
+//   box, building, badge, warning, info-circle, check-circle, error-circle
+//   sort-both, user, mail, phone, square-compass
+//   file, file-pdf, file-doc, file-epub  ← these have embedded stroke colors
+//
+// Change color via CSS:
+//   .sidebar a { color: hsl(var(--color-primary)); }  /* icon follows */
+//   button { color: hsl(var(--color-error)); }         /* icon follows */
+// ==========================================================================
+
+svg.ln-icon {
+	display: inline-block;
+	width: 1.25rem;
+	height: 1.25rem;
+	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; }

package/scss/config/_mixins.scss

@@ -0,0 +1,13 @@
+// ==========================================================================
+// Mixins — ln-ashlar
+// ==========================================================================
+// Tailwind-like utility mixins. Instead of utility classes in HTML,
+// @include them in SCSS components.
+//
+// ALL mixins reference CSS variables from _tokens.scss.
+// Nothing is hardcoded — change the token, change it everywhere.
+//
+// See mixins/_index.scss for the full list of @forward entries.
+// ==========================================================================
+
+@forward 'mixins/index';