yukey

Merge branch 'gallery-entries'

commit 30239003e0c466447c777da8278f9b0a6c4f99f9 · parent 1037346e88 · parent 450b80abee · browse this tree
Ximianth, 2026-10-10 06:23:11 UTC

diff --git a/packages/yukey/src/gallery/yk-gallery.ts b/packages/yukey/src/gallery/yk-gallery.ts
index 8be2534..6d7397f 100644
--- a/packages/yukey/src/gallery/yk-gallery.ts
+++ b/packages/yukey/src/gallery/yk-gallery.ts
@@ -2,13 +2,17 @@
 // entry's variants on the right.  Hash routing (#yk-live-list) so entries are
 // linkable and reload survives.  Styled entirely from the design tokens: the shell
 // is the token vocabulary's first real consumer, and doubles as a proof of it.
+//
+// The shell shows whatever `entries` it's given; the default is the kit's own
+// (registry.ts).  An application hosting a gallery of its own components composes:
+// `<yk-gallery .entries=${[...entries, myEntry]}>`.
 
 import { css, html, LitElement, type PropertyValues, type TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import "../yk-infopop.js";
 import { deepTabbables, installTabContainment } from "../tab-cycle.js";
 import type { GalleryEntry } from "./entry.js";
-import { entries } from "./registry.js";
+import { entries as kitEntries } from "./registry.js";
 
 @customElement("yk-gallery")
 export class YkGallery extends LitElement {
@@ -89,6 +93,9 @@ export class YkGallery extends LitElement {
 		}
 	`;
 
+	@property({ attribute: false })
+	entries: GalleryEntry[] = kitEntries;
+
 	@state()
 	private currentId = "";
 
@@ -123,12 +130,12 @@ export class YkGallery extends LitElement {
 	}
 
 	render(): TemplateResult {
-		const current = entries.find((e) => e.id === this.currentId);
+		const current = this.entries.find((e) => e.id === this.currentId);
 		return html`
 			<nav>
 				<div class="head">yukey gallery</div>
 				${
-			entries.map(
+			this.entries.map(
 				(e) =>
 					html`<a href=${`#${e.id}`} class=${e.id === this.currentId ? "current" : ""}
 						>${e.title}</a
@@ -163,8 +170,8 @@ export class YkGallery extends LitElement {
 			<div class="description">
 				Living documentation and dev harness for yukey.
 				Pick a component from the nav.  To add one: write a
-				<span class="quiet">foo.gallery.ts</span> beside the component and register it in
-				<span class="quiet">gallery/registry.ts</span>.
+				<span class="quiet">foo.gallery.ts</span> beside the component and list it in
+				this shell's <span class="quiet">entries</span>.
 			</div>
 		`;
 	}