bitwrench 2.0.14 → 2.0.16

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: {
@@ -197,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,
@@ -233,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
   };
 }
@@ -244,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
@@ -259,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
   };
@@ -293,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',
@@ -349,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
       }
@@ -402,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
           }))
@@ -471,27 +503,27 @@ 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');
@@ -513,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
@@ -594,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: [
@@ -603,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(); }
           }
         },
@@ -643,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
   };
@@ -691,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}%` },
@@ -747,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;
@@ -762,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(' '),
@@ -781,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(' ')
@@ -822,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 : {
@@ -899,7 +931,7 @@ export function makeFormGroup(props = {}) {
   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' : '';
+    var validClass = validation === 'valid' ? 'bw_is_valid' : validation === 'invalid' ? 'bw_is_invalid' : '';
     if (validClass) {
       styledInput.a.class = ((styledInput.a.class || '') + ' ' + validClass).trim();
     }
@@ -907,22 +939,22 @@ export function makeFormGroup(props = {}) {
 
   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: required ? [label, { t: 'span', a: { class: 'bw-text-danger', style: 'margin-left: 0.25rem' }, 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' },
+        a: { class: validation === 'valid' ? 'bw_valid_feedback' : 'bw_invalid_feedback' },
         c: feedback
       },
       help && {
         t: 'small',
-        a: { class: 'bw-form-text bw-text-muted' },
+        a: { class: 'bw_form_text bw_text_muted' },
         c: help
       }
     ].filter(Boolean)
@@ -975,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,
@@ -1028,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,
@@ -1082,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,
@@ -1133,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,
@@ -1150,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)
@@ -1188,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
   };
@@ -1216,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...'
     }
   };
@@ -1272,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)
@@ -1355,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)
@@ -1429,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)
@@ -1481,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
@@ -1518,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
@@ -1883,16 +1607,16 @@ export function makeCodeDemo(props = {}) {
           {
             t: 'button',
             a: {
-              class: 'bw-copy-btn bw-code-copy-btn',
+              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.classList.add('bw-code-copy-btn-copied');
+                  btn.classList.add('bw_code_copy_btn_copied');
                   setTimeout(function() {
                     btn.textContent = originalText;
-                    btn.classList.remove('bw-code-copy-btn-copied');
+                    btn.classList.remove('bw_code_copy_btn_copied');
                   }, 2000);
                 });
               }
@@ -1903,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
                 }
               }
@@ -1919,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 })
@@ -1927,7 +1651,7 @@ export function makeCodeDemo(props = {}) {
 
   return {
     t: 'div',
-    a: { class: 'bw-code-demo' },
+    a: { class: 'bw_code_demo' },
     c: content
   };
 }
@@ -1984,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'
     }
   });
@@ -1997,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
         }
       });
@@ -2010,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'
     }
   });
@@ -2024,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
     }
@@ -2066,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,
@@ -2083,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)
@@ -2120,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
@@ -2160,42 +1884,42 @@ 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) {
                     // Animate-close all other open siblings
-                    var allItems = accordionEl.querySelectorAll('.bw-accordion-item');
+                    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')) {
+                      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');
+                        sibCollapse.classList.remove('bw_collapse_show');
+                        sibBtn.classList.add('bw_collapsed');
                         sibBtn.setAttribute('aria-expanded', 'false');
                       }
                     }
@@ -2206,20 +1930,20 @@ export function makeAccordion(props = {}) {
                     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');
+                    collapse.classList.remove('bw_collapse_show');
+                    btn.classList.add('bw_collapsed');
                     btn.setAttribute('aria-expanded', 'false');
                   } else {
                     // Animate open
-                    collapse.classList.add('bw-collapse-show');
+                    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')) {
+                      if (ev.propertyName === 'max-height' && collapse.classList.contains('bw_collapse_show')) {
                         collapse.style.maxHeight = 'none';
                       }
                       collapse.removeEventListener('transitionend', onEnd);
@@ -2233,10 +1957,10 @@ 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 ? {
@@ -2255,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
@@ -2342,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();
@@ -2352,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); }
                 },
@@ -2379,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)
@@ -2399,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);
           }
         };
@@ -2450,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);
                 }
               }
@@ -2480,7 +2152,7 @@ export function makeToast(props = {}) {
       },
       content && {
         t: 'div',
-        a: { class: 'bw-toast-body' },
+        a: { class: 'bw_toast_body' },
         c: content
       }
     ].filter(Boolean),
@@ -2489,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);
         }
@@ -2547,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'
@@ -2563,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);
               }
             },
@@ -2597,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);
@@ -2645,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,
@@ -2662,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)
@@ -2697,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 }
       }
     };
@@ -2707,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'
@@ -2721,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'
@@ -2735,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'
@@ -2746,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
   };
 }
@@ -2781,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
       }
@@ -2791,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 || ''
   };
@@ -2840,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');
@@ -2866,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
     };
   });
@@ -2883,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
@@ -2895,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);
         }
@@ -2909,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);
         }
@@ -2926,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);
             }
@@ -2949,7 +2621,7 @@ 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',
@@ -3057,8 +2729,8 @@ export function makeStatCard(props = {}) {
   }
 
   var classes = [
-    'bw-stat-card',
-    variant ? 'bw-stat-card-' + variant : '',
+    'bw_stat_card',
+    variantClass(variant),
     className
   ].filter(Boolean).join(' ').trim();
 
@@ -3067,21 +2739,21 @@ export function makeStatCard(props = {}) {
   if (icon) {
     children.push({
       t: 'div',
-      a: { class: 'bw-stat-icon' },
+      a: { class: 'bw_stat_icon' },
       c: icon
     });
   }
 
   children.push({
     t: 'div',
-    a: { class: 'bw-stat-value' },
+    a: { class: 'bw_stat_value' },
     c: formatValue(value, format)
   });
 
   if (label) {
     children.push({
       t: 'div',
-      a: { class: 'bw-stat-label' },
+      a: { class: 'bw_stat_label' },
       c: label
     });
   }
@@ -3090,7 +2762,7 @@ export function makeStatCard(props = {}) {
     children.push({
       t: 'div',
       a: {
-        class: 'bw-stat-change ' + (change >= 0 ? 'bw-stat-change-up' : 'bw-stat-change-down')
+        class: 'bw_stat_change ' + (change >= 0 ? 'bw_stat_change_up' : 'bw_stat_change_down')
       },
       c: (change >= 0 ? '\u2191 +' : '\u2193 ') + change + '%'
     });
@@ -3139,13 +2811,13 @@ export function makeTooltip(props = {}) {
 
   return {
     t: 'span',
-    a: { class: ('bw-tooltip-wrapper ' + className).trim() },
+    a: { class: ('bw_tooltip_wrapper ' + className).trim() },
     c: [
       content,
       {
         t: 'span',
         a: {
-          class: 'bw-tooltip bw-tooltip-' + placement,
+          class: 'bw_tooltip bw_tooltip_' + placement,
           role: 'tooltip'
         },
         c: text
@@ -3154,18 +2826,18 @@ export function makeTooltip(props = {}) {
     o: {
       type: 'tooltip',
       mounted: function(el) {
-        var tip = el.querySelector('.bw-tooltip');
+        var tip = el.querySelector('.bw_tooltip');
         el.addEventListener('mouseenter', function() {
-          tip.classList.add('bw-tooltip-show');
+          tip.classList.add('bw_tooltip_show');
         });
         el.addEventListener('mouseleave', function() {
-          tip.classList.remove('bw-tooltip-show');
+          tip.classList.remove('bw_tooltip_show');
         });
         el.addEventListener('focusin', function() {
-          tip.classList.add('bw-tooltip-show');
+          tip.classList.add('bw_tooltip_show');
         });
         el.addEventListener('focusout', function() {
-          tip.classList.remove('bw-tooltip-show');
+          tip.classList.remove('bw_tooltip_show');
         });
       }
     }
@@ -3206,28 +2878,28 @@ export function makePopover(props = {}) {
   var popoverContent = [
     title && {
       t: 'div',
-      a: { class: 'bw-popover-header' },
+      a: { class: 'bw_popover_header' },
       c: title
     },
     content && {
       t: 'div',
-      a: { class: 'bw-popover-body' },
+      a: { class: 'bw_popover_body' },
       c: content
     }
   ].filter(Boolean);
 
   return {
     t: 'span',
-    a: { class: ('bw-popover-wrapper ' + className).trim() },
+    a: { class: ('bw_popover_wrapper ' + className).trim() },
     c: [
       {
         t: 'span',
         a: {
-          class: 'bw-popover-trigger',
+          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');
+            var wrapper = e.target.closest('.bw_popover_wrapper');
+            var pop = wrapper.querySelector('.bw_popover');
+            pop.classList.toggle('bw_popover_show');
           }
         },
         c: trigger
@@ -3235,7 +2907,7 @@ export function makePopover(props = {}) {
       {
         t: 'div',
         a: {
-          class: 'bw-popover bw-popover-' + placement
+          class: 'bw_popover bw_popover_' + placement
         },
         c: popoverContent
       }
@@ -3246,8 +2918,8 @@ export function makePopover(props = {}) {
         // 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');
+            var pop = el.querySelector('.bw_popover');
+            if (pop) pop.classList.remove('bw_popover_show');
           }
         };
         document.addEventListener('click', outsideHandler);
@@ -3302,13 +2974,13 @@ export function makeSearchInput(props = {}) {
 
   return {
     t: 'div',
-    a: { class: ('bw-search-input ' + className).trim() },
+    a: { class: ('bw_search_input ' + className).trim() },
     c: [
       {
         t: 'input',
         a: {
           type: 'search',
-          class: 'bw-form-control bw-search-field',
+          class: 'bw_form_control bw_search_field',
           placeholder: placeholder,
           value: value,
           id: id,
@@ -3320,8 +2992,8 @@ export function makeSearchInput(props = {}) {
             }
           },
           oninput: function(e) {
-            var wrapper = e.target.closest('.bw-search-input');
-            var clearBtn = wrapper.querySelector('.bw-search-clear');
+            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';
             }
@@ -3333,12 +3005,12 @@ export function makeSearchInput(props = {}) {
         t: 'button',
         a: {
           type: 'button',
-          class: 'bw-search-clear',
+          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');
+            var wrapper = e.target.closest('.bw_search_input');
+            var input = wrapper.querySelector('.bw_search_field');
             input.value = '';
             e.target.style.display = 'none';
             input.focus();
@@ -3405,13 +3077,13 @@ export function makeRange(props = {}) {
     if (showValue) {
       labelContent.push({
         t: 'span',
-        a: { class: 'bw-range-value' },
+        a: { class: 'bw_range_value' },
         c: '' + value
       });
     }
     children.push({
       t: 'div',
-      a: { class: 'bw-range-label' },
+      a: { class: 'bw_range_label' },
       c: labelContent
     });
   }
@@ -3420,8 +3092,8 @@ export function makeRange(props = {}) {
   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');
+      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);
     };
@@ -3431,7 +3103,7 @@ export function makeRange(props = {}) {
     t: 'input',
     a: {
       type: 'range',
-      class: 'bw-range',
+      class: 'bw_range',
       min: min,
       max: max,
       step: step,
@@ -3445,7 +3117,7 @@ export function makeRange(props = {}) {
 
   return {
     t: 'div',
-    a: { class: ('bw-range-wrapper ' + className).trim() },
+    a: { class: ('bw_range_wrapper ' + className).trim() },
     c: children,
     o: { type: 'range' }
   };
@@ -3488,7 +3160,7 @@ export function makeMediaObject(props = {}) {
   var imgEl = src ? {
     t: 'img',
     a: {
-      class: 'bw-media-img',
+      class: 'bw_media_img',
       src: src,
       alt: alt,
       style: 'width:' + imageSize + ';height:' + imageSize
@@ -3497,16 +3169,16 @@ export function makeMediaObject(props = {}) {
 
   var bodyEl = {
     t: 'div',
-    a: { class: 'bw-media-body' },
+    a: { class: 'bw_media_body' },
     c: [
-      title && { t: 'h5', a: { class: 'bw-media-title' }, c: title },
+      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() },
+    a: { class: ('bw_media ' + (reverse ? 'bw_media_reverse ' : '') + className).trim() },
     c: reverse
       ? [bodyEl, imgEl].filter(Boolean)
       : [imgEl, bodyEl].filter(Boolean),
@@ -3549,19 +3221,19 @@ export function makeFileUpload(props = {}) {
   return {
     t: 'div',
     a: {
-      class: ('bw-file-upload ' + className).trim(),
+      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: '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',
+          class: 'bw_file_upload_input',
           accept: accept,
           multiple: multiple,
           id: id,
@@ -3574,7 +3246,7 @@ export function makeFileUpload(props = {}) {
     o: {
       type: 'file-upload',
       mounted: function(el) {
-        var input = el.querySelector('.bw-file-upload-input');
+        var input = el.querySelector('.bw_file_upload_input');
 
         // Click zone to trigger file input
         el.addEventListener('click', function(e) {
@@ -3592,14 +3264,14 @@ export function makeFileUpload(props = {}) {
         // Drag-and-drop visuals
         el.addEventListener('dragover', function(e) {
           e.preventDefault();
-          el.classList.add('bw-file-upload-active');
+          el.classList.add('bw_file_upload_active');
         });
         el.addEventListener('dragleave', function() {
-          el.classList.remove('bw-file-upload-active');
+          el.classList.remove('bw_file_upload_active');
         });
         el.addEventListener('drop', function(e) {
           e.preventDefault();
-          el.classList.remove('bw-file-upload-active');
+          el.classList.remove('bw_file_upload_active');
           if (onFiles && e.dataTransfer.files.length) onFiles(e.dataTransfer.files);
         });
       }
@@ -3643,32 +3315,32 @@ export function makeTimeline(props = {}) {
 
   return {
     t: 'div',
-    a: { class: ('bw-timeline ' + className).trim() },
+    a: { class: ('bw_timeline ' + className).trim() },
     c: items.map(function(item) {
       return {
         t: 'div',
-        a: { class: 'bw-timeline-item' },
+        a: { class: 'bw_timeline_item' },
         c: [
           {
             t: 'div',
-            a: { class: 'bw-timeline-marker bw-timeline-marker-' + (item.variant || 'primary') }
+            a: { class: 'bw_timeline_marker ' + variantClass(item.variant || 'primary') }
           },
           {
             t: 'div',
-            a: { class: 'bw-timeline-content' },
+            a: { class: 'bw_timeline_content' },
             c: [
               item.date && {
                 t: 'div',
-                a: { class: 'bw-timeline-date' },
+                a: { class: 'bw_timeline_date' },
                 c: item.date
               },
               item.title && {
                 t: 'h5',
-                a: { class: 'bw-timeline-title' },
+                a: { class: 'bw_timeline_title' },
                 c: item.title
               },
               item.content && (typeof item.content === 'string'
-                ? { t: 'p', a: { class: 'bw-timeline-text' }, c: item.content }
+                ? { t: 'p', a: { class: 'bw_timeline_text' }, c: item.content }
                 : item.content)
             ].filter(Boolean)
           }
@@ -3713,28 +3385,28 @@ export function makeStepper(props = {}) {
 
   return {
     t: 'div',
-    a: { class: ('bw-stepper ' + className).trim(), role: 'list' },
+    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,
+          class: 'bw_step bw_step_' + state,
           role: 'listitem',
           'aria-current': state === 'active' ? 'step' : undefined
         },
         c: [
           {
             t: 'div',
-            a: { class: 'bw-step-indicator' },
+            a: { class: 'bw_step_indicator' },
             c: state === 'completed' ? '\u2713' : '' + (index + 1)
           },
           {
             t: 'div',
-            a: { class: 'bw-step-body' },
+            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 }
+              { t: 'div', a: { class: 'bw_step_label' }, c: step.label },
+              step.description && { t: 'div', a: { class: 'bw_step_description' }, c: step.description }
             ].filter(Boolean)
           }
         ]
@@ -3779,17 +3451,17 @@ export function makeChipInput(props = {}) {
   function makeChipEl(text) {
     return {
       t: 'span',
-      a: { class: 'bw-chip', 'data-chip-value': text },
+      a: { class: 'bw_chip', 'data-chip-value': text },
       c: [
         text,
         {
           t: 'button',
           a: {
             type: 'button',
-            class: 'bw-chip-remove',
+            class: 'bw_chip_remove',
             'aria-label': 'Remove ' + text,
             onclick: function(e) {
-              var chip = e.target.closest('.bw-chip');
+              var chip = e.target.closest('.bw_chip');
               var val = chip.getAttribute('data-chip-value');
               chip.parentNode.removeChild(chip);
               if (onRemove) onRemove(val);
@@ -3803,29 +3475,29 @@ export function makeChipInput(props = {}) {
 
   return {
     t: 'div',
-    a: { class: ('bw-chip-input ' + className).trim() },
+    a: { class: ('bw_chip_input ' + className).trim() },
     c: [
       ...chips.map(makeChipEl),
       {
         t: 'input',
         a: {
           type: 'text',
-          class: 'bw-chip-field',
+          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');
+              var wrapper = e.target.closest('.bw_chip_input');
               // Insert chip before the input
               var chipEl = document.createElement('span');
-              chipEl.className = 'bw-chip';
+              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.className = 'bw_chip_remove';
               removeBtn.setAttribute('aria-label', 'Remove ' + val);
               removeBtn.textContent = '\u00D7';
               removeBtn.onclick = function() {
@@ -3839,8 +3511,8 @@ export function makeChipInput(props = {}) {
             }
             // 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');
+              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');
@@ -3856,10 +3528,87 @@ export function makeChipInput(props = {}) {
   };
 }
 
-export const componentHandles = {
-  card: CardHandle,
-  table: TableHandle,
-  navbar: NavbarHandle,
-  tabs: TabsHandle,
-  modal: ModalHandle
+// 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 || {});
+}