@m3e/dialog 1.1.1 → 1.1.3

package/dist/custom-elements.json

@@ -22,33 +22,13 @@
               "attribute": "return-value"
             },
             {
-              "kind": "field",
-              "name": "#clickHandler",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "formAssociated",
-              "static": true,
-              "readonly": true,
-              "default": "formAssociated",
-              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
-              "inheritedFrom": {
-                "name": "AttachInternals",
-                "module": "../core/src/shared/mixins/AttachInternals.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "[_internals]",
-              "type": {
-                "text": "ElementInternals | undefined"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "AttachInternals",
-                "module": "../core/src/shared/mixins/AttachInternals.ts"
+              "kind": "method",
+              "name": "_onClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             }
           ],
@@ -63,15 +43,9 @@
               "fieldName": "returnValue"
             }
           ],
-          "mixins": [
-            {
-              "name": "AttachInternals",
-              "package": "@m3e/core"
-            }
-          ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "ActionElementBase",
+            "package": "@m3e/core"
           },
           "tagName": "m3e-dialog-action",
           "customElement": true
@@ -581,9 +555,13 @@
           "name": "M3eDialogTriggerElement",
           "members": [
             {
-              "kind": "field",
-              "name": "#clickHandler",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_onClick",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "field",
@@ -671,45 +649,17 @@
                 "name": "HtmlFor",
                 "module": "../core/src/shared/mixins/HtmlFor.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "formAssociated",
-              "static": true,
-              "readonly": true,
-              "default": "formAssociated",
-              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
-              "inheritedFrom": {
-                "name": "AttachInternals",
-                "module": "../core/src/shared/mixins/AttachInternals.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "[_internals]",
-              "type": {
-                "text": "ElementInternals | undefined"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "AttachInternals",
-                "module": "../core/src/shared/mixins/AttachInternals.ts"
-              }
             }
           ],
           "mixins": [
             {
               "name": "HtmlFor",
               "package": "@m3e/core"
-            },
-            {
-              "name": "AttachInternals",
-              "package": "@m3e/core"
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "ActionElementBase",
+            "package": "@m3e/core"
           },
           "tagName": "m3e-dialog-trigger",
           "customElement": true,
@@ -2410,12 +2360,51 @@
           "description": "Mixin to augment an element with behavior emits a click event on keyboard events.",
           "name": "KeyboardClick",
           "members": [
+            {
+              "kind": "field",
+              "name": "#keyPressed",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#keyDownHandler",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#keyUpHandler",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#focusOutHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#handleKeyUp",

package/dist/index.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { LitElement, html, css, nothing, unsafeCSS } from 'lit';
-import { AttachInternals, EventAttribute, prefersReducedMotion, DesignToken, HtmlFor } from '@m3e/core';
+import { ActionElementBase, EventAttribute, focusWhenReady, DesignToken, HtmlFor } from '@m3e/core';
+import { LitElement, html, unsafeCSS, css, nothing } from 'lit';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -453,14 +453,13 @@ function e$1(e, r) {
   };
 }
 
-var _M3eDialogActionElement_clickHandler;
 /**
  * An element, nested within a clickable element, used to close a parenting dialog.
  * @tag m3e-dialog-action
  *
  * @attr return-value - The value to return from the dialog.
  */
-let M3eDialogActionElement = class M3eDialogActionElement extends AttachInternals(LitElement) {
+let M3eDialogActionElement = class M3eDialogActionElement extends ActionElementBase {
   constructor() {
     super(...arguments);
     /**
@@ -468,31 +467,12 @@ let M3eDialogActionElement = class M3eDialogActionElement extends AttachInternal
      * @default ""
      */
     this.returnValue = "";
-    /** @private */
-    _M3eDialogActionElement_clickHandler.set(this, e => {
-      if (!e.defaultPrevented) {
-        this.closest("m3e-dialog")?.hide(this.returnValue);
-      }
-    });
-  }
-  /** @inheritdoc */
-  connectedCallback() {
-    super.connectedCallback();
-    this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _M3eDialogActionElement_clickHandler, "f"));
-  }
-  /** @inheritdoc */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _M3eDialogActionElement_clickHandler, "f"));
   }
   /** @inheritdoc */
-  render() {
-    return html`<slot></slot>`;
+  _onClick() {
+    this.closest("m3e-dialog")?.hide(this.returnValue);
   }
 };
-_M3eDialogActionElement_clickHandler = new WeakMap();
-/** The styles of the element. */
-M3eDialogActionElement.styles = css`:host { display: contents; }`;
 __decorate([n$1({
   attribute: "return-value"
 })], M3eDialogActionElement.prototype, "returnValue", void 0);
@@ -938,13 +918,7 @@ let M3eDialogElement = M3eDialogElement_1 = class M3eDialogElement extends Event
     this._content.scrollTop = 0;
     const focusable = this.querySelector("[autofocus]");
     if (focusable) {
-      if (!prefersReducedMotion()) {
-        this._base.addEventListener("transitionend", () => focusable.focus(), {
-          once: true
-        });
-      } else {
-        focusable.focus();
-      }
+      focusWhenReady(focusable);
     }
     this.dispatchEvent(new Event("opened"));
   }
@@ -1065,26 +1039,15 @@ __decorate([n$1({
 })], M3eDialogElement.prototype, "closeLabel", void 0);
 M3eDialogElement = M3eDialogElement_1 = __decorate([t$2("m3e-dialog")], M3eDialogElement);
 
-var _M3eDialogTriggerElement_clickHandler;
 /**
  * An element, nested within a clickable element, used to open a dialog.
  * @tag m3e-dialog-trigger
  */
-let M3eDialogTriggerElement = class M3eDialogTriggerElement extends HtmlFor(AttachInternals(LitElement)) {
-  constructor() {
-    super(...arguments);
-    /** @private */
-    _M3eDialogTriggerElement_clickHandler.set(this, e => {
-      if (!e.defaultPrevented && this.control instanceof M3eDialogElement) {
-        this.control.show();
-      }
-    });
-  }
+let M3eDialogTriggerElement = class M3eDialogTriggerElement extends HtmlFor(ActionElementBase) {
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
     if (this.parentElement) {
-      this.parentElement.addEventListener("click", __classPrivateFieldGet(this, _M3eDialogTriggerElement_clickHandler, "f"));
       this.parentElement.ariaHasPopup = "dialog";
     }
   }
@@ -1092,18 +1055,16 @@ let M3eDialogTriggerElement = class M3eDialogTriggerElement extends HtmlFor(Atta
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.parentElement) {
-      this.parentElement.removeEventListener("click", __classPrivateFieldGet(this, _M3eDialogTriggerElement_clickHandler, "f"));
       this.parentElement.ariaHasPopup = null;
     }
   }
   /** @inheritdoc */
-  render() {
-    return html`<slot></slot>`;
+  _onClick() {
+    if (this.control instanceof M3eDialogElement) {
+      this.control.show();
+    }
   }
 };
-_M3eDialogTriggerElement_clickHandler = new WeakMap();
-/** The styles of the element. */
-M3eDialogTriggerElement.styles = css`:host { display: contents; }`;
 M3eDialogTriggerElement = __decorate([t$2("m3e-dialog-trigger")], M3eDialogTriggerElement);
 
 export { M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement };