@breadstone/mosaik-elements-foundation 0.1.9 → 0.1.10

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

@@ -21,14 +21,16 @@ declare const StepperElement_base: (abstract new (...args: Array<any>) => import
  * @element mosaik-stepper
  * @category Selectors
  *
+ * @slot ${`step-${index}`} - The ${`step-${index}`} slot.
  * @slot footer - Custom footer content below the stepper content
  * @slot steps - The stepper item elements (mosaik-stepper-item)
  *
  * @csspart connector - The line connecting steps
- * @csspart content - The main content area for active step
+ * @csspart content - The content part.
  * @csspart footer - The footer container
  * @csspart header - The header container with step indicators
- * @csspart step - The clickable step button
+ * @csspart content - The main content area for active step
+ * @csspart step-body - The vertical step body containing connector and step content
  * @csspart step-container - Individual step header container
  * @csspart step-description - The step description text
  * @csspart step-header - The step header text
@@ -183,19 +185,26 @@ export declare class StepperElement extends StepperElement_base implements IStep
      */
     onSlotChange(): void;
     /**
-     * Ensures that at least one step is active.
-     * If no step is active, the first step will be selected.
+     * Handles slotted item changes from the Slottable behavior.
      *
-     * @protected
+     * @public
+     * @override
      */
-    protected ensureActiveStep(): void;
+    onSlotChanges(slotName?: string): void;
     /**
      * Handles a step invocation from the header.
      *
-     * @public
+     * @private
      * @param step - The step that has been invoked.
      */
     onStepInvoked(step: StepperItemElement): void;
+    /**
+     * Ensures that at least one step is active.
+     * If no step is active, the first step will be selected.
+     *
+     * @protected
+     */
+    protected ensureActiveStep(): void;
     /**
      * @protected
      * @override
@@ -211,6 +220,16 @@ export declare class StepperElement extends StepperElement_base implements IStep
      * @protected
      */
     protected onSelectedIndexPropertyChanged(_prev: number, next: number): void;
+    /**
+     * @protected
+     */
+    protected onOrientationPropertyChanged(): void;
+    /**
+     * Assigns step items to the collector slot in horizontal mode and to per-step slots in vertical mode.
+     *
+     * @private
+     */
+    private syncStepSlots;
 }
 /**
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"StepperElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAA2B,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAMrF,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAKrE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,iBAAiB,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqHG;AACH,qBAuBa,cACT,SAAQ,mBACR,YAAW,oBAAoB,EAAE,UAAU;IAI3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAKvB;IACH,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAA+C;IAMlF;;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,6BAA6B,CAAC,CAE3E;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,6BAA6B,GAAG,IAAI;IAIxE;;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;CACJ"}
+{"version":3,"file":"StepperElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAA2B,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAKrF,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAKrE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,iBAAiB,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuHG;AACH,qBAuBa,cACT,SAAQ,mBACR,YAAW,oBAAoB,EAAE,UAAU;IAI3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAKvB;IACH,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAA+C;IAMlF;;OAEG;;IAWH;;;;;;;OAOG;IAGH,WAA2B,EAAE,IAAI,MAAM,CAEtC;IAED;;;;;;OAMG;IACH,IAAoB,KAAK,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAGrD;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,6BAA6B,CAAC,CAE3E;IAMD;;;OAGG;IACI,YAAY,IAAI,IAAI;IAM3B;;;;;OAKG;IACa,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAKtD;;;;;OAKG;IACI,aAAa,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI;IAWpD;;;;;OAKG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAclC;;;OAGG;cACgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAsB/E;;;;OAIG;IACH,SAAS,CAAC,mBAAmB,CAAC,IAAI,EAAE,6BAA6B,GAAG,IAAI;IAIxE;;OAEG;IAEH,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAW3E;;OAEG;IAEH,SAAS,CAAC,4BAA4B,IAAI,IAAI;IAK9C;;;;OAIG;IACH,OAAO,CAAC,aAAa;CAcxB;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;CACJ"}

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

@@ -9,7 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
-import { getSlotElements } from '../../../../Dom/Slot';
 import { Emit } from '../../../../events/Decorators/EmitDecorator';
 import { Disableable } from '../../../Behaviors/Disableable';
 import { Fitable } from '../../../Behaviors/Fitable';
@@ -46,14 +45,16 @@ import { stepperElementMemphisStyle } from './Themes/StepperElement.Memphis';
  * @element mosaik-stepper
  * @category Selectors
  *
+ * @slot ${`step-${index}`} - The ${`step-${index}`} slot.
  * @slot footer - Custom footer content below the stepper content
  * @slot steps - The stepper item elements (mosaik-stepper-item)
  *
  * @csspart connector - The line connecting steps
- * @csspart content - The main content area for active step
+ * @csspart content - The content part.
  * @csspart footer - The footer container
  * @csspart header - The header container with step indicators
- * @csspart step - The clickable step button
+ * @csspart content - The main content area for active step
+ * @csspart step-body - The vertical step body containing connector and step content
  * @csspart step-container - Individual step header container
  * @csspart step-description - The step description text
  * @csspart step-header - The step header text
@@ -189,7 +190,8 @@ let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Di
      * @readonly
      */
     get items() {
-        return getSlotElements(this.shadowRoot, 'steps');
+        return Array.from(this.children)
+            .filter((child) => child.tagName.toLowerCase() === StepperItemElement.is);
     }
     /**
      * Gets the active index of the stepper.
@@ -236,29 +238,24 @@ let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Di
      * @template
      */
     onSlotChange() {
+        this.syncStepSlots();
         this.requestUpdate('items');
         this.ensureActiveStep();
     }
     /**
-     * Ensures that at least one step is active.
-     * If no step is active, the first step will be selected.
+     * Handles slotted item changes from the Slottable behavior.
      *
-     * @protected
+     * @public
+     * @override
      */
-    ensureActiveStep() {
-        const { items } = this;
-        if (items.length === 0) {
-            return;
-        }
-        const hasActiveStep = items.some((x) => x.isActive);
-        if (!hasActiveStep) {
-            this.select(0);
-        }
+    onSlotChanges(slotName) {
+        super.onSlotChanges(slotName);
+        this.onSlotChange();
     }
     /**
      * Handles a step invocation from the header.
      *
-     * @public
+     * @private
      * @param step - The step that has been invoked.
      */
     onStepInvoked(step) {
@@ -270,6 +267,22 @@ let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Di
             this.select(index);
         }
     }
+    /**
+     * 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);
+        }
+    }
     /**
      * @protected
      * @override
@@ -312,6 +325,28 @@ let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Di
             item.isActive = i === next;
         }
     }
+    /**
+     * @protected
+     */
+    onOrientationPropertyChanged() {
+        this.syncStepSlots();
+        this.requestUpdate('items');
+    }
+    /**
+     * Assigns step items to the collector slot in horizontal mode and to per-step slots in vertical mode.
+     *
+     * @private
+     */
+    syncStepSlots() {
+        this.items.forEach((item, index) => {
+            const slotName = this.orientation === 'vertical'
+                ? `step-${index}`
+                : 'steps';
+            if (item.slot !== slotName) {
+                item.slot = slotName;
+            }
+        });
+    }
 };
 __decorate([
     Emit({ eventName: 'activeStepChanged' }),
@@ -324,6 +359,12 @@ __decorate([
     __metadata("design:paramtypes", [Number, Number]),
     __metadata("design:returntype", void 0)
 ], StepperElement.prototype, "onSelectedIndexPropertyChanged", null);
+__decorate([
+    Watch('orientation'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], StepperElement.prototype, "onOrientationPropertyChanged", null);
 StepperElement = __decorate([
     Component({
         selector: 'mosaik-stepper',

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

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

@@ -1 +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;AAMjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIvD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CA8ErF"}
+{"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;AAOjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKvD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAqGrF"}

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

@@ -3,6 +3,7 @@ import { html } from '../../../../Dom/Html';
 import { Icons } from '../../../../Resources/Icons';
 import { classMap, repeat, when } from '../../../Directives/Directives';
 import { setEmpty } from '../../../Directives/SetEmpty';
+import { Orientation } from '../../../Types/Orientation';
 // #endregion
 /**
  * The template of the `StepperElement`.
@@ -33,52 +34,74 @@ export function stepperElementTemplate(e) {
                 return 'neutral';
         }
     };
-    return html `
-        <div part="header"
-             class="${classMap({ [`is-${e.orientation}`]: true })}">
-            ${repeat(e.items, (x) => x, (x, index) => html `
-            <div part="step-container"
-                 class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}">
-                <button part="step"
-                        class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}"
-                        type="button"
-                        role="tab"
-                        aria-selected="${x.isSelected}"
-                        aria-posinset="${index + 1}"
-                        aria-setsize="${e.items.length}"
-                        ?disabled="${x.disabled || e.disabled}"
-                        @click="${() => e.onStepInvoked(x)}">
-                    <span part="step-icon"
-                          aria-hidden="true">
-                        <mosaik-pip part="step-state"
-                                    .icon="${x.icon ? x.icon : getStateIcon(x.state)}"
-                                    .text="${String(index + 1)}"
-                                    .variant="${getStateVariant(x.state)}"
-                                    .appearance="${'plain'}"></mosaik-pip>
-                    </span>
-                    <span part="step-text">
-                        <mosaik-text part="step-header"
-                                     .text="${x.header || x.displayText || ''}"></mosaik-text>
-                        ${when(x.description.trim(), () => html `
-                        <mosaik-text part="step-description"
-                                     .text="${x.description}"></mosaik-text>
-                        `)}
-                        ${when(x.hint.trim(), () => html `
-                        <mosaik-text part="step-optional"
-                                     .text="${x.hint}"></mosaik-text>
-                        `)}
-                    </span>
-                </button>
+    const renderStep = (x, index) => html `
+        <div part="step-container"
+             class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}">
+            <button part="step"
+                    class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}"
+                    type="button"
+                    role="tab"
+                    aria-selected="${x.isSelected}"
+                    aria-posinset="${index + 1}"
+                    aria-setsize="${e.items.length}"
+                    ?disabled="${x.disabled || e.disabled}"
+                    @click="${() => e.onStepInvoked(x)}">
+                <span part="step-icon"
+                      aria-hidden="true">
+                    <mosaik-pip part="step-state"
+                                .icon="${x.icon ? x.icon : getStateIcon(x.state)}"
+                                .text="${String(index + 1)}"
+                                .variant="${getStateVariant(x.state)}"
+                                .appearance="${'plain'}"></mosaik-pip>
+                </span>
+                <span part="step-text">
+                    <mosaik-text part="step-header"
+                                 .text="${x.header || x.displayText || ''}"></mosaik-text>
+                    ${when(x.description.trim(), () => html `
+                    <mosaik-text part="step-description"
+                                 .text="${x.description}"></mosaik-text>
+                    `)}
+                    ${when(x.hint.trim(), () => html `
+                    <mosaik-text part="step-optional"
+                                 .text="${x.hint}"></mosaik-text>
+                    `)}
+                </span>
+            </button>
+            ${when(e.orientation === Orientation.Horizontal && index < e.items.length - 1, () => html `
+            <div part="connector" class="${classMap({ 'is-completed': x.state === 'completed' })}"></div>
+            `)}
+            ${when(e.orientation === Orientation.Vertical, () => html `
+            <div part="step-body"
+                 class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-last': index === e.items.length - 1 })}">
                 ${when(index < e.items.length - 1, () => html `
                 <div part="connector" class="${classMap({ 'is-completed': x.state === 'completed' })}"></div>
                 `)}
+                <div part="content">
+                    <slot .name="${`step-${index}`}"
+                          @slotchange="${() => e.onSlotChange()}"></slot>
+                </div>
             </div>
             `)}
         </div>
+    `;
+    return html `
+        ${when(e.orientation === Orientation.Vertical, () => html `
+        <slot name="steps"
+              style="display:none"
+              @slotchange="${() => e.onSlotChange()}"></slot>
+        `)}
+        <div part="header"
+             class="${classMap({ [`is-${e.orientation}`]: true })}">
+            ${repeat(e.items, (x) => x, (x, index) => html `
+            ${renderStep(x, index)}
+            `)}
+        </div>
+        ${when(e.orientation === Orientation.Horizontal, () => html `
         <div part="content">
             <slot name="steps"
                   @slotchange="${() => e.onSlotChange()}"></slot>
         </div>
+        `)}
         <div part="footer"
              ?hidden="${!e.hasSlotContent('footer')}">
             <slot name="footer"

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

@@ -1 +1 @@
-{"version":3,"file":"StepperElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElementTemplate.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"StepperElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAMzD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAA2B,CAAI;IACjE,MAAM,YAAY,GAAG,CAAC,KAAwC,EAAU,EAAE;QACtE,QAAQ,KAAK,EAAE,CAAC;YACZ,KAAK,WAAW;gBACZ,OAAO,KAAK,CAAC,aAAa,CAAC;YAC/B,KAAK,OAAO;gBACR,OAAO,KAAK,CAAC,WAAW,CAAC;YAC7B,KAAK,SAAS;gBACV,OAAO,EAAE,CAAC;YACd;gBACI,OAAO,EAAE,CAAC;QAClB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAwC,EAAW,EAAE;QAC1E,QAAQ,KAAK,EAAE,CAAC;YACZ,KAAK,WAAW;gBACZ,OAAO,SAAS,CAAC;YACrB,KAAK,OAAO;gBACR,OAAO,QAAQ,CAAC;YACpB,KAAK,SAAS,CAAC;YACf;gBACI,OAAO,SAAS,CAAC;QACzB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAAqB,EAAE,KAAa,EAAkB,EAAE,CAAC,IAAI,CAAA;;sBAE/D,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,UAAU,EAAE,cAAc,EAAE,CAAC,CAAC,KAAK,KAAK,WAAW,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;;6BAE1G,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,UAAU,EAAE,cAAc,EAAE,CAAC,CAAC,KAAK,KAAK,WAAW,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;;;qCAGzG,CAAC,CAAC,UAAU;qCACZ,KAAK,GAAG,CAAC;oCACV,CAAC,CAAC,KAAK,CAAC,MAAM;iCACjB,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ;8BAC3B,GAAG,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;;;;yCAIb,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;yCACvC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;4CACd,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC;+CACrB,OAAO;;;;0CAIZ,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,WAAW,IAAI,EAAE;sBACnD,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEjB,CAAC,CAAC,WAAW;qBAClC,CAAC;sBACA,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEV,CAAC,CAAC,IAAI;qBAC3B,CAAC;;;cAGR,IAAI,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,IAAI,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;2CAC1D,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;aACnF,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0BAE3C,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,UAAU,EAAE,cAAc,EAAE,CAAC,CAAC,KAAK,KAAK,WAAW,EAAE,SAAS,EAAE,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;kBACjI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;+CACd,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;iBACnF,CAAC;;mCAEiB,QAAQ,KAAK,EAAE;yCACT,GAAG,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;;;aAGlD,CAAC;;KAET,CAAC;IAEF,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;6BAGpC,GAAG,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;SAC1C,CAAC;;sBAEY,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;cACnD,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;cAC5C,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC;aACrB,CAAC;;UAEJ,IAAI,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;iCAGlC,GAAG,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;;SAE9C,CAAC;;wBAEc,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC;;iCAElB,CAAC,CAAQ,EAAE,EAAE,CAAC,QAAQ,CAAE,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAG,CAAC,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;;KAE9J,CAAC;AACN,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=StepperSlot.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+// #region Functions
+/**
+ * Returns the generated slot name for a vertical step item.
+ *
+ * @internal
+ */
+export function getStepperItemSlotName(index) {
+    return `step-${index}`;
+}
+// #endregion
+//# sourceMappingURL=StepperSlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperSlot.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperSlot.ts"],"names":[],"mappings":"AAAA,oBAAoB;AAEpB;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAC,KAAa;IAChD,OAAO,QAAQ,KAAK,EAAE,CAAC;AAC3B,CAAC;AAED,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepperElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAqL3D"}
+{"version":3,"file":"StepperElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAgN3D"}

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

@@ -105,19 +105,46 @@ export function stepperElementCosmopolitanStyle() {
 
 :host [part="header"].is-vertical {
   flex-direction: column;
+  gap: 0;
 }
 
 :host [part="header"].is-vertical [part="step-container"] {
   flex-direction: column;
-  align-items: flex-start;
+  flex: none;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+}
+
+:host [part="header"].is-vertical [part="step-body"] {
+  grid-template-columns: var(--stepper-icon-size) minmax(0, 1fr);
+  -moz-column-gap: var(--stepper-gap);
+  column-gap: var(--stepper-gap);
+  min-height: var(--stepper-vertical-connector-length);
+  width: 100%;
+  display: grid;
+}
+
+:host [part="header"].is-vertical [part="step-body"] [part="content"] {
+  padding-bottom: var(--stepper-content-gap);
+  grid-column: 2;
+  min-width: 0;
+  margin-top: 0;
+  display: none;
+}
+
+:host [part="header"].is-vertical [part="step-body"].is-active [part="content"] {
+  display: block;
 }
 
-:host [part="header"].is-vertical [part="connector"] {
+:host [part="header"].is-vertical [part="step-body"] [part="connector"] {
   min-width: unset;
   width: var(--stepper-connector-size);
-  height: var(--stepper-vertical-connector-length);
+  height: auto;
   min-height: 48px;
   margin: var(--stepper-vertical-connector-margin) 0;
+  grid-column: 1;
+  place-self: stretch center;
 }
 
 :host [part="step-container"] {
@@ -178,7 +205,7 @@ export function stepperElementCosmopolitanStyle() {
   flex: 1 1 0;
 }
 
-:host [part="content"], :host [part="footer"] {
+:host > [part="content"], :host > [part="footer"] {
   margin-top: var(--stepper-content-gap);
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"StepperElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.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,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmLT,CAAC;AACN,CAAC"}
+{"version":3,"file":"StepperElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.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,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8MT,CAAC;AACN,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepperElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAwQlD"}
+{"version":3,"file":"StepperElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAmSlD"}

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

@@ -105,19 +105,46 @@ export function stepperElementJoyStyle() {
 
 :host [part="header"].is-vertical {
   flex-direction: column;
+  gap: 0;
 }
 
 :host [part="header"].is-vertical [part="step-container"] {
   flex-direction: column;
-  align-items: flex-start;
+  flex: none;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
 }
 
-:host [part="header"].is-vertical [part="connector"] {
+:host [part="header"].is-vertical [part="step-body"] {
+  grid-template-columns: var(--stepper-icon-size) minmax(0, 1fr);
+  -moz-column-gap: var(--stepper-gap);
+  column-gap: var(--stepper-gap);
+  min-height: var(--stepper-vertical-connector-length);
+  width: 100%;
+  display: grid;
+}
+
+:host [part="header"].is-vertical [part="step-body"] [part="content"] {
+  padding-bottom: var(--stepper-content-gap);
+  grid-column: 2;
+  min-width: 0;
+  margin-top: 0;
+  display: none;
+}
+
+:host [part="header"].is-vertical [part="step-body"].is-active [part="content"] {
+  display: block;
+}
+
+:host [part="header"].is-vertical [part="step-body"] [part="connector"] {
   min-width: unset;
   width: var(--stepper-connector-size);
-  height: var(--stepper-vertical-connector-length);
+  height: auto;
   min-height: 48px;
   margin: var(--stepper-vertical-connector-margin) 0;
+  grid-column: 1;
+  place-self: stretch center;
 }
 
 :host [part="step-container"] {
@@ -178,7 +205,7 @@ export function stepperElementJoyStyle() {
   flex: 1 1 0;
 }
 
-:host [part="content"], :host [part="footer"] {
+:host > [part="content"], :host > [part="footer"] {
   margin-top: var(--stepper-content-gap);
 }
 
@@ -198,8 +225,8 @@ export function stepperElementJoyStyle() {
   outline-color: var(--joy-color-primary-500);
 }
 
-:host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="state-index"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-icon) {
-  color: var(--joy-color-primary-500);
+:host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="step-icon"] [part="step-state"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-icon) {
+  background: var(--joy-color-primary-500);
 }
 
 :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="step-text"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-text) {
@@ -207,22 +234,22 @@ export function stepperElementJoyStyle() {
   font-weight: 600;
 }
 
-:host [part="step-container"] [part="step"] [part="step-icon"] {
+:host [part="step-container"] [part="step"] [part="step-icon"] [part="step-state"] {
   color: var(--joy-scheme-foreground);
   background-color: var(--joy-scheme-highlight);
 }
 
-:host [part="step-container"] [part="step"].is-active [part="step-icon"] {
+:host [part="step-container"] [part="step"].is-active [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-primary-0);
   background-color: var(--joy-color-primary-500);
 }
 
-:host [part="step-container"] [part="step"].is-completed [part="step-icon"] {
+:host [part="step-container"] [part="step"].is-completed [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-success-0);
   background-color: var(--joy-color-success-500);
 }
 
-:host [part="step-container"] [part="step"].is-error [part="step-icon"] {
+:host [part="step-container"] [part="step"].is-error [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-danger-0);
   background-color: var(--joy-color-danger-500);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"StepperElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsQT,CAAC;AACN,CAAC"}
+{"version":3,"file":"StepperElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiST,CAAC;AACN,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepperElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAqLtD"}
+{"version":3,"file":"StepperElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAgNtD"}