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

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

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
-var validate_decorator = require('./validate.decorator-C9-9HA0Y.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
 
 const shapes = [
     index.h("g", { id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, index.h("g", { id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, index.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" }))),
@@ -33,7 +34,7 @@ const Shape = class {
         index.registerInstance(this, hostRef);
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * The shape color
@@ -51,19 +52,12 @@ const Shape = class {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        validate_decorator.setupValidation(this);
-    }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
-        return (index.h(index.Host, { key: 'a4997790624c0ff88a0cb47049adc3a7663b0078', "aria-hidden": "true" }, index.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 (index.h(index.Host, { key: 'e38fc0e4417b0c820f4f48b3bd6276e3ca745f74', "aria-hidden": "true" }, index.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 index.getElement(this); }
 };
@@ -74,15 +68,15 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Shape.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...SHAPE_COLORS),
+    oneOf.OneOf(SHAPE_COLORS),
     tslib_es6.__metadata("design:type", String)
 ], Shape.prototype, "color", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...SHAPE_ROTATIONS),
+    oneOf.OneOf(SHAPE_ROTATIONS),
     tslib_es6.__metadata("design:type", String)
 ], Shape.prototype, "rotation", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...SHAPE_VARIATIONS),
+    oneOf.OneOf(SHAPE_VARIATIONS),
     tslib_es6.__metadata("design:type", String)
 ], Shape.prototype, "variation", void 0);
 Shape.style = shapeHostCss();

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

@@ -3,16 +3,19 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
-var formControl = require('./form-control-Bno2tBGf.js');
-var svg = require('./svg-D7Mwbcvp.js');
-var validate_decorator = require('./validate.decorator-C9-9HA0Y.js');
-var button_interfaces = require('./button.interfaces-BueDWsuH.js');
-var breakpoints_subject = require('./breakpoints.subject-DhAN_ZAn.js');
-var breakpoints_decorator = require('./breakpoints.decorator-qaoHOU6Q.js');
-require('./listener-DgVWqfa1.js');
-require('./device-CptgCtVc.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var formControl = require('./form-control-CtMcJUuC.js');
+var hasValue = require('./has-value-DK0oRqXI.js');
+var svg = require('./svg-D9RbiR8R.js');
+var button_interfaces = require('./button.interfaces-CqlUGR-N.js');
+var breakpoints_subject = require('./breakpoints.subject-XNcGwhzh.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var type = require('./type-hmc4CJcO.js');
+var breakpoints_decorator = require('./breakpoints.decorator-C-Qm21UK.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+require('./listener-BwB_xent.js');
+require('./device-BnjBOLnP.js');
 
 const SNACKBAR_COLORS = ['base', 'info', 'success', 'warning', 'danger'];
 
@@ -91,30 +94,27 @@ const Snackbar = class {
          * ------------------------------------------------------
          */
         this.generateSvgContent = () => {
-            if (this.svg !== undefined && this.svg.length > 0) {
-                this.svgContent = svg.sanitizeSvg(this.svg);
+            if (hasValue.hasValue(this.svg) && this.svg.length > 0) {
+                return svg.sanitizeSvg(this.svg);
             }
+            return undefined;
         };
         this.generateIconName = () => {
-            if (this.icon !== undefined && this.icon.length > 0) {
-                this.iconName = this.icon;
+            if (hasValue.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';
                 }
             }
         };
@@ -122,21 +122,10 @@ const Snackbar = class {
     createLogger(log) {
         this.log = log;
     }
-    iconChanged() {
-        this.generateIconName();
-    }
-    svgChanged() {
-        this.generateSvgContent();
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        validate_decorator.setupValidation(this);
-        this.generateIconName();
-        this.generateSvgContent();
-    }
     componentDidLoad() {
         index.raf(() => {
             this.didLoad = true;
@@ -166,35 +155,29 @@ const Snackbar = class {
      * ------------------------------------------------------
      */
     render() {
-        return (index.h(index.Host, { key: '7a2a073241429ca810303c4e5b38b8fa743abbe6', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
+        const iconName = this.generateIconName();
+        const svgContent = this.generateSvgContent();
+        return (index.h(index.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 && (index.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 && (index.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.hasValue(this.color),
+            } }, this.isMobile && !this.mobileOpenState && (index.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 && (index.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 && index.h("ds-icon", { key: 'd2ccf9ea722f1623c18d4bc45707f8e825c8b4c7', id: "icon", part: "icon", svg: this.svgContent, size: 'xl' }), index.h("span", { key: '010a6008747f9de90c9c9b5ca64ff3ce73b8aa7e', part: "content", id: "content" }, this.heading && index.h("h2", { key: '530e714313e9bde8bf25eb0a294ef22f57887ed8', part: "heading" }, this.heading), index.h("span", { key: '6d30252391b5b988f6084fe821384b98f9be2d7f', part: "message" }, this.message, index.h("slot", { key: '2e4762c4c3801ca4297a8f0a51d48d4fcbcac543' }))), index.h("ds-button-group", { key: '1a765e24fcbb54c99aa635248a9c6a46492917dd', part: "action", id: "action" }, index.h("slot", { key: 'feb9e40fd5da910fafa46a8bf4aa8b5e2849808c', name: "action" }), this.action && (index.h("ds-button", { key: '57bfc5b640d75df3cf304523365abf6398644317', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
+                    : undefined })), svgContent && index.h("ds-icon", { key: 'cdb9be5a9499d7ffad58c8c2e5a9096963b67f69', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), index.h("span", { key: '52810e3cb684318ce4fd8ec8be8529f63a8e8e8b', part: "content", id: "content" }, this.heading && index.h("h2", { key: '8ae2906a4ffabbc970c9c995c5d9efb0cc94fbc8', part: "heading" }, this.heading), index.h("span", { key: 'affd6a8d4ce4c19274a8c760f00f0a051bbae56e', part: "message" }, this.message, index.h("slot", { key: '75fd4ab26f8f6f8d1d89d2c1e0428b53bb3d75c5' }))), index.h("ds-button-group", { key: '0c644ee957e3a615e2c7fa030d537bea002e72ca', part: "action", id: "action" }, index.h("slot", { key: '840fb7d2be9fcf41ffa5b4eeff53d4a1b26d209a', name: "action" }), this.action && (index.h("ds-button", { key: '18d900d559bd085b5732ec37484622ee9da199ff', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
                 formControl.stopEventBubbling(ev);
                 this.dsActionClick.emit(ev);
                 this.actionHandler(this.alertId);
-            } }, this.action)), this.closable && (index.h("ds-close", { key: 'cead09e8bcb5798f346a048dd9b82c675e359413', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
+            } }, this.action)), this.closable && (index.h("ds-close", { key: 'd8c8c528cff2edbfac7a23488271c2071d5a84df', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
                 formControl.stopEventBubbling(ev);
                 this.close();
             } })))));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "icon": [{
-                "iconChanged": 0
-            }],
-        "svg": [{
-                "svgChanged": 0
-            }]
-    }; }
 };
 tslib_es6.__decorate([
     tslib_es6.Logger('snackbar'),
@@ -203,43 +186,43 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Snackbar.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...SNACKBAR_COLORS),
+    oneOf.OneOf(SNACKBAR_COLORS),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "color", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Snackbar.prototype, "closable", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "heading", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "message", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "icon", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "svg", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "action", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "actionIcon", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...button_interfaces.BUTTON_TARGETS),
+    oneOf.OneOf(button_interfaces.BUTTON_TARGETS),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "actionTarget", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "actionHref", void 0);
 tslib_es6.__decorate([

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

@@ -0,0 +1,55 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var required = require('./required-COz3Unzu.js');
+var type = require('./type-hmc4CJcO.js');
+require('./create-validator-decorator-BIgFqrMJ.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) {
+        index.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 (index.h(index.Host, { key: '9100c4970632362a24e7556dad16a9ae78c26c99', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, index.h("slot", { key: '0e5d9adbdb99773a528ee99c4f74830ace3bd6e4' })));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('step-panel'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], StepPanel.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    required.Required(),
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], StepPanel.prototype, "for", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], StepPanel.prototype, "selected", void 0);
+StepPanel.style = stepPanelHostCss();
+
+exports.ds_step_panel = StepPanel;

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

@@ -0,0 +1,170 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var type = require('./type-hmc4CJcO.js');
+var required = require('./required-COz3Unzu.js');
+require('./create-validator-decorator-BIgFqrMJ.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) {
+        index.registerInstance(this, hostRef);
+        this.dsStepSelect = index.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 ? (index.h("ds-icon", { name: "check", color: "white", "aria-hidden": "true" })) : this.invalid ? (index.h("span", { class: "step-invalid", "aria-hidden": "true" }, "!")) : (index.h("span", { class: "step-number", "aria-hidden": "true" }, this.index));
+        if (this.navigation) {
+            return (index.h(index.Host, { role: "listitem", class: hostClass }, index.h("span", { class: "circle", "aria-hidden": "true" }, circleContent), index.h("slot", null), index.h("span", { class: "connector", "aria-hidden": "true" })));
+        }
+        return (index.h(index.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 }, index.h("span", { class: "circle" }, circleContent), this.label && index.h("span", { class: "step-label" }, this.label), index.h("span", { class: "connector", "aria-hidden": "true" })));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('step'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Step.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    type.Type('number'),
+    tslib_es6.__metadata("design:type", Number)
+], Step.prototype, "activeIndex", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Step.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Step.prototype, "done", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Step.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    type.Type('number'),
+    tslib_es6.__metadata("design:type", Number)
+], Step.prototype, "index", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Step.prototype, "invalid", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], Step.prototype, "label", void 0);
+tslib_es6.__decorate([
+    required.Required(),
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], Step.prototype, "name", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Step.prototype, "navigation", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Step.prototype, "selected", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Step.prototype, "vertical", void 0);
+Step.style = stepHostCss();
+
+exports.ds_step = Step;