@lilydesignsystem/angular-headless 0.5.0 → 0.6.0

package/README.md

@@ -43,7 +43,7 @@ See `AGENTS.md` for the full architecture, component pattern, testing convention
 
 ## Status
 
-Complete and published: all 571 catalog components as standalone, signal-based, OnPush Angular components (peer range Angular `>=20 <23`), each with a vitest spec and a Storybook story. Version 0.4.0.
+Complete and published: all 571 catalog components as standalone, signal-based, OnPush Angular components (peer range Angular `>=20 <23`), each with a vitest spec and a Storybook story. Version 0.5.0.
 
 ---
 

package/fesm2022/lilydesignsystem-angular-headless.mjs

@@ -8170,7 +8170,7 @@ var CheckboxGroup = class CheckboxGroup {
 			}
 		},
 		ngImport: i0,
-		template: `<div class="checkbox-group {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></div>`,
+		template: `<fieldset class="checkbox-group {{ className() }}" role="group" [attr.aria-label]="label() || null"><ng-content /></fieldset>`,
 		isInline: true,
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -8185,7 +8185,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "lily-checkbox-group",
 			standalone: true,
-			template: `<div class="checkbox-group {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></div>`,
+			template: `<fieldset class="checkbox-group {{ className() }}" role="group" [attr.aria-label]="label() || null"><ng-content /></fieldset>`,
 			changeDetection: ChangeDetectionStrategy.OnPush
 		}]
 	}],
@@ -10268,6 +10268,8 @@ var ContentsLink = class ContentsLink {
 	href = input("", ...ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []);
 	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 	className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+	count = input(void 0, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	countLabel = input(void 0, ...ngDevMode ? [{ debugName: "countLabel" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -10277,7 +10279,7 @@ var ContentsLink = class ContentsLink {
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
+		minVersion: "17.0.0",
 		version: "22.2.1",
 		type: ContentsLink,
 		isStandalone: true,
@@ -10303,10 +10305,31 @@ var ContentsLink = class ContentsLink {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			count: {
+				classPropertyName: "count",
+				publicName: "count",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			countLabel: {
+				classPropertyName: "countLabel",
+				publicName: "countLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		ngImport: i0,
-		template: `<a class="contents-link {{ className() }}" [attr.href]="href() || '#'" [attr.aria-label]="label() || null"><ng-content /></a>`,
+		template: `<a
+    class="contents-link {{ className() }}"
+    [attr.href]="href() || '#'"
+    [attr.aria-label]="label() || null"
+    [attr.data-count]="count() ?? null"
+    [attr.data-complete]="count() === 0 ? '' : null"
+    ><ng-content />@if (countLabel()) {<span class="contents-link-count">{{ countLabel() }}</span>}</a
+  >`,
 		isInline: true,
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -10321,7 +10344,14 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "lily-contents-link",
 			standalone: true,
-			template: `<a class="contents-link {{ className() }}" [attr.href]="href() || '#'" [attr.aria-label]="label() || null"><ng-content /></a>`,
+			template: `<a
+    class="contents-link {{ className() }}"
+    [attr.href]="href() || '#'"
+    [attr.aria-label]="label() || null"
+    [attr.data-count]="count() ?? null"
+    [attr.data-complete]="count() === 0 ? '' : null"
+    ><ng-content />@if (countLabel()) {<span class="contents-link-count">{{ countLabel() }}</span>}</a
+  >`,
 			changeDetection: ChangeDetectionStrategy.OnPush
 		}]
 	}],
@@ -10349,6 +10379,22 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "className",
 				required: false
 			}]
+		}],
+		count: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "count",
+				required: false
+			}]
+		}],
+		countLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countLabel",
+				required: false
+			}]
 		}]
 	}
 });
@@ -10478,9 +10524,150 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+function activeSectionIndex(tops, offset, atBottom) {
+	if (tops.length === 0) return -1;
+	if (atBottom) return tops.length - 1;
+	let index = 0;
+	for (let i = 0; i < tops.length; i++) if (tops[i] <= offset + 1) index = i;
+	return index;
+}
+function contentsLinks(nav) {
+	return Array.from(nav.querySelectorAll("a[href^=\"#\"]")).filter((a) => a.getAttribute("href").length > 1);
+}
+function contentsLinkId(link) {
+	return decodeURIComponent((link.getAttribute("href") ?? "").slice(1));
+}
+function contentsTarget(link, doc) {
+	return doc.getElementById(contentsLinkId(link));
+}
+function startScrollspy(nav, options = {}) {
+	if (typeof window === "undefined") return () => {};
+	const offset = options.offset ?? 0;
+	const spyRoot = options.root ?? null;
+	const token = options.current ?? "true";
+	const scroller = spyRoot ?? window;
+	let locked = false;
+	let lockTimer;
+	let frame = 0;
+	let last = "";
+	let hashPending = false;
+	function mark(link) {
+		for (const a of contentsLinks(nav)) if (a === link) {
+			a.setAttribute("aria-current", token);
+			a.setAttribute("data-active", "");
+		} else {
+			a.removeAttribute("aria-current");
+			a.removeAttribute("data-active");
+		}
+		for (const li of nav.querySelectorAll("li")) if (link && li.contains(link) && li.querySelector(":scope > a") !== link) li.setAttribute("data-descendant-active", "");
+		else li.removeAttribute("data-descendant-active");
+		const id = link ? contentsLinkId(link) : "";
+		if (id !== last) {
+			last = id;
+			if (id) options.onChange?.(id);
+		}
+	}
+	function update() {
+		if (locked) return;
+		if (hashPending) {
+			const id = decodeURIComponent(window.location.hash.slice(1));
+			const hashed = id ? contentsLinks(nav).find((a) => contentsLinkId(a) === id) : void 0;
+			if (hashed) {
+				mark(hashed);
+				return;
+			}
+		}
+		const pairs = contentsLinks(nav).map((a) => ({
+			a,
+			el: contentsTarget(a, nav.ownerDocument)
+		})).filter((p) => p.el !== null);
+		if (pairs.length === 0) {
+			mark(void 0);
+			return;
+		}
+		const base = spyRoot ? spyRoot.getBoundingClientRect().top : 0;
+		const tops = pairs.map((p) => p.el.getBoundingClientRect().top - base);
+		const atBottom = spyRoot ? spyRoot.scrollTop + spyRoot.clientHeight >= spyRoot.scrollHeight - 1 : window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 1;
+		mark(pairs[activeSectionIndex(tops, offset, atBottom)].a);
+	}
+	function schedule() {
+		if (frame) return;
+		frame = requestAnimationFrame(() => {
+			frame = 0;
+			update();
+		});
+	}
+	function onScroll() {
+		hashPending = false;
+		schedule();
+	}
+	function release() {
+		locked = false;
+		if (lockTimer) clearTimeout(lockTimer);
+		update();
+	}
+	function onClick(event) {
+		const link = event.target?.closest?.("a");
+		if (!link || !nav.contains(link) || !contentsTarget(link, nav.ownerDocument)) return;
+		mark(link);
+		locked = true;
+		if (lockTimer) clearTimeout(lockTimer);
+		lockTimer = setTimeout(release, 1e3);
+	}
+	function onHashChange() {
+		const id = decodeURIComponent(window.location.hash.slice(1));
+		const link = contentsLinks(nav).find((a) => contentsLinkId(a) === id);
+		if (link) mark(link);
+	}
+	scroller.addEventListener("scroll", onScroll, { passive: true });
+	scroller.addEventListener("scrollend", release);
+	window.addEventListener("resize", schedule);
+	window.addEventListener("hashchange", onHashChange);
+	nav.addEventListener("click", onClick);
+	const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(schedule);
+	mutations?.observe(nav, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["href"]
+	});
+	const initial = decodeURIComponent(window.location.hash.slice(1));
+	hashPending = initial !== "";
+	const hashLink = initial ? contentsLinks(nav).find((a) => contentsLinkId(a) === initial) : void 0;
+	if (hashLink) mark(hashLink);
+	else update();
+	return () => {
+		scroller.removeEventListener("scroll", onScroll);
+		scroller.removeEventListener("scrollend", release);
+		window.removeEventListener("resize", schedule);
+		window.removeEventListener("hashchange", onHashChange);
+		nav.removeEventListener("click", onClick);
+		mutations?.disconnect();
+		if (frame) cancelAnimationFrame(frame);
+		if (lockTimer) clearTimeout(lockTimer);
+	};
+}
 var ContentsNav = class ContentsNav {
 	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 	className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+	spy = input(false, ...ngDevMode ? [{ debugName: "spy" }] : /* istanbul ignore next */ []);
+	offset = input(0, ...ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []);
+	root = input(null, ...ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []);
+	current = input("true", ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	active = model("", ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	navEl = viewChild("navEl", ...ngDevMode ? [{ debugName: "navEl" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			const nav = this.navEl()?.nativeElement;
+			if (!this.spy() || !nav) return;
+			onCleanup(startScrollspy(nav, {
+				offset: this.offset(),
+				root: this.root(),
+				current: this.current(),
+				onChange: (id) => this.active.set(id)
+			}));
+		});
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -10490,7 +10677,7 @@ var ContentsNav = class ContentsNav {
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
+		minVersion: "17.2.0",
 		version: "22.2.1",
 		type: ContentsNav,
 		isStandalone: true,
@@ -10509,10 +10696,53 @@ var ContentsNav = class ContentsNav {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			spy: {
+				classPropertyName: "spy",
+				publicName: "spy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			offset: {
+				classPropertyName: "offset",
+				publicName: "offset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			root: {
+				classPropertyName: "root",
+				publicName: "root",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			current: {
+				classPropertyName: "current",
+				publicName: "current",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
+		outputs: { active: "activeChange" },
+		viewQueries: [{
+			propertyName: "navEl",
+			first: true,
+			predicate: ["navEl"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
-		template: `<nav class="contents-nav {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></nav>`,
+		template: `<nav #navEl class="contents-nav {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></nav>`,
 		isInline: true,
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -10527,10 +10757,11 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "lily-contents-nav",
 			standalone: true,
-			template: `<nav class="contents-nav {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></nav>`,
+			template: `<nav #navEl class="contents-nav {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></nav>`,
 			changeDetection: ChangeDetectionStrategy.OnPush
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		label: [{
 			type: i0.Input,
@@ -10547,6 +10778,53 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "className",
 				required: false
 			}]
+		}],
+		spy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spy",
+				required: false
+			}]
+		}],
+		offset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "offset",
+				required: false
+			}]
+		}],
+		root: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "root",
+				required: false
+			}]
+		}],
+		current: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "current",
+				required: false
+			}]
+		}],
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeChange"]
+		}],
+		navEl: [{
+			type: i0.ViewChild,
+			args: ["navEl", { isSignal: true }]
 		}]
 	}
 });
@@ -36461,7 +36739,7 @@ var RadioGroup = class RadioGroup {
 			}
 		},
 		ngImport: i0,
-		template: `<div class="radio-group {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></div>`,
+		template: `<fieldset class="radio-group {{ className() }}" role="radiogroup" [attr.aria-label]="label() || null"><ng-content /></fieldset>`,
 		isInline: true,
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -36476,7 +36754,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "lily-radio-group",
 			standalone: true,
-			template: `<div class="radio-group {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></div>`,
+			template: `<fieldset class="radio-group {{ className() }}" role="radiogroup" [attr.aria-label]="label() || null"><ng-content /></fieldset>`,
 			changeDetection: ChangeDetectionStrategy.OnPush
 		}]
 	}],
@@ -39822,6 +40100,9 @@ i0.ɵɵngDeclareClassMetadata({
 var SegmentGroupItem = class SegmentGroupItem {
 	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 	className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+	checked = input(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -39850,10 +40131,40 @@ var SegmentGroupItem = class SegmentGroupItem {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		ngImport: i0,
-		template: `<div class="segment-group-item {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></div>`,
+		template: `<button
+    type="button"
+    class="segment-group-item {{ className() }}"
+    role="radio"
+    [attr.aria-checked]="checked()"
+    [attr.data-value]="value() || null"
+    [attr.tabindex]="checked() ? 0 : -1"
+    [disabled]="disabled()"
+    [attr.aria-label]="label() || null"
+  ><ng-content /></button>`,
 		isInline: true,
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -39868,7 +40179,16 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "lily-segment-group-item",
 			standalone: true,
-			template: `<div class="segment-group-item {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></div>`,
+			template: `<button
+    type="button"
+    class="segment-group-item {{ className() }}"
+    role="radio"
+    [attr.aria-checked]="checked()"
+    [attr.data-value]="value() || null"
+    [attr.tabindex]="checked() ? 0 : -1"
+    [disabled]="disabled()"
+    [attr.aria-label]="label() || null"
+  ><ng-content /></button>`,
 			changeDetection: ChangeDetectionStrategy.OnPush
 		}]
 	}],
@@ -39888,6 +40208,30 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "className",
 				required: false
 			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
 		}]
 	}
 });
@@ -44692,6 +45036,7 @@ i0.ɵɵngDeclareClassMetadata({
 var Tag = class Tag {
 	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 	className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+	live = input(false, ...ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -44701,7 +45046,7 @@ var Tag = class Tag {
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
+		minVersion: "17.0.0",
 		version: "22.2.1",
 		type: Tag,
 		isStandalone: true,
@@ -44720,10 +45065,21 @@ var Tag = class Tag {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			live: {
+				classPropertyName: "live",
+				publicName: "live",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		ngImport: i0,
-		template: `<div class="tag {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></div>`,
+		template: `@if (live()) {
+      <span class="tag {{ className() }}" role="status" [attr.aria-label]="label() || null"><ng-content /></span>
+    } @else {
+      <span class="tag {{ className() }}"><ng-content />@if (label()) {<span class="screen-reader-span">{{ label() }}</span>}</span>
+    }`,
 		isInline: true,
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -44738,7 +45094,11 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "lily-tag",
 			standalone: true,
-			template: `<div class="tag {{ className() }}" [attr.aria-label]="label() || null"><ng-content /></div>`,
+			template: `@if (live()) {
+      <span class="tag {{ className() }}" role="status" [attr.aria-label]="label() || null"><ng-content /></span>
+    } @else {
+      <span class="tag {{ className() }}"><ng-content />@if (label()) {<span class="screen-reader-span">{{ label() }}</span>}</span>
+    }`,
 			changeDetection: ChangeDetectionStrategy.OnPush
 		}]
 	}],
@@ -44758,6 +45118,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "className",
 				required: false
 			}]
+		}],
+		live: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "live",
+				required: false
+			}]
 		}]
 	}
 });