yukey

gallery: the shell takes its entries as a property, defaulting to the kit's own

commit 450b80abeedf835e89e4d97dc19065f6e32ad8dc · parent 1037346e88 · browse this tree
Ximianth, 2026-10-10 06:22:59 UTC

An application that hosts a gallery of its own components (yk-gallery with the kit's
entries plus theirs) sets .entries; nothing else changes.  The default is registry.ts,
so the kit's gallery page and its e2e scenarios are unaffected.

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>
 		`;
 	}