bitwrench 2.0.13 → 2.0.15

package/src/{bitwrench-components-v2.js → bitwrench-bccl.js}

@@ -12,11 +12,43 @@
  * Handle classes (CardHandle, TableHandle, NavbarHandle, TabsHandle)
  * provide imperative DOM manipulation for rendered components.
  *
- * @module bitwrench-components-v2
+ * @module bitwrench-bccl
  * @license BSD-2-Clause
  * @author M A Chatterjee <deftio [at] deftio [dot] com>
  */
 
+// =========================================================================
+// Variant → Utility Class Mapping
+//
+// Components compose these shared utility classes instead of owning
+// their own variant selectors. The CSS is generated once by
+// generatePaletteUtilities() + generateInteractionRules().
+// =========================================================================
+
+/**
+ * Maps component type to a function that returns utility classes for a variant.
+ * Each function takes a variant name (e.g. 'primary') and returns a class string.
+ * @type {Object.<string, function(string): string>}
+ */
+/**
+ * Convert a variant name to a single palette class.
+ * All BCCL components use this: variant='primary' → class includes 'bw_primary'.
+ * The CSS palette class (.bw-primary) sets bg/color/border; component-specific
+ * overrides in generatePaletteClasses() adjust per component type.
+ *
+ * @param {string} v - Variant name (e.g. 'primary', 'danger', 'outline_primary')
+ * @returns {string} CSS class string
+ */
+export function variantClass(v) {
+  if (!v) return '';
+  // Handle outline variants: 'outline_primary' or 'outline-primary'
+  if (v.indexOf('outline') === 0) {
+    var base = v.replace(/^outline[_-]/, '');
+    return 'bw_btn_outline bw_' + base;
+  }
+  return 'bw_' + v;
+}
+
 /**
  * Create a card component with optional header, body, footer, and image support
  *
@@ -76,54 +108,54 @@ export function makeCard(props = {}) {
 
   const shadowClasses = {
     none: '',
-    sm: 'bw-shadow-sm',
-    md: 'bw-shadow',
-    lg: 'bw-shadow-lg'
+    sm: 'bw_shadow_sm',
+    md: 'bw_shadow',
+    lg: 'bw_shadow_lg'
   };
 
   const cardClasses = [
-    'bw-card',
-    variant ? `bw-card-${variant}` : '',
+    'bw_card',
+    variantClass(variant),
     shadow ? (shadowClasses[shadow] || '') : '',
-    !bordered ? 'bw-border-0' : '',
-    hoverable ? 'bw-card-hoverable' : '',
+    !bordered ? 'bw_border_0' : '',
+    hoverable ? 'bw_card_hoverable' : '',
     className
   ].filter(Boolean).join(' ').trim();
 
   const cardContent = [
     header && {
       t: 'div',
-      a: { class: `bw-card-header ${headerClass}`.trim() },
+      a: { class: `bw_card_header ${headerClass}`.trim() },
       c: header
     },
     image && (imagePosition === 'top' || imagePosition === 'left') && {
       t: 'img',
       a: {
-        class: `bw-card-img-${imagePosition}`,
+        class: `bw_card_img_${imagePosition}`,
         src: image.src,
         alt: image.alt || ''
       }
     },
     {
       t: 'div',
-      a: { class: `bw-card-body ${bodyClass}`.trim() },
+      a: { class: `bw_card_body ${bodyClass}`.trim() },
       c: [
-        title && { t: 'h5', a: { class: 'bw-card-title' }, c: title },
-        subtitle && { t: 'h6', a: { class: 'bw-card-subtitle bw-mb-2 bw-text-muted' }, c: subtitle },
+        title && { t: 'h5', a: { class: 'bw_card_title' }, c: title },
+        subtitle && { t: 'h6', a: { class: 'bw_card_subtitle bw_mb_2 bw_text_muted' }, c: subtitle },
         content && (Array.isArray(content) ? content : [content])
       ].flat().filter(Boolean)
     },
     image && (imagePosition === 'bottom' || imagePosition === 'right') && {
       t: 'img',
       a: {
-        class: `bw-card-img-${imagePosition}`,
+        class: `bw_card_img_${imagePosition}`,
         src: image.src,
         alt: image.alt || ''
       }
     },
     footer && {
       t: 'div',
-      a: { class: `bw-card-footer ${footerClass}`.trim() },
+      a: { class: `bw_card_footer ${footerClass}`.trim() },
       c: footer
     }
   ].filter(Boolean);
@@ -135,7 +167,7 @@ export function makeCard(props = {}) {
       a: { class: cardClasses, style },
       c: {
         t: 'div',
-        a: { class: 'bw-row bw-g-0' },
+        a: { class: 'bw_row bw_g_0' },
         c: cardContent
       },
       o: {
@@ -176,8 +208,11 @@ export function makeCard(props = {}) {
  *   variant: "success",
  *   onclick: () => console.log("saved")
  * });
+ * // String shorthand:
+ * const ok = makeButton("OK");
  */
 export function makeButton(props = {}) {
+  if (typeof props === 'string') props = { text: props };
   const {
     text,
     variant = 'primary',
@@ -194,9 +229,9 @@ export function makeButton(props = {}) {
     a: {
       type,
       class: [
-        'bw-btn',
-        `bw-btn-${variant}`,
-        size && `bw-btn-${size}`,
+        'bw_btn',
+        variantClass(variant),
+        size && `bw_btn_${size}`,
         className
       ].filter(Boolean).join(' '),
       disabled,
@@ -230,7 +265,7 @@ export function makeContainer(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-container${fluid ? '-fluid' : ''} ${className}`.trim() },
+    a: { class: `bw_container${fluid ? '-fluid' : ''} ${className}`.trim() },
     c: children
   };
 }
@@ -241,7 +276,7 @@ export function makeContainer(props = {}) {
  * @param {Object} [props] - Row configuration
  * @param {Array|Object|string} [props.children] - Child columns
  * @param {string} [props.className] - Additional CSS classes
- * @param {number} [props.gap] - Gap size (1-5) applied via bw-g-{gap} class
+ * @param {number} [props.gap] - Gap size (1-5) applied via bw_g_{gap} class
  * @returns {Object} TACO object representing a grid row
  * @category Component Builders
  * @example
@@ -256,7 +291,7 @@ export function makeRow(props = {}) {
   return {
     t: 'div',
     a: {
-      class: `bw-row ${gap ? `bw-g-${gap}` : ''} ${className}`.trim()
+      class: `bw_row ${gap ? `bw_g_${gap}` : ''} ${className}`.trim()
     },
     c: children
   };
@@ -290,20 +325,20 @@ export function makeCol(props = {}) {
     // Responsive sizes
     Object.entries(size).forEach(([breakpoint, value]) => {
       if (breakpoint === 'xs') {
-        classes.push(`bw-col-${value}`);
+        classes.push(`bw_col_${value}`);
       } else {
-        classes.push(`bw-col-${breakpoint}-${value}`);
+        classes.push(`bw_col_${breakpoint}-${value}`);
       }
     });
   } else if (size) {
-    classes.push(`bw-col-${size}`);
+    classes.push(`bw_col_${size}`);
   } else {
-    classes.push('bw-col');
+    classes.push('bw_col');
   }
 
-  if (offset) classes.push(`bw-offset-${offset}`);
-  if (push) classes.push(`bw-push-${push}`);
-  if (pull) classes.push(`bw-pull-${pull}`);
+  if (offset) classes.push(`bw_offset_${offset}`);
+  if (push) classes.push(`bw_push_${push}`);
+  if (pull) classes.push(`bw_pull_${pull}`);
 
   return {
     t: 'div',
@@ -346,16 +381,16 @@ export function makeNav(props = {}) {
   return {
     t: 'ul',
     a: {
-      class: `bw-nav ${pills ? 'bw-nav-pills' : 'bw-nav-tabs'} ${vertical ? 'bw-nav-vertical' : ''} ${className}`.trim()
+      class: `bw_nav ${pills ? 'bw_nav_pills' : 'bw_nav_tabs'} ${vertical ? 'bw_nav_vertical' : ''} ${className}`.trim()
     },
     c: items.map(item => ({
       t: 'li',
-      a: { class: 'bw-nav-item' },
+      a: { class: 'bw_nav_item' },
       c: {
         t: 'a',
         a: {
           href: item.href || '#',
-          class: `bw-nav-link ${item.active ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`.trim()
+          class: `bw_nav_link ${item.active ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`.trim()
         },
         c: item.text
       }
@@ -399,25 +434,25 @@ export function makeNavbar(props = {}) {
   return {
     t: 'nav',
     a: {
-      class: `bw-navbar ${dark ? 'bw-navbar-dark' : 'bw-navbar-light'} ${className}`.trim()
+      class: `bw_navbar ${dark ? 'bw_navbar_dark' : 'bw_navbar_light'} ${className}`.trim()
     },
     c: {
       t: 'div',
-      a: { class: 'bw-container' },
+      a: { class: 'bw_container' },
       c: [
         brand && {
           t: 'a',
-          a: { href: brandHref, class: 'bw-navbar-brand' },
+          a: { href: brandHref, class: 'bw_navbar_brand' },
           c: brand
         },
         items.length > 0 && {
           t: 'div',
-          a: { class: 'bw-navbar-nav' },
+          a: { class: 'bw_navbar_nav' },
           c: items.map(item => ({
             t: 'a',
             a: {
               href: item.href || '#',
-              class: `bw-nav-link ${item.active ? 'active' : ''}`
+              class: `bw_nav_link ${item.active ? 'active' : ''}`
             },
             c: item.text
           }))
@@ -468,35 +503,38 @@ export function makeTabs(props = {}) {
 
   return {
     t: 'div',
-    a: { class: 'bw-tabs' },
+    a: { class: 'bw_tabs' },
     c: [
       {
         t: 'ul',
-        a: { class: 'bw-nav bw-nav-tabs', role: 'tablist' },
+        a: { class: 'bw_nav bw_nav_tabs', role: 'tablist' },
         c: tabs.map((tab, index) => ({
           t: 'li',
-          a: { class: 'bw-nav-item', role: 'presentation' },
+          a: { class: 'bw_nav_item', role: 'presentation' },
           c: {
             t: 'button',
             a: {
-              class: `bw-nav-link ${index === actualActiveIndex ? 'active' : ''}`,
+              class: `bw_nav_link ${index === actualActiveIndex ? 'active' : ''}`,
               type: 'button',
               role: 'tab',
+              tabindex: index === actualActiveIndex ? '0' : '-1',
               'aria-selected': index === actualActiveIndex ? 'true' : 'false',
               'data-tab-index': index,
               onclick: (e) => {
-                const tabsContainer = e.target.closest('.bw-tabs');
-                const allTabs = tabsContainer.querySelectorAll('.bw-nav-link');
-                const allPanes = tabsContainer.querySelectorAll('.bw-tab-pane');
+                const tabsContainer = e.target.closest('.bw_tabs');
+                const allTabs = tabsContainer.querySelectorAll('.bw_nav_link');
+                const allPanes = tabsContainer.querySelectorAll('.bw_tab_pane');
 
                 allTabs.forEach(t => {
                   t.classList.remove('active');
                   t.setAttribute('aria-selected', 'false');
+                  t.setAttribute('tabindex', '-1');
                 });
                 allPanes.forEach(p => p.classList.remove('active'));
 
                 e.target.classList.add('active');
                 e.target.setAttribute('aria-selected', 'true');
+                e.target.setAttribute('tabindex', '0');
                 const targetIndex = parseInt(e.target.getAttribute('data-tab-index'));
                 allPanes[targetIndex].classList.add('active');
               }
@@ -507,11 +545,11 @@ export function makeTabs(props = {}) {
       },
       {
         t: 'div',
-        a: { class: 'bw-tab-content' },
+        a: { class: 'bw_tab_content' },
         c: tabs.map((tab, index) => ({
           t: 'div',
           a: {
-            class: `bw-tab-pane ${index === actualActiveIndex ? 'active' : ''}`,
+            class: `bw_tab_pane ${index === actualActiveIndex ? 'active' : ''}`,
             role: 'tabpanel'
           },
           c: tab.content
@@ -520,7 +558,39 @@ export function makeTabs(props = {}) {
     ],
     o: {
       type: 'tabs',
-      state: { activeIndex: actualActiveIndex }
+      state: { activeIndex: actualActiveIndex },
+      mounted: function(el) {
+        var tablist = el.querySelector('[role="tablist"]');
+        if (!tablist) return;
+        tablist.addEventListener('keydown', function(e) {
+          var tabButtons = tablist.querySelectorAll('[role="tab"]');
+          var currentIndex = -1;
+          for (var i = 0; i < tabButtons.length; i++) {
+            if (tabButtons[i] === e.target) { currentIndex = i; break; }
+          }
+          if (currentIndex === -1) return;
+
+          var newIndex = -1;
+          if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            newIndex = currentIndex > 0 ? currentIndex - 1 : tabButtons.length - 1;
+          } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            newIndex = currentIndex < tabButtons.length - 1 ? currentIndex + 1 : 0;
+          } else if (e.key === 'Home') {
+            e.preventDefault();
+            newIndex = 0;
+          } else if (e.key === 'End') {
+            e.preventDefault();
+            newIndex = tabButtons.length - 1;
+          }
+
+          if (newIndex >= 0) {
+            tabButtons[newIndex].focus();
+            tabButtons[newIndex].click();
+          }
+        });
+      }
     }
   };
 }
@@ -541,8 +611,11 @@ export function makeTabs(props = {}) {
  *   variant: "success",
  *   dismissible: true
  * });
+ * // String shorthand:
+ * const msg = makeAlert("Something happened");
  */
 export function makeAlert(props = {}) {
+  if (typeof props === 'string') props = { content: props };
   const {
     content,
     variant = 'info',
@@ -553,7 +626,7 @@ export function makeAlert(props = {}) {
   return {
     t: 'div',
     a: {
-      class: `bw-alert bw-alert-${variant} ${dismissible ? 'bw-alert-dismissible' : ''} ${className}`.trim(),
+      class: `bw_alert ${variantClass(variant)} ${dismissible ? 'bw_alert_dismissible' : ''} ${className}`.trim(),
       role: 'alert'
     },
     c: [
@@ -562,10 +635,10 @@ export function makeAlert(props = {}) {
         t: 'button',
         a: {
           type: 'button',
-          class: 'bw-close',
+          class: 'bw_close',
           'aria-label': 'Close',
           onclick: function(e) {
-            var alert = e.target.closest('.bw-alert');
+            var alert = e.target.closest('.bw_alert');
             if (alert) { alert.remove(); }
           }
         },
@@ -589,8 +662,11 @@ export function makeAlert(props = {}) {
  * @example
  * const badge = makeBadge({ text: "New", variant: "danger", pill: true });
  * const small = makeBadge({ text: "3", variant: "info", size: "sm" });
+ * // String shorthand:
+ * const tag = makeBadge("New");
  */
 export function makeBadge(props = {}) {
+  if (typeof props === 'string') props = { text: props };
   const {
     text,
     variant = 'primary',
@@ -599,12 +675,12 @@ export function makeBadge(props = {}) {
     className = ''
   } = props;
 
-  const sizeClass = size === 'sm' ? ' bw-badge-sm' : size === 'lg' ? ' bw-badge-lg' : '';
+  const sizeClass = size === 'sm' ? ' bw_badge_sm' : size === 'lg' ? ' bw_badge_lg' : '';
 
   return {
     t: 'span',
     a: {
-      class: `bw-badge bw-badge-${variant}${sizeClass} ${pill ? 'bw-badge-pill' : ''} ${className}`.trim()
+      class: `bw_badge ${variantClass(variant)}${sizeClass} ${pill ? 'bw_badge_pill' : ''} ${className}`.trim()
     },
     c: text
   };
@@ -647,17 +723,17 @@ export function makeProgress(props = {}) {
   return {
     t: 'div',
     a: {
-      class: 'bw-progress',
+      class: 'bw_progress',
       style: height ? { height: `${height}px` } : undefined
     },
     c: {
       t: 'div',
       a: {
         class: [
-          'bw-progress-bar',
-          `bw-progress-bar-${variant}`,
-          striped && 'bw-progress-bar-striped',
-          animated && 'bw-progress-bar-animated'
+          'bw_progress_bar',
+          variantClass(variant),
+          striped && 'bw_progress_bar_striped',
+          animated && 'bw_progress_bar_animated'
         ].filter(Boolean).join(' '),
         role: 'progressbar',
         style: { width: `${percentage}%` },
@@ -703,7 +779,7 @@ export function makeListGroup(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-list-group ${flush ? 'bw-list-group-flush' : ''}`.trim() },
+    a: { class: `bw_list_group ${flush ? 'bw_list_group_flush' : ''}`.trim() },
     c: items.map(item => {
       const isObject = typeof item === 'object';
       const text = isObject ? item.text : item;
@@ -718,7 +794,7 @@ export function makeListGroup(props = {}) {
           t: 'a',
           a: {
             class: [
-              'bw-list-group-item',
+              'bw_list_group_item',
               active && 'active',
               disabled && 'disabled'
             ].filter(Boolean).join(' '),
@@ -737,7 +813,7 @@ export function makeListGroup(props = {}) {
         t: 'div',
         a: {
           class: [
-            'bw-list-group-item',
+            'bw_list_group_item',
             active && 'active',
             disabled && 'disabled'
           ].filter(Boolean).join(' ')
@@ -778,11 +854,11 @@ export function makeBreadcrumb(props = {}) {
     a: { 'aria-label': 'breadcrumb' },
     c: {
       t: 'ol',
-      a: { class: 'bw-breadcrumb' },
+      a: { class: 'bw_breadcrumb' },
       c: items.map((item, index) => ({
         t: 'li',
         a: {
-          class: `bw-breadcrumb-item ${item.active ? 'active' : ''}`,
+          class: `bw_breadcrumb_item ${item.active ? 'active' : ''}`,
           'aria-current': item.active ? 'page' : undefined
         },
         c: item.active ? item.text : {
@@ -827,13 +903,16 @@ export function makeForm(props = {}) {
 }
 
 /**
- * Create a form group with label, input, and optional help text
+ * Create a form group with label, input, optional help text and validation feedback
  *
  * @param {Object} [props] - Form group configuration
  * @param {string} [props.label] - Label text
  * @param {Object} [props.input] - Input TACO object (from makeInput, makeSelect, etc.)
  * @param {string} [props.help] - Help text displayed below the input
  * @param {string} [props.id] - Input ID (links label to input via for/id)
+ * @param {string} [props.validation] - Validation state ("valid" or "invalid")
+ * @param {string} [props.feedback] - Validation feedback text shown below input
+ * @param {boolean} [props.required=false] - Show required indicator (*) on label
  * @returns {Object} TACO object representing a form group
  * @category Component Builders
  * @example
@@ -841,25 +920,41 @@ export function makeForm(props = {}) {
  *   label: "Email",
  *   id: "email",
  *   input: makeInput({ type: "email", id: "email", placeholder: "you@example.com" }),
- *   help: "We'll never share your email."
+ *   validation: "invalid",
+ *   feedback: "Please enter a valid email address."
  * });
  */
 export function makeFormGroup(props = {}) {
-  const { label, input, help, id } = props;
+  var { label, input, help, id, validation, feedback, required } = props;
+
+  // Shallow-clone input TACO to add validation class without mutating original
+  var styledInput = input;
+  if (validation && input && input.a) {
+    styledInput = { t: input.t, a: Object.assign({}, input.a), c: input.c, o: input.o };
+    var validClass = validation === 'valid' ? 'bw_is_valid' : validation === 'invalid' ? 'bw_is_invalid' : '';
+    if (validClass) {
+      styledInput.a.class = ((styledInput.a.class || '') + ' ' + validClass).trim();
+    }
+  }
 
   return {
     t: 'div',
-    a: { class: 'bw-form-group' },
+    a: { class: 'bw_form_group' },
     c: [
       label && {
         t: 'label',
-        a: { for: id, class: 'bw-form-label' },
-        c: label
+        a: { for: id, class: 'bw_form_label' },
+        c: required ? [label, { t: 'span', a: { class: 'bw_text_danger bw_ms_1' }, c: '*' }] : label
+      },
+      styledInput,
+      feedback && validation && {
+        t: 'div',
+        a: { class: validation === 'valid' ? 'bw_valid_feedback' : 'bw_invalid_feedback' },
+        c: feedback
       },
-      input,
       help && {
         t: 'small',
-        a: { class: 'bw-form-text bw-text-muted' },
+        a: { class: 'bw_form_text bw_text_muted' },
         c: help
       }
     ].filter(Boolean)
@@ -912,7 +1007,7 @@ export function makeInput(props = {}) {
     t: 'input',
     a: {
       type,
-      class: `bw-form-control ${className}`.trim(),
+      class: `bw_form_control ${className}`.trim(),
       placeholder,
       value,
       id,
@@ -965,7 +1060,7 @@ export function makeTextarea(props = {}) {
   return {
     t: 'textarea',
     a: {
-      class: `bw-form-control ${className}`.trim(),
+      class: `bw_form_control ${className}`.trim(),
       placeholder,
       rows,
       id,
@@ -1019,7 +1114,7 @@ export function makeSelect(props = {}) {
   return {
     t: 'select',
     a: {
-      class: `bw-form-control ${className}`.trim(),
+      class: `bw_form_control ${className}`.trim(),
       id,
       name,
       disabled,
@@ -1070,13 +1165,13 @@ export function makeCheckbox(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-form-check ${className}`.trim() },
+    a: { class: `bw_form_check ${className}`.trim() },
     c: [
       {
         t: 'input',
         a: {
           type: 'checkbox',
-          class: 'bw-form-check-input',
+          class: 'bw_form_check_input',
           checked,
           id,
           name,
@@ -1087,7 +1182,7 @@ export function makeCheckbox(props = {}) {
       },
       label && {
         t: 'label',
-        a: { class: 'bw-form-check-label', for: id },
+        a: { class: 'bw_form_check_label', for: id },
         c: label
       }
     ].filter(Boolean)
@@ -1125,7 +1220,7 @@ export function makeStack(props = {}) {
   return {
     t: 'div',
     a: {
-      class: `bw-${direction === 'vertical' ? 'vstack' : 'hstack'} bw-gap-${gap} ${className}`.trim()
+      class: `bw_${direction === 'vertical' ? 'vstack' : 'hstack'} bw_gap_${gap} ${className}`.trim()
     },
     c: children
   };
@@ -1153,12 +1248,12 @@ export function makeSpinner(props = {}) {
   return {
     t: 'div',
     a: {
-      class: `bw-spinner-${type} bw-spinner-${type}-${size} bw-text-${variant}`,
+      class: `bw_spinner_${type} bw_spinner_${type}-${size} ${variantClass(variant)}`,
       role: 'status'
     },
     c: {
       t: 'span',
-      a: { class: 'bw-visually-hidden' },
+      a: { class: 'bw_visually_hidden' },
       c: 'Loading...'
     }
   };
@@ -1209,44 +1304,44 @@ export function makeHero(props = {}) {
   } = props;
 
   const sizeClasses = {
-    sm: 'bw-py-3',
-    md: 'bw-py-4',
-    lg: 'bw-py-5',
-    xl: 'bw-py-6'
+    sm: 'bw_py_3',
+    md: 'bw_py_4',
+    lg: 'bw_py_5',
+    xl: 'bw_py_6'
   };
 
   return {
     t: 'section',
     a: {
-      class: `bw-hero bw-hero-${variant} ${sizeClasses[size] || sizeClasses.lg} ${centered ? 'bw-text-center' : ''} ${className}`.trim(),
+      class: `bw_hero ${variantClass(variant)} ${sizeClasses[size] || sizeClasses.lg} ${centered ? 'bw_text_center' : ''} ${className}`.trim(),
       style: backgroundImage ? `background-image: url('${backgroundImage}'); background-size: cover; background-position: center;` : undefined
     },
     c: [
       overlay && {
         t: 'div',
-        a: { class: 'bw-hero-overlay' }
+        a: { class: 'bw_hero_overlay' }
       },
       {
         t: 'div',
-        a: { class: 'bw-container' },
+        a: { class: 'bw_container' },
         c: {
           t: 'div',
-          a: { class: 'bw-hero-content' },
+          a: { class: 'bw_hero_content' },
           c: [
             title && {
               t: 'h1',
-              a: { class: 'bw-hero-title bw-display-4 bw-mb-3' },
+              a: { class: 'bw_hero_title bw_display_4 bw_mb_3' },
               c: title
             },
             subtitle && {
               t: 'p',
-              a: { class: 'bw-hero-subtitle bw-lead bw-mb-4' },
+              a: { class: 'bw_hero_subtitle bw_lead bw_mb_4' },
               c: subtitle
             },
             content,
             actions && {
               t: 'div',
-              a: { class: 'bw-hero-actions bw-mt-4' },
+              a: { class: 'bw_hero_actions bw_mt_4' },
               c: actions
             }
           ].filter(Boolean)
@@ -1292,37 +1387,37 @@ export function makeFeatureGrid(props = {}) {
     className = ''
   } = props;
 
-  const colClass = `bw-col-md-${12/columns}`;
+  const colClass = `bw_col_md_${12/columns}`;
 
   return {
     t: 'div',
-    a: { class: `bw-feature-grid ${className}`.trim() },
+    a: { class: `bw_feature_grid ${className}`.trim() },
     c: {
       t: 'div',
-      a: { class: 'bw-row bw-g-4' },
+      a: { class: 'bw_row bw_g_4' },
       c: features.map(feature => ({
         t: 'div',
         a: { class: colClass },
         c: {
           t: 'div',
-          a: { class: `bw-feature ${centered ? 'bw-text-center' : ''}` },
+          a: { class: `bw_feature ${centered ? 'bw_text_center' : ''}` },
           c: [
             feature.icon && {
               t: 'div',
               a: {
-                class: 'bw-feature-icon bw-mb-3 bw-text-primary',
+                class: 'bw_feature_icon bw_mb_3 bw_text_primary',
                 style: `font-size: ${iconSize};`
               },
               c: feature.icon
             },
             feature.title && {
               t: 'h3',
-              a: { class: 'bw-feature-title bw-h5 bw-mb-2' },
+              a: { class: 'bw_feature_title bw_h5 bw_mb_2' },
               c: feature.title
             },
             feature.description && {
               t: 'p',
-              a: { class: 'bw-feature-description bw-text-muted' },
+              a: { class: 'bw_feature_description bw_text_muted' },
               c: feature.description
             }
           ].filter(Boolean)
@@ -1366,19 +1461,19 @@ export function makeCTA(props = {}) {
 
   return {
     t: 'section',
-    a: { class: `bw-cta bw-bg-${variant} bw-py-5 ${className}`.trim() },
+    a: { class: `bw_cta bw_bg_${variant} bw_py_5 ${className}`.trim() },
     c: {
       t: 'div',
-      a: { class: 'bw-container' },
+      a: { class: 'bw_container' },
       c: {
         t: 'div',
-        a: { class: `bw-cta-content ${centered ? 'bw-text-center' : ''}` },
+        a: { class: `bw_cta_content ${centered ? 'bw_text_center' : ''}` },
         c: [
-          title && { t: 'h2', a: { class: 'bw-cta-title bw-mb-3' }, c: title },
-          description && { t: 'p', a: { class: 'bw-cta-description bw-lead bw-mb-4' }, c: description },
+          title && { t: 'h2', a: { class: 'bw_cta_title bw_mb_3' }, c: title },
+          description && { t: 'p', a: { class: 'bw_cta_description bw_lead bw_mb_4' }, c: description },
           actions && {
             t: 'div',
-            a: { class: 'bw-cta-actions' },
+            a: { class: 'bw_cta_actions' },
             c: actions
           }
         ].filter(Boolean)
@@ -1418,27 +1513,27 @@ export function makeSection(props = {}) {
   } = props;
 
   const spacingClasses = {
-    sm: 'bw-py-3',
-    md: 'bw-py-4',
-    lg: 'bw-py-5',
-    xl: 'bw-py-6'
+    sm: 'bw_py_3',
+    md: 'bw_py_4',
+    lg: 'bw_py_5',
+    xl: 'bw_py_6'
   };
 
   return {
     t: 'section',
     a: {
-      class: `bw-section ${spacingClasses[spacing] || spacingClasses.md} ${variant !== 'default' ? `bw-bg-${variant}` : ''} ${className}`.trim()
+      class: `bw_section ${spacingClasses[spacing] || spacingClasses.md} ${variant !== 'default' ? `bw_bg_${variant}` : ''} ${className}`.trim()
     },
     c: {
       t: 'div',
-      a: { class: 'bw-container' },
+      a: { class: 'bw_container' },
       c: [
         (title || subtitle) && {
           t: 'div',
-          a: { class: 'bw-section-header bw-text-center bw-mb-5' },
+          a: { class: 'bw_section_header bw_text_center bw_mb_5' },
           c: [
-            title && { t: 'h2', a: { class: 'bw-section-title' }, c: title },
-            subtitle && { t: 'p', a: { class: 'bw-section-subtitle bw-text-muted' }, c: subtitle }
+            title && { t: 'h2', a: { class: 'bw_section_title' }, c: title },
+            subtitle && { t: 'p', a: { class: 'bw_section_subtitle bw_text_muted' }, c: subtitle }
           ].filter(Boolean)
         },
         content
@@ -1455,317 +1550,9 @@ export function makeSection(props = {}) {
 // full re-renders. Used by bw.createCard(), bw.createTable(), etc.
 // =========================================================================
 
-/**
- * Imperative handle for a rendered card component
- *
- * Provides methods to update card title, content, and CSS classes
- * without re-rendering the entire component. Created automatically
- * when using bw.createCard().
- *
- * @category Component Handles
- */
-export class CardHandle {
-  /**
-   * @param {Element} element - The card's root DOM element
-   * @param {Object} taco - The original TACO object used to create the card
-   */
-  constructor(element, taco) {
-    this.element = element;
-    this._taco = taco;
-    this.state = taco.o?.state || {};
-
-    // Cache child elements
-    this.children = {
-      header: element.querySelector('.bw-card-header'),
-      title: element.querySelector('.bw-card-title'),
-      body: element.querySelector('.bw-card-body'),
-      footer: element.querySelector('.bw-card-footer')
-    };
-  }
-
-  /**
-   * Update the card title text
-   *
-   * @param {string} title - New title text
-   * @returns {CardHandle} this (for chaining)
-   */
-  setTitle(title) {
-    if (this.children.title) {
-      this.children.title.textContent = title;
-    }
-    return this;
-  }
-
-  /**
-   * Replace the card body content
-   *
-   * @param {string|Object} content - New content (string or TACO object)
-   * @returns {CardHandle} this (for chaining)
-   */
-  setContent(content) {
-    if (this.children.body) {
-      if (typeof content === 'string') {
-        this.children.body.textContent = content;
-      } else {
-        // Re-render content
-        this.children.body.innerHTML = '';
-        const newContent = window.bw.taco.toDOM(content);
-        this.children.body.appendChild(newContent);
-      }
-    }
-    return this;
-  }
-
-  /**
-   * Add a CSS class to the card root element
-   *
-   * @param {string} className - Class to add
-   * @returns {CardHandle} this (for chaining)
-   */
-  addClass(className) {
-    this.element.classList.add(className);
-    return this;
-  }
-
-  /**
-   * Remove a CSS class from the card root element
-   *
-   * @param {string} className - Class to remove
-   * @returns {CardHandle} this (for chaining)
-   */
-  removeClass(className) {
-    this.element.classList.remove(className);
-    return this;
-  }
-
-  /**
-   * Query a child element within the card
-   *
-   * @param {string} selector - CSS selector
-   * @returns {Element|null} Matching element or null
-   */
-  select(selector) {
-    return this.element.querySelector(selector);
-  }
-}
-
-/**
- * Imperative handle for a rendered table component
- *
- * Provides methods for data updates and column sorting. Caches
- * thead/tbody/header references for efficient DOM updates.
- * Created automatically when using bw.createTable().
- *
- * @category Component Handles
- */
-export class TableHandle {
-  /**
-   * @param {Element} element - The table's root DOM element
-   * @param {Object} taco - The original TACO object used to create the table
-   */
-  constructor(element, taco) {
-    this.element = element;
-    this._taco = taco;
-    this.state = taco.o?.state || {};
-    this._data = this.state.data || [];
-    this._sortColumn = null;
-    this._sortDirection = 'asc';
-
-    // Cache elements
-    this.children = {
-      thead: element.querySelector('thead'),
-      tbody: element.querySelector('tbody'),
-      headers: element.querySelectorAll('th')
-    };
-
-    // Set up sorting if enabled
-    if (this.state.sortable) {
-      this._setupSorting();
-    }
-  }
-
-  /**
-   * Attach click-to-sort handlers on all column headers
-   * @private
-   */
-  _setupSorting() {
-    this.children.headers.forEach((th, index) => {
-      th.style.cursor = 'pointer';
-      th.onclick = () => this.sortBy(th.textContent);
-    });
-  }
-
-  /**
-   * Replace the table data and re-render the body
-   *
-   * @param {Array<Object>} data - Array of row objects
-   * @returns {TableHandle} this (for chaining)
-   */
-  setData(data) {
-    this._data = data;
-    this._renderBody();
-    return this;
-  }
-
-  /**
-   * Sort the table by a column name
-   *
-   * Toggles direction if the same column is sorted again.
-   *
-   * @param {string} column - Column header text to sort by
-   * @param {string} [direction] - Sort direction ("asc" or "desc"); toggles if omitted
-   * @returns {TableHandle} this (for chaining)
-   */
-  sortBy(column, direction) {
-    if (column === this._sortColumn && !direction) {
-      this._sortDirection = this._sortDirection === 'asc' ? 'desc' : 'asc';
-    } else {
-      this._sortColumn = column;
-      this._sortDirection = direction || 'asc';
-    }
-
-    const columnKey = Object.keys(this._data[0])[
-      Array.from(this.children.headers).findIndex(th => th.textContent === column)
-    ];
-
-    this._data.sort((a, b) => {
-      const aVal = a[columnKey];
-      const bVal = b[columnKey];
-      const result = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
-      return this._sortDirection === 'asc' ? result : -result;
-    });
-
-    this._renderBody();
-    return this;
-  }
-
-  /**
-   * Re-render the tbody from current _data
-   * @private
-   */
-  _renderBody() {
-    this.children.tbody.innerHTML = '';
-    this._data.forEach(row => {
-      const tr = document.createElement('tr');
-      Object.values(row).forEach(value => {
-        const td = document.createElement('td');
-        td.textContent = value;
-        tr.appendChild(td);
-      });
-      this.children.tbody.appendChild(tr);
-    });
-  }
-}
-
-/**
- * Imperative handle for a rendered navbar component
- *
- * Provides methods to update the active navigation link.
- * Created automatically when using bw.createNavbar().
- *
- * @category Component Handles
- */
-export class NavbarHandle {
-  /**
-   * @param {Element} element - The navbar's root DOM element
-   * @param {Object} taco - The original TACO object used to create the navbar
-   */
-  constructor(element, taco) {
-    this.element = element;
-    this._taco = taco;
-    this.state = taco.o?.state || {};
-
-    this.children = {
-      brand: element.querySelector('.bw-navbar-brand'),
-      links: element.querySelectorAll('.bw-nav-link')
-    };
-  }
-
-  /**
-   * Set the active navigation link by href
-   *
-   * @param {string} href - The href value of the link to activate
-   * @returns {NavbarHandle} this (for chaining)
-   */
-  setActive(href) {
-    this.children.links.forEach(link => {
-      if (link.getAttribute('href') === href) {
-        link.classList.add('active');
-      } else {
-        link.classList.remove('active');
-      }
-    });
-    return this;
-  }
-}
-
-/**
- * Imperative handle for a rendered tabs component
- *
- * Provides programmatic tab switching. Sets up click handlers
- * on tab buttons and manages active states on both buttons and panes.
- * Created automatically when using bw.createTabs().
- *
- * @category Component Handles
- */
-export class TabsHandle {
-  /**
-   * @param {Element} element - The tabs container DOM element
-   * @param {Object} taco - The original TACO object used to create the tabs
-   */
-  constructor(element, taco) {
-    this.element = element;
-    this._taco = taco;
-    this.state = taco.o?.state || {};
-
-    this.children = {
-      navItems: element.querySelectorAll('.bw-nav-link'),
-      tabPanes: element.querySelectorAll('.bw-tab-pane')
-    };
-
-    this._setupTabs();
-  }
-
-  /**
-   * Attach click handlers to tab navigation buttons
-   * @private
-   */
-  _setupTabs() {
-    this.children.navItems.forEach((navItem, index) => {
-      navItem.onclick = (e) => {
-        e.preventDefault();
-        this.switchTo(index);
-      };
-    });
-  }
-
-  /**
-   * Programmatically switch to a tab by index
-   *
-   * @param {number} index - Zero-based tab index to activate
-   * @returns {TabsHandle} this (for chaining)
-   */
-  switchTo(index) {
-    this.children.navItems.forEach((item, i) => {
-      if (i === index) {
-        item.classList.add('active');
-      } else {
-        item.classList.remove('active');
-      }
-    });
-
-    this.children.tabPanes.forEach((pane, i) => {
-      if (i === index) {
-        pane.classList.add('active');
-      } else {
-        pane.classList.remove('active');
-      }
-    });
-
-    this.state.activeIndex = index;
-    return this;
-  }
-}
+// Handle classes (CardHandle, TableHandle, NavbarHandle, TabsHandle)
+// removed in v2.0.15 — superseded by ComponentHandle.
+// See dev/dead-code-elimination-v2.0.15.md for recovery.
 
 /**
  * Create a code demo component for documentation pages
@@ -1820,18 +1607,16 @@ export function makeCodeDemo(props = {}) {
           {
             t: 'button',
             a: {
-              class: 'bw-copy-btn bw-code-copy-btn',
-              onclick: (e) => {
-                navigator.clipboard.writeText(code).then(() => {
-                  const btn = e.target;
-                  const originalText = btn.textContent;
+              class: 'bw_copy_btn bw_code_copy_btn',
+              onclick: function(e) {
+                navigator.clipboard.writeText(code).then(function() {
+                  var btn = e.target;
+                  var originalText = btn.textContent;
                   btn.textContent = 'Copied!';
-                  btn.style.background = '#006666';
-                  btn.style.color = '#fff';
-                  setTimeout(() => {
+                  btn.classList.add('bw_code_copy_btn_copied');
+                  setTimeout(function() {
                     btn.textContent = originalText;
-                    btn.style.background = 'rgba(255,255,255,0.12)';
-                    btn.style.color = '#aaa';
+                    btn.classList.remove('bw_code_copy_btn_copied');
                   }, 2000);
                 });
               }
@@ -1842,10 +1627,10 @@ export function makeCodeDemo(props = {}) {
             ? globalThis.bw.codeEditor({ code: code, lang: language === 'javascript' ? 'js' : language, readOnly: true, height: 'auto' })
             : {
                 t: 'pre',
-                a: { class: 'bw-code-pre' },
+                a: { class: 'bw_code_pre' },
                 c: {
                   t: 'code',
-                  a: { class: `bw-code-block language-${language}` },
+                  a: { class: `bw_code_block language-${language}` },
                   c: code
                 }
               }
@@ -1858,7 +1643,7 @@ export function makeCodeDemo(props = {}) {
     title && { t: 'h3', c: title },
     description && {
       t: 'p',
-      a: { class: 'bw-text-muted', style: 'margin-bottom: 1rem;' },
+      a: { class: 'bw_text_muted bw_mb_3' },
       c: description
     },
     makeTabs({ tabs, id: demoId })
@@ -1866,7 +1651,7 @@ export function makeCodeDemo(props = {}) {
 
   return {
     t: 'div',
-    a: { class: 'bw-code-demo' },
+    a: { class: 'bw_code_demo' },
     c: content
   };
 }
@@ -1923,10 +1708,10 @@ export function makePagination(props = {}) {
   // Previous arrow
   items.push({
     t: 'li',
-    a: { class: `bw-page-item ${currentPage <= 1 ? 'bw-disabled' : ''}`.trim() },
+    a: { class: `bw_page_item ${currentPage <= 1 ? 'bw_disabled' : ''}`.trim() },
     c: {
       t: 'a',
-      a: { class: 'bw-page-link', href: '#', onclick: handleClick(currentPage - 1), 'aria-label': 'Previous' },
+      a: { class: 'bw_page_link', href: '#', onclick: handleClick(currentPage - 1), 'aria-label': 'Previous' },
       c: '\u2039'
     }
   });
@@ -1936,10 +1721,10 @@ export function makePagination(props = {}) {
     (function(pageNum) {
       items.push({
         t: 'li',
-        a: { class: `bw-page-item ${pageNum === currentPage ? 'bw-active' : ''}`.trim() },
+        a: { class: `bw_page_item ${pageNum === currentPage ? 'bw_active' : ''}`.trim() },
         c: {
           t: 'a',
-          a: { class: 'bw-page-link', href: '#', onclick: handleClick(pageNum) },
+          a: { class: 'bw_page_link', href: '#', onclick: handleClick(pageNum) },
           c: '' + pageNum
         }
       });
@@ -1949,10 +1734,10 @@ export function makePagination(props = {}) {
   // Next arrow
   items.push({
     t: 'li',
-    a: { class: `bw-page-item ${currentPage >= pages ? 'bw-disabled' : ''}`.trim() },
+    a: { class: `bw_page_item ${currentPage >= pages ? 'bw_disabled' : ''}`.trim() },
     c: {
       t: 'a',
-      a: { class: 'bw-page-link', href: '#', onclick: handleClick(currentPage + 1), 'aria-label': 'Next' },
+      a: { class: 'bw_page_link', href: '#', onclick: handleClick(currentPage + 1), 'aria-label': 'Next' },
       c: '\u203A'
     }
   });
@@ -1963,7 +1748,7 @@ export function makePagination(props = {}) {
     c: {
       t: 'ul',
       a: {
-        class: `bw-pagination ${size ? 'bw-pagination-' + size : ''} ${className}`.trim()
+        class: `bw_pagination ${size ? 'bw_pagination_' + size : ''} ${className}`.trim()
       },
       c: items
     }
@@ -2005,13 +1790,13 @@ export function makeRadio(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-form-check ${className}`.trim() },
+    a: { class: `bw_form_check ${className}`.trim() },
     c: [
       {
         t: 'input',
         a: {
           type: 'radio',
-          class: 'bw-form-check-input',
+          class: 'bw_form_check_input',
           name,
           value,
           checked,
@@ -2022,7 +1807,7 @@ export function makeRadio(props = {}) {
       },
       label && {
         t: 'label',
-        a: { class: 'bw-form-check-label', for: id },
+        a: { class: 'bw_form_check_label', for: id },
         c: label
       }
     ].filter(Boolean)
@@ -2059,7 +1844,7 @@ export function makeButtonGroup(props = {}) {
   return {
     t: 'div',
     a: {
-      class: `${vertical ? 'bw-btn-group-vertical' : 'bw-btn-group'} ${size ? 'bw-btn-group-' + size : ''} ${className}`.trim(),
+      class: `${vertical ? 'bw_btn_group_vertical' : 'bw_btn_group'} ${size ? 'bw_btn_group_' + size : ''} ${className}`.trim(),
       role: 'group'
     },
     c: children
@@ -2099,53 +1884,71 @@ export function makeAccordion(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-accordion ${className}`.trim() },
+    a: { class: `bw_accordion ${className}`.trim() },
     c: items.map(function(item, index) {
       return {
         t: 'div',
-        a: { class: 'bw-accordion-item' },
+        a: { class: 'bw_accordion_item' },
         c: [
           {
             t: 'h2',
-            a: { class: 'bw-accordion-header' },
+            a: { class: 'bw_accordion_header' },
             c: {
               t: 'button',
               a: {
-                class: `bw-accordion-button ${item.open ? '' : 'bw-collapsed'}`.trim(),
+                class: `bw_accordion_button ${item.open ? '' : 'bw_collapsed'}`.trim(),
                 type: 'button',
                 'aria-expanded': item.open ? 'true' : 'false',
                 'data-accordion-index': index,
                 onclick: function(e) {
-                  var btn = e.target.closest('.bw-accordion-button');
-                  var accordionEl = btn.closest('.bw-accordion');
-                  var accordionItem = btn.closest('.bw-accordion-item');
-                  var collapse = accordionItem.querySelector('.bw-accordion-collapse');
-                  var isOpen = collapse.classList.contains('bw-collapse-show');
+                  var btn = e.target.closest('.bw_accordion_button');
+                  var accordionEl = btn.closest('.bw_accordion');
+                  var accordionItem = btn.closest('.bw_accordion_item');
+                  var collapse = accordionItem.querySelector('.bw_accordion_collapse');
+                  var isOpen = collapse.classList.contains('bw_collapse_show');
 
                   if (!multiOpen) {
-                    // Close all siblings
-                    var allCollapses = accordionEl.querySelectorAll('.bw-accordion-collapse');
-                    var allButtons = accordionEl.querySelectorAll('.bw-accordion-button');
-                    for (var j = 0; j < allCollapses.length; j++) {
-                      allCollapses[j].classList.remove('bw-collapse-show');
-                      allCollapses[j].style.maxHeight = null;
-                    }
-                    for (var k = 0; k < allButtons.length; k++) {
-                      allButtons[k].classList.add('bw-collapsed');
-                      allButtons[k].setAttribute('aria-expanded', 'false');
+                    // Animate-close all other open siblings
+                    var allItems = accordionEl.querySelectorAll('.bw_accordion_item');
+                    for (var j = 0; j < allItems.length; j++) {
+                      if (allItems[j] === accordionItem) continue;
+                      var sibCollapse = allItems[j].querySelector('.bw_accordion_collapse');
+                      var sibBtn = allItems[j].querySelector('.bw_accordion_button');
+                      if (sibCollapse.classList.contains('bw_collapse_show')) {
+                        sibCollapse.style.maxHeight = sibCollapse.scrollHeight + 'px';
+                        sibCollapse.offsetHeight; // force reflow
+                        sibCollapse.style.maxHeight = '0px';
+                        sibCollapse.classList.remove('bw_collapse_show');
+                        sibBtn.classList.add('bw_collapsed');
+                        sibBtn.setAttribute('aria-expanded', 'false');
+                      }
                     }
                   }
 
                   if (isOpen) {
-                    collapse.classList.remove('bw-collapse-show');
-                    collapse.style.maxHeight = null;
-                    btn.classList.add('bw-collapsed');
+                    // Animate close
+                    collapse.style.maxHeight = collapse.scrollHeight + 'px';
+                    collapse.offsetHeight; // force reflow
+                    collapse.style.maxHeight = '0px';
+                    collapse.classList.remove('bw_collapse_show');
+                    btn.classList.add('bw_collapsed');
                     btn.setAttribute('aria-expanded', 'false');
                   } else {
-                    collapse.classList.add('bw-collapse-show');
+                    // Animate open
+                    collapse.classList.add('bw_collapse_show');
+                    collapse.style.maxHeight = '0px';
+                    collapse.offsetHeight; // force reflow
                     collapse.style.maxHeight = collapse.scrollHeight + 'px';
-                    btn.classList.remove('bw-collapsed');
+                    btn.classList.remove('bw_collapsed');
                     btn.setAttribute('aria-expanded', 'true');
+                    // After transition, allow dynamic content sizing
+                    var onEnd = function(ev) {
+                      if (ev.propertyName === 'max-height' && collapse.classList.contains('bw_collapse_show')) {
+                        collapse.style.maxHeight = 'none';
+                      }
+                      collapse.removeEventListener('transitionend', onEnd);
+                    };
+                    collapse.addEventListener('transitionend', onEnd);
                   }
                 }
               },
@@ -2154,15 +1957,15 @@ export function makeAccordion(props = {}) {
           },
           {
             t: 'div',
-            a: { class: `bw-accordion-collapse ${item.open ? 'bw-collapse-show' : ''}`.trim() },
+            a: { class: `bw_accordion_collapse ${item.open ? 'bw_collapse_show' : ''}`.trim() },
             c: {
               t: 'div',
-              a: { class: 'bw-accordion-body' },
+              a: { class: 'bw_accordion_body' },
               c: item.content
             },
             o: item.open ? {
               mounted: function(el) {
-                el.style.maxHeight = el.scrollHeight + 'px';
+                el.style.maxHeight = 'none';
               }
             } : undefined
           }
@@ -2176,60 +1979,8 @@ export function makeAccordion(props = {}) {
   };
 }
 
-/**
- * Imperative handle for a rendered modal component
- *
- * Provides `.show()`, `.hide()`, `.toggle()`, and `.destroy()` methods
- * for controlling the modal programmatically.
- *
- * @category Component Handles
- */
-export class ModalHandle {
-  /**
-   * @param {Element} element - The modal backdrop DOM element
-   * @param {Object} taco - The original TACO object
-   */
-  constructor(element, taco) {
-    this.element = element;
-    this._taco = taco;
-    this._escHandler = null;
-  }
-
-  /** Show the modal */
-  show() {
-    this.element.classList.add('bw-modal-show');
-    document.body.style.overflow = 'hidden';
-    return this;
-  }
-
-  /** Hide the modal */
-  hide() {
-    this.element.classList.remove('bw-modal-show');
-    document.body.style.overflow = '';
-    return this;
-  }
-
-  /** Toggle modal visibility */
-  toggle() {
-    if (this.element.classList.contains('bw-modal-show')) {
-      this.hide();
-    } else {
-      this.show();
-    }
-    return this;
-  }
-
-  /** Remove the modal from DOM and clean up */
-  destroy() {
-    this.hide();
-    if (this._escHandler) {
-      document.removeEventListener('keydown', this._escHandler);
-    }
-    if (this.element.parentNode) {
-      this.element.parentNode.removeChild(this.element);
-    }
-  }
-}
+// ModalHandle removed in v2.0.15 — superseded by ComponentHandle.
+// See dev/dead-code-elimination-v2.0.15.md for recovery.
 
 /**
  * Create a modal dialog overlay
@@ -2263,9 +2014,9 @@ export function makeModal(props = {}) {
   } = props;
 
   function closeModal(el) {
-    var backdrop = el.closest('.bw-modal');
+    var backdrop = el.closest('.bw_modal');
     if (backdrop) {
-      backdrop.classList.remove('bw-modal-show');
+      backdrop.classList.remove('bw_modal_show');
       document.body.style.overflow = '';
     }
     if (onClose) onClose();
@@ -2273,24 +2024,24 @@ export function makeModal(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-modal ${className}`.trim() },
+    a: { class: `bw_modal ${className}`.trim() },
     c: {
       t: 'div',
-      a: { class: `bw-modal-dialog ${size ? 'bw-modal-' + size : ''}`.trim() },
+      a: { class: `bw_modal_dialog ${size ? 'bw_modal_' + size : ''}`.trim() },
       c: {
         t: 'div',
-        a: { class: 'bw-modal-content' },
+        a: { class: 'bw_modal_content' },
         c: [
           (title || closeButton) && {
             t: 'div',
-            a: { class: 'bw-modal-header' },
+            a: { class: 'bw_modal_header' },
             c: [
-              title && { t: 'h5', a: { class: 'bw-modal-title' }, c: title },
+              title && { t: 'h5', a: { class: 'bw_modal_title' }, c: title },
               closeButton && {
                 t: 'button',
                 a: {
                   type: 'button',
-                  class: 'bw-close',
+                  class: 'bw_close',
                   'aria-label': 'Close',
                   onclick: function(e) { closeModal(e.target); }
                 },
@@ -2300,12 +2051,12 @@ export function makeModal(props = {}) {
           },
           content && {
             t: 'div',
-            a: { class: 'bw-modal-body' },
+            a: { class: 'bw_modal_body' },
             c: content
           },
           footer && {
             t: 'div',
-            a: { class: 'bw-modal-footer' },
+            a: { class: 'bw_modal_footer' },
             c: footer
           }
         ].filter(Boolean)
@@ -2320,7 +2071,7 @@ export function makeModal(props = {}) {
         });
         // Escape key to close
         var escHandler = function(e) {
-          if (e.key === 'Escape' && el.classList.contains('bw-modal-show')) {
+          if (e.key === 'Escape' && el.classList.contains('bw_modal_show')) {
             closeModal(el);
           }
         };
@@ -2371,26 +2122,26 @@ export function makeToast(props = {}) {
   return {
     t: 'div',
     a: {
-      class: `bw-toast bw-toast-${variant} ${className}`.trim(),
+      class: `bw_toast ${variantClass(variant)} ${className}`.trim(),
       role: 'alert',
       'data-position': position
     },
     c: [
       (title) && {
         t: 'div',
-        a: { class: 'bw-toast-header' },
+        a: { class: 'bw_toast_header' },
         c: [
           { t: 'strong', c: title },
           {
             t: 'button',
             a: {
               type: 'button',
-              class: 'bw-close',
+              class: 'bw_close',
               'aria-label': 'Close',
               onclick: function(e) {
-                var toast = e.target.closest('.bw-toast');
+                var toast = e.target.closest('.bw_toast');
                 if (toast) {
-                  toast.classList.add('bw-toast-hiding');
+                  toast.classList.add('bw_toast_hiding');
                   setTimeout(function() { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 300);
                 }
               }
@@ -2401,7 +2152,7 @@ export function makeToast(props = {}) {
       },
       content && {
         t: 'div',
-        a: { class: 'bw-toast-body' },
+        a: { class: 'bw_toast_body' },
         c: content
       }
     ].filter(Boolean),
@@ -2410,12 +2161,12 @@ export function makeToast(props = {}) {
       mounted: function(el) {
         // Trigger show animation
         requestAnimationFrame(function() {
-          el.classList.add('bw-toast-show');
+          el.classList.add('bw_toast_show');
         });
         // Auto-dismiss
         if (autoDismiss) {
           setTimeout(function() {
-            el.classList.add('bw-toast-hiding');
+            el.classList.add('bw_toast_hiding');
             setTimeout(function() { if (el.parentNode) el.parentNode.removeChild(el); }, 300);
           }, delay);
         }
@@ -2468,12 +2219,12 @@ export function makeDropdown(props = {}) {
     triggerTaco = {
       t: 'button',
       a: {
-        class: `bw-btn bw-btn-${variant} bw-dropdown-toggle`,
+        class: `bw_btn ${variantClass(variant)} bw_dropdown_toggle`,
         type: 'button',
         onclick: function(e) {
-          var dropdown = e.target.closest('.bw-dropdown');
-          var menu = dropdown.querySelector('.bw-dropdown-menu');
-          menu.classList.toggle('bw-dropdown-show');
+          var dropdown = e.target.closest('.bw_dropdown');
+          var menu = dropdown.querySelector('.bw_dropdown_menu');
+          menu.classList.toggle('bw_dropdown_show');
         }
       },
       c: trigger || 'Dropdown'
@@ -2484,26 +2235,26 @@ export function makeDropdown(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-dropdown ${className}`.trim() },
+    a: { class: `bw_dropdown ${className}`.trim() },
     c: [
       triggerTaco,
       {
         t: 'div',
-        a: { class: `bw-dropdown-menu ${align === 'end' ? 'bw-dropdown-menu-end' : ''}`.trim() },
+        a: { class: `bw_dropdown_menu ${align === 'end' ? 'bw_dropdown_menu_end' : ''}`.trim() },
         c: items.map(function(item) {
           if (item.divider) {
-            return { t: 'hr', a: { class: 'bw-dropdown-divider' } };
+            return { t: 'hr', a: { class: 'bw_dropdown_divider' } };
           }
           return {
             t: 'a',
             a: {
-              class: `bw-dropdown-item ${item.disabled ? 'disabled' : ''}`.trim(),
+              class: `bw_dropdown_item ${item.disabled ? 'disabled' : ''}`.trim(),
               href: item.href || '#',
               onclick: item.disabled ? undefined : function(e) {
                 if (!item.href) e.preventDefault();
-                var dropdown = e.target.closest('.bw-dropdown');
-                var menu = dropdown.querySelector('.bw-dropdown-menu');
-                menu.classList.remove('bw-dropdown-show');
+                var dropdown = e.target.closest('.bw_dropdown');
+                var menu = dropdown.querySelector('.bw_dropdown_menu');
+                menu.classList.remove('bw_dropdown_show');
                 if (item.onclick) item.onclick(e);
               }
             },
@@ -2518,8 +2269,8 @@ export function makeDropdown(props = {}) {
         // Click outside to close
         var outsideHandler = function(e) {
           if (!el.contains(e.target)) {
-            var menu = el.querySelector('.bw-dropdown-menu');
-            if (menu) menu.classList.remove('bw-dropdown-show');
+            var menu = el.querySelector('.bw_dropdown_menu');
+            if (menu) menu.classList.remove('bw_dropdown_show');
           }
         };
         document.addEventListener('click', outsideHandler);
@@ -2566,13 +2317,13 @@ export function makeSwitch(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-form-check bw-form-switch ${className}`.trim() },
+    a: { class: `bw_form_check bw_form_switch ${className}`.trim() },
     c: [
       {
         t: 'input',
         a: {
           type: 'checkbox',
-          class: 'bw-form-check-input bw-switch-input',
+          class: 'bw_form_check_input bw_switch_input',
           role: 'switch',
           checked,
           id,
@@ -2583,7 +2334,7 @@ export function makeSwitch(props = {}) {
       },
       label && {
         t: 'label',
-        a: { class: 'bw-form-check-label', for: id },
+        a: { class: 'bw_form_check_label', for: id },
         c: label
       }
     ].filter(Boolean)
@@ -2618,7 +2369,7 @@ export function makeSkeleton(props = {}) {
     return {
       t: 'div',
       a: {
-        class: `bw-skeleton bw-skeleton-circle ${className}`.trim(),
+        class: `bw_skeleton bw_skeleton_circle ${className}`.trim(),
         style: { width: circleSize, height: circleSize }
       }
     };
@@ -2628,7 +2379,7 @@ export function makeSkeleton(props = {}) {
     return {
       t: 'div',
       a: {
-        class: `bw-skeleton bw-skeleton-rect ${className}`.trim(),
+        class: `bw_skeleton bw_skeleton_rect ${className}`.trim(),
         style: {
           width: width || '100%',
           height: height || '120px'
@@ -2642,7 +2393,7 @@ export function makeSkeleton(props = {}) {
     return {
       t: 'div',
       a: {
-        class: `bw-skeleton bw-skeleton-text ${className}`.trim(),
+        class: `bw_skeleton bw_skeleton_text ${className}`.trim(),
         style: {
           width: width || '100%',
           height: height || '1em'
@@ -2656,7 +2407,7 @@ export function makeSkeleton(props = {}) {
     lines.push({
       t: 'div',
       a: {
-        class: 'bw-skeleton bw-skeleton-text',
+        class: 'bw_skeleton bw_skeleton_text',
         style: {
           width: i === count - 1 ? '75%' : (width || '100%'),
           height: height || '1em'
@@ -2667,7 +2418,7 @@ export function makeSkeleton(props = {}) {
 
   return {
     t: 'div',
-    a: { class: `bw-skeleton-group ${className}`.trim() },
+    a: { class: `bw_skeleton_group ${className}`.trim() },
     c: lines
   };
 }
@@ -2702,7 +2453,7 @@ export function makeAvatar(props = {}) {
     return {
       t: 'img',
       a: {
-        class: `bw-avatar bw-avatar-${size} ${className}`.trim(),
+        class: `bw_avatar bw_avatar_${size} ${className}`.trim(),
         src: src,
         alt: alt
       }
@@ -2712,7 +2463,7 @@ export function makeAvatar(props = {}) {
   return {
     t: 'div',
     a: {
-      class: `bw-avatar bw-avatar-${size} bw-avatar-${variant} ${className}`.trim()
+      class: `bw_avatar bw_avatar_${size} ${variantClass(variant)} ${className}`.trim()
     },
     c: initials || ''
   };
@@ -2761,14 +2512,14 @@ export function makeCarousel(props = {}) {
 
   // Shared navigation logic
   function goToSlide(carouselEl, index) {
-    var total = carouselEl.querySelectorAll('.bw-carousel-slide').length;
+    var total = carouselEl.querySelectorAll('.bw_carousel_slide').length;
     if (index < 0) index = total - 1;
     if (index >= total) index = 0;
     carouselEl.setAttribute('data-carousel-index', index);
-    var track = carouselEl.querySelector('.bw-carousel-track');
+    var track = carouselEl.querySelector('.bw_carousel_track');
     track.style.transform = 'translateX(-' + (index * 100) + '%)';
     // Update indicators
-    var indicators = carouselEl.querySelectorAll('.bw-carousel-indicator');
+    var indicators = carouselEl.querySelectorAll('.bw_carousel_indicator');
     for (var i = 0; i < indicators.length; i++) {
       if (i === index) {
         indicators[i].classList.add('active');
@@ -2787,14 +2538,14 @@ export function makeCarousel(props = {}) {
       item.content,
       item.caption && {
         t: 'div',
-        a: { class: 'bw-carousel-caption' },
+        a: { class: 'bw_carousel_caption' },
         c: item.caption
       }
     ].filter(Boolean);
 
     return {
       t: 'div',
-      a: { class: 'bw-carousel-slide' },
+      a: { class: 'bw_carousel_slide' },
       c: slideContent.length === 1 ? slideContent[0] : slideContent
     };
   });
@@ -2804,7 +2555,7 @@ export function makeCarousel(props = {}) {
     {
       t: 'div',
       a: {
-        class: 'bw-carousel-track',
+        class: 'bw_carousel_track',
         style: 'transform: translateX(-' + (startIndex * 100) + '%)'
       },
       c: slides
@@ -2816,11 +2567,11 @@ export function makeCarousel(props = {}) {
     children.push({
       t: 'button',
       a: {
-        class: 'bw-carousel-control bw-carousel-control-prev',
+        class: 'bw_carousel_control bw_carousel_control_prev',
         type: 'button',
         'aria-label': 'Previous slide',
         onclick: function(e) {
-          var carousel = e.target.closest('.bw-carousel');
+          var carousel = e.target.closest('.bw_carousel');
           var idx = parseInt(carousel.getAttribute('data-carousel-index') || '0');
           goToSlide(carousel, idx - 1);
         }
@@ -2830,11 +2581,11 @@ export function makeCarousel(props = {}) {
     children.push({
       t: 'button',
       a: {
-        class: 'bw-carousel-control bw-carousel-control-next',
+        class: 'bw_carousel_control bw_carousel_control_next',
         type: 'button',
         'aria-label': 'Next slide',
         onclick: function(e) {
-          var carousel = e.target.closest('.bw-carousel');
+          var carousel = e.target.closest('.bw_carousel');
           var idx = parseInt(carousel.getAttribute('data-carousel-index') || '0');
           goToSlide(carousel, idx + 1);
         }
@@ -2847,17 +2598,17 @@ export function makeCarousel(props = {}) {
   if (showIndicators && items.length > 1) {
     children.push({
       t: 'div',
-      a: { class: 'bw-carousel-indicators' },
+      a: { class: 'bw_carousel_indicators' },
       c: items.map(function(_, i) {
         return {
           t: 'button',
           a: {
-            class: 'bw-carousel-indicator' + (i === startIndex ? ' active' : ''),
+            class: 'bw_carousel_indicator' + (i === startIndex ? ' active' : ''),
             type: 'button',
             'aria-label': 'Go to slide ' + (i + 1),
             'data-slide-index': i,
             onclick: function(e) {
-              var carousel = e.target.closest('.bw-carousel');
+              var carousel = e.target.closest('.bw_carousel');
               var idx = parseInt(e.target.getAttribute('data-slide-index'));
               goToSlide(carousel, idx);
             }
@@ -2870,34 +2621,994 @@ export function makeCarousel(props = {}) {
   return {
     t: 'div',
     a: {
-      class: ('bw-carousel ' + className).trim(),
+      class: ('bw_carousel ' + className).trim(),
       style: 'height: ' + height,
+      tabindex: '0',
+      'aria-roledescription': 'carousel',
       'data-carousel-index': startIndex
     },
     c: children,
     o: {
       type: 'carousel',
       state: { activeIndex: startIndex, autoPlay: autoPlay, interval: interval },
-      mounted: autoPlay ? function(el) {
-        var intervalId = setInterval(function() {
+      mounted: function(el) {
+        // Keyboard navigation
+        el.addEventListener('keydown', function(e) {
           var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
-          goToSlide(el, idx + 1);
-        }, interval);
-        el._bw_carouselInterval = intervalId;
-      } : undefined,
-      unmount: autoPlay ? function(el) {
+          if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            goToSlide(el, idx - 1);
+          } else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            goToSlide(el, idx + 1);
+          }
+        });
+        // Auto-play
+        if (autoPlay) {
+          var intervalId = setInterval(function() {
+            var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+            goToSlide(el, idx + 1);
+          }, interval);
+          el._bw_carouselInterval = intervalId;
+          // Pause on hover/focus for usability
+          el.addEventListener('mouseenter', function() {
+            if (el._bw_carouselInterval) clearInterval(el._bw_carouselInterval);
+          });
+          el.addEventListener('mouseleave', function() {
+            el._bw_carouselInterval = setInterval(function() {
+              var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+              goToSlide(el, idx + 1);
+            }, interval);
+          });
+        }
+      },
+      unmount: function(el) {
         if (el._bw_carouselInterval) {
           clearInterval(el._bw_carouselInterval);
         }
-      } : undefined
+      }
     }
   };
 }
 
-export const componentHandles = {
-  card: CardHandle,
-  table: TableHandle,
-  navbar: NavbarHandle,
-  tabs: TabsHandle,
-  modal: ModalHandle
-};
+// =========================================================================
+// Phase 4: Dashboard & Data Display
+// =========================================================================
+
+/**
+ * Create a stat card for dashboard metrics display
+ *
+ * Shows a large value with a label and optional change indicator.
+ * Designed for dashboard grid layouts with left-border accent.
+ *
+ * @param {Object|string} [props] - Stat card configuration (string shorthand sets label)
+ * @param {string|number} [props.value=0] - The main stat value to display
+ * @param {string} [props.label] - Descriptive label below the value
+ * @param {number} [props.change] - Percentage change indicator (positive = green arrow, negative = red)
+ * @param {string} [props.format] - Value format ("number", "currency", "percent")
+ * @param {string} [props.prefix] - Custom prefix (e.g. "$")
+ * @param {string} [props.suffix] - Custom suffix (e.g. "%")
+ * @param {string} [props.icon] - Icon content (emoji or text) shown above value
+ * @param {string} [props.variant] - Left-border color variant ("primary", "success", "danger", etc.)
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.style] - Inline style object
+ * @returns {Object} TACO object representing a stat card
+ * @category Component Builders
+ * @example
+ * const stat = makeStatCard({
+ *   value: 2345,
+ *   label: 'Active Users',
+ *   change: 5.3,
+ *   format: 'number',
+ *   variant: 'primary'
+ * });
+ */
+export function makeStatCard(props = {}) {
+  if (typeof props === 'string') props = { label: props };
+  var {
+    value = 0,
+    label,
+    change,
+    format,
+    prefix,
+    suffix,
+    icon,
+    variant,
+    className = '',
+    style
+  } = props;
+
+  function formatValue(val, fmt) {
+    if (prefix || suffix) return (prefix || '') + val + (suffix || '');
+    switch (fmt) {
+      case 'currency': return '$' + Number(val).toLocaleString();
+      case 'percent': return val + '%';
+      case 'number': return Number(val).toLocaleString();
+      default: return '' + val;
+    }
+  }
+
+  var classes = [
+    'bw_stat_card',
+    variantClass(variant),
+    className
+  ].filter(Boolean).join(' ').trim();
+
+  var children = [];
+
+  if (icon) {
+    children.push({
+      t: 'div',
+      a: { class: 'bw_stat_icon' },
+      c: icon
+    });
+  }
+
+  children.push({
+    t: 'div',
+    a: { class: 'bw_stat_value' },
+    c: formatValue(value, format)
+  });
+
+  if (label) {
+    children.push({
+      t: 'div',
+      a: { class: 'bw_stat_label' },
+      c: label
+    });
+  }
+
+  if (change !== undefined && change !== null) {
+    children.push({
+      t: 'div',
+      a: {
+        class: 'bw_stat_change ' + (change >= 0 ? 'bw_stat_change_up' : 'bw_stat_change_down')
+      },
+      c: (change >= 0 ? '\u2191 +' : '\u2193 ') + change + '%'
+    });
+  }
+
+  return {
+    t: 'div',
+    a: { class: classes, style: style },
+    c: children,
+    o: { type: 'stat-card' }
+  };
+}
+
+// =========================================================================
+// Phase 5: Overlays & Popovers
+// =========================================================================
+
+/**
+ * Create a tooltip wrapper around trigger content
+ *
+ * Wraps the trigger element in a container that shows tooltip text
+ * on hover and focus. Pure CSS-driven show/hide with JS lifecycle
+ * for event binding.
+ *
+ * @param {Object} [props] - Tooltip configuration
+ * @param {string|Object|Array} [props.content] - Trigger content (what the user hovers/focuses)
+ * @param {string} [props.text=""] - Tooltip text to display
+ * @param {string} [props.placement="top"] - Tooltip placement ("top", "bottom", "left", "right")
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a tooltip wrapper
+ * @category Component Builders
+ * @example
+ * const tip = makeTooltip({
+ *   content: makeButton({ text: 'Hover me' }),
+ *   text: 'This is a tooltip!',
+ *   placement: 'top'
+ * });
+ */
+export function makeTooltip(props = {}) {
+  var {
+    content,
+    text = '',
+    placement = 'top',
+    className = ''
+  } = props;
+
+  return {
+    t: 'span',
+    a: { class: ('bw_tooltip_wrapper ' + className).trim() },
+    c: [
+      content,
+      {
+        t: 'span',
+        a: {
+          class: 'bw_tooltip bw_tooltip_' + placement,
+          role: 'tooltip'
+        },
+        c: text
+      }
+    ],
+    o: {
+      type: 'tooltip',
+      mounted: function(el) {
+        var tip = el.querySelector('.bw_tooltip');
+        el.addEventListener('mouseenter', function() {
+          tip.classList.add('bw_tooltip_show');
+        });
+        el.addEventListener('mouseleave', function() {
+          tip.classList.remove('bw_tooltip_show');
+        });
+        el.addEventListener('focusin', function() {
+          tip.classList.add('bw_tooltip_show');
+        });
+        el.addEventListener('focusout', function() {
+          tip.classList.remove('bw_tooltip_show');
+        });
+      }
+    }
+  };
+}
+
+/**
+ * Create a popover wrapper around trigger content
+ *
+ * Like a tooltip but richer — supports title + body content and is
+ * triggered by click rather than hover. Dismisses on click outside.
+ *
+ * @param {Object} [props] - Popover configuration
+ * @param {string|Object|Array} [props.trigger] - Trigger content (what the user clicks)
+ * @param {string} [props.title] - Popover header title
+ * @param {string|Object|Array} [props.content] - Popover body content
+ * @param {string} [props.placement="top"] - Placement ("top", "bottom", "left", "right")
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a popover wrapper
+ * @category Component Builders
+ * @example
+ * const pop = makePopover({
+ *   trigger: makeButton({ text: 'Click me' }),
+ *   title: 'Popover Title',
+ *   content: 'Some helpful information here.',
+ *   placement: 'bottom'
+ * });
+ */
+export function makePopover(props = {}) {
+  var {
+    trigger,
+    title,
+    content,
+    placement = 'top',
+    className = ''
+  } = props;
+
+  var popoverContent = [
+    title && {
+      t: 'div',
+      a: { class: 'bw_popover_header' },
+      c: title
+    },
+    content && {
+      t: 'div',
+      a: { class: 'bw_popover_body' },
+      c: content
+    }
+  ].filter(Boolean);
+
+  return {
+    t: 'span',
+    a: { class: ('bw_popover_wrapper ' + className).trim() },
+    c: [
+      {
+        t: 'span',
+        a: {
+          class: 'bw_popover_trigger',
+          onclick: function(e) {
+            var wrapper = e.target.closest('.bw_popover_wrapper');
+            var pop = wrapper.querySelector('.bw_popover');
+            pop.classList.toggle('bw_popover_show');
+          }
+        },
+        c: trigger
+      },
+      {
+        t: 'div',
+        a: {
+          class: 'bw_popover bw_popover_' + placement
+        },
+        c: popoverContent
+      }
+    ],
+    o: {
+      type: 'popover',
+      mounted: function(el) {
+        // Click outside to close
+        var outsideHandler = function(e) {
+          if (!el.contains(e.target)) {
+            var pop = el.querySelector('.bw_popover');
+            if (pop) pop.classList.remove('bw_popover_show');
+          }
+        };
+        document.addEventListener('click', outsideHandler);
+        el._bw_outsideHandler = outsideHandler;
+      },
+      unmount: function(el) {
+        if (el._bw_outsideHandler) {
+          document.removeEventListener('click', el._bw_outsideHandler);
+        }
+      }
+    }
+  };
+}
+
+// =========================================================================
+// Phase 6: Form Enhancements & Layout
+// =========================================================================
+
+/**
+ * Create a search input with clear button
+ *
+ * Wraps a text input with a clear (×) button that appears when
+ * the field has content. Calls onSearch on Enter key.
+ *
+ * @param {Object} [props] - Search input configuration
+ * @param {string} [props.placeholder="Search..."] - Placeholder text
+ * @param {string} [props.value] - Initial value
+ * @param {Function} [props.onSearch] - Callback when Enter is pressed, receives value
+ * @param {Function} [props.onInput] - Callback on each keystroke, receives value
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.name] - Input name attribute
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a search input
+ * @category Component Builders
+ * @example
+ * const search = makeSearchInput({
+ *   placeholder: 'Search users...',
+ *   onSearch: (val) => filterUsers(val)
+ * });
+ */
+export function makeSearchInput(props = {}) {
+  if (typeof props === 'string') props = { placeholder: props };
+  var {
+    placeholder = 'Search...',
+    value,
+    onSearch,
+    onInput,
+    id,
+    name,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: ('bw_search_input ' + className).trim() },
+    c: [
+      {
+        t: 'input',
+        a: {
+          type: 'search',
+          class: 'bw_form_control bw_search_field',
+          placeholder: placeholder,
+          value: value,
+          id: id,
+          name: name,
+          onkeydown: function(e) {
+            if (e.key === 'Enter' && onSearch) {
+              e.preventDefault();
+              onSearch(e.target.value);
+            }
+          },
+          oninput: function(e) {
+            var wrapper = e.target.closest('.bw_search_input');
+            var clearBtn = wrapper.querySelector('.bw_search_clear');
+            if (clearBtn) {
+              clearBtn.style.display = e.target.value ? 'flex' : 'none';
+            }
+            if (onInput) onInput(e.target.value);
+          }
+        }
+      },
+      {
+        t: 'button',
+        a: {
+          type: 'button',
+          class: 'bw_search_clear',
+          'aria-label': 'Clear search',
+          style: value ? undefined : 'display: none',
+          onclick: function(e) {
+            var wrapper = e.target.closest('.bw_search_input');
+            var input = wrapper.querySelector('.bw_search_field');
+            input.value = '';
+            e.target.style.display = 'none';
+            input.focus();
+            if (onInput) onInput('');
+            if (onSearch) onSearch('');
+          }
+        },
+        c: '\u00D7'
+      }
+    ],
+    o: { type: 'search-input' }
+  };
+}
+
+/**
+ * Create a styled range slider input
+ *
+ * @param {Object} [props] - Range configuration
+ * @param {number} [props.min=0] - Minimum value
+ * @param {number} [props.max=100] - Maximum value
+ * @param {number} [props.step=1] - Step increment
+ * @param {number} [props.value=50] - Current value
+ * @param {string} [props.label] - Label text
+ * @param {boolean} [props.showValue=false] - Show current value display
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.name] - Input name attribute
+ * @param {boolean} [props.disabled=false] - Whether the slider is disabled
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a range input
+ * @category Component Builders
+ * @example
+ * const slider = makeRange({
+ *   min: 0, max: 100, value: 50,
+ *   label: 'Volume',
+ *   showValue: true,
+ *   oninput: (e) => setVolume(e.target.value)
+ * });
+ */
+export function makeRange(props = {}) {
+  var {
+    min = 0,
+    max = 100,
+    step = 1,
+    value = 50,
+    label,
+    showValue = false,
+    id,
+    name,
+    disabled = false,
+    className = '',
+    ...eventHandlers
+  } = props;
+
+  var children = [];
+
+  if (label || showValue) {
+    var labelContent = [];
+    if (label) {
+      labelContent.push({
+        t: 'span',
+        c: label
+      });
+    }
+    if (showValue) {
+      labelContent.push({
+        t: 'span',
+        a: { class: 'bw_range_value' },
+        c: '' + value
+      });
+    }
+    children.push({
+      t: 'div',
+      a: { class: 'bw_range_label' },
+      c: labelContent
+    });
+  }
+
+  // Wrap oninput to update value display
+  var userOnInput = eventHandlers.oninput;
+  if (showValue) {
+    eventHandlers.oninput = function(e) {
+      var wrapper = e.target.closest('.bw_range_wrapper');
+      var valDisplay = wrapper.querySelector('.bw_range_value');
+      if (valDisplay) valDisplay.textContent = e.target.value;
+      if (userOnInput) userOnInput(e);
+    };
+  }
+
+  children.push({
+    t: 'input',
+    a: {
+      type: 'range',
+      class: 'bw_range',
+      min: min,
+      max: max,
+      step: step,
+      value: value,
+      id: id,
+      name: name,
+      disabled: disabled,
+      ...eventHandlers
+    }
+  });
+
+  return {
+    t: 'div',
+    a: { class: ('bw_range_wrapper ' + className).trim() },
+    c: children,
+    o: { type: 'range' }
+  };
+}
+
+/**
+ * Create a media object layout (image + text side-by-side)
+ *
+ * Classic media object pattern: image/icon on one side, text content
+ * on the other, using flexbox. Supports reversed layout.
+ *
+ * @param {Object} [props] - Media object configuration
+ * @param {string} [props.src] - Image source URL
+ * @param {string} [props.alt=""] - Image alt text
+ * @param {string} [props.title] - Title text
+ * @param {string|Object|Array} [props.content] - Body content
+ * @param {boolean} [props.reverse=false] - Put image on the right
+ * @param {string} [props.imageSize="3rem"] - Image width/height
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a media object
+ * @category Component Builders
+ * @example
+ * const media = makeMediaObject({
+ *   src: '/avatar.jpg',
+ *   title: 'Jane Doe',
+ *   content: 'Posted a comment 5 minutes ago.'
+ * });
+ */
+export function makeMediaObject(props = {}) {
+  var {
+    src,
+    alt = '',
+    title,
+    content,
+    reverse = false,
+    imageSize = '3rem',
+    className = ''
+  } = props;
+
+  var imgEl = src ? {
+    t: 'img',
+    a: {
+      class: 'bw_media_img',
+      src: src,
+      alt: alt,
+      style: 'width:' + imageSize + ';height:' + imageSize
+    }
+  } : null;
+
+  var bodyEl = {
+    t: 'div',
+    a: { class: 'bw_media_body' },
+    c: [
+      title && { t: 'h5', a: { class: 'bw_media_title' }, c: title },
+      content
+    ].filter(Boolean)
+  };
+
+  return {
+    t: 'div',
+    a: { class: ('bw_media ' + (reverse ? 'bw_media_reverse ' : '') + className).trim() },
+    c: reverse
+      ? [bodyEl, imgEl].filter(Boolean)
+      : [imgEl, bodyEl].filter(Boolean),
+    o: { type: 'media-object' }
+  };
+}
+
+/**
+ * Create a file upload zone with drag-and-drop support
+ *
+ * Styled drop zone with file input. Supports drag-and-drop visuals
+ * and multiple file selection.
+ *
+ * @param {Object} [props] - File upload configuration
+ * @param {string} [props.accept] - Accepted file types (e.g. "image/*", ".pdf,.doc")
+ * @param {boolean} [props.multiple=false] - Allow multiple file selection
+ * @param {Function} [props.onFiles] - Callback when files are selected, receives FileList
+ * @param {string} [props.text="Drop files here or click to browse"] - Zone label text
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a file upload zone
+ * @category Component Builders
+ * @example
+ * const upload = makeFileUpload({
+ *   accept: 'image/*',
+ *   multiple: true,
+ *   onFiles: (files) => uploadFiles(files)
+ * });
+ */
+export function makeFileUpload(props = {}) {
+  var {
+    accept,
+    multiple = false,
+    onFiles,
+    text = 'Drop files here or click to browse',
+    id,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: {
+      class: ('bw_file_upload ' + className).trim(),
+      tabindex: '0',
+      role: 'button',
+      'aria-label': text
+    },
+    c: [
+      { t: 'div', a: { class: 'bw_file_upload_icon' }, c: '\uD83D\uDCC1' },
+      { t: 'div', a: { class: 'bw_file_upload_text' }, c: text },
+      {
+        t: 'input',
+        a: {
+          type: 'file',
+          class: 'bw_file_upload_input',
+          accept: accept,
+          multiple: multiple,
+          id: id,
+          onchange: function(e) {
+            if (onFiles && e.target.files.length) onFiles(e.target.files);
+          }
+        }
+      }
+    ],
+    o: {
+      type: 'file-upload',
+      mounted: function(el) {
+        var input = el.querySelector('.bw_file_upload_input');
+
+        // Click zone to trigger file input
+        el.addEventListener('click', function(e) {
+          if (e.target !== input) input.click();
+        });
+
+        // Keyboard activation
+        el.addEventListener('keydown', function(e) {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            input.click();
+          }
+        });
+
+        // Drag-and-drop visuals
+        el.addEventListener('dragover', function(e) {
+          e.preventDefault();
+          el.classList.add('bw_file_upload_active');
+        });
+        el.addEventListener('dragleave', function() {
+          el.classList.remove('bw_file_upload_active');
+        });
+        el.addEventListener('drop', function(e) {
+          e.preventDefault();
+          el.classList.remove('bw_file_upload_active');
+          if (onFiles && e.dataTransfer.files.length) onFiles(e.dataTransfer.files);
+        });
+      }
+    }
+  };
+}
+
+// =========================================================================
+// Phase 7: Data Display & Workflow
+// =========================================================================
+
+/**
+ * Create a vertical timeline for chronological event display
+ *
+ * Renders events as a vertical line with markers and content cards.
+ * Each item can have a colored variant marker.
+ *
+ * @param {Object} [props] - Timeline configuration
+ * @param {Array<Object>} [props.items=[]] - Timeline events
+ * @param {string} [props.items[].title] - Event title
+ * @param {string|Object|Array} [props.items[].content] - Event description content
+ * @param {string} [props.items[].date] - Date or time label
+ * @param {string} [props.items[].variant="primary"] - Marker color variant
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a timeline
+ * @category Component Builders
+ * @example
+ * const timeline = makeTimeline({
+ *   items: [
+ *     { title: 'Project Started', date: 'Jan 2026', variant: 'primary' },
+ *     { title: 'Beta Release', date: 'Mar 2026', content: 'v2.0 beta shipped' },
+ *     { title: 'Stable Release', date: 'Jun 2026', variant: 'success' }
+ *   ]
+ * });
+ */
+export function makeTimeline(props = {}) {
+  var {
+    items = [],
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: ('bw_timeline ' + className).trim() },
+    c: items.map(function(item) {
+      return {
+        t: 'div',
+        a: { class: 'bw_timeline_item' },
+        c: [
+          {
+            t: 'div',
+            a: { class: 'bw_timeline_marker ' + variantClass(item.variant || 'primary') }
+          },
+          {
+            t: 'div',
+            a: { class: 'bw_timeline_content' },
+            c: [
+              item.date && {
+                t: 'div',
+                a: { class: 'bw_timeline_date' },
+                c: item.date
+              },
+              item.title && {
+                t: 'h5',
+                a: { class: 'bw_timeline_title' },
+                c: item.title
+              },
+              item.content && (typeof item.content === 'string'
+                ? { t: 'p', a: { class: 'bw_timeline_text' }, c: item.content }
+                : item.content)
+            ].filter(Boolean)
+          }
+        ]
+      };
+    }),
+    o: { type: 'timeline' }
+  };
+}
+
+/**
+ * Create a multi-step wizard/progress indicator
+ *
+ * Displays numbered steps with active and completed states.
+ * Steps before currentStep are marked completed, the currentStep
+ * is active, and subsequent steps are pending.
+ *
+ * @param {Object} [props] - Stepper configuration
+ * @param {Array<Object>} [props.steps=[]] - Step definitions
+ * @param {string} [props.steps[].label] - Step label text
+ * @param {string} [props.steps[].description] - Optional step description
+ * @param {number} [props.currentStep=0] - Zero-based index of the active step
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a stepper
+ * @category Component Builders
+ * @example
+ * const stepper = makeStepper({
+ *   currentStep: 1,
+ *   steps: [
+ *     { label: 'Account', description: 'Create account' },
+ *     { label: 'Profile', description: 'Set up profile' },
+ *     { label: 'Confirm', description: 'Review & submit' }
+ *   ]
+ * });
+ */
+export function makeStepper(props = {}) {
+  var {
+    steps = [],
+    currentStep = 0,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: ('bw_stepper ' + className).trim(), role: 'list' },
+    c: steps.map(function(step, index) {
+      var state = index < currentStep ? 'completed' : index === currentStep ? 'active' : 'pending';
+      return {
+        t: 'div',
+        a: {
+          class: 'bw_step bw_step_' + state,
+          role: 'listitem',
+          'aria-current': state === 'active' ? 'step' : undefined
+        },
+        c: [
+          {
+            t: 'div',
+            a: { class: 'bw_step_indicator' },
+            c: state === 'completed' ? '\u2713' : '' + (index + 1)
+          },
+          {
+            t: 'div',
+            a: { class: 'bw_step_body' },
+            c: [
+              { t: 'div', a: { class: 'bw_step_label' }, c: step.label },
+              step.description && { t: 'div', a: { class: 'bw_step_description' }, c: step.description }
+            ].filter(Boolean)
+          }
+        ]
+      };
+    }),
+    o: { type: 'stepper' }
+  };
+}
+
+/**
+ * Create a chip/tag input for managing a list of items
+ *
+ * Displays existing chips with remove buttons and an input field
+ * for adding new ones. Chips are added on Enter and removed on
+ * clicking the × button.
+ *
+ * @param {Object} [props] - Chip input configuration
+ * @param {Array<string>} [props.chips=[]] - Initial chip values
+ * @param {string} [props.placeholder="Add..."] - Input placeholder text
+ * @param {Function} [props.onAdd] - Callback when a chip is added, receives value
+ * @param {Function} [props.onRemove] - Callback when a chip is removed, receives value
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a chip input
+ * @category Component Builders
+ * @example
+ * const tags = makeChipInput({
+ *   chips: ['JavaScript', 'CSS'],
+ *   placeholder: 'Add tag...',
+ *   onAdd: (val) => addTag(val),
+ *   onRemove: (val) => removeTag(val)
+ * });
+ */
+export function makeChipInput(props = {}) {
+  var {
+    chips = [],
+    placeholder = 'Add...',
+    onAdd,
+    onRemove,
+    className = ''
+  } = props;
+
+  function makeChipEl(text) {
+    return {
+      t: 'span',
+      a: { class: 'bw_chip', 'data-chip-value': text },
+      c: [
+        text,
+        {
+          t: 'button',
+          a: {
+            type: 'button',
+            class: 'bw_chip_remove',
+            'aria-label': 'Remove ' + text,
+            onclick: function(e) {
+              var chip = e.target.closest('.bw_chip');
+              var val = chip.getAttribute('data-chip-value');
+              chip.parentNode.removeChild(chip);
+              if (onRemove) onRemove(val);
+            }
+          },
+          c: '\u00D7'
+        }
+      ]
+    };
+  }
+
+  return {
+    t: 'div',
+    a: { class: ('bw_chip_input ' + className).trim() },
+    c: [
+      ...chips.map(makeChipEl),
+      {
+        t: 'input',
+        a: {
+          type: 'text',
+          class: 'bw_chip_field',
+          placeholder: placeholder,
+          onkeydown: function(e) {
+            if (e.key === 'Enter' && e.target.value.trim()) {
+              e.preventDefault();
+              var val = e.target.value.trim();
+              var wrapper = e.target.closest('.bw_chip_input');
+              // Insert chip before the input
+              var chipEl = document.createElement('span');
+              chipEl.className = 'bw_chip';
+              chipEl.setAttribute('data-chip-value', val);
+              chipEl.innerHTML = '';
+              chipEl.textContent = val;
+              var removeBtn = document.createElement('button');
+              removeBtn.type = 'button';
+              removeBtn.className = 'bw_chip_remove';
+              removeBtn.setAttribute('aria-label', 'Remove ' + val);
+              removeBtn.textContent = '\u00D7';
+              removeBtn.onclick = function() {
+                chipEl.parentNode.removeChild(chipEl);
+                if (onRemove) onRemove(val);
+              };
+              chipEl.appendChild(removeBtn);
+              wrapper.insertBefore(chipEl, e.target);
+              e.target.value = '';
+              if (onAdd) onAdd(val);
+            }
+            // Backspace on empty input removes last chip
+            if (e.key === 'Backspace' && !e.target.value) {
+              var wrapper = e.target.closest('.bw_chip_input');
+              var chipEls = wrapper.querySelectorAll('.bw_chip');
+              if (chipEls.length) {
+                var last = chipEls[chipEls.length - 1];
+                var removedVal = last.getAttribute('data-chip-value');
+                last.parentNode.removeChild(last);
+                if (onRemove) onRemove(removedVal);
+              }
+            }
+          }
+        }
+      }
+    ],
+    o: { type: 'chip-input' }
+  };
+}
+
+// componentHandles registry removed in v2.0.15.
+// See dev/dead-code-elimination-v2.0.15.md for recovery.
+
+// =========================================================================
+// BCCL Component Registry
+//
+// Single registry mapping type names to their factory functions.
+// Enables bw.make('card', props) dispatch and introspection via
+// Object.keys(BCCL).
+// =========================================================================
+
+/**
+ * BCCL component registry — maps component type names to factory functions.
+ * Each entry's `make` function is the corresponding exported makeXxx().
+ *
+ * @type {Object.<string, {make: Function}>}
+ */
+export var BCCL = {
+  card:          { make: makeCard },
+  button:        { make: makeButton },
+  container:     { make: makeContainer },
+  row:           { make: makeRow },
+  col:           { make: makeCol },
+  nav:           { make: makeNav },
+  navbar:        { make: makeNavbar },
+  tabs:          { make: makeTabs },
+  alert:         { make: makeAlert },
+  badge:         { make: makeBadge },
+  progress:      { make: makeProgress },
+  listGroup:     { make: makeListGroup },
+  breadcrumb:    { make: makeBreadcrumb },
+  form:          { make: makeForm },
+  formGroup:     { make: makeFormGroup },
+  input:         { make: makeInput },
+  textarea:      { make: makeTextarea },
+  select:        { make: makeSelect },
+  checkbox:      { make: makeCheckbox },
+  stack:         { make: makeStack },
+  spinner:       { make: makeSpinner },
+  hero:          { make: makeHero },
+  featureGrid:   { make: makeFeatureGrid },
+  cta:           { make: makeCTA },
+  section:       { make: makeSection },
+  codeDemo:      { make: makeCodeDemo },
+  pagination:    { make: makePagination },
+  radio:         { make: makeRadio },
+  buttonGroup:   { make: makeButtonGroup },
+  accordion:     { make: makeAccordion },
+  modal:         { make: makeModal },
+  toast:         { make: makeToast },
+  dropdown:      { make: makeDropdown },
+  switch:        { make: makeSwitch },
+  skeleton:      { make: makeSkeleton },
+  avatar:        { make: makeAvatar },
+  carousel:      { make: makeCarousel },
+  statCard:      { make: makeStatCard },
+  tooltip:       { make: makeTooltip },
+  popover:       { make: makePopover },
+  searchInput:   { make: makeSearchInput },
+  range:         { make: makeRange },
+  mediaObject:   { make: makeMediaObject },
+  fileUpload:    { make: makeFileUpload },
+  timeline:      { make: makeTimeline },
+  stepper:       { make: makeStepper },
+  chipInput:     { make: makeChipInput }
+};
+
+/**
+ * Factory function — create any BCCL component by type name.
+ *
+ * @param {string} type - Component type (e.g. 'card', 'button', 'alert')
+ * @param {Object} [props] - Component properties
+ * @returns {Object} TACO object
+ * @throws {Error} If type is not found in the registry
+ * @example
+ * var card = make('card', { title: 'Hello', variant: 'primary' });
+ * var btn = make('button', { text: 'Click', variant: 'success' });
+ * var types = Object.keys(BCCL); // list all available types
+ */
+export function make(type, props) {
+  var def = BCCL[type];
+  if (!def) throw new Error('bw.make: unknown component type "' + type + '". Available: ' + Object.keys(BCCL).join(', '));
+  return def.make(props || {});
+}