@design.estate/dees-wcctools 3.4.0 → 3.5.1

package/dist_watch/bundle.js

@@ -5607,7 +5607,7 @@ var require_sweet_scroll = __commonJS({
               hash: null
             };
             this.loop = function(time) {
-              var _a17 = _this, $el = _a17.$el, ctx = _a17.ctx;
+              var _a23 = _this, $el = _a23.$el, ctx = _a23.ctx;
               if (!ctx.start) {
                 ctx.start = time;
               }
@@ -5702,7 +5702,7 @@ var require_sweet_scroll = __commonJS({
             if (!canUseDOM) {
               return;
             }
-            var _a17 = this, $el = _a17.$el, ctx = _a17.ctx, currentOptions = _a17.opts;
+            var _a23 = this, $el = _a23.$el, ctx = _a23.ctx, currentOptions = _a23.opts;
             var $trigger = ctx.$trigger;
             var opts = __assign2({}, currentOptions, options || {});
             var optOffset = opts.offset, vertical = opts.vertical, horizontal = opts.horizontal;
@@ -5769,7 +5769,7 @@ var require_sweet_scroll = __commonJS({
             if (gotoEnd === void 0) {
               gotoEnd = false;
             }
-            var _a17 = this, $el = _a17.$el, ctx = _a17.ctx;
+            var _a23 = this, $el = _a23.$el, ctx = _a23.ctx;
             var pos = ctx.pos;
             if (!$el || !ctx.progress) {
               return;
@@ -5825,7 +5825,7 @@ var require_sweet_scroll = __commonJS({
             ctx.id = SweetScroll4.raf(this.loop);
           };
           SweetScroll4.prototype.complete = function() {
-            var _a17 = this, $el = _a17.$el, ctx = _a17.ctx;
+            var _a23 = this, $el = _a23.$el, ctx = _a23.ctx;
             var hash = ctx.hash, cancel = ctx.cancel, opts = ctx.opts, pos = ctx.pos, $trigger = ctx.$trigger;
             if (!$el || !opts) {
               return;
@@ -5851,18 +5851,18 @@ var require_sweet_scroll = __commonJS({
             for (var _i = 2; _i < arguments.length; _i++) {
               args[_i - 2] = arguments[_i];
             }
-            var _a17;
+            var _a23;
             var callback = options[type5];
             var callbackResult;
             var methodResult;
             if (isFunction2(callback)) {
               callbackResult = callback.apply(this, args.concat([this]));
             }
-            methodResult = (_a17 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a17, args);
+            methodResult = (_a23 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a23, args);
             return callbackResult !== void 0 ? callbackResult : methodResult;
           };
           SweetScroll4.prototype.bind = function(click, stop) {
-            var _a17 = this, $el = _a17.$el, opts = _a17.ctx.opts;
+            var _a23 = this, $el = _a23.$el, opts = _a23.ctx.opts;
             if ($el) {
               if (click) {
                 addEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -5873,7 +5873,7 @@ var require_sweet_scroll = __commonJS({
             }
           };
           SweetScroll4.prototype.unbind = function(click, stop) {
-            var _a17 = this, $el = _a17.$el, opts = _a17.ctx.opts;
+            var _a23 = this, $el = _a23.$el, opts = _a23.ctx.opts;
             if ($el) {
               if (click) {
                 removeEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -7105,7 +7105,7 @@ var Subscription = (function() {
     this._finalizers = null;
   }
   Subscription2.prototype.unsubscribe = function() {
-    var e_1, _a17, e_2, _b2;
+    var e_1, _a23, e_2, _b2;
     var errors;
     if (!this.closed) {
       this.closed = true;
@@ -7122,7 +7122,7 @@ var Subscription = (function() {
             e_1 = { error: e_1_1 };
           } finally {
             try {
-              if (_parentage_1_1 && !_parentage_1_1.done && (_a17 = _parentage_1.return)) _a17.call(_parentage_1);
+              if (_parentage_1_1 && !_parentage_1_1.done && (_a23 = _parentage_1.return)) _a23.call(_parentage_1);
             } finally {
               if (e_1) throw e_1.error;
             }
@@ -7172,7 +7172,7 @@ var Subscription = (function() {
     }
   };
   Subscription2.prototype.add = function(teardown) {
-    var _a17;
+    var _a23;
     if (teardown && teardown !== this) {
       if (this.closed) {
         execFinalizer(teardown);
@@ -7183,7 +7183,7 @@ var Subscription = (function() {
           }
           teardown._addParent(this);
         }
-        (this._finalizers = (_a17 = this._finalizers) !== null && _a17 !== void 0 ? _a17 : []).push(teardown);
+        (this._finalizers = (_a23 = this._finalizers) !== null && _a23 !== void 0 ? _a23 : []).push(teardown);
       }
     }
   };
@@ -7302,7 +7302,7 @@ function errorContext(cb) {
     }
     cb();
     if (isRoot) {
-      var _a17 = context, errorThrown = _a17.errorThrown, error = _a17.error;
+      var _a23 = context, errorThrown = _a23.errorThrown, error = _a23.error;
       context = null;
       if (errorThrown) {
         throw error;
@@ -7533,7 +7533,7 @@ var Observable = (function() {
     var _this = this;
     var subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
     errorContext(function() {
-      var _a17 = _this, operator = _a17.operator, source = _a17.source;
+      var _a23 = _this, operator = _a23.operator, source = _a23.source;
       subscriber.add(operator ? operator.call(subscriber, source) : source ? _this._subscribe(subscriber) : _this._trySubscribe(subscriber));
     });
     return subscriber;
@@ -7565,8 +7565,8 @@ var Observable = (function() {
     });
   };
   Observable2.prototype._subscribe = function(subscriber) {
-    var _a17;
-    return (_a17 = this.source) === null || _a17 === void 0 ? void 0 : _a17.subscribe(subscriber);
+    var _a23;
+    return (_a23 = this.source) === null || _a23 === void 0 ? void 0 : _a23.subscribe(subscriber);
   };
   Observable2.prototype[observable] = function() {
     return this;
@@ -7598,8 +7598,8 @@ var Observable = (function() {
   return Observable2;
 })();
 function getPromiseCtor(promiseCtor) {
-  var _a17;
-  return (_a17 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a17 !== void 0 ? _a17 : Promise;
+  var _a23;
+  return (_a23 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a23 !== void 0 ? _a23 : Promise;
 }
 function isObserver(value2) {
   return value2 && isFunction(value2.next) && isFunction(value2.error) && isFunction(value2.complete);
@@ -7665,11 +7665,11 @@ var OperatorSubscriber = (function(_super) {
     return _this;
   }
   OperatorSubscriber2.prototype.unsubscribe = function() {
-    var _a17;
+    var _a23;
     if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {
       var closed_1 = this.closed;
       _super.prototype.unsubscribe.call(this);
-      !closed_1 && ((_a17 = this.onFinalize) === null || _a17 === void 0 ? void 0 : _a17.call(this));
+      !closed_1 && ((_a23 = this.onFinalize) === null || _a23 === void 0 ? void 0 : _a23.call(this));
     }
   };
   return OperatorSubscriber2;
@@ -7710,7 +7710,7 @@ var Subject = (function(_super) {
   Subject2.prototype.next = function(value2) {
     var _this = this;
     errorContext(function() {
-      var e_1, _a17;
+      var e_1, _a23;
       _this._throwIfClosed();
       if (!_this.isStopped) {
         if (!_this.currentObservers) {
@@ -7725,7 +7725,7 @@ var Subject = (function(_super) {
           e_1 = { error: e_1_1 };
         } finally {
           try {
-            if (_c2 && !_c2.done && (_a17 = _b2.return)) _a17.call(_b2);
+            if (_c2 && !_c2.done && (_a23 = _b2.return)) _a23.call(_b2);
           } finally {
             if (e_1) throw e_1.error;
           }
@@ -7766,8 +7766,8 @@ var Subject = (function(_super) {
   };
   Object.defineProperty(Subject2.prototype, "observed", {
     get: function() {
-      var _a17;
-      return ((_a17 = this.observers) === null || _a17 === void 0 ? void 0 : _a17.length) > 0;
+      var _a23;
+      return ((_a23 = this.observers) === null || _a23 === void 0 ? void 0 : _a23.length) > 0;
     },
     enumerable: false,
     configurable: true
@@ -7783,7 +7783,7 @@ var Subject = (function(_super) {
   };
   Subject2.prototype._innerSubscribe = function(subscriber) {
     var _this = this;
-    var _a17 = this, hasError = _a17.hasError, isStopped = _a17.isStopped, observers = _a17.observers;
+    var _a23 = this, hasError = _a23.hasError, isStopped = _a23.isStopped, observers = _a23.observers;
     if (hasError || isStopped) {
       return EMPTY_SUBSCRIPTION;
     }
@@ -7795,7 +7795,7 @@ var Subject = (function(_super) {
     });
   };
   Subject2.prototype._checkFinalizedStatuses = function(subscriber) {
-    var _a17 = this, hasError = _a17.hasError, thrownError = _a17.thrownError, isStopped = _a17.isStopped;
+    var _a23 = this, hasError = _a23.hasError, thrownError = _a23.thrownError, isStopped = _a23.isStopped;
     if (hasError) {
       subscriber.error(thrownError);
     } else if (isStopped) {
@@ -7821,20 +7821,20 @@ var AnonymousSubject = (function(_super) {
     return _this;
   }
   AnonymousSubject2.prototype.next = function(value2) {
-    var _a17, _b2;
-    (_b2 = (_a17 = this.destination) === null || _a17 === void 0 ? void 0 : _a17.next) === null || _b2 === void 0 ? void 0 : _b2.call(_a17, value2);
+    var _a23, _b2;
+    (_b2 = (_a23 = this.destination) === null || _a23 === void 0 ? void 0 : _a23.next) === null || _b2 === void 0 ? void 0 : _b2.call(_a23, value2);
   };
   AnonymousSubject2.prototype.error = function(err) {
-    var _a17, _b2;
-    (_b2 = (_a17 = this.destination) === null || _a17 === void 0 ? void 0 : _a17.error) === null || _b2 === void 0 ? void 0 : _b2.call(_a17, err);
+    var _a23, _b2;
+    (_b2 = (_a23 = this.destination) === null || _a23 === void 0 ? void 0 : _a23.error) === null || _b2 === void 0 ? void 0 : _b2.call(_a23, err);
   };
   AnonymousSubject2.prototype.complete = function() {
-    var _a17, _b2;
-    (_b2 = (_a17 = this.destination) === null || _a17 === void 0 ? void 0 : _a17.complete) === null || _b2 === void 0 ? void 0 : _b2.call(_a17);
+    var _a23, _b2;
+    (_b2 = (_a23 = this.destination) === null || _a23 === void 0 ? void 0 : _a23.complete) === null || _b2 === void 0 ? void 0 : _b2.call(_a23);
   };
   AnonymousSubject2.prototype._subscribe = function(subscriber) {
-    var _a17, _b2;
-    return (_b2 = (_a17 = this.source) === null || _a17 === void 0 ? void 0 : _a17.subscribe(subscriber)) !== null && _b2 !== void 0 ? _b2 : EMPTY_SUBSCRIPTION;
+    var _a23, _b2;
+    return (_b2 = (_a23 = this.source) === null || _a23 === void 0 ? void 0 : _a23.subscribe(subscriber)) !== null && _b2 !== void 0 ? _b2 : EMPTY_SUBSCRIPTION;
   };
   return AnonymousSubject2;
 })(Subject);
@@ -7872,7 +7872,7 @@ var ReplaySubject = (function(_super) {
     return _this;
   }
   ReplaySubject2.prototype.next = function(value2) {
-    var _a17 = this, isStopped = _a17.isStopped, _buffer = _a17._buffer, _infiniteTimeWindow = _a17._infiniteTimeWindow, _timestampProvider = _a17._timestampProvider, _windowTime = _a17._windowTime;
+    var _a23 = this, isStopped = _a23.isStopped, _buffer = _a23._buffer, _infiniteTimeWindow = _a23._infiniteTimeWindow, _timestampProvider = _a23._timestampProvider, _windowTime = _a23._windowTime;
     if (!isStopped) {
       _buffer.push(value2);
       !_infiniteTimeWindow && _buffer.push(_timestampProvider.now() + _windowTime);
@@ -7884,7 +7884,7 @@ var ReplaySubject = (function(_super) {
     this._throwIfClosed();
     this._trimBuffer();
     var subscription = this._innerSubscribe(subscriber);
-    var _a17 = this, _infiniteTimeWindow = _a17._infiniteTimeWindow, _buffer = _a17._buffer;
+    var _a23 = this, _infiniteTimeWindow = _a23._infiniteTimeWindow, _buffer = _a23._buffer;
     var copy = _buffer.slice();
     for (var i9 = 0; i9 < copy.length && !subscriber.closed; i9 += _infiniteTimeWindow ? 1 : 2) {
       subscriber.next(copy[i9]);
@@ -7893,7 +7893,7 @@ var ReplaySubject = (function(_super) {
     return subscription;
   };
   ReplaySubject2.prototype._trimBuffer = function() {
-    var _a17 = this, _bufferSize = _a17._bufferSize, _timestampProvider = _a17._timestampProvider, _buffer = _a17._buffer, _infiniteTimeWindow = _a17._infiniteTimeWindow;
+    var _a23 = this, _bufferSize = _a23._bufferSize, _timestampProvider = _a23._timestampProvider, _buffer = _a23._buffer, _infiniteTimeWindow = _a23._infiniteTimeWindow;
     var adjustedBufferSize = (_infiniteTimeWindow ? 1 : 2) * _bufferSize;
     _bufferSize < Infinity && adjustedBufferSize < _buffer.length && _buffer.splice(0, _buffer.length - adjustedBufferSize);
     if (!_infiniteTimeWindow) {
@@ -7954,7 +7954,7 @@ var AsyncAction = (function(_super) {
     return _this;
   }
   AsyncAction2.prototype.schedule = function(state, delay2) {
-    var _a17;
+    var _a23;
     if (delay2 === void 0) {
       delay2 = 0;
     }
@@ -7969,7 +7969,7 @@ var AsyncAction = (function(_super) {
     }
     this.pending = true;
     this.delay = delay2;
-    this.id = (_a17 = this.id) !== null && _a17 !== void 0 ? _a17 : this.requestAsyncId(scheduler, this.id, delay2);
+    this.id = (_a23 = this.id) !== null && _a23 !== void 0 ? _a23 : this.requestAsyncId(scheduler, this.id, delay2);
     return this;
   };
   AsyncAction2.prototype.requestAsyncId = function(scheduler, _id, delay2) {
@@ -8018,7 +8018,7 @@ var AsyncAction = (function(_super) {
   };
   AsyncAction2.prototype.unsubscribe = function() {
     if (!this.closed) {
-      var _a17 = this, id = _a17.id, scheduler = _a17.scheduler;
+      var _a23 = this, id = _a23.id, scheduler = _a23.scheduler;
       var actions = scheduler.actions;
       this.work = this.state = this.scheduler = null;
       this.pending = false;
@@ -8153,7 +8153,7 @@ function isIterable(input) {
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/util/isReadableStreamLike.js
 function readableStreamLikeToAsyncGenerator(readableStream) {
   return __asyncGenerator(this, arguments, function readableStreamLikeToAsyncGenerator_1() {
-    var reader, _a17, value2, done;
+    var reader, _a23, value2, done;
     return __generator(this, function(_b2) {
       switch (_b2.label) {
         case 0:
@@ -8166,7 +8166,7 @@ function readableStreamLikeToAsyncGenerator(readableStream) {
           if (false) return [3, 8];
           return [4, __await(reader.read())];
         case 3:
-          _a17 = _b2.sent(), value2 = _a17.value, done = _a17.done;
+          _a23 = _b2.sent(), value2 = _a23.value, done = _a23.done;
           if (!done) return [3, 5];
           return [4, __await(void 0)];
         case 4:
@@ -8251,7 +8251,7 @@ function fromPromise(promise) {
 }
 function fromIterable(iterable) {
   return new Observable(function(subscriber) {
-    var e_1, _a17;
+    var e_1, _a23;
     try {
       for (var iterable_1 = __values(iterable), iterable_1_1 = iterable_1.next(); !iterable_1_1.done; iterable_1_1 = iterable_1.next()) {
         var value2 = iterable_1_1.value;
@@ -8264,7 +8264,7 @@ function fromIterable(iterable) {
       e_1 = { error: e_1_1 };
     } finally {
       try {
-        if (iterable_1_1 && !iterable_1_1.done && (_a17 = iterable_1.return)) _a17.call(iterable_1);
+        if (iterable_1_1 && !iterable_1_1.done && (_a23 = iterable_1.return)) _a23.call(iterable_1);
       } finally {
         if (e_1) throw e_1.error;
       }
@@ -8284,7 +8284,7 @@ function fromReadableStreamLike(readableStream) {
 }
 function process2(asyncIterable, subscriber) {
   var asyncIterable_1, asyncIterable_1_1;
-  var e_2, _a17;
+  var e_2, _a23;
   return __awaiter(this, void 0, void 0, function() {
     var value2, e_2_1;
     return __generator(this, function(_b2) {
@@ -8313,8 +8313,8 @@ function process2(asyncIterable, subscriber) {
           return [3, 11];
         case 6:
           _b2.trys.push([6, , 9, 10]);
-          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a17 = asyncIterable_1.return))) return [3, 8];
-          return [4, _a17.call(asyncIterable_1)];
+          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a23 = asyncIterable_1.return))) return [3, 8];
+          return [4, _a23.call(asyncIterable_1)];
         case 7:
           _b2.sent();
           _b2.label = 8;
@@ -8423,11 +8423,11 @@ function scheduleIterable(input, scheduler) {
     executeSchedule(subscriber, scheduler, function() {
       iterator2 = input[iterator]();
       executeSchedule(subscriber, scheduler, function() {
-        var _a17;
+        var _a23;
         var value2;
         var done;
         try {
-          _a17 = iterator2.next(), value2 = _a17.value, done = _a17.done;
+          _a23 = iterator2.next(), value2 = _a23.value, done = _a23.done;
         } catch (err) {
           subscriber.error(err);
           return;
@@ -8650,11 +8650,11 @@ function fromEvent(target, eventName, options, resultSelector) {
   if (resultSelector) {
     return fromEvent(target, eventName, options).pipe(mapOneOrManyArgs(resultSelector));
   }
-  var _a17 = __read(isEventTarget(target) ? eventTargetMethods.map(function(methodName) {
+  var _a23 = __read(isEventTarget(target) ? eventTargetMethods.map(function(methodName) {
     return function(handler2) {
       return target[methodName](eventName, handler2, options);
     };
-  }) : isNodeStyleEventEmitter(target) ? nodeEventEmitterMethods.map(toCommonHandlerRegistry(target, eventName)) : isJQueryStyleEventEmitter(target) ? jqueryMethods.map(toCommonHandlerRegistry(target, eventName)) : [], 2), add2 = _a17[0], remove2 = _a17[1];
+  }) : isNodeStyleEventEmitter(target) ? nodeEventEmitterMethods.map(toCommonHandlerRegistry(target, eventName)) : isJQueryStyleEventEmitter(target) ? jqueryMethods.map(toCommonHandlerRegistry(target, eventName)) : [], 2), add2 = _a23[0], remove2 = _a23[1];
   if (!add2) {
     if (isArrayLike(target)) {
       return mergeMap(function(subTarget) {
@@ -8772,7 +8772,7 @@ function bufferCount(bufferSize, startBufferEvery) {
     var buffers = [];
     var count2 = 0;
     source.subscribe(createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a17, e_2, _b2;
+      var e_1, _a23, e_2, _b2;
       var toEmit = null;
       if (count2++ % startBufferEvery === 0) {
         buffers.push([]);
@@ -8790,7 +8790,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         e_1 = { error: e_1_1 };
       } finally {
         try {
-          if (buffers_1_1 && !buffers_1_1.done && (_a17 = buffers_1.return)) _a17.call(buffers_1);
+          if (buffers_1_1 && !buffers_1_1.done && (_a23 = buffers_1.return)) _a23.call(buffers_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -8813,7 +8813,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         }
       }
     }, function() {
-      var e_3, _a17;
+      var e_3, _a23;
       try {
         for (var buffers_2 = __values(buffers), buffers_2_1 = buffers_2.next(); !buffers_2_1.done; buffers_2_1 = buffers_2.next()) {
           var buffer2 = buffers_2_1.value;
@@ -8823,7 +8823,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         e_3 = { error: e_3_1 };
       } finally {
         try {
-          if (buffers_2_1 && !buffers_2_1.done && (_a17 = buffers_2.return)) _a17.call(buffers_2);
+          if (buffers_2_1 && !buffers_2_1.done && (_a23 = buffers_2.return)) _a23.call(buffers_2);
         } finally {
           if (e_3) throw e_3.error;
         }
@@ -8837,12 +8837,12 @@ function bufferCount(bufferSize, startBufferEvery) {
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/bufferTime.js
 function bufferTime(bufferTimeSpan) {
-  var _a17, _b2;
+  var _a23, _b2;
   var otherArgs = [];
   for (var _i = 1; _i < arguments.length; _i++) {
     otherArgs[_i - 1] = arguments[_i];
   }
-  var scheduler = (_a17 = popScheduler(otherArgs)) !== null && _a17 !== void 0 ? _a17 : asyncScheduler;
+  var scheduler = (_a23 = popScheduler(otherArgs)) !== null && _a23 !== void 0 ? _a23 : asyncScheduler;
   var bufferCreationInterval = (_b2 = otherArgs[0]) !== null && _b2 !== void 0 ? _b2 : null;
   var maxBufferSize = otherArgs[1] || Infinity;
   return operate(function(source, subscriber) {
@@ -8877,7 +8877,7 @@ function bufferTime(bufferTimeSpan) {
     }
     startBuffer();
     var bufferTimeSubscriber = createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a18;
+      var e_1, _a24;
       var recordsCopy = bufferRecords.slice();
       try {
         for (var recordsCopy_1 = __values(recordsCopy), recordsCopy_1_1 = recordsCopy_1.next(); !recordsCopy_1_1.done; recordsCopy_1_1 = recordsCopy_1.next()) {
@@ -8890,7 +8890,7 @@ function bufferTime(bufferTimeSpan) {
         e_1 = { error: e_1_1 };
       } finally {
         try {
-          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a18 = recordsCopy_1.return)) _a18.call(recordsCopy_1);
+          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a24 = recordsCopy_1.return)) _a24.call(recordsCopy_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -9009,7 +9009,7 @@ function takeUntil(notifier) {
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/throttle.js
 function throttle(durationSelector, config2) {
   return operate(function(source, subscriber) {
-    var _a17 = config2 !== null && config2 !== void 0 ? config2 : {}, _b2 = _a17.leading, leading = _b2 === void 0 ? true : _b2, _c2 = _a17.trailing, trailing = _c2 === void 0 ? false : _c2;
+    var _a23 = config2 !== null && config2 !== void 0 ? config2 : {}, _b2 = _a23.leading, leading = _b2 === void 0 ? true : _b2, _c2 = _a23.trailing, trailing = _c2 === void 0 ? false : _c2;
     var hasValue = false;
     var sendValue = null;
     var throttled = null;
@@ -13435,7 +13435,7 @@ var Parser = class {
       rest: result.rest
     };
   }
-  validate(_utcDate, _value, _options) {
+  validate(_utcDate, _value2, _options) {
     return true;
   }
 };
@@ -41545,14 +41545,16 @@ var hasMultipleDemos = (demo) => {
 };
 
 // ts_web/elements/wcc-frame.ts
-var _isNative_dec, _advancedEditorOpen_dec, _viewport_dec, _a, _WccFrame_decorators, _init, _viewport, _advancedEditorOpen, _isNative;
+var _isResizing_dec, _sidebarWidth_dec, _isNative_dec, _advancedEditorOpen_dec, _viewport_dec, _a, _WccFrame_decorators, _init, _viewport, _advancedEditorOpen, _isNative, _sidebarWidth, _isResizing;
 _WccFrame_decorators = [t4("wcc-frame")];
-var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advancedEditorOpen_dec = [n5({ type: Boolean })], _isNative_dec = [n5({ type: Boolean })], _a) {
+var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advancedEditorOpen_dec = [n5({ type: Boolean })], _isNative_dec = [n5({ type: Boolean })], _sidebarWidth_dec = [n5({ type: Number })], _isResizing_dec = [n5({ type: Boolean })], _a) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _viewport, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _advancedEditorOpen, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
     __privateAdd(this, _isNative, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _sidebarWidth, __runInitializers(_init, 20, this, 200)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _isResizing, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
   }
   render() {
     return x`
@@ -41567,9 +41569,9 @@ var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advance
           ` : `
             bottom: ${this.advancedEditorOpen ? "400px" : "100px"};
             border: 10px solid #ffaeaf;
-            left: 200px;
+            left: ${this.sidebarWidth}px;
           `}
-          transition: all 0.3s ease;
+          transition: ${this.isResizing ? "none" : "all 0.3s ease"};
           ${this.isNative ? "padding: 0px;" : (() => {
       switch (this.viewport) {
         case "desktop":
@@ -41578,15 +41580,15 @@ var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advance
                 `;
         case "tablet":
           return `
-                  padding: 0px ${(document.body.clientWidth - 200 - domtools_css_breakpoints_exports.tablet) / 2}px;
+                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools_css_breakpoints_exports.tablet) / 2}px;
                 `;
         case "phablet":
           return `
-                  padding: 0px ${(document.body.clientWidth - 200 - domtools_css_breakpoints_exports.phablet) / 2}px;
+                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools_css_breakpoints_exports.phablet) / 2}px;
                 `;
         case "phone":
           return `
-                  padding: 0px ${(document.body.clientWidth - 200 - domtools_css_breakpoints_exports.phone) / 2}px;
+                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools_css_breakpoints_exports.phone) / 2}px;
                 `;
       }
     })()}
@@ -41634,9 +41636,13 @@ _init = __decoratorStart(_a);
 _viewport = new WeakMap();
 _advancedEditorOpen = new WeakMap();
 _isNative = new WeakMap();
+_sidebarWidth = new WeakMap();
+_isResizing = new WeakMap();
 __decorateElement(_init, 4, "viewport", _viewport_dec, WccFrame, _viewport);
 __decorateElement(_init, 4, "advancedEditorOpen", _advancedEditorOpen_dec, WccFrame, _advancedEditorOpen);
 __decorateElement(_init, 4, "isNative", _isNative_dec, WccFrame, _isNative);
+__decorateElement(_init, 4, "sidebarWidth", _sidebarWidth_dec, WccFrame, _sidebarWidth);
+__decorateElement(_init, 4, "isResizing", _isResizing_dec, WccFrame, _isResizing);
 WccFrame = __decorateElement(_init, 0, "WccFrame", _WccFrame_decorators, WccFrame);
 __publicField(WccFrame, "styles", [
   i`
@@ -41644,7 +41650,6 @@ __publicField(WccFrame, "styles", [
         border: 10px solid #ffaeaf;
         position: absolute;
         background: ${cssManager.bdTheme("#333", "#000")};
-        left: 200px;
         right: 0px;
         top: 0px;
         overflow-y: auto;
@@ -41662,20 +41667,240 @@ __publicField(WccFrame, "styles", [
 ]);
 __runInitializers(_init, 1, WccFrame);
 
+// ts_web/elements/wcc-contextmenu.ts
+var _visible_dec, _y_dec, _x_dec, _menuItems_dec, _a2, _WccContextmenu_decorators, _init2, _menuItems, _x, _y, _visible;
+_WccContextmenu_decorators = [t4("wcc-contextmenu")];
+var _WccContextmenu = class _WccContextmenu extends (_a2 = DeesElement, _menuItems_dec = [n5({ type: Array })], _x_dec = [n5({ type: Number })], _y_dec = [n5({ type: Number })], _visible_dec = [r5()], _a2) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _menuItems, __runInitializers(_init2, 8, this, [])), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _x, __runInitializers(_init2, 12, this, 0)), __runInitializers(_init2, 15, this);
+    __privateAdd(this, _y, __runInitializers(_init2, 16, this, 0)), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _visible, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
+    __publicField(this, "boundHandleOutsideClick", this.handleOutsideClick.bind(this));
+    __publicField(this, "boundHandleKeydown", this.handleKeydown.bind(this));
+  }
+  // Static method to show context menu at position
+  static async show(event, menuItems) {
+    event.preventDefault();
+    event.stopPropagation();
+    const existing = document.querySelector("wcc-contextmenu");
+    if (existing) {
+      existing.remove();
+    }
+    const menu = new _WccContextmenu();
+    menu.menuItems = menuItems;
+    menu.x = event.clientX;
+    menu.y = event.clientY;
+    document.body.appendChild(menu);
+    await menu.updateComplete;
+    menu.adjustPosition();
+  }
+  render() {
+    return x`
+      <div class="menu">
+        ${this.menuItems.map((item) => x`
+          <div
+            class="menu-item ${item.disabled ? "disabled" : ""}"
+            @click=${() => this.handleItemClick(item)}
+          >
+            ${item.iconName ? x`<span class="icon">${item.iconName}</span>` : null}
+            <span class="label">${item.name}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  async connectedCallback() {
+    await super.connectedCallback();
+    requestAnimationFrame(() => {
+      document.addEventListener("click", this.boundHandleOutsideClick);
+      document.addEventListener("contextmenu", this.boundHandleOutsideClick);
+      document.addEventListener("keydown", this.boundHandleKeydown);
+      this.classList.add("visible");
+    });
+  }
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    document.removeEventListener("click", this.boundHandleOutsideClick);
+    document.removeEventListener("contextmenu", this.boundHandleOutsideClick);
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+  }
+  adjustPosition() {
+    const rect = this.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    let x2 = this.x;
+    let y4 = this.y;
+    if (x2 + rect.width > windowWidth - 10) {
+      x2 = windowWidth - rect.width - 10;
+    }
+    if (y4 + rect.height > windowHeight - 10) {
+      y4 = windowHeight - rect.height - 10;
+    }
+    if (x2 < 10) x2 = 10;
+    if (y4 < 10) y4 = 10;
+    this.style.left = `${x2}px`;
+    this.style.top = `${y4}px`;
+  }
+  handleOutsideClick(e10) {
+    const path2 = e10.composedPath();
+    if (!path2.includes(this)) {
+      this.close();
+    }
+  }
+  handleKeydown(e10) {
+    if (e10.key === "Escape") {
+      this.close();
+    }
+  }
+  async handleItemClick(item) {
+    if (item.disabled) return;
+    await item.action();
+    this.close();
+  }
+  close() {
+    this.classList.remove("visible");
+    setTimeout(() => this.remove(), 150);
+  }
+};
+_init2 = __decoratorStart(_a2);
+_menuItems = new WeakMap();
+_x = new WeakMap();
+_y = new WeakMap();
+_visible = new WeakMap();
+__decorateElement(_init2, 4, "menuItems", _menuItems_dec, _WccContextmenu, _menuItems);
+__decorateElement(_init2, 4, "x", _x_dec, _WccContextmenu, _x);
+__decorateElement(_init2, 4, "y", _y_dec, _WccContextmenu, _y);
+__decorateElement(_init2, 4, "visible", _visible_dec, _WccContextmenu, _visible);
+_WccContextmenu = __decorateElement(_init2, 0, "WccContextmenu", _WccContextmenu_decorators, _WccContextmenu);
+__publicField(_WccContextmenu, "styles", [
+  i`
+      :host {
+        position: fixed;
+        z-index: 10000;
+        opacity: 0;
+        transform: scale(0.95) translateY(-5px);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+        pointer-events: none;
+      }
+
+      :host(.visible) {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        pointer-events: auto;
+      }
+
+      .menu {
+        min-width: 160px;
+        background: #0f0f0f;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 6px;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+        padding: 4px 0;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-size: 12px;
+      }
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        color: #ccc;
+        cursor: pointer;
+        transition: background 0.1s ease;
+        user-select: none;
+      }
+
+      .menu-item:hover {
+        background: rgba(59, 130, 246, 0.15);
+        color: #fff;
+      }
+
+      .menu-item.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .menu-item .icon {
+        font-family: 'Material Symbols Outlined';
+        font-size: 16px;
+        font-weight: normal;
+        font-style: normal;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        opacity: 0.7;
+      }
+
+      .menu-item:hover .icon {
+        opacity: 1;
+      }
+
+      .menu-item .label {
+        flex: 1;
+      }
+    `
+]);
+__runInitializers(_init2, 1, _WccContextmenu);
+var WccContextmenu = _WccContextmenu;
+
 // ts_web/elements/wcc-sidebar.ts
-var _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery;
+var _isResizing_dec2, _sidebarWidth_dec2, _pinnedItems_dec, _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a3, _WccSidebar_decorators, _init3, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery, _pinnedItems, _sidebarWidth2, _isResizing2;
 _WccSidebar_decorators = [t4("wcc-sidebar")];
-var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _collapsedSections_dec = [r5()], _searchQuery_dec = [n5()], _a2) {
+var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _collapsedSections_dec = [r5()], _searchQuery_dec = [n5()], _pinnedItems_dec = [n5({ attribute: false })], _sidebarWidth_dec2 = [n5({ type: Number })], _isResizing_dec2 = [r5()], _a3) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _selectedItem, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
-    __privateAdd(this, _selectedType, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
-    __privateAdd(this, _dashboardRef, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
-    __privateAdd(this, _isNative2, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
-    __privateAdd(this, _expandedElements, __runInitializers(_init2, 24, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 27, this);
-    __privateAdd(this, _collapsedSections, __runInitializers(_init2, 28, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 31, this);
-    __privateAdd(this, _searchQuery, __runInitializers(_init2, 32, this, "")), __runInitializers(_init2, 35, this);
+    __privateAdd(this, _selectedItem, __runInitializers(_init3, 8, this)), __runInitializers(_init3, 11, this);
+    __privateAdd(this, _selectedType, __runInitializers(_init3, 12, this)), __runInitializers(_init3, 15, this);
+    __privateAdd(this, _dashboardRef, __runInitializers(_init3, 16, this)), __runInitializers(_init3, 19, this);
+    __privateAdd(this, _isNative2, __runInitializers(_init3, 20, this, false)), __runInitializers(_init3, 23, this);
+    __privateAdd(this, _expandedElements, __runInitializers(_init3, 24, this, /* @__PURE__ */ new Set())), __runInitializers(_init3, 27, this);
+    __privateAdd(this, _collapsedSections, __runInitializers(_init3, 28, this, /* @__PURE__ */ new Set())), __runInitializers(_init3, 31, this);
+    __privateAdd(this, _searchQuery, __runInitializers(_init3, 32, this, "")), __runInitializers(_init3, 35, this);
+    __privateAdd(this, _pinnedItems, __runInitializers(_init3, 36, this, /* @__PURE__ */ new Set())), __runInitializers(_init3, 39, this);
+    __privateAdd(this, _sidebarWidth2, __runInitializers(_init3, 40, this, 200)), __runInitializers(_init3, 43, this);
+    __privateAdd(this, _isResizing2, __runInitializers(_init3, 44, this, false)), __runInitializers(_init3, 47, this);
     __publicField(this, "sectionsInitialized", false);
+    // ============ Resize functionality ============
+    __publicField(this, "startResize", (e10) => {
+      e10.preventDefault();
+      this.isResizing = true;
+      const startX = e10.clientX;
+      const startWidth = this.sidebarWidth;
+      const frame = this.dashboardRef?.shadowRoot?.querySelector("wcc-frame");
+      const properties2 = this.dashboardRef?.shadowRoot?.querySelector("wcc-properties");
+      if (frame) {
+        frame.isResizing = true;
+      }
+      const onMouseMove = (e11) => {
+        const newWidth = Math.min(400, Math.max(150, startWidth + (e11.clientX - startX)));
+        this.sidebarWidth = newWidth;
+        if (frame) {
+          frame.sidebarWidth = newWidth;
+        }
+        if (properties2) {
+          properties2.sidebarWidth = newWidth;
+        }
+      };
+      const onMouseUp = () => {
+        this.isResizing = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        if (frame) {
+          frame.isResizing = false;
+        }
+        this.dispatchEvent(new CustomEvent("widthChanged", { detail: this.sidebarWidth }));
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    });
   }
   render() {
     return x`
@@ -41705,7 +41930,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           box-sizing: border-box;
           position: absolute;
           left: 0px;
-          width: 200px;
+          width: ${this.sidebarWidth}px;
           top: 0px;
           bottom: 0px;
           overflow-y: auto;
@@ -41803,7 +42028,11 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         }
 
         .selectOption.folder {
-          grid-template-columns: 16px 20px 1fr;
+          grid-template-columns: 16px 1fr;
+        }
+
+        .selectOption.folder .text {
+          margin-left: 4px;
         }
 
         .selectOption .expand-icon {
@@ -41932,6 +42161,90 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           background: rgba(59, 130, 246, 0.3);
           border-radius: 2px;
         }
+
+        /* Pinned item highlight in original section */
+        .selectOption.pinned {
+          background: rgba(245, 158, 11, 0.08);
+        }
+
+        .selectOption.pinned:hover {
+          background: rgba(245, 158, 11, 0.12);
+        }
+
+        .selectOption.pinned.selected {
+          background: rgba(245, 158, 11, 0.18);
+        }
+
+        /* Pinned section styling */
+        .section-header.pinned-section {
+          background: rgba(245, 158, 11, 0.08);
+          color: #f59e0b;
+        }
+
+        .section-header.pinned-section:hover {
+          background: rgba(245, 158, 11, 0.12);
+        }
+
+        .section-header.pinned-section .section-icon {
+          opacity: 0.8;
+        }
+
+        /* Section tag pill for pinned items */
+        .section-tag {
+          font-size: 0.5rem;
+          color: #888;
+          margin-left: auto;
+          text-transform: uppercase;
+          letter-spacing: 0.02em;
+          background: rgba(255, 255, 255, 0.06);
+          padding: 0.15rem 0.4rem;
+          border-radius: 9999px;
+          white-space: nowrap;
+        }
+
+        /* Group container */
+        .item-group {
+          margin: 0.375rem 0.375rem;
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          border-radius: 6px;
+          padding: 0.25rem 0;
+          background: rgba(255, 255, 255, 0.01);
+        }
+
+        .item-group-legend {
+          font-size: 0.55rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: #555;
+          padding: 0.125rem 0.625rem 0.25rem;
+          display: block;
+        }
+
+        .item-group .selectOption {
+          margin-left: 0.25rem;
+          margin-right: 0.25rem;
+        }
+
+        /* Resize handle */
+        .resize-handle {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 4px;
+          cursor: col-resize;
+          background: transparent;
+          transition: background 0.15s ease;
+          z-index: 10;
+        }
+
+        .resize-handle:hover {
+          background: rgba(59, 130, 246, 0.3);
+        }
+
+        .resize-handle.active {
+          background: var(--primary);
+        }
       </style>
       <div class="search-container">
         <input
@@ -41943,15 +42256,20 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         />
       </div>
       <div class="menu">
+        ${this.renderPinnedSection()}
         ${this.renderSections()}
       </div>
+      <div
+        class="resize-handle ${this.isResizing ? "active" : ""}"
+        @mousedown=${this.startResize}
+      ></div>
     `;
   }
   /**
    * Initialize collapsed sections from section config
    */
   initCollapsedSections() {
-    if (this.sectionsInitialized) return;
+    if (this.sectionsInitialized || !this.dashboardRef?.sections) return;
     const collapsed = /* @__PURE__ */ new Set();
     for (const section of this.dashboardRef.sections) {
       if (section.collapsed) {
@@ -41961,12 +42279,98 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     this.collapsedSections = collapsed;
     this.sectionsInitialized = true;
   }
+  // ============ Pinning helpers ============
+  getPinKey(sectionName, itemName) {
+    return `${sectionName}::${itemName}`;
+  }
+  isPinned(sectionName, itemName) {
+    return this.pinnedItems.has(this.getPinKey(sectionName, itemName));
+  }
+  togglePin(sectionName, itemName) {
+    const key2 = this.getPinKey(sectionName, itemName);
+    const newPinned = new Set(this.pinnedItems);
+    if (newPinned.has(key2)) {
+      newPinned.delete(key2);
+    } else {
+      newPinned.add(key2);
+    }
+    this.pinnedItems = newPinned;
+    this.dispatchEvent(new CustomEvent("pinnedChanged", { detail: newPinned }));
+  }
+  showContextMenu(e10, sectionName, itemName) {
+    const isPinned = this.isPinned(sectionName, itemName);
+    WccContextmenu.show(e10, [
+      {
+        name: isPinned ? "Unpin" : "Pin",
+        iconName: isPinned ? "push_pin" : "push_pin",
+        action: () => this.togglePin(sectionName, itemName)
+      }
+    ]);
+  }
+  /**
+   * Render the PINNED section (only if there are pinned items)
+   */
+  renderPinnedSection() {
+    if (!this.dashboardRef?.sections || this.pinnedItems.size === 0) {
+      return null;
+    }
+    const isCollapsed = this.collapsedSections.has("__pinned__");
+    const pinnedEntries = [];
+    for (const key2 of this.pinnedItems) {
+      const [sectionName, itemName] = key2.split("::");
+      const section = this.dashboardRef.sections.find((s8) => s8.name === sectionName);
+      if (section) {
+        const entries = getSectionItems(section);
+        const found = entries.find(([name]) => name === itemName);
+        if (found) {
+          pinnedEntries.push({ sectionName, itemName, item: found[1], section });
+        }
+      }
+    }
+    if (pinnedEntries.length === 0) {
+      return null;
+    }
+    return x`
+      <div
+        class="section-header pinned-section ${isCollapsed ? "collapsed" : ""}"
+        @click=${() => this.toggleSectionCollapsed("__pinned__")}
+      >
+        <i class="material-symbols-outlined expand-icon">expand_more</i>
+        <i class="material-symbols-outlined section-icon">push_pin</i>
+        <span>Pinned</span>
+      </div>
+      <div class="section-content ${isCollapsed ? "collapsed" : ""}">
+        ${pinnedEntries.map(({ sectionName, itemName, item, section }) => {
+      const isSelected = this.selectedItem === item;
+      const type5 = section.type === "elements" ? "element" : "page";
+      const icon = section.type === "elements" ? "featured_video" : "insert_drive_file";
+      return x`
+            <div
+              class="selectOption ${isSelected ? "selected" : ""}"
+              @click=${async () => {
+        await dist_ts_exports25.DomTools.setupDomTools();
+        this.selectItem(type5, itemName, item, 0, section);
+      }}
+              @contextmenu=${(e10) => this.showContextMenu(e10, sectionName, itemName)}
+            >
+              <i class="material-symbols-outlined">${icon}</i>
+              <div class="text">${this.highlightMatch(itemName)}</div>
+              <span class="section-tag">${sectionName}</span>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
   /**
    * Render all sections
    */
   renderSections() {
+    if (!this.dashboardRef?.sections) {
+      return null;
+    }
     this.initCollapsedSections();
-    return this.dashboardRef.sections.map((section, index2) => {
+    return this.dashboardRef.sections.map((section) => {
       const entries = getSectionItems(section);
       const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
       if (filteredEntries.length === 0 && this.searchQuery) {
@@ -41997,13 +42401,15 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
     if (section.type === "pages") {
       return filteredEntries.map(([pageName, item]) => {
+        const isPinned = this.isPinned(section.name, pageName);
         return x`
           <div
-            class="selectOption ${this.selectedItem === item ? "selected" : ""}"
+            class="selectOption ${this.selectedItem === item ? "selected" : ""} ${isPinned ? "pinned" : ""}"
             @click=${async () => {
           await dist_ts_exports25.DomTools.setupDomTools();
           this.selectItem("page", pageName, item, 0, section);
         }}
+            @contextmenu=${(e10) => this.showContextMenu(e10, section.name, pageName)}
           >
             <i class="material-symbols-outlined">insert_drive_file</i>
             <div class="text">${this.highlightMatch(pageName)}</div>
@@ -42011,58 +42417,88 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         `;
       });
     } else {
-      return filteredEntries.map(([elementName, item]) => {
-        const anonItem = item;
-        const demoCount = anonItem.demo ? getDemoCount(anonItem.demo) : 0;
-        const isMultiDemo = anonItem.demo && hasMultipleDemos(anonItem.demo);
-        const isExpanded = this.expandedElements.has(elementName);
-        const isSelected = this.selectedItem === item;
-        if (isMultiDemo) {
-          return x`
-            <div
-              class="selectOption folder ${isExpanded ? "expanded" : ""} ${isSelected ? "selected" : ""}"
-              @click=${() => this.toggleExpanded(elementName)}
-            >
-              <i class="material-symbols-outlined expand-icon">chevron_right</i>
-              <i class="material-symbols-outlined">folder</i>
-              <div class="text">${this.highlightMatch(elementName)}</div>
-            </div>
-            ${isExpanded ? x`
-              <div class="demo-children">
-                ${Array.from({ length: demoCount }, (_3, i9) => {
-            const demoIndex = i9;
-            const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
-            return x`
-                    <div
-                      class="demo-child ${isThisDemoSelected ? "selected" : ""}"
-                      @click=${async () => {
-              await dist_ts_exports25.DomTools.setupDomTools();
-              this.selectItem("element", elementName, item, demoIndex, section);
-            }}
-                    >
-                      <i class="material-symbols-outlined">play_circle</i>
-                      <div class="text">demo${demoIndex + 1}</div>
-                    </div>
-                  `;
-          })}
-              </div>
-            ` : null}
-          `;
-        } else {
-          return x`
-            <div
-              class="selectOption ${isSelected ? "selected" : ""}"
-              @click=${async () => {
-            await dist_ts_exports25.DomTools.setupDomTools();
-            this.selectItem("element", elementName, item, 0, section);
-          }}
-            >
-              <i class="material-symbols-outlined">featured_video</i>
-              <div class="text">${this.highlightMatch(elementName)}</div>
-            </div>
-          `;
-        }
-      });
+      const groupedItems = /* @__PURE__ */ new Map();
+      for (const entry of filteredEntries) {
+        const [, item] = entry;
+        const group = item.demoGroup || null;
+        if (!groupedItems.has(group)) {
+          groupedItems.set(group, []);
+        }
+        groupedItems.get(group).push(entry);
+      }
+      const result = [];
+      const ungrouped = groupedItems.get(null) || [];
+      for (const entry of ungrouped) {
+        result.push(this.renderElementItem(entry, section));
+      }
+      for (const [groupName, items] of groupedItems) {
+        if (groupName === null) continue;
+        result.push(x`
+          <div class="item-group">
+            <span class="item-group-legend">${groupName}</span>
+            ${items.map((entry) => this.renderElementItem(entry, section))}
+          </div>
+        `);
+      }
+      return result;
+    }
+  }
+  /**
+   * Render a single element item (used by renderSectionItems)
+   */
+  renderElementItem(entry, section) {
+    const [elementName, item] = entry;
+    const anonItem = item;
+    const demoCount = anonItem.demo ? getDemoCount(anonItem.demo) : 0;
+    const isMultiDemo = anonItem.demo && hasMultipleDemos(anonItem.demo);
+    const isExpanded = this.expandedElements.has(elementName);
+    const isSelected = this.selectedItem === item;
+    const isPinned = this.isPinned(section.name, elementName);
+    if (isMultiDemo) {
+      return x`
+        <div
+          class="selectOption folder ${isExpanded ? "expanded" : ""} ${isSelected ? "selected" : ""} ${isPinned ? "pinned" : ""}"
+          @click=${() => this.toggleExpanded(elementName)}
+          @contextmenu=${(e10) => this.showContextMenu(e10, section.name, elementName)}
+        >
+          <i class="material-symbols-outlined expand-icon">chevron_right</i>
+          <div class="text">${this.highlightMatch(elementName)}</div>
+        </div>
+        ${isExpanded ? x`
+          <div class="demo-children">
+            ${Array.from({ length: demoCount }, (_3, i9) => {
+        const demoIndex = i9;
+        const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
+        return x`
+                <div
+                  class="demo-child ${isThisDemoSelected ? "selected" : ""}"
+                  @click=${async () => {
+          await dist_ts_exports25.DomTools.setupDomTools();
+          this.selectItem("element", elementName, item, demoIndex, section);
+        }}
+                >
+                  <i class="material-symbols-outlined">play_circle</i>
+                  <div class="text">demo${demoIndex + 1}</div>
+                </div>
+              `;
+      })}
+          </div>
+        ` : null}
+      `;
+    } else {
+      return x`
+        <div
+          class="selectOption ${isSelected ? "selected" : ""} ${isPinned ? "pinned" : ""}"
+          @click=${async () => {
+        await dist_ts_exports25.DomTools.setupDomTools();
+        this.selectItem("element", elementName, item, 0, section);
+      }}
+          @contextmenu=${(e10) => this.showContextMenu(e10, section.name, elementName)}
+        >
+          <i class="material-symbols-outlined">featured_video</i>
+          <div class="text">${this.highlightMatch(elementName)}</div>
+        </div>
+      `;
     }
   }
   toggleSectionCollapsed(sectionName) {
@@ -42105,7 +42541,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("selectedItem") && this.selectedItem) {
+    if (changedProperties.has("selectedItem") && this.selectedItem && this.dashboardRef?.sections) {
       for (const section of this.dashboardRef.sections) {
         if (section.type !== "elements") continue;
         const entries = getSectionItems(section);
@@ -42156,7 +42592,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     this.requestUpdate();
   }
 };
-_init2 = __decoratorStart(_a2);
+_init3 = __decoratorStart(_a3);
 _selectedItem = new WeakMap();
 _selectedType = new WeakMap();
 _dashboardRef = new WeakMap();
@@ -42164,24 +42600,30 @@ _isNative2 = new WeakMap();
 _expandedElements = new WeakMap();
 _collapsedSections = new WeakMap();
 _searchQuery = new WeakMap();
-__decorateElement(_init2, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
-__decorateElement(_init2, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
-__decorateElement(_init2, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
-__decorateElement(_init2, 4, "isNative", _isNative_dec2, WccSidebar, _isNative2);
-__decorateElement(_init2, 4, "expandedElements", _expandedElements_dec, WccSidebar, _expandedElements);
-__decorateElement(_init2, 4, "collapsedSections", _collapsedSections_dec, WccSidebar, _collapsedSections);
-__decorateElement(_init2, 4, "searchQuery", _searchQuery_dec, WccSidebar, _searchQuery);
-WccSidebar = __decorateElement(_init2, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
-__runInitializers(_init2, 1, WccSidebar);
+_pinnedItems = new WeakMap();
+_sidebarWidth2 = new WeakMap();
+_isResizing2 = new WeakMap();
+__decorateElement(_init3, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
+__decorateElement(_init3, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
+__decorateElement(_init3, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
+__decorateElement(_init3, 4, "isNative", _isNative_dec2, WccSidebar, _isNative2);
+__decorateElement(_init3, 4, "expandedElements", _expandedElements_dec, WccSidebar, _expandedElements);
+__decorateElement(_init3, 4, "collapsedSections", _collapsedSections_dec, WccSidebar, _collapsedSections);
+__decorateElement(_init3, 4, "searchQuery", _searchQuery_dec, WccSidebar, _searchQuery);
+__decorateElement(_init3, 4, "pinnedItems", _pinnedItems_dec, WccSidebar, _pinnedItems);
+__decorateElement(_init3, 4, "sidebarWidth", _sidebarWidth_dec2, WccSidebar, _sidebarWidth2);
+__decorateElement(_init3, 4, "isResizing", _isResizing_dec2, WccSidebar, _isResizing2);
+WccSidebar = __decorateElement(_init3, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
+__runInitializers(_init3, 1, WccSidebar);
 
 // ts_web/elements/wcc-record-button.ts
-var _duration_dec, _state_dec, _a3, _WccRecordButton_decorators, _init3, _state, _duration;
+var _duration_dec, _state_dec, _a4, _WccRecordButton_decorators, _init4, _state, _duration;
 _WccRecordButton_decorators = [t4("wcc-record-button")];
-var WccRecordButton = class extends (_a3 = DeesElement, _state_dec = [n5({ type: String })], _duration_dec = [n5({ type: Number })], _a3) {
+var WccRecordButton = class extends (_a4 = DeesElement, _state_dec = [n5({ type: String })], _duration_dec = [n5({ type: Number })], _a4) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _state, __runInitializers(_init3, 8, this, "idle")), __runInitializers(_init3, 11, this);
-    __privateAdd(this, _duration, __runInitializers(_init3, 12, this, 0)), __runInitializers(_init3, 15, this);
+    __privateAdd(this, _state, __runInitializers(_init4, 8, this, "idle")), __runInitializers(_init4, 11, this);
+    __privateAdd(this, _duration, __runInitializers(_init4, 12, this, 0)), __runInitializers(_init4, 15, this);
     __publicField(this, "handleClick", () => {
       this.dispatchEvent(new CustomEvent("record-click", {
         bubbles: true,
@@ -42223,12 +42665,12 @@ var WccRecordButton = class extends (_a3 = DeesElement, _state_dec = [n5({ type:
     }
   }
 };
-_init3 = __decoratorStart(_a3);
+_init4 = __decoratorStart(_a4);
 _state = new WeakMap();
 _duration = new WeakMap();
-__decorateElement(_init3, 4, "state", _state_dec, WccRecordButton, _state);
-__decorateElement(_init3, 4, "duration", _duration_dec, WccRecordButton, _duration);
-WccRecordButton = __decorateElement(_init3, 0, "WccRecordButton", _WccRecordButton_decorators, WccRecordButton);
+__decorateElement(_init4, 4, "state", _state_dec, WccRecordButton, _state);
+__decorateElement(_init4, 4, "duration", _duration_dec, WccRecordButton, _duration);
+WccRecordButton = __decorateElement(_init4, 0, "WccRecordButton", _WccRecordButton_decorators, WccRecordButton);
 __publicField(WccRecordButton, "styles", [
   i`
       :host {
@@ -42281,7 +42723,7 @@ __publicField(WccRecordButton, "styles", [
       }
     `
 ]);
-__runInitializers(_init3, 1, WccRecordButton);
+__runInitializers(_init4, 1, WccRecordButton);
 
 // ts_web/services/recorder.service.ts
 var RecorderService = class {
@@ -42556,25 +42998,25 @@ var RecorderService = class {
 };
 
 // ts_web/elements/wcc-recording-panel.ts
-var _isExporting_dec, _isDraggingTrim_dec, _videoDuration_dec, _trimEnd_dec, _trimStart_dec, _previewVideoUrl_dec, _recordingDuration_dec, _audioLevel_dec, _availableMicrophones_dec, _selectedMicrophoneId_dec, _audioEnabled_dec, _recordingMode_dec, _panelState_dec, _dashboardRef_dec2, _a4, _WccRecordingPanel_decorators, _init4, _dashboardRef2, _panelState, _recordingMode, _audioEnabled, _selectedMicrophoneId, _availableMicrophones, _audioLevel, _recordingDuration, _previewVideoUrl, _trimStart, _trimEnd, _videoDuration, _isDraggingTrim, _isExporting;
+var _isExporting_dec, _isDraggingTrim_dec, _videoDuration_dec, _trimEnd_dec, _trimStart_dec, _previewVideoUrl_dec, _recordingDuration_dec, _audioLevel_dec, _availableMicrophones_dec, _selectedMicrophoneId_dec, _audioEnabled_dec, _recordingMode_dec, _panelState_dec, _dashboardRef_dec2, _a5, _WccRecordingPanel_decorators, _init5, _dashboardRef2, _panelState, _recordingMode, _audioEnabled, _selectedMicrophoneId, _availableMicrophones, _audioLevel, _recordingDuration, _previewVideoUrl, _trimStart, _trimEnd, _videoDuration, _isDraggingTrim, _isExporting;
 _WccRecordingPanel_decorators = [t4("wcc-recording-panel")];
-var WccRecordingPanel = class extends (_a4 = DeesElement, _dashboardRef_dec2 = [n5({ attribute: false })], _panelState_dec = [r5()], _recordingMode_dec = [r5()], _audioEnabled_dec = [r5()], _selectedMicrophoneId_dec = [r5()], _availableMicrophones_dec = [r5()], _audioLevel_dec = [r5()], _recordingDuration_dec = [r5()], _previewVideoUrl_dec = [r5()], _trimStart_dec = [r5()], _trimEnd_dec = [r5()], _videoDuration_dec = [r5()], _isDraggingTrim_dec = [r5()], _isExporting_dec = [r5()], _a4) {
+var WccRecordingPanel = class extends (_a5 = DeesElement, _dashboardRef_dec2 = [n5({ attribute: false })], _panelState_dec = [r5()], _recordingMode_dec = [r5()], _audioEnabled_dec = [r5()], _selectedMicrophoneId_dec = [r5()], _availableMicrophones_dec = [r5()], _audioLevel_dec = [r5()], _recordingDuration_dec = [r5()], _previewVideoUrl_dec = [r5()], _trimStart_dec = [r5()], _trimEnd_dec = [r5()], _videoDuration_dec = [r5()], _isDraggingTrim_dec = [r5()], _isExporting_dec = [r5()], _a5) {
   constructor() {
     super();
-    __privateAdd(this, _dashboardRef2, __runInitializers(_init4, 8, this)), __runInitializers(_init4, 11, this);
-    __privateAdd(this, _panelState, __runInitializers(_init4, 12, this, "options")), __runInitializers(_init4, 15, this);
-    __privateAdd(this, _recordingMode, __runInitializers(_init4, 16, this, "viewport")), __runInitializers(_init4, 19, this);
-    __privateAdd(this, _audioEnabled, __runInitializers(_init4, 20, this, false)), __runInitializers(_init4, 23, this);
-    __privateAdd(this, _selectedMicrophoneId, __runInitializers(_init4, 24, this, "")), __runInitializers(_init4, 27, this);
-    __privateAdd(this, _availableMicrophones, __runInitializers(_init4, 28, this, [])), __runInitializers(_init4, 31, this);
-    __privateAdd(this, _audioLevel, __runInitializers(_init4, 32, this, 0)), __runInitializers(_init4, 35, this);
-    __privateAdd(this, _recordingDuration, __runInitializers(_init4, 36, this, 0)), __runInitializers(_init4, 39, this);
-    __privateAdd(this, _previewVideoUrl, __runInitializers(_init4, 40, this, "")), __runInitializers(_init4, 43, this);
-    __privateAdd(this, _trimStart, __runInitializers(_init4, 44, this, 0)), __runInitializers(_init4, 47, this);
-    __privateAdd(this, _trimEnd, __runInitializers(_init4, 48, this, 0)), __runInitializers(_init4, 51, this);
-    __privateAdd(this, _videoDuration, __runInitializers(_init4, 52, this, 0)), __runInitializers(_init4, 55, this);
-    __privateAdd(this, _isDraggingTrim, __runInitializers(_init4, 56, this, null)), __runInitializers(_init4, 59, this);
-    __privateAdd(this, _isExporting, __runInitializers(_init4, 60, this, false)), __runInitializers(_init4, 63, this);
+    __privateAdd(this, _dashboardRef2, __runInitializers(_init5, 8, this)), __runInitializers(_init5, 11, this);
+    __privateAdd(this, _panelState, __runInitializers(_init5, 12, this, "options")), __runInitializers(_init5, 15, this);
+    __privateAdd(this, _recordingMode, __runInitializers(_init5, 16, this, "viewport")), __runInitializers(_init5, 19, this);
+    __privateAdd(this, _audioEnabled, __runInitializers(_init5, 20, this, false)), __runInitializers(_init5, 23, this);
+    __privateAdd(this, _selectedMicrophoneId, __runInitializers(_init5, 24, this, "")), __runInitializers(_init5, 27, this);
+    __privateAdd(this, _availableMicrophones, __runInitializers(_init5, 28, this, [])), __runInitializers(_init5, 31, this);
+    __privateAdd(this, _audioLevel, __runInitializers(_init5, 32, this, 0)), __runInitializers(_init5, 35, this);
+    __privateAdd(this, _recordingDuration, __runInitializers(_init5, 36, this, 0)), __runInitializers(_init5, 39, this);
+    __privateAdd(this, _previewVideoUrl, __runInitializers(_init5, 40, this, "")), __runInitializers(_init5, 43, this);
+    __privateAdd(this, _trimStart, __runInitializers(_init5, 44, this, 0)), __runInitializers(_init5, 47, this);
+    __privateAdd(this, _trimEnd, __runInitializers(_init5, 48, this, 0)), __runInitializers(_init5, 51, this);
+    __privateAdd(this, _videoDuration, __runInitializers(_init5, 52, this, 0)), __runInitializers(_init5, 55, this);
+    __privateAdd(this, _isDraggingTrim, __runInitializers(_init5, 56, this, null)), __runInitializers(_init5, 59, this);
+    __privateAdd(this, _isExporting, __runInitializers(_init5, 60, this, false)), __runInitializers(_init5, 63, this);
     // Service instance
     __publicField(this, "recorderService");
     this.recorderService = new RecorderService({
@@ -42968,7 +43410,7 @@ var WccRecordingPanel = class extends (_a4 = DeesElement, _dashboardRef_dec2 = [
     }
   }
 };
-_init4 = __decoratorStart(_a4);
+_init5 = __decoratorStart(_a5);
 _dashboardRef2 = new WeakMap();
 _panelState = new WeakMap();
 _recordingMode = new WeakMap();
@@ -42983,21 +43425,21 @@ _trimEnd = new WeakMap();
 _videoDuration = new WeakMap();
 _isDraggingTrim = new WeakMap();
 _isExporting = new WeakMap();
-__decorateElement(_init4, 4, "dashboardRef", _dashboardRef_dec2, WccRecordingPanel, _dashboardRef2);
-__decorateElement(_init4, 4, "panelState", _panelState_dec, WccRecordingPanel, _panelState);
-__decorateElement(_init4, 4, "recordingMode", _recordingMode_dec, WccRecordingPanel, _recordingMode);
-__decorateElement(_init4, 4, "audioEnabled", _audioEnabled_dec, WccRecordingPanel, _audioEnabled);
-__decorateElement(_init4, 4, "selectedMicrophoneId", _selectedMicrophoneId_dec, WccRecordingPanel, _selectedMicrophoneId);
-__decorateElement(_init4, 4, "availableMicrophones", _availableMicrophones_dec, WccRecordingPanel, _availableMicrophones);
-__decorateElement(_init4, 4, "audioLevel", _audioLevel_dec, WccRecordingPanel, _audioLevel);
-__decorateElement(_init4, 4, "recordingDuration", _recordingDuration_dec, WccRecordingPanel, _recordingDuration);
-__decorateElement(_init4, 4, "previewVideoUrl", _previewVideoUrl_dec, WccRecordingPanel, _previewVideoUrl);
-__decorateElement(_init4, 4, "trimStart", _trimStart_dec, WccRecordingPanel, _trimStart);
-__decorateElement(_init4, 4, "trimEnd", _trimEnd_dec, WccRecordingPanel, _trimEnd);
-__decorateElement(_init4, 4, "videoDuration", _videoDuration_dec, WccRecordingPanel, _videoDuration);
-__decorateElement(_init4, 4, "isDraggingTrim", _isDraggingTrim_dec, WccRecordingPanel, _isDraggingTrim);
-__decorateElement(_init4, 4, "isExporting", _isExporting_dec, WccRecordingPanel, _isExporting);
-WccRecordingPanel = __decorateElement(_init4, 0, "WccRecordingPanel", _WccRecordingPanel_decorators, WccRecordingPanel);
+__decorateElement(_init5, 4, "dashboardRef", _dashboardRef_dec2, WccRecordingPanel, _dashboardRef2);
+__decorateElement(_init5, 4, "panelState", _panelState_dec, WccRecordingPanel, _panelState);
+__decorateElement(_init5, 4, "recordingMode", _recordingMode_dec, WccRecordingPanel, _recordingMode);
+__decorateElement(_init5, 4, "audioEnabled", _audioEnabled_dec, WccRecordingPanel, _audioEnabled);
+__decorateElement(_init5, 4, "selectedMicrophoneId", _selectedMicrophoneId_dec, WccRecordingPanel, _selectedMicrophoneId);
+__decorateElement(_init5, 4, "availableMicrophones", _availableMicrophones_dec, WccRecordingPanel, _availableMicrophones);
+__decorateElement(_init5, 4, "audioLevel", _audioLevel_dec, WccRecordingPanel, _audioLevel);
+__decorateElement(_init5, 4, "recordingDuration", _recordingDuration_dec, WccRecordingPanel, _recordingDuration);
+__decorateElement(_init5, 4, "previewVideoUrl", _previewVideoUrl_dec, WccRecordingPanel, _previewVideoUrl);
+__decorateElement(_init5, 4, "trimStart", _trimStart_dec, WccRecordingPanel, _trimStart);
+__decorateElement(_init5, 4, "trimEnd", _trimEnd_dec, WccRecordingPanel, _trimEnd);
+__decorateElement(_init5, 4, "videoDuration", _videoDuration_dec, WccRecordingPanel, _videoDuration);
+__decorateElement(_init5, 4, "isDraggingTrim", _isDraggingTrim_dec, WccRecordingPanel, _isDraggingTrim);
+__decorateElement(_init5, 4, "isExporting", _isExporting_dec, WccRecordingPanel, _isExporting);
+WccRecordingPanel = __decorateElement(_init5, 0, "WccRecordingPanel", _WccRecordingPanel_decorators, WccRecordingPanel);
 __publicField(WccRecordingPanel, "styles", [
   i`
       :host {
@@ -43476,31 +43918,32 @@ __publicField(WccRecordingPanel, "styles", [
 
     `
 ]);
-__runInitializers(_init4, 1, WccRecordingPanel);
+__runInitializers(_init5, 1, WccRecordingPanel);
 
 // ts_web/elements/wcc-properties.ts
-var _recordingDuration_dec2, _isRecording_dec, _showRecordingPanel_dec, _editingProperties_dec, _propertyContent_dec, _isNative_dec3, _warning_dec, _selectedTheme_dec, _selectedViewport_dec, _selectedItem_dec2, _dashboardRef_dec3, _a5, _WccProperties_decorators, _init5, _dashboardRef3, _selectedItem2, _selectedViewport, _selectedTheme, _warning, _isNative3, _propertyContent, _editingProperties, _showRecordingPanel, _isRecording, _recordingDuration2;
+var _recordingDuration_dec2, _isRecording_dec, _showRecordingPanel_dec, _editingProperties_dec, _propertyContent_dec, _sidebarWidth_dec3, _isNative_dec3, _warning_dec, _selectedTheme_dec, _selectedViewport_dec, _selectedItem_dec2, _dashboardRef_dec3, _a6, _WccProperties_decorators, _init6, _dashboardRef3, _selectedItem2, _selectedViewport, _selectedTheme, _warning, _isNative3, _sidebarWidth3, _propertyContent, _editingProperties, _showRecordingPanel, _isRecording, _recordingDuration2;
 var environment = "native";
 var setEnvironment = (envArg) => {
   environment = envArg;
 };
 _WccProperties_decorators = [t4("wcc-properties")];
-var WccProperties = class extends (_a5 = DeesElement, _dashboardRef_dec3 = [n5({
+var WccProperties = class extends (_a6 = DeesElement, _dashboardRef_dec3 = [n5({
   type: WccDashboard2
-})], _selectedItem_dec2 = [n5()], _selectedViewport_dec = [n5()], _selectedTheme_dec = [n5()], _warning_dec = [n5()], _isNative_dec3 = [n5()], _propertyContent_dec = [r5()], _editingProperties_dec = [r5()], _showRecordingPanel_dec = [r5()], _isRecording_dec = [r5()], _recordingDuration_dec2 = [r5()], _a5) {
+})], _selectedItem_dec2 = [n5()], _selectedViewport_dec = [n5()], _selectedTheme_dec = [n5()], _warning_dec = [n5()], _isNative_dec3 = [n5()], _sidebarWidth_dec3 = [n5({ type: Number })], _propertyContent_dec = [r5()], _editingProperties_dec = [r5()], _showRecordingPanel_dec = [r5()], _isRecording_dec = [r5()], _recordingDuration_dec2 = [r5()], _a6) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _dashboardRef3, __runInitializers(_init5, 8, this)), __runInitializers(_init5, 11, this);
-    __privateAdd(this, _selectedItem2, __runInitializers(_init5, 12, this)), __runInitializers(_init5, 15, this);
-    __privateAdd(this, _selectedViewport, __runInitializers(_init5, 16, this, "native")), __runInitializers(_init5, 19, this);
-    __privateAdd(this, _selectedTheme, __runInitializers(_init5, 20, this, "dark")), __runInitializers(_init5, 23, this);
-    __privateAdd(this, _warning, __runInitializers(_init5, 24, this, null)), __runInitializers(_init5, 27, this);
-    __privateAdd(this, _isNative3, __runInitializers(_init5, 28, this, false)), __runInitializers(_init5, 31, this);
-    __privateAdd(this, _propertyContent, __runInitializers(_init5, 32, this, [])), __runInitializers(_init5, 35, this);
-    __privateAdd(this, _editingProperties, __runInitializers(_init5, 36, this, [])), __runInitializers(_init5, 39, this);
-    __privateAdd(this, _showRecordingPanel, __runInitializers(_init5, 40, this, false)), __runInitializers(_init5, 43, this);
-    __privateAdd(this, _isRecording, __runInitializers(_init5, 44, this, false)), __runInitializers(_init5, 47, this);
-    __privateAdd(this, _recordingDuration2, __runInitializers(_init5, 48, this, 0)), __runInitializers(_init5, 51, this);
+    __privateAdd(this, _dashboardRef3, __runInitializers(_init6, 8, this)), __runInitializers(_init6, 11, this);
+    __privateAdd(this, _selectedItem2, __runInitializers(_init6, 12, this)), __runInitializers(_init6, 15, this);
+    __privateAdd(this, _selectedViewport, __runInitializers(_init6, 16, this, "native")), __runInitializers(_init6, 19, this);
+    __privateAdd(this, _selectedTheme, __runInitializers(_init6, 20, this, "dark")), __runInitializers(_init6, 23, this);
+    __privateAdd(this, _warning, __runInitializers(_init6, 24, this, null)), __runInitializers(_init6, 27, this);
+    __privateAdd(this, _isNative3, __runInitializers(_init6, 28, this, false)), __runInitializers(_init6, 31, this);
+    __privateAdd(this, _sidebarWidth3, __runInitializers(_init6, 32, this, 200)), __runInitializers(_init6, 35, this);
+    __privateAdd(this, _propertyContent, __runInitializers(_init6, 36, this, [])), __runInitializers(_init6, 39, this);
+    __privateAdd(this, _editingProperties, __runInitializers(_init6, 40, this, [])), __runInitializers(_init6, 43, this);
+    __privateAdd(this, _showRecordingPanel, __runInitializers(_init6, 44, this, false)), __runInitializers(_init6, 47, this);
+    __privateAdd(this, _isRecording, __runInitializers(_init6, 48, this, false)), __runInitializers(_init6, 51, this);
+    __privateAdd(this, _recordingDuration2, __runInitializers(_init6, 52, this, 0)), __runInitializers(_init6, 55, this);
     __publicField(this, "editorHeight", 300);
   }
   render() {
@@ -43530,7 +43973,7 @@ var WccProperties = class extends (_a5 = DeesElement, _dashboardRef_dec3 = [n5({
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           box-sizing: border-box;
           position: absolute;
-          left: 200px;
+          left: ${this.sidebarWidth}px;
           height: ${this.editingProperties.length > 0 ? 100 + this.editorHeight : 100}px;
           bottom: 0px;
           right: 0px;
@@ -44455,34 +44898,36 @@ var WccProperties = class extends (_a5 = DeesElement, _dashboardRef_dec3 = [n5({
     }
   }
 };
-_init5 = __decoratorStart(_a5);
+_init6 = __decoratorStart(_a6);
 _dashboardRef3 = new WeakMap();
 _selectedItem2 = new WeakMap();
 _selectedViewport = new WeakMap();
 _selectedTheme = new WeakMap();
 _warning = new WeakMap();
 _isNative3 = new WeakMap();
+_sidebarWidth3 = new WeakMap();
 _propertyContent = new WeakMap();
 _editingProperties = new WeakMap();
 _showRecordingPanel = new WeakMap();
 _isRecording = new WeakMap();
 _recordingDuration2 = new WeakMap();
-__decorateElement(_init5, 4, "dashboardRef", _dashboardRef_dec3, WccProperties, _dashboardRef3);
-__decorateElement(_init5, 4, "selectedItem", _selectedItem_dec2, WccProperties, _selectedItem2);
-__decorateElement(_init5, 4, "selectedViewport", _selectedViewport_dec, WccProperties, _selectedViewport);
-__decorateElement(_init5, 4, "selectedTheme", _selectedTheme_dec, WccProperties, _selectedTheme);
-__decorateElement(_init5, 4, "warning", _warning_dec, WccProperties, _warning);
-__decorateElement(_init5, 4, "isNative", _isNative_dec3, WccProperties, _isNative3);
-__decorateElement(_init5, 4, "propertyContent", _propertyContent_dec, WccProperties, _propertyContent);
-__decorateElement(_init5, 4, "editingProperties", _editingProperties_dec, WccProperties, _editingProperties);
-__decorateElement(_init5, 4, "showRecordingPanel", _showRecordingPanel_dec, WccProperties, _showRecordingPanel);
-__decorateElement(_init5, 4, "isRecording", _isRecording_dec, WccProperties, _isRecording);
-__decorateElement(_init5, 4, "recordingDuration", _recordingDuration_dec2, WccProperties, _recordingDuration2);
-WccProperties = __decorateElement(_init5, 0, "WccProperties", _WccProperties_decorators, WccProperties);
-__runInitializers(_init5, 1, WccProperties);
+__decorateElement(_init6, 4, "dashboardRef", _dashboardRef_dec3, WccProperties, _dashboardRef3);
+__decorateElement(_init6, 4, "selectedItem", _selectedItem_dec2, WccProperties, _selectedItem2);
+__decorateElement(_init6, 4, "selectedViewport", _selectedViewport_dec, WccProperties, _selectedViewport);
+__decorateElement(_init6, 4, "selectedTheme", _selectedTheme_dec, WccProperties, _selectedTheme);
+__decorateElement(_init6, 4, "warning", _warning_dec, WccProperties, _warning);
+__decorateElement(_init6, 4, "isNative", _isNative_dec3, WccProperties, _isNative3);
+__decorateElement(_init6, 4, "sidebarWidth", _sidebarWidth_dec3, WccProperties, _sidebarWidth3);
+__decorateElement(_init6, 4, "propertyContent", _propertyContent_dec, WccProperties, _propertyContent);
+__decorateElement(_init6, 4, "editingProperties", _editingProperties_dec, WccProperties, _editingProperties);
+__decorateElement(_init6, 4, "showRecordingPanel", _showRecordingPanel_dec, WccProperties, _showRecordingPanel);
+__decorateElement(_init6, 4, "isRecording", _isRecording_dec, WccProperties, _isRecording);
+__decorateElement(_init6, 4, "recordingDuration", _recordingDuration_dec2, WccProperties, _recordingDuration2);
+WccProperties = __decorateElement(_init6, 0, "WccProperties", _WccProperties_decorators, WccProperties);
+__runInitializers(_init6, 1, WccProperties);
 
 // ts_web/elements/wcc-dashboard.ts
-var _wccFrame_dec, _warning_dec2, _searchQuery_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a6, _WccDashboard_decorators, _init6, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _searchQuery2, _warning2, _wccFrame;
+var _wccFrame_dec, _warning_dec2, _sidebarWidth_dec4, _pinnedItems_dec2, _searchQuery_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a7, _WccDashboard_decorators, _init7, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _searchQuery2, _pinnedItems2, _sidebarWidth4, _warning2, _wccFrame;
 var getSectionItems = (section) => {
   let entries = Object.entries(section.items);
   if (section.filter) {
@@ -44494,23 +44939,25 @@ var getSectionItems = (section) => {
   return entries;
 };
 _WccDashboard_decorators = [t4("wcc-dashboard")];
-var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _selectedSection_dec = [n5()], _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _searchQuery_dec2 = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
+var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _selectedSection_dec = [n5()], _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _searchQuery_dec2 = [n5()], _pinnedItems_dec2 = [n5({ attribute: false })], _sidebarWidth_dec4 = [n5({ type: Number })], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a7) {
   constructor(config2) {
     super();
-    __privateAdd(this, _sections, __runInitializers(_init6, 8, this, [])), __runInitializers(_init6, 11, this);
-    __privateAdd(this, _selectedSection, __runInitializers(_init6, 12, this, null)), __runInitializers(_init6, 15, this);
-    __privateAdd(this, _selectedType2, __runInitializers(_init6, 16, this)), __runInitializers(_init6, 19, this);
-    __privateAdd(this, _selectedItemName, __runInitializers(_init6, 20, this)), __runInitializers(_init6, 23, this);
-    __privateAdd(this, _selectedItem3, __runInitializers(_init6, 24, this)), __runInitializers(_init6, 27, this);
-    __privateAdd(this, _selectedDemoIndex, __runInitializers(_init6, 28, this, 0)), __runInitializers(_init6, 31, this);
-    __privateAdd(this, _selectedViewport2, __runInitializers(_init6, 32, this, "desktop")), __runInitializers(_init6, 35, this);
-    __privateAdd(this, _selectedTheme2, __runInitializers(_init6, 36, this, "dark")), __runInitializers(_init6, 39, this);
-    __privateAdd(this, _searchQuery2, __runInitializers(_init6, 40, this, "")), __runInitializers(_init6, 43, this);
-    __privateAdd(this, _warning2, __runInitializers(_init6, 44, this, null)), __runInitializers(_init6, 47, this);
+    __privateAdd(this, _sections, __runInitializers(_init7, 8, this, [])), __runInitializers(_init7, 11, this);
+    __privateAdd(this, _selectedSection, __runInitializers(_init7, 12, this, null)), __runInitializers(_init7, 15, this);
+    __privateAdd(this, _selectedType2, __runInitializers(_init7, 16, this)), __runInitializers(_init7, 19, this);
+    __privateAdd(this, _selectedItemName, __runInitializers(_init7, 20, this)), __runInitializers(_init7, 23, this);
+    __privateAdd(this, _selectedItem3, __runInitializers(_init7, 24, this)), __runInitializers(_init7, 27, this);
+    __privateAdd(this, _selectedDemoIndex, __runInitializers(_init7, 28, this, 0)), __runInitializers(_init7, 31, this);
+    __privateAdd(this, _selectedViewport2, __runInitializers(_init7, 32, this, "desktop")), __runInitializers(_init7, 35, this);
+    __privateAdd(this, _selectedTheme2, __runInitializers(_init7, 36, this, "dark")), __runInitializers(_init7, 39, this);
+    __privateAdd(this, _searchQuery2, __runInitializers(_init7, 40, this, "")), __runInitializers(_init7, 43, this);
+    __privateAdd(this, _pinnedItems2, __runInitializers(_init7, 44, this, /* @__PURE__ */ new Set())), __runInitializers(_init7, 47, this);
+    __privateAdd(this, _sidebarWidth4, __runInitializers(_init7, 48, this, 200)), __runInitializers(_init7, 51, this);
+    __privateAdd(this, _warning2, __runInitializers(_init7, 52, this, null)), __runInitializers(_init7, 55, this);
     __publicField(this, "frameScrollY", 0);
     __publicField(this, "sidebarScrollY", 0);
     __publicField(this, "scrollPositionsApplied", false);
-    __privateAdd(this, _wccFrame, __runInitializers(_init6, 48, this)), __runInitializers(_init6, 51, this);
+    __privateAdd(this, _wccFrame, __runInitializers(_init7, 56, this)), __runInitializers(_init7, 59, this);
     __publicField(this, "scrollUpdateTimeout");
     __publicField(this, "scrollListenersAttached", false);
     if (config2 && config2.sections) {
@@ -44557,6 +45004,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
         .searchQuery=${this.searchQuery}
+        .pinnedItems=${this.pinnedItems}
+        .sidebarWidth=${this.sidebarWidth}
         .isNative=${this.isNative}
         @selectedType=${(eventArg) => {
       this.selectedType = eventArg.detail;
@@ -44570,6 +45019,19 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
         @searchChanged=${(eventArg) => {
       this.searchQuery = eventArg.detail;
       this.updateUrlWithScrollState();
+    }}
+        @pinnedChanged=${(eventArg) => {
+      this.pinnedItems = eventArg.detail;
+      this.updateUrlWithScrollState();
+    }}
+        @widthChanged=${async (eventArg) => {
+      this.sidebarWidth = eventArg.detail;
+      this.updateUrlWithScrollState();
+      const frame = await this.wccFrame;
+      if (frame) {
+        frame.sidebarWidth = eventArg.detail;
+        frame.requestUpdate();
+      }
     }}
       ></wcc-sidebar>
       <wcc-properties
@@ -44579,6 +45041,7 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
         .selectedViewport=${this.selectedViewport}
         .selectedTheme=${this.selectedTheme}
         .isNative=${this.isNative}
+        .sidebarWidth=${this.sidebarWidth}
         @selectedViewport=${(eventArg) => {
       this.selectedViewport = eventArg.detail;
       this.scheduleUpdate();
@@ -44597,7 +45060,7 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
       this.toggleNative();
     }}
       ></wcc-properties>
-      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative}>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative} .sidebarWidth=${this.sidebarWidth}>
       </wcc-frame>
     `;
   }
@@ -44656,6 +45119,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           const search2 = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          const pinned = routeInfo.queryParams.pinned;
+          const sidebarWidth = routeInfo.queryParams.sidebarWidth;
           if (search2) {
             this.searchQuery = search2;
           } else {
@@ -44667,11 +45132,30 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           if (sidebarScrollY) {
             this.sidebarScrollY = parseInt(sidebarScrollY);
           }
-          setTimeout(() => {
+          if (pinned) {
+            const newPinned = new Set(pinned.split(",").filter(Boolean));
+            if (this.pinnedItems.size !== newPinned.size || ![...newPinned].every((k3) => this.pinnedItems.has(k3))) {
+              this.pinnedItems = newPinned;
+            }
+          } else if (this.pinnedItems.size > 0) {
+            this.pinnedItems = /* @__PURE__ */ new Set();
+          }
+          if (sidebarWidth) {
+            this.sidebarWidth = parseInt(sidebarWidth, 10);
+          }
+          setTimeout(async () => {
             this.applyScrollPositions();
+            const frame = await this.wccFrame;
+            if (frame) {
+              frame.sidebarWidth = this.sidebarWidth;
+              frame.requestUpdate();
+            }
           }, 100);
         } else {
           this.searchQuery = "";
+          if (this.pinnedItems.size > 0) {
+            this.pinnedItems = /* @__PURE__ */ new Set();
+          }
         }
         const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
         this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
@@ -44708,6 +45192,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           const search2 = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          const pinned = routeInfo.queryParams.pinned;
+          const sidebarWidth = routeInfo.queryParams.sidebarWidth;
           if (search2) {
             this.searchQuery = search2;
           } else {
@@ -44719,11 +45205,25 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           if (sidebarScrollY) {
             this.sidebarScrollY = parseInt(sidebarScrollY);
           }
+          if (pinned) {
+            const newPinned = new Set(pinned.split(",").filter(Boolean));
+            if (this.pinnedItems.size !== newPinned.size || ![...newPinned].every((k3) => this.pinnedItems.has(k3))) {
+              this.pinnedItems = newPinned;
+            }
+          } else if (this.pinnedItems.size > 0) {
+            this.pinnedItems = /* @__PURE__ */ new Set();
+          }
+          if (sidebarWidth) {
+            this.sidebarWidth = parseInt(sidebarWidth, 10);
+          }
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
         } else {
           this.searchQuery = "";
+          if (this.pinnedItems.size > 0) {
+            this.pinnedItems = /* @__PURE__ */ new Set();
+          }
         }
         const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
         this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
@@ -44791,6 +45291,12 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     if (this.sidebarScrollY > 0) {
       queryParams.set("sidebarScrollY", this.sidebarScrollY.toString());
     }
+    if (this.pinnedItems.size > 0) {
+      queryParams.set("pinned", Array.from(this.pinnedItems).join(","));
+    }
+    if (this.sidebarWidth !== 200) {
+      queryParams.set("sidebarWidth", this.sidebarWidth.toString());
+    }
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
     this.domtools.router.pushUrl(fullUrl);
@@ -44834,6 +45340,12 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     if (this.sidebarScrollY > 0) {
       queryParams.set("sidebarScrollY", this.sidebarScrollY.toString());
     }
+    if (this.pinnedItems.size > 0) {
+      queryParams.set("pinned", Array.from(this.pinnedItems).join(","));
+    }
+    if (this.sidebarWidth !== 200) {
+      queryParams.set("sidebarWidth", this.sidebarWidth.toString());
+    }
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
     window.history.replaceState(null, "", fullUrl);
@@ -44853,7 +45365,7 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     this.scrollPositionsApplied = true;
   }
 };
-_init6 = __decoratorStart(_a6);
+_init7 = __decoratorStart(_a7);
 _sections = new WeakMap();
 _selectedSection = new WeakMap();
 _selectedType2 = new WeakMap();
@@ -44863,21 +45375,25 @@ _selectedDemoIndex = new WeakMap();
 _selectedViewport2 = new WeakMap();
 _selectedTheme2 = new WeakMap();
 _searchQuery2 = new WeakMap();
+_pinnedItems2 = new WeakMap();
+_sidebarWidth4 = new WeakMap();
 _warning2 = new WeakMap();
 _wccFrame = new WeakMap();
-__decorateElement(_init6, 4, "sections", _sections_dec, WccDashboard2, _sections);
-__decorateElement(_init6, 4, "selectedSection", _selectedSection_dec, WccDashboard2, _selectedSection);
-__decorateElement(_init6, 4, "selectedType", _selectedType_dec2, WccDashboard2, _selectedType2);
-__decorateElement(_init6, 4, "selectedItemName", _selectedItemName_dec, WccDashboard2, _selectedItemName);
-__decorateElement(_init6, 4, "selectedItem", _selectedItem_dec3, WccDashboard2, _selectedItem3);
-__decorateElement(_init6, 4, "selectedDemoIndex", _selectedDemoIndex_dec, WccDashboard2, _selectedDemoIndex);
-__decorateElement(_init6, 4, "selectedViewport", _selectedViewport_dec2, WccDashboard2, _selectedViewport2);
-__decorateElement(_init6, 4, "selectedTheme", _selectedTheme_dec2, WccDashboard2, _selectedTheme2);
-__decorateElement(_init6, 4, "searchQuery", _searchQuery_dec2, WccDashboard2, _searchQuery2);
-__decorateElement(_init6, 4, "warning", _warning_dec2, WccDashboard2, _warning2);
-__decorateElement(_init6, 4, "wccFrame", _wccFrame_dec, WccDashboard2, _wccFrame);
-WccDashboard2 = __decorateElement(_init6, 0, "WccDashboard", _WccDashboard_decorators, WccDashboard2);
-__runInitializers(_init6, 1, WccDashboard2);
+__decorateElement(_init7, 4, "sections", _sections_dec, WccDashboard2, _sections);
+__decorateElement(_init7, 4, "selectedSection", _selectedSection_dec, WccDashboard2, _selectedSection);
+__decorateElement(_init7, 4, "selectedType", _selectedType_dec2, WccDashboard2, _selectedType2);
+__decorateElement(_init7, 4, "selectedItemName", _selectedItemName_dec, WccDashboard2, _selectedItemName);
+__decorateElement(_init7, 4, "selectedItem", _selectedItem_dec3, WccDashboard2, _selectedItem3);
+__decorateElement(_init7, 4, "selectedDemoIndex", _selectedDemoIndex_dec, WccDashboard2, _selectedDemoIndex);
+__decorateElement(_init7, 4, "selectedViewport", _selectedViewport_dec2, WccDashboard2, _selectedViewport2);
+__decorateElement(_init7, 4, "selectedTheme", _selectedTheme_dec2, WccDashboard2, _selectedTheme2);
+__decorateElement(_init7, 4, "searchQuery", _searchQuery_dec2, WccDashboard2, _searchQuery2);
+__decorateElement(_init7, 4, "pinnedItems", _pinnedItems_dec2, WccDashboard2, _pinnedItems2);
+__decorateElement(_init7, 4, "sidebarWidth", _sidebarWidth_dec4, WccDashboard2, _sidebarWidth4);
+__decorateElement(_init7, 4, "warning", _warning_dec2, WccDashboard2, _warning2);
+__decorateElement(_init7, 4, "wccFrame", _wccFrame_dec, WccDashboard2, _wccFrame);
+WccDashboard2 = __decorateElement(_init7, 0, "WccDashboard", _WccDashboard_decorators, WccDashboard2);
+__runInitializers(_init7, 1, WccDashboard2);
 
 // ts_web/index.ts
 var convertLegacyToConfig = (elementsArg, pagesArg) => {
@@ -44923,16 +45439,21 @@ var setupWccTools = (configOrElements, pagesArg) => {
 // test/elements/index.ts
 var elements_exports = {};
 __export(elements_exports, {
+  TestButtonDanger: () => TestButtonDanger,
+  TestButtonPrimary: () => TestButtonPrimary,
+  TestButtonSecondary: () => TestButtonSecondary,
   TestComplexTypes: () => TestComplexTypes,
   TestDemoelement: () => TestDemoelement,
   TestEdgeCases: () => TestEdgeCases,
+  TestInputCheckbox: () => TestInputCheckbox,
+  TestInputText: () => TestInputText,
   TestNested: () => TestNested,
   TestNoProps: () => TestNoProps,
   TestWithWrapper: () => TestWithWrapper
 });
 
 // test/elements/test-demoelement.ts
-var _demoENum_dec, _demoNumber_dec, _demoString_dec, _demoBoolean_dec, _notTypedAndNotInitizalized_dec, _typedAndNotInitizalized_dec, _notTyped_dec, _a7, _TestDemoelement_decorators, _init7, _notTyped, _typedAndNotInitizalized, _notTypedAndNotInitizalized, _demoBoolean, _demoString, _demoNumber, _demoENum;
+var _demoENum_dec, _demoNumber_dec, _demoString_dec, _demoBoolean_dec, _notTypedAndNotInitizalized_dec, _typedAndNotInitizalized_dec, _notTyped_dec, _a8, _TestDemoelement_decorators, _init8, _notTyped, _typedAndNotInitizalized, _notTypedAndNotInitizalized, _demoBoolean, _demoString, _demoNumber, _demoENum;
 var ETestEnum = /* @__PURE__ */ ((ETestEnum2) => {
   ETestEnum2["first"] = "first";
   ETestEnum2["second"] = "second";
@@ -44940,7 +45461,7 @@ var ETestEnum = /* @__PURE__ */ ((ETestEnum2) => {
   return ETestEnum2;
 })(ETestEnum || {});
 _TestDemoelement_decorators = [t4("test-demoelement")];
-var TestDemoelement = class extends (_a7 = DeesElement, _notTyped_dec = [n5()], _typedAndNotInitizalized_dec = [n5({
+var TestDemoelement = class extends (_a8 = DeesElement, _notTyped_dec = [n5()], _typedAndNotInitizalized_dec = [n5({
   type: String
 })], _notTypedAndNotInitizalized_dec = [n5()], _demoBoolean_dec = [n5({
   type: Boolean
@@ -44950,16 +45471,16 @@ var TestDemoelement = class extends (_a7 = DeesElement, _notTyped_dec = [n5()],
   type: Number
 })], _demoENum_dec = [n5({
   type: ETestEnum
-})], _a7) {
+})], _a8) {
   constructor() {
     super();
-    __privateAdd(this, _notTyped, __runInitializers(_init7, 8, this, "hello")), __runInitializers(_init7, 11, this);
-    __privateAdd(this, _typedAndNotInitizalized, __runInitializers(_init7, 12, this)), __runInitializers(_init7, 15, this);
-    __privateAdd(this, _notTypedAndNotInitizalized, __runInitializers(_init7, 16, this)), __runInitializers(_init7, 19, this);
-    __privateAdd(this, _demoBoolean, __runInitializers(_init7, 20, this, false)), __runInitializers(_init7, 23, this);
-    __privateAdd(this, _demoString, __runInitializers(_init7, 24, this, "default demo string")), __runInitializers(_init7, 27, this);
-    __privateAdd(this, _demoNumber, __runInitializers(_init7, 28, this, 2)), __runInitializers(_init7, 31, this);
-    __privateAdd(this, _demoENum, __runInitializers(_init7, 32, this, "first" /* first */)), __runInitializers(_init7, 35, this);
+    __privateAdd(this, _notTyped, __runInitializers(_init8, 8, this, "hello")), __runInitializers(_init8, 11, this);
+    __privateAdd(this, _typedAndNotInitizalized, __runInitializers(_init8, 12, this)), __runInitializers(_init8, 15, this);
+    __privateAdd(this, _notTypedAndNotInitizalized, __runInitializers(_init8, 16, this)), __runInitializers(_init8, 19, this);
+    __privateAdd(this, _demoBoolean, __runInitializers(_init8, 20, this, false)), __runInitializers(_init8, 23, this);
+    __privateAdd(this, _demoString, __runInitializers(_init8, 24, this, "default demo string")), __runInitializers(_init8, 27, this);
+    __privateAdd(this, _demoNumber, __runInitializers(_init8, 28, this, 2)), __runInitializers(_init8, 31, this);
+    __privateAdd(this, _demoENum, __runInitializers(_init8, 32, this, "first" /* first */)), __runInitializers(_init8, 35, this);
   }
   render() {
     return x`
@@ -44978,7 +45499,7 @@ var TestDemoelement = class extends (_a7 = DeesElement, _notTyped_dec = [n5()],
     `;
   }
 };
-_init7 = __decoratorStart(_a7);
+_init8 = __decoratorStart(_a8);
 _notTyped = new WeakMap();
 _typedAndNotInitizalized = new WeakMap();
 _notTypedAndNotInitizalized = new WeakMap();
@@ -44986,14 +45507,14 @@ _demoBoolean = new WeakMap();
 _demoString = new WeakMap();
 _demoNumber = new WeakMap();
 _demoENum = new WeakMap();
-__decorateElement(_init7, 4, "notTyped", _notTyped_dec, TestDemoelement, _notTyped);
-__decorateElement(_init7, 4, "typedAndNotInitizalized", _typedAndNotInitizalized_dec, TestDemoelement, _typedAndNotInitizalized);
-__decorateElement(_init7, 4, "notTypedAndNotInitizalized", _notTypedAndNotInitizalized_dec, TestDemoelement, _notTypedAndNotInitizalized);
-__decorateElement(_init7, 4, "demoBoolean", _demoBoolean_dec, TestDemoelement, _demoBoolean);
-__decorateElement(_init7, 4, "demoString", _demoString_dec, TestDemoelement, _demoString);
-__decorateElement(_init7, 4, "demoNumber", _demoNumber_dec, TestDemoelement, _demoNumber);
-__decorateElement(_init7, 4, "demoENum", _demoENum_dec, TestDemoelement, _demoENum);
-TestDemoelement = __decorateElement(_init7, 0, "TestDemoelement", _TestDemoelement_decorators, TestDemoelement);
+__decorateElement(_init8, 4, "notTyped", _notTyped_dec, TestDemoelement, _notTyped);
+__decorateElement(_init8, 4, "typedAndNotInitizalized", _typedAndNotInitizalized_dec, TestDemoelement, _typedAndNotInitizalized);
+__decorateElement(_init8, 4, "notTypedAndNotInitizalized", _notTypedAndNotInitizalized_dec, TestDemoelement, _notTypedAndNotInitizalized);
+__decorateElement(_init8, 4, "demoBoolean", _demoBoolean_dec, TestDemoelement, _demoBoolean);
+__decorateElement(_init8, 4, "demoString", _demoString_dec, TestDemoelement, _demoString);
+__decorateElement(_init8, 4, "demoNumber", _demoNumber_dec, TestDemoelement, _demoNumber);
+__decorateElement(_init8, 4, "demoENum", _demoENum_dec, TestDemoelement, _demoENum);
+TestDemoelement = __decorateElement(_init8, 0, "TestDemoelement", _TestDemoelement_decorators, TestDemoelement);
 __publicField(TestDemoelement, "demo", [
   () => x`<test-demoelement>This is demo 1</test-demoelement>`,
   () => x`<test-demoelement>This is demo 2</test-demoelement>`,
@@ -45036,12 +45557,12 @@ __publicField(TestDemoelement, "styles", [
       }
     `
 ]);
-__runInitializers(_init7, 1, TestDemoelement);
+__runInitializers(_init8, 1, TestDemoelement);
 
 // test/elements/test-noprops.ts
-var _TestNoProps_decorators, _init8, _a8;
+var _TestNoProps_decorators, _init9, _a9;
 _TestNoProps_decorators = [t4("test-noprops")];
-var TestNoProps = class extends (_a8 = DeesElement) {
+var TestNoProps = class extends (_a9 = DeesElement) {
   static demo = () => x`<test-noprops></test-noprops>`;
   static styles = [
     i`
@@ -45067,19 +45588,19 @@ var TestNoProps = class extends (_a8 = DeesElement) {
     `;
   }
 };
-_init8 = __decoratorStart(_a8);
-TestNoProps = __decorateElement(_init8, 0, "TestNoProps", _TestNoProps_decorators, TestNoProps);
-__runInitializers(_init8, 1, TestNoProps);
+_init9 = __decoratorStart(_a9);
+TestNoProps = __decorateElement(_init9, 0, "TestNoProps", _TestNoProps_decorators, TestNoProps);
+__runInitializers(_init9, 1, TestNoProps);
 
 // test/elements/test-complextypes.ts
-var _dateProperty_dec, _functionProperty_dec, _simpleObject_dec, _complexData_dec, _numberArray_dec, _stringArray_dec, _a9, _TestComplexTypes_decorators, _init9, _stringArray, _numberArray, _complexData, _simpleObject, _functionProperty, _dateProperty;
+var _dateProperty_dec, _functionProperty_dec, _simpleObject_dec, _complexData_dec, _numberArray_dec, _stringArray_dec, _a10, _TestComplexTypes_decorators, _init10, _stringArray, _numberArray, _complexData, _simpleObject, _functionProperty, _dateProperty;
 _TestComplexTypes_decorators = [t4("test-complextypes")];
-var TestComplexTypes = class extends (_a9 = DeesElement, _stringArray_dec = [n5({ type: Array })], _numberArray_dec = [n5({ type: Array })], _complexData_dec = [n5({ attribute: false })], _simpleObject_dec = [n5({ type: Object })], _functionProperty_dec = [n5({ attribute: false })], _dateProperty_dec = [n5({ type: Date })], _a9) {
+var TestComplexTypes = class extends (_a10 = DeesElement, _stringArray_dec = [n5({ type: Array })], _numberArray_dec = [n5({ type: Array })], _complexData_dec = [n5({ attribute: false })], _simpleObject_dec = [n5({ type: Object })], _functionProperty_dec = [n5({ attribute: false })], _dateProperty_dec = [n5({ type: Date })], _a10) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _stringArray, __runInitializers(_init9, 8, this, ["apple", "banana", "cherry"])), __runInitializers(_init9, 11, this);
-    __privateAdd(this, _numberArray, __runInitializers(_init9, 12, this, [1, 2, 3, 4, 5])), __runInitializers(_init9, 15, this);
-    __privateAdd(this, _complexData, __runInitializers(_init9, 16, this, {
+    __privateAdd(this, _stringArray, __runInitializers(_init10, 8, this, ["apple", "banana", "cherry"])), __runInitializers(_init10, 11, this);
+    __privateAdd(this, _numberArray, __runInitializers(_init10, 12, this, [1, 2, 3, 4, 5])), __runInitializers(_init10, 15, this);
+    __privateAdd(this, _complexData, __runInitializers(_init10, 16, this, {
       name: "Default Name",
       age: 0,
       tags: [],
@@ -45088,16 +45609,16 @@ var TestComplexTypes = class extends (_a9 = DeesElement, _stringArray_dec = [n5(
         modified: /* @__PURE__ */ new Date(),
         author: "Unknown"
       }
-    })), __runInitializers(_init9, 19, this);
-    __privateAdd(this, _simpleObject, __runInitializers(_init9, 20, this, {
+    })), __runInitializers(_init10, 19, this);
+    __privateAdd(this, _simpleObject, __runInitializers(_init10, 20, this, {
       key1: "value1",
       key2: "value2",
       key3: 123
-    })), __runInitializers(_init9, 23, this);
-    __privateAdd(this, _functionProperty, __runInitializers(_init9, 24, this, () => {
+    })), __runInitializers(_init10, 23, this);
+    __privateAdd(this, _functionProperty, __runInitializers(_init10, 24, this, () => {
       console.log("This is a function property");
-    })), __runInitializers(_init9, 27, this);
-    __privateAdd(this, _dateProperty, __runInitializers(_init9, 28, this, /* @__PURE__ */ new Date())), __runInitializers(_init9, 31, this);
+    })), __runInitializers(_init10, 27, this);
+    __privateAdd(this, _dateProperty, __runInitializers(_init10, 28, this, /* @__PURE__ */ new Date())), __runInitializers(_init10, 31, this);
   }
   render() {
     return x`
@@ -45133,20 +45654,20 @@ var TestComplexTypes = class extends (_a9 = DeesElement, _stringArray_dec = [n5(
     `;
   }
 };
-_init9 = __decoratorStart(_a9);
+_init10 = __decoratorStart(_a10);
 _stringArray = new WeakMap();
 _numberArray = new WeakMap();
 _complexData = new WeakMap();
 _simpleObject = new WeakMap();
 _functionProperty = new WeakMap();
 _dateProperty = new WeakMap();
-__decorateElement(_init9, 4, "stringArray", _stringArray_dec, TestComplexTypes, _stringArray);
-__decorateElement(_init9, 4, "numberArray", _numberArray_dec, TestComplexTypes, _numberArray);
-__decorateElement(_init9, 4, "complexData", _complexData_dec, TestComplexTypes, _complexData);
-__decorateElement(_init9, 4, "simpleObject", _simpleObject_dec, TestComplexTypes, _simpleObject);
-__decorateElement(_init9, 4, "functionProperty", _functionProperty_dec, TestComplexTypes, _functionProperty);
-__decorateElement(_init9, 4, "dateProperty", _dateProperty_dec, TestComplexTypes, _dateProperty);
-TestComplexTypes = __decorateElement(_init9, 0, "TestComplexTypes", _TestComplexTypes_decorators, TestComplexTypes);
+__decorateElement(_init10, 4, "stringArray", _stringArray_dec, TestComplexTypes, _stringArray);
+__decorateElement(_init10, 4, "numberArray", _numberArray_dec, TestComplexTypes, _numberArray);
+__decorateElement(_init10, 4, "complexData", _complexData_dec, TestComplexTypes, _complexData);
+__decorateElement(_init10, 4, "simpleObject", _simpleObject_dec, TestComplexTypes, _simpleObject);
+__decorateElement(_init10, 4, "functionProperty", _functionProperty_dec, TestComplexTypes, _functionProperty);
+__decorateElement(_init10, 4, "dateProperty", _dateProperty_dec, TestComplexTypes, _dateProperty);
+TestComplexTypes = __decorateElement(_init10, 0, "TestComplexTypes", _TestComplexTypes_decorators, TestComplexTypes);
 __publicField(TestComplexTypes, "demo", () => x`
     <test-complextypes 
       .complexData=${{
@@ -45193,15 +45714,15 @@ __publicField(TestComplexTypes, "styles", [
       }
     `
 ]);
-__runInitializers(_init9, 1, TestComplexTypes);
+__runInitializers(_init10, 1, TestComplexTypes);
 
 // ts_demotools/demotools.ts
-var _runAfterRender_dec, _a10, _DeesDemoWrapper_decorators, _init10, _runAfterRender;
+var _runAfterRender_dec, _a11, _DeesDemoWrapper_decorators, _init11, _runAfterRender;
 _DeesDemoWrapper_decorators = [t4("dees-demowrapper")];
-var DeesDemoWrapper = class extends (_a10 = DeesElement, _runAfterRender_dec = [n5({ attribute: false })], _a10) {
+var DeesDemoWrapper = class extends (_a11 = DeesElement, _runAfterRender_dec = [n5({ attribute: false })], _a11) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _runAfterRender, __runInitializers(_init10, 8, this)), __runInitializers(_init10, 11, this);
+    __privateAdd(this, _runAfterRender, __runInitializers(_init11, 8, this)), __runInitializers(_init11, 11, this);
   }
   render() {
     return x`
@@ -45220,10 +45741,10 @@ var DeesDemoWrapper = class extends (_a10 = DeesElement, _runAfterRender_dec = [
     }
   }
 };
-_init10 = __decoratorStart(_a10);
+_init11 = __decoratorStart(_a11);
 _runAfterRender = new WeakMap();
-__decorateElement(_init10, 4, "runAfterRender", _runAfterRender_dec, DeesDemoWrapper, _runAfterRender);
-DeesDemoWrapper = __decorateElement(_init10, 0, "DeesDemoWrapper", _DeesDemoWrapper_decorators, DeesDemoWrapper);
+__decorateElement(_init11, 4, "runAfterRender", _runAfterRender_dec, DeesDemoWrapper, _runAfterRender);
+DeesDemoWrapper = __decorateElement(_init11, 0, "DeesDemoWrapper", _DeesDemoWrapper_decorators, DeesDemoWrapper);
 __publicField(DeesDemoWrapper, "styles", [
   i`
       :host {
@@ -45231,17 +45752,17 @@ __publicField(DeesDemoWrapper, "styles", [
       }
     `
 ]);
-__runInitializers(_init10, 1, DeesDemoWrapper);
+__runInitializers(_init11, 1, DeesDemoWrapper);
 
 // test/elements/test-withwrapper.ts
-var _isActive_dec, _counter_dec, _dynamicValue_dec, _a11, _TestWithWrapper_decorators, _init11, _dynamicValue, _counter, _isActive;
+var _isActive_dec, _counter_dec, _dynamicValue_dec, _a12, _TestWithWrapper_decorators, _init12, _dynamicValue, _counter, _isActive;
 _TestWithWrapper_decorators = [t4("test-withwrapper")];
-var TestWithWrapper = class extends (_a11 = DeesElement, _dynamicValue_dec = [n5({ type: String })], _counter_dec = [n5({ type: Number })], _isActive_dec = [n5({ type: Boolean })], _a11) {
+var TestWithWrapper = class extends (_a12 = DeesElement, _dynamicValue_dec = [n5({ type: String })], _counter_dec = [n5({ type: Number })], _isActive_dec = [n5({ type: Boolean })], _a12) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _dynamicValue, __runInitializers(_init11, 8, this, "Initial value")), __runInitializers(_init11, 11, this);
-    __privateAdd(this, _counter, __runInitializers(_init11, 12, this, 0)), __runInitializers(_init11, 15, this);
-    __privateAdd(this, _isActive, __runInitializers(_init11, 16, this, false)), __runInitializers(_init11, 19, this);
+    __privateAdd(this, _dynamicValue, __runInitializers(_init12, 8, this, "Initial value")), __runInitializers(_init12, 11, this);
+    __privateAdd(this, _counter, __runInitializers(_init12, 12, this, 0)), __runInitializers(_init12, 15, this);
+    __privateAdd(this, _isActive, __runInitializers(_init12, 16, this, false)), __runInitializers(_init12, 19, this);
   }
   render() {
     return x`
@@ -45265,14 +45786,14 @@ var TestWithWrapper = class extends (_a11 = DeesElement, _dynamicValue_dec = [n5
     `;
   }
 };
-_init11 = __decoratorStart(_a11);
+_init12 = __decoratorStart(_a12);
 _dynamicValue = new WeakMap();
 _counter = new WeakMap();
 _isActive = new WeakMap();
-__decorateElement(_init11, 4, "dynamicValue", _dynamicValue_dec, TestWithWrapper, _dynamicValue);
-__decorateElement(_init11, 4, "counter", _counter_dec, TestWithWrapper, _counter);
-__decorateElement(_init11, 4, "isActive", _isActive_dec, TestWithWrapper, _isActive);
-TestWithWrapper = __decorateElement(_init11, 0, "TestWithWrapper", _TestWithWrapper_decorators, TestWithWrapper);
+__decorateElement(_init12, 4, "dynamicValue", _dynamicValue_dec, TestWithWrapper, _dynamicValue);
+__decorateElement(_init12, 4, "counter", _counter_dec, TestWithWrapper, _counter);
+__decorateElement(_init12, 4, "isActive", _isActive_dec, TestWithWrapper, _isActive);
+TestWithWrapper = __decorateElement(_init12, 0, "TestWithWrapper", _TestWithWrapper_decorators, TestWithWrapper);
 __publicField(TestWithWrapper, "demo", () => x`
     <dees-demowrapper .runAfterRender=${async (wrapper) => {
   console.log("DemoWrapper: Found wrapper element", wrapper);
@@ -45332,34 +45853,34 @@ __publicField(TestWithWrapper, "styles", [
       }
     `
 ]);
-__runInitializers(_init11, 1, TestWithWrapper);
+__runInitializers(_init12, 1, TestWithWrapper);
 
 // test/elements/test-edgecases.ts
-var _circularRef_dec, _emptyObject_dec, _emptyArray_dec, _emptyString_dec, _booleanNumber_dec, _booleanString_dec, _floatNumber_dec, _verySmallNumber_dec, _veryLargeNumber_dec, _nanNumber_dec, _infinityNumber_dec, _htmlString_dec, _specialChars_dec, _longString_dec, _undefinedNumber_dec, _nullableString_dec, _a12, _TestEdgeCases_decorators, _init12, _nullableString, _undefinedNumber, _longString, _specialChars, _htmlString, _infinityNumber, _nanNumber, _veryLargeNumber, _verySmallNumber, _floatNumber, _booleanString, _booleanNumber, _emptyString, _emptyArray, _emptyObject, _circularRef;
+var _circularRef_dec, _emptyObject_dec, _emptyArray_dec, _emptyString_dec, _booleanNumber_dec, _booleanString_dec, _floatNumber_dec, _verySmallNumber_dec, _veryLargeNumber_dec, _nanNumber_dec, _infinityNumber_dec, _htmlString_dec, _specialChars_dec, _longString_dec, _undefinedNumber_dec, _nullableString_dec, _a13, _TestEdgeCases_decorators, _init13, _nullableString, _undefinedNumber, _longString, _specialChars, _htmlString, _infinityNumber, _nanNumber, _veryLargeNumber, _verySmallNumber, _floatNumber, _booleanString, _booleanNumber, _emptyString, _emptyArray, _emptyObject, _circularRef;
 _TestEdgeCases_decorators = [t4("test-edgecases")];
-var TestEdgeCases = class extends (_a12 = DeesElement, _nullableString_dec = [n5({ type: String })], _undefinedNumber_dec = [n5({ type: Number })], _longString_dec = [n5({ type: String })], _specialChars_dec = [n5({ type: String })], _htmlString_dec = [n5({ type: String })], _infinityNumber_dec = [n5({ type: Number })], _nanNumber_dec = [n5({ type: Number })], _veryLargeNumber_dec = [n5({ type: Number })], _verySmallNumber_dec = [n5({ type: Number })], _floatNumber_dec = [n5({ type: Number })], _booleanString_dec = [n5({ type: String })], _booleanNumber_dec = [n5({ type: Number })], _emptyString_dec = [n5({ type: String })], _emptyArray_dec = [n5({ type: Array })], _emptyObject_dec = [n5({ type: Object })], _circularRef_dec = [n5({ attribute: false })], _a12) {
+var TestEdgeCases = class extends (_a13 = DeesElement, _nullableString_dec = [n5({ type: String })], _undefinedNumber_dec = [n5({ type: Number })], _longString_dec = [n5({ type: String })], _specialChars_dec = [n5({ type: String })], _htmlString_dec = [n5({ type: String })], _infinityNumber_dec = [n5({ type: Number })], _nanNumber_dec = [n5({ type: Number })], _veryLargeNumber_dec = [n5({ type: Number })], _verySmallNumber_dec = [n5({ type: Number })], _floatNumber_dec = [n5({ type: Number })], _booleanString_dec = [n5({ type: String })], _booleanNumber_dec = [n5({ type: Number })], _emptyString_dec = [n5({ type: String })], _emptyArray_dec = [n5({ type: Array })], _emptyObject_dec = [n5({ type: Object })], _circularRef_dec = [n5({ attribute: false })], _a13) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _nullableString, __runInitializers(_init12, 8, this, null)), __runInitializers(_init12, 11, this);
-    __privateAdd(this, _undefinedNumber, __runInitializers(_init12, 12, this)), __runInitializers(_init12, 15, this);
-    __privateAdd(this, _longString, __runInitializers(_init12, 16, this, "Lorem ipsum ".repeat(50))), __runInitializers(_init12, 19, this);
-    __privateAdd(this, _specialChars, __runInitializers(_init12, 20, this, "!@#$%^&*()_+-=[]{}|;':\",./<>?`~")), __runInitializers(_init12, 23, this);
-    __privateAdd(this, _htmlString, __runInitializers(_init12, 24, this, '<script>alert("test")<\/script><b>Bold text</b>')), __runInitializers(_init12, 27, this);
-    __privateAdd(this, _infinityNumber, __runInitializers(_init12, 28, this, Infinity)), __runInitializers(_init12, 31, this);
-    __privateAdd(this, _nanNumber, __runInitializers(_init12, 32, this, NaN)), __runInitializers(_init12, 35, this);
-    __privateAdd(this, _veryLargeNumber, __runInitializers(_init12, 36, this, Number.MAX_SAFE_INTEGER)), __runInitializers(_init12, 39, this);
-    __privateAdd(this, _verySmallNumber, __runInitializers(_init12, 40, this, Number.MIN_SAFE_INTEGER)), __runInitializers(_init12, 43, this);
-    __privateAdd(this, _floatNumber, __runInitializers(_init12, 44, this, 3.14159265359)), __runInitializers(_init12, 47, this);
-    __privateAdd(this, _booleanString, __runInitializers(_init12, 48, this, "false")), __runInitializers(_init12, 51, this);
-    __privateAdd(this, _booleanNumber, __runInitializers(_init12, 52, this, 0)), __runInitializers(_init12, 55, this);
-    __privateAdd(this, _emptyString, __runInitializers(_init12, 56, this, "")), __runInitializers(_init12, 59, this);
-    __privateAdd(this, _emptyArray, __runInitializers(_init12, 60, this, [])), __runInitializers(_init12, 63, this);
-    __privateAdd(this, _emptyObject, __runInitializers(_init12, 64, this, {})), __runInitializers(_init12, 67, this);
-    __privateAdd(this, _circularRef, __runInitializers(_init12, 68, this, (() => {
+    __privateAdd(this, _nullableString, __runInitializers(_init13, 8, this, null)), __runInitializers(_init13, 11, this);
+    __privateAdd(this, _undefinedNumber, __runInitializers(_init13, 12, this)), __runInitializers(_init13, 15, this);
+    __privateAdd(this, _longString, __runInitializers(_init13, 16, this, "Lorem ipsum ".repeat(50))), __runInitializers(_init13, 19, this);
+    __privateAdd(this, _specialChars, __runInitializers(_init13, 20, this, "!@#$%^&*()_+-=[]{}|;':\",./<>?`~")), __runInitializers(_init13, 23, this);
+    __privateAdd(this, _htmlString, __runInitializers(_init13, 24, this, '<script>alert("test")<\/script><b>Bold text</b>')), __runInitializers(_init13, 27, this);
+    __privateAdd(this, _infinityNumber, __runInitializers(_init13, 28, this, Infinity)), __runInitializers(_init13, 31, this);
+    __privateAdd(this, _nanNumber, __runInitializers(_init13, 32, this, NaN)), __runInitializers(_init13, 35, this);
+    __privateAdd(this, _veryLargeNumber, __runInitializers(_init13, 36, this, Number.MAX_SAFE_INTEGER)), __runInitializers(_init13, 39, this);
+    __privateAdd(this, _verySmallNumber, __runInitializers(_init13, 40, this, Number.MIN_SAFE_INTEGER)), __runInitializers(_init13, 43, this);
+    __privateAdd(this, _floatNumber, __runInitializers(_init13, 44, this, 3.14159265359)), __runInitializers(_init13, 47, this);
+    __privateAdd(this, _booleanString, __runInitializers(_init13, 48, this, "false")), __runInitializers(_init13, 51, this);
+    __privateAdd(this, _booleanNumber, __runInitializers(_init13, 52, this, 0)), __runInitializers(_init13, 55, this);
+    __privateAdd(this, _emptyString, __runInitializers(_init13, 56, this, "")), __runInitializers(_init13, 59, this);
+    __privateAdd(this, _emptyArray, __runInitializers(_init13, 60, this, [])), __runInitializers(_init13, 63, this);
+    __privateAdd(this, _emptyObject, __runInitializers(_init13, 64, this, {})), __runInitializers(_init13, 67, this);
+    __privateAdd(this, _circularRef, __runInitializers(_init13, 68, this, (() => {
       const obj = { name: "circular" };
       obj.self = obj;
       return obj;
-    })())), __runInitializers(_init12, 71, this);
+    })())), __runInitializers(_init13, 71, this);
   }
   formatValue(value2) {
     if (value2 === null) return "null";
@@ -45441,7 +45962,7 @@ var TestEdgeCases = class extends (_a12 = DeesElement, _nullableString_dec = [n5
     `;
   }
 };
-_init12 = __decoratorStart(_a12);
+_init13 = __decoratorStart(_a13);
 _nullableString = new WeakMap();
 _undefinedNumber = new WeakMap();
 _longString = new WeakMap();
@@ -45458,23 +45979,23 @@ _emptyString = new WeakMap();
 _emptyArray = new WeakMap();
 _emptyObject = new WeakMap();
 _circularRef = new WeakMap();
-__decorateElement(_init12, 4, "nullableString", _nullableString_dec, TestEdgeCases, _nullableString);
-__decorateElement(_init12, 4, "undefinedNumber", _undefinedNumber_dec, TestEdgeCases, _undefinedNumber);
-__decorateElement(_init12, 4, "longString", _longString_dec, TestEdgeCases, _longString);
-__decorateElement(_init12, 4, "specialChars", _specialChars_dec, TestEdgeCases, _specialChars);
-__decorateElement(_init12, 4, "htmlString", _htmlString_dec, TestEdgeCases, _htmlString);
-__decorateElement(_init12, 4, "infinityNumber", _infinityNumber_dec, TestEdgeCases, _infinityNumber);
-__decorateElement(_init12, 4, "nanNumber", _nanNumber_dec, TestEdgeCases, _nanNumber);
-__decorateElement(_init12, 4, "veryLargeNumber", _veryLargeNumber_dec, TestEdgeCases, _veryLargeNumber);
-__decorateElement(_init12, 4, "verySmallNumber", _verySmallNumber_dec, TestEdgeCases, _verySmallNumber);
-__decorateElement(_init12, 4, "floatNumber", _floatNumber_dec, TestEdgeCases, _floatNumber);
-__decorateElement(_init12, 4, "booleanString", _booleanString_dec, TestEdgeCases, _booleanString);
-__decorateElement(_init12, 4, "booleanNumber", _booleanNumber_dec, TestEdgeCases, _booleanNumber);
-__decorateElement(_init12, 4, "emptyString", _emptyString_dec, TestEdgeCases, _emptyString);
-__decorateElement(_init12, 4, "emptyArray", _emptyArray_dec, TestEdgeCases, _emptyArray);
-__decorateElement(_init12, 4, "emptyObject", _emptyObject_dec, TestEdgeCases, _emptyObject);
-__decorateElement(_init12, 4, "circularRef", _circularRef_dec, TestEdgeCases, _circularRef);
-TestEdgeCases = __decorateElement(_init12, 0, "TestEdgeCases", _TestEdgeCases_decorators, TestEdgeCases);
+__decorateElement(_init13, 4, "nullableString", _nullableString_dec, TestEdgeCases, _nullableString);
+__decorateElement(_init13, 4, "undefinedNumber", _undefinedNumber_dec, TestEdgeCases, _undefinedNumber);
+__decorateElement(_init13, 4, "longString", _longString_dec, TestEdgeCases, _longString);
+__decorateElement(_init13, 4, "specialChars", _specialChars_dec, TestEdgeCases, _specialChars);
+__decorateElement(_init13, 4, "htmlString", _htmlString_dec, TestEdgeCases, _htmlString);
+__decorateElement(_init13, 4, "infinityNumber", _infinityNumber_dec, TestEdgeCases, _infinityNumber);
+__decorateElement(_init13, 4, "nanNumber", _nanNumber_dec, TestEdgeCases, _nanNumber);
+__decorateElement(_init13, 4, "veryLargeNumber", _veryLargeNumber_dec, TestEdgeCases, _veryLargeNumber);
+__decorateElement(_init13, 4, "verySmallNumber", _verySmallNumber_dec, TestEdgeCases, _verySmallNumber);
+__decorateElement(_init13, 4, "floatNumber", _floatNumber_dec, TestEdgeCases, _floatNumber);
+__decorateElement(_init13, 4, "booleanString", _booleanString_dec, TestEdgeCases, _booleanString);
+__decorateElement(_init13, 4, "booleanNumber", _booleanNumber_dec, TestEdgeCases, _booleanNumber);
+__decorateElement(_init13, 4, "emptyString", _emptyString_dec, TestEdgeCases, _emptyString);
+__decorateElement(_init13, 4, "emptyArray", _emptyArray_dec, TestEdgeCases, _emptyArray);
+__decorateElement(_init13, 4, "emptyObject", _emptyObject_dec, TestEdgeCases, _emptyObject);
+__decorateElement(_init13, 4, "circularRef", _circularRef_dec, TestEdgeCases, _circularRef);
+TestEdgeCases = __decorateElement(_init13, 0, "TestEdgeCases", _TestEdgeCases_decorators, TestEdgeCases);
 __publicField(TestEdgeCases, "demo", () => x`<test-edgecases></test-edgecases>`);
 __publicField(TestEdgeCases, "styles", [
   i`
@@ -45515,12 +46036,12 @@ __publicField(TestEdgeCases, "styles", [
       }
     `
 ]);
-__runInitializers(_init12, 1, TestEdgeCases);
+__runInitializers(_init13, 1, TestEdgeCases);
 
 // test/elements/test-nested.ts
-var _TestNestedWrapper_decorators, _init13, _a13, _found_dec, _depth_dec, _message_dec, _b, _TestNestedTarget_decorators, _init14, _message, _depth, _found, _testId_dec, _c, _TestNested_decorators, _init15, _testId;
+var _TestNestedWrapper_decorators, _init14, _a14, _found_dec, _depth_dec, _message_dec, _b, _TestNestedTarget_decorators, _init15, _message, _depth, _found, _testId_dec, _c, _TestNested_decorators, _init16, _testId;
 _TestNestedWrapper_decorators = [t4("test-nested-wrapper")];
-var TestNestedWrapper = class extends (_a13 = DeesElement) {
+var TestNestedWrapper = class extends (_a14 = DeesElement) {
   render() {
     return x`
       <div style="border: 1px dashed #ccc; padding: 10px; margin: 5px;">
@@ -45529,16 +46050,16 @@ var TestNestedWrapper = class extends (_a13 = DeesElement) {
     `;
   }
 };
-_init13 = __decoratorStart(_a13);
-TestNestedWrapper = __decorateElement(_init13, 0, "TestNestedWrapper", _TestNestedWrapper_decorators, TestNestedWrapper);
-__runInitializers(_init13, 1, TestNestedWrapper);
+_init14 = __decoratorStart(_a14);
+TestNestedWrapper = __decorateElement(_init14, 0, "TestNestedWrapper", _TestNestedWrapper_decorators, TestNestedWrapper);
+__runInitializers(_init14, 1, TestNestedWrapper);
 _TestNestedTarget_decorators = [t4("test-nested-target")];
 var TestNestedTarget = class extends (_b = DeesElement, _message_dec = [n5({ type: String })], _depth_dec = [n5({ type: Number })], _found_dec = [n5({ type: Boolean })], _b) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _message, __runInitializers(_init14, 8, this, "I am deeply nested!")), __runInitializers(_init14, 11, this);
-    __privateAdd(this, _depth, __runInitializers(_init14, 12, this, 0)), __runInitializers(_init14, 15, this);
-    __privateAdd(this, _found, __runInitializers(_init14, 16, this, false)), __runInitializers(_init14, 19, this);
+    __privateAdd(this, _message, __runInitializers(_init15, 8, this, "I am deeply nested!")), __runInitializers(_init15, 11, this);
+    __privateAdd(this, _depth, __runInitializers(_init15, 12, this, 0)), __runInitializers(_init15, 15, this);
+    __privateAdd(this, _found, __runInitializers(_init15, 16, this, false)), __runInitializers(_init15, 19, this);
   }
   render() {
     return x`
@@ -45551,14 +46072,14 @@ var TestNestedTarget = class extends (_b = DeesElement, _message_dec = [n5({ typ
     `;
   }
 };
-_init14 = __decoratorStart(_b);
+_init15 = __decoratorStart(_b);
 _message = new WeakMap();
 _depth = new WeakMap();
 _found = new WeakMap();
-__decorateElement(_init14, 4, "message", _message_dec, TestNestedTarget, _message);
-__decorateElement(_init14, 4, "depth", _depth_dec, TestNestedTarget, _depth);
-__decorateElement(_init14, 4, "found", _found_dec, TestNestedTarget, _found);
-TestNestedTarget = __decorateElement(_init14, 0, "TestNestedTarget", _TestNestedTarget_decorators, TestNestedTarget);
+__decorateElement(_init15, 4, "message", _message_dec, TestNestedTarget, _message);
+__decorateElement(_init15, 4, "depth", _depth_dec, TestNestedTarget, _depth);
+__decorateElement(_init15, 4, "found", _found_dec, TestNestedTarget, _found);
+TestNestedTarget = __decorateElement(_init15, 0, "TestNestedTarget", _TestNestedTarget_decorators, TestNestedTarget);
 __publicField(TestNestedTarget, "styles", [
   i`
       :host {
@@ -45575,12 +46096,12 @@ __publicField(TestNestedTarget, "styles", [
       }
     `
 ]);
-__runInitializers(_init14, 1, TestNestedTarget);
+__runInitializers(_init15, 1, TestNestedTarget);
 _TestNested_decorators = [t4("test-nested")];
 var TestNested = class extends (_c = DeesElement, _testId_dec = [n5({ type: String })], _c) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _testId, __runInitializers(_init15, 8, this, "nested-test")), __runInitializers(_init15, 11, this);
+    __privateAdd(this, _testId, __runInitializers(_init16, 8, this, "nested-test")), __runInitializers(_init16, 11, this);
   }
   render() {
     return x`
@@ -45615,10 +46136,10 @@ var TestNested = class extends (_c = DeesElement, _testId_dec = [n5({ type: Stri
     `;
   }
 };
-_init15 = __decoratorStart(_c);
+_init16 = __decoratorStart(_c);
 _testId = new WeakMap();
-__decorateElement(_init15, 4, "testId", _testId_dec, TestNested, _testId);
-TestNested = __decorateElement(_init15, 0, "TestNested", _TestNested_decorators, TestNested);
+__decorateElement(_init16, 4, "testId", _testId_dec, TestNested, _testId);
+TestNested = __decorateElement(_init16, 0, "TestNested", _TestNested_decorators, TestNested);
 __publicField(TestNested, "demo", () => x`
     <test-nested></test-nested>
   `);
@@ -45644,7 +46165,259 @@ __publicField(TestNested, "styles", [
       }
     `
 ]);
-__runInitializers(_init15, 1, TestNested);
+__runInitializers(_init16, 1, TestNested);
+
+// test/elements/test-button-primary.ts
+var _label_dec, _a15, _TestButtonPrimary_decorators, _init17, _label;
+_TestButtonPrimary_decorators = [t4("test-button-primary")];
+var TestButtonPrimary = class extends (_a15 = DeesElement, _label_dec = [n5({ type: String })], _a15) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _label, __runInitializers(_init17, 8, this, "Button")), __runInitializers(_init17, 11, this);
+  }
+  render() {
+    return x`<button><slot>${this.label}</slot></button>`;
+  }
+};
+_init17 = __decoratorStart(_a15);
+_label = new WeakMap();
+__decorateElement(_init17, 4, "label", _label_dec, TestButtonPrimary, _label);
+TestButtonPrimary = __decorateElement(_init17, 0, "TestButtonPrimary", _TestButtonPrimary_decorators, TestButtonPrimary);
+// This groups the element with other "Buttons" in the sidebar
+__publicField(TestButtonPrimary, "demoGroup", "Buttons");
+__publicField(TestButtonPrimary, "demo", () => x`
+    <test-button-primary>Click Me</test-button-primary>
+  `);
+__publicField(TestButtonPrimary, "styles", [
+  i`
+      :host {
+        display: inline-block;
+      }
+      button {
+        background: #3b82f6;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      button:hover {
+        background: #2563eb;
+      }
+    `
+]);
+__runInitializers(_init17, 1, TestButtonPrimary);
+
+// test/elements/test-button-secondary.ts
+var _label_dec2, _a16, _TestButtonSecondary_decorators, _init18, _label2;
+_TestButtonSecondary_decorators = [t4("test-button-secondary")];
+var TestButtonSecondary = class extends (_a16 = DeesElement, _label_dec2 = [n5({ type: String })], _a16) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _label2, __runInitializers(_init18, 8, this, "Button")), __runInitializers(_init18, 11, this);
+  }
+  render() {
+    return x`<button><slot>${this.label}</slot></button>`;
+  }
+};
+_init18 = __decoratorStart(_a16);
+_label2 = new WeakMap();
+__decorateElement(_init18, 4, "label", _label_dec2, TestButtonSecondary, _label2);
+TestButtonSecondary = __decorateElement(_init18, 0, "TestButtonSecondary", _TestButtonSecondary_decorators, TestButtonSecondary);
+// Same group as test-button-primary - they'll appear together
+__publicField(TestButtonSecondary, "demoGroup", "Buttons");
+__publicField(TestButtonSecondary, "demo", () => x`
+    <test-button-secondary>Secondary Action</test-button-secondary>
+  `);
+__publicField(TestButtonSecondary, "styles", [
+  i`
+      :host {
+        display: inline-block;
+      }
+      button {
+        background: transparent;
+        color: #3b82f6;
+        border: 1px solid #3b82f6;
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      button:hover {
+        background: rgba(59, 130, 246, 0.1);
+      }
+    `
+]);
+__runInitializers(_init18, 1, TestButtonSecondary);
+
+// test/elements/test-button-danger.ts
+var _label_dec3, _a17, _TestButtonDanger_decorators, _init19, _label3;
+_TestButtonDanger_decorators = [t4("test-button-danger")];
+var TestButtonDanger = class extends (_a17 = DeesElement, _label_dec3 = [n5({ type: String })], _a17) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _label3, __runInitializers(_init19, 8, this, "Delete")), __runInitializers(_init19, 11, this);
+  }
+  render() {
+    return x`<button><slot>${this.label}</slot></button>`;
+  }
+};
+_init19 = __decoratorStart(_a17);
+_label3 = new WeakMap();
+__decorateElement(_init19, 4, "label", _label_dec3, TestButtonDanger, _label3);
+TestButtonDanger = __decorateElement(_init19, 0, "TestButtonDanger", _TestButtonDanger_decorators, TestButtonDanger);
+// Same group as other buttons
+__publicField(TestButtonDanger, "demoGroup", "Buttons");
+__publicField(TestButtonDanger, "demo", () => x`
+    <test-button-danger>Delete</test-button-danger>
+  `);
+__publicField(TestButtonDanger, "styles", [
+  i`
+      :host {
+        display: inline-block;
+      }
+      button {
+        background: #ef4444;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      button:hover {
+        background: #dc2626;
+      }
+    `
+]);
+__runInitializers(_init19, 1, TestButtonDanger);
+
+// test/elements/test-input-text.ts
+var _value_dec, _placeholder_dec, _a18, _TestInputText_decorators, _init20, _placeholder, _value;
+_TestInputText_decorators = [t4("test-input-text")];
+var TestInputText = class extends (_a18 = DeesElement, _placeholder_dec = [n5({ type: String })], _value_dec = [n5({ type: String })], _a18) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _placeholder, __runInitializers(_init20, 8, this, "")), __runInitializers(_init20, 11, this);
+    __privateAdd(this, _value, __runInitializers(_init20, 12, this, "")), __runInitializers(_init20, 15, this);
+  }
+  render() {
+    return x`
+      <input
+        type="text"
+        .placeholder=${this.placeholder}
+        .value=${this.value}
+        @input=${(e10) => this.value = e10.target.value}
+      />
+    `;
+  }
+};
+_init20 = __decoratorStart(_a18);
+_placeholder = new WeakMap();
+_value = new WeakMap();
+__decorateElement(_init20, 4, "placeholder", _placeholder_dec, TestInputText, _placeholder);
+__decorateElement(_init20, 4, "value", _value_dec, TestInputText, _value);
+TestInputText = __decorateElement(_init20, 0, "TestInputText", _TestInputText_decorators, TestInputText);
+// Different group - "Inputs"
+__publicField(TestInputText, "demoGroup", "Inputs");
+__publicField(TestInputText, "demo", () => x`
+    <test-input-text placeholder="Enter text..."></test-input-text>
+  `);
+__publicField(TestInputText, "styles", [
+  i`
+      :host {
+        display: inline-block;
+      }
+      input {
+        background: #1a1a1a;
+        color: #e5e5e5;
+        border: 1px solid #333;
+        padding: 10px 14px;
+        border-radius: 6px;
+        font-size: 14px;
+        outline: none;
+        transition: border-color 0.2s;
+        min-width: 200px;
+      }
+      input:focus {
+        border-color: #3b82f6;
+      }
+      input::placeholder {
+        color: #666;
+      }
+    `
+]);
+__runInitializers(_init20, 1, TestInputText);
+
+// test/elements/test-input-checkbox.ts
+var _checked_dec, _label_dec4, _a19, _TestInputCheckbox_decorators, _init21, _label4, _checked;
+_TestInputCheckbox_decorators = [t4("test-input-checkbox")];
+var TestInputCheckbox = class extends (_a19 = DeesElement, _label_dec4 = [n5({ type: String })], _checked_dec = [n5({ type: Boolean })], _a19) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _label4, __runInitializers(_init21, 8, this, "Checkbox")), __runInitializers(_init21, 11, this);
+    __privateAdd(this, _checked, __runInitializers(_init21, 12, this, false)), __runInitializers(_init21, 15, this);
+  }
+  render() {
+    return x`
+      <div
+        class="checkbox ${this.checked ? "checked" : ""}"
+        @click=${() => this.checked = !this.checked}
+      ></div>
+      <span class="label">${this.label}</span>
+    `;
+  }
+};
+_init21 = __decoratorStart(_a19);
+_label4 = new WeakMap();
+_checked = new WeakMap();
+__decorateElement(_init21, 4, "label", _label_dec4, TestInputCheckbox, _label4);
+__decorateElement(_init21, 4, "checked", _checked_dec, TestInputCheckbox, _checked);
+TestInputCheckbox = __decorateElement(_init21, 0, "TestInputCheckbox", _TestInputCheckbox_decorators, TestInputCheckbox);
+// Same group as test-input-text
+__publicField(TestInputCheckbox, "demoGroup", "Inputs");
+__publicField(TestInputCheckbox, "demo", () => x`
+    <test-input-checkbox label="Accept terms and conditions"></test-input-checkbox>
+  `);
+__publicField(TestInputCheckbox, "styles", [
+  i`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+      }
+      .checkbox {
+        width: 18px;
+        height: 18px;
+        border: 1px solid #333;
+        border-radius: 4px;
+        background: #1a1a1a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+      }
+      .checkbox.checked {
+        background: #3b82f6;
+        border-color: #3b82f6;
+      }
+      .checkbox.checked::after {
+        content: '✓';
+        color: white;
+        font-size: 12px;
+      }
+      .label {
+        color: #e5e5e5;
+        font-size: 14px;
+      }
+    `
+]);
+__runInitializers(_init21, 1, TestInputCheckbox);
 
 // test/views/index.ts
 var views_exports = {};
@@ -45655,13 +46428,13 @@ __export(views_exports, {
 });
 
 // test/views/view-dashboard.ts
-var _notificationCount_dec, _title_dec, _a14, _ViewDashboard_decorators, _init16, _title, _notificationCount;
+var _notificationCount_dec, _title_dec, _a20, _ViewDashboard_decorators, _init22, _title, _notificationCount;
 _ViewDashboard_decorators = [t4("view-dashboard")];
-var ViewDashboard = class extends (_a14 = DeesElement, _title_dec = [n5()], _notificationCount_dec = [n5({ type: Number })], _a14) {
+var ViewDashboard = class extends (_a20 = DeesElement, _title_dec = [n5()], _notificationCount_dec = [n5({ type: Number })], _a20) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _title, __runInitializers(_init16, 8, this, "Dashboard")), __runInitializers(_init16, 11, this);
-    __privateAdd(this, _notificationCount, __runInitializers(_init16, 12, this, 3)), __runInitializers(_init16, 15, this);
+    __privateAdd(this, _title, __runInitializers(_init22, 8, this, "Dashboard")), __runInitializers(_init22, 11, this);
+    __privateAdd(this, _notificationCount, __runInitializers(_init22, 12, this, 3)), __runInitializers(_init22, 15, this);
   }
   render() {
     return x`
@@ -45742,12 +46515,12 @@ var ViewDashboard = class extends (_a14 = DeesElement, _title_dec = [n5()], _not
     `;
   }
 };
-_init16 = __decoratorStart(_a14);
+_init22 = __decoratorStart(_a20);
 _title = new WeakMap();
 _notificationCount = new WeakMap();
-__decorateElement(_init16, 4, "title", _title_dec, ViewDashboard, _title);
-__decorateElement(_init16, 4, "notificationCount", _notificationCount_dec, ViewDashboard, _notificationCount);
-ViewDashboard = __decorateElement(_init16, 0, "ViewDashboard", _ViewDashboard_decorators, ViewDashboard);
+__decorateElement(_init22, 4, "title", _title_dec, ViewDashboard, _title);
+__decorateElement(_init22, 4, "notificationCount", _notificationCount_dec, ViewDashboard, _notificationCount);
+ViewDashboard = __decorateElement(_init22, 0, "ViewDashboard", _ViewDashboard_decorators, ViewDashboard);
 __publicField(ViewDashboard, "demo", () => x`<view-dashboard></view-dashboard>`);
 __publicField(ViewDashboard, "styles", [
   cssManager.defaultStyles,
@@ -45943,17 +46716,17 @@ __publicField(ViewDashboard, "styles", [
       }
     `
 ]);
-__runInitializers(_init16, 1, ViewDashboard);
+__runInitializers(_init22, 1, ViewDashboard);
 
 // test/views/view-settings.ts
-var _userEmail_dec, _userName_dec, _activeTab_dec, _a15, _ViewSettings_decorators, _init17, _activeTab, _userName, _userEmail;
+var _userEmail_dec, _userName_dec, _activeTab_dec, _a21, _ViewSettings_decorators, _init23, _activeTab, _userName, _userEmail;
 _ViewSettings_decorators = [t4("view-settings")];
-var ViewSettings = class extends (_a15 = DeesElement, _activeTab_dec = [n5()], _userName_dec = [n5()], _userEmail_dec = [n5()], _a15) {
+var ViewSettings = class extends (_a21 = DeesElement, _activeTab_dec = [n5()], _userName_dec = [n5()], _userEmail_dec = [n5()], _a21) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _activeTab, __runInitializers(_init17, 8, this, "profile")), __runInitializers(_init17, 11, this);
-    __privateAdd(this, _userName, __runInitializers(_init17, 12, this, "John Doe")), __runInitializers(_init17, 15, this);
-    __privateAdd(this, _userEmail, __runInitializers(_init17, 16, this, "john@example.com")), __runInitializers(_init17, 19, this);
+    __privateAdd(this, _activeTab, __runInitializers(_init23, 8, this, "profile")), __runInitializers(_init23, 11, this);
+    __privateAdd(this, _userName, __runInitializers(_init23, 12, this, "John Doe")), __runInitializers(_init23, 15, this);
+    __privateAdd(this, _userEmail, __runInitializers(_init23, 16, this, "john@example.com")), __runInitializers(_init23, 19, this);
   }
   handleTabClick(tab2) {
     this.activeTab = tab2;
@@ -46112,14 +46885,14 @@ var ViewSettings = class extends (_a15 = DeesElement, _activeTab_dec = [n5()], _
     `;
   }
 };
-_init17 = __decoratorStart(_a15);
+_init23 = __decoratorStart(_a21);
 _activeTab = new WeakMap();
 _userName = new WeakMap();
 _userEmail = new WeakMap();
-__decorateElement(_init17, 4, "activeTab", _activeTab_dec, ViewSettings, _activeTab);
-__decorateElement(_init17, 4, "userName", _userName_dec, ViewSettings, _userName);
-__decorateElement(_init17, 4, "userEmail", _userEmail_dec, ViewSettings, _userEmail);
-ViewSettings = __decorateElement(_init17, 0, "ViewSettings", _ViewSettings_decorators, ViewSettings);
+__decorateElement(_init23, 4, "activeTab", _activeTab_dec, ViewSettings, _activeTab);
+__decorateElement(_init23, 4, "userName", _userName_dec, ViewSettings, _userName);
+__decorateElement(_init23, 4, "userEmail", _userEmail_dec, ViewSettings, _userEmail);
+ViewSettings = __decorateElement(_init23, 0, "ViewSettings", _ViewSettings_decorators, ViewSettings);
 __publicField(ViewSettings, "demo", [
   () => x`<view-settings></view-settings>`,
   () => x`<view-settings activeTab="notifications"></view-settings>`,
@@ -46380,17 +47153,17 @@ __publicField(ViewSettings, "styles", [
       }
     `
 ]);
-__runInitializers(_init17, 1, ViewSettings);
+__runInitializers(_init23, 1, ViewSettings);
 
 // test/views/view-empty-state.ts
-var _description_dec, _title_dec2, _variant_dec, _a16, _ViewEmptyState_decorators, _init18, _variant, _title2, _description;
+var _description_dec, _title_dec2, _variant_dec, _a22, _ViewEmptyState_decorators, _init24, _variant, _title2, _description;
 _ViewEmptyState_decorators = [t4("view-empty-state")];
-var ViewEmptyState = class extends (_a16 = DeesElement, _variant_dec = [n5()], _title_dec2 = [n5()], _description_dec = [n5()], _a16) {
+var ViewEmptyState = class extends (_a22 = DeesElement, _variant_dec = [n5()], _title_dec2 = [n5()], _description_dec = [n5()], _a22) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _variant, __runInitializers(_init18, 8, this, "empty")), __runInitializers(_init18, 11, this);
-    __privateAdd(this, _title2, __runInitializers(_init18, 12, this, "")), __runInitializers(_init18, 15, this);
-    __privateAdd(this, _description, __runInitializers(_init18, 16, this, "")), __runInitializers(_init18, 19, this);
+    __privateAdd(this, _variant, __runInitializers(_init24, 8, this, "empty")), __runInitializers(_init24, 11, this);
+    __privateAdd(this, _title2, __runInitializers(_init24, 12, this, "")), __runInitializers(_init24, 15, this);
+    __privateAdd(this, _description, __runInitializers(_init24, 16, this, "")), __runInitializers(_init24, 19, this);
   }
   getContent() {
     switch (this.variant) {
@@ -46451,14 +47224,14 @@ var ViewEmptyState = class extends (_a16 = DeesElement, _variant_dec = [n5()], _
     }
   }
 };
-_init18 = __decoratorStart(_a16);
+_init24 = __decoratorStart(_a22);
 _variant = new WeakMap();
 _title2 = new WeakMap();
 _description = new WeakMap();
-__decorateElement(_init18, 4, "variant", _variant_dec, ViewEmptyState, _variant);
-__decorateElement(_init18, 4, "title", _title_dec2, ViewEmptyState, _title2);
-__decorateElement(_init18, 4, "description", _description_dec, ViewEmptyState, _description);
-ViewEmptyState = __decorateElement(_init18, 0, "ViewEmptyState", _ViewEmptyState_decorators, ViewEmptyState);
+__decorateElement(_init24, 4, "variant", _variant_dec, ViewEmptyState, _variant);
+__decorateElement(_init24, 4, "title", _title_dec2, ViewEmptyState, _title2);
+__decorateElement(_init24, 4, "description", _description_dec, ViewEmptyState, _description);
+ViewEmptyState = __decorateElement(_init24, 0, "ViewEmptyState", _ViewEmptyState_decorators, ViewEmptyState);
 __publicField(ViewEmptyState, "demo", [
   () => x`<view-empty-state></view-empty-state>`,
   () => x`<view-empty-state variant="no-results"></view-empty-state>`,
@@ -46638,7 +47411,7 @@ __publicField(ViewEmptyState, "styles", [
       }
     `
 ]);
-__runInitializers(_init18, 1, ViewEmptyState);
+__runInitializers(_init24, 1, ViewEmptyState);
 
 // test/pages/index.ts
 var pages_exports = {};