@easemate/web-kit 0.3.4 → 0.3.6

package/build/index.js

@@ -2557,6 +2557,21 @@ var init_Listen = __esm({
   }
 });
 
+// src/elements/shared.ts
+var dispatchControlEvent;
+var init_shared = __esm({
+  "src/elements/shared.ts"() {
+    "use strict";
+    dispatchControlEvent = (host, type, detail) => {
+      host.dispatchEvent(new CustomEvent(type, {
+        detail,
+        bubbles: true,
+        composed: true
+      }));
+    };
+  }
+});
+
 // swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/constants.ts
 var HIT_AREA_RADIUS, LINEAR_HIT_THRESHOLD, LINEAR_PATH_SAMPLES, DRAG_ACTIVATION_DISTANCE_PX, DRAG_ACTIVATION_DISTANCE_PX_SQUARED, DEFAULT_HANDLE_LENGTH, SVG_WIDTH, SVG_HEIGHT, BEZIER_CONTROL_MIN_Y, BEZIER_CONTROL_MAX_Y, EASING_PRESETS;
 var init_constants = __esm({
@@ -2808,21 +2823,6 @@ var init_svg_renderer = __esm({
   }
 });
 
-// src/elements/shared.ts
-var dispatchControlEvent;
-var init_shared = __esm({
-  "src/elements/shared.ts"() {
-    "use strict";
-    dispatchControlEvent = (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
 import { html as html3, svg as svg2 } from "lit-html";
 function applyDecs2203RFactory2() {
@@ -4200,6 +4200,7 @@ var init_canvas = __esm({
         }, this.#emitPoints = (value, event) => {
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value,
             event
           };
@@ -4210,6 +4211,7 @@ var init_canvas = __esm({
           }
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value: index,
             event
           };
@@ -5147,6 +5149,7 @@ var init_canvas_controls = __esm({
         }, this.#notifyHost = (type, value, event) => {
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value,
             event
           };
@@ -8181,6 +8184,7 @@ var init_controls = __esm({
         }, this.#notifyHost = (type, value, event) => {
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value,
             event
           };
@@ -9746,13 +9750,14 @@ function applyDecs2203RFactory10() {
 function _apply_decs_2203_r10(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r10 = applyDecs2203RFactory10())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec21, _initClass10, _HTMLElement10, _dec112, _dec28, _dec37, _init_placement, _init_offset, _init_open, _initProto8, nextAnchorName, _Popover, Popover, popover_default;
+var _dec21, _initClass10, _HTMLElement10, _dec112, _dec28, _dec37, _dec45, _init_contentElement, _init_placement, _init_offset, _init_open, _initProto8, nextAnchorName, _Popover, Popover, popover_default;
 var init_popover = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/popover/index.ts"() {
     "use strict";
     init_Component();
     init_Prop();
-    nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID()}`;
+    init_Query();
+    nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID().slice(0, 8)}`;
     _dec21 = Component({
       tag: "ease-popover",
       autoSlot: false,
@@ -9761,7 +9766,6 @@ var init_popover = __esm({
     :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;
@@ -9774,140 +9778,110 @@ var init_popover = __esm({
     }
 
     [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);
     }
   `
-    }), _dec112 = Prop({
+    }), _dec112 = Query('[part="content"]'), _dec28 = Prop({
       reflect: true,
-      defaultValue: "bottom-start",
-      onChange() {
-        this.handlePlacementChange();
-      }
-    }), _dec28 = Prop({
+      defaultValue: "bottom-start"
+    }), _dec37 = Prop({
       type: Number,
       reflect: true,
       defaultValue: 8,
       onChange() {
         this.handleOffsetChange();
       }
-    }), _dec37 = Prop({
+    }), _dec45 = Prop({
       type: Boolean,
-      reflect: true
+      reflect: true,
+      onChange() {
+        this.handleOpenChange();
+      }
     });
     Popover = class extends (_HTMLElement10 = HTMLElement) {
       static {
-        ({ e: [_init_placement, _init_offset, _init_open, _initProto8], c: [_Popover, _initClass10] } = _apply_decs_2203_r10(this, [
+        ({ e: [_init_contentElement, _init_placement, _init_offset, _init_open, _initProto8], c: [_Popover, _initClass10] } = _apply_decs_2203_r10(this, [
           [
             _dec112,
             1,
-            "placement"
+            "contentElement"
           ],
           [
             _dec28,
             1,
-            "offset"
+            "placement"
           ],
           [
             _dec37,
             1,
+            "offset"
+          ],
+          [
+            _dec45,
+            1,
             "open"
           ]
         ], [
@@ -9915,85 +9889,75 @@ var init_popover = __esm({
         ], _HTMLElement10));
       }
       #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 html11`
-      <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 {
         _initClass10();
       }
       constructor(...args) {
-        super(...args), this.#anchorName = (_initProto8(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 = (_initProto8(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);
       }
     };
     popover_default = {
@@ -10609,7 +10573,7 @@ function applyDecs2203RFactory11() {
 function _apply_decs_2203_r11(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r11 = applyDecs2203RFactory11())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec29, _initClass11, _HTMLElement11, _dec113, _dec210, _dec38, _dec45, _dec55, _dec65, _init_open2, _init_delay, _init_placement2, _init_triggerElement, _init_contentElement, _initProto9, _Tooltip, Tooltip;
+var _dec29, _initClass11, _HTMLElement11, _dec113, _dec210, _dec38, _dec46, _dec55, _dec65, _init_open2, _init_delay, _init_placement2, _init_triggerElement, _init_contentElement2, _initProto9, _Tooltip, Tooltip;
 var init_tooltip = __esm({
   "src/elements/tooltip/index.ts"() {
     "use strict";
@@ -10661,7 +10625,7 @@ var init_tooltip = __esm({
     }), _dec38 = Prop({
       reflect: true,
       defaultValue: "top-center"
-    }), _dec45 = Query('[slot="trigger"]'), _dec55 = Query("[data-tooltip-content]"), _dec65 = OutsideClick({
+    }), _dec46 = Query('[slot="trigger"]'), _dec55 = Query("[data-tooltip-content]"), _dec65 = OutsideClick({
       content: (host) => host.contentElement,
       triggers: (host) => [
         host.triggerElement
@@ -10670,7 +10634,7 @@ var init_tooltip = __esm({
     });
     Tooltip = class extends (_HTMLElement11 = HTMLElement) {
       static {
-        ({ e: [_init_open2, _init_delay, _init_placement2, _init_triggerElement, _init_contentElement, _initProto9], c: [_Tooltip, _initClass11] } = _apply_decs_2203_r11(this, [
+        ({ e: [_init_open2, _init_delay, _init_placement2, _init_triggerElement, _init_contentElement2, _initProto9], c: [_Tooltip, _initClass11] } = _apply_decs_2203_r11(this, [
           [
             _dec113,
             1,
@@ -10687,7 +10651,7 @@ var init_tooltip = __esm({
             "placement"
           ],
           [
-            _dec45,
+            _dec46,
             1,
             "triggerElement"
           ],
@@ -10853,7 +10817,7 @@ var init_tooltip = __esm({
         _initClass11();
       }
       constructor(...args) {
-        super(...args), this.#hoverTimer = (_initProto9(this), null), this.#trigger = null, this.#content = null, this.#___private_open_1 = _init_open2(this, false), this.#___private_delay_2 = _init_delay(this, 300), this.#___private_placement_3 = _init_placement2(this, "top-center"), this.#___private_triggerElement_4 = _init_triggerElement(this), this.#___private_contentElement_5 = _init_contentElement(this), this.#handleEnter = () => {
+        super(...args), this.#hoverTimer = (_initProto9(this), null), this.#trigger = null, this.#content = null, this.#___private_open_1 = _init_open2(this, false), this.#___private_delay_2 = _init_delay(this, 300), this.#___private_placement_3 = _init_placement2(this, "top-center"), this.#___private_triggerElement_4 = _init_triggerElement(this), this.#___private_contentElement_5 = _init_contentElement2(this), this.#handleEnter = () => {
           this.#startTimer(() => {
             this.open = true;
           });
@@ -11246,7 +11210,7 @@ function applyDecs2203RFactory12() {
 function _apply_decs_2203_r12(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r12 = applyDecs2203RFactory12())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec30, _initClass12, _HTMLElement12, _dec114, _dec211, _dec39, _dec46, _dec56, _dec66, _dec72, _init_easingType5, _init_points5, _init_showGrid3, _init_snapToGrid3, _init_gridSize3, _init_simplify3, _init_round3, _initProto10, _CurveToolbar, CurveToolbar;
+var _dec30, _initClass12, _HTMLElement12, _dec114, _dec211, _dec39, _dec47, _dec56, _dec66, _dec72, _init_easingType5, _init_points5, _init_showGrid3, _init_snapToGrid3, _init_gridSize3, _init_simplify3, _init_round3, _initProto10, _CurveToolbar, CurveToolbar;
 var init_toolbar = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/toolbar.ts"() {
     "use strict";
@@ -11396,7 +11360,7 @@ var init_toolbar = __esm({
       type: Boolean,
       reflect: true,
       defaultValue: true
-    }), _dec46 = Prop({
+    }), _dec47 = Prop({
       type: Boolean,
       reflect: true,
       defaultValue: false
@@ -11432,7 +11396,7 @@ var init_toolbar = __esm({
             "showGrid"
           ],
           [
-            _dec46,
+            _dec47,
             1,
             "snapToGrid"
           ],
@@ -11528,6 +11492,7 @@ var init_toolbar = __esm({
         }, this.#notifyHost = (type, value, event) => {
           const target = this.#getEventTarget();
           const detail = {
+            name: target.name,
             value,
             event
           };
@@ -12101,7 +12066,7 @@ function applyDecs2203RFactory13() {
 function _apply_decs_2203_r13(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r13 = applyDecs2203RFactory13())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec31, _initClass13, _HTMLElement13, _dec115, _dec212, _dec310, _dec47, _dec57, _dec67, _dec73, _dec82, _dec92, _dec102, _dec116, _dec122, _dec132, _dec142, _dec152, _dec162, _dec172, _dec182, _init_name2, _init_easingType6, _init_points6, _init_showGrid4, _init_snapToGrid4, _init_gridSize4, _init_simplify4, _init_round4, _init_focusedLinearIndex4, _initProto11, _Curve, Curve;
+var _dec31, _initClass13, _HTMLElement13, _dec115, _dec212, _dec310, _dec48, _dec57, _dec67, _dec73, _dec82, _dec92, _dec102, _dec116, _dec122, _dec132, _dec142, _dec152, _dec162, _dec172, _dec182, _init_name2, _init_easingType6, _init_points6, _init_showGrid4, _init_snapToGrid4, _init_gridSize4, _init_simplify4, _init_round4, _init_focusedLinearIndex4, _initProto11, _Curve, Curve;
 var init_curve = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/components/curve/index.ts"() {
     "use strict";
@@ -12112,6 +12077,7 @@ var init_curve = __esm({
     init_Component();
     init_Listen();
     init_Prop();
+    init_shared();
     init_canvas();
     init_canvas_controls();
     init_controls();
@@ -12206,7 +12172,7 @@ var init_curve = __esm({
           }
         };
       }
-    }), _dec47 = Prop({
+    }), _dec48 = Prop({
       type: Boolean,
       reflect: true,
       defaultValue: true
@@ -12269,7 +12235,7 @@ var init_curve = __esm({
             "points"
           ],
           [
-            _dec47,
+            _dec48,
             1,
             "showGrid"
           ],
@@ -12618,14 +12584,11 @@ var init_curve = __esm({
       }
       emitPointsChange(value, sourceEvent) {
         const detail = {
+          name: this.name,
           value,
           event: sourceEvent ?? new Event("points-change")
         };
-        this.dispatchEvent(new CustomEvent("points-change", {
-          detail,
-          bubbles: true,
-          composed: true
-        }));
+        dispatchControlEvent(this, "points-change", detail);
       }
       static {
         _initClass13();
@@ -13015,7 +12978,7 @@ function applyDecs2203RFactory14() {
 function _apply_decs_2203_r14(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r14 = applyDecs2203RFactory14())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec40, _initClass14, _HTMLElement14, _dec117, _dec213, _dec311, _dec48, _dec58, _dec68, _init_disabled2, _init_pill2, _init_fullWidth2, _init_type2, _init_block2, _init_variant3, _initProto12, _Button2, Button2;
+var _dec40, _initClass14, _HTMLElement14, _dec117, _dec213, _dec311, _dec49, _dec58, _dec68, _init_disabled2, _init_pill2, _init_fullWidth2, _init_type2, _init_block2, _init_variant3, _initProto12, _Button2, Button2;
 var init_button2 = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/button/index.ts"() {
     "use strict";
@@ -13197,7 +13160,7 @@ var init_button2 = __esm({
     }), _dec311 = Prop({
       type: Boolean,
       reflect: true
-    }), _dec48 = Prop({
+    }), _dec49 = Prop({
       type: String,
       reflect: true,
       defaultValue: "button"
@@ -13232,7 +13195,7 @@ var init_button2 = __esm({
             "fullWidth"
           ],
           [
-            _dec48,
+            _dec49,
             1,
             "type"
           ],
@@ -13742,7 +13705,7 @@ function applyDecs2203RFactory15() {
 function _apply_decs_2203_r15(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r15 = applyDecs2203RFactory15())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec41, _initClass15, _HTMLElement15, _dec118, _dec214, _dec312, _dec49, _dec59, _dec69, _init_checked, _init_name3, _init_value, _init_disabled3, _init_control, _initProto13, _Checkbox, Checkbox;
+var _dec41, _initClass15, _HTMLElement15, _dec118, _dec214, _dec312, _dec410, _dec59, _dec69, _init_checked, _init_name3, _init_value, _init_disabled3, _init_control, _initProto13, _Checkbox, Checkbox;
 var init_checkbox = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/checkbox/index.ts"() {
     "use strict";
@@ -14003,7 +13966,7 @@ var init_checkbox = __esm({
       reflect: true
     }), _dec312 = Prop({
       reflect: true
-    }), _dec49 = Prop({
+    }), _dec410 = Prop({
       type: Boolean,
       reflect: true
     }), _dec59 = Query("button"), _dec69 = Listen("click", {
@@ -14028,7 +13991,7 @@ var init_checkbox = __esm({
             "value"
           ],
           [
-            _dec49,
+            _dec410,
             1,
             "disabled"
           ],
@@ -14122,10 +14085,15 @@ var init_checkbox = __esm({
           return;
         }
         this.checked = !this.checked;
-        dispatchControlEvent2(this, "checkbox", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.checked,
           event
-        });
+        };
+        dispatchControlEvent2(this, "checkbox", detail);
+        dispatchControlEvent2(this, "change", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       static {
         _initClass15();
@@ -14984,7 +14952,7 @@ function applyDecs2203RFactory17() {
 function _apply_decs_2203_r17(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r17 = applyDecs2203RFactory17())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec51, _initClass17, _HTMLElement17, _dec120, _dec215, _dec313, _dec410, _dec510, _dec610, _dec74, _dec83, _dec93, _dec103, _dec1110, _dec123, _dec133, _dec143, _dec153, _dec163, _init_open3, _init_disabled4, _init_pill3, _init_headless, _init_searchable, _init_block3, _init_maxHeight, _init_name4, _init_value2, _init_placeholder, _init_placement3, _init_trigger, _init_searchInput, _init_panelContent, _init_contentSlot, _initProto15, nextOptionId, nextPanelId, _Dropdown, Dropdown;
+var _dec51, _initClass17, _HTMLElement17, _dec120, _dec215, _dec313, _dec411, _dec510, _dec610, _dec74, _dec83, _dec93, _dec103, _dec1110, _dec123, _dec133, _dec143, _dec153, _dec163, _init_open3, _init_disabled4, _init_pill3, _init_headless, _init_searchable, _init_block3, _init_maxHeight, _init_name4, _init_value2, _init_placeholder, _init_placement3, _init_trigger, _init_searchInput, _init_panelContent, _init_contentSlot, _initProto15, nextOptionId, nextPanelId, _Dropdown, Dropdown;
 var init_dropdown = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/dropdown/index.ts"() {
     "use strict";
@@ -15262,7 +15230,7 @@ var init_dropdown = __esm({
     }), _dec313 = Prop({
       type: Boolean,
       reflect: true
-    }), _dec410 = Prop({
+    }), _dec411 = Prop({
       type: Boolean,
       reflect: true
     }), _dec510 = Prop({
@@ -15321,7 +15289,7 @@ var init_dropdown = __esm({
             "pill"
           ],
           [
-            _dec410,
+            _dec411,
             1,
             "headless"
           ],
@@ -15683,6 +15651,7 @@ var init_dropdown = __esm({
           }
         }
         dispatchControlEvent2(this, "toggle", {
+          name: this.name ?? void 0,
           value: next,
           event: origin
         });
@@ -15946,6 +15915,7 @@ var init_dropdown = __esm({
       }
       #dispatchValueChange(value, label, event) {
         dispatchControlEvent2(this, "change", {
+          name: this.name ?? void 0,
           value,
           event
         });
@@ -16438,7 +16408,7 @@ function applyDecs2203RFactory18() {
 function _apply_decs_2203_r18(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r18 = applyDecs2203RFactory18())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec60, _initClass18, _HTMLElement18, _dec121, _dec216, _dec314, _dec411, _dec511, _dec611, _dec75, _dec84, _dec94, _dec104, _dec1111, _init_value3, _init_placeholder2, _init_type3, _init_name5, _init_disabled5, _init_headless2, _init_control2, _initProto16, _Input, Input;
+var _dec60, _initClass18, _HTMLElement18, _dec121, _dec216, _dec314, _dec412, _dec511, _dec611, _dec75, _dec84, _dec94, _dec104, _dec1111, _init_value3, _init_placeholder2, _init_type3, _init_name5, _init_disabled5, _init_headless2, _init_control2, _initProto16, _Input, Input;
 var init_input = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/input/index.ts"() {
     "use strict";
@@ -16641,7 +16611,7 @@ var init_input = __esm({
     }), _dec314 = Prop({
       reflect: true,
       defaultValue: "text"
-    }), _dec411 = Prop({
+    }), _dec412 = Prop({
       reflect: true
     }), _dec511 = Prop({
       type: Boolean,
@@ -16679,7 +16649,7 @@ var init_input = __esm({
             "type"
           ],
           [
-            _dec411,
+            _dec412,
             1,
             "name"
           ],
@@ -16821,20 +16791,28 @@ var init_input = __esm({
           return;
         }
         this.value = target.value;
-        dispatchControlEvent2(this, "input", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value ?? "",
           event
-        });
+        };
+        dispatchControlEvent2(this, "input", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleChange(event, target) {
         if (!target) {
           return;
         }
         this.value = target.value;
-        dispatchControlEvent2(this, "change", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value ?? "",
           event
-        });
+        };
+        dispatchControlEvent2(this, "change", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       static {
         _initClass18();
@@ -18390,7 +18368,7 @@ function applyDecs2203RFactory21() {
 function _apply_decs_2203_r21(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r21 = applyDecs2203RFactory21())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec71, _initClass21, _HTMLElement21, _dec124, _dec217, _dec315, _dec412, _init_saturationArea, _init_hueArea, _init_hexInput, _init_value4, _initProto17, _ColorPicker, ColorPicker, picker_default;
+var _dec71, _initClass21, _HTMLElement21, _dec124, _dec217, _dec315, _dec413, _init_saturationArea, _init_hueArea, _init_hexInput, _init_value4, _initProto17, _ColorPicker, ColorPicker, picker_default;
 var init_picker2 = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/color/picker.ts"() {
     "use strict";
@@ -18718,7 +18696,7 @@ var init_picker2 = __esm({
       </div>
     `;
       }
-    }), _dec124 = Query('[part="saturation"]'), _dec217 = Query('[part="hue"]'), _dec315 = Query('[part="hex-input"]'), _dec412 = Prop({
+    }), _dec124 = Query('[part="saturation"]'), _dec217 = Query('[part="hue"]'), _dec315 = Query('[part="hex-input"]'), _dec413 = Prop({
       reflect: true,
       defaultValue: "#FF0000",
       onChange(value) {
@@ -18746,7 +18724,7 @@ var init_picker2 = __esm({
             "hexInput"
           ],
           [
-            _dec412,
+            _dec413,
             1,
             "value"
           ]
@@ -19366,7 +19344,7 @@ function applyDecs2203RFactory22() {
 function _apply_decs_2203_r22(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r22 = applyDecs2203RFactory22())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec76, _initClass22, _HTMLElement22, _dec125, _dec218, _dec316, _dec413, _init_dropdown, _init_value5, _init_disabled6, _init_placement4, _initProto18, _ColorInput, ColorInput;
+var _dec76, _initClass22, _HTMLElement22, _dec125, _dec218, _dec316, _dec414, _dec512, _init_dropdown, _init_value5, _init_disabled6, _init_name6, _init_placement4, _initProto18, _ColorInput, ColorInput;
 var init_color = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/color/index.ts"() {
     "use strict";
@@ -19449,13 +19427,16 @@ var init_color = __esm({
     }), _dec316 = Prop({
       type: Boolean,
       reflect: true
-    }), _dec413 = Prop({
+    }), _dec414 = Prop({
+      reflect: true,
+      defaultValue: null
+    }), _dec512 = Prop({
       reflect: true,
       defaultValue: "bottom-start"
     });
     ColorInput = class extends (_HTMLElement22 = HTMLElement) {
       static {
-        ({ e: [_init_dropdown, _init_value5, _init_disabled6, _init_placement4, _initProto18], c: [_ColorInput, _initClass22] } = _apply_decs_2203_r22(this, [
+        ({ e: [_init_dropdown, _init_value5, _init_disabled6, _init_name6, _init_placement4, _initProto18], c: [_ColorInput, _initClass22] } = _apply_decs_2203_r22(this, [
           [
             _dec125,
             1,
@@ -19472,7 +19453,12 @@ var init_color = __esm({
             "disabled"
           ],
           [
-            _dec413,
+            _dec414,
+            1,
+            "name"
+          ],
+          [
+            _dec512,
             1,
             "placement"
           ]
@@ -19502,12 +19488,19 @@ var init_color = __esm({
       set disabled(_v) {
         this.#___private_disabled_3 = _v;
       }
-      #___private_placement_4;
+      #___private_name_4;
+      get name() {
+        return this.#___private_name_4;
+      }
+      set name(_v) {
+        this.#___private_name_4 = _v;
+      }
+      #___private_placement_5;
       get placement() {
-        return this.#___private_placement_4;
+        return this.#___private_placement_5;
       }
       set placement(_v) {
-        this.#___private_placement_4 = _v;
+        this.#___private_placement_5 = _v;
       }
       connectedCallback() {
         this.#hasCustomTrigger = this.querySelector('[slot="trigger"]') !== null;
@@ -19552,21 +19545,24 @@ var init_color = __esm({
         _initClass22();
       }
       constructor(...args) {
-        super(...args), this.#hasCustomTrigger = (_initProto18(this), false), this.#___private_dropdown_1 = _init_dropdown(this), this.#___private_value_2 = _init_value5(this), this.#___private_disabled_3 = _init_disabled6(this, false), this.#___private_placement_4 = _init_placement4(this, "bottom-start"), this.#handleInputChange = (event) => {
+        super(...args), this.#hasCustomTrigger = (_initProto18(this), false), this.#___private_dropdown_1 = _init_dropdown(this), this.#___private_value_2 = _init_value5(this), this.#___private_disabled_3 = _init_disabled6(this, false), this.#___private_name_4 = _init_name6(this, null), this.#___private_placement_5 = _init_placement4(this, "bottom-start"), this.#handleInputChange = (event) => {
           this.value = event.target.value;
           dispatchControlEvent2(this, "input", {
+            name: this.name ?? void 0,
             value: this.value,
             event
           });
         }, this.#handlePickerInput = (event) => {
           this.value = event.detail.value;
           dispatchControlEvent2(this, "input", {
+            name: this.name ?? void 0,
             value: this.value,
             event
           });
         }, this.#handlePickerChange = (event) => {
           this.value = event.detail.value;
           dispatchControlEvent2(this, "change", {
+            name: this.name ?? void 0,
             value: this.value,
             event
           });
@@ -19579,6 +19575,7 @@ var init_color = __esm({
         }, this.#handlePickerApply = (event) => {
           this.value = event.detail.value;
           dispatchControlEvent2(this, "change", {
+            name: this.name ?? void 0,
             value: this.value,
             event
           });
@@ -29527,7 +29524,7 @@ function applyDecs2203RFactory47() {
 function _apply_decs_2203_r47(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r47 = applyDecs2203RFactory47())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec131, _initClass47, _HTMLElement47, _dec134, _dec221, _dec318, _dec414, _init_loading, _init_intro, _init_size, _init_ariaLabel, _initProto24, CENTER, DOTS_DATA, INNER_DOT_IDS, OUTER_DOT_IDS, forceReflow, getAngle, sortByAngle, LOOP_DURATION, ROTATION_DURATION, _LogoLoader, LogoLoader;
+var _dec131, _initClass47, _HTMLElement47, _dec134, _dec221, _dec318, _dec415, _init_loading, _init_intro, _init_size, _init_ariaLabel, _initProto24, CENTER, DOTS_DATA, INNER_DOT_IDS, OUTER_DOT_IDS, forceReflow, getAngle, sortByAngle, LOOP_DURATION, ROTATION_DURATION, _LogoLoader, LogoLoader;
 var init_logo = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/logo/index.ts"() {
     "use strict";
@@ -29924,7 +29921,7 @@ var init_logo = __esm({
       type: Number,
       attribute: "size",
       defaultValue: 36
-    }), _dec414 = Prop({
+    }), _dec415 = Prop({
       type: "string",
       attribute: "aria-label",
       defaultValue: null
@@ -29948,7 +29945,7 @@ var init_logo = __esm({
             "size"
           ],
           [
-            _dec414,
+            _dec415,
             1,
             "ariaLabel"
           ]
@@ -32825,7 +32822,7 @@ function applyDecs2203RFactory50() {
 function _apply_decs_2203_r50(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r50 = applyDecs2203RFactory50())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec139, _initClass50, _HTMLElement50, _dec140, _dec224, _dec320, _dec415, _dec512, _dec612, _dec710, _dec810, _dec910, _init_value6, _init_min, _init_max, _init_step, _init_name6, _init_disabled7, _init_control3, _initProto27, _NumberInput, NumberInput;
+var _dec139, _initClass50, _HTMLElement50, _dec140, _dec224, _dec320, _dec416, _dec513, _dec612, _dec710, _dec810, _dec910, _init_value6, _init_min, _init_max, _init_step, _init_name7, _init_disabled7, _init_control3, _initProto27, _NumberInput, NumberInput;
 var init_number = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/number/index.ts"() {
     "use strict";
@@ -32928,10 +32925,10 @@ var init_number = __esm({
     }), _dec320 = Prop({
       type: Number,
       reflect: true
-    }), _dec415 = Prop({
+    }), _dec416 = Prop({
       type: Number,
       reflect: true
-    }), _dec512 = Prop({
+    }), _dec513 = Prop({
       reflect: true
     }), _dec612 = Prop({
       type: Boolean,
@@ -32943,7 +32940,7 @@ var init_number = __esm({
     });
     NumberInput = class extends (_HTMLElement50 = HTMLElement) {
       static {
-        ({ e: [_init_value6, _init_min, _init_max, _init_step, _init_name6, _init_disabled7, _init_control3, _initProto27], c: [_NumberInput, _initClass50] } = _apply_decs_2203_r50(this, [
+        ({ e: [_init_value6, _init_min, _init_max, _init_step, _init_name7, _init_disabled7, _init_control3, _initProto27], c: [_NumberInput, _initClass50] } = _apply_decs_2203_r50(this, [
           [
             _dec140,
             1,
@@ -32960,12 +32957,12 @@ var init_number = __esm({
             "max"
           ],
           [
-            _dec415,
+            _dec416,
             1,
             "step"
           ],
           [
-            _dec512,
+            _dec513,
             1,
             "name"
           ],
@@ -33060,20 +33057,28 @@ var init_number = __esm({
           return;
         }
         this.value = coerceNumber(target.value);
-        dispatchControlEvent2(this, "input", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value,
           event
-        });
+        };
+        dispatchControlEvent2(this, "input", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleChange(event, target) {
         if (!target) {
           return;
         }
         this.value = coerceNumber(target.value);
-        dispatchControlEvent2(this, "change", {
+        const name = this.name ?? this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value,
           event
-        });
+        };
+        dispatchControlEvent2(this, "change", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       addActiveLayer(button) {
         const layer = document.createElement("div");
@@ -33111,7 +33116,7 @@ var init_number = __esm({
         _initClass50();
       }
       constructor(...args) {
-        super(...args), this.#___private_value_1 = (_initProto27(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_name6(this), this.#___private_disabled_6 = _init_disabled7(this), this.#___private_control_7 = _init_control3(this);
+        super(...args), this.#___private_value_1 = (_initProto27(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_name7(this), this.#___private_disabled_6 = _init_disabled7(this), this.#___private_control_7 = _init_control3(this);
       }
     };
   }
@@ -33495,7 +33500,7 @@ function applyDecs2203RFactory51() {
 function _apply_decs_2203_r51(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r51 = applyDecs2203RFactory51())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec141, _initClass51, _HTMLElement51, _dec144, _dec225, _dec321, _dec416, _dec513, _init_value7, _init_disabled8, _init_control4, _init_name7, _initProto28, _Origin, Origin;
+var _dec141, _initClass51, _HTMLElement51, _dec144, _dec225, _dec321, _dec417, _dec514, _init_value7, _init_disabled8, _init_control4, _init_name8, _initProto28, _Origin, Origin;
 var init_origin = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/origin/index.ts"() {
     "use strict";
@@ -33643,15 +33648,15 @@ var init_origin = __esm({
     }), _dec225 = Prop({
       type: Boolean,
       reflect: true
-    }), _dec321 = Query("ease-dropdown"), _dec416 = Prop({
+    }), _dec321 = Query("ease-dropdown"), _dec417 = Prop({
       reflect: true,
       defaultValue: ""
-    }), _dec513 = Listen("change", {
+    }), _dec514 = Listen("change", {
       selector: "ease-dropdown"
     });
     Origin = class extends (_HTMLElement51 = HTMLElement) {
       static {
-        ({ e: [_init_value7, _init_disabled8, _init_control4, _init_name7, _initProto28], c: [_Origin, _initClass51] } = _apply_decs_2203_r51(this, [
+        ({ e: [_init_value7, _init_disabled8, _init_control4, _init_name8, _initProto28], c: [_Origin, _initClass51] } = _apply_decs_2203_r51(this, [
           [
             _dec144,
             1,
@@ -33668,12 +33673,12 @@ var init_origin = __esm({
             "control"
           ],
           [
-            _dec416,
+            _dec417,
             1,
             "name"
           ],
           [
-            _dec513,
+            _dec514,
             2,
             "handleChange"
           ]
@@ -33726,7 +33731,7 @@ var init_origin = __esm({
         _initClass51();
       }
       constructor(...args) {
-        super(...args), this.#___private_value_1 = (_initProto28(this), _init_value7(this, "center-center")), this.#___private_disabled_2 = _init_disabled8(this), this.#___private_control_3 = _init_control4(this), this.#___private_name_4 = _init_name7(this, ""), this.handleValueChange = (event) => {
+        super(...args), this.#___private_value_1 = (_initProto28(this), _init_value7(this, "center-center")), this.#___private_disabled_2 = _init_disabled8(this), this.#___private_control_3 = _init_control4(this), this.#___private_name_4 = _init_name8(this, ""), this.handleValueChange = (event) => {
           this.value = String(this.control?.value ?? "center-center");
           dispatchControlEvent2(this, "change", {
             value: this.value,
@@ -34116,7 +34121,7 @@ function applyDecs2203RFactory52() {
 function _apply_decs_2203_r52(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r52 = applyDecs2203RFactory52())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec145, _initClass52, _HTMLElement52, _dec146, _dec226, _dec322, _dec417, _dec514, _dec613, _dec711, _init_activeTab, _init_headline2, _init_maxHeight3, _init_contentElement2, _init_bodyElement, _initProto29, _Panel, Panel;
+var _dec145, _initClass52, _HTMLElement52, _dec146, _dec226, _dec322, _dec418, _dec515, _dec613, _dec711, _init_activeTab, _init_headline2, _init_maxHeight3, _init_contentElement3, _init_bodyElement, _initProto29, _Panel, Panel;
 var init_panel = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/panel/index.ts"() {
     "use strict";
@@ -34190,7 +34195,6 @@ var init_panel = __esm({
       align-items: center;
       gap: 2px;
       flex-grow: 1;
-      margin: 0 0 0 4px;
     }
 
     [part="tabs"]:empty {
@@ -34199,17 +34203,18 @@ var init_panel = __esm({
 
     [part="tab"] {
       appearance: none;
+      border-radius: var(--ease-panel-tab-radius, var(--radii-md));
+      background-color: var(--ease-panel-tab-background, transparent);
+      box-sizing: border-box;
+      padding: var(--ease-panel-tab-padding, 4px 8px);
       font-size: var(--ease-panel-tab-font-size);
       font-weight: var(--ease-panel-tab-font-weight);
       line-height: 24px;
       font-family: var(--ease-font-family);
       color: var(--ease-panel-tab-color);
-      background-color: transparent;
       border: none;
-      padding: 4px 8px;
       margin: 0;
       cursor: pointer;
-      border-radius: var(--ease-panel-tab-radius);
       transition: color 200ms, background-color 200ms;
       transition-timing-function: cubic-bezier(.25, 0, .5, 1);
     }
@@ -34375,14 +34380,14 @@ var init_panel = __esm({
       reflect: true,
       attribute: "max-height",
       defaultValue: null
-    }), _dec417 = Query('[part="content"]'), _dec514 = Query('[part="body"]'), _dec613 = Listen("slotchange", {
+    }), _dec418 = Query('[part="content"]'), _dec515 = Query('[part="body"]'), _dec613 = Listen("slotchange", {
       selector: 'slot[name="footer"]'
     }), _dec711 = Listen("slotchange", {
       selector: "slot:not([name])"
     });
     Panel = class extends (_HTMLElement52 = HTMLElement) {
       static {
-        ({ e: [_init_activeTab, _init_headline2, _init_maxHeight3, _init_contentElement2, _init_bodyElement, _initProto29], c: [_Panel, _initClass52] } = _apply_decs_2203_r52(this, [
+        ({ e: [_init_activeTab, _init_headline2, _init_maxHeight3, _init_contentElement3, _init_bodyElement, _initProto29], c: [_Panel, _initClass52] } = _apply_decs_2203_r52(this, [
           [
             _dec146,
             1,
@@ -34399,12 +34404,12 @@ var init_panel = __esm({
             "maxHeight"
           ],
           [
-            _dec417,
+            _dec418,
             1,
             "contentElement"
           ],
           [
-            _dec514,
+            _dec515,
             1,
             "bodyElement"
           ],
@@ -34719,7 +34724,7 @@ var init_panel = __esm({
         _initClass52();
       }
       constructor(...args) {
-        super(...args), this.#tabs = (_initProto29(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);
+        super(...args), this.#tabs = (_initProto29(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_contentElement3(this), this.#___private_bodyElement_5 = _init_bodyElement(this);
       }
     };
   }
@@ -35846,7 +35851,7 @@ function applyDecs2203RFactory54() {
 function _apply_decs_2203_r54(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r54 = applyDecs2203RFactory54())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec149, _initClass54, _HTMLElement54, _dec150, _dec228, _dec324, _dec418, _dec515, _dec614, _init_checked2, _init_name8, _init_value9, _init_disabled9, _init_control5, _initProto31, _RadioInput, RadioInput;
+var _dec149, _initClass54, _HTMLElement54, _dec150, _dec228, _dec324, _dec419, _dec516, _dec614, _init_checked2, _init_name9, _init_value9, _init_disabled9, _init_control5, _initProto31, _RadioInput, RadioInput;
 var init_input2 = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/radio/input.ts"() {
     "use strict";
@@ -36114,15 +36119,15 @@ var init_input2 = __esm({
       reflect: true
     }), _dec324 = Prop({
       reflect: true
-    }), _dec418 = Prop({
+    }), _dec419 = Prop({
       type: Boolean,
       reflect: true
-    }), _dec515 = Query("button"), _dec614 = Listen("click", {
+    }), _dec516 = Query("button"), _dec614 = Listen("click", {
       selector: "button"
     });
     RadioInput = class extends (_HTMLElement54 = HTMLElement) {
       static {
-        ({ e: [_init_checked2, _init_name8, _init_value9, _init_disabled9, _init_control5, _initProto31], c: [_RadioInput, _initClass54] } = _apply_decs_2203_r54(this, [
+        ({ e: [_init_checked2, _init_name9, _init_value9, _init_disabled9, _init_control5, _initProto31], c: [_RadioInput, _initClass54] } = _apply_decs_2203_r54(this, [
           [
             _dec150,
             1,
@@ -36139,12 +36144,12 @@ var init_input2 = __esm({
             "value"
           ],
           [
-            _dec418,
+            _dec419,
             1,
             "disabled"
           ],
           [
-            _dec515,
+            _dec516,
             1,
             "control"
           ],
@@ -36237,16 +36242,22 @@ var init_input2 = __esm({
           return;
         }
         this.checked = true;
-        dispatchControlEvent2(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
-        });
+        };
+        dispatchControlEvent2(this, "radio", detail);
+        dispatchControlEvent2(this, "change", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       static {
         _initClass54();
       }
       constructor(...args) {
-        super(...args), this.#___private_checked_1 = (_initProto31(this), _init_checked2(this)), this.#___private_name_2 = _init_name8(this), this.#___private_value_3 = _init_value9(this), this.#___private_disabled_4 = _init_disabled9(this), this.#___private_control_5 = _init_control5(this), this._firstRender = true, this.filterId = `goo-${crypto.randomUUID()}`;
+        super(...args), this.#___private_checked_1 = (_initProto31(this), _init_checked2(this)), this.#___private_name_2 = _init_name9(this), this.#___private_value_3 = _init_value9(this), this.#___private_disabled_4 = _init_disabled9(this), this.#___private_control_5 = _init_control5(this), this._firstRender = true, this.filterId = `goo-${crypto.randomUUID()}`;
       }
     };
   }
@@ -36630,7 +36641,7 @@ function applyDecs2203RFactory55() {
 function _apply_decs_2203_r55(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r55 = applyDecs2203RFactory55())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec151, _initClass55, _HTMLElement55, _dec154, _dec229, _dec325, _dec419, _dec516, _dec615, _dec712, _dec811, _dec911, _dec1010, _dec1112, _init_value10, _init_min2, _init_max2, _init_step2, _init_disabled10, _init_control6, _init_valueControl, _initProto32, _Slider, Slider;
+var _dec151, _initClass55, _HTMLElement55, _dec154, _dec229, _dec325, _dec420, _dec517, _dec615, _dec712, _dec811, _dec911, _dec1010, _dec1112, _init_value10, _init_min2, _init_max2, _init_step2, _init_disabled10, _init_control6, _init_valueControl, _initProto32, _Slider, Slider;
 var init_slider = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/slider/index.ts"() {
     "use strict";
@@ -36751,11 +36762,15 @@ var init_slider = __esm({
           .step=${this.step ?? 1}
           .value=${String(this.value ?? 0)}
           ?disabled=${this.disabled}
+          @input=${this.handleRangeInput}
+          @change=${this.handleRangeChange}
           ?aria-disabled=${this.disabled}
         />
         
         <ease-input
           part="value"
+          @input=${this.handleValueInput}
+          @change=${this.handleValueChange}
           type="number"
           placeholder="-"
           .disabled=${Boolean(this.disabled)}
@@ -36773,10 +36788,10 @@ var init_slider = __esm({
     }), _dec325 = Prop({
       type: Number,
       reflect: true
-    }), _dec419 = Prop({
+    }), _dec420 = Prop({
       type: Number,
       reflect: true
-    }), _dec516 = Prop({
+    }), _dec517 = Prop({
       type: Boolean,
       reflect: true
     }), _dec615 = Query("input"), _dec712 = Query("ease-input"), _dec811 = Listen("input", {
@@ -36809,12 +36824,12 @@ var init_slider = __esm({
             "max"
           ],
           [
-            _dec419,
+            _dec420,
             1,
             "step"
           ],
           [
-            _dec516,
+            _dec517,
             1,
             "disabled"
           ],
@@ -36927,10 +36942,14 @@ var init_slider = __esm({
         if (this.valueControl) {
           this.valueControl.value = numericValue === null ? "" : String(numericValue);
         }
-        dispatchControlEvent2(this, "input", {
+        const name = this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value,
           event
-        });
+        };
+        dispatchControlEvent2(this, "input", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleRangeChange(event, target) {
         if (target) {
@@ -36941,10 +36960,14 @@ var init_slider = __esm({
             this.valueControl.value = numericValue === null ? "" : String(numericValue);
           }
         }
-        dispatchControlEvent2(this, "change", {
+        const name = this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.value,
           event
-        });
+        };
+        dispatchControlEvent2(this, "change", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleValueInput(event) {
         const rawValue = event.detail?.value ?? "";
@@ -36954,10 +36977,15 @@ var init_slider = __esm({
         if (this.control) {
           this.control.value = String(numericValue ?? 0);
         }
-        dispatchControlEvent2(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
+        };
+        dispatchControlEvent2(this, "input", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       handleValueChange(event) {
         const rawValue = event.detail?.value ?? "";
@@ -36967,10 +36995,15 @@ var init_slider = __esm({
         if (this.control) {
           this.control.value = String(numericValue ?? 0);
         }
-        dispatchControlEvent2(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
+        };
+        dispatchControlEvent2(this, "change", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       updateProgress() {
         if (!this.control) {
@@ -37370,7 +37403,7 @@ function applyDecs2203RFactory56() {
 function _apply_decs_2203_r56(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r56 = applyDecs2203RFactory56())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec155, _initClass56, _HTMLElement56, _dec156, _dec230, _dec326, _dec420, _dec517, _init_value11, _init_defaultSlot, _initProto33, readControlValue2, getControlName, _State, State;
+var _dec155, _initClass56, _HTMLElement56, _dec156, _dec230, _dec326, _dec421, _dec518, _init_value11, _init_defaultSlot, _initProto33, readControlValue2, getControlName, _State, State;
 var init_state = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/state/index.ts"() {
     "use strict";
@@ -37419,9 +37452,9 @@ var init_state = __esm({
       reflect: true
     }), _dec230 = Query("slot"), _dec326 = Listen("input", {
       target: (host) => host
-    }), _dec420 = Listen("change", {
+    }), _dec421 = Listen("change", {
       target: (host) => host
-    }), _dec517 = Listen(CONTROL_CHANGE_EVENT, {
+    }), _dec518 = Listen(CONTROL_CHANGE_EVENT, {
       target: (host) => host
     });
     State = class extends (_HTMLElement56 = HTMLElement) {
@@ -37443,12 +37476,12 @@ var init_state = __esm({
             "handleInternalInput"
           ],
           [
-            _dec420,
+            _dec421,
             2,
             "handleInternalChange"
           ],
           [
-            _dec517,
+            _dec518,
             2,
             "handleControlChange"
           ]
@@ -38042,7 +38075,7 @@ function applyDecs2203RFactory57() {
 function _apply_decs_2203_r57(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r57 = applyDecs2203RFactory57())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec157, _initClass57, _HTMLElement57, _dec158, _dec231, _dec327, _dec421, _init_checked3, _init_disabled11, _init_control7, _initProto34, _Toggle, Toggle;
+var _dec157, _initClass57, _HTMLElement57, _dec158, _dec231, _dec327, _dec422, _init_checked3, _init_disabled11, _init_control7, _initProto34, _Toggle, Toggle;
 var init_toggle = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/toggle/index.ts"() {
     "use strict";
@@ -38169,7 +38202,7 @@ var init_toggle = __esm({
     }), _dec231 = Prop({
       type: Boolean,
       reflect: true
-    }), _dec327 = Query("button"), _dec421 = Listen("click", {
+    }), _dec327 = Query("button"), _dec422 = Listen("click", {
       selector: "button"
     });
     Toggle = class extends (_HTMLElement57 = HTMLElement) {
@@ -38191,7 +38224,7 @@ var init_toggle = __esm({
             "control"
           ],
           [
-            _dec421,
+            _dec422,
             2,
             "handleClick"
           ]
@@ -38236,10 +38269,15 @@ var init_toggle = __esm({
           return;
         }
         this.checked = !this.checked;
-        dispatchControlEvent2(this, "toggle", {
+        const name = this.getAttribute("name") ?? void 0;
+        const detail = {
+          name,
           value: this.checked,
           event
-        });
+        };
+        dispatchControlEvent2(this, "toggle", detail);
+        dispatchControlEvent2(this, "change", detail);
+        dispatchControlEvent2(this, CONTROL_CHANGE_EVENT, detail);
       }
       static {
         _initClass57();
@@ -38629,7 +38667,7 @@ function applyDecs2203RFactory58() {
 function _apply_decs_2203_r58(targetClass, memberDecs, classDecs, parentClass) {
   return (_apply_decs_2203_r58 = applyDecs2203RFactory58())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec159, _initClass58, _HTMLElement58, _dec160, _dec232, _dec328, _dec422, _dec518, _dec616, _init_open5, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement3, _initProto35, _Tooltip2, Tooltip2;
+var _dec159, _initClass58, _HTMLElement58, _dec160, _dec232, _dec328, _dec423, _dec519, _dec616, _init_open5, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement4, _initProto35, _Tooltip2, Tooltip2;
 var init_tooltip2 = __esm({
   "swc:/Users/aaroniker/Documents/GitHub/ease/web-kit/packages/core/src/elements/tooltip/index.ts"() {
     "use strict";
@@ -38681,7 +38719,7 @@ var init_tooltip2 = __esm({
     }), _dec328 = Prop({
       reflect: true,
       defaultValue: "top-center"
-    }), _dec422 = Query('[slot="trigger"]'), _dec518 = Query("[data-tooltip-content]"), _dec616 = OutsideClick({
+    }), _dec423 = Query('[slot="trigger"]'), _dec519 = Query("[data-tooltip-content]"), _dec616 = OutsideClick({
       content: (host) => host.contentElement,
       triggers: (host) => [
         host.triggerElement
@@ -38690,7 +38728,7 @@ var init_tooltip2 = __esm({
     });
     Tooltip2 = class extends (_HTMLElement58 = HTMLElement) {
       static {
-        ({ e: [_init_open5, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement3, _initProto35], c: [_Tooltip2, _initClass58] } = _apply_decs_2203_r58(this, [
+        ({ e: [_init_open5, _init_delay2, _init_placement5, _init_triggerElement2, _init_contentElement4, _initProto35], c: [_Tooltip2, _initClass58] } = _apply_decs_2203_r58(this, [
           [
             _dec160,
             1,
@@ -38707,12 +38745,12 @@ var init_tooltip2 = __esm({
             "placement"
           ],
           [
-            _dec422,
+            _dec423,
             1,
             "triggerElement"
           ],
           [
-            _dec518,
+            _dec519,
             1,
             "contentElement"
           ],
@@ -38873,7 +38911,7 @@ var init_tooltip2 = __esm({
         _initClass58();
       }
       constructor(...args) {
-        super(...args), this.#hoverTimer = (_initProto35(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 = (_initProto35(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;
           });
@@ -40687,7 +40725,7 @@ _dec78 = 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"] {