bitwrench 2.0.11 → 2.0.12

package/dist/bitwrench-lean.umd.js

@@ -1,4 +1,4 @@
-/*! bitwrench-lean v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
+/*! bitwrench-lean 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) :
@@ -11,14 +11,14 @@
    */
 
   const 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'
   };
 
   /**
@@ -893,15 +893,36 @@
     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')] = {
@@ -982,7 +1003,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;
   }
@@ -1029,6 +1050,7 @@
       generateCloseButtonThemed(scopeName, palette),
       generateSectionsThemed(scopeName, palette),
       generateAccordionThemed(scopeName, palette),
+      generateCarouselThemed(scopeName, palette),
       generateModalThemed(scopeName, palette),
       generateToastThemed(scopeName, palette),
       generateDropdownThemed(scopeName, palette),
@@ -1388,6 +1410,8 @@
     rules['.bw-tab-content'] = { 'padding': '1.25rem 0' };
     rules['.bw-tab-pane'] = { 'display': 'none' };
     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'] = { 'display': 'flex', 'flex-direction': 'column', 'padding-left': '0', 'margin-bottom': '0', 'border-radius': '0.375rem' };
@@ -1554,6 +1578,29 @@
     rules['.bw-modal-body'] = { 'position': 'relative', 'flex': '1 1 auto', 'padding': '1.5rem' };
     rules['.bw-modal-footer'] = { 'display': 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', 'justify-content': 'flex-end', 'padding': '0.75rem 1.5rem', 'gap': '0.5rem' };
 
+    // 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', 'z-index': '1080', 'pointer-events': 'none',
@@ -1603,12 +1650,12 @@
     rules['.bw-form-switch .bw-switch-input:disabled'] = { 'opacity': '0.5', 'cursor': 'not-allowed' };
 
     // Skeleton (structural)
-    rules['.bw-skeleton'] = { 'border-radius': '4px', 'animation': 'bw-skeleton-pulse 1.5s ease-in-out infinite' };
+    rules['.bw-skeleton'] = { 'border-radius': '4px', 'background-size': '400% 100%', 'animation': 'bw-skeleton-shimmer 1.4s ease infinite' };
     rules['.bw-skeleton-text'] = { 'height': '1em', 'margin-bottom': '0.5rem' };
     rules['.bw-skeleton-circle'] = { 'border-radius': '50%' };
     rules['.bw-skeleton-rect'] = { 'border-radius': '8px' };
     rules['.bw-skeleton-group'] = { 'display': 'flex', 'flex-direction': 'column' };
-    rules['@keyframes bw-skeleton-pulse'] = { '0%': { 'opacity': '1' }, '50%': { 'opacity': '0.4' }, '100%': { 'opacity': '1' } };
+    rules['@keyframes bw-skeleton-shimmer'] = { '0%': { 'background-position': '100% 50%' }, '100%': { 'background-position': '0 50%' } };
 
     // Avatar (structural)
     rules['.bw-avatar'] = {
@@ -1970,12 +2017,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
@@ -2011,7 +2077,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
@@ -2472,6 +2538,26 @@
     return str.replace(/[&<>"'/]/g, (char) => escapeMap[char]);
   };
 
+  /**
+   * 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.
    *
@@ -2523,6 +2609,11 @@
       return taco.map(t => bw.html(t, options)).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));
@@ -2623,12 +2714,21 @@
     
     // 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));
     }
-    
+
     const { t: tag, a: attrs = {}, c: content, o: opts = {} } = taco;
     
     // Create element
@@ -2693,6 +2793,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);