bitwrench 2.0.11 → 2.0.12

package/dist/bitwrench.es5.js

@@ -1,4 +1,4 @@
-/*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
+/*! bitwrench v2.0.12 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -203,14 +203,14 @@
    */
 
   var VERSION_INFO = {
-    version: '2.0.11',
+    version: '2.0.12',
     name: 'bitwrench',
     description: 'A library for javascript UI functions.',
     license: 'BSD-2-Clause',
     homepage: 'https://deftio.github.com/bitwrench/pages',
     repository: 'git+https://github.com/deftio/bitwrench.git',
     author: 'manu a. chatterjee <deftio@deftio.com> (https://deftio.com/)',
-    buildDate: '2026-03-07T11:05:08.522Z'
+    buildDate: '2026-03-07T22:31:35.755Z'
   };
 
   /**
@@ -1151,14 +1151,34 @@
     rules[scopeSelector(scope, '.bw-accordion-button')] = {
       'color': palette.dark.base
     };
+    rules[scopeSelector(scope, '.bw-accordion-button:not(.bw-collapsed)')] = {
+      'color': palette.primary.darkText,
+      'background-color': palette.primary.light
+    };
     rules[scopeSelector(scope, '.bw-accordion-button:hover')] = {
       'background-color': palette.light.light
     };
+    rules[scopeSelector(scope, '.bw-accordion-button:not(.bw-collapsed):hover')] = {
+      'background-color': palette.primary.hover
+    };
+    rules[scopeSelector(scope, '.bw-accordion-button:focus-visible')] = {
+      'box-shadow': '0 0 0 0.2rem ' + palette.primary.focus
+    };
     rules[scopeSelector(scope, '.bw-accordion-body')] = {
       'border-top': '1px solid ' + palette.light.border
     };
     return rules;
   }
+  function generateCarouselThemed(scope, palette) {
+    var rules = {};
+    rules[scopeSelector(scope, '.bw-carousel')] = {
+      'background-color': palette.light.light
+    };
+    rules[scopeSelector(scope, '.bw-carousel-indicator.active')] = {
+      'background-color': palette.primary.base
+    };
+    return rules;
+  }
   function generateModalThemed(scope, palette) {
     var rules = {};
     rules[scopeSelector(scope, '.bw-modal-content')] = {
@@ -1235,7 +1255,7 @@
   function generateSkeletonThemed(scope, palette) {
     var rules = {};
     rules[scopeSelector(scope, '.bw-skeleton')] = {
-      'background-color': palette.light.border
+      'background': 'linear-gradient(90deg, ' + palette.light.border + ' 25%, ' + palette.light.light + ' 37%, ' + palette.light.border + ' 63%)'
     };
     return rules;
   }
@@ -1261,7 +1281,7 @@
    * @returns {Object} CSS rules object
    */
   function generateThemedCSS(scopeName, palette, layout) {
-    return Object.assign({}, generateResetThemed(scopeName, palette), generateTypographyThemed(scopeName, palette), generateButtons(scopeName, palette, layout), generateAlerts(scopeName, palette, layout), generateBadges(scopeName, palette), generateCards(scopeName, palette, layout), generateForms(scopeName, palette, layout), generateNavigation(scopeName, palette), generateTables(scopeName, palette, layout), generateTabs(scopeName, palette), generateListGroups(scopeName, palette, layout), generatePagination(scopeName, palette), generateProgress(scopeName, palette), generateHero(scopeName, palette), generateBreadcrumbThemed(scopeName, palette), generateSpinnerThemed(scopeName, palette), generateCloseButtonThemed(scopeName, palette), generateSectionsThemed(scopeName, palette), generateAccordionThemed(scopeName, palette), generateModalThemed(scopeName, palette), generateToastThemed(scopeName, palette), generateDropdownThemed(scopeName, palette), generateSwitchThemed(scopeName, palette), generateSkeletonThemed(scopeName, palette), generateAvatarThemed(scopeName, palette), generateUtilityColors(scopeName, palette));
+    return Object.assign({}, generateResetThemed(scopeName, palette), generateTypographyThemed(scopeName, palette), generateButtons(scopeName, palette, layout), generateAlerts(scopeName, palette, layout), generateBadges(scopeName, palette), generateCards(scopeName, palette, layout), generateForms(scopeName, palette, layout), generateNavigation(scopeName, palette), generateTables(scopeName, palette, layout), generateTabs(scopeName, palette), generateListGroups(scopeName, palette, layout), generatePagination(scopeName, palette), generateProgress(scopeName, palette), generateHero(scopeName, palette), generateBreadcrumbThemed(scopeName, palette), generateSpinnerThemed(scopeName, palette), generateCloseButtonThemed(scopeName, palette), generateSectionsThemed(scopeName, palette), generateAccordionThemed(scopeName, palette), generateCarouselThemed(scopeName, palette), generateModalThemed(scopeName, palette), generateToastThemed(scopeName, palette), generateDropdownThemed(scopeName, palette), generateSwitchThemed(scopeName, palette), generateSkeletonThemed(scopeName, palette), generateAvatarThemed(scopeName, palette), generateUtilityColors(scopeName, palette));
   }
 
   // =========================================================================
@@ -1288,7 +1308,7 @@
         'font-weight': '600',
         'line-height': '1.25',
         'letter-spacing': '-0.01em',
-        'color': '#1a1a1a'
+        'color': 'inherit'
       },
       'h1': {
         'font-size': 'calc(1.375rem + 1.5vw)'
@@ -2111,6 +2131,15 @@
     rules['.bw-tab-pane.active'] = {
       'display': 'block'
     };
+    rules['.bw-nav-scrollable'] = {
+      'flex-wrap': 'nowrap',
+      'overflow-x': 'auto',
+      '-webkit-overflow-scrolling': 'touch',
+      'scrollbar-width': 'none'
+    };
+    rules['.bw-nav-scrollable .bw-nav-link'] = {
+      'white-space': 'nowrap'
+    };
 
     // List groups (structural)
     rules['.bw-list-group'] = {
@@ -2619,6 +2648,84 @@
       'gap': '0.5rem'
     };
 
+    // Carousel (structural)
+    rules['.bw-carousel'] = {
+      'position': 'relative',
+      'overflow': 'hidden',
+      'border-radius': '8px'
+    };
+    rules['.bw-carousel-track'] = {
+      'display': 'flex',
+      'transition': 'transform 0.4s ease',
+      'height': '100%'
+    };
+    rules['.bw-carousel-slide'] = {
+      'min-width': '100%',
+      'flex-shrink': '0',
+      'overflow': 'hidden',
+      'position': 'relative',
+      'display': 'flex',
+      'align-items': 'center',
+      'justify-content': 'center'
+    };
+    rules['.bw-carousel-slide img'] = {
+      'width': '100%',
+      'height': '100%',
+      'object-fit': 'cover'
+    };
+    rules['.bw-carousel-caption'] = {
+      'position': 'absolute',
+      'bottom': '0',
+      'left': '0',
+      'right': '0',
+      'padding': '0.75rem 1rem'
+    };
+    rules['.bw-carousel-control'] = {
+      'position': 'absolute',
+      'top': '50%',
+      'transform': 'translateY(-50%)',
+      'width': '40px',
+      'height': '40px',
+      'border': 'none',
+      'border-radius': '50%',
+      'cursor': 'pointer',
+      'display': 'flex',
+      'align-items': 'center',
+      'justify-content': 'center',
+      'z-index': '2',
+      'padding': '0',
+      'transition': 'background-color 0.2s ease'
+    };
+    rules['.bw-carousel-control img'] = {
+      'width': '20px',
+      'height': '20px',
+      'pointer-events': 'none'
+    };
+    rules['.bw-carousel-control-prev'] = {
+      'left': '10px'
+    };
+    rules['.bw-carousel-control-next'] = {
+      'right': '10px'
+    };
+    rules['.bw-carousel-indicators'] = {
+      'position': 'absolute',
+      'bottom': '12px',
+      'left': '50%',
+      'transform': 'translateX(-50%)',
+      'display': 'flex',
+      'gap': '6px',
+      'z-index': '2'
+    };
+    rules['.bw-carousel-indicator'] = {
+      'width': '10px',
+      'height': '10px',
+      'border-radius': '50%',
+      'border': '2px solid transparent',
+      'padding': '0',
+      'cursor': 'pointer',
+      'transition': 'opacity 0.2s ease, background-color 0.2s ease'
+    };
+
     // Toast (structural)
     rules['.bw-toast-container'] = {
       'position': 'fixed',
@@ -2741,7 +2848,8 @@
     // Skeleton (structural)
     rules['.bw-skeleton'] = {
       'border-radius': '4px',
-      'animation': 'bw-skeleton-pulse 1.5s ease-in-out infinite'
+      'background-size': '400% 100%',
+      'animation': 'bw-skeleton-shimmer 1.4s ease infinite'
     };
     rules['.bw-skeleton-text'] = {
       'height': '1em',
@@ -2757,15 +2865,12 @@
       'display': 'flex',
       'flex-direction': 'column'
     };
-    rules['@keyframes bw-skeleton-pulse'] = {
+    rules['@keyframes bw-skeleton-shimmer'] = {
       '0%': {
-        'opacity': '1'
-      },
-      '50%': {
-        'opacity': '0.4'
+        'background-position': '100% 50%'
       },
       '100%': {
-        'opacity': '1'
+        'background-position': '0 50%'
       }
     };
 
@@ -3333,12 +3438,31 @@
       '.bw-dark .bw-accordion-button': {
         'color': textColor
       },
+      '.bw-dark .bw-accordion-button:not(.bw-collapsed)': {
+        'color': '#7dd3e0',
+        'background-color': 'rgba(125, 211, 224, 0.1)'
+      },
       '.bw-dark .bw-accordion-button:hover': {
         'background-color': bodyBg
       },
+      '.bw-dark .bw-accordion-button:not(.bw-collapsed):hover': {
+        'background-color': 'rgba(125, 211, 224, 0.15)'
+      },
+      '.bw-dark .bw-accordion-button:focus-visible': {
+        'box-shadow': '0 0 0 0.2rem rgba(125, 211, 224, 0.3)'
+      },
       '.bw-dark .bw-accordion-body': {
         'border-top-color': borderColor
       },
+      '.bw-dark .bw-carousel': {
+        'background-color': bodyBg
+      },
+      '.bw-dark .bw-carousel-control': {
+        'background-color': 'rgba(255,255,255,0.15)'
+      },
+      '.bw-dark .bw-carousel-control:hover': {
+        'background-color': 'rgba(255,255,255,0.25)'
+      },
       '.bw-dark .bw-modal-content': {
         'background-color': surfaceBg,
         'border-color': borderColor
@@ -3374,7 +3498,7 @@
         'border-top-color': borderColor
       },
       '.bw-dark .bw-skeleton': {
-        'background-color': borderColor
+        'background': 'linear-gradient(90deg, ' + borderColor + ' 25%, ' + surfaceBg + ' 37%, ' + borderColor + ' 63%)'
       },
       '.bw-dark h1, .bw-dark h2, .bw-dark h3, .bw-dark h4, .bw-dark h5, .bw-dark h6': {
         'color': textColor
@@ -6380,6 +6504,205 @@
       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() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _props$items7 = props.items,
+      items = _props$items7 === void 0 ? [] : _props$items7,
+      _props$showControls = props.showControls,
+      showControls = _props$showControls === void 0 ? true : _props$showControls,
+      _props$showIndicators = props.showIndicators,
+      showIndicators = _props$showIndicators === void 0 ? true : _props$showIndicators,
+      _props$autoPlay = props.autoPlay,
+      autoPlay = _props$autoPlay === void 0 ? false : _props$autoPlay,
+      _props$interval = props.interval,
+      interval = _props$interval === void 0 ? 5000 : _props$interval,
+      _props$height = props.height,
+      height = _props$height === void 0 ? '300px' : _props$height,
+      _props$startIndex = props.startIndex,
+      startIndex = _props$startIndex === void 0 ? 0 : _props$startIndex,
+      _props$className28 = props.className,
+      className = _props$className28 === void 0 ? '' : _props$className28;
+
+    // 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 onclick(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 onclick(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 onclick(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,
+        'data-carousel-index': startIndex
+      },
+      c: children,
+      o: {
+        type: 'carousel',
+        state: {
+          activeIndex: startIndex,
+          autoPlay: autoPlay,
+          interval: interval
+        },
+        mounted: autoPlay ? function (el) {
+          var intervalId = setInterval(function () {
+            var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+            goToSlide(el, idx + 1);
+          }, interval);
+          el._bw_carouselInterval = intervalId;
+        } : undefined,
+        unmount: autoPlay ? function (el) {
+          if (el._bw_carouselInterval) {
+            clearInterval(el._bw_carouselInterval);
+          }
+        } : undefined
+      }
+    };
+  }
   var componentHandles = {
     card: CardHandle,
     table: TableHandle,
@@ -6405,6 +6728,7 @@
     makeButtonGroup: makeButtonGroup,
     makeCTA: makeCTA,
     makeCard: makeCard,
+    makeCarousel: makeCarousel,
     makeCheckbox: makeCheckbox,
     makeCodeDemo: makeCodeDemo,
     makeCol: makeCol,
@@ -6840,6 +7164,29 @@
     });
   };
 
+  /**
+   * Mark a string as raw HTML so it will not be escaped by bw.html() or bw.createDOM().
+   *
+   * By default, bitwrench escapes all text content to prevent XSS. Use bw.raw()
+   * when you need to embed pre-sanitized HTML, entities, or inline markup.
+   *
+   * @param {string} str - HTML string to mark as raw
+   * @returns {Object} Marked object recognized by bw.html() and bw.createDOM()
+   * @category DOM Generation
+   * @see bw.escapeHTML
+   * @see bw.html
+   * @example
+   * bw.raw('Hello &mdash; World')
+   * // Used in TACO content:
+   * { t: 'p', c: bw.raw('Price: <strong>$9.99</strong>') }
+   */
+  bw.raw = function (str) {
+    return {
+      __bw_raw: true,
+      v: String(str)
+    };
+  };
+
   /**
    * Normalize CSS class names by converting underscores to hyphens for bw-prefixed classes.
    *
@@ -6895,6 +7242,11 @@
       }).join('');
     }
 
+    // Handle bw.raw() marked content
+    if (taco && taco.__bw_raw) {
+      return taco.v;
+    }
+
     // Handle primitives and non-TACO objects
     if (_typeof(taco) !== 'object' || !taco.t) {
       return options.raw ? String(taco) : bw.escapeHTML(String(taco));
@@ -7002,6 +7354,15 @@
     // Handle null/undefined
     if (taco == null) return document.createTextNode('');
 
+    // Handle bw.raw() marked content — inject as HTML
+    if (taco && taco.__bw_raw) {
+      var frag = document.createDocumentFragment();
+      var tmp = document.createElement('span');
+      tmp.innerHTML = taco.v;
+      while (tmp.firstChild) frag.appendChild(tmp.firstChild);
+      return frag;
+    }
+
     // Handle text nodes
     if (_typeof(taco) !== 'object' || !taco.t) {
       return document.createTextNode(String(taco));
@@ -7073,6 +7434,9 @@
             }
           }
         });
+      } else if (_typeof(content) === 'object' && content.__bw_raw) {
+        // Raw HTML content — inject via innerHTML
+        el.innerHTML = content.v;
       } else if (_typeof(content) === 'object' && content.t) {
         var childEl = bw.createDOM(content, options);
         el.appendChild(childEl);