CR suggestion fixes

- base tag name on file name
- click listener cleanup
- adds semantic 'expanded' class string
- console warns on clipboard failures

Author: IA Jim

demo/app-root.ts

@@ -13,20 +13,22 @@ const storyEntries = Object.keys(storyModules)
   .map(path => {
     const labs = path.includes('/src/labs/');
     const parts = path.split('/');
-    const tag = parts[parts.length - 2];
+    const filename = parts[parts.length - 1]; // e.g. "ia-button-story.ts"
+    const tag = filename.replace(/-story\.ts$/, '');
     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];
+const labsEntries = storyEntries.filter(e => e.labs);
+const ALL_ENTRIES = [...productionEntries, ...labsEntries];
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
   createRenderRoot() { return this; }
 
   private _observer?: IntersectionObserver;
+  private _abortController = new AbortController();
 
   render() {
     return html`
@@ -90,12 +92,13 @@ export class AppRoot extends LitElement {
           const top = el.getBoundingClientRect().top + window.scrollY;
           window.scrollTo({ top: Math.max(0, top - 16), behavior: 'smooth' });
         }
-      });
+      }, { signal: this._abortController.signal });
     });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this._observer?.disconnect();
+    this._abortController.abort();
   }
 }

demo/index.css

@@ -85,7 +85,7 @@ app-root {
 #ia-content {
   flex: 1;
   padding: 0.75rem 1rem;
-  padding-bottom: 100vh;
+  padding-bottom: 100vh; /* lets scroll-spy activate on the last element */
   min-width: 0;
 }
 

demo/story-template.ts

@@ -79,12 +79,12 @@ export class StoryTemplate extends LitElement {
           ></slot>
         </div>
         <button
-          class="details-toggle ${this.detailsVisible ? '' : 'collapsed'}"
+          class="details-toggle ${this.detailsVisible ? 'expanded' : 'collapsed'}"
           @click=${() => (this.detailsVisible = !this.detailsVisible)}
         >
           Import, Usage &amp; Settings
         </button>
-        <div id="details" class="${this.detailsVisible ? '' : 'collapsed'}">
+        <div id="details" class="${this.detailsVisible ? 'expanded' : 'collapsed'}">
           <div class="details-inner">
             ${this.detailsTemplate}
           </div>
@@ -194,8 +194,8 @@ export class StoryTemplate extends LitElement {
       this.copiedKey = which;
       clearTimeout(this._copyTimeout);
       this._copyTimeout = setTimeout(() => (this.copiedKey = null), 2000);
-    } catch {
-      // Clipboard API unavailable (non-HTTPS or permission denied) — silent fail
+    } catch (e) {
+      console.warn('Clipboard write failed:', e);
     }
   }