Demo enhancements

demo/app-root.ts

@@ -1,26 +1,96 @@
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
-import '@src/elements/ia-button/ia-button-story';
-import '@src/labs/ia-snow/ia-snow-story';
-import '@src/elements/ia-combo-box/ia-combo-box-story';
-import '@src/elements/ia-status-indicator/ia-status-indicator-story';
+const storyModules = import.meta.glob(
+  ['../src/elements/**/*-story.ts', '../src/labs/**/*-story.ts'],
+  { eager: true }
+);
+
+const storyEntries = Object.keys(storyModules)
+  .map(path => {
+    const labs = path.includes('/src/labs/');
+    const parts = path.split('/');
+    const tag = parts[parts.length - 2];
+    return { tag, storyTag: `${tag}-story`, id: `elem-${tag}`, labs };
+  })
+  .sort((a, b) => a.tag.localeCompare(b.tag));
+
+const productionEntries = storyEntries.filter(e => !e.labs);
+const labsEntries       = storyEntries.filter(e => e.labs);
+const ALL_ENTRIES       = [...productionEntries, ...labsEntries];
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
+  createRenderRoot() { return this; }
+
+  private _scrollHandler?: () => void;
+
   render() {
     return html`
-      <h1>🏛️ Internet Archive Elements ⚛️</h1>
+      <nav id="ia-sidebar">
+        <h2>Production-Ready</h2>
+        ${productionEntries.map(e => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`)}
+        <h2>Labs 🧪</h2>
+        ${labsEntries.map(e => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`)}
+      </nav>
+      <div id="ia-content">
+        <h1>Internet Archive Elements</h1>
+        <h2>Production-Ready Elements</h2>
+        ${productionEntries.map(e => html`
+          <div id="${e.id}" class="ia-anchor">
+            ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
+          </div>
+        `)}
+        <h2>Labs Elements</h2>
+        ${labsEntries.map(e => html`
+          <div id="${e.id}" class="ia-anchor">
+            ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
+          </div>
+        `)}
+      </div>
+    `;
+  }
 
-      <h2>🚀 Production-Ready Elements</h2>
+  firstUpdated() {
+    const allIds = ALL_ENTRIES.map(e => e.id);
 
-      <ia-status-indicator-story></ia-status-indicator-story>
-      <ia-combo-box-story></ia-combo-box-story>
+    const links = Object.fromEntries(
+      allIds.map(id => [id, this.querySelector(`#ia-sidebar a[href="#${id}"]`)])
+    );
 
-      <h2>🧪 Labs Elements</h2>
+    const getAnchorTops = () =>
+      allIds.map(id => {
+        const el = document.getElementById(id);
+        return el ? el.getBoundingClientRect().top + window.scrollY : null;
+      });
 
-      <ia-snow-story></ia-snow-story>
-      <ia-button-story></ia-button-story>
-    `;
+    const updateActive = () => {
+      const tops = getAnchorTops();
+      let current = 0;
+      for (let i = 0; i < tops.length; i++) {
+        if ((tops[i] ?? Infinity) <= window.scrollY + 40) current = i;
+      }
+      allIds.forEach((id, i) => {
+        links[id]?.classList.toggle('active', i === current);
+      });
+    };
+
+    allIds.forEach((id, i) => {
+      links[id]?.addEventListener('click', (e: Event) => {
+        e.preventDefault();
+        const top = getAnchorTops()[i];
+        if (top !== null) window.scrollTo({ top: Math.max(0, top - 16), behavior: 'smooth' });
+      });
+    });
+
+    this._scrollHandler = updateActive;
+    window.addEventListener('scroll', updateActive, { passive: true });
+    updateActive();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._scrollHandler) window.removeEventListener('scroll', this._scrollHandler);
   }
 }

demo/index.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -24,7 +24,75 @@ a:hover {
 }
 
 body {
-  margin: 1rem;
+  margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  display: flex;
+}
+
+app-root {
+  display: contents;
+}
+
+#ia-sidebar {
+  width: 200px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  border-right: 1px solid #ddd;
+  padding: 1rem 0.75rem;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+#ia-sidebar h2 {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #999;
+  margin: 1rem 0 0.35rem;
+}
+
+#ia-sidebar h2:first-child {
+  margin-top: 0;
+}
+
+#ia-sidebar a {
+  display: block;
+  font-size: 0.82rem;
+  font-weight: 400;
+  color: #444;
+  text-decoration: none;
+  padding: 3px 6px;
+  border-left: 2px solid transparent;
+  margin-bottom: 2px;
+}
+
+#ia-sidebar a:hover {
+  color: #213547;
+  border-left-color: #aaa;
+}
+
+#ia-sidebar a.active {
+  color: #0f3e6e;
+  border-left-color: #0f3e6e;
+  font-weight: 600;
+}
+
+#ia-content {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  padding-bottom: 100vh;
+  min-width: 0;
+}
+
+.ia-anchor {
+  scroll-margin-top: 16px;
+}
+
+.ia-anchor > * {
+  display: block;
+  margin-bottom: 0.5rem;
 }

demo/story-components/story-prop-settings.ts

@@ -45,7 +45,6 @@ export class StoryPropsSettings extends LitElement {
     if (!this.propInputData) return nothing;
 
     return html`
-      <h3>Properties</h3>
       <div class="settings-options">
         <table>
           ${this.propInputData.settings.map(

demo/story-components/story-styles-settings.ts

@@ -30,7 +30,6 @@ export class StoryStylesSettings extends LitElement {
     if (!this.styleInputData) return nothing;
 
     return html`
-      <h3>Styles</h3>
       <div class="settings-options">
         <table>
           ${this.styleInputData.settings.map(