@easemate/web-kit 0.3.3 → 0.3.5

package/build/elements.js

@@ -1,4 +1,4 @@
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/button/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/button/index.ts
 import { html as html2 } from "lit-html";
 
 // src/decorators/Component.ts
@@ -400,7 +400,7 @@ function Prop(options = {}) {
   };
 }
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/button/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/button/index.ts
 function applyDecs2203RFactory() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
@@ -1083,10 +1083,10 @@ var Button = class extends (_HTMLElement = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/checkbox/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/checkbox/index.ts
 import { html as html3 } from "lit-html";
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/shared.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/shared.ts
 var CONTROL_CHANGE_EVENT = "control-change";
 var dispatchControlEvent = (host, type, detail) => {
   host.dispatchEvent(new CustomEvent(type, {
@@ -1350,7 +1350,7 @@ function Query(selector, userOptions) {
   return createQueryDecorator(selector, merged);
 }
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/checkbox/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/checkbox/index.ts
 function applyDecs2203RFactory2() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
@@ -2123,10 +2123,10 @@ var Checkbox = class extends (_HTMLElement2 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/color/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/color/index.ts
 import { html as html11 } from "lit-html";
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/popover/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/popover/index.ts
 import { html as html4 } from "lit-html";
 function applyDecs2203RFactory3() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -2506,11 +2506,13 @@ var _HTMLElement3;
 var _dec13;
 var _dec23;
 var _dec33;
+var _dec43;
+var _init_contentElement;
 var _init_placement;
 var _init_offset;
 var _init_open;
 var _initProto3;
-var nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID()}`;
+var nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID().slice(0, 8)}`;
 var _Popover;
 _dec8 = Component({
   tag: "ease-popover",
@@ -2520,7 +2522,6 @@ _dec8 = Component({
     :host {
       display: contents;
       --ease-popover-offset: 8px;
-      --ease-popover-anchor-name: --ease-popover-anchor;
       --ease-popover-transform-origin: center center;
       --ease-popover-duration: 200ms;
       --ease-popover-content-min-width: auto;
@@ -2533,140 +2534,110 @@ _dec8 = Component({
     }
 
     [part="content"] {
-      position-anchor: var(--ease-popover-anchor-name);
       position: fixed;
+      position-anchor: var(--ease-popover-anchor-name);
       margin: 0;
-      transform-origin: var(--ease-popover-transform-origin);
+      padding: 0;
+      border: none;
+      background: transparent;
+      overflow: visible;
       width: var(--ease-popover-content-width);
       min-width: var(--ease-popover-content-min-width);
       max-width: var(--ease-popover-content-max-width);
       box-sizing: border-box;
-      overscroll-behavior: contain;
-      z-index: 100;
-      display: none;
     }
 
-    :host([open]) [part="content"] {
+    [part="content"]:popover-open {
       display: block;
     }
 
     :host([placement="top-start"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
+      position-area: top span-right;
+      margin-bottom: var(--ease-popover-offset);
     }
-
     :host([placement="top-center"]) [part="content"] {
       position-area: top center;
-      top: anchor(top);
-      left: anchor(center);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
+      margin-bottom: var(--ease-popover-offset);
     }
-
     :host([placement="top-end"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
+      position-area: top span-left;
+      margin-bottom: var(--ease-popover-offset);
     }
-
     :host([placement="bottom-start"]) [part="content"] {
-      position-area: bottom right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
+      position-area: bottom span-right;
+      margin-top: var(--ease-popover-offset);
     }
-
     :host([placement="bottom-center"]) [part="content"] {
       position-area: bottom center;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
+      margin-top: var(--ease-popover-offset);
     }
-
     :host([placement="bottom-end"]) [part="content"] {
-      position-area: bottom left;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 var(--ease-popover-offset);
+      position-area: bottom span-left;
+      margin-top: var(--ease-popover-offset);
     }
-
     :host([placement="left-start"]) [part="content"] {
-      position-area: left bottom;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
+      position-area: left span-bottom;
+      margin-right: var(--ease-popover-offset);
     }
-
     :host([placement="left-center"]) [part="content"] {
       position-area: left center;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
+      margin-right: var(--ease-popover-offset);
     }
-
     :host([placement="left-end"]) [part="content"] {
-      position-area: left top;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
+      position-area: left span-top;
+      margin-right: var(--ease-popover-offset);
     }
-
     :host([placement="right-start"]) [part="content"] {
-      position-area: right end;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
+      position-area: right span-bottom;
+      margin-left: var(--ease-popover-offset);
     }
-
     :host([placement="right-center"]) [part="content"] {
       position-area: right center;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
+      margin-left: var(--ease-popover-offset);
     }
-
     :host([placement="right-end"]) [part="content"] {
-      position-area: right start;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
+      position-area: right span-top;
+      margin-left: var(--ease-popover-offset);
     }
   `
-}), _dec13 = Prop({
+}), _dec13 = Query('[part="content"]'), _dec23 = Prop({
   reflect: true,
-  defaultValue: "bottom-start",
-  onChange() {
-    this.handlePlacementChange();
-  }
-}), _dec23 = Prop({
+  defaultValue: "bottom-start"
+}), _dec33 = Prop({
   type: Number,
   reflect: true,
   defaultValue: 8,
   onChange() {
     this.handleOffsetChange();
   }
-}), _dec33 = Prop({
+}), _dec43 = Prop({
   type: Boolean,
-  reflect: true
+  reflect: true,
+  onChange() {
+    this.handleOpenChange();
+  }
 });
 var Popover = class extends (_HTMLElement3 = HTMLElement) {
   static {
-    ({ e: [_init_placement, _init_offset, _init_open, _initProto3], c: [_Popover, _initClass3] } = _apply_decs_2203_r3(this, [
+    ({ e: [_init_contentElement, _init_placement, _init_offset, _init_open, _initProto3], c: [_Popover, _initClass3] } = _apply_decs_2203_r3(this, [
       [
         _dec13,
         1,
-        "placement"
+        "contentElement"
       ],
       [
         _dec23,
         1,
-        "offset"
+        "placement"
       ],
       [
         _dec33,
         1,
+        "offset"
+      ],
+      [
+        _dec43,
+        1,
         "open"
       ]
     ], [
@@ -2674,89 +2645,79 @@ var Popover = class extends (_HTMLElement3 = HTMLElement) {
     ], _HTMLElement3));
   }
   #anchorName;
-  #contentElement;
-  #initialized;
+  #___private_contentElement_1;
   get contentElement() {
-    return this.#contentElement;
+    return this.#___private_contentElement_1;
+  }
+  set contentElement(_v) {
+    this.#___private_contentElement_1 = _v;
   }
-  #___private_placement_1;
+  #___private_placement_2;
   get placement() {
-    return this.#___private_placement_1;
+    return this.#___private_placement_2;
   }
   set placement(_v) {
-    this.#___private_placement_1 = _v;
+    this.#___private_placement_2 = _v;
   }
-  #___private_offset_2;
+  #___private_offset_3;
   get offset() {
-    return this.#___private_offset_2;
+    return this.#___private_offset_3;
   }
   set offset(_v) {
-    this.#___private_offset_2 = _v;
+    this.#___private_offset_3 = _v;
   }
-  #___private_open_3;
+  #___private_open_4;
   get open() {
-    return this.#___private_open_3;
+    return this.#___private_open_4;
   }
   set open(_v) {
-    this.#___private_open_3 = _v;
+    this.#___private_open_4 = _v;
+  }
+  handleOffsetChange() {
+    const offset = Number.isFinite(this.offset) ? this.offset : 8;
+    this.style.setProperty("--ease-popover-offset", `${offset}px`);
+  }
+  handleOpenChange() {
+    const content = this.contentElement;
+    if (!content) {
+      return;
+    }
+    if (this.open) {
+      content.showPopover();
+    } else {
+      content.hidePopover();
+    }
   }
   connectedCallback() {
-    this.#syncAnchorName();
-    this.#syncOffset();
+    this.style.setProperty("--ease-popover-anchor-name", this.#anchorName);
+    this.handleOffsetChange();
   }
-  disconnectedCallback() {
-    this.#contentElement = null;
-    this.#initialized = false;
+  afterRender() {
+    const content = this.contentElement;
+    if (content && this.open) {
+      try {
+        content.showPopover();
+      } catch (_e) {
+      }
+    }
   }
   render() {
     return html4`
-      <slot slot="trigger" name="trigger"></slot>
-      <div
-        part="content"
-        data-popover-content
-        role="region"
-        data-placement=${this.placement}
-      >
+      <slot name="trigger"></slot>
+      <div part="content" popover="manual" role="region">
         <slot></slot>
       </div>
     `;
   }
-  handlePlacementChange() {
-    if (!this.#initialized) {
-      this.requestRender();
-      return;
-    }
-    this.#syncPlacement();
-  }
-  handleOffsetChange() {
-    if (!this.#initialized) {
-      this.requestRender();
-      return;
-    }
-    this.#syncOffset();
-  }
-  #syncPlacement() {
-    this.dataset.placement = this.placement;
-    if (this.#contentElement) {
-      this.#contentElement.dataset.placement = this.placement;
-    }
-  }
-  #syncOffset() {
-    const offset = Number.isFinite(this.offset) ? this.offset : 0;
-    this.style.setProperty("--ease-popover-offset", `${offset}px`);
-  }
-  #syncAnchorName() {
-    this.style.setProperty("--ease-popover-anchor-name", this.#anchorName);
-  }
   static {
     _initClass3();
   }
   constructor(...args) {
-    super(...args), this.#anchorName = (_initProto3(this), nextAnchorName()), this.#contentElement = null, this.#initialized = false, this.#___private_placement_1 = _init_placement(this), this.#___private_offset_2 = _init_offset(this, 8), this.#___private_open_3 = _init_open(this, false);
+    super(...args), this.#anchorName = (_initProto3(this), nextAnchorName()), this.#___private_contentElement_1 = _init_contentElement(this), this.#___private_placement_2 = _init_placement(this), this.#___private_offset_3 = _init_offset(this, 8), this.#___private_open_4 = _init_open(this, false);
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/animation/chevron.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/chevron.ts
 import { html as html5 } from "lit-html";
 function applyDecs2203RFactory4() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -3220,10 +3181,10 @@ var IconChevron = class extends (_HTMLElement4 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/dropdown/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/dropdown/index.ts
 import { html as html6 } from "lit-html";
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/utils/dismiss-controller.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/utils/dismiss-controller.ts
 var DismissController = class {
   #onDismiss;
   #context;
@@ -3435,7 +3396,7 @@ function OutsideClick(options = {}) {
   };
 }
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/dropdown/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/dropdown/index.ts
 function applyDecs2203RFactory5() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
@@ -3814,7 +3775,7 @@ var _HTMLElement5;
 var _dec15;
 var _dec24;
 var _dec34;
-var _dec43;
+var _dec44;
 var _dec53;
 var _dec63;
 var _dec72;
@@ -4111,7 +4072,7 @@ _dec10 = Component({
 }), _dec34 = Prop({
   type: Boolean,
   reflect: true
-}), _dec43 = Prop({
+}), _dec44 = Prop({
   type: Boolean,
   reflect: true
 }), _dec53 = Prop({
@@ -4170,7 +4131,7 @@ var Dropdown = class extends (_HTMLElement5 = HTMLElement) {
         "pill"
       ],
       [
-        _dec43,
+        _dec44,
         1,
         "headless"
       ],
@@ -4907,7 +4868,7 @@ var Dropdown = class extends (_HTMLElement5 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/input/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/input/index.ts
 import { html as html7 } from "lit-html";
 function applyDecs2203RFactory6() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -5287,7 +5248,7 @@ var _HTMLElement6;
 var _dec18;
 var _dec25;
 var _dec35;
-var _dec44;
+var _dec45;
 var _dec54;
 var _dec64;
 var _dec73;
@@ -5498,7 +5459,7 @@ _dec17 = Component({
 }), _dec35 = Prop({
   reflect: true,
   defaultValue: "text"
-}), _dec44 = Prop({
+}), _dec45 = Prop({
   reflect: true
 }), _dec54 = Prop({
   type: Boolean,
@@ -5536,7 +5497,7 @@ var Input = class extends (_HTMLElement6 = HTMLElement) {
         "type"
       ],
       [
-        _dec44,
+        _dec45,
         1,
         "name"
       ],
@@ -5701,10 +5662,10 @@ var Input = class extends (_HTMLElement6 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/color/picker.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/color/picker.ts
 import { html as html10 } from "lit-html";
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/color/utils.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/color/utils.ts
 var clamp01 = (value) => Math.max(0, Math.min(1, value));
 function hsvToRgb(h, s, v) {
   let hue = (h % 360 + 360) % 360;
@@ -6018,7 +5979,7 @@ function styleObject(input) {
   return styleMap(definedEntries);
 }
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/arrows-vertical.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/arrows-vertical.ts
 import { html as html8 } from "lit-html";
 function applyDecs2203RFactory7() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -6429,7 +6390,7 @@ var IconArrowsVertical = class extends (_HTMLElement7 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/picker.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/picker.ts
 import { html as html9 } from "lit-html";
 function applyDecs2203RFactory8() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -6844,7 +6805,7 @@ var IconPicker = class extends (_HTMLElement8 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/color/picker.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/color/picker.ts
 function applyDecs2203RFactory9() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
@@ -7223,7 +7184,7 @@ var _HTMLElement9;
 var _dec110;
 var _dec26;
 var _dec36;
-var _dec45;
+var _dec46;
 var _init_saturationArea;
 var _init_hueArea;
 var _init_hexInput;
@@ -7546,7 +7507,7 @@ _dec21 = Component({
       </div>
     `;
   }
-}), _dec110 = Query('[part="saturation"]'), _dec26 = Query('[part="hue"]'), _dec36 = Query('[part="hex-input"]'), _dec45 = Prop({
+}), _dec110 = Query('[part="saturation"]'), _dec26 = Query('[part="hue"]'), _dec36 = Query('[part="hex-input"]'), _dec46 = Prop({
   reflect: true,
   defaultValue: "#FF0000",
   onChange(value) {
@@ -7574,7 +7535,7 @@ var ColorPicker = class extends (_HTMLElement9 = HTMLElement) {
         "hexInput"
       ],
       [
-        _dec45,
+        _dec46,
         1,
         "value"
       ]
@@ -7811,7 +7772,7 @@ var ColorPicker = class extends (_HTMLElement9 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/color/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/color/index.ts
 function applyDecs2203RFactory10() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
@@ -8190,7 +8151,7 @@ var _HTMLElement10;
 var _dec111;
 var _dec28;
 var _dec37;
-var _dec46;
+var _dec47;
 var _init_dropdown;
 var _init_value5;
 var _init_disabled5;
@@ -8267,7 +8228,7 @@ _dec27 = Component({
 }), _dec37 = Prop({
   type: Boolean,
   reflect: true
-}), _dec46 = Prop({
+}), _dec47 = Prop({
   reflect: true,
   defaultValue: "bottom-start"
 });
@@ -8290,7 +8251,7 @@ var ColorInput = class extends (_HTMLElement10 = HTMLElement) {
         "disabled"
       ],
       [
-        _dec46,
+        _dec47,
         1,
         "placement"
       ]
@@ -8407,7 +8368,7 @@ var ColorInput = class extends (_HTMLElement10 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/field/index.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/field/index.ts
 import { html as html12 } from "lit-html";
 function applyDecs2203RFactory11() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -8801,6 +8762,7 @@ _dec29 = Component({
     }
 
     [part="field"] {
+      scroll-snap-align: start;
       display: grid;
       grid-template-columns: var(--ease-field-label-width, 36%) auto;
       column-gap: var(--ease-field-column-gap, 12px);
@@ -8903,7 +8865,7 @@ var Field = class extends (_HTMLElement11 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/animation/clear.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/folder/index.ts
 import { html as html13 } from "lit-html";
 function applyDecs2203RFactory12() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -9280,85 +9242,240 @@ function _apply_decs_2203_r12(targetClass, memberDecs, classDecs, parentClass) {
 var _dec30;
 var _initClass12;
 var _HTMLElement12;
-var _IconClear;
+var _dec114;
+var _dec211;
+var _dec38;
+var _init_open3;
+var _init_headline;
+var _init_maxHeight2;
+var _initProto10;
+var _Folder;
 _dec30 = Component({
-  tag: "ease-icon-clear",
+  tag: "ease-folder",
+  shadowMode: "open",
   styles: `
+    @property --top-fade {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @property --bottom-fade {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @keyframes scroll-fade {
+      0% {
+        --top-fade: 0px;
+      }
+      10%, 100% {
+        --top-fade: 8px;
+      }
+      0%, 90% {
+        --bottom-fade: 8px;
+      }
+      100% {
+        --bottom-fade: 0px;
+      }
+    }
+
+
     :host {
       display: block;
-      width: var(--ease-icon-size, 16px);
-      height: var(--ease-icon-size, 16px);
-      fill: none;
-      stroke: currentColor;
-      stroke-width: .75;
-      stroke-linecap: round;
-      stroke-linejoin: round;
+      width: 100%;
     }
 
-    [part="clear"] {
-      & > path {
+    [part="section"] {
+      display: block;
+      width: 100%;
+      border-radius: var(--ease-folder-radius);
+      border: 1px solid var(--ease-folder-border-color);
+      background-color: var(--ease-folder-background);
+      background-clip: padding-box;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
 
-        &:first-child {
-          translate: var(--ease-icon-clear-path-translate, 0);
-          transition: translate var(--ease-icon-clear-path-duration, 0.2s);
-          transition-delay: var(--ease-icon-clear-path-delay, 0s);
-        }
+    [part="header"] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: var(--ease-folder-padding);
+      box-sizing: border-box;
+      cursor: pointer;
+      user-select: none;
+    }
 
-        &:not(:first-child) {
-          stroke-dasharray: 100 0 100;
-          stroke-dashoffset: var(--ease-icon-clear-lines-offset, 100);
-          transition: stroke-dashoffset var(--ease-icon-clear-lines-duration, 0.2s);
-          transition-delay: var(--ease-icon-clear-lines-delay, 0s);
-        }
-      }
+    [part="icon"] {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ease-folder-icon-color);
+    }
 
-      g {
-        path {
-          transform-box: fill-box;
-          transform-origin: 50% 50%;
-          transition: rotate var(--ease-icon-clear-star-duration, 0.2s), scale var(--ease-icon-clear-star-duration, 0.2s);
+    [part="headline"] {
+      flex: 1 1 auto;
+      font-size: var(--ease-folder-title-font-size);
+      font-weight: var(--ease-folder-title-font-weight);
+      line-height: 16px;
+      font-family: var(--ease-font-family);
+      color: var(--ease-folder-title-color);
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-          &:first-child {
-            rotate: var(--ease-icon-clear-star-1-rotate, 0deg);
-            scale: var(--ease-icon-clear-star-1-scale, 1);
-            transition-delay: var(--ease-icon-clear-star-1-delay, 0s);
-          }
+    [part="chevron"] {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ease-folder-chevron-color);
+      transition: color 200ms cubic-bezier(.25, 0, .5, 1);
+    }
 
-          &:last-child {
-            rotate: var(--ease-icon-clear-star-2-rotate, 0deg);
-            scale: var(--ease-icon-clear-star-2-scale, 1);
-            transition-delay: var(--ease-icon-clear-star-2-delay, 0s);
-          }
-        }
+    [part="header"]:hover [part="chevron"] {
+      color: var(--ease-folder-chevron-color-hover);
+    }
+
+    [part="content"] {
+      height: 0;
+      overflow: hidden;
+      transition: height 200ms cubic-bezier(.25, 0, .5, 1);
+    }
+
+    :host([open]) [part="content"] {
+      height: auto;
+    }
+
+    [part="body"] {
+      display: grid;
+      grid-gap: var(--ease-folder-gap);
+      padding: var(--ease-folder-padding);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      mask-image: linear-gradient(to bottom, #0000, #ffff var(--top-fade) calc(100% - var(--bottom-fade)), #0000);
+      animation-name: scroll-fade;
+      animation-timeline: scroll(self y);
+      scroll-snap-type: y mandatory;
+      scrollbar-width: none;
+
+       &::-webkit-scrollbar {
+        display: none;
       }
     }
-  `,
-  template() {
-    return html13`
-      <svg part="clear" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M11.7613 10.334L13.7071 12.2798C14.1011 12.6739 14.1011 13.3127 13.7071 13.7067C13.3131 14.1007 12.6742 14.1007 12.2802 13.7067L10.3344 11.7609M11.7613 10.334L10.9541 8.08932M11.7613 10.334L10.3344 11.7609M10.3344 11.7609L8.08973 10.9537M6.69581 12.3476L12.348 6.69544C12.6942 6.34922 12.6942 5.7879 12.348 5.44168L11.892 4.98574C11.5458 4.63952 10.9845 4.63952 10.6383 4.98574L4.9861 10.6379C4.63989 10.9841 4.63989 11.5454 4.9861 11.8917L5.44204 12.3476C5.78826 12.6938 6.34959 12.6938 6.69581 12.3476Z" />
-        <g>
-          <path d="M3.3313 2.6645H4.66519M3.99824 1.99756V3.33145" />
-          <path d="M4.66516 5.99946H5.99905M5.33211 5.33252V6.66641" />
-        </g>
-        <path d="M7.33301 1.99756L8.6669 3.33145" pathlength="100" />
-        <path d="M3.6648 8.33386L1.99744 6.6665" pathlength="100" />
-      </svg>
-    `;
-  }
+
+  `
+}), _dec114 = Prop({
+  type: Boolean,
+  reflect: true,
+  attribute: "open",
+  defaultValue: false
+}), _dec211 = Prop({
+  reflect: true,
+  attribute: "headline",
+  defaultValue: ""
+}), _dec38 = Prop({
+  reflect: true,
+  attribute: "max-height",
+  defaultValue: null
 });
-var IconClear = class extends (_HTMLElement12 = HTMLElement) {
+var Folder = class extends (_HTMLElement12 = HTMLElement) {
   static {
-    ({ c: [_IconClear, _initClass12] } = _apply_decs_2203_r12(this, [], [
+    ({ e: [_init_open3, _init_headline, _init_maxHeight2, _initProto10], c: [_Folder, _initClass12] } = _apply_decs_2203_r12(this, [
+      [
+        _dec114,
+        1,
+        "open"
+      ],
+      [
+        _dec211,
+        1,
+        "headline"
+      ],
+      [
+        _dec38,
+        1,
+        "maxHeight"
+      ]
+    ], [
       _dec30
     ], _HTMLElement12));
   }
-  static {
-    _initClass12();
+  #___private_open_1;
+  get open() {
+    return this.#___private_open_1;
   }
-};
-
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/animation/grid.ts
+  set open(_v) {
+    this.#___private_open_1 = _v;
+  }
+  #___private_headline_2;
+  get headline() {
+    return this.#___private_headline_2;
+  }
+  set headline(_v) {
+    this.#___private_headline_2 = _v;
+  }
+  #___private_maxHeight_3;
+  get maxHeight() {
+    return this.#___private_maxHeight_3;
+  }
+  set maxHeight(_v) {
+    this.#___private_maxHeight_3 = _v;
+  }
+  render() {
+    return html13`
+      <section part="section">
+        <div part="header" @click=${this.#handleHeaderClick}>
+          <span part="icon">
+            <ease-icon-folder state=${this.open ? "open" : "close"}></ease-icon-folder>
+          </span>
+          <span part="headline">
+            ${this.headline}
+          </span>
+          <span part="chevron">
+            <ease-icon-chevron state=${this.open ? "up" : "down"}></ease-icon-chevron>
+          </span>
+        </div>
+        <div part="content" style=${this.maxHeight ? `max-height: ${this.maxHeight}` : ""}>
+          <div part="body">
+            <slot></slot>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  #handleHeaderClick;
+  #stopPropagation;
+  static {
+    _initClass12();
+  }
+  constructor(...args) {
+    super(...args), this.#___private_open_1 = (_initProto10(this), _init_open3(this, false)), this.#___private_headline_2 = _init_headline(this, null), this.#___private_maxHeight_3 = _init_maxHeight2(this, null), this.#handleHeaderClick = (event) => {
+      this.toggle();
+      this.dispatchEvent(new CustomEvent("folder-toggle", {
+        detail: {
+          open: this.open,
+          event
+        },
+        bubbles: true,
+        composed: true
+      }));
+    }, this.#stopPropagation = (event) => {
+      event.stopPropagation();
+    };
+  }
+};
+
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/clear.ts
 import { html as html14 } from "lit-html";
 function applyDecs2203RFactory13() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -9729,17 +9846,941 @@ function applyDecs2203RFactory13() {
     };
   };
 }
-function _apply_decs_2203_r13(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r13 = applyDecs2203RFactory13())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r13(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r13 = applyDecs2203RFactory13())(targetClass, memberDecs, classDecs, parentClass);
+}
+var _dec31;
+var _initClass13;
+var _HTMLElement13;
+var _IconClear;
+_dec31 = Component({
+  tag: "ease-icon-clear",
+  styles: `
+    :host {
+      display: block;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+      fill: none;
+      stroke: currentColor;
+      stroke-width: .75;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    [part="clear"] {
+      & > path {
+
+        &:first-child {
+          translate: var(--ease-icon-clear-path-translate, 0);
+          transition: translate var(--ease-icon-clear-path-duration, 0.2s);
+          transition-delay: var(--ease-icon-clear-path-delay, 0s);
+        }
+
+        &:not(:first-child) {
+          stroke-dasharray: 100 0 100;
+          stroke-dashoffset: var(--ease-icon-clear-lines-offset, 100);
+          transition: stroke-dashoffset var(--ease-icon-clear-lines-duration, 0.2s);
+          transition-delay: var(--ease-icon-clear-lines-delay, 0s);
+        }
+      }
+
+      g {
+        path {
+          transform-box: fill-box;
+          transform-origin: 50% 50%;
+          transition: rotate var(--ease-icon-clear-star-duration, 0.2s), scale var(--ease-icon-clear-star-duration, 0.2s);
+
+          &:first-child {
+            rotate: var(--ease-icon-clear-star-1-rotate, 0deg);
+            scale: var(--ease-icon-clear-star-1-scale, 1);
+            transition-delay: var(--ease-icon-clear-star-1-delay, 0s);
+          }
+
+          &:last-child {
+            rotate: var(--ease-icon-clear-star-2-rotate, 0deg);
+            scale: var(--ease-icon-clear-star-2-scale, 1);
+            transition-delay: var(--ease-icon-clear-star-2-delay, 0s);
+          }
+        }
+      }
+    }
+  `,
+  template() {
+    return html14`
+      <svg part="clear" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.7613 10.334L13.7071 12.2798C14.1011 12.6739 14.1011 13.3127 13.7071 13.7067C13.3131 14.1007 12.6742 14.1007 12.2802 13.7067L10.3344 11.7609M11.7613 10.334L10.9541 8.08932M11.7613 10.334L10.3344 11.7609M10.3344 11.7609L8.08973 10.9537M6.69581 12.3476L12.348 6.69544C12.6942 6.34922 12.6942 5.7879 12.348 5.44168L11.892 4.98574C11.5458 4.63952 10.9845 4.63952 10.6383 4.98574L4.9861 10.6379C4.63989 10.9841 4.63989 11.5454 4.9861 11.8917L5.44204 12.3476C5.78826 12.6938 6.34959 12.6938 6.69581 12.3476Z" />
+        <g>
+          <path d="M3.3313 2.6645H4.66519M3.99824 1.99756V3.33145" />
+          <path d="M4.66516 5.99946H5.99905M5.33211 5.33252V6.66641" />
+        </g>
+        <path d="M7.33301 1.99756L8.6669 3.33145" pathlength="100" />
+        <path d="M3.6648 8.33386L1.99744 6.6665" pathlength="100" />
+      </svg>
+    `;
+  }
+});
+var IconClear = class extends (_HTMLElement13 = HTMLElement) {
+  static {
+    ({ c: [_IconClear, _initClass13] } = _apply_decs_2203_r13(this, [], [
+      _dec31
+    ], _HTMLElement13));
+  }
+  static {
+    _initClass13();
+  }
+};
+
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/folder.ts
+import { html as html15 } from "lit-html";
+function applyDecs2203RFactory14() {
+  function createAddInitializerMethod(initializers, decoratorFinishedRef) {
+    return function addInitializer(initializer) {
+      assertNotFinished(decoratorFinishedRef, "addInitializer");
+      assertCallable(initializer, "An initializer");
+      initializers.push(initializer);
+    };
+  }
+  function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
+    var kindStr;
+    switch (kind) {
+      case 1:
+        kindStr = "accessor";
+        break;
+      case 2:
+        kindStr = "method";
+        break;
+      case 3:
+        kindStr = "getter";
+        break;
+      case 4:
+        kindStr = "setter";
+        break;
+      default:
+        kindStr = "field";
+    }
+    var ctx = {
+      kind: kindStr,
+      name: isPrivate ? "#" + name : name,
+      static: isStatic,
+      private: isPrivate,
+      metadata
+    };
+    var decoratorFinishedRef = {
+      v: false
+    };
+    ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
+    var get, set;
+    if (kind === 0) {
+      if (isPrivate) {
+        get = desc.get;
+        set = desc.set;
+      } else {
+        get = function() {
+          return this[name];
+        };
+        set = function(v) {
+          this[name] = v;
+        };
+      }
+    } else if (kind === 2) {
+      get = function() {
+        return desc.value;
+      };
+    } else {
+      if (kind === 1 || kind === 3) {
+        get = function() {
+          return desc.get.call(this);
+        };
+      }
+      if (kind === 1 || kind === 4) {
+        set = function(v) {
+          desc.set.call(this, v);
+        };
+      }
+    }
+    ctx.access = get && set ? {
+      get,
+      set
+    } : get ? {
+      get
+    } : {
+      set
+    };
+    try {
+      return dec(value, ctx);
+    } finally {
+      decoratorFinishedRef.v = true;
+    }
+  }
+  function assertNotFinished(decoratorFinishedRef, fnName) {
+    if (decoratorFinishedRef.v) {
+      throw new Error("attempted to call " + fnName + " after decoration was finished");
+    }
+  }
+  function assertCallable(fn, hint) {
+    if (typeof fn !== "function") {
+      throw new TypeError(hint + " must be a function");
+    }
+  }
+  function assertValidReturnValue(kind, value) {
+    var type = typeof value;
+    if (kind === 1) {
+      if (type !== "object" || value === null) {
+        throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+      }
+      if (value.get !== void 0) {
+        assertCallable(value.get, "accessor.get");
+      }
+      if (value.set !== void 0) {
+        assertCallable(value.set, "accessor.set");
+      }
+      if (value.init !== void 0) {
+        assertCallable(value.init, "accessor.init");
+      }
+    } else if (type !== "function") {
+      var hint;
+      if (kind === 0) {
+        hint = "field";
+      } else if (kind === 10) {
+        hint = "class";
+      } else {
+        hint = "method";
+      }
+      throw new TypeError(hint + " decorators must return a function or void 0");
+    }
+  }
+  function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
+    var decs = decInfo[0];
+    var desc, init, value;
+    if (isPrivate) {
+      if (kind === 0 || kind === 1) {
+        desc = {
+          get: decInfo[3],
+          set: decInfo[4]
+        };
+      } else if (kind === 3) {
+        desc = {
+          get: decInfo[3]
+        };
+      } else if (kind === 4) {
+        desc = {
+          set: decInfo[3]
+        };
+      } else {
+        desc = {
+          value: decInfo[3]
+        };
+      }
+    } else if (kind !== 0) {
+      desc = Object.getOwnPropertyDescriptor(base, name);
+    }
+    if (kind === 1) {
+      value = {
+        get: desc.get,
+        set: desc.set
+      };
+    } else if (kind === 2) {
+      value = desc.value;
+    } else if (kind === 3) {
+      value = desc.get;
+    } else if (kind === 4) {
+      value = desc.set;
+    }
+    var newValue, get, set;
+    if (typeof decs === "function") {
+      newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+      if (newValue !== void 0) {
+        assertValidReturnValue(kind, newValue);
+        if (kind === 0) {
+          init = newValue;
+        } else if (kind === 1) {
+          init = newValue.init;
+          get = newValue.get || value.get;
+          set = newValue.set || value.set;
+          value = {
+            get,
+            set
+          };
+        } else {
+          value = newValue;
+        }
+      }
+    } else {
+      for (var i = decs.length - 1; i >= 0; i--) {
+        var dec = decs[i];
+        newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+        if (newValue !== void 0) {
+          assertValidReturnValue(kind, newValue);
+          var newInit;
+          if (kind === 0) {
+            newInit = newValue;
+          } else if (kind === 1) {
+            newInit = newValue.init;
+            get = newValue.get || value.get;
+            set = newValue.set || value.set;
+            value = {
+              get,
+              set
+            };
+          } else {
+            value = newValue;
+          }
+          if (newInit !== void 0) {
+            if (init === void 0) {
+              init = newInit;
+            } else if (typeof init === "function") {
+              init = [
+                init,
+                newInit
+              ];
+            } else {
+              init.push(newInit);
+            }
+          }
+        }
+      }
+    }
+    if (kind === 0 || kind === 1) {
+      if (init === void 0) {
+        init = function(instance, init2) {
+          return init2;
+        };
+      } else if (typeof init !== "function") {
+        var ownInitializers = init;
+        init = function(instance, init2) {
+          var value2 = init2;
+          for (var i2 = 0; i2 < ownInitializers.length; i2++) {
+            value2 = ownInitializers[i2].call(instance, value2);
+          }
+          return value2;
+        };
+      } else {
+        var originalInitializer = init;
+        init = function(instance, init2) {
+          return originalInitializer.call(instance, init2);
+        };
+      }
+      ret.push(init);
+    }
+    if (kind !== 0) {
+      if (kind === 1) {
+        desc.get = value.get;
+        desc.set = value.set;
+      } else if (kind === 2) {
+        desc.value = value;
+      } else if (kind === 3) {
+        desc.get = value;
+      } else if (kind === 4) {
+        desc.set = value;
+      }
+      if (isPrivate) {
+        if (kind === 1) {
+          ret.push(function(instance, args) {
+            return value.get.call(instance, args);
+          });
+          ret.push(function(instance, args) {
+            return value.set.call(instance, args);
+          });
+        } else if (kind === 2) {
+          ret.push(value);
+        } else {
+          ret.push(function(instance, args) {
+            return value.call(instance, args);
+          });
+        }
+      } else {
+        Object.defineProperty(base, name, desc);
+      }
+    }
+  }
+  function applyMemberDecs(Class, decInfos, metadata) {
+    var ret = [];
+    var protoInitializers;
+    var staticInitializers;
+    var existingProtoNonFields = /* @__PURE__ */ new Map();
+    var existingStaticNonFields = /* @__PURE__ */ new Map();
+    for (var i = 0; i < decInfos.length; i++) {
+      var decInfo = decInfos[i];
+      if (!Array.isArray(decInfo)) continue;
+      var kind = decInfo[1];
+      var name = decInfo[2];
+      var isPrivate = decInfo.length > 3;
+      var isStatic = kind >= 5;
+      var base;
+      var initializers;
+      if (isStatic) {
+        base = Class;
+        kind = kind - 5;
+        staticInitializers = staticInitializers || [];
+        initializers = staticInitializers;
+      } else {
+        base = Class.prototype;
+        protoInitializers = protoInitializers || [];
+        initializers = protoInitializers;
+      }
+      if (kind !== 0 && !isPrivate) {
+        var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
+        var existingKind = existingNonFields.get(name) || 0;
+        if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
+          throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
+        } else if (!existingKind && kind > 2) {
+          existingNonFields.set(name, kind);
+        } else {
+          existingNonFields.set(name, true);
+        }
+      }
+      applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
+    }
+    pushInitializers(ret, protoInitializers);
+    pushInitializers(ret, staticInitializers);
+    return ret;
+  }
+  function pushInitializers(ret, initializers) {
+    if (initializers) {
+      ret.push(function(instance) {
+        for (var i = 0; i < initializers.length; i++) {
+          initializers[i].call(instance);
+        }
+        return instance;
+      });
+    }
+  }
+  function applyClassDecs(targetClass, classDecs, metadata) {
+    if (classDecs.length > 0) {
+      var initializers = [];
+      var newClass = targetClass;
+      var name = targetClass.name;
+      for (var i = classDecs.length - 1; i >= 0; i--) {
+        var decoratorFinishedRef = {
+          v: false
+        };
+        try {
+          var nextNewClass = classDecs[i](newClass, {
+            kind: "class",
+            name,
+            addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
+            metadata
+          });
+        } finally {
+          decoratorFinishedRef.v = true;
+        }
+        if (nextNewClass !== void 0) {
+          assertValidReturnValue(10, nextNewClass);
+          newClass = nextNewClass;
+        }
+      }
+      return [
+        defineMetadata(newClass, metadata),
+        function() {
+          for (var i2 = 0; i2 < initializers.length; i2++) {
+            initializers[i2].call(newClass);
+          }
+        }
+      ];
+    }
+  }
+  function defineMetadata(Class, metadata) {
+    return Object.defineProperty(Class, Symbol.metadata || /* @__PURE__ */ Symbol.for("Symbol.metadata"), {
+      configurable: true,
+      enumerable: true,
+      value: metadata
+    });
+  }
+  return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
+    if (parentClass !== void 0) {
+      var parentMetadata = parentClass[Symbol.metadata || /* @__PURE__ */ Symbol.for("Symbol.metadata")];
+    }
+    var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
+    var e = applyMemberDecs(targetClass, memberDecs, metadata);
+    if (!classDecs.length) defineMetadata(targetClass, metadata);
+    return {
+      e,
+      get c() {
+        return applyClassDecs(targetClass, classDecs, metadata);
+      }
+    };
+  };
+}
+function _apply_decs_2203_r14(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r14 = applyDecs2203RFactory14())(targetClass, memberDecs, classDecs, parentClass);
+}
+var _dec39;
+var _initClass14;
+var _HTMLElement14;
+var _dec115;
+var _init_state2;
+var _initProto11;
+var _IconFolder;
+_dec39 = Component({
+  tag: "ease-icon-folder",
+  styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="folder"] {
+      display: block;
+      position: relative;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+    }
+
+    [part="folder"]::before {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      width: 12px;
+      height: 6px;
+      top: 6px;
+      left: 50%;
+      transform: translate(-50%, .5px);
+      background-color: currentColor;
+      border-radius: 3px 3px 1px 1px;
+      transform-origin: 50% 100%;
+      transition: transform 200ms cubic-bezier(.25, 0, .5, 1);
+    }
+
+    [part="folder"][data-state="open"]::before {
+      transform: translate(-50%, .5px) scaleY(0.85) skewX(-28deg);
+    }
+
+    svg {
+      display: block;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.5;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `,
+  observedAttributes: [
+    "state"
+  ]
+}), _dec115 = Prop({
+  reflect: true,
+  attribute: "state",
+  defaultValue: "close"
+});
+var IconFolder = class extends (_HTMLElement14 = HTMLElement) {
+  static {
+    ({ e: [_init_state2, _initProto11], c: [_IconFolder, _initClass14] } = _apply_decs_2203_r14(this, [
+      [
+        _dec115,
+        1,
+        "state"
+      ]
+    ], [
+      _dec39
+    ], _HTMLElement14));
+  }
+  #___private_state_1;
+  get state() {
+    return this.#___private_state_1;
+  }
+  set state(_v) {
+    this.#___private_state_1 = _v;
+  }
+  render() {
+    return html15`
+      <div part="folder" data-state=${this.state}>
+        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path d="M2 11V5C2 3.89543 2.89543 3 4 3H5.5C6.12951 3 6.72229 3.29639 7.1 3.8L7.4 4.2C7.77771 4.70361 8.37049 5 9 5H12C13.1046 5 14 5.89543 14 7V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11Z" />
+        </svg>
+      </div>
+    `;
+  }
+  static {
+    _initClass14();
+  }
+  constructor(...args) {
+    super(...args), this.#___private_state_1 = (_initProto11(this), _init_state2(this));
+  }
+};
+
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/grid.ts
+import { html as html16 } from "lit-html";
+function applyDecs2203RFactory15() {
+  function createAddInitializerMethod(initializers, decoratorFinishedRef) {
+    return function addInitializer(initializer) {
+      assertNotFinished(decoratorFinishedRef, "addInitializer");
+      assertCallable(initializer, "An initializer");
+      initializers.push(initializer);
+    };
+  }
+  function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
+    var kindStr;
+    switch (kind) {
+      case 1:
+        kindStr = "accessor";
+        break;
+      case 2:
+        kindStr = "method";
+        break;
+      case 3:
+        kindStr = "getter";
+        break;
+      case 4:
+        kindStr = "setter";
+        break;
+      default:
+        kindStr = "field";
+    }
+    var ctx = {
+      kind: kindStr,
+      name: isPrivate ? "#" + name : name,
+      static: isStatic,
+      private: isPrivate,
+      metadata
+    };
+    var decoratorFinishedRef = {
+      v: false
+    };
+    ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
+    var get, set;
+    if (kind === 0) {
+      if (isPrivate) {
+        get = desc.get;
+        set = desc.set;
+      } else {
+        get = function() {
+          return this[name];
+        };
+        set = function(v) {
+          this[name] = v;
+        };
+      }
+    } else if (kind === 2) {
+      get = function() {
+        return desc.value;
+      };
+    } else {
+      if (kind === 1 || kind === 3) {
+        get = function() {
+          return desc.get.call(this);
+        };
+      }
+      if (kind === 1 || kind === 4) {
+        set = function(v) {
+          desc.set.call(this, v);
+        };
+      }
+    }
+    ctx.access = get && set ? {
+      get,
+      set
+    } : get ? {
+      get
+    } : {
+      set
+    };
+    try {
+      return dec(value, ctx);
+    } finally {
+      decoratorFinishedRef.v = true;
+    }
+  }
+  function assertNotFinished(decoratorFinishedRef, fnName) {
+    if (decoratorFinishedRef.v) {
+      throw new Error("attempted to call " + fnName + " after decoration was finished");
+    }
+  }
+  function assertCallable(fn, hint) {
+    if (typeof fn !== "function") {
+      throw new TypeError(hint + " must be a function");
+    }
+  }
+  function assertValidReturnValue(kind, value) {
+    var type = typeof value;
+    if (kind === 1) {
+      if (type !== "object" || value === null) {
+        throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+      }
+      if (value.get !== void 0) {
+        assertCallable(value.get, "accessor.get");
+      }
+      if (value.set !== void 0) {
+        assertCallable(value.set, "accessor.set");
+      }
+      if (value.init !== void 0) {
+        assertCallable(value.init, "accessor.init");
+      }
+    } else if (type !== "function") {
+      var hint;
+      if (kind === 0) {
+        hint = "field";
+      } else if (kind === 10) {
+        hint = "class";
+      } else {
+        hint = "method";
+      }
+      throw new TypeError(hint + " decorators must return a function or void 0");
+    }
+  }
+  function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
+    var decs = decInfo[0];
+    var desc, init, value;
+    if (isPrivate) {
+      if (kind === 0 || kind === 1) {
+        desc = {
+          get: decInfo[3],
+          set: decInfo[4]
+        };
+      } else if (kind === 3) {
+        desc = {
+          get: decInfo[3]
+        };
+      } else if (kind === 4) {
+        desc = {
+          set: decInfo[3]
+        };
+      } else {
+        desc = {
+          value: decInfo[3]
+        };
+      }
+    } else if (kind !== 0) {
+      desc = Object.getOwnPropertyDescriptor(base, name);
+    }
+    if (kind === 1) {
+      value = {
+        get: desc.get,
+        set: desc.set
+      };
+    } else if (kind === 2) {
+      value = desc.value;
+    } else if (kind === 3) {
+      value = desc.get;
+    } else if (kind === 4) {
+      value = desc.set;
+    }
+    var newValue, get, set;
+    if (typeof decs === "function") {
+      newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+      if (newValue !== void 0) {
+        assertValidReturnValue(kind, newValue);
+        if (kind === 0) {
+          init = newValue;
+        } else if (kind === 1) {
+          init = newValue.init;
+          get = newValue.get || value.get;
+          set = newValue.set || value.set;
+          value = {
+            get,
+            set
+          };
+        } else {
+          value = newValue;
+        }
+      }
+    } else {
+      for (var i = decs.length - 1; i >= 0; i--) {
+        var dec = decs[i];
+        newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+        if (newValue !== void 0) {
+          assertValidReturnValue(kind, newValue);
+          var newInit;
+          if (kind === 0) {
+            newInit = newValue;
+          } else if (kind === 1) {
+            newInit = newValue.init;
+            get = newValue.get || value.get;
+            set = newValue.set || value.set;
+            value = {
+              get,
+              set
+            };
+          } else {
+            value = newValue;
+          }
+          if (newInit !== void 0) {
+            if (init === void 0) {
+              init = newInit;
+            } else if (typeof init === "function") {
+              init = [
+                init,
+                newInit
+              ];
+            } else {
+              init.push(newInit);
+            }
+          }
+        }
+      }
+    }
+    if (kind === 0 || kind === 1) {
+      if (init === void 0) {
+        init = function(instance, init2) {
+          return init2;
+        };
+      } else if (typeof init !== "function") {
+        var ownInitializers = init;
+        init = function(instance, init2) {
+          var value2 = init2;
+          for (var i2 = 0; i2 < ownInitializers.length; i2++) {
+            value2 = ownInitializers[i2].call(instance, value2);
+          }
+          return value2;
+        };
+      } else {
+        var originalInitializer = init;
+        init = function(instance, init2) {
+          return originalInitializer.call(instance, init2);
+        };
+      }
+      ret.push(init);
+    }
+    if (kind !== 0) {
+      if (kind === 1) {
+        desc.get = value.get;
+        desc.set = value.set;
+      } else if (kind === 2) {
+        desc.value = value;
+      } else if (kind === 3) {
+        desc.get = value;
+      } else if (kind === 4) {
+        desc.set = value;
+      }
+      if (isPrivate) {
+        if (kind === 1) {
+          ret.push(function(instance, args) {
+            return value.get.call(instance, args);
+          });
+          ret.push(function(instance, args) {
+            return value.set.call(instance, args);
+          });
+        } else if (kind === 2) {
+          ret.push(value);
+        } else {
+          ret.push(function(instance, args) {
+            return value.call(instance, args);
+          });
+        }
+      } else {
+        Object.defineProperty(base, name, desc);
+      }
+    }
+  }
+  function applyMemberDecs(Class, decInfos, metadata) {
+    var ret = [];
+    var protoInitializers;
+    var staticInitializers;
+    var existingProtoNonFields = /* @__PURE__ */ new Map();
+    var existingStaticNonFields = /* @__PURE__ */ new Map();
+    for (var i = 0; i < decInfos.length; i++) {
+      var decInfo = decInfos[i];
+      if (!Array.isArray(decInfo)) continue;
+      var kind = decInfo[1];
+      var name = decInfo[2];
+      var isPrivate = decInfo.length > 3;
+      var isStatic = kind >= 5;
+      var base;
+      var initializers;
+      if (isStatic) {
+        base = Class;
+        kind = kind - 5;
+        staticInitializers = staticInitializers || [];
+        initializers = staticInitializers;
+      } else {
+        base = Class.prototype;
+        protoInitializers = protoInitializers || [];
+        initializers = protoInitializers;
+      }
+      if (kind !== 0 && !isPrivate) {
+        var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
+        var existingKind = existingNonFields.get(name) || 0;
+        if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
+          throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
+        } else if (!existingKind && kind > 2) {
+          existingNonFields.set(name, kind);
+        } else {
+          existingNonFields.set(name, true);
+        }
+      }
+      applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
+    }
+    pushInitializers(ret, protoInitializers);
+    pushInitializers(ret, staticInitializers);
+    return ret;
+  }
+  function pushInitializers(ret, initializers) {
+    if (initializers) {
+      ret.push(function(instance) {
+        for (var i = 0; i < initializers.length; i++) {
+          initializers[i].call(instance);
+        }
+        return instance;
+      });
+    }
+  }
+  function applyClassDecs(targetClass, classDecs, metadata) {
+    if (classDecs.length > 0) {
+      var initializers = [];
+      var newClass = targetClass;
+      var name = targetClass.name;
+      for (var i = classDecs.length - 1; i >= 0; i--) {
+        var decoratorFinishedRef = {
+          v: false
+        };
+        try {
+          var nextNewClass = classDecs[i](newClass, {
+            kind: "class",
+            name,
+            addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
+            metadata
+          });
+        } finally {
+          decoratorFinishedRef.v = true;
+        }
+        if (nextNewClass !== void 0) {
+          assertValidReturnValue(10, nextNewClass);
+          newClass = nextNewClass;
+        }
+      }
+      return [
+        defineMetadata(newClass, metadata),
+        function() {
+          for (var i2 = 0; i2 < initializers.length; i2++) {
+            initializers[i2].call(newClass);
+          }
+        }
+      ];
+    }
+  }
+  function defineMetadata(Class, metadata) {
+    return Object.defineProperty(Class, Symbol.metadata || /* @__PURE__ */ Symbol.for("Symbol.metadata"), {
+      configurable: true,
+      enumerable: true,
+      value: metadata
+    });
+  }
+  return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
+    if (parentClass !== void 0) {
+      var parentMetadata = parentClass[Symbol.metadata || /* @__PURE__ */ Symbol.for("Symbol.metadata")];
+    }
+    var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
+    var e = applyMemberDecs(targetClass, memberDecs, metadata);
+    if (!classDecs.length) defineMetadata(targetClass, metadata);
+    return {
+      e,
+      get c() {
+        return applyClassDecs(targetClass, classDecs, metadata);
+      }
+    };
+  };
+}
+function _apply_decs_2203_r15(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r15 = applyDecs2203RFactory15())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec31;
-var _initClass13;
-var _HTMLElement13;
-var _dec114;
-var _init_state2;
-var _initProto10;
+var _dec40;
+var _initClass15;
+var _HTMLElement15;
+var _dec116;
+var _init_state3;
+var _initProto12;
 var _IconGrid;
-_dec31 = Component({
+_dec40 = Component({
   tag: "ease-icon-grid",
   styles: `
     :host {
@@ -9784,22 +10825,22 @@ _dec31 = Component({
   observedAttributes: [
     "state"
   ]
-}), _dec114 = Prop({
+}), _dec116 = Prop({
   reflect: true,
   attribute: "state",
   defaultValue: "show"
 });
-var IconGrid = class extends (_HTMLElement13 = HTMLElement) {
+var IconGrid = class extends (_HTMLElement15 = HTMLElement) {
   static {
-    ({ e: [_init_state2, _initProto10], c: [_IconGrid, _initClass13] } = _apply_decs_2203_r13(this, [
+    ({ e: [_init_state3, _initProto12], c: [_IconGrid, _initClass15] } = _apply_decs_2203_r15(this, [
       [
-        _dec114,
+        _dec116,
         1,
         "state"
       ]
     ], [
-      _dec31
-    ], _HTMLElement13));
+      _dec40
+    ], _HTMLElement15));
   }
   #___private_state_1;
   get state() {
@@ -9809,7 +10850,7 @@ var IconGrid = class extends (_HTMLElement13 = HTMLElement) {
     this.#___private_state_1 = _v;
   }
   render() {
-    return html14`
+    return html16`
       <svg part="grid" viewBox="0 0 12 12" state=${this.state} xmlns="http://www.w3.org/2000/svg">
         <path d="M10.5018 5.49971V3.99909C10.5018 2.6178 9.38204 1.49805 8.00076 1.49805H3.99909C2.6178 1.49805 1.49805 2.6178 1.49805 3.99909V8.00076C1.49805 9.38204 2.6178 10.5018 3.99909 10.5018H5.49971" />
         <g data-state=${this.state}>
@@ -9827,16 +10868,16 @@ var IconGrid = class extends (_HTMLElement13 = HTMLElement) {
     `;
   }
   static {
-    _initClass13();
+    _initClass15();
   }
   constructor(...args) {
-    super(...args), this.#___private_state_1 = (_initProto10(this), _init_state2(this));
+    super(...args), this.#___private_state_1 = (_initProto12(this), _init_state3(this));
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/animation/loading.ts
-import { html as html15 } from "lit-html";
-function applyDecs2203RFactory14() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/loading.ts
+import { html as html17 } from "lit-html";
+function applyDecs2203RFactory16() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -10205,14 +11246,14 @@ function applyDecs2203RFactory14() {
     };
   };
 }
-function _apply_decs_2203_r14(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r14 = applyDecs2203RFactory14())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r16(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r16 = applyDecs2203RFactory16())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec38;
-var _initClass14;
-var _HTMLElement14;
+var _dec41;
+var _initClass16;
+var _HTMLElement16;
 var _Loading;
-_dec38 = Component({
+_dec41 = Component({
   tag: "ease-icon-loading",
   styles: `
     :host {
@@ -10264,7 +11305,7 @@ _dec38 = Component({
     }
   `,
   template() {
-    return html15`
+    return html17`
       <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <circle cx="6" cy="6" r="4.5" stroke-opacity="0.25" />
         <circle cx="6" cy="6" r="4.5" part="loading" pathlength="100" />
@@ -10272,20 +11313,20 @@ _dec38 = Component({
     `;
   }
 });
-var Loading = class extends (_HTMLElement14 = HTMLElement) {
+var Loading = class extends (_HTMLElement16 = HTMLElement) {
   static {
-    ({ c: [_Loading, _initClass14] } = _apply_decs_2203_r14(this, [], [
-      _dec38
-    ], _HTMLElement14));
+    ({ c: [_Loading, _initClass16] } = _apply_decs_2203_r16(this, [], [
+      _dec41
+    ], _HTMLElement16));
   }
   static {
-    _initClass14();
+    _initClass16();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/animation/snap.ts
-import { html as html16 } from "lit-html";
-function applyDecs2203RFactory15() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/snap.ts
+import { html as html18 } from "lit-html";
+function applyDecs2203RFactory17() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -10654,17 +11695,17 @@ function applyDecs2203RFactory15() {
     };
   };
 }
-function _apply_decs_2203_r15(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r15 = applyDecs2203RFactory15())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r17(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r17 = applyDecs2203RFactory17())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec39;
-var _initClass15;
-var _HTMLElement15;
-var _dec115;
-var _init_state3;
-var _initProto11;
+var _dec48;
+var _initClass17;
+var _HTMLElement17;
+var _dec117;
+var _init_state4;
+var _initProto13;
 var _Snap;
-_dec39 = Component({
+_dec48 = Component({
   tag: "ease-icon-snap",
   styles: `
     :host {
@@ -10751,22 +11792,22 @@ _dec39 = Component({
   observedAttributes: [
     "state"
   ]
-}), _dec115 = Prop({
+}), _dec117 = Prop({
   reflect: true,
   attribute: "state",
   defaultValue: "default"
 });
-var Snap = class extends (_HTMLElement15 = HTMLElement) {
+var Snap = class extends (_HTMLElement17 = HTMLElement) {
   static {
-    ({ e: [_init_state3, _initProto11], c: [_Snap, _initClass15] } = _apply_decs_2203_r15(this, [
+    ({ e: [_init_state4, _initProto13], c: [_Snap, _initClass17] } = _apply_decs_2203_r17(this, [
       [
-        _dec115,
+        _dec117,
         1,
         "state"
       ]
     ], [
-      _dec39
-    ], _HTMLElement15));
+      _dec48
+    ], _HTMLElement17));
   }
   #___private_state_1;
   get state() {
@@ -10782,7 +11823,7 @@ var Snap = class extends (_HTMLElement15 = HTMLElement) {
     const activePath2 = "M6.30855 7.08196C6.48218 6.9692 6.71426 7.01871 6.8271 7.19231C6.93984 7.36595 6.89035 7.59803 6.71675 7.71087C6.55769 7.8143 6.51399 7.8829 6.50288 7.9052C6.50718 7.91375 6.51671 7.92905 6.53804 7.95208C6.59186 8.01016 6.676 8.06871 6.76265 8.11614C6.80333 8.1384 6.83994 8.15555 6.86519 8.16692C6.87727 8.17236 6.88667 8.1762 6.89253 8.17864C6.89522 8.17976 6.89739 8.18117 6.89839 8.18157C6.92411 8.19492 6.94982 8.20826 6.97554 8.22161C7.34059 8.4726 7.44425 8.52362 7.48433 8.54387C7.51885 8.56133 7.56761 8.58533 7.62788 8.63665C7.66711 8.67009 7.71609 8.719 7.77827 8.78118C7.84064 8.84354 7.88955 8.89167 7.9228 8.93059C7.97354 8.98999 7.99693 9.03787 8.0146 9.07219C8.02503 9.09247 8.04365 9.12833 8.09077 9.20501C8.1741 9.33099 8.25744 9.45696 8.34077 9.58294C8.35477 9.60931 8.36876 9.63567 8.38276 9.66204C8.38276 9.66171 8.38276 9.66139 8.38276 9.66106C8.38311 9.66194 8.3836 9.6642 8.38472 9.66692C8.38713 9.67278 8.39182 9.68272 8.39741 9.69524C8.40866 9.72041 8.42527 9.75637 8.44722 9.7968C8.49432 9.88353 8.55171 9.96872 8.60933 10.0224C8.63022 10.0418 8.64563 10.0499 8.65425 10.0546C8.67716 10.0429 8.74616 9.99929 8.84858 9.84173C8.96155 9.66836 9.19361 9.61954 9.36714 9.73235C9.54063 9.84525 9.59026 10.0773 9.47749 10.2509C9.29202 10.5362 9.06335 10.7493 8.77534 10.7988C8.47563 10.8502 8.24137 10.7041 8.09858 10.5712C7.95494 10.4374 7.85125 10.2716 7.78804 10.1552C7.75497 10.0943 7.72938 10.0401 7.71187 10.0009C7.70702 9.99006 7.70284 9.98022 7.69917 9.97161C7.45448 9.61671 7.38641 9.49034 7.34761 9.41497C7.34662 9.41306 7.34544 9.41155 7.34468 9.41009C7.33244 9.39698 7.30693 9.37136 7.24702 9.31145C7.18316 9.24759 7.15849 9.22387 7.14644 9.21282C7.07033 9.17434 6.9431 9.10751 6.58589 8.86321C6.57737 8.85954 6.56726 8.85532 6.55659 8.85052C6.51749 8.83289 6.46383 8.80746 6.40327 8.77434C6.28687 8.71066 6.12089 8.60606 5.98726 8.46184C5.85457 8.31851 5.70938 8.0836 5.76069 7.78411C5.81025 7.49606 6.02305 7.26752 6.30855 7.08196C6.30855 7.08196 6.30855 7.08196 6.30855 7.08196Z";
     const path1 = this.state === "active" ? activePath : defaultPath;
     const path2 = this.state === "active" ? activePath2 : defaultPath2;
-    return html16`
+    return html18`
       <svg part="snap" viewBox="0 0 12 12" state=${this.state} xmlns="http://www.w3.org/2000/svg">
         <g part="cursor">
           <path d=${path1} />
@@ -10808,16 +11849,16 @@ var Snap = class extends (_HTMLElement15 = HTMLElement) {
     `;
   }
   static {
-    _initClass15();
+    _initClass17();
   }
   constructor(...args) {
-    super(...args), this.#___private_state_1 = (_initProto11(this), _init_state3(this));
+    super(...args), this.#___private_state_1 = (_initProto13(this), _init_state4(this));
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/anchor-add.ts
-import { html as html17 } from "lit-html";
-function applyDecs2203RFactory16() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/anchor-add.ts
+import { html as html19 } from "lit-html";
+function applyDecs2203RFactory18() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -11186,14 +12227,14 @@ function applyDecs2203RFactory16() {
     };
   };
 }
-function _apply_decs_2203_r16(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r16 = applyDecs2203RFactory16())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r18(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r18 = applyDecs2203RFactory18())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec40;
-var _initClass16;
-var _HTMLElement16;
+var _dec49;
+var _initClass18;
+var _HTMLElement18;
 var _IconAnchorAdd;
-_dec40 = Component({
+_dec49 = Component({
   tag: "ease-icon-anchor-add",
   styles: `
     :host {
@@ -11208,7 +12249,7 @@ _dec40 = Component({
     }
   `,
   template() {
-    return html17`
+    return html19`
       <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M2.70508 10.5003L5.30008 7.90527" />
         <path d="M6.59557 6.61121C6.95348 6.96913 6.95348 7.54942 6.59557 7.90734C6.23765 8.26525 5.65736 8.26525 5.29944 7.90734C4.94153 7.54942 4.94153 6.96913 5.29944 6.61121C5.65736 6.25329 6.23765 6.25329 6.59557 6.61121" />
@@ -11220,20 +12261,20 @@ _dec40 = Component({
     `;
   }
 });
-var IconAnchorAdd = class extends (_HTMLElement16 = HTMLElement) {
+var IconAnchorAdd = class extends (_HTMLElement18 = HTMLElement) {
   static {
-    ({ c: [_IconAnchorAdd, _initClass16] } = _apply_decs_2203_r16(this, [], [
-      _dec40
-    ], _HTMLElement16));
+    ({ c: [_IconAnchorAdd, _initClass18] } = _apply_decs_2203_r18(this, [], [
+      _dec49
+    ], _HTMLElement18));
   }
   static {
-    _initClass16();
+    _initClass18();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/anchor-remove.ts
-import { html as html18 } from "lit-html";
-function applyDecs2203RFactory17() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/anchor-remove.ts
+import { html as html20 } from "lit-html";
+function applyDecs2203RFactory19() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -11602,14 +12643,14 @@ function applyDecs2203RFactory17() {
     };
   };
 }
-function _apply_decs_2203_r17(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r17 = applyDecs2203RFactory17())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r19(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r19 = applyDecs2203RFactory19())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec41;
-var _initClass17;
-var _HTMLElement17;
+var _dec50;
+var _initClass19;
+var _HTMLElement19;
 var _IconAnchorRemove;
-_dec41 = Component({
+_dec50 = Component({
   tag: "ease-icon-anchor-remove",
   styles: `
     :host {
@@ -11624,7 +12665,7 @@ _dec41 = Component({
     }
   `,
   template() {
-    return html18`
+    return html20`
       <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M2.70508 10.5003L5.30008 7.90527" />
         <path d="M6.59557 6.61121C6.95348 6.96913 6.95348 7.54942 6.59557 7.90734C6.23765 8.26525 5.65736 8.26525 5.29944 7.90734C4.94153 7.54942 4.94153 6.96913 5.29944 6.61121C5.65736 6.25329 6.23765 6.25329 6.59557 6.61121" />
@@ -11635,20 +12676,20 @@ _dec41 = Component({
     `;
   }
 });
-var IconAnchorRemove = class extends (_HTMLElement17 = HTMLElement) {
+var IconAnchorRemove = class extends (_HTMLElement19 = HTMLElement) {
   static {
-    ({ c: [_IconAnchorRemove, _initClass17] } = _apply_decs_2203_r17(this, [], [
-      _dec41
-    ], _HTMLElement17));
+    ({ c: [_IconAnchorRemove, _initClass19] } = _apply_decs_2203_r19(this, [], [
+      _dec50
+    ], _HTMLElement19));
   }
   static {
-    _initClass17();
+    _initClass19();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/arrow-up.ts
-import { html as html19 } from "lit-html";
-function applyDecs2203RFactory18() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/arrow-up.ts
+import { html as html21 } from "lit-html";
+function applyDecs2203RFactory20() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -12017,14 +13058,14 @@ function applyDecs2203RFactory18() {
     };
   };
 }
-function _apply_decs_2203_r18(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r18 = applyDecs2203RFactory18())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r20(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r20 = applyDecs2203RFactory20())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec47;
-var _initClass18;
-var _HTMLElement18;
+var _dec51;
+var _initClass20;
+var _HTMLElement20;
 var _ArrowUp;
-_dec47 = Component({
+_dec51 = Component({
   tag: "ease-icon-arrow-up",
   styles: `
     :host {
@@ -12039,27 +13080,27 @@ _dec47 = Component({
     }
   `,
   template() {
-    return html19`
+    return html21`
       <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6.99992 12.6666V3.33331M6.99992 3.33331L2.33325 7.99998M6.99992 3.33331L11.6666 7.99998" />
       </svg>
     `;
   }
 });
-var ArrowUp = class extends (_HTMLElement18 = HTMLElement) {
+var ArrowUp = class extends (_HTMLElement20 = HTMLElement) {
   static {
-    ({ c: [_ArrowUp, _initClass18] } = _apply_decs_2203_r18(this, [], [
-      _dec47
-    ], _HTMLElement18));
+    ({ c: [_ArrowUp, _initClass20] } = _apply_decs_2203_r20(this, [], [
+      _dec51
+    ], _HTMLElement20));
   }
   static {
-    _initClass18();
+    _initClass20();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/bezier.ts
-import { html as html20 } from "lit-html";
-function applyDecs2203RFactory19() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier.ts
+import { html as html22 } from "lit-html";
+function applyDecs2203RFactory21() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -12428,14 +13469,14 @@ function applyDecs2203RFactory19() {
     };
   };
 }
-function _apply_decs_2203_r19(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r19 = applyDecs2203RFactory19())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r21(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r21 = applyDecs2203RFactory21())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec48;
-var _initClass19;
-var _HTMLElement19;
+var _dec55;
+var _initClass21;
+var _HTMLElement21;
 var _IconBezier;
-_dec48 = Component({
+_dec55 = Component({
   tag: "ease-icon-bezier",
   styles: `
     :host {
@@ -12446,27 +13487,27 @@ _dec48 = Component({
     }
   `,
   template() {
-    return html20`
+    return html22`
       <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
         <path d="M9.44279 8.84005C9.56156 9.00972 9.79538 9.05098 9.96505 8.93221C10.1347 8.81344 10.176 8.57962 10.0572 8.40995L9.75 8.625L9.44279 8.84005ZM1.94279 8.40995C1.82402 8.57962 1.86528 8.81344 2.03495 8.93221C2.20462 9.05098 2.43844 9.00972 2.55721 8.84005L2.25 8.625L1.94279 8.40995ZM7.21875 4.21875H6.84375C6.84375 4.68474 6.46599 5.0625 6 5.0625V5.4375V5.8125C6.8802 5.8125 7.59375 5.09895 7.59375 4.21875H7.21875ZM6 5.4375V5.0625C5.53401 5.0625 5.15625 4.68474 5.15625 4.21875H4.78125H4.40625C4.40625 5.09895 5.1198 5.8125 6 5.8125V5.4375ZM4.78125 4.21875H5.15625C5.15625 3.75276 5.53401 3.375 6 3.375V3V2.625C5.1198 2.625 4.40625 3.33855 4.40625 4.21875H4.78125ZM6 3V3.375C6.46599 3.375 6.84375 3.75276 6.84375 4.21875H7.21875H7.59375C7.59375 3.33855 6.8802 2.625 6 2.625V3ZM7.125 4.875L6.81779 5.09005L9.44279 8.84005L9.75 8.625L10.0572 8.40995L7.43221 4.65995L7.125 4.875ZM4.875 4.875L4.56779 4.65995L1.94279 8.40995L2.25 8.625L2.55721 8.84005L5.18221 5.09005L4.875 4.875Z" />
       </svg>
     `;
   }
 });
-var IconBezier = class extends (_HTMLElement19 = HTMLElement) {
+var IconBezier = class extends (_HTMLElement21 = HTMLElement) {
   static {
-    ({ c: [_IconBezier, _initClass19] } = _apply_decs_2203_r19(this, [], [
-      _dec48
-    ], _HTMLElement19));
+    ({ c: [_IconBezier, _initClass21] } = _apply_decs_2203_r21(this, [], [
+      _dec55
+    ], _HTMLElement21));
   }
   static {
-    _initClass19();
+    _initClass21();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/bezier-angle.ts
-import { html as html21 } from "lit-html";
-function applyDecs2203RFactory20() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier-angle.ts
+import { html as html23 } from "lit-html";
+function applyDecs2203RFactory22() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -12835,14 +13876,14 @@ function applyDecs2203RFactory20() {
     };
   };
 }
-function _apply_decs_2203_r20(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r20 = applyDecs2203RFactory20())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r22(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r22 = applyDecs2203RFactory22())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec49;
-var _initClass20;
-var _HTMLElement20;
+var _dec56;
+var _initClass22;
+var _HTMLElement22;
 var _IconBezierAngle;
-_dec49 = Component({
+_dec56 = Component({
   tag: "ease-icon-bezier-angle",
   styles: `
     :host {
@@ -12853,7 +13894,7 @@ _dec49 = Component({
     }
   `,
   template() {
-    return html21`
+    return html23`
       <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
         <path d="M1.875 4.21875C1.875 4.63296 1.53921 4.96875 1.125 4.96875C0.710786 4.96875 0.375 4.63296 0.375 4.21875C0.375 3.80454 0.710786 3.46875 1.125 3.46875C1.53921 3.46875 1.875 3.80454 1.875 4.21875Z"  fill-opacity="0.9"/>
         <path d="M1.64062 4.21875C1.64062 3.93398 1.40977 3.70312 1.125 3.70312C0.840228 3.70312 0.609375 3.93398 0.609375 4.21875C0.609375 4.50352 0.840228 4.73438 1.125 4.73438C1.40977 4.73438 1.64062 4.50352 1.64062 4.21875ZM2.10938 4.21875C2.10938 4.76241 1.66866 5.20312 1.125 5.20312C0.581345 5.20312 0.140625 4.76241 0.140625 4.21875C0.140625 3.67509 0.581345 3.23438 1.125 3.23438C1.66866 3.23438 2.10938 3.67509 2.10938 4.21875Z" />
@@ -12867,20 +13908,20 @@ _dec49 = Component({
     `;
   }
 });
-var IconBezierAngle = class extends (_HTMLElement20 = HTMLElement) {
+var IconBezierAngle = class extends (_HTMLElement22 = HTMLElement) {
   static {
-    ({ c: [_IconBezierAngle, _initClass20] } = _apply_decs_2203_r20(this, [], [
-      _dec49
-    ], _HTMLElement20));
+    ({ c: [_IconBezierAngle, _initClass22] } = _apply_decs_2203_r22(this, [], [
+      _dec56
+    ], _HTMLElement22));
   }
   static {
-    _initClass20();
+    _initClass22();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/bezier-distribute.ts
-import { html as html22 } from "lit-html";
-function applyDecs2203RFactory21() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier-distribute.ts
+import { html as html24 } from "lit-html";
+function applyDecs2203RFactory23() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -13249,14 +14290,14 @@ function applyDecs2203RFactory21() {
     };
   };
 }
-function _apply_decs_2203_r21(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r21 = applyDecs2203RFactory21())(targetClass, memberDecs, classDecs, parentClass);
-}
-var _dec50;
-var _initClass21;
-var _HTMLElement21;
+function _apply_decs_2203_r23(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r23 = applyDecs2203RFactory23())(targetClass, memberDecs, classDecs, parentClass);
+}
+var _dec57;
+var _initClass23;
+var _HTMLElement23;
 var _IconBezierDistribute;
-_dec50 = Component({
+_dec57 = Component({
   tag: "ease-icon-bezier-distribute",
   styles: `
     :host {
@@ -13267,7 +14308,7 @@ _dec50 = Component({
     }
   `,
   template() {
-    return html22`
+    return html24`
       <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
         <path d="M5.125 5.64502C5.33211 5.64502 5.5 5.81291 5.5 6.02002C5.5 6.22713 5.33211 6.39502 5.125 6.39502H2.5C2.29289 6.39502 2.125 6.22713 2.125 6.02002C2.125 5.81291 2.29289 5.64502 2.5 5.64502H5.125Z" />
         <path d="M2.125 6.02002C2.125 5.81313 1.95689 5.64502 1.75 5.64502C1.54311 5.64502 1.375 5.81313 1.375 6.02002C1.375 6.22691 1.54311 6.39502 1.75 6.39502C1.95689 6.39502 2.125 6.22691 2.125 6.02002ZM2.875 6.02002C2.875 6.64113 2.37111 7.14502 1.75 7.14502C1.12889 7.14502 0.625 6.64113 0.625 6.02002C0.625 5.39891 1.12889 4.89502 1.75 4.89502C2.37111 4.89502 2.875 5.39891 2.875 6.02002Z" />
@@ -13282,20 +14323,20 @@ _dec50 = Component({
     `;
   }
 });
-var IconBezierDistribute = class extends (_HTMLElement21 = HTMLElement) {
+var IconBezierDistribute = class extends (_HTMLElement23 = HTMLElement) {
   static {
-    ({ c: [_IconBezierDistribute, _initClass21] } = _apply_decs_2203_r21(this, [], [
-      _dec50
-    ], _HTMLElement21));
+    ({ c: [_IconBezierDistribute, _initClass23] } = _apply_decs_2203_r23(this, [], [
+      _dec57
+    ], _HTMLElement23));
   }
   static {
-    _initClass21();
+    _initClass23();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/bezier-length.ts
-import { html as html23 } from "lit-html";
-function applyDecs2203RFactory22() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier-length.ts
+import { html as html25 } from "lit-html";
+function applyDecs2203RFactory24() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -13664,14 +14705,14 @@ function applyDecs2203RFactory22() {
     };
   };
 }
-function _apply_decs_2203_r22(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r22 = applyDecs2203RFactory22())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r24(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r24 = applyDecs2203RFactory24())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec51;
-var _initClass22;
-var _HTMLElement22;
+var _dec58;
+var _initClass24;
+var _HTMLElement24;
 var _IconBezierLength;
-_dec51 = Component({
+_dec58 = Component({
   tag: "ease-icon-bezier-length",
   styles: `
     :host {
@@ -13682,7 +14723,7 @@ _dec51 = Component({
     }
   `,
   template() {
-    return html23`
+    return html25`
       <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
         <path d="M6.84375 4.21875C6.84375 3.75276 6.46599 3.375 6 3.375C5.53401 3.375 5.15625 3.75276 5.15625 4.21875C5.15625 4.68474 5.53401 5.0625 6 5.0625C6.46599 5.0625 6.84375 4.68474 6.84375 4.21875ZM7.59375 4.21875C7.59375 5.09895 6.8802 5.8125 6 5.8125C5.1198 5.8125 4.40625 5.09895 4.40625 4.21875C4.40625 3.33855 5.1198 2.625 6 2.625C6.8802 2.625 7.59375 3.33855 7.59375 4.21875Z" />
         <path d="M2.48438 4.21875C2.48438 4.76241 2.04366 5.20312 1.5 5.20312C0.956345 5.20312 0.515625 4.76241 0.515625 4.21875C0.515625 3.67509 0.956345 3.23438 1.5 3.23438C2.04366 3.23438 2.48438 3.67509 2.48438 4.21875Z" />
@@ -13694,20 +14735,20 @@ _dec51 = Component({
     `;
   }
 });
-var IconBezierLength = class extends (_HTMLElement22 = HTMLElement) {
+var IconBezierLength = class extends (_HTMLElement24 = HTMLElement) {
   static {
-    ({ c: [_IconBezierLength, _initClass22] } = _apply_decs_2203_r22(this, [], [
-      _dec51
-    ], _HTMLElement22));
+    ({ c: [_IconBezierLength, _initClass24] } = _apply_decs_2203_r24(this, [], [
+      _dec58
+    ], _HTMLElement24));
   }
   static {
-    _initClass22();
+    _initClass24();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/bezier-mirror.ts
-import { html as html24 } from "lit-html";
-function applyDecs2203RFactory23() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier-mirror.ts
+import { html as html26 } from "lit-html";
+function applyDecs2203RFactory25() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -14076,14 +15117,14 @@ function applyDecs2203RFactory23() {
     };
   };
 }
-function _apply_decs_2203_r23(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r23 = applyDecs2203RFactory23())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r25(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r25 = applyDecs2203RFactory25())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec55;
-var _initClass23;
-var _HTMLElement23;
+var _dec59;
+var _initClass25;
+var _HTMLElement25;
 var _IconBezierMirror;
-_dec55 = Component({
+_dec59 = Component({
   tag: "ease-icon-bezier-mirror",
   styles: `
     :host {
@@ -14094,7 +15135,7 @@ _dec55 = Component({
     }
   `,
   template() {
-    return html24`
+    return html26`
       <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
         <path d="M6.84375 4.21875C6.84375 3.75276 6.46599 3.375 6 3.375C5.53401 3.375 5.15625 3.75276 5.15625 4.21875C5.15625 4.68474 5.53401 5.0625 6 5.0625C6.46599 5.0625 6.84375 4.68474 6.84375 4.21875ZM7.59375 4.21875C7.59375 5.09895 6.8802 5.8125 6 5.8125C5.1198 5.8125 4.40625 5.09895 4.40625 4.21875C4.40625 3.33855 5.1198 2.625 6 2.625C6.8802 2.625 7.59375 3.33855 7.59375 4.21875Z" />
         <path d="M2.48438 4.21875C2.48438 4.76241 2.04366 5.20312 1.5 5.20312C0.956345 5.20312 0.515625 4.76241 0.515625 4.21875C0.515625 3.67509 0.956345 3.23438 1.5 3.23438C2.04366 3.23438 2.48438 3.67509 2.48438 4.21875Z" />
@@ -14106,20 +15147,20 @@ _dec55 = Component({
     `;
   }
 });
-var IconBezierMirror = class extends (_HTMLElement23 = HTMLElement) {
+var IconBezierMirror = class extends (_HTMLElement25 = HTMLElement) {
   static {
-    ({ c: [_IconBezierMirror, _initClass23] } = _apply_decs_2203_r23(this, [], [
-      _dec55
-    ], _HTMLElement23));
+    ({ c: [_IconBezierMirror, _initClass25] } = _apply_decs_2203_r25(this, [], [
+      _dec59
+    ], _HTMLElement25));
   }
   static {
-    _initClass23();
+    _initClass25();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/check.ts
-import { html as html25 } from "lit-html";
-function applyDecs2203RFactory24() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/check.ts
+import { html as html27 } from "lit-html";
+function applyDecs2203RFactory26() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -14488,14 +15529,14 @@ function applyDecs2203RFactory24() {
     };
   };
 }
-function _apply_decs_2203_r24(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r24 = applyDecs2203RFactory24())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r26(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r26 = applyDecs2203RFactory26())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec56;
-var _initClass24;
-var _HTMLElement24;
+var _dec60;
+var _initClass26;
+var _HTMLElement26;
 var _IconCheck;
-_dec56 = Component({
+_dec60 = Component({
   tag: "ease-icon-check",
   styles: `
     :host {
@@ -14510,27 +15551,27 @@ _dec56 = Component({
     }
   `,
   template() {
-    return html25`
+    return html27`
       <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M3 6.5L5.33333 9L10 4" path-length="100" />
       </svg>
     `;
   }
 });
-var IconCheck = class extends (_HTMLElement24 = HTMLElement) {
+var IconCheck = class extends (_HTMLElement26 = HTMLElement) {
   static {
-    ({ c: [_IconCheck, _initClass24] } = _apply_decs_2203_r24(this, [], [
-      _dec56
-    ], _HTMLElement24));
+    ({ c: [_IconCheck, _initClass26] } = _apply_decs_2203_r26(this, [], [
+      _dec60
+    ], _HTMLElement26));
   }
   static {
-    _initClass24();
+    _initClass26();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/circle-arrow-left.ts
-import { html as html26 } from "lit-html";
-function applyDecs2203RFactory25() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/circle-arrow-left.ts
+import { html as html28 } from "lit-html";
+function applyDecs2203RFactory27() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -14899,14 +15940,14 @@ function applyDecs2203RFactory25() {
     };
   };
 }
-function _apply_decs_2203_r25(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r25 = applyDecs2203RFactory25())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r27(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r27 = applyDecs2203RFactory27())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec57;
-var _initClass25;
-var _HTMLElement25;
+var _dec61;
+var _initClass27;
+var _HTMLElement27;
 var _IconCircleArrowLeft;
-_dec57 = Component({
+_dec61 = Component({
   tag: "ease-icon-circle-arrow-left",
   styles: `
     :host {
@@ -14921,27 +15962,27 @@ _dec57 = Component({
     }
   `,
   template() {
-    return html26`
+    return html28`
       <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M14.6667 6.66667C14.6667 6.66667 13.33 4.84548 12.2441 3.75883C11.1582 2.67218 9.6576 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C10.7354 14 13.0433 12.1695 13.7655 9.66667M14.6667 6.66667V2.66667M14.6667 6.66667H10.6667" />
       </svg>
     `;
   }
 });
-var IconCircleArrowLeft = class extends (_HTMLElement25 = HTMLElement) {
+var IconCircleArrowLeft = class extends (_HTMLElement27 = HTMLElement) {
   static {
-    ({ c: [_IconCircleArrowLeft, _initClass25] } = _apply_decs_2203_r25(this, [], [
-      _dec57
-    ], _HTMLElement25));
+    ({ c: [_IconCircleArrowLeft, _initClass27] } = _apply_decs_2203_r27(this, [], [
+      _dec61
+    ], _HTMLElement27));
   }
   static {
-    _initClass25();
+    _initClass27();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/circle-arrow-right.ts
-import { html as html27 } from "lit-html";
-function applyDecs2203RFactory26() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/circle-arrow-right.ts
+import { html as html29 } from "lit-html";
+function applyDecs2203RFactory28() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -15310,14 +16351,14 @@ function applyDecs2203RFactory26() {
     };
   };
 }
-function _apply_decs_2203_r26(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r26 = applyDecs2203RFactory26())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r28(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r28 = applyDecs2203RFactory28())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec58;
-var _initClass26;
-var _HTMLElement26;
+var _dec65;
+var _initClass28;
+var _HTMLElement28;
 var _IconCircleArrowRight;
-_dec58 = Component({
+_dec65 = Component({
   tag: "ease-icon-circle-arrow-right",
   styles: `
     :host {
@@ -15332,27 +16373,27 @@ _dec58 = Component({
     }
   `,
   template() {
-    return html27`
+    return html29`
       <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
         <path d="M1.33333 6.66667C1.33333 6.66667 2.66999 4.84548 3.75589 3.75883C4.84179 2.67218 6.3424 2 8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C5.2646 14 2.95674 12.1695 2.23451 9.66667M1.33333 6.66667V2.66667M1.33333 6.66667H5.33333" />
       </svg>
     `;
   }
 });
-var IconCircleArrowRight = class extends (_HTMLElement26 = HTMLElement) {
+var IconCircleArrowRight = class extends (_HTMLElement28 = HTMLElement) {
   static {
-    ({ c: [_IconCircleArrowRight, _initClass26] } = _apply_decs_2203_r26(this, [], [
-      _dec58
-    ], _HTMLElement26));
+    ({ c: [_IconCircleArrowRight, _initClass28] } = _apply_decs_2203_r28(this, [], [
+      _dec65
+    ], _HTMLElement28));
   }
   static {
-    _initClass26();
+    _initClass28();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/code.ts
-import { html as html28 } from "lit-html";
-function applyDecs2203RFactory27() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/code.ts
+import { html as html30 } from "lit-html";
+function applyDecs2203RFactory29() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -15721,14 +16762,14 @@ function applyDecs2203RFactory27() {
     };
   };
 }
-function _apply_decs_2203_r27(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r27 = applyDecs2203RFactory27())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r29(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r29 = applyDecs2203RFactory29())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec59;
-var _initClass27;
-var _HTMLElement27;
+var _dec66;
+var _initClass29;
+var _HTMLElement29;
 var _IconCode;
-_dec59 = Component({
+_dec66 = Component({
   tag: "ease-icon-code",
   styles: `
     :host {
@@ -15743,27 +16784,27 @@ _dec59 = Component({
     }
   `,
   template() {
-    return html28`
+    return html30`
       <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8 9L11 6L8 3M4 3L1 6L4 9" />
       </svg>
     `;
   }
 });
-var IconCode = class extends (_HTMLElement27 = HTMLElement) {
+var IconCode = class extends (_HTMLElement29 = HTMLElement) {
   static {
-    ({ c: [_IconCode, _initClass27] } = _apply_decs_2203_r27(this, [], [
-      _dec59
-    ], _HTMLElement27));
+    ({ c: [_IconCode, _initClass29] } = _apply_decs_2203_r29(this, [], [
+      _dec66
+    ], _HTMLElement29));
   }
   static {
-    _initClass27();
+    _initClass29();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/dots.ts
-import { html as html29 } from "lit-html";
-function applyDecs2203RFactory28() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/dots.ts
+import { html as html31 } from "lit-html";
+function applyDecs2203RFactory30() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -16132,14 +17173,14 @@ function applyDecs2203RFactory28() {
     };
   };
 }
-function _apply_decs_2203_r28(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r28 = applyDecs2203RFactory28())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r30(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r30 = applyDecs2203RFactory30())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec60;
-var _initClass28;
-var _HTMLElement28;
+var _dec67;
+var _initClass30;
+var _HTMLElement30;
 var _IconDots;
-_dec60 = Component({
+_dec67 = Component({
   tag: "ease-icon-dots",
   styles: `
     :host {
@@ -16154,7 +17195,7 @@ _dec60 = Component({
     }
   `,
   template() {
-    return html29`
+    return html31`
       <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00008 8.66655C8.36827 8.66655 8.66675 8.36808 8.66675 7.99989C8.66675 7.6317 8.36827 7.33322 8.00008 7.33322C7.63189 7.33322 7.33341 7.6317 7.33341 7.99989C7.33341 8.36808 7.63189 8.66655 8.00008 8.66655Z" />
         <path d="M12.6667 8.66655C13.0349 8.66655 13.3334 8.36808 13.3334 7.99989C13.3334 7.6317 13.0349 7.33322 12.6667 7.33322C12.2986 7.33322 12.0001 7.6317 12.0001 7.99989C12.0001 8.36808 12.2986 8.66655 12.6667 8.66655Z" />
@@ -16163,20 +17204,20 @@ _dec60 = Component({
     `;
   }
 });
-var IconDots = class extends (_HTMLElement28 = HTMLElement) {
+var IconDots = class extends (_HTMLElement30 = HTMLElement) {
   static {
-    ({ c: [_IconDots, _initClass28] } = _apply_decs_2203_r28(this, [], [
-      _dec60
-    ], _HTMLElement28));
+    ({ c: [_IconDots, _initClass30] } = _apply_decs_2203_r30(this, [], [
+      _dec67
+    ], _HTMLElement30));
   }
   static {
-    _initClass28();
+    _initClass30();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/mention.ts
-import { html as html30 } from "lit-html";
-function applyDecs2203RFactory29() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/mention.ts
+import { html as html32 } from "lit-html";
+function applyDecs2203RFactory31() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -16545,14 +17586,14 @@ function applyDecs2203RFactory29() {
     };
   };
 }
-function _apply_decs_2203_r29(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r29 = applyDecs2203RFactory29())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r31(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r31 = applyDecs2203RFactory31())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec61;
-var _initClass29;
-var _HTMLElement29;
+var _dec68;
+var _initClass31;
+var _HTMLElement31;
 var _IconMention;
-_dec61 = Component({
+_dec68 = Component({
   tag: "ease-icon-mention",
   styles: `
     :host {
@@ -16567,27 +17608,27 @@ _dec61 = Component({
     }
   `,
   template() {
-    return html30`
+    return html32`
       <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M10.4 5.59963V8.59962C10.4 9.07701 10.5896 9.53485 10.9272 9.87242C11.2648 10.21 11.7226 10.3996 12.2 10.3996C12.6774 10.3996 13.1352 10.21 13.4728 9.87242C13.8104 9.53485 14 9.07701 14 8.59962V7.99962C13.9999 6.64544 13.5417 5.33111 12.7 4.27035C11.8582 3.20958 10.6823 2.46476 9.36359 2.15701C8.04484 1.84925 6.66076 1.99665 5.43641 2.57525C4.21206 3.15384 3.21944 4.1296 2.61996 5.34386C2.02048 6.55812 1.84939 7.93947 2.13451 9.26329C2.41963 10.5871 3.14419 11.7756 4.19038 12.6354C5.23657 13.4952 6.54286 13.9758 7.89684 13.9991C9.25083 14.0224 10.5729 13.587 11.648 12.7636M10.4 7.99962C10.4 9.32511 9.32549 10.3996 8 10.3996C6.67452 10.3996 5.6 9.32511 5.6 7.99962C5.6 6.67414 6.67452 5.59963 8 5.59963C9.32549 5.59963 10.4 6.67414 10.4 7.99962Z" />
       </svg>
     `;
   }
 });
-var IconMention = class extends (_HTMLElement29 = HTMLElement) {
+var IconMention = class extends (_HTMLElement31 = HTMLElement) {
   static {
-    ({ c: [_IconMention, _initClass29] } = _apply_decs_2203_r29(this, [], [
-      _dec61
-    ], _HTMLElement29));
+    ({ c: [_IconMention, _initClass31] } = _apply_decs_2203_r31(this, [], [
+      _dec68
+    ], _HTMLElement31));
   }
   static {
-    _initClass29();
+    _initClass31();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/minus.ts
-import { html as html31 } from "lit-html";
-function applyDecs2203RFactory30() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/minus.ts
+import { html as html33 } from "lit-html";
+function applyDecs2203RFactory32() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -16956,14 +17997,14 @@ function applyDecs2203RFactory30() {
     };
   };
 }
-function _apply_decs_2203_r30(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r30 = applyDecs2203RFactory30())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r32(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r32 = applyDecs2203RFactory32())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec65;
-var _initClass30;
-var _HTMLElement30;
+var _dec69;
+var _initClass32;
+var _HTMLElement32;
 var _IconMinus;
-_dec65 = Component({
+_dec69 = Component({
   tag: "ease-icon-minus",
   styles: `
     :host {
@@ -16978,27 +18019,27 @@ _dec65 = Component({
     }
   `,
   template() {
-    return html31`
+    return html33`
       <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M5 7.99995H11" />
       </svg>
     `;
   }
 });
-var IconMinus = class extends (_HTMLElement30 = HTMLElement) {
+var IconMinus = class extends (_HTMLElement32 = HTMLElement) {
   static {
-    ({ c: [_IconMinus, _initClass30] } = _apply_decs_2203_r30(this, [], [
-      _dec65
-    ], _HTMLElement30));
+    ({ c: [_IconMinus, _initClass32] } = _apply_decs_2203_r32(this, [], [
+      _dec69
+    ], _HTMLElement32));
   }
   static {
-    _initClass30();
+    _initClass32();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/plus.ts
-import { html as html32 } from "lit-html";
-function applyDecs2203RFactory31() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/plus.ts
+import { html as html34 } from "lit-html";
+function applyDecs2203RFactory33() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -17367,14 +18408,14 @@ function applyDecs2203RFactory31() {
     };
   };
 }
-function _apply_decs_2203_r31(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r31 = applyDecs2203RFactory31())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r33(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r33 = applyDecs2203RFactory33())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec66;
-var _initClass31;
-var _HTMLElement31;
+var _dec70;
+var _initClass33;
+var _HTMLElement33;
 var _IconPlus;
-_dec66 = Component({
+_dec70 = Component({
   tag: "ease-icon-plus",
   styles: `
     :host {
@@ -17389,27 +18430,27 @@ _dec66 = Component({
     }
   `,
   template() {
-    return html32`
+    return html34`
       <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00018 4.28591C8.00018 4.28591 8.00018 8.42263 8.00018 11.714M4.28613 7.99995H11.7142" />
       </svg>
     `;
   }
 });
-var IconPlus = class extends (_HTMLElement31 = HTMLElement) {
-  static {
-    ({ c: [_IconPlus, _initClass31] } = _apply_decs_2203_r31(this, [], [
-      _dec66
-    ], _HTMLElement31));
+var IconPlus = class extends (_HTMLElement33 = HTMLElement) {
+  static {
+    ({ c: [_IconPlus, _initClass33] } = _apply_decs_2203_r33(this, [], [
+      _dec70
+    ], _HTMLElement33));
   }
   static {
-    _initClass31();
+    _initClass33();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/icons/interface/settings.ts
-import { html as html33 } from "lit-html";
-function applyDecs2203RFactory32() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/settings.ts
+import { html as html35 } from "lit-html";
+function applyDecs2203RFactory34() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -17778,14 +18819,14 @@ function applyDecs2203RFactory32() {
     };
   };
 }
-function _apply_decs_2203_r32(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r32 = applyDecs2203RFactory32())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r34(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r34 = applyDecs2203RFactory34())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec67;
-var _initClass32;
-var _HTMLElement32;
+var _dec71;
+var _initClass34;
+var _HTMLElement34;
 var _Settings;
-_dec67 = Component({
+_dec71 = Component({
   tag: "ease-icon-settings",
   styles: `
     :host {
@@ -17800,27 +18841,27 @@ _dec67 = Component({
     }
   `,
   template() {
-    return html33`
+    return html35`
       <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M2 5.33319L10 5.33319M10 5.33319C10 6.43776 10.8954 7.33319 12 7.33319C13.1046 7.33319 14 6.43776 14 5.33319C14 4.22862 13.1046 3.33319 12 3.33319C10.8954 3.33319 10 4.22862 10 5.33319ZM6 10.6665L14 10.6665M6 10.6665C6 11.7711 5.10457 12.6665 4 12.6665C2.89543 12.6665 2 11.7711 2 10.6665C2 9.56195 2.89543 8.66652 4 8.66652C5.10457 8.66652 6 9.56195 6 10.6665Z" />
       </svg>
     `;
   }
 });
-var Settings = class extends (_HTMLElement32 = HTMLElement) {
+var Settings = class extends (_HTMLElement34 = HTMLElement) {
   static {
-    ({ c: [_Settings, _initClass32] } = _apply_decs_2203_r32(this, [], [
-      _dec67
-    ], _HTMLElement32));
+    ({ c: [_Settings, _initClass34] } = _apply_decs_2203_r34(this, [], [
+      _dec71
+    ], _HTMLElement34));
   }
   static {
-    _initClass32();
+    _initClass34();
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/logo/index.ts
-import { html as html34 } from "lit-html";
-function applyDecs2203RFactory33() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/logo/index.ts
+import { html as html36 } from "lit-html";
+function applyDecs2203RFactory35() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -18189,21 +19230,21 @@ function applyDecs2203RFactory33() {
     };
   };
 }
-function _apply_decs_2203_r33(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r33 = applyDecs2203RFactory33())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r35(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r35 = applyDecs2203RFactory35())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec68;
-var _initClass33;
-var _HTMLElement33;
-var _dec116;
-var _dec211;
+var _dec74;
+var _initClass35;
+var _HTMLElement35;
+var _dec118;
+var _dec212;
 var _dec310;
 var _dec410;
 var _init_loading;
 var _init_intro;
 var _init_size;
 var _init_ariaLabel;
-var _initProto12;
+var _initProto14;
 var CENTER = {
   x: 74,
   y: 74
@@ -18352,7 +19393,7 @@ var sortByAngle = (ids) => ids.map((id) => DOTS_DATA.find((d) => d.id === id)).f
 var LOOP_DURATION = 1500;
 var ROTATION_DURATION = 600;
 var _LogoLoader;
-_dec68 = Component({
+_dec74 = Component({
   tag: "ease-logo-loader",
   styles: `
     :host {
@@ -18532,7 +19573,7 @@ _dec68 = Component({
     const state = host.state;
     const ariaLabel = host.ariaLabel;
     const ariaLabelTrimmed = ariaLabel?.trim() ?? "";
-    return html34`
+    return html36`
       <div
         class="logo-loader"
         data-state=${state}
@@ -18581,14 +19622,14 @@ _dec68 = Component({
       </div>
     `;
   }
-}), _dec116 = Prop({
+}), _dec118 = Prop({
   type: Boolean,
   attribute: "loading",
   defaultValue: false,
   onChange(next) {
     this.handleLoadingChange(next);
   }
-}), _dec211 = Prop({
+}), _dec212 = Prop({
   type: "string",
   attribute: "intro",
   defaultValue: "wave"
@@ -18601,16 +19642,16 @@ _dec68 = Component({
   attribute: "aria-label",
   defaultValue: null
 });
-var LogoLoader = class extends (_HTMLElement33 = HTMLElement) {
+var LogoLoader = class extends (_HTMLElement35 = HTMLElement) {
   static {
-    ({ e: [_init_loading, _init_intro, _init_size, _init_ariaLabel, _initProto12], c: [_LogoLoader, _initClass33] } = _apply_decs_2203_r33(this, [
+    ({ e: [_init_loading, _init_intro, _init_size, _init_ariaLabel, _initProto14], c: [_LogoLoader, _initClass35] } = _apply_decs_2203_r35(this, [
       [
-        _dec116,
+        _dec118,
         1,
         "loading"
       ],
       [
-        _dec211,
+        _dec212,
         1,
         "intro"
       ],
@@ -18625,8 +19666,8 @@ var LogoLoader = class extends (_HTMLElement33 = HTMLElement) {
         "ariaLabel"
       ]
     ], [
-      _dec68
-    ], _HTMLElement33));
+      _dec74
+    ], _HTMLElement35));
   }
   #___private_loading_1;
   get loading() {
@@ -19054,15 +20095,15 @@ var LogoLoader = class extends (_HTMLElement33 = HTMLElement) {
     }
   }
   static {
-    _initClass33();
+    _initClass35();
   }
   constructor(...args) {
-    super(...args), this.#___private_loading_1 = (_initProto12(this), _init_loading(this, false)), this.#___private_intro_2 = _init_intro(this, "wave"), this.#___private_size_3 = _init_size(this, 36), this.#___private_ariaLabel_4 = _init_ariaLabel(this, null), this.#state = "intro", this.#loopStartTime = 0, this.#animationTimers = [], this.#introCompleted = false;
+    super(...args), this.#___private_loading_1 = (_initProto14(this), _init_loading(this, false)), this.#___private_intro_2 = _init_intro(this, "wave"), this.#___private_size_3 = _init_size(this, 36), this.#___private_ariaLabel_4 = _init_ariaLabel(this, null), this.#state = "intro", this.#loopStartTime = 0, this.#animationTimers = [], this.#introCompleted = false;
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/monitor/index.ts
-import { html as html36 } from "lit-html";
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/monitor/index.ts
+import { html as html38 } from "lit-html";
 
 // src/decorators/Watch.ts
 var renderQueue2 = /* @__PURE__ */ new WeakMap();
@@ -19115,9 +20156,9 @@ function Watch(options = {}) {
   };
 }
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/monitor/fps.ts
-import { html as html35 } from "lit-html";
-function applyDecs2203RFactory34() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/monitor/fps.ts
+import { html as html37 } from "lit-html";
+function applyDecs2203RFactory36() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -19486,17 +20527,17 @@ function applyDecs2203RFactory34() {
     };
   };
 }
-function _apply_decs_2203_r34(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r34 = applyDecs2203RFactory34())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r36(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r36 = applyDecs2203RFactory36())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec69;
-var _initClass34;
-var _HTMLElement34;
-var _dec117;
-var _dec212;
+var _dec75;
+var _initClass36;
+var _HTMLElement36;
+var _dec119;
+var _dec213;
 var _init_paused;
 var _init_canvasEl;
-var _initProto13;
+var _initProto15;
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 var mean = (values) => {
   if (values.length === 0) {
@@ -19553,7 +20594,7 @@ var rateFps = (fps, targetFps) => {
   return "poor";
 };
 var _MonitorFps;
-_dec69 = Component({
+_dec75 = Component({
   tag: "ease-monitor-fps",
   autoSlot: false,
   shadowMode: "open",
@@ -19653,27 +20694,27 @@ _dec69 = Component({
       color: var(--color-gray-700);
     }
   `
-}), _dec117 = Prop({
+}), _dec119 = Prop({
   type: Boolean,
   reflect: true,
   defaultValue: false
-}), _dec212 = Query('canvas[part="graph"]');
-var MonitorFps = class extends (_HTMLElement34 = HTMLElement) {
+}), _dec213 = Query('canvas[part="graph"]');
+var MonitorFps = class extends (_HTMLElement36 = HTMLElement) {
   static {
-    ({ e: [_init_paused, _init_canvasEl, _initProto13], c: [_MonitorFps, _initClass34] } = _apply_decs_2203_r34(this, [
+    ({ e: [_init_paused, _init_canvasEl, _initProto15], c: [_MonitorFps, _initClass36] } = _apply_decs_2203_r36(this, [
       [
-        _dec117,
+        _dec119,
         1,
         "paused"
       ],
       [
-        _dec212,
+        _dec213,
         1,
         "canvasEl"
       ]
     ], [
-      _dec69
-    ], _HTMLElement34));
+      _dec75
+    ], _HTMLElement36));
   }
   #___private_paused_1;
   get paused() {
@@ -19722,7 +20763,7 @@ var MonitorFps = class extends (_HTMLElement34 = HTMLElement) {
       this.#data.frameTimeAvg !== null ? `avg ${formatMs(this.#data.frameTimeAvg)}` : null,
       this.#data.frameTimeP95 !== null ? `p95 ${formatMs(this.#data.frameTimeP95)}` : null
     ].filter(Boolean);
-    return html35`
+    return html37`
       <div part="container">
         <div part="header">
           <div part="title">
@@ -19902,10 +20943,10 @@ var MonitorFps = class extends (_HTMLElement34 = HTMLElement) {
     ctx.stroke();
   }
   static {
-    _initClass34();
+    _initClass36();
   }
   constructor(...args) {
-    super(...args), this.#___private_paused_1 = (_initProto13(this), _init_paused(this, false)), this.#___private_canvasEl_2 = _init_canvasEl(this), this.#rafId = null, this.#lastNow = 0, this.#lastSampleNow = 0, this.#framesSinceSample = 0, this.#frameDeltas = [], this.#fpsSamples = [], this.#maxFrameDeltas = 240, this.#maxFpsSamples = 90, this.#sampleIntervalMs = 250, this.#statsWindowFrames = 120, this.#data = {
+    super(...args), this.#___private_paused_1 = (_initProto15(this), _init_paused(this, false)), this.#___private_canvasEl_2 = _init_canvasEl(this), this.#rafId = null, this.#lastNow = 0, this.#lastSampleNow = 0, this.#framesSinceSample = 0, this.#frameDeltas = [], this.#fpsSamples = [], this.#maxFrameDeltas = 240, this.#maxFpsSamples = 90, this.#sampleIntervalMs = 250, this.#statsWindowFrames = 120, this.#data = {
       fps: null,
       refreshRate: null,
       frameTimeAvg: null,
@@ -19954,8 +20995,8 @@ var MonitorFps = class extends (_HTMLElement34 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/monitor/index.ts
-function applyDecs2203RFactory35() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/monitor/index.ts
+function applyDecs2203RFactory37() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -20324,18 +21365,18 @@ function applyDecs2203RFactory35() {
     };
   };
 }
-function _apply_decs_2203_r35(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r35 = applyDecs2203RFactory35())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r37(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r37 = applyDecs2203RFactory37())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec70;
-var _initClass35;
-var _HTMLElement35;
-var _dec118;
-var _dec213;
+var _dec76;
+var _initClass37;
+var _HTMLElement37;
+var _dec120;
+var _dec214;
 var _dec311;
 var _init_metrics;
 var _init_network;
-var _initProto14;
+var _initProto16;
 var METRIC_THRESHOLDS = {
   LCP: {
     good: 2500,
@@ -20445,7 +21486,7 @@ var estimateCarbonFootprint = (totalBytes) => {
   return `${emissions.toFixed(3)}g CO2 eq.`;
 };
 var _Monitor;
-_dec70 = Component({
+_dec76 = Component({
   tag: "ease-monitor",
   styles: `
     :host {
@@ -20569,17 +21610,17 @@ _dec70 = Component({
         text-align: center;
     }
   `
-}), _dec118 = Watch({}), _dec213 = Watch({}), _dec311 = Listen("monitor-fps");
-var Monitor = class extends (_HTMLElement35 = HTMLElement) {
+}), _dec120 = Watch({}), _dec214 = Watch({}), _dec311 = Listen("monitor-fps");
+var Monitor = class extends (_HTMLElement37 = HTMLElement) {
   static {
-    ({ e: [_init_metrics, _init_network, _initProto14], c: [_Monitor, _initClass35] } = _apply_decs_2203_r35(this, [
+    ({ e: [_init_metrics, _init_network, _initProto16], c: [_Monitor, _initClass37] } = _apply_decs_2203_r37(this, [
       [
-        _dec118,
+        _dec120,
         1,
         "metrics"
       ],
       [
-        _dec213,
+        _dec214,
         1,
         "network"
       ],
@@ -20589,8 +21630,8 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
         "handleFpsUpdate"
       ]
     ], [
-      _dec70
-    ], _HTMLElement35));
+      _dec76
+    ], _HTMLElement37));
   }
   #___private_metrics_1;
   get metrics() {
@@ -20895,14 +21936,14 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
     return "unknown";
   }
   render() {
-    return html36`
+    return html38`
       <div part="container">
         ${this.renderExpanded()}
       </div>
     `;
   }
   renderExpanded() {
-    return html36`
+    return html38`
       <div part="header">
         <div part="title">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
@@ -20923,7 +21964,7 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
     const trend = this.getTrendDirection(key);
     const benchmark = GLOBAL_BENCHMARKS[key];
     const vsBenchmark = benchmark ? ` (vs avg ${formatMetric(key, benchmark)})` : "";
-    return html36`
+    return html38`
         <div class="metric-box" title="${description}${vsBenchmark}">
             <div part="metric-label" class="metric-label">${label}</div>
             <div part="metric-value" class="metric-value rating-${rating}" data-rating=${rating}>
@@ -20936,7 +21977,7 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
   renderVitalsAndTiming() {
     const { LCP, INP, CLS, FCP, TBT } = this.metrics.coreWebVitals;
     const { ttfb, loadTime } = this.metrics.navigation;
-    return html36`
+    return html38`
         <section>
             <div part="section-title" class="section-title">Vitals & Timing</div>
             <div class="metrics-grid">
@@ -20953,7 +21994,7 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
   }
   renderRealtime() {
     const { memory, longTasks } = this.metrics;
-    return html36`
+    return html38`
         <section>
             <div part="section-title" class="section-title">Realtime Monitoring</div>
             <ease-monitor-fps></ease-monitor-fps>
@@ -20967,7 +22008,7 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
   }
   renderMemory(memory) {
     if (!memory) {
-      return html36`
+      return html38`
             <div class="memory-usage">
                 (performance.memory API not supported)
             </div>
@@ -20980,7 +22021,7 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
     } else if (usedPercent > 60) {
       rating = "needs-improvement";
     }
-    return html36`
+    return html38`
         <div class="memory-usage">
             <div class="resource-item">
                 <span>Used / Total Heap</span>
@@ -21000,7 +22041,7 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
   }
   renderNetworkInfo() {
     const { effectiveType, rtt } = this.network;
-    return html36`
+    return html38`
         <section>
             <div part="section-title" class="section-title">Network Connection</div>
             <div class="network-info">
@@ -21019,13 +22060,13 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
   renderResources() {
     const { js, css, img, other, totalSize } = this.metrics.resources;
     const totalCount = js.count + css.count + img.count + other.count;
-    const renderItem = (label, data) => html36`
+    const renderItem = (label, data) => html38`
         <div class="resource-item">
             <span>${label} (${data.count})</span>
             <span>${formatBytes(data.size)}</span>
         </div>
     `;
-    return html36`
+    return html38`
         <section>
             <div part="section-title" class="section-title">Resources (Total: ${formatBytes(totalSize)} / ${totalCount} reqs)</div>
             <div class="resource-list">
@@ -21044,10 +22085,10 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
     `;
   }
   static {
-    _initClass35();
+    _initClass37();
   }
   constructor(...args) {
-    super(...args), this.#___private_metrics_1 = (_initProto14(this), _init_metrics(this, {
+    super(...args), this.#___private_metrics_1 = (_initProto16(this), _init_metrics(this, {
       navigation: {
         loadTime: null,
         domInteractive: null,
@@ -21104,9 +22145,9 @@ var Monitor = class extends (_HTMLElement35 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/number/index.ts
-import { html as html37 } from "lit-html";
-function applyDecs2203RFactory36() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/number/index.ts
+import { html as html39 } from "lit-html";
+function applyDecs2203RFactory38() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -21475,19 +22516,19 @@ function applyDecs2203RFactory36() {
     };
   };
 }
-function _apply_decs_2203_r36(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r36 = applyDecs2203RFactory36())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r38(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r38 = applyDecs2203RFactory38())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec71;
-var _initClass36;
-var _HTMLElement36;
-var _dec119;
-var _dec214;
+var _dec77;
+var _initClass38;
+var _HTMLElement38;
+var _dec121;
+var _dec215;
 var _dec312;
 var _dec411;
 var _dec510;
 var _dec610;
-var _dec74;
+var _dec78;
 var _dec84;
 var _dec94;
 var _init_value6;
@@ -21497,9 +22538,9 @@ var _init_step;
 var _init_name4;
 var _init_disabled6;
 var _init_control3;
-var _initProto15;
+var _initProto17;
 var _NumberInput;
-_dec71 = Component({
+_dec77 = Component({
   tag: "ease-number-input",
   styles: `
     :host {
@@ -21544,7 +22585,7 @@ _dec71 = Component({
     }
   `,
   template() {
-    return html37`
+    return html39`
       <div part="container">
         <ease-input
           part="control"
@@ -21581,10 +22622,10 @@ _dec71 = Component({
       </div>
     `;
   }
-}), _dec119 = Prop({
+}), _dec121 = Prop({
   type: Number,
   reflect: true
-}), _dec214 = Prop({
+}), _dec215 = Prop({
   type: Number,
   reflect: true
 }), _dec312 = Prop({
@@ -21598,21 +22639,21 @@ _dec71 = Component({
 }), _dec610 = Prop({
   type: Boolean,
   reflect: true
-}), _dec74 = Query("input"), _dec84 = Listen("input", {
+}), _dec78 = Query("input"), _dec84 = Listen("input", {
   selector: "input"
 }), _dec94 = Listen("change", {
   selector: "input"
 });
-var NumberInput = class extends (_HTMLElement36 = HTMLElement) {
+var NumberInput = class extends (_HTMLElement38 = HTMLElement) {
   static {
-    ({ e: [_init_value6, _init_min, _init_max, _init_step, _init_name4, _init_disabled6, _init_control3, _initProto15], c: [_NumberInput, _initClass36] } = _apply_decs_2203_r36(this, [
+    ({ e: [_init_value6, _init_min, _init_max, _init_step, _init_name4, _init_disabled6, _init_control3, _initProto17], c: [_NumberInput, _initClass38] } = _apply_decs_2203_r38(this, [
       [
-        _dec119,
+        _dec121,
         1,
         "value"
       ],
       [
-        _dec214,
+        _dec215,
         1,
         "min"
       ],
@@ -21637,7 +22678,7 @@ var NumberInput = class extends (_HTMLElement36 = HTMLElement) {
         "disabled"
       ],
       [
-        _dec74,
+        _dec78,
         1,
         "control"
       ],
@@ -21652,8 +22693,8 @@ var NumberInput = class extends (_HTMLElement36 = HTMLElement) {
         "handleChange"
       ]
     ], [
-      _dec71
-    ], _HTMLElement36));
+      _dec77
+    ], _HTMLElement38));
   }
   #___private_value_1;
   get value() {
@@ -21770,16 +22811,16 @@ var NumberInput = class extends (_HTMLElement36 = HTMLElement) {
     }
   }
   static {
-    _initClass36();
+    _initClass38();
   }
   constructor(...args) {
-    super(...args), this.#___private_value_1 = (_initProto15(this), _init_value6(this)), this.#___private_min_2 = _init_min(this), this.#___private_max_3 = _init_max(this), this.#___private_step_4 = _init_step(this), this.#___private_name_5 = _init_name4(this), this.#___private_disabled_6 = _init_disabled6(this), this.#___private_control_7 = _init_control3(this);
+    super(...args), this.#___private_value_1 = (_initProto17(this), _init_value6(this)), this.#___private_min_2 = _init_min(this), this.#___private_max_3 = _init_max(this), this.#___private_step_4 = _init_step(this), this.#___private_name_5 = _init_name4(this), this.#___private_disabled_6 = _init_disabled6(this), this.#___private_control_7 = _init_control3(this);
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/origin/index.ts
-import { html as html38 } from "lit-html";
-function applyDecs2203RFactory37() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/origin/index.ts
+import { html as html40 } from "lit-html";
+function applyDecs2203RFactory39() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -22148,14 +23189,14 @@ function applyDecs2203RFactory37() {
     };
   };
 }
-function _apply_decs_2203_r37(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r37 = applyDecs2203RFactory37())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r39(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r39 = applyDecs2203RFactory39())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec75;
-var _initClass37;
-var _HTMLElement37;
-var _dec120;
-var _dec215;
+var _dec79;
+var _initClass39;
+var _HTMLElement39;
+var _dec123;
+var _dec216;
 var _dec313;
 var _dec412;
 var _dec511;
@@ -22163,9 +23204,9 @@ var _init_value7;
 var _init_disabled7;
 var _init_control4;
 var _init_name5;
-var _initProto16;
+var _initProto18;
 var _Origin;
-_dec75 = Component({
+_dec79 = Component({
   tag: "ease-origin",
   styles: `
     :host {
@@ -22277,7 +23318,7 @@ _dec75 = Component({
     }
   `,
   template() {
-    return html38`
+    return html40`
       <div part="container">
         <div part="preview" data-value=${this.value ?? "center-center"}></div>
         
@@ -22297,10 +23338,10 @@ _dec75 = Component({
       </div>
     `;
   }
-}), _dec120 = Prop({
+}), _dec123 = Prop({
   reflect: true,
   defaultValue: "center-center"
-}), _dec215 = Prop({
+}), _dec216 = Prop({
   type: Boolean,
   reflect: true
 }), _dec313 = Query("ease-dropdown"), _dec412 = Prop({
@@ -22309,16 +23350,16 @@ _dec75 = Component({
 }), _dec511 = Listen("change", {
   selector: "ease-dropdown"
 });
-var Origin = class extends (_HTMLElement37 = HTMLElement) {
+var Origin = class extends (_HTMLElement39 = HTMLElement) {
   static {
-    ({ e: [_init_value7, _init_disabled7, _init_control4, _init_name5, _initProto16], c: [_Origin, _initClass37] } = _apply_decs_2203_r37(this, [
+    ({ e: [_init_value7, _init_disabled7, _init_control4, _init_name5, _initProto18], c: [_Origin, _initClass39] } = _apply_decs_2203_r39(this, [
       [
-        _dec120,
+        _dec123,
         1,
         "value"
       ],
       [
-        _dec215,
+        _dec216,
         1,
         "disabled"
       ],
@@ -22338,8 +23379,8 @@ var Origin = class extends (_HTMLElement37 = HTMLElement) {
         "handleChange"
       ]
     ], [
-      _dec75
-    ], _HTMLElement37));
+      _dec79
+    ], _HTMLElement39));
   }
   #___private_value_1;
   get value() {
@@ -22383,10 +23424,10 @@ var Origin = class extends (_HTMLElement37 = HTMLElement) {
     });
   }
   static {
-    _initClass37();
+    _initClass39();
   }
   constructor(...args) {
-    super(...args), this.#___private_value_1 = (_initProto16(this), _init_value7(this, "center-center")), this.#___private_disabled_2 = _init_disabled7(this), this.#___private_control_3 = _init_control4(this), this.#___private_name_4 = _init_name5(this, ""), this.handleValueChange = (event) => {
+    super(...args), this.#___private_value_1 = (_initProto18(this), _init_value7(this, "center-center")), this.#___private_disabled_2 = _init_disabled7(this), this.#___private_control_3 = _init_control4(this), this.#___private_name_4 = _init_name5(this, ""), this.handleValueChange = (event) => {
       this.value = String(this.control?.value ?? "center-center");
       dispatchControlEvent(this, "change", {
         value: this.value,
@@ -22396,9 +23437,9 @@ var Origin = class extends (_HTMLElement37 = HTMLElement) {
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/panel/index.ts
-import { html as html39, nothing as nothing2 } from "lit-html";
-function applyDecs2203RFactory38() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/panel/index.ts
+import { html as html41, nothing as nothing2 } from "lit-html";
+function applyDecs2203RFactory40() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -22767,42 +23808,53 @@ function applyDecs2203RFactory38() {
     };
   };
 }
-function _apply_decs_2203_r38(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r38 = applyDecs2203RFactory38())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r40(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r40 = applyDecs2203RFactory40())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec76;
-var _initClass38;
-var _HTMLElement38;
-var _dec121;
-var _dec216;
+var _dec80;
+var _initClass40;
+var _HTMLElement40;
+var _dec124;
+var _dec217;
 var _dec314;
 var _dec413;
 var _dec512;
+var _dec611;
+var _dec710;
 var _init_activeTab;
-var _init_contentElement;
+var _init_headline2;
+var _init_maxHeight3;
+var _init_contentElement2;
 var _init_bodyElement;
-var _initProto17;
+var _initProto19;
 var _Panel;
-_dec76 = Component({
+_dec80 = Component({
   tag: "ease-panel",
   shadowMode: "open",
   styles: `
-    :host {
-      --ease-panel-transition-duration: 120ms;
-      --ease-panel-transition-easing: cubic-bezier(.25, 0, .5, 1);
+    @property --top-fade {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @property --bottom-fade {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
     }
 
     [part="section"] {
       display: block;
       width: 100%;
-      max-width: var(--ease-panel-max-width, 332px);
-      border-radius: var(--ease-panel-radius, 12px);
-      border: 1px solid var(--ease-panel-border-color, var(--color-white-6));
+      max-width: var(--ease-panel-max-width);
+      border-radius: var(--ease-panel-radius);
+      border: 1px solid var(--ease-panel-border-color);
       background-clip: padding-box;
-      background: var(--ease-panel-background, var(--color-gray-1000));
-      box-shadow: var(--ease-panel-shadow, 0 0 40px 0 var(--color-white-2) inset);
+      background-color: var(--ease-panel-background);
+      box-shadow: var(--ease-panel-shadow);
       box-sizing: border-box;
-      padding: var(--ease-panel-padding, 12px);
+      padding: var(--ease-panel-padding);
       margin: auto;
     }
 
@@ -22811,7 +23863,7 @@ _dec76 = Component({
       align-items: center;
       gap: 8px;
       width: 100%;
-      margin-bottom: 12px;
+      margin-bottom: var(--ease-panel-header-spacing);
     }
 
     [part="header"]:not(:has([part="headline"] slot[name="headline"]::slotted(*))):not(:has([part="tabs"]:not(:empty))):not(:has([part="actions"] slot[name="actions"]::slotted(*))) {
@@ -22820,14 +23872,14 @@ _dec76 = Component({
     }
 
     [part="headline"] {
-      font-size: var(--ease-panel-title-font-size, 14px);
-      font-weight: var(--ease-panel-title-font-weight, 500);
-      line-height: var(--ease-panel-title-line-height, 24px);
-      font-family: var(--ease-font-family, "Instrument Sans", sans-serif);
-      color: var(--ease-panel-title-color, var(--color-blue-100));
+      font-size: var(--ease-panel-title-font-size);
+      font-weight: var(--ease-panel-title-font-weight);
+      line-height: 24px;
+      font-family: var(--ease-font-family);
+      color: var(--ease-panel-title-color);
       margin: 0 0 0 4px;
       flex-grow: 1;
-      text-ellipsis: ellipsis;
+      text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
     }
@@ -22850,27 +23902,28 @@ _dec76 = Component({
 
     [part="tab"] {
       appearance: none;
-      font-size: var(--ease-panel-tab-font-size, 13px);
-      font-weight: var(--ease-panel-tab-font-weight, 500);
-      line-height: var(--ease-panel-tab-line-height, 24px);
-      font-family: var(--ease-font-family, "Instrument Sans", sans-serif);
-      color: var(--ease-panel-tab-color, var(--color-gray-600));
-      background: transparent;
+      font-size: var(--ease-panel-tab-font-size);
+      font-weight: var(--ease-panel-tab-font-weight);
+      line-height: 24px;
+      font-family: var(--ease-font-family);
+      color: var(--ease-panel-tab-color);
+      background-color: transparent;
       border: none;
       padding: 4px 8px;
       margin: 0;
       cursor: pointer;
-      border-radius: var(--ease-panel-tab-radius, 6px);
-      transition: color 0.2s, background-color 0.2s;
+      border-radius: var(--ease-panel-tab-radius);
+      transition: color 200ms, background-color 200ms;
+      transition-timing-function: cubic-bezier(.25, 0, .5, 1);
     }
 
     [part="tab"]:hover {
-      color: var(--ease-panel-tab-color-hover, var(--color-blue-100));
+      color: var(--ease-panel-tab-color-hover);
     }
 
     [part="tab"][aria-selected="true"] {
-      color: var(--ease-panel-tab-color-active, var(--color-blue-100));
-      background: var(--ease-panel-tab-background-active, var(--color-white-4));
+      color: var(--ease-panel-tab-color-active);
+      background-color: var(--ease-panel-tab-background-active);
     }
 
     [part="actions"] {
@@ -22882,7 +23935,7 @@ _dec76 = Component({
 
     slot[name="actions"]::slotted(button),
     slot[name="actions"]::slotted(a) {
-      --ease-icon-size: var(--ease-panel-action-icon-size, 16px);
+      --ease-icon-size: var(--ease-panel-action-icon-size);
 
       appearance: none;
       flex: 0 0 24px;
@@ -22893,7 +23946,8 @@ _dec76 = Component({
       margin: 0;
       cursor: pointer;
       color: var(--color-gray-600);
-      transition: color 0.2s;
+      transition: color 200ms;
+      transition-timing-function: cubic-bezier(.25, 0, .5, 1);
       text-decoration: none;
       display: flex;
       align-items: center;
@@ -22935,12 +23989,37 @@ _dec76 = Component({
     }
 
     [part="content"][data-animating="true"] {
-      transition: height var(--ease-panel-transition-duration) var(--ease-panel-transition-easing);
+      transition: height 200ms cubic-bezier(.25, 0, .5, 1);
     }
 
     [part="body"] {
       width: 100%;
       position: relative;
+      overflow-y: auto;
+      mask-image: linear-gradient(to bottom, #0000, #ffff var(--top-fade) calc(100% - var(--bottom-fade)), #0000);
+      animation-name: scroll-fade;
+      animation-timeline: scroll(self y);
+      scroll-snap-type: y mandatory;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    @keyframes scroll-fade {
+      0% {
+        --top-fade: 0px;
+      }
+      10%, 100% {
+        --top-fade: var(--ease-panel-fade-size);
+      }
+      0%, 90% {
+        --bottom-fade: var(--ease-panel-fade-size);
+      }
+      100% {
+        --bottom-fade: 0px;
+      }
     }
 
     [part="tab-panel"] {
@@ -22964,7 +24043,7 @@ _dec76 = Component({
       align-items: center;
       justify-content: space-between;
       width: 100%;
-      padding: var(--ease-panel-footer-padding, 12px);
+      padding: var(--ease-panel-footer-padding);
       box-sizing: border-box;
       border-top: 1px solid var(--color-white-4);
 
@@ -22973,15 +24052,14 @@ _dec76 = Component({
       }
     }
 
-    ::slotted(:not([slot])),
-    ::slotted([slot^="tab-"]) {
+    [part="items"] {
       display: grid;
-      gap: 12px;
+      grid-gap: var(--ease-panel-gap);
       box-sizing: border-box;
       width: 100%;
     }
   `
-}), _dec121 = Prop({
+}), _dec124 = Prop({
   type: Number,
   reflect: true,
   attribute: "active-tab",
@@ -22992,42 +24070,60 @@ _dec76 = Component({
       self.handleActiveTabChange(previous, next);
     }
   }
-}), _dec216 = Query('[part="content"]'), _dec314 = Query('[part="body"]'), _dec413 = Listen("slotchange", {
+}), _dec217 = Prop({
+  reflect: true,
+  attribute: "headline",
+  defaultValue: ""
+}), _dec314 = Prop({
+  reflect: true,
+  attribute: "max-height",
+  defaultValue: null
+}), _dec413 = Query('[part="content"]'), _dec512 = Query('[part="body"]'), _dec611 = Listen("slotchange", {
   selector: 'slot[name="footer"]'
-}), _dec512 = Listen("slotchange", {
+}), _dec710 = Listen("slotchange", {
   selector: "slot:not([name])"
 });
-var Panel = class extends (_HTMLElement38 = HTMLElement) {
+var Panel = class extends (_HTMLElement40 = HTMLElement) {
   static {
-    ({ e: [_init_activeTab, _init_contentElement, _init_bodyElement, _initProto17], c: [_Panel, _initClass38] } = _apply_decs_2203_r38(this, [
+    ({ e: [_init_activeTab, _init_headline2, _init_maxHeight3, _init_contentElement2, _init_bodyElement, _initProto19], c: [_Panel, _initClass40] } = _apply_decs_2203_r40(this, [
       [
-        _dec121,
+        _dec124,
         1,
         "activeTab"
       ],
       [
-        _dec216,
+        _dec217,
         1,
-        "contentElement"
+        "headline"
       ],
       [
         _dec314,
         1,
-        "bodyElement"
+        "maxHeight"
       ],
       [
         _dec413,
+        1,
+        "contentElement"
+      ],
+      [
+        _dec512,
+        1,
+        "bodyElement"
+      ],
+      [
+        _dec611,
         2,
         "onFooterSlotChange"
       ],
       [
-        _dec512,
+        _dec710,
         2,
         "onDefaultSlotChange"
       ]
     ], [
-      _dec76
-    ], _HTMLElement38));
+      _dec80
+    ], _HTMLElement40));
   }
   #tabs;
   #isAnimating;
@@ -23038,23 +24134,37 @@ var Panel = class extends (_HTMLElement38 = HTMLElement) {
   set activeTab(_v) {
     this.#___private_activeTab_1 = _v;
   }
+  #___private_headline_2;
+  get headline() {
+    return this.#___private_headline_2;
+  }
+  set headline(_v) {
+    this.#___private_headline_2 = _v;
+  }
+  #___private_maxHeight_3;
+  get maxHeight() {
+    return this.#___private_maxHeight_3;
+  }
+  set maxHeight(_v) {
+    this.#___private_maxHeight_3 = _v;
+  }
   /** @internal */
   handleActiveTabChange(previous, next) {
     this.performTabAnimation(previous, next);
   }
-  #___private_contentElement_2;
+  #___private_contentElement_4;
   get contentElement() {
-    return this.#___private_contentElement_2;
+    return this.#___private_contentElement_4;
   }
   set contentElement(_v) {
-    this.#___private_contentElement_2 = _v;
+    this.#___private_contentElement_4 = _v;
   }
-  #___private_bodyElement_3;
+  #___private_bodyElement_5;
   get bodyElement() {
-    return this.#___private_bodyElement_3;
+    return this.#___private_bodyElement_5;
   }
   set bodyElement(_v) {
-    this.#___private_bodyElement_3 = _v;
+    this.#___private_bodyElement_5 = _v;
   }
   /**
   * Get the tab configuration
@@ -23079,18 +24189,18 @@ var Panel = class extends (_HTMLElement38 = HTMLElement) {
   }
   render() {
     const hasTabs = this.#tabs.length > 0;
-    return html39`
+    return html41`
       <section part="section">
         <div part="header">
-          <h3 part="headline"><slot name="headline"></slot></h3>
+          <h3 part="headline">${this.headline}</h3>
           ${this.#renderTabs()}
           <div part="actions">
             <slot name="actions"></slot>
           </div>
         </div>
         <div part="content">
-          <div part="body">
-            ${hasTabs ? this.#renderTabPanels() : html39`<slot></slot>`}
+          <div part="body" style=${this.maxHeight ? `max-height: ${this.maxHeight};` : ""}>
+            ${hasTabs ? this.#renderTabPanels() : html41`<div part="items"><slot></slot></div>`}
           </div>
         </div>
         <div part="footer">
@@ -23103,9 +24213,9 @@ var Panel = class extends (_HTMLElement38 = HTMLElement) {
     if (this.#tabs.length === 0) {
       return nothing2;
     }
-    return html39`
+    return html41`
       <div part="tabs" role="tablist">
-        ${this.#tabs.map((tab, index) => html39`
+        ${this.#tabs.map((tab, index) => html41`
             <button
               part="tab"
               role="tab"
@@ -23122,8 +24232,8 @@ var Panel = class extends (_HTMLElement38 = HTMLElement) {
     `;
   }
   #renderTabPanels() {
-    return html39`
-      ${this.#tabs.map((tab, index) => html39`
+    return html41`
+      ${this.#tabs.map((tab, index) => html41`
           <div
             part="tab-panel"
             role="tabpanel"
@@ -23132,7 +24242,9 @@ var Panel = class extends (_HTMLElement38 = HTMLElement) {
             data-state=${index === this.activeTab ? "active" : "hidden"}
             data-index=${index}
           >
-            <slot name=${`tab-${tab.id}`}></slot>
+            <div part="items">
+              <slot name=${`tab-${tab.id}`}></slot>
+            </div>
           </div>
         `)}
     `;
@@ -23307,17 +24419,17 @@ var Panel = class extends (_HTMLElement38 = HTMLElement) {
     setBooleanAttribute(footer, "data-has-content", hasFooter);
   }
   static {
-    _initClass38();
+    _initClass40();
   }
   constructor(...args) {
-    super(...args), this.#tabs = (_initProto17(this), []), this.#isAnimating = false, this.#___private_activeTab_1 = _init_activeTab(this, 0), this.#___private_contentElement_2 = _init_contentElement(this), this.#___private_bodyElement_3 = _init_bodyElement(this);
+    super(...args), this.#tabs = (_initProto19(this), []), this.#isAnimating = false, this.#___private_activeTab_1 = _init_activeTab(this, 0), this.#___private_headline_2 = _init_headline2(this, null), this.#___private_maxHeight_3 = _init_maxHeight3(this, null), this.#___private_contentElement_4 = _init_contentElement2(this), this.#___private_bodyElement_5 = _init_bodyElement(this);
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/radio/index.ts
-import { html as html40 } from "lit-html";
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/radio/index.ts
+import { html as html42 } from "lit-html";
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/radio/option.ts
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/radio/option.ts
 var RadioOption = class extends HTMLElement {
   connectedCallback() {
     this.hidden = true;
@@ -23330,8 +24442,8 @@ if (!customElements.get("radio-option")) {
   customElements.define("radio-option", RadioOption);
 }
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/radio/index.ts
-function applyDecs2203RFactory39() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/radio/index.ts
+function applyDecs2203RFactory41() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -23700,19 +24812,19 @@ function applyDecs2203RFactory39() {
     };
   };
 }
-function _apply_decs_2203_r39(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r39 = applyDecs2203RFactory39())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r41(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r41 = applyDecs2203RFactory41())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec77;
-var _initClass39;
-var _HTMLElement39;
-var _dec123;
-var _dec217;
+var _dec81;
+var _initClass41;
+var _HTMLElement41;
+var _dec125;
+var _dec218;
 var _dec315;
 var _init_value8;
 var _init_groupElement;
 var _init_contentSlot2;
-var _initProto18;
+var _initProto20;
 var nextOptionId2 = /* @__PURE__ */ (() => {
   let counter = 0;
   return () => {
@@ -23728,7 +24840,7 @@ var nextPanelId2 = /* @__PURE__ */ (() => {
   };
 })();
 var _RadioGroup;
-_dec77 = Component({
+_dec81 = Component({
   tag: "ease-radio-group",
   shadowMode: "open",
   styles: `
@@ -23785,13 +24897,13 @@ _dec77 = Component({
     }
   `,
   template() {
-    return html40`
+    return html42`
       <div part="group">
         <slot name="content"></slot>
       </div>
     `;
   }
-}), _dec123 = Prop({
+}), _dec125 = Prop({
   reflect: true,
   defaultValue: null,
   onChange(next, previous) {
@@ -23800,17 +24912,17 @@ _dec77 = Component({
     }
     this.updateOptionSelectionState();
   }
-}), _dec217 = Query('[part="group"]'), _dec315 = Query('slot[name="content"]');
-var RadioGroup = class extends (_HTMLElement39 = HTMLElement) {
+}), _dec218 = Query('[part="group"]'), _dec315 = Query('slot[name="content"]');
+var RadioGroup = class extends (_HTMLElement41 = HTMLElement) {
   static {
-    ({ e: [_init_value8, _init_groupElement, _init_contentSlot2, _initProto18], c: [_RadioGroup, _initClass39] } = _apply_decs_2203_r39(this, [
+    ({ e: [_init_value8, _init_groupElement, _init_contentSlot2, _initProto20], c: [_RadioGroup, _initClass41] } = _apply_decs_2203_r41(this, [
       [
-        _dec123,
+        _dec125,
         1,
         "value"
       ],
       [
-        _dec217,
+        _dec218,
         1,
         "groupElement"
       ],
@@ -23820,8 +24932,8 @@ var RadioGroup = class extends (_HTMLElement39 = HTMLElement) {
         "contentSlot"
       ]
     ], [
-      _dec77
-    ], _HTMLElement39));
+      _dec81
+    ], _HTMLElement41));
   }
   #___private_value_1;
   get value() {
@@ -24038,18 +25150,18 @@ var RadioGroup = class extends (_HTMLElement39 = HTMLElement) {
     }));
   }
   static {
-    _initClass39();
+    _initClass41();
   }
   constructor(...args) {
-    super(...args), this.#___private_value_1 = (_initProto18(this), _init_value8(this, null)), this.#___private_groupElement_2 = _init_groupElement(this), this.#___private_contentSlot_3 = _init_contentSlot2(this), this.#options = [], this.#currentSlot = null, this.#optionsInitialized = false, this.#handleSlotChange = () => {
+    super(...args), this.#___private_value_1 = (_initProto20(this), _init_value8(this, null)), this.#___private_groupElement_2 = _init_groupElement(this), this.#___private_contentSlot_3 = _init_contentSlot2(this), this.#options = [], this.#currentSlot = null, this.#optionsInitialized = false, this.#handleSlotChange = () => {
       this.#syncOptions();
     };
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/radio/input.ts
-import { html as html41 } from "lit-html";
-function applyDecs2203RFactory40() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/radio/input.ts
+import { html as html43 } from "lit-html";
+function applyDecs2203RFactory42() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -24418,26 +25530,26 @@ function applyDecs2203RFactory40() {
     };
   };
 }
-function _apply_decs_2203_r40(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r40 = applyDecs2203RFactory40())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r42(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r42 = applyDecs2203RFactory42())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec78;
-var _initClass40;
-var _HTMLElement40;
-var _dec124;
-var _dec218;
+var _dec85;
+var _initClass42;
+var _HTMLElement42;
+var _dec126;
+var _dec219;
 var _dec316;
 var _dec414;
 var _dec513;
-var _dec611;
+var _dec612;
 var _init_checked2;
 var _init_name6;
 var _init_value9;
 var _init_disabled8;
 var _init_control5;
-var _initProto19;
+var _initProto21;
 var _RadioInput;
-_dec78 = Component({
+_dec85 = Component({
   tag: "ease-radio-input",
   shadowMode: "open",
   styles: `
@@ -24654,7 +25766,7 @@ _dec78 = Component({
     }
   `,
   template() {
-    return html41`
+    return html43`
       <button part="radio" type="button" role="radio" aria-checked=${this.checked} ?disabled=${this.disabled}>
         <div class="radio">
           <input part="control" name=${this.name} value=${this.value} ?checked=${this.checked} ?disabled=${this.disabled} type="radio" />
@@ -24677,7 +25789,7 @@ _dec78 = Component({
       </button>
     `;
   }
-}), _dec124 = Prop({
+}), _dec126 = Prop({
   type: Boolean,
   reflect: true,
   onChange(next) {
@@ -24692,26 +25804,26 @@ _dec78 = Component({
       });
     }
   }
-}), _dec218 = Prop({
+}), _dec219 = Prop({
   reflect: true
 }), _dec316 = Prop({
   reflect: true
 }), _dec414 = Prop({
   type: Boolean,
   reflect: true
-}), _dec513 = Query("button"), _dec611 = Listen("click", {
+}), _dec513 = Query("button"), _dec612 = Listen("click", {
   selector: "button"
 });
-var RadioInput = class extends (_HTMLElement40 = HTMLElement) {
+var RadioInput = class extends (_HTMLElement42 = HTMLElement) {
   static {
-    ({ e: [_init_checked2, _init_name6, _init_value9, _init_disabled8, _init_control5, _initProto19], c: [_RadioInput, _initClass40] } = _apply_decs_2203_r40(this, [
+    ({ e: [_init_checked2, _init_name6, _init_value9, _init_disabled8, _init_control5, _initProto21], c: [_RadioInput, _initClass42] } = _apply_decs_2203_r42(this, [
       [
-        _dec124,
+        _dec126,
         1,
         "checked"
       ],
       [
-        _dec218,
+        _dec219,
         1,
         "name"
       ],
@@ -24731,13 +25843,13 @@ var RadioInput = class extends (_HTMLElement40 = HTMLElement) {
         "control"
       ],
       [
-        _dec611,
+        _dec612,
         2,
         "handleClick"
       ]
     ], [
-      _dec78
-    ], _HTMLElement40));
+      _dec85
+    ], _HTMLElement42));
   }
   #___private_checked_1;
   get checked() {
@@ -24825,16 +25937,16 @@ var RadioInput = class extends (_HTMLElement40 = HTMLElement) {
     });
   }
   static {
-    _initClass40();
+    _initClass42();
   }
   constructor(...args) {
-    super(...args), this.#___private_checked_1 = (_initProto19(this), _init_checked2(this)), this.#___private_name_2 = _init_name6(this), this.#___private_value_3 = _init_value9(this), this.#___private_disabled_4 = _init_disabled8(this), this.#___private_control_5 = _init_control5(this), this._firstRender = true, this.filterId = `goo-${crypto.randomUUID()}`;
+    super(...args), this.#___private_checked_1 = (_initProto21(this), _init_checked2(this)), this.#___private_name_2 = _init_name6(this), this.#___private_value_3 = _init_value9(this), this.#___private_disabled_4 = _init_disabled8(this), this.#___private_control_5 = _init_control5(this), this._firstRender = true, this.filterId = `goo-${crypto.randomUUID()}`;
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/slider/index.ts
-import { html as html42 } from "lit-html";
-function applyDecs2203RFactory41() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/slider/index.ts
+import { html as html44 } from "lit-html";
+function applyDecs2203RFactory43() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -25203,20 +26315,20 @@ function applyDecs2203RFactory41() {
     };
   };
 }
-function _apply_decs_2203_r41(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r41 = applyDecs2203RFactory41())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r43(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r43 = applyDecs2203RFactory43())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec79;
-var _initClass41;
-var _HTMLElement41;
-var _dec125;
-var _dec219;
+var _dec86;
+var _initClass43;
+var _HTMLElement43;
+var _dec127;
+var _dec220;
 var _dec317;
 var _dec415;
 var _dec514;
-var _dec612;
-var _dec710;
-var _dec85;
+var _dec613;
+var _dec711;
+var _dec87;
 var _dec95;
 var _dec104;
 var _dec1110;
@@ -25227,9 +26339,9 @@ var _init_step2;
 var _init_disabled9;
 var _init_control6;
 var _init_valueControl;
-var _initProto20;
+var _initProto22;
 var _Slider;
-_dec79 = Component({
+_dec86 = Component({
   tag: "ease-slider",
   styles: `
     :host {
@@ -25330,7 +26442,7 @@ _dec79 = Component({
     }
   `,
   template() {
-    return html42`
+    return html44`
       <div part="container">
         <input
           part="control"
@@ -25353,10 +26465,10 @@ _dec79 = Component({
       </div>
     `;
   }
-}), _dec125 = Prop({
+}), _dec127 = Prop({
   type: Number,
   reflect: true
-}), _dec219 = Prop({
+}), _dec220 = Prop({
   type: Number,
   reflect: true
 }), _dec317 = Prop({
@@ -25368,7 +26480,7 @@ _dec79 = Component({
 }), _dec514 = Prop({
   type: Boolean,
   reflect: true
-}), _dec612 = Query("input"), _dec710 = Query("ease-input"), _dec85 = Listen("input", {
+}), _dec613 = Query("input"), _dec711 = Query("ease-input"), _dec87 = Listen("input", {
   selector: 'input[type="range"]'
 }), _dec95 = Listen("change", {
   selector: 'input[type="range"]'
@@ -25379,16 +26491,16 @@ _dec79 = Component({
   selector: "ease-input",
   when: (event) => event instanceof CustomEvent && typeof event.detail?.value === "string"
 });
-var Slider = class extends (_HTMLElement41 = HTMLElement) {
+var Slider = class extends (_HTMLElement43 = HTMLElement) {
   static {
-    ({ e: [_init_value10, _init_min2, _init_max2, _init_step2, _init_disabled9, _init_control6, _init_valueControl, _initProto20], c: [_Slider, _initClass41] } = _apply_decs_2203_r41(this, [
+    ({ e: [_init_value10, _init_min2, _init_max2, _init_step2, _init_disabled9, _init_control6, _init_valueControl, _initProto22], c: [_Slider, _initClass43] } = _apply_decs_2203_r43(this, [
       [
-        _dec125,
+        _dec127,
         1,
         "value"
       ],
       [
-        _dec219,
+        _dec220,
         1,
         "min"
       ],
@@ -25408,17 +26520,17 @@ var Slider = class extends (_HTMLElement41 = HTMLElement) {
         "disabled"
       ],
       [
-        _dec612,
+        _dec613,
         1,
         "control"
       ],
       [
-        _dec710,
+        _dec711,
         1,
         "valueControl"
       ],
       [
-        _dec85,
+        _dec87,
         2,
         "handleRangeInput"
       ],
@@ -25438,8 +26550,8 @@ var Slider = class extends (_HTMLElement41 = HTMLElement) {
         "handleValueChange"
       ]
     ], [
-      _dec79
-    ], _HTMLElement41));
+      _dec86
+    ], _HTMLElement43));
   }
   #___private_value_1;
   get value() {
@@ -25572,16 +26684,16 @@ var Slider = class extends (_HTMLElement41 = HTMLElement) {
     this.control.style.setProperty("--progress", `${Math.max(0, Math.min(100, percent))}%`);
   }
   static {
-    _initClass41();
+    _initClass43();
   }
   constructor(...args) {
-    super(...args), this.#___private_value_1 = (_initProto20(this), _init_value10(this)), this.#___private_min_2 = _init_min2(this), this.#___private_max_3 = _init_max2(this), this.#___private_step_4 = _init_step2(this), this.#___private_disabled_5 = _init_disabled9(this), this.#___private_control_6 = _init_control6(this), this.#___private_valueControl_7 = _init_valueControl(this);
+    super(...args), this.#___private_value_1 = (_initProto22(this), _init_value10(this)), this.#___private_min_2 = _init_min2(this), this.#___private_max_3 = _init_max2(this), this.#___private_step_4 = _init_step2(this), this.#___private_disabled_5 = _init_disabled9(this), this.#___private_control_6 = _init_control6(this), this.#___private_valueControl_7 = _init_valueControl(this);
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/state/index.ts
-import { html as html43 } from "lit-html";
-function applyDecs2203RFactory42() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/state/index.ts
+import { html as html45 } from "lit-html";
+function applyDecs2203RFactory44() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -25950,20 +27062,20 @@ function applyDecs2203RFactory42() {
     };
   };
 }
-function _apply_decs_2203_r42(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r42 = applyDecs2203RFactory42())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r44(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r44 = applyDecs2203RFactory44())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec80;
-var _initClass42;
-var _HTMLElement42;
-var _dec126;
-var _dec220;
+var _dec88;
+var _initClass44;
+var _HTMLElement44;
+var _dec128;
+var _dec221;
 var _dec318;
 var _dec416;
 var _dec515;
 var _init_value11;
 var _init_defaultSlot;
-var _initProto21;
+var _initProto23;
 var readControlValue2 = (element) => {
   if (typeof element.value === "string" || typeof element.value === "number") {
     return element.value;
@@ -25986,7 +27098,7 @@ var getControlName = (element) => {
   return element.getAttribute?.("name") ?? null;
 };
 var _State;
-_dec80 = Component({
+_dec88 = Component({
   tag: "ease-state",
   shadowMode: "open",
   styles: `
@@ -25996,30 +27108,30 @@ _dec80 = Component({
 
     [part="container"] {
       display: grid;
-      gap: var(--ease-state-gap, 12px);
+      grid-gap: var(--ease-panel-gap);
       box-sizing: border-box;
       width: 100%;
     }
   `
-}), _dec126 = Prop({
+}), _dec128 = Prop({
   reflect: true
-}), _dec220 = Query("slot"), _dec318 = Listen("input", {
+}), _dec221 = Query("slot"), _dec318 = Listen("input", {
   target: (host) => host
 }), _dec416 = Listen("change", {
   target: (host) => host
 }), _dec515 = Listen(CONTROL_CHANGE_EVENT, {
   target: (host) => host
 });
-var State = class extends (_HTMLElement42 = HTMLElement) {
+var State = class extends (_HTMLElement44 = HTMLElement) {
   static {
-    ({ e: [_init_value11, _init_defaultSlot, _initProto21], c: [_State, _initClass42] } = _apply_decs_2203_r42(this, [
+    ({ e: [_init_value11, _init_defaultSlot, _initProto23], c: [_State, _initClass44] } = _apply_decs_2203_r44(this, [
       [
-        _dec126,
+        _dec128,
         1,
         "value"
       ],
       [
-        _dec220,
+        _dec221,
         1,
         "defaultSlot"
       ],
@@ -26039,8 +27151,8 @@ var State = class extends (_HTMLElement42 = HTMLElement) {
         "handleControlChange"
       ]
     ], [
-      _dec80
-    ], _HTMLElement42));
+      _dec88
+    ], _HTMLElement44));
   }
   #controls;
   #state;
@@ -26132,7 +27244,7 @@ var State = class extends (_HTMLElement42 = HTMLElement) {
     this.defaultSlot?.removeEventListener("slotchange", this.#handleSlotChange);
   }
   render() {
-    return html43`
+    return html45`
       <div part="container">
         <slot></slot>
       </div>
@@ -26238,19 +27350,19 @@ var State = class extends (_HTMLElement42 = HTMLElement) {
     });
   }
   static {
-    _initClass42();
+    _initClass44();
   }
   constructor(...args) {
-    super(...args), this.#controls = (_initProto21(this), /* @__PURE__ */ new Map()), this.#state = {}, this.#initialState = {}, this.#subscribers = /* @__PURE__ */ new Map(), this.#___private_value_1 = _init_value11(this), this.#___private_defaultSlot_2 = _init_defaultSlot(this), this.#handleSlotChange = () => {
+    super(...args), this.#controls = (_initProto23(this), /* @__PURE__ */ new Map()), this.#state = {}, this.#initialState = {}, this.#subscribers = /* @__PURE__ */ new Map(), this.#___private_value_1 = _init_value11(this), this.#___private_defaultSlot_2 = _init_defaultSlot(this), this.#handleSlotChange = () => {
       this.#detach();
       this.#attach();
     };
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/toggle/index.ts
-import { html as html44 } from "lit-html";
-function applyDecs2203RFactory43() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/toggle/index.ts
+import { html as html46 } from "lit-html";
+function applyDecs2203RFactory45() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -26619,22 +27731,22 @@ function applyDecs2203RFactory43() {
     };
   };
 }
-function _apply_decs_2203_r43(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r43 = applyDecs2203RFactory43())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r45(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r45 = applyDecs2203RFactory45())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec81;
-var _initClass43;
-var _HTMLElement43;
-var _dec127;
-var _dec221;
+var _dec89;
+var _initClass45;
+var _HTMLElement45;
+var _dec129;
+var _dec222;
 var _dec319;
 var _dec417;
 var _init_checked3;
 var _init_disabled10;
 var _init_control7;
-var _initProto22;
+var _initProto24;
 var _Toggle;
-_dec81 = Component({
+_dec89 = Component({
   tag: "ease-toggle",
   styles: `
     :host {
@@ -26727,7 +27839,7 @@ _dec81 = Component({
     }
   `,
   template() {
-    return html44`
+    return html46`
       <button part="control" type="button" aria-pressed="false">
         <svg viewBox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#${this.filterId})">
           <path part="default" d="M0 6C0 2.68629 2.68629 0 6 0V0C9.31371 0 12 2.68629 12 6V6C12 9.31371 9.31371 12 6 12V12C2.68629 12 0 9.31371 0 6V6Z" />
@@ -26746,25 +27858,25 @@ _dec81 = Component({
       </button>
     `;
   }
-}), _dec127 = Prop({
+}), _dec129 = Prop({
   type: Boolean,
   reflect: true
-}), _dec221 = Prop({
+}), _dec222 = Prop({
   type: Boolean,
   reflect: true
 }), _dec319 = Query("button"), _dec417 = Listen("click", {
   selector: "button"
 });
-var Toggle = class extends (_HTMLElement43 = HTMLElement) {
+var Toggle = class extends (_HTMLElement45 = HTMLElement) {
   static {
-    ({ e: [_init_checked3, _init_disabled10, _init_control7, _initProto22], c: [_Toggle, _initClass43] } = _apply_decs_2203_r43(this, [
+    ({ e: [_init_checked3, _init_disabled10, _init_control7, _initProto24], c: [_Toggle, _initClass45] } = _apply_decs_2203_r45(this, [
       [
-        _dec127,
+        _dec129,
         1,
         "checked"
       ],
       [
-        _dec221,
+        _dec222,
         1,
         "disabled"
       ],
@@ -26779,8 +27891,8 @@ var Toggle = class extends (_HTMLElement43 = HTMLElement) {
         "handleClick"
       ]
     ], [
-      _dec81
-    ], _HTMLElement43));
+      _dec89
+    ], _HTMLElement45));
   }
   #___private_checked_1;
   get checked() {
@@ -26825,16 +27937,16 @@ var Toggle = class extends (_HTMLElement43 = HTMLElement) {
     });
   }
   static {
-    _initClass43();
+    _initClass45();
   }
   constructor(...args) {
-    super(...args), this.#___private_checked_1 = (_initProto22(this), _init_checked3(this)), this.#___private_disabled_2 = _init_disabled10(this), this.#___private_control_3 = _init_control7(this), this.filterId = `filter-${crypto.randomUUID()}`;
+    super(...args), this.#___private_checked_1 = (_initProto24(this), _init_checked3(this)), this.#___private_disabled_2 = _init_disabled10(this), this.#___private_control_3 = _init_control7(this), this.filterId = `filter-${crypto.randomUUID()}`;
   }
 };
 
-// swc:/home/runner/work/web-kit/web-kit/packages/core/src/elements/tooltip/index.ts
-import { html as html45 } from "lit-html";
-function applyDecs2203RFactory44() {
+// swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/tooltip/index.ts
+import { html as html47 } from "lit-html";
+function applyDecs2203RFactory46() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
     return function addInitializer(initializer) {
       assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -27203,26 +28315,26 @@ function applyDecs2203RFactory44() {
     };
   };
 }
-function _apply_decs_2203_r44(targetClass, memberDecs, classDecs, parentClass) {
-  return (_apply_decs_2203_r44 = applyDecs2203RFactory44())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r46(targetClass, memberDecs, classDecs, parentClass) {
+  return (_apply_decs_2203_r46 = applyDecs2203RFactory46())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec86;
-var _initClass44;
-var _HTMLElement44;
-var _dec128;
-var _dec222;
+var _dec90;
+var _initClass46;
+var _HTMLElement46;
+var _dec130;
+var _dec223;
 var _dec320;
 var _dec418;
 var _dec516;
-var _dec613;
-var _init_open3;
+var _dec614;
+var _init_open4;
 var _init_delay;
 var _init_placement4;
 var _init_triggerElement;
-var _init_contentElement2;
-var _initProto23;
+var _init_contentElement3;
+var _initProto25;
 var _Tooltip;
-_dec86 = Component({
+_dec90 = Component({
   tag: "ease-tooltip",
   shadowMode: "open",
   styles: `
@@ -27252,36 +28364,36 @@ _dec86 = Component({
       display: block;
     }
   `
-}), _dec128 = Prop({
+}), _dec130 = Prop({
   type: Boolean,
   reflect: true,
   onChange(next, previous) {
     this._handleOpenChange(next, previous);
   }
-}), _dec222 = Prop({
+}), _dec223 = Prop({
   type: Number,
   reflect: true,
   defaultValue: 300
 }), _dec320 = Prop({
   reflect: true,
   defaultValue: "top-center"
-}), _dec418 = Query('[slot="trigger"]'), _dec516 = Query("[data-tooltip-content]"), _dec613 = OutsideClick({
+}), _dec418 = Query('[slot="trigger"]'), _dec516 = Query("[data-tooltip-content]"), _dec614 = OutsideClick({
   content: (host) => host.contentElement,
   triggers: (host) => [
     host.triggerElement
   ],
   disabled: (host) => !host.open
 });
-var Tooltip = class extends (_HTMLElement44 = HTMLElement) {
+var Tooltip = class extends (_HTMLElement46 = HTMLElement) {
   static {
-    ({ e: [_init_open3, _init_delay, _init_placement4, _init_triggerElement, _init_contentElement2, _initProto23], c: [_Tooltip, _initClass44] } = _apply_decs_2203_r44(this, [
+    ({ e: [_init_open4, _init_delay, _init_placement4, _init_triggerElement, _init_contentElement3, _initProto25], c: [_Tooltip, _initClass46] } = _apply_decs_2203_r46(this, [
       [
-        _dec128,
+        _dec130,
         1,
         "open"
       ],
       [
-        _dec222,
+        _dec223,
         1,
         "delay"
       ],
@@ -27301,13 +28413,13 @@ var Tooltip = class extends (_HTMLElement44 = HTMLElement) {
         "contentElement"
       ],
       [
-        _dec613,
+        _dec614,
         2,
         "handleOutsideDismiss"
       ]
     ], [
-      _dec86
-    ], _HTMLElement44));
+      _dec90
+    ], _HTMLElement46));
   }
   #hoverTimer;
   #trigger;
@@ -27374,7 +28486,7 @@ var Tooltip = class extends (_HTMLElement44 = HTMLElement) {
     }
   }
   render() {
-    return html45`
+    return html47`
       <ease-popover .placement=${this.placement} ?open=${this.open}>
         <slot name="trigger" slot="trigger"></slot>
         <div
@@ -27454,10 +28566,10 @@ var Tooltip = class extends (_HTMLElement44 = HTMLElement) {
     }
   }
   static {
-    _initClass44();
+    _initClass46();
   }
   constructor(...args) {
-    super(...args), this.#hoverTimer = (_initProto23(this), null), this.#trigger = null, this.#content = null, this.#___private_open_1 = _init_open3(this, false), this.#___private_delay_2 = _init_delay(this, 300), this.#___private_placement_3 = _init_placement4(this, "top-center"), this.#___private_triggerElement_4 = _init_triggerElement(this), this.#___private_contentElement_5 = _init_contentElement2(this), this.#handleEnter = () => {
+    super(...args), this.#hoverTimer = (_initProto25(this), null), this.#trigger = null, this.#content = null, this.#___private_open_1 = _init_open4(this, false), this.#___private_delay_2 = _init_delay(this, 300), this.#___private_placement_3 = _init_placement4(this, "top-center"), this.#___private_triggerElement_4 = _init_triggerElement(this), this.#___private_contentElement_5 = _init_contentElement3(this), this.#handleEnter = () => {
       this.#startTimer(() => {
         this.open = true;
       });
@@ -27482,6 +28594,7 @@ export {
   _ColorPicker as ColorPicker,
   _Dropdown as Dropdown,
   _Field as Field,
+  _Folder as Folder,
   _IconAnchorAdd as IconAnchorAdd,
   _IconAnchorRemove as IconAnchorRemove,
   _IconArrowsVertical as IconArrowsVertical,
@@ -27497,6 +28610,7 @@ export {
   _IconClear as IconClear,
   _IconCode as IconCode,
   _IconDots as IconDots,
+  _IconFolder as IconFolder,
   _IconGrid as IconGrid,
   _IconMention as IconMention,
   _IconMinus as IconMinus,