@m3e/stepper 1.0.2 → 1.0.4

package/dist/custom-elements.json

@@ -764,6 +764,12 @@
             }
           ],
           "members": [],
+          "mixins": [
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"

package/dist/index.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { css, LitElement, html, nothing } from 'lit';
-import { Selected, KeyboardClick, Focusable, HtmlFor, Disabled, AttachInternals, Role, DesignToken } from '@m3e/core';
+import { LitElement, html, css, nothing } from 'lit';
+import { Role, Selected, KeyboardClick, Focusable, HtmlFor, Disabled, AttachInternals, DesignToken } from '@m3e/core';
 import { addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager } from '@m3e/core/a11y';
 import { M3eBreakpointObserver, Breakpoint } from '@m3e/core/layout';
 
@@ -152,7 +152,7 @@ const e$2=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * @cssprop --m3e-step-panel-spacing - Vertical gap between stacked elements within the step panel.
  * @cssprop --m3e-step-panel-actions-height - Minimum height of the slotted actions container.
  */
-let M3eStepPanelElement = class M3eStepPanelElement extends LitElement {
+let M3eStepPanelElement = class M3eStepPanelElement extends Role(LitElement, "tabpanel") {
     constructor() {
         super(...arguments);
         /** @internal */
@@ -160,7 +160,6 @@ let M3eStepPanelElement = class M3eStepPanelElement extends LitElement {
     }
     /** @inheritdoc */
     connectedCallback() {
-        this.role = this.role || "tabpanel";
         this.slot = "panel";
         super.connectedCallback();
     }
@@ -439,8 +438,8 @@ _M3eStepElement_handleClick = function _M3eStepElement_handleClick(e) {
     if (e.defaultPrevented || this.selected)
         return;
     this.selected = true;
-    if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true }))) {
-        this.closest("m3e-stepper")?.moveTo(this.index);
+    if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true })) &&
+        this.closest("m3e-stepper")?.moveTo(this.index)) {
         this.dispatchEvent(new Event("change", { bubbles: true }));
     }
     else {
@@ -456,10 +455,11 @@ M3eStepElement.styles = css `
       min-width: 0px;
       border-radius: var(--m3e-step-shape, ${DesignToken.shape.corner.medium});
       padding: var(--m3e-step-padding, 1.5rem);
+      user-select: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
     :host(:not([aria-disabled="true"])) {
       cursor: pointer;
-      user-select: none;
     }
     .icon {
       flex: none;
@@ -587,7 +587,6 @@ class StepperButtonElementBase extends AttachInternals(LitElement) {
     }
     /** @inheritdoc */
     connectedCallback() {
-        this.role = this.role || "none";
         super.connectedCallback();
         this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _StepperButtonElementBase_clickHandler, "f"));
     }
@@ -772,6 +771,9 @@ let M3eStepperElement = class M3eStepperElement extends AttachInternals(LitEleme
         if (selectedStep && selectedStep.index === index) {
             return true;
         }
+        if (this.steps[index]?.disabled) {
+            return false;
+        }
         if (index >= 0 && index < this.steps.length) {
             if (selectedStep) {
                 const valid = __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_checkValidity).call(this);
@@ -820,7 +822,6 @@ let M3eStepperElement = class M3eStepperElement extends AttachInternals(LitEleme
     }
     /** @inheritdoc */
     connectedCallback() {
-        this.role = this.role || "none";
         super.connectedCallback();
         this.classList.toggle("-no-animate", true);
     }