@mono-lit/helper 0.0.0-stage → 0.0.1

package/dist/chip-strip-Cw3gyz0q.js

@@ -0,0 +1,213 @@
+//#region src/composables/chip-limits.ts
+var KEBAB = {
+	max: "max",
+	min: "min",
+	maxVisible: "max-visible",
+	minVisible: "min-visible"
+};
+/** A non-negative integer, or undefined for anything that is not one (`''`, null, NaN, -1). */
+function limitNumber(value) {
+	if (value == null || value === "") return void 0;
+	const n = Math.floor(Number(value));
+	return Number.isFinite(n) && n >= 0 ? n : void 0;
+}
+/**
+* Resolve one limit: the `chip` object's key (camel, then kebab) pins, the
+* element's own prop is the fallback. Sanitised through {@link limitNumber}.
+*/
+function resolveChipLimit(chip, key, elementValue) {
+	return limitNumber(chip ? chip[key] ?? chip[KEBAB[key]] : void 0) ?? limitNumber(elementValue);
+}
+/**
+* How many chips to draw before the rest collapse into "+N more" — `Infinity`
+* when there is no cap, when the cap is `0` (uncapped, like before), or while
+* the total sits at or under the collapse floor.
+*/
+function visibleChipCap(total, maxVisible, minVisible) {
+	if (maxVisible === void 0 || maxVisible <= 0) return Infinity;
+	if (minVisible !== void 0 && total <= minVisible) return Infinity;
+	return maxVisible;
+}
+//#endregion
+//#region src/composables/chip-strip.ts
+/** Slack (px) absorbing sub-pixel layout noise in the overflow comparisons. */
+var EPSILON = 1;
+var ChipStripController = class {
+	constructor(host, opts) {
+		this._canScrollStart = false;
+		this._canScrollEnd = false;
+		this._observer = null;
+		this._observed = null;
+		this.host = host;
+		this.opts = opts;
+		host.addController(this);
+	}
+	/** True once the strip is scrolled away from its start — render `‹`. */
+	get canScrollStart() {
+		return this._canScrollStart;
+	}
+	/** True while content remains past the right edge — render `›`. */
+	get canScrollEnd() {
+		return this._canScrollEnd;
+	}
+	/** True when either button should show — i.e. the chips overflow the strip. */
+	get overflowing() {
+		return this._canScrollStart || this._canScrollEnd;
+	}
+	hostConnected() {
+		if (this.opts.enabled()) this._attach();
+	}
+	hostDisconnected() {
+		this._teardown();
+	}
+	/**
+	* Only re-target the observer — deliberately does NOT measure. Measuring here
+	* would force a layout on every render of every host, and its `requestUpdate`
+	* would schedule an update from inside `updated()`. `invalidate()` and the
+	* ResizeObserver cover the cases that can actually change the answer.
+	*/
+	hostUpdated() {
+		if (!this.opts.enabled()) {
+			if (this._observed) {
+				this._teardown();
+				this._publish(false, false);
+			}
+			return;
+		}
+		this._attach();
+	}
+	/**
+	* Re-measure because the CONTENT changed — a chip added, removed or relabelled.
+	* The host calls this from `updated()` when such state actually changed, which
+	* is far rarer than "every update".
+	*/
+	invalidate() {
+		this.sync();
+	}
+	/**
+	* Recompute both flags from the live geometry and re-render only when one
+	* actually flipped.
+	*/
+	sync() {
+		if (!this.opts.enabled()) return;
+		const strip = this.opts.strip();
+		let start = false;
+		let end = false;
+		if (strip) {
+			const max = strip.scrollWidth - strip.clientWidth;
+			if (max > EPSILON) {
+				start = strip.scrollLeft > EPSILON;
+				end = strip.scrollLeft < max - EPSILON;
+			}
+		}
+		this._publish(start, end);
+	}
+	/**
+	* Scroll one "page" toward `dir`, aligned to a chip boundary so a chip is
+	* never left half-cut at the leading edge.
+	*
+	* Forward: the first chip whose right edge passes the visible right edge
+	* becomes the new leftmost chip. Backward: the chip that would end at the
+	* current left edge becomes the new leftmost chip. If no chip qualifies
+	* (one chip wider than the strip), fall back to a plain viewport-width step
+	* so the button is never a no-op.
+	*/
+	page(dir) {
+		const strip = this.opts.strip();
+		if (!strip) return;
+		const max = strip.scrollWidth - strip.clientWidth;
+		if (max <= EPSILON) return;
+		const viewLeft = strip.scrollLeft;
+		const viewRight = viewLeft + strip.clientWidth;
+		const stripLeft = strip.getBoundingClientRect().left;
+		const chips = Array.from(strip.children).map((chip) => {
+			const rect = chip.getBoundingClientRect();
+			const left = rect.left - stripLeft + viewLeft;
+			return {
+				left,
+				right: left + rect.width
+			};
+		});
+		let target = null;
+		if (dir === 1) {
+			for (const chip of chips) if (chip.right > viewRight + EPSILON) {
+				target = chip.left;
+				break;
+			}
+		} else for (let i = chips.length - 1; i >= 0; i--) if (chips[i].left < viewLeft - EPSILON) {
+			target = chips[i].right - strip.clientWidth;
+			break;
+		}
+		if (target === null) target = viewLeft + dir * strip.clientWidth;
+		this._scrollTo(strip, target, max);
+	}
+	/** Pin the strip to its end — used after a chip is added, to reveal it. */
+	scrollToEnd() {
+		const strip = this.opts.strip();
+		if (!strip) return;
+		const max = strip.scrollWidth - strip.clientWidth;
+		this._scrollTo(strip, max, max);
+	}
+	/**
+	* Move the strip and republish from the CLAMPED TARGET rather than by reading
+	* `scrollLeft` back.
+	*
+	* Scrolling is instant (no `scroll-behavior: smooth`), so the read would agree
+	* — but not reading avoids a second forced layout, and more importantly the
+	* strip's scroll events are expensive well beyond this controller: the shared
+	* popup controller listens for `scroll` on `window` in the CAPTURE phase, so
+	* every scroll event the strip emits repositions any open dropdown, forcing a
+	* layout and a `getComputedStyle` ancestor walk. One event per click is the
+	* budget; a smooth animation's ~30 was what made the page crawl.
+	*/
+	_scrollTo(strip, target, max) {
+		const clamped = Math.max(0, Math.min(max, target));
+		strip.scrollLeft = clamped;
+		if (max <= EPSILON) {
+			this._publish(false, false);
+			return;
+		}
+		this._publish(clamped > EPSILON, clamped < max - EPSILON);
+	}
+	/**
+	* Store the flags and re-render only on a real change.
+	*
+	* The request is deferred a microtask: `invalidate()` / `scrollToEnd()` are
+	* called from the host's `updated()` (a chip landed, a preset value arrived),
+	* and a synchronous `requestUpdate()` there is Lit's change-in-update warning
+	* on every such edge. The flags are already stored, so the deferred render
+	* reads the same answer — it just doesn't get scheduled from inside the
+	* render that asked for it.
+	*/
+	_publish(start, end) {
+		if (start === this._canScrollStart && end === this._canScrollEnd) return;
+		this._canScrollStart = start;
+		this._canScrollEnd = end;
+		if (typeof queueMicrotask === "function") queueMicrotask(() => this.host.requestUpdate());
+		else this.host.requestUpdate();
+	}
+	/**
+	* Observe the strip so the buttons re-evaluate when the FIELD is resized —
+	* a window resize changes `clientWidth` without any render or scroll event.
+	*
+	* Only the strip is observed, not the chips: a chip add/remove always comes
+	* with a host render, and the host calls `invalidate()` for those.
+	*/
+	_attach() {
+		const strip = this.opts.strip();
+		if (strip === this._observed) return;
+		this._observer?.disconnect();
+		this._observed = strip;
+		if (!strip) return;
+		if (typeof ResizeObserver === "undefined") return;
+		this._observer ??= new ResizeObserver(() => this.sync());
+		this._observer.observe(strip);
+	}
+	_teardown() {
+		this._observer?.disconnect();
+		this._observer = null;
+		this._observed = null;
+	}
+};
+//#endregion
+export { resolveChipLimit as n, visibleChipCap as r, ChipStripController as t };

package/dist/color-DHYrfXsX.js

@@ -0,0 +1,253 @@
+//#region src/composables/color.ts
+/** The two inks the theme uses on a filled surface (`index.css` `--theme-*-contrast`). */
+var INK_LIGHT = "#ffffff";
+var INK_DARK = "rgba(0, 0, 0, 0.87)";
+var HEX = /^#([0-9a-f]{3,8})$/i;
+var FN = /^(rgba?|hsla?)\(\s*([^)]+?)\s*\)$/i;
+/** Split `rgb(1 2 3 / 0.5)` and `rgb(1, 2, 3, 0.5)` alike. */
+function args(body) {
+	return body.replace(/\//g, " ").split(/[\s,]+/).filter(Boolean);
+}
+/** `50%` → 0.5, `0.5` → 0.5. Alpha is given either way. */
+function alpha(token) {
+	if (token === void 0) return 1;
+	const n = token.endsWith("%") ? Number.parseFloat(token) / 100 : Number.parseFloat(token);
+	return Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 1;
+}
+/** A channel is `0-255` or a percentage of it. */
+function channel(token) {
+	const n = token.endsWith("%") ? Number.parseFloat(token) / 100 * 255 : Number.parseFloat(token);
+	return Number.isFinite(n) ? Math.min(255, Math.max(0, n)) : NaN;
+}
+function hslToRgb(h, s, l) {
+	const c = (1 - Math.abs(2 * l - 1)) * s;
+	const hp = (h % 360 + 360) % 360 / 60;
+	const x = c * (1 - Math.abs(hp % 2 - 1));
+	const [r, g, b] = hp < 1 ? [
+		c,
+		x,
+		0
+	] : hp < 2 ? [
+		x,
+		c,
+		0
+	] : hp < 3 ? [
+		0,
+		c,
+		x
+	] : hp < 4 ? [
+		0,
+		x,
+		c
+	] : hp < 5 ? [
+		x,
+		0,
+		c
+	] : [
+		c,
+		0,
+		x
+	];
+	const m = l - c / 2;
+	return [
+		(r + m) * 255,
+		(g + m) * 255,
+		(b + m) * 255
+	];
+}
+/**
+* Parse a literal CSS colour to sRGB, or null when it isn't one we can read.
+*
+* Handles `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()/rgba()` and `hsl()/hsla()` in
+* both the legacy comma syntax and the modern space syntax. Returns null for anything
+* else — `var(…)`, `color-mix(…)`, a named keyword — which callers treat as "paint it,
+* but fall back for the derived values", since the browser can still render it.
+*/
+function parseCssColor(value) {
+	if (!value) return null;
+	const input = value.trim();
+	const hex = HEX.exec(input);
+	if (hex) {
+		const h = hex[1];
+		const expand = (s) => Number.parseInt(s.length === 1 ? s + s : s, 16);
+		if (h.length === 3 || h.length === 4) return {
+			r: expand(h[0]),
+			g: expand(h[1]),
+			b: expand(h[2]),
+			a: h.length === 4 ? expand(h[3]) / 255 : 1
+		};
+		if (h.length === 6 || h.length === 8) return {
+			r: Number.parseInt(h.slice(0, 2), 16),
+			g: Number.parseInt(h.slice(2, 4), 16),
+			b: Number.parseInt(h.slice(4, 6), 16),
+			a: h.length === 8 ? Number.parseInt(h.slice(6, 8), 16) / 255 : 1
+		};
+		return null;
+	}
+	const fn = FN.exec(input);
+	if (!fn) return null;
+	const parts = args(fn[2]);
+	if (parts.length < 3) return null;
+	if (fn[1].toLowerCase().startsWith("hsl")) {
+		const h = Number.parseFloat(parts[0]);
+		const s = Number.parseFloat(parts[1]) / 100;
+		const l = Number.parseFloat(parts[2]) / 100;
+		if (![
+			h,
+			s,
+			l
+		].every(Number.isFinite)) return null;
+		const [r, g, b] = hslToRgb(h, Math.min(1, Math.max(0, s)), Math.min(1, Math.max(0, l)));
+		return {
+			r,
+			g,
+			b,
+			a: alpha(parts[3])
+		};
+	}
+	const [r, g, b] = [
+		channel(parts[0]),
+		channel(parts[1]),
+		channel(parts[2])
+	];
+	if (![
+		r,
+		g,
+		b
+	].every(Number.isFinite)) return null;
+	return {
+		r,
+		g,
+		b,
+		a: alpha(parts[3])
+	};
+}
+/** WCAG relative luminance. */
+function relativeLuminance({ r, g, b }) {
+	const f = (v) => {
+		const c = v / 255;
+		return c <= .03928 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * f(r) + .7152 * f(g) + .0722 * f(b);
+}
+/** WCAG contrast ratio, 1–21. Order of the arguments does not matter. */
+function contrastRatio(a, b) {
+	const [hi, lo] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
+	return (hi + .05) / (lo + .05);
+}
+/**
+* The better of the theme's two inks for text sitting ON `value`, or null when the
+* colour can't be parsed (the caller then leaves the ink alone and the CSS default —
+* white, matching every `--theme-*-contrast` but warning's — applies).
+*
+* Compares actual contrast rather than thresholding luminance, so it stays correct for
+* mid-tone colours where a fixed cutoff picks the worse of the two.
+*/
+function readableInk(value) {
+	const bg = parseCssColor(value);
+	if (!bg) return null;
+	return contrastRatio(bg, {
+		r: 255,
+		g: 255,
+		b: 255,
+		a: 1
+	}) >= contrastRatio(bg, {
+		r: bg.r * .13,
+		g: bg.g * .13,
+		b: bg.b * .13,
+		a: 1
+	}) ? INK_LIGHT : INK_DARK;
+}
+/**
+* `"r, g, b"` for the `--*-rgb` half of the colour API, which the stylesheets wrap in
+* `rgba(var(--…-rgb), α)`. Null when unparseable.
+*/
+function toRgbTriple(value) {
+	const c = parseCssColor(value);
+	if (!c) return null;
+	return `${Math.round(c.r)}, ${Math.round(c.g)}, ${Math.round(c.b)}`;
+}
+/**
+* Does this look like a literal colour rather than a token name?
+*
+* Only used AFTER the component's own token list has been checked, so `teal` and
+* `purple` — which are both theme slots and CSS keywords — always mean the theme slot.
+* Bare CSS keywords are deliberately not recognised here: a typo like `primry` should
+* fall through to the validator's warning instead of being silently painted as nothing.
+*/
+function isRawColorValue(value) {
+	if (!value) return false;
+	const v = value.trim();
+	return v.startsWith("#") || /^(rgba?|hsla?|color|color-mix|var|light-dark)\(/i.test(v);
+}
+/**
+* The brand slots `src/data/theme/index.css` defines, in the order they appear there.
+* Every one has a `--theme-<name>`, a `--theme-<name>-rgb` and a `--theme-<name>-contrast`,
+* so a component only has to name the slot for the whole treatment to follow the active
+* colour preset. `surface` is not here — it is each component's "not painted" state, not
+* a palette entry.
+*/
+var THEME_COLOR_TOKENS = [
+	"primary",
+	"secondary",
+	"success",
+	"danger",
+	"warning",
+	"info",
+	"teal",
+	"purple",
+	"neutral",
+	"dark"
+];
+/** The class token emitted for a `color` that is a literal rather than a slot name. */
+var CUSTOM_COLOR_CLASS = "custom";
+function isThemeColorToken(value) {
+	return !!value && THEME_COLOR_TOKENS.includes(value);
+}
+/**
+* The class token for a `color` value.
+*
+* A literal MUST NOT reach the class list: the class string is built with `join(' ')`,
+* so `rgb(255, 0, 0)` would split into three garbage tokens (`rgb(255,`, `0,`, `0)`),
+* and `var(--brand)` likewise. Named slots — including `surface` — pass through; every
+* literal collapses to one marker class that the stylesheet keys the painted treatment
+* off, with the actual colour arriving inline (see `customColorStyle`).
+*/
+function colorClassToken(value) {
+	if (!value) return "";
+	if (isThemeColorToken(value) || value === "surface") return value;
+	return CUSTOM_COLOR_CLASS;
+}
+/**
+* The inline declarations that carry a literal colour, e.g.
+* `customColorStyle('#7c3aed', 'sidebar')`.
+*
+* Written on the component's ROOT element (the one whose stylesheet block declares the
+* resolvers) — an inline declaration beats the class-based `.mono-<c>.<token>` presets,
+* whereas the same property set on the host would only *inherit* and would lose to them.
+*
+* The rgb triple and the ink are emitted only when the value parses. An unparseable but
+* renderable value (`var(--brand)`, `color-mix(…)`) still paints: it just keeps the CSS
+* default ink, and `--mono-<c>-on-accent` stays available to set it by hand.
+*/
+function customColorStyle(value, component) {
+	if (!value) return "";
+	const out = [`--_mono-${component}-accent-preset:${value};`];
+	const triple = toRgbTriple(value);
+	if (triple) out.push(`--_mono-${component}-accent-rgb-preset:${triple};`);
+	const ink = readableInk(value);
+	if (ink) out.push(`--_mono-${component}-on-accent-preset:${ink};`);
+	return out.join("");
+}
+/**
+* Shared validator arm for a `color` prop: a named slot, `surface`, or something that
+* reads as a CSS colour. Returns an error string, or null when the value is fine.
+*/
+function validateColorProp(value) {
+	if (value === void 0 || value === null || value === "") return null;
+	if (typeof value !== "string") return `Invalid color: ${String(value)}`;
+	if (isThemeColorToken(value) || value === "surface" || isRawColorValue(value)) return null;
+	return `Invalid color: ${value} — expected one of ${THEME_COLOR_TOKENS.join(", ")}, surface, or a CSS color`;
+}
+//#endregion
+export { validateColorProp as a, isThemeColorToken as i, colorClassToken as n, customColorStyle as r, CUSTOM_COLOR_CLASS as t };

package/dist/css-class-BRKRzHx-.js

@@ -0,0 +1,60 @@
+//#region src/composables/css-class.ts
+/**
+* Append a per-part class override (if present) to a base class string.
+*
+*   cssPart({ inner: 'px-4' }, 'mono-nav-inner', 'inner') // 'mono-nav-inner px-4'
+*   cssPart(undefined,        'mono-nav-inner', 'inner') // 'mono-nav-inner'
+*/
+function cssPart(cssClass, base, key) {
+	const extra = cssClass?.[key];
+	return extra ? `${base} ${extra}` : base;
+}
+/**
+* Apply a `css-class` value to an element's `cssClass`/`cssClassName`.
+*
+*  - `null`/`undefined`/empty string → reset both
+*  - object                          → `cssClass`
+*  - `'{ … }'` JSON string           → parsed into `cssClass`
+*  - plain string                    → `cssClassName` (root class fallback)
+*
+* Mutates the element's reactive properties directly (so Lit picks up the
+* change). Used by each component's `_setCssClass`.
+*/
+function applyCssClass(target, value) {
+	if (value == null) {
+		target.cssClass = {};
+		target.cssClassName = "";
+		return;
+	}
+	if (typeof value === "object") {
+		target.cssClass = value;
+		return;
+	}
+	if (typeof value === "string") {
+		const trimmed = value.trim();
+		if (!trimmed) {
+			target.cssClass = {};
+			target.cssClassName = "";
+			return;
+		}
+		if (trimmed.startsWith("{") && trimmed.endsWith("}")) try {
+			target.cssClass = JSON.parse(trimmed);
+			return;
+		} catch {}
+		target.cssClassName = trimmed;
+	}
+}
+/**
+* Define `css-class` and `cssclass` instance aliases (Vue interop) that route to
+* `set`. Lets consumers write `<el :css-class="…">` / `:cssclass` / `:cssClass`.
+*/
+function defineCssClassAliases(target, set) {
+	for (const alias of ["css-class", "cssclass"]) Object.defineProperty(target, alias, {
+		get: () => target.cssClass,
+		set,
+		configurable: true,
+		enumerable: false
+	});
+}
+//#endregion
+export { cssPart as n, defineCssClassAliases as r, applyCssClass as t };

package/dist/css-size-DhHSVZJK.js

@@ -0,0 +1,37 @@
+//#region src/composables/css-size.ts
+/**
+* Normalize a sizing prop to a CSS length string.
+* - `number` (or numeric string) → `${n}px`
+* - any other non-empty string → passed through verbatim (`"12rem"`, `"80%"`, …)
+* - `null` / `undefined` / `''` → `undefined` (treated as "not set")
+*/
+function toCssSize(value) {
+	if (value === null || value === void 0) return void 0;
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+	const trimmed = String(value).trim();
+	if (trimmed === "") return void 0;
+	if (/^-?\d+(\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
+	return trimmed;
+}
+/**
+* Build a Lit `styleMap` object from the six sizing props, normalizing each via
+* `toCssSize` and omitting the ones that aren't set.
+*/
+function buildSizeStyle(src) {
+	const style = {};
+	const width = toCssSize(src.width);
+	const height = toCssSize(src.height);
+	const minWidth = toCssSize(src.minWidth);
+	const maxWidth = toCssSize(src.maxWidth);
+	const minHeight = toCssSize(src.minHeight);
+	const maxHeight = toCssSize(src.maxHeight);
+	if (width) style.width = width;
+	if (height) style.height = height;
+	if (minWidth) style["min-width"] = minWidth;
+	if (maxWidth) style["max-width"] = maxWidth;
+	if (minHeight) style["min-height"] = minHeight;
+	if (maxHeight) style["max-height"] = maxHeight;
+	return style;
+}
+//#endregion
+export { toCssSize as n, buildSizeStyle as t };