@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.209

package/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Memphis.js

@@ -153,10 +153,14 @@ export function menuItemElementMemphisStyle() {
   position: absolute;
 }
 
-:host([is-expanded]) [part="caret"]::part(icon) {
+:host([is-expanded]:not([menu-mode="popover"])) [part="caret"]::part(icon) {
   transform: rotate(-45deg);
 }
 
+:host([menu-mode="popover"]) [part="caret"]::part(icon) {
+  transform: rotate(0);
+}
+
 :host([disabled]:not([disabled="false"])) {
   cursor: default;
 }

package/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0JT,CAAC;AACN,CAAC"}
+{"version":3,"file":"MenuItemElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8JT,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Menu/Themes/MenuItemGroupElement.Cosmopolitan.js

@@ -72,7 +72,7 @@ export function menuItemGroupElementCosmopolitanStyle() {
 }
 
 :host [part="header"] {
-  padding: 16px 16px 8px;
+  padding: 16px 8px 8px;
 }
 
 :host ::slotted(mosaik-menu-item) {

package/Controls/Components/Selectors/Menu/Themes/MenuItemGroupElement.Joy.js

@@ -75,7 +75,7 @@ export function menuItemGroupElementJoyStyle() {
 }
 
 :host [part="header"] {
-  padding: 16px 16px 8px;
+  padding: 16px 8px 8px;
 }
 
 :host ::slotted(mosaik-menu-item) {

package/Controls/Components/Selectors/Menu/Themes/MenuItemGroupElement.Memphis.js

@@ -72,7 +72,7 @@ export function menuItemGroupElementMemphisStyle() {
 }
 
 :host [part="header"] {
-  padding: 16px 16px 8px;
+  padding: 16px 8px 8px;
 }
 
 :host ::slotted(mosaik-menu-item) {

package/Controls/Components/Selectors/Stepper/Events/IStepperActiveStepChangedEventDetail.d.ts

@@ -0,0 +1,23 @@
+import type { ICancelEventDetail } from '@breadstone/mosaik-elements';
+import type { StepperItemElement } from '../StepperItemElement';
+/**
+ * Represents the {@link IStepperActiveStepChangedEventDetail} interface.
+ *
+ * @public
+ */
+export interface IStepperActiveStepChangedEventDetail extends ICancelEventDetail<StepperItemElement> {
+    newStep: StepperItemElement;
+    newStepIndex: number;
+    oldStep: StepperItemElement | null;
+    oldStepIndex: number;
+    direction: 'forward' | 'backward';
+    totalSteps: number;
+}
+/**
+ * Represents the {@link IStepperActiveStepChangedEvent} interface.
+ *
+ * @public
+ */
+export interface IStepperActiveStepChangedEvent extends CustomEvent<IStepperActiveStepChangedEventDetail> {
+}
+//# sourceMappingURL=IStepperActiveStepChangedEventDetail.d.ts.map

package/Controls/Components/Selectors/Stepper/Events/IStepperActiveStepChangedEventDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStepperActiveStepChangedEventDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Events/IStepperActiveStepChangedEventDetail.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE;;;;GAIG;AACH,MAAM,WAAW,oCACb,SAAQ,kBAAkB,CAAC,kBAAkB,CAAC;IAI9C,OAAO,EAAE,kBAAkB,CAAC;IAE5B,YAAY,EAAE,MAAM,CAAC;IAErB,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAEnC,YAAY,EAAE,MAAM,CAAC;IAErB,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;IAElC,UAAU,EAAE,MAAM,CAAC;CAItB;AAED;;;;GAIG;AACH,MAAM,WAAW,8BACb,SAAQ,WAAW,CAAC,oCAAoC,CAAC;CAAI"}

package/Controls/Components/Selectors/Stepper/Events/IStepperActiveStepChangedEventDetail.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IStepperActiveStepChangedEventDetail.js.map

package/Controls/Components/Selectors/Stepper/Events/IStepperActiveStepChangedEventDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStepperActiveStepChangedEventDetail.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Events/IStepperActiveStepChangedEventDetail.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Selectors/Stepper/IStepperElementEvents.d.ts

@@ -0,0 +1,11 @@
+import type { IEventEmitter } from '@breadstone/mosaik-elements';
+import type { IStepperActiveStepChangedEventDetail } from './Events/IStepperActiveStepChangedEventDetail';
+/**
+ * Represents the events of the {@link StepperElement} element.
+ *
+ * @public
+ */
+export interface IStepperElementEvents {
+    activeStepChanged: IEventEmitter<IStepperActiveStepChangedEventDetail>;
+}
+//# sourceMappingURL=IStepperElementEvents.d.ts.map

package/Controls/Components/Selectors/Stepper/IStepperElementEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStepperElementEvents.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/IStepperElementEvents.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,KAAK,EAAE,oCAAoC,EAAE,MAAM,+CAA+C,CAAC;AAI1G;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IAIlC,iBAAiB,EAAE,aAAa,CAAC,oCAAoC,CAAC,CAAC;CAI1E"}

package/Controls/Components/Selectors/Stepper/IStepperElementEvents.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IStepperElementEvents.js.map

package/Controls/Components/Selectors/Stepper/IStepperElementEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStepperElementEvents.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/IStepperElementEvents.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Selectors/Stepper/IStepperElementProps.d.ts

@@ -0,0 +1,13 @@
+import type { IDisableableProps } from '../../../Behaviors/Disableable';
+import type { IFitableProps } from '../../../Behaviors/Fitable';
+import type { ISlottableProps } from '../../../Behaviors/Slottable';
+import type { ISelectorElementProps } from '../Abstracts/Selector/ISelectorElementProps';
+import type { IOrientableProps } from '../../../Behaviors/Orientable';
+/**
+ * Represents the {@link IStepperElementProps} interface.
+ *
+ * @public
+ */
+export interface IStepperElementProps extends ISelectorElementProps, IFitableProps, IDisableableProps, ISlottableProps, IOrientableProps {
+}
+//# sourceMappingURL=IStepperElementProps.d.ts.map

package/Controls/Components/Selectors/Stepper/IStepperElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStepperElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/IStepperElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AACzF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAItE;;;;GAIG;AACH,MAAM,WAAW,oBACb,SAAQ,qBAAqB,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB;CAErG"}

package/Controls/Components/Selectors/Stepper/IStepperElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IStepperElementProps.js.map

package/Controls/Components/Selectors/Stepper/IStepperElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStepperElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/IStepperElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Selectors/Stepper/IStepperItemElementProps.d.ts

@@ -0,0 +1,16 @@
+import type { IDisableableProps } from '../../../Behaviors/Disableable';
+import type { IAnimatableProps } from '../../../Behaviors/Animatable';
+import type { ISelectorItemElementProps } from '../Abstracts/Selector/ISelectorItemElementProps';
+/**
+ * Represents the {@link IStepperItemElementProps} interface.
+ *
+ * @public
+ */
+export interface IStepperItemElementProps extends ISelectorItemElementProps, IAnimatableProps, IDisableableProps {
+    header: string;
+    description: string;
+    hint: string;
+    icon: string;
+    state: 'pending' | 'completed' | 'error';
+}
+//# sourceMappingURL=IStepperItemElementProps.d.ts.map

package/Controls/Components/Selectors/Stepper/IStepperItemElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStepperItemElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/IStepperItemElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AAIjG;;;;GAIG;AACH,MAAM,WAAW,wBACb,SAAQ,yBAAyB,EAAE,gBAAgB,EAAE,iBAAiB;IAItE,MAAM,EAAE,MAAM,CAAC;IAEf,WAAW,EAAE,MAAM,CAAC;IAEpB,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;CAI5C"}

package/Controls/Components/Selectors/Stepper/IStepperItemElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IStepperItemElementProps.js.map

package/Controls/Components/Selectors/Stepper/IStepperItemElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStepperItemElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/IStepperItemElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Selectors/Stepper/StepperElement.d.ts

@@ -0,0 +1,129 @@
+import { IEventEmitter } from '@breadstone/mosaik-elements';
+import { ISlottable } from '../../../Behaviors/Slottable';
+import { SelectorElement } from '../Abstracts/Selector/SelectorElement';
+import type { IStepperActiveStepChangedEventDetail } from './Events/IStepperActiveStepChangedEventDetail';
+import type { IStepperElementEvents } from './IStepperElementEvents';
+import type { IStepperElementProps } from './IStepperElementProps';
+import { StepperItemElement } from './StepperItemElement';
+declare const StepperElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new () => SelectorElement<any>) & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * Stepper - A control that guides users through a workflow.
+ *
+ * @element mosaik-stepper
+ * @category Selector
+ *
+ * @slot header - The header slot.
+ * @slot steps - The steps slot.
+ * @slot footer - The footer slot.
+ *
+ * @fires activeStepChanged - Fired when the active step has changed.
+ *
+ * @public
+ */
+export declare class StepperElement extends StepperElement_base implements IStepperElementProps, IStepperElementEvents, ISlottable {
+    private readonly _activeStepChanged;
+    /**
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `{@link is}` property.
+     *
+     * @public
+     * @static
+     * @override
+     * @readonly
+     */
+    static get is(): string;
+    /**
+     * Returns the `items` property.
+     *
+     * @public
+     * @override
+     * @readonly
+     */
+    get items(): Array<StepperItemElement>;
+    /**
+     * Gets the active index of the stepper.
+     *
+     * @public
+     * @readonly
+     */
+    get activeIndex(): number;
+    /**
+     * Gets the first step indicator.
+     *
+     * @public
+     * @readonly
+     */
+    get isFirstStep(): boolean;
+    /**
+     * Gets the last step indicator.
+     *
+     * @public
+     * @readonly
+     */
+    get isLastStep(): boolean;
+    /**
+     * Called when the active step has changed.
+     * Provides reference to `{@link IStepperActiveStepChangedEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get activeStepChanged(): IEventEmitter<IStepperActiveStepChangedEventDetail>;
+    /**
+     * @protected
+     * @template
+     */
+    onSlotChange(): void;
+    /**
+     * Ensures that at least one step is active.
+     * If no step is active, the first step will be selected.
+     *
+     * @protected
+     */
+    protected ensureActiveStep(): void;
+    /**
+     * Handles a step invocation from the header.
+     *
+     * @public
+     * @param step - The step that has been invoked.
+     */
+    onStepInvoked(step: StepperItemElement): void;
+    /**
+     * @protected
+     * @override
+     */
+    protected onSelectionChanged(oldIndex: number, newIndex: number): void;
+    /**
+     * Emits the {@link activeStepChanged} event.
+     *
+     * @protected
+     */
+    protected onActiveStepChanged(args: IStepperActiveStepChangedEventDetail): void;
+    /**
+     * @protected
+     */
+    protected onSelectedIndexPropertyChanged(_prev: number, next: number): void;
+}
+/**
+ * @public
+ */
+export declare namespace StepperElement {
+    type Props = IStepperElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-stepper': StepperElement;
+    }
+    interface HTMLElementEventMap {
+        activeStepChanged: CustomEvent<IStepperActiveStepChangedEventDetail>;
+    }
+}
+export {};
+//# sourceMappingURL=StepperElement.d.ts.map

package/Controls/Components/Selectors/Stepper/StepperElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAA2B,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAGrF,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,oCAAoC,EAAE,MAAM,+CAA+C,CAAC;AAC1G,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAW1D;;;;;;;;;;;;;GAaG;AACH,qBAsBa,cACT,SAAQ,mBACR,YAAW,oBAAoB,EAAE,qBAAqB,EAAE,UAAU;IAIlE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAsD;IAMzF;;OAEG;;IAWH;;;;;;;OAOG;IAGH,WAA2B,EAAE,IAAI,MAAM,CAEtC;IAED;;;;;;OAMG;IACH,IAAoB,KAAK,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAErD;IAED;;;;;OAKG;IACH,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED;;;;;OAKG;IACH,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED;;;;;OAKG;IACH,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED;;;;;;;OAOG;IACH,IACW,iBAAiB,IAAI,aAAa,CAAC,oCAAoC,CAAC,CAElF;IAMD;;;OAGG;IACI,YAAY,IAAI,IAAI;IAK3B;;;;;OAKG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAclC;;;;;OAKG;IACI,aAAa,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI;IAWpD;;;OAGG;cACgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAsB/E;;;;OAIG;IACH,SAAS,CAAC,mBAAmB,CAAC,IAAI,EAAE,oCAAoC,GAAG,IAAI;IAI/E;;OAEG;IAEH,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAa9E;AAED;;GAEG;AACH,yBAAiB,cAAc,CAAC;IAC5B,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC5C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,cAAc,CAAC;KACpC;IAED,UAAU,mBAAmB;QACzB,iBAAiB,EAAE,WAAW,CAAC,oCAAoC,CAAC,CAAC;KACxE;CACJ"}

package/Controls/Components/Selectors/Stepper/StepperElement.js

@@ -0,0 +1,240 @@
+// #region Imports
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { getSlotElements } from '../../../../Dom/Slot';
+import { Emit } from '../../../../Events/Decorators/EmitDecorator';
+import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
+import { Disableable } from '../../../Behaviors/Disableable';
+import { Fitable } from '../../../Behaviors/Fitable';
+import { Slottable } from '../../../Behaviors/Slottable';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Watch } from '../../../Decorators/WatchDecorator';
+import { SelectorElement } from '../Abstracts/Selector/SelectorElement';
+import { stepperElementTemplate } from './StepperElementTemplate';
+import { StepperItemElement } from './StepperItemElement';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { stepperElementJoyStyle } from './Themes/StepperElement.Joy';
+import { stepperElementCosmopolitanStyle } from './Themes/StepperElement.Cosmopolitan';
+import { stepperElementMemphisStyle } from './Themes/StepperElement.Memphis';
+import { Orientable } from '../../../Behaviors/Orientable';
+import { IconElement } from '../../Media/Icon/IconElement';
+import { TextElement } from '../../Primitives/Text/TextElement';
+// #endregion
+/**
+ * Stepper - A control that guides users through a workflow.
+ *
+ * @element mosaik-stepper
+ * @category Selector
+ *
+ * @slot header - The header slot.
+ * @slot steps - The steps slot.
+ * @slot footer - The footer slot.
+ *
+ * @fires activeStepChanged - Fired when the active step has changed.
+ *
+ * @public
+ */
+let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Disableable(Orientable(SelectorElement))))) {
+    // #region Fields
+    _activeStepChanged;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._activeStepChanged = new HTMLElementEventEmitter(this, 'activeStepChanged');
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the `{@link is}` property.
+     *
+     * @public
+     * @static
+     * @override
+     * @readonly
+     */
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    static get is() {
+        return 'mosaik-stepper';
+    }
+    /**
+     * Returns the `items` property.
+     *
+     * @public
+     * @override
+     * @readonly
+     */
+    get items() {
+        return getSlotElements(this.shadowRoot, 'steps');
+    }
+    /**
+     * Gets the active index of the stepper.
+     *
+     * @public
+     * @readonly
+     */
+    get activeIndex() {
+        return this.items.findIndex((x) => x.isActive);
+    }
+    /**
+     * Gets the first step indicator.
+     *
+     * @public
+     * @readonly
+     */
+    get isFirstStep() {
+        return this.activeIndex === 0;
+    }
+    /**
+     * Gets the last step indicator.
+     *
+     * @public
+     * @readonly
+     */
+    get isLastStep() {
+        return this.activeIndex === this.items.length - 1;
+    }
+    /**
+     * Called when the active step has changed.
+     * Provides reference to `{@link IStepperActiveStepChangedEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get activeStepChanged() {
+        return this._activeStepChanged;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @protected
+     * @template
+     */
+    onSlotChange() {
+        this.requestUpdate('items');
+        this.ensureActiveStep();
+    }
+    /**
+     * Ensures that at least one step is active.
+     * If no step is active, the first step will be selected.
+     *
+     * @protected
+     */
+    ensureActiveStep() {
+        const { items } = this;
+        if (items.length === 0) {
+            return;
+        }
+        const hasActiveStep = items.some((x) => x.isActive);
+        if (!hasActiveStep) {
+            this.select(0);
+        }
+    }
+    /**
+     * Handles a step invocation from the header.
+     *
+     * @public
+     * @param step - The step that has been invoked.
+     */
+    onStepInvoked(step) {
+        if (this.disabled || step.disabled) {
+            return;
+        }
+        const index = this.items.indexOf(step);
+        if (index >= 0) {
+            this.select(index);
+        }
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onSelectionChanged(oldIndex, newIndex) {
+        if (oldIndex === newIndex) {
+            return;
+        }
+        const items = this.items;
+        const args = {
+            cancel: false,
+            oldStep: items[oldIndex] ?? null,
+            oldStepIndex: oldIndex,
+            newStep: items[newIndex],
+            newStepIndex: newIndex,
+            direction: newIndex > oldIndex ? 'forward' : 'backward',
+            totalSteps: items.length
+        };
+        this.onActiveStepChanged(args);
+        if (!args.cancel) {
+            super.onSelectionChanged(oldIndex, newIndex);
+        }
+    }
+    /**
+     * Emits the {@link activeStepChanged} event.
+     *
+     * @protected
+     */
+    onActiveStepChanged(args) {
+        this._activeStepChanged.emit(args);
+    }
+    /**
+     * @protected
+     */
+    onSelectedIndexPropertyChanged(_prev, next) {
+        const { items } = this;
+        const { length } = items;
+        for (let i = 0; i < length; i++) {
+            const item = items[i];
+            item.isActive = i === next;
+        }
+    }
+};
+__decorate([
+    Emit({ eventName: 'activeStepChanged' }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], StepperElement.prototype, "activeStepChanged", null);
+__decorate([
+    Watch('selectedIndex'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Number, Number]),
+    __metadata("design:returntype", void 0)
+], StepperElement.prototype, "onSelectedIndexPropertyChanged", null);
+StepperElement = __decorate([
+    Component({
+        selector: 'mosaik-stepper',
+        template: stepperElementTemplate,
+        themes: {
+            joy: stepperElementJoyStyle,
+            memphis: stepperElementMemphisStyle,
+            cosmopolitan: stepperElementCosmopolitanStyle
+        },
+        options: {
+            mode: 'open',
+            delegatesFocus: true
+        },
+        host: {
+            tabIndex: '0',
+            role: 'tablist'
+        },
+        imports: [
+            StepperItemElement,
+            IconElement,
+            TextElement
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], StepperElement);
+export { StepperElement };
+//# sourceMappingURL=StepperElement.js.map

package/Controls/Components/Selectors/Stepper/StepperElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Selectors/Stepper/StepperElementTemplate.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from '../../../../Dom/Html';
+import type { StepperElement } from './StepperElement';
+/**
+ * The template of the {@link StepperElement}.
+ *
+ * @public
+ */
+export declare function stepperElementTemplate<T extends StepperElement>(e: T): TemplateResult;
+//# sourceMappingURL=StepperElementTemplate.d.ts.map

package/Controls/Components/Selectors/Stepper/StepperElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQvD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAuGrF"}