v3.8.3

.smartconfig.json

@@ -36,6 +36,16 @@
   "@ship.zone/szci": {
     "npmGlobalTools": []
   },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./html/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild"
+      }
+    ]
+  },
   "@git.zone/tswatch": {
     "preset": "element"
   }

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "json.schemas": [
     {
-      "fileMatch": ["/npmextra.json"],
+      "fileMatch": ["/.smartconfig.json"],
       "schema": {
         "type": "object",
         "properties": {

changelog.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 2026-04-12 - 3.8.3 - fix(sidebar)
+include component tag names in sidebar search filtering
+
+- Updates sidebar section and entry filtering to match search queries against each item's custom element tag name via the `is` field.
+- Keeps existing name and demo group matching behavior while making search results easier to find by tag.
+
+## 2026-04-12 - 3.8.2 - fix(sidebar)
+restore search input focus after clearing the sidebar search
+
+- Updates the sidebar clearSearch behavior to focus the .search-input element after resetting the query and dispatching searchChanged.
+- Improves search usability by letting users continue typing immediately after clearing the current search.
+
+## 2026-04-12 - 3.8.1 - fix(build)
+migrate smart config and update build tooling for latest tsbundle and TypeScript defaults
+
+- rename npmextra.json to .smartconfig.json and add tsbundle bundle configuration
+- update build script to use the new tsbundle invocation without the removed element subcommand
+- adjust tsconfig and dashboard property defaults for newer TypeScript compiler behavior
+- refresh package dependencies and include the new config file in published package contents
+
 ## 2026-01-27 - 3.8.0 - feat(sidebar)
 rename demoGroup to demoGroups, add multi-group support, search by group name, and context menu group navigation
 

license

@@ -1,4 +1,4 @@
-Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2020 Task Venture Capital GmbH (hello@task.vc)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.8.0",
+  "version": "3.8.3",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {
@@ -10,27 +10,27 @@
   "type": "module",
   "scripts": {
     "test": "(npm run build)",
-    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle element)",
+    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle)",
     "watch": "tswatch",
     "buildDocs": "tsdoc"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.7",
-    "@design.estate/dees-element": "^2.1.5",
+    "@design.estate/dees-domtools": "^2.5.4",
+    "@design.estate/dees-element": "^2.2.4",
     "@push.rocks/smartdelay": "^3.0.5",
     "lit": "^3.3.2"
   },
   "devDependencies": {
-    "@api.global/typedserver": "^8.3.0",
-    "@git.zone/tsbuild": "^4.1.2",
-    "@git.zone/tsbundle": "^2.8.3",
-    "@git.zone/tsrun": "^2.0.1",
-    "@git.zone/tstest": "^3.1.8",
-    "@git.zone/tswatch": "^3.0.1",
-    "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.10"
+    "@api.global/typedserver": "^8.4.6",
+    "@git.zone/tsbuild": "^4.4.0",
+    "@git.zone/tsbundle": "^2.10.0",
+    "@git.zone/tsrun": "^2.0.2",
+    "@git.zone/tstest": "^3.6.3",
+    "@git.zone/tswatch": "^3.3.2",
+    "@push.rocks/projectinfo": "^5.1.0",
+    "@types/node": "^25.6.0"
   },
   "files": [
     "ts/**/*",
@@ -41,7 +41,7 @@
     "dist_ts_web/**/*",
     "assets/**/*",
     "cli.js",
-    "npmextra.json",
+    ".smartconfig.json",
     "readme.md"
   ],
   "browserslist": [

readme.hints.md

@@ -1,5 +1,18 @@
 # Project Hints and Findings
 
+## TypeScript 6.0 & Build Tooling (2026-04-12)
+
+### TypeScript 6.0 Strict Defaults
+TypeScript 6.0.2 (shipped with tsbuild 4.4.0) changes `strict` to `true` by default. The project explicitly sets `"strict": false` in tsconfig.json to preserve pre-TS6 behavior. Also added `"types": ["node"]` since TS6 changed `@types/*` auto-discovery.
+
+### Config Migration: npmextra.json → .smartconfig.json
+Build tools (tsbundle 2.10.0, tswatch 3.3.2) now use `@push.rocks/smartconfig` which reads `.smartconfig.json` (with leading dot). The old `npmextra.json` was renamed.
+
+### tsbundle Configuration
+The `tsbundle element` subcommand no longer exists. Instead, bundle configuration lives in `.smartconfig.json` under `"@git.zone/tsbundle"` with a `bundles` array. Entry point is `./html/index.ts` → `./dist_bundle/bundle.js`.
+
+---
+
 ## Section-based Configuration API (2025-12-27)
 
 ### Overview

readme.md

@@ -293,6 +293,25 @@ export class MyButton extends DeesElement {
 
 Each demo appears as a numbered item in an expandable folder in the sidebar.
 
+### 🗂️ Demo Groups
+
+Organize elements into groups within a section for better discoverability:
+
+```typescript
+@customElement('my-input')
+export class MyInput extends DeesElement {
+  // Single group
+  public static demoGroups = 'Form Controls';
+
+  // Or multiple groups — element appears in each
+  public static demoGroups = ['Form Controls', 'Inputs'];
+
+  public static demo = () => html`<my-input></my-input>`;
+}
+```
+
+Groups appear as collapsible headers in the sidebar, sorted alphabetically. Searching matches group names too — searching "Form Controls" shows all elements in that group.
+
 ### ⏳ Async Demos
 
 Return a `Promise` from `demo` for async setup:
@@ -462,7 +481,7 @@ my-component-library/
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.8.0',
+  version: '3.8.3',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

ts_web/elements/wcc-dashboard.ts

@@ -22,7 +22,8 @@ export const getSectionItems = (section: IWccSection): Array<[string, any]> => {
 
   // Apply filter if provided
   if (section.filter) {
-    entries = entries.filter(([name, item]) => section.filter(name, item));
+    const filterFn = section.filter;
+    entries = entries.filter(([name, item]) => filterFn(name, item));
   }
 
   // Apply sort if provided
@@ -43,13 +44,13 @@ export class WccDashboard extends DeesElement {
   accessor selectedSection: IWccSection | null = null;
 
   @property()
-  accessor selectedType: TElementType;
+  accessor selectedType: TElementType = 'element';
 
   @property()
-  accessor selectedItemName: string;
+  accessor selectedItemName: string = '';
 
   @property()
-  accessor selectedItem: TTemplateFactory | DeesElement;
+  accessor selectedItem: TTemplateFactory | DeesElement | null = null;
 
   @property({ type: Number })
   accessor selectedDemoIndex: number = 0;
@@ -77,7 +78,7 @@ export class WccDashboard extends DeesElement {
   }
 
   @property()
-  accessor warning: string = null;
+  accessor warning: string | null = null;
 
   private frameScrollY: number = 0;
   private sidebarScrollY: number = 0;

ts_web/elements/wcc-sidebar.ts

@@ -654,6 +654,8 @@ export class WccSidebar extends DeesElement {
       const entries = getSectionItems(section);
       const filteredEntries = entries.filter(([name, item]) => {
         if (this.matchesSearch(name)) return true;
+        const tagName = (item as any).is;
+        if (tagName && this.matchesSearch(tagName)) return true;
         const rawGroups = (item as any).demoGroups;
         if (!rawGroups) return false;
         const groups: string[] = Array.isArray(rawGroups) ? rawGroups : [rawGroups];
@@ -692,6 +694,8 @@ export class WccSidebar extends DeesElement {
     // Filter entries by search query
     const filteredEntries = entries.filter(([name, item]) => {
       if (this.matchesSearch(name)) return true;
+      const tagName = (item as any).is;
+      if (tagName && this.matchesSearch(tagName)) return true;
       const rawGroups = (item as any).demoGroups;
       if (!rawGroups) return false;
       const groups: string[] = Array.isArray(rawGroups) ? rawGroups : [rawGroups];
@@ -867,6 +871,8 @@ export class WccSidebar extends DeesElement {
   private clearSearch() {
     this.searchQuery = '';
     this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
+    const input = this.shadowRoot.querySelector('.search-input') as HTMLInputElement;
+    if (input) input.focus();
   }
 
   private handleMenuScroll(e: Event) {

tsconfig.json

@@ -4,7 +4,9 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "strict": false,
+    "types": ["node"]
   },
   "exclude": [
     "dist_*/**/*.d.ts"