@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/esm/ds-shape.entry.js

@@ -1,9 +1,10 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { E as h, B as registerInstance, F as Host, G as getElement } from './index-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
-import { s as setupValidation, a as ValidateOneOf } from './validate.decorator-82RSSk25.js';
+import { E as h, B as registerInstance, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { O as OneOf } from './one-of-CKPv0Nqm.js';
+import './create-validator-decorator-DovxquEu.js';
 
 const shapes = [
     h("g", { id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
@@ -31,7 +32,7 @@ const Shape = class {
         registerInstance(this, hostRef);
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * The shape color
@@ -49,19 +50,12 @@ const Shape = class {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        setupValidation(this);
-    }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Host, { key: 'a4997790624c0ff88a0cb47049adc3a7663b0078', "aria-hidden": "true" }, h("svg", { key: '8b3f862c7d9976fb0fe1560b890ca29eb7730054', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true" }, shapes[parseInt(this.variation) - 1])));
+        return (h(Host, { key: 'e38fc0e4417b0c820f4f48b3bd6276e3ca745f74', "aria-hidden": "true" }, h("svg", { key: '64feadb80b8a95f7b7d230e9a601a9ad4aabd83f', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true" }, shapes[parseInt(this.variation) - 1])));
     }
     get el() { return getElement(this); }
 };
@@ -72,15 +66,15 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Shape.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...SHAPE_COLORS),
+    OneOf(SHAPE_COLORS),
     __metadata("design:type", String)
 ], Shape.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...SHAPE_ROTATIONS),
+    OneOf(SHAPE_ROTATIONS),
     __metadata("design:type", String)
 ], Shape.prototype, "rotation", void 0);
 __decorate([
-    ValidateOneOf(...SHAPE_VARIATIONS),
+    OneOf(SHAPE_VARIATIONS),
     __metadata("design:type", String)
 ], Shape.prototype, "variation", void 0);
 Shape.style = shapeHostCss();

package/dist/esm/ds-snackbar.entry.js

@@ -1,16 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, D as raf, E as h, F as Host, G as getElement } from './index-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
-import { s as stopEventBubbling } from './form-control-D2O-sb65.js';
-import { s as sanitizeSvg } from './svg-BaIoYrFa.js';
-import { s as setupValidation, a as ValidateOneOf, V as ValidateType } from './validate.decorator-82RSSk25.js';
-import { B as BUTTON_TARGETS } from './button.interfaces-BkESlUMc.js';
-import { d as dsBreakpoints } from './breakpoints.subject-BhbzG-rl.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-L2xeP46f.js';
-import './listener-C_kjUVTE.js';
-import './device-Dhwt3m7W.js';
+import { B as registerInstance, I as createEvent, D as raf, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { s as stopEventBubbling } from './form-control-DvJo0GKN.js';
+import { h as hasValue } from './has-value-DU9L2JaI.js';
+import { s as sanitizeSvg } from './svg-B8KVoKrH.js';
+import { B as BUTTON_TARGETS } from './button.interfaces-BPGfTrrM.js';
+import { d as dsBreakpoints } from './breakpoints.subject-BNnXcKMw.js';
+import { O as OneOf } from './one-of-CKPv0Nqm.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-DZ0xN4Np.js';
+import './create-validator-decorator-DovxquEu.js';
+import './listener-DHP2OPMZ.js';
+import './device-CRuIJzXR.js';
 
 const SNACKBAR_COLORS = ['base', 'info', 'success', 'warning', 'danger'];
 
@@ -89,30 +92,27 @@ const Snackbar = class {
          * ------------------------------------------------------
          */
         this.generateSvgContent = () => {
-            if (this.svg !== undefined && this.svg.length > 0) {
-                this.svgContent = sanitizeSvg(this.svg);
+            if (hasValue(this.svg) && this.svg.length > 0) {
+                return sanitizeSvg(this.svg);
             }
+            return undefined;
         };
         this.generateIconName = () => {
-            if (this.icon !== undefined && this.icon.length > 0) {
-                this.iconName = this.icon;
+            if (hasValue(this.icon) && this.icon.length > 0) {
+                return this.icon;
             }
             else {
                 switch (this.color) {
                     case 'info':
-                        this.iconName = 'information';
-                        break;
+                        return 'information';
                     case 'success':
-                        this.iconName = 'check';
-                        break;
+                        return 'check';
                     case 'warning':
-                        this.iconName = 'alert';
-                        break;
+                        return 'alert';
                     case 'danger':
-                        this.iconName = 'alert';
-                        break;
+                        return 'alert';
                     default:
-                        this.iconName = 'bell';
+                        return 'bell';
                 }
             }
         };
@@ -120,21 +120,10 @@ const Snackbar = class {
     createLogger(log) {
         this.log = log;
     }
-    iconChanged() {
-        this.generateIconName();
-    }
-    svgChanged() {
-        this.generateSvgContent();
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.generateIconName();
-        this.generateSvgContent();
-    }
     componentDidLoad() {
         raf(() => {
             this.didLoad = true;
@@ -164,35 +153,29 @@ const Snackbar = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '7a2a073241429ca810303c4e5b38b8fa743abbe6', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
+        const iconName = this.generateIconName();
+        const svgContent = this.generateSvgContent();
+        return (h(Host, { key: '66c571295c3931b071bb104e339febfac87db6df', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
                 [`is-ready`]: this.didLoad,
                 [`is-visible`]: this.visible,
                 [`is-closable`]: this.closable,
                 [`is-mobile-open`]: this.isMobile && this.mobileOpenState,
                 [`is-mobile-closed`]: this.isMobile && !this.mobileOpenState,
-                [`is-${this.color}`]: this.color !== undefined,
-            } }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: '976d03fba1eefd18755599c2d78e9c352a7b5956', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: this.iconName, onClick: () => (this.mobileOpenState = true) })), this.iconName && !this.svgContent && (h("ds-icon", { key: 'e51745c2391c63868d656720b3b038f32359b162', part: "icon", id: "icon", name: this.iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
+                [`is-${this.color}`]: hasValue(this.color),
+            } }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: '9f9cedbf2fed42189e302a0aebc9852a2771136e', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: iconName, onClick: () => (this.mobileOpenState = true) })), iconName && !svgContent && (h("ds-icon", { key: 'a4c826d95d2041345bf4cee0540cb172f5336c79', part: "icon", id: "icon", name: iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
                 ? 'triangle'
                 : this.color === 'danger' || this.color === 'success' || this.color === 'info'
                     ? 'circle'
-                    : undefined })), this.svgContent && h("ds-icon", { key: 'd2ccf9ea722f1623c18d4bc45707f8e825c8b4c7', id: "icon", part: "icon", svg: this.svgContent, size: 'xl' }), h("span", { key: '010a6008747f9de90c9c9b5ca64ff3ce73b8aa7e', part: "content", id: "content" }, this.heading && h("h2", { key: '530e714313e9bde8bf25eb0a294ef22f57887ed8', part: "heading" }, this.heading), h("span", { key: '6d30252391b5b988f6084fe821384b98f9be2d7f', part: "message" }, this.message, h("slot", { key: '2e4762c4c3801ca4297a8f0a51d48d4fcbcac543' }))), h("ds-button-group", { key: '1a765e24fcbb54c99aa635248a9c6a46492917dd', part: "action", id: "action" }, h("slot", { key: 'feb9e40fd5da910fafa46a8bf4aa8b5e2849808c', name: "action" }), this.action && (h("ds-button", { key: '57bfc5b640d75df3cf304523365abf6398644317', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
+                    : undefined })), svgContent && h("ds-icon", { key: 'cdb9be5a9499d7ffad58c8c2e5a9096963b67f69', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), h("span", { key: '52810e3cb684318ce4fd8ec8be8529f63a8e8e8b', part: "content", id: "content" }, this.heading && h("h2", { key: '8ae2906a4ffabbc970c9c995c5d9efb0cc94fbc8', part: "heading" }, this.heading), h("span", { key: 'affd6a8d4ce4c19274a8c760f00f0a051bbae56e', part: "message" }, this.message, h("slot", { key: '75fd4ab26f8f6f8d1d89d2c1e0428b53bb3d75c5' }))), h("ds-button-group", { key: '0c644ee957e3a615e2c7fa030d537bea002e72ca', part: "action", id: "action" }, h("slot", { key: '840fb7d2be9fcf41ffa5b4eeff53d4a1b26d209a', name: "action" }), this.action && (h("ds-button", { key: '18d900d559bd085b5732ec37484622ee9da199ff', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
                 stopEventBubbling(ev);
                 this.dsActionClick.emit(ev);
                 this.actionHandler(this.alertId);
-            } }, this.action)), this.closable && (h("ds-close", { key: 'cead09e8bcb5798f346a048dd9b82c675e359413', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
+            } }, this.action)), this.closable && (h("ds-close", { key: 'd8c8c528cff2edbfac7a23488271c2071d5a84df', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
             } })))));
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "icon": [{
-                "iconChanged": 0
-            }],
-        "svg": [{
-                "svgChanged": 0
-            }]
-    }; }
 };
 __decorate([
     Logger('snackbar'),
@@ -201,43 +184,43 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Snackbar.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...SNACKBAR_COLORS),
+    OneOf(SNACKBAR_COLORS),
     __metadata("design:type", String)
 ], Snackbar.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Snackbar.prototype, "closable", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "heading", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "message", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "icon", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "svg", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "action", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "actionIcon", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_TARGETS),
+    OneOf(BUTTON_TARGETS),
     __metadata("design:type", String)
 ], Snackbar.prototype, "actionTarget", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "actionHref", void 0);
 __decorate([

package/dist/esm/ds-step-panel.entry.js

@@ -0,0 +1,53 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { R as Required } from './required-Dqsbx5fH.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import './create-validator-decorator-DovxquEu.js';
+
+const stepPanelHostCss = () => `:host{--_step-panel-padding:var(--step-panel-padding, var(--mod-step-panel-padding, var(--ds-step-panel-padding)));display:none}:host(.is-selected){display:block;padding:var(--_step-panel-padding)}`;
+
+const StepPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * If `true`, the panel is visible. Managed by the parent ds-steps.
+         */
+        this.selected = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: '9100c4970632362a24e7556dad16a9ae78c26c99', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: '0e5d9adbdb99773a528ee99c4f74830ace3bd6e4' })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('step-panel'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], StepPanel.prototype, "createLogger", null);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], StepPanel.prototype, "for", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], StepPanel.prototype, "selected", void 0);
+StepPanel.style = stepPanelHostCss();
+
+export { StepPanel as ds_step_panel };

package/dist/esm/ds-step.entry.js

@@ -0,0 +1,168 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import { R as Required } from './required-Dqsbx5fH.js';
+import './create-validator-decorator-DovxquEu.js';
+
+const stepHostCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;min-width:0;position:relative;outline:none}:host(.is-hidden){display:none}.circle{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;position:relative;z-index:1;-ms-flex-negative:0;flex-shrink:0;width:var(--_steps-circle-size);height:var(--_steps-circle-size);border-radius:9999px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--_steps-circle-color-bg);color:var(--_steps-circle-color-text);font-family:var(--_steps-step-font-family);font-size:var(--_steps-step-font-size);font-weight:var(--_steps-step-font-weight);-webkit-transition:background-color 180ms ease,color 180ms ease;transition:background-color 180ms ease,color 180ms ease;cursor:pointer}:host(.is-disabled) .circle{cursor:not-allowed}.step-invalid{color:var(--_steps-circle-color-text-invalid);font-family:var(--_steps-step-font-family);font-size:var(--_steps-step-font-size);font-weight:var(--_steps-step-font-weight);line-height:1}:host(.is-selected) .circle{background-color:var(--_steps-circle-color-bg-selected);color:var(--_steps-circle-color-text-selected)}:host(.is-done) .circle{background-color:var(--_steps-circle-color-bg-done);color:var(--_steps-circle-color-text-done)}:host(.is-invalid) .circle{background-color:var(--_steps-circle-color-bg-invalid);color:var(--_steps-circle-color-text-invalid)}:host(.is-disabled) .circle{background-color:var(--_steps-circle-color-bg-disabled);color:var(--_steps-circle-color-text-disabled);opacity:.5}.step-label{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;margin-top:.5rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--_steps-step-color);font-family:var(--_steps-step-font-family);font-size:var(--_steps-step-font-size);font-weight:var(--_steps-step-font-weight);-webkit-transition:color 180ms ease;transition:color 180ms ease}:host(.is-selected) .step-label{color:var(--_steps-step-color-selected)}:host(.is-disabled) .step-label{opacity:.4}.connector{position:absolute;top:calc(var(--_steps-circle-size)/2);-webkit-transform:translateY(-50%);transform:translateY(-50%);left:calc(50% + var(--_steps-circle-size)/2 + 4px);right:calc(-50% + var(--_steps-circle-size)/2 + 4px);height:var(--_steps-connector-height);border-radius:9999px;background-color:var(--_steps-connector-color);z-index:0;-webkit-transition:background-color 180ms ease;transition:background-color 180ms ease}:host(.is-filled) .connector{background-color:var(--_steps-connector-color-filled)}:host(:last-of-type) .connector{display:none}@media screen and (max-width: 768px){.circle{width:var(--_steps-circle-size-sm);height:var(--_steps-circle-size-sm);font-size:var(--_steps-step-font-size-sm);--mod-icon-size:var(--ds-icon-size-sm);--mod-icon-inner-size:var(--ds-icon-size-sm)}.step-label{display:none}.connector{top:calc(var(--_steps-circle-size-sm)/2);left:calc(50% + var(--_steps-circle-size-sm)/2 + 4px);right:calc(-50% + var(--_steps-circle-size-sm)/2 + 4px)}}@media (hover: hover)and (pointer: fine){:host(:focus-visible:not(:active)) .circle{-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_steps-step-color-focus) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_steps-step-color-focus) 0 0 0 5px !important}}:host(.is-vertical){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex:unset;flex:unset;width:100%;padding:.5rem 0}:host(.is-vertical) .circle{-ms-flex-negative:0;flex-shrink:0}:host(.is-vertical) .step-label{display:block;margin-top:0;margin-left:.75rem;text-align:left;white-space:normal}:host(.is-vertical) .connector{display:none}:host(.is-navigation){cursor:default}:host(.is-navigation) ::slotted(a){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:block;margin-top:.5rem;text-align:center;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--_steps-step-color);font-family:var(--_steps-step-font-family);font-size:var(--_steps-step-font-size);font-weight:var(--_steps-step-font-weight);-webkit-transition:color 180ms ease;transition:color 180ms ease;outline:none}:host(.is-navigation.is-selected) ::slotted(a),:host(.is-navigation) ::slotted([aria-current]){color:var(--_steps-step-color-selected)}:host(.is-navigation) ::slotted(a:focus-visible){border-radius:var(--ds-alias-radius-base)}@media (hover: hover)and (pointer: fine){:host(.is-navigation) ::slotted(a:focus-visible){-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_steps-step-color-focus) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_steps-step-color-focus) 0 0 0 5px !important}}:host(.is-navigation.is-vertical) ::slotted(a){margin-top:0;margin-left:.75rem;text-align:left;white-space:normal}@media screen and (max-width: 768px){:host(.is-navigation) ::slotted(a){font-size:var(--_steps-step-font-size-sm)}}`;
+
+const Step = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsStepSelect = createEvent(this, "dsStepSelect");
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Index of the active step. Used to determine connector fill state.
+         * Set by the parent ds-steps.
+         * @internal
+         */
+        this.activeIndex = 0;
+        /**
+         * If `true`, the step cannot be selected.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the step is completed. Shows a checkmark icon in the circle.
+         */
+        this.done = false;
+        /**
+         * If `true`, the step is hidden from the layout.
+         */
+        this.hidden = false;
+        /**
+         * 1-based position index. Set by the parent ds-steps.
+         * @internal
+         */
+        this.index = 0;
+        /**
+         * If `true`, the step has an error. Shows an exclamation mark in the circle.
+         */
+        this.invalid = false;
+        /**
+         * Visible text label displayed below the circle.
+         */
+        this.label = '';
+        /**
+         * Set by ds-steps. When true, renders in navigation mode (slotted <a>).
+         * @internal
+         */
+        this.navigation = false;
+        /**
+         * If `true`, this step is currently selected. Set by the parent ds-steps.
+         * @internal
+         */
+        this.selected = false;
+        /**
+         * Set by ds-steps. When true, renders in vertical layout.
+         * @internal
+         */
+        this.vertical = false;
+        /**
+         * PROPERTY VALIDATION
+         * ------------------------------------------------------
+         */
+        /**
+         * EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleClick = (ev) => {
+            if (this.disabled)
+                return;
+            ev.preventDefault();
+            this.dsStepSelect.emit({ name: this.name });
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled)
+                return;
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                this.dsStepSelect.emit({ name: this.name });
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const hostClass = {
+            'is-selected': this.selected,
+            'is-done': this.done,
+            'is-invalid': this.invalid,
+            'is-disabled': this.disabled,
+            'is-hidden': this.hidden,
+            'is-navigation': this.navigation,
+            'is-vertical': this.vertical,
+            'is-filled': this.index > 0 && this.index < this.activeIndex,
+        };
+        const circleContent = this.done ? (h("ds-icon", { name: "check", color: "white", "aria-hidden": "true" })) : this.invalid ? (h("span", { class: "step-invalid", "aria-hidden": "true" }, "!")) : (h("span", { class: "step-number", "aria-hidden": "true" }, this.index));
+        if (this.navigation) {
+            return (h(Host, { role: "listitem", class: hostClass }, h("span", { class: "circle", "aria-hidden": "true" }, circleContent), h("slot", null), h("span", { class: "connector", "aria-hidden": "true" })));
+        }
+        return (h(Host, { role: "tab", class: hostClass, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : null, tabIndex: this.disabled ? -1 : this.selected ? 0 : -1, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { class: "circle" }, circleContent), this.label && h("span", { class: "step-label" }, this.label), h("span", { class: "connector", "aria-hidden": "true" })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('step'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Step.prototype, "createLogger", null);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Step.prototype, "activeIndex", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "done", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "hidden", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Step.prototype, "index", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Step.prototype, "label", void 0);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], Step.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "navigation", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "selected", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Step.prototype, "vertical", void 0);
+Step.style = stepHostCss();
+
+export { Step as ds_step };