@design.estate/dees-catalog 1.0.243 → 1.0.245

package/dist_watch/bundle.js

@@ -2060,7 +2060,7 @@ var init_Action = __esm({
       function Action2(scheduler, work) {
         return _super.call(this) || this;
       }
-      Action2.prototype.schedule = function(state9, delay) {
+      Action2.prototype.schedule = function(state10, delay) {
         if (delay === void 0) {
           delay = 0;
         }
@@ -2114,7 +2114,7 @@ var init_AsyncAction = __esm({
         _this.pending = false;
         return _this;
       }
-      AsyncAction2.prototype.schedule = function(state9, delay) {
+      AsyncAction2.prototype.schedule = function(state10, delay) {
         var _a;
         if (delay === void 0) {
           delay = 0;
@@ -2122,7 +2122,7 @@ var init_AsyncAction = __esm({
         if (this.closed) {
           return this;
         }
-        this.state = state9;
+        this.state = state10;
         var id = this.id;
         var scheduler = this.scheduler;
         if (id != null) {
@@ -2151,23 +2151,23 @@ var init_AsyncAction = __esm({
         }
         return void 0;
       };
-      AsyncAction2.prototype.execute = function(state9, delay) {
+      AsyncAction2.prototype.execute = function(state10, delay) {
         if (this.closed) {
           return new Error("executing a cancelled action");
         }
         this.pending = false;
-        var error = this._execute(state9, delay);
+        var error = this._execute(state10, delay);
         if (error) {
           return error;
         } else if (this.pending === false && this.id != null) {
           this.id = this.recycleAsyncId(this.scheduler, this.id, null);
         }
       };
-      AsyncAction2.prototype._execute = function(state9, _delay) {
+      AsyncAction2.prototype._execute = function(state10, _delay) {
         var errored = false;
         var errorValue;
         try {
-          this.work(state9);
+          this.work(state10);
         } catch (e8) {
           errored = true;
           errorValue = e8 ? e8 : new Error("Scheduled action threw falsy error");
@@ -2209,11 +2209,11 @@ var init_Scheduler = __esm({
         this.schedulerActionCtor = schedulerActionCtor;
         this.now = now2;
       }
-      Scheduler2.prototype.schedule = function(work, delay, state9) {
+      Scheduler2.prototype.schedule = function(work, delay, state10) {
         if (delay === void 0) {
           delay = 0;
         }
-        return new this.schedulerActionCtor(this, work).schedule(state9, delay);
+        return new this.schedulerActionCtor(this, work).schedule(state10, delay);
       };
       Scheduler2.now = dateTimestampProvider.now;
       return Scheduler2;
@@ -14835,18 +14835,18 @@ var init_util = __esm({
 
 // node_modules/.pnpm/broadcast-channel@3.7.0/node_modules/broadcast-channel/dist/es/methods/native.js
 function create(channelName) {
-  var state9 = {
+  var state10 = {
     messagesCallback: null,
     bc: new BroadcastChannel(channelName),
     subFns: []
     // subscriberFunctions
   };
-  state9.bc.onmessage = function(msg) {
-    if (state9.messagesCallback) {
-      state9.messagesCallback(msg.data);
+  state10.bc.onmessage = function(msg) {
+    if (state10.messagesCallback) {
+      state10.messagesCallback(msg.data);
     }
   };
-  return state9;
+  return state10;
 }
 function close(channelState) {
   channelState.bc.close();
@@ -15101,7 +15101,7 @@ function cleanOldMessages(db, ttl) {
 function create2(channelName, options) {
   options = fillOptionsWithDefaults(options);
   return createDatabase(channelName).then(function(db) {
-    var state9 = {
+    var state10 = {
       closed: false,
       lastCursorId: 0,
       channelName,
@@ -15120,54 +15120,54 @@ function create2(channelName, options) {
       db
     };
     db.onclose = function() {
-      state9.closed = true;
+      state10.closed = true;
       if (options.idb.onclose)
         options.idb.onclose();
     };
-    _readLoop(state9);
-    return state9;
+    _readLoop(state10);
+    return state10;
   });
 }
-function _readLoop(state9) {
-  if (state9.closed)
+function _readLoop(state10) {
+  if (state10.closed)
     return;
-  readNewMessages(state9).then(function() {
-    return sleep(state9.options.idb.fallbackInterval);
+  readNewMessages(state10).then(function() {
+    return sleep(state10.options.idb.fallbackInterval);
   }).then(function() {
-    return _readLoop(state9);
+    return _readLoop(state10);
   });
 }
-function _filterMessage(msgObj, state9) {
-  if (msgObj.uuid === state9.uuid)
+function _filterMessage(msgObj, state10) {
+  if (msgObj.uuid === state10.uuid)
     return false;
-  if (state9.eMIs.has(msgObj.id))
+  if (state10.eMIs.has(msgObj.id))
     return false;
-  if (msgObj.data.time < state9.messagesCallbackTime)
+  if (msgObj.data.time < state10.messagesCallbackTime)
     return false;
   return true;
 }
-function readNewMessages(state9) {
-  if (state9.closed)
+function readNewMessages(state10) {
+  if (state10.closed)
     return Promise.resolve();
-  if (!state9.messagesCallback)
+  if (!state10.messagesCallback)
     return Promise.resolve();
-  return getMessagesHigherThan(state9.db, state9.lastCursorId).then(function(newerMessages) {
+  return getMessagesHigherThan(state10.db, state10.lastCursorId).then(function(newerMessages) {
     var useMessages = newerMessages.filter(function(msgObj) {
       return !!msgObj;
     }).map(function(msgObj) {
-      if (msgObj.id > state9.lastCursorId) {
-        state9.lastCursorId = msgObj.id;
+      if (msgObj.id > state10.lastCursorId) {
+        state10.lastCursorId = msgObj.id;
       }
       return msgObj;
     }).filter(function(msgObj) {
-      return _filterMessage(msgObj, state9);
+      return _filterMessage(msgObj, state10);
     }).sort(function(msgObjA, msgObjB) {
       return msgObjA.time - msgObjB.time;
     });
     useMessages.forEach(function(msgObj) {
-      if (state9.messagesCallback) {
-        state9.eMIs.add(msgObj.id);
-        state9.messagesCallback(msgObj.data);
+      if (state10.messagesCallback) {
+        state10.eMIs.add(msgObj.id);
+        state10.messagesCallback(msgObj.data);
       }
     });
     return Promise.resolve();
@@ -15282,25 +15282,25 @@ function create3(channelName, options) {
   }
   var uuid = randomToken();
   var eMIs = new ObliviousSet(options.localstorage.removeTimeout);
-  var state9 = {
+  var state10 = {
     channelName,
     uuid,
     eMIs
     // emittedMessagesIds
   };
-  state9.listener = addStorageEventListener(channelName, function(msgObj) {
-    if (!state9.messagesCallback)
+  state10.listener = addStorageEventListener(channelName, function(msgObj) {
+    if (!state10.messagesCallback)
       return;
     if (msgObj.uuid === uuid)
       return;
     if (!msgObj.token || eMIs.has(msgObj.token))
       return;
-    if (msgObj.data.time && msgObj.data.time < state9.messagesCallbackTime)
+    if (msgObj.data.time && msgObj.data.time < state10.messagesCallbackTime)
       return;
     eMIs.add(msgObj.token);
-    state9.messagesCallback(msgObj.data);
+    state10.messagesCallback(msgObj.data);
   });
-  return state9;
+  return state10;
 }
 function close3(channelState) {
   removeStorageEventListener(channelState.listener);
@@ -15356,12 +15356,12 @@ var init_localstorage = __esm({
 
 // node_modules/.pnpm/broadcast-channel@3.7.0/node_modules/broadcast-channel/dist/es/methods/simulate.js
 function create4(channelName) {
-  var state9 = {
+  var state10 = {
     name: channelName,
     messagesCallback: null
   };
-  SIMULATE_CHANNELS.add(state9);
-  return state9;
+  SIMULATE_CHANNELS.add(state10);
+  return state10;
 }
 function close4(channelState) {
   SIMULATE_CHANNELS["delete"](channelState);
@@ -16157,11 +16157,11 @@ var init_smartrouter_classes_smartrouter = __esm({
       /**
        * Push route state to history stack
        */
-      async pushUrl(url2 = "/", state9 = {}) {
+      async pushUrl(url2 = "/", state10 = {}) {
         if (url2 !== window.location.pathname) {
-          window.history.pushState(state9, window.document.title, url2);
+          window.history.pushState(state10, window.document.title, url2);
         } else {
-          window.history.replaceState(state9, window.document.title, url2);
+          window.history.replaceState(state10, window.document.title, url2);
         }
         await this._handleRouteState();
       }
@@ -16592,7 +16592,7 @@ var init_smartstate_classes_statepart = __esm({
        */
       select(selectorFn) {
         if (!selectorFn) {
-          selectorFn = (state9) => state9;
+          selectorFn = (state10) => state10;
         }
         const mapped = this.state.pipe(dist_ts_exports2.rxjs.ops.startWith(this.getState()), dist_ts_exports2.rxjs.ops.map((stateArg) => {
           try {
@@ -19599,8 +19599,8 @@ var init_dees_element_classes_dees_element = __esm({
       }
       async connectedCallback() {
         super.connectedCallback();
-        const domtools9 = await this.domtoolsPromise;
-        this.themeSubscription = domtools9.themeManager.themeObservable.subscribe((goBrightArg) => {
+        const domtools10 = await this.domtoolsPromise;
+        this.themeSubscription = domtools10.themeManager.themeObservable.subscribe((goBrightArg) => {
           this.goBright = goBrightArg;
         });
         this.rxSubscriptions.push(this.themeSubscription);
@@ -20689,7 +20689,7 @@ var require_core = __commonJS({
     var HLJS = function(hljs) {
       const languages = /* @__PURE__ */ Object.create(null);
       const aliases = /* @__PURE__ */ Object.create(null);
-      const plugins8 = [];
+      const plugins9 = [];
       let SAFE_MODE = true;
       const LANGUAGE_NOT_FOUND = "Could not find the language '{}', did you forget to load/include a language module?";
       const PLAINTEXT_LANGUAGE = { disableAutodetect: true, name: "Plain text", contains: [] };
@@ -21263,17 +21263,17 @@ var require_core = __commonJS({
       }
       function addPlugin(plugin) {
         upgradePluginAPI(plugin);
-        plugins8.push(plugin);
+        plugins9.push(plugin);
       }
       function removePlugin(plugin) {
-        const index = plugins8.indexOf(plugin);
+        const index = plugins9.indexOf(plugin);
         if (index !== -1) {
-          plugins8.splice(index, 1);
+          plugins9.splice(index, 1);
         }
       }
       function fire(event, args) {
         const cb = event;
-        plugins8.forEach(function(plugin) {
+        plugins9.forEach(function(plugin) {
           if (plugin[cb]) {
             plugin[cb](args);
           }
@@ -69652,13 +69652,13 @@ var init_dees_input_typelist_demo = __esm({
 // ts_web/elements/dees-input-multitoggle.demo.ts
 var dees_input_multitoggle_demo_exports = {};
 __export(dees_input_multitoggle_demo_exports, {
-  demoFunc: () => demoFunc16
+  demoFunc: () => demoFunc17
 });
-var demoFunc16;
+var demoFunc17;
 var init_dees_input_multitoggle_demo = __esm({
   "ts_web/elements/dees-input-multitoggle.demo.ts"() {
     init_dist_ts26();
-    demoFunc16 = () => x`
+    demoFunc17 = () => x`
   <dees-input-multitoggle
     .options=${["option 1", "option 2", "a longer option with multiple words"]}
     .selectedOption=${"option 2"}
@@ -69901,7 +69901,7 @@ var WccSidebar = class WccSidebar2 extends DeesElement {
               <div
                 class="selectOption ${this.selectedItem === item ? "selected" : null}"
                 @click=${async () => {
-          const domtools9 = await dist_ts_exports25.DomTools.setupDomTools();
+          const domtools10 = await dist_ts_exports25.DomTools.setupDomTools();
           this.selectItem("page", pageName, item);
         }}
               >
@@ -69920,7 +69920,7 @@ var WccSidebar = class WccSidebar2 extends DeesElement {
               <div
                 class="selectOption ${this.selectedItem === item ? "selected" : null}"
                 @click=${async () => {
-          const domtools9 = await dist_ts_exports25.DomTools.setupDomTools();
+          const domtools10 = await dist_ts_exports25.DomTools.setupDomTools();
           this.selectItem("element", elementName, item);
         }}
               >
@@ -70584,6 +70584,7 @@ __export(elements_exports, {
   DeesMobilenavigation: () => DeesMobilenavigation,
   DeesModal: () => DeesModal,
   DeesPdf: () => DeesPdf,
+  DeesProgressbar: () => DeesProgressbar2,
   DeesSimpleAppDash: () => DeesSimpleAppDash,
   DeesSimpleLogin: () => DeesSimpleLogin,
   DeesSpeechbubble: () => DeesSpeechbubble,
@@ -70591,7 +70592,7 @@ __export(elements_exports, {
   DeesStepper: () => DeesStepper,
   DeesTable: () => DeesTable,
   DeesToast: () => DeesToast,
-  DeesUpdater: () => DeesUpdater2,
+  DeesUpdater: () => DeesUpdater,
   DeesWindowControls: () => DeesWindowControls,
   DeesWindowLayer: () => DeesWindowLayer,
   faIcons: () => faIcons
@@ -71058,7 +71059,7 @@ DeesChips = __decorateClass([
 // ts_web/elements/dees-contextmenu.demo.ts
 init_dist_ts26();
 
-// ts_web/elements/plugins.ts
+// ts_web/elements/00plugins.ts
 init_dist_ts();
 init_dist_ts23();
 
@@ -71203,19 +71204,19 @@ var DeesWindowLayer = class extends DeesElement {
     this.visible = !this.visible;
   }
   async show() {
-    const domtools9 = await this.domtoolsPromise;
-    await domtools9.convenience.smartdelay.delayFor(0);
+    const domtools10 = await this.domtoolsPromise;
+    await domtools10.convenience.smartdelay.delayFor(0);
     this.visible = true;
   }
   async hide() {
-    const domtools9 = await this.domtoolsPromise;
-    await domtools9.convenience.smartdelay.delayFor(0);
+    const domtools10 = await this.domtoolsPromise;
+    await domtools10.convenience.smartdelay.delayFor(0);
     this.visible = false;
   }
   async destroy() {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     await this.hide();
-    await domtools9.convenience.smartdelay.delayFor(300);
+    await domtools10.convenience.smartdelay.delayFor(300);
     this.remove();
   }
 };
@@ -72038,7 +72039,7 @@ var DeesInputText = class extends DeesElement {
     this.disabled = false;
   }
   async togglePasswordView() {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     this.showPasswordBool = !this.showPasswordBool;
     console.log(`this.showPasswordBool is: ${this.showPasswordBool}`);
   }
@@ -72818,8 +72819,8 @@ var DeesTable = class extends DeesElement {
     this.determineColumnWidths();
   }
   async determineColumnWidths() {
-    const domtools9 = await this.domtoolsPromise;
-    await domtools9.convenience.smartdelay.delayFor(0);
+    const domtools10 = await this.domtoolsPromise;
+    await domtools10.convenience.smartdelay.delayFor(0);
     const table = this.shadowRoot.querySelector("table");
     if (!table)
       return;
@@ -72862,7 +72863,7 @@ var DeesTable = class extends DeesElement {
     return actions;
   }
   async handleCellEditing(event, itemArg, key) {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     const target = event.target;
     const originalColor = target.style.color;
     target.style.color = "transparent";
@@ -74741,9 +74742,9 @@ var DeesFormSubmit = class extends DeesElement {
     parentElement.gatherAndDispatch();
   }
   async focus() {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     if (!this.disabled) {
-      domtools9.convenience.smartdelay.delayFor(0);
+      domtools10.convenience.smartdelay.delayFor(0);
       this.submit();
     }
   }
@@ -77465,6 +77466,11 @@ var faMinus = {
   iconName: "minus",
   icon: [448, 512, [8211, 8722, 10134, "subtract"], "f068", "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"]
 };
+var faGear = {
+  prefix: "fas",
+  iconName: "gear",
+  icon: [512, 512, [9881, "cog"], "f013", "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"]
+};
 var faSun2 = {
   prefix: "fas",
   iconName: "sun",
@@ -77624,6 +77630,7 @@ var faIcons = {
   eyeSlash: faEyeSlash,
   fileInvoice: faFileInvoice,
   fileInvoiceDoller: faFileInvoiceDollar,
+  gear: faGear,
   grip: faGrip,
   message: faMessage,
   messageSolid: faMessage2,
@@ -78380,6 +78387,108 @@ DeesInputPhone = __decorateClass([
   t4("dees-input-phone")
 ], DeesInputPhone);
 
+// ts_web/elements/00colors.ts
+var dark = {
+  blue: "#0050b9",
+  blueActive: "#0069f2",
+  text: "#ffffff"
+};
+var bright = {
+  blue: "#0050b9",
+  blueActive: "#0069f2",
+  text: "#333333"
+};
+
+// ts_web/elements/dees-progressbar.demo.ts
+init_dist_ts26();
+var demoFunc15 = () => {
+  return x`
+    <dees-progressbar
+      .percentage=${50}
+    ></dees-progressbar>
+  `;
+};
+
+// ts_web/elements/dees-progressbar.ts
+init_dist_ts26();
+init_dist_ts25();
+var DeesProgressbar2 = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.percentage = 0;
+  }
+  render() {
+    return x`
+      <div class="progressBarContainer">
+        <div class="progressBar">
+          <div class="progressBarFill"></div>
+          <div class="progressText">
+            ${this.percentage}%
+          <div>
+        </div>
+      </div>
+    `;
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this.updateComplete.then(() => {
+      this.updatePercentage();
+    });
+  }
+  async updatePercentage() {
+    const progressBarFill = this.shadowRoot.querySelector(".progressBarFill");
+    progressBarFill.style.width = `${this.percentage}%`;
+  }
+  updated() {
+    this.updatePercentage();
+  }
+};
+// STATIC
+DeesProgressbar2.demo = demoFunc15;
+DeesProgressbar2.styles = [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        color: ${cssManager.bdTheme(bright.text, dark.text)};
+      }
+      .progressBarContainer {
+        padding: 8px;
+        min-width: 200px;
+      }
+
+      .progressBar {
+        background: ${cssManager.bdTheme("#eeeeeb", "#444")};
+        height: 8px;
+        width: 100%;
+        border-radius: 4px;
+        border-top: 0.5px solid ${cssManager.bdTheme("none", "#555")};
+      }
+
+      .progressBarFill {
+        background: ${cssManager.bdTheme(dark.blueActive, bright.blueActive)};
+        height: 8px;
+        margin-top: -0.5px;
+        transition: 0.2s width;
+        border-radius: 4px;
+        width: 0px;
+        border-top: 0.5 solid ${cssManager.bdTheme("none", "#398fff")};
+      }
+
+      .progressText {
+        padding: 8px;
+        text-align: center;
+      }
+    `
+];
+__decorateClass([
+  n4({
+    type: Number
+  })
+], DeesProgressbar2.prototype, "percentage", 2);
+DeesProgressbar2 = __decorateClass([
+  t4("dees-progressbar")
+], DeesProgressbar2);
+
 // ts_web/elements/dees-mobilenavigation.ts
 init_dist_ts26();
 var DeesMobilenavigation = class extends DeesElement {
@@ -78431,7 +78540,7 @@ var DeesMobilenavigation = class extends DeesElement {
    * inits the show
    */
   async show() {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     const main = this.shadowRoot.querySelector(".main");
     if (!this.windowLayer) {
       this.windowLayer = new DeesWindowLayer();
@@ -78441,16 +78550,16 @@ var DeesMobilenavigation = class extends DeesElement {
       });
     }
     document.body.append(this.windowLayer);
-    await domtools9.convenience.smartdelay.delayFor(0);
+    await domtools10.convenience.smartdelay.delayFor(0);
     this.windowLayer.show();
-    await domtools9.convenience.smartdelay.delayFor(0);
+    await domtools10.convenience.smartdelay.delayFor(0);
     main.classList.add("show");
   }
   /**
    * inits the hide function
    */
   async hide() {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     const main = this.shadowRoot.querySelector(".main");
     main.classList.remove("show");
     this.windowLayer.hide();
@@ -78543,7 +78652,7 @@ DeesMobilenavigation = __decorateClass([
 
 // ts_web/elements/dees-modal.demo.ts
 init_dist_ts26();
-var demoFunc15 = () => x`
+var demoFunc16 = () => x`
   <dees-button @click=${() => {
   DeesModal.createAndShow({
     heading: "This is a heading",
@@ -78628,8 +78737,8 @@ var DeesModal = class extends DeesElement {
   }
   async firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    const domtools9 = await this.domtoolsPromise;
-    await domtools9.convenience.smartdelay.delayFor(30);
+    const domtools10 = await this.domtoolsPromise;
+    await domtools10.convenience.smartdelay.delayFor(30);
     const modal = this.shadowRoot.querySelector(".modal");
     modal.classList.add("show");
   }
@@ -78641,16 +78750,16 @@ var DeesModal = class extends DeesElement {
     }
   }
   async destroy() {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     const modal = this.shadowRoot.querySelector(".modal");
     modal.classList.add("predestroy");
-    await domtools9.convenience.smartdelay.delayFor(200);
+    await domtools10.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();
   }
 };
 // STATIC
-DeesModal.demo = demoFunc15;
+DeesModal.demo = demoFunc16;
 DeesModal.styles = [
   cssManager.defaultStyles,
   i`
@@ -78745,7 +78854,7 @@ DeesModal = __decorateClass([
 
 // ts_web/elements/dees-input-multitoggle.ts
 init_dist_ts26();
-var { demoFunc: demoFunc17 } = await Promise.resolve().then(() => (init_dees_input_multitoggle_demo(), dees_input_multitoggle_demo_exports));
+var { demoFunc: demoFunc18 } = await Promise.resolve().then(() => (init_dees_input_multitoggle_demo(), dees_input_multitoggle_demo_exports));
 var DeesInputMultitoggle = class extends DeesElement {
   constructor() {
     super(...arguments);
@@ -78790,7 +78899,7 @@ var DeesInputMultitoggle = class extends DeesElement {
     }, 100);
   }
 };
-DeesInputMultitoggle.demo = demoFunc17;
+DeesInputMultitoggle.demo = demoFunc18;
 DeesInputMultitoggle.styles = [
   cssManager.defaultStyles,
   i`
@@ -78944,7 +79053,7 @@ DeesPdf = __decorateClass([
 
 // ts_web/elements/dees-simple-appdash.demo.ts
 init_dist_ts26();
-var demoFunc18 = () => x`
+var demoFunc19 = () => x`
   <dees-simple-appdash>Hello there</dees-simple-appdash>
 `;
 
@@ -78966,12 +79075,12 @@ var DeesSimpleAppDash = class extends DeesElement {
     `;
   }
   async firstUpdated(_changedProperties) {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
   }
 };
 // STATIC
-DeesSimpleAppDash.demo = demoFunc18;
+DeesSimpleAppDash.demo = demoFunc19;
 DeesSimpleAppDash.styles = [
   cssManager.defaultStyles,
   i`
@@ -79009,7 +79118,7 @@ DeesSimpleAppDash = __decorateClass([
 
 // ts_web/elements/dees-simple-login.demo.ts
 init_dist_ts26();
-var demoFunc19 = () => x` <dees-simple-login name="someapp"> Hello there </dees-simple-login> `;
+var demoFunc20 = () => x` <dees-simple-login name="someapp"> Hello there </dees-simple-login> `;
 
 // ts_web/elements/dees-simple-login.ts
 init_dist_ts26();
@@ -79036,7 +79145,7 @@ var DeesSimpleLogin = class extends DeesElement {
     `;
   }
   async firstUpdated(_changedProperties) {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
     const form = this.shadowRoot.querySelector("dees-form");
     await form.readyDeferred.promise;
@@ -79051,7 +79160,7 @@ var DeesSimpleLogin = class extends DeesElement {
    * allows switching to slotted content
    */
   async switchToSlottedContent() {
-    const domtools9 = await this.domtoolsPromise;
+    const domtools10 = await this.domtoolsPromise;
     const loginDiv = this.shadowRoot.querySelector(".login");
     const loginContainerDiv = this.shadowRoot.querySelector(".loginContainer");
     const slotContainerDiv = this.shadowRoot.querySelector(".slotContainer");
@@ -79059,15 +79168,15 @@ var DeesSimpleLogin = class extends DeesElement {
     loginDiv.style.transform = "translateY(20px)";
     loginContainerDiv.style.pointerEvents = "none";
     slotContainerDiv.style.transform = "translateY(20px)";
-    await domtools9.convenience.smartdelay.delayFor(300);
+    await domtools10.convenience.smartdelay.delayFor(300);
     slotContainerDiv.style.opacity = "1";
     slotContainerDiv.style.transform = "translateY(0px)";
-    await domtools9.convenience.smartdelay.delayFor(300);
+    await domtools10.convenience.smartdelay.delayFor(300);
     slotContainerDiv.style.pointerEvents = "all";
   }
 };
 // STATIC
-DeesSimpleLogin.demo = demoFunc19;
+DeesSimpleLogin.demo = demoFunc20;
 DeesSimpleLogin.styles = [
   cssManager.defaultStyles,
   i`
@@ -79591,7 +79700,7 @@ init_dist_ts25();
 
 // ts_web/elements/dees-toast.demo.ts
 init_dist_ts26();
-var demoFunc20 = async () => {
+var demoFunc21 = async () => {
   return x`<dees-toast></dees-toast>`;
 };
 
@@ -79609,7 +79718,7 @@ var DeesToast = class extends DeesElement {
     `;
   }
 };
-DeesToast.demo = demoFunc20;
+DeesToast.demo = demoFunc21;
 DeesToast = __decorateClass([
   t4("dees-toast")
 ], DeesToast);
@@ -79619,13 +79728,20 @@ init_dist_ts26();
 
 // ts_web/elements/dees-updater.demo.ts
 init_dist_ts26();
-var demoFunc21 = () => {
+var demoFunc22 = async () => {
+  const updater = await DeesUpdater.createAndShow();
+  setTimeout(async () => {
+    await updater.destroy();
+  }, 1e4);
 };
 
 // ts_web/elements/dees-updater.ts
 init_dist_ts26();
-var DeesUpdater2 = class extends DeesElement {
+var DeesUpdater = class extends DeesElement {
   static async createAndShow() {
+    const updater = new DeesUpdater();
+    document.body.appendChild(updater);
+    return updater;
   }
   constructor() {
     super();
@@ -79633,72 +79749,81 @@ var DeesUpdater2 = class extends DeesElement {
   }
   render() {
     return x`
-      <dees-windowlayer @clicked="${this.windowLayerClicked}" .options=${{
+      <dees-windowlayer
+        @clicked="${this.windowLayerClicked}"
+        .options=${{
       blur: true
-    }}>
+    }}
+      >
         <div class="modalContainer">
           <div class="headingContainer">
             <dees-spinner .size=${60}></dees-spinner>
             <h1>Updating the application...</h1>
           </div>
+          <div class="progress">
+            <dees-progressbar .progress=${0.5}></dees-progressbar>
+          </div>
           <div class="buttonContainer">
             <dees-button>More info</dees-button>
             <dees-button>Changelog</dees-button>
           </div>
-        </div>
-      </dees-windowlayer>>
+        </div> </dees-windowlayer
+      >>
     `;
   }
+  async destroy() {
+    this.parentElement.removeChild(this);
+  }
   windowLayerClicked() {
   }
 };
-DeesUpdater2.demo = demoFunc21;
-DeesUpdater2.styles = [
+DeesUpdater.demo = demoFunc22;
+DeesUpdater.styles = [
   cssManager.defaultStyles,
   i`
       .modalContainer {
-          will-change: transform;
-          position: relative;
-          background: ${cssManager.bdTheme("#eeeeeb", "#222")};
-          max-width: 800px;
-          border-radius: 8px;
-          border-top: 1px solid ${cssManager.bdTheme("#eeeeeb", "#333")};
-        }
+        will-change: transform;
+        position: relative;
+        background: ${cssManager.bdTheme("#eeeeeb", "#222")};
+        max-width: 800px;
+        border-radius: 8px;
+        border-top: 1px solid ${cssManager.bdTheme("#eeeeeb", "#333")};
+      }
 
-        .headingContainer {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 40px 40px;
-        }
+      .headingContainer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 40px 40px;
+      }
 
-        h1 {
-          margin: none;
-          font-size: 20px;
-          color: ${cssManager.bdTheme("#333", "#fff")};
-          margin-left: 20px;
-          font-weight: normal;
-        }
+      h1 {
+        margin: none;
+        font-size: 20px;
+        color: ${cssManager.bdTheme("#333", "#fff")};
+        margin-left: 20px;
+        font-weight: normal;
+      }
 
-        .buttonContainer {
-          display: grid;
-          grid-template-columns: 50% 50%;
-        }
+      .buttonContainer {
+        display: grid;
+        grid-template-columns: 50% 50%;
+      }
     `
 ];
 __decorateClass([
   n4({
     type: String
   })
-], DeesUpdater2.prototype, "currentVersion", 2);
+], DeesUpdater.prototype, "currentVersion", 2);
 __decorateClass([
   n4({
     type: String
   })
-], DeesUpdater2.prototype, "updatedVersion", 2);
-DeesUpdater2 = __decorateClass([
+], DeesUpdater.prototype, "updatedVersion", 2);
+DeesUpdater = __decorateClass([
   t4("dees-updater")
-], DeesUpdater2);
+], DeesUpdater);
 
 // ts_web/elements/dees-windowcontrols.ts
 init_dist_ts26();