@m3e/stepper 1.0.2

package/dist/src/StepperElement.d.ts

@@ -0,0 +1,139 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { SelectionManager, selectionManager } from "@m3e/core/a11y";
+import { M3eStepElement } from "./StepElement";
+import { StepLabelPosition } from "./StepLabelPosition";
+import { StepHeaderPosition } from "./StepHeaderPosition";
+import { StepperOrientation } from "./StepperOrientation";
+declare const M3eStepperElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
+/**
+ * Provides a wizard-like workflow by dividing content into logical steps.
+ *
+ * @description
+ * The `m3e-stepper` component orchestrates a structured, wizard-like workflow by dividing
+ * content into discrete, navigable steps. It supports horizontal and vertical orientations,
+ * linear progression, and configurable label and header positioning.
+ *
+ * @example
+ * The following example demonstrates a linear multi-step form flow using the `m3e-stepper`
+ * component. Each `m3e-step` defines a navigable step label, linked to its corresponding
+ * `m3e-step-panel` via the `for` attribute. Navigation is orchestrated using the
+ * `m3e-stepper-next`, `m3e-stepper-previous`, and `m3e-stepper-reset` components.
+ *
+ * <m3e-stepper>
+ *  <m3e-step for="step1">Fill out your name</m3e-step>
+ *  <m3e-step for="step2">Fill out your address</m3e-step>
+ *  <m3e-step for="step3">Done</m3e-step>
+ *  <m3e-step-panel id="step1">
+ *    <form>
+ *      <m3e-form-field>
+ *        <label slot="label" for="name">Name</label>
+ *        <input name="name" id="name" required />
+ *      </m3e-form-field>
+ *    </form>
+ *    <div slot="actions">
+ *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>
+ *    </div>
+ *  </m3e-step-panel>
+ *  <m3e-step-panel id="step2">
+ *    <form>
+ *      <m3e-form-field>
+ *        <label slot="label" for="address">Address</label>
+ *        <input name="address" id="address" required />
+ *      </m3e-form-field>
+ *    </form>
+ *    <div slot="actions">
+ *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>
+ *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>
+ *    </div>
+ *  </m3e-step-panel>
+ *  <m3e-step-panel id="step3">Done
+ *    <div slot="actions">
+ *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>
+ *      <m3e-button><m3e-stepper-reset>Reset</m3e-stepper-reset></m3e-button>
+ *    </div>
+ *  </m3e-step-panel>
+ * </m3e-stepper>
+ *
+ * @tag m3e-stepper
+ *
+ * @attr header-position - The position of the step header, when oriented horizontally.
+ * @attr label-position - The position of the step labels, when oriented horizontally.
+ * @attr linear - Whether the validity of previous steps should be checked or not.
+ * @attr orientation - The orientation of the stepper.
+ *
+ * @slot step - Renders a step.
+ * @slot panel - Renders a panel.
+ *
+ * @fires change - Emitted when the selected step changes.
+ *
+ * @cssprop --m3e-step-divider-thickness - Thickness of the divider line between steps.
+ * @cssprop --m3e-step-divider-color - Color of the divider line between steps.
+ * @cssprop --m3e-step-divider-inset - Inset offset for divider alignment within step layout.
+ */
+export declare class M3eStepperElement extends M3eStepperElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private _orientation?;
+    /** @private */ private _selectedIndex;
+    /** @internal */ readonly [selectionManager]: SelectionManager<M3eStepElement>;
+    /**
+     * The position of the step header, when oriented horizontally.
+     * @default "above"
+     */
+    headerPosition: StepHeaderPosition;
+    /**
+     * The position of the step labels, when oriented horizontally.
+     * @default "end"
+     */
+    labelPosition: StepLabelPosition;
+    /**
+     * Whether the validity of previous steps should be checked or not.
+     * @default false
+     */
+    linear: boolean;
+    /**
+     * The orientation of the stepper.
+     * @default "horizontal"
+     */
+    orientation: StepperOrientation;
+    /** The steps. */
+    get steps(): readonly M3eStepElement[];
+    /** The selected step. */
+    get selectedStep(): M3eStepElement | null;
+    /** The zero-based index of the selected step. */
+    get selectedIndex(): number;
+    /**
+     * Moves the stepper to the previous step.
+     * @returns {boolean} Whether the stepper moved to the previous step.
+     */
+    movePrevious(): boolean;
+    /**
+     * Moves the stepper to the next step.
+     * @returns {boolean} Whether the stepper moved to the next step.
+     */
+    moveNext(): boolean;
+    /**
+     * Moves the stepper to the step with the specified index.
+     * @param index The zero-based index of the step to which to move.
+     * @returns {boolean} Whether the stepper moved to the specified `index`.
+     */
+    moveTo(index: number): boolean;
+    /** Resets the stepper to its initial state, clearing any form data. */
+    reset(): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-stepper": M3eStepperElement;
+    }
+}
+export {};
+//# sourceMappingURL=StepperElement.d.ts.map

package/dist/src/StepperElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperElement.d.ts","sourceRoot":"","sources":["../../src/StepperElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGpE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBACa,iBAAkB,SAAQ,sBAA2B;;IAChE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAwHpC;IAGF,eAAe,CAAU,OAAO,CAAC,YAAY,CAAC,CAAsC;IACpF,eAAe,CAAU,OAAO,CAAC,cAAc,CAAuB;IACtE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,mCAGiB;IAE7D;;;OAGG;IACwD,cAAc,EAAE,kBAAkB,CAAW;IAExG;;;OAGG;IACuD,aAAa,EAAE,iBAAiB,CAAS;IAEnG;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;OAGG;IAC0B,WAAW,EAAE,kBAAkB,CAAgB;IAE5E,iBAAiB;IACjB,IAAI,KAAK,IAAI,SAAS,cAAc,EAAE,CAErC;IAED,yBAAyB;IACzB,IAAI,YAAY,IAAI,cAAc,GAAG,IAAI,CAExC;IAED,iDAAiD;IACjD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;;OAGG;IACH,YAAY,IAAI,OAAO;IAIvB;;;OAGG;IACH,QAAQ,IAAI,OAAO;IAInB;;;;OAIG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAyC9B,uEAAuE;IACvE,KAAK,IAAI,IAAI;IAUb,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAMlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAoBlE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA8HrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/dist/src/StepperNextElement.d.ts

@@ -0,0 +1,16 @@
+import { StepperButtonElementBase } from "./StepperButtonElementBase";
+/**
+ * An element, nested within a clickable element, used to move a stepper to the next step.
+ * @tag m3e-stepper-previous
+ *
+ * @slot - Renders the content of the action.
+ */
+export declare class M3eStepperNextElement extends StepperButtonElementBase {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-stepper-next": M3eStepperNextElement;
+    }
+}
+//# sourceMappingURL=StepperNextElement.d.ts.map

package/dist/src/StepperNextElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperNextElement.d.ts","sourceRoot":"","sources":["../../src/StepperNextElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE;;;;;GAKG;AACH,qBACa,qBAAsB,SAAQ,wBAAwB;;CAIlE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/dist/src/StepperOrientation.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible layout orientations of a stepper. */
+export type StepperOrientation = "horizontal" | "vertical" | "auto";
+//# sourceMappingURL=StepperOrientation.d.ts.map

package/dist/src/StepperOrientation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperOrientation.d.ts","sourceRoot":"","sources":["../../src/StepperOrientation.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC"}

package/dist/src/StepperPreviousElement.d.ts

@@ -0,0 +1,16 @@
+import { StepperButtonElementBase } from "./StepperButtonElementBase";
+/**
+ * An element, nested within a clickable element, used to move a stepper to the previous step.
+ * @tag m3e-stepper-previous
+ *
+ * @slot - Renders the content of the action.
+ */
+export declare class M3eStepperPreviousElement extends StepperButtonElementBase {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-stepper-previous": M3eStepperPreviousElement;
+    }
+}
+//# sourceMappingURL=StepperPreviousElement.d.ts.map

package/dist/src/StepperPreviousElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperPreviousElement.d.ts","sourceRoot":"","sources":["../../src/StepperPreviousElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE;;;;;GAKG;AACH,qBACa,yBAA0B,SAAQ,wBAAwB;;CAItE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}

package/dist/src/StepperResetElement.d.ts

@@ -0,0 +1,16 @@
+import { StepperButtonElementBase } from "./StepperButtonElementBase";
+/**
+ * An element, nested within a clickable element, used to reset a stepper to its initial state.
+ * @tag m3e-stepper-reset
+ *
+ * @slot - Renders the content of the action.
+ */
+export declare class M3eStepperResetElement extends StepperButtonElementBase {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-stepper-reset": M3eStepperResetElement;
+    }
+}
+//# sourceMappingURL=StepperResetElement.d.ts.map

package/dist/src/StepperResetElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperResetElement.d.ts","sourceRoot":"","sources":["../../src/StepperResetElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE;;;;;GAKG;AACH,qBACa,sBAAuB,SAAQ,wBAAwB;;CAInE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/dist/src/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./StepElement";
+export * from "./StepHeaderPosition";
+export * from "./StepLabelPosition";
+export * from "./StepPanelElement";
+export * from "./StepperButtonElementBase";
+export * from "./StepperElement";
+export * from "./StepperNextElement";
+export * from "./StepperPreviousElement";
+export * from "./StepperResetElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@m3e/stepper",
+  "version": "1.0.2",
+  "description": "Stepper for M3E",
+  "author": "matraic <matraic@yahoo.com>",
+  "license": "MIT",
+  "homepage": "https://matraic.github.io/m3e/#/components/stepper.html",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matraic/m3e.git"
+  },
+  "keywords": [
+    "material design",
+    "web components",
+    "stepper"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "browser": "dist/index.min.js",
+  "unpkg": "dist/index.min.js",
+  "types": "dist/src/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "cem": "cem analyze --config cem.config.mjs",
+    "lint": "npx eslint ./src",
+    "clean": "rimraf dist"
+  },
+  "peerDependencies": {
+    "@m3e/core": "1.0.2",
+    "lit": "^3.3.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@eslint/js": "^9.30.1",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "12.1.0",
+    "custom-element-vs-code-integration": "^1.5.0",
+    "eslint": "^9.32.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.44.2",
+    "tslib": "^2.8.1",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.38.0"
+  },
+  "customElements": "dist/custom-elements.json"
+}