bitwrench 2.0.11 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- /*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
1
+ /*! bitwrench v2.0.13 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -1,4 +1,4 @@
1
- /*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
1
+ /*! bitwrench v2.0.13 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
2
2
  (function (global, factory) {
3
3
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
4
4
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -1,4 +1,4 @@
1
- /*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
1
+ /*! bitwrench v2.0.13 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
2
2
  !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bwCodeEdit={})}(this,function(e){"use strict";
3
3
  /**
4
4
  * bitwrench-code-edit.js - syntax-highlighted contenteditable code editor addon
@@ -1,4 +1,4 @@
1
- /*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
1
+ /*! bitwrench v2.0.13 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
2
2
  /**
3
3
  * bitwrench-code-edit.js - syntax-highlighted contenteditable code editor addon
4
4
  *
@@ -1,4 +1,4 @@
1
- /*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
1
+ /*! bitwrench v2.0.13 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
2
2
  /**
3
3
  * bitwrench-code-edit.js - syntax-highlighted contenteditable code editor addon
4
4
  *
@@ -1,4 +1,4 @@
1
- /*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
1
+ /*! bitwrench v2.0.13 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
2
2
  (function (global, factory) {
3
3
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
4
4
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -1,4 +1,4 @@
1
- /*! bitwrench v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
1
+ /*! bitwrench v2.0.13 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
2
2
  !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bwCodeEdit={})}(this,function(e){"use strict";
3
3
  /**
4
4
  * bitwrench-code-edit.js - syntax-highlighted contenteditable code editor addon
@@ -1,4 +1,4 @@
1
- /*! bitwrench-lean v2.0.11 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
1
+ /*! bitwrench-lean v2.0.13 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
2
2
  'use strict';
3
3
 
4
4
  /**
@@ -7,14 +7,14 @@
7
7
  */
8
8
 
9
9
  const VERSION_INFO = {
10
- version: '2.0.11',
10
+ version: '2.0.13',
11
11
  name: 'bitwrench',
12
12
  description: 'A library for javascript UI functions.',
13
13
  license: 'BSD-2-Clause',
14
14
  homepage: 'https://deftio.github.com/bitwrench/pages',
15
15
  repository: 'git+https://github.com/deftio/bitwrench.git',
16
16
  author: 'manu a. chatterjee <deftio@deftio.com> (https://deftio.com/)',
17
- buildDate: '2026-03-07T11:05:08.522Z'
17
+ buildDate: '2026-03-07T22:35:06.056Z'
18
18
  };
19
19
 
20
20
  /**
@@ -889,15 +889,36 @@ function generateAccordionThemed(scope, palette) {
889
889
  rules[scopeSelector(scope, '.bw-accordion-button')] = {
890
890
  'color': palette.dark.base
891
891
  };
892
+ rules[scopeSelector(scope, '.bw-accordion-button:not(.bw-collapsed)')] = {
893
+ 'color': palette.primary.darkText,
894
+ 'background-color': palette.primary.light
895
+ };
892
896
  rules[scopeSelector(scope, '.bw-accordion-button:hover')] = {
893
897
  'background-color': palette.light.light
894
898
  };
899
+ rules[scopeSelector(scope, '.bw-accordion-button:not(.bw-collapsed):hover')] = {
900
+ 'background-color': palette.primary.hover
901
+ };
902
+ rules[scopeSelector(scope, '.bw-accordion-button:focus-visible')] = {
903
+ 'box-shadow': '0 0 0 0.2rem ' + palette.primary.focus
904
+ };
895
905
  rules[scopeSelector(scope, '.bw-accordion-body')] = {
896
906
  'border-top': '1px solid ' + palette.light.border
897
907
  };
898
908
  return rules;
899
909
  }
900
910
 
911
+ function generateCarouselThemed(scope, palette) {
912
+ var rules = {};
913
+ rules[scopeSelector(scope, '.bw-carousel')] = {
914
+ 'background-color': palette.light.light
915
+ };
916
+ rules[scopeSelector(scope, '.bw-carousel-indicator.active')] = {
917
+ 'background-color': palette.primary.base
918
+ };
919
+ return rules;
920
+ }
921
+
901
922
  function generateModalThemed(scope, palette) {
902
923
  var rules = {};
903
924
  rules[scopeSelector(scope, '.bw-modal-content')] = {
@@ -978,7 +999,7 @@ function generateSwitchThemed(scope, palette) {
978
999
  function generateSkeletonThemed(scope, palette) {
979
1000
  var rules = {};
980
1001
  rules[scopeSelector(scope, '.bw-skeleton')] = {
981
- 'background-color': palette.light.border
1002
+ 'background': 'linear-gradient(90deg, ' + palette.light.border + ' 25%, ' + palette.light.light + ' 37%, ' + palette.light.border + ' 63%)'
982
1003
  };
983
1004
  return rules;
984
1005
  }
@@ -1025,6 +1046,7 @@ function generateThemedCSS(scopeName, palette, layout) {
1025
1046
  generateCloseButtonThemed(scopeName, palette),
1026
1047
  generateSectionsThemed(scopeName, palette),
1027
1048
  generateAccordionThemed(scopeName, palette),
1049
+ generateCarouselThemed(scopeName, palette),
1028
1050
  generateModalThemed(scopeName, palette),
1029
1051
  generateToastThemed(scopeName, palette),
1030
1052
  generateDropdownThemed(scopeName, palette),
@@ -1384,6 +1406,8 @@ function getStructuralStyles() {
1384
1406
  rules['.bw-tab-content'] = { 'padding': '1.25rem 0' };
1385
1407
  rules['.bw-tab-pane'] = { 'display': 'none' };
1386
1408
  rules['.bw-tab-pane.active'] = { 'display': 'block' };
1409
+ rules['.bw-nav-scrollable'] = { 'flex-wrap': 'nowrap', 'overflow-x': 'auto', '-webkit-overflow-scrolling': 'touch', 'scrollbar-width': 'none' };
1410
+ rules['.bw-nav-scrollable .bw-nav-link'] = { 'white-space': 'nowrap' };
1387
1411
 
1388
1412
  // List groups (structural)
1389
1413
  rules['.bw-list-group'] = { 'display': 'flex', 'flex-direction': 'column', 'padding-left': '0', 'margin-bottom': '0', 'border-radius': '0.375rem' };
@@ -1550,6 +1574,29 @@ function getStructuralStyles() {
1550
1574
  rules['.bw-modal-body'] = { 'position': 'relative', 'flex': '1 1 auto', 'padding': '1.5rem' };
1551
1575
  rules['.bw-modal-footer'] = { 'display': 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', 'justify-content': 'flex-end', 'padding': '0.75rem 1.5rem', 'gap': '0.5rem' };
1552
1576
 
1577
+ // Carousel (structural)
1578
+ rules['.bw-carousel'] = { 'position': 'relative', 'overflow': 'hidden', 'border-radius': '8px' };
1579
+ rules['.bw-carousel-track'] = { 'display': 'flex', 'transition': 'transform 0.4s ease', 'height': '100%' };
1580
+ rules['.bw-carousel-slide'] = { 'min-width': '100%', 'flex-shrink': '0', 'overflow': 'hidden', 'position': 'relative', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center' };
1581
+ rules['.bw-carousel-slide img'] = { 'width': '100%', 'height': '100%', 'object-fit': 'cover' };
1582
+ rules['.bw-carousel-caption'] = { 'position': 'absolute', 'bottom': '0', 'left': '0', 'right': '0', 'padding': '0.75rem 1rem' };
1583
+ rules['.bw-carousel-control'] = {
1584
+ 'position': 'absolute', 'top': '50%', 'transform': 'translateY(-50%)', 'width': '40px', 'height': '40px',
1585
+ 'border': 'none', 'border-radius': '50%', 'cursor': 'pointer', 'display': 'flex', 'align-items': 'center',
1586
+ 'justify-content': 'center', 'z-index': '2', 'padding': '0', 'transition': 'background-color 0.2s ease'
1587
+ };
1588
+ rules['.bw-carousel-control img'] = { 'width': '20px', 'height': '20px', 'pointer-events': 'none' };
1589
+ rules['.bw-carousel-control-prev'] = { 'left': '10px' };
1590
+ rules['.bw-carousel-control-next'] = { 'right': '10px' };
1591
+ rules['.bw-carousel-indicators'] = {
1592
+ 'position': 'absolute', 'bottom': '12px', 'left': '50%', 'transform': 'translateX(-50%)',
1593
+ 'display': 'flex', 'gap': '6px', 'z-index': '2'
1594
+ };
1595
+ rules['.bw-carousel-indicator'] = {
1596
+ 'width': '10px', 'height': '10px', 'border-radius': '50%', 'border': '2px solid transparent',
1597
+ 'padding': '0', 'cursor': 'pointer', 'transition': 'opacity 0.2s ease, background-color 0.2s ease'
1598
+ };
1599
+
1553
1600
  // Toast (structural)
1554
1601
  rules['.bw-toast-container'] = {
1555
1602
  'position': 'fixed', 'z-index': '1080', 'pointer-events': 'none',
@@ -1599,12 +1646,12 @@ function getStructuralStyles() {
1599
1646
  rules['.bw-form-switch .bw-switch-input:disabled'] = { 'opacity': '0.5', 'cursor': 'not-allowed' };
1600
1647
 
1601
1648
  // Skeleton (structural)
1602
- rules['.bw-skeleton'] = { 'border-radius': '4px', 'animation': 'bw-skeleton-pulse 1.5s ease-in-out infinite' };
1649
+ rules['.bw-skeleton'] = { 'border-radius': '4px', 'background-size': '400% 100%', 'animation': 'bw-skeleton-shimmer 1.4s ease infinite' };
1603
1650
  rules['.bw-skeleton-text'] = { 'height': '1em', 'margin-bottom': '0.5rem' };
1604
1651
  rules['.bw-skeleton-circle'] = { 'border-radius': '50%' };
1605
1652
  rules['.bw-skeleton-rect'] = { 'border-radius': '8px' };
1606
1653
  rules['.bw-skeleton-group'] = { 'display': 'flex', 'flex-direction': 'column' };
1607
- rules['@keyframes bw-skeleton-pulse'] = { '0%': { 'opacity': '1' }, '50%': { 'opacity': '0.4' }, '100%': { 'opacity': '1' } };
1654
+ rules['@keyframes bw-skeleton-shimmer'] = { '0%': { 'background-position': '100% 50%' }, '100%': { 'background-position': '0 50%' } };
1608
1655
 
1609
1656
  // Avatar (structural)
1610
1657
  rules['.bw-avatar'] = {
@@ -1966,12 +2013,31 @@ function generateDarkModeCSS(palette) {
1966
2013
  '.bw-dark .bw-accordion-button': {
1967
2014
  'color': textColor
1968
2015
  },
2016
+ '.bw-dark .bw-accordion-button:not(.bw-collapsed)': {
2017
+ 'color': '#7dd3e0',
2018
+ 'background-color': 'rgba(125, 211, 224, 0.1)'
2019
+ },
1969
2020
  '.bw-dark .bw-accordion-button:hover': {
1970
2021
  'background-color': bodyBg
1971
2022
  },
2023
+ '.bw-dark .bw-accordion-button:not(.bw-collapsed):hover': {
2024
+ 'background-color': 'rgba(125, 211, 224, 0.15)'
2025
+ },
2026
+ '.bw-dark .bw-accordion-button:focus-visible': {
2027
+ 'box-shadow': '0 0 0 0.2rem rgba(125, 211, 224, 0.3)'
2028
+ },
1972
2029
  '.bw-dark .bw-accordion-body': {
1973
2030
  'border-top-color': borderColor
1974
2031
  },
2032
+ '.bw-dark .bw-carousel': {
2033
+ 'background-color': bodyBg
2034
+ },
2035
+ '.bw-dark .bw-carousel-control': {
2036
+ 'background-color': 'rgba(255,255,255,0.15)'
2037
+ },
2038
+ '.bw-dark .bw-carousel-control:hover': {
2039
+ 'background-color': 'rgba(255,255,255,0.25)'
2040
+ },
1975
2041
  '.bw-dark .bw-modal-content': {
1976
2042
  'background-color': surfaceBg,
1977
2043
  'border-color': borderColor
@@ -2007,7 +2073,7 @@ function generateDarkModeCSS(palette) {
2007
2073
  'border-top-color': borderColor
2008
2074
  },
2009
2075
  '.bw-dark .bw-skeleton': {
2010
- 'background-color': borderColor
2076
+ 'background': 'linear-gradient(90deg, ' + borderColor + ' 25%, ' + surfaceBg + ' 37%, ' + borderColor + ' 63%)'
2011
2077
  },
2012
2078
  '.bw-dark h1, .bw-dark h2, .bw-dark h3, .bw-dark h4, .bw-dark h5, .bw-dark h6': {
2013
2079
  'color': textColor
@@ -2468,6 +2534,26 @@ bw.escapeHTML = function(str) {
2468
2534
  return str.replace(/[&<>"'/]/g, (char) => escapeMap[char]);
2469
2535
  };
2470
2536
 
2537
+ /**
2538
+ * Mark a string as raw HTML so it will not be escaped by bw.html() or bw.createDOM().
2539
+ *
2540
+ * By default, bitwrench escapes all text content to prevent XSS. Use bw.raw()
2541
+ * when you need to embed pre-sanitized HTML, entities, or inline markup.
2542
+ *
2543
+ * @param {string} str - HTML string to mark as raw
2544
+ * @returns {Object} Marked object recognized by bw.html() and bw.createDOM()
2545
+ * @category DOM Generation
2546
+ * @see bw.escapeHTML
2547
+ * @see bw.html
2548
+ * @example
2549
+ * bw.raw('Hello &mdash; World')
2550
+ * // Used in TACO content:
2551
+ * { t: 'p', c: bw.raw('Price: <strong>$9.99</strong>') }
2552
+ */
2553
+ bw.raw = function(str) {
2554
+ return { __bw_raw: true, v: String(str) };
2555
+ };
2556
+
2471
2557
  /**
2472
2558
  * Normalize CSS class names by converting underscores to hyphens for bw-prefixed classes.
2473
2559
  *
@@ -2519,6 +2605,11 @@ bw.html = function(taco, options = {}) {
2519
2605
  return taco.map(t => bw.html(t, options)).join('');
2520
2606
  }
2521
2607
 
2608
+ // Handle bw.raw() marked content
2609
+ if (taco && taco.__bw_raw) {
2610
+ return taco.v;
2611
+ }
2612
+
2522
2613
  // Handle primitives and non-TACO objects
2523
2614
  if (typeof taco !== 'object' || !taco.t) {
2524
2615
  return options.raw ? String(taco) : bw.escapeHTML(String(taco));
@@ -2619,12 +2710,21 @@ bw.createDOM = function(taco, options = {}) {
2619
2710
 
2620
2711
  // Handle null/undefined
2621
2712
  if (taco == null) return document.createTextNode('');
2622
-
2713
+
2714
+ // Handle bw.raw() marked content — inject as HTML
2715
+ if (taco && taco.__bw_raw) {
2716
+ var frag = document.createDocumentFragment();
2717
+ var tmp = document.createElement('span');
2718
+ tmp.innerHTML = taco.v;
2719
+ while (tmp.firstChild) frag.appendChild(tmp.firstChild);
2720
+ return frag;
2721
+ }
2722
+
2623
2723
  // Handle text nodes
2624
2724
  if (typeof taco !== 'object' || !taco.t) {
2625
2725
  return document.createTextNode(String(taco));
2626
2726
  }
2627
-
2727
+
2628
2728
  const { t: tag, a: attrs = {}, c: content, o: opts = {} } = taco;
2629
2729
 
2630
2730
  // Create element
@@ -2689,6 +2789,9 @@ bw.createDOM = function(taco, options = {}) {
2689
2789
  }
2690
2790
  }
2691
2791
  });
2792
+ } else if (typeof content === 'object' && content.__bw_raw) {
2793
+ // Raw HTML content — inject via innerHTML
2794
+ el.innerHTML = content.v;
2692
2795
  } else if (typeof content === 'object' && content.t) {
2693
2796
  var childEl = bw.createDOM(content, options);
2694
2797
  el.appendChild(childEl);