@easemate/web-kit 0.3.5 → 0.3.7

package/build/elements.cjs

@@ -2187,10 +2187,15 @@ var Checkbox = class extends (_HTMLElement2 = HTMLElement) {
       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();
@@ -4570,6 +4575,7 @@ var Dropdown = class extends (_HTMLElement5 = HTMLElement) {
       }
     }
     dispatchControlEvent(this, "toggle", {
+      name: this.name ?? void 0,
       value: next,
       event: origin
     });
@@ -4833,6 +4839,7 @@ var Dropdown = class extends (_HTMLElement5 = HTMLElement) {
   }
   #dispatchValueChange(value, label, event) {
     dispatchControlEvent(this, "change", {
+      name: this.name ?? void 0,
       value,
       event
     });
@@ -5716,20 +5723,28 @@ var Input = class extends (_HTMLElement6 = HTMLElement) {
       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();
@@ -8229,9 +8244,11 @@ var _dec111;
 var _dec28;
 var _dec37;
 var _dec47;
+var _dec55;
 var _init_dropdown;
 var _init_value5;
 var _init_disabled5;
+var _init_name4;
 var _init_placement3;
 var _initProto8;
 var _ColorInput;
@@ -8306,12 +8323,15 @@ _dec27 = Component({
   type: Boolean,
   reflect: true
 }), _dec47 = Prop({
+  reflect: true,
+  defaultValue: null
+}), _dec55 = Prop({
   reflect: true,
   defaultValue: "bottom-start"
 });
 var 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,
@@ -8330,6 +8350,11 @@ var ColorInput = class extends (_HTMLElement10 = HTMLElement) {
       [
         _dec47,
         1,
+        "name"
+      ],
+      [
+        _dec55,
+        1,
         "placement"
       ]
     ], [
@@ -8358,12 +8383,19 @@ var ColorInput = class extends (_HTMLElement10 = HTMLElement) {
   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;
@@ -8408,21 +8440,24 @@ var ColorInput = class extends (_HTMLElement10 = HTMLElement) {
     _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
       });
@@ -8435,6 +8470,7 @@ var ColorInput = class extends (_HTMLElement10 = HTMLElement) {
     }, this.#handlePickerApply = (event) => {
       this.value = event.detail.value;
       dispatchControlEvent(this, "change", {
+        name: this.name ?? void 0,
         value: this.value,
         event
       });
@@ -9423,7 +9459,7 @@ _dec30 = Component({
     [part="content"] {
       height: 0;
       overflow: hidden;
-      transition: height 200ms cubic-bezier(.25, 0, .5, 1);
+      transition: height 200ms cubic-bezier(.25, 0, .5, 1) !important;
     }
 
     :host([open]) [part="content"] {
@@ -13549,11 +13585,11 @@ function applyDecs2203RFactory21() {
 function _apply_decs_2203_r21(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r21 = applyDecs2203RFactory21())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec55;
+var _dec56;
 var _initClass21;
 var _HTMLElement21;
 var _IconBezier;
-_dec55 = Component({
+_dec56 = Component({
   tag: "ease-icon-bezier",
   styles: `
     :host {
@@ -13574,7 +13610,7 @@ _dec55 = Component({
 var IconBezier = class extends (_HTMLElement21 = HTMLElement) {
   static {
     ({ c: [_IconBezier, _initClass21] } = _apply_decs_2203_r21(this, [], [
-      _dec55
+      _dec56
     ], _HTMLElement21));
   }
   static {
@@ -13956,11 +13992,11 @@ function applyDecs2203RFactory22() {
 function _apply_decs_2203_r22(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r22 = applyDecs2203RFactory22())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec56;
+var _dec57;
 var _initClass22;
 var _HTMLElement22;
 var _IconBezierAngle;
-_dec56 = Component({
+_dec57 = Component({
   tag: "ease-icon-bezier-angle",
   styles: `
     :host {
@@ -13988,7 +14024,7 @@ _dec56 = Component({
 var IconBezierAngle = class extends (_HTMLElement22 = HTMLElement) {
   static {
     ({ c: [_IconBezierAngle, _initClass22] } = _apply_decs_2203_r22(this, [], [
-      _dec56
+      _dec57
     ], _HTMLElement22));
   }
   static {
@@ -14370,11 +14406,11 @@ function applyDecs2203RFactory23() {
 function _apply_decs_2203_r23(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r23 = applyDecs2203RFactory23())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec57;
+var _dec58;
 var _initClass23;
 var _HTMLElement23;
 var _IconBezierDistribute;
-_dec57 = Component({
+_dec58 = Component({
   tag: "ease-icon-bezier-distribute",
   styles: `
     :host {
@@ -14403,7 +14439,7 @@ _dec57 = Component({
 var IconBezierDistribute = class extends (_HTMLElement23 = HTMLElement) {
   static {
     ({ c: [_IconBezierDistribute, _initClass23] } = _apply_decs_2203_r23(this, [], [
-      _dec57
+      _dec58
     ], _HTMLElement23));
   }
   static {
@@ -14785,11 +14821,11 @@ function applyDecs2203RFactory24() {
 function _apply_decs_2203_r24(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r24 = applyDecs2203RFactory24())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec58;
+var _dec59;
 var _initClass24;
 var _HTMLElement24;
 var _IconBezierLength;
-_dec58 = Component({
+_dec59 = Component({
   tag: "ease-icon-bezier-length",
   styles: `
     :host {
@@ -14815,7 +14851,7 @@ _dec58 = Component({
 var IconBezierLength = class extends (_HTMLElement24 = HTMLElement) {
   static {
     ({ c: [_IconBezierLength, _initClass24] } = _apply_decs_2203_r24(this, [], [
-      _dec58
+      _dec59
     ], _HTMLElement24));
   }
   static {
@@ -15197,11 +15233,11 @@ function applyDecs2203RFactory25() {
 function _apply_decs_2203_r25(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r25 = applyDecs2203RFactory25())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec59;
+var _dec60;
 var _initClass25;
 var _HTMLElement25;
 var _IconBezierMirror;
-_dec59 = Component({
+_dec60 = Component({
   tag: "ease-icon-bezier-mirror",
   styles: `
     :host {
@@ -15227,7 +15263,7 @@ _dec59 = Component({
 var IconBezierMirror = class extends (_HTMLElement25 = HTMLElement) {
   static {
     ({ c: [_IconBezierMirror, _initClass25] } = _apply_decs_2203_r25(this, [], [
-      _dec59
+      _dec60
     ], _HTMLElement25));
   }
   static {
@@ -15609,11 +15645,11 @@ function applyDecs2203RFactory26() {
 function _apply_decs_2203_r26(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r26 = applyDecs2203RFactory26())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec60;
+var _dec61;
 var _initClass26;
 var _HTMLElement26;
 var _IconCheck;
-_dec60 = Component({
+_dec61 = Component({
   tag: "ease-icon-check",
   styles: `
     :host {
@@ -15638,7 +15674,7 @@ _dec60 = Component({
 var IconCheck = class extends (_HTMLElement26 = HTMLElement) {
   static {
     ({ c: [_IconCheck, _initClass26] } = _apply_decs_2203_r26(this, [], [
-      _dec60
+      _dec61
     ], _HTMLElement26));
   }
   static {
@@ -16020,11 +16056,11 @@ function applyDecs2203RFactory27() {
 function _apply_decs_2203_r27(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r27 = applyDecs2203RFactory27())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec61;
+var _dec65;
 var _initClass27;
 var _HTMLElement27;
 var _IconCircleArrowLeft;
-_dec61 = Component({
+_dec65 = Component({
   tag: "ease-icon-circle-arrow-left",
   styles: `
     :host {
@@ -16049,7 +16085,7 @@ _dec61 = Component({
 var IconCircleArrowLeft = class extends (_HTMLElement27 = HTMLElement) {
   static {
     ({ c: [_IconCircleArrowLeft, _initClass27] } = _apply_decs_2203_r27(this, [], [
-      _dec61
+      _dec65
     ], _HTMLElement27));
   }
   static {
@@ -16431,11 +16467,11 @@ function applyDecs2203RFactory28() {
 function _apply_decs_2203_r28(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r28 = applyDecs2203RFactory28())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec65;
+var _dec66;
 var _initClass28;
 var _HTMLElement28;
 var _IconCircleArrowRight;
-_dec65 = Component({
+_dec66 = Component({
   tag: "ease-icon-circle-arrow-right",
   styles: `
     :host {
@@ -16460,7 +16496,7 @@ _dec65 = Component({
 var IconCircleArrowRight = class extends (_HTMLElement28 = HTMLElement) {
   static {
     ({ c: [_IconCircleArrowRight, _initClass28] } = _apply_decs_2203_r28(this, [], [
-      _dec65
+      _dec66
     ], _HTMLElement28));
   }
   static {
@@ -16842,11 +16878,11 @@ function applyDecs2203RFactory29() {
 function _apply_decs_2203_r29(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r29 = applyDecs2203RFactory29())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec66;
+var _dec67;
 var _initClass29;
 var _HTMLElement29;
 var _IconCode;
-_dec66 = Component({
+_dec67 = Component({
   tag: "ease-icon-code",
   styles: `
     :host {
@@ -16871,7 +16907,7 @@ _dec66 = Component({
 var IconCode = class extends (_HTMLElement29 = HTMLElement) {
   static {
     ({ c: [_IconCode, _initClass29] } = _apply_decs_2203_r29(this, [], [
-      _dec66
+      _dec67
     ], _HTMLElement29));
   }
   static {
@@ -17253,11 +17289,11 @@ function applyDecs2203RFactory30() {
 function _apply_decs_2203_r30(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r30 = applyDecs2203RFactory30())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec67;
+var _dec68;
 var _initClass30;
 var _HTMLElement30;
 var _IconDots;
-_dec67 = Component({
+_dec68 = Component({
   tag: "ease-icon-dots",
   styles: `
     :host {
@@ -17284,7 +17320,7 @@ _dec67 = Component({
 var IconDots = class extends (_HTMLElement30 = HTMLElement) {
   static {
     ({ c: [_IconDots, _initClass30] } = _apply_decs_2203_r30(this, [], [
-      _dec67
+      _dec68
     ], _HTMLElement30));
   }
   static {
@@ -17666,11 +17702,11 @@ function applyDecs2203RFactory31() {
 function _apply_decs_2203_r31(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r31 = applyDecs2203RFactory31())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec68;
+var _dec69;
 var _initClass31;
 var _HTMLElement31;
 var _IconMention;
-_dec68 = Component({
+_dec69 = Component({
   tag: "ease-icon-mention",
   styles: `
     :host {
@@ -17695,7 +17731,7 @@ _dec68 = Component({
 var IconMention = class extends (_HTMLElement31 = HTMLElement) {
   static {
     ({ c: [_IconMention, _initClass31] } = _apply_decs_2203_r31(this, [], [
-      _dec68
+      _dec69
     ], _HTMLElement31));
   }
   static {
@@ -18077,11 +18113,11 @@ function applyDecs2203RFactory32() {
 function _apply_decs_2203_r32(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r32 = applyDecs2203RFactory32())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec69;
+var _dec70;
 var _initClass32;
 var _HTMLElement32;
 var _IconMinus;
-_dec69 = Component({
+_dec70 = Component({
   tag: "ease-icon-minus",
   styles: `
     :host {
@@ -18106,7 +18142,7 @@ _dec69 = Component({
 var IconMinus = class extends (_HTMLElement32 = HTMLElement) {
   static {
     ({ c: [_IconMinus, _initClass32] } = _apply_decs_2203_r32(this, [], [
-      _dec69
+      _dec70
     ], _HTMLElement32));
   }
   static {
@@ -18488,11 +18524,11 @@ function applyDecs2203RFactory33() {
 function _apply_decs_2203_r33(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r33 = applyDecs2203RFactory33())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec70;
+var _dec71;
 var _initClass33;
 var _HTMLElement33;
 var _IconPlus;
-_dec70 = Component({
+_dec71 = Component({
   tag: "ease-icon-plus",
   styles: `
     :host {
@@ -18517,7 +18553,7 @@ _dec70 = Component({
 var IconPlus = class extends (_HTMLElement33 = HTMLElement) {
   static {
     ({ c: [_IconPlus, _initClass33] } = _apply_decs_2203_r33(this, [], [
-      _dec70
+      _dec71
     ], _HTMLElement33));
   }
   static {
@@ -18899,11 +18935,11 @@ function applyDecs2203RFactory34() {
 function _apply_decs_2203_r34(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r34 = applyDecs2203RFactory34())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec71;
+var _dec74;
 var _initClass34;
 var _HTMLElement34;
 var _Settings;
-_dec71 = Component({
+_dec74 = Component({
   tag: "ease-icon-settings",
   styles: `
     :host {
@@ -18928,7 +18964,7 @@ _dec71 = Component({
 var Settings = class extends (_HTMLElement34 = HTMLElement) {
   static {
     ({ c: [_Settings, _initClass34] } = _apply_decs_2203_r34(this, [], [
-      _dec71
+      _dec74
     ], _HTMLElement34));
   }
   static {
@@ -19310,7 +19346,7 @@ function applyDecs2203RFactory35() {
 function _apply_decs_2203_r35(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r35 = applyDecs2203RFactory35())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec74;
+var _dec75;
 var _initClass35;
 var _HTMLElement35;
 var _dec118;
@@ -19470,7 +19506,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;
-_dec74 = Component({
+_dec75 = Component({
   tag: "ease-logo-loader",
   styles: `
     :host {
@@ -19743,7 +19779,7 @@ var LogoLoader = class extends (_HTMLElement35 = HTMLElement) {
         "ariaLabel"
       ]
     ], [
-      _dec74
+      _dec75
     ], _HTMLElement35));
   }
   #___private_loading_1;
@@ -20607,7 +20643,7 @@ function applyDecs2203RFactory36() {
 function _apply_decs_2203_r36(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r36 = applyDecs2203RFactory36())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec75;
+var _dec76;
 var _initClass36;
 var _HTMLElement36;
 var _dec119;
@@ -20671,7 +20707,7 @@ var rateFps = (fps, targetFps) => {
   return "poor";
 };
 var _MonitorFps;
-_dec75 = Component({
+_dec76 = Component({
   tag: "ease-monitor-fps",
   autoSlot: false,
   shadowMode: "open",
@@ -20790,7 +20826,7 @@ var MonitorFps = class extends (_HTMLElement36 = HTMLElement) {
         "canvasEl"
       ]
     ], [
-      _dec75
+      _dec76
     ], _HTMLElement36));
   }
   #___private_paused_1;
@@ -21445,7 +21481,7 @@ function applyDecs2203RFactory37() {
 function _apply_decs_2203_r37(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r37 = applyDecs2203RFactory37())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec76;
+var _dec77;
 var _initClass37;
 var _HTMLElement37;
 var _dec120;
@@ -21563,7 +21599,7 @@ var estimateCarbonFootprint = (totalBytes) => {
   return `${emissions.toFixed(3)}g CO2 eq.`;
 };
 var _Monitor;
-_dec76 = Component({
+_dec77 = Component({
   tag: "ease-monitor",
   styles: `
     :host {
@@ -21707,7 +21743,7 @@ var Monitor = class extends (_HTMLElement37 = HTMLElement) {
         "handleFpsUpdate"
       ]
     ], [
-      _dec76
+      _dec77
     ], _HTMLElement37));
   }
   #___private_metrics_1;
@@ -22596,7 +22632,7 @@ function applyDecs2203RFactory38() {
 function _apply_decs_2203_r38(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r38 = applyDecs2203RFactory38())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec77;
+var _dec78;
 var _initClass38;
 var _HTMLElement38;
 var _dec121;
@@ -22605,19 +22641,19 @@ var _dec312;
 var _dec411;
 var _dec510;
 var _dec610;
-var _dec78;
+var _dec79;
 var _dec84;
 var _dec94;
 var _init_value6;
 var _init_min;
 var _init_max;
 var _init_step;
-var _init_name4;
+var _init_name5;
 var _init_disabled6;
 var _init_control3;
 var _initProto17;
 var _NumberInput;
-_dec77 = Component({
+_dec78 = Component({
   tag: "ease-number-input",
   styles: `
     :host {
@@ -22716,14 +22752,14 @@ _dec77 = Component({
 }), _dec610 = Prop({
   type: Boolean,
   reflect: true
-}), _dec78 = Query("input"), _dec84 = Listen("input", {
+}), _dec79 = Query("input"), _dec84 = Listen("input", {
   selector: "input"
 }), _dec94 = Listen("change", {
   selector: "input"
 });
 var NumberInput = class extends (_HTMLElement38 = HTMLElement) {
   static {
-    ({ e: [_init_value6, _init_min, _init_max, _init_step, _init_name4, _init_disabled6, _init_control3, _initProto17], c: [_NumberInput, _initClass38] } = _apply_decs_2203_r38(this, [
+    ({ e: [_init_value6, _init_min, _init_max, _init_step, _init_name5, _init_disabled6, _init_control3, _initProto17], c: [_NumberInput, _initClass38] } = _apply_decs_2203_r38(this, [
       [
         _dec121,
         1,
@@ -22755,7 +22791,7 @@ var NumberInput = class extends (_HTMLElement38 = HTMLElement) {
         "disabled"
       ],
       [
-        _dec78,
+        _dec79,
         1,
         "control"
       ],
@@ -22770,7 +22806,7 @@ var NumberInput = class extends (_HTMLElement38 = HTMLElement) {
         "handleChange"
       ]
     ], [
-      _dec77
+      _dec78
     ], _HTMLElement38));
   }
   #___private_value_1;
@@ -22840,20 +22876,28 @@ var NumberInput = class extends (_HTMLElement38 = HTMLElement) {
       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");
@@ -22891,7 +22935,7 @@ var NumberInput = class extends (_HTMLElement38 = HTMLElement) {
     _initClass38();
   }
   constructor(...args) {
-    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);
+    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_name5(this), this.#___private_disabled_6 = _init_disabled6(this), this.#___private_control_7 = _init_control3(this);
   }
 };
 
@@ -23269,7 +23313,7 @@ function applyDecs2203RFactory39() {
 function _apply_decs_2203_r39(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r39 = applyDecs2203RFactory39())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec79;
+var _dec80;
 var _initClass39;
 var _HTMLElement39;
 var _dec123;
@@ -23280,10 +23324,10 @@ var _dec511;
 var _init_value7;
 var _init_disabled7;
 var _init_control4;
-var _init_name5;
+var _init_name6;
 var _initProto18;
 var _Origin;
-_dec79 = Component({
+_dec80 = Component({
   tag: "ease-origin",
   styles: `
     :host {
@@ -23429,7 +23473,7 @@ _dec79 = Component({
 });
 var Origin = class extends (_HTMLElement39 = HTMLElement) {
   static {
-    ({ e: [_init_value7, _init_disabled7, _init_control4, _init_name5, _initProto18], c: [_Origin, _initClass39] } = _apply_decs_2203_r39(this, [
+    ({ e: [_init_value7, _init_disabled7, _init_control4, _init_name6, _initProto18], c: [_Origin, _initClass39] } = _apply_decs_2203_r39(this, [
       [
         _dec123,
         1,
@@ -23456,7 +23500,7 @@ var Origin = class extends (_HTMLElement39 = HTMLElement) {
         "handleChange"
       ]
     ], [
-      _dec79
+      _dec80
     ], _HTMLElement39));
   }
   #___private_value_1;
@@ -23504,7 +23548,7 @@ var Origin = class extends (_HTMLElement39 = HTMLElement) {
     _initClass39();
   }
   constructor(...args) {
-    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) => {
+    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_name6(this, ""), this.handleValueChange = (event) => {
       this.value = String(this.control?.value ?? "center-center");
       dispatchControlEvent(this, "change", {
         value: this.value,
@@ -23888,7 +23932,7 @@ function applyDecs2203RFactory40() {
 function _apply_decs_2203_r40(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r40 = applyDecs2203RFactory40())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec80;
+var _dec81;
 var _initClass40;
 var _HTMLElement40;
 var _dec124;
@@ -23905,7 +23949,7 @@ var _init_contentElement2;
 var _init_bodyElement;
 var _initProto19;
 var _Panel;
-_dec80 = Component({
+_dec81 = Component({
   tag: "ease-panel",
   shadowMode: "open",
   styles: `
@@ -23970,7 +24014,6 @@ _dec80 = Component({
       align-items: center;
       gap: 2px;
       flex-grow: 1;
-      margin: 0 0 0 4px;
     }
 
     [part="tabs"]:empty {
@@ -23979,17 +24022,18 @@ _dec80 = Component({
 
     [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);
     }
@@ -24199,7 +24243,7 @@ var Panel = class extends (_HTMLElement40 = HTMLElement) {
         "onDefaultSlotChange"
       ]
     ], [
-      _dec80
+      _dec81
     ], _HTMLElement40));
   }
   #tabs;
@@ -24892,7 +24936,7 @@ function applyDecs2203RFactory41() {
 function _apply_decs_2203_r41(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r41 = applyDecs2203RFactory41())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec81;
+var _dec85;
 var _initClass41;
 var _HTMLElement41;
 var _dec125;
@@ -24917,7 +24961,7 @@ var nextPanelId2 = /* @__PURE__ */ (() => {
   };
 })();
 var _RadioGroup;
-_dec81 = Component({
+_dec85 = Component({
   tag: "ease-radio-group",
   shadowMode: "open",
   styles: `
@@ -25009,7 +25053,7 @@ var RadioGroup = class extends (_HTMLElement41 = HTMLElement) {
         "contentSlot"
       ]
     ], [
-      _dec81
+      _dec85
     ], _HTMLElement41));
   }
   #___private_value_1;
@@ -25610,7 +25654,7 @@ function applyDecs2203RFactory42() {
 function _apply_decs_2203_r42(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r42 = applyDecs2203RFactory42())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec85;
+var _dec86;
 var _initClass42;
 var _HTMLElement42;
 var _dec126;
@@ -25620,13 +25664,13 @@ var _dec414;
 var _dec513;
 var _dec612;
 var _init_checked2;
-var _init_name6;
+var _init_name7;
 var _init_value9;
 var _init_disabled8;
 var _init_control5;
 var _initProto21;
 var _RadioInput;
-_dec85 = Component({
+_dec86 = Component({
   tag: "ease-radio-input",
   shadowMode: "open",
   styles: `
@@ -25893,7 +25937,7 @@ _dec85 = Component({
 });
 var RadioInput = class extends (_HTMLElement42 = HTMLElement) {
   static {
-    ({ e: [_init_checked2, _init_name6, _init_value9, _init_disabled8, _init_control5, _initProto21], c: [_RadioInput, _initClass42] } = _apply_decs_2203_r42(this, [
+    ({ e: [_init_checked2, _init_name7, _init_value9, _init_disabled8, _init_control5, _initProto21], c: [_RadioInput, _initClass42] } = _apply_decs_2203_r42(this, [
       [
         _dec126,
         1,
@@ -25925,7 +25969,7 @@ var RadioInput = class extends (_HTMLElement42 = HTMLElement) {
         "handleClick"
       ]
     ], [
-      _dec85
+      _dec86
     ], _HTMLElement42));
   }
   #___private_checked_1;
@@ -26008,16 +26052,22 @@ var RadioInput = class extends (_HTMLElement42 = HTMLElement) {
       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 {
     _initClass42();
   }
   constructor(...args) {
-    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()}`;
+    super(...args), this.#___private_checked_1 = (_initProto21(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()}`;
   }
 };
 
@@ -26395,7 +26445,7 @@ function applyDecs2203RFactory43() {
 function _apply_decs_2203_r43(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r43 = applyDecs2203RFactory43())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec86;
+var _dec87;
 var _initClass43;
 var _HTMLElement43;
 var _dec127;
@@ -26405,7 +26455,7 @@ var _dec415;
 var _dec514;
 var _dec613;
 var _dec711;
-var _dec87;
+var _dec88;
 var _dec95;
 var _dec104;
 var _dec1110;
@@ -26418,7 +26468,7 @@ var _init_control6;
 var _init_valueControl;
 var _initProto22;
 var _Slider;
-_dec86 = Component({
+_dec87 = Component({
   tag: "ease-slider",
   styles: `
     :host {
@@ -26529,11 +26579,15 @@ _dec86 = Component({
           .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)}
@@ -26557,7 +26611,7 @@ _dec86 = Component({
 }), _dec514 = Prop({
   type: Boolean,
   reflect: true
-}), _dec613 = Query("input"), _dec711 = Query("ease-input"), _dec87 = Listen("input", {
+}), _dec613 = Query("input"), _dec711 = Query("ease-input"), _dec88 = Listen("input", {
   selector: 'input[type="range"]'
 }), _dec95 = Listen("change", {
   selector: 'input[type="range"]'
@@ -26607,7 +26661,7 @@ var Slider = class extends (_HTMLElement43 = HTMLElement) {
         "valueControl"
       ],
       [
-        _dec87,
+        _dec88,
         2,
         "handleRangeInput"
       ],
@@ -26627,7 +26681,7 @@ var Slider = class extends (_HTMLElement43 = HTMLElement) {
         "handleValueChange"
       ]
     ], [
-      _dec86
+      _dec87
     ], _HTMLElement43));
   }
   #___private_value_1;
@@ -26705,10 +26759,13 @@ var Slider = class extends (_HTMLElement43 = HTMLElement) {
     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, CONTROL_CHANGE_EVENT, detail);
   }
   handleRangeChange(event, target) {
     if (target) {
@@ -26719,10 +26776,13 @@ var Slider = class extends (_HTMLElement43 = HTMLElement) {
         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, CONTROL_CHANGE_EVENT, detail);
   }
   handleValueInput(event) {
     const rawValue = event.detail?.value ?? "";
@@ -26732,10 +26792,15 @@ var Slider = class extends (_HTMLElement43 = HTMLElement) {
     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 ?? "";
@@ -26745,10 +26810,15 @@ var Slider = class extends (_HTMLElement43 = HTMLElement) {
     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) {
@@ -27142,7 +27212,7 @@ function applyDecs2203RFactory44() {
 function _apply_decs_2203_r44(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r44 = applyDecs2203RFactory44())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec88;
+var _dec89;
 var _initClass44;
 var _HTMLElement44;
 var _dec128;
@@ -27175,7 +27245,7 @@ var getControlName = (element) => {
   return element.getAttribute?.("name") ?? null;
 };
 var _State;
-_dec88 = Component({
+_dec89 = Component({
   tag: "ease-state",
   shadowMode: "open",
   styles: `
@@ -27228,7 +27298,7 @@ var State = class extends (_HTMLElement44 = HTMLElement) {
         "handleControlChange"
       ]
     ], [
-      _dec88
+      _dec89
     ], _HTMLElement44));
   }
   #controls;
@@ -27811,7 +27881,7 @@ function applyDecs2203RFactory45() {
 function _apply_decs_2203_r45(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r45 = applyDecs2203RFactory45())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec89;
+var _dec90;
 var _initClass45;
 var _HTMLElement45;
 var _dec129;
@@ -27823,7 +27893,7 @@ var _init_disabled10;
 var _init_control7;
 var _initProto24;
 var _Toggle;
-_dec89 = Component({
+_dec90 = Component({
   tag: "ease-toggle",
   styles: `
     :host {
@@ -27968,7 +28038,7 @@ var Toggle = class extends (_HTMLElement45 = HTMLElement) {
         "handleClick"
       ]
     ], [
-      _dec89
+      _dec90
     ], _HTMLElement45));
   }
   #___private_checked_1;
@@ -28008,10 +28078,15 @@ var Toggle = class extends (_HTMLElement45 = HTMLElement) {
       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 {
     _initClass45();
@@ -28395,7 +28470,7 @@ function applyDecs2203RFactory46() {
 function _apply_decs_2203_r46(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r46 = applyDecs2203RFactory46())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec90;
+var _dec91;
 var _initClass46;
 var _HTMLElement46;
 var _dec130;
@@ -28411,7 +28486,7 @@ var _init_triggerElement;
 var _init_contentElement3;
 var _initProto25;
 var _Tooltip;
-_dec90 = Component({
+_dec91 = Component({
   tag: "ease-tooltip",
   shadowMode: "open",
   styles: `
@@ -28495,7 +28570,7 @@ var Tooltip = class extends (_HTMLElement46 = HTMLElement) {
         "handleOutsideDismiss"
       ]
     ], [
-      _dec90
+      _dec91
     ], _HTMLElement46));
   }
   #hoverTimer;