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

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-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { O as OneOf } from './one-of-CjRvS2Tk.js';
+import './create-validator-decorator-fUav5byo.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: '7992728e9058b4aa1df34a66625315314a53b854', "aria-hidden": "true" }, h("svg", { key: '4a1384043bf0c8cb44971a726dd760f1046dde00', 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,20 +1,23 @@
 /*!
  * (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-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { s as stopEventBubbling } from './form-control-DhinyMa9.js';
+import { h as hasValue } from './has-value-Dmsj8ZQw.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-DHZ7TzYV.js';
+import { O as OneOf } from './one-of-CjRvS2Tk.js';
+import { T as Type } from './type-7qEQcw90.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-D9M4v98c.js';
+import './create-validator-decorator-fUav5byo.js';
+import './listener-DIZDQOuO.js';
+import './device-CapioAfe.js';
 
 const SNACKBAR_COLORS = ['base', 'info', 'success', 'warning', 'danger'];
 
-const snackbarHostCss = () => `:host{--_snackbar-position:var(--snackbar-position, var(--mod-snackbar-position, static));--_snackbar-top:var(--snackbar-top, var(--mod-snackbar-top));--_snackbar-right:var(--snackbar-right, var(--mod-snackbar-right));--_snackbar-bottom:var(--snackbar-bottom, var(--mod-snackbar-bottom));--_snackbar-left:var(--snackbar-left, var(--mod-snackbar-left));position:var(--_snackbar-position);top:var(--_snackbar-top);right:var(--_snackbar-right);bottom:var(--_snackbar-bottom);left:var(--_snackbar-left);--_snackbar-m:var(--snackbar-m, var(--mod-snackbar-m, 0));--_snackbar-my:var(--snackbar-my, var(--mod-snackbar-my));--_snackbar-mx:var(--snackbar-mx, var(--mod-snackbar-mx));--_snackbar-ml:var(--snackbar-ml, var(--mod-snackbar-ml));--_snackbar-mr:var(--snackbar-mr, var(--mod-snackbar-mr));--_snackbar-mt:var(--snackbar-mt, var(--mod-snackbar-mt));--_snackbar-mb:var(--snackbar-mb, var(--mod-snackbar-mb));margin:var(--_snackbar-m);margin-inline:var(--_snackbar-mx);margin-block:var(--_snackbar-my);margin-left:var(--_snackbar-ml);margin-right:var(--_snackbar-mr);margin-top:var(--_snackbar-mt);margin-bottom:var(--_snackbar-mb);--_snackbar-shadow:var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--ds-alias-shadow-box-base)));--_snackbar-radius:var(--snackbar-radius, var(--mod-snackbar-radius, var(--ds-snackbar-radius)));--_snackbar-bg:var(--snackbar-bg, var(--mod-snackbar-bg, var(--ds-snackbar-default-color-bg-base)));--_snackbar-color:var(--snackbar-color, var(--mod-snackbar-color, var(--ds-snackbar-default-color-text-base)));--_snackbar-icon-color:var(--snackbar-icon-color, var(--mod-snackbar-icon-color, var(--ds-snackbar-default-color-icon-base)));--_snackbar-progress-duration:var(--snackbar-progress-duration, var(--mod-snackbar-progress-duration, 0));--_snackbar-progress-bar-bg:var(--snackbar-progress-bar-bg, var(--mod-snackbar-progress-bar-bg, var(--ds-snackbar-default-color-progress-bar-base)));--_snackbar-progress-bg:var(--snackbar-progress-bg, var(--mod-snackbar-progress-bg, var(--ds-snackbar-default-color-progress-bg-base)));--_snackbar-heading-font-family:var(--snackbar-heading-font-family, var(--mod-snackbar-heading-font-family, var(--ds-text-family-heading)));--_snackbar-heading-font-weight:var(--snackbar-heading-font-weight, var(--mod-snackbar-heading-font-weight, var(--ds-text-weight-bold)));--_snackbar-heading-font-size:var(--snackbar-heading-font-size, var(--mod-snackbar-heading-font-size, var(--ds-text-size-base-device)));--_snackbar-heading-line-height:var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--ds-text-line-height-heading)));--_snackbar-content-font-family:var(--snackbar-content-font-family, var(--mod-snackbar-content-font-family, var(--ds-text-family-body)));--_snackbar-content-font-weight:var(--snackbar-content-font-weight, var(--mod-snackbar-content-font-weight, inherit));--_snackbar-content-font-size:var(--snackbar-content-font-size, var(--mod-snackbar-content-font-size, var(--ds-text-size-sm-device)));--_snackbar-content-line-height:var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--ds-text-line-height-body)));--_snackbar-gap:var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));--_snackbar-p:var(--snackbar-p, var(--mod-snackbar-p, 1rem));--_snackbar-animation-start-opacity:var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));--_snackbar-animation-start-transform:var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));--_snackbar-animation-transition:var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));--_snackbar-animation-end-opacity:var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));--_snackbar-animation-end-transform:var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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}@media print{:host{display:none !important}}:host{opacity:var(--_snackbar-animation-start-opacity);-webkit-transform:var(--_snackbar-animation-start-transform);transform:var(--_snackbar-animation-start-transform);-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--_snackbar-color);background:var(--_snackbar-bg);border-radius:var(--_snackbar-radius);-webkit-box-shadow:var(--_snackbar-shadow);box-shadow:var(--_snackbar-shadow);padding:var(--_snackbar-p);-webkit-column-gap:calc(var(--_snackbar-gap)*4);-moz-column-gap:calc(var(--_snackbar-gap)*4);column-gap:calc(var(--_snackbar-gap)*4);row-gap:var(--_snackbar-gap);-ms-flex-align:center;align-items:center}:host #icon{grid-area:icon;align-self:flex-start}:host #content{margin:0 !important;grid-area:content;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_snackbar-heading-font-family);font-weight:var(--_snackbar-heading-font-weight);line-height:var(--_snackbar-heading-line-height);font-size:var(--_snackbar-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_snackbar-content-font-family);font-size:var(--_snackbar-content-font-size);font-weight:var(--_snackbar-content-font-weight);line-height:var(--_snackbar-content-line-height)}:host #action{grid-area:action;align-self:center}:host #action ds-close,:host #action ds-button,:host #action .button{--button-mt:1rem;--button-font-size:var(--ds-button-size-sm);--button-min-height:2rem;--button-min-width:2rem;--button-padding-inline:0.75rem}:host ::slotted(ds-button),:host ::slotted(ds-close),:host ::slotted(ds-button-group){--button-mt:1rem;--button-font-size:var(--ds-button-size-sm);--button-min-height:2rem;--button-min-width:2rem;--button-padding-inline:0.75rem}:host .close,:host ds-close{grid-area:close;align-self:flex-start}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content" ". action"}:host(.is-closable){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close" ". action action"}:host(.is-mobile-closed){display:block;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;--mod-snackbar-p:0;--mod-snackbar-bg:transparent;--mod-snackbar-width:fit-content}:host(.is-mobile-closed) #icon,:host(.is-mobile-closed) #content,:host(.is-mobile-closed) #action{display:none}:host(.is-ready){-webkit-transition:var(--_snackbar-animation-transition);transition:var(--_snackbar-animation-transition)}:host(.is-visible){opacity:var(--_snackbar-animation-end-opacity);-webkit-transform:var(--_snackbar-animation-end-transform);transform:var(--_snackbar-animation-end-transform)}:host(.has-progess-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_snackbar-progress-bg);border-bottom-left-radius:var(--_snackbar-radius);border-bottom-right-radius:var(--_snackbar-radius)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);-webkit-animation:progress var(--_snackbar-progress-duration) linear forwards;animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-info){--mod-snackbar-color:var(--ds-snackbar-info-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-info-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-info-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-info-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-info-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-info-color-progress-bg-base)}:host(.is-success){--mod-snackbar-color:var(--ds-snackbar-success-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-success-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-success-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-success-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-success-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-success-color-progress-bg-base)}:host(.is-warning){--mod-snackbar-color:var(--ds-snackbar-warning-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-warning-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-warning-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-warning-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-warning-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-warning-color-progress-bg-base)}:host(.is-danger){--mod-snackbar-color:var(--ds-snackbar-danger-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-danger-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-danger-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-danger-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-danger-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-danger-color-progress-bg-base)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);-webkit-animation:progress var(--_snackbar-progress-duration) linear forwards;animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-paused)::after{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}`;
+const snackbarHostCss = () => `:host{--_snackbar-position:var(--snackbar-position, var(--mod-snackbar-position, static));--_snackbar-top:var(--snackbar-top, var(--mod-snackbar-top));--_snackbar-right:var(--snackbar-right, var(--mod-snackbar-right));--_snackbar-bottom:var(--snackbar-bottom, var(--mod-snackbar-bottom));--_snackbar-left:var(--snackbar-left, var(--mod-snackbar-left));position:var(--_snackbar-position);top:var(--_snackbar-top);right:var(--_snackbar-right);bottom:var(--_snackbar-bottom);left:var(--_snackbar-left);--_snackbar-m:var(--snackbar-m, var(--mod-snackbar-m, 0));--_snackbar-my:var(--snackbar-my, var(--mod-snackbar-my));--_snackbar-mx:var(--snackbar-mx, var(--mod-snackbar-mx));--_snackbar-ml:var(--snackbar-ml, var(--mod-snackbar-ml));--_snackbar-mr:var(--snackbar-mr, var(--mod-snackbar-mr));--_snackbar-mt:var(--snackbar-mt, var(--mod-snackbar-mt));--_snackbar-mb:var(--snackbar-mb, var(--mod-snackbar-mb));margin:var(--_snackbar-m);margin-inline:var(--_snackbar-mx);margin-block:var(--_snackbar-my);margin-left:var(--_snackbar-ml);margin-right:var(--_snackbar-mr);margin-top:var(--_snackbar-mt);margin-bottom:var(--_snackbar-mb);--_snackbar-shadow:var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--ds-alias-shadow-box-base)));--_snackbar-radius:var(--snackbar-radius, var(--mod-snackbar-radius, var(--ds-snackbar-radius)));--_snackbar-bg:var(--snackbar-bg, var(--mod-snackbar-bg, var(--ds-snackbar-default-color-bg-base)));--_snackbar-color:var(--snackbar-color, var(--mod-snackbar-color, var(--ds-snackbar-default-color-text-base)));--_snackbar-icon-color:var(--snackbar-icon-color, var(--mod-snackbar-icon-color, var(--ds-snackbar-default-color-icon-base)));--_snackbar-progress-duration:var(--snackbar-progress-duration, var(--mod-snackbar-progress-duration, 0));--_snackbar-progress-bar-bg:var(--snackbar-progress-bar-bg, var(--mod-snackbar-progress-bar-bg, var(--ds-snackbar-default-color-progress-bar-base)));--_snackbar-progress-bg:var(--snackbar-progress-bg, var(--mod-snackbar-progress-bg, var(--ds-snackbar-default-color-progress-bg-base)));--_snackbar-heading-font-family:var(--snackbar-heading-font-family, var(--mod-snackbar-heading-font-family, var(--ds-alias-text-family-heading)));--_snackbar-heading-font-weight:var(--snackbar-heading-font-weight, var(--mod-snackbar-heading-font-weight, var(--ds-alias-text-weight-bold)));--_snackbar-heading-font-size:var(--snackbar-heading-font-size, var(--mod-snackbar-heading-font-size, var(--ds-alias-text-size-base-device)));--_snackbar-heading-line-height:var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--ds-alias-text-line-height-heading)));--_snackbar-content-font-family:var(--snackbar-content-font-family, var(--mod-snackbar-content-font-family, var(--ds-alias-text-family-body)));--_snackbar-content-font-weight:var(--snackbar-content-font-weight, var(--mod-snackbar-content-font-weight, inherit));--_snackbar-content-font-size:var(--snackbar-content-font-size, var(--mod-snackbar-content-font-size, var(--ds-alias-text-size-sm-device)));--_snackbar-content-line-height:var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--ds-alias-text-line-height-body)));--_snackbar-gap:var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));--_snackbar-p:var(--snackbar-p, var(--mod-snackbar-p, 1rem));--_snackbar-animation-start-opacity:var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));--_snackbar-animation-start-transform:var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));--_snackbar-animation-transition:var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));--_snackbar-animation-end-opacity:var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));--_snackbar-animation-end-transform:var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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}@media print{:host{display:none !important}}:host{opacity:var(--_snackbar-animation-start-opacity);-webkit-transform:var(--_snackbar-animation-start-transform);transform:var(--_snackbar-animation-start-transform);-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--_snackbar-color);background:var(--_snackbar-bg);border-radius:var(--_snackbar-radius);-webkit-box-shadow:var(--_snackbar-shadow);box-shadow:var(--_snackbar-shadow);padding:var(--_snackbar-p);-webkit-column-gap:calc(var(--_snackbar-gap)*4);-moz-column-gap:calc(var(--_snackbar-gap)*4);column-gap:calc(var(--_snackbar-gap)*4);row-gap:var(--_snackbar-gap);-ms-flex-align:center;align-items:center}:host #icon{grid-area:icon;align-self:flex-start}:host #content{margin:0 !important;grid-area:content;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_snackbar-heading-font-family);font-weight:var(--_snackbar-heading-font-weight);line-height:var(--_snackbar-heading-line-height);font-size:var(--_snackbar-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_snackbar-content-font-family);font-size:var(--_snackbar-content-font-size);font-weight:var(--_snackbar-content-font-weight);line-height:var(--_snackbar-content-line-height)}:host #action{grid-area:action;align-self:center}:host #action ds-close,:host #action ds-button,:host #action .button{--button-mt:1rem;--button-font-size:var(--ds-button-size-sm);--button-min-height:2rem;--button-min-width:2rem;--button-padding-inline:0.75rem}:host ::slotted(ds-button),:host ::slotted(ds-close),:host ::slotted(ds-button-group){--button-mt:1rem;--button-font-size:var(--ds-button-size-sm);--button-min-height:2rem;--button-min-width:2rem;--button-padding-inline:0.75rem}:host .close,:host ds-close{grid-area:close;align-self:flex-start}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content" ". action"}:host(.is-closable){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close" ". action action"}:host(.is-mobile-closed){display:block;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;--mod-snackbar-p:0;--mod-snackbar-bg:transparent;--mod-snackbar-width:fit-content}:host(.is-mobile-closed) #icon,:host(.is-mobile-closed) #content,:host(.is-mobile-closed) #action{display:none}:host(.is-ready){-webkit-transition:var(--_snackbar-animation-transition);transition:var(--_snackbar-animation-transition)}:host(.is-visible){opacity:var(--_snackbar-animation-end-opacity);-webkit-transform:var(--_snackbar-animation-end-transform);transform:var(--_snackbar-animation-end-transform)}:host(.has-progess-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_snackbar-progress-bg);border-bottom-left-radius:var(--_snackbar-radius);border-bottom-right-radius:var(--_snackbar-radius)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);-webkit-animation:progress var(--_snackbar-progress-duration) linear forwards;animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-info){--mod-snackbar-color:var(--ds-snackbar-info-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-info-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-info-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-info-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-info-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-info-color-progress-bg-base)}:host(.is-success){--mod-snackbar-color:var(--ds-snackbar-success-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-success-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-success-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-success-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-success-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-success-color-progress-bg-base)}:host(.is-warning){--mod-snackbar-color:var(--ds-snackbar-warning-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-warning-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-warning-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-warning-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-warning-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-warning-color-progress-bg-base)}:host(.is-danger){--mod-snackbar-color:var(--ds-snackbar-danger-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-danger-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-danger-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-danger-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-danger-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-danger-color-progress-bg-base)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);-webkit-animation:progress var(--_snackbar-progress-duration) linear forwards;animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-paused)::after{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}`;
 
 const Snackbar = class {
     constructor(hostRef) {
@@ -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-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { R as Required } from './required-Dtml5IID.js';
+import { T as Type } from './type-7qEQcw90.js';
+import './create-validator-decorator-fUav5byo.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: '069c37c16fab0a456e81b3994a5f130f555a1943', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: 'd5e51ed65c86e3b1f50f7978918ca48a760594bf' })));
+    }
+    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-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { T as Type } from './type-7qEQcw90.js';
+import { R as Required } from './required-Dtml5IID.js';
+import './create-validator-decorator-fUav5byo.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 };