uikit 3.16.10 → 3.16.11-dev.55a0fc5b5

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.16.10 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
+/*! UIkit 3.16.11-dev.55a0fc5b5 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -959,8 +959,8 @@
     const fastdom = {
       reads: [],
       writes: [],
-      read(task, prepend) {
-        this.reads[prepend ? "unshift" : "push"](task);
+      read(task) {
+        this.reads.push(task);
         scheduleFlush();
         return task;
       },
@@ -1666,114 +1666,66 @@
         wrapInner: wrapInner
     });
 
-    function initObservers(instance) {
-      instance._observers = [];
-      instance._observerUpdates = /* @__PURE__ */ new Map();
-      for (const observer of instance.$options.observe || []) {
-        if (hasOwn(observer, "handler")) {
-          registerObservable(instance, observer);
-        } else {
-          for (const key in observer) {
-            registerObservable(instance, observer[key], key);
-          }
+    function initComputed(instance) {
+      const { computed } = instance.$options;
+      instance._computed = {};
+      if (computed) {
+        for (const key in computed) {
+          registerComputed(instance, key, computed[key]);
         }
       }
     }
-    function registerObserver(instance, ...observer) {
-      instance._observers.push(...observer);
-    }
-    function disconnectObservers(instance) {
-      for (const observer of instance._observers) {
-        observer == null ? void 0 : observer.disconnect();
-        instance._observerUpdates.delete(observer);
-      }
-    }
-    function callObserverUpdates(instance) {
-      for (const [observer, update] of instance._observerUpdates) {
-        update(observer);
-      }
-    }
-    function registerObservable(instance, observable, key) {
-      let {
-        observe,
-        target = instance.$el,
-        handler,
-        options,
-        filter,
-        args
-      } = isPlainObject(observable) ? observable : { type: key, handler: observable };
-      if (filter && !filter.call(instance, instance)) {
-        return;
-      }
-      const targets = isFunction(target) ? target.call(instance, instance) : target;
-      handler = isString(handler) ? instance[handler] : handler.bind(instance);
-      if (isFunction(options)) {
-        options = options.call(instance, instance);
-      }
-      const observer = observe(targets, handler, options, args);
-      if (isFunction(target) && isArray(targets) && observer.unobserve) {
-        instance._observerUpdates.set(observer, watchChange(instance, target, targets));
-      }
-      registerObserver(instance, observer);
+    function resetComputed(instance) {
+      const values = { ...instance._computed };
+      instance._computed = {};
+      return values;
     }
-    function watchChange(instance, targetFn, targets) {
-      return (observer) => {
-        const newTargets = targetFn.call(instance, instance);
-        if (isEqual(targets, newTargets)) {
-          return;
+    function registerComputed(instance, key, cb) {
+      Object.defineProperty(instance, key, {
+        enumerable: true,
+        get() {
+          const { _computed, $props, $el } = instance;
+          if (!hasOwn(_computed, key)) {
+            _computed[key] = (cb.get || cb).call(instance, $props, $el);
+          }
+          return _computed[key];
+        },
+        set(value) {
+          const { _computed } = instance;
+          _computed[key] = cb.set ? cb.set.call(instance, value) : value;
+          if (isUndefined(_computed[key])) {
+            delete _computed[key];
+          }
         }
-        targets.forEach((target) => !includes(newTargets, target) && observer.unobserve(target));
-        newTargets.forEach((target) => !includes(targets, target) && observer.observe(target));
-        targets.splice(0, targets.length, ...newTargets);
-      };
+      });
     }
 
-    function callWatches(instance) {
-      if (instance._watch) {
-        return;
-      }
-      const initial = !hasOwn(instance, "_watch");
-      instance._watch = fastdom.read(() => {
-        if (instance._connected) {
-          runWatches(instance, initial);
-        }
-        instance._watch = null;
-      }, true);
+    function initUpdates(instance) {
+      instance._updates = [...instance.$options.update || []];
     }
-    function runWatches(instance, initial) {
-      const values = { ...instance._computed };
-      instance._computed = {};
-      for (const [key, { watch, immediate }] of Object.entries(instance.$options.computed || {})) {
-        if (watch && (initial && immediate || hasOwn(values, key) && !isEqual(values[key], instance[key]))) {
-          watch.call(instance, instance[key], initial ? void 0 : values[key]);
-        }
-      }
-      callObserverUpdates(instance);
+    function prependUpdate(instance, update) {
+      instance._updates.unshift(update);
     }
-
     function callUpdate(instance, e = "update") {
       if (!instance._connected) {
         return;
       }
-      if (e === "update" || e === "resize") {
-        callWatches(instance);
-      }
       if (!instance.$options.update) {
         return;
       }
-      if (!instance._updates) {
-        instance._updates = /* @__PURE__ */ new Set();
+      if (!instance._queued) {
+        instance._queued = /* @__PURE__ */ new Set();
         fastdom.read(() => {
           if (instance._connected) {
-            runUpdates(instance, instance._updates);
+            runUpdates(instance, instance._queued);
           }
-          delete instance._updates;
+          delete instance._queued;
         });
       }
-      instance._updates.add(e.type || e);
+      instance._queued.add(e.type || e);
     }
     function runUpdates(instance, types) {
-      for (const { read, write, events = [] } of instance.$options.update) {
+      for (const { read, write, events = [] } of instance._updates) {
         if (!types.has("update") && !events.some((type) => types.has(type))) {
           continue;
         }
@@ -1793,23 +1745,40 @@
         }
       }
     }
-    function initUpdateObserver(instance) {
-      let { el, computed, observe } = instance.$options;
-      if (!computed && !(observe == null ? void 0 : observe.some((options) => isFunction(options.target)))) {
+
+    function initWatches(instance) {
+      instance._watches = [];
+      for (const watches of instance.$options.watch || []) {
+        for (const [name, watch] of Object.entries(watches)) {
+          registerWatch(instance, watch, name);
+        }
+      }
+      instance._initial = true;
+      prependUpdate(instance, { read: () => callWatches(instance), events: ["resize"] });
+    }
+    function registerWatch(instance, watch, name) {
+      instance._watches.push({
+        name,
+        ...isPlainObject(watch) ? watch : { handler: watch }
+      });
+      if (watch.document) {
+        instance._observeTarget = instance.$options.el.ownerDocumentocument;
+      }
+    }
+    function callWatches(instance) {
+      if (!instance._connected) {
         return;
       }
-      for (const key in computed || {}) {
-        if (computed[key].document) {
-          el = el.ownerDocument;
-          break;
+      runWatches(instance, instance._initial);
+      instance._initial = false;
+    }
+    function runWatches(instance, initial) {
+      const values = resetComputed(instance);
+      for (const { name, handler, immediate = true } of instance._watches) {
+        if (initial && immediate || hasOwn(values, name) && !isEqual(values[name], instance[name])) {
+          handler.call(instance, instance[name], initial ? void 0 : values[name]);
         }
       }
-      const observer = new MutationObserver(() => callWatches(instance));
-      observer.observe(el, {
-        childList: true,
-        subtree: true
-      });
-      registerObserver(instance, observer);
     }
 
     function initEvents(instance) {
@@ -1849,8 +1818,75 @@
       );
     }
 
+    function initObservers(instance) {
+      instance._observers = [];
+      for (const observer of instance.$options.observe || []) {
+        if (hasOwn(observer, "handler")) {
+          registerObservable(instance, observer);
+        } else {
+          for (const observable of observer) {
+            registerObservable(instance, observable);
+          }
+        }
+      }
+    }
+    function registerObserver(instance, ...observer) {
+      instance._observers.push(...observer);
+    }
+    function disconnectObservers(instance) {
+      for (const observer of instance._observers) {
+        observer.disconnect();
+      }
+    }
+    function registerObservable(instance, observable) {
+      let { observe, target = instance.$el, handler, options, filter, args } = observable;
+      if (filter && !filter.call(instance, instance)) {
+        return;
+      }
+      const key = `_observe${instance._observers.length}`;
+      if (isFunction(target) && !(key in instance)) {
+        registerComputed(instance, key, () => target.call(instance, instance));
+        target = instance[key];
+      }
+      handler = isString(handler) ? instance[handler] : handler.bind(instance);
+      if (isFunction(options)) {
+        options = options.call(instance, instance);
+      }
+      const observer = observe(target, handler, options, args);
+      if (isFunction(target) && isArray(instance[key]) && observer.unobserve) {
+        registerWatch(
+          instance,
+          {
+            handler(targets, prev) {
+              for (const target2 of prev) {
+                !includes(targets, target2) && observer.unobserve(target2);
+              }
+              for (const target2 of targets) {
+                !includes(prev, target2) && observer.observe(target2);
+              }
+            },
+            immediate: false
+          },
+          key
+        );
+      }
+      registerObserver(instance, observer);
+    }
+    function initWatchObserver(instance) {
+      let { el, computed } = instance.$options;
+      if (!computed && !instance._watches) {
+        return;
+      }
+      const observer = new MutationObserver(() => callWatches(instance));
+      observer.observe(instance._observeTarget || el, {
+        childList: true,
+        subtree: true
+      });
+      registerObserver(instance, observer);
+    }
+
     const strats = {};
-    strats.events = strats.observe = strats.created = strats.beforeConnect = strats.connected = strats.beforeDisconnect = strats.disconnected = strats.destroy = concatStrat;
+    strats.events = strats.watch = strats.observe = strats.created = strats.beforeConnect = strats.connected = strats.beforeDisconnect = strats.disconnected = strats.destroy = concatStrat;
     strats.args = function(parentVal, childVal) {
       return childVal !== false && concatStrat(childVal || parentVal);
     };
@@ -2039,9 +2075,11 @@
       callHook(instance, "beforeConnect");
       instance._connected = true;
       initEvents(instance);
+      initUpdates(instance);
+      initWatches(instance);
       initObservers(instance);
       initPropsObserver(instance);
-      initUpdateObserver(instance);
+      initWatchObserver(instance);
       callHook(instance, "connected");
       callUpdate(instance);
     }
@@ -2057,35 +2095,6 @@
       delete instance._watch;
     }
 
-    function initComputed(instance) {
-      const { computed } = instance.$options;
-      instance._computed = {};
-      if (computed) {
-        for (const key in computed) {
-          registerComputed(instance, key, computed[key]);
-        }
-      }
-    }
-    function registerComputed(instance, key, cb) {
-      Object.defineProperty(instance, key, {
-        enumerable: true,
-        get() {
-          const { _computed, $props, $el } = instance;
-          if (!hasOwn(_computed, key)) {
-            _computed[key] = (cb.get || cb).call(instance, $props, $el);
-          }
-          return _computed[key];
-        },
-        set(value) {
-          const { _computed } = instance;
-          _computed[key] = cb.set ? cb.set.call(instance, value) : value;
-          if (isUndefined(_computed[key])) {
-            delete _computed[key];
-          }
-        }
-      });
-    }
-
     let uid = 0;
     function init$1(instance, options = {}) {
       options.data = normalizeData(options, instance.constructor.options);
@@ -2140,7 +2149,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.16.10";
+    App.version = "3.16.11-dev.55a0fc5b5";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -2686,52 +2695,41 @@
         offset: 0
       },
       computed: {
-        items: {
-          get({ targets }, $el) {
-            return $$(targets, $el);
-          },
-          watch(items, prev) {
-            if (prev || hasClass(items, this.clsOpen)) {
-              return;
-            }
-            const active = this.active !== false && items[Number(this.active)] || !this.collapsible && items[0];
-            if (active) {
-              this.toggle(active, false);
-            }
-          },
-          immediate: true
+        items({ targets }, $el) {
+          return $$(targets, $el);
         },
-        toggles: {
-          get({ toggle }) {
-            return this.items.map((item) => $(toggle, item));
-          },
-          watch() {
-            this.$emit();
-          },
-          immediate: true
+        toggles({ toggle }) {
+          return this.items.map((item) => $(toggle, item));
         },
-        contents: {
-          get({ content }) {
-            return this.items.map(
-              (item) => {
-                var _a;
-                return ((_a = item._wrapper) == null ? void 0 : _a.firstElementChild) || $(content, item);
-              }
+        contents({ content }) {
+          return this.items.map((item) => {
+            var _a;
+            return ((_a = item._wrapper) == null ? void 0 : _a.firstElementChild) || $(content, item);
+          });
+        }
+      },
+      watch: {
+        items(items, prev) {
+          if (prev || hasClass(items, this.clsOpen)) {
+            return;
+          }
+          const active = this.active !== false && items[Number(this.active)] || !this.collapsible && items[0];
+          if (active) {
+            this.toggle(active, false);
+          }
+        },
+        toggles() {
+          this.$emit();
+        },
+        contents(items) {
+          for (const el of items) {
+            const isOpen = hasClass(
+              this.items.find((item) => within(el, item)),
+              this.clsOpen
             );
-          },
-          watch(items) {
-            for (const el of items) {
-              hide(
-                el,
-                !hasClass(
-                  this.items.find((item) => within(el, item)),
-                  this.clsOpen
-                )
-              );
-            }
-            this.$emit();
-          },
-          immediate: true
+            hide(el, !isOpen);
+          }
+          this.$emit();
         }
       },
       observe: lazyload(),
@@ -3540,15 +3538,36 @@
         dropbarAnchor({ dropbarAnchor }, $el) {
           return query(dropbarAnchor, $el) || $el;
         },
-        dropbar: {
-          get({ dropbar }) {
-            if (!dropbar) {
-              return null;
+        dropbar({ dropbar }) {
+          if (!dropbar) {
+            return null;
+          }
+          dropbar = this._dropbar || query(dropbar, this.$el) || $(`+ .${this.clsDropbar}`, this.$el);
+          return dropbar ? dropbar : this._dropbar = $("<div></div>");
+        },
+        dropContainer(_, $el) {
+          return this.container || $el;
+        },
+        dropdowns({ clsDrop }, $el) {
+          var _a;
+          const dropdowns = $$(`.${clsDrop}`, $el);
+          if (this.dropContainer !== $el) {
+            for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
+              const target = (_a = this.getDropdown(el)) == null ? void 0 : _a.targetEl;
+              if (!includes(dropdowns, el) && target && within(target, this.$el)) {
+                dropdowns.push(el);
+              }
             }
-            dropbar = this._dropbar || query(dropbar, this.$el) || $(`+ .${this.clsDropbar}`, this.$el);
-            return dropbar ? dropbar : this._dropbar = $("<div></div>");
-          },
-          watch(dropbar) {
+          }
+          return dropdowns;
+        },
+        items({ selNavItem }, $el) {
+          return $$(selNavItem, $el);
+        }
+      },
+      watch: {
+        dropbar: {
+          handler(dropbar) {
             addClass(
               dropbar,
               "uk-dropbar",
@@ -3559,24 +3578,8 @@
           },
           immediate: true
         },
-        dropContainer(_, $el) {
-          return this.container || $el;
-        },
         dropdowns: {
-          get({ clsDrop }, $el) {
-            var _a;
-            const dropdowns = $$(`.${clsDrop}`, $el);
-            if (this.dropContainer !== $el) {
-              for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
-                const target = (_a = this.getDropdown(el)) == null ? void 0 : _a.targetEl;
-                if (!includes(dropdowns, el) && target && within(target, this.$el)) {
-                  dropdowns.push(el);
-                }
-              }
-            }
-            return dropdowns;
-          },
-          watch(dropdowns) {
+          handler(dropdowns) {
             this.$create(
               "drop",
               dropdowns.filter((el) => !this.getDropdown(el)),
@@ -3592,20 +3595,13 @@
           immediate: true
         },
         items: {
-          get({ selNavItem }, $el) {
-            return $$(selNavItem, $el);
-          },
-          watch(items) {
-            attr(children(this.$el), "role", "presentation");
-            attr(items, { tabindex: -1, role: "menuitem" });
+          handler(items) {
+            attr(items, "tabindex", -1);
             attr(items[0], "tabindex", 0);
           },
           immediate: true
         }
       },
-      connected() {
-        attr(this.$el, "role", "menubar");
-      },
       disconnected() {
         remove$1(this._dropbar);
         delete this._dropbar;
@@ -4117,13 +4113,8 @@
         row: true
       },
       computed: {
-        elements: {
-          get({ target }, $el) {
-            return $$(target, $el);
-          },
-          watch() {
-            this.$reset();
-          }
+        elements({ target }, $el) {
+          return $$(target, $el);
         }
       },
       observe: resize({
@@ -5147,12 +5138,9 @@
         selNavItem: ".uk-navbar-nav > li > a,a.uk-navbar-item,button.uk-navbar-item,.uk-navbar-item a,.uk-navbar-item button,.uk-navbar-toggle"
         // Simplify with :where() selector once browser target is Safari 14+
       },
-      computed: {
+      watch: {
         items: {
-          get({ selNavItem }, $el) {
-            return $$(selNavItem, $el);
-          },
-          watch(items) {
+          handler() {
             const justify = hasClass(this.$el, "uk-navbar-justify");
             for (const container of $$(
               ".uk-navbar-nav, .uk-navbar-left, .uk-navbar-right",
@@ -5167,10 +5155,6 @@
                 ).length : ""
               );
             }
-            attr($$(".uk-navbar-nav", this.$el), "role", "group");
-            attr($$(".uk-navbar-nav > *", this.$el), "role", "presentation");
-            attr(items, { tabindex: -1, role: "menuitem" });
-            attr(items[0], "tabindex", 0);
           },
           immediate: true
         }
@@ -5450,16 +5434,15 @@
         inViewClass: "uk-scrollspy-inview"
       }),
       computed: {
-        elements: {
-          get({ target }, $el) {
-            return target ? $$(target, $el) : [$el];
-          },
-          watch(elements) {
-            if (this.hidden) {
-              css(filter$1(elements, `:not(.${this.inViewClass})`), "opacity", 0);
-            }
-          },
-          immediate: true
+        elements({ target }, $el) {
+          return target ? $$(target, $el) : [$el];
+        }
+      },
+      watch: {
+        elements(elements) {
+          if (this.hidden) {
+            css(filter$1(elements, `:not(.${this.inViewClass})`), "opacity", 0);
+          }
         }
       },
       connected() {
@@ -5553,21 +5536,20 @@
         offset: 0
       },
       computed: {
-        links: {
-          get(_, $el) {
-            return $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el));
-          },
-          watch(links) {
-            if (this.scroll) {
-              this.$create("scroll", links, { offset: this.offset || 0 });
-            }
-          },
-          immediate: true
+        links(_, $el) {
+          return $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el));
         },
         elements({ closest: selector }) {
           return closest(this.links, selector || "*");
         }
       },
+      watch: {
+        links(links) {
+          if (this.scroll) {
+            this.$create("scroll", links, { offset: this.offset || 0 });
+          }
+        }
+      },
       observe: scroll$1(),
       update: [
         {
@@ -5990,47 +5972,42 @@
         swiping: true
       },
       computed: {
+        connects({ connect }, $el) {
+          return queryAll(connect, $el);
+        },
+        connectChildren() {
+          return this.connects.map((el) => children(el)).flat();
+        },
+        toggles({ toggle }, $el) {
+          return $$(toggle, $el);
+        },
+        children() {
+          return children(this.$el).filter(
+            (child) => this.toggles.some((toggle) => within(toggle, child))
+          );
+        }
+      },
+      watch: {
         connects: {
-          get({ connect }, $el) {
-            return queryAll(connect, $el);
-          },
-          watch(connects) {
+          handler(connects) {
             if (this.swiping) {
               css(connects, "touchAction", "pan-y pinch-zoom");
             }
             this.$emit();
           },
-          document: true,
-          immediate: true
-        },
-        connectChildren: {
-          get() {
-            return this.connects.map((el) => children(el)).flat();
-          },
-          watch() {
-            const index = this.index();
-            for (const el of this.connects) {
-              children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
-            }
-            this.$emit();
-          },
-          immediate: true
+          document: true
         },
-        toggles: {
-          get({ toggle }, $el) {
-            return $$(toggle, $el);
-          },
-          watch(toggles) {
-            this.$emit();
-            const active = this.index();
-            this.show(~active ? active : toggles[this.active] || toggles[0]);
-          },
-          immediate: true
+        connectChildren() {
+          const index = this.index();
+          for (const el of this.connects) {
+            children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+          }
+          this.$emit();
         },
-        children() {
-          return children(this.$el).filter(
-            (child) => this.toggles.some((toggle) => within(toggle, child))
-          );
+        toggles(toggles) {
+          this.$emit();
+          const active = this.index();
+          this.show(~active ? active : toggles[this.active] || toggles[0]);
         }
       },
       connected() {
@@ -6679,35 +6656,31 @@
         duration: 250
       },
       computed: {
-        toggles: {
-          get({ attrItem }, $el) {
-            return $$(`[${attrItem}],[data-${attrItem}]`, $el);
-          },
-          watch(toggles) {
-            this.updateState();
-            const actives = $$(this.selActive, this.$el);
-            for (const toggle of toggles) {
-              if (this.selActive !== false) {
-                toggleClass(toggle, this.cls, includes(actives, toggle));
-              }
-              const button = findButton(toggle);
-              if (isTag(button, "a")) {
-                attr(button, "role", "button");
-              }
-            }
-          },
-          immediate: true
+        toggles({ attrItem }, $el) {
+          return $$(`[${attrItem}],[data-${attrItem}]`, $el);
         },
-        children: {
-          get({ target }, $el) {
-            return $$(`${target} > *`, $el);
-          },
-          watch(list, prev) {
-            if (prev) {
-              this.updateState();
+        children({ target }, $el) {
+          return $$(`${target} > *`, $el);
+        }
+      },
+      watch: {
+        toggles(toggles) {
+          this.updateState();
+          const actives = $$(this.selActive, this.$el);
+          for (const toggle of toggles) {
+            if (this.selActive !== false) {
+              toggleClass(toggle, this.cls, includes(actives, toggle));
             }
-          },
-          immediate: true
+            const button = findButton(toggle);
+            if (isTag(button, "a")) {
+              attr(button, "role", "button");
+            }
+          }
+        },
+        children(list, prev) {
+          if (prev) {
+            this.updateState();
+          }
         }
       },
       events: {
@@ -6943,28 +6916,81 @@
         role: "region"
       },
       computed: {
-        nav: {
-          get({ selNav }, $el) {
-            return $(selNav, $el);
-          },
-          watch(nav, prev) {
-            attr(nav, "role", "tablist");
-            if (prev) {
-              this.$emit();
-            }
-          },
-          immediate: true
+        nav({ selNav }, $el) {
+          return $(selNav, $el);
+        },
+        navChildren() {
+          return children(this.nav);
         },
         selNavItem({ attrItem }) {
           return `[${attrItem}],[data-${attrItem}]`;
         },
-        navItems: {
-          get(_, $el) {
-            return $$(this.selNavItem, $el);
-          },
-          watch() {
+        navItems(_, $el) {
+          return $$(this.selNavItem, $el);
+        }
+      },
+      watch: {
+        nav(nav, prev) {
+          attr(nav, "role", "tablist");
+          if (prev) {
             this.$emit();
           }
+        },
+        list(list) {
+          attr(list, "role", "presentation");
+        },
+        navChildren(children2) {
+          attr(children2, "role", "presentation");
+        },
+        navItems(items) {
+          for (const el of items) {
+            const cmd = data(el, this.attrItem);
+            const button = $("a,button", el) || el;
+            let ariaLabel;
+            let ariaControls = null;
+            if (isNumeric(cmd)) {
+              const item = toNumber(cmd);
+              const slide = this.slides[item];
+              if (slide) {
+                if (!slide.id) {
+                  slide.id = generateId(this, slide, `-item-${cmd}`);
+                }
+                ariaControls = slide.id;
+              }
+              ariaLabel = this.t("slideX", toFloat(cmd) + 1);
+              attr(button, "role", "tab");
+            } else {
+              if (this.list) {
+                if (!this.list.id) {
+                  this.list.id = generateId(this, this.list, "-items");
+                }
+                ariaControls = this.list.id;
+              }
+              ariaLabel = this.t(cmd);
+            }
+            attr(button, {
+              "aria-controls": ariaControls,
+              "aria-label": attr(button, "aria-label") || ariaLabel
+            });
+          }
+        },
+        slides(slides) {
+          slides.forEach(
+            (slide, i) => attr(slide, {
+              role: this.nav ? "tabpanel" : "group",
+              "aria-label": this.t("slideLabel", i + 1, this.length),
+              "aria-roledescription": this.nav ? null : "slide"
+            })
+          );
+        },
+        length(length) {
+          const navLength = this.navChildren.length;
+          if (this.nav && length !== navLength) {
+            empty(this.nav);
+            for (let i = 0; i < length; i++) {
+              append(this.nav, `<li ${this.attrItem}="${i}"><a href></a></li>`);
+            }
+          }
         }
       },
       connected() {
@@ -6974,54 +7000,6 @@
         });
       },
       update: [
-        {
-          write() {
-            this.slides.forEach(
-              (slide, i) => attr(slide, {
-                role: this.nav ? "tabpanel" : "group",
-                "aria-label": this.t("slideLabel", i + 1, this.length),
-                "aria-roledescription": this.nav ? null : "slide"
-              })
-            );
-            if (this.nav && this.length !== this.nav.children.length) {
-              html(
-                this.nav,
-                this.slides.map((_, i) => `<li ${this.attrItem}="${i}"><a href></a></li>`).join("")
-              );
-            }
-            attr(children(this.nav).concat(this.list), "role", "presentation");
-            for (const el of this.navItems) {
-              const cmd = data(el, this.attrItem);
-              const button = $("a,button", el) || el;
-              let ariaLabel;
-              let ariaControls = null;
-              if (isNumeric(cmd)) {
-                const item = toNumber(cmd);
-                const slide = this.slides[item];
-                if (slide) {
-                  if (!slide.id) {
-                    slide.id = generateId(this, slide, `-item-${cmd}`);
-                  }
-                  ariaControls = slide.id;
-                }
-                ariaLabel = this.t("slideX", toFloat(cmd) + 1);
-                attr(button, "role", "tab");
-              } else {
-                if (this.list) {
-                  if (!this.list.id) {
-                    this.list.id = generateId(this, this.list, "-items");
-                  }
-                  ariaControls = this.list.id;
-                }
-                ariaLabel = this.t(cmd);
-              }
-              attr(button, {
-                "aria-controls": ariaControls,
-                "aria-label": attr(button, "aria-label") || ariaLabel
-              });
-            }
-          }
-        },
         {
           write() {
             this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));
@@ -7346,18 +7324,20 @@
         maxIndex() {
           return this.length - 1;
         },
-        slides: {
-          get() {
-            return children(this.list);
-          },
-          watch() {
-            this.$emit();
-          }
+        slides() {
+          return children(this.list);
         },
         length() {
           return this.slides.length;
         }
       },
+      watch: {
+        slides(slides, prev) {
+          if (prev) {
+            this.$emit();
+          }
+        }
+      },
       observe: resize(),
       methods: {
         show(index, force = false) {
@@ -7741,19 +7721,18 @@
       props: { toggle: String },
       data: { toggle: "a" },
       computed: {
-        toggles: {
-          get({ toggle }, $el) {
-            return $$(toggle, $el);
-          },
-          watch(toggles) {
-            this.hide();
-            for (const toggle of toggles) {
-              if (isTag(toggle, "a")) {
-                attr(toggle, "role", "button");
-              }
+        toggles({ toggle }, $el) {
+          return $$(toggle, $el);
+        }
+      },
+      watch: {
+        toggles(toggles) {
+          this.hide();
+          for (const toggle of toggles) {
+            if (isTag(toggle, "a")) {
+              attr(toggle, "role", "button");
             }
-          },
-          immediate: true
+          }
         }
       },
       disconnected() {
@@ -8887,24 +8866,20 @@
         items() {
           return children(this.target);
         },
-        isEmpty: {
-          get() {
-            return isEmpty(this.items);
-          },
-          watch(empty) {
-            toggleClass(this.target, this.clsEmpty, empty);
-          },
-          immediate: true
+        isEmpty() {
+          return isEmpty(this.items);
         },
-        handles: {
-          get({ handle }, el) {
-            return handle ? $$(handle, el) : this.items;
-          },
-          watch(handles, prev) {
-            css(prev, { touchAction: "", userSelect: "" });
-            css(handles, { touchAction: hasTouch ? "none" : "", userSelect: "none" });
-          },
-          immediate: true
+        handles({ handle }, el) {
+          return handle ? $$(handle, el) : this.items;
+        }
+      },
+      watch: {
+        isEmpty(empty) {
+          toggleClass(this.target, this.clsEmpty, empty);
+        },
+        handles(handles, prev) {
+          css(prev, { touchAction: "", userSelect: "" });
+          css(handles, { touchAction: hasTouch ? "none" : "", userSelect: "none" });
         }
       },
       update: {