@easemate/web-kit 0.3.5 → 0.3.6

package/build/react.cjs

@@ -3075,10 +3075,15 @@ var init_checkbox = __esm({
           return;
         }
         this.checked = !this.checked;
-        dispatchControlEvent(this, "checkbox", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.checked,
           event
-        });
+        };
+        dispatchControlEvent(this, "checkbox", detail);
+        dispatchControlEvent(this, "change", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       static {
         _initClass2();
@@ -5464,6 +5469,7 @@ var init_dropdown = __esm({
           }
         }
         dispatchControlEvent(this, "toggle", {
+          name: this.name ?? void 0,
           value: next,
           event: origin
         });
@@ -5727,6 +5733,7 @@ var init_dropdown = __esm({
       }
       #dispatchValueChange(value, label, event) {
         dispatchControlEvent(this, "change", {
+          name: this.name ?? void 0,
           value,
           event
         });
@@ -6602,20 +6609,28 @@ var init_input = __esm({
           return;
         }
         this.value = target.value;
-        dispatchControlEvent(this, "input", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value ?? "",
           event
-        });
+        };
+        dispatchControlEvent(this, "input", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleChange(event, target) {
         if (!target) {
           return;
         }
         this.value = target.value;
-        dispatchControlEvent(this, "change", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value ?? "",
           event
-        });
+        };
+        dispatchControlEvent(this, "change", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       static {
         _initClass6();
@@ -9147,7 +9162,7 @@ function applyDecs2203RFactory10() {
 function _apply_decs_2203_r10(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r10 = applyDecs2203RFactory10())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html12, _dec27, _initClass10, _HTMLElement10, _dec111, _dec28, _dec37, _dec47, _init_dropdown, _init_value5, _init_disabled5, _init_placement3, _initProto8, _ColorInput, ColorInput;
+var import_lit_html12, _dec27, _initClass10, _HTMLElement10, _dec111, _dec28, _dec37, _dec47, _dec55, _init_dropdown, _init_value5, _init_disabled5, _init_name4, _init_placement3, _initProto8, _ColorInput, ColorInput;
 var init_color = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/color/index.ts"() {
     "use strict";
@@ -9232,12 +9247,15 @@ var init_color = __esm({
       type: Boolean,
       reflect: true
     }), _dec47 = Prop({
+      reflect: true,
+      defaultValue: null
+    }), _dec55 = Prop({
       reflect: true,
       defaultValue: "bottom-start"
     });
     ColorInput = class extends (_HTMLElement10 = HTMLElement) {
       static {
-        ({ e: [_init_dropdown, _init_value5, _init_disabled5, _init_placement3, _initProto8], c: [_ColorInput, _initClass10] } = _apply_decs_2203_r10(this, [
+        ({ e: [_init_dropdown, _init_value5, _init_disabled5, _init_name4, _init_placement3, _initProto8], c: [_ColorInput, _initClass10] } = _apply_decs_2203_r10(this, [
           [
             _dec111,
             1,
@@ -9256,6 +9274,11 @@ var init_color = __esm({
           [
             _dec47,
             1,
+            "name"
+          ],
+          [
+            _dec55,
+            1,
             "placement"
           ]
         ], [
@@ -9284,12 +9307,19 @@ var init_color = __esm({
       set disabled(_v) {
         this.#___private_disabled_3 = _v;
       }
-      #___private_placement_4;
+      #___private_name_4;
+      get name() {
+        return this.#___private_name_4;
+      }
+      set name(_v) {
+        this.#___private_name_4 = _v;
+      }
+      #___private_placement_5;
       get placement() {
-        return this.#___private_placement_4;
+        return this.#___private_placement_5;
       }
       set placement(_v) {
-        this.#___private_placement_4 = _v;
+        this.#___private_placement_5 = _v;
       }
       connectedCallback() {
         this.#hasCustomTrigger = this.querySelector('[slot="trigger"]') !== null;
@@ -9334,21 +9364,24 @@ var init_color = __esm({
         _initClass10();
       }
       constructor(...args) {
-        super(...args), this.#hasCustomTrigger = (_initProto8(this), false), this.#___private_dropdown_1 = _init_dropdown(this), this.#___private_value_2 = _init_value5(this), this.#___private_disabled_3 = _init_disabled5(this, false), this.#___private_placement_4 = _init_placement3(this, "bottom-start"), this.#handleInputChange = (event) => {
+        super(...args), this.#hasCustomTrigger = (_initProto8(this), false), this.#___private_dropdown_1 = _init_dropdown(this), this.#___private_value_2 = _init_value5(this), this.#___private_disabled_3 = _init_disabled5(this, false), this.#___private_name_4 = _init_name4(this, null), this.#___private_placement_5 = _init_placement3(this, "bottom-start"), this.#handleInputChange = (event) => {
           this.value = event.target.value;
           dispatchControlEvent(this, "input", {
+            name: this.name ?? void 0,
             value: this.value,
             event
           });
         }, this.#handlePickerInput = (event) => {
           this.value = event.detail.value;
           dispatchControlEvent(this, "input", {
+            name: this.name ?? void 0,
             value: this.value,
             event
           });
         }, this.#handlePickerChange = (event) => {
           this.value = event.detail.value;
           dispatchControlEvent(this, "change", {
+            name: this.name ?? void 0,
             value: this.value,
             event
           });
@@ -9361,6 +9394,7 @@ var init_color = __esm({
         }, this.#handlePickerApply = (event) => {
           this.value = event.detail.value;
           dispatchControlEvent(this, "change", {
+            name: this.name ?? void 0,
             value: this.value,
             event
           });
@@ -10586,7 +10620,7 @@ function applyDecs2203RFactory13() {
 function _apply_decs_2203_r13(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r13 = applyDecs2203RFactory13())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html15, _dec31, _initClass13, _HTMLElement13, _dec113, _dec210, _dec38, _dec48, _dec55, _dec65, _dec74, _dec84, _dec94, _init_value6, _init_min, _init_max, _init_step, _init_name4, _init_disabled6, _init_control3, _initProto9, _NumberInput, NumberInput;
+var import_lit_html15, _dec31, _initClass13, _HTMLElement13, _dec113, _dec210, _dec38, _dec48, _dec56, _dec65, _dec74, _dec84, _dec94, _init_value6, _init_min, _init_max, _init_step, _init_name5, _init_disabled6, _init_control3, _initProto9, _NumberInput, NumberInput;
 var init_number = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/number/index.ts"() {
     "use strict";
@@ -10693,7 +10727,7 @@ var init_number = __esm({
     }), _dec48 = Prop({
       type: Number,
       reflect: true
-    }), _dec55 = Prop({
+    }), _dec56 = Prop({
       reflect: true
     }), _dec65 = Prop({
       type: Boolean,
@@ -10705,7 +10739,7 @@ var init_number = __esm({
     });
     NumberInput = class extends (_HTMLElement13 = HTMLElement) {
       static {
-        ({ e: [_init_value6, _init_min, _init_max, _init_step, _init_name4, _init_disabled6, _init_control3, _initProto9], c: [_NumberInput, _initClass13] } = _apply_decs_2203_r13(this, [
+        ({ e: [_init_value6, _init_min, _init_max, _init_step, _init_name5, _init_disabled6, _init_control3, _initProto9], c: [_NumberInput, _initClass13] } = _apply_decs_2203_r13(this, [
           [
             _dec113,
             1,
@@ -10727,7 +10761,7 @@ var init_number = __esm({
             "step"
           ],
           [
-            _dec55,
+            _dec56,
             1,
             "name"
           ],
@@ -10822,20 +10856,28 @@ var init_number = __esm({
           return;
         }
         this.value = coerceNumber(target.value);
-        dispatchControlEvent(this, "input", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value,
           event
-        });
+        };
+        dispatchControlEvent(this, "input", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleChange(event, target) {
         if (!target) {
           return;
         }
         this.value = coerceNumber(target.value);
-        dispatchControlEvent(this, "change", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value,
           event
-        });
+        };
+        dispatchControlEvent(this, "change", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       addActiveLayer(button) {
         const layer = document.createElement("div");
@@ -10873,7 +10915,7 @@ var init_number = __esm({
         _initClass13();
       }
       constructor(...args) {
-        super(...args), this.#___private_value_1 = (_initProto9(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 = (_initProto9(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_name5(this), this.#___private_disabled_6 = _init_disabled6(this), this.#___private_control_7 = _init_control3(this);
       }
     };
   }
@@ -11256,7 +11298,7 @@ function applyDecs2203RFactory14() {
 function _apply_decs_2203_r14(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r14 = applyDecs2203RFactory14())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html16, _dec39, _initClass14, _HTMLElement14, _dec114, _dec211, _dec310, _dec49, _dec56, _init_value7, _init_disabled7, _init_control4, _init_name5, _initProto10, _Origin, Origin;
+var import_lit_html16, _dec39, _initClass14, _HTMLElement14, _dec114, _dec211, _dec310, _dec49, _dec57, _init_value7, _init_disabled7, _init_control4, _init_name6, _initProto10, _Origin, Origin;
 var init_origin = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/origin/index.ts"() {
     "use strict";
@@ -11408,12 +11450,12 @@ var init_origin = __esm({
     }), _dec310 = Query("ease-dropdown"), _dec49 = Prop({
       reflect: true,
       defaultValue: ""
-    }), _dec56 = Listen("change", {
+    }), _dec57 = Listen("change", {
       selector: "ease-dropdown"
     });
     Origin = class extends (_HTMLElement14 = HTMLElement) {
       static {
-        ({ e: [_init_value7, _init_disabled7, _init_control4, _init_name5, _initProto10], c: [_Origin, _initClass14] } = _apply_decs_2203_r14(this, [
+        ({ e: [_init_value7, _init_disabled7, _init_control4, _init_name6, _initProto10], c: [_Origin, _initClass14] } = _apply_decs_2203_r14(this, [
           [
             _dec114,
             1,
@@ -11435,7 +11477,7 @@ var init_origin = __esm({
             "name"
           ],
           [
-            _dec56,
+            _dec57,
             2,
             "handleChange"
           ]
@@ -11488,7 +11530,7 @@ var init_origin = __esm({
         _initClass14();
       }
       constructor(...args) {
-        super(...args), this.#___private_value_1 = (_initProto10(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 = (_initProto10(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_name6(this, ""), this.handleValueChange = (event) => {
           this.value = String(this.control?.value ?? "center-center");
           dispatchControlEvent(this, "change", {
             value: this.value,
@@ -12620,7 +12662,7 @@ function applyDecs2203RFactory16() {
 function _apply_decs_2203_r16(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r16 = applyDecs2203RFactory16())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html18, _dec41, _initClass16, _HTMLElement16, _dec116, _dec213, _dec312, _dec410, _dec57, _dec66, _init_checked2, _init_name6, _init_value9, _init_disabled8, _init_control5, _initProto12, _RadioInput, RadioInput;
+var import_lit_html18, _dec41, _initClass16, _HTMLElement16, _dec116, _dec213, _dec312, _dec410, _dec58, _dec66, _init_checked2, _init_name7, _init_value9, _init_disabled8, _init_control5, _initProto12, _RadioInput, RadioInput;
 var init_input2 = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/radio/input.ts"() {
     "use strict";
@@ -12892,12 +12934,12 @@ var init_input2 = __esm({
     }), _dec410 = Prop({
       type: Boolean,
       reflect: true
-    }), _dec57 = Query("button"), _dec66 = Listen("click", {
+    }), _dec58 = Query("button"), _dec66 = Listen("click", {
       selector: "button"
     });
     RadioInput = class extends (_HTMLElement16 = HTMLElement) {
       static {
-        ({ e: [_init_checked2, _init_name6, _init_value9, _init_disabled8, _init_control5, _initProto12], c: [_RadioInput, _initClass16] } = _apply_decs_2203_r16(this, [
+        ({ e: [_init_checked2, _init_name7, _init_value9, _init_disabled8, _init_control5, _initProto12], c: [_RadioInput, _initClass16] } = _apply_decs_2203_r16(this, [
           [
             _dec116,
             1,
@@ -12919,7 +12961,7 @@ var init_input2 = __esm({
             "disabled"
           ],
           [
-            _dec57,
+            _dec58,
             1,
             "control"
           ],
@@ -13012,16 +13054,22 @@ var init_input2 = __esm({
           return;
         }
         this.checked = true;
-        dispatchControlEvent(this, "radio", {
+        const groupName = this.closest("ease-radio-group")?.getAttribute("name") ?? void 0;
+        const name = this.getAttribute("name") ?? groupName ?? void 0;
+        const detail = {
+          name,
           value: this.checked,
           event
-        });
+        };
+        dispatchControlEvent(this, "radio", detail);
+        dispatchControlEvent(this, "change", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       static {
         _initClass16();
       }
       constructor(...args) {
-        super(...args), this.#___private_checked_1 = (_initProto12(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 = (_initProto12(this), _init_checked2(this)), this.#___private_name_2 = _init_name7(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()}`;
       }
     };
   }
@@ -13404,7 +13452,7 @@ function applyDecs2203RFactory17() {
 function _apply_decs_2203_r17(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r17 = applyDecs2203RFactory17())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html19, _dec50, _initClass17, _HTMLElement17, _dec117, _dec214, _dec313, _dec411, _dec58, _dec67, _dec75, _dec85, _dec95, _dec104, _dec118, _init_value10, _init_min2, _init_max2, _init_step2, _init_disabled9, _init_control6, _init_valueControl, _initProto13, _Slider, Slider;
+var import_lit_html19, _dec50, _initClass17, _HTMLElement17, _dec117, _dec214, _dec313, _dec411, _dec59, _dec67, _dec75, _dec85, _dec95, _dec104, _dec118, _init_value10, _init_min2, _init_max2, _init_step2, _init_disabled9, _init_control6, _init_valueControl, _initProto13, _Slider, Slider;
 var init_slider = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/slider/index.ts"() {
     "use strict";
@@ -13526,11 +13574,15 @@ var init_slider = __esm({
           .step=${this.step ?? 1}
           .value=${String(this.value ?? 0)}
           ?disabled=${this.disabled}
+          @input=${this.handleRangeInput}
+          @change=${this.handleRangeChange}
           ?aria-disabled=${this.disabled}
         />
         
         <ease-input
           part="value"
+          @input=${this.handleValueInput}
+          @change=${this.handleValueChange}
           type="number"
           placeholder="-"
           .disabled=${Boolean(this.disabled)}
@@ -13551,7 +13603,7 @@ var init_slider = __esm({
     }), _dec411 = Prop({
       type: Number,
       reflect: true
-    }), _dec58 = Prop({
+    }), _dec59 = Prop({
       type: Boolean,
       reflect: true
     }), _dec67 = Query("input"), _dec75 = Query("ease-input"), _dec85 = Listen("input", {
@@ -13589,7 +13641,7 @@ var init_slider = __esm({
             "step"
           ],
           [
-            _dec58,
+            _dec59,
             1,
             "disabled"
           ],
@@ -13702,10 +13754,14 @@ var init_slider = __esm({
         if (this.valueControl) {
           this.valueControl.value = numericValue === null ? "" : String(numericValue);
         }
-        dispatchControlEvent(this, "input", {
+        const name = this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value,
           event
-        });
+        };
+        dispatchControlEvent(this, "input", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleRangeChange(event, target) {
         if (target) {
@@ -13716,10 +13772,14 @@ var init_slider = __esm({
             this.valueControl.value = numericValue === null ? "" : String(numericValue);
           }
         }
-        dispatchControlEvent(this, "change", {
+        const name = this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value,
           event
-        });
+        };
+        dispatchControlEvent(this, "change", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleValueInput(event) {
         const rawValue = event.detail?.value ?? "";
@@ -13729,10 +13789,15 @@ var init_slider = __esm({
         if (this.control) {
           this.control.value = String(numericValue ?? 0);
         }
-        dispatchControlEvent(this, "input", {
+        const name = this.getAttribute("name") ?? void 0;
+        const controlEvent = event.detail?.event ?? event;
+        const detail = {
+          name,
           value: this.value,
-          event: event.detail?.event ?? event
-        });
+          event: controlEvent
+        };
+        dispatchControlEvent(this, "input", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleValueChange(event) {
         const rawValue = event.detail?.value ?? "";
@@ -13742,10 +13807,15 @@ var init_slider = __esm({
         if (this.control) {
           this.control.value = String(numericValue ?? 0);
         }
-        dispatchControlEvent(this, "change", {
+        const name = this.getAttribute("name") ?? void 0;
+        const controlEvent = event.detail?.event ?? event;
+        const detail = {
+          name,
           value: this.value,
-          event: event.detail?.event ?? event
-        });
+          event: controlEvent
+        };
+        dispatchControlEvent(this, "change", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       updateProgress() {
         if (!this.control) {
@@ -14339,10 +14409,15 @@ var init_toggle = __esm({
           return;
         }
         this.checked = !this.checked;
-        dispatchControlEvent(this, "toggle", {
+        const name = this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.checked,
           event
-        });
+        };
+        dispatchControlEvent(this, "toggle", detail);
+        dispatchControlEvent(this, "change", detail);
+        dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
       }
       static {
         _initClass18();
@@ -14731,14 +14806,14 @@ function applyDecs2203RFactory19() {
 function _apply_decs_2203_r19(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r19 = applyDecs2203RFactory19())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html21, _dec59, _initClass19, _HTMLElement19, _dec120, _dec216, _init_label, _init_fullWidth2, _initProto15, _Field, Field;
+var import_lit_html21, _dec60, _initClass19, _HTMLElement19, _dec120, _dec216, _init_label, _init_fullWidth2, _initProto15, _Field, Field;
 var init_field = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/field/index.ts"() {
     "use strict";
     import_lit_html21 = require("lit-html");
     init_Component();
     init_Prop();
-    _dec59 = Component({
+    _dec60 = Component({
       tag: "ease-field",
       autoSlot: false,
       shadowMode: "open",
@@ -14827,7 +14902,7 @@ var init_field = __esm({
             "fullWidth"
           ]
         ], [
-          _dec59
+          _dec60
         ], _HTMLElement19));
       }
       #___private_label_1;
@@ -15231,7 +15306,7 @@ function applyDecs2203RFactory20() {
 function _apply_decs_2203_r20(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r20 = applyDecs2203RFactory20())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html22, _dec60, _initClass20, _HTMLElement20, _dec121, _dec217, _dec315, _dec413, _dec510, _dec68, _dec76, _init_activeTab, _init_headline, _init_maxHeight2, _init_contentElement2, _init_bodyElement, _initProto16, _Panel, Panel;
+var import_lit_html22, _dec61, _initClass20, _HTMLElement20, _dec121, _dec217, _dec315, _dec413, _dec510, _dec68, _dec76, _init_activeTab, _init_headline, _init_maxHeight2, _init_contentElement2, _init_bodyElement, _initProto16, _Panel, Panel;
 var init_panel = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/panel/index.ts"() {
     "use strict";
@@ -15241,7 +15316,7 @@ var init_panel = __esm({
     init_Listen();
     init_Prop();
     init_Query();
-    _dec60 = Component({
+    _dec61 = Component({
       tag: "ease-panel",
       shadowMode: "open",
       styles: `
@@ -15306,7 +15381,6 @@ var init_panel = __esm({
       align-items: center;
       gap: 2px;
       flex-grow: 1;
-      margin: 0 0 0 4px;
     }
 
     [part="tabs"]:empty {
@@ -15315,17 +15389,18 @@ var init_panel = __esm({
 
     [part="tab"] {
       appearance: none;
+      border-radius: var(--ease-panel-tab-radius, var(--radii-md));
+      background-color: var(--ease-panel-tab-background, transparent);
+      box-sizing: border-box;
+      padding: var(--ease-panel-tab-padding, 4px 8px);
       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);
       transition: color 200ms, background-color 200ms;
       transition-timing-function: cubic-bezier(.25, 0, .5, 1);
     }
@@ -15535,7 +15610,7 @@ var init_panel = __esm({
             "onDefaultSlotChange"
           ]
         ], [
-          _dec60
+          _dec61
         ], _HTMLElement20));
       }
       #tabs;
@@ -16218,7 +16293,7 @@ function applyDecs2203RFactory21() {
 function _apply_decs_2203_r21(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r21 = applyDecs2203RFactory21())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html23, _dec61, _initClass21, _HTMLElement21, _dec123, _dec218, _dec316, _dec414, _dec511, _init_value11, _init_defaultSlot, _initProto17, readControlValue, getControlName, _State, State;
+var import_lit_html23, _dec69, _initClass21, _HTMLElement21, _dec123, _dec218, _dec316, _dec414, _dec511, _init_value11, _init_defaultSlot, _initProto17, readControlValue, getControlName, _State, State;
 var init_state = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/state/index.ts"() {
     "use strict";
@@ -16249,7 +16324,7 @@ var init_state = __esm({
       }
       return element.getAttribute?.("name") ?? null;
     };
-    _dec61 = Component({
+    _dec69 = Component({
       tag: "ease-state",
       shadowMode: "open",
       styles: `
@@ -16302,7 +16377,7 @@ var init_state = __esm({
             "handleControlChange"
           ]
         ], [
-          _dec61
+          _dec69
         ], _HTMLElement21));
       }
       #controls;
@@ -16890,7 +16965,7 @@ function applyDecs2203RFactory22() {
 function _apply_decs_2203_r22(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r22 = applyDecs2203RFactory22())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html24, _dec69, _initClass22, _HTMLElement22, _dec124, _dec219, _dec317, _dec415, _dec512, _dec610, _init_open3, _init_delay, _init_placement4, _init_triggerElement, _init_contentElement3, _initProto18, _Tooltip, Tooltip;
+var import_lit_html24, _dec70, _initClass22, _HTMLElement22, _dec124, _dec219, _dec317, _dec415, _dec512, _dec610, _init_open3, _init_delay, _init_placement4, _init_triggerElement, _init_contentElement3, _initProto18, _Tooltip, Tooltip;
 var init_tooltip = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/tooltip/index.ts"() {
     "use strict";
@@ -16900,7 +16975,7 @@ var init_tooltip = __esm({
     init_OutsideClick();
     init_Prop();
     init_Query();
-    _dec69 = Component({
+    _dec70 = Component({
       tag: "ease-tooltip",
       shadowMode: "open",
       styles: `
@@ -16984,7 +17059,7 @@ var init_tooltip = __esm({
             "handleOutsideDismiss"
           ]
         ], [
-          _dec69
+          _dec70
         ], _HTMLElement22));
       }
       #hoverTimer;
@@ -17531,7 +17606,7 @@ function applyDecs2203RFactory23() {
 function _apply_decs_2203_r23(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r23 = applyDecs2203RFactory23())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html25, _dec70, _initClass23, _HTMLElement23, _dec125, _dec220, _dec318, _dec416, _init_loading, _init_intro, _init_size, _init_ariaLabel, _initProto19, CENTER, DOTS_DATA, INNER_DOT_IDS, OUTER_DOT_IDS, forceReflow, getAngle, sortByAngle, LOOP_DURATION, ROTATION_DURATION, _LogoLoader, LogoLoader;
+var import_lit_html25, _dec71, _initClass23, _HTMLElement23, _dec125, _dec220, _dec318, _dec416, _init_loading, _init_intro, _init_size, _init_ariaLabel, _initProto19, CENTER, DOTS_DATA, INNER_DOT_IDS, OUTER_DOT_IDS, forceReflow, getAngle, sortByAngle, LOOP_DURATION, ROTATION_DURATION, _LogoLoader, LogoLoader;
 var init_logo = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/logo/index.ts"() {
     "use strict";
@@ -17685,7 +17760,7 @@ var init_logo = __esm({
     sortByAngle = (ids) => ids.map((id) => DOTS_DATA.find((d) => d.id === id)).filter((dot) => dot != null).sort((a, b) => getAngle(a) - getAngle(b));
     LOOP_DURATION = 1500;
     ROTATION_DURATION = 600;
-    _dec70 = Component({
+    _dec71 = Component({
       tag: "ease-logo-loader",
       styles: `
     :host {
@@ -17958,7 +18033,7 @@ var init_logo = __esm({
             "ariaLabel"
           ]
         ], [
-          _dec70
+          _dec71
         ], _HTMLElement23));
       }
       #___private_loading_1;
@@ -18830,7 +18905,7 @@ function applyDecs2203RFactory24() {
 function _apply_decs_2203_r24(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r24 = applyDecs2203RFactory24())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html26, _dec71, _initClass24, _HTMLElement24, _dec126, _dec221, _init_paused, _init_canvasEl, _initProto20, clamp, mean, quantile, computePercentile, computeMedian, formatNumber, formatMs, rateFps, _MonitorFps, MonitorFps;
+var import_lit_html26, _dec77, _initClass24, _HTMLElement24, _dec126, _dec221, _init_paused, _init_canvasEl, _initProto20, clamp, mean, quantile, computePercentile, computeMedian, formatNumber, formatMs, rateFps, _MonitorFps, MonitorFps;
 var init_fps = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/monitor/fps.ts"() {
     "use strict";
@@ -18893,7 +18968,7 @@ var init_fps = __esm({
       }
       return "poor";
     };
-    _dec71 = Component({
+    _dec77 = Component({
       tag: "ease-monitor-fps",
       autoSlot: false,
       shadowMode: "open",
@@ -19012,7 +19087,7 @@ var init_fps = __esm({
             "canvasEl"
           ]
         ], [
-          _dec71
+          _dec77
         ], _HTMLElement24));
       }
       #___private_paused_1;
@@ -19673,7 +19748,7 @@ function applyDecs2203RFactory25() {
 function _apply_decs_2203_r25(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r25 = applyDecs2203RFactory25())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html27, _dec77, _initClass25, _HTMLElement25, _dec127, _dec222, _dec319, _init_metrics, _init_network, _initProto21, METRIC_THRESHOLDS, GLOBAL_BENCHMARKS, rateMetric, formatMetric, formatBytes, estimateCarbonFootprint, _Monitor, Monitor;
+var import_lit_html27, _dec78, _initClass25, _HTMLElement25, _dec127, _dec222, _dec319, _init_metrics, _init_network, _initProto21, METRIC_THRESHOLDS, GLOBAL_BENCHMARKS, rateMetric, formatMetric, formatBytes, estimateCarbonFootprint, _Monitor, Monitor;
 var init_monitor = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/monitor/index.ts"() {
     "use strict";
@@ -19791,7 +19866,7 @@ var init_monitor = __esm({
       const emissions = totalBytes / 1e9 * 0.81;
       return `${emissions.toFixed(3)}g CO2 eq.`;
     };
-    _dec77 = Component({
+    _dec78 = Component({
       tag: "ease-monitor",
       styles: `
     :host {
@@ -19935,7 +20010,7 @@ var init_monitor = __esm({
             "handleFpsUpdate"
           ]
         ], [
-          _dec77
+          _dec78
         ], _HTMLElement25));
       }
       #___private_metrics_1;
@@ -20829,13 +20904,13 @@ function applyDecs2203RFactory26() {
 function _apply_decs_2203_r26(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r26 = applyDecs2203RFactory26())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html28, _dec78, _initClass26, _HTMLElement26, _IconAnchorAdd, IconAnchorAdd;
+var import_lit_html28, _dec79, _initClass26, _HTMLElement26, _IconAnchorAdd, IconAnchorAdd;
 var init_anchor_add = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/anchor-add.ts"() {
     "use strict";
     import_lit_html28 = require("lit-html");
     init_Component();
-    _dec78 = Component({
+    _dec79 = Component({
       tag: "ease-icon-anchor-add",
       styles: `
     :host {
@@ -20865,7 +20940,7 @@ var init_anchor_add = __esm({
     IconAnchorAdd = class extends (_HTMLElement26 = HTMLElement) {
       static {
         ({ c: [_IconAnchorAdd, _initClass26] } = _apply_decs_2203_r26(this, [], [
-          _dec78
+          _dec79
         ], _HTMLElement26));
       }
       static {
@@ -21252,13 +21327,13 @@ function applyDecs2203RFactory27() {
 function _apply_decs_2203_r27(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r27 = applyDecs2203RFactory27())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html29, _dec79, _initClass27, _HTMLElement27, _IconAnchorRemove, IconAnchorRemove;
+var import_lit_html29, _dec80, _initClass27, _HTMLElement27, _IconAnchorRemove, IconAnchorRemove;
 var init_anchor_remove = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/anchor-remove.ts"() {
     "use strict";
     import_lit_html29 = require("lit-html");
     init_Component();
-    _dec79 = Component({
+    _dec80 = Component({
       tag: "ease-icon-anchor-remove",
       styles: `
     :host {
@@ -21287,7 +21362,7 @@ var init_anchor_remove = __esm({
     IconAnchorRemove = class extends (_HTMLElement27 = HTMLElement) {
       static {
         ({ c: [_IconAnchorRemove, _initClass27] } = _apply_decs_2203_r27(this, [], [
-          _dec79
+          _dec80
         ], _HTMLElement27));
       }
       static {
@@ -21674,13 +21749,13 @@ function applyDecs2203RFactory28() {
 function _apply_decs_2203_r28(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r28 = applyDecs2203RFactory28())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html30, _dec80, _initClass28, _HTMLElement28, _ArrowUp, ArrowUp;
+var import_lit_html30, _dec81, _initClass28, _HTMLElement28, _ArrowUp, ArrowUp;
 var init_arrow_up = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/arrow-up.ts"() {
     "use strict";
     import_lit_html30 = require("lit-html");
     init_Component();
-    _dec80 = Component({
+    _dec81 = Component({
       tag: "ease-icon-arrow-up",
       styles: `
     :host {
@@ -21705,7 +21780,7 @@ var init_arrow_up = __esm({
     ArrowUp = class extends (_HTMLElement28 = HTMLElement) {
       static {
         ({ c: [_ArrowUp, _initClass28] } = _apply_decs_2203_r28(this, [], [
-          _dec80
+          _dec81
         ], _HTMLElement28));
       }
       static {
@@ -22092,13 +22167,13 @@ function applyDecs2203RFactory29() {
 function _apply_decs_2203_r29(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r29 = applyDecs2203RFactory29())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html31, _dec81, _initClass29, _HTMLElement29, _IconBezier, IconBezier;
+var import_lit_html31, _dec86, _initClass29, _HTMLElement29, _IconBezier, IconBezier;
 var init_bezier = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier.ts"() {
     "use strict";
     import_lit_html31 = require("lit-html");
     init_Component();
-    _dec81 = Component({
+    _dec86 = Component({
       tag: "ease-icon-bezier",
       styles: `
     :host {
@@ -22119,7 +22194,7 @@ var init_bezier = __esm({
     IconBezier = class extends (_HTMLElement29 = HTMLElement) {
       static {
         ({ c: [_IconBezier, _initClass29] } = _apply_decs_2203_r29(this, [], [
-          _dec81
+          _dec86
         ], _HTMLElement29));
       }
       static {
@@ -22506,13 +22581,13 @@ function applyDecs2203RFactory30() {
 function _apply_decs_2203_r30(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r30 = applyDecs2203RFactory30())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html32, _dec86, _initClass30, _HTMLElement30, _IconBezierAngle, IconBezierAngle;
+var import_lit_html32, _dec87, _initClass30, _HTMLElement30, _IconBezierAngle, IconBezierAngle;
 var init_bezier_angle = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier-angle.ts"() {
     "use strict";
     import_lit_html32 = require("lit-html");
     init_Component();
-    _dec86 = Component({
+    _dec87 = Component({
       tag: "ease-icon-bezier-angle",
       styles: `
     :host {
@@ -22540,7 +22615,7 @@ var init_bezier_angle = __esm({
     IconBezierAngle = class extends (_HTMLElement30 = HTMLElement) {
       static {
         ({ c: [_IconBezierAngle, _initClass30] } = _apply_decs_2203_r30(this, [], [
-          _dec86
+          _dec87
         ], _HTMLElement30));
       }
       static {
@@ -22927,13 +23002,13 @@ function applyDecs2203RFactory31() {
 function _apply_decs_2203_r31(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r31 = applyDecs2203RFactory31())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html33, _dec87, _initClass31, _HTMLElement31, _IconBezierDistribute, IconBezierDistribute;
+var import_lit_html33, _dec88, _initClass31, _HTMLElement31, _IconBezierDistribute, IconBezierDistribute;
 var init_bezier_distribute = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier-distribute.ts"() {
     "use strict";
     import_lit_html33 = require("lit-html");
     init_Component();
-    _dec87 = Component({
+    _dec88 = Component({
       tag: "ease-icon-bezier-distribute",
       styles: `
     :host {
@@ -22962,7 +23037,7 @@ var init_bezier_distribute = __esm({
     IconBezierDistribute = class extends (_HTMLElement31 = HTMLElement) {
       static {
         ({ c: [_IconBezierDistribute, _initClass31] } = _apply_decs_2203_r31(this, [], [
-          _dec87
+          _dec88
         ], _HTMLElement31));
       }
       static {
@@ -23349,13 +23424,13 @@ function applyDecs2203RFactory32() {
 function _apply_decs_2203_r32(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r32 = applyDecs2203RFactory32())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html34, _dec88, _initClass32, _HTMLElement32, _IconBezierLength, IconBezierLength;
+var import_lit_html34, _dec89, _initClass32, _HTMLElement32, _IconBezierLength, IconBezierLength;
 var init_bezier_length = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier-length.ts"() {
     "use strict";
     import_lit_html34 = require("lit-html");
     init_Component();
-    _dec88 = Component({
+    _dec89 = Component({
       tag: "ease-icon-bezier-length",
       styles: `
     :host {
@@ -23381,7 +23456,7 @@ var init_bezier_length = __esm({
     IconBezierLength = class extends (_HTMLElement32 = HTMLElement) {
       static {
         ({ c: [_IconBezierLength, _initClass32] } = _apply_decs_2203_r32(this, [], [
-          _dec88
+          _dec89
         ], _HTMLElement32));
       }
       static {
@@ -23768,13 +23843,13 @@ function applyDecs2203RFactory33() {
 function _apply_decs_2203_r33(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r33 = applyDecs2203RFactory33())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html35, _dec89, _initClass33, _HTMLElement33, _IconBezierMirror, IconBezierMirror;
+var import_lit_html35, _dec90, _initClass33, _HTMLElement33, _IconBezierMirror, IconBezierMirror;
 var init_bezier_mirror = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/bezier-mirror.ts"() {
     "use strict";
     import_lit_html35 = require("lit-html");
     init_Component();
-    _dec89 = Component({
+    _dec90 = Component({
       tag: "ease-icon-bezier-mirror",
       styles: `
     :host {
@@ -23800,7 +23875,7 @@ var init_bezier_mirror = __esm({
     IconBezierMirror = class extends (_HTMLElement33 = HTMLElement) {
       static {
         ({ c: [_IconBezierMirror, _initClass33] } = _apply_decs_2203_r33(this, [], [
-          _dec89
+          _dec90
         ], _HTMLElement33));
       }
       static {
@@ -24187,13 +24262,13 @@ function applyDecs2203RFactory34() {
 function _apply_decs_2203_r34(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r34 = applyDecs2203RFactory34())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html36, _dec90, _initClass34, _HTMLElement34, _IconCheck, IconCheck;
+var import_lit_html36, _dec91, _initClass34, _HTMLElement34, _IconCheck, IconCheck;
 var init_check = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/check.ts"() {
     "use strict";
     import_lit_html36 = require("lit-html");
     init_Component();
-    _dec90 = Component({
+    _dec91 = Component({
       tag: "ease-icon-check",
       styles: `
     :host {
@@ -24218,7 +24293,7 @@ var init_check = __esm({
     IconCheck = class extends (_HTMLElement34 = HTMLElement) {
       static {
         ({ c: [_IconCheck, _initClass34] } = _apply_decs_2203_r34(this, [], [
-          _dec90
+          _dec91
         ], _HTMLElement34));
       }
       static {
@@ -24605,13 +24680,13 @@ function applyDecs2203RFactory35() {
 function _apply_decs_2203_r35(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r35 = applyDecs2203RFactory35())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html37, _dec91, _initClass35, _HTMLElement35, _IconCircleArrowLeft, IconCircleArrowLeft;
+var import_lit_html37, _dec96, _initClass35, _HTMLElement35, _IconCircleArrowLeft, IconCircleArrowLeft;
 var init_circle_arrow_left = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/circle-arrow-left.ts"() {
     "use strict";
     import_lit_html37 = require("lit-html");
     init_Component();
-    _dec91 = Component({
+    _dec96 = Component({
       tag: "ease-icon-circle-arrow-left",
       styles: `
     :host {
@@ -24636,7 +24711,7 @@ var init_circle_arrow_left = __esm({
     IconCircleArrowLeft = class extends (_HTMLElement35 = HTMLElement) {
       static {
         ({ c: [_IconCircleArrowLeft, _initClass35] } = _apply_decs_2203_r35(this, [], [
-          _dec91
+          _dec96
         ], _HTMLElement35));
       }
       static {
@@ -25023,13 +25098,13 @@ function applyDecs2203RFactory36() {
 function _apply_decs_2203_r36(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r36 = applyDecs2203RFactory36())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html38, _dec96, _initClass36, _HTMLElement36, _IconCircleArrowRight, IconCircleArrowRight;
+var import_lit_html38, _dec97, _initClass36, _HTMLElement36, _IconCircleArrowRight, IconCircleArrowRight;
 var init_circle_arrow_right = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/circle-arrow-right.ts"() {
     "use strict";
     import_lit_html38 = require("lit-html");
     init_Component();
-    _dec96 = Component({
+    _dec97 = Component({
       tag: "ease-icon-circle-arrow-right",
       styles: `
     :host {
@@ -25054,7 +25129,7 @@ var init_circle_arrow_right = __esm({
     IconCircleArrowRight = class extends (_HTMLElement36 = HTMLElement) {
       static {
         ({ c: [_IconCircleArrowRight, _initClass36] } = _apply_decs_2203_r36(this, [], [
-          _dec96
+          _dec97
         ], _HTMLElement36));
       }
       static {
@@ -25441,13 +25516,13 @@ function applyDecs2203RFactory37() {
 function _apply_decs_2203_r37(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r37 = applyDecs2203RFactory37())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html39, _dec97, _initClass37, _HTMLElement37, _IconClear, IconClear;
+var import_lit_html39, _dec98, _initClass37, _HTMLElement37, _IconClear, IconClear;
 var init_clear = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/clear.ts"() {
     "use strict";
     import_lit_html39 = require("lit-html");
     init_Component();
-    _dec97 = Component({
+    _dec98 = Component({
       tag: "ease-icon-clear",
       styles: `
     :host {
@@ -25516,7 +25591,7 @@ var init_clear = __esm({
     IconClear = class extends (_HTMLElement37 = HTMLElement) {
       static {
         ({ c: [_IconClear, _initClass37] } = _apply_decs_2203_r37(this, [], [
-          _dec97
+          _dec98
         ], _HTMLElement37));
       }
       static {
@@ -25903,13 +25978,13 @@ function applyDecs2203RFactory38() {
 function _apply_decs_2203_r38(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r38 = applyDecs2203RFactory38())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html40, _dec98, _initClass38, _HTMLElement38, _IconCode, IconCode;
+var import_lit_html40, _dec99, _initClass38, _HTMLElement38, _IconCode, IconCode;
 var init_code = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/code.ts"() {
     "use strict";
     import_lit_html40 = require("lit-html");
     init_Component();
-    _dec98 = Component({
+    _dec99 = Component({
       tag: "ease-icon-code",
       styles: `
     :host {
@@ -25934,7 +26009,7 @@ var init_code = __esm({
     IconCode = class extends (_HTMLElement38 = HTMLElement) {
       static {
         ({ c: [_IconCode, _initClass38] } = _apply_decs_2203_r38(this, [], [
-          _dec98
+          _dec99
         ], _HTMLElement38));
       }
       static {
@@ -26321,13 +26396,13 @@ function applyDecs2203RFactory39() {
 function _apply_decs_2203_r39(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r39 = applyDecs2203RFactory39())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html41, _dec99, _initClass39, _HTMLElement39, _IconDots, IconDots;
+var import_lit_html41, _dec100, _initClass39, _HTMLElement39, _IconDots, IconDots;
 var init_dots = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/dots.ts"() {
     "use strict";
     import_lit_html41 = require("lit-html");
     init_Component();
-    _dec99 = Component({
+    _dec100 = Component({
       tag: "ease-icon-dots",
       styles: `
     :host {
@@ -26354,7 +26429,7 @@ var init_dots = __esm({
     IconDots = class extends (_HTMLElement39 = HTMLElement) {
       static {
         ({ c: [_IconDots, _initClass39] } = _apply_decs_2203_r39(this, [], [
-          _dec99
+          _dec100
         ], _HTMLElement39));
       }
       static {
@@ -26741,14 +26816,14 @@ function applyDecs2203RFactory40() {
 function _apply_decs_2203_r40(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r40 = applyDecs2203RFactory40())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html42, _dec100, _initClass40, _HTMLElement40, _dec128, _init_state2, _initProto22, _IconGrid, IconGrid;
+var import_lit_html42, _dec101, _initClass40, _HTMLElement40, _dec128, _init_state2, _initProto22, _IconGrid, IconGrid;
 var init_grid = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/grid.ts"() {
     "use strict";
     import_lit_html42 = require("lit-html");
     init_Component();
     init_Prop();
-    _dec100 = Component({
+    _dec101 = Component({
       tag: "ease-icon-grid",
       styles: `
     :host {
@@ -26807,7 +26882,7 @@ var init_grid = __esm({
             "state"
           ]
         ], [
-          _dec100
+          _dec101
         ], _HTMLElement40));
       }
       #___private_state_1;
@@ -27222,13 +27297,13 @@ function applyDecs2203RFactory41() {
 function _apply_decs_2203_r41(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r41 = applyDecs2203RFactory41())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html43, _dec101, _initClass41, _HTMLElement41, _Loading, Loading;
+var import_lit_html43, _dec105, _initClass41, _HTMLElement41, _Loading, Loading;
 var init_loading = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/loading.ts"() {
     "use strict";
     import_lit_html43 = require("lit-html");
     init_Component();
-    _dec101 = Component({
+    _dec105 = Component({
       tag: "ease-icon-loading",
       styles: `
     :host {
@@ -27291,7 +27366,7 @@ var init_loading = __esm({
     Loading = class extends (_HTMLElement41 = HTMLElement) {
       static {
         ({ c: [_Loading, _initClass41] } = _apply_decs_2203_r41(this, [], [
-          _dec101
+          _dec105
         ], _HTMLElement41));
       }
       static {
@@ -27678,13 +27753,13 @@ function applyDecs2203RFactory42() {
 function _apply_decs_2203_r42(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r42 = applyDecs2203RFactory42())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html44, _dec105, _initClass42, _HTMLElement42, _IconMention, IconMention;
+var import_lit_html44, _dec106, _initClass42, _HTMLElement42, _IconMention, IconMention;
 var init_mention = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/mention.ts"() {
     "use strict";
     import_lit_html44 = require("lit-html");
     init_Component();
-    _dec105 = Component({
+    _dec106 = Component({
       tag: "ease-icon-mention",
       styles: `
     :host {
@@ -27709,7 +27784,7 @@ var init_mention = __esm({
     IconMention = class extends (_HTMLElement42 = HTMLElement) {
       static {
         ({ c: [_IconMention, _initClass42] } = _apply_decs_2203_r42(this, [], [
-          _dec105
+          _dec106
         ], _HTMLElement42));
       }
       static {
@@ -28096,13 +28171,13 @@ function applyDecs2203RFactory43() {
 function _apply_decs_2203_r43(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r43 = applyDecs2203RFactory43())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html45, _dec106, _initClass43, _HTMLElement43, _Settings, Settings;
+var import_lit_html45, _dec107, _initClass43, _HTMLElement43, _Settings, Settings;
 var init_settings = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/interface/settings.ts"() {
     "use strict";
     import_lit_html45 = require("lit-html");
     init_Component();
-    _dec106 = Component({
+    _dec107 = Component({
       tag: "ease-icon-settings",
       styles: `
     :host {
@@ -28127,7 +28202,7 @@ var init_settings = __esm({
     Settings = class extends (_HTMLElement43 = HTMLElement) {
       static {
         ({ c: [_Settings, _initClass43] } = _apply_decs_2203_r43(this, [], [
-          _dec106
+          _dec107
         ], _HTMLElement43));
       }
       static {
@@ -28514,14 +28589,14 @@ function applyDecs2203RFactory44() {
 function _apply_decs_2203_r44(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r44 = applyDecs2203RFactory44())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html46, _dec107, _initClass44, _HTMLElement44, _dec129, _init_state3, _initProto23, _Snap, Snap;
+var import_lit_html46, _dec108, _initClass44, _HTMLElement44, _dec129, _init_state3, _initProto23, _Snap, Snap;
 var init_snap = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/icons/animation/snap.ts"() {
     "use strict";
     import_lit_html46 = require("lit-html");
     init_Component();
     init_Prop();
-    _dec107 = Component({
+    _dec108 = Component({
       tag: "ease-icon-snap",
       styles: `
     :host {
@@ -28622,7 +28697,7 @@ var init_snap = __esm({
             "state"
           ]
         ], [
-          _dec107
+          _dec108
         ], _HTMLElement44));
       }
       #___private_state_1;
@@ -29748,6 +29823,21 @@ var init_utils2 = __esm({
   }
 });
 
+// src/elements/shared.ts
+var dispatchControlEvent2;
+var init_shared2 = __esm({
+  "src/elements/shared.ts"() {
+    "use strict";
+    dispatchControlEvent2 = (host, type, detail) => {
+      host.dispatchEvent(new CustomEvent(type, {
+        detail,
+        bubbles: true,
+        composed: true
+      }));
+    };
+  }
+});
+
 // swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/constants.ts
 var HIT_AREA_RADIUS, LINEAR_HIT_THRESHOLD, LINEAR_PATH_SAMPLES, DRAG_ACTIVATION_DISTANCE_PX, DRAG_ACTIVATION_DISTANCE_PX_SQUARED, DEFAULT_HANDLE_LENGTH, SVG_WIDTH, SVG_HEIGHT, BEZIER_CONTROL_MIN_Y, BEZIER_CONTROL_MAX_Y, EASING_PRESETS;
 var init_constants = __esm({
@@ -29999,21 +30089,6 @@ var init_svg_renderer = __esm({
   }
 });
 
-// src/elements/shared.ts
-var dispatchControlEvent2;
-var init_shared2 = __esm({
-  "src/elements/shared.ts"() {
-    "use strict";
-    dispatchControlEvent2 = (host, type, detail) => {
-      host.dispatchEvent(new CustomEvent(type, {
-        detail,
-        bubbles: true,
-        composed: true
-      }));
-    };
-  }
-});
-
 // swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/canvas.ts
 function applyDecs2203RFactory45() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -30387,7 +30462,7 @@ function applyDecs2203RFactory45() {
 function _apply_decs_2203_r45(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r45 = applyDecs2203RFactory45())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html48, _dec108, _initClass45, _HTMLElement45, _dec130, _dec223, _dec320, _dec417, _dec513, _dec611, _dec710, _dec810, _dec910, _init_easingType, _init_points, _init_showGrid, _init_snapToGrid, _init_gridSize, _init_focusedLinearIndex, _init_simplify, _init_round, _init_svgElement, _initProto24, _CurveCanvas, CurveCanvas, lerp, lerpPoint, findTForX, splitCurveSegment, evaluateCubicPointNormalized;
+var import_lit_html48, _dec109, _initClass45, _HTMLElement45, _dec130, _dec223, _dec320, _dec417, _dec513, _dec611, _dec710, _dec810, _dec910, _init_easingType, _init_points, _init_showGrid, _init_snapToGrid, _init_gridSize, _init_focusedLinearIndex, _init_simplify, _init_round, _init_svgElement, _initProto24, _CurveCanvas, CurveCanvas, lerp, lerpPoint, findTForX, splitCurveSegment, evaluateCubicPointNormalized;
 var init_canvas = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/canvas.ts"() {
     "use strict";
@@ -30401,7 +30476,7 @@ var init_canvas = __esm({
     init_Prop();
     init_Query();
     init_shared2();
-    _dec108 = Component({
+    _dec109 = Component({
       tag: "ease-curve-canvas",
       styles: canvasStyles,
       template() {
@@ -30507,7 +30582,7 @@ var init_canvas = __esm({
             "svgElement"
           ]
         ], [
-          _dec108
+          _dec109
         ], _HTMLElement45));
       }
       #___private_easingType_1;
@@ -31391,6 +31466,7 @@ var init_canvas = __esm({
         }, this.#emitPoints = (value, event) => {
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value,
             event
           };
@@ -31401,6 +31477,7 @@ var init_canvas = __esm({
           }
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value: index,
             event
           };
@@ -32119,7 +32196,7 @@ function applyDecs2203RFactory46() {
 function _apply_decs_2203_r46(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r46 = applyDecs2203RFactory46())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html49, _dec109, _initClass46, _HTMLElement46, _dec131, _dec224, _dec321, _init_easingType2, _init_points2, _init_focusedLinearIndex2, _initProto25, _CanvasControls, CanvasControls;
+var import_lit_html49, _dec131, _initClass46, _HTMLElement46, _dec133, _dec224, _dec321, _init_easingType2, _init_points2, _init_focusedLinearIndex2, _initProto25, _CanvasControls, CanvasControls;
 var init_canvas_controls = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/canvas-controls.ts"() {
     "use strict";
@@ -32131,7 +32208,7 @@ var init_canvas_controls = __esm({
     init_Component();
     init_Prop();
     init_shared2();
-    _dec109 = Component({
+    _dec131 = Component({
       tag: "ease-curve-canvas-controls",
       styles: canvasControlsStyles,
       template() {
@@ -32191,7 +32268,7 @@ var init_canvas_controls = __esm({
       </div>
     `;
       }
-    }), _dec131 = Prop({
+    }), _dec133 = Prop({
       reflect: true
     }), _dec224 = Prop({
       type: Object,
@@ -32205,7 +32282,7 @@ var init_canvas_controls = __esm({
       static {
         ({ e: [_init_easingType2, _init_points2, _init_focusedLinearIndex2, _initProto25], c: [_CanvasControls, _initClass46] } = _apply_decs_2203_r46(this, [
           [
-            _dec131,
+            _dec133,
             1,
             "easingType"
           ],
@@ -32220,7 +32297,7 @@ var init_canvas_controls = __esm({
             "focusedLinearIndex"
           ]
         ], [
-          _dec109
+          _dec131
         ], _HTMLElement46));
       }
       #___private_easingType_1;
@@ -32338,6 +32415,7 @@ var init_canvas_controls = __esm({
         }, this.#notifyHost = (type, value, event) => {
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value,
             event
           };
@@ -32849,13 +32927,13 @@ function applyDecs2203RFactory47() {
 function _apply_decs_2203_r47(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r47 = applyDecs2203RFactory47())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html50, _dec133, _initClass47, _HTMLElement47, _IconMinus2, IconMinus2;
+var import_lit_html50, _dec134, _initClass47, _HTMLElement47, _IconMinus2, IconMinus2;
 var init_minus2 = __esm({
   "src/elements/icons/interface/minus.ts"() {
     "use strict";
     import_lit_html50 = require("lit-html");
     init_Component();
-    _dec133 = Component({
+    _dec134 = Component({
       tag: "ease-icon-minus",
       styles: `
     :host {
@@ -32880,7 +32958,7 @@ var init_minus2 = __esm({
     IconMinus2 = class extends (_HTMLElement47 = HTMLElement) {
       static {
         ({ c: [_IconMinus2, _initClass47] } = _apply_decs_2203_r47(this, [], [
-          _dec133
+          _dec134
         ], _HTMLElement47));
       }
       static {
@@ -33263,13 +33341,13 @@ function applyDecs2203RFactory48() {
 function _apply_decs_2203_r48(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r48 = applyDecs2203RFactory48())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html51, _dec134, _initClass48, _HTMLElement48, _IconPlus2, IconPlus2;
+var import_lit_html51, _dec135, _initClass48, _HTMLElement48, _IconPlus2, IconPlus2;
 var init_plus2 = __esm({
   "src/elements/icons/interface/plus.ts"() {
     "use strict";
     import_lit_html51 = require("lit-html");
     init_Component();
-    _dec134 = Component({
+    _dec135 = Component({
       tag: "ease-icon-plus",
       styles: `
     :host {
@@ -33294,7 +33372,7 @@ var init_plus2 = __esm({
     IconPlus2 = class extends (_HTMLElement48 = HTMLElement) {
       static {
         ({ c: [_IconPlus2, _initClass48] } = _apply_decs_2203_r48(this, [], [
-          _dec134
+          _dec135
         ], _HTMLElement48));
       }
       static {
@@ -33677,14 +33755,14 @@ function applyDecs2203RFactory49() {
 function _apply_decs_2203_r49(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r49 = applyDecs2203RFactory49())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html52, _dec135, _initClass49, _HTMLElement49, _dec136, _dec225, _dec322, _dec418, _dec514, _dec612, _init_disabled11, _init_pill3, _init_fullWidth3, _init_type3, _init_block3, _init_variant2, _initProto26, _Button2, Button2;
+var import_lit_html52, _dec136, _initClass49, _HTMLElement49, _dec137, _dec225, _dec322, _dec418, _dec514, _dec612, _init_disabled11, _init_pill3, _init_fullWidth3, _init_type3, _init_block3, _init_variant2, _initProto26, _Button2, Button2;
 var init_button2 = __esm({
   "src/elements/button/index.ts"() {
     "use strict";
     import_lit_html52 = require("lit-html");
     init_Component();
     init_Prop();
-    _dec135 = Component({
+    _dec136 = Component({
       tag: "ease-button",
       autoSlot: true,
       shadowMode: "open",
@@ -33851,7 +33929,7 @@ var init_button2 = __esm({
       }
     }
   `
-    }), _dec136 = Prop({
+    }), _dec137 = Prop({
       type: Boolean,
       reflect: true
     }), _dec225 = Prop({
@@ -33880,7 +33958,7 @@ var init_button2 = __esm({
       static {
         ({ e: [_init_disabled11, _init_pill3, _init_fullWidth3, _init_type3, _init_block3, _init_variant2, _initProto26], c: [_Button2, _initClass49] } = _apply_decs_2203_r49(this, [
           [
-            _dec136,
+            _dec137,
             1,
             "disabled"
           ],
@@ -33910,7 +33988,7 @@ var init_button2 = __esm({
             "variant"
           ]
         ], [
-          _dec135
+          _dec136
         ], _HTMLElement49));
       }
       #___private_disabled_1;
@@ -34352,7 +34430,7 @@ function applyDecs2203RFactory50() {
 function _apply_decs_2203_r50(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r50 = applyDecs2203RFactory50())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html53, _dec137, _initClass50, _HTMLElement50, _dec138, _dec226, _dec323, _dec419, _dec515, _dec613, _init_easingType3, _init_points3, _init_showGrid2, _init_snapToGrid2, _init_gridSize2, _init_focusedLinearIndex3, _initProto27, _CurveControls, CurveControls;
+var import_lit_html53, _dec138, _initClass50, _HTMLElement50, _dec139, _dec226, _dec323, _dec419, _dec515, _dec613, _init_easingType3, _init_points3, _init_showGrid2, _init_snapToGrid2, _init_gridSize2, _init_focusedLinearIndex3, _initProto27, _CurveControls, CurveControls;
 var init_controls = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/controls.ts"() {
     "use strict";
@@ -34367,7 +34445,7 @@ var init_controls = __esm({
     init_minus2();
     init_plus2();
     init_button2();
-    _dec137 = Component({
+    _dec138 = Component({
       tag: "ease-curve-controls",
       styles: controlsStyles,
       template() {
@@ -34400,7 +34478,7 @@ var init_controls = __esm({
       </ease-field>
     `;
       }
-    }), _dec138 = Prop({
+    }), _dec139 = Prop({
       reflect: true
     }), _dec226 = Prop({
       type: Object,
@@ -34432,7 +34510,7 @@ var init_controls = __esm({
       static {
         ({ e: [_init_easingType3, _init_points3, _init_showGrid2, _init_snapToGrid2, _init_gridSize2, _init_focusedLinearIndex3, _initProto27], c: [_CurveControls, _initClass50] } = _apply_decs_2203_r50(this, [
           [
-            _dec138,
+            _dec139,
             1,
             "easingType"
           ],
@@ -34462,7 +34540,7 @@ var init_controls = __esm({
             "focusedLinearIndex"
           ]
         ], [
-          _dec137
+          _dec138
         ], _HTMLElement50));
       }
       #___private_easingType_1;
@@ -35372,6 +35450,7 @@ var init_controls = __esm({
         }, this.#notifyHost = (type, value, event) => {
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value,
             event
           };
@@ -36021,7 +36100,7 @@ function applyDecs2203RFactory51() {
 function _apply_decs_2203_r51(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r51 = applyDecs2203RFactory51())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html54, _dec139, _initClass51, _HTMLElement51, _dec140, _dec227, _init_language, _init_codeElement, _initProto28, _Code, Code;
+var import_lit_html54, _dec140, _initClass51, _HTMLElement51, _dec141, _dec227, _init_language, _init_codeElement, _initProto28, _Code, Code;
 var init_code2 = __esm({
   "src/components/code/index.ts"() {
     "use strict";
@@ -36032,7 +36111,7 @@ var init_code2 = __esm({
     init_Component();
     init_Prop();
     init_Query();
-    _dec139 = Component({
+    _dec140 = Component({
       tag: "ease-code",
       shadowMode: "open",
       autoSlot: false,
@@ -36057,14 +36136,14 @@ var init_code2 = __esm({
       template() {
         return import_lit_html54.html`<pre><code><slot></slot></code></pre>`;
       }
-    }), _dec140 = Prop({
+    }), _dec141 = Prop({
       reflect: true
     }), _dec227 = Query("code");
     Code = class extends (_HTMLElement51 = HTMLElement) {
       static {
         ({ e: [_init_language, _init_codeElement, _initProto28], c: [_Code, _initClass51] } = _apply_decs_2203_r51(this, [
           [
-            _dec140,
+            _dec141,
             1,
             "language"
           ],
@@ -36074,7 +36153,7 @@ var init_code2 = __esm({
             "codeElement"
           ]
         ], [
-          _dec139
+          _dec140
         ], _HTMLElement51));
       }
       #instanceId;
@@ -36581,7 +36660,7 @@ function applyDecs2203RFactory52() {
 function _apply_decs_2203_r52(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r52 = applyDecs2203RFactory52())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html55, _dec141, _initClass52, _HTMLElement52, _dec143, _dec228, _dec324, _dec420, _dec516, _dec614, _init_easingType4, _init_points4, _init_name7, _init_variant3, _init_simplify2, _init_round2, _initProto29, _CurveOutput, CurveOutput;
+var import_lit_html55, _dec143, _initClass52, _HTMLElement52, _dec144, _dec228, _dec324, _dec420, _dec516, _dec614, _init_easingType4, _init_points4, _init_name8, _init_variant3, _init_simplify2, _init_round2, _initProto29, _CurveOutput, CurveOutput;
 var init_output = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/output.ts"() {
     "use strict";
@@ -36592,7 +36671,7 @@ var init_output = __esm({
     init_Component();
     init_Prop();
     init_code2();
-    _dec141 = Component({
+    _dec143 = Component({
       tag: "ease-curve-output",
       styles: outputStyles,
       template() {
@@ -36608,7 +36687,7 @@ var init_output = __esm({
       </div>
     `;
       }
-    }), _dec143 = Prop({
+    }), _dec144 = Prop({
       type: String,
       reflect: true
     }), _dec228 = Prop({
@@ -36631,9 +36710,9 @@ var init_output = __esm({
     });
     CurveOutput = class extends (_HTMLElement52 = HTMLElement) {
       static {
-        ({ e: [_init_easingType4, _init_points4, _init_name7, _init_variant3, _init_simplify2, _init_round2, _initProto29], c: [_CurveOutput, _initClass52] } = _apply_decs_2203_r52(this, [
+        ({ e: [_init_easingType4, _init_points4, _init_name8, _init_variant3, _init_simplify2, _init_round2, _initProto29], c: [_CurveOutput, _initClass52] } = _apply_decs_2203_r52(this, [
           [
-            _dec143,
+            _dec144,
             1,
             "easingType"
           ],
@@ -36663,7 +36742,7 @@ var init_output = __esm({
             "round"
           ]
         ], [
-          _dec141
+          _dec143
         ], _HTMLElement52));
       }
       #___private_easingType_1;
@@ -36785,7 +36864,7 @@ var init_output = __esm({
         _initClass52();
       }
       constructor(...args) {
-        super(...args), this.#___private_easingType_1 = (_initProto29(this), _init_easingType4(this)), this.#___private_points_2 = _init_points4(this), this.#___private_name_3 = _init_name7(this), this.#___private_variant_4 = _init_variant3(this), this.#___private_simplify_5 = _init_simplify2(this), this.#___private_round_6 = _init_round2(this), this.#copyTimeout = null, this.#animationTimeout = null, this.#isAnimating = false, this.#copyToClipboard = async (event) => {
+        super(...args), this.#___private_easingType_1 = (_initProto29(this), _init_easingType4(this)), this.#___private_points_2 = _init_points4(this), this.#___private_name_3 = _init_name8(this), this.#___private_variant_4 = _init_variant3(this), this.#___private_simplify_5 = _init_simplify2(this), this.#___private_round_6 = _init_round2(this), this.#copyTimeout = null, this.#animationTimeout = null, this.#isAnimating = false, this.#copyToClipboard = async (event) => {
           event.preventDefault();
           try {
             await navigator.clipboard.writeText(this.timingFunction);
@@ -37197,7 +37276,7 @@ function applyDecs2203RFactory53() {
 function _apply_decs_2203_r53(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r53 = applyDecs2203RFactory53())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html56, _dec144, _initClass53, _HTMLElement53, _dec145, _dec229, _dec325, _dec421, _dec517, _dec615, _init_open4, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement4, _initProto30, _Tooltip2, Tooltip2;
+var import_lit_html56, _dec145, _initClass53, _HTMLElement53, _dec146, _dec229, _dec325, _dec421, _dec517, _dec615, _init_open4, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement4, _initProto30, _Tooltip2, Tooltip2;
 var init_tooltip2 = __esm({
   "src/elements/tooltip/index.ts"() {
     "use strict";
@@ -37207,7 +37286,7 @@ var init_tooltip2 = __esm({
     init_OutsideClick();
     init_Prop();
     init_Query();
-    _dec144 = Component({
+    _dec145 = Component({
       tag: "ease-tooltip",
       shadowMode: "open",
       styles: `
@@ -37237,7 +37316,7 @@ var init_tooltip2 = __esm({
       display: block;
     }
   `
-    }), _dec145 = Prop({
+    }), _dec146 = Prop({
       type: Boolean,
       reflect: true,
       onChange(next, previous) {
@@ -37261,7 +37340,7 @@ var init_tooltip2 = __esm({
       static {
         ({ e: [_init_open4, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement4, _initProto30], c: [_Tooltip2, _initClass53] } = _apply_decs_2203_r53(this, [
           [
-            _dec145,
+            _dec146,
             1,
             "open"
           ],
@@ -37291,7 +37370,7 @@ var init_tooltip2 = __esm({
             "handleOutsideDismiss"
           ]
         ], [
-          _dec144
+          _dec145
         ], _HTMLElement53));
       }
       #hoverTimer;
@@ -37834,7 +37913,7 @@ function applyDecs2203RFactory54() {
 function _apply_decs_2203_r54(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r54 = applyDecs2203RFactory54())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html57, _dec146, _initClass54, _HTMLElement54, _dec147, _dec230, _dec326, _dec422, _dec518, _dec616, _dec711, _init_easingType5, _init_points5, _init_showGrid3, _init_snapToGrid3, _init_gridSize3, _init_simplify3, _init_round3, _initProto31, _CurveToolbar, CurveToolbar;
+var import_lit_html57, _dec147, _initClass54, _HTMLElement54, _dec148, _dec230, _dec326, _dec422, _dec518, _dec616, _dec711, _init_easingType5, _init_points5, _init_showGrid3, _init_snapToGrid3, _init_gridSize3, _init_simplify3, _init_round3, _initProto31, _CurveToolbar, CurveToolbar;
 var init_toolbar = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/toolbar.ts"() {
     "use strict";
@@ -37849,7 +37928,7 @@ var init_toolbar = __esm({
     init_plus2();
     init_button2();
     init_tooltip2();
-    _dec146 = Component({
+    _dec147 = Component({
       tag: "ease-curve-toolbar",
       styles: toolbarStyles,
       template() {
@@ -37976,7 +38055,7 @@ var init_toolbar = __esm({
       </div>
     `;
       }
-    }), _dec147 = Prop({
+    }), _dec148 = Prop({
       reflect: true
     }), _dec230 = Prop({
       type: Object,
@@ -38006,7 +38085,7 @@ var init_toolbar = __esm({
       static {
         ({ e: [_init_easingType5, _init_points5, _init_showGrid3, _init_snapToGrid3, _init_gridSize3, _init_simplify3, _init_round3, _initProto31], c: [_CurveToolbar, _initClass54] } = _apply_decs_2203_r54(this, [
           [
-            _dec147,
+            _dec148,
             1,
             "easingType"
           ],
@@ -38041,7 +38120,7 @@ var init_toolbar = __esm({
             "round"
           ]
         ], [
-          _dec146
+          _dec147
         ], _HTMLElement54));
       }
       #___private_easingType_1;
@@ -38117,6 +38196,7 @@ var init_toolbar = __esm({
         }, this.#notifyHost = (type, value, event) => {
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value,
             event
           };
@@ -38689,7 +38769,7 @@ function applyDecs2203RFactory55() {
 function _apply_decs_2203_r55(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r55 = applyDecs2203RFactory55())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html58, _dec148, _initClass55, _HTMLElement55, _dec149, _dec231, _dec327, _dec423, _dec519, _dec617, _dec712, _dec811, _dec911, _dec1010, _dec1110, _dec1210, _dec1310, _dec1410, _dec153, _dec162, _dec172, _dec182, _init_name8, _init_easingType6, _init_points6, _init_showGrid4, _init_snapToGrid4, _init_gridSize4, _init_simplify4, _init_round4, _init_focusedLinearIndex4, _initProto32, _Curve, Curve;
+var import_lit_html58, _dec149, _initClass55, _HTMLElement55, _dec150, _dec231, _dec327, _dec423, _dec519, _dec617, _dec712, _dec811, _dec911, _dec1010, _dec1110, _dec1210, _dec1310, _dec1410, _dec153, _dec162, _dec172, _dec182, _init_name9, _init_easingType6, _init_points6, _init_showGrid4, _init_snapToGrid4, _init_gridSize4, _init_simplify4, _init_round4, _init_focusedLinearIndex4, _initProto32, _Curve, Curve;
 var init_curve = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/index.ts"() {
     "use strict";
@@ -38701,13 +38781,14 @@ var init_curve = __esm({
     init_Component();
     init_Listen();
     init_Prop();
+    init_shared2();
     init_canvas();
     init_canvas_controls();
     init_controls();
     init_output();
     init_toolbar();
     init_types();
-    _dec148 = Component({
+    _dec149 = Component({
       tag: "ease-curve",
       styles: containerStyles,
       template() {
@@ -38768,7 +38849,7 @@ var init_curve = __esm({
       </div>
     `;
       }
-    }), _dec149 = Prop({
+    }), _dec150 = Prop({
       reflect: true,
       defaultValue: "ease-custom"
     }), _dec231 = Prop({
@@ -38841,9 +38922,9 @@ var init_curve = __esm({
     });
     Curve = class extends (_HTMLElement55 = HTMLElement) {
       static {
-        ({ e: [_init_name8, _init_easingType6, _init_points6, _init_showGrid4, _init_snapToGrid4, _init_gridSize4, _init_simplify4, _init_round4, _init_focusedLinearIndex4, _initProto32], c: [_Curve, _initClass55] } = _apply_decs_2203_r55(this, [
+        ({ e: [_init_name9, _init_easingType6, _init_points6, _init_showGrid4, _init_snapToGrid4, _init_gridSize4, _init_simplify4, _init_round4, _init_focusedLinearIndex4, _initProto32], c: [_Curve, _initClass55] } = _apply_decs_2203_r55(this, [
           [
-            _dec149,
+            _dec150,
             1,
             "name"
           ],
@@ -38933,7 +39014,7 @@ var init_curve = __esm({
             "handleLinearPointFocus"
           ]
         ], [
-          _dec148
+          _dec149
         ], _HTMLElement55));
       }
       #___private_name_1;
@@ -39207,20 +39288,17 @@ var init_curve = __esm({
       }
       emitPointsChange(value, sourceEvent) {
         const detail = {
+          name: this.name,
           value,
           event: sourceEvent ?? new Event("points-change")
         };
-        this.dispatchEvent(new CustomEvent("points-change", {
-          detail,
-          bubbles: true,
-          composed: true
-        }));
+        dispatchControlEvent2(this, "points-change", detail);
       }
       static {
         _initClass55();
       }
       constructor(...args) {
-        super(...args), this.#___private_name_1 = (_initProto32(this), _init_name8(this)), this.#___private_easingType_2 = _init_easingType6(this), this.#___private_points_3 = _init_points6(this), this.#___private_showGrid_4 = _init_showGrid4(this), this.#___private_snapToGrid_5 = _init_snapToGrid4(this), this.#___private_gridSize_6 = _init_gridSize4(this), this.#___private_simplify_7 = _init_simplify4(this), this.#___private_round_8 = _init_round4(this), this.#___private_focusedLinearIndex_9 = _init_focusedLinearIndex4(this, null);
+        super(...args), this.#___private_name_1 = (_initProto32(this), _init_name9(this)), this.#___private_easingType_2 = _init_easingType6(this), this.#___private_points_3 = _init_points6(this), this.#___private_showGrid_4 = _init_showGrid4(this), this.#___private_snapToGrid_5 = _init_snapToGrid4(this), this.#___private_gridSize_6 = _init_gridSize4(this), this.#___private_simplify_7 = _init_simplify4(this), this.#___private_round_8 = _init_round4(this), this.#___private_focusedLinearIndex_9 = _init_focusedLinearIndex4(this, null);
       }
     };
   }
@@ -39603,7 +39681,7 @@ function applyDecs2203RFactory56() {
 function _apply_decs_2203_r56(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r56 = applyDecs2203RFactory56())(targetClass, memberDecs, classDecs, parentClass);
 }
-var import_lit_html59, _dec150, _initClass56, _HTMLElement56, _dec151, _dec232, _init_language2, _init_codeElement2, _initProto33, _Code2, Code2;
+var import_lit_html59, _dec151, _initClass56, _HTMLElement56, _dec154, _dec232, _init_language2, _init_codeElement2, _initProto33, _Code2, Code2;
 var init_code3 = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/code/index.ts"() {
     "use strict";
@@ -39614,7 +39692,7 @@ var init_code3 = __esm({
     init_Component();
     init_Prop();
     init_Query();
-    _dec150 = Component({
+    _dec151 = Component({
       tag: "ease-code",
       shadowMode: "open",
       autoSlot: false,
@@ -39639,14 +39717,14 @@ var init_code3 = __esm({
       template() {
         return import_lit_html59.html`<pre><code><slot></slot></code></pre>`;
       }
-    }), _dec151 = Prop({
+    }), _dec154 = Prop({
       reflect: true
     }), _dec232 = Query("code");
     Code2 = class extends (_HTMLElement56 = HTMLElement) {
       static {
         ({ e: [_init_language2, _init_codeElement2, _initProto33], c: [_Code2, _initClass56] } = _apply_decs_2203_r56(this, [
           [
-            _dec151,
+            _dec154,
             1,
             "language"
           ],
@@ -39656,7 +39734,7 @@ var init_code3 = __esm({
             "codeElement"
           ]
         ], [
-          _dec150
+          _dec151
         ], _HTMLElement56));
       }
       #instanceId;