@livenetworks/ashlar 1.3.2

package/js/ln-validate/README.md

@@ -0,0 +1,108 @@
+# ln-validate
+
+A zero-dependency, high-performance **Validity Primitive** that wraps the browser's native `ValidityState` API. It manages when to evaluate inputs, how to toggle visual error indicators, and when to dispatch validation events to form-level coordinators.
+
+It maintains no custom rules in JavaScript; instead, it relies fully on native HTML markup constraints (`required`, `minlength`, `type="email"`, `pattern`) and standard CSS classes.
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **Platform First:** Browsers compile and execute rules in native C++ instantly. `ln-validate` simply acts as a visual layer: translating native `ValidityState` properties into visible HTML elements on demand.
+2. **The Touch Gate:** To prevent annoying page-load errors, validation is completely visual-silent until a field receives its first user interaction (`input` or `change`), setting its internal state `_touched = true`.
+3. **The Custom Escape Hatch:** Validation rules the browser cannot express (such as checking if an email is taken via a server lookup, or confirming passwords match) are routed through asynchronous `set-custom` / `clear-custom` events.
+
+---
+
+## 📦 Minimal Blueprint
+
+```html
+<div class="form-element">
+  <label for="email">Email Address</label>
+  <input id="email" name="email" type="email" required minlength="5" data-ln-validate>
+  
+  <ul data-ln-validate-errors>
+    <li class="hidden" data-ln-validate-error="required">Email is required</li>
+    <li class="hidden" data-ln-validate-error="typeMismatch">Invalid email format</li>
+    <li class="hidden" data-ln-validate-error="tooShort">Must be at least 5 characters</li>
+    <!-- Custom unmapped error -->
+    <li class="hidden" data-ln-validate-error="emailTaken">This email is already in use</li>
+  </ul>
+</div>
+```
+
+> [!IMPORTANT]
+> The surrounding wrapper **must** carry the class `.form-element` for the sibling error lookup to succeed.
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Elements | Value / Mapped Rule |
+| :--- | :--- | :--- |
+| `data-ln-validate` | `<input>`, `<select>`, `<textarea>` | Participation marker. Presence creates the instance. |
+| `data-ln-validate-errors` | `<ul>` | Identifies the sibling error list container. |
+| `data-ln-validate-error="key"` | `<li>` | Maps to standard native rules or custom keys (see list below). |
+
+### Mapped Native Keys
+
+| Key | Native HTML Attribute | Browser ValidityState Property |
+| :--- | :--- | :--- |
+| `required` | `required` | `valueMissing` |
+| `typeMismatch` | `type="email"`, `type="url"`, etc. | `typeMismatch` |
+| `tooShort` | `minlength="N"` | `tooShort` |
+| `tooLong` | `maxlength="N"` | `tooLong` |
+| `patternMismatch` | `pattern="regex"` | `patternMismatch` |
+| `rangeUnderflow` | `min="N"` | `rangeUnderflow` |
+| `rangeOverflow` | `max="N"` | `rangeOverflow` |
+
+*Note: Any key not present in the native mapping table is automatically treated as a **custom error**.*
+
+### JS API
+
+Access the validation instance directly via the `lnValidate` property on the input element:
+
+```javascript
+const input = document.getElementById('email');
+
+// 1. Force-validate the field (returns boolean; ignores the touched gate)
+const isValid = input.lnValidate.validate();
+
+// 2. Revert the touched state, clear visual classes, and hide error lists
+input.lnValidate.reset();
+
+// 3. Live boolean check (native validity + custom errors)
+if (input.lnValidate.isValid) { ... }
+
+// 4. Tear down listeners and delete instance reference
+input.lnValidate.destroy();
+```
+
+---
+
+## ⚡ DOM Events
+
+### Emitted
+
+| Event | Bubbles | Payload | Description |
+| :--- | :--- | :--- | :--- |
+| `ln-validate:valid` | Yes | `{ target, field }` | Dispatched after every validation pass that succeeds. |
+| `ln-validate:invalid` | Yes | `{ target, field }` | Dispatched after every validation pass that fails. |
+| `ln-validate:destroyed` | Yes | `{ target }` | Dispatched when the validation instance is torn down. |
+
+### Received
+
+| Event | Payload | Description |
+| :--- | :--- | :--- |
+| `ln-validate:set-custom` | `{ error: String }` | Injects a custom error key, highlights the field as invalid. |
+| `ln-validate:clear-custom` | `{ error: String }` / `{}` | Clears a specific custom error, or all custom errors at once. |
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Skipping the `.form-element` wrapper:** `ln-validate` locates sibling error elements relative to the closest `.form-element` ancestor. If you omit the wrapper class, no error lists will be toggled.
+- **Relying on Native browser CSS (`:invalid`):** The browser applies `:invalid` to empty required fields on page load. **Always** use our custom classes `.ln-validate-valid` and `.ln-validate-invalid` for visual borders and focus states.
+- **Injecting custom errors without validating:** Dispatching `ln-validate:set-custom` updates visual classes, but it **does not** bubble an `:invalid` event. If you need form-level coordinators (`ln-form`) to react immediately, call `input.lnValidate.validate()` right after injecting.

package/js/ln-validate/ln-validate.js

@@ -0,0 +1 @@
+(function(){"use strict";function L(n,e,f){n.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:f||{}}))}function _(n,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){_(n,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}n()}function y(n,e,f,h){if(n.nodeType!==1)return;const v=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",p=Array.from(n.querySelectorAll(v));n.matches&&n.matches(v)&&p.push(n);for(const o of p)o[f]||(o[f]=new h(o))}function w(n,e,f,h,m={}){const v=m.extraAttributes||[],p=m.onAttributeChange||null,o=m.onInit||null;function t(i){const d=i||document.body;y(d,n,e,f),o&&o(d)}return _(function(){const i=new MutationObserver(function(l){for(let u=0;u<l.length;u++){const s=l[u];if(s.type==="childList")for(let a=0;a<s.addedNodes.length;a++){const r=s.addedNodes[a];r.nodeType===1&&(y(r,n,e,f),o&&o(r))}else s.type==="attributes"&&(p&&s.target[e]?p(s.target,s.attributeName):(y(s.target,n,e,f),o&&o(s.target)))}});let d=[];if(n.indexOf("[")!==-1){const l=/\[([\w-]+)/g;let u;for(;(u=l.exec(n))!==null;)d.push(u[1])}else d.push(n);i.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:d.concat(v)})},h),window[e]=t,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){t(document.body)}):t(document.body),t}const E={};function S(n,e){E[n]=e}function b(n){return E[n]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=S,window.lnCore.getDataMapper=b),(function(){const n="data-ln-validate",e="lnValidate",f="data-ln-validate-errors",h="data-ln-validate-error",m="ln-validate-valid",v="ln-validate-invalid",p={required:"valueMissing",typeMismatch:"typeMismatch",tooShort:"tooShort",tooLong:"tooLong",patternMismatch:"patternMismatch",rangeUnderflow:"rangeUnderflow",rangeOverflow:"rangeOverflow"};if(window[e]!==void 0)return;function o(t){this.dom=t,this._touched=!1,this._customErrors=new Set;const i=this,d=t.tagName,l=t.type,u=d==="SELECT"||l==="checkbox"||l==="radio";return this._onInput=function(){i._touched=!0,i.validate()},this._onChange=function(){i._touched=!0,i.validate()},this._onSetCustom=function(s){const a=s.detail&&s.detail.error;if(!a)return;i._customErrors.add(a),i._touched=!0;const r=t.closest(".form-element");if(r){const c=r.querySelector("["+h+'="'+a+'"]');c&&c.classList.remove("hidden")}t.classList.remove(m),t.classList.add(v)},this._onClearCustom=function(s){const a=s.detail&&s.detail.error,r=t.closest(".form-element");if(a){if(i._customErrors.delete(a),r){const c=r.querySelector("["+h+'="'+a+'"]');c&&c.classList.add("hidden")}}else i._customErrors.forEach(function(c){if(r){const g=r.querySelector("["+h+'="'+c+'"]');g&&g.classList.add("hidden")}}),i._customErrors.clear();i._touched&&i.validate()},u||t.addEventListener("input",this._onInput),t.addEventListener("change",this._onChange),t.addEventListener("ln-validate:set-custom",this._onSetCustom),t.addEventListener("ln-validate:clear-custom",this._onClearCustom),this}o.prototype.validate=function(){const t=this.dom,i=t.validity,l=t.checkValidity()&&this._customErrors.size===0,u=t.closest(".form-element");if(u){const a=u.querySelector("["+f+"]");if(a){const r=a.querySelectorAll("["+h+"]");for(let c=0;c<r.length;c++){const g=r[c].getAttribute(h),C=p[g];C&&(i[C]?r[c].classList.remove("hidden"):r[c].classList.add("hidden"))}}}return t.classList.toggle(m,l),t.classList.toggle(v,!l),L(t,l?"ln-validate:valid":"ln-validate:invalid",{target:t,field:t.name}),l},o.prototype.reset=function(){this._touched=!1,this._customErrors.clear(),this.dom.classList.remove(m,v);const t=this.dom.closest(".form-element");if(t){const i=t.querySelectorAll("["+h+"]");for(let d=0;d<i.length;d++)i[d].classList.add("hidden")}},Object.defineProperty(o.prototype,"isValid",{get:function(){return this.dom.checkValidity()&&this._customErrors.size===0}}),o.prototype.destroy=function(){this.dom[e]&&(this.dom.removeEventListener("input",this._onInput),this.dom.removeEventListener("change",this._onChange),this.dom.removeEventListener("ln-validate:set-custom",this._onSetCustom),this.dom.removeEventListener("ln-validate:clear-custom",this._onClearCustom),this.dom.classList.remove(m,v),L(this.dom,"ln-validate:destroyed",{target:this.dom}),delete this.dom[e])},w(n,e,o,"ln-validate")})()})();

package/js/ln-validate/src/ln-validate.js

@@ -0,0 +1,160 @@
+import { dispatch, registerComponent } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-validate';
+	const DOM_ATTRIBUTE = 'lnValidate';
+	const ERRORS_SELECTOR = 'data-ln-validate-errors';
+	const ERROR_SELECTOR = 'data-ln-validate-error';
+	const CSS_VALID = 'ln-validate-valid';
+	const CSS_INVALID = 'ln-validate-invalid';
+
+	const ERROR_MAP = {
+		required: 'valueMissing',
+		typeMismatch: 'typeMismatch',
+		tooShort: 'tooShort',
+		tooLong: 'tooLong',
+		patternMismatch: 'patternMismatch',
+		rangeUnderflow: 'rangeUnderflow',
+		rangeOverflow: 'rangeOverflow'
+	};
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+		this._touched = false;
+		this._customErrors = new Set();
+
+		const self = this;
+		const tag = dom.tagName;
+		const type = dom.type;
+		const isChangeBased = tag === 'SELECT' || type === 'checkbox' || type === 'radio';
+
+		this._onInput = function () {
+			self._touched = true;
+			self.validate();
+		};
+
+		this._onChange = function () {
+			self._touched = true;
+			self.validate();
+		};
+
+		this._onSetCustom = function (e) {
+			const error = e.detail && e.detail.error;
+			if (!error) return;
+			self._customErrors.add(error);
+			self._touched = true;
+			const parent = dom.closest('.form-element');
+			if (parent) {
+				const el = parent.querySelector('[' + ERROR_SELECTOR + '="' + error + '"]');
+				if (el) el.classList.remove('hidden');
+			}
+			dom.classList.remove(CSS_VALID);
+			dom.classList.add(CSS_INVALID);
+		};
+
+		this._onClearCustom = function (e) {
+			const error = e.detail && e.detail.error;
+			const parent = dom.closest('.form-element');
+			if (error) {
+				self._customErrors.delete(error);
+				if (parent) {
+					const el = parent.querySelector('[' + ERROR_SELECTOR + '="' + error + '"]');
+					if (el) el.classList.add('hidden');
+				}
+			} else {
+				// clear all custom errors
+				self._customErrors.forEach(function (err) {
+					if (parent) {
+						const el = parent.querySelector('[' + ERROR_SELECTOR + '="' + err + '"]');
+						if (el) el.classList.add('hidden');
+					}
+				});
+				self._customErrors.clear();
+			}
+			// Re-run native validation to update visual state
+			if (self._touched) self.validate();
+		};
+
+		if (!isChangeBased) {
+			dom.addEventListener('input', this._onInput);
+		}
+		dom.addEventListener('change', this._onChange);
+		dom.addEventListener('ln-validate:set-custom', this._onSetCustom);
+		dom.addEventListener('ln-validate:clear-custom', this._onClearCustom);
+
+		return this;
+	}
+
+	_component.prototype.validate = function () {
+		const dom = this.dom;
+		const validity = dom.validity;
+		const nativeValid = dom.checkValidity();
+		const isValid = nativeValid && this._customErrors.size === 0;
+
+		// Show/hide error messages
+		const parent = dom.closest('.form-element');
+		if (parent) {
+			const errorList = parent.querySelector('[' + ERRORS_SELECTOR + ']');
+			if (errorList) {
+				const items = errorList.querySelectorAll('[' + ERROR_SELECTOR + ']');
+				for (let i = 0; i < items.length; i++) {
+					const errorKey = items[i].getAttribute(ERROR_SELECTOR);
+					const validityProp = ERROR_MAP[errorKey];
+					if (!validityProp) continue; // custom error — managed by set-custom/clear-custom
+					if (validity[validityProp]) {
+						items[i].classList.remove('hidden');
+					} else {
+						items[i].classList.add('hidden');
+					}
+				}
+			}
+		}
+
+		// Toggle CSS classes on input
+		dom.classList.toggle(CSS_VALID, isValid);
+		dom.classList.toggle(CSS_INVALID, !isValid);
+
+		// Emit event
+		const eventName = isValid ? 'ln-validate:valid' : 'ln-validate:invalid';
+		dispatch(dom, eventName, { target: dom, field: dom.name });
+
+		return isValid;
+	};
+
+	_component.prototype.reset = function () {
+		this._touched = false;
+		this._customErrors.clear();
+		this.dom.classList.remove(CSS_VALID, CSS_INVALID);
+
+		const parent = this.dom.closest('.form-element');
+		if (parent) {
+			const items = parent.querySelectorAll('[' + ERROR_SELECTOR + ']');
+			for (let i = 0; i < items.length; i++) {
+				items[i].classList.add('hidden');
+			}
+		}
+	};
+
+	Object.defineProperty(_component.prototype, 'isValid', {
+		get: function () { return this.dom.checkValidity() && this._customErrors.size === 0; }
+	});
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.dom.removeEventListener('input', this._onInput);
+		this.dom.removeEventListener('change', this._onChange);
+		this.dom.removeEventListener('ln-validate:set-custom', this._onSetCustom);
+		this.dom.removeEventListener('ln-validate:clear-custom', this._onClearCustom);
+		this.dom.classList.remove(CSS_VALID, CSS_INVALID);
+		dispatch(this.dom, 'ln-validate:destroyed', { target: this.dom });
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-validate');
+})();

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@livenetworks/ashlar",
+  "version": "1.3.2",
+  "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
+  "license": "MIT",
+  "author": "Live Networks",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/livenetworks/ln-ashlar.git"
+  },
+  "homepage": "https://github.com/livenetworks/ln-ashlar#readme",
+  "bugs": "https://github.com/livenetworks/ln-ashlar/issues",
+  "keywords": [
+    "css",
+    "scss",
+    "design-system",
+    "frontend",
+    "components",
+    "vanilla-js"
+  ],
+  "files": [
+    "scss/",
+    "js/"
+  ],
+  "exports": {
+    "./scss/*": "./scss/*",
+    "./js/*": "./js/*"
+  },
+  "scripts": {
+    "dev": "node scripts/build.mjs --watch",
+    "build": "node scripts/build.mjs && npm run build:demos",
+    "build:demos": "npm run build:demo-index && npm run build:demo-admin && npm run build:demo-docuflow",
+    "build:demo-index": "sass demo/index.scss demo/index.css --no-source-map --style=compressed",
+    "build:demo-admin": "sass demo/admin/src/admin.scss demo/admin/dist/admin.css --no-source-map --style=compressed && cp demo/admin/src/demo.js demo/admin/dist/demo.js && node demo/admin/src/build-pages.mjs",
+    "build:demo-docuflow": "sass demo/docuflow/docuflow.scss demo/docuflow/dist/docuflow.css --no-source-map --style=compressed"
+  },
+  "devDependencies": {
+    "@tabler/icons": "^3.41.1",
+    "flag-icons": "^7.5.0",
+    "sass-embedded": "^1.83.0",
+    "vite": "^6.0.0"
+  },
+  "peerDependencies": {
+    "tom-select": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tom-select": {
+      "optional": true
+    }
+  }
+}

package/scss/base/_global.scss

@@ -0,0 +1,83 @@
+@use '../config/mixins' as *;
+
+html,
+body {
+	@include w-full;
+	@include h-full;
+	overflow: hidden;
+	background-color: var(--bg-recessed);
+	@include font-sans;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-text-size-adjust: 100%;
+	text-size-adjust: 100%;
+	line-height: 1.5;
+}
+
+body {
+	font-size: var(--text-body-md);
+	line-height: var(--lh-body-md);
+	color: var(--color-fg);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+a {
+	// Derive hover from --color-accent at this scope. Same hue/saturation,
+	// lightness reduced by 8 (number form — see _btn.scss for the syntax
+	// rationale). Local derivation means a semantic-color parent (.error,
+	// .success, etc.) that rebinds --color-primary cascades to the hover
+	// because var(--color-accent) re-resolves on the anchor element.
+	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 8));
+
+	color: var(--color-accent);
+	text-decoration: none;
+	@include transition-colors;
+	@include relative;
+
+	&:hover {
+		color: var(--color-accent-hover);
+	}
+}
+
+// ─── All buttons — structure + neutral colors ───────────────────────────────
+// Every <button> gets padding, font, and a neutral hover out of the box.
+// Icon/close buttons re-bind --padding-y/--padding-x on the parent scope's
+// descendant button selector to tighten the tap area.
+
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+	--padding-x: var(--btn-padding-x);
+	--padding-y: var(--btn-padding-y);
+	--gap:       var(--size-xs-up);
+}
+
+
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+	@include button-base;
+}
+
+// ─── Submit — accent variant via @mixin btn ─────────────────────────────────
+// Color-only delta on top of button-base. Override --color-primary on
+// the element or parent (e.g. .delete-action { --color-primary: var(--color-error); })
+// for color variants.
+
+button[type="submit"],
+input[type="submit"] {
+	@include btn;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+	display: block;
+}
+
+::selection {
+	background-color: hsl(var(--color-primary) / 0.2);
+	color: var(--color-fg);
+}

package/scss/base/_reset.scss

@@ -0,0 +1,17 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+[hidden] {
+	display: none !important;
+}
+
+ul, ol, ul li, ol li {
+	list-style: none;
+}
+
+html {
+	font-size: 16px;
+}

package/scss/base/_typography.scss

@@ -0,0 +1,125 @@
+@use '../config/mixins' as *;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: var(--color-fg);
+	@include font-bold;
+}
+
+// The global size-md bottom margin is the default for h1 rendered inline
+// with surrounding content (articles, page body, demo index). Containers
+// that provide their own spacing via `gap` — notably `@include page-header`
+// — intentionally zero this margin on their internal h1 so the gap is the
+// sole source of vertical rhythm. See scss/config/mixins/_page-header.scss.
+h1 {
+	@include typography(display-sm);
+	@include tracking-tight;
+	margin-bottom: var(--size-md);
+}
+
+h2 {
+	@include typography(heading-md);
+	@include tracking-tight;
+	margin-bottom: var(--size-md);
+}
+
+h3 {
+	@include typography(heading-sm);
+	@include font-semibold;
+	margin-bottom: var(--size-sm-up);
+}
+
+h4 {
+	@include typography(title-md);
+	@include font-semibold;
+	margin-bottom: var(--size-sm);
+}
+
+h5 {
+	@include typography(title-sm);
+	@include font-semibold;
+	margin-bottom: var(--size-sm);
+}
+
+h6 {
+	@include typography(label-md);
+	@include font-semibold;
+	margin-bottom: var(--size-xs);
+}
+
+p {
+	font-size: var(--text-body-md);
+	color: var(--color-fg);
+	line-height: 1.75;
+	margin-bottom: var(--size-md);
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+strong,
+b {
+	@include font-semibold;
+}
+
+em,
+i {
+	font-style: italic;
+}
+
+small {
+	font-size: var(--text-sm);
+	--color-fg: var(--fg-muted);
+	color: var(--color-fg);
+}
+
+code {
+	@include font-mono;
+	@include text-sm;
+	--color-bg: var(--bg-recessed);
+	background-color: var(--color-bg);
+	padding: var(--size-2xs) var(--size-xs);
+	@include rounded-sm;
+}
+
+pre {
+	@include font-mono;
+	@include text-sm;
+	--color-bg: var(--bg-recessed);
+	background-color: var(--color-bg);
+	padding: var(--size-md);
+	@include rounded-md;
+	@include border;
+	@include overflow-x-auto;
+	margin-bottom: var(--size-md);
+
+	code {
+		background: none;
+		padding: 0;
+	}
+}
+
+table {
+	margin-bottom: var(--size-md);
+}
+
+kbd {
+	@include kbd;
+}
+
+blockquote {
+	border-left: 3px solid var(--color-accent);
+	--color-bg: var(--bg-sunken);
+	background-color: var(--color-bg);
+	padding: var(--size-md);
+	@include rounded-sm;
+	margin-bottom: var(--size-md);
+	--color-fg: var(--fg-muted);
+	color: var(--color-fg);
+	font-style: italic;
+}

package/scss/components/_accordion.scss

@@ -0,0 +1,34 @@
+@use '../config/mixins' as *;
+
+// ==========================================================================
+// Accordion — styled list with chevron rotation
+// ==========================================================================
+// [data-ln-accordion] gets the full styled accordion: bordered card,
+// dividers, trigger hover, chevron rotate on open.
+//
+// To style a custom selector instead of (or in addition to) the data
+// attribute: #my-list { @include accordion; }
+// ==========================================================================
+
+[data-ln-accordion] {
+	@include accordion;
+
+	> li {
+		// Trigger — element-level colors, typography, hover
+		> [data-ln-toggle-for] {
+			@include font-medium;
+			color: var(--color-fg);
+			@include transition;
+
+			&:hover {
+				--color-bg: var(--bg-sunken);
+				background: var(--color-bg);
+			}
+
+			.ln-chevron {
+				--color-fg: var(--fg-subtle);
+				color: var(--color-fg);
+			}
+		}
+	}
+}

package/scss/components/_ajax.scss

@@ -0,0 +1,15 @@
+@use '../config/mixins' as *;
+
+.ln-ajax--loading {
+	@include ajax-loading;
+}
+
+.ln-ajax-spinner {
+	@include ajax-spinner;
+}
+
+@keyframes ln-ajax-spin {
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}

package/scss/components/_alert.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+.alert        { @include alert; }
+.alert.banner { @include alert-banner; }
+.alert[data-ln-toggle="close"] { display: none; }

package/scss/components/_app-shell.scss

@@ -0,0 +1,15 @@
+@use '../config/mixins' as *;
+
+.app-wrapper      { @include app-wrapper; }
+.app-header       { @include app-header; }
+.app-main         { @include app-main; }
+.app-sidebar      { @include sidebar; @include sidebar-drawer; }
+.app-scrim        { @include app-scrim; }
+.app-footer       { @include app-footer; }
+.app-content-wrapper { @include app-content-wrapper; }
+
+// Header region structural classes — same tier as .app-header itself.
+.header-left      { @include app-header-left; }
+.header-right     { @include app-header-right; }
+.header-actions   { @include app-header-actions; }
+.header-avatar    { @include header-avatar; }

package/scss/components/_avatar.scss

@@ -0,0 +1,6 @@
+@use '../config/mixins' as *;
+
+.avatar    { @include avatar; }
+.avatar-sm { @include avatar-sm; }
+.avatar-lg { @include avatar-lg; }
+.avatar-xl { @include avatar-xl; }

package/scss/components/_breadcrumbs.scss

@@ -0,0 +1,33 @@
+@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-breadcrumbs { @include breadcrumbs; }
+.breadcrumbs {
+	@include breadcrumbs;
+
+	> ol {
+		> li + li::before {
+			--color-fg: var(--fg-subtle);
+			color: var(--color-fg);
+		}
+
+		a {
+			--color-fg: var(--fg-muted);
+			color: var(--color-fg);
+			text-decoration: none;
+			@include transition-colors;
+
+			&:hover {
+				color: var(--color-accent);
+			}
+		}
+
+		[aria-current="page"] {
+			color: var(--color-fg);
+			@include font-medium;
+		}
+	}
+}