@easemate/web-kit 0.3.4 → 0.3.6

package/build/register.cjs

@@ -2097,10 +2097,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();
@@ -2493,11 +2498,13 @@ var _HTMLElement3;
 var _dec13;
 var _dec23;
 var _dec33;
+var _dec43;
+var _init_contentElement;
 var _init_placement;
 var _init_offset;
 var _init_open;
 var _initProto3;
-var nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID()}`;
+var nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID().slice(0, 8)}`;
 var _Popover;
 _dec8 = Component({
   tag: "ease-popover",
@@ -2507,7 +2514,6 @@ _dec8 = Component({
     :host {
       display: contents;
       --ease-popover-offset: 8px;
-      --ease-popover-anchor-name: --ease-popover-anchor;
       --ease-popover-transform-origin: center center;
       --ease-popover-duration: 200ms;
       --ease-popover-content-min-width: auto;
@@ -2520,140 +2526,110 @@ _dec8 = Component({
     }
 
     [part="content"] {
-      position-anchor: var(--ease-popover-anchor-name);
       position: fixed;
+      position-anchor: var(--ease-popover-anchor-name);
       margin: 0;
-      transform-origin: var(--ease-popover-transform-origin);
+      padding: 0;
+      border: none;
+      background: transparent;
+      overflow: visible;
       width: var(--ease-popover-content-width);
       min-width: var(--ease-popover-content-min-width);
       max-width: var(--ease-popover-content-max-width);
       box-sizing: border-box;
-      overscroll-behavior: contain;
-      z-index: 100;
-      display: none;
     }
 
-    :host([open]) [part="content"] {
+    [part="content"]:popover-open {
       display: block;
     }
 
     :host([placement="top-start"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
+      position-area: top span-right;
+      margin-bottom: var(--ease-popover-offset);
     }
-
     :host([placement="top-center"]) [part="content"] {
       position-area: top center;
-      top: anchor(top);
-      left: anchor(center);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
+      margin-bottom: var(--ease-popover-offset);
     }
-
     :host([placement="top-end"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
+      position-area: top span-left;
+      margin-bottom: var(--ease-popover-offset);
     }
-
     :host([placement="bottom-start"]) [part="content"] {
-      position-area: bottom right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
+      position-area: bottom span-right;
+      margin-top: var(--ease-popover-offset);
     }
-
     :host([placement="bottom-center"]) [part="content"] {
       position-area: bottom center;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
+      margin-top: var(--ease-popover-offset);
     }
-
     :host([placement="bottom-end"]) [part="content"] {
-      position-area: bottom left;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 var(--ease-popover-offset);
+      position-area: bottom span-left;
+      margin-top: var(--ease-popover-offset);
     }
-
     :host([placement="left-start"]) [part="content"] {
-      position-area: left bottom;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
+      position-area: left span-bottom;
+      margin-right: var(--ease-popover-offset);
     }
-
     :host([placement="left-center"]) [part="content"] {
       position-area: left center;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
+      margin-right: var(--ease-popover-offset);
     }
-
     :host([placement="left-end"]) [part="content"] {
-      position-area: left top;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
+      position-area: left span-top;
+      margin-right: var(--ease-popover-offset);
     }
-
     :host([placement="right-start"]) [part="content"] {
-      position-area: right end;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
+      position-area: right span-bottom;
+      margin-left: var(--ease-popover-offset);
     }
-
     :host([placement="right-center"]) [part="content"] {
       position-area: right center;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
+      margin-left: var(--ease-popover-offset);
     }
-
     :host([placement="right-end"]) [part="content"] {
-      position-area: right start;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
+      position-area: right span-top;
+      margin-left: var(--ease-popover-offset);
     }
   `
-}), _dec13 = Prop({
+}), _dec13 = Query('[part="content"]'), _dec23 = Prop({
   reflect: true,
-  defaultValue: "bottom-start",
-  onChange() {
-    this.handlePlacementChange();
-  }
-}), _dec23 = Prop({
+  defaultValue: "bottom-start"
+}), _dec33 = Prop({
   type: Number,
   reflect: true,
   defaultValue: 8,
   onChange() {
     this.handleOffsetChange();
   }
-}), _dec33 = Prop({
+}), _dec43 = Prop({
   type: Boolean,
-  reflect: true
+  reflect: true,
+  onChange() {
+    this.handleOpenChange();
+  }
 });
 var Popover = class extends (_HTMLElement3 = HTMLElement) {
   static {
-    ({ e: [_init_placement, _init_offset, _init_open, _initProto3], c: [_Popover, _initClass3] } = _apply_decs_2203_r3(this, [
+    ({ e: [_init_contentElement, _init_placement, _init_offset, _init_open, _initProto3], c: [_Popover, _initClass3] } = _apply_decs_2203_r3(this, [
       [
         _dec13,
         1,
-        "placement"
+        "contentElement"
       ],
       [
         _dec23,
         1,
-        "offset"
+        "placement"
       ],
       [
         _dec33,
         1,
+        "offset"
+      ],
+      [
+        _dec43,
+        1,
         "open"
       ]
     ], [
@@ -2661,85 +2637,75 @@ var Popover = class extends (_HTMLElement3 = HTMLElement) {
     ], _HTMLElement3));
   }
   #anchorName;
-  #contentElement;
-  #initialized;
+  #___private_contentElement_1;
   get contentElement() {
-    return this.#contentElement;
+    return this.#___private_contentElement_1;
   }
-  #___private_placement_1;
+  set contentElement(_v) {
+    this.#___private_contentElement_1 = _v;
+  }
+  #___private_placement_2;
   get placement() {
-    return this.#___private_placement_1;
+    return this.#___private_placement_2;
   }
   set placement(_v) {
-    this.#___private_placement_1 = _v;
+    this.#___private_placement_2 = _v;
   }
-  #___private_offset_2;
+  #___private_offset_3;
   get offset() {
-    return this.#___private_offset_2;
+    return this.#___private_offset_3;
   }
   set offset(_v) {
-    this.#___private_offset_2 = _v;
+    this.#___private_offset_3 = _v;
   }
-  #___private_open_3;
+  #___private_open_4;
   get open() {
-    return this.#___private_open_3;
+    return this.#___private_open_4;
   }
   set open(_v) {
-    this.#___private_open_3 = _v;
+    this.#___private_open_4 = _v;
+  }
+  handleOffsetChange() {
+    const offset = Number.isFinite(this.offset) ? this.offset : 8;
+    this.style.setProperty("--ease-popover-offset", `${offset}px`);
+  }
+  handleOpenChange() {
+    const content = this.contentElement;
+    if (!content) {
+      return;
+    }
+    if (this.open) {
+      content.showPopover();
+    } else {
+      content.hidePopover();
+    }
   }
   connectedCallback() {
-    this.#syncAnchorName();
-    this.#syncOffset();
+    this.style.setProperty("--ease-popover-anchor-name", this.#anchorName);
+    this.handleOffsetChange();
   }
-  disconnectedCallback() {
-    this.#contentElement = null;
-    this.#initialized = false;
+  afterRender() {
+    const content = this.contentElement;
+    if (content && this.open) {
+      try {
+        content.showPopover();
+      } catch (_e) {
+      }
+    }
   }
   render() {
     return import_lit_html4.html`
-      <slot slot="trigger" name="trigger"></slot>
-      <div
-        part="content"
-        data-popover-content
-        role="region"
-        data-placement=${this.placement}
-      >
+      <slot name="trigger"></slot>
+      <div part="content" popover="manual" role="region">
         <slot></slot>
       </div>
     `;
   }
-  handlePlacementChange() {
-    if (!this.#initialized) {
-      this.requestRender();
-      return;
-    }
-    this.#syncPlacement();
-  }
-  handleOffsetChange() {
-    if (!this.#initialized) {
-      this.requestRender();
-      return;
-    }
-    this.#syncOffset();
-  }
-  #syncPlacement() {
-    this.dataset.placement = this.placement;
-    if (this.#contentElement) {
-      this.#contentElement.dataset.placement = this.placement;
-    }
-  }
-  #syncOffset() {
-    const offset = Number.isFinite(this.offset) ? this.offset : 0;
-    this.style.setProperty("--ease-popover-offset", `${offset}px`);
-  }
-  #syncAnchorName() {
-    this.style.setProperty("--ease-popover-anchor-name", this.#anchorName);
-  }
   static {
     _initClass3();
   }
   constructor(...args) {
-    super(...args), this.#anchorName = (_initProto3(this), nextAnchorName()), this.#contentElement = null, this.#initialized = false, this.#___private_placement_1 = _init_placement(this), this.#___private_offset_2 = _init_offset(this, 8), this.#___private_open_3 = _init_open(this, false);
+    super(...args), this.#anchorName = (_initProto3(this), nextAnchorName()), this.#___private_contentElement_1 = _init_contentElement(this), this.#___private_placement_2 = _init_placement(this), this.#___private_offset_3 = _init_offset(this, 8), this.#___private_open_4 = _init_open(this, false);
   }
 };
 
@@ -3801,7 +3767,7 @@ var _HTMLElement5;
 var _dec15;
 var _dec24;
 var _dec34;
-var _dec43;
+var _dec44;
 var _dec53;
 var _dec63;
 var _dec72;
@@ -4098,7 +4064,7 @@ _dec10 = Component({
 }), _dec34 = Prop({
   type: Boolean,
   reflect: true
-}), _dec43 = Prop({
+}), _dec44 = Prop({
   type: Boolean,
   reflect: true
 }), _dec53 = Prop({
@@ -4157,7 +4123,7 @@ var Dropdown = class extends (_HTMLElement5 = HTMLElement) {
         "pill"
       ],
       [
-        _dec43,
+        _dec44,
         1,
         "headless"
       ],
@@ -4519,6 +4485,7 @@ var Dropdown = class extends (_HTMLElement5 = HTMLElement) {
       }
     }
     dispatchControlEvent(this, "toggle", {
+      name: this.name ?? void 0,
       value: next,
       event: origin
     });
@@ -4782,6 +4749,7 @@ var Dropdown = class extends (_HTMLElement5 = HTMLElement) {
   }
   #dispatchValueChange(value, label, event) {
     dispatchControlEvent(this, "change", {
+      name: this.name ?? void 0,
       value,
       event
     });
@@ -5274,7 +5242,7 @@ var _HTMLElement6;
 var _dec18;
 var _dec25;
 var _dec35;
-var _dec44;
+var _dec45;
 var _dec54;
 var _dec64;
 var _dec73;
@@ -5485,7 +5453,7 @@ _dec17 = Component({
 }), _dec35 = Prop({
   reflect: true,
   defaultValue: "text"
-}), _dec44 = Prop({
+}), _dec45 = Prop({
   reflect: true
 }), _dec54 = Prop({
   type: Boolean,
@@ -5523,7 +5491,7 @@ var Input = class extends (_HTMLElement6 = HTMLElement) {
         "type"
       ],
       [
-        _dec44,
+        _dec45,
         1,
         "name"
       ],
@@ -5665,20 +5633,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();
@@ -7210,7 +7186,7 @@ var _HTMLElement9;
 var _dec110;
 var _dec26;
 var _dec36;
-var _dec45;
+var _dec46;
 var _init_saturationArea;
 var _init_hueArea;
 var _init_hexInput;
@@ -7533,7 +7509,7 @@ _dec21 = Component({
       </div>
     `;
   }
-}), _dec110 = Query('[part="saturation"]'), _dec26 = Query('[part="hue"]'), _dec36 = Query('[part="hex-input"]'), _dec45 = Prop({
+}), _dec110 = Query('[part="saturation"]'), _dec26 = Query('[part="hue"]'), _dec36 = Query('[part="hex-input"]'), _dec46 = Prop({
   reflect: true,
   defaultValue: "#FF0000",
   onChange(value) {
@@ -7561,7 +7537,7 @@ var ColorPicker = class extends (_HTMLElement9 = HTMLElement) {
         "hexInput"
       ],
       [
-        _dec45,
+        _dec46,
         1,
         "value"
       ]
@@ -8177,10 +8153,12 @@ var _HTMLElement10;
 var _dec111;
 var _dec28;
 var _dec37;
-var _dec46;
+var _dec47;
+var _dec55;
 var _init_dropdown;
 var _init_value5;
 var _init_disabled5;
+var _init_name4;
 var _init_placement3;
 var _initProto8;
 var _ColorInput;
@@ -8254,13 +8232,16 @@ _dec27 = Component({
 }), _dec37 = Prop({
   type: Boolean,
   reflect: true
-}), _dec46 = Prop({
+}), _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,
@@ -8277,7 +8258,12 @@ var ColorInput = class extends (_HTMLElement10 = HTMLElement) {
         "disabled"
       ],
       [
-        _dec46,
+        _dec47,
+        1,
+        "name"
+      ],
+      [
+        _dec55,
         1,
         "placement"
       ]
@@ -8307,12 +8293,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;
@@ -8357,21 +8350,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
       });
@@ -8384,6 +8380,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
       });
@@ -9372,7 +9369,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"] {
@@ -11724,14 +11721,14 @@ function applyDecs2203RFactory17() {
 function _apply_decs_2203_r17(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r17 = applyDecs2203RFactory17())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec47;
+var _dec48;
 var _initClass17;
 var _HTMLElement17;
 var _dec117;
 var _init_state4;
 var _initProto13;
 var _Snap;
-_dec47 = Component({
+_dec48 = Component({
   tag: "ease-icon-snap",
   styles: `
     :host {
@@ -11832,7 +11829,7 @@ var Snap = class extends (_HTMLElement17 = HTMLElement) {
         "state"
       ]
     ], [
-      _dec47
+      _dec48
     ], _HTMLElement17));
   }
   #___private_state_1;
@@ -12256,11 +12253,11 @@ function applyDecs2203RFactory18() {
 function _apply_decs_2203_r18(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r18 = applyDecs2203RFactory18())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec48;
+var _dec49;
 var _initClass18;
 var _HTMLElement18;
 var _IconAnchorAdd;
-_dec48 = Component({
+_dec49 = Component({
   tag: "ease-icon-anchor-add",
   styles: `
     :host {
@@ -12290,7 +12287,7 @@ _dec48 = Component({
 var IconAnchorAdd = class extends (_HTMLElement18 = HTMLElement) {
   static {
     ({ c: [_IconAnchorAdd, _initClass18] } = _apply_decs_2203_r18(this, [], [
-      _dec48
+      _dec49
     ], _HTMLElement18));
   }
   static {
@@ -12672,11 +12669,11 @@ function applyDecs2203RFactory19() {
 function _apply_decs_2203_r19(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r19 = applyDecs2203RFactory19())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec49;
+var _dec50;
 var _initClass19;
 var _HTMLElement19;
 var _IconAnchorRemove;
-_dec49 = Component({
+_dec50 = Component({
   tag: "ease-icon-anchor-remove",
   styles: `
     :host {
@@ -12705,7 +12702,7 @@ _dec49 = Component({
 var IconAnchorRemove = class extends (_HTMLElement19 = HTMLElement) {
   static {
     ({ c: [_IconAnchorRemove, _initClass19] } = _apply_decs_2203_r19(this, [], [
-      _dec49
+      _dec50
     ], _HTMLElement19));
   }
   static {
@@ -13087,11 +13084,11 @@ function applyDecs2203RFactory20() {
 function _apply_decs_2203_r20(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r20 = applyDecs2203RFactory20())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec50;
+var _dec51;
 var _initClass20;
 var _HTMLElement20;
 var _ArrowUp;
-_dec50 = Component({
+_dec51 = Component({
   tag: "ease-icon-arrow-up",
   styles: `
     :host {
@@ -13116,7 +13113,7 @@ _dec50 = Component({
 var ArrowUp = class extends (_HTMLElement20 = HTMLElement) {
   static {
     ({ c: [_ArrowUp, _initClass20] } = _apply_decs_2203_r20(this, [], [
-      _dec50
+      _dec51
     ], _HTMLElement20));
   }
   static {
@@ -13498,11 +13495,11 @@ function applyDecs2203RFactory21() {
 function _apply_decs_2203_r21(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r21 = applyDecs2203RFactory21())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec51;
+var _dec56;
 var _initClass21;
 var _HTMLElement21;
 var _IconBezier;
-_dec51 = Component({
+_dec56 = Component({
   tag: "ease-icon-bezier",
   styles: `
     :host {
@@ -13523,7 +13520,7 @@ _dec51 = Component({
 var IconBezier = class extends (_HTMLElement21 = HTMLElement) {
   static {
     ({ c: [_IconBezier, _initClass21] } = _apply_decs_2203_r21(this, [], [
-      _dec51
+      _dec56
     ], _HTMLElement21));
   }
   static {
@@ -13905,11 +13902,11 @@ function applyDecs2203RFactory22() {
 function _apply_decs_2203_r22(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r22 = applyDecs2203RFactory22())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec55;
+var _dec57;
 var _initClass22;
 var _HTMLElement22;
 var _IconBezierAngle;
-_dec55 = Component({
+_dec57 = Component({
   tag: "ease-icon-bezier-angle",
   styles: `
     :host {
@@ -13937,7 +13934,7 @@ _dec55 = Component({
 var IconBezierAngle = class extends (_HTMLElement22 = HTMLElement) {
   static {
     ({ c: [_IconBezierAngle, _initClass22] } = _apply_decs_2203_r22(this, [], [
-      _dec55
+      _dec57
     ], _HTMLElement22));
   }
   static {
@@ -14319,11 +14316,11 @@ function applyDecs2203RFactory23() {
 function _apply_decs_2203_r23(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r23 = applyDecs2203RFactory23())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec56;
+var _dec58;
 var _initClass23;
 var _HTMLElement23;
 var _IconBezierDistribute;
-_dec56 = Component({
+_dec58 = Component({
   tag: "ease-icon-bezier-distribute",
   styles: `
     :host {
@@ -14352,7 +14349,7 @@ _dec56 = Component({
 var IconBezierDistribute = class extends (_HTMLElement23 = HTMLElement) {
   static {
     ({ c: [_IconBezierDistribute, _initClass23] } = _apply_decs_2203_r23(this, [], [
-      _dec56
+      _dec58
     ], _HTMLElement23));
   }
   static {
@@ -14734,11 +14731,11 @@ function applyDecs2203RFactory24() {
 function _apply_decs_2203_r24(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r24 = applyDecs2203RFactory24())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec57;
+var _dec59;
 var _initClass24;
 var _HTMLElement24;
 var _IconBezierLength;
-_dec57 = Component({
+_dec59 = Component({
   tag: "ease-icon-bezier-length",
   styles: `
     :host {
@@ -14764,7 +14761,7 @@ _dec57 = Component({
 var IconBezierLength = class extends (_HTMLElement24 = HTMLElement) {
   static {
     ({ c: [_IconBezierLength, _initClass24] } = _apply_decs_2203_r24(this, [], [
-      _dec57
+      _dec59
     ], _HTMLElement24));
   }
   static {
@@ -15146,11 +15143,11 @@ function applyDecs2203RFactory25() {
 function _apply_decs_2203_r25(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r25 = applyDecs2203RFactory25())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec58;
+var _dec60;
 var _initClass25;
 var _HTMLElement25;
 var _IconBezierMirror;
-_dec58 = Component({
+_dec60 = Component({
   tag: "ease-icon-bezier-mirror",
   styles: `
     :host {
@@ -15176,7 +15173,7 @@ _dec58 = Component({
 var IconBezierMirror = class extends (_HTMLElement25 = HTMLElement) {
   static {
     ({ c: [_IconBezierMirror, _initClass25] } = _apply_decs_2203_r25(this, [], [
-      _dec58
+      _dec60
     ], _HTMLElement25));
   }
   static {
@@ -15558,11 +15555,11 @@ function applyDecs2203RFactory26() {
 function _apply_decs_2203_r26(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r26 = applyDecs2203RFactory26())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec59;
+var _dec61;
 var _initClass26;
 var _HTMLElement26;
 var _IconCheck;
-_dec59 = Component({
+_dec61 = Component({
   tag: "ease-icon-check",
   styles: `
     :host {
@@ -15587,7 +15584,7 @@ _dec59 = Component({
 var IconCheck = class extends (_HTMLElement26 = HTMLElement) {
   static {
     ({ c: [_IconCheck, _initClass26] } = _apply_decs_2203_r26(this, [], [
-      _dec59
+      _dec61
     ], _HTMLElement26));
   }
   static {
@@ -15969,11 +15966,11 @@ function applyDecs2203RFactory27() {
 function _apply_decs_2203_r27(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r27 = applyDecs2203RFactory27())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec60;
+var _dec65;
 var _initClass27;
 var _HTMLElement27;
 var _IconCircleArrowLeft;
-_dec60 = Component({
+_dec65 = Component({
   tag: "ease-icon-circle-arrow-left",
   styles: `
     :host {
@@ -15998,7 +15995,7 @@ _dec60 = Component({
 var IconCircleArrowLeft = class extends (_HTMLElement27 = HTMLElement) {
   static {
     ({ c: [_IconCircleArrowLeft, _initClass27] } = _apply_decs_2203_r27(this, [], [
-      _dec60
+      _dec65
     ], _HTMLElement27));
   }
   static {
@@ -16380,11 +16377,11 @@ function applyDecs2203RFactory28() {
 function _apply_decs_2203_r28(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r28 = applyDecs2203RFactory28())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec61;
+var _dec66;
 var _initClass28;
 var _HTMLElement28;
 var _IconCircleArrowRight;
-_dec61 = Component({
+_dec66 = Component({
   tag: "ease-icon-circle-arrow-right",
   styles: `
     :host {
@@ -16409,7 +16406,7 @@ _dec61 = Component({
 var IconCircleArrowRight = class extends (_HTMLElement28 = HTMLElement) {
   static {
     ({ c: [_IconCircleArrowRight, _initClass28] } = _apply_decs_2203_r28(this, [], [
-      _dec61
+      _dec66
     ], _HTMLElement28));
   }
   static {
@@ -16791,11 +16788,11 @@ function applyDecs2203RFactory29() {
 function _apply_decs_2203_r29(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r29 = applyDecs2203RFactory29())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec65;
+var _dec67;
 var _initClass29;
 var _HTMLElement29;
 var _IconCode;
-_dec65 = Component({
+_dec67 = Component({
   tag: "ease-icon-code",
   styles: `
     :host {
@@ -16820,7 +16817,7 @@ _dec65 = Component({
 var IconCode = class extends (_HTMLElement29 = HTMLElement) {
   static {
     ({ c: [_IconCode, _initClass29] } = _apply_decs_2203_r29(this, [], [
-      _dec65
+      _dec67
     ], _HTMLElement29));
   }
   static {
@@ -17202,11 +17199,11 @@ function applyDecs2203RFactory30() {
 function _apply_decs_2203_r30(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r30 = applyDecs2203RFactory30())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec66;
+var _dec68;
 var _initClass30;
 var _HTMLElement30;
 var _IconDots;
-_dec66 = Component({
+_dec68 = Component({
   tag: "ease-icon-dots",
   styles: `
     :host {
@@ -17233,7 +17230,7 @@ _dec66 = Component({
 var IconDots = class extends (_HTMLElement30 = HTMLElement) {
   static {
     ({ c: [_IconDots, _initClass30] } = _apply_decs_2203_r30(this, [], [
-      _dec66
+      _dec68
     ], _HTMLElement30));
   }
   static {
@@ -17615,11 +17612,11 @@ function applyDecs2203RFactory31() {
 function _apply_decs_2203_r31(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r31 = applyDecs2203RFactory31())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec67;
+var _dec69;
 var _initClass31;
 var _HTMLElement31;
 var _IconMention;
-_dec67 = Component({
+_dec69 = Component({
   tag: "ease-icon-mention",
   styles: `
     :host {
@@ -17644,7 +17641,7 @@ _dec67 = Component({
 var IconMention = class extends (_HTMLElement31 = HTMLElement) {
   static {
     ({ c: [_IconMention, _initClass31] } = _apply_decs_2203_r31(this, [], [
-      _dec67
+      _dec69
     ], _HTMLElement31));
   }
   static {
@@ -18026,11 +18023,11 @@ function applyDecs2203RFactory32() {
 function _apply_decs_2203_r32(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r32 = applyDecs2203RFactory32())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec68;
+var _dec70;
 var _initClass32;
 var _HTMLElement32;
 var _IconMinus;
-_dec68 = Component({
+_dec70 = Component({
   tag: "ease-icon-minus",
   styles: `
     :host {
@@ -18055,7 +18052,7 @@ _dec68 = Component({
 var IconMinus = class extends (_HTMLElement32 = HTMLElement) {
   static {
     ({ c: [_IconMinus, _initClass32] } = _apply_decs_2203_r32(this, [], [
-      _dec68
+      _dec70
     ], _HTMLElement32));
   }
   static {
@@ -18437,11 +18434,11 @@ function applyDecs2203RFactory33() {
 function _apply_decs_2203_r33(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r33 = applyDecs2203RFactory33())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec69;
+var _dec71;
 var _initClass33;
 var _HTMLElement33;
 var _IconPlus;
-_dec69 = Component({
+_dec71 = Component({
   tag: "ease-icon-plus",
   styles: `
     :host {
@@ -18466,7 +18463,7 @@ _dec69 = Component({
 var IconPlus = class extends (_HTMLElement33 = HTMLElement) {
   static {
     ({ c: [_IconPlus, _initClass33] } = _apply_decs_2203_r33(this, [], [
-      _dec69
+      _dec71
     ], _HTMLElement33));
   }
   static {
@@ -18848,11 +18845,11 @@ function applyDecs2203RFactory34() {
 function _apply_decs_2203_r34(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r34 = applyDecs2203RFactory34())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec70;
+var _dec74;
 var _initClass34;
 var _HTMLElement34;
 var _Settings;
-_dec70 = Component({
+_dec74 = Component({
   tag: "ease-icon-settings",
   styles: `
     :host {
@@ -18877,7 +18874,7 @@ _dec70 = Component({
 var Settings = class extends (_HTMLElement34 = HTMLElement) {
   static {
     ({ c: [_Settings, _initClass34] } = _apply_decs_2203_r34(this, [], [
-      _dec70
+      _dec74
     ], _HTMLElement34));
   }
   static {
@@ -19259,7 +19256,7 @@ function applyDecs2203RFactory35() {
 function _apply_decs_2203_r35(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r35 = applyDecs2203RFactory35())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec71;
+var _dec75;
 var _initClass35;
 var _HTMLElement35;
 var _dec118;
@@ -19419,7 +19416,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;
-_dec71 = Component({
+_dec75 = Component({
   tag: "ease-logo-loader",
   styles: `
     :host {
@@ -19692,7 +19689,7 @@ var LogoLoader = class extends (_HTMLElement35 = HTMLElement) {
         "ariaLabel"
       ]
     ], [
-      _dec71
+      _dec75
     ], _HTMLElement35));
   }
   #___private_loading_1;
@@ -20556,7 +20553,7 @@ function applyDecs2203RFactory36() {
 function _apply_decs_2203_r36(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r36 = applyDecs2203RFactory36())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec74;
+var _dec76;
 var _initClass36;
 var _HTMLElement36;
 var _dec119;
@@ -20620,7 +20617,7 @@ var rateFps = (fps, targetFps) => {
   return "poor";
 };
 var _MonitorFps;
-_dec74 = Component({
+_dec76 = Component({
   tag: "ease-monitor-fps",
   autoSlot: false,
   shadowMode: "open",
@@ -20739,7 +20736,7 @@ var MonitorFps = class extends (_HTMLElement36 = HTMLElement) {
         "canvasEl"
       ]
     ], [
-      _dec74
+      _dec76
     ], _HTMLElement36));
   }
   #___private_paused_1;
@@ -21394,7 +21391,7 @@ function applyDecs2203RFactory37() {
 function _apply_decs_2203_r37(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r37 = applyDecs2203RFactory37())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec75;
+var _dec77;
 var _initClass37;
 var _HTMLElement37;
 var _dec120;
@@ -21512,7 +21509,7 @@ var estimateCarbonFootprint = (totalBytes) => {
   return `${emissions.toFixed(3)}g CO2 eq.`;
 };
 var _Monitor;
-_dec75 = Component({
+_dec77 = Component({
   tag: "ease-monitor",
   styles: `
     :host {
@@ -21656,7 +21653,7 @@ var Monitor = class extends (_HTMLElement37 = HTMLElement) {
         "handleFpsUpdate"
       ]
     ], [
-      _dec75
+      _dec77
     ], _HTMLElement37));
   }
   #___private_metrics_1;
@@ -22545,7 +22542,7 @@ function applyDecs2203RFactory38() {
 function _apply_decs_2203_r38(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r38 = applyDecs2203RFactory38())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec76;
+var _dec78;
 var _initClass38;
 var _HTMLElement38;
 var _dec121;
@@ -22554,19 +22551,19 @@ var _dec312;
 var _dec411;
 var _dec510;
 var _dec610;
-var _dec77;
+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;
-_dec76 = Component({
+_dec78 = Component({
   tag: "ease-number-input",
   styles: `
     :host {
@@ -22665,14 +22662,14 @@ _dec76 = Component({
 }), _dec610 = Prop({
   type: Boolean,
   reflect: true
-}), _dec77 = 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,
@@ -22704,7 +22701,7 @@ var NumberInput = class extends (_HTMLElement38 = HTMLElement) {
         "disabled"
       ],
       [
-        _dec77,
+        _dec79,
         1,
         "control"
       ],
@@ -22719,7 +22716,7 @@ var NumberInput = class extends (_HTMLElement38 = HTMLElement) {
         "handleChange"
       ]
     ], [
-      _dec76
+      _dec78
     ], _HTMLElement38));
   }
   #___private_value_1;
@@ -22789,20 +22786,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");
@@ -22840,7 +22845,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);
   }
 };
 
@@ -23218,7 +23223,7 @@ function applyDecs2203RFactory39() {
 function _apply_decs_2203_r39(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r39 = applyDecs2203RFactory39())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec78;
+var _dec80;
 var _initClass39;
 var _HTMLElement39;
 var _dec123;
@@ -23229,10 +23234,10 @@ var _dec511;
 var _init_value7;
 var _init_disabled7;
 var _init_control4;
-var _init_name5;
+var _init_name6;
 var _initProto18;
 var _Origin;
-_dec78 = Component({
+_dec80 = Component({
   tag: "ease-origin",
   styles: `
     :host {
@@ -23378,7 +23383,7 @@ _dec78 = 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,
@@ -23405,7 +23410,7 @@ var Origin = class extends (_HTMLElement39 = HTMLElement) {
         "handleChange"
       ]
     ], [
-      _dec78
+      _dec80
     ], _HTMLElement39));
   }
   #___private_value_1;
@@ -23453,7 +23458,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,
@@ -23837,7 +23842,7 @@ function applyDecs2203RFactory40() {
 function _apply_decs_2203_r40(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r40 = applyDecs2203RFactory40())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec79;
+var _dec81;
 var _initClass40;
 var _HTMLElement40;
 var _dec124;
@@ -23850,11 +23855,11 @@ var _dec710;
 var _init_activeTab;
 var _init_headline2;
 var _init_maxHeight3;
-var _init_contentElement;
+var _init_contentElement2;
 var _init_bodyElement;
 var _initProto19;
 var _Panel;
-_dec79 = Component({
+_dec81 = Component({
   tag: "ease-panel",
   shadowMode: "open",
   styles: `
@@ -23919,7 +23924,6 @@ _dec79 = Component({
       align-items: center;
       gap: 2px;
       flex-grow: 1;
-      margin: 0 0 0 4px;
     }
 
     [part="tabs"]:empty {
@@ -23928,17 +23932,18 @@ _dec79 = 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);
     }
@@ -24111,7 +24116,7 @@ _dec79 = Component({
 });
 var Panel = class extends (_HTMLElement40 = HTMLElement) {
   static {
-    ({ e: [_init_activeTab, _init_headline2, _init_maxHeight3, _init_contentElement, _init_bodyElement, _initProto19], c: [_Panel, _initClass40] } = _apply_decs_2203_r40(this, [
+    ({ e: [_init_activeTab, _init_headline2, _init_maxHeight3, _init_contentElement2, _init_bodyElement, _initProto19], c: [_Panel, _initClass40] } = _apply_decs_2203_r40(this, [
       [
         _dec124,
         1,
@@ -24148,7 +24153,7 @@ var Panel = class extends (_HTMLElement40 = HTMLElement) {
         "onDefaultSlotChange"
       ]
     ], [
-      _dec79
+      _dec81
     ], _HTMLElement40));
   }
   #tabs;
@@ -24448,7 +24453,7 @@ var Panel = class extends (_HTMLElement40 = HTMLElement) {
     _initClass40();
   }
   constructor(...args) {
-    super(...args), this.#tabs = (_initProto19(this), []), this.#isAnimating = false, this.#___private_activeTab_1 = _init_activeTab(this, 0), this.#___private_headline_2 = _init_headline2(this, null), this.#___private_maxHeight_3 = _init_maxHeight3(this, null), this.#___private_contentElement_4 = _init_contentElement(this), this.#___private_bodyElement_5 = _init_bodyElement(this);
+    super(...args), this.#tabs = (_initProto19(this), []), this.#isAnimating = false, this.#___private_activeTab_1 = _init_activeTab(this, 0), this.#___private_headline_2 = _init_headline2(this, null), this.#___private_maxHeight_3 = _init_maxHeight3(this, null), this.#___private_contentElement_4 = _init_contentElement2(this), this.#___private_bodyElement_5 = _init_bodyElement(this);
   }
 };
 
@@ -24841,7 +24846,7 @@ function applyDecs2203RFactory41() {
 function _apply_decs_2203_r41(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r41 = applyDecs2203RFactory41())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec80;
+var _dec85;
 var _initClass41;
 var _HTMLElement41;
 var _dec125;
@@ -24866,7 +24871,7 @@ var nextPanelId2 = /* @__PURE__ */ (() => {
   };
 })();
 var _RadioGroup;
-_dec80 = Component({
+_dec85 = Component({
   tag: "ease-radio-group",
   shadowMode: "open",
   styles: `
@@ -24958,7 +24963,7 @@ var RadioGroup = class extends (_HTMLElement41 = HTMLElement) {
         "contentSlot"
       ]
     ], [
-      _dec80
+      _dec85
     ], _HTMLElement41));
   }
   #___private_value_1;
@@ -25559,7 +25564,7 @@ function applyDecs2203RFactory42() {
 function _apply_decs_2203_r42(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r42 = applyDecs2203RFactory42())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec81;
+var _dec86;
 var _initClass42;
 var _HTMLElement42;
 var _dec126;
@@ -25569,13 +25574,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;
-_dec81 = Component({
+_dec86 = Component({
   tag: "ease-radio-input",
   shadowMode: "open",
   styles: `
@@ -25842,7 +25847,7 @@ _dec81 = 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,
@@ -25874,7 +25879,7 @@ var RadioInput = class extends (_HTMLElement42 = HTMLElement) {
         "handleClick"
       ]
     ], [
-      _dec81
+      _dec86
     ], _HTMLElement42));
   }
   #___private_checked_1;
@@ -25957,16 +25962,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()}`;
   }
 };
 
@@ -26344,7 +26355,7 @@ function applyDecs2203RFactory43() {
 function _apply_decs_2203_r43(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r43 = applyDecs2203RFactory43())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec85;
+var _dec87;
 var _initClass43;
 var _HTMLElement43;
 var _dec127;
@@ -26354,7 +26365,7 @@ var _dec415;
 var _dec514;
 var _dec613;
 var _dec711;
-var _dec86;
+var _dec88;
 var _dec95;
 var _dec104;
 var _dec1110;
@@ -26367,7 +26378,7 @@ var _init_control6;
 var _init_valueControl;
 var _initProto22;
 var _Slider;
-_dec85 = Component({
+_dec87 = Component({
   tag: "ease-slider",
   styles: `
     :host {
@@ -26478,11 +26489,15 @@ _dec85 = 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)}
@@ -26506,7 +26521,7 @@ _dec85 = Component({
 }), _dec514 = Prop({
   type: Boolean,
   reflect: true
-}), _dec613 = Query("input"), _dec711 = Query("ease-input"), _dec86 = Listen("input", {
+}), _dec613 = Query("input"), _dec711 = Query("ease-input"), _dec88 = Listen("input", {
   selector: 'input[type="range"]'
 }), _dec95 = Listen("change", {
   selector: 'input[type="range"]'
@@ -26556,7 +26571,7 @@ var Slider = class extends (_HTMLElement43 = HTMLElement) {
         "valueControl"
       ],
       [
-        _dec86,
+        _dec88,
         2,
         "handleRangeInput"
       ],
@@ -26576,7 +26591,7 @@ var Slider = class extends (_HTMLElement43 = HTMLElement) {
         "handleValueChange"
       ]
     ], [
-      _dec85
+      _dec87
     ], _HTMLElement43));
   }
   #___private_value_1;
@@ -26654,10 +26669,14 @@ 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, "input", detail);
+    dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
   }
   handleRangeChange(event, target) {
     if (target) {
@@ -26668,10 +26687,14 @@ 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, "change", detail);
+    dispatchControlEvent(this, CONTROL_CHANGE_EVENT, detail);
   }
   handleValueInput(event) {
     const rawValue = event.detail?.value ?? "";
@@ -26681,10 +26704,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 ?? "";
@@ -26694,10 +26722,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) {
@@ -27091,7 +27124,7 @@ function applyDecs2203RFactory44() {
 function _apply_decs_2203_r44(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r44 = applyDecs2203RFactory44())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec87;
+var _dec89;
 var _initClass44;
 var _HTMLElement44;
 var _dec128;
@@ -27124,7 +27157,7 @@ var getControlName = (element) => {
   return element.getAttribute?.("name") ?? null;
 };
 var _State;
-_dec87 = Component({
+_dec89 = Component({
   tag: "ease-state",
   shadowMode: "open",
   styles: `
@@ -27177,7 +27210,7 @@ var State = class extends (_HTMLElement44 = HTMLElement) {
         "handleControlChange"
       ]
     ], [
-      _dec87
+      _dec89
     ], _HTMLElement44));
   }
   #controls;
@@ -27760,7 +27793,7 @@ function applyDecs2203RFactory45() {
 function _apply_decs_2203_r45(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r45 = applyDecs2203RFactory45())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec88;
+var _dec90;
 var _initClass45;
 var _HTMLElement45;
 var _dec129;
@@ -27772,7 +27805,7 @@ var _init_disabled10;
 var _init_control7;
 var _initProto24;
 var _Toggle;
-_dec88 = Component({
+_dec90 = Component({
   tag: "ease-toggle",
   styles: `
     :host {
@@ -27917,7 +27950,7 @@ var Toggle = class extends (_HTMLElement45 = HTMLElement) {
         "handleClick"
       ]
     ], [
-      _dec88
+      _dec90
     ], _HTMLElement45));
   }
   #___private_checked_1;
@@ -27957,10 +27990,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();
@@ -28344,7 +28382,7 @@ function applyDecs2203RFactory46() {
 function _apply_decs_2203_r46(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r46 = applyDecs2203RFactory46())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec89;
+var _dec91;
 var _initClass46;
 var _HTMLElement46;
 var _dec130;
@@ -28357,10 +28395,10 @@ var _init_open4;
 var _init_delay;
 var _init_placement4;
 var _init_triggerElement;
-var _init_contentElement2;
+var _init_contentElement3;
 var _initProto25;
 var _Tooltip;
-_dec89 = Component({
+_dec91 = Component({
   tag: "ease-tooltip",
   shadowMode: "open",
   styles: `
@@ -28412,7 +28450,7 @@ _dec89 = Component({
 });
 var Tooltip = class extends (_HTMLElement46 = HTMLElement) {
   static {
-    ({ e: [_init_open4, _init_delay, _init_placement4, _init_triggerElement, _init_contentElement2, _initProto25], c: [_Tooltip, _initClass46] } = _apply_decs_2203_r46(this, [
+    ({ e: [_init_open4, _init_delay, _init_placement4, _init_triggerElement, _init_contentElement3, _initProto25], c: [_Tooltip, _initClass46] } = _apply_decs_2203_r46(this, [
       [
         _dec130,
         1,
@@ -28444,7 +28482,7 @@ var Tooltip = class extends (_HTMLElement46 = HTMLElement) {
         "handleOutsideDismiss"
       ]
     ], [
-      _dec89
+      _dec91
     ], _HTMLElement46));
   }
   #hoverTimer;
@@ -28595,7 +28633,7 @@ var Tooltip = class extends (_HTMLElement46 = HTMLElement) {
     _initClass46();
   }
   constructor(...args) {
-    super(...args), this.#hoverTimer = (_initProto25(this), null), this.#trigger = null, this.#content = null, this.#___private_open_1 = _init_open4(this, false), this.#___private_delay_2 = _init_delay(this, 300), this.#___private_placement_3 = _init_placement4(this, "top-center"), this.#___private_triggerElement_4 = _init_triggerElement(this), this.#___private_contentElement_5 = _init_contentElement2(this), this.#handleEnter = () => {
+    super(...args), this.#hoverTimer = (_initProto25(this), null), this.#trigger = null, this.#content = null, this.#___private_open_1 = _init_open4(this, false), this.#___private_delay_2 = _init_delay(this, 300), this.#___private_placement_3 = _init_placement4(this, "top-center"), this.#___private_triggerElement_4 = _init_triggerElement(this), this.#___private_contentElement_5 = _init_contentElement3(this), this.#handleEnter = () => {
       this.#startTimer(() => {
         this.open = true;
       });
@@ -29229,7 +29267,7 @@ function applyDecs2203RFactory47() {
 function _apply_decs_2203_r47(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r47 = applyDecs2203RFactory47())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec90;
+var _dec96;
 var _initClass47;
 var _HTMLElement47;
 var _dec131;
@@ -29238,7 +29276,7 @@ var _init_language;
 var _init_codeElement;
 var _initProto26;
 var _Code;
-_dec90 = Component({
+_dec96 = Component({
   tag: "ease-code",
   shadowMode: "open",
   autoSlot: false,
@@ -29280,7 +29318,7 @@ var Code = class extends (_HTMLElement47 = HTMLElement) {
         "codeElement"
       ]
     ], [
-      _dec90
+      _dec96
     ], _HTMLElement47));
   }
   #instanceId;
@@ -30465,6 +30503,15 @@ var smoothLinearPoints = (points, tension = 0.25) => {
   });
 };
 
+// src/elements/shared.ts
+var 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
 var import_lit_html51 = require("lit-html");
 
@@ -30706,15 +30753,6 @@ var generateGridLines = (gridStep) => {
   return lines;
 };
 
-// src/elements/shared.ts
-var 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 applyDecs2203RFactory48() {
   function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -31088,7 +31126,7 @@ function applyDecs2203RFactory48() {
 function _apply_decs_2203_r48(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r48 = applyDecs2203RFactory48())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec91;
+var _dec97;
 var _initClass48;
 var _HTMLElement48;
 var _dec133;
@@ -31099,7 +31137,7 @@ var _dec517;
 var _dec615;
 var _dec712;
 var _dec810;
-var _dec96;
+var _dec98;
 var _init_easingType;
 var _init_points;
 var _init_showGrid;
@@ -31111,7 +31149,7 @@ var _init_round;
 var _init_svgElement;
 var _initProto27;
 var _CurveCanvas;
-_dec91 = Component({
+_dec97 = Component({
   tag: "ease-curve-canvas",
   styles: canvasStyles,
   template() {
@@ -31167,7 +31205,7 @@ _dec91 = Component({
   type: Number,
   reflect: true,
   defaultValue: 5
-}), _dec96 = Query("svg");
+}), _dec98 = Query("svg");
 var CurveCanvas = class extends (_HTMLElement48 = HTMLElement) {
   static {
     ({ e: [_init_easingType, _init_points, _init_showGrid, _init_snapToGrid, _init_gridSize, _init_focusedLinearIndex, _init_simplify, _init_round, _init_svgElement, _initProto27], c: [_CurveCanvas, _initClass48] } = _apply_decs_2203_r48(this, [
@@ -31212,12 +31250,12 @@ var CurveCanvas = class extends (_HTMLElement48 = HTMLElement) {
         "round"
       ],
       [
-        _dec96,
+        _dec98,
         1,
         "svgElement"
       ]
     ], [
-      _dec91
+      _dec97
     ], _HTMLElement48));
   }
   #___private_easingType_1;
@@ -32101,6 +32139,7 @@ var CurveCanvas = class extends (_HTMLElement48 = HTMLElement) {
     }, this.#emitPoints = (value, event) => {
       const target = this.#getEventTarget();
       const detail = {
+        name: target.name,
         value,
         event
       };
@@ -32111,6 +32150,7 @@ var CurveCanvas = class extends (_HTMLElement48 = HTMLElement) {
       }
       const target = this.#getEventTarget();
       const detail = {
+        name: target.name,
         value: index,
         event
       };
@@ -32828,7 +32868,7 @@ function applyDecs2203RFactory49() {
 function _apply_decs_2203_r49(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r49 = applyDecs2203RFactory49())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec97;
+var _dec99;
 var _initClass49;
 var _HTMLElement49;
 var _dec134;
@@ -32839,7 +32879,7 @@ var _init_points2;
 var _init_focusedLinearIndex2;
 var _initProto28;
 var _CanvasControls;
-_dec97 = Component({
+_dec99 = Component({
   tag: "ease-curve-canvas-controls",
   styles: canvasControlsStyles,
   template() {
@@ -32928,7 +32968,7 @@ var CanvasControls = class extends (_HTMLElement49 = HTMLElement) {
         "focusedLinearIndex"
       ]
     ], [
-      _dec97
+      _dec99
     ], _HTMLElement49));
   }
   #___private_easingType_1;
@@ -33046,6 +33086,7 @@ var CanvasControls = class extends (_HTMLElement49 = HTMLElement) {
     }, this.#notifyHost = (type, value, event) => {
       const target = this.#getEventTarget();
       const detail = {
+        name: target.name,
         value,
         event
       };
@@ -33559,11 +33600,11 @@ function applyDecs2203RFactory50() {
 function _apply_decs_2203_r50(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r50 = applyDecs2203RFactory50())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec98;
+var _dec100;
 var _initClass50;
 var _HTMLElement50;
 var _IconMinus2;
-_dec98 = Component({
+_dec100 = Component({
   tag: "ease-icon-minus",
   styles: `
     :host {
@@ -33588,7 +33629,7 @@ _dec98 = Component({
 var IconMinus2 = class extends (_HTMLElement50 = HTMLElement) {
   static {
     ({ c: [_IconMinus2, _initClass50] } = _apply_decs_2203_r50(this, [], [
-      _dec98
+      _dec100
     ], _HTMLElement50));
   }
   static {
@@ -33970,11 +34011,11 @@ function applyDecs2203RFactory51() {
 function _apply_decs_2203_r51(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r51 = applyDecs2203RFactory51())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec99;
+var _dec101;
 var _initClass51;
 var _HTMLElement51;
 var _IconPlus2;
-_dec99 = Component({
+_dec101 = Component({
   tag: "ease-icon-plus",
   styles: `
     :host {
@@ -33999,7 +34040,7 @@ _dec99 = Component({
 var IconPlus2 = class extends (_HTMLElement51 = HTMLElement) {
   static {
     ({ c: [_IconPlus2, _initClass51] } = _apply_decs_2203_r51(this, [], [
-      _dec99
+      _dec101
     ], _HTMLElement51));
   }
   static {
@@ -34381,7 +34422,7 @@ function applyDecs2203RFactory52() {
 function _apply_decs_2203_r52(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r52 = applyDecs2203RFactory52())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec100;
+var _dec105;
 var _initClass52;
 var _HTMLElement52;
 var _dec135;
@@ -34398,7 +34439,7 @@ var _init_block3;
 var _init_variant2;
 var _initProto29;
 var _Button2;
-_dec100 = Component({
+_dec105 = Component({
   tag: "ease-button",
   autoSlot: true,
   shadowMode: "open",
@@ -34624,7 +34665,7 @@ var Button2 = class extends (_HTMLElement52 = HTMLElement) {
         "variant"
       ]
     ], [
-      _dec100
+      _dec105
     ], _HTMLElement52));
   }
   #___private_disabled_1;
@@ -35064,7 +35105,7 @@ function applyDecs2203RFactory53() {
 function _apply_decs_2203_r53(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r53 = applyDecs2203RFactory53())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec101;
+var _dec106;
 var _initClass53;
 var _HTMLElement53;
 var _dec136;
@@ -35081,7 +35122,7 @@ var _init_gridSize2;
 var _init_focusedLinearIndex3;
 var _initProto30;
 var _CurveControls;
-_dec101 = Component({
+_dec106 = Component({
   tag: "ease-curve-controls",
   styles: controlsStyles,
   template() {
@@ -35176,7 +35217,7 @@ var CurveControls = class extends (_HTMLElement53 = HTMLElement) {
         "focusedLinearIndex"
       ]
     ], [
-      _dec101
+      _dec106
     ], _HTMLElement53));
   }
   #___private_easingType_1;
@@ -36086,6 +36127,7 @@ var CurveControls = class extends (_HTMLElement53 = HTMLElement) {
     }, this.#notifyHost = (type, value, event) => {
       const target = this.#getEventTarget();
       const detail = {
+        name: target.name,
         value,
         event
       };
@@ -36471,7 +36513,7 @@ function applyDecs2203RFactory54() {
 function _apply_decs_2203_r54(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r54 = applyDecs2203RFactory54())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec105;
+var _dec107;
 var _initClass54;
 var _HTMLElement54;
 var _dec137;
@@ -36480,7 +36522,7 @@ var _init_language2;
 var _init_codeElement2;
 var _initProto31;
 var _Code2;
-_dec105 = Component({
+_dec107 = Component({
   tag: "ease-code",
   shadowMode: "open",
   autoSlot: false,
@@ -36522,7 +36564,7 @@ var Code2 = class extends (_HTMLElement54 = HTMLElement) {
         "codeElement"
       ]
     ], [
-      _dec105
+      _dec107
     ], _HTMLElement54));
   }
   #instanceId;
@@ -37027,7 +37069,7 @@ function applyDecs2203RFactory55() {
 function _apply_decs_2203_r55(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r55 = applyDecs2203RFactory55())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec106;
+var _dec108;
 var _initClass55;
 var _HTMLElement55;
 var _dec138;
@@ -37038,13 +37080,13 @@ var _dec520;
 var _dec618;
 var _init_easingType4;
 var _init_points4;
-var _init_name7;
+var _init_name8;
 var _init_variant3;
 var _init_simplify2;
 var _init_round2;
 var _initProto32;
 var _CurveOutput;
-_dec106 = Component({
+_dec108 = Component({
   tag: "ease-curve-output",
   styles: outputStyles,
   template() {
@@ -37083,7 +37125,7 @@ _dec106 = Component({
 });
 var CurveOutput = class extends (_HTMLElement55 = HTMLElement) {
   static {
-    ({ e: [_init_easingType4, _init_points4, _init_name7, _init_variant3, _init_simplify2, _init_round2, _initProto32], c: [_CurveOutput, _initClass55] } = _apply_decs_2203_r55(this, [
+    ({ e: [_init_easingType4, _init_points4, _init_name8, _init_variant3, _init_simplify2, _init_round2, _initProto32], c: [_CurveOutput, _initClass55] } = _apply_decs_2203_r55(this, [
       [
         _dec138,
         1,
@@ -37115,7 +37157,7 @@ var CurveOutput = class extends (_HTMLElement55 = HTMLElement) {
         "round"
       ]
     ], [
-      _dec106
+      _dec108
     ], _HTMLElement55));
   }
   #___private_easingType_1;
@@ -37237,7 +37279,7 @@ var CurveOutput = class extends (_HTMLElement55 = HTMLElement) {
     _initClass55();
   }
   constructor(...args) {
-    super(...args), this.#___private_easingType_1 = (_initProto32(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 = (_initProto32(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);
@@ -37651,7 +37693,7 @@ function applyDecs2203RFactory56() {
 function _apply_decs_2203_r56(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r56 = applyDecs2203RFactory56())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec107;
+var _dec109;
 var _initClass56;
 var _HTMLElement56;
 var _dec139;
@@ -37664,10 +37706,10 @@ var _init_open5;
 var _init_delay2;
 var _init_placement5;
 var _init_triggerElement2;
-var _init_contentElement3;
+var _init_contentElement4;
 var _initProto33;
 var _Tooltip2;
-_dec107 = Component({
+_dec109 = Component({
   tag: "ease-tooltip",
   shadowMode: "open",
   styles: `
@@ -37719,7 +37761,7 @@ _dec107 = Component({
 });
 var Tooltip2 = class extends (_HTMLElement56 = HTMLElement) {
   static {
-    ({ e: [_init_open5, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement3, _initProto33], c: [_Tooltip2, _initClass56] } = _apply_decs_2203_r56(this, [
+    ({ e: [_init_open5, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement4, _initProto33], c: [_Tooltip2, _initClass56] } = _apply_decs_2203_r56(this, [
       [
         _dec139,
         1,
@@ -37751,7 +37793,7 @@ var Tooltip2 = class extends (_HTMLElement56 = HTMLElement) {
         "handleOutsideDismiss"
       ]
     ], [
-      _dec107
+      _dec109
     ], _HTMLElement56));
   }
   #hoverTimer;
@@ -37902,7 +37944,7 @@ var Tooltip2 = class extends (_HTMLElement56 = HTMLElement) {
     _initClass56();
   }
   constructor(...args) {
-    super(...args), this.#hoverTimer = (_initProto33(this), null), this.#trigger = null, this.#content = null, this.#___private_open_1 = _init_open5(this, false), this.#___private_delay_2 = _init_delay2(this, 300), this.#___private_placement_3 = _init_placement5(this, "top-center"), this.#___private_triggerElement_4 = _init_triggerElement2(this), this.#___private_contentElement_5 = _init_contentElement3(this), this.#handleEnter = () => {
+    super(...args), this.#hoverTimer = (_initProto33(this), null), this.#trigger = null, this.#content = null, this.#___private_open_1 = _init_open5(this, false), this.#___private_delay_2 = _init_delay2(this, 300), this.#___private_placement_3 = _init_placement5(this, "top-center"), this.#___private_triggerElement_4 = _init_triggerElement2(this), this.#___private_contentElement_5 = _init_contentElement4(this), this.#handleEnter = () => {
       this.#startTimer(() => {
         this.open = true;
       });
@@ -38292,10 +38334,10 @@ function applyDecs2203RFactory57() {
 function _apply_decs_2203_r57(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r57 = applyDecs2203RFactory57())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec108;
+var _dec140;
 var _initClass57;
 var _HTMLElement57;
-var _dec140;
+var _dec141;
 var _dec232;
 var _dec327;
 var _dec424;
@@ -38311,7 +38353,7 @@ var _init_simplify3;
 var _init_round3;
 var _initProto34;
 var _CurveToolbar;
-_dec108 = Component({
+_dec140 = Component({
   tag: "ease-curve-toolbar",
   styles: toolbarStyles,
   template() {
@@ -38438,7 +38480,7 @@ _dec108 = Component({
       </div>
     `;
   }
-}), _dec140 = Prop({
+}), _dec141 = Prop({
   reflect: true
 }), _dec232 = Prop({
   type: Object,
@@ -38468,7 +38510,7 @@ var CurveToolbar = class extends (_HTMLElement57 = HTMLElement) {
   static {
     ({ e: [_init_easingType5, _init_points5, _init_showGrid3, _init_snapToGrid3, _init_gridSize3, _init_simplify3, _init_round3, _initProto34], c: [_CurveToolbar, _initClass57] } = _apply_decs_2203_r57(this, [
       [
-        _dec140,
+        _dec141,
         1,
         "easingType"
       ],
@@ -38503,7 +38545,7 @@ var CurveToolbar = class extends (_HTMLElement57 = HTMLElement) {
         "round"
       ]
     ], [
-      _dec108
+      _dec140
     ], _HTMLElement57));
   }
   #___private_easingType_1;
@@ -38579,6 +38621,7 @@ var CurveToolbar = class extends (_HTMLElement57 = HTMLElement) {
     }, this.#notifyHost = (type, value, event) => {
       const target = this.#getEventTarget();
       const detail = {
+        name: target.name,
         value,
         event
       };
@@ -39144,10 +39187,10 @@ function applyDecs2203RFactory58() {
 function _apply_decs_2203_r58(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r58 = applyDecs2203RFactory58())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec109;
+var _dec143;
 var _initClass58;
 var _HTMLElement58;
-var _dec141;
+var _dec144;
 var _dec233;
 var _dec328;
 var _dec425;
@@ -39160,12 +39203,12 @@ var _dec1010;
 var _dec1111;
 var _dec1210;
 var _dec1310;
-var _dec143;
+var _dec145;
 var _dec153;
 var _dec162;
 var _dec172;
 var _dec182;
-var _init_name8;
+var _init_name9;
 var _init_easingType6;
 var _init_points6;
 var _init_showGrid4;
@@ -39176,7 +39219,7 @@ var _init_round4;
 var _init_focusedLinearIndex4;
 var _initProto35;
 var _Curve;
-_dec109 = Component({
+_dec143 = Component({
   tag: "ease-curve",
   styles: containerStyles,
   template() {
@@ -39237,7 +39280,7 @@ _dec109 = Component({
       </div>
     `;
   }
-}), _dec141 = Prop({
+}), _dec144 = Prop({
   reflect: true,
   defaultValue: "ease-custom"
 }), _dec233 = Prop({
@@ -39296,7 +39339,7 @@ _dec109 = Component({
   target: "light"
 }), _dec1310 = Listen("grid-size-change", {
   target: "light"
-}), _dec143 = Listen("simplify-change", {
+}), _dec145 = Listen("simplify-change", {
   target: "light"
 }), _dec153 = Listen("round-change", {
   target: "light"
@@ -39310,9 +39353,9 @@ _dec109 = Component({
 });
 var Curve = class extends (_HTMLElement58 = HTMLElement) {
   static {
-    ({ e: [_init_name8, _init_easingType6, _init_points6, _init_showGrid4, _init_snapToGrid4, _init_gridSize4, _init_simplify4, _init_round4, _init_focusedLinearIndex4, _initProto35], c: [_Curve, _initClass58] } = _apply_decs_2203_r58(this, [
+    ({ e: [_init_name9, _init_easingType6, _init_points6, _init_showGrid4, _init_snapToGrid4, _init_gridSize4, _init_simplify4, _init_round4, _init_focusedLinearIndex4, _initProto35], c: [_Curve, _initClass58] } = _apply_decs_2203_r58(this, [
       [
-        _dec141,
+        _dec144,
         1,
         "name"
       ],
@@ -39377,7 +39420,7 @@ var Curve = class extends (_HTMLElement58 = HTMLElement) {
         "handleGridSizeChange"
       ],
       [
-        _dec143,
+        _dec145,
         2,
         "handleSimplifyChange"
       ],
@@ -39402,7 +39445,7 @@ var Curve = class extends (_HTMLElement58 = HTMLElement) {
         "handleLinearPointFocus"
       ]
     ], [
-      _dec109
+      _dec143
     ], _HTMLElement58));
   }
   #___private_name_1;
@@ -39676,20 +39719,17 @@ var Curve = class extends (_HTMLElement58 = HTMLElement) {
   }
   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 {
     _initClass58();
   }
   constructor(...args) {
-    super(...args), this.#___private_name_1 = (_initProto35(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 = (_initProto35(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);
   }
 };
 //# sourceMappingURL=register.cjs.map