bitwrench 2.0.15 → 2.0.17

package/dist/bitwrench-bccl.cjs.js

@@ -0,0 +1,3750 @@
+/*! bitwrench-bccl v2.0.17 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
+'use strict';
+
+/**
+ * Bitwrench v2 Components
+ *
+ * TACO-based UI component library providing Bootstrap-inspired components
+ * as pure JavaScript objects. Every make* function returns a TACO object
+ * ({t, a, c, o}) that can be rendered with bw.html() or bw.DOM().
+ *
+ * Components included: Card, Button, Container, Row, Col, Nav, Navbar,
+ * Tabs, Alert, Badge, Progress, ListGroup, Breadcrumb, Form controls,
+ * Stack, Spinner, Hero, FeatureGrid, CardV2, CTA, Section, CodeDemo.
+ *
+ * Handle classes (CardHandle, TableHandle, NavbarHandle, TabsHandle)
+ * provide imperative DOM manipulation for rendered components.
+ *
+ * @module bitwrench-bccl
+ * @license BSD-2-Clause
+ * @author M A Chatterjee <deftio [at] deftio [dot] com>
+ */
+
+// =========================================================================
+// Variant → Utility Class Mapping
+//
+// Components compose these shared utility classes instead of owning
+// their own variant selectors. The CSS is generated once by
+// generatePaletteUtilities() + generateInteractionRules().
+// =========================================================================
+
+/**
+ * Maps component type to a function that returns utility classes for a variant.
+ * Each function takes a variant name (e.g. 'primary') and returns a class string.
+ * @type {Object.<string, function(string): string>}
+ */
+/**
+ * Convert a variant name to a single palette class.
+ * All BCCL components use this: variant='primary' → class includes 'bw_primary'.
+ * The CSS palette class (.bw-primary) sets bg/color/border; component-specific
+ * overrides in generatePaletteClasses() adjust per component type.
+ *
+ * @param {string} v - Variant name (e.g. 'primary', 'danger', 'outline_primary')
+ * @returns {string} CSS class string
+ */
+function variantClass(v) {
+  if (!v) return '';
+  // Handle outline variants: 'outline_primary' or 'outline-primary'
+  if (v.indexOf('outline') === 0) {
+    var base = v.replace(/^outline[_-]/, '');
+    return 'bw_btn_outline bw_' + base;
+  }
+  return 'bw_' + v;
+}
+
+/**
+ * Create a card component with optional header, body, footer, and image support
+ *
+ * Supports images (top, bottom, left, right), shadow levels, subtitle,
+ * hover animation, and custom section class overrides. For horizontal
+ * image layouts (left/right), content is wrapped in a row grid.
+ *
+ * @param {Object} [props] - Card configuration
+ * @param {string} [props.title] - Card title displayed in the body
+ * @param {string} [props.subtitle] - Card subtitle (muted text below title)
+ * @param {string|Object|Array} [props.content] - Card body content (string, TACO, or array)
+ * @param {string|Object} [props.footer] - Card footer content
+ * @param {string|Object} [props.header] - Card header content
+ * @param {Object} [props.image] - Card image configuration
+ * @param {string} props.image.src - Image source URL
+ * @param {string} [props.image.alt] - Image alt text
+ * @param {string} [props.imagePosition="top"] - Image position ("top", "bottom", "left", "right")
+ * @param {string} [props.variant] - Color variant (e.g. "primary", "danger")
+ * @param {boolean} [props.bordered=true] - Show card border
+ * @param {string} [props.shadow] - Shadow level ("none", "sm", "md", "lg")
+ * @param {boolean} [props.hoverable=false] - Enable hover lift animation
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.style] - Inline style object
+ * @param {string} [props.headerClass] - Additional header CSS classes
+ * @param {string} [props.bodyClass] - Additional body CSS classes
+ * @param {string} [props.footerClass] - Additional footer CSS classes
+ * @param {Object} [props.state] - Component state object
+ * @returns {Object} TACO object representing a card component
+ * @category Component Builders
+ * @example
+ * const card = makeCard({
+ *   title: "Status",
+ *   content: "All systems operational",
+ *   variant: "success"
+ * });
+ * bw.DOM("#app", card);
+ */
+function makeCard(props = {}) {
+  const {
+    title,
+    subtitle,
+    content,
+    footer,
+    header,
+    image,
+    imagePosition = 'top',
+    variant,
+    bordered = true,
+    shadow,
+    hoverable = false,
+    className = '',
+    style,
+    headerClass = '',
+    bodyClass = '',
+    footerClass = ''
+  } = props;
+
+  const shadowClasses = {
+    none: '',
+    sm: 'bw_shadow_sm',
+    md: 'bw_shadow',
+    lg: 'bw_shadow_lg'
+  };
+
+  const cardClasses = [
+    'bw_card',
+    variantClass(variant),
+    shadow ? (shadowClasses[shadow] || '') : '',
+    !bordered ? 'bw_border_0' : '',
+    hoverable ? 'bw_card_hoverable' : '',
+    className
+  ].filter(Boolean).join(' ').trim();
+
+  const cardContent = [
+    header && {
+      t: 'div',
+      a: { class: `bw_card_header ${headerClass}`.trim() },
+      c: header
+    },
+    image && (imagePosition === 'top' || imagePosition === 'left') && {
+      t: 'img',
+      a: {
+        class: `bw_card_img_${imagePosition}`,
+        src: image.src,
+        alt: image.alt || ''
+      }
+    },
+    {
+      t: 'div',
+      a: { class: `bw_card_body ${bodyClass}`.trim() },
+      c: [
+        title && { t: 'h5', a: { class: 'bw_card_title' }, c: title },
+        subtitle && { t: 'h6', a: { class: 'bw_card_subtitle bw_mb_2 bw_text_muted' }, c: subtitle },
+        content && (Array.isArray(content) ? content : [content])
+      ].flat().filter(Boolean)
+    },
+    image && (imagePosition === 'bottom' || imagePosition === 'right') && {
+      t: 'img',
+      a: {
+        class: `bw_card_img_${imagePosition}`,
+        src: image.src,
+        alt: image.alt || ''
+      }
+    },
+    footer && {
+      t: 'div',
+      a: { class: `bw_card_footer ${footerClass}`.trim() },
+      c: footer
+    }
+  ].filter(Boolean);
+
+  // Handle horizontal layout for left/right images
+  if (image && (imagePosition === 'left' || imagePosition === 'right')) {
+    return {
+      t: 'div',
+      a: { class: cardClasses, style },
+      c: {
+        t: 'div',
+        a: { class: 'bw_row bw_g_0' },
+        c: cardContent
+      },
+      o: {
+        type: 'card',
+        state: props.state || {}
+      }
+    };
+  }
+
+  return {
+    t: 'div',
+    a: { class: cardClasses, style },
+    c: cardContent,
+    o: {
+      type: 'card',
+      state: props.state || {}
+    }
+  };
+}
+
+/**
+ * Create a button component
+ *
+ * @param {Object} [props] - Button configuration
+ * @param {string} [props.text] - Button label text
+ * @param {string} [props.variant="primary"] - Color variant (e.g. "primary", "secondary", "danger")
+ * @param {string} [props.size] - Size variant ("sm" or "lg")
+ * @param {boolean} [props.disabled=false] - Whether the button is disabled
+ * @param {Function} [props.onclick] - Click event handler
+ * @param {string} [props.type="button"] - HTML button type ("button", "submit", "reset")
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.style] - Inline style object
+ * @returns {Object} TACO object representing a button element
+ * @category Component Builders
+ * @example
+ * const btn = makeButton({
+ *   text: "Save",
+ *   variant: "success",
+ *   onclick: () => console.log("saved")
+ * });
+ * // String shorthand:
+ * const ok = makeButton("OK");
+ */
+function makeButton(props = {}) {
+  if (typeof props === 'string') props = { text: props };
+  const {
+    text,
+    variant = 'primary',
+    size,
+    disabled = false,
+    onclick,
+    type = 'button',
+    className = '',
+    style
+  } = props;
+
+  return {
+    t: 'button',
+    a: {
+      type,
+      class: [
+        'bw_btn',
+        variantClass(variant),
+        size && `bw_btn_${size}`,
+        className
+      ].filter(Boolean).join(' '),
+      disabled,
+      onclick,
+      style
+    },
+    c: text,
+    o: {
+      type: 'button'
+    }
+  };
+}
+
+/**
+ * Create a container component for centering and constraining content width
+ *
+ * @param {Object} [props] - Container configuration
+ * @param {boolean} [props.fluid=false] - Use full-width fluid container
+ * @param {Array|Object|string} [props.children] - Child content
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a container div
+ * @category Component Builders
+ * @example
+ * const container = makeContainer({
+ *   fluid: true,
+ *   children: [makeRow({ children: [...] })]
+ * });
+ */
+function makeContainer(props = {}) {
+  const { fluid = false, children, className = '' } = props;
+
+  return {
+    t: 'div',
+    a: { class: `bw_container${fluid ? '-fluid' : ''} ${className}`.trim() },
+    c: children
+  };
+}
+
+/**
+ * Create a flexbox row for the grid system
+ *
+ * @param {Object} [props] - Row configuration
+ * @param {Array|Object|string} [props.children] - Child columns
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {number} [props.gap] - Gap size (1-5) applied via bw_g_{gap} class
+ * @returns {Object} TACO object representing a grid row
+ * @category Component Builders
+ * @example
+ * const row = makeRow({
+ *   gap: 4,
+ *   children: [makeCol({ size: 6, content: "Left" }), makeCol({ size: 6, content: "Right" })]
+ * });
+ */
+function makeRow(props = {}) {
+  const { children, className = '', gap } = props;
+
+  return {
+    t: 'div',
+    a: {
+      class: `bw_row ${gap ? `bw_g_${gap}` : ''} ${className}`.trim()
+    },
+    c: children
+  };
+}
+
+/**
+ * Create a grid column with responsive sizing
+ *
+ * Supports both fixed and responsive column sizes. Pass an object for
+ * responsive breakpoints (e.g. {xs: 12, md: 6, lg: 4}).
+ *
+ * @param {Object} [props] - Column configuration
+ * @param {number|Object} [props.size] - Column size (1-12) or responsive object {xs, sm, md, lg, xl}
+ * @param {number} [props.offset] - Column offset (1-12)
+ * @param {number} [props.push] - Column push (1-12)
+ * @param {number} [props.pull] - Column pull (1-12)
+ * @param {Array|Object|string} [props.content] - Column content (alias for children)
+ * @param {Array|Object|string} [props.children] - Column content
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a grid column
+ * @category Component Builders
+ * @example
+ * const col = makeCol({ size: { xs: 12, md: 6 }, content: "Responsive column" });
+ */
+function makeCol(props = {}) {
+  const { size, offset, push, pull, content, children, className = '' } = props;
+
+  const classes = [];
+
+  if (typeof size === 'object') {
+    // Responsive sizes
+    Object.entries(size).forEach(([breakpoint, value]) => {
+      if (breakpoint === 'xs') {
+        classes.push(`bw_col_${value}`);
+      } else {
+        classes.push(`bw_col_${breakpoint}-${value}`);
+      }
+    });
+  } else if (size) {
+    classes.push(`bw_col_${size}`);
+  } else {
+    classes.push('bw_col');
+  }
+
+  if (offset) classes.push(`bw_offset_${offset}`);
+  if (push) classes.push(`bw_push_${push}`);
+  if (pull) classes.push(`bw_pull_${pull}`);
+
+  return {
+    t: 'div',
+    a: { class: `${classes.join(' ')} ${className}`.trim() },
+    c: content || children
+  };
+}
+
+/**
+ * Create a navigation component with tabs or pills styling
+ *
+ * @param {Object} [props] - Nav configuration
+ * @param {Array<Object>} [props.items=[]] - Navigation items
+ * @param {string} props.items[].text - Item display text
+ * @param {string} [props.items[].href="#"] - Item link URL
+ * @param {boolean} [props.items[].active] - Whether this item is active
+ * @param {boolean} [props.items[].disabled] - Whether this item is disabled
+ * @param {boolean} [props.pills=false] - Use pill styling instead of tabs
+ * @param {boolean} [props.vertical=false] - Stack items vertically
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a nav element
+ * @category Component Builders
+ * @example
+ * const nav = makeNav({
+ *   pills: true,
+ *   items: [
+ *     { text: "Home", href: "/", active: true },
+ *     { text: "About", href: "/about" }
+ *   ]
+ * });
+ */
+function makeNav(props = {}) {
+  const {
+    items = [],
+    pills = false,
+    vertical = false,
+    className = ''
+  } = props;
+
+  return {
+    t: 'ul',
+    a: {
+      class: `bw_nav ${pills ? 'bw_nav_pills' : 'bw_nav_tabs'} ${vertical ? 'bw_nav_vertical' : ''} ${className}`.trim()
+    },
+    c: items.map(item => ({
+      t: 'li',
+      a: { class: 'bw_nav_item' },
+      c: {
+        t: 'a',
+        a: {
+          href: item.href || '#',
+          class: `bw_nav_link ${item.active ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`.trim()
+        },
+        c: item.text
+      }
+    }))
+  };
+}
+
+/**
+ * Create a navbar component with brand and navigation links
+ *
+ * @param {Object} [props] - Navbar configuration
+ * @param {string} [props.brand] - Brand name or logo text
+ * @param {string} [props.brandHref="#"] - Brand link URL
+ * @param {Array<Object>} [props.items=[]] - Navigation items
+ * @param {string} props.items[].text - Item display text
+ * @param {string} [props.items[].href="#"] - Item link URL
+ * @param {boolean} [props.items[].active] - Whether this item is active
+ * @param {boolean} [props.dark=true] - Use dark theme styling
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a navbar element
+ * @category Component Builders
+ * @example
+ * const navbar = makeNavbar({
+ *   brand: "MyApp",
+ *   dark: true,
+ *   items: [
+ *     { text: "Home", href: "/", active: true },
+ *     { text: "Docs", href: "/docs" }
+ *   ]
+ * });
+ */
+function makeNavbar(props = {}) {
+  const {
+    brand,
+    brandHref = '#',
+    items = [],
+    dark = true,
+    className = ''
+  } = props;
+
+  return {
+    t: 'nav',
+    a: {
+      class: `bw_navbar ${dark ? 'bw_navbar_dark' : 'bw_navbar_light'} ${className}`.trim()
+    },
+    c: {
+      t: 'div',
+      a: { class: 'bw_container' },
+      c: [
+        brand && {
+          t: 'a',
+          a: { href: brandHref, class: 'bw_navbar_brand' },
+          c: brand
+        },
+        items.length > 0 && {
+          t: 'div',
+          a: { class: 'bw_navbar_nav' },
+          c: items.map(item => ({
+            t: 'a',
+            a: {
+              href: item.href || '#',
+              class: `bw_nav_link ${item.active ? 'active' : ''}`
+            },
+            c: item.text
+          }))
+        }
+      ].filter(Boolean)
+    },
+    o: {
+      type: 'navbar',
+      state: { activeItem: items.findIndex(i => i.active) }
+    }
+  };
+}
+
+/**
+ * Create a tabbed interface with accessible tab navigation
+ *
+ * Each tab is rendered as a button with ARIA attributes for accessibility.
+ * Clicking a tab shows its content pane and hides others. The active tab
+ * can be set via activeIndex or by setting active:true on a tab item.
+ *
+ * @param {Object} [props] - Tabs configuration
+ * @param {Array<Object>} [props.tabs=[]] - Tab definitions
+ * @param {string} props.tabs[].label - Tab button label
+ * @param {string|Object|Array} props.tabs[].content - Tab pane content
+ * @param {boolean} [props.tabs[].active] - Whether this tab is initially active
+ * @param {number} [props.activeIndex=0] - Default active tab index (overridden by tab.active)
+ * @returns {Object} TACO object representing a tabbed interface
+ * @category Component Builders
+ * @example
+ * const tabs = makeTabs({
+ *   tabs: [
+ *     { label: "Overview", content: "Tab 1 content", active: true },
+ *     { label: "Details", content: "Tab 2 content" }
+ *   ]
+ * });
+ * bw.DOM("#app", tabs);
+ */
+function makeTabs(props = {}) {
+  const { tabs = [], activeIndex = 0 } = props;
+
+  // Find the active tab index based on the active property or use activeIndex
+  let actualActiveIndex = activeIndex;
+  tabs.forEach((tab, index) => {
+    if (tab.active) {
+      actualActiveIndex = index;
+    }
+  });
+
+  return {
+    t: 'div',
+    a: { class: 'bw_tabs' },
+    c: [
+      {
+        t: 'ul',
+        a: { class: 'bw_nav bw_nav_tabs', role: 'tablist' },
+        c: tabs.map((tab, index) => ({
+          t: 'li',
+          a: { class: 'bw_nav_item', role: 'presentation' },
+          c: {
+            t: 'button',
+            a: {
+              class: `bw_nav_link ${index === actualActiveIndex ? 'active' : ''}`,
+              type: 'button',
+              role: 'tab',
+              tabindex: index === actualActiveIndex ? '0' : '-1',
+              'aria-selected': index === actualActiveIndex ? 'true' : 'false',
+              'data-tab-index': index,
+              onclick: (e) => {
+                const tabsContainer = e.target.closest('.bw_tabs');
+                const allTabs = tabsContainer.querySelectorAll('.bw_nav_link');
+                const allPanes = tabsContainer.querySelectorAll('.bw_tab_pane');
+
+                allTabs.forEach(t => {
+                  t.classList.remove('active');
+                  t.setAttribute('aria-selected', 'false');
+                  t.setAttribute('tabindex', '-1');
+                });
+                allPanes.forEach(p => p.classList.remove('active'));
+
+                e.target.classList.add('active');
+                e.target.setAttribute('aria-selected', 'true');
+                e.target.setAttribute('tabindex', '0');
+                const targetIndex = parseInt(e.target.getAttribute('data-tab-index'));
+                allPanes[targetIndex].classList.add('active');
+              }
+            },
+            c: tab.label
+          }
+        }))
+      },
+      {
+        t: 'div',
+        a: { class: 'bw_tab_content' },
+        c: tabs.map((tab, index) => ({
+          t: 'div',
+          a: {
+            class: `bw_tab_pane ${index === actualActiveIndex ? 'active' : ''}`,
+            role: 'tabpanel'
+          },
+          c: tab.content
+        }))
+      }
+    ],
+    o: {
+      type: 'tabs',
+      state: { activeIndex: actualActiveIndex },
+      mounted: function(el) {
+        var tablist = el.querySelector('[role="tablist"]');
+        if (!tablist) return;
+        tablist.addEventListener('keydown', function(e) {
+          var tabButtons = tablist.querySelectorAll('[role="tab"]');
+          var currentIndex = -1;
+          for (var i = 0; i < tabButtons.length; i++) {
+            if (tabButtons[i] === e.target) { currentIndex = i; break; }
+          }
+          if (currentIndex === -1) return;
+
+          var newIndex = -1;
+          if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            newIndex = currentIndex > 0 ? currentIndex - 1 : tabButtons.length - 1;
+          } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            newIndex = currentIndex < tabButtons.length - 1 ? currentIndex + 1 : 0;
+          } else if (e.key === 'Home') {
+            e.preventDefault();
+            newIndex = 0;
+          } else if (e.key === 'End') {
+            e.preventDefault();
+            newIndex = tabButtons.length - 1;
+          }
+
+          if (newIndex >= 0) {
+            tabButtons[newIndex].focus();
+            tabButtons[newIndex].click();
+          }
+        });
+      }
+    }
+  };
+}
+
+/**
+ * Create an alert/notification component
+ *
+ * @param {Object} [props] - Alert configuration
+ * @param {string|Object|Array} [props.content] - Alert message content
+ * @param {string} [props.variant="info"] - Color variant ("primary", "secondary", "success", "danger", "warning", "info", "light", "dark")
+ * @param {boolean} [props.dismissible=false] - Show a close button to dismiss the alert
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing an alert element
+ * @category Component Builders
+ * @example
+ * const alert = makeAlert({
+ *   content: "Operation completed successfully!",
+ *   variant: "success",
+ *   dismissible: true
+ * });
+ * // String shorthand:
+ * const msg = makeAlert("Something happened");
+ */
+function makeAlert(props = {}) {
+  if (typeof props === 'string') props = { content: props };
+  const {
+    content,
+    variant = 'info',
+    dismissible = false,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: {
+      class: `bw_alert ${variantClass(variant)} ${dismissible ? 'bw_alert_dismissible' : ''} ${className}`.trim(),
+      role: 'alert'
+    },
+    c: [
+      content,
+      dismissible && {
+        t: 'button',
+        a: {
+          type: 'button',
+          class: 'bw_close',
+          'aria-label': 'Close',
+          onclick: function(e) {
+            var alert = e.target.closest('.bw_alert');
+            if (alert) { alert.remove(); }
+          }
+        },
+        c: '×'
+      }
+    ].filter(Boolean)
+  };
+}
+
+/**
+ * Create an inline badge/label component
+ *
+ * @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" });
+ * // String shorthand:
+ * const tag = makeBadge("New");
+ */
+function makeBadge(props = {}) {
+  if (typeof props === 'string') props = { text: props };
+  const {
+    text,
+    variant = 'primary',
+    size,
+    pill = false,
+    className = ''
+  } = props;
+
+  const sizeClass = size === 'sm' ? ' bw_badge_sm' : size === 'lg' ? ' bw_badge_lg' : '';
+
+  return {
+    t: 'span',
+    a: {
+      class: `bw_badge ${variantClass(variant)}${sizeClass} ${pill ? 'bw_badge_pill' : ''} ${className}`.trim()
+    },
+    c: text
+  };
+}
+
+/**
+ * Create a progress bar component with ARIA accessibility
+ *
+ * @param {Object} [props] - Progress bar configuration
+ * @param {number} [props.value=0] - Current progress value
+ * @param {number} [props.max=100] - Maximum value
+ * @param {string} [props.variant="primary"] - Color variant
+ * @param {boolean} [props.striped=false] - Use striped pattern
+ * @param {boolean} [props.animated=false] - Animate the stripes
+ * @param {string} [props.label] - Custom label text (defaults to percentage)
+ * @param {number} [props.height] - Custom height in pixels
+ * @returns {Object} TACO object representing a progress bar
+ * @category Component Builders
+ * @example
+ * const progress = makeProgress({
+ *   value: 75,
+ *   variant: "success",
+ *   striped: true,
+ *   animated: true
+ * });
+ */
+function makeProgress(props = {}) {
+  const {
+    value = 0,
+    max = 100,
+    variant = 'primary',
+    striped = false,
+    animated = false,
+    label,
+    height
+  } = props;
+
+  const percentage = Math.round((value / max) * 100);
+
+  return {
+    t: 'div',
+    a: {
+      class: 'bw_progress',
+      style: height ? { height: `${height}px` } : undefined
+    },
+    c: {
+      t: 'div',
+      a: {
+        class: [
+          'bw_progress_bar',
+          variantClass(variant),
+          striped && 'bw_progress_bar_striped',
+          animated && 'bw_progress_bar_animated'
+        ].filter(Boolean).join(' '),
+        role: 'progressbar',
+        style: { width: `${percentage}%` },
+        'aria-valuenow': value,
+        'aria-valuemin': 0,
+        'aria-valuemax': max
+      },
+      c: label || `${percentage}%`
+    }
+  };
+}
+
+/**
+ * Create a list group component for displaying lists of items
+ *
+ * Items can be simple strings or objects with text, active, disabled,
+ * href, and onclick properties. When interactive is true or items have
+ * href/onclick, items render as anchor tags.
+ *
+ * @param {Object} [props] - List group configuration
+ * @param {Array<string|Object>} [props.items=[]] - List items (strings or objects)
+ * @param {string} props.items[].text - Item display text
+ * @param {boolean} [props.items[].active] - Whether this item is active
+ * @param {boolean} [props.items[].disabled] - Whether this item is disabled
+ * @param {string} [props.items[].href] - Item link URL
+ * @param {Function} [props.items[].onclick] - Item click handler
+ * @param {boolean} [props.flush=false] - Remove borders for use inside cards
+ * @param {boolean} [props.interactive=false] - Make all items interactive (anchor tags)
+ * @returns {Object} TACO object representing a list group
+ * @category Component Builders
+ * @example
+ * const list = makeListGroup({
+ *   interactive: true,
+ *   items: [
+ *     { text: "Active item", active: true },
+ *     { text: "Regular item" },
+ *     { text: "Disabled item", disabled: true }
+ *   ]
+ * });
+ */
+function makeListGroup(props = {}) {
+  const { items = [], flush = false, interactive = false } = props;
+
+  return {
+    t: 'div',
+    a: { class: `bw_list_group ${flush ? 'bw_list_group_flush' : ''}`.trim() },
+    c: items.map(item => {
+      const isObject = typeof item === 'object';
+      const text = isObject ? item.text : item;
+      const active = isObject ? item.active : false;
+      const disabled = isObject ? item.disabled : false;
+      const href = isObject ? item.href : null;
+      const onclick = isObject ? item.onclick : null;
+
+      // For interactive items or items with href/onclick, use anchor tag
+      if (interactive || href || onclick) {
+        return {
+          t: 'a',
+          a: {
+            class: [
+              'bw_list_group_item',
+              active && 'active',
+              disabled && 'disabled'
+            ].filter(Boolean).join(' '),
+            href: href || '#',
+            onclick: onclick || ((e) => {
+              if (!href) e.preventDefault();
+            }),
+            style: disabled ? 'pointer-events: none; opacity: 0.65;' : ''
+          },
+          c: text
+        };
+      }
+
+      // For non-interactive items, use div
+      return {
+        t: 'div',
+        a: {
+          class: [
+            'bw_list_group_item',
+            active && 'active',
+            disabled && 'disabled'
+          ].filter(Boolean).join(' ')
+        },
+        c: text
+      };
+    })
+  };
+}
+
+/**
+ * Create a breadcrumb navigation component
+ *
+ * The last item with active:true is rendered as plain text (no link).
+ * All other items render as anchor tags.
+ *
+ * @param {Object} [props] - Breadcrumb configuration
+ * @param {Array<Object>} [props.items=[]] - Breadcrumb items
+ * @param {string} props.items[].text - Item display text
+ * @param {string} [props.items[].href="#"] - Item link URL
+ * @param {boolean} [props.items[].active] - Whether this is the current page
+ * @returns {Object} TACO object representing a breadcrumb nav
+ * @category Component Builders
+ * @example
+ * const crumbs = makeBreadcrumb({
+ *   items: [
+ *     { text: "Home", href: "/" },
+ *     { text: "Products", href: "/products" },
+ *     { text: "Widget", active: true }
+ *   ]
+ * });
+ */
+function makeBreadcrumb(props = {}) {
+  const { items = [] } = props;
+
+  return {
+    t: 'nav',
+    a: { 'aria-label': 'breadcrumb' },
+    c: {
+      t: 'ol',
+      a: { class: 'bw_breadcrumb' },
+      c: items.map((item, index) => ({
+        t: 'li',
+        a: {
+          class: `bw_breadcrumb_item ${item.active ? 'active' : ''}`,
+          'aria-current': item.active ? 'page' : undefined
+        },
+        c: item.active ? item.text : {
+          t: 'a',
+          a: { href: item.href || '#' },
+          c: item.text
+        }
+      }))
+    }
+  };
+}
+
+/**
+ * Create a form wrapper with default submit prevention
+ *
+ * @param {Object} [props] - Form configuration
+ * @param {Array|Object|string} [props.children] - Form contents (form groups, inputs, buttons)
+ * @param {Function} [props.onsubmit] - Submit handler (defaults to preventDefault)
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a form element
+ * @category Component Builders
+ * @example
+ * const form = makeForm({
+ *   onsubmit: (e) => { e.preventDefault(); handleSubmit(); },
+ *   children: [
+ *     makeFormGroup({ label: "Name", input: makeInput({ placeholder: "Enter name" }) }),
+ *     makeButton({ text: "Submit", type: "submit" })
+ *   ]
+ * });
+ */
+function makeForm(props = {}) {
+  const { children, onsubmit, className = '' } = props;
+
+  return {
+    t: 'form',
+    a: {
+      class: className,
+      onsubmit: onsubmit || ((e) => e.preventDefault())
+    },
+    c: children
+  };
+}
+
+/**
+ * Create a form group with label, input, optional help text and validation feedback
+ *
+ * @param {Object} [props] - Form group configuration
+ * @param {string} [props.label] - Label text
+ * @param {Object} [props.input] - Input TACO object (from makeInput, makeSelect, etc.)
+ * @param {string} [props.help] - Help text displayed below the input
+ * @param {string} [props.id] - Input ID (links label to input via for/id)
+ * @param {string} [props.validation] - Validation state ("valid" or "invalid")
+ * @param {string} [props.feedback] - Validation feedback text shown below input
+ * @param {boolean} [props.required=false] - Show required indicator (*) on label
+ * @returns {Object} TACO object representing a form group
+ * @category Component Builders
+ * @example
+ * const group = makeFormGroup({
+ *   label: "Email",
+ *   id: "email",
+ *   input: makeInput({ type: "email", id: "email", placeholder: "you@example.com" }),
+ *   validation: "invalid",
+ *   feedback: "Please enter a valid email address."
+ * });
+ */
+function makeFormGroup(props = {}) {
+  var { label, input, help, id, validation, feedback, required } = props;
+
+  // Shallow-clone input TACO to add validation class without mutating original
+  var styledInput = input;
+  if (validation && input && input.a) {
+    styledInput = { t: input.t, a: Object.assign({}, input.a), c: input.c, o: input.o };
+    var validClass = validation === 'valid' ? 'bw_is_valid' : validation === 'invalid' ? 'bw_is_invalid' : '';
+    if (validClass) {
+      styledInput.a.class = ((styledInput.a.class || '') + ' ' + validClass).trim();
+    }
+  }
+
+  return {
+    t: 'div',
+    a: { class: 'bw_form_group' },
+    c: [
+      label && {
+        t: 'label',
+        a: { for: id, class: 'bw_form_label' },
+        c: required ? [label, { t: 'span', a: { class: 'bw_text_danger bw_ms_1' }, c: '*' }] : label
+      },
+      styledInput,
+      feedback && validation && {
+        t: 'div',
+        a: { class: validation === 'valid' ? 'bw_valid_feedback' : 'bw_invalid_feedback' },
+        c: feedback
+      },
+      help && {
+        t: 'small',
+        a: { class: 'bw_form_text bw_text_muted' },
+        c: help
+      }
+    ].filter(Boolean)
+  };
+}
+
+/**
+ * Create an input element with form control styling
+ *
+ * Additional event handlers (oninput, onchange, etc.) can be passed
+ * as extra properties and are spread onto the element attributes.
+ *
+ * @param {Object} [props] - Input configuration
+ * @param {string} [props.type="text"] - Input type ("text", "email", "password", "number", etc.)
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {string} [props.value] - Input value
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.name] - Input name attribute
+ * @param {boolean} [props.disabled=false] - Whether the input is disabled
+ * @param {boolean} [props.readonly=false] - Whether the input is read-only
+ * @param {boolean} [props.required=false] - Whether the input is required
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.style] - Inline style object
+ * @returns {Object} TACO object representing an input element
+ * @category Component Builders
+ * @example
+ * const input = makeInput({
+ *   type: "email",
+ *   placeholder: "you@example.com",
+ *   required: true,
+ *   oninput: (e) => validate(e.target.value)
+ * });
+ */
+function makeInput(props = {}) {
+  const {
+    type = 'text',
+    placeholder,
+    value,
+    id,
+    name,
+    disabled = false,
+    readonly = false,
+    required = false,
+    className = '',
+    style,
+    ...eventHandlers
+  } = props;
+
+  return {
+    t: 'input',
+    a: {
+      type,
+      class: `bw_form_control ${className}`.trim(),
+      placeholder,
+      value,
+      id,
+      name,
+      style,
+      disabled,
+      readonly,
+      required,
+      ...eventHandlers
+    }
+  };
+}
+
+/**
+ * Create a textarea element with form control styling
+ *
+ * @param {Object} [props] - Textarea configuration
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {string} [props.value] - Textarea content
+ * @param {number} [props.rows=3] - Number of visible text rows
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.name] - Textarea name attribute
+ * @param {boolean} [props.disabled=false] - Whether the textarea is disabled
+ * @param {boolean} [props.readonly=false] - Whether the textarea is read-only
+ * @param {boolean} [props.required=false] - Whether the textarea is required
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a textarea element
+ * @category Component Builders
+ * @example
+ * const textarea = makeTextarea({
+ *   rows: 5,
+ *   placeholder: "Enter your message...",
+ *   required: true
+ * });
+ */
+function makeTextarea(props = {}) {
+  const {
+    placeholder,
+    value,
+    rows = 3,
+    id,
+    name,
+    disabled = false,
+    readonly = false,
+    required = false,
+    className = '',
+    ...eventHandlers
+  } = props;
+
+  return {
+    t: 'textarea',
+    a: {
+      class: `bw_form_control ${className}`.trim(),
+      placeholder,
+      rows,
+      id,
+      name,
+      disabled,
+      readonly,
+      required,
+      ...eventHandlers
+    },
+    c: value
+  };
+}
+
+/**
+ * Create a select dropdown with options
+ *
+ * @param {Object} [props] - Select configuration
+ * @param {Array<Object>} [props.options=[]] - Dropdown options
+ * @param {string} props.options[].value - Option value
+ * @param {string} [props.options[].text] - Option display text (defaults to value)
+ * @param {string} [props.value] - Currently selected value
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.name] - Select name attribute
+ * @param {boolean} [props.disabled=false] - Whether the select is disabled
+ * @param {boolean} [props.required=false] - Whether the select is required
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a select element
+ * @category Component Builders
+ * @example
+ * const select = makeSelect({
+ *   value: "b",
+ *   options: [
+ *     { value: "a", text: "Option A" },
+ *     { value: "b", text: "Option B" },
+ *     { value: "c", text: "Option C" }
+ *   ]
+ * });
+ */
+function makeSelect(props = {}) {
+  const {
+    options = [],
+    value,
+    id,
+    name,
+    disabled = false,
+    required = false,
+    className = '',
+    ...eventHandlers
+  } = props;
+
+  return {
+    t: 'select',
+    a: {
+      class: `bw_form_control ${className}`.trim(),
+      id,
+      name,
+      disabled,
+      required,
+      ...eventHandlers
+    },
+    c: options.map(opt => ({
+      t: 'option',
+      a: {
+        value: opt.value,
+        selected: opt.value === value
+      },
+      c: opt.text || opt.value
+    }))
+  };
+}
+
+/**
+ * Create a checkbox input with label
+ *
+ * @param {Object} [props] - Checkbox configuration
+ * @param {string} [props.label] - Checkbox label text
+ * @param {boolean} [props.checked=false] - Whether the checkbox is checked
+ * @param {string} [props.id] - Element ID (links label to checkbox)
+ * @param {string} [props.name] - Input name attribute
+ * @param {boolean} [props.disabled=false] - Whether the checkbox is disabled
+ * @param {string} [props.value] - Checkbox value attribute
+ * @returns {Object} TACO object representing a checkbox form group
+ * @category Component Builders
+ * @example
+ * const checkbox = makeCheckbox({
+ *   label: "I agree to the terms",
+ *   id: "agree",
+ *   checked: false
+ * });
+ */
+function makeCheckbox(props = {}) {
+  const {
+    label,
+    checked = false,
+    id,
+    name,
+    disabled = false,
+    value,
+    className = '',
+    ...eventHandlers
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: `bw_form_check ${className}`.trim() },
+    c: [
+      {
+        t: 'input',
+        a: {
+          type: 'checkbox',
+          class: 'bw_form_check_input',
+          checked,
+          id,
+          name,
+          disabled,
+          value,
+          ...eventHandlers
+        }
+      },
+      label && {
+        t: 'label',
+        a: { class: 'bw_form_check_label', for: id },
+        c: label
+      }
+    ].filter(Boolean)
+  };
+}
+
+/**
+ * Create a flexbox stack layout (vertical or horizontal)
+ *
+ * @param {Object} [props] - Stack configuration
+ * @param {Array|Object|string} [props.children] - Stack children
+ * @param {string} [props.direction="vertical"] - Stack direction ("vertical" or "horizontal")
+ * @param {number} [props.gap=3] - Gap size (0-5)
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a stack layout
+ * @category Component Builders
+ * @example
+ * const stack = makeStack({
+ *   direction: "horizontal",
+ *   gap: 2,
+ *   children: [
+ *     makeButton({ text: "Cancel", variant: "secondary" }),
+ *     makeButton({ text: "Save", variant: "primary" })
+ *   ]
+ * });
+ */
+function makeStack(props = {}) {
+  const {
+    children,
+    direction = 'vertical',
+    gap = 3,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: {
+      class: `bw_${direction === 'vertical' ? 'vstack' : 'hstack'} bw_gap_${gap} ${className}`.trim()
+    },
+    c: children
+  };
+}
+
+/**
+ * Create a loading spinner indicator
+ *
+ * @param {Object} [props] - Spinner configuration
+ * @param {string} [props.variant="primary"] - Color variant
+ * @param {string} [props.size="md"] - Spinner size ("sm", "md", "lg")
+ * @param {string} [props.type="border"] - Spinner type ("border" or "grow")
+ * @returns {Object} TACO object representing a spinner with screen-reader text
+ * @category Component Builders
+ * @example
+ * const spinner = makeSpinner({ variant: "info", size: "sm" });
+ */
+function makeSpinner(props = {}) {
+  const {
+    variant = 'primary',
+    size = 'md',
+    type = 'border'
+  } = props;
+
+  return {
+    t: 'div',
+    a: {
+      class: `bw_spinner_${type} bw_spinner_${type}-${size} ${variantClass(variant)}`,
+      role: 'status'
+    },
+    c: {
+      t: 'span',
+      a: { class: 'bw_visually_hidden' },
+      c: 'Loading...'
+    }
+  };
+}
+
+/**
+ * Create a hero section for landing pages and headers
+ *
+ * Supports gradient backgrounds, background images with overlays,
+ * and action buttons. Commonly used as the first visible section.
+ *
+ * @param {Object} [props] - Hero configuration
+ * @param {string} [props.title] - Main headline text
+ * @param {string} [props.subtitle] - Supporting description text
+ * @param {string|Object|Array} [props.content] - Additional body content
+ * @param {string} [props.variant="primary"] - Background variant ("primary", "secondary", "light", "dark")
+ * @param {string} [props.size="lg"] - Vertical padding size ("sm", "md", "lg", "xl")
+ * @param {boolean} [props.centered=true] - Center-align text
+ * @param {boolean} [props.overlay=false] - Add dark overlay (for background images)
+ * @param {string} [props.backgroundImage] - Background image URL
+ * @param {Array|Object} [props.actions] - Call-to-action buttons
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a hero section
+ * @category Component Builders
+ * @example
+ * const hero = makeHero({
+ *   title: "Welcome to Bitwrench",
+ *   subtitle: "Build UIs with pure JavaScript",
+ *   variant: "dark",
+ *   actions: [
+ *     makeButton({ text: "Get Started", variant: "primary", size: "lg" }),
+ *     makeButton({ text: "Learn More", variant: "outline-light", size: "lg" })
+ *   ]
+ * });
+ */
+function makeHero(props = {}) {
+  const {
+    title,
+    subtitle,
+    content,
+    variant = 'primary',
+    size = 'lg',
+    centered = true,
+    overlay = false,
+    backgroundImage,
+    actions,
+    className = ''
+  } = props;
+
+  const sizeClasses = {
+    sm: 'bw_py_3',
+    md: 'bw_py_4',
+    lg: 'bw_py_5',
+    xl: 'bw_py_6'
+  };
+
+  return {
+    t: 'section',
+    a: {
+      class: `bw_hero ${variantClass(variant)} ${sizeClasses[size] || sizeClasses.lg} ${centered ? 'bw_text_center' : ''} ${className}`.trim(),
+      style: backgroundImage ? `background-image: url('${backgroundImage}'); background-size: cover; background-position: center;` : undefined
+    },
+    c: [
+      overlay && {
+        t: 'div',
+        a: { class: 'bw_hero_overlay' }
+      },
+      {
+        t: 'div',
+        a: { class: 'bw_container' },
+        c: {
+          t: 'div',
+          a: { class: 'bw_hero_content' },
+          c: [
+            title && {
+              t: 'h1',
+              a: { class: 'bw_hero_title bw_display_4 bw_mb_3' },
+              c: title
+            },
+            subtitle && {
+              t: 'p',
+              a: { class: 'bw_hero_subtitle bw_lead bw_mb_4' },
+              c: subtitle
+            },
+            content,
+            actions && {
+              t: 'div',
+              a: { class: 'bw_hero_actions bw_mt_4' },
+              c: actions
+            }
+          ].filter(Boolean)
+        }
+      }
+    ].filter(Boolean)
+  };
+}
+
+/**
+ * Create a responsive feature grid for showcasing capabilities
+ *
+ * Renders features in an equal-width column grid with optional icons,
+ * titles, and descriptions.
+ *
+ * @param {Object} [props] - Feature grid configuration
+ * @param {Array<Object>} [props.features=[]] - Feature items
+ * @param {string} [props.features[].icon] - Icon content (emoji, HTML entity, or text)
+ * @param {string} [props.features[].title] - Feature title
+ * @param {string} [props.features[].description] - Feature description text
+ * @param {number} [props.columns=3] - Number of columns (divides 12-col grid)
+ * @param {boolean} [props.centered=true] - Center-align feature text
+ * @param {string} [props.iconSize="3rem"] - Icon font size
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a feature grid
+ * @category Component Builders
+ * @example
+ * const features = makeFeatureGrid({
+ *   columns: 3,
+ *   features: [
+ *     { icon: "⚡", title: "Fast", description: "Zero build step" },
+ *     { icon: "📦", title: "Small", description: "Under 45KB gzipped" },
+ *     { icon: "🔧", title: "Flexible", description: "Pure JS objects" }
+ *   ]
+ * });
+ */
+function makeFeatureGrid(props = {}) {
+  const {
+    features = [],
+    columns = 3,
+    centered = true,
+    iconSize = '3rem',
+    className = ''
+  } = props;
+
+  const colClass = `bw_col_md_${12/columns}`;
+
+  return {
+    t: 'div',
+    a: { class: `bw_feature_grid ${className}`.trim() },
+    c: {
+      t: 'div',
+      a: { class: 'bw_row bw_g_4' },
+      c: features.map(feature => ({
+        t: 'div',
+        a: { class: colClass },
+        c: {
+          t: 'div',
+          a: { class: `bw_feature ${centered ? 'bw_text_center' : ''}` },
+          c: [
+            feature.icon && {
+              t: 'div',
+              a: {
+                class: 'bw_feature_icon bw_mb_3 bw_text_primary',
+                style: `font-size: ${iconSize};`
+              },
+              c: feature.icon
+            },
+            feature.title && {
+              t: 'h3',
+              a: { class: 'bw_feature_title bw_h5 bw_mb_2' },
+              c: feature.title
+            },
+            feature.description && {
+              t: 'p',
+              a: { class: 'bw_feature_description bw_text_muted' },
+              c: feature.description
+            }
+          ].filter(Boolean)
+        }
+      }))
+    }
+  };
+}
+
+
+/**
+ * Create a call-to-action section with title, description, and action buttons
+ *
+ * @param {Object} [props] - CTA configuration
+ * @param {string} [props.title] - CTA headline
+ * @param {string} [props.description] - CTA description text
+ * @param {Array|Object} [props.actions] - CTA buttons or content
+ * @param {string} [props.variant="light"] - Background variant
+ * @param {boolean} [props.centered=true] - Center-align content
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a CTA section
+ * @category Component Builders
+ * @example
+ * const cta = makeCTA({
+ *   title: "Ready to get started?",
+ *   description: "Join thousands of developers using Bitwrench.",
+ *   actions: [
+ *     makeButton({ text: "Sign Up Free", variant: "primary", size: "lg" })
+ *   ]
+ * });
+ */
+function makeCTA(props = {}) {
+  const {
+    title,
+    description,
+    actions,
+    variant = 'light',
+    centered = true,
+    className = ''
+  } = props;
+
+  return {
+    t: 'section',
+    a: { class: `bw_cta bw_bg_${variant} bw_py_5 ${className}`.trim() },
+    c: {
+      t: 'div',
+      a: { class: 'bw_container' },
+      c: {
+        t: 'div',
+        a: { class: `bw_cta_content ${centered ? 'bw_text_center' : ''}` },
+        c: [
+          title && { t: 'h2', a: { class: 'bw_cta_title bw_mb_3' }, c: title },
+          description && { t: 'p', a: { class: 'bw_cta_description bw_lead bw_mb_4' }, c: description },
+          actions && {
+            t: 'div',
+            a: { class: 'bw_cta_actions' },
+            c: actions
+          }
+        ].filter(Boolean)
+      }
+    }
+  };
+}
+
+/**
+ * Create a page section with optional centered header and background
+ *
+ * @param {Object} [props] - Section configuration
+ * @param {string} [props.title] - Section title
+ * @param {string} [props.subtitle] - Section subtitle (muted)
+ * @param {string|Object|Array} [props.content] - Section body content
+ * @param {string} [props.variant="default"] - Background variant ("default" for none, or a color name)
+ * @param {string} [props.spacing="md"] - Vertical padding ("sm", "md", "lg", "xl")
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a content section
+ * @category Component Builders
+ * @example
+ * const section = makeSection({
+ *   title: "Features",
+ *   subtitle: "Everything you need to build great UIs",
+ *   spacing: "lg",
+ *   content: makeFeatureGrid({ features: [...] })
+ * });
+ */
+function makeSection(props = {}) {
+  const {
+    title,
+    subtitle,
+    content,
+    variant = 'default',
+    spacing = 'md',
+    className = ''
+  } = props;
+
+  const spacingClasses = {
+    sm: 'bw_py_3',
+    md: 'bw_py_4',
+    lg: 'bw_py_5',
+    xl: 'bw_py_6'
+  };
+
+  return {
+    t: 'section',
+    a: {
+      class: `bw_section ${spacingClasses[spacing] || spacingClasses.md} ${variant !== 'default' ? `bw_bg_${variant}` : ''} ${className}`.trim()
+    },
+    c: {
+      t: 'div',
+      a: { class: 'bw_container' },
+      c: [
+        (title || subtitle) && {
+          t: 'div',
+          a: { class: 'bw_section_header bw_text_center bw_mb_5' },
+          c: [
+            title && { t: 'h2', a: { class: 'bw_section_title' }, c: title },
+            subtitle && { t: 'p', a: { class: 'bw_section_subtitle bw_text_muted' }, c: subtitle }
+          ].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.
+// =========================================================================
+
+// Handle classes (CardHandle, TableHandle, NavbarHandle, TabsHandle)
+// removed in v2.0.15 — superseded by ComponentHandle.
+// See dev/dead-code-elimination-v2.0.15.md for recovery.
+
+/**
+ * Create a code demo component for documentation pages
+ *
+ * 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(props = {}) {
+  const {
+    title,
+    description,
+    code,
+    result,
+    language = 'javascript'
+  } = props;
+
+  // Generate unique ID for this demo
+  `demo-${Math.random().toString(36).substr(2, 9)}`;
+
+  const 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(e) {
+                navigator.clipboard.writeText(code).then(function() {
+                  var btn = e.target;
+                  var originalText = btn.textContent;
+                  btn.textContent = 'Copied!';
+                  btn.classList.add('bw_code_copy_btn_copied');
+                  setTimeout(function() {
+                    btn.textContent = originalText;
+                    btn.classList.remove('bw_code_copy_btn_copied');
+                  }, 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-${language}` },
+                  c: code
+                }
+              }
+        ]
+      }
+    });
+  }
+
+  const content = [
+    title && { t: 'h3', c: title },
+    description && {
+      t: 'p',
+      a: { class: 'bw_text_muted bw_mb_3' },
+      c: description
+    },
+    makeTabs({ tabs})
+  ].filter(Boolean);
+
+  return {
+    t: 'div',
+    a: { class: 'bw_code_demo' },
+    c: content
+  };
+}
+
+/**
+ * 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>}
+ */
+// =========================================================================
+// Phase 1: Quick Wins
+// =========================================================================
+
+/**
+ * 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(props = {}) {
+  const {
+    pages = 1,
+    currentPage = 1,
+    onPageChange,
+    size,
+    className = ''
+  } = props;
+
+  function handleClick(page) {
+    return function(e) {
+      e.preventDefault();
+      if (page < 1 || page > pages || page === currentPage) return;
+      if (onPageChange) onPageChange(page);
+    };
+  }
+
+  const items = [];
+
+  // Previous arrow
+  items.push({
+    t: 'li',
+    a: { class: `bw_page_item ${currentPage <= 1 ? 'bw_disabled' : ''}`.trim() },
+    c: {
+      t: 'a',
+      a: { class: 'bw_page_link', href: '#', onclick: handleClick(currentPage - 1), 'aria-label': 'Previous' },
+      c: '\u2039'
+    }
+  });
+
+  // Page numbers
+  for (var i = 1; i <= pages; i++) {
+    (function(pageNum) {
+      items.push({
+        t: 'li',
+        a: { class: `bw_page_item ${pageNum === currentPage ? 'bw_active' : ''}`.trim() },
+        c: {
+          t: 'a',
+          a: { class: 'bw_page_link', href: '#', onclick: handleClick(pageNum) },
+          c: '' + pageNum
+        }
+      });
+    })(i);
+  }
+
+  // Next arrow
+  items.push({
+    t: 'li',
+    a: { class: `bw_page_item ${currentPage >= pages ? 'bw_disabled' : ''}`.trim() },
+    c: {
+      t: 'a',
+      a: { class: 'bw_page_link', href: '#', onclick: handleClick(currentPage + 1), 'aria-label': 'Next' },
+      c: '\u203A'
+    }
+  });
+
+  return {
+    t: 'nav',
+    a: { 'aria-label': 'Pagination' },
+    c: {
+      t: 'ul',
+      a: {
+        class: `bw_pagination ${size ? 'bw_pagination_' + size : ''} ${className}`.trim()
+      },
+      c: items
+    }
+  };
+}
+
+/**
+ * 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(props = {}) {
+  const {
+    label,
+    name,
+    value,
+    checked = false,
+    id,
+    disabled = false,
+    className = '',
+    ...eventHandlers
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: `bw_form_check ${className}`.trim() },
+    c: [
+      {
+        t: 'input',
+        a: {
+          type: 'radio',
+          class: 'bw_form_check_input',
+          name,
+          value,
+          checked,
+          id,
+          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(props = {}) {
+  const {
+    children,
+    size,
+    vertical = false,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: {
+      class: `${vertical ? 'bw_btn_group_vertical' : 'bw_btn_group'} ${size ? 'bw_btn_group_' + size : ''} ${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(props = {}) {
+  const {
+    items = [],
+    multiOpen = false,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: `bw_accordion ${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 ${item.open ? '' : 'bw_collapsed'}`.trim(),
+                type: 'button',
+                'aria-expanded': item.open ? 'true' : 'false',
+                'data-accordion-index': index,
+                onclick: function(e) {
+                  var btn = e.target.closest('.bw_accordion_button');
+                  var accordionEl = btn.closest('.bw_accordion');
+                  var accordionItem = btn.closest('.bw_accordion_item');
+                  var collapse = accordionItem.querySelector('.bw_accordion_collapse');
+                  var isOpen = collapse.classList.contains('bw_collapse_show');
+
+                  if (!multiOpen) {
+                    // Animate-close all other open siblings
+                    var allItems = accordionEl.querySelectorAll('.bw_accordion_item');
+                    for (var j = 0; j < allItems.length; j++) {
+                      if (allItems[j] === accordionItem) continue;
+                      var sibCollapse = allItems[j].querySelector('.bw_accordion_collapse');
+                      var sibBtn = allItems[j].querySelector('.bw_accordion_button');
+                      if (sibCollapse.classList.contains('bw_collapse_show')) {
+                        sibCollapse.style.maxHeight = sibCollapse.scrollHeight + 'px';
+                        sibCollapse.offsetHeight; // force reflow
+                        sibCollapse.style.maxHeight = '0px';
+                        sibCollapse.classList.remove('bw_collapse_show');
+                        sibBtn.classList.add('bw_collapsed');
+                        sibBtn.setAttribute('aria-expanded', 'false');
+                      }
+                    }
+                  }
+
+                  if (isOpen) {
+                    // Animate close
+                    collapse.style.maxHeight = collapse.scrollHeight + 'px';
+                    collapse.offsetHeight; // force reflow
+                    collapse.style.maxHeight = '0px';
+                    collapse.classList.remove('bw_collapse_show');
+                    btn.classList.add('bw_collapsed');
+                    btn.setAttribute('aria-expanded', 'false');
+                  } else {
+                    // Animate open
+                    collapse.classList.add('bw_collapse_show');
+                    collapse.style.maxHeight = '0px';
+                    collapse.offsetHeight; // force reflow
+                    collapse.style.maxHeight = collapse.scrollHeight + 'px';
+                    btn.classList.remove('bw_collapsed');
+                    btn.setAttribute('aria-expanded', 'true');
+                    // After transition, allow dynamic content sizing
+                    var onEnd = function(ev) {
+                      if (ev.propertyName === 'max-height' && collapse.classList.contains('bw_collapse_show')) {
+                        collapse.style.maxHeight = 'none';
+                      }
+                      collapse.removeEventListener('transitionend', onEnd);
+                    };
+                    collapse.addEventListener('transitionend', onEnd);
+                  }
+                }
+              },
+              c: item.title
+            }
+          },
+          {
+            t: 'div',
+            a: { class: `bw_accordion_collapse ${item.open ? 'bw_collapse_show' : ''}`.trim() },
+            c: {
+              t: 'div',
+              a: { class: 'bw_accordion_body' },
+              c: item.content
+            },
+            o: item.open ? {
+              mounted: function(el) {
+                el.style.maxHeight = 'none';
+              }
+            } : undefined
+          }
+        ]
+      };
+    }),
+    o: {
+      type: 'accordion',
+      state: { multiOpen: multiOpen }
+    }
+  };
+}
+
+// ModalHandle removed in v2.0.15 — superseded by ComponentHandle.
+// See dev/dead-code-elimination-v2.0.15.md for recovery.
+
+/**
+ * Create a modal dialog overlay
+ *
+ * @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" })
+ * });
+ */
+function makeModal(props = {}) {
+  const {
+    title,
+    content,
+    footer,
+    size,
+    closeButton = true,
+    onClose,
+    className = ''
+  } = props;
+
+  function closeModal(el) {
+    var backdrop = el.closest('.bw_modal');
+    if (backdrop) {
+      backdrop.classList.remove('bw_modal_show');
+      document.body.style.overflow = '';
+    }
+    if (onClose) onClose();
+  }
+
+  return {
+    t: 'div',
+    a: { class: `bw_modal ${className}`.trim() },
+    c: {
+      t: 'div',
+      a: { class: `bw_modal_dialog ${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(e) { closeModal(e.target); }
+                },
+                c: '\u00D7'
+              }
+            ].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(el) {
+        // Click backdrop to close
+        el.addEventListener('click', function(e) {
+          if (e.target === el) closeModal(el);
+        });
+        // Escape key to close
+        var escHandler = function(e) {
+          if (e.key === 'Escape' && el.classList.contains('bw_modal_show')) {
+            closeModal(el);
+          }
+        };
+        document.addEventListener('keydown', escHandler);
+        el._bw_escHandler = escHandler;
+      },
+      unmount: function(el) {
+        if (el._bw_escHandler) {
+          document.removeEventListener('keydown', el._bw_escHandler);
+        }
+        document.body.style.overflow = '';
+      }
+    }
+  };
+}
+
+/**
+ * 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(props = {}) {
+  const {
+    title,
+    content,
+    variant = 'info',
+    autoDismiss = true,
+    delay = 5000,
+    position = 'top-right',
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: {
+      class: `bw_toast ${variantClass(variant)} ${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(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: '\u00D7'
+          }
+        ]
+      },
+      content && {
+        t: 'div',
+        a: { class: 'bw_toast_body' },
+        c: content
+      }
+    ].filter(Boolean),
+    o: {
+      type: 'toast',
+      mounted: function(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);
+        }
+      }
+    }
+  };
+}
+
+// =========================================================================
+// 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(props = {}) {
+  const {
+    trigger,
+    items = [],
+    align = 'start',
+    variant = 'primary',
+    className = ''
+  } = props;
+
+  var triggerTaco;
+  if (typeof trigger === 'string' || trigger === undefined) {
+    triggerTaco = {
+      t: 'button',
+      a: {
+        class: `bw_btn ${variantClass(variant)} bw_dropdown_toggle`,
+        type: 'button',
+        onclick: function(e) {
+          var dropdown = e.target.closest('.bw_dropdown');
+          var menu = dropdown.querySelector('.bw_dropdown_menu');
+          menu.classList.toggle('bw_dropdown_show');
+        }
+      },
+      c: trigger || 'Dropdown'
+    };
+  } else {
+    triggerTaco = trigger;
+  }
+
+  return {
+    t: 'div',
+    a: { class: `bw_dropdown ${className}`.trim() },
+    c: [
+      triggerTaco,
+      {
+        t: 'div',
+        a: { class: `bw_dropdown_menu ${align === 'end' ? 'bw_dropdown_menu_end' : ''}`.trim() },
+        c: items.map(function(item) {
+          if (item.divider) {
+            return { t: 'hr', a: { class: 'bw_dropdown_divider' } };
+          }
+          return {
+            t: 'a',
+            a: {
+              class: `bw_dropdown_item ${item.disabled ? 'disabled' : ''}`.trim(),
+              href: item.href || '#',
+              onclick: item.disabled ? undefined : function(e) {
+                if (!item.href) e.preventDefault();
+                var dropdown = e.target.closest('.bw_dropdown');
+                var menu = dropdown.querySelector('.bw_dropdown_menu');
+                menu.classList.remove('bw_dropdown_show');
+                if (item.onclick) item.onclick(e);
+              }
+            },
+            c: item.text
+          };
+        })
+      }
+    ],
+    o: {
+      type: 'dropdown',
+      mounted: function(el) {
+        // Click outside to close
+        var outsideHandler = function(e) {
+          if (!el.contains(e.target)) {
+            var menu = el.querySelector('.bw_dropdown_menu');
+            if (menu) menu.classList.remove('bw_dropdown_show');
+          }
+        };
+        document.addEventListener('click', outsideHandler);
+        el._bw_outsideHandler = outsideHandler;
+      },
+      unmount: function(el) {
+        if (el._bw_outsideHandler) {
+          document.removeEventListener('click', el._bw_outsideHandler);
+        }
+      }
+    }
+  };
+}
+
+/**
+ * Create a toggle switch (styled checkbox)
+ *
+ * @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 toggle = makeSwitch({
+ *   label: "Dark mode",
+ *   checked: false,
+ *   onchange: (e) => toggleDark(e.target.checked)
+ * });
+ */
+function makeSwitch(props = {}) {
+  const {
+    label,
+    checked = false,
+    id,
+    name,
+    disabled = false,
+    className = '',
+    ...eventHandlers
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: `bw_form_check bw_form_switch ${className}`.trim() },
+    c: [
+      {
+        t: 'input',
+        a: {
+          type: 'checkbox',
+          class: 'bw_form_check_input bw_switch_input',
+          role: 'switch',
+          checked,
+          id,
+          name,
+          disabled,
+          ...eventHandlers
+        }
+      },
+      label && {
+        t: 'label',
+        a: { class: 'bw_form_check_label', for: id },
+        c: label
+      }
+    ].filter(Boolean)
+  };
+}
+
+/**
+ * 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(props = {}) {
+  const {
+    variant = 'text',
+    width,
+    height,
+    count = 1,
+    className = ''
+  } = props;
+
+  if (variant === 'circle') {
+    var circleSize = width || height || '3rem';
+    return {
+      t: 'div',
+      a: {
+        class: `bw_skeleton bw_skeleton_circle ${className}`.trim(),
+        style: { width: circleSize, height: circleSize }
+      }
+    };
+  }
+
+  if (variant === 'rect') {
+    return {
+      t: 'div',
+      a: {
+        class: `bw_skeleton bw_skeleton_rect ${className}`.trim(),
+        style: {
+          width: width || '100%',
+          height: height || '120px'
+        }
+      }
+    };
+  }
+
+  // Text variant — multiple lines
+  if (count === 1) {
+    return {
+      t: 'div',
+      a: {
+        class: `bw_skeleton bw_skeleton_text ${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'
+        }
+      }
+    });
+  }
+
+  return {
+    t: 'div',
+    a: { class: `bw_skeleton_group ${className}`.trim() },
+    c: lines
+  };
+}
+
+/**
+ * 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(props = {}) {
+  const {
+    src,
+    alt = '',
+    initials,
+    size = 'md',
+    variant = 'primary',
+    className = ''
+  } = props;
+
+  if (src) {
+    return {
+      t: 'img',
+      a: {
+        class: `bw_avatar bw_avatar_${size} ${className}`.trim(),
+        src: src,
+        alt: alt
+      }
+    };
+  }
+
+  return {
+    t: 'div',
+    a: {
+      class: `bw_avatar bw_avatar_${size} ${variantClass(variant)} ${className}`.trim()
+    },
+    c: initials || ''
+  };
+}
+
+/**
+ * Create a carousel/slideshow component with slide transitions
+ *
+ * Supports image slides, TACO content slides, captions, prev/next controls,
+ * dot indicators, and optional auto-play. Uses CSS translateX transitions.
+ *
+ * @param {Object} [props] - Carousel configuration
+ * @param {Array<Object>} [props.items=[]] - Slide items
+ * @param {string|Object} props.items[].content - Slide content (TACO, string, or img element)
+ * @param {string} [props.items[].caption] - Caption text shown at bottom of slide
+ * @param {boolean} [props.showControls=true] - Show prev/next arrow buttons
+ * @param {boolean} [props.showIndicators=true] - Show dot navigation
+ * @param {boolean} [props.autoPlay=false] - Auto-advance slides
+ * @param {number} [props.interval=5000] - Auto-advance interval in ms
+ * @param {string} [props.height='300px'] - Carousel height
+ * @param {number} [props.startIndex=0] - Initial slide index
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a carousel
+ * @category Component Builders
+ * @example
+ * const carousel = makeCarousel({
+ *   items: [
+ *     { content: { t: 'img', a: { src: 'photo.jpg' } }, caption: 'Photo 1' },
+ *     { content: { t: 'div', c: 'Text slide' } }
+ *   ],
+ *   autoPlay: true,
+ *   interval: 3000
+ * });
+ */
+function makeCarousel(props = {}) {
+  const {
+    items = [],
+    showControls = true,
+    showIndicators = true,
+    autoPlay = false,
+    interval = 5000,
+    height = '300px',
+    startIndex = 0,
+    className = ''
+  } = props;
+
+  // Shared navigation logic
+  function goToSlide(carouselEl, index) {
+    var total = carouselEl.querySelectorAll('.bw_carousel_slide').length;
+    if (index < 0) index = total - 1;
+    if (index >= total) index = 0;
+    carouselEl.setAttribute('data-carousel-index', index);
+    var track = carouselEl.querySelector('.bw_carousel_track');
+    track.style.transform = 'translateX(-' + (index * 100) + '%)';
+    // Update indicators
+    var indicators = carouselEl.querySelectorAll('.bw_carousel_indicator');
+    for (var i = 0; i < indicators.length; i++) {
+      if (i === index) {
+        indicators[i].classList.add('active');
+      } else {
+        indicators[i].classList.remove('active');
+      }
+    }
+  }
+
+  // Arrow SVGs (inline data URIs, same pattern as accordion chevrons)
+  var prevArrow = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e";
+  var nextArrow = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e";
+
+  var slides = items.map(function(item) {
+    var slideContent = [
+      item.content,
+      item.caption && {
+        t: 'div',
+        a: { class: 'bw_carousel_caption' },
+        c: item.caption
+      }
+    ].filter(Boolean);
+
+    return {
+      t: 'div',
+      a: { class: 'bw_carousel_slide' },
+      c: slideContent.length === 1 ? slideContent[0] : slideContent
+    };
+  });
+
+  var children = [
+    // Track
+    {
+      t: 'div',
+      a: {
+        class: 'bw_carousel_track',
+        style: 'transform: translateX(-' + (startIndex * 100) + '%)'
+      },
+      c: slides
+    }
+  ];
+
+  // Prev/Next controls
+  if (showControls && items.length > 1) {
+    children.push({
+      t: 'button',
+      a: {
+        class: 'bw_carousel_control bw_carousel_control_prev',
+        type: 'button',
+        'aria-label': 'Previous slide',
+        onclick: function(e) {
+          var carousel = e.target.closest('.bw_carousel');
+          var idx = parseInt(carousel.getAttribute('data-carousel-index') || '0');
+          goToSlide(carousel, idx - 1);
+        }
+      },
+      c: { t: 'img', a: { src: prevArrow, alt: '', role: 'presentation' } }
+    });
+    children.push({
+      t: 'button',
+      a: {
+        class: 'bw_carousel_control bw_carousel_control_next',
+        type: 'button',
+        'aria-label': 'Next slide',
+        onclick: function(e) {
+          var carousel = e.target.closest('.bw_carousel');
+          var idx = parseInt(carousel.getAttribute('data-carousel-index') || '0');
+          goToSlide(carousel, idx + 1);
+        }
+      },
+      c: { t: 'img', a: { src: nextArrow, alt: '', role: 'presentation' } }
+    });
+  }
+
+  // Indicators
+  if (showIndicators && items.length > 1) {
+    children.push({
+      t: 'div',
+      a: { class: 'bw_carousel_indicators' },
+      c: items.map(function(_, i) {
+        return {
+          t: 'button',
+          a: {
+            class: 'bw_carousel_indicator' + (i === startIndex ? ' active' : ''),
+            type: 'button',
+            'aria-label': 'Go to slide ' + (i + 1),
+            'data-slide-index': i,
+            onclick: function(e) {
+              var carousel = e.target.closest('.bw_carousel');
+              var idx = parseInt(e.target.getAttribute('data-slide-index'));
+              goToSlide(carousel, idx);
+            }
+          }
+        };
+      })
+    });
+  }
+
+  return {
+    t: 'div',
+    a: {
+      class: ('bw_carousel ' + className).trim(),
+      style: 'height: ' + height,
+      tabindex: '0',
+      'aria-roledescription': 'carousel',
+      'data-carousel-index': startIndex
+    },
+    c: children,
+    o: {
+      type: 'carousel',
+      state: { activeIndex: startIndex, autoPlay: autoPlay, interval: interval },
+      mounted: function(el) {
+        // Keyboard navigation
+        el.addEventListener('keydown', function(e) {
+          var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+          if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            goToSlide(el, idx - 1);
+          } else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            goToSlide(el, idx + 1);
+          }
+        });
+        // Auto-play
+        if (autoPlay) {
+          var intervalId = setInterval(function() {
+            var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+            goToSlide(el, idx + 1);
+          }, interval);
+          el._bw_carouselInterval = intervalId;
+          // Pause on hover/focus for usability
+          el.addEventListener('mouseenter', function() {
+            if (el._bw_carouselInterval) clearInterval(el._bw_carouselInterval);
+          });
+          el.addEventListener('mouseleave', function() {
+            el._bw_carouselInterval = setInterval(function() {
+              var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+              goToSlide(el, idx + 1);
+            }, interval);
+          });
+        }
+      },
+      unmount: function(el) {
+        if (el._bw_carouselInterval) {
+          clearInterval(el._bw_carouselInterval);
+        }
+      }
+    }
+  };
+}
+
+// =========================================================================
+// Phase 4: Dashboard & Data Display
+// =========================================================================
+
+/**
+ * Create a stat card for dashboard metrics display
+ *
+ * Shows a large value with a label and optional change indicator.
+ * Designed for dashboard grid layouts with left-border accent.
+ *
+ * @param {Object|string} [props] - Stat card configuration (string shorthand sets label)
+ * @param {string|number} [props.value=0] - The main stat value to display
+ * @param {string} [props.label] - Descriptive label below the value
+ * @param {number} [props.change] - Percentage change indicator (positive = green arrow, negative = red)
+ * @param {string} [props.format] - Value format ("number", "currency", "percent")
+ * @param {string} [props.prefix] - Custom prefix (e.g. "$")
+ * @param {string} [props.suffix] - Custom suffix (e.g. "%")
+ * @param {string} [props.icon] - Icon content (emoji or text) shown above value
+ * @param {string} [props.variant] - Left-border color variant ("primary", "success", "danger", etc.)
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.style] - Inline style object
+ * @returns {Object} TACO object representing a stat card
+ * @category Component Builders
+ * @example
+ * const stat = makeStatCard({
+ *   value: 2345,
+ *   label: 'Active Users',
+ *   change: 5.3,
+ *   format: 'number',
+ *   variant: 'primary'
+ * });
+ */
+function makeStatCard(props = {}) {
+  if (typeof props === 'string') props = { label: props };
+  var {
+    value = 0,
+    label,
+    change,
+    format,
+    prefix,
+    suffix,
+    icon,
+    variant,
+    className = '',
+    style
+  } = props;
+
+  function formatValue(val, fmt) {
+    if (prefix || suffix) return (prefix || '') + val + (suffix || '');
+    switch (fmt) {
+      case 'currency': return '$' + Number(val).toLocaleString();
+      case 'percent': return val + '%';
+      case 'number': return Number(val).toLocaleString();
+      default: return '' + val;
+    }
+  }
+
+  var classes = [
+    'bw_stat_card',
+    variantClass(variant),
+    className
+  ].filter(Boolean).join(' ').trim();
+
+  var children = [];
+
+  if (icon) {
+    children.push({
+      t: 'div',
+      a: { class: 'bw_stat_icon' },
+      c: icon
+    });
+  }
+
+  children.push({
+    t: 'div',
+    a: { class: 'bw_stat_value' },
+    c: formatValue(value, format)
+  });
+
+  if (label) {
+    children.push({
+      t: 'div',
+      a: { class: 'bw_stat_label' },
+      c: label
+    });
+  }
+
+  if (change !== undefined && change !== null) {
+    children.push({
+      t: 'div',
+      a: {
+        class: 'bw_stat_change ' + (change >= 0 ? 'bw_stat_change_up' : 'bw_stat_change_down')
+      },
+      c: (change >= 0 ? '\u2191 +' : '\u2193 ') + change + '%'
+    });
+  }
+
+  return {
+    t: 'div',
+    a: { class: classes, style: style },
+    c: children,
+    o: { type: 'stat-card' }
+  };
+}
+
+// =========================================================================
+// Phase 5: Overlays & Popovers
+// =========================================================================
+
+/**
+ * Create a tooltip wrapper around trigger content
+ *
+ * Wraps the trigger element in a container that shows tooltip text
+ * on hover and focus. Pure CSS-driven show/hide with JS lifecycle
+ * for event binding.
+ *
+ * @param {Object} [props] - Tooltip configuration
+ * @param {string|Object|Array} [props.content] - Trigger content (what the user hovers/focuses)
+ * @param {string} [props.text=""] - Tooltip text to display
+ * @param {string} [props.placement="top"] - Tooltip placement ("top", "bottom", "left", "right")
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a tooltip wrapper
+ * @category Component Builders
+ * @example
+ * const tip = makeTooltip({
+ *   content: makeButton({ text: 'Hover me' }),
+ *   text: 'This is a tooltip!',
+ *   placement: 'top'
+ * });
+ */
+function makeTooltip(props = {}) {
+  var {
+    content,
+    text = '',
+    placement = 'top',
+    className = ''
+  } = props;
+
+  return {
+    t: 'span',
+    a: { class: ('bw_tooltip_wrapper ' + className).trim() },
+    c: [
+      content,
+      {
+        t: 'span',
+        a: {
+          class: 'bw_tooltip bw_tooltip_' + placement,
+          role: 'tooltip'
+        },
+        c: text
+      }
+    ],
+    o: {
+      type: 'tooltip',
+      mounted: function(el) {
+        var tip = el.querySelector('.bw_tooltip');
+        el.addEventListener('mouseenter', function() {
+          tip.classList.add('bw_tooltip_show');
+        });
+        el.addEventListener('mouseleave', function() {
+          tip.classList.remove('bw_tooltip_show');
+        });
+        el.addEventListener('focusin', function() {
+          tip.classList.add('bw_tooltip_show');
+        });
+        el.addEventListener('focusout', function() {
+          tip.classList.remove('bw_tooltip_show');
+        });
+      }
+    }
+  };
+}
+
+/**
+ * Create a popover wrapper around trigger content
+ *
+ * Like a tooltip but richer — supports title + body content and is
+ * triggered by click rather than hover. Dismisses on click outside.
+ *
+ * @param {Object} [props] - Popover configuration
+ * @param {string|Object|Array} [props.trigger] - Trigger content (what the user clicks)
+ * @param {string} [props.title] - Popover header title
+ * @param {string|Object|Array} [props.content] - Popover body content
+ * @param {string} [props.placement="top"] - Placement ("top", "bottom", "left", "right")
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a popover wrapper
+ * @category Component Builders
+ * @example
+ * const pop = makePopover({
+ *   trigger: makeButton({ text: 'Click me' }),
+ *   title: 'Popover Title',
+ *   content: 'Some helpful information here.',
+ *   placement: 'bottom'
+ * });
+ */
+function makePopover(props = {}) {
+  var {
+    trigger,
+    title,
+    content,
+    placement = 'top',
+    className = ''
+  } = props;
+
+  var popoverContent = [
+    title && {
+      t: 'div',
+      a: { class: 'bw_popover_header' },
+      c: title
+    },
+    content && {
+      t: 'div',
+      a: { class: 'bw_popover_body' },
+      c: content
+    }
+  ].filter(Boolean);
+
+  return {
+    t: 'span',
+    a: { class: ('bw_popover_wrapper ' + className).trim() },
+    c: [
+      {
+        t: 'span',
+        a: {
+          class: 'bw_popover_trigger',
+          onclick: function(e) {
+            var wrapper = e.target.closest('.bw_popover_wrapper');
+            var pop = wrapper.querySelector('.bw_popover');
+            pop.classList.toggle('bw_popover_show');
+          }
+        },
+        c: trigger
+      },
+      {
+        t: 'div',
+        a: {
+          class: 'bw_popover bw_popover_' + placement
+        },
+        c: popoverContent
+      }
+    ],
+    o: {
+      type: 'popover',
+      mounted: function(el) {
+        // Click outside to close
+        var outsideHandler = function(e) {
+          if (!el.contains(e.target)) {
+            var pop = el.querySelector('.bw_popover');
+            if (pop) pop.classList.remove('bw_popover_show');
+          }
+        };
+        document.addEventListener('click', outsideHandler);
+        el._bw_outsideHandler = outsideHandler;
+      },
+      unmount: function(el) {
+        if (el._bw_outsideHandler) {
+          document.removeEventListener('click', el._bw_outsideHandler);
+        }
+      }
+    }
+  };
+}
+
+// =========================================================================
+// Phase 6: Form Enhancements & Layout
+// =========================================================================
+
+/**
+ * Create a search input with clear button
+ *
+ * Wraps a text input with a clear (×) button that appears when
+ * the field has content. Calls onSearch on Enter key.
+ *
+ * @param {Object} [props] - Search input configuration
+ * @param {string} [props.placeholder="Search..."] - Placeholder text
+ * @param {string} [props.value] - Initial value
+ * @param {Function} [props.onSearch] - Callback when Enter is pressed, receives value
+ * @param {Function} [props.onInput] - Callback on each keystroke, receives value
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.name] - Input name attribute
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a search input
+ * @category Component Builders
+ * @example
+ * const search = makeSearchInput({
+ *   placeholder: 'Search users...',
+ *   onSearch: (val) => filterUsers(val)
+ * });
+ */
+function makeSearchInput(props = {}) {
+  if (typeof props === 'string') props = { placeholder: props };
+  var {
+    placeholder = 'Search...',
+    value,
+    onSearch,
+    onInput,
+    id,
+    name,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: ('bw_search_input ' + className).trim() },
+    c: [
+      {
+        t: 'input',
+        a: {
+          type: 'search',
+          class: 'bw_form_control bw_search_field',
+          placeholder: placeholder,
+          value: value,
+          id: id,
+          name: name,
+          onkeydown: function(e) {
+            if (e.key === 'Enter' && onSearch) {
+              e.preventDefault();
+              onSearch(e.target.value);
+            }
+          },
+          oninput: function(e) {
+            var wrapper = e.target.closest('.bw_search_input');
+            var clearBtn = wrapper.querySelector('.bw_search_clear');
+            if (clearBtn) {
+              clearBtn.style.display = e.target.value ? 'flex' : 'none';
+            }
+            if (onInput) onInput(e.target.value);
+          }
+        }
+      },
+      {
+        t: 'button',
+        a: {
+          type: 'button',
+          class: 'bw_search_clear',
+          'aria-label': 'Clear search',
+          style: value ? undefined : 'display: none',
+          onclick: function(e) {
+            var wrapper = e.target.closest('.bw_search_input');
+            var input = wrapper.querySelector('.bw_search_field');
+            input.value = '';
+            e.target.style.display = 'none';
+            input.focus();
+            if (onInput) onInput('');
+            if (onSearch) onSearch('');
+          }
+        },
+        c: '\u00D7'
+      }
+    ],
+    o: { type: 'search-input' }
+  };
+}
+
+/**
+ * Create a styled range slider input
+ *
+ * @param {Object} [props] - Range configuration
+ * @param {number} [props.min=0] - Minimum value
+ * @param {number} [props.max=100] - Maximum value
+ * @param {number} [props.step=1] - Step increment
+ * @param {number} [props.value=50] - Current value
+ * @param {string} [props.label] - Label text
+ * @param {boolean} [props.showValue=false] - Show current value display
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.name] - Input name attribute
+ * @param {boolean} [props.disabled=false] - Whether the slider is disabled
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a range input
+ * @category Component Builders
+ * @example
+ * const slider = makeRange({
+ *   min: 0, max: 100, value: 50,
+ *   label: 'Volume',
+ *   showValue: true,
+ *   oninput: (e) => setVolume(e.target.value)
+ * });
+ */
+function makeRange(props = {}) {
+  var {
+    min = 0,
+    max = 100,
+    step = 1,
+    value = 50,
+    label,
+    showValue = false,
+    id,
+    name,
+    disabled = false,
+    className = '',
+    ...eventHandlers
+  } = props;
+
+  var children = [];
+
+  if (label || showValue) {
+    var labelContent = [];
+    if (label) {
+      labelContent.push({
+        t: 'span',
+        c: label
+      });
+    }
+    if (showValue) {
+      labelContent.push({
+        t: 'span',
+        a: { class: 'bw_range_value' },
+        c: '' + value
+      });
+    }
+    children.push({
+      t: 'div',
+      a: { class: 'bw_range_label' },
+      c: labelContent
+    });
+  }
+
+  // Wrap oninput to update value display
+  var userOnInput = eventHandlers.oninput;
+  if (showValue) {
+    eventHandlers.oninput = function(e) {
+      var wrapper = e.target.closest('.bw_range_wrapper');
+      var valDisplay = wrapper.querySelector('.bw_range_value');
+      if (valDisplay) valDisplay.textContent = e.target.value;
+      if (userOnInput) userOnInput(e);
+    };
+  }
+
+  children.push({
+    t: 'input',
+    a: {
+      type: 'range',
+      class: 'bw_range',
+      min: min,
+      max: max,
+      step: step,
+      value: value,
+      id: id,
+      name: name,
+      disabled: disabled,
+      ...eventHandlers
+    }
+  });
+
+  return {
+    t: 'div',
+    a: { class: ('bw_range_wrapper ' + className).trim() },
+    c: children,
+    o: { type: 'range' }
+  };
+}
+
+/**
+ * Create a media object layout (image + text side-by-side)
+ *
+ * Classic media object pattern: image/icon on one side, text content
+ * on the other, using flexbox. Supports reversed layout.
+ *
+ * @param {Object} [props] - Media object configuration
+ * @param {string} [props.src] - Image source URL
+ * @param {string} [props.alt=""] - Image alt text
+ * @param {string} [props.title] - Title text
+ * @param {string|Object|Array} [props.content] - Body content
+ * @param {boolean} [props.reverse=false] - Put image on the right
+ * @param {string} [props.imageSize="3rem"] - Image width/height
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a media object
+ * @category Component Builders
+ * @example
+ * const media = makeMediaObject({
+ *   src: '/avatar.jpg',
+ *   title: 'Jane Doe',
+ *   content: 'Posted a comment 5 minutes ago.'
+ * });
+ */
+function makeMediaObject(props = {}) {
+  var {
+    src,
+    alt = '',
+    title,
+    content,
+    reverse = false,
+    imageSize = '3rem',
+    className = ''
+  } = props;
+
+  var imgEl = src ? {
+    t: 'img',
+    a: {
+      class: 'bw_media_img',
+      src: src,
+      alt: alt,
+      style: 'width:' + imageSize + ';height:' + imageSize
+    }
+  } : null;
+
+  var bodyEl = {
+    t: 'div',
+    a: { class: 'bw_media_body' },
+    c: [
+      title && { t: 'h5', a: { class: 'bw_media_title' }, c: title },
+      content
+    ].filter(Boolean)
+  };
+
+  return {
+    t: 'div',
+    a: { class: ('bw_media ' + (reverse ? 'bw_media_reverse ' : '') + className).trim() },
+    c: reverse
+      ? [bodyEl, imgEl].filter(Boolean)
+      : [imgEl, bodyEl].filter(Boolean),
+    o: { type: 'media-object' }
+  };
+}
+
+/**
+ * Create a file upload zone with drag-and-drop support
+ *
+ * Styled drop zone with file input. Supports drag-and-drop visuals
+ * and multiple file selection.
+ *
+ * @param {Object} [props] - File upload configuration
+ * @param {string} [props.accept] - Accepted file types (e.g. "image/*", ".pdf,.doc")
+ * @param {boolean} [props.multiple=false] - Allow multiple file selection
+ * @param {Function} [props.onFiles] - Callback when files are selected, receives FileList
+ * @param {string} [props.text="Drop files here or click to browse"] - Zone label text
+ * @param {string} [props.id] - Element ID
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a file upload zone
+ * @category Component Builders
+ * @example
+ * const upload = makeFileUpload({
+ *   accept: 'image/*',
+ *   multiple: true,
+ *   onFiles: (files) => uploadFiles(files)
+ * });
+ */
+function makeFileUpload(props = {}) {
+  var {
+    accept,
+    multiple = false,
+    onFiles,
+    text = 'Drop files here or click to browse',
+    id,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: {
+      class: ('bw_file_upload ' + className).trim(),
+      tabindex: '0',
+      role: 'button',
+      'aria-label': text
+    },
+    c: [
+      { t: 'div', a: { class: 'bw_file_upload_icon' }, c: '\uD83D\uDCC1' },
+      { t: 'div', a: { class: 'bw_file_upload_text' }, c: text },
+      {
+        t: 'input',
+        a: {
+          type: 'file',
+          class: 'bw_file_upload_input',
+          accept: accept,
+          multiple: multiple,
+          id: id,
+          onchange: function(e) {
+            if (onFiles && e.target.files.length) onFiles(e.target.files);
+          }
+        }
+      }
+    ],
+    o: {
+      type: 'file-upload',
+      mounted: function(el) {
+        var input = el.querySelector('.bw_file_upload_input');
+
+        // Click zone to trigger file input
+        el.addEventListener('click', function(e) {
+          if (e.target !== input) input.click();
+        });
+
+        // Keyboard activation
+        el.addEventListener('keydown', function(e) {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            input.click();
+          }
+        });
+
+        // Drag-and-drop visuals
+        el.addEventListener('dragover', function(e) {
+          e.preventDefault();
+          el.classList.add('bw_file_upload_active');
+        });
+        el.addEventListener('dragleave', function() {
+          el.classList.remove('bw_file_upload_active');
+        });
+        el.addEventListener('drop', function(e) {
+          e.preventDefault();
+          el.classList.remove('bw_file_upload_active');
+          if (onFiles && e.dataTransfer.files.length) onFiles(e.dataTransfer.files);
+        });
+      }
+    }
+  };
+}
+
+// =========================================================================
+// Phase 7: Data Display & Workflow
+// =========================================================================
+
+/**
+ * Create a vertical timeline for chronological event display
+ *
+ * Renders events as a vertical line with markers and content cards.
+ * Each item can have a colored variant marker.
+ *
+ * @param {Object} [props] - Timeline configuration
+ * @param {Array<Object>} [props.items=[]] - Timeline events
+ * @param {string} [props.items[].title] - Event title
+ * @param {string|Object|Array} [props.items[].content] - Event description content
+ * @param {string} [props.items[].date] - Date or time label
+ * @param {string} [props.items[].variant="primary"] - Marker color variant
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a timeline
+ * @category Component Builders
+ * @example
+ * const timeline = makeTimeline({
+ *   items: [
+ *     { title: 'Project Started', date: 'Jan 2026', variant: 'primary' },
+ *     { title: 'Beta Release', date: 'Mar 2026', content: 'v2.0 beta shipped' },
+ *     { title: 'Stable Release', date: 'Jun 2026', variant: 'success' }
+ *   ]
+ * });
+ */
+function makeTimeline(props = {}) {
+  var {
+    items = [],
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: ('bw_timeline ' + className).trim() },
+    c: items.map(function(item) {
+      return {
+        t: 'div',
+        a: { class: 'bw_timeline_item' },
+        c: [
+          {
+            t: 'div',
+            a: { class: 'bw_timeline_marker ' + variantClass(item.variant || 'primary') }
+          },
+          {
+            t: 'div',
+            a: { class: 'bw_timeline_content' },
+            c: [
+              item.date && {
+                t: 'div',
+                a: { class: 'bw_timeline_date' },
+                c: item.date
+              },
+              item.title && {
+                t: 'h5',
+                a: { class: 'bw_timeline_title' },
+                c: item.title
+              },
+              item.content && (typeof item.content === 'string'
+                ? { t: 'p', a: { class: 'bw_timeline_text' }, c: item.content }
+                : item.content)
+            ].filter(Boolean)
+          }
+        ]
+      };
+    }),
+    o: { type: 'timeline' }
+  };
+}
+
+/**
+ * Create a multi-step wizard/progress indicator
+ *
+ * Displays numbered steps with active and completed states.
+ * Steps before currentStep are marked completed, the currentStep
+ * is active, and subsequent steps are pending.
+ *
+ * @param {Object} [props] - Stepper configuration
+ * @param {Array<Object>} [props.steps=[]] - Step definitions
+ * @param {string} [props.steps[].label] - Step label text
+ * @param {string} [props.steps[].description] - Optional step description
+ * @param {number} [props.currentStep=0] - Zero-based index of the active step
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a stepper
+ * @category Component Builders
+ * @example
+ * const stepper = makeStepper({
+ *   currentStep: 1,
+ *   steps: [
+ *     { label: 'Account', description: 'Create account' },
+ *     { label: 'Profile', description: 'Set up profile' },
+ *     { label: 'Confirm', description: 'Review & submit' }
+ *   ]
+ * });
+ */
+function makeStepper(props = {}) {
+  var {
+    steps = [],
+    currentStep = 0,
+    className = ''
+  } = props;
+
+  return {
+    t: 'div',
+    a: { class: ('bw_stepper ' + className).trim(), role: 'list' },
+    c: steps.map(function(step, index) {
+      var state = index < currentStep ? 'completed' : index === currentStep ? 'active' : 'pending';
+      return {
+        t: 'div',
+        a: {
+          class: 'bw_step bw_step_' + state,
+          role: 'listitem',
+          'aria-current': state === 'active' ? 'step' : undefined
+        },
+        c: [
+          {
+            t: 'div',
+            a: { class: 'bw_step_indicator' },
+            c: state === 'completed' ? '\u2713' : '' + (index + 1)
+          },
+          {
+            t: 'div',
+            a: { class: 'bw_step_body' },
+            c: [
+              { t: 'div', a: { class: 'bw_step_label' }, c: step.label },
+              step.description && { t: 'div', a: { class: 'bw_step_description' }, c: step.description }
+            ].filter(Boolean)
+          }
+        ]
+      };
+    }),
+    o: { type: 'stepper' }
+  };
+}
+
+/**
+ * Create a chip/tag input for managing a list of items
+ *
+ * Displays existing chips with remove buttons and an input field
+ * for adding new ones. Chips are added on Enter and removed on
+ * clicking the × button.
+ *
+ * @param {Object} [props] - Chip input configuration
+ * @param {Array<string>} [props.chips=[]] - Initial chip values
+ * @param {string} [props.placeholder="Add..."] - Input placeholder text
+ * @param {Function} [props.onAdd] - Callback when a chip is added, receives value
+ * @param {Function} [props.onRemove] - Callback when a chip is removed, receives value
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {Object} TACO object representing a chip input
+ * @category Component Builders
+ * @example
+ * const tags = makeChipInput({
+ *   chips: ['JavaScript', 'CSS'],
+ *   placeholder: 'Add tag...',
+ *   onAdd: (val) => addTag(val),
+ *   onRemove: (val) => removeTag(val)
+ * });
+ */
+function makeChipInput(props = {}) {
+  var {
+    chips = [],
+    placeholder = 'Add...',
+    onAdd,
+    onRemove,
+    className = ''
+  } = props;
+
+  function makeChipEl(text) {
+    return {
+      t: 'span',
+      a: { class: 'bw_chip', 'data-chip-value': text },
+      c: [
+        text,
+        {
+          t: 'button',
+          a: {
+            type: 'button',
+            class: 'bw_chip_remove',
+            'aria-label': 'Remove ' + text,
+            onclick: function(e) {
+              var chip = e.target.closest('.bw_chip');
+              var val = chip.getAttribute('data-chip-value');
+              chip.parentNode.removeChild(chip);
+              if (onRemove) onRemove(val);
+            }
+          },
+          c: '\u00D7'
+        }
+      ]
+    };
+  }
+
+  return {
+    t: 'div',
+    a: { class: ('bw_chip_input ' + className).trim() },
+    c: [
+      ...chips.map(makeChipEl),
+      {
+        t: 'input',
+        a: {
+          type: 'text',
+          class: 'bw_chip_field',
+          placeholder: placeholder,
+          onkeydown: function(e) {
+            if (e.key === 'Enter' && e.target.value.trim()) {
+              e.preventDefault();
+              var val = e.target.value.trim();
+              var wrapper = e.target.closest('.bw_chip_input');
+              // Insert chip before the input
+              var chipEl = document.createElement('span');
+              chipEl.className = 'bw_chip';
+              chipEl.setAttribute('data-chip-value', val);
+              chipEl.innerHTML = '';
+              chipEl.textContent = val;
+              var removeBtn = document.createElement('button');
+              removeBtn.type = 'button';
+              removeBtn.className = 'bw_chip_remove';
+              removeBtn.setAttribute('aria-label', 'Remove ' + val);
+              removeBtn.textContent = '\u00D7';
+              removeBtn.onclick = function() {
+                chipEl.parentNode.removeChild(chipEl);
+                if (onRemove) onRemove(val);
+              };
+              chipEl.appendChild(removeBtn);
+              wrapper.insertBefore(chipEl, e.target);
+              e.target.value = '';
+              if (onAdd) onAdd(val);
+            }
+            // Backspace on empty input removes last chip
+            if (e.key === 'Backspace' && !e.target.value) {
+              var wrapper = e.target.closest('.bw_chip_input');
+              var chipEls = wrapper.querySelectorAll('.bw_chip');
+              if (chipEls.length) {
+                var last = chipEls[chipEls.length - 1];
+                var removedVal = last.getAttribute('data-chip-value');
+                last.parentNode.removeChild(last);
+                if (onRemove) onRemove(removedVal);
+              }
+            }
+          }
+        }
+      }
+    ],
+    o: { type: 'chip-input' }
+  };
+}
+
+// componentHandles registry removed in v2.0.15.
+// See dev/dead-code-elimination-v2.0.15.md for recovery.
+
+// =========================================================================
+// BCCL Component Registry
+//
+// Single registry mapping type names to their factory functions.
+// Enables bw.make('card', props) dispatch and introspection via
+// Object.keys(BCCL).
+// =========================================================================
+
+/**
+ * BCCL component registry — maps component type names to factory functions.
+ * Each entry's `make` function is the corresponding exported makeXxx().
+ *
+ * @type {Object.<string, {make: Function}>}
+ */
+var BCCL = {
+  card:          { make: makeCard },
+  button:        { make: makeButton },
+  container:     { make: makeContainer },
+  row:           { make: makeRow },
+  col:           { make: makeCol },
+  nav:           { make: makeNav },
+  navbar:        { make: makeNavbar },
+  tabs:          { make: makeTabs },
+  alert:         { make: makeAlert },
+  badge:         { make: makeBadge },
+  progress:      { make: makeProgress },
+  listGroup:     { make: makeListGroup },
+  breadcrumb:    { make: makeBreadcrumb },
+  form:          { make: makeForm },
+  formGroup:     { make: makeFormGroup },
+  input:         { make: makeInput },
+  textarea:      { make: makeTextarea },
+  select:        { make: makeSelect },
+  checkbox:      { make: makeCheckbox },
+  stack:         { make: makeStack },
+  spinner:       { make: makeSpinner },
+  hero:          { make: makeHero },
+  featureGrid:   { make: makeFeatureGrid },
+  cta:           { make: makeCTA },
+  section:       { make: makeSection },
+  codeDemo:      { make: makeCodeDemo },
+  pagination:    { make: makePagination },
+  radio:         { make: makeRadio },
+  buttonGroup:   { make: makeButtonGroup },
+  accordion:     { make: makeAccordion },
+  modal:         { make: makeModal },
+  toast:         { make: makeToast },
+  dropdown:      { make: makeDropdown },
+  switch:        { make: makeSwitch },
+  skeleton:      { make: makeSkeleton },
+  avatar:        { make: makeAvatar },
+  carousel:      { make: makeCarousel },
+  statCard:      { make: makeStatCard },
+  tooltip:       { make: makeTooltip },
+  popover:       { make: makePopover },
+  searchInput:   { make: makeSearchInput },
+  range:         { make: makeRange },
+  mediaObject:   { make: makeMediaObject },
+  fileUpload:    { make: makeFileUpload },
+  timeline:      { make: makeTimeline },
+  stepper:       { make: makeStepper },
+  chipInput:     { make: makeChipInput }
+};
+
+/**
+ * Factory function — create any BCCL component by type name.
+ *
+ * @param {string} type - Component type (e.g. 'card', 'button', 'alert')
+ * @param {Object} [props] - Component properties
+ * @returns {Object} TACO object
+ * @throws {Error} If type is not found in the registry
+ * @example
+ * var card = make('card', { title: 'Hello', variant: 'primary' });
+ * var btn = make('button', { text: 'Click', variant: 'success' });
+ * var types = Object.keys(BCCL); // list all available types
+ */
+function make(type, props) {
+  var def = BCCL[type];
+  if (!def) throw new Error('bw.make: unknown component type "' + type + '". Available: ' + Object.keys(BCCL).join(', '));
+  var taco = def.make(props || {});
+  if (taco && typeof taco === 'object') {
+    taco._bwFactory = { type: type, props: props || {} };
+  }
+  return taco;
+}
+
+var components = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  BCCL: BCCL,
+  make: make,
+  makeAccordion: makeAccordion,
+  makeAlert: makeAlert,
+  makeAvatar: makeAvatar,
+  makeBadge: makeBadge,
+  makeBreadcrumb: makeBreadcrumb,
+  makeButton: makeButton,
+  makeButtonGroup: makeButtonGroup,
+  makeCTA: makeCTA,
+  makeCard: makeCard,
+  makeCarousel: makeCarousel,
+  makeCheckbox: makeCheckbox,
+  makeChipInput: makeChipInput,
+  makeCodeDemo: makeCodeDemo,
+  makeCol: makeCol,
+  makeContainer: makeContainer,
+  makeDropdown: makeDropdown,
+  makeFeatureGrid: makeFeatureGrid,
+  makeFileUpload: makeFileUpload,
+  makeForm: makeForm,
+  makeFormGroup: makeFormGroup,
+  makeHero: makeHero,
+  makeInput: makeInput,
+  makeListGroup: makeListGroup,
+  makeMediaObject: makeMediaObject,
+  makeModal: makeModal,
+  makeNav: makeNav,
+  makeNavbar: makeNavbar,
+  makePagination: makePagination,
+  makePopover: makePopover,
+  makeProgress: makeProgress,
+  makeRadio: makeRadio,
+  makeRange: makeRange,
+  makeRow: makeRow,
+  makeSearchInput: makeSearchInput,
+  makeSection: makeSection,
+  makeSelect: makeSelect,
+  makeSkeleton: makeSkeleton,
+  makeSpinner: makeSpinner,
+  makeStack: makeStack,
+  makeStatCard: makeStatCard,
+  makeStepper: makeStepper,
+  makeSwitch: makeSwitch,
+  makeTabs: makeTabs,
+  makeTextarea: makeTextarea,
+  makeTimeline: makeTimeline,
+  makeToast: makeToast,
+  makeTooltip: makeTooltip,
+  variantClass: variantClass
+});
+
+/**
+ * bitwrench-bccl-entry.js — Standalone entry point for BCCL component library.
+ *
+ * Use this alongside bitwrench-lean when you want the core library and
+ * BCCL components as separate files. The UMD build auto-registers all
+ * make*() functions onto the global `bw` object if present.
+ *
+ * Usage (browser):
+ *   <script src="bitwrench-lean.umd.min.js"></script>
+ *   <script src="bitwrench-bccl.umd.min.js"></script>
+ *
+ * Usage (ESM):
+ *   import bw from 'bitwrench/lean';
+ *   import { registerBCCL } from 'bitwrench/bccl';
+ *   registerBCCL(bw);
+ *
+ * @module bitwrench-bccl
+ * @license BSD-2-Clause
+ */
+
+
+/**
+ * Register all BCCL components onto a bitwrench instance.
+ * Called automatically in UMD builds when `bw` is a global.
+ *
+ * @param {Object} bw - The bitwrench instance to register on
+ */
+function registerBCCL(bw) {
+  if (!bw) return;
+
+  // Register all make* functions
+  Object.entries(components).forEach(function(entry) {
+    var name = entry[0], fn = entry[1];
+    if (name.indexOf('make') === 0) {
+      bw[name] = fn;
+    }
+  });
+
+  // Factory dispatch: bw.make('card', props) → bw.makeCard(props)
+  bw.make = make;
+
+  // Component registry
+  bw.BCCL = BCCL;
+
+  // Variant class helper
+  bw.variantClass = variantClass;
+
+  // Create functions that return handles
+  if (typeof bw.renderComponent === 'function') {
+    Object.entries(components).forEach(function(entry) {
+      var name = entry[0], fn = entry[1];
+      if (name.indexOf('make') === 0) {
+        var createName = 'create' + name.substring(4);
+        bw[createName] = function(props) {
+          var taco = fn(props);
+          return bw.renderComponent(taco);
+        };
+      }
+    });
+  }
+}
+
+// UMD auto-registration: if `bw` exists as a global, register automatically
+if (typeof window !== 'undefined' && typeof window.bw !== 'undefined') {
+  registerBCCL(window.bw);
+} else if (typeof globalThis !== 'undefined' && typeof globalThis.bw !== 'undefined') {
+  registerBCCL(globalThis.bw);
+}
+
+exports.BCCL = BCCL;
+exports.make = make;
+exports.registerBCCL = registerBCCL;
+exports.variantClass = variantClass;
+//# sourceMappingURL=bitwrench-bccl.cjs.js.map