@threadlabs/looma 0.30.7 → 0.30.9

package/markdown/markdown-it.js

@@ -296,6 +296,119 @@ function applyImageAttributes(image, attributes) {
 	if (typeof placement === "string" && PLACEMENTS.has(placement) && placement !== "block") image.attrSet("data-placement", placement);
 	if (attributes.responsive === true) image.attrSet("data-looma-responsive", "");
 }
+var FOOTNOTE_DEFINITION = /^\[\^([^\s\]]+)\]:/;
+var FOOTNOTE_REFERENCE = /^\[\^([^\s\]]+)\]/;
+function footnoteDefinition(state, startLine, endLine, silent) {
+	if (state.sCount[startLine] - state.blkIndent >= 4) return false;
+	const start = state.bMarks[startLine] + state.tShift[startLine];
+	const match = FOOTNOTE_DEFINITION.exec(state.src.slice(start, state.eMarks[startLine]));
+	if (!match) return false;
+	if (silent) return true;
+	(state.env.footnotes ??= /* @__PURE__ */ new Set()).add(match[1]);
+	const open = state.push("looma_footnote_open", "li", 1);
+	Object.assign(open, {
+		meta: { label: match[1] },
+		block: true,
+		map: [startLine, startLine]
+	});
+	const saved = {
+		bMark: state.bMarks[startLine],
+		tShift: state.tShift[startLine],
+		sCount: state.sCount[startLine],
+		parentType: state.parentType
+	};
+	let position = start + match[0].length;
+	const contentStart = position;
+	let offset = state.sCount[startLine] + match[0].length;
+	const initial = offset;
+	while (position < state.eMarks[startLine] && (state.src[position] === " " || state.src[position] === "	")) {
+		offset += state.src[position] === "	" ? 4 - (offset + state.bsCount[startLine]) % 4 : 1;
+		position++;
+	}
+	state.tShift[startLine] = position - contentStart;
+	state.sCount[startLine] = offset - initial;
+	state.bMarks[startLine] = contentStart;
+	state.blkIndent += 4;
+	state.parentType = "footnote";
+	if (state.sCount[startLine] < state.blkIndent) state.sCount[startLine] += state.blkIndent;
+	state.md.block.tokenize(state, startLine, endLine);
+	state.parentType = saved.parentType;
+	state.blkIndent -= 4;
+	state.tShift[startLine] = saved.tShift;
+	state.sCount[startLine] = saved.sCount;
+	state.bMarks[startLine] = saved.bMark;
+	open.map[1] = state.line;
+	state.push("looma_footnote_close", "li", -1).block = true;
+	return true;
+}
+function footnoteReference(state, silent) {
+	if (state.src.charCodeAt(state.pos) !== 91 || state.src.charCodeAt(state.pos + 1) !== 94) return false;
+	const match = FOOTNOTE_REFERENCE.exec(state.src.slice(state.pos, state.posMax));
+	if (!match || !state.env.footnotes?.has(match[1])) return false;
+	if (!silent) state.push("looma_footnote_ref", "sup", 0).meta = { label: match[1] };
+	state.pos += match[0].length;
+	return true;
+}
+function footnotes(state) {
+	const definitions = /* @__PURE__ */ new Map();
+	const body = [];
+	for (let index = 0; index < state.tokens.length; index++) {
+		const token = state.tokens[index];
+		if (token.type !== "looma_footnote_open") {
+			body.push(token);
+			continue;
+		}
+		let depth = 0, end = index;
+		for (; end < state.tokens.length; end++) if (state.tokens[end].type === "looma_footnote_open") depth++;
+		else if (state.tokens[end].type === "looma_footnote_close" && --depth === 0) break;
+		const label = token.meta.label;
+		if (!definitions.has(label)) definitions.set(label, state.tokens.slice(index, end + 1));
+		index = end;
+	}
+	if (!definitions.size) return;
+	const order = [];
+	const counts = /* @__PURE__ */ new Map();
+	const number = (tokens) => {
+		for (const token of tokens) for (const child of token.children ?? []) {
+			if (child.type !== "looma_footnote_ref") continue;
+			const label = child.meta.label;
+			if (!counts.has(label)) order.push(label);
+			const occurrence = (counts.get(label) ?? 0) + 1;
+			counts.set(label, occurrence);
+			child.meta = {
+				label,
+				number: order.indexOf(label) + 1,
+				occurrence
+			};
+		}
+	};
+	number(body);
+	const notes = [];
+	for (let index = 0; index < order.length; index++) {
+		const label = order[index];
+		const tokens = definitions.get(label);
+		number(tokens);
+		const backrefs = Object.assign(new state.Token("looma_footnote_backrefs", "", 0), { meta: {
+			label,
+			number: index + 1
+		} });
+		const last = tokens.length - 2;
+		if (tokens[last].type === "paragraph_close") tokens.splice(last, 0, backrefs);
+		else tokens.splice(last + 1, 0, new state.Token("paragraph_open", "p", 1), backrefs, new state.Token("paragraph_close", "p", -1));
+		notes.push(...tokens);
+	}
+	if (!notes.length) {
+		state.tokens = body;
+		return;
+	}
+	for (const note of notes) if (note.type === "looma_footnote_open") note.meta.count = counts.get(note.meta.label);
+	state.tokens = [
+		...body,
+		Object.assign(new state.Token("looma_footnotes_open", "section", 1), { block: true }),
+		...notes,
+		Object.assign(new state.Token("looma_footnotes_close", "section", -1), { block: true })
+	];
+}
 function tableOfContents(tokens, format, depth, escape) {
 	const roots = [];
 	const ancestors = [];
@@ -321,7 +434,7 @@ function tableOfContents(tokens, format, depth, escape) {
 	return `<nav data-looma-toc="" data-format="${format}" data-depth="${depth}" aria-label="Table of contents"><strong>Table of contents</strong>${roots.length ? render(roots) : ""}</nav>\n`;
 }
 /**
-* Adds Looma Markdown to a markdown-it instance: containers, alerts, task lists, the table of
+* Adds Looma Markdown to a markdown-it instance: containers, alerts, task lists, footnotes, the table of
 * contents, chips, mentions, brace attributes, heading anchors, code meta and front matter.
 * @contract Renders the canonical HTML, which is the HTML LoomaEditor saves. It is not sanitized.
 * Linkify and raw HTML are instance options; `createLoomaMarkdownIt` turns both on.
@@ -329,6 +442,7 @@ function tableOfContents(tokens, format, depth, escape) {
 function loomaMarkdown(md, { codeNotation = "apply" } = {}) {
 	const escape = md.utils.escapeHtml;
 	md.block.ruler.before("table", "looma_frontmatter", frontmatter);
+	md.block.ruler.before("reference", "looma_footnote", footnoteDefinition, { alt: ["paragraph", "reference"] });
 	md.block.ruler.before("fence", "looma_container", container, { alt: [
 		"paragraph",
 		"reference",
@@ -342,9 +456,11 @@ function loomaMarkdown(md, { codeNotation = "apply" } = {}) {
 		"list"
 	] });
 	md.inline.ruler.before("link", "looma_directive", directive);
+	md.inline.ruler.before("link", "looma_footnote_ref", footnoteReference);
 	md.core.ruler.after("block", "looma_task_lists", taskLists);
 	md.core.ruler.before("inline", "looma_alerts", alerts);
 	md.core.ruler.before("text_join", "looma_attributes", attributes);
+	md.core.ruler.after("inline", "looma_footnotes", footnotes);
 	const rules = md.renderer.rules;
 	rules.looma_frontmatter = () => "";
 	rules.looma_container_open = (tokens, index) => {
@@ -366,6 +482,22 @@ function loomaMarkdown(md, { codeNotation = "apply" } = {}) {
 	};
 	rules.looma_tab_open = (tokens, index) => `<section aria-label="${escape(tokens[index].meta.label)}">\n`;
 	rules.looma_tab_close = () => "</section>\n";
+	rules.looma_footnote_ref = (tokens, index) => {
+		const { label, number, occurrence } = tokens[index].meta;
+		return `<sup><a href="#fn:${escape(label)}" id="fnref:${escape(label)}${occurrence > 1 ? `:${occurrence}` : ""}" data-footnote-ref="" aria-describedby="footnote:label">${number}</a></sup>`;
+	};
+	rules.looma_footnote_backrefs = (tokens, index) => {
+		const { label, number } = tokens[index].meta;
+		const count = tokens.find((token) => token.type === "looma_footnote_open" && token.meta.label === label)?.meta.count ?? 1;
+		return Array.from({ length: count }, (_, occurrence) => {
+			const suffix = occurrence ? `:${occurrence + 1}` : "";
+			return ` <a href="#fnref:${escape(label)}${suffix}" data-footnote-backref="" aria-label="Back to reference ${number}${occurrence ? `-${occurrence + 1}` : ""}">↩${occurrence ? `<sup>${occurrence + 1}</sup>` : ""}</a>`;
+		}).join("");
+	};
+	rules.looma_footnotes_open = () => "<section data-footnotes=\"\" class=\"footnotes\">\n<h2 id=\"footnote:label\" class=\"sr-only\">Footnotes</h2>\n<ol>\n";
+	rules.looma_footnotes_close = () => "</ol>\n</section>\n";
+	rules.looma_footnote_open = (tokens, index) => `<li id="fn:${escape(tokens[index].meta.label)}">\n`;
+	rules.looma_footnote_close = () => "</li>\n";
 	rules.looma_toc = (tokens, index) => tableOfContents(tokens, tokens[index].meta.format, tokens[index].meta.depth, escape);
 	rules.looma_chip = (tokens, index) => {
 		const { label, attributes } = tokens[index].meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.30.7",
+  "version": "0.30.9",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-dialog.css

@@ -111,6 +111,11 @@
       padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
     }
 
+    /* Alerts have no close target to add height above the title. */
+    :scope:where([data-component~="ui-dialog"])[data-ui-dialog-state~="alert"] header {
+      padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+    }
+
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
     :scope:where([data-component~="ui-dialog"]) .title {
       flex: 1;
@@ -238,6 +243,8 @@
 
     /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
+    /* Alerts have no close target to add height above the title. */
+
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
     /* A CSS-drawn X. */

package/vue/UiDialog.vue

@@ -363,6 +363,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
+/* Alerts have no close target to add height above the title. */
+
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
 /* A CSS-drawn X. */
@@ -460,6 +462,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
       var(--ui-space-5);
   }
+  :global(:scope[data-ui-dialog-state~="alert"] header:where([data-hn-ui-dialog])) {
+    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+  }
   :global(:scope .title:where([data-hn-ui-dialog])) {
     flex: 1;
     min-inline-size: 0;

package/vue/chunks/UiDialog.js

@@ -353,6 +353,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-995d5c18"]]);
+}), [["__scopeId", "data-v-f26be724"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/components.css

@@ -3035,18 +3035,20 @@ dd:where([data-hn-ui-description-item]) {
 
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
+/* Alerts have no close target to add height above the title. */
+
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-995d5c18 {
+@keyframes ui-dialog-enter-f26be724 {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-995d5c18 {
+@keyframes ui-dialog-backdrop-enter-f26be724 {
 from {
     background-color: transparent;
 }
@@ -3094,7 +3096,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-995d5c18 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-f26be724 var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -3124,6 +3126,9 @@ header:where([data-hn-ui-dialog]) {
     padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
       var(--ui-space-5);
 }
+:scope[data-ui-dialog-state~="alert"] header:where([data-hn-ui-dialog]) {
+    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+}
 :scope .title:where([data-hn-ui-dialog]) {
     flex: 1;
     min-inline-size: 0;
@@ -3212,7 +3217,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-995d5c18 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-f26be724 var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {