bitwrench 2.0.10 → 2.0.11

package/dist/bitwrench.es5.js

@@ -1,4 +1,4 @@
-/*! bitwrench v2.0.10 | BSD-2-Clause | http://deftio.com/bitwrench */
+/*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -203,14 +203,14 @@
    */
 
   var VERSION_INFO = {
-    version: '2.0.10',
+    version: '2.0.11',
     name: 'bitwrench',
     description: 'A library for javascript UI functions.',
     license: 'BSD-2-Clause',
-    homepage: 'http://deftio.com/bitwrench',
+    homepage: 'https://deftio.github.com/bitwrench/pages',
     repository: 'git+https://github.com/deftio/bitwrench.git',
     author: 'manu a. chatterjee <deftio@deftio.com> (https://deftio.com/)',
-    buildDate: '2026-03-07T03:14:16.606Z'
+    buildDate: '2026-03-07T11:05:08.522Z'
   };
 
   /**
@@ -955,7 +955,7 @@
       'background-color': palette.light.light
     };
     rules[scopeSelector(scope, '.bw-table-striped > tbody > tr:nth-of-type(odd) > *')] = {
-      'background-color': 'rgba(0, 0, 0, 0.025)'
+      'background-color': 'rgba(0, 0, 0, 0.05)'
     };
     rules[scopeSelector(scope, '.bw-table-hover > tbody > tr:hover > *')] = {
       'background-color': palette.primary.focus
@@ -1142,6 +1142,114 @@
     };
     return rules;
   }
+  function generateAccordionThemed(scope, palette) {
+    var rules = {};
+    rules[scopeSelector(scope, '.bw-accordion-item')] = {
+      'background-color': '#fff',
+      'border-color': palette.light.border
+    };
+    rules[scopeSelector(scope, '.bw-accordion-button')] = {
+      'color': palette.dark.base
+    };
+    rules[scopeSelector(scope, '.bw-accordion-button:hover')] = {
+      'background-color': palette.light.light
+    };
+    rules[scopeSelector(scope, '.bw-accordion-body')] = {
+      'border-top': '1px solid ' + palette.light.border
+    };
+    return rules;
+  }
+  function generateModalThemed(scope, palette) {
+    var rules = {};
+    rules[scopeSelector(scope, '.bw-modal-content')] = {
+      'background-color': '#fff',
+      'border-color': palette.light.border,
+      'box-shadow': '0 0.5rem 1rem rgba(0,0,0,0.15)'
+    };
+    rules[scopeSelector(scope, '.bw-modal-header')] = {
+      'border-bottom-color': palette.light.border
+    };
+    rules[scopeSelector(scope, '.bw-modal-footer')] = {
+      'border-top-color': palette.light.border
+    };
+    rules[scopeSelector(scope, '.bw-modal-title')] = {
+      'color': palette.dark.base
+    };
+    return rules;
+  }
+  function generateToastThemed(scope, palette) {
+    var rules = {};
+    rules[scopeSelector(scope, '.bw-toast')] = {
+      'background-color': '#fff',
+      'border-color': 'rgba(0,0,0,0.1)',
+      'box-shadow': '0 0.5rem 1rem rgba(0,0,0,0.15)'
+    };
+    rules[scopeSelector(scope, '.bw-toast-header')] = {
+      'border-bottom-color': 'rgba(0,0,0,0.05)'
+    };
+    var variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
+    variants.forEach(function (v) {
+      rules[scopeSelector(scope, '.bw-toast-' + v)] = {
+        'border-left': '4px solid ' + palette[v].base
+      };
+    });
+    return rules;
+  }
+  function generateDropdownThemed(scope, palette) {
+    var rules = {};
+    rules[scopeSelector(scope, '.bw-dropdown-menu')] = {
+      'background-color': '#fff',
+      'border-color': palette.light.border,
+      'box-shadow': '0 0.5rem 1rem rgba(0,0,0,0.15)'
+    };
+    rules[scopeSelector(scope, '.bw-dropdown-item')] = {
+      'color': palette.dark.base
+    };
+    rules[scopeSelector(scope, '.bw-dropdown-item:hover')] = {
+      'color': palette.dark.hover,
+      'background-color': palette.light.light
+    };
+    rules[scopeSelector(scope, '.bw-dropdown-item.disabled')] = {
+      'color': palette.secondary.base
+    };
+    rules[scopeSelector(scope, '.bw-dropdown-divider')] = {
+      'border-top-color': palette.light.border
+    };
+    return rules;
+  }
+  function generateSwitchThemed(scope, palette) {
+    var rules = {};
+    rules[scopeSelector(scope, '.bw-form-switch .bw-switch-input')] = {
+      'background-color': palette.secondary.base,
+      'border-color': palette.secondary.base
+    };
+    rules[scopeSelector(scope, '.bw-form-switch .bw-switch-input:checked')] = {
+      'background-color': palette.primary.base,
+      'border-color': palette.primary.base
+    };
+    rules[scopeSelector(scope, '.bw-form-switch .bw-switch-input:focus')] = {
+      'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
+    };
+    return rules;
+  }
+  function generateSkeletonThemed(scope, palette) {
+    var rules = {};
+    rules[scopeSelector(scope, '.bw-skeleton')] = {
+      'background-color': palette.light.border
+    };
+    return rules;
+  }
+  function generateAvatarThemed(scope, palette) {
+    var rules = {};
+    var variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+    variants.forEach(function (v) {
+      rules[scopeSelector(scope, '.bw-avatar-' + v)] = {
+        'background-color': palette[v].base,
+        'color': palette[v].textOn
+      };
+    });
+    return rules;
+  }
 
   /**
    * Generate all themed CSS rules from a palette and layout.
@@ -1153,7 +1261,7 @@
    * @returns {Object} CSS rules object
    */
   function generateThemedCSS(scopeName, palette, layout) {
-    return Object.assign({}, generateResetThemed(scopeName, palette), generateTypographyThemed(scopeName, palette), generateButtons(scopeName, palette, layout), generateAlerts(scopeName, palette, layout), generateBadges(scopeName, palette), generateCards(scopeName, palette, layout), generateForms(scopeName, palette, layout), generateNavigation(scopeName, palette), generateTables(scopeName, palette, layout), generateTabs(scopeName, palette), generateListGroups(scopeName, palette, layout), generatePagination(scopeName, palette), generateProgress(scopeName, palette), generateHero(scopeName, palette), generateBreadcrumbThemed(scopeName, palette), generateSpinnerThemed(scopeName, palette), generateCloseButtonThemed(scopeName, palette), generateSectionsThemed(scopeName, palette), generateUtilityColors(scopeName, palette));
+    return Object.assign({}, generateResetThemed(scopeName, palette), generateTypographyThemed(scopeName, palette), generateButtons(scopeName, palette, layout), generateAlerts(scopeName, palette, layout), generateBadges(scopeName, palette), generateCards(scopeName, palette, layout), generateForms(scopeName, palette, layout), generateNavigation(scopeName, palette), generateTables(scopeName, palette, layout), generateTabs(scopeName, palette), generateListGroups(scopeName, palette, layout), generatePagination(scopeName, palette), generateProgress(scopeName, palette), generateHero(scopeName, palette), generateBreadcrumbThemed(scopeName, palette), generateSpinnerThemed(scopeName, palette), generateCloseButtonThemed(scopeName, palette), generateSectionsThemed(scopeName, palette), generateAccordionThemed(scopeName, palette), generateModalThemed(scopeName, palette), generateToastThemed(scopeName, palette), generateDropdownThemed(scopeName, palette), generateSwitchThemed(scopeName, palette), generateSkeletonThemed(scopeName, palette), generateAvatarThemed(scopeName, palette), generateUtilityColors(scopeName, palette));
   }
 
   // =========================================================================
@@ -1798,7 +1906,7 @@
       'justify-content': 'space-between',
       'padding': '0.5rem 1.5rem'
     };
-    rules['.bw-navbar > .container'] = {
+    rules['.bw-navbar > .bw-container, .bw-navbar > .container'] = {
       'display': 'flex',
       'flex-wrap': 'wrap',
       'align-items': 'center',
@@ -1900,10 +2008,10 @@
     // Badges (structural)
     rules['.bw-badge'] = {
       'display': 'inline-block',
-      'padding': '.35em .65em',
-      'font-size': '.75em',
-      'font-weight': '700',
-      'line-height': '1',
+      'padding': '.4em .75em',
+      'font-size': '.875em',
+      'font-weight': '600',
+      'line-height': '1.3',
       'text-align': 'center',
       'white-space': 'nowrap',
       'vertical-align': 'baseline',
@@ -1912,6 +2020,14 @@
     rules['.bw-badge:empty'] = {
       'display': 'none'
     };
+    rules['.bw-badge-sm'] = {
+      'font-size': '.75em',
+      'padding': '.25em .5em'
+    };
+    rules['.bw-badge-lg'] = {
+      'font-size': '1em',
+      'padding': '.5em .9em'
+    };
     rules['.bw-badge-pill'] = {
       'border-radius': '50rem'
     };
@@ -2108,7 +2224,11 @@
     };
     rules['.bw-hero-title'] = {
       'font-weight': '300',
-      'letter-spacing': '-0.05rem'
+      'letter-spacing': '-0.05rem',
+      'color': 'inherit'
+    };
+    rules['.bw-hero-subtitle'] = {
+      'color': 'inherit'
     };
     rules['.bw-hero-actions'] = {
       'display': 'flex',
@@ -2297,312 +2417,742 @@
     rules['.bw-code-demo'] = {
       'margin-bottom': '2rem'
     };
+    rules['.bw-code-pre'] = {
+      'margin': '0',
+      'border': 'none',
+      'border-radius': '6px',
+      'overflow-x': 'auto'
+    };
+    rules['.bw-code-block'] = {
+      'display': 'block',
+      'padding': '1.25rem',
+      'font-family': '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace',
+      'font-size': '0.8125rem',
+      'line-height': '1.6'
+    };
+    rules['.bw-code-copy-btn'] = {
+      'position': 'absolute',
+      'top': '0.5rem',
+      'right': '0.5rem',
+      'padding': '0.25rem 0.625rem',
+      'font-size': '0.6875rem',
+      'border-radius': '4px',
+      'cursor': 'pointer',
+      'font-family': 'inherit',
+      'transition': 'all 0.15s'
+    };
 
-    // Spacing utilities (structural)
-    var spacingValues = {
-      '0': '0',
-      '1': '.25rem',
-      '2': '.5rem',
-      '3': '1rem',
-      '4': '1.5rem',
-      '5': '3rem'
+    // Button group (structural)
+    rules['.bw-btn-group, .bw-btn-group-vertical'] = {
+      'position': 'relative',
+      'display': 'inline-flex',
+      'vertical-align': 'middle'
     };
-    for (var k in spacingValues) {
-      var v = spacingValues[k];
-      rules['.bw-m-' + k] = {
-        'margin': v + ' !important'
-      };
-      rules['.bw-mt-' + k] = {
-        'margin-top': v + ' !important'
-      };
-      rules['.bw-mb-' + k] = {
-        'margin-bottom': v + ' !important'
-      };
-      rules['.bw-ms-' + k] = {
-        'margin-left': v + ' !important'
-      };
-      rules['.bw-me-' + k] = {
-        'margin-right': v + ' !important'
-      };
-      rules['.bw-p-' + k] = {
-        'padding': v + ' !important'
-      };
-      rules['.bw-pt-' + k + ', .pt-' + k] = {
-        'padding-top': v + ' !important'
-      };
-      rules['.bw-pb-' + k + ', .pb-' + k] = {
-        'padding-bottom': v + ' !important'
-      };
-      rules['.bw-ps-' + k + ', .ps-' + k] = {
-        'padding-left': v + ' !important'
-      };
-      rules['.bw-pe-' + k + ', .pe-' + k] = {
-        'padding-right': v + ' !important'
-      };
-    }
-    rules['.bw-m-auto, .m-auto'] = {
-      'margin': 'auto !important'
+    rules['.bw-btn-group > .bw-btn, .bw-btn-group-vertical > .bw-btn'] = {
+      'position': 'relative',
+      'flex': '1 1 auto',
+      'border-radius': '0',
+      'margin-left': '-1px'
     };
-    rules['.bw-py-3'] = {
-      'padding-top': '1rem !important',
-      'padding-bottom': '1rem !important'
+    rules['.bw-btn-group > .bw-btn:first-child'] = {
+      'margin-left': '0',
+      'border-top-left-radius': '6px',
+      'border-bottom-left-radius': '6px'
     };
-    rules['.bw-py-4'] = {
-      'padding-top': '1.5rem !important',
-      'padding-bottom': '1.5rem !important'
+    rules['.bw-btn-group > .bw-btn:last-child'] = {
+      'border-top-right-radius': '6px',
+      'border-bottom-right-radius': '6px'
     };
-    rules['.bw-py-5'] = {
-      'padding-top': '3rem !important',
-      'padding-bottom': '3rem !important'
+    rules['.bw-btn-group-vertical'] = {
+      'flex-direction': 'column',
+      'align-items': 'flex-start',
+      'justify-content': 'center'
     };
-    rules['.bw-py-6'] = {
-      'padding-top': '4rem !important',
-      'padding-bottom': '4rem !important'
+    rules['.bw-btn-group-vertical > .bw-btn'] = {
+      'width': '100%',
+      'margin-left': '0',
+      'margin-top': '-1px'
+    };
+    rules['.bw-btn-group-vertical > .bw-btn:first-child'] = {
+      'margin-top': '0',
+      'border-top-left-radius': '6px',
+      'border-top-right-radius': '6px',
+      'border-bottom-left-radius': '0',
+      'border-bottom-right-radius': '0'
+    };
+    rules['.bw-btn-group-vertical > .bw-btn:last-child'] = {
+      'border-top-left-radius': '0',
+      'border-top-right-radius': '0',
+      'border-bottom-left-radius': '6px',
+      'border-bottom-right-radius': '6px'
     };
 
-    // Display utilities (structural)
-    rules['.bw-d-none'] = {
-      'display': 'none'
+    // Accordion (structural)
+    rules['.bw-accordion'] = {
+      'border-radius': '8px',
+      'overflow': 'hidden'
     };
-    rules['.bw-d-block'] = {
-      'display': 'block'
+    rules['.bw-accordion-item'] = {
+      'border': '1px solid transparent'
     };
-    rules['.bw-d-inline'] = {
-      'display': 'inline'
+    rules['.bw-accordion-item + .bw-accordion-item'] = {
+      'border-top': '0'
     };
-    rules['.bw-d-inline-block'] = {
-      'display': 'inline-block'
+    rules['.bw-accordion-header'] = {
+      'margin': '0'
     };
-    rules['.bw-d-flex'] = {
-      'display': 'flex'
+    rules['.bw-accordion-button'] = {
+      'position': 'relative',
+      'display': 'flex',
+      'align-items': 'center',
+      'width': '100%',
+      'padding': '1rem 1.25rem',
+      'font-size': '1rem',
+      'font-weight': '500',
+      'text-align': 'left',
+      'background-color': 'transparent',
+      'border': '0',
+      'overflow-anchor': 'none',
+      'cursor': 'pointer',
+      'font-family': 'inherit',
+      'transition': 'color 0.15s ease-in-out, background-color 0.15s ease-in-out'
     };
-    rules['.bw-text-left'] = {
-      'text-align': 'left'
+    rules['.bw-accordion-button::after'] = {
+      'flex-shrink': '0',
+      'width': '1.25rem',
+      'height': '1.25rem',
+      'margin-left': 'auto',
+      'content': '""',
+      'background-repeat': 'no-repeat',
+      'background-size': '1.25rem',
+      'transition': 'transform 0.2s ease-in-out'
     };
-    rules['.bw-text-right'] = {
-      'text-align': 'right'
+    rules['.bw-accordion-button:not(.bw-collapsed)::after'] = {
+      'transform': 'rotate(-180deg)'
     };
-    rules['.bw-text-center'] = {
-      'text-align': 'center'
+    rules['.bw-accordion-collapse'] = {
+      'max-height': '0',
+      'overflow': 'hidden',
+      'transition': 'max-height 0.3s ease'
     };
-
-    // Flexbox utilities (structural)
-    var jc = {
-      start: 'flex-start',
-      end: 'flex-end',
-      center: 'center',
-      between: 'space-between',
-      around: 'space-around'
+    rules['.bw-accordion-collapse.bw-collapse-show'] = {
+      'max-height': 'none'
     };
-    for (var jk in jc) {
-      rules['.bw-justify-content-' + jk + ', .justify-content-' + jk] = {
-        'justify-content': jc[jk]
-      };
-    }
-    var ai = {
-      start: 'flex-start',
-      end: 'flex-end',
-      center: 'center'
+    rules['.bw-accordion-body'] = {
+      'padding': '1rem 1.25rem'
     };
-    for (var ak in ai) {
-      rules['.bw-align-items-' + ak + ', .align-items-' + ak] = {
-        'align-items': ai[ak]
-      };
-    }
 
-    // Size utilities (structural)
-    ['25', '50', '75', '100'].forEach(function (n) {
-      rules['.bw-w-' + n + ', .w-' + n] = {
-        'width': n + '% !important'
-      };
-      rules['.bw-h-' + n + ', .h-' + n] = {
-        'height': n + '% !important'
-      };
-    });
-    rules['.bw-w-auto, .w-auto'] = {
-      'width': 'auto !important'
+    // Modal (structural)
+    rules['.bw-modal'] = {
+      'display': 'none',
+      'position': 'fixed',
+      'top': '0',
+      'left': '0',
+      'width': '100%',
+      'height': '100%',
+      'z-index': '1050',
+      'overflow-x': 'hidden',
+      'overflow-y': 'auto',
+      'opacity': '0',
+      'transition': 'opacity 0.15s linear'
     };
-    rules['.bw-h-auto, .h-auto'] = {
-      'height': 'auto !important'
+    rules['.bw-modal.bw-modal-show'] = {
+      'display': 'flex',
+      'align-items': 'center',
+      'justify-content': 'center',
+      'opacity': '1'
     };
-    rules['.bw-mw-100, .mw-100'] = {
-      'max-width': '100% !important'
+    rules['.bw-modal-dialog'] = {
+      'position': 'relative',
+      'width': '100%',
+      'max-width': '500px',
+      'margin': '1.75rem auto',
+      'pointer-events': 'none',
+      'transform': 'translateY(-20px)',
+      'transition': 'transform 0.2s ease-out'
     };
-    rules['.bw-mh-100, .mh-100'] = {
-      'max-height': '100% !important'
+    rules['.bw-modal.bw-modal-show .bw-modal-dialog'] = {
+      'transform': 'translateY(0)'
     };
-
-    // Position utilities (structural)
-    ['static', 'relative', 'absolute', 'fixed', 'sticky'].forEach(function (p) {
-      rules['.bw-position-' + p + ', .position-' + p] = {
-        'position': p + ' !important'
-      };
-    });
-    rules['.bw-translate-middle, .translate-middle'] = {
-      'transform': 'translate(-50%, -50%) !important'
+    rules['.bw-modal-sm'] = {
+      'max-width': '300px'
     };
-
-    // Overflow utilities (structural)
-    ['auto', 'hidden', 'visible', 'scroll'].forEach(function (o) {
-      rules['.bw-overflow-' + o + ', .overflow-' + o] = {
-        'overflow': o + ' !important'
-      };
-    });
-
-    // Visibility utilities (structural)
-    rules['.bw-visible, .visible'] = {
-      'visibility': 'visible !important'
+    rules['.bw-modal-lg'] = {
+      'max-width': '800px'
     };
-    rules['.bw-invisible, .invisible'] = {
-      'visibility': 'hidden !important'
+    rules['.bw-modal-xl'] = {
+      'max-width': '1140px'
     };
-
-    // User select utilities (structural)
-    ['all', 'auto', 'none'].forEach(function (u) {
-      rules['.bw-user-select-' + u + ', .user-select-' + u] = {
-        'user-select': u + ' !important'
-      };
-    });
-
-    // Pointer events
-    rules['.pe-none'] = {
-      'pointer-events': 'none !important'
+    rules['.bw-modal-content'] = {
+      'position': 'relative',
+      'display': 'flex',
+      'flex-direction': 'column',
+      'pointer-events': 'auto',
+      'background-clip': 'padding-box',
+      'border': '1px solid transparent',
+      'border-radius': '8px',
+      'outline': '0'
     };
-    rules['.pe-auto'] = {
-      'pointer-events': 'auto !important'
+    rules['.bw-modal-header'] = {
+      'display': 'flex',
+      'align-items': 'center',
+      'justify-content': 'space-between',
+      'padding': '1rem 1.5rem'
+    };
+    rules['.bw-modal-title'] = {
+      'margin': '0',
+      'font-size': '1.25rem',
+      'font-weight': '600',
+      'line-height': '1.3'
+    };
+    rules['.bw-modal-body'] = {
+      'position': 'relative',
+      'flex': '1 1 auto',
+      'padding': '1.5rem'
+    };
+    rules['.bw-modal-footer'] = {
+      'display': 'flex',
+      'flex-wrap': 'wrap',
+      'align-items': 'center',
+      'justify-content': 'flex-end',
+      'padding': '0.75rem 1.5rem',
+      'gap': '0.5rem'
     };
 
-    // Typography utilities (structural)
-    rules['.fw-light'] = {
-      'font-weight': '300 !important'
+    // Toast (structural)
+    rules['.bw-toast-container'] = {
+      'position': 'fixed',
+      'z-index': '1080',
+      'pointer-events': 'none',
+      'display': 'flex',
+      'flex-direction': 'column',
+      'gap': '0.5rem',
+      'padding': '1rem'
     };
-    rules['.fw-lighter'] = {
-      'font-weight': 'lighter !important'
+    rules['.bw-toast'] = {
+      'pointer-events': 'auto',
+      'width': '350px',
+      'max-width': '100%',
+      'background-clip': 'padding-box',
+      'border-radius': '8px',
+      'opacity': '0',
+      'transform': 'translateY(-10px)',
+      'transition': 'opacity 0.3s ease, transform 0.3s ease'
     };
-    rules['.fw-normal'] = {
-      'font-weight': '400 !important'
+    rules['.bw-toast.bw-toast-show'] = {
+      'opacity': '1',
+      'transform': 'translateY(0)'
     };
-    rules['.fw-bold'] = {
-      'font-weight': '700 !important'
+    rules['.bw-toast.bw-toast-hiding'] = {
+      'opacity': '0',
+      'transform': 'translateY(-10px)'
     };
-    rules['.fw-bolder'] = {
-      'font-weight': 'bolder !important'
+    rules['.bw-toast-header'] = {
+      'display': 'flex',
+      'align-items': 'center',
+      'justify-content': 'space-between',
+      'padding': '0.5rem 0.75rem',
+      'font-size': '0.875rem'
     };
-    rules['.fst-italic'] = {
-      'font-style': 'italic !important'
+    rules['.bw-toast-body'] = {
+      'padding': '0.75rem',
+      'font-size': '0.9375rem'
     };
-    rules['.fst-normal'] = {
-      'font-style': 'normal !important'
+
+    // Dropdown (structural)
+    rules['.bw-dropdown'] = {
+      'position': 'relative',
+      'display': 'inline-block'
     };
-    rules['.text-decoration-none'] = {
-      'text-decoration': 'none !important'
+    rules['.bw-dropdown-toggle::after'] = {
+      'display': 'inline-block',
+      'margin-left': '0.255em',
+      'vertical-align': '0.255em',
+      'content': '""',
+      'border-top': '0.3em solid',
+      'border-right': '0.3em solid transparent',
+      'border-bottom': '0',
+      'border-left': '0.3em solid transparent'
+    };
+    rules['.bw-dropdown-menu'] = {
+      'position': 'absolute',
+      'top': '100%',
+      'left': '0',
+      'z-index': '1000',
+      'display': 'none',
+      'min-width': '10rem',
+      'padding': '0.5rem 0',
+      'margin': '0.125rem 0 0',
+      'background-clip': 'padding-box',
+      'border-radius': '6px'
     };
-    rules['.text-decoration-underline'] = {
-      'text-decoration': 'underline !important'
+    rules['.bw-dropdown-menu.bw-dropdown-show'] = {
+      'display': 'block'
     };
-    rules['.text-decoration-line-through'] = {
-      'text-decoration': 'line-through !important'
+    rules['.bw-dropdown-menu-end'] = {
+      'left': 'auto',
+      'right': '0'
     };
-    rules['.text-lowercase'] = {
-      'text-transform': 'lowercase !important'
+    rules['.bw-dropdown-item'] = {
+      'display': 'block',
+      'width': '100%',
+      'padding': '0.375rem 1rem',
+      'clear': 'both',
+      'font-weight': '400',
+      'text-align': 'inherit',
+      'text-decoration': 'none',
+      'white-space': 'nowrap',
+      'background-color': 'transparent',
+      'border': '0',
+      'font-size': '0.9375rem',
+      'transition': 'background-color 0.15s, color 0.15s'
     };
-    rules['.text-uppercase'] = {
-      'text-transform': 'uppercase !important'
+    rules['.bw-dropdown-divider'] = {
+      'height': '0',
+      'margin': '0.5rem 0',
+      'overflow': 'hidden',
+      'opacity': '1'
     };
-    rules['.text-capitalize'] = {
-      'text-transform': 'capitalize !important'
+
+    // Switch (structural)
+    rules['.bw-form-switch'] = {
+      'padding-left': '2.5em'
     };
-    rules['.text-wrap'] = {
-      'white-space': 'normal !important'
+    rules['.bw-form-switch .bw-switch-input'] = {
+      'width': '2em',
+      'height': '1.125em',
+      'margin-left': '-2.5em',
+      'border-radius': '2em',
+      'appearance': 'none',
+      'background-position': 'left center',
+      'background-repeat': 'no-repeat',
+      'background-size': 'contain',
+      'transition': 'background-position 0.15s ease-in-out, background-color 0.15s ease-in-out',
+      'cursor': 'pointer'
     };
-    rules['.text-nowrap'] = {
-      'white-space': 'nowrap !important'
+    rules['.bw-form-switch .bw-switch-input:checked'] = {
+      'background-position': 'right center'
+    };
+    rules['.bw-form-switch .bw-switch-input:disabled'] = {
+      'opacity': '0.5',
+      'cursor': 'not-allowed'
     };
 
-    // Font-size utilities (structural)
-    rules['.fs-1'] = {
-      'font-size': 'calc(1.375rem + 1.5vw) !important'
+    // Skeleton (structural)
+    rules['.bw-skeleton'] = {
+      'border-radius': '4px',
+      'animation': 'bw-skeleton-pulse 1.5s ease-in-out infinite'
     };
-    rules['.fs-2'] = {
-      'font-size': 'calc(1.325rem + .9vw) !important'
+    rules['.bw-skeleton-text'] = {
+      'height': '1em',
+      'margin-bottom': '0.5rem'
     };
-    rules['.fs-3'] = {
-      'font-size': 'calc(1.3rem + .6vw) !important'
+    rules['.bw-skeleton-circle'] = {
+      'border-radius': '50%'
     };
-    rules['.fs-4'] = {
-      'font-size': 'calc(1.275rem + .3vw) !important'
+    rules['.bw-skeleton-rect'] = {
+      'border-radius': '8px'
     };
-    rules['.fs-5'] = {
-      'font-size': '1.25rem !important'
+    rules['.bw-skeleton-group'] = {
+      'display': 'flex',
+      'flex-direction': 'column'
     };
-    rules['.fs-6'] = {
-      'font-size': '1rem !important'
+    rules['@keyframes bw-skeleton-pulse'] = {
+      '0%': {
+        'opacity': '1'
+      },
+      '50%': {
+        'opacity': '0.4'
+      },
+      '100%': {
+        'opacity': '1'
+      }
     };
 
-    // List utilities (structural)
-    rules['.list-unstyled'] = {
-      'padding-left': '0',
-      'list-style': 'none'
+    // Avatar (structural)
+    rules['.bw-avatar'] = {
+      'display': 'inline-flex',
+      'align-items': 'center',
+      'justify-content': 'center',
+      'border-radius': '50%',
+      'overflow': 'hidden',
+      'font-weight': '600',
+      'text-transform': 'uppercase',
+      'vertical-align': 'middle',
+      'object-fit': 'cover'
     };
-    rules['.list-inline'] = {
-      'padding-left': '0',
-      'list-style': 'none'
+    rules['.bw-avatar-sm'] = {
+      'width': '2rem',
+      'height': '2rem',
+      'font-size': '0.75rem'
     };
-    rules['.list-inline-item'] = {
-      'display': 'inline-block'
+    rules['.bw-avatar-md'] = {
+      'width': '3rem',
+      'height': '3rem',
+      'font-size': '1rem'
     };
-    rules['.list-inline-item:not(:last-child)'] = {
-      'margin-right': '.5rem'
+    rules['.bw-avatar-lg'] = {
+      'width': '4rem',
+      'height': '4rem',
+      'font-size': '1.25rem'
+    };
+    rules['.bw-avatar-xl'] = {
+      'width': '5rem',
+      'height': '5rem',
+      'font-size': '1.5rem'
     };
 
-    // Opacity utilities (structural)
-    rules['.opacity-0'] = {
-      'opacity': '0 !important'
+    // Bar chart (structural)
+    rules['.bw-bar-chart-container'] = {
+      'padding': '1rem',
+      'border': '1px solid transparent',
+      'border-radius': '8px'
     };
-    rules['.opacity-25'] = {
-      'opacity': '.25 !important'
+    rules['.bw-bar-chart'] = {
+      'display': 'flex',
+      'align-items': 'flex-end',
+      'gap': '6px',
+      'padding': '0 0.5rem'
     };
-    rules['.opacity-50'] = {
-      'opacity': '.5 !important'
+    rules['.bw-bar-group'] = {
+      'flex': '1',
+      'display': 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+      'height': '100%',
+      'justify-content': 'flex-end'
     };
-    rules['.opacity-75'] = {
-      'opacity': '.75 !important'
+    rules['.bw-bar'] = {
+      'width': '100%',
+      'border-radius': '3px 3px 0 0',
+      'transition': 'height 0.5s ease',
+      'min-height': '4px'
     };
-    rules['.opacity-100'] = {
-      'opacity': '1 !important'
+    rules['.bw-bar:hover'] = {
+      'opacity': '0.85'
+    };
+    rules['.bw-bar-value'] = {
+      'font-size': '0.65rem',
+      'font-weight': '600',
+      'margin-bottom': '2px',
+      'text-align': 'center'
+    };
+    rules['.bw-bar-label'] = {
+      'font-size': '0.7rem',
+      'margin-top': '4px',
+      'text-align': 'center'
+    };
+    rules['.bw-bar-chart-title'] = {
+      'font-size': '1.1rem',
+      'font-weight': '600',
+      'margin': '0 0 0.75rem 0'
     };
 
-    // Responsive grid
-    Object.assign(rules, defaultStyles.responsive);
-    return addUnderscoreAliases(rules);
-  }
-
-  // =========================================================================
-  // getAllStyles — backwards compatible
-  // =========================================================================
-
-  /**
-   * Add underscore aliases for all bw- selectors
-   * @param {Object} rules - CSS rules object
-   * @returns {Object} - Rules with underscore aliases added
-   */
-  function addUnderscoreAliases(rules) {
-    var result = {};
-    for (var _i = 0, _Object$entries = Object.entries(rules); _i < _Object$entries.length; _i++) {
-      var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-        selector = _Object$entries$_i[0],
-        styles = _Object$entries$_i[1];
-      result[selector] = styles;
-      if (selector.includes('.bw-')) {
-        var underscoreSelector = selector.replace(/\.bw-/g, '.bw_');
-        result[underscoreSelector] = styles;
-      }
+    // Spacing utilities (structural)
+    var spacingValues = {
+      '0': '0',
+      '1': '.25rem',
+      '2': '.5rem',
+      '3': '1rem',
+      '4': '1.5rem',
+      '5': '3rem'
+    };
+    for (var k in spacingValues) {
+      var v = spacingValues[k];
+      rules['.bw-m-' + k] = {
+        'margin': v + ' !important'
+      };
+      rules['.bw-mt-' + k] = {
+        'margin-top': v + ' !important'
+      };
+      rules['.bw-mb-' + k] = {
+        'margin-bottom': v + ' !important'
+      };
+      rules['.bw-ms-' + k] = {
+        'margin-left': v + ' !important'
+      };
+      rules['.bw-me-' + k] = {
+        'margin-right': v + ' !important'
+      };
+      rules['.bw-p-' + k] = {
+        'padding': v + ' !important'
+      };
+      rules['.bw-pt-' + k + ', .pt-' + k] = {
+        'padding-top': v + ' !important'
+      };
+      rules['.bw-pb-' + k + ', .pb-' + k] = {
+        'padding-bottom': v + ' !important'
+      };
+      rules['.bw-ps-' + k + ', .ps-' + k] = {
+        'padding-left': v + ' !important'
+      };
+      rules['.bw-pe-' + k + ', .pe-' + k] = {
+        'padding-right': v + ' !important'
+      };
     }
-    return result;
-  }
-
-  // =========================================================================
-  // Theme tokens (backwards compatible)
+    rules['.bw-m-auto, .m-auto'] = {
+      'margin': 'auto !important'
+    };
+    rules['.bw-py-3'] = {
+      'padding-top': '1rem !important',
+      'padding-bottom': '1rem !important'
+    };
+    rules['.bw-py-4'] = {
+      'padding-top': '1.5rem !important',
+      'padding-bottom': '1.5rem !important'
+    };
+    rules['.bw-py-5'] = {
+      'padding-top': '3rem !important',
+      'padding-bottom': '3rem !important'
+    };
+    rules['.bw-py-6'] = {
+      'padding-top': '4rem !important',
+      'padding-bottom': '4rem !important'
+    };
+
+    // Display utilities (structural)
+    rules['.bw-d-none'] = {
+      'display': 'none'
+    };
+    rules['.bw-d-block'] = {
+      'display': 'block'
+    };
+    rules['.bw-d-inline'] = {
+      'display': 'inline'
+    };
+    rules['.bw-d-inline-block'] = {
+      'display': 'inline-block'
+    };
+    rules['.bw-d-flex'] = {
+      'display': 'flex'
+    };
+    rules['.bw-text-left'] = {
+      'text-align': 'left'
+    };
+    rules['.bw-text-right'] = {
+      'text-align': 'right'
+    };
+    rules['.bw-text-center'] = {
+      'text-align': 'center'
+    };
+
+    // Flexbox utilities (structural)
+    var jc = {
+      start: 'flex-start',
+      end: 'flex-end',
+      center: 'center',
+      between: 'space-between',
+      around: 'space-around'
+    };
+    for (var jk in jc) {
+      rules['.bw-justify-content-' + jk + ', .justify-content-' + jk] = {
+        'justify-content': jc[jk]
+      };
+    }
+    var ai = {
+      start: 'flex-start',
+      end: 'flex-end',
+      center: 'center'
+    };
+    for (var ak in ai) {
+      rules['.bw-align-items-' + ak + ', .align-items-' + ak] = {
+        'align-items': ai[ak]
+      };
+    }
+
+    // Size utilities (structural)
+    ['25', '50', '75', '100'].forEach(function (n) {
+      rules['.bw-w-' + n + ', .w-' + n] = {
+        'width': n + '% !important'
+      };
+      rules['.bw-h-' + n + ', .h-' + n] = {
+        'height': n + '% !important'
+      };
+    });
+    rules['.bw-w-auto, .w-auto'] = {
+      'width': 'auto !important'
+    };
+    rules['.bw-h-auto, .h-auto'] = {
+      'height': 'auto !important'
+    };
+    rules['.bw-mw-100, .mw-100'] = {
+      'max-width': '100% !important'
+    };
+    rules['.bw-mh-100, .mh-100'] = {
+      'max-height': '100% !important'
+    };
+
+    // Position utilities (structural)
+    ['static', 'relative', 'absolute', 'fixed', 'sticky'].forEach(function (p) {
+      rules['.bw-position-' + p + ', .position-' + p] = {
+        'position': p + ' !important'
+      };
+    });
+    rules['.bw-translate-middle, .translate-middle'] = {
+      'transform': 'translate(-50%, -50%) !important'
+    };
+
+    // Overflow utilities (structural)
+    ['auto', 'hidden', 'visible', 'scroll'].forEach(function (o) {
+      rules['.bw-overflow-' + o + ', .overflow-' + o] = {
+        'overflow': o + ' !important'
+      };
+    });
+
+    // Visibility utilities (structural)
+    rules['.bw-visible, .visible'] = {
+      'visibility': 'visible !important'
+    };
+    rules['.bw-invisible, .invisible'] = {
+      'visibility': 'hidden !important'
+    };
+
+    // User select utilities (structural)
+    ['all', 'auto', 'none'].forEach(function (u) {
+      rules['.bw-user-select-' + u + ', .user-select-' + u] = {
+        'user-select': u + ' !important'
+      };
+    });
+
+    // Pointer events
+    rules['.pe-none'] = {
+      'pointer-events': 'none !important'
+    };
+    rules['.pe-auto'] = {
+      'pointer-events': 'auto !important'
+    };
+
+    // Typography utilities (structural)
+    rules['.fw-light'] = {
+      'font-weight': '300 !important'
+    };
+    rules['.fw-lighter'] = {
+      'font-weight': 'lighter !important'
+    };
+    rules['.fw-normal'] = {
+      'font-weight': '400 !important'
+    };
+    rules['.fw-bold'] = {
+      'font-weight': '700 !important'
+    };
+    rules['.fw-bolder'] = {
+      'font-weight': 'bolder !important'
+    };
+    rules['.fst-italic'] = {
+      'font-style': 'italic !important'
+    };
+    rules['.fst-normal'] = {
+      'font-style': 'normal !important'
+    };
+    rules['.text-decoration-none'] = {
+      'text-decoration': 'none !important'
+    };
+    rules['.text-decoration-underline'] = {
+      'text-decoration': 'underline !important'
+    };
+    rules['.text-decoration-line-through'] = {
+      'text-decoration': 'line-through !important'
+    };
+    rules['.text-lowercase'] = {
+      'text-transform': 'lowercase !important'
+    };
+    rules['.text-uppercase'] = {
+      'text-transform': 'uppercase !important'
+    };
+    rules['.text-capitalize'] = {
+      'text-transform': 'capitalize !important'
+    };
+    rules['.text-wrap'] = {
+      'white-space': 'normal !important'
+    };
+    rules['.text-nowrap'] = {
+      'white-space': 'nowrap !important'
+    };
+
+    // Font-size utilities (structural)
+    rules['.fs-1'] = {
+      'font-size': 'calc(1.375rem + 1.5vw) !important'
+    };
+    rules['.fs-2'] = {
+      'font-size': 'calc(1.325rem + .9vw) !important'
+    };
+    rules['.fs-3'] = {
+      'font-size': 'calc(1.3rem + .6vw) !important'
+    };
+    rules['.fs-4'] = {
+      'font-size': 'calc(1.275rem + .3vw) !important'
+    };
+    rules['.fs-5'] = {
+      'font-size': '1.25rem !important'
+    };
+    rules['.fs-6'] = {
+      'font-size': '1rem !important'
+    };
+
+    // List utilities (structural)
+    rules['.list-unstyled'] = {
+      'padding-left': '0',
+      'list-style': 'none'
+    };
+    rules['.list-inline'] = {
+      'padding-left': '0',
+      'list-style': 'none'
+    };
+    rules['.list-inline-item'] = {
+      'display': 'inline-block'
+    };
+    rules['.list-inline-item:not(:last-child)'] = {
+      'margin-right': '.5rem'
+    };
+
+    // Opacity utilities (structural)
+    rules['.opacity-0'] = {
+      'opacity': '0 !important'
+    };
+    rules['.opacity-25'] = {
+      'opacity': '.25 !important'
+    };
+    rules['.opacity-50'] = {
+      'opacity': '.5 !important'
+    };
+    rules['.opacity-75'] = {
+      'opacity': '.75 !important'
+    };
+    rules['.opacity-100'] = {
+      'opacity': '1 !important'
+    };
+
+    // Responsive grid
+    Object.assign(rules, defaultStyles.responsive);
+    return addUnderscoreAliases(rules);
+  }
+
+  // =========================================================================
+  // getAllStyles — backwards compatible
+  // =========================================================================
+
+  /**
+   * Add underscore aliases for all bw- selectors
+   * @param {Object} rules - CSS rules object
+   * @returns {Object} - Rules with underscore aliases added
+   */
+  function addUnderscoreAliases(rules) {
+    var result = {};
+    for (var _i = 0, _Object$entries = Object.entries(rules); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        selector = _Object$entries$_i[0],
+        styles = _Object$entries$_i[1];
+      result[selector] = styles;
+      if (selector.includes('.bw-')) {
+        var underscoreSelector = selector.replace(/\.bw-/g, '.bw_');
+        result[underscoreSelector] = styles;
+      }
+    }
+    return result;
+  }
+
+  // =========================================================================
+  // Theme tokens (backwards compatible)
   // =========================================================================
 
   var theme = {
@@ -2776,6 +3326,56 @@
       '.bw-dark .bw-close': {
         'color': textColor
       },
+      '.bw-dark .bw-accordion-item': {
+        'background-color': surfaceBg,
+        'border-color': borderColor
+      },
+      '.bw-dark .bw-accordion-button': {
+        'color': textColor
+      },
+      '.bw-dark .bw-accordion-button:hover': {
+        'background-color': bodyBg
+      },
+      '.bw-dark .bw-accordion-body': {
+        'border-top-color': borderColor
+      },
+      '.bw-dark .bw-modal-content': {
+        'background-color': surfaceBg,
+        'border-color': borderColor
+      },
+      '.bw-dark .bw-modal-header': {
+        'border-bottom-color': borderColor
+      },
+      '.bw-dark .bw-modal-footer': {
+        'border-top-color': borderColor
+      },
+      '.bw-dark .bw-modal-title': {
+        'color': textColor
+      },
+      '.bw-dark .bw-toast': {
+        'background-color': surfaceBg,
+        'border-color': borderColor
+      },
+      '.bw-dark .bw-toast-header': {
+        'border-bottom-color': borderColor,
+        'color': textColor
+      },
+      '.bw-dark .bw-dropdown-menu': {
+        'background-color': surfaceBg,
+        'border-color': borderColor
+      },
+      '.bw-dark .bw-dropdown-item': {
+        'color': textColor
+      },
+      '.bw-dark .bw-dropdown-item:hover': {
+        'background-color': bodyBg
+      },
+      '.bw-dark .bw-dropdown-divider': {
+        'border-top-color': borderColor
+      },
+      '.bw-dark .bw-skeleton': {
+        'background-color': borderColor
+      },
       '.bw-dark h1, .bw-dark h2, .bw-dark h3, .bw-dark h4, .bw-dark h5, .bw-dark h6': {
         'color': textColor
       },
@@ -2803,8 +3403,11 @@
   }
 
   var _excluded$1 = ["type", "placeholder", "value", "id", "name", "disabled", "readonly", "required", "className", "style"],
-    _excluded2 = ["placeholder", "value", "rows", "id", "name", "disabled", "readonly", "required", "className"],
-    _excluded3 = ["options", "value", "id", "name", "disabled", "required", "className"];
+    _excluded2$1 = ["placeholder", "value", "rows", "id", "name", "disabled", "readonly", "required", "className"],
+    _excluded3 = ["options", "value", "id", "name", "disabled", "required", "className"],
+    _excluded4 = ["label", "checked", "id", "name", "disabled", "value", "className"],
+    _excluded5 = ["label", "name", "value", "checked", "id", "disabled", "className"],
+    _excluded6 = ["label", "checked", "id", "name", "disabled", "className"];
   /**
    * Bitwrench v2 Components
    *
@@ -3429,7 +4032,13 @@
         a: {
           type: 'button',
           "class": 'bw-close',
-          'aria-label': 'Close'
+          'aria-label': 'Close',
+          onclick: function onclick(e) {
+            var alert = e.target.closest('.bw-alert');
+            if (alert) {
+              alert.remove();
+            }
+          }
         },
         c: '×'
       }].filter(Boolean)
@@ -3442,26 +4051,30 @@
    * @param {Object} [props] - Badge configuration
    * @param {string} [props.text] - Badge display text
    * @param {string} [props.variant="primary"] - Color variant
+   * @param {string} [props.size] - Size variant: 'sm' or 'lg' (default is medium)
    * @param {boolean} [props.pill=false] - Use pill (rounded) shape
    * @param {string} [props.className] - Additional CSS classes
    * @returns {Object} TACO object representing a badge span
    * @category Component Builders
    * @example
    * const badge = makeBadge({ text: "New", variant: "danger", pill: true });
+   * const small = makeBadge({ text: "3", variant: "info", size: "sm" });
    */
   function makeBadge() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var text = props.text,
       _props$variant3 = props.variant,
       variant = _props$variant3 === void 0 ? 'primary' : _props$variant3,
+      size = props.size,
       _props$pill = props.pill,
       pill = _props$pill === void 0 ? false : _props$pill,
       _props$className9 = props.className,
       className = _props$className9 === void 0 ? '' : _props$className9;
+    var sizeClass = size === 'sm' ? ' bw-badge-sm' : size === 'lg' ? ' bw-badge-lg' : '';
     return {
       t: 'span',
       a: {
-        "class": "bw-badge bw-badge-".concat(variant, " ").concat(pill ? 'bw-badge-pill' : '', " ").concat(className).trim()
+        "class": "bw-badge bw-badge-".concat(variant).concat(sizeClass, " ").concat(pill ? 'bw-badge-pill' : '', " ").concat(className).trim()
       },
       c: text
     };
@@ -3843,7 +4456,7 @@
       required = _props$required2 === void 0 ? false : _props$required2,
       _props$className10 = props.className,
       className = _props$className10 === void 0 ? '' : _props$className10,
-      eventHandlers = _objectWithoutProperties(props, _excluded2);
+      eventHandlers = _objectWithoutProperties(props, _excluded2$1);
     return {
       t: 'textarea',
       a: _objectSpread2({
@@ -3949,15 +4562,18 @@
       name = props.name,
       _props$disabled5 = props.disabled,
       disabled = _props$disabled5 === void 0 ? false : _props$disabled5,
-      value = props.value;
+      value = props.value,
+      _props$className12 = props.className,
+      className = _props$className12 === void 0 ? '' : _props$className12,
+      eventHandlers = _objectWithoutProperties(props, _excluded4);
     return {
       t: 'div',
       a: {
-        "class": 'bw-form-check'
+        "class": "bw-form-check ".concat(className).trim()
       },
       c: [{
         t: 'input',
-        a: {
+        a: _objectSpread2({
           type: 'checkbox',
           "class": 'bw-form-check-input',
           checked: checked,
@@ -3965,7 +4581,7 @@
           name: name,
           disabled: disabled,
           value: value
-        }
+        }, eventHandlers)
       }, label && {
         t: 'label',
         a: {
@@ -4004,8 +4620,8 @@
       direction = _props$direction === void 0 ? 'vertical' : _props$direction,
       _props$gap = props.gap,
       gap = _props$gap === void 0 ? 3 : _props$gap,
-      _props$className12 = props.className,
-      className = _props$className12 === void 0 ? '' : _props$className12;
+      _props$className13 = props.className,
+      className = _props$className13 === void 0 ? '' : _props$className13;
     return {
       t: 'div',
       a: {
@@ -4096,8 +4712,8 @@
       overlay = _props$overlay === void 0 ? false : _props$overlay,
       backgroundImage = props.backgroundImage,
       actions = props.actions,
-      _props$className13 = props.className,
-      className = _props$className13 === void 0 ? '' : _props$className13;
+      _props$className14 = props.className,
+      className = _props$className14 === void 0 ? '' : _props$className14;
     var sizeClasses = {
       sm: 'bw-py-3',
       md: 'bw-py-4',
@@ -4186,8 +4802,8 @@
       centered = _props$centered2 === void 0 ? true : _props$centered2,
       _props$iconSize = props.iconSize,
       iconSize = _props$iconSize === void 0 ? '3rem' : _props$iconSize,
-      _props$className14 = props.className,
-      className = _props$className14 === void 0 ? '' : _props$className14;
+      _props$className15 = props.className,
+      className = _props$className15 === void 0 ? '' : _props$className15;
     var colClass = "bw-col-md-".concat(12 / columns);
     return {
       t: 'div',
@@ -4213,8 +4829,8 @@
               c: [feature.icon && {
                 t: 'div',
                 a: {
-                  "class": 'bw-feature-icon bw-mb-3',
-                  style: "font-size: ".concat(iconSize, "; color: var(--bw-primary);")
+                  "class": 'bw-feature-icon bw-mb-3 bw-text-primary',
+                  style: "font-size: ".concat(iconSize, ";")
                 },
                 c: feature.icon
               }, feature.title && {
@@ -4267,8 +4883,8 @@
       variant = _props$variant7 === void 0 ? 'light' : _props$variant7,
       _props$centered3 = props.centered,
       centered = _props$centered3 === void 0 ? true : _props$centered3,
-      _props$className15 = props.className,
-      className = _props$className15 === void 0 ? '' : _props$className15;
+      _props$className16 = props.className,
+      className = _props$className16 === void 0 ? '' : _props$className16;
     return {
       t: 'section',
       a: {
@@ -4337,8 +4953,8 @@
       variant = _props$variant8 === void 0 ? 'default' : _props$variant8,
       _props$spacing = props.spacing,
       spacing = _props$spacing === void 0 ? 'md' : _props$spacing,
-      _props$className16 = props.className,
-      className = _props$className16 === void 0 ? '' : _props$className16;
+      _props$className17 = props.className,
+      className = _props$className17 === void 0 ? '' : _props$className17;
     var spacingClasses = {
       sm: 'bw-py-3',
       md: 'bw-py-4',
@@ -4375,522 +4991,1451 @@
           }].filter(Boolean)
         }, content].filter(Boolean)
       }
-    };
-  }
-
-  // =========================================================================
-  // Component Handle Classes
-  //
-  // Handle classes provide imperative DOM manipulation for rendered components.
-  // They cache child element references for efficient updates without
-  // full re-renders. Used by bw.createCard(), bw.createTable(), etc.
-  // =========================================================================
+    };
+  }
+
+  // =========================================================================
+  // Component Handle Classes
+  //
+  // Handle classes provide imperative DOM manipulation for rendered components.
+  // They cache child element references for efficient updates without
+  // 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
+   */
+  var CardHandle = /*#__PURE__*/function () {
+    /**
+     * @param {Element} element - The card's root DOM element
+     * @param {Object} taco - The original TACO object used to create the card
+     */
+    function CardHandle(element, taco) {
+      var _taco$o;
+      _classCallCheck(this, CardHandle);
+      this.element = element;
+      this._taco = taco;
+      this.state = ((_taco$o = taco.o) === null || _taco$o === void 0 ? void 0 : _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)
+     */
+    return _createClass(CardHandle, [{
+      key: "setTitle",
+      value: function 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)
+       */
+    }, {
+      key: "setContent",
+      value: function setContent(content) {
+        if (this.children.body) {
+          if (typeof content === 'string') {
+            this.children.body.textContent = content;
+          } else {
+            // Re-render content
+            this.children.body.innerHTML = '';
+            var 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)
+       */
+    }, {
+      key: "addClass",
+      value: function 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)
+       */
+    }, {
+      key: "removeClass",
+      value: function 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
+       */
+    }, {
+      key: "select",
+      value: function 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
+   */
+  var TableHandle = /*#__PURE__*/function () {
+    /**
+     * @param {Element} element - The table's root DOM element
+     * @param {Object} taco - The original TACO object used to create the table
+     */
+    function TableHandle(element, taco) {
+      var _taco$o2;
+      _classCallCheck(this, TableHandle);
+      this.element = element;
+      this._taco = taco;
+      this.state = ((_taco$o2 = taco.o) === null || _taco$o2 === void 0 ? void 0 : _taco$o2.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
+     */
+    return _createClass(TableHandle, [{
+      key: "_setupSorting",
+      value: function _setupSorting() {
+        var _this = this;
+        this.children.headers.forEach(function (th, index) {
+          th.style.cursor = 'pointer';
+          th.onclick = function () {
+            return _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)
+       */
+    }, {
+      key: "setData",
+      value: function 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)
+       */
+    }, {
+      key: "sortBy",
+      value: function sortBy(column, direction) {
+        var _this2 = this;
+        if (column === this._sortColumn && !direction) {
+          this._sortDirection = this._sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+          this._sortColumn = column;
+          this._sortDirection = direction || 'asc';
+        }
+        var columnKey = Object.keys(this._data[0])[Array.from(this.children.headers).findIndex(function (th) {
+          return th.textContent === column;
+        })];
+        this._data.sort(function (a, b) {
+          var aVal = a[columnKey];
+          var bVal = b[columnKey];
+          var result = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+          return _this2._sortDirection === 'asc' ? result : -result;
+        });
+        this._renderBody();
+        return this;
+      }
+
+      /**
+       * Re-render the tbody from current _data
+       * @private
+       */
+    }, {
+      key: "_renderBody",
+      value: function _renderBody() {
+        var _this3 = this;
+        this.children.tbody.innerHTML = '';
+        this._data.forEach(function (row) {
+          var tr = document.createElement('tr');
+          Object.values(row).forEach(function (value) {
+            var td = document.createElement('td');
+            td.textContent = value;
+            tr.appendChild(td);
+          });
+          _this3.children.tbody.appendChild(tr);
+        });
+      }
+    }]);
+  }();
 
   /**
-   * Imperative handle for a rendered card component
+   * Imperative handle for a rendered navbar component
    *
-   * Provides methods to update card title, content, and CSS classes
-   * without re-rendering the entire component. Created automatically
-   * when using bw.createCard().
+   * Provides methods to update the active navigation link.
+   * Created automatically when using bw.createNavbar().
    *
    * @category Component Handles
    */
-  var CardHandle = /*#__PURE__*/function () {
+  var NavbarHandle = /*#__PURE__*/function () {
     /**
-     * @param {Element} element - The card's root DOM element
-     * @param {Object} taco - The original TACO object used to create the card
+     * @param {Element} element - The navbar's root DOM element
+     * @param {Object} taco - The original TACO object used to create the navbar
      */
-    function CardHandle(element, taco) {
-      var _taco$o;
-      _classCallCheck(this, CardHandle);
+    function NavbarHandle(element, taco) {
+      var _taco$o3;
+      _classCallCheck(this, NavbarHandle);
       this.element = element;
       this._taco = taco;
-      this.state = ((_taco$o = taco.o) === null || _taco$o === void 0 ? void 0 : _taco$o.state) || {};
-
-      // Cache child elements
+      this.state = ((_taco$o3 = taco.o) === null || _taco$o3 === void 0 ? void 0 : _taco$o3.state) || {};
       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')
+        brand: element.querySelector('.bw-navbar-brand'),
+        links: element.querySelectorAll('.bw-nav-link')
       };
     }
 
     /**
-     * Update the card title text
+     * Set the active navigation link by href
      *
-     * @param {string} title - New title text
-     * @returns {CardHandle} this (for chaining)
+     * @param {string} href - The href value of the link to activate
+     * @returns {NavbarHandle} this (for chaining)
      */
-    return _createClass(CardHandle, [{
-      key: "setTitle",
-      value: function 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)
-       */
-    }, {
-      key: "setContent",
-      value: function setContent(content) {
-        if (this.children.body) {
-          if (typeof content === 'string') {
-            this.children.body.textContent = content;
+    return _createClass(NavbarHandle, [{
+      key: "setActive",
+      value: function setActive(href) {
+        this.children.links.forEach(function (link) {
+          if (link.getAttribute('href') === href) {
+            link.classList.add('active');
           } else {
-            // Re-render content
-            this.children.body.innerHTML = '';
-            var newContent = window.bw.taco.toDOM(content);
-            this.children.body.appendChild(newContent);
+            link.classList.remove('active');
           }
-        }
+        });
         return this;
       }
+    }]);
+  }();
 
-      /**
-       * Add a CSS class to the card root element
-       *
-       * @param {string} className - Class to add
-       * @returns {CardHandle} this (for chaining)
-       */
-    }, {
-      key: "addClass",
-      value: function addClass(className) {
-        this.element.classList.add(className);
-        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
+   */
+  var TabsHandle = /*#__PURE__*/function () {
+    /**
+     * @param {Element} element - The tabs container DOM element
+     * @param {Object} taco - The original TACO object used to create the tabs
+     */
+    function TabsHandle(element, taco) {
+      var _taco$o4;
+      _classCallCheck(this, TabsHandle);
+      this.element = element;
+      this._taco = taco;
+      this.state = ((_taco$o4 = taco.o) === null || _taco$o4 === void 0 ? void 0 : _taco$o4.state) || {};
+      this.children = {
+        navItems: element.querySelectorAll('.bw-nav-link'),
+        tabPanes: element.querySelectorAll('.bw-tab-pane')
+      };
+      this._setupTabs();
+    }
 
-      /**
-       * Remove a CSS class from the card root element
-       *
-       * @param {string} className - Class to remove
-       * @returns {CardHandle} this (for chaining)
-       */
-    }, {
-      key: "removeClass",
-      value: function removeClass(className) {
-        this.element.classList.remove(className);
-        return this;
+    /**
+     * Attach click handlers to tab navigation buttons
+     * @private
+     */
+    return _createClass(TabsHandle, [{
+      key: "_setupTabs",
+      value: function _setupTabs() {
+        var _this4 = this;
+        this.children.navItems.forEach(function (navItem, index) {
+          navItem.onclick = function (e) {
+            e.preventDefault();
+            _this4.switchTo(index);
+          };
+        });
       }
 
       /**
-       * Query a child element within the card
+       * Programmatically switch to a tab by index
        *
-       * @param {string} selector - CSS selector
-       * @returns {Element|null} Matching element or null
+       * @param {number} index - Zero-based tab index to activate
+       * @returns {TabsHandle} this (for chaining)
        */
     }, {
-      key: "select",
-      value: function select(selector) {
-        return this.element.querySelector(selector);
+      key: "switchTo",
+      value: function switchTo(index) {
+        this.children.navItems.forEach(function (item, i) {
+          if (i === index) {
+            item.classList.add('active');
+          } else {
+            item.classList.remove('active');
+          }
+        });
+        this.children.tabPanes.forEach(function (pane, i) {
+          if (i === index) {
+            pane.classList.add('active');
+          } else {
+            pane.classList.remove('active');
+          }
+        });
+        this.state.activeIndex = index;
+        return this;
       }
     }]);
   }();
 
   /**
-   * Imperative handle for a rendered table component
+   * Create a code demo component for documentation pages
+   *
+   * Displays a live result alongside source code in a tabbed interface.
+   * Includes a copy-to-clipboard button on the code tab.
+   *
+   * @param {Object} [props] - Code demo configuration
+   * @param {string} [props.title] - Demo title heading
+   * @param {string} [props.description] - Demo description text
+   * @param {string} [props.code] - Source code to display (adds a "Code" tab when present)
+   * @param {string|Object|Array} [props.result] - Live result content for the "Result" tab
+   * @param {string} [props.language="javascript"] - Code language for syntax class
+   * @returns {Object} TACO object representing a code demo with tabbed Result/Code views
+   * @category Component Builders
+   * @example
+   * const demo = makeCodeDemo({
+   *   title: "Button Example",
+   *   description: "A simple primary button",
+   *   code: 'makeButton({ text: "Click me" })',
+   *   result: makeButton({ text: "Click me" })
+   * });
+   */
+  function makeCodeDemo() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var title = props.title,
+      description = props.description,
+      code = props.code,
+      result = props.result,
+      _props$language = props.language,
+      language = _props$language === void 0 ? 'javascript' : _props$language;
+
+    // Generate unique ID for this demo
+    var demoId = "demo-".concat(Math.random().toString(36).substr(2, 9));
+    var tabs = [{
+      label: 'Result',
+      active: true,
+      content: result
+    }];
+
+    // Only add Code tab if code is provided
+    if (code) {
+      tabs.push({
+        label: 'Code',
+        content: {
+          t: 'div',
+          a: {
+            style: 'position: relative;'
+          },
+          c: [{
+            t: 'button',
+            a: {
+              "class": 'bw-copy-btn bw-code-copy-btn',
+              onclick: function onclick(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(function () {
+                    btn.textContent = originalText;
+                    btn.style.background = 'rgba(255,255,255,0.12)';
+                    btn.style.color = '#aaa';
+                  }, 2000);
+                });
+              }
+            },
+            c: 'Copy'
+          }, typeof globalThis !== 'undefined' && typeof globalThis.bw !== 'undefined' && typeof globalThis.bw.codeEditor === 'function' ? globalThis.bw.codeEditor({
+            code: code,
+            lang: language === 'javascript' ? 'js' : language,
+            readOnly: true,
+            height: 'auto'
+          }) : {
+            t: 'pre',
+            a: {
+              "class": 'bw-code-pre'
+            },
+            c: {
+              t: 'code',
+              a: {
+                "class": "bw-code-block language-".concat(language)
+              },
+              c: code
+            }
+          }]
+        }
+      });
+    }
+    var content = [title && {
+      t: 'h3',
+      c: title
+    }, description && {
+      t: 'p',
+      a: {
+        "class": 'bw-text-muted',
+        style: 'margin-bottom: 1rem;'
+      },
+      c: description
+    }, makeTabs({
+      tabs: tabs,
+      id: demoId
+    })].filter(Boolean);
+    return {
+      t: 'div',
+      a: {
+        "class": 'bw-code-demo'
+      },
+      c: content
+    };
+  }
+
+  /**
+   * Registry mapping component type names to their handle classes
    *
-   * Provides methods for data updates and column sorting. Caches
-   * thead/tbody/header references for efficient DOM updates.
-   * Created automatically when using bw.createTable().
+   * Used by bw.createCard(), bw.createTable(), etc. to wrap rendered
+   * DOM elements in the appropriate imperative handle.
    *
-   * @category Component Handles
+   * @type {Object.<string, Function>}
    */
-  var TableHandle = /*#__PURE__*/function () {
-    /**
-     * @param {Element} element - The table's root DOM element
-     * @param {Object} taco - The original TACO object used to create the table
-     */
-    function TableHandle(element, taco) {
-      var _taco$o2;
-      _classCallCheck(this, TableHandle);
-      this.element = element;
-      this._taco = taco;
-      this.state = ((_taco$o2 = taco.o) === null || _taco$o2 === void 0 ? void 0 : _taco$o2.state) || {};
-      this._data = this.state.data || [];
-      this._sortColumn = null;
-      this._sortDirection = 'asc';
+  // =========================================================================
+  // Phase 1: Quick Wins
+  // =========================================================================
 
-      // Cache elements
-      this.children = {
-        thead: element.querySelector('thead'),
-        tbody: element.querySelector('tbody'),
-        headers: element.querySelectorAll('th')
+  /**
+   * Create a pagination navigation component
+   *
+   * @param {Object} [props] - Pagination configuration
+   * @param {number} [props.pages=1] - Total number of pages
+   * @param {number} [props.currentPage=1] - Currently active page (1-based)
+   * @param {Function} [props.onPageChange] - Callback when page changes, receives page number
+   * @param {string} [props.size] - Size variant ("sm" or "lg")
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing a pagination nav
+   * @category Component Builders
+   * @example
+   * const pager = makePagination({
+   *   pages: 10,
+   *   currentPage: 3,
+   *   onPageChange: (page) => loadPage(page)
+   * });
+   */
+  function makePagination() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _props$pages = props.pages,
+      pages = _props$pages === void 0 ? 1 : _props$pages,
+      _props$currentPage = props.currentPage,
+      currentPage = _props$currentPage === void 0 ? 1 : _props$currentPage,
+      onPageChange = props.onPageChange,
+      size = props.size,
+      _props$className18 = props.className,
+      className = _props$className18 === void 0 ? '' : _props$className18;
+    function handleClick(page) {
+      return function (e) {
+        e.preventDefault();
+        if (page < 1 || page > pages || page === currentPage) return;
+        if (onPageChange) onPageChange(page);
       };
+    }
+    var items = [];
 
-      // Set up sorting if enabled
-      if (this.state.sortable) {
-        this._setupSorting();
+    // Previous arrow
+    items.push({
+      t: 'li',
+      a: {
+        "class": "bw-page-item ".concat(currentPage <= 1 ? 'bw-disabled' : '').trim()
+      },
+      c: {
+        t: 'a',
+        a: {
+          "class": 'bw-page-link',
+          href: '#',
+          onclick: handleClick(currentPage - 1),
+          'aria-label': 'Previous'
+        },
+        c: "\u2039"
       }
-    }
+    });
 
-    /**
-     * Attach click-to-sort handlers on all column headers
-     * @private
-     */
-    return _createClass(TableHandle, [{
-      key: "_setupSorting",
-      value: function _setupSorting() {
-        var _this = this;
-        this.children.headers.forEach(function (th, index) {
-          th.style.cursor = 'pointer';
-          th.onclick = function () {
-            return _this.sortBy(th.textContent);
-          };
+    // Page numbers
+    for (var i = 1; i <= pages; i++) {
+      (function (pageNum) {
+        items.push({
+          t: 'li',
+          a: {
+            "class": "bw-page-item ".concat(pageNum === currentPage ? 'bw-active' : '').trim()
+          },
+          c: {
+            t: 'a',
+            a: {
+              "class": 'bw-page-link',
+              href: '#',
+              onclick: handleClick(pageNum)
+            },
+            c: '' + pageNum
+          }
         });
-      }
+      })(i);
+    }
 
-      /**
-       * Replace the table data and re-render the body
-       *
-       * @param {Array<Object>} data - Array of row objects
-       * @returns {TableHandle} this (for chaining)
-       */
-    }, {
-      key: "setData",
-      value: function setData(data) {
-        this._data = data;
-        this._renderBody();
-        return this;
+    // Next arrow
+    items.push({
+      t: 'li',
+      a: {
+        "class": "bw-page-item ".concat(currentPage >= pages ? 'bw-disabled' : '').trim()
+      },
+      c: {
+        t: 'a',
+        a: {
+          "class": 'bw-page-link',
+          href: '#',
+          onclick: handleClick(currentPage + 1),
+          'aria-label': 'Next'
+        },
+        c: "\u203A"
       }
-
-      /**
-       * 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)
-       */
-    }, {
-      key: "sortBy",
-      value: function sortBy(column, direction) {
-        var _this2 = this;
-        if (column === this._sortColumn && !direction) {
-          this._sortDirection = this._sortDirection === 'asc' ? 'desc' : 'asc';
-        } else {
-          this._sortColumn = column;
-          this._sortDirection = direction || 'asc';
-        }
-        var columnKey = Object.keys(this._data[0])[Array.from(this.children.headers).findIndex(function (th) {
-          return th.textContent === column;
-        })];
-        this._data.sort(function (a, b) {
-          var aVal = a[columnKey];
-          var bVal = b[columnKey];
-          var result = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
-          return _this2._sortDirection === 'asc' ? result : -result;
-        });
-        this._renderBody();
-        return this;
+    });
+    return {
+      t: 'nav',
+      a: {
+        'aria-label': 'Pagination'
+      },
+      c: {
+        t: 'ul',
+        a: {
+          "class": "bw-pagination ".concat(size ? 'bw-pagination-' + size : '', " ").concat(className).trim()
+        },
+        c: items
       }
+    };
+  }
 
-      /**
-       * Re-render the tbody from current _data
-       * @private
-       */
-    }, {
-      key: "_renderBody",
-      value: function _renderBody() {
-        var _this3 = this;
-        this.children.tbody.innerHTML = '';
-        this._data.forEach(function (row) {
-          var tr = document.createElement('tr');
-          Object.values(row).forEach(function (value) {
-            var td = document.createElement('td');
-            td.textContent = value;
-            tr.appendChild(td);
-          });
-          _this3.children.tbody.appendChild(tr);
-        });
+  /**
+   * Create a radio button input with label
+   *
+   * @param {Object} [props] - Radio configuration
+   * @param {string} [props.label] - Radio label text
+   * @param {string} [props.name] - Radio group name
+   * @param {string} [props.value] - Radio value attribute
+   * @param {boolean} [props.checked=false] - Whether the radio is selected
+   * @param {string} [props.id] - Element ID (links label to radio)
+   * @param {boolean} [props.disabled=false] - Whether the radio is disabled
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing a radio form group
+   * @category Component Builders
+   * @example
+   * const radio = makeRadio({
+   *   label: "Option A",
+   *   name: "choice",
+   *   value: "a",
+   *   checked: true
+   * });
+   */
+  function makeRadio() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var label = props.label,
+      name = props.name,
+      value = props.value,
+      _props$checked2 = props.checked,
+      checked = _props$checked2 === void 0 ? false : _props$checked2,
+      id = props.id,
+      _props$disabled6 = props.disabled,
+      disabled = _props$disabled6 === void 0 ? false : _props$disabled6,
+      _props$className19 = props.className,
+      className = _props$className19 === void 0 ? '' : _props$className19,
+      eventHandlers = _objectWithoutProperties(props, _excluded5);
+    return {
+      t: 'div',
+      a: {
+        "class": "bw-form-check ".concat(className).trim()
+      },
+      c: [{
+        t: 'input',
+        a: _objectSpread2({
+          type: 'radio',
+          "class": 'bw-form-check-input',
+          name: name,
+          value: value,
+          checked: checked,
+          id: id,
+          disabled: disabled
+        }, eventHandlers)
+      }, label && {
+        t: 'label',
+        a: {
+          "class": 'bw-form-check-label',
+          "for": id
+        },
+        c: label
+      }].filter(Boolean)
+    };
+  }
+
+  /**
+   * Create a button group wrapper
+   *
+   * @param {Object} [props] - Button group configuration
+   * @param {Array} [props.children] - Button TACO objects to group
+   * @param {string} [props.size] - Size variant ("sm" or "lg")
+   * @param {boolean} [props.vertical=false] - Stack buttons vertically
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing a button group
+   * @category Component Builders
+   * @example
+   * const group = makeButtonGroup({
+   *   children: [
+   *     makeButton({ text: "Left", variant: "primary" }),
+   *     makeButton({ text: "Middle", variant: "primary" }),
+   *     makeButton({ text: "Right", variant: "primary" })
+   *   ]
+   * });
+   */
+  function makeButtonGroup() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var children = props.children,
+      size = props.size,
+      _props$vertical2 = props.vertical,
+      vertical = _props$vertical2 === void 0 ? false : _props$vertical2,
+      _props$className20 = props.className,
+      className = _props$className20 === void 0 ? '' : _props$className20;
+    return {
+      t: 'div',
+      a: {
+        "class": "".concat(vertical ? 'bw-btn-group-vertical' : 'bw-btn-group', " ").concat(size ? 'bw-btn-group-' + size : '', " ").concat(className).trim(),
+        role: 'group'
+      },
+      c: children
+    };
+  }
+
+  // =========================================================================
+  // Phase 2: Core Interactive
+  // =========================================================================
+
+  /**
+   * Create an accordion component with collapsible items
+   *
+   * @param {Object} [props] - Accordion configuration
+   * @param {Array<Object>} [props.items=[]] - Accordion items
+   * @param {string} props.items[].title - Header text for the accordion item
+   * @param {string|Object|Array} props.items[].content - Collapsible content
+   * @param {boolean} [props.items[].open=false] - Whether the item is initially open
+   * @param {boolean} [props.multiOpen=false] - Allow multiple items open simultaneously
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing an accordion
+   * @category Component Builders
+   * @example
+   * const accordion = makeAccordion({
+   *   items: [
+   *     { title: "Section 1", content: "Content 1", open: true },
+   *     { title: "Section 2", content: "Content 2" }
+   *   ]
+   * });
+   */
+  function makeAccordion() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _props$items5 = props.items,
+      items = _props$items5 === void 0 ? [] : _props$items5,
+      _props$multiOpen = props.multiOpen,
+      multiOpen = _props$multiOpen === void 0 ? false : _props$multiOpen,
+      _props$className21 = props.className,
+      className = _props$className21 === void 0 ? '' : _props$className21;
+    return {
+      t: 'div',
+      a: {
+        "class": "bw-accordion ".concat(className).trim()
+      },
+      c: items.map(function (item, index) {
+        return {
+          t: 'div',
+          a: {
+            "class": 'bw-accordion-item'
+          },
+          c: [{
+            t: 'h2',
+            a: {
+              "class": 'bw-accordion-header'
+            },
+            c: {
+              t: 'button',
+              a: {
+                "class": "bw-accordion-button ".concat(item.open ? '' : 'bw-collapsed').trim(),
+                type: 'button',
+                'aria-expanded': item.open ? 'true' : 'false',
+                'data-accordion-index': index,
+                onclick: function onclick(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');
+                  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');
+                    }
+                  }
+                  if (isOpen) {
+                    collapse.classList.remove('bw-collapse-show');
+                    collapse.style.maxHeight = null;
+                    btn.classList.add('bw-collapsed');
+                    btn.setAttribute('aria-expanded', 'false');
+                  } else {
+                    collapse.classList.add('bw-collapse-show');
+                    collapse.style.maxHeight = collapse.scrollHeight + 'px';
+                    btn.classList.remove('bw-collapsed');
+                    btn.setAttribute('aria-expanded', 'true');
+                  }
+                }
+              },
+              c: item.title
+            }
+          }, {
+            t: 'div',
+            a: {
+              "class": "bw-accordion-collapse ".concat(item.open ? 'bw-collapse-show' : '').trim()
+            },
+            c: {
+              t: 'div',
+              a: {
+                "class": 'bw-accordion-body'
+              },
+              c: item.content
+            },
+            o: item.open ? {
+              mounted: function mounted(el) {
+                el.style.maxHeight = el.scrollHeight + 'px';
+              }
+            } : undefined
+          }]
+        };
+      }),
+      o: {
+        type: 'accordion',
+        state: {
+          multiOpen: multiOpen
+        }
       }
-    }]);
-  }();
+    };
+  }
 
   /**
-   * Imperative handle for a rendered navbar component
+   * Imperative handle for a rendered modal component
    *
-   * Provides methods to update the active navigation link.
-   * Created automatically when using bw.createNavbar().
+   * Provides `.show()`, `.hide()`, `.toggle()`, and `.destroy()` methods
+   * for controlling the modal programmatically.
    *
    * @category Component Handles
    */
-  var NavbarHandle = /*#__PURE__*/function () {
+  var ModalHandle = /*#__PURE__*/function () {
     /**
-     * @param {Element} element - The navbar's root DOM element
-     * @param {Object} taco - The original TACO object used to create the navbar
+     * @param {Element} element - The modal backdrop DOM element
+     * @param {Object} taco - The original TACO object
      */
-    function NavbarHandle(element, taco) {
-      var _taco$o3;
-      _classCallCheck(this, NavbarHandle);
+    function ModalHandle(element, taco) {
+      _classCallCheck(this, ModalHandle);
       this.element = element;
       this._taco = taco;
-      this.state = ((_taco$o3 = taco.o) === null || _taco$o3 === void 0 ? void 0 : _taco$o3.state) || {};
-      this.children = {
-        brand: element.querySelector('.bw-navbar-brand'),
-        links: element.querySelectorAll('.bw-nav-link')
-      };
+      this._escHandler = null;
     }
 
-    /**
-     * Set the active navigation link by href
-     *
-     * @param {string} href - The href value of the link to activate
-     * @returns {NavbarHandle} this (for chaining)
-     */
-    return _createClass(NavbarHandle, [{
-      key: "setActive",
-      value: function setActive(href) {
-        this.children.links.forEach(function (link) {
-          if (link.getAttribute('href') === href) {
-            link.classList.add('active');
-          } else {
-            link.classList.remove('active');
-          }
-        });
+    /** Show the modal */
+    return _createClass(ModalHandle, [{
+      key: "show",
+      value: function show() {
+        this.element.classList.add('bw-modal-show');
+        document.body.style.overflow = 'hidden';
+        return this;
+      }
+
+      /** Hide the modal */
+    }, {
+      key: "hide",
+      value: function hide() {
+        this.element.classList.remove('bw-modal-show');
+        document.body.style.overflow = '';
+        return this;
+      }
+
+      /** Toggle modal visibility */
+    }, {
+      key: "toggle",
+      value: function toggle() {
+        if (this.element.classList.contains('bw-modal-show')) {
+          this.hide();
+        } else {
+          this.show();
+        }
         return this;
       }
+
+      /** Remove the modal from DOM and clean up */
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        this.hide();
+        if (this._escHandler) {
+          document.removeEventListener('keydown', this._escHandler);
+        }
+        if (this.element.parentNode) {
+          this.element.parentNode.removeChild(this.element);
+        }
+      }
     }]);
   }();
 
   /**
-   * 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
+   * Create a modal dialog overlay
+   *
+   * @param {Object} [props] - Modal configuration
+   * @param {string} [props.title] - Modal title in header
+   * @param {string|Object|Array} [props.content] - Modal body content
+   * @param {string|Object|Array} [props.footer] - Modal footer content
+   * @param {string} [props.size] - Modal size ("sm", "lg", "xl")
+   * @param {boolean} [props.closeButton=true] - Show X close button in header
+   * @param {Function} [props.onClose] - Callback when modal is closed
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing a modal
+   * @category Component Builders
+   * @example
+   * const modal = makeModal({
+   *   title: "Confirm",
+   *   content: "Are you sure?",
+   *   footer: makeButton({ text: "OK", variant: "primary" })
+   * });
    */
-  var TabsHandle = /*#__PURE__*/function () {
-    /**
-     * @param {Element} element - The tabs container DOM element
-     * @param {Object} taco - The original TACO object used to create the tabs
-     */
-    function TabsHandle(element, taco) {
-      var _taco$o4;
-      _classCallCheck(this, TabsHandle);
-      this.element = element;
-      this._taco = taco;
-      this.state = ((_taco$o4 = taco.o) === null || _taco$o4 === void 0 ? void 0 : _taco$o4.state) || {};
-      this.children = {
-        navItems: element.querySelectorAll('.bw-nav-link'),
-        tabPanes: element.querySelectorAll('.bw-tab-pane')
-      };
-      this._setupTabs();
+  function makeModal() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var title = props.title,
+      content = props.content,
+      footer = props.footer,
+      size = props.size,
+      _props$closeButton = props.closeButton,
+      closeButton = _props$closeButton === void 0 ? true : _props$closeButton,
+      onClose = props.onClose,
+      _props$className22 = props.className,
+      className = _props$className22 === void 0 ? '' : _props$className22;
+    function closeModal(el) {
+      var backdrop = el.closest('.bw-modal');
+      if (backdrop) {
+        backdrop.classList.remove('bw-modal-show');
+        document.body.style.overflow = '';
+      }
+      if (onClose) onClose();
     }
-
-    /**
-     * Attach click handlers to tab navigation buttons
-     * @private
-     */
-    return _createClass(TabsHandle, [{
-      key: "_setupTabs",
-      value: function _setupTabs() {
-        var _this4 = this;
-        this.children.navItems.forEach(function (navItem, index) {
-          navItem.onclick = function (e) {
-            e.preventDefault();
-            _this4.switchTo(index);
+    return {
+      t: 'div',
+      a: {
+        "class": "bw-modal ".concat(className).trim()
+      },
+      c: {
+        t: 'div',
+        a: {
+          "class": "bw-modal-dialog ".concat(size ? 'bw-modal-' + size : '').trim()
+        },
+        c: {
+          t: 'div',
+          a: {
+            "class": 'bw-modal-content'
+          },
+          c: [(title || closeButton) && {
+            t: 'div',
+            a: {
+              "class": 'bw-modal-header'
+            },
+            c: [title && {
+              t: 'h5',
+              a: {
+                "class": 'bw-modal-title'
+              },
+              c: title
+            }, closeButton && {
+              t: 'button',
+              a: {
+                type: 'button',
+                "class": 'bw-close',
+                'aria-label': 'Close',
+                onclick: function onclick(e) {
+                  closeModal(e.target);
+                }
+              },
+              c: "\xD7"
+            }].filter(Boolean)
+          }, content && {
+            t: 'div',
+            a: {
+              "class": 'bw-modal-body'
+            },
+            c: content
+          }, footer && {
+            t: 'div',
+            a: {
+              "class": 'bw-modal-footer'
+            },
+            c: footer
+          }].filter(Boolean)
+        }
+      },
+      o: {
+        type: 'modal',
+        mounted: function mounted(el) {
+          // Click backdrop to close
+          el.addEventListener('click', function (e) {
+            if (e.target === el) closeModal(el);
+          });
+          // Escape key to close
+          var escHandler = function escHandler(e) {
+            if (e.key === 'Escape' && el.classList.contains('bw-modal-show')) {
+              closeModal(el);
+            }
           };
-        });
+          document.addEventListener('keydown', escHandler);
+          el._bw_escHandler = escHandler;
+        },
+        unmount: function unmount(el) {
+          if (el._bw_escHandler) {
+            document.removeEventListener('keydown', el._bw_escHandler);
+          }
+          document.body.style.overflow = '';
+        }
       }
+    };
+  }
 
-      /**
-       * Programmatically switch to a tab by index
-       *
-       * @param {number} index - Zero-based tab index to activate
-       * @returns {TabsHandle} this (for chaining)
-       */
-    }, {
-      key: "switchTo",
-      value: function switchTo(index) {
-        this.children.navItems.forEach(function (item, i) {
-          if (i === index) {
-            item.classList.add('active');
-          } else {
-            item.classList.remove('active');
+  /**
+   * Create a toast notification popup
+   *
+   * @param {Object} [props] - Toast configuration
+   * @param {string} [props.title] - Toast title
+   * @param {string|Object|Array} [props.content] - Toast body content
+   * @param {string} [props.variant="info"] - Color variant ("primary", "success", "danger", "warning", "info")
+   * @param {boolean} [props.autoDismiss=true] - Auto-dismiss after delay
+   * @param {number} [props.delay=5000] - Auto-dismiss delay in ms
+   * @param {string} [props.position="top-right"] - Container position
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing a toast
+   * @category Component Builders
+   * @example
+   * const toast = makeToast({
+   *   title: "Success",
+   *   content: "File saved!",
+   *   variant: "success"
+   * });
+   */
+  function makeToast() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var title = props.title,
+      content = props.content,
+      _props$variant9 = props.variant,
+      variant = _props$variant9 === void 0 ? 'info' : _props$variant9,
+      _props$autoDismiss = props.autoDismiss,
+      autoDismiss = _props$autoDismiss === void 0 ? true : _props$autoDismiss,
+      _props$delay = props.delay,
+      delay = _props$delay === void 0 ? 5000 : _props$delay,
+      _props$position = props.position,
+      position = _props$position === void 0 ? 'top-right' : _props$position,
+      _props$className23 = props.className,
+      className = _props$className23 === void 0 ? '' : _props$className23;
+    return {
+      t: 'div',
+      a: {
+        "class": "bw-toast bw-toast-".concat(variant, " ").concat(className).trim(),
+        role: 'alert',
+        'data-position': position
+      },
+      c: [title && {
+        t: 'div',
+        a: {
+          "class": 'bw-toast-header'
+        },
+        c: [{
+          t: 'strong',
+          c: title
+        }, {
+          t: 'button',
+          a: {
+            type: 'button',
+            "class": 'bw-close',
+            'aria-label': 'Close',
+            onclick: function onclick(e) {
+              var toast = e.target.closest('.bw-toast');
+              if (toast) {
+                toast.classList.add('bw-toast-hiding');
+                setTimeout(function () {
+                  if (toast.parentNode) toast.parentNode.removeChild(toast);
+                }, 300);
+              }
+            }
+          },
+          c: "\xD7"
+        }]
+      }, content && {
+        t: 'div',
+        a: {
+          "class": 'bw-toast-body'
+        },
+        c: content
+      }].filter(Boolean),
+      o: {
+        type: 'toast',
+        mounted: function mounted(el) {
+          // Trigger show animation
+          requestAnimationFrame(function () {
+            el.classList.add('bw-toast-show');
+          });
+          // Auto-dismiss
+          if (autoDismiss) {
+            setTimeout(function () {
+              el.classList.add('bw-toast-hiding');
+              setTimeout(function () {
+                if (el.parentNode) el.parentNode.removeChild(el);
+              }, 300);
+            }, delay);
           }
-        });
-        this.children.tabPanes.forEach(function (pane, i) {
-          if (i === index) {
-            pane.classList.add('active');
-          } else {
-            pane.classList.remove('active');
+        }
+      }
+    };
+  }
+
+  // =========================================================================
+  // Phase 3: Essential Modern
+  // =========================================================================
+
+  /**
+   * Create a dropdown menu triggered by a button
+   *
+   * @param {Object} [props] - Dropdown configuration
+   * @param {string|Object} [props.trigger] - Button text or TACO for the trigger
+   * @param {Array<Object>} [props.items=[]] - Menu items
+   * @param {string} [props.items[].text] - Item display text
+   * @param {string} [props.items[].href] - Item link URL
+   * @param {Function} [props.items[].onclick] - Item click handler
+   * @param {boolean} [props.items[].divider] - Render as a divider line
+   * @param {boolean} [props.items[].disabled] - Whether the item is disabled
+   * @param {string} [props.align="start"] - Menu alignment ("start" or "end")
+   * @param {string} [props.variant="primary"] - Trigger button variant
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing a dropdown
+   * @category Component Builders
+   * @example
+   * const dropdown = makeDropdown({
+   *   trigger: "Actions",
+   *   items: [
+   *     { text: "Edit", onclick: () => edit() },
+   *     { divider: true },
+   *     { text: "Delete", onclick: () => del() }
+   *   ]
+   * });
+   */
+  function makeDropdown() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var trigger = props.trigger,
+      _props$items6 = props.items,
+      items = _props$items6 === void 0 ? [] : _props$items6,
+      _props$align = props.align,
+      align = _props$align === void 0 ? 'start' : _props$align,
+      _props$variant0 = props.variant,
+      variant = _props$variant0 === void 0 ? 'primary' : _props$variant0,
+      _props$className24 = props.className,
+      className = _props$className24 === void 0 ? '' : _props$className24;
+    var triggerTaco;
+    if (typeof trigger === 'string' || trigger === undefined) {
+      triggerTaco = {
+        t: 'button',
+        a: {
+          "class": "bw-btn bw-btn-".concat(variant, " bw-dropdown-toggle"),
+          type: 'button',
+          onclick: function onclick(e) {
+            var dropdown = e.target.closest('.bw-dropdown');
+            var menu = dropdown.querySelector('.bw-dropdown-menu');
+            menu.classList.toggle('bw-dropdown-show');
+          }
+        },
+        c: trigger || 'Dropdown'
+      };
+    } else {
+      triggerTaco = trigger;
+    }
+    return {
+      t: 'div',
+      a: {
+        "class": "bw-dropdown ".concat(className).trim()
+      },
+      c: [triggerTaco, {
+        t: 'div',
+        a: {
+          "class": "bw-dropdown-menu ".concat(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: 'a',
+            a: {
+              "class": "bw-dropdown-item ".concat(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');
+                if (item.onclick) item.onclick(e);
+              }
+            },
+            c: item.text
+          };
+        })
+      }],
+      o: {
+        type: 'dropdown',
+        mounted: function mounted(el) {
+          // Click outside to close
+          var outsideHandler = function outsideHandler(e) {
+            if (!el.contains(e.target)) {
+              var menu = el.querySelector('.bw-dropdown-menu');
+              if (menu) menu.classList.remove('bw-dropdown-show');
+            }
+          };
+          document.addEventListener('click', outsideHandler);
+          el._bw_outsideHandler = outsideHandler;
+        },
+        unmount: function unmount(el) {
+          if (el._bw_outsideHandler) {
+            document.removeEventListener('click', el._bw_outsideHandler);
           }
-        });
-        this.state.activeIndex = index;
-        return this;
+        }
       }
-    }]);
-  }();
+    };
+  }
 
   /**
-   * Create a code demo component for documentation pages
-   *
-   * Displays a live result alongside source code in a tabbed interface.
-   * Includes a copy-to-clipboard button on the code tab.
+   * Create a toggle switch (styled checkbox)
    *
-   * @param {Object} [props] - Code demo configuration
-   * @param {string} [props.title] - Demo title heading
-   * @param {string} [props.description] - Demo description text
-   * @param {string} [props.code] - Source code to display (adds a "Code" tab when present)
-   * @param {string|Object|Array} [props.result] - Live result content for the "Result" tab
-   * @param {string} [props.language="javascript"] - Code language for syntax class
-   * @returns {Object} TACO object representing a code demo with tabbed Result/Code views
+   * @param {Object} [props] - Switch configuration
+   * @param {string} [props.label] - Switch label text
+   * @param {boolean} [props.checked=false] - Whether the switch is on
+   * @param {string} [props.id] - Element ID (links label to switch)
+   * @param {string} [props.name] - Input name attribute
+   * @param {boolean} [props.disabled=false] - Whether the switch is disabled
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing a toggle switch
    * @category Component Builders
    * @example
-   * const demo = makeCodeDemo({
-   *   title: "Button Example",
-   *   description: "A simple primary button",
-   *   code: 'makeButton({ text: "Click me" })',
-   *   result: makeButton({ text: "Click me" })
+   * const toggle = makeSwitch({
+   *   label: "Dark mode",
+   *   checked: false,
+   *   onchange: (e) => toggleDark(e.target.checked)
    * });
    */
-  function makeCodeDemo() {
+  function makeSwitch() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var title = props.title,
-      description = props.description,
-      code = props.code,
-      result = props.result,
-      _props$language = props.language,
-      language = _props$language === void 0 ? 'javascript' : _props$language;
+    var label = props.label,
+      _props$checked3 = props.checked,
+      checked = _props$checked3 === void 0 ? false : _props$checked3,
+      id = props.id,
+      name = props.name,
+      _props$disabled7 = props.disabled,
+      disabled = _props$disabled7 === void 0 ? false : _props$disabled7,
+      _props$className25 = props.className,
+      className = _props$className25 === void 0 ? '' : _props$className25,
+      eventHandlers = _objectWithoutProperties(props, _excluded6);
+    return {
+      t: 'div',
+      a: {
+        "class": "bw-form-check bw-form-switch ".concat(className).trim()
+      },
+      c: [{
+        t: 'input',
+        a: _objectSpread2({
+          type: 'checkbox',
+          "class": 'bw-form-check-input bw-switch-input',
+          role: 'switch',
+          checked: checked,
+          id: id,
+          name: name,
+          disabled: disabled
+        }, eventHandlers)
+      }, label && {
+        t: 'label',
+        a: {
+          "class": 'bw-form-check-label',
+          "for": id
+        },
+        c: label
+      }].filter(Boolean)
+    };
+  }
 
-    // Generate unique ID for this demo
-    var demoId = "demo-".concat(Math.random().toString(36).substr(2, 9));
-    var tabs = [{
-      label: 'Result',
-      active: true,
-      content: result
-    }];
+  /**
+   * Create a skeleton loading placeholder
+   *
+   * @param {Object} [props] - Skeleton configuration
+   * @param {string} [props.variant="text"] - Shape variant ("text", "circle", "rect")
+   * @param {string} [props.width] - Custom width (e.g. "200px", "100%")
+   * @param {string} [props.height] - Custom height (e.g. "20px")
+   * @param {number} [props.count=1] - Number of skeleton lines (for text variant)
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing a skeleton placeholder
+   * @category Component Builders
+   * @example
+   * const skeleton = makeSkeleton({ variant: "text", count: 3, width: "100%" });
+   */
+  function makeSkeleton() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _props$variant1 = props.variant,
+      variant = _props$variant1 === void 0 ? 'text' : _props$variant1,
+      width = props.width,
+      height = props.height,
+      _props$count = props.count,
+      count = _props$count === void 0 ? 1 : _props$count,
+      _props$className26 = props.className,
+      className = _props$className26 === void 0 ? '' : _props$className26;
+    if (variant === 'circle') {
+      var circleSize = width || height || '3rem';
+      return {
+        t: 'div',
+        a: {
+          "class": "bw-skeleton bw-skeleton-circle ".concat(className).trim(),
+          style: {
+            width: circleSize,
+            height: circleSize
+          }
+        }
+      };
+    }
+    if (variant === 'rect') {
+      return {
+        t: 'div',
+        a: {
+          "class": "bw-skeleton bw-skeleton-rect ".concat(className).trim(),
+          style: {
+            width: width || '100%',
+            height: height || '120px'
+          }
+        }
+      };
+    }
 
-    // Only add Code tab if code is provided
-    if (code) {
-      tabs.push({
-        label: 'Code',
-        content: {
-          t: 'div',
-          a: {
-            style: 'position: relative;'
-          },
-          c: [{
-            t: 'button',
-            a: {
-              "class": 'bw-copy-btn',
-              style: 'position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.625rem; font-size: 0.6875rem; background: rgba(255,255,255,0.12); color: #aaa; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; cursor: pointer; font-family: inherit; transition: all 0.15s;',
-              onclick: function onclick(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(function () {
-                    btn.textContent = originalText;
-                    btn.style.background = 'rgba(255,255,255,0.12)';
-                    btn.style.color = '#aaa';
-                  }, 2000);
-                });
-              }
-            },
-            c: 'Copy'
-          }, {
-            t: 'pre',
-            a: {
-              style: 'margin: 0; background: #1e293b; border: none; border-radius: 6px; overflow-x: auto;'
-            },
-            c: {
-              t: 'code',
-              a: {
-                "class": "language-".concat(language),
-                style: 'display: block; padding: 1.25rem; font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; font-size: 0.8125rem; line-height: 1.6; color: #e2e8f0;'
-              },
-              c: code
-            }
-          }]
+    // Text variant — multiple lines
+    if (count === 1) {
+      return {
+        t: 'div',
+        a: {
+          "class": "bw-skeleton bw-skeleton-text ".concat(className).trim(),
+          style: {
+            width: width || '100%',
+            height: height || '1em'
+          }
+        }
+      };
+    }
+    var lines = [];
+    for (var i = 0; i < count; i++) {
+      lines.push({
+        t: 'div',
+        a: {
+          "class": 'bw-skeleton bw-skeleton-text',
+          style: {
+            width: i === count - 1 ? '75%' : width || '100%',
+            height: height || '1em'
+          }
         }
       });
     }
-    var content = [title && {
-      t: 'h3',
-      c: title
-    }, description && {
-      t: 'p',
-      a: {
-        style: 'color: #6c757d; margin-bottom: 1rem;'
-      },
-      c: description
-    }, makeTabs({
-      tabs: tabs,
-      id: demoId
-    })].filter(Boolean);
     return {
       t: 'div',
       a: {
-        "class": 'bw-code-demo'
+        "class": "bw-skeleton-group ".concat(className).trim()
       },
-      c: content
+      c: lines
     };
   }
 
   /**
-   * Registry mapping component type names to their handle classes
-   *
-   * Used by bw.createCard(), bw.createTable(), etc. to wrap rendered
-   * DOM elements in the appropriate imperative handle.
-   *
-   * @type {Object.<string, Function>}
+   * Create a user avatar with image or initials fallback
+   *
+   * @param {Object} [props] - Avatar configuration
+   * @param {string} [props.src] - Image source URL
+   * @param {string} [props.alt] - Image alt text
+   * @param {string} [props.initials] - Fallback initials (e.g. "JD")
+   * @param {string} [props.size="md"] - Size ("sm", "md", "lg", "xl")
+   * @param {string} [props.variant="primary"] - Background color variant for initials
+   * @param {string} [props.className] - Additional CSS classes
+   * @returns {Object} TACO object representing an avatar
+   * @category Component Builders
+   * @example
+   * const avatar = makeAvatar({ src: "/photo.jpg", alt: "Jane Doe", size: "lg" });
+   * const avatarInitials = makeAvatar({ initials: "JD", variant: "success" });
    */
+  function makeAvatar() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var src = props.src,
+      _props$alt = props.alt,
+      alt = _props$alt === void 0 ? '' : _props$alt,
+      initials = props.initials,
+      _props$size3 = props.size,
+      size = _props$size3 === void 0 ? 'md' : _props$size3,
+      _props$variant10 = props.variant,
+      variant = _props$variant10 === void 0 ? 'primary' : _props$variant10,
+      _props$className27 = props.className,
+      className = _props$className27 === void 0 ? '' : _props$className27;
+    if (src) {
+      return {
+        t: 'img',
+        a: {
+          "class": "bw-avatar bw-avatar-".concat(size, " ").concat(className).trim(),
+          src: src,
+          alt: alt
+        }
+      };
+    }
+    return {
+      t: 'div',
+      a: {
+        "class": "bw-avatar bw-avatar-".concat(size, " bw-avatar-").concat(variant, " ").concat(className).trim()
+      },
+      c: initials || ''
+    };
+  }
   var componentHandles = {
     card: CardHandle,
     table: TableHandle,
     navbar: NavbarHandle,
-    tabs: TabsHandle
+    tabs: TabsHandle,
+    modal: ModalHandle
   };
 
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     CardHandle: CardHandle,
+    ModalHandle: ModalHandle,
     NavbarHandle: NavbarHandle,
     TableHandle: TableHandle,
     TabsHandle: TabsHandle,
     componentHandles: componentHandles,
+    makeAccordion: makeAccordion,
     makeAlert: makeAlert,
+    makeAvatar: makeAvatar,
     makeBadge: makeBadge,
     makeBreadcrumb: makeBreadcrumb,
     makeButton: makeButton,
+    makeButtonGroup: makeButtonGroup,
     makeCTA: makeCTA,
     makeCard: makeCard,
     makeCheckbox: makeCheckbox,
     makeCodeDemo: makeCodeDemo,
     makeCol: makeCol,
     makeContainer: makeContainer,
+    makeDropdown: makeDropdown,
     makeFeatureGrid: makeFeatureGrid,
     makeForm: makeForm,
     makeFormGroup: makeFormGroup,
     makeHero: makeHero,
     makeInput: makeInput,
     makeListGroup: makeListGroup,
+    makeModal: makeModal,
     makeNav: makeNav,
     makeNavbar: makeNavbar,
+    makePagination: makePagination,
     makeProgress: makeProgress,
+    makeRadio: makeRadio,
     makeRow: makeRow,
     makeSection: makeSection,
     makeSelect: makeSelect,
+    makeSkeleton: makeSkeleton,
     makeSpinner: makeSpinner,
     makeStack: makeStack,
+    makeSwitch: makeSwitch,
     makeTabs: makeTabs,
-    makeTextarea: makeTextarea
+    makeTextarea: makeTextarea,
+    makeToast: makeToast
   });
 
-  var _excluded = ["title", "data", "columns", "className", "responsive"];
+  var _excluded = ["data", "headerRow", "columns"],
+    _excluded2 = ["title", "data", "columns", "className", "striped", "hover", "responsive"];
 
   // Environment-aware module loader for optional Node.js built-ins (fs).
   // Strategy: try require() first (CJS/UMD), fall back to import() (ESM).
@@ -6014,6 +7559,16 @@
     if (attr) {
       // Patch an attribute
       el.setAttribute(attr, String(content));
+    } else if (Array.isArray(content)) {
+      // Patch with array of children (strings and/or TACOs)
+      el.innerHTML = '';
+      content.forEach(function (item) {
+        if (typeof item === 'string' || typeof item === 'number') {
+          el.appendChild(document.createTextNode(String(item)));
+        } else if (item && item.t) {
+          el.appendChild(bw.createDOM(item));
+        }
+      });
     } else if (_typeof(content) === 'object' && content !== null && content.t) {
       // Patch with a TACO — replace children
       el.innerHTML = '';
@@ -7395,6 +8950,7 @@
    */
   bw.htmlTable = function (data) {
     var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    console.warn('bw.htmlTable() is deprecated. Use bw.makeTableFromArray() for TACO output or bw.makeTable() for object-array data.');
     if (bw.typeOf(data) !== "array" || data.length < 1) return "";
     var dopts = {
       useFirstRowAsHeaders: true,
@@ -7485,6 +9041,7 @@
    */
   bw.htmlTabs = function (tabData) {
     var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    console.warn('bw.htmlTabs() is deprecated. Use bw.makeTabs() instead.');
     if (bw.typeOf(tabData) !== "array" || tabData.length < 1) return "";
     var dopts = {
       atr: {
@@ -7545,6 +9102,7 @@
    * @category Legacy (v1)
    */
   bw.selectTabContent = function (tabElement) {
+    console.warn('bw.selectTabContent() is deprecated. Use bw.makeTabs() instead.');
     if (!bw._isBrowser || !tabElement) return;
     var container = tabElement.closest(".bw-tab-container");
     if (!container) return;
@@ -8096,7 +9654,11 @@
       data = _config$data === void 0 ? [] : _config$data,
       columns = config.columns,
       _config$className = config.className,
-      className = _config$className === void 0 ? "table" : _config$className,
+      className = _config$className === void 0 ? '' : _config$className,
+      _config$striped = config.striped,
+      striped = _config$striped === void 0 ? false : _config$striped,
+      _config$hover = config.hover,
+      hover = _config$hover === void 0 ? false : _config$hover,
       _config$sortable = config.sortable,
       sortable = _config$sortable === void 0 ? true : _config$sortable,
       onSort = config.onSort,
@@ -8104,6 +9666,13 @@
       _config$sortDirection = config.sortDirection,
       sortDirection = _config$sortDirection === void 0 ? 'asc' : _config$sortDirection;
 
+    // Build class list: always include bw-table, add striped/hover, append user className
+    var cls = 'bw-table';
+    if (striped) cls += ' bw-table-striped';
+    if (hover) cls += ' bw-table-hover';
+    if (className) cls += ' ' + className;
+    cls = cls.trim();
+
     // Auto-detect columns if not provided
     var cols = columns || (data.length > 0 ? Object.keys(data[0]).map(function (key) {
       return {
@@ -8202,12 +9771,227 @@
     return {
       t: 'table',
       a: {
-        "class": className
+        "class": cls
       },
       c: [thead, tbody]
     };
   };
 
+  /**
+   * Create a table from a 2D array.
+   *
+   * Converts a 2D array into the object-array format that `bw.makeTable()`
+   * expects, then delegates. By default, the first row is used as column
+   * headers. All standard `makeTable` props (striped, hover, sortable,
+   * columns, onSort, etc.) are passed through.
+   *
+   * @param {Object} config - Configuration object
+   * @param {Array<Array>} config.data - 2D array of values
+   * @param {boolean} [config.headerRow=true] - Treat first row as column headers
+   * @param {boolean} [config.striped=false] - Striped rows
+   * @param {boolean} [config.hover=false] - Hover highlight
+   * @param {boolean} [config.sortable=true] - Enable sort
+   * @param {Array<Object>} [config.columns] - Override auto-generated column defs
+   * @param {string} [config.className=''] - Additional CSS classes
+   * @param {Function} [config.onSort] - Sort callback
+   * @param {string} [config.sortColumn] - Currently sorted column key
+   * @param {string} [config.sortDirection='asc'] - Sort direction
+   * @returns {Object} TACO object for table
+   * @category Component Builders
+   * @see bw.makeTable
+   * @example
+   * bw.makeTableFromArray({
+   *   data: [
+   *     ['Name', 'Role', 'Status'],
+   *     ['Alice', 'Engineer', 'Active'],
+   *     ['Bob', 'Designer', 'Away']
+   *   ],
+   *   striped: true,
+   *   hover: true
+   * });
+   */
+  bw.makeTableFromArray = function (config) {
+    var _config$data2 = config.data,
+      data = _config$data2 === void 0 ? [] : _config$data2,
+      _config$headerRow = config.headerRow,
+      headerRow = _config$headerRow === void 0 ? true : _config$headerRow,
+      columns = config.columns,
+      rest = _objectWithoutProperties(config, _excluded);
+    if (!Array.isArray(data) || data.length === 0) {
+      return bw.makeTable(_objectSpread2({
+        data: [],
+        columns: columns || []
+      }, rest));
+    }
+
+    // Determine headers
+    var headers;
+    var rows;
+    if (headerRow && data.length > 0) {
+      headers = data[0].map(function (h) {
+        return String(h);
+      });
+      rows = data.slice(1);
+    } else {
+      // Generate col0, col1, ... headers
+      var width = data[0].length;
+      headers = [];
+      for (var i = 0; i < width; i++) {
+        headers.push('col' + i);
+      }
+      rows = data;
+    }
+
+    // Convert rows to object arrays
+    var objData = rows.map(function (row) {
+      var obj = {};
+      headers.forEach(function (key, i) {
+        obj[key] = row[i] !== undefined ? row[i] : '';
+      });
+      return obj;
+    });
+
+    // Auto-generate column defs if not provided
+    var cols = columns || headers.map(function (key) {
+      return {
+        key: key,
+        label: key
+      };
+    });
+    return bw.makeTable(_objectSpread2({
+      data: objData,
+      columns: cols
+    }, rest));
+  };
+
+  /**
+   * Create a vertical bar chart from data.
+   *
+   * Renders a pure-CSS bar chart using flexbox and percentage heights.
+   * No canvas, SVG, or external charting library required.
+   *
+   * @param {Object} config - Chart configuration
+   * @param {Array<Object>} config.data - Array of data objects
+   * @param {string} [config.labelKey='label'] - Key for bar labels
+   * @param {string} [config.valueKey='value'] - Key for bar values
+   * @param {string} [config.title] - Chart title
+   * @param {string} [config.color='#006666'] - Bar color (hex or CSS color)
+   * @param {string} [config.height='200px'] - Height of the chart area
+   * @param {Function} [config.formatValue] - Value label formatter: (value) => string
+   * @param {boolean} [config.showValues=true] - Show value labels above bars
+   * @param {boolean} [config.showLabels=true] - Show labels below bars
+   * @param {string} [config.className=''] - Additional CSS classes
+   * @returns {Object} TACO object
+   * @category Component Builders
+   * @example
+   * bw.makeBarChart({
+   *   data: [
+   *     { label: 'Jan', value: 12400 },
+   *     { label: 'Feb', value: 15800 },
+   *     { label: 'Mar', value: 9200 }
+   *   ],
+   *   title: 'Monthly Revenue',
+   *   color: '#0077b6',
+   *   formatValue: (v) => '$' + (v / 1000).toFixed(1) + 'k'
+   * });
+   */
+  bw.makeBarChart = function (config) {
+    var _config$data3 = config.data,
+      data = _config$data3 === void 0 ? [] : _config$data3,
+      _config$labelKey = config.labelKey,
+      labelKey = _config$labelKey === void 0 ? 'label' : _config$labelKey,
+      _config$valueKey = config.valueKey,
+      valueKey = _config$valueKey === void 0 ? 'value' : _config$valueKey,
+      title = config.title,
+      _config$color = config.color,
+      color = _config$color === void 0 ? '#006666' : _config$color,
+      _config$height = config.height,
+      height = _config$height === void 0 ? '200px' : _config$height,
+      formatValue = config.formatValue,
+      _config$showValues = config.showValues,
+      showValues = _config$showValues === void 0 ? true : _config$showValues,
+      _config$showLabels = config.showLabels,
+      showLabels = _config$showLabels === void 0 ? true : _config$showLabels,
+      _config$className2 = config.className,
+      className = _config$className2 === void 0 ? '' : _config$className2;
+    if (!Array.isArray(data) || data.length === 0) {
+      return {
+        t: 'div',
+        a: {
+          "class": ('bw-bar-chart-container ' + className).trim()
+        },
+        c: ''
+      };
+    }
+    var values = data.map(function (d) {
+      return Number(d[valueKey]) || 0;
+    });
+    var maxVal = Math.max.apply(null, values);
+    var bars = data.map(function (d, i) {
+      var val = values[i];
+      var pct = maxVal > 0 ? val / maxVal * 100 : 0;
+      var formatted = formatValue ? formatValue(val) : String(val);
+      var children = [];
+      if (showValues) {
+        children.push({
+          t: 'div',
+          a: {
+            "class": 'bw-bar-value'
+          },
+          c: formatted
+        });
+      }
+      children.push({
+        t: 'div',
+        a: {
+          "class": 'bw-bar',
+          style: 'height:' + pct + '%;background:' + color + ';'
+        }
+      });
+      if (showLabels) {
+        children.push({
+          t: 'div',
+          a: {
+            "class": 'bw-bar-label'
+          },
+          c: String(d[labelKey] || '')
+        });
+      }
+      return {
+        t: 'div',
+        a: {
+          "class": 'bw-bar-group'
+        },
+        c: children
+      };
+    });
+    var chartChildren = [];
+    if (title) {
+      chartChildren.push({
+        t: 'h3',
+        a: {
+          "class": 'bw-bar-chart-title'
+        },
+        c: title
+      });
+    }
+    chartChildren.push({
+      t: 'div',
+      a: {
+        "class": 'bw-bar-chart',
+        style: 'height:' + height + ';'
+      },
+      c: bars
+    });
+    return {
+      t: 'div',
+      a: {
+        "class": ('bw-bar-chart-container ' + className).trim()
+      },
+      c: chartChildren
+    };
+  };
+
   /**
    * Create a responsive data table with title and optional wrapper
    *
@@ -8218,7 +10002,9 @@
    * @param {string} [config.title] - Table title heading
    * @param {Array<Object>} config.data - Array of row objects
    * @param {Array<Object>} [config.columns] - Column definitions
-   * @param {string} [config.className="table table-striped table-hover"] - Table CSS class
+   * @param {string} [config.className=''] - Additional CSS classes for the table
+   * @param {boolean} [config.striped=true] - Add striped row styling
+   * @param {boolean} [config.hover=true] - Add hover row highlighting
    * @param {boolean} [config.responsive=true] - Wrap table in responsive overflow div
    * @returns {Object} TACO object for table with wrapper
    * @example
@@ -8232,15 +10018,21 @@
     var title = config.title,
       data = config.data,
       columns = config.columns,
-      _config$className2 = config.className,
-      className = _config$className2 === void 0 ? "table table-striped table-hover" : _config$className2,
+      _config$className3 = config.className,
+      className = _config$className3 === void 0 ? '' : _config$className3,
+      _config$striped2 = config.striped,
+      striped = _config$striped2 === void 0 ? true : _config$striped2,
+      _config$hover2 = config.hover,
+      hover = _config$hover2 === void 0 ? true : _config$hover2,
       _config$responsive = config.responsive,
       responsive = _config$responsive === void 0 ? true : _config$responsive,
-      tableConfig = _objectWithoutProperties(config, _excluded);
+      tableConfig = _objectWithoutProperties(config, _excluded2);
     var table = bw.makeTable(_objectSpread2({
       data: data,
       columns: columns,
-      className: className
+      className: className,
+      striped: striped,
+      hover: hover
     }, tableConfig));
     var content = [];
     if (title) {