@warp-ds/elements 2.0.2-next.2 → 2.0.2-next.4

package/dist/index.js

@@ -4125,7 +4125,7 @@ ${JSON.stringify(directions)}`
     ]);
   }
   get _arrowHtml() {
-    return this.noArrow ? "" : html9`<div id="arrow" role="img" class="${this._arrowClasses}"></div>`;
+    return this.noArrow ? "" : html9`<div id="arrow" class="${this._arrowClasses}"></div>`;
   }
   get _activeVariantClasses() {
     const variantProps = {
@@ -4298,19 +4298,16 @@ ${JSON.stringify(directions)}`
         ${this.placement === "right-start" || this.placement === "right" || this.placement === "right-end" || this.placement === "bottom-start" || this.placement === "bottom" || this.placement === "bottom-end" ? html9`
               <slot name="target"></slot>
 
-              <div
-                id="attention"
-                role="${this.tooltip ? "tooltip" : "img"}"
-                aria-label="${this.defaultAriaLabel()}"
-                class="${this._wrapperClasses}">
-                ${this._arrowHtml}
+              <div id="attention" class="${this._wrapperClasses}">
+                <div role="${this.tooltip ? "tooltip" : "img"}" aria-label="${this.defaultAriaLabel()}">${this._arrowHtml}</div>
                 <slot name="message"></slot>
                 ${this.canClose ? this._closeBtnHtml : nothing}
               </div>
             ` : html9`
               <div id="attention" class="${this._wrapperClasses}">
                 <slot name="message"></slot>
-                ${this._arrowHtml} ${this.canClose ? this._closeBtnHtml : nothing}
+                <div role="${this.tooltip ? "tooltip" : "img"}" aria-label="${this.defaultAriaLabel()}">${this._arrowHtml}</div>
+                ${this.canClose ? this._closeBtnHtml : nothing}
               </div>
               <slot name="target"></slot>
             `}
@@ -5757,6 +5754,11 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
       event.preventDefault();
     }
   }
+  // Fire a custom 'change' event, used when the dropdown changes state.
+  onChange({ target }) {
+    const event = new CustomEvent("change", { detail: target.value });
+    this.dispatchEvent(event);
+  }
   render() {
     return html24`<div class="${select.wrapper}">
       ${when(
@@ -5783,7 +5785,8 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
           aria-describedby="${ifDefined5(__privateGet(this, _WarpSelect_instances, helpId_get))}"
           aria-invalid="${ifDefined5(this.invalid)}"
           aria-errormessage="${ifDefined5(this.invalid && __privateGet(this, _WarpSelect_instances, helpId_get))}"
-          @keydown=${this.handleKeyDown}>
+          @keydown=${this.handleKeyDown}
+          @change=${this.onChange}>
           ${unsafeHTML(this._options)}
         </select>
         <div class="${__privateGet(this, _WarpSelect_instances, chevronClasses_get2)}">