diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff4eacb..676ed09 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,74 @@
+## 3.0.0-beta.6
+
+- `Moment`:
+  - `moment(DateTime)`: changed to construct moment object from ISO 8601 string instead of `dateTime.toJSDeep` conversion.
+
+- dom_tools: ^3.0.0-beta.15
+- dom_builder: ^3.0.0-beta.8
+- build_web_compilers: ^4.4.6
+
+## 3.0.0-beta.5
+
+- `BSDateRangePicker`:
+  - `_jsQueryCallback`: change parameters to `JSArray args` to avoid a bug passing a JS string to a JSObject in a Dart function.
+
+- bones_ui: ^3.0.0-beta.19
+- dom_tools: ^3.0.0-beta.13
+- dom_builder: ^3.0.0-beta.7
+- web_utils: ^1.0.19
+
+- build_runner: ^2.10.4
+- build_web_compilers: ^4.4.3
+- test: ^1.28.0
+
+- Removed dev dependency `sass_builder`.
+
+## 3.0.0-beta.4
+
+- `BSDateRangePicker`:
+  - `_configureDatePicker`:
+    - Fix `JQuery.$(_textElement).call()`, pass fallback as `_jsQueryCallback.toJS`, avoiding `jsify` issues.
+
+- bones_ui: ^3.0.0-beta.7
+- swiss_knife: ^3.3.3
+- dom_tools: ^3.0.0-beta.12
+- dom_builder: ^3.0.0-beta.4
+- web: ^1.1.1
+- web_utils: ^1.0.16
+
+- build_runner: ^2.10.0
+- build_web_compilers: ^4.3.0
+- sass_builder: ^2.4.0
+- test: ^1.26.3
+
+## 3.0.0-beta.3
+
+- bones_ui: ^3.0.0-beta.5
+- swiss_knife: ^3.3.0
+- dom_tools: ^3.0.0-beta.5
+- intl_messages: ^3.0.0-beta.1
+- web_utils: ^1.0.9
+
+## 3.0.0-beta.2
+
+- Using `JSDate` from `js_interop_utils: ^1.0.6`.
+
+- bones_ui: ^3.0.0-beta.4
+- web_utils: ^1.0.8
+
+## 3.0.0-beta.1
+
+- Migrate `dart:html` (deprecated) to package `web`.
+
+- sdk: '>=3.6.0 <4.0.0'
+
+- bones_ui: ^3.0.0-beta.2
+- amdjs: ^3.0.0-beta.2
+- dom_tools: ^3.0.0-beta.4
+- dom_builder: ^3.0.0-beta.2
+- web: ^1.1.0
+- web_utils: ^1.0.6
+
 ## 2.3.1
 
 - sdk: '>=3.5.0 <4.0.0'
diff --git a/example/main.dart b/example/main.dart
index 0cce0c0..7fa2dfb 100644
--- a/example/main.dart
+++ b/example/main.dart
@@ -1,6 +1,3 @@
-// ignore: deprecated_member_use
-import 'dart:html';
-
 import 'package:bones_ui/bones_ui_kit.dart';
 import 'package:bones_ui_bootstrap/bones_ui_bootstrap.dart';
 
@@ -49,10 +46,10 @@ class MyPage extends UIComponent {
         ' ...',
         '<hr>',
         '<b>BSDateRangePicker</b>: &nbsp;',
-        BSDateRangePicker(content!),
+        BSDateRangePicker(null),
         '<hr>',
         '<b>BSAccordion</b>: <br>',
-        BSAccordion(content!, [
+        BSAccordion(null, [
           AccordionItem('A Title', 'A text'),
           AccordionItem('B Title', 'B text'),
           AccordionItem('C Title', 'C text'),
diff --git a/lib/components/daterangepicker/daterangepicker.js b/lib/components/daterangepicker/daterangepicker.js
index 31a901f..663ae4f 100644
--- a/lib/components/daterangepicker/daterangepicker.js
+++ b/lib/components/daterangepicker/daterangepicker.js
@@ -1131,7 +1131,7 @@
 
             //if a new date range was selected, invoke the user callback function
             if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))
-                this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel);
+                this.callback([this.startDate.clone(), this.endDate.clone(), this.chosenLabel]);
 
             //if picker is attached to a text input, update it
             this.updateElement();
diff --git a/lib/src/bones_ui_bootstrap_base.dart b/lib/src/bones_ui_bootstrap_base.dart
index 193ff6e..60c67aa 100644
--- a/lib/src/bones_ui_bootstrap_base.dart
+++ b/lib/src/bones_ui_bootstrap_base.dart
@@ -1,5 +1,4 @@
-// ignore: deprecated_member_use
-import 'dart:js';
+import 'dart:js_interop_unsafe';
 
 import 'package:amdjs/amdjs.dart';
 import 'package:bones_ui/bones_ui.dart';
@@ -142,12 +141,12 @@ class JQuery {
   }
 
   /// Does JQuery [query]
-  static JQuery $(dynamic query) {
-    var o = context.callMethod(r'$', [query]);
+  static JQuery $(Object? query) {
+    var o = globalContext.callMethod<JSObject?>(r'$'.toJS, query.toJSDeep);
     return JQuery(o);
   }
 
-  final JsObject? _o;
+  final JSObject? _o;
 
   JQuery(this._o);
 
@@ -156,7 +155,8 @@ class JQuery {
   /// [method] The method to call.
   /// [args] Arguments to the method.
   dynamic call(String method, [List? args]) {
-    return _o!.callMethod(method, args);
+    var arguments = args?.map((e) => (e as Object?).toJSDeep).toList();
+    return _o!.callMethodVarArgs<JSAny?>(method.toJS, arguments).dartify();
   }
 
   /// Opens a new Window.
@@ -164,7 +164,7 @@ class JQuery {
   /// - [name] of the Window.
   /// - [html] the Window HTML.
   /// - [print] if `true` will print the window.
-  static JsObject openWindow({String? name, String? html, bool print = false}) {
+  static JSObject openWindow({String? name, String? html, bool print = false}) {
     var openParams = <dynamic>[];
 
     if (name != null) {
@@ -174,18 +174,19 @@ class JQuery {
       openParams.add(name);
     }
 
-    var w = context.callMethod('open', openParams) as JsObject;
+    var w = globalContext.callMethodVarArgs<JSObject?>('open'.toJS,
+        openParams.map((e) => (e as Object?).toJSDeep).toList()) as JSObject;
 
     if (html != null && html.isNotEmpty) {
-      var doc = w['document'] as JsObject;
-      var body = doc['body'] as JsObject;
-      var o = context.callMethod(r'$', [body]) as JsObject;
-      o.callMethod('html', [html]);
+      var doc = w['document'] as JSObject;
+      var body = doc['body'] as JSObject;
+      var o = globalContext.callMethod(r'$'.toJS, body) as JSObject;
+      o.callMethod<JSAny?>('html'.toJS, html.toJS);
     }
 
     if (print) {
-      w.callMethod('focus');
-      w.callMethod('print');
+      w.callMethod<JSAny?>('focus'.toJS);
+      w.callMethod<JSAny?>('print'.toJS);
     }
 
     return w;
@@ -215,7 +216,7 @@ class Moment {
   static bool get isSuccessfullyLoaded =>
       _load.isLoaded && _load.loadSuccessful!;
 
-  static JsFunction? _moment;
+  static JSFunction? _moment;
 
   /// Loads Moment JS library.
   static Future<bool> load() {
@@ -228,7 +229,7 @@ class Moment {
       var okJS = await AMDJS.require('moment',
           jsFullPath: jsFullPath, globalJSVariableName: 'moment');
 
-      _moment = context['moment'] as JsFunction?;
+      _moment = globalContext['moment'] as JSFunction?;
 
       var okMoment = _moment != null;
 
@@ -245,29 +246,32 @@ class Moment {
 
     locale = locale.replaceFirst('_', '-');
 
-    _moment!.callMethod('locale', [locale]);
+    _moment!.callMethod<JSAny?>('locale'.toJS, locale.toJS);
     return true;
   }
 
   /// Parses a [DateTime] to a moment object.
-  static JsObject moment(DateTime dateTime) {
-    return JsObject(_moment!, [dateTime]);
+  static JSObject moment(DateTime dateTime) {
+    var dateStr = dateTime.toIso8601String();
+    return _moment!.callAsConstructor<JSObject>(dateStr.toJS);
   }
 
   /// Formats [dateTime] to [format].
-  static String? format(DateTime dateTime, format) {
-    return moment(dateTime).callMethod('format', format);
+  static String? format(DateTime dateTime, Object format) {
+    return moment(dateTime)
+        .callMethod<JSString?>('format'.toJS, format.toJSDeep)
+        ?.toDart;
   }
 
-  static String? jsObjectFormat(JsObject moment, format) {
-    return moment.callMethod('format', [format]);
+  static String? jsObjectFormat(JSObject moment, Object format) {
+    return moment.callMethod<JSString>('format'.toJS, format.toJSDeep).toDart;
   }
 
-  static int? jsObjectToMillisecondsSinceEpoch(JsObject moment) {
-    return moment.callMethod('valueOf');
+  static int? jsObjectToMillisecondsSinceEpoch(JSObject moment) {
+    return moment.callMethod<JSNumber?>('valueOf'.toJS)?.toDartInt;
   }
 
-  static DateTime jsObjectToDateTime(JsObject moment) {
+  static DateTime jsObjectToDateTime(JSObject moment) {
     var time = jsObjectToMillisecondsSinceEpoch(moment)!;
     return DateTime.fromMillisecondsSinceEpoch(time);
   }
diff --git a/lib/src/bones_ui_bootstrap_icons.dart b/lib/src/bones_ui_bootstrap_icons.dart
index ec80f2d..c979fc5 100644
--- a/lib/src/bones_ui_bootstrap_icons.dart
+++ b/lib/src/bones_ui_bootstrap_icons.dart
@@ -1,8 +1,6 @@
-// ignore: deprecated_member_use
-import 'dart:html';
-
 import 'package:dom_tools/dom_tools.dart';
 import 'package:swiss_knife/swiss_knife.dart';
+import 'package:web/web.dart';
 
 import 'bones_ui_bootstrap_base.dart';
 
@@ -393,7 +391,7 @@ building-x.svg currency-rupee.svg filetype-key.svg motherboard-fill.svg sign-tur
   }
 
   /// Returns an [Element] of a SVG icon with [name].
-  static Element svgIconElement(String name,
+  static HTMLElement svgIconElement(String name,
       {String? title,
       int? width,
       int? height,
@@ -405,7 +403,7 @@ building-x.svg currency-rupee.svg filetype-key.svg motherboard-fill.svg sign-tur
         height: height,
         classes: classes,
         style: style);
-    return createHTML(iconHTML);
+    return createHTML(html: iconHTML);
   }
 
   static final ResourceContentCache _resourceContentCache =
diff --git a/lib/src/components/daterangepicker.dart b/lib/src/components/daterangepicker.dart
index b8777e5..d921d02 100644
--- a/lib/src/components/daterangepicker.dart
+++ b/lib/src/components/daterangepicker.dart
@@ -1,13 +1,10 @@
 import 'dart:collection';
-// ignore: deprecated_member_use
-import 'dart:html';
-// ignore: deprecated_member_use
-import 'dart:js';
 
 import 'package:bones_ui/bones_ui.dart';
 import 'package:dom_tools/dom_tools.dart';
 import 'package:intl_messages/intl_messages.dart';
 import 'package:swiss_knife/swiss_knife.dart';
+import 'package:web_utils/web_utils.dart';
 
 import '../bones_ui_bootstrap_base.dart';
 import '../bones_ui_bootstrap_icons.dart';
@@ -124,29 +121,31 @@ class BSDateRangePicker extends UIComponent implements UIField<Pair<DateTime>> {
     _load.onLoad.listen((_) => refresh());
   }
 
-  Element? _icon;
+  HTMLElement? _icon;
 
-  Element? _textElement;
+  HTMLElement? _textElement;
 
   @override
   dynamic render() {
     if (_load.isNotLoaded) return '...';
 
-    if (_icon != null) {
-      _icon!.remove();
+    var prevIcon = _icon;
+    if (prevIcon != null) {
+      prevIcon.remove();
     }
 
-    if (_textElement != null) {
-      _textElement!.remove();
+    var prevTextElement = _textElement;
+    if (prevTextElement != null) {
+      prevTextElement.remove();
     }
 
-    _icon = BootstrapIcons.svgIconElement('calendar');
+    var icon = _icon = BootstrapIcons.svgIconElement('calendar');
 
-    _textElement = createHTML('''
+    var textElement = _textElement = createHTML(html: '''
       <div class="form-control" style="max-width: 80vw; white-space: nowrap; text-overflow: ellipsis;"></div>
     ''');
 
-    _textElement!.children.add(_icon!);
+    textElement.appendChild(icon);
 
     _configureLocale();
     _buildDateRanges();
@@ -186,8 +185,8 @@ class BSDateRangePicker extends UIComponent implements UIField<Pair<DateTime>> {
   late bool _localeUsesAMPM;
 
   void _configureLocale() {
-    _locale = IntlLocale.getDefaultIntlLocale();
-    Moment.locale(_locale!.code);
+    var locale = _locale = IntlLocale.getDefaultIntlLocale();
+    Moment.locale(locale.code);
 
     _localeWeekFirstDay = getFirstDayOfWeek(_locale);
     _localeUsesAMPM = getTimeFormatUsesAMPM(_locale);
@@ -205,8 +204,10 @@ class BSDateRangePicker extends UIComponent implements UIField<Pair<DateTime>> {
       var dateTimeRange = getDateTimeRange(dateRangeType, now, weekFirstDay);
       rangesTypesDateTimeRange[dateRangeType] = dateTimeRange;
 
-      var dateRangeTypeTitle =
-          toUpperCaseInitials(getDateRangeTypeTitle(dateRangeType)!);
+      var typeTitle =
+          getDateRangeTypeTitle(dateRangeType) ?? dateRangeType.name;
+
+      var dateRangeTypeTitle = toUpperCaseInitials(typeTitle);
       dateRanges[dateRangeTypeTitle] = [
         dateTimeRange.a.millisecondsSinceEpoch,
         dateTimeRange.b.millisecondsSinceEpoch
@@ -236,27 +237,39 @@ class BSDateRangePicker extends UIComponent implements UIField<Pair<DateTime>> {
       'timePicker': hasTimePicker,
       if (hasTimePicker) 'timePicker24Hour': !_localeUsesAMPM,
       if (hasTimePicker) 'timePickerIncrement': _getTimePickerMinutesInterval(),
-      if (_dateRanges!.isNotEmpty) 'ranges': _dateRanges,
+      if (_dateRanges?.isNotEmpty ?? false) 'ranges': _dateRanges,
       if (configLocale.isNotEmpty) 'locale': configLocale
     };
 
     print(config);
 
-    JQuery.$(_textElement).call('daterangepicker',
-        [JsObject.jsify(config), ([a, b, c]) => _setDateRange(a, b)]);
+    JQuery.$(_textElement).call(
+      'daterangepicker',
+      [config.toJSDeep, _jsQueryCallback.toJS],
+    );
 
     _updateTextElement();
   }
 
-  void _setDateRange(JsObject jsStartTime, JsObject jsEndTime) {
+  void _jsQueryCallback(JSArray args) {
+    var a = args[0].asJSObject;
+    var b = args[1].asJSObject;
+    _setDateRange(a, b);
+  }
+
+  void _setDateRange(JSObject? jsStartTime, JSObject? jsEndTime) {
+    if (jsStartTime == null || jsEndTime == null) return;
+
     setDateRange(Moment.jsObjectToDateTime(jsStartTime),
         Moment.jsObjectToDateTime(jsEndTime));
   }
 
   /// Sets the selected date range by [dateRangeType].
   void setDateRangeByType(DateRangeType dateRangeType) {
-    var range = _rangesTypesDateTimeRange != null
-        ? _rangesTypesDateTimeRange![dateRangeType]
+    var rangesTypesDateTimeRange = _rangesTypesDateTimeRange;
+
+    var range = rangesTypesDateTimeRange != null
+        ? rangesTypesDateTimeRange[dateRangeType]
         : null;
     range ??= getDateTimeRange(dateRangeType, DateTime.now(), weekFirstDay);
 
@@ -285,16 +298,20 @@ class BSDateRangePicker extends UIComponent implements UIField<Pair<DateTime>> {
       d.year, d.month, d.day, d.hour, d.minute, seconds, millisecond, 0);
 
   void _updateTextElement() {
-    if (_textElement == null) return;
+    final textElement = _textElement;
+    if (textElement == null) return;
 
     var text = dateText;
 
-    _textElement!.children.clear();
+    textElement.clear();
 
-    _textElement!.children.add(createSpan(text));
+    textElement.appendChild(createSpan(html: text));
 
-    _icon!.style.paddingLeft = '10px';
-    _textElement!.children.add(_icon!);
+    var icon = _icon;
+    if (icon != null) {
+      icon.style.paddingLeft = '10px';
+      textElement.appendChild(icon);
+    }
   }
 
   String get dateText => _getDateText(_startTime, _endTime);
@@ -317,12 +334,13 @@ class BSDateRangePicker extends UIComponent implements UIField<Pair<DateTime>> {
   }
 
   String? _buildDateTextTitle(DateTime startTime, DateTime endTime) {
-    if (_dateRanges == null) return null;
+    var dateRanges = _dateRanges;
+    if (dateRanges == null) return null;
 
     var startMillis = startTime.millisecondsSinceEpoch;
     var endMillis = endTime.millisecondsSinceEpoch;
 
-    for (var entry in _dateRanges!.entries) {
+    for (var entry in dateRanges.entries) {
       var rangeInit = entry.value[0];
       var rangeEnd = entry.value[1];
 
diff --git a/pubspec.yaml b/pubspec.yaml
index 0bd8e6e..68b49a3 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,26 +1,28 @@
 name: bones_ui_bootstrap
 description: Adds Bootstrap 4+ support to Dart package bones_ui, allowing use of Bootstrap components and CSS.
-version: 2.3.1
+version: 3.0.0-beta.6
 homepage: https://github.com/Colossus-Services/bones_ui_bootstrap
 
 environment:
-  sdk: '>=3.5.0 <4.0.0'
+  sdk: '>=3.6.0 <4.0.0'
 
 dependencies:
-  bones_ui: ^2.5.13
-  swiss_knife: ^3.2.3
-  amdjs: ^2.0.4
-  dom_tools: ^2.3.2
-  dom_builder: ^2.2.7
-  intl_messages: ^2.3.4
+  bones_ui: ^3.0.0-beta.19
+  swiss_knife: ^3.3.3
+  amdjs: ^3.0.0-beta.2
+  dom_tools: ^3.0.0-beta.15
+  dom_builder: ^3.0.0-beta.8
+  intl_messages: ^3.0.0-beta.1
+  web: ^1.1.1
+  web_utils: ^1.0.19
 
 dev_dependencies:
-  build_runner: ^2.4.15
-  build_web_compilers: ^4.1.1
-  sass_builder: ^2.2.1 # To automatically build SCSS files.
+  build_runner: ^2.10.4
+  build_web_compilers: ^4.4.6
+  #sass_builder: ^2.4.0 # To automatically build SCSS files.
   lints: ^5.1.1
   dependency_validator: ^3.2.3
-  test: ^1.25.15
+  test: ^1.28.0
 
 #dependency_overrides:
 #  bones_ui:
@@ -28,8 +30,10 @@ dev_dependencies:
 #  swiss_knife:
 #    path: ../swiss_knife
 #  amdjs:
-#    path: ../amdjs
+#    path: ../amdjs.dart
 #  dom_tools:
 #    path: ../dom_tools
+#  web_utils:
+#    path: ../web_utils
 #  intl_messages:
 #    path: ../intl_messages
diff --git a/test/bones_ui_bootstrap_test.dart b/test/bones_ui_bootstrap_test.dart
index f94b930..12972d8 100644
--- a/test/bones_ui_bootstrap_test.dart
+++ b/test/bones_ui_bootstrap_test.dart
@@ -1,16 +1,14 @@
 @TestOn('browser')
 library;
 
-// ignore: deprecated_member_use
-import 'dart:html';
-
+import 'package:web_utils/web_utils.dart';
 import 'package:bones_ui/bones_ui.dart';
 import 'package:bones_ui_bootstrap/bones_ui_bootstrap.dart';
 import 'package:test/test.dart';
 
 void main() {
   group('Components', () {
-    final rootContainer = DivElement();
+    final rootContainer = HTMLDivElement();
     late final MyRoot root;
 
     setUpAll(() {
@@ -22,12 +20,12 @@ void main() {
       await root.onFinishRender.first;
 
       var myHome = rootContainer.querySelector('#my-home');
-      expect(myHome, isA<DivElement>());
+      expect(myHome, isA<HTMLDivElement>());
     });
 
     test('BSAccordion', () async {
       var myAccordion = rootContainer.querySelector('#my-accordion');
-      expect(myAccordion, isA<DivElement>());
+      expect(myAccordion, isA<HTMLDivElement>());
     });
   });
 }