@intelligentgrowthsolutions/eco - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/cjs/eco-button.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoButtonCss = "button{--color:var(--c-cta-default);--highlight:var(--c-cta-default);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.1);text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-base) var(--highlight);transition:all 150ms}button:hover,button:focus{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight), 0 0 var(--sp-sm) var(--shadow-outer)}button:active{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight),\n    0 0 var(--sp-sm) var(--shadow-outer) inset}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}button[disabled]:hover,button[disabled]:focus,button[disabled]:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.default{--color:var(--c-cta-default);--highlight:var(--c-cta-default)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
+const ecoButtonCss = "button{--color:var(--c-cta-default);--highlight:var(--c-border-strong);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.1);text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-base) var(--highlight);transition:all 150ms}button:hover,button:focus{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight), 0 0 var(--sp-sm) var(--shadow-outer)}button:active{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight),\n    0 0 var(--sp-sm) var(--shadow-outer) inset}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}button[disabled]:hover,button[disabled]:focus,button[disabled]:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.default{--color:var(--c-cta-default);--highlight:var(--c-border-strong)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-border-weak)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
 
@@ -11,0 +11,0 @@ const EcoButton = class {

dist/cjs/eco-input-date.cjs.entry.js

@@ -6,5 +6,4 @@ 'use strict';
 const index = require('./index-7d3b3183.js');
-const utils = require('./utils-731d634a.js');
 
-const ecoInputDateCss = "div{display:grid;gap:var(--sp-xxs)}.inputs{display:grid;column-gap:var(--sp-md);grid-template-columns:repeat(\n    auto-fill,\n    calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 6ch + var(--sp-md))\n  )}";
+const ecoInputDateCss = ".inputs{display:grid;column-gap:var(--sp-md);grid-template-columns:repeat(\n    auto-fill,\n    calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 6ch + var(--sp-md))\n  )}";
 
@@ -47,3 +46,3 @@ const EcoInputDate = class {
     }
-    return (index.h(index.Host, null, index.h("eco-spacer", { gap: utils.EcoSpacerSizeList.xxs }, this.label && (index.h("eco-text-label", null, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("span", { class: "inputs" }, index.h("eco-input-number", { label: "Day", value: this.dd, min: this.ddmin, max: this.ddmax, readonly: this.readonly, disabled: this.disabled }), index.h("eco-input-number", { label: "Month", value: this.mm, min: this.mmmin, max: this.mmmax, readonly: this.readonly, disabled: this.disabled }), index.h("eco-input-number", { label: "Year", value: this.yyyy, min: this.yyyymin, max: this.yyyymax, readonly: this.readonly, disabled: this.disabled }), this.withtime && (index.h("eco-input-number", { label: "Hour", value: this.hour, min: this.hourmin, max: this.hourmax, readonly: this.readonly, disabled: this.disabled })), this.withtime && (index.h("eco-input-number", { label: "Min", value: this.minute, min: this.minutemin, max: this.minutemax, readonly: this.readonly, disabled: this.disabled }))))));
+    return (index.h(index.Host, null, index.h("eco-input-wrapper", null, this.label && (index.h("eco-text-label", null, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("span", { class: "inputs" }, index.h("eco-input-number", { label: "Day", value: this.dd, min: this.ddmin, max: this.ddmax, readonly: this.readonly, disabled: this.disabled }), index.h("eco-input-number", { label: "Month", value: this.mm, min: this.mmmin, max: this.mmmax, readonly: this.readonly, disabled: this.disabled }), index.h("eco-input-number", { label: "Year", value: this.yyyy, min: this.yyyymin, max: this.yyyymax, readonly: this.readonly, disabled: this.disabled }), this.withtime && (index.h("eco-input-number", { label: "Hour", value: this.hour, min: this.hourmin, max: this.hourmax, readonly: this.readonly, disabled: this.disabled })), this.withtime && (index.h("eco-input-number", { label: "Min", value: this.minute, min: this.minutemin, max: this.minutemax, readonly: this.readonly, disabled: this.disabled }))))));
   }
@@ -50,0 +49,0 @@ };

dist/cjs/eco-input-file.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoInputFileCss = "div{--color:var(--c-cta-default);max-width:100%;display:grid;gap:var(--sp-xxs);grid-template-columns:100%}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color)}.button{cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md);box-shadow:0 0 0 var(--bw-thin) var(--color), 0 0 var(--bw-base) var(--color);transition:all 150ms}.button:hover,.button:focus{box-shadow:0 0 0 var(--bw-thin) var(--color),\n    0 0 var(--bw-thick) var(--color),\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.disabled .button:hover,.disabled .button:focus,.disabled .button:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}";
+const ecoInputFileCss = ":host{--color:var(--c-border-strong)}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color)}.button{cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md);box-shadow:0 0 0 var(--bw-thin) var(--color), 0 0 var(--bw-base) var(--color);transition:all 150ms}.button:hover,.button:focus{box-shadow:0 0 0 var(--bw-thin) var(--color),\n    0 0 var(--bw-thick) var(--color),\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.disabled .button:hover,.disabled .button:focus,.disabled .button:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}";
 
@@ -34,3 +34,3 @@ const EcoInputFile = class {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("div", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), index.h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, index.h("span", { class: "filename" }, this.text), index.h("span", { class: "button" }, "Choose file")))));
+    return (index.h(index.Host, null, index.h("eco-input-wrapper", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), index.h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, index.h("span", { class: "filename" }, this.text), index.h("span", { class: "button" }, "Choose file")))));
   }
@@ -37,0 +37,0 @@ getCssClassMap() {

dist/cjs/eco-input-number.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}input{display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}input:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -25,3 +25,3 @@ const EcoInputNumber = class {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("div", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("input", { pattern: "[0-9]*", type: this.type, id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, placeholder: " ", min: this.min, max: this.max, step: this.step }))));
+    return (index.h(index.Host, null, index.h("eco-input-wrapper", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("input", { pattern: "[0-9]*", type: this.type, id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, placeholder: " ", min: this.min, max: this.max, step: this.step }))));
   }
@@ -28,0 +28,0 @@ getCssClassMap() {

dist/cjs/eco-input-text.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}input{display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}input:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -25,3 +25,3 @@ const EcoInputText = class {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("div", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("input", { type: this.type, id: this.inputId, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.value, placeholder: " " }))));
+    return (index.h(index.Host, null, index.h("eco-input-wrapper", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("input", { type: this.type, id: this.inputId, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.value, placeholder: " " }))));
   }
@@ -28,0 +28,0 @@ getCssClassMap() {

dist/cjs/eco-input-textarea.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}textarea:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
+const ecoInputTextareaCss = ":host{--color:var(--c-border-strong);--height:var(--fs-md);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
 
@@ -25,3 +25,3 @@ const EcoInputTextarea = class {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("div", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("textarea", { class: this.resize && "resize", id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value }))));
+    return (index.h(index.Host, null, index.h("eco-input-wrapper", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("textarea", { class: this.resize && "resize", id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value }))));
   }
@@ -28,0 +28,0 @@ getCssClassMap() {

dist/cjs/eco-input-time.cjs.entry.js

@@ -6,5 +6,4 @@ 'use strict';
 const index = require('./index-7d3b3183.js');
-const utils = require('./utils-731d634a.js');
 
-const ecoInputTimeCss = "div{display:grid;gap:var(--sp-xs)}.inputs{display:grid;gap:var(--sp-xs) var(--sp-md);grid-template-columns:repeat(auto-fill, calc(var(--fs-md) * 5))}";
+const ecoInputTimeCss = ".inputs{display:grid;gap:var(--sp-xs) var(--sp-md);grid-template-columns:repeat(auto-fill, calc(var(--fs-md) * 5))}";
 
@@ -25,3 +24,3 @@ const EcoInputTime = class {
   render() {
-    return (index.h(index.Host, null, index.h("eco-spacer", { gap: utils.EcoSpacerSizeList.xxs }, this.label && (index.h("eco-text-label", null, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("span", { class: "inputs" }, this.weeks && (index.h("eco-input-number", { label: "Weeks", value: this.weeks, min: this.weeksmin, max: this.weeksmax, readonly: this.readonly, disabled: this.disabled })), this.days && (index.h("eco-input-number", { label: "Days", value: this.days, min: this.daysmin, max: this.daysmax, readonly: this.readonly, disabled: this.disabled })), this.hours && (index.h("eco-input-number", { label: "Hours", value: this.hours, min: this.hoursmin, max: this.hoursmax, readonly: this.readonly, disabled: this.disabled })), this.minutes && (index.h("eco-input-number", { label: "Minutes", value: this.minutes, min: this.minutesmin, max: this.minutesmax, readonly: this.readonly, disabled: this.disabled }))))));
+    return (index.h(index.Host, null, index.h("eco-input-wrapper", null, this.label && (index.h("eco-text-label", null, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("span", { class: "inputs" }, this.weeks && (index.h("eco-input-number", { label: "Weeks", value: this.weeks, min: this.weeksmin, max: this.weeksmax, readonly: this.readonly, disabled: this.disabled })), this.days && (index.h("eco-input-number", { label: "Days", value: this.days, min: this.daysmin, max: this.daysmax, readonly: this.readonly, disabled: this.disabled })), this.hours && (index.h("eco-input-number", { label: "Hours", value: this.hours, min: this.hoursmin, max: this.hoursmax, readonly: this.readonly, disabled: this.disabled })), this.minutes && (index.h("eco-input-number", { label: "Minutes", value: this.minutes, min: this.minutesmin, max: this.minutesmax, readonly: this.readonly, disabled: this.disabled }))))));
   }
@@ -28,0 +27,0 @@ };

dist/cjs/eco-progress.cjs.entry.js

@@ -6,4 +6,5 @@ 'use strict';
 const index = require('./index-7d3b3183.js');
+const utils = require('./utils-731d634a.js');
 
-const ecoProgressCss = ":host{--height:var(--sp-xs);--bar:hsl(\n    calc(var(--value) * 1.39),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  );display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-md)}progress{appearance:none;border:none;flex:1 0 auto;height:var(--height);background-color:var(--c-border-weak);border-radius:var(--br-sm);box-shadow:0 0 0 var(--bw-thin) var(--c-border-base)}progress[value]::-webkit-progress-bar{background-color:var(--c-cta-background);border-radius:var(--br-sm)}progress[value]::-webkit-progress-value{border-radius:var(--br-sm)}progress[value]::-moz-progress-bar{background:var(--bar);border-radius:var(--br-sm)}progress::-webkit-progress-value{background:var(--bar)}span{color:inherit;display:block;flex:0 1 auto;font-size:inherit;line-height:var(--line-height-tight)}";
+const ecoProgressCss = ":host{--height:var(--sp-xs);--bar:hsl(\n    calc(199 + (var(--value) * 3)),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  );display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-md)}.default{--bar:hsl(\n    calc(199 + (var(--value) * 3)),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  )}.info{--bar:var(--c-cta-info)}.ghost{--bar:var(--c-border-strong)}.success{--bar:var(--c-cta-success)}.danger{--bar:var(--c-cta-danger)}.warning{--bar:var(--c-cta-warning)}progress{appearance:none;border:none;flex:1 0 auto;height:var(--height);background-color:var(--c-border-weak);border-radius:var(--br-sm);box-shadow:0 0 0 var(--bw-thin) var(--c-border-base)}progress[value]::-webkit-progress-bar{background-color:var(--c-cta-background);border-radius:var(--br-sm)}progress[value]::-webkit-progress-value{border-radius:var(--br-sm)}progress[value]::-moz-progress-bar{background:var(--bar);border-radius:var(--br-sm)}progress::-webkit-progress-value{background:var(--bar)}span{color:inherit;display:block;flex:0 1 auto;font-size:inherit;line-height:var(--line-height-tight)}";
 
@@ -13,2 +14,3 @@ const EcoProgress = class {
     index.registerInstance(this, hostRef);
+    this.type = utils.EcoTypeList.default;
     this.max = 100;
@@ -36,4 +38,10 @@ this.value = 0;
     this.doMaths();
-    return (index.h(index.Host, { style: { "--value": this.valueAsPercentageAsString } }, index.h("progress", { max: this.max, value: this.value }), this.showPercentage && index.h("span", null, this.valueAsPercentageAsString, "%"), this.of && (index.h("span", null, this.value, " of ", this.max, " ", this.ofString))));
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { style: { "--value": this.valueAsPercentageAsString } }, index.h("progress", { class: classMap, max: this.max, value: this.value }), this.showPercentage && index.h("span", null, this.valueAsPercentageAsString, "%"), this.of && (index.h("span", null, this.value, " of ", this.max, " ", this.ofString))));
   }
+  getCssClassMap() {
+    return {
+      [this.type]: true,
+    };
+  }
 };
@@ -40,0 +48,0 @@ EcoProgress.style = ecoProgressCss;

dist/cjs/eco-radio-group.cjs.entry.js

@@ -6,3 +6,2 @@ 'use strict';
 const index = require('./index-7d3b3183.js');
-const utils = require('./utils-731d634a.js');
 
@@ -25,3 +24,3 @@ const ecoRadioGroupCss = ":host{display:block}:host:last-of-type{margin-bottom:0}";
   render() {
-    return (index.h(index.Host, null, index.h("eco-spacer", { gap: utils.EcoSpacerSizeList.xxs }, index.h("eco-text-label", null, this.label), this.help && index.h("eco-text-input-help", null, this.help), this.radioData.map((radio) => (index.h("eco-radio-button", { label: radio.label, name: radio.name, controlValue: radio.controlValue, checked: radio.checked, disabled: radio.disabled, radioQaId: radio.qaid, onClick: () => this.selectedRadioChange(radio.controlValue) }))))));
+    return (index.h(index.Host, null, index.h("eco-input-wrapper", null, index.h("eco-text-label", null, this.label), this.help && index.h("eco-text-input-help", null, this.help), this.radioData.map((radio) => (index.h("eco-radio-button", { label: radio.label, name: radio.name, controlValue: radio.controlValue, checked: radio.checked, disabled: radio.disabled, radioQaId: radio.qaid, onClick: () => this.selectedRadioChange(radio.controlValue) }))))));
   }
@@ -28,0 +27,0 @@ };

dist/cjs/eco-select.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoSelectCss = "eco-select{--color:var(--c-text);display:block;max-width:100%}eco-select div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}eco-select select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 var(--bw-thin) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}eco-select select::-ms-expand{display:none}eco-select select:hover{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}eco-select select:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset;color:var(--color);outline:none}eco-select select option{font-weight:var(--fw-base)}eco-select *[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}eco-select select:disabled,eco-select select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}eco-select .default{--color:var(--c-text)}eco-select .error{--color:var(--c-cta-danger)}eco-select .success{--color:var(--c-cta-success)}eco-select .sm select{width:15ch}eco-select .md select{width:30ch}eco-select .lg select{width:45ch}eco-select .full select{width:100%}";
+const ecoSelectCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
 
@@ -25,3 +25,3 @@ const EcoSelect = class {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("div", { class: classMap }, index.h("eco-text-label", { for: this.inputId }, this.label), this.help && index.h("eco-text-input-help", null, this.help), index.h("select", { name: this.name, "data-attr-qa-id": this.selectQaId, id: this.inputId, disabled: this.disabled }, index.h("slot", null)))));
+    return (index.h(index.Host, null, index.h("eco-input-wrapper", { class: classMap }, index.h("eco-text-label", { for: this.inputId }, this.label), this.help && index.h("eco-text-input-help", null, this.help), index.h("select", { name: this.name, "data-attr-qa-id": this.selectQaId, id: this.inputId, disabled: this.disabled }, index.h("slot", null)))));
   }
@@ -28,0 +28,0 @@ getCssClassMap() {

dist/cjs/eco.cjs.js

@@ -123,3 +123,3 @@ 'use strict';
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["eco-modal.cjs",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date.cjs",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time.cjs",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-radio-group.cjs",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-input-file.cjs",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text.cjs",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea.cjs",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-select.cjs",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox.cjs",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox.cjs",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description.cjs",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group.cjs",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress.cjs",[[1,"eco-progress",{"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spinner.cjs",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table.cjs",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header.cjs",[[1,"eco-card-header"]]],["eco-icon.cjs",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card.cjs",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button.cjs",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label.cjs",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button.cjs",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-input-number.cjs",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body.cjs",[[1,"eco-card-body"]]],["eco-card-footer.cjs",[[1,"eco-card-footer"]]],["eco-spacer.cjs",[[1,"eco-spacer",{"gap":[1]}]]],["eco-text-input-optional.cjs",[[1,"eco-text-input-optional"]]],["eco-text-input-help.cjs",[[1,"eco-text-input-help"]]]], options);
+  return index.bootstrapLazy([["eco-modal.cjs",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date.cjs",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time.cjs",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-input-file.cjs",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text.cjs",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea.cjs",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group.cjs",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-select.cjs",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox.cjs",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox.cjs",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description.cjs",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group.cjs",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress.cjs",[[1,"eco-progress",{"type":[1],"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spacer.cjs",[[1,"eco-spacer",{"gap":[1]}]]],["eco-spinner.cjs",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table.cjs",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header.cjs",[[1,"eco-card-header"]]],["eco-icon.cjs",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card.cjs",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button.cjs",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label.cjs",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button.cjs",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-text-input-optional.cjs",[[1,"eco-text-input-optional"]]],["eco-input-wrapper.cjs",[[1,"eco-input-wrapper"]]],["eco-text-input-help.cjs",[[1,"eco-text-input-help"]]],["eco-input-number.cjs",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body.cjs",[[1,"eco-card-body"]]],["eco-card-footer.cjs",[[1,"eco-card-footer"]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -33,3 +33,3 @@ 'use strict';
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["eco-modal.cjs",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date.cjs",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time.cjs",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-radio-group.cjs",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-input-file.cjs",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text.cjs",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea.cjs",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-select.cjs",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox.cjs",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox.cjs",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description.cjs",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group.cjs",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress.cjs",[[1,"eco-progress",{"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spinner.cjs",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table.cjs",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header.cjs",[[1,"eco-card-header"]]],["eco-icon.cjs",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card.cjs",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button.cjs",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label.cjs",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button.cjs",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-input-number.cjs",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body.cjs",[[1,"eco-card-body"]]],["eco-card-footer.cjs",[[1,"eco-card-footer"]]],["eco-spacer.cjs",[[1,"eco-spacer",{"gap":[1]}]]],["eco-text-input-optional.cjs",[[1,"eco-text-input-optional"]]],["eco-text-input-help.cjs",[[1,"eco-text-input-help"]]]], options);
+  return index.bootstrapLazy([["eco-modal.cjs",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date.cjs",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time.cjs",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-input-file.cjs",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text.cjs",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea.cjs",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group.cjs",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-select.cjs",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox.cjs",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox.cjs",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description.cjs",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group.cjs",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress.cjs",[[1,"eco-progress",{"type":[1],"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spacer.cjs",[[1,"eco-spacer",{"gap":[1]}]]],["eco-spinner.cjs",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table.cjs",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header.cjs",[[1,"eco-card-header"]]],["eco-icon.cjs",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card.cjs",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button.cjs",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label.cjs",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button.cjs",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-text-input-optional.cjs",[[1,"eco-text-input-optional"]]],["eco-input-wrapper.cjs",[[1,"eco-input-wrapper"]]],["eco-text-input-help.cjs",[[1,"eco-text-input-help"]]],["eco-input-number.cjs",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body.cjs",[[1,"eco-card-body"]]],["eco-card-footer.cjs",[[1,"eco-card-footer"]]]], options);
   });
@@ -36,0 +36,0 @@ };

dist/collection/collection-manifest.json

@@ -18,2 +18,3 @@ {
     "./components/eco-input-time/eco-input-time.js",
+    "./components/eco-input-wrapper/eco-input-wrapper.js",
     "./components/eco-messagebox/eco-messagebox.js",
@@ -20,0 +21,0 @@ "./components/eco-modal/eco-modal.js",

dist/collection/components/eco-input-date/eco-input-date.js

 import { Component, Host, h, Prop } from "@stencil/core";
-import { EcoSpacerSizeList } from "../../utils/utils";
 export class EcoInputDate {
@@ -39,3 +38,3 @@ constructor() {
     return (h(Host, null,
-      h("eco-spacer", { gap: EcoSpacerSizeList.xxs },
+      h("eco-input-wrapper", null,
         this.label && (h("eco-text-label", null,
@@ -42,0 +41,0 @@ this.label,

dist/collection/components/eco-input-file/eco-input-file.js

@@ -26,3 +26,3 @@ import { Component, Host, h, Prop, Element } from "@stencil/core";
     return (h(Host, null,
-      h("div", { class: classMap },
+      h("eco-input-wrapper", { class: classMap },
         this.label && (h("eco-text-label", { for: this.inputId },
@@ -29,0 +29,0 @@ this.label,

dist/collection/components/eco-input-number/eco-input-number.js

@@ -17,3 +17,3 @@ import { Component, Host, h, Prop } from "@stencil/core";
     return (h(Host, null,
-      h("div", { class: classMap },
+      h("eco-input-wrapper", { class: classMap },
         this.label && (h("eco-text-label", { for: this.inputId },
@@ -20,0 +20,0 @@ this.label,

dist/collection/components/eco-input-text/eco-input-text.js

@@ -17,3 +17,3 @@ import { Component, Host, h, Prop } from "@stencil/core";
     return (h(Host, null,
-      h("div", { class: classMap },
+      h("eco-input-wrapper", { class: classMap },
         this.label && (h("eco-text-label", { for: this.inputId },
@@ -20,0 +20,0 @@ this.label,

dist/collection/components/eco-input-textarea/eco-input-textarea.js

@@ -17,3 +17,3 @@ import { Component, Host, h, Prop } from "@stencil/core";
     return (h(Host, null,
-      h("div", { class: classMap },
+      h("eco-input-wrapper", { class: classMap },
         this.label && (h("eco-text-label", { for: this.inputId },
@@ -20,0 +20,0 @@ this.label,

dist/collection/components/eco-input-time/eco-input-time.js

 import { Component, Host, h, Prop } from "@stencil/core";
-import { EcoSpacerSizeList } from "../../utils/utils";
 export class EcoInputTime {
@@ -17,3 +16,3 @@ constructor() {
     return (h(Host, null,
-      h("eco-spacer", { gap: EcoSpacerSizeList.xxs },
+      h("eco-input-wrapper", null,
         this.label && (h("eco-text-label", null,
@@ -20,0 +19,0 @@ this.label,

dist/collection/components/eco-progress/eco-progress.js

 import { Host, Component, h, Prop } from "@stencil/core";
+import { EcoTypeList } from "../../utils/utils";
 export class EcoProgress {
   constructor() {
+    this.type = EcoTypeList.default;
     this.max = 100;
@@ -26,4 +28,5 @@ this.value = 0;
     this.doMaths();
+    const classMap = this.getCssClassMap();
     return (h(Host, { style: { "--value": this.valueAsPercentageAsString } },
-      h("progress", { max: this.max, value: this.value }),
+      h("progress", { class: classMap, max: this.max, value: this.value }),
       this.showPercentage && h("span", null,
@@ -39,2 +42,7 @@ this.valueAsPercentageAsString,
   }
+  getCssClassMap() {
+    return {
+      [this.type]: true,
+    };
+  }
   static get is() { return "eco-progress"; }
@@ -49,2 +57,25 @@ static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "EcoTypeList",
+        "resolved": "EcoTypeList.danger | EcoTypeList.default | EcoTypeList.ghost | EcoTypeList.info | EcoTypeList.success | EcoTypeList.warning",
+        "references": {
+          "EcoTypeList": {
+            "location": "import",
+            "path": "../../utils/utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "EcoTypeList.default"
+    },
     "max": {
@@ -51,0 +82,0 @@ "type": "number",

dist/collection/components/eco-progress/eco-progress.stories.js

 import { html } from "lit-html";
+import { EcoTypeList } from "../../utils/utils";
 export default {
@@ -8,12 +9,30 @@ title: "Components/Progress",
 const args = {
+  type: "default",
   max: 898,
   value: 809,
   roundTo: 1,
+  ofString: "Pokémon collected",
   showPercentage: false,
   of: false,
-  ofString: "Pokémon collected",
 };
+const argTypes = {
+  type: {
+    control: {
+      type: "select",
+      options: EcoTypeList,
+    },
+  },
+};
 
-const Default = ({ max, value, roundTo, showPercentage, of, ofString }) => html`
+const Default = ({
+  type,
+  max,
+  value,
+  roundTo,
+  showPercentage,
+  of,
+  ofString,
+}) => html`
   <eco-progress
+    type="${type}"
     max="${max}"
@@ -31,1 +50,2 @@ value="${value}"
 Adjust.args = { ...args };
+Adjust.argTypes = { ...argTypes };

dist/collection/components/eco-radio-group/eco-radio-group.js

 import { Component, Host, h, Prop, Event } from "@stencil/core";
-import { EcoSpacerSizeList } from "../../utils/utils";
 export class EcoRadioGroup {
@@ -16,3 +15,3 @@ constructor() {
     return (h(Host, null,
-      h("eco-spacer", { gap: EcoSpacerSizeList.xxs },
+      h("eco-input-wrapper", null,
         h("eco-text-label", null, this.label),
@@ -19,0 +18,0 @@ this.help && h("eco-text-input-help", null, this.help),

dist/collection/components/eco-select/eco-select.js

@@ -17,3 +17,3 @@ import { Component, Host, h, Prop } from "@stencil/core";
     return (h(Host, null,
-      h("div", { class: classMap },
+      h("eco-input-wrapper", { class: classMap },
         h("eco-text-label", { for: this.inputId }, this.label),
@@ -20,0 +20,0 @@ this.help && h("eco-text-input-help", null, this.help),

dist/custom-elements/index.d.ts

@@ -95,2 +95,8 @@ /* eco custom elements bundle */
 
+interface EcoInputWrapper extends Components.EcoInputWrapper, HTMLElement {}
+export const EcoInputWrapper: {
+  prototype: EcoInputWrapper;
+  new (): EcoInputWrapper;
+};
+
 interface EcoMessagebox extends Components.EcoMessagebox, HTMLElement {}
@@ -97,0 +103,0 @@ export const EcoMessagebox: {

dist/custom-elements/index.js

@@ -88,3 +88,3 @@ import { attachShadow, h, Host, Fragment, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
 
-const ecoButtonCss = "button{--color:var(--c-cta-default);--highlight:var(--c-cta-default);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.1);text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-base) var(--highlight);transition:all 150ms}button:hover,button:focus{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight), 0 0 var(--sp-sm) var(--shadow-outer)}button:active{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight),\n    0 0 var(--sp-sm) var(--shadow-outer) inset}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}button[disabled]:hover,button[disabled]:focus,button[disabled]:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.default{--color:var(--c-cta-default);--highlight:var(--c-cta-default)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
+const ecoButtonCss = "button{--color:var(--c-cta-default);--highlight:var(--c-border-strong);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.1);text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-base) var(--highlight);transition:all 150ms}button:hover,button:focus{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight), 0 0 var(--sp-sm) var(--shadow-outer)}button:active{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight),\n    0 0 var(--sp-sm) var(--shadow-outer) inset}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}button[disabled]:hover,button[disabled]:focus,button[disabled]:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.default{--color:var(--c-cta-default);--highlight:var(--c-border-strong)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-border-weak)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
 
@@ -260,3 +260,3 @@ const EcoButton = class extends HTMLElement {
 
-const ecoInputDateCss = "div{display:grid;gap:var(--sp-xxs)}.inputs{display:grid;column-gap:var(--sp-md);grid-template-columns:repeat(\n    auto-fill,\n    calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 6ch + var(--sp-md))\n  )}";
+const ecoInputDateCss = ".inputs{display:grid;column-gap:var(--sp-md);grid-template-columns:repeat(\n    auto-fill,\n    calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 6ch + var(--sp-md))\n  )}";
 
@@ -301,3 +301,3 @@ const EcoInputDate = class extends HTMLElement {
     }
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, h("eco-input-number", { label: "Day", value: this.dd, min: this.ddmin, max: this.ddmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Month", value: this.mm, min: this.mmmin, max: this.mmmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Year", value: this.yyyy, min: this.yyyymin, max: this.yyyymax, readonly: this.readonly, disabled: this.disabled }), this.withtime && (h("eco-input-number", { label: "Hour", value: this.hour, min: this.hourmin, max: this.hourmax, readonly: this.readonly, disabled: this.disabled })), this.withtime && (h("eco-input-number", { label: "Min", value: this.minute, min: this.minutemin, max: this.minutemax, readonly: this.readonly, disabled: this.disabled }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, h("eco-input-number", { label: "Day", value: this.dd, min: this.ddmin, max: this.ddmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Month", value: this.mm, min: this.mmmin, max: this.mmmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Year", value: this.yyyy, min: this.yyyymin, max: this.yyyymax, readonly: this.readonly, disabled: this.disabled }), this.withtime && (h("eco-input-number", { label: "Hour", value: this.hour, min: this.hourmin, max: this.hourmax, readonly: this.readonly, disabled: this.disabled })), this.withtime && (h("eco-input-number", { label: "Min", value: this.minute, min: this.minutemin, max: this.minutemax, readonly: this.readonly, disabled: this.disabled }))))));
   }
@@ -307,3 +307,3 @@ static get style() { return ecoInputDateCss; }
 
-const ecoInputFileCss = "div{--color:var(--c-cta-default);max-width:100%;display:grid;gap:var(--sp-xxs);grid-template-columns:100%}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color)}.button{cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md);box-shadow:0 0 0 var(--bw-thin) var(--color), 0 0 var(--bw-base) var(--color);transition:all 150ms}.button:hover,.button:focus{box-shadow:0 0 0 var(--bw-thin) var(--color),\n    0 0 var(--bw-thick) var(--color),\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.disabled .button:hover,.disabled .button:focus,.disabled .button:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}";
+const ecoInputFileCss = ":host{--color:var(--c-border-strong)}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color)}.button{cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md);box-shadow:0 0 0 var(--bw-thin) var(--color), 0 0 var(--bw-base) var(--color);transition:all 150ms}.button:hover,.button:focus{box-shadow:0 0 0 var(--bw-thin) var(--color),\n    0 0 var(--bw-thick) var(--color),\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.disabled .button:hover,.disabled .button:focus,.disabled .button:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}";
 
@@ -335,3 +335,3 @@ const EcoInputFile = class extends HTMLElement {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, h("span", { class: "filename" }, this.text), h("span", { class: "button" }, "Choose file")))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, h("span", { class: "filename" }, this.text), h("span", { class: "button" }, "Choose file")))));
   }
@@ -348,3 +348,3 @@ getCssClassMap() {
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}input{display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}input:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -367,3 +367,3 @@ const EcoInputNumber = class extends HTMLElement {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { pattern: "[0-9]*", type: this.type, id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, placeholder: " ", min: this.min, max: this.max, step: this.step }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { pattern: "[0-9]*", type: this.type, id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, placeholder: " ", min: this.min, max: this.max, step: this.step }))));
   }
@@ -379,3 +379,3 @@ getCssClassMap() {
 
-const ecoInputTextCss$1 = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}input{display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}input:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss$1 = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -398,3 +398,3 @@ const EcoInputText = class extends HTMLElement {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { type: this.type, id: this.inputId, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.value, placeholder: " " }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { type: this.type, id: this.inputId, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.value, placeholder: " " }))));
   }
@@ -410,3 +410,3 @@ getCssClassMap() {
 
-const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}textarea:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
+const ecoInputTextareaCss = ":host{--color:var(--c-border-strong);--height:var(--fs-md);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
 
@@ -429,3 +429,3 @@ const EcoInputTextarea = class extends HTMLElement {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("textarea", { class: this.resize && "resize", id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("textarea", { class: this.resize && "resize", id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value }))));
   }
@@ -442,3 +442,3 @@ getCssClassMap() {
 
-const ecoInputTimeCss = "div{display:grid;gap:var(--sp-xs)}.inputs{display:grid;gap:var(--sp-xs) var(--sp-md);grid-template-columns:repeat(auto-fill, calc(var(--fs-md) * 5))}";
+const ecoInputTimeCss = ".inputs{display:grid;gap:var(--sp-xs) var(--sp-md);grid-template-columns:repeat(auto-fill, calc(var(--fs-md) * 5))}";
 
@@ -461,3 +461,3 @@ const EcoInputTime = class extends HTMLElement {
   render() {
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, this.weeks && (h("eco-input-number", { label: "Weeks", value: this.weeks, min: this.weeksmin, max: this.weeksmax, readonly: this.readonly, disabled: this.disabled })), this.days && (h("eco-input-number", { label: "Days", value: this.days, min: this.daysmin, max: this.daysmax, readonly: this.readonly, disabled: this.disabled })), this.hours && (h("eco-input-number", { label: "Hours", value: this.hours, min: this.hoursmin, max: this.hoursmax, readonly: this.readonly, disabled: this.disabled })), this.minutes && (h("eco-input-number", { label: "Minutes", value: this.minutes, min: this.minutesmin, max: this.minutesmax, readonly: this.readonly, disabled: this.disabled }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, this.weeks && (h("eco-input-number", { label: "Weeks", value: this.weeks, min: this.weeksmin, max: this.weeksmax, readonly: this.readonly, disabled: this.disabled })), this.days && (h("eco-input-number", { label: "Days", value: this.days, min: this.daysmin, max: this.daysmax, readonly: this.readonly, disabled: this.disabled })), this.hours && (h("eco-input-number", { label: "Hours", value: this.hours, min: this.hoursmin, max: this.hoursmax, readonly: this.readonly, disabled: this.disabled })), this.minutes && (h("eco-input-number", { label: "Minutes", value: this.minutes, min: this.minutesmin, max: this.minutesmax, readonly: this.readonly, disabled: this.disabled }))))));
   }
@@ -467,2 +467,16 @@ static get style() { return ecoInputTimeCss; }
 
+const ecoInputWrapperCss = ":host{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;--color:var(--c-border-strong)}::slotted(input){display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}::slotted(input:not(:placeholder-shown)){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}::slotted(input:valid){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}::slotted(input:focus){box-shadow:0 0 var(--bw-thick) var(--bw-thin) var(--c-cta-default)}::slotted(input[disabled]){cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text);box-shadow:0 0 0 var(--bw-thin) var(--color)}::slotted(input:read-only){color:var(--c-text-secondary)}::slotted(textarea){background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%;resize:none}::slotted(textarea:valid){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}::slotted(textarea:focus){box-shadow:0 0 0 var(--bw-thick) var(--color)}::slotted(textarea[disabled]){cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}::slotted(textarea:read-only){color:var(--c-text-secondary)}::slotted(select){display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--c-text);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}::slotted(select::-ms-expand){display:none}::slotted(select:hover){box-shadow:0 0 var(--bw-thick) var(--bw-thin) var(--c-cta-default)}::slotted(select:focus){box-shadow:0 0 var(--bw-thick) var(--bw-thin) var(--c-cta-default);color:var(--color);outline:none}::slotted(select option){font-weight:var(--fw-base)}*[dir=\"rtl\"] ::slotted(select),:root:lang(ar) ::slotted(select),:root:lang(iw) ::slotted(select){background-position:left var(--sp-xs) top 50%}::slotted(select:disabled),::slotted(select[aria-disabled=\"true\"]){cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text);box-shadow:0 0 0 var(--bw-thin) var(--color)}";
+
+const EcoInputWrapper = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return ecoInputWrapperCss; }
+};
+
 const ecoMessageboxCss = ":host{background-color:var(--c-cta-background);display:block;border-radius:var(--br-md)}div{color:var(--c-text);background-color:hsla(var(--color), 0.1);padding:var(--sp-md);position:relative;z-index:2;border-radius:var(--br-md);border-width:calc(var(--sp-sm) / 8);border-style:solid;border-color:hsl(var(--color));display:flex}.default{--color:var(--c-text);border-color:var(--c-text-secondary);background-color:var(--c-cta-background)}.info{--color:var(--c-cta-info-hsl)}.ghost{background-color:var(--c-cta-background);border-color:var(--c-text-secondary)}.success{--color:var(--c-cta-success-hsl)}.danger{--color:var(--c-cta-danger-hsl)}.warning{--color:var(--c-cta-warning-hsl)}eco-icon{margin-right:var(--sp-md)}";
@@ -523,3 +537,3 @@
 
-const ecoProgressCss = ":host{--height:var(--sp-xs);--bar:hsl(\n    calc(var(--value) * 1.39),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  );display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-md)}progress{appearance:none;border:none;flex:1 0 auto;height:var(--height);background-color:var(--c-border-weak);border-radius:var(--br-sm);box-shadow:0 0 0 var(--bw-thin) var(--c-border-base)}progress[value]::-webkit-progress-bar{background-color:var(--c-cta-background);border-radius:var(--br-sm)}progress[value]::-webkit-progress-value{border-radius:var(--br-sm)}progress[value]::-moz-progress-bar{background:var(--bar);border-radius:var(--br-sm)}progress::-webkit-progress-value{background:var(--bar)}span{color:inherit;display:block;flex:0 1 auto;font-size:inherit;line-height:var(--line-height-tight)}";
+const ecoProgressCss = ":host{--height:var(--sp-xs);--bar:hsl(\n    calc(199 + (var(--value) * 3)),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  );display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-md)}.default{--bar:hsl(\n    calc(199 + (var(--value) * 3)),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  )}.info{--bar:var(--c-cta-info)}.ghost{--bar:var(--c-border-strong)}.success{--bar:var(--c-cta-success)}.danger{--bar:var(--c-cta-danger)}.warning{--bar:var(--c-cta-warning)}progress{appearance:none;border:none;flex:1 0 auto;height:var(--height);background-color:var(--c-border-weak);border-radius:var(--br-sm);box-shadow:0 0 0 var(--bw-thin) var(--c-border-base)}progress[value]::-webkit-progress-bar{background-color:var(--c-cta-background);border-radius:var(--br-sm)}progress[value]::-webkit-progress-value{border-radius:var(--br-sm)}progress[value]::-moz-progress-bar{background:var(--bar);border-radius:var(--br-sm)}progress::-webkit-progress-value{background:var(--bar)}span{color:inherit;display:block;flex:0 1 auto;font-size:inherit;line-height:var(--line-height-tight)}";
 
@@ -531,2 +545,3 @@ const EcoProgress = class extends HTMLElement {
     attachShadow(this);
+    this.type = EcoTypeList.default;
     this.max = 100;
@@ -554,4 +569,10 @@ this.value = 0;
     this.doMaths();
-    return (h(Host, { style: { "--value": this.valueAsPercentageAsString } }, h("progress", { max: this.max, value: this.value }), this.showPercentage && h("span", null, this.valueAsPercentageAsString, "%"), this.of && (h("span", null, this.value, " of ", this.max, " ", this.ofString))));
+    const classMap = this.getCssClassMap();
+    return (h(Host, { style: { "--value": this.valueAsPercentageAsString } }, h("progress", { class: classMap, max: this.max, value: this.value }), this.showPercentage && h("span", null, this.valueAsPercentageAsString, "%"), this.of && (h("span", null, this.value, " of ", this.max, " ", this.ofString))));
   }
+  getCssClassMap() {
+    return {
+      [this.type]: true,
+    };
+  }
   static get style() { return ecoProgressCss; }
@@ -595,3 +616,3 @@ };
   render() {
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, h("eco-text-label", null, this.label), this.help && h("eco-text-input-help", null, this.help), this.radioData.map((radio) => (h("eco-radio-button", { label: radio.label, name: radio.name, controlValue: radio.controlValue, checked: radio.checked, disabled: radio.disabled, radioQaId: radio.qaid, onClick: () => this.selectedRadioChange(radio.controlValue) }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, h("eco-text-label", null, this.label), this.help && h("eco-text-input-help", null, this.help), this.radioData.map((radio) => (h("eco-radio-button", { label: radio.label, name: radio.name, controlValue: radio.controlValue, checked: radio.checked, disabled: radio.disabled, radioQaId: radio.qaid, onClick: () => this.selectedRadioChange(radio.controlValue) }))))));
   }
@@ -601,3 +622,3 @@ static get style() { return ecoRadioGroupCss; }
 
-const ecoSelectCss = "eco-select{--color:var(--c-text);display:block;max-width:100%}eco-select div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}eco-select select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 var(--bw-thin) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}eco-select select::-ms-expand{display:none}eco-select select:hover{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}eco-select select:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset;color:var(--color);outline:none}eco-select select option{font-weight:var(--fw-base)}eco-select *[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}eco-select select:disabled,eco-select select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}eco-select .default{--color:var(--c-text)}eco-select .error{--color:var(--c-cta-danger)}eco-select .success{--color:var(--c-cta-success)}eco-select .sm select{width:15ch}eco-select .md select{width:30ch}eco-select .lg select{width:45ch}eco-select .full select{width:100%}";
+const ecoSelectCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
 
@@ -619,3 +640,3 @@ const EcoSelect = class extends HTMLElement {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, h("eco-text-label", { for: this.inputId }, this.label), this.help && h("eco-text-input-help", null, this.help), h("select", { name: this.name, "data-attr-qa-id": this.selectQaId, id: this.inputId, disabled: this.disabled }, h("slot", null)))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, h("eco-text-label", { for: this.inputId }, this.label), this.help && h("eco-text-input-help", null, this.help), h("select", { name: this.name, "data-attr-qa-id": this.selectQaId, id: this.inputId, disabled: this.disabled }, h("slot", null)))));
   }
@@ -749,5 +770,6 @@ getCssClassMap() {
 const EcoInputTime$1 = /*@__PURE__*/proxyCustomElement(EcoInputTime, [1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]);
+const EcoInputWrapper$1 = /*@__PURE__*/proxyCustomElement(EcoInputWrapper, [1,"eco-input-wrapper"]);
 const EcoMessagebox$1 = /*@__PURE__*/proxyCustomElement(EcoMessagebox, [1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]);
 const EcoModal$1 = /*@__PURE__*/proxyCustomElement(EcoModal, [1,"eco-modal",{"modaltitle":[1],"visible":[4]}]);
-const EcoProgress$1 = /*@__PURE__*/proxyCustomElement(EcoProgress, [1,"eco-progress",{"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]);
+const EcoProgress$1 = /*@__PURE__*/proxyCustomElement(EcoProgress, [1,"eco-progress",{"type":[1],"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]);
 const EcoRadioButton$1 = /*@__PURE__*/proxyCustomElement(EcoRadioButton, [0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]);
@@ -780,2 +802,3 @@ const EcoRadioGroup$1 = /*@__PURE__*/proxyCustomElement(EcoRadioGroup, [1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]);
   EcoInputTime$1,
+  EcoInputWrapper$1,
   EcoMessagebox$1,
@@ -801,2 +824,2 @@ EcoModal$1,
 
-export { EcoButton$1 as EcoButton, EcoCard$1 as EcoCard, EcoCardBody$1 as EcoCardBody, EcoCardFooter$1 as EcoCardFooter, EcoCardHeader$1 as EcoCardHeader, EcoCheckbox$1 as EcoCheckbox, EcoDescription$1 as EcoDescription, EcoDescriptionGroup$1 as EcoDescriptionGroup, EcoIcon$1 as EcoIcon, EcoInputDate$1 as EcoInputDate, EcoInputFile$1 as EcoInputFile, EcoInputNumber$1 as EcoInputNumber, EcoInputText$1 as EcoInputText, EcoInputTextarea$1 as EcoInputTextarea, EcoInputTime$1 as EcoInputTime, EcoMessagebox$1 as EcoMessagebox, EcoModal$1 as EcoModal, EcoProgress$1 as EcoProgress, EcoRadioButton$1 as EcoRadioButton, EcoRadioGroup$1 as EcoRadioGroup, EcoSelect$1 as EcoSelect, EcoSpacer$1 as EcoSpacer, EcoSpinner$1 as EcoSpinner, EcoTable$1 as EcoTable, EcoTextInputHelp$1 as EcoTextInputHelp, EcoTextInputOptional$1 as EcoTextInputOptional, EcoTextLabel$1 as EcoTextLabel, defineCustomElements };
+export { EcoButton$1 as EcoButton, EcoCard$1 as EcoCard, EcoCardBody$1 as EcoCardBody, EcoCardFooter$1 as EcoCardFooter, EcoCardHeader$1 as EcoCardHeader, EcoCheckbox$1 as EcoCheckbox, EcoDescription$1 as EcoDescription, EcoDescriptionGroup$1 as EcoDescriptionGroup, EcoIcon$1 as EcoIcon, EcoInputDate$1 as EcoInputDate, EcoInputFile$1 as EcoInputFile, EcoInputNumber$1 as EcoInputNumber, EcoInputText$1 as EcoInputText, EcoInputTextarea$1 as EcoInputTextarea, EcoInputTime$1 as EcoInputTime, EcoInputWrapper$1 as EcoInputWrapper, EcoMessagebox$1 as EcoMessagebox, EcoModal$1 as EcoModal, EcoProgress$1 as EcoProgress, EcoRadioButton$1 as EcoRadioButton, EcoRadioGroup$1 as EcoRadioGroup, EcoSelect$1 as EcoSelect, EcoSpacer$1 as EcoSpacer, EcoSpinner$1 as EcoSpinner, EcoTable$1 as EcoTable, EcoTextInputHelp$1 as EcoTextInputHelp, EcoTextInputOptional$1 as EcoTextInputOptional, EcoTextLabel$1 as EcoTextLabel, defineCustomElements };

dist/eco/eco-button.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { g as EcoInputSizeList, c as EcoTypeList } from './utils-06ee9ac3.js';
+import { g as EcoInputSizeList, b as EcoTypeList } from './utils-d88dcc72.js';
 
-const ecoButtonCss = "button{--color:var(--c-cta-default);--highlight:var(--c-cta-default);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.1);text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-base) var(--highlight);transition:all 150ms}button:hover,button:focus{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight), 0 0 var(--sp-sm) var(--shadow-outer)}button:active{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight),\n    0 0 var(--sp-sm) var(--shadow-outer) inset}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}button[disabled]:hover,button[disabled]:focus,button[disabled]:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.default{--color:var(--c-cta-default);--highlight:var(--c-cta-default)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
+const ecoButtonCss = "button{--color:var(--c-cta-default);--highlight:var(--c-border-strong);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.1);text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-base) var(--highlight);transition:all 150ms}button:hover,button:focus{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight), 0 0 var(--sp-sm) var(--shadow-outer)}button:active{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight),\n    0 0 var(--sp-sm) var(--shadow-outer) inset}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}button[disabled]:hover,button[disabled]:focus,button[disabled]:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.default{--color:var(--c-cta-default);--highlight:var(--c-border-strong)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-border-weak)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
 
@@ -6,0 +6,0 @@ const EcoButton = class {

dist/eco/eco-card.entry.js

 import { r as registerInstance, h, e as Host, F as Fragment, g as getElement } from './index-c81e7d26.js';
-import { g as EcoInputSizeList, d as EcoIconList } from './utils-06ee9ac3.js';
+import { g as EcoInputSizeList, c as EcoIconList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoCardCss = ":host{--card-background:hsl(0, 0%, 100%);--card-shadow:hsl(var(--igs-primary-dark-blue-h), 0%, 60%, 0.4);display:block;background-color:var(--card-background);border-radius:var(--br-md);box-shadow:0 calc(var(--sp-md) / 8) calc(var(--sp-md) / 6) var(--card-shadow)}.sticky{position:sticky;top:0;background-color:var(--card-background);z-index:1}.collapsable{cursor:pointer;user-select:none}.collapsed{border-radius:var(--br-md)}";

dist/eco/eco-icon.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { d as EcoIconList, c as EcoTypeList, g as EcoInputSizeList } from './utils-06ee9ac3.js';
+import { c as EcoIconList, b as EcoTypeList, g as EcoInputSizeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoIconCss = ":host{display:inline-block;--size:var(--sp-lg);--color:var(--c-text)}div{display:block;height:var(--size);width:var(--size);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;background-color:var(--color)}.sm{--size:var(--sp-md)}.md{--size:var(--sp-lg)}.lg{--size:var(--sp-xl)}.xl{--size:var(--sp-xxl)}.default{--color:var(--c-text)}.info{--color:var(--c-cta-info)}.ghost{--color:var(--c-text-secondary)}.success{--color:var(--c-cta-success)}.danger{--color:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning)}";

dist/eco/eco-input-date.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { E as EcoSpacerSizeList } from './utils-06ee9ac3.js';
 
-const ecoInputDateCss = "div{display:grid;gap:var(--sp-xxs)}.inputs{display:grid;column-gap:var(--sp-md);grid-template-columns:repeat(\n    auto-fill,\n    calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 6ch + var(--sp-md))\n  )}";
+const ecoInputDateCss = ".inputs{display:grid;column-gap:var(--sp-md);grid-template-columns:repeat(\n    auto-fill,\n    calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 6ch + var(--sp-md))\n  )}";
 
@@ -42,3 +41,3 @@ const EcoInputDate = class {
     }
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, h("eco-input-number", { label: "Day", value: this.dd, min: this.ddmin, max: this.ddmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Month", value: this.mm, min: this.mmmin, max: this.mmmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Year", value: this.yyyy, min: this.yyyymin, max: this.yyyymax, readonly: this.readonly, disabled: this.disabled }), this.withtime && (h("eco-input-number", { label: "Hour", value: this.hour, min: this.hourmin, max: this.hourmax, readonly: this.readonly, disabled: this.disabled })), this.withtime && (h("eco-input-number", { label: "Min", value: this.minute, min: this.minutemin, max: this.minutemax, readonly: this.readonly, disabled: this.disabled }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, h("eco-input-number", { label: "Day", value: this.dd, min: this.ddmin, max: this.ddmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Month", value: this.mm, min: this.mmmin, max: this.mmmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Year", value: this.yyyy, min: this.yyyymin, max: this.yyyymax, readonly: this.readonly, disabled: this.disabled }), this.withtime && (h("eco-input-number", { label: "Hour", value: this.hour, min: this.hourmin, max: this.hourmax, readonly: this.readonly, disabled: this.disabled })), this.withtime && (h("eco-input-number", { label: "Min", value: this.minute, min: this.minutemin, max: this.minutemax, readonly: this.readonly, disabled: this.disabled }))))));
   }
@@ -45,0 +44,0 @@ };

dist/eco/eco-input-file.entry.js

 import { r as registerInstance, h, e as Host, g as getElement } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoInputFileCss = "div{--color:var(--c-cta-default);max-width:100%;display:grid;gap:var(--sp-xxs);grid-template-columns:100%}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color)}.button{cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md);box-shadow:0 0 0 var(--bw-thin) var(--color), 0 0 var(--bw-base) var(--color);transition:all 150ms}.button:hover,.button:focus{box-shadow:0 0 0 var(--bw-thin) var(--color),\n    0 0 var(--bw-thick) var(--color),\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.disabled .button:hover,.disabled .button:focus,.disabled .button:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}";
+const ecoInputFileCss = ":host{--color:var(--c-border-strong)}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color)}.button{cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md);box-shadow:0 0 0 var(--bw-thin) var(--color), 0 0 var(--bw-base) var(--color);transition:all 150ms}.button:hover,.button:focus{box-shadow:0 0 0 var(--bw-thin) var(--color),\n    0 0 var(--bw-thick) var(--color),\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.disabled .button:hover,.disabled .button:focus,.disabled .button:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}";
 
@@ -29,3 +29,3 @@ const EcoInputFile = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, h("span", { class: "filename" }, this.text), h("span", { class: "button" }, "Choose file")))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, h("span", { class: "filename" }, this.text), h("span", { class: "button" }, "Choose file")))));
   }
@@ -32,0 +32,0 @@ getCssClassMap() {

dist/eco/eco-input-number.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}input{display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}input:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -20,3 +20,3 @@ const EcoInputNumber = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { pattern: "[0-9]*", type: this.type, id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, placeholder: " ", min: this.min, max: this.max, step: this.step }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { pattern: "[0-9]*", type: this.type, id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, placeholder: " ", min: this.min, max: this.max, step: this.step }))));
   }
@@ -23,0 +23,0 @@ getCssClassMap() {

dist/eco/eco-input-text.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}input{display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}input:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -20,3 +20,3 @@ const EcoInputText = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { type: this.type, id: this.inputId, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.value, placeholder: " " }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { type: this.type, id: this.inputId, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.value, placeholder: " " }))));
   }
@@ -23,0 +23,0 @@ getCssClassMap() {

dist/eco/eco-input-textarea.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}textarea:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
+const ecoInputTextareaCss = ":host{--color:var(--c-border-strong);--height:var(--fs-md);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
 
@@ -20,3 +20,3 @@ const EcoInputTextarea = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("textarea", { class: this.resize && "resize", id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("textarea", { class: this.resize && "resize", id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value }))));
   }
@@ -23,0 +23,0 @@ getCssClassMap() {

dist/eco/eco-input-time.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { E as EcoSpacerSizeList } from './utils-06ee9ac3.js';
 
-const ecoInputTimeCss = "div{display:grid;gap:var(--sp-xs)}.inputs{display:grid;gap:var(--sp-xs) var(--sp-md);grid-template-columns:repeat(auto-fill, calc(var(--fs-md) * 5))}";
+const ecoInputTimeCss = ".inputs{display:grid;gap:var(--sp-xs) var(--sp-md);grid-template-columns:repeat(auto-fill, calc(var(--fs-md) * 5))}";
 
@@ -20,3 +19,3 @@ const EcoInputTime = class {
   render() {
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, this.weeks && (h("eco-input-number", { label: "Weeks", value: this.weeks, min: this.weeksmin, max: this.weeksmax, readonly: this.readonly, disabled: this.disabled })), this.days && (h("eco-input-number", { label: "Days", value: this.days, min: this.daysmin, max: this.daysmax, readonly: this.readonly, disabled: this.disabled })), this.hours && (h("eco-input-number", { label: "Hours", value: this.hours, min: this.hoursmin, max: this.hoursmax, readonly: this.readonly, disabled: this.disabled })), this.minutes && (h("eco-input-number", { label: "Minutes", value: this.minutes, min: this.minutesmin, max: this.minutesmax, readonly: this.readonly, disabled: this.disabled }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, this.weeks && (h("eco-input-number", { label: "Weeks", value: this.weeks, min: this.weeksmin, max: this.weeksmax, readonly: this.readonly, disabled: this.disabled })), this.days && (h("eco-input-number", { label: "Days", value: this.days, min: this.daysmin, max: this.daysmax, readonly: this.readonly, disabled: this.disabled })), this.hours && (h("eco-input-number", { label: "Hours", value: this.hours, min: this.hoursmin, max: this.hoursmax, readonly: this.readonly, disabled: this.disabled })), this.minutes && (h("eco-input-number", { label: "Minutes", value: this.minutes, min: this.minutesmin, max: this.minutesmax, readonly: this.readonly, disabled: this.disabled }))))));
   }
@@ -23,0 +22,0 @@ };

dist/eco/eco-messagebox.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { c as EcoTypeList } from './utils-06ee9ac3.js';
+import { b as EcoTypeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoMessageboxCss = ":host{background-color:var(--c-cta-background);display:block;border-radius:var(--br-md)}div{color:var(--c-text);background-color:hsla(var(--color), 0.1);padding:var(--sp-md);position:relative;z-index:2;border-radius:var(--br-md);border-width:calc(var(--sp-sm) / 8);border-style:solid;border-color:hsl(var(--color));display:flex}.default{--color:var(--c-text);border-color:var(--c-text-secondary);background-color:var(--c-cta-background)}.info{--color:var(--c-cta-info-hsl)}.ghost{background-color:var(--c-cta-background);border-color:var(--c-text-secondary)}.success{--color:var(--c-cta-success-hsl)}.danger{--color:var(--c-cta-danger-hsl)}.warning{--color:var(--c-cta-warning-hsl)}eco-icon{margin-right:var(--sp-md)}";

dist/eco/eco-modal.entry.js

 import { r as registerInstance, f as createEvent, h, e as Host } from './index-c81e7d26.js';
-import { d as EcoIconList, c as EcoTypeList } from './utils-06ee9ac3.js';
+import { c as EcoIconList, b as EcoTypeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoModalCss = ":host{}.overlay{position:fixed;overflow:hidden;top:0;bottom:0;left:0;right:0;background-color:var(--c-overlay);z-index:99998;display:flex;flex-direction:column;justify-content:center;align-items:center}.wrapper{z-index:99999;opacity:0.5;transform:scale(0.9);animation:wrapper 150ms ease-in-out forwards}@keyframes wrapper{to{opacity:1;transform:scale(1)}}.modal{overflow:hidden;width:clamp(\n    calc(var(--fs-md) * 12),\n    calc(var(--fs-md) * 48),\n    calc(100vw - var(--sp-md) - var(--sp-md))\n  )}header{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-md)}h2{margin:0}footer{display:flex;justify-content:flex-end;gap:var(--sp-md)}";

dist/eco/eco-progress.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
+import { b as EcoTypeList } from './utils-d88dcc72.js';
 
-const ecoProgressCss = ":host{--height:var(--sp-xs);--bar:hsl(\n    calc(var(--value) * 1.39),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  );display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-md)}progress{appearance:none;border:none;flex:1 0 auto;height:var(--height);background-color:var(--c-border-weak);border-radius:var(--br-sm);box-shadow:0 0 0 var(--bw-thin) var(--c-border-base)}progress[value]::-webkit-progress-bar{background-color:var(--c-cta-background);border-radius:var(--br-sm)}progress[value]::-webkit-progress-value{border-radius:var(--br-sm)}progress[value]::-moz-progress-bar{background:var(--bar);border-radius:var(--br-sm)}progress::-webkit-progress-value{background:var(--bar)}span{color:inherit;display:block;flex:0 1 auto;font-size:inherit;line-height:var(--line-height-tight)}";
+const ecoProgressCss = ":host{--height:var(--sp-xs);--bar:hsl(\n    calc(199 + (var(--value) * 3)),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  );display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-md)}.default{--bar:hsl(\n    calc(199 + (var(--value) * 3)),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  )}.info{--bar:var(--c-cta-info)}.ghost{--bar:var(--c-border-strong)}.success{--bar:var(--c-cta-success)}.danger{--bar:var(--c-cta-danger)}.warning{--bar:var(--c-cta-warning)}progress{appearance:none;border:none;flex:1 0 auto;height:var(--height);background-color:var(--c-border-weak);border-radius:var(--br-sm);box-shadow:0 0 0 var(--bw-thin) var(--c-border-base)}progress[value]::-webkit-progress-bar{background-color:var(--c-cta-background);border-radius:var(--br-sm)}progress[value]::-webkit-progress-value{border-radius:var(--br-sm)}progress[value]::-moz-progress-bar{background:var(--bar);border-radius:var(--br-sm)}progress::-webkit-progress-value{background:var(--bar)}span{color:inherit;display:block;flex:0 1 auto;font-size:inherit;line-height:var(--line-height-tight)}";
 
@@ -8,2 +9,3 @@ const EcoProgress = class {
     registerInstance(this, hostRef);
+    this.type = EcoTypeList.default;
     this.max = 100;
@@ -31,4 +33,10 @@ this.value = 0;
     this.doMaths();
-    return (h(Host, { style: { "--value": this.valueAsPercentageAsString } }, h("progress", { max: this.max, value: this.value }), this.showPercentage && h("span", null, this.valueAsPercentageAsString, "%"), this.of && (h("span", null, this.value, " of ", this.max, " ", this.ofString))));
+    const classMap = this.getCssClassMap();
+    return (h(Host, { style: { "--value": this.valueAsPercentageAsString } }, h("progress", { class: classMap, max: this.max, value: this.value }), this.showPercentage && h("span", null, this.valueAsPercentageAsString, "%"), this.of && (h("span", null, this.value, " of ", this.max, " ", this.ofString))));
   }
+  getCssClassMap() {
+    return {
+      [this.type]: true,
+    };
+  }
 };
@@ -35,0 +43,0 @@ EcoProgress.style = ecoProgressCss;

dist/eco/eco-radio-group.entry.js

 import { r as registerInstance, f as createEvent, h, e as Host } from './index-c81e7d26.js';
-import { E as EcoSpacerSizeList } from './utils-06ee9ac3.js';
 
@@ -20,3 +19,3 @@ const ecoRadioGroupCss = ":host{display:block}:host:last-of-type{margin-bottom:0}";
   render() {
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, h("eco-text-label", null, this.label), this.help && h("eco-text-input-help", null, this.help), this.radioData.map((radio) => (h("eco-radio-button", { label: radio.label, name: radio.name, controlValue: radio.controlValue, checked: radio.checked, disabled: radio.disabled, radioQaId: radio.qaid, onClick: () => this.selectedRadioChange(radio.controlValue) }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, h("eco-text-label", null, this.label), this.help && h("eco-text-input-help", null, this.help), this.radioData.map((radio) => (h("eco-radio-button", { label: radio.label, name: radio.name, controlValue: radio.controlValue, checked: radio.checked, disabled: radio.disabled, radioQaId: radio.qaid, onClick: () => this.selectedRadioChange(radio.controlValue) }))))));
   }
@@ -23,0 +22,0 @@ };

dist/eco/eco-select.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoSelectCss = "eco-select{--color:var(--c-text);display:block;max-width:100%}eco-select div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}eco-select select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 var(--bw-thin) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}eco-select select::-ms-expand{display:none}eco-select select:hover{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}eco-select select:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset;color:var(--color);outline:none}eco-select select option{font-weight:var(--fw-base)}eco-select *[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}eco-select select:disabled,eco-select select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}eco-select .default{--color:var(--c-text)}eco-select .error{--color:var(--c-cta-danger)}eco-select .success{--color:var(--c-cta-success)}eco-select .sm select{width:15ch}eco-select .md select{width:30ch}eco-select .lg select{width:45ch}eco-select .full select{width:100%}";
+const ecoSelectCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
 
@@ -20,3 +20,3 @@ const EcoSelect = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, h("eco-text-label", { for: this.inputId }, this.label), this.help && h("eco-text-input-help", null, this.help), h("select", { name: this.name, "data-attr-qa-id": this.selectQaId, id: this.inputId, disabled: this.disabled }, h("slot", null)))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, h("eco-text-label", { for: this.inputId }, this.label), this.help && h("eco-text-input-help", null, this.help), h("select", { name: this.name, "data-attr-qa-id": this.selectQaId, id: this.inputId, disabled: this.disabled }, h("slot", null)))));
   }
@@ -23,0 +23,0 @@ getCssClassMap() {

dist/eco/eco-spacer.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { E as EcoSpacerSizeList } from './utils-06ee9ac3.js';
+import { d as EcoSpacerSizeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoSpacerCss = ":host{display:block}div{display:grid;grid-template-columns:100%;gap:var(--sp-md)}.xxs{gap:var(--sp-xxs)}.xs{gap:var(--sp-xs)}.sm{gap:var(--sp-sm)}.md{gap:var(--sp-md)}.lg{gap:var(--sp-lg)}.xl{gap:var(--sp-xl)}.xxl{gap:var(--sp-xxl)}.xxxl{gap:var(--sp-xxxl)}";

dist/eco/eco-spinner.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { e as EcoSpinnerSizeList, f as EcoSpinnerThemeList } from './utils-06ee9ac3.js';
+import { e as EcoSpinnerSizeList, f as EcoSpinnerThemeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoSpinnerCss = ":host{display:block;--center:var(--sp-xl);--petal:calc(var(--center) / 2);--time:3000ms;--color:var(--c-cta-success);--num-petals:8;user-select:none}.fullscreen{position:fixed;overflow:hidden;top:0;bottom:0;left:0;right:0;background-color:var(--c-text);display:flex;flex-direction:column;justify-content:center;align-items:center;user-select:none;cursor:wait;z-index:99998;opacity:0;animation:fullscreen calc(var(--time) / var(--num-petals)) forwards}.sm{--center:var(--sp-xs);--petal:calc(var(--center) / 2)}.md{--center:var(--sp-md);--petal:calc(var(--center) / 2)}.lg{--center:var(--sp-xxl);--petal:calc(var(--center) / 2)}.spinner{animation:loader var(--time) linear infinite;display:grid;grid-template:1fr / 1fr;place-items:center}span{grid-column:1 / 1;grid-row:1 / 1}.center{transform:scale(0);height:var(--center);width:var(--center);border-radius:var(--center);background-color:var(--color);animation:center calc(var(--time) / var(--num-petals)) forwards;z-index:1}.petal{height:calc(var(--center) * 2.4);width:var(--petal);transform-origin:center;animation:petal var(--time) linear infinite;transform:scale(0)}.petal:after{content:\"\";display:block;height:var(--petal);width:var(--petal);border-radius:var(--petal) var(--petal) var(--petal) 0;background-color:var(--color);transform:rotateZ(-0.125turn)}.petal-1{animation-delay:calc(var(--time) / var(--num-petals) * 0)}.petal-2{animation-delay:calc(var(--time) / var(--num-petals) * 1)}.petal-3{animation-delay:calc(var(--time) / var(--num-petals) * 2)}.petal-4{animation-delay:calc(var(--time) / var(--num-petals) * 3)}.petal-5{animation-delay:calc(var(--time) / var(--num-petals) * 4)}.petal-6{animation-delay:calc(var(--time) / var(--num-petals) * 5)}.petal-7{animation-delay:calc(var(--time) / var(--num-petals) * 6)}.petal-8{animation-delay:calc(var(--time) / var(--num-petals) * 7)}.mono{--color:var(--c-text-on-light)}.fullscreen .mono{--color:var(--c-text-on-dark)}.multi{--color:var(--c-text-on-light)}.fullscreen .multi{--color:var(--c-text-on-dark)}.multi .petal-1{--color:hsl(0deg, 80%, 66%)}.multi .petal-2{--color:hsl(45deg, 80%, 66%)}.multi .petal-3{--color:hsl(90deg, 80%, 66%)}.multi .petal-4{--color:hsl(135deg, 80%, 66%)}.multi .petal-5{--color:hsl(180deg, 80%, 66%)}.multi .petal-6{--color:hsl(225deg, 80%, 66%)}.multi .petal-7{--color:hsl(270deg, 80%, 66%)}.multi .petal-8{--color:hsl(315deg, 80%, 66%)}p{padding:var(--sp-md);margin:0;color:var(--c-text-on-dark)}@keyframes fullscreen{from{opacity:0}to{opacity:0.9}}@keyframes loader{from{transform:rotateZ(0turn)}to{transform:rotateZ(1turn)}}@keyframes center{from{transform:scale(0)}to{transform:scale(1)}}@keyframes petal{0%{transform:scale(0) rotateZ(0turn)}20%{transform:scale(1) rotateZ(0.2turn)}90%{transform:scale(1) rotateZ(1turn)}100%{transform:scale(0) rotateZ(1turn)}}";

dist/eco/eco.esm.js

@@ -121,3 +121,3 @@ import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-c81e7d26.js';
   globalScripts();
-  return bootstrapLazy([["eco-modal",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress",[[1,"eco-progress",{"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spinner",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header",[[1,"eco-card-header"]]],["eco-icon",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body",[[1,"eco-card-body"]]],["eco-card-footer",[[1,"eco-card-footer"]]],["eco-spacer",[[1,"eco-spacer",{"gap":[1]}]]],["eco-text-input-optional",[[1,"eco-text-input-optional"]]],["eco-text-input-help",[[1,"eco-text-input-help"]]]], options);
+  return bootstrapLazy([["eco-modal",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress",[[1,"eco-progress",{"type":[1],"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spacer",[[1,"eco-spacer",{"gap":[1]}]]],["eco-spinner",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header",[[1,"eco-card-header"]]],["eco-icon",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-text-input-optional",[[1,"eco-text-input-optional"]]],["eco-input-wrapper",[[1,"eco-input-wrapper"]]],["eco-text-input-help",[[1,"eco-text-input-help"]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body",[[1,"eco-card-body"]]],["eco-card-footer",[[1,"eco-card-footer"]]]], options);
 });

dist/esm/eco-button.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { g as EcoInputSizeList, c as EcoTypeList } from './utils-06ee9ac3.js';
+import { g as EcoInputSizeList, b as EcoTypeList } from './utils-d88dcc72.js';
 
-const ecoButtonCss = "button{--color:var(--c-cta-default);--highlight:var(--c-cta-default);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.1);text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-base) var(--highlight);transition:all 150ms}button:hover,button:focus{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight), 0 0 var(--sp-sm) var(--shadow-outer)}button:active{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight),\n    0 0 var(--sp-sm) var(--shadow-outer) inset}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}button[disabled]:hover,button[disabled]:focus,button[disabled]:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.default{--color:var(--c-cta-default);--highlight:var(--c-cta-default)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
+const ecoButtonCss = "button{--color:var(--c-cta-default);--highlight:var(--c-border-strong);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.1);text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-base) var(--highlight);transition:all 150ms}button:hover,button:focus{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight), 0 0 var(--sp-sm) var(--shadow-outer)}button:active{box-shadow:0 0 0 var(--bw-thin) var(--highlight),\n    0 0 var(--bw-thick) var(--highlight),\n    0 0 var(--sp-sm) var(--shadow-outer) inset}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}button[disabled]:hover,button[disabled]:focus,button[disabled]:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.default{--color:var(--c-cta-default);--highlight:var(--c-border-strong)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-border-weak)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
 
@@ -6,0 +6,0 @@ const EcoButton = class {

dist/esm/eco-card.entry.js

 import { r as registerInstance, h, e as Host, F as Fragment, g as getElement } from './index-c81e7d26.js';
-import { g as EcoInputSizeList, d as EcoIconList } from './utils-06ee9ac3.js';
+import { g as EcoInputSizeList, c as EcoIconList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoCardCss = ":host{--card-background:hsl(0, 0%, 100%);--card-shadow:hsl(var(--igs-primary-dark-blue-h), 0%, 60%, 0.4);display:block;background-color:var(--card-background);border-radius:var(--br-md);box-shadow:0 calc(var(--sp-md) / 8) calc(var(--sp-md) / 6) var(--card-shadow)}.sticky{position:sticky;top:0;background-color:var(--card-background);z-index:1}.collapsable{cursor:pointer;user-select:none}.collapsed{border-radius:var(--br-md)}";

dist/esm/eco-icon.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { d as EcoIconList, c as EcoTypeList, g as EcoInputSizeList } from './utils-06ee9ac3.js';
+import { c as EcoIconList, b as EcoTypeList, g as EcoInputSizeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoIconCss = ":host{display:inline-block;--size:var(--sp-lg);--color:var(--c-text)}div{display:block;height:var(--size);width:var(--size);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;background-color:var(--color)}.sm{--size:var(--sp-md)}.md{--size:var(--sp-lg)}.lg{--size:var(--sp-xl)}.xl{--size:var(--sp-xxl)}.default{--color:var(--c-text)}.info{--color:var(--c-cta-info)}.ghost{--color:var(--c-text-secondary)}.success{--color:var(--c-cta-success)}.danger{--color:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning)}";

dist/esm/eco-input-date.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { E as EcoSpacerSizeList } from './utils-06ee9ac3.js';
 
-const ecoInputDateCss = "div{display:grid;gap:var(--sp-xxs)}.inputs{display:grid;column-gap:var(--sp-md);grid-template-columns:repeat(\n    auto-fill,\n    calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 6ch + var(--sp-md))\n  )}";
+const ecoInputDateCss = ".inputs{display:grid;column-gap:var(--sp-md);grid-template-columns:repeat(\n    auto-fill,\n    calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 3ch + var(--sp-md))\n      calc(var(--sp-md) + 6ch + var(--sp-md))\n  )}";
 
@@ -42,3 +41,3 @@ const EcoInputDate = class {
     }
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, h("eco-input-number", { label: "Day", value: this.dd, min: this.ddmin, max: this.ddmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Month", value: this.mm, min: this.mmmin, max: this.mmmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Year", value: this.yyyy, min: this.yyyymin, max: this.yyyymax, readonly: this.readonly, disabled: this.disabled }), this.withtime && (h("eco-input-number", { label: "Hour", value: this.hour, min: this.hourmin, max: this.hourmax, readonly: this.readonly, disabled: this.disabled })), this.withtime && (h("eco-input-number", { label: "Min", value: this.minute, min: this.minutemin, max: this.minutemax, readonly: this.readonly, disabled: this.disabled }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, h("eco-input-number", { label: "Day", value: this.dd, min: this.ddmin, max: this.ddmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Month", value: this.mm, min: this.mmmin, max: this.mmmax, readonly: this.readonly, disabled: this.disabled }), h("eco-input-number", { label: "Year", value: this.yyyy, min: this.yyyymin, max: this.yyyymax, readonly: this.readonly, disabled: this.disabled }), this.withtime && (h("eco-input-number", { label: "Hour", value: this.hour, min: this.hourmin, max: this.hourmax, readonly: this.readonly, disabled: this.disabled })), this.withtime && (h("eco-input-number", { label: "Min", value: this.minute, min: this.minutemin, max: this.minutemax, readonly: this.readonly, disabled: this.disabled }))))));
   }
@@ -45,0 +44,0 @@ };

dist/esm/eco-input-file.entry.js

 import { r as registerInstance, h, e as Host, g as getElement } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoInputFileCss = "div{--color:var(--c-cta-default);max-width:100%;display:grid;gap:var(--sp-xxs);grid-template-columns:100%}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color)}.button{cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md);box-shadow:0 0 0 var(--bw-thin) var(--color), 0 0 var(--bw-base) var(--color);transition:all 150ms}.button:hover,.button:focus{box-shadow:0 0 0 var(--bw-thin) var(--color),\n    0 0 var(--bw-thick) var(--color),\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.disabled .button:hover,.disabled .button:focus,.disabled .button:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}";
+const ecoInputFileCss = ":host{--color:var(--c-border-strong)}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color);border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color)}.button{cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md);box-shadow:0 0 0 var(--bw-thin) var(--color), 0 0 var(--bw-base) var(--color);transition:all 150ms}.button:hover,.button:focus{box-shadow:0 0 0 var(--bw-thin) var(--color),\n    0 0 var(--bw-thick) var(--color),\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);background-color:var(--c-input-disabled);box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}.disabled .button:hover,.disabled .button:focus,.disabled .button:active{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-background)}";
 
@@ -29,3 +29,3 @@ const EcoInputFile = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, h("span", { class: "filename" }, this.text), h("span", { class: "button" }, "Choose file")))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, h("span", { class: "filename" }, this.text), h("span", { class: "button" }, "Choose file")))));
   }
@@ -32,0 +32,0 @@ getCssClassMap() {

dist/esm/eco-input-number.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}input{display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}input:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -20,3 +20,3 @@ const EcoInputNumber = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { pattern: "[0-9]*", type: this.type, id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, placeholder: " ", min: this.min, max: this.max, step: this.step }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { pattern: "[0-9]*", type: this.type, id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, placeholder: " ", min: this.min, max: this.max, step: this.step }))));
   }
@@ -23,0 +23,0 @@ getCssClassMap() {

dist/esm/eco-input-text.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}input{display:block;font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-thin) var(--c-cta-danger)}input:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -20,3 +20,3 @@ const EcoInputText = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { type: this.type, id: this.inputId, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.value, placeholder: " " }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { type: this.type, id: this.inputId, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.value, placeholder: " " }))));
   }
@@ -23,0 +23,0 @@ getCssClassMap() {

dist/esm/eco-input-textarea.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 var(--bw-thin) var(--color);max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 var(--bw-thin) var(--c-cta-success);box-shadow:0 0 0 var(--bw-thin) var(--color)}textarea:focus{box-shadow:0 0 0 var(--bw-thick) var(--color)}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
+const ecoInputTextareaCss = ":host{--color:var(--c-border-strong);--height:var(--fs-md);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
 
@@ -20,3 +20,3 @@ const EcoInputTextarea = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("textarea", { class: this.resize && "resize", id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value }))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("textarea", { class: this.resize && "resize", id: this.inputId, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value }))));
   }
@@ -23,0 +23,0 @@ getCssClassMap() {

dist/esm/eco-input-time.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { E as EcoSpacerSizeList } from './utils-06ee9ac3.js';
 
-const ecoInputTimeCss = "div{display:grid;gap:var(--sp-xs)}.inputs{display:grid;gap:var(--sp-xs) var(--sp-md);grid-template-columns:repeat(auto-fill, calc(var(--fs-md) * 5))}";
+const ecoInputTimeCss = ".inputs{display:grid;gap:var(--sp-xs) var(--sp-md);grid-template-columns:repeat(auto-fill, calc(var(--fs-md) * 5))}";
 
@@ -20,3 +19,3 @@ const EcoInputTime = class {
   render() {
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, this.weeks && (h("eco-input-number", { label: "Weeks", value: this.weeks, min: this.weeksmin, max: this.weeksmax, readonly: this.readonly, disabled: this.disabled })), this.days && (h("eco-input-number", { label: "Days", value: this.days, min: this.daysmin, max: this.daysmax, readonly: this.readonly, disabled: this.disabled })), this.hours && (h("eco-input-number", { label: "Hours", value: this.hours, min: this.hoursmin, max: this.hoursmax, readonly: this.readonly, disabled: this.disabled })), this.minutes && (h("eco-input-number", { label: "Minutes", value: this.minutes, min: this.minutesmin, max: this.minutesmax, readonly: this.readonly, disabled: this.disabled }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, this.label && (h("eco-text-label", null, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("span", { class: "inputs" }, this.weeks && (h("eco-input-number", { label: "Weeks", value: this.weeks, min: this.weeksmin, max: this.weeksmax, readonly: this.readonly, disabled: this.disabled })), this.days && (h("eco-input-number", { label: "Days", value: this.days, min: this.daysmin, max: this.daysmax, readonly: this.readonly, disabled: this.disabled })), this.hours && (h("eco-input-number", { label: "Hours", value: this.hours, min: this.hoursmin, max: this.hoursmax, readonly: this.readonly, disabled: this.disabled })), this.minutes && (h("eco-input-number", { label: "Minutes", value: this.minutes, min: this.minutesmin, max: this.minutesmax, readonly: this.readonly, disabled: this.disabled }))))));
   }
@@ -23,0 +22,0 @@ };

dist/esm/eco-messagebox.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { c as EcoTypeList } from './utils-06ee9ac3.js';
+import { b as EcoTypeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoMessageboxCss = ":host{background-color:var(--c-cta-background);display:block;border-radius:var(--br-md)}div{color:var(--c-text);background-color:hsla(var(--color), 0.1);padding:var(--sp-md);position:relative;z-index:2;border-radius:var(--br-md);border-width:calc(var(--sp-sm) / 8);border-style:solid;border-color:hsl(var(--color));display:flex}.default{--color:var(--c-text);border-color:var(--c-text-secondary);background-color:var(--c-cta-background)}.info{--color:var(--c-cta-info-hsl)}.ghost{background-color:var(--c-cta-background);border-color:var(--c-text-secondary)}.success{--color:var(--c-cta-success-hsl)}.danger{--color:var(--c-cta-danger-hsl)}.warning{--color:var(--c-cta-warning-hsl)}eco-icon{margin-right:var(--sp-md)}";

dist/esm/eco-modal.entry.js

 import { r as registerInstance, f as createEvent, h, e as Host } from './index-c81e7d26.js';
-import { d as EcoIconList, c as EcoTypeList } from './utils-06ee9ac3.js';
+import { c as EcoIconList, b as EcoTypeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoModalCss = ":host{}.overlay{position:fixed;overflow:hidden;top:0;bottom:0;left:0;right:0;background-color:var(--c-overlay);z-index:99998;display:flex;flex-direction:column;justify-content:center;align-items:center}.wrapper{z-index:99999;opacity:0.5;transform:scale(0.9);animation:wrapper 150ms ease-in-out forwards}@keyframes wrapper{to{opacity:1;transform:scale(1)}}.modal{overflow:hidden;width:clamp(\n    calc(var(--fs-md) * 12),\n    calc(var(--fs-md) * 48),\n    calc(100vw - var(--sp-md) - var(--sp-md))\n  )}header{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-md)}h2{margin:0}footer{display:flex;justify-content:flex-end;gap:var(--sp-md)}";

dist/esm/eco-progress.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
+import { b as EcoTypeList } from './utils-d88dcc72.js';
 
-const ecoProgressCss = ":host{--height:var(--sp-xs);--bar:hsl(\n    calc(var(--value) * 1.39),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  );display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-md)}progress{appearance:none;border:none;flex:1 0 auto;height:var(--height);background-color:var(--c-border-weak);border-radius:var(--br-sm);box-shadow:0 0 0 var(--bw-thin) var(--c-border-base)}progress[value]::-webkit-progress-bar{background-color:var(--c-cta-background);border-radius:var(--br-sm)}progress[value]::-webkit-progress-value{border-radius:var(--br-sm)}progress[value]::-moz-progress-bar{background:var(--bar);border-radius:var(--br-sm)}progress::-webkit-progress-value{background:var(--bar)}span{color:inherit;display:block;flex:0 1 auto;font-size:inherit;line-height:var(--line-height-tight)}";
+const ecoProgressCss = ":host{--height:var(--sp-xs);--bar:hsl(\n    calc(199 + (var(--value) * 3)),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  );display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-md)}.default{--bar:hsl(\n    calc(199 + (var(--value) * 3)),\n    calc(var(--igs-secondary-grass-s) * 1%),\n    calc(var(--igs-secondary-grass-l) * 1%)\n  )}.info{--bar:var(--c-cta-info)}.ghost{--bar:var(--c-border-strong)}.success{--bar:var(--c-cta-success)}.danger{--bar:var(--c-cta-danger)}.warning{--bar:var(--c-cta-warning)}progress{appearance:none;border:none;flex:1 0 auto;height:var(--height);background-color:var(--c-border-weak);border-radius:var(--br-sm);box-shadow:0 0 0 var(--bw-thin) var(--c-border-base)}progress[value]::-webkit-progress-bar{background-color:var(--c-cta-background);border-radius:var(--br-sm)}progress[value]::-webkit-progress-value{border-radius:var(--br-sm)}progress[value]::-moz-progress-bar{background:var(--bar);border-radius:var(--br-sm)}progress::-webkit-progress-value{background:var(--bar)}span{color:inherit;display:block;flex:0 1 auto;font-size:inherit;line-height:var(--line-height-tight)}";
 
@@ -8,2 +9,3 @@ const EcoProgress = class {
     registerInstance(this, hostRef);
+    this.type = EcoTypeList.default;
     this.max = 100;
@@ -31,4 +33,10 @@ this.value = 0;
     this.doMaths();
-    return (h(Host, { style: { "--value": this.valueAsPercentageAsString } }, h("progress", { max: this.max, value: this.value }), this.showPercentage && h("span", null, this.valueAsPercentageAsString, "%"), this.of && (h("span", null, this.value, " of ", this.max, " ", this.ofString))));
+    const classMap = this.getCssClassMap();
+    return (h(Host, { style: { "--value": this.valueAsPercentageAsString } }, h("progress", { class: classMap, max: this.max, value: this.value }), this.showPercentage && h("span", null, this.valueAsPercentageAsString, "%"), this.of && (h("span", null, this.value, " of ", this.max, " ", this.ofString))));
   }
+  getCssClassMap() {
+    return {
+      [this.type]: true,
+    };
+  }
 };
@@ -35,0 +43,0 @@ EcoProgress.style = ecoProgressCss;

dist/esm/eco-radio-group.entry.js

 import { r as registerInstance, f as createEvent, h, e as Host } from './index-c81e7d26.js';
-import { E as EcoSpacerSizeList } from './utils-06ee9ac3.js';
 
@@ -20,3 +19,3 @@ const ecoRadioGroupCss = ":host{display:block}:host:last-of-type{margin-bottom:0}";
   render() {
-    return (h(Host, null, h("eco-spacer", { gap: EcoSpacerSizeList.xxs }, h("eco-text-label", null, this.label), this.help && h("eco-text-input-help", null, this.help), this.radioData.map((radio) => (h("eco-radio-button", { label: radio.label, name: radio.name, controlValue: radio.controlValue, checked: radio.checked, disabled: radio.disabled, radioQaId: radio.qaid, onClick: () => this.selectedRadioChange(radio.controlValue) }))))));
+    return (h(Host, null, h("eco-input-wrapper", null, h("eco-text-label", null, this.label), this.help && h("eco-text-input-help", null, this.help), this.radioData.map((radio) => (h("eco-radio-button", { label: radio.label, name: radio.name, controlValue: radio.controlValue, checked: radio.checked, disabled: radio.disabled, radioQaId: radio.qaid, onClick: () => this.selectedRadioChange(radio.controlValue) }))))));
   }
@@ -23,0 +22,0 @@ };

dist/esm/eco-select.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { a as EcoInputStatusList, b as EcoInputWidthList } from './utils-06ee9ac3.js';
+import { E as EcoInputStatusList, a as EcoInputWidthList } from './utils-d88dcc72.js';
 
-const ecoSelectCss = "eco-select{--color:var(--c-text);display:block;max-width:100%}eco-select div{display:grid;gap:var(--sp-xxs);grid-template-columns:100%;color:var(--color)}eco-select select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 var(--bw-thin) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}eco-select select::-ms-expand{display:none}eco-select select:hover{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}eco-select select:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset;color:var(--color);outline:none}eco-select select option{font-weight:var(--fw-base)}eco-select *[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}eco-select select:disabled,eco-select select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}eco-select .default{--color:var(--c-text)}eco-select .error{--color:var(--c-cta-danger)}eco-select .success{--color:var(--c-cta-success)}eco-select .sm select{width:15ch}eco-select .md select{width:30ch}eco-select .lg select{width:45ch}eco-select .full select{width:100%}";
+const ecoSelectCss = ":host{--color:var(--c-border-strong);display:block;max-width:100%}.default{--color:var(--c-border-strong)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
 
@@ -20,3 +20,3 @@ const EcoSelect = class {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, h("eco-text-label", { for: this.inputId }, this.label), this.help && h("eco-text-input-help", null, this.help), h("select", { name: this.name, "data-attr-qa-id": this.selectQaId, id: this.inputId, disabled: this.disabled }, h("slot", null)))));
+    return (h(Host, null, h("eco-input-wrapper", { class: classMap }, h("eco-text-label", { for: this.inputId }, this.label), this.help && h("eco-text-input-help", null, this.help), h("select", { name: this.name, "data-attr-qa-id": this.selectQaId, id: this.inputId, disabled: this.disabled }, h("slot", null)))));
   }
@@ -23,0 +23,0 @@ getCssClassMap() {

dist/esm/eco-spacer.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { E as EcoSpacerSizeList } from './utils-06ee9ac3.js';
+import { d as EcoSpacerSizeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoSpacerCss = ":host{display:block}div{display:grid;grid-template-columns:100%;gap:var(--sp-md)}.xxs{gap:var(--sp-xxs)}.xs{gap:var(--sp-xs)}.sm{gap:var(--sp-sm)}.md{gap:var(--sp-md)}.lg{gap:var(--sp-lg)}.xl{gap:var(--sp-xl)}.xxl{gap:var(--sp-xxl)}.xxxl{gap:var(--sp-xxxl)}";

dist/esm/eco-spinner.entry.js

 import { r as registerInstance, h, e as Host } from './index-c81e7d26.js';
-import { e as EcoSpinnerSizeList, f as EcoSpinnerThemeList } from './utils-06ee9ac3.js';
+import { e as EcoSpinnerSizeList, f as EcoSpinnerThemeList } from './utils-d88dcc72.js';
 
@@ -4,0 +4,0 @@ const ecoSpinnerCss = ":host{display:block;--center:var(--sp-xl);--petal:calc(var(--center) / 2);--time:3000ms;--color:var(--c-cta-success);--num-petals:8;user-select:none}.fullscreen{position:fixed;overflow:hidden;top:0;bottom:0;left:0;right:0;background-color:var(--c-text);display:flex;flex-direction:column;justify-content:center;align-items:center;user-select:none;cursor:wait;z-index:99998;opacity:0;animation:fullscreen calc(var(--time) / var(--num-petals)) forwards}.sm{--center:var(--sp-xs);--petal:calc(var(--center) / 2)}.md{--center:var(--sp-md);--petal:calc(var(--center) / 2)}.lg{--center:var(--sp-xxl);--petal:calc(var(--center) / 2)}.spinner{animation:loader var(--time) linear infinite;display:grid;grid-template:1fr / 1fr;place-items:center}span{grid-column:1 / 1;grid-row:1 / 1}.center{transform:scale(0);height:var(--center);width:var(--center);border-radius:var(--center);background-color:var(--color);animation:center calc(var(--time) / var(--num-petals)) forwards;z-index:1}.petal{height:calc(var(--center) * 2.4);width:var(--petal);transform-origin:center;animation:petal var(--time) linear infinite;transform:scale(0)}.petal:after{content:\"\";display:block;height:var(--petal);width:var(--petal);border-radius:var(--petal) var(--petal) var(--petal) 0;background-color:var(--color);transform:rotateZ(-0.125turn)}.petal-1{animation-delay:calc(var(--time) / var(--num-petals) * 0)}.petal-2{animation-delay:calc(var(--time) / var(--num-petals) * 1)}.petal-3{animation-delay:calc(var(--time) / var(--num-petals) * 2)}.petal-4{animation-delay:calc(var(--time) / var(--num-petals) * 3)}.petal-5{animation-delay:calc(var(--time) / var(--num-petals) * 4)}.petal-6{animation-delay:calc(var(--time) / var(--num-petals) * 5)}.petal-7{animation-delay:calc(var(--time) / var(--num-petals) * 6)}.petal-8{animation-delay:calc(var(--time) / var(--num-petals) * 7)}.mono{--color:var(--c-text-on-light)}.fullscreen .mono{--color:var(--c-text-on-dark)}.multi{--color:var(--c-text-on-light)}.fullscreen .multi{--color:var(--c-text-on-dark)}.multi .petal-1{--color:hsl(0deg, 80%, 66%)}.multi .petal-2{--color:hsl(45deg, 80%, 66%)}.multi .petal-3{--color:hsl(90deg, 80%, 66%)}.multi .petal-4{--color:hsl(135deg, 80%, 66%)}.multi .petal-5{--color:hsl(180deg, 80%, 66%)}.multi .petal-6{--color:hsl(225deg, 80%, 66%)}.multi .petal-7{--color:hsl(270deg, 80%, 66%)}.multi .petal-8{--color:hsl(315deg, 80%, 66%)}p{padding:var(--sp-md);margin:0;color:var(--c-text-on-dark)}@keyframes fullscreen{from{opacity:0}to{opacity:0.9}}@keyframes loader{from{transform:rotateZ(0turn)}to{transform:rotateZ(1turn)}}@keyframes center{from{transform:scale(0)}to{transform:scale(1)}}@keyframes petal{0%{transform:scale(0) rotateZ(0turn)}20%{transform:scale(1) rotateZ(0.2turn)}90%{transform:scale(1) rotateZ(1turn)}100%{transform:scale(0) rotateZ(1turn)}}";

dist/esm/eco.js

@@ -121,3 +121,3 @@ import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-c81e7d26.js';
   globalScripts();
-  return bootstrapLazy([["eco-modal",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress",[[1,"eco-progress",{"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spinner",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header",[[1,"eco-card-header"]]],["eco-icon",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body",[[1,"eco-card-body"]]],["eco-card-footer",[[1,"eco-card-footer"]]],["eco-spacer",[[1,"eco-spacer",{"gap":[1]}]]],["eco-text-input-optional",[[1,"eco-text-input-optional"]]],["eco-text-input-help",[[1,"eco-text-input-help"]]]], options);
+  return bootstrapLazy([["eco-modal",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress",[[1,"eco-progress",{"type":[1],"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spacer",[[1,"eco-spacer",{"gap":[1]}]]],["eco-spinner",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header",[[1,"eco-card-header"]]],["eco-icon",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-text-input-optional",[[1,"eco-text-input-optional"]]],["eco-input-wrapper",[[1,"eco-input-wrapper"]]],["eco-text-input-help",[[1,"eco-text-input-help"]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body",[[1,"eco-card-body"]]],["eco-card-footer",[[1,"eco-card-footer"]]]], options);
 });

dist/esm/loader.js

@@ -29,3 +29,3 @@ import { B as BUILD, C as CSS, p as plt, w as win, a as promiseResolve, b as bootstrapLazy } from './index-c81e7d26.js';
   globalScripts();
-  return bootstrapLazy([["eco-modal",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress",[[1,"eco-progress",{"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spinner",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header",[[1,"eco-card-header"]]],["eco-icon",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body",[[1,"eco-card-body"]]],["eco-card-footer",[[1,"eco-card-footer"]]],["eco-spacer",[[1,"eco-spacer",{"gap":[1]}]]],["eco-text-input-optional",[[1,"eco-text-input-optional"]]],["eco-text-input-help",[[1,"eco-text-input-help"]]]], options);
+  return bootstrapLazy([["eco-modal",[[1,"eco-modal",{"modaltitle":[1],"visible":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-time",[[1,"eco-input-time",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"weeks":[8],"days":[8],"hours":[8],"minutes":[8],"weeksmin":[2],"weeksmax":[2],"daysmin":[2],"daysmax":[2],"hoursmin":[2],"hoursmax":[2],"minutesmin":[2],"minutesmax":[2]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[8,"radio-data"]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-progress",[[1,"eco-progress",{"type":[1],"max":[2],"value":[2],"roundTo":[2,"round-to"],"showPercentage":[4,"show-percentage"],"of":[4],"ofString":[1,"of-string"]}]]],["eco-spacer",[[1,"eco-spacer",{"gap":[1]}]]],["eco-spinner",[[1,"eco-spinner",{"text":[1],"fullscreen":[4],"size":[1],"theme":[1]}]]],["eco-table",[[4,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-card-header",[[1,"eco-card-header"]]],["eco-icon",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-radio-button",[[0,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-text-input-optional",[[1,"eco-text-input-optional"]]],["eco-input-wrapper",[[1,"eco-input-wrapper"]]],["eco-text-input-help",[[1,"eco-text-input-help"]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body",[[1,"eco-card-body"]]],["eco-card-footer",[[1,"eco-card-footer"]]]], options);
   });
@@ -32,0 +32,0 @@ };

dist/types/components.d.ts

@@ -150,2 +150,4 @@ /* eslint-disable */
     }
+    interface EcoInputWrapper {
+    }
     interface EcoMessagebox {
@@ -166,2 +168,3 @@ "icon": EcoIcon["icon"];
         "showPercentage": boolean;
+        "type": EcoTypeList;
         "value": number;
@@ -311,2 +314,8 @@ }
     };
+    interface HTMLEcoInputWrapperElement extends Components.EcoInputWrapper, HTMLStencilElement {
+    }
+    var HTMLEcoInputWrapperElement: {
+        prototype: HTMLEcoInputWrapperElement;
+        new (): HTMLEcoInputWrapperElement;
+    };
     interface HTMLEcoMessageboxElement extends Components.EcoMessagebox, HTMLStencilElement {
@@ -400,2 +409,3 @@ }
         "eco-input-time": HTMLEcoInputTimeElement;
+        "eco-input-wrapper": HTMLEcoInputWrapperElement;
         "eco-messagebox": HTMLEcoMessageboxElement;
@@ -555,2 +565,4 @@ "eco-modal": HTMLEcoModalElement;
     }
+    interface EcoInputWrapper {
+    }
     interface EcoMessagebox {
@@ -573,2 +585,3 @@ "icon"?: EcoIcon["icon"];
         "showPercentage"?: boolean;
+        "type"?: EcoTypeList;
         "value"?: number;
@@ -643,2 +656,3 @@ }
         "eco-input-time": EcoInputTime;
+        "eco-input-wrapper": EcoInputWrapper;
         "eco-messagebox": EcoMessagebox;
@@ -677,2 +691,3 @@ "eco-modal": EcoModal;
             "eco-input-time": LocalJSX.EcoInputTime & JSXBase.HTMLAttributes<HTMLEcoInputTimeElement>;
+            "eco-input-wrapper": LocalJSX.EcoInputWrapper & JSXBase.HTMLAttributes<HTMLEcoInputWrapperElement>;
             "eco-messagebox": LocalJSX.EcoMessagebox & JSXBase.HTMLAttributes<HTMLEcoMessageboxElement>;
@@ -679,0 +694,0 @@ "eco-modal": LocalJSX.EcoModal & JSXBase.HTMLAttributes<HTMLEcoModalElement>;

dist/types/components/eco-progress/eco-progress.d.ts

@@ -0,2 +1,4 @@
+import { EcoTypeList } from "../../utils/utils";
 export declare class EcoProgress {
+  type: EcoTypeList;
   max: number;
@@ -13,2 +15,3 @@ value: number;
   render(): any;
+  private getCssClassMap;
 }

package.json

 {
   "name": "@intelligentgrowthsolutions/eco",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Eco Design System for Intelligent Growth Solutions",
@@ -42,9 +42,9 @@ "main": "dist/index.cjs.js",
     "@babel/core": "^7.12.3",
-    "@storybook/addon-a11y": "^6.1.16",
-    "@storybook/addon-actions": "^6.1.16",
-    "@storybook/addon-docs": "^6.1.16",
-    "@storybook/addon-essentials": "^6.1.16",
-    "@storybook/addon-links": "^6.1.16",
-    "@storybook/addon-storysource": "^6.1.16",
-    "@storybook/web-components": "^6.1.16",
+    "@storybook/addon-a11y": "^6.1.14",
+    "@storybook/addon-actions": "^6.1.14",
+    "@storybook/addon-docs": "^6.1.14",
+    "@storybook/addon-essentials": "^6.1.14",
+    "@storybook/addon-links": "^6.1.14",
+    "@storybook/addon-storysource": "^6.1.14",
+    "@storybook/web-components": "^6.1.14",
     "@types/jest": "^26.0.15",
@@ -51,0 +51,0 @@ "@types/puppeteer": "^5.4.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1192986

increased by0.46%

Number of package files

323

increased by2.22%

Lines of code

23920

increased by0.94%

Number of low supply chain risk alerts

29

decreased by-21.62%

No dependency changes