@maggioli-design-system/mds-stepper-bar-item - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

dist/cjs/loader.cjs.js

@@ -17,3 +17,3 @@ 'use strict';
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mds-stepper-bar-item.cjs",[[1,"mds-stepper-bar-item",{"text":[1],"step":[4],"badge":[1540],"icon":[1],"iconChecked":[1,"icon-checked"],"checked":[516],"current":[1540],"typography":[1],"isChecked":[32],"isCurrent":[32],"index":[32]}]]]], options);
+  return index.bootstrapLazy([["mds-stepper-bar-item.cjs",[[1,"mds-stepper-bar-item",{"text":[1],"step":[4],"badge":[1540],"icon":[1],"iconChecked":[1,"icon-checked"],"selected":[516],"current":[1540],"typography":[1],"isSelected":[32],"isCurrent":[32],"index":[32]}]]]], options);
   });
@@ -20,0 +20,0 @@ };

dist/cjs/mds-stepper-bar-item.cjs.entry.js

@@ -50,3 +50,3 @@ 'use strict';
 
-const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-checked:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-checked:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-checked);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-selected:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-selected:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ selected ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-selected);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-selected);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ selected ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
 
@@ -56,3 +56,3 @@ const MdsStepperBarItem = class {
     index.registerInstance(this, hostRef);
-    this.currentEvent = index.createEvent(this, "currentEvent", 7);
+    this.selectedEvent = index.createEvent(this, "mdsStepperBarItemSelect", 7);
     this.km = new KeyboardManager();
@@ -69,8 +69,6 @@ this.componentDidLoad = () => {
       this.isCurrent = true;
-      if (this.isCurrent) {
-        this.currentEvent.emit(this.host.id);
-      }
+      this.selectedEvent.emit(this.host.id);
     };
     this.showBadge = () => {
-      if (this.isChecked) {
+      if (this.isSelected) {
         return index.h("mds-badge", { class: "badge", variant: "success", tone: "weak", typography: "option" }, "Completato");
@@ -83,3 +81,3 @@ }
     };
-    this.isChecked = undefined;
+    this.isSelected = undefined;
     this.isCurrent = undefined;
@@ -92,4 +90,4 @@ this.index = undefined;
     this.iconChecked = this.icon;
-    this.checked = undefined;
-    this.current = undefined;
+    this.selected = false;
+    this.current = false;
     this.typography = 'h6';
@@ -99,18 +97,18 @@ }
     this.isCurrent = this.current;
-    this.isChecked = this.checked;
+    this.isSelected = this.selected;
     this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
   }
-  checkChecked(newValue) {
-    this.isChecked = newValue;
+  selectedHandler(newValue) {
+    this.isSelected = newValue;
   }
-  checkCurrent(newValue) {
+  currentHandler(newValue) {
     this.isCurrent = newValue;
   }
   render() {
-    return (index.h(index.Host, null, index.h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, index.h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), index.h("div", { class: "infos", onClick: this.toggle }, this.step && index.h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && index.h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && index.h("div", null, this.showBadge()))));
+    return (index.h(index.Host, null, index.h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, index.h("mds-icon", { class: "icon", name: clsx(this.isSelected && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { class: "progress", progress: this.isSelected ? 1 : 0 })), index.h("div", { class: "infos", onClick: this.toggle }, this.step && index.h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && index.h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && index.h("div", null, this.showBadge()))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
-    "checked": ["checkChecked"],
-    "current": ["checkCurrent"]
+    "selected": ["selectedHandler"],
+    "current": ["currentHandler"]
   }; }
@@ -117,0 +115,0 @@ };

dist/cjs/mds-stepper-bar-item.cjs.js

@@ -20,5 +20,5 @@ 'use strict';
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-stepper-bar-item.cjs",[[1,"mds-stepper-bar-item",{"text":[1],"step":[4],"badge":[1540],"icon":[1],"iconChecked":[1,"icon-checked"],"checked":[516],"current":[1540],"typography":[1],"isChecked":[32],"isCurrent":[32],"index":[32]}]]]], options);
+  return index.bootstrapLazy([["mds-stepper-bar-item.cjs",[[1,"mds-stepper-bar-item",{"text":[1],"step":[4],"badge":[1540],"icon":[1],"iconChecked":[1,"icon-checked"],"selected":[516],"current":[1540],"typography":[1],"isSelected":[32],"isCurrent":[32],"index":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

dist/collection/components/mds-stepper-bar-item/mds-stepper-bar-item.js

@@ -17,8 +17,6 @@ import clsx from 'clsx';
       this.isCurrent = true;
-      if (this.isCurrent) {
-        this.currentEvent.emit(this.host.id);
-      }
+      this.selectedEvent.emit(this.host.id);
     };
     this.showBadge = () => {
-      if (this.isChecked) {
+      if (this.isSelected) {
         return h("mds-badge", { class: "badge", variant: "success", tone: "weak", typography: "option" }, "Completato");
@@ -31,3 +29,3 @@ }
     };
-    this.isChecked = undefined;
+    this.isSelected = undefined;
     this.isCurrent = undefined;
@@ -40,4 +38,4 @@ this.index = undefined;
     this.iconChecked = this.icon;
-    this.checked = undefined;
-    this.current = undefined;
+    this.selected = false;
+    this.current = false;
     this.typography = 'h6';
@@ -47,13 +45,13 @@ }
     this.isCurrent = this.current;
-    this.isChecked = this.checked;
+    this.isSelected = this.selected;
     this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
   }
-  checkChecked(newValue) {
-    this.isChecked = newValue;
+  selectedHandler(newValue) {
+    this.isSelected = newValue;
   }
-  checkCurrent(newValue) {
+  currentHandler(newValue) {
     this.isCurrent = newValue;
   }
   render() {
-    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
+    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isSelected && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isSelected ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
   }
@@ -160,3 +158,3 @@ static get is() { return "mds-stepper-bar-item"; }
       },
-      "checked": {
+      "selected": {
         "type": "boolean",
@@ -175,4 +173,5 @@ "mutable": false,
         },
-        "attribute": "checked",
-        "reflect": true
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
       },
@@ -194,3 +193,4 @@ "current": {
         "attribute": "current",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       },
@@ -224,3 +224,3 @@ "typography": {
     return {
-      "isChecked": {},
+      "isSelected": {},
       "isCurrent": {},
@@ -232,4 +232,4 @@ "index": {}
     return [{
-        "method": "currentEvent",
-        "name": "currentEvent",
+        "method": "selectedEvent",
+        "name": "mdsStepperBarItemSelect",
         "bubbles": true,
@@ -240,3 +240,3 @@ "cancelable": true,
           "tags": [],
-          "text": "Emits when the accordion is current"
+          "text": "Emits when the accordion is selected"
         },
@@ -253,9 +253,9 @@ "complexType": {
     return [{
-        "propName": "checked",
-        "methodName": "checkChecked"
+        "propName": "selected",
+        "methodName": "selectedHandler"
       }, {
         "propName": "current",
-        "methodName": "checkCurrent"
+        "methodName": "currentHandler"
       }];
   }
 }

dist/collection/components/mds-stepper-bar-item/test/mds-stepper-bar-item.stories.js

@@ -6,3 +6,3 @@ import { typographyInfoDictionary } from '@dictionary/typography';
   argTypes: {
-    checked: {
+    selected: {
       type: { name: 'boolean' },
@@ -36,3 +36,3 @@ description: 'Specifies if the component is checked or not',
 const Template = args => h("mds-stepper-bar", { select: 0 }, h("mds-stepper-bar-item", { "icon-checked": "mi/baseline/done", icon: "mi/baseline/agriculture", text: "First" }), h("mds-stepper-bar-item", { "icon-checked": "mi/baseline/done", icon: "mi/baseline/adobe", text: "Second" }), h("mds-stepper-bar-item", Object.assign({ "icon-checked": "mi/baseline/done" }, args)), h("mds-stepper-bar-item", { "icon-checked": "mi/baseline/done", icon: "mi/baseline/css", text: "Forth" }), h("mds-stepper-bar-item", { "icon-checked": "mi/baseline/done", icon: "mdi/baseball", text: "Fifth" }));
-const TemplateChecked = args => h("mds-stepper-bar", { select: 3 }, h("mds-stepper-bar-item", { checked: true, icon: "mi/baseline/agriculture", "icon-checked": args['icon-checked'], text: "First" }), h("mds-stepper-bar-item", { checked: true, icon: "mi/baseline/adobe", "icon-checked": args['icon-checked'], text: "Second" }), h("mds-stepper-bar-item", Object.assign({}, args)), h("mds-stepper-bar-item", { icon: "mi/baseline/css", text: "Forth" }), h("mds-stepper-bar-item", { icon: "mi/baseline/local-activity", text: "Fifth" }));
+const TemplateSelected = args => h("mds-stepper-bar", { select: 3 }, h("mds-stepper-bar-item", { selected: true, icon: "mi/baseline/agriculture", "icon-checked": args['icon-checked'], text: "First" }), h("mds-stepper-bar-item", { selected: true, icon: "mi/baseline/adobe", "icon-checked": args['icon-checked'], text: "Second" }), h("mds-stepper-bar-item", Object.assign({}, args)), h("mds-stepper-bar-item", { icon: "mi/baseline/css", text: "Forth" }), h("mds-stepper-bar-item", { icon: "mi/baseline/local-activity", text: "Fifth" }));
 // mi_baseline_local-activity
@@ -46,8 +46,8 @@ // mi_baseline_bluetooth
 Default.args = Object.assign({}, defaultArgs);
-export const checked = Template.bind({});
-checked.args = Object.assign(Object.assign({}, defaultArgs), { checked: true });
+export const selected = Template.bind({});
+selected.args = Object.assign(Object.assign({}, defaultArgs), { selected: true });
 export const current = Template.bind({});
 current.args = Object.assign(Object.assign({}, defaultArgs), { current: true });
-export const iconChecked = TemplateChecked.bind({});
-iconChecked.args = Object.assign(Object.assign({}, defaultArgs), { checked: true, 'icon-checked': 'mi/baseline/done' });
+export const iconChecked = TemplateSelected.bind({});
+iconChecked.args = Object.assign(Object.assign({}, defaultArgs), { selected: true, 'icon-checked': 'mi/baseline/done' });
 export const text = Template.bind({});
@@ -54,0 +54,0 @@ text.args = Object.assign(Object.assign({}, defaultArgs), { text: 'Item text' });

dist/components/mds-stepper-bar-item.js

@@ -46,3 +46,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-checked:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-checked:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-checked);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-selected:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-selected:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ selected ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-selected);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-selected);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ selected ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
 
@@ -54,3 +54,3 @@ const MdsStepperBarItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
-    this.currentEvent = createEvent(this, "currentEvent", 7);
+    this.selectedEvent = createEvent(this, "mdsStepperBarItemSelect", 7);
     this.km = new KeyboardManager();
@@ -67,8 +67,6 @@ this.componentDidLoad = () => {
       this.isCurrent = true;
-      if (this.isCurrent) {
-        this.currentEvent.emit(this.host.id);
-      }
+      this.selectedEvent.emit(this.host.id);
     };
     this.showBadge = () => {
-      if (this.isChecked) {
+      if (this.isSelected) {
         return h("mds-badge", { class: "badge", variant: "success", tone: "weak", typography: "option" }, "Completato");
@@ -81,3 +79,3 @@ }
     };
-    this.isChecked = undefined;
+    this.isSelected = undefined;
     this.isCurrent = undefined;
@@ -90,4 +88,4 @@ this.index = undefined;
     this.iconChecked = this.icon;
-    this.checked = undefined;
-    this.current = undefined;
+    this.selected = false;
+    this.current = false;
     this.typography = 'h6';
@@ -97,18 +95,18 @@ }
     this.isCurrent = this.current;
-    this.isChecked = this.checked;
+    this.isSelected = this.selected;
     this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
   }
-  checkChecked(newValue) {
-    this.isChecked = newValue;
+  selectedHandler(newValue) {
+    this.isSelected = newValue;
   }
-  checkCurrent(newValue) {
+  currentHandler(newValue) {
     this.isCurrent = newValue;
   }
   render() {
-    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
+    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isSelected && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isSelected ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
   }
   get host() { return this; }
   static get watchers() { return {
-    "checked": ["checkChecked"],
-    "current": ["checkCurrent"]
+    "selected": ["selectedHandler"],
+    "current": ["currentHandler"]
   }; }
@@ -122,6 +120,6 @@ static get style() { return mdsStepperBarItemCss; }
     "iconChecked": [1, "icon-checked"],
-    "checked": [516],
+    "selected": [516],
     "current": [1540],
     "typography": [1],
-    "isChecked": [32],
+    "isSelected": [32],
     "isCurrent": [32],
@@ -128,0 +126,0 @@ "index": [32]

dist/esm-es5/loader.js

@@ -1,1 +0,1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-7e2acc7a.js";export{s as setNonce}from"./index-7e2acc7a.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,t){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["mds-stepper-bar-item",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],checked:[516],current:[1540],typography:[1],isChecked:[32],isCurrent:[32],index:[32]}]]]],t)}))};export{defineCustomElements};
+import{p as promiseResolve,b as bootstrapLazy}from"./index-7e2acc7a.js";export{s as setNonce}from"./index-7e2acc7a.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,t){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["mds-stepper-bar-item",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],selected:[516],current:[1540],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],t)}))};export{defineCustomElements};

dist/esm-es5/mds-stepper-bar-item.entry.js

@@ -1,1 +0,1 @@
-var __spreadArray=this&&this.__spreadArray||function(e,r,t){if(t||arguments.length===2)for(var i=0,o=r.length,n;i<o;i++){if(n||!(i in r)){if(!n)n=Array.prototype.slice.call(r,0,i);n[i]=r[i]}}return e.concat(n||Array.prototype.slice.call(r))};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-7e2acc7a.js";function r(e){var t,i,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(i=r(e[t]))&&(o&&(o+=" "),o+=i);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function clsx(){for(var e,t,i=0,o="";i<arguments.length;)(e=arguments[i++])&&(t=r(e))&&(o&&(o+=" "),o+=t);return o}var KeyboardManager=function(){function e(){var e=this;this.elements=[];this.handleClickBehaviorDispatchEvent=function(e){if(e.code==="Space"||e.code==="Enter"||e.code==="NumpadEnter"){e.target.click()}};this.handleEscapeBehaviorDispatchEvent=function(r){if(r.code==="Escape"&&e.escapeCallback){e.escapeCallback()}};this.addElement=function(r,t){if(t===void 0){t="element"}e.elements[t]=r};this.attachClickBehavior=function(r){if(r===void 0){r="element"}if(e.elements[r]){e.elements[r].addEventListener("keydown",e.handleClickBehaviorDispatchEvent)}};this.detachClickBehavior=function(r){if(r===void 0){r="element"}if(e.elements[r]){e.elements[r].removeEventListener("keydown",e.handleClickBehaviorDispatchEvent)}};this.attachEscapeBehavior=function(r){e.escapeCallback=r;if(typeof window!==undefined){window.addEventListener("keydown",e.handleEscapeBehaviorDispatchEvent.bind(e))}};this.detachEscapeBehavior=function(){e.escapeCallback=null;if(typeof window!==undefined){window.removeEventListener("keydown",e.handleEscapeBehaviorDispatchEvent.bind(e))}}}return e}();var mdsStepperBarItemCss="@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-checked:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-checked:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-checked);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";var MdsStepperBarItem=function(){function e(e){var r=this;registerInstance(this,e);this.currentEvent=createEvent(this,"currentEvent",7);this.km=new KeyboardManager;this.componentDidLoad=function(){var e=r.host.shadowRoot.querySelector("header");r.km.addElement(e);r.km.attachClickBehavior()};this.disconnectedCallback=function(){r.km.detachClickBehavior()};this.toggle=function(){r.isCurrent=true;if(r.isCurrent){r.currentEvent.emit(r.host.id)}};this.showBadge=function(){if(r.isChecked){return h("mds-badge",{class:"badge",variant:"success",tone:"weak",typography:"option"},"Completato")}if(r.isCurrent){return h("mds-badge",{class:"badge",variant:"info",tone:"weak",typography:"option"},"In corso")}return h("mds-badge",{class:"badge",variant:"dark",tone:"weak",typography:"option"},"In coda")};this.isChecked=undefined;this.isCurrent=undefined;this.index=undefined;this.text=undefined;this.step=undefined;this.badge=undefined;this.icon=undefined;this.iconChecked=this.icon;this.checked=undefined;this.current=undefined;this.typography="h6"}e.prototype.componentWillLoad=function(){this.isCurrent=this.current;this.isChecked=this.checked;this.index=__spreadArray([],Array.from(this.host.parentElement.childNodes),true).indexOf(this.host)};e.prototype.checkChecked=function(e){this.isChecked=e};e.prototype.checkCurrent=function(e){this.isCurrent=e};e.prototype.render=function(){return h(Host,null,h("header",{class:"header focusable",onClick:this.toggle,tabindex:"0"},h("mds-icon",{class:"icon",name:clsx(this.isChecked&&!this.isCurrent?this.iconChecked:this.icon)}),h("mds-progress",{class:"progress",progress:this.isChecked?1:0})),h("div",{class:"infos",onClick:this.toggle},this.step&&h("mds-text",{class:"step",typography:"option"},"step ",this.index+1),this.text&&h("mds-text",{class:"text",typography:this.typography},this.text),this.badge&&h("div",null,this.showBadge())))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkChecked"],current:["checkCurrent"]}},enumerable:false,configurable:true});return e}();MdsStepperBarItem.style=mdsStepperBarItemCss;export{MdsStepperBarItem as mds_stepper_bar_item};
+var __spreadArray=this&&this.__spreadArray||function(e,r,t){if(t||arguments.length===2)for(var i=0,o=r.length,s;i<o;i++){if(s||!(i in r)){if(!s)s=Array.prototype.slice.call(r,0,i);s[i]=r[i]}}return e.concat(s||Array.prototype.slice.call(r))};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-7e2acc7a.js";function r(e){var t,i,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(i=r(e[t]))&&(o&&(o+=" "),o+=i);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function clsx(){for(var e,t,i=0,o="";i<arguments.length;)(e=arguments[i++])&&(t=r(e))&&(o&&(o+=" "),o+=t);return o}var KeyboardManager=function(){function e(){var e=this;this.elements=[];this.handleClickBehaviorDispatchEvent=function(e){if(e.code==="Space"||e.code==="Enter"||e.code==="NumpadEnter"){e.target.click()}};this.handleEscapeBehaviorDispatchEvent=function(r){if(r.code==="Escape"&&e.escapeCallback){e.escapeCallback()}};this.addElement=function(r,t){if(t===void 0){t="element"}e.elements[t]=r};this.attachClickBehavior=function(r){if(r===void 0){r="element"}if(e.elements[r]){e.elements[r].addEventListener("keydown",e.handleClickBehaviorDispatchEvent)}};this.detachClickBehavior=function(r){if(r===void 0){r="element"}if(e.elements[r]){e.elements[r].removeEventListener("keydown",e.handleClickBehaviorDispatchEvent)}};this.attachEscapeBehavior=function(r){e.escapeCallback=r;if(typeof window!==undefined){window.addEventListener("keydown",e.handleEscapeBehaviorDispatchEvent.bind(e))}};this.detachEscapeBehavior=function(){e.escapeCallback=null;if(typeof window!==undefined){window.removeEventListener("keydown",e.handleEscapeBehaviorDispatchEvent.bind(e))}}}return e}();var mdsStepperBarItemCss="@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-selected:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-selected:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ selected ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-selected);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-selected);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ selected ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";var MdsStepperBarItem=function(){function e(e){var r=this;registerInstance(this,e);this.selectedEvent=createEvent(this,"mdsStepperBarItemSelect",7);this.km=new KeyboardManager;this.componentDidLoad=function(){var e=r.host.shadowRoot.querySelector("header");r.km.addElement(e);r.km.attachClickBehavior()};this.disconnectedCallback=function(){r.km.detachClickBehavior()};this.toggle=function(){r.isCurrent=true;r.selectedEvent.emit(r.host.id)};this.showBadge=function(){if(r.isSelected){return h("mds-badge",{class:"badge",variant:"success",tone:"weak",typography:"option"},"Completato")}if(r.isCurrent){return h("mds-badge",{class:"badge",variant:"info",tone:"weak",typography:"option"},"In corso")}return h("mds-badge",{class:"badge",variant:"dark",tone:"weak",typography:"option"},"In coda")};this.isSelected=undefined;this.isCurrent=undefined;this.index=undefined;this.text=undefined;this.step=undefined;this.badge=undefined;this.icon=undefined;this.iconChecked=this.icon;this.selected=false;this.current=false;this.typography="h6"}e.prototype.componentWillLoad=function(){this.isCurrent=this.current;this.isSelected=this.selected;this.index=__spreadArray([],Array.from(this.host.parentElement.childNodes),true).indexOf(this.host)};e.prototype.selectedHandler=function(e){this.isSelected=e};e.prototype.currentHandler=function(e){this.isCurrent=e};e.prototype.render=function(){return h(Host,null,h("header",{class:"header focusable",onClick:this.toggle,tabindex:"0"},h("mds-icon",{class:"icon",name:clsx(this.isSelected&&!this.isCurrent?this.iconChecked:this.icon)}),h("mds-progress",{class:"progress",progress:this.isSelected?1:0})),h("div",{class:"infos",onClick:this.toggle},this.step&&h("mds-text",{class:"step",typography:"option"},"step ",this.index+1),this.text&&h("mds-text",{class:"text",typography:this.typography},this.text),this.badge&&h("div",null,this.showBadge())))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{selected:["selectedHandler"],current:["currentHandler"]}},enumerable:false,configurable:true});return e}();MdsStepperBarItem.style=mdsStepperBarItemCss;export{MdsStepperBarItem as mds_stepper_bar_item};

dist/esm-es5/mds-stepper-bar-item.js

@@ -1,1 +0,1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-7e2acc7a.js";export{s as setNonce}from"./index-7e2acc7a.js";var patchBrowser=function(){var e=import.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return promiseResolve(r)};patchBrowser().then((function(e){return bootstrapLazy([["mds-stepper-bar-item",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],checked:[516],current:[1540],typography:[1],isChecked:[32],isCurrent:[32],index:[32]}]]]],e)}));
+import{p as promiseResolve,b as bootstrapLazy}from"./index-7e2acc7a.js";export{s as setNonce}from"./index-7e2acc7a.js";var patchBrowser=function(){var e=import.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return promiseResolve(r)};patchBrowser().then((function(e){return bootstrapLazy([["mds-stepper-bar-item",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],selected:[516],current:[1540],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],e)}));

dist/esm/loader.js

@@ -14,3 +14,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-7e2acc7a.js';
   return patchEsm().then(() => {
-  return bootstrapLazy([["mds-stepper-bar-item",[[1,"mds-stepper-bar-item",{"text":[1],"step":[4],"badge":[1540],"icon":[1],"iconChecked":[1,"icon-checked"],"checked":[516],"current":[1540],"typography":[1],"isChecked":[32],"isCurrent":[32],"index":[32]}]]]], options);
+  return bootstrapLazy([["mds-stepper-bar-item",[[1,"mds-stepper-bar-item",{"text":[1],"step":[4],"badge":[1540],"icon":[1],"iconChecked":[1,"icon-checked"],"selected":[516],"current":[1540],"typography":[1],"isSelected":[32],"isCurrent":[32],"index":[32]}]]]], options);
   });
@@ -17,0 +17,0 @@ };

dist/esm/mds-stepper-bar-item.entry.js

@@ -46,3 +46,3 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7e2acc7a.js';
 
-const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-checked:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-checked:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-checked);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-selected:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-selected:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ selected ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-selected);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-selected);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ selected ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
 
@@ -52,3 +52,3 @@ const MdsStepperBarItem = class {
     registerInstance(this, hostRef);
-    this.currentEvent = createEvent(this, "currentEvent", 7);
+    this.selectedEvent = createEvent(this, "mdsStepperBarItemSelect", 7);
     this.km = new KeyboardManager();
@@ -65,8 +65,6 @@ this.componentDidLoad = () => {
       this.isCurrent = true;
-      if (this.isCurrent) {
-        this.currentEvent.emit(this.host.id);
-      }
+      this.selectedEvent.emit(this.host.id);
     };
     this.showBadge = () => {
-      if (this.isChecked) {
+      if (this.isSelected) {
         return h("mds-badge", { class: "badge", variant: "success", tone: "weak", typography: "option" }, "Completato");
@@ -79,3 +77,3 @@ }
     };
-    this.isChecked = undefined;
+    this.isSelected = undefined;
     this.isCurrent = undefined;
@@ -88,4 +86,4 @@ this.index = undefined;
     this.iconChecked = this.icon;
-    this.checked = undefined;
-    this.current = undefined;
+    this.selected = false;
+    this.current = false;
     this.typography = 'h6';
@@ -95,18 +93,18 @@ }
     this.isCurrent = this.current;
-    this.isChecked = this.checked;
+    this.isSelected = this.selected;
     this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
   }
-  checkChecked(newValue) {
-    this.isChecked = newValue;
+  selectedHandler(newValue) {
+    this.isSelected = newValue;
   }
-  checkCurrent(newValue) {
+  currentHandler(newValue) {
     this.isCurrent = newValue;
   }
   render() {
-    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
+    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isSelected && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isSelected ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "checked": ["checkChecked"],
-    "current": ["checkCurrent"]
+    "selected": ["selectedHandler"],
+    "current": ["currentHandler"]
   }; }
@@ -113,0 +111,0 @@ };

dist/esm/mds-stepper-bar-item.js

@@ -17,3 +17,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-7e2acc7a.js';
 patchBrowser().then(options => {
-  return bootstrapLazy([["mds-stepper-bar-item",[[1,"mds-stepper-bar-item",{"text":[1],"step":[4],"badge":[1540],"icon":[1],"iconChecked":[1,"icon-checked"],"checked":[516],"current":[1540],"typography":[1],"isChecked":[32],"isCurrent":[32],"index":[32]}]]]], options);
+  return bootstrapLazy([["mds-stepper-bar-item",[[1,"mds-stepper-bar-item",{"text":[1],"step":[4],"badge":[1540],"icon":[1],"iconChecked":[1,"icon-checked"],"selected":[516],"current":[1540],"typography":[1],"isSelected":[32],"isCurrent":[32],"index":[32]}]]]], options);
 });

dist/mds-stepper-bar-item/mds-stepper-bar-item.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as c}from"./p-5233da01.js";export{s as setNonce}from"./p-5233da01.js";(()=>{const c=import.meta.url,r={};return""!==c&&(r.resourcesUrl=new URL(".",c).href),e(r)})().then((e=>c([["p-1c20a67c",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],checked:[516],current:[1540],typography:[1],isChecked:[32],isCurrent:[32],index:[32]}]]]],e)));
+import{p as e,b as t}from"./p-5233da01.js";export{s as setNonce}from"./p-5233da01.js";(()=>{const t=import.meta.url,r={};return""!==t&&(r.resourcesUrl=new URL(".",t).href),e(r)})().then((e=>t([["p-2c7bb5b0",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],selected:[516],current:[1540],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],e)));

dist/mds-stepper-bar-item/p-60ab95ad.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-521f2489.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-b9ea21d2.system",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],checked:[516],current:[1540],typography:[1],isChecked:[32],isCurrent:[32],index:[32]}]]]],e)}))}}}));
+System.register(["./p-521f2489.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-b0eb0bb2.system",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],selected:[516],current:[1540],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],e)}))}}}));

dist/stats.json

 {
-  "timestamp": "2023-03-02T10:03:06",
+  "timestamp": "2023-03-09T10:57:31",
   "compiler": {
@@ -33,11 +33,11 @@ "name": "node",
           "./dist/collection/interface/input-value.js",
-          "./dist/collection/types/autocomplete.js",
-          "./dist/collection/types/button.js",
-          "./dist/collection/types/floating-ui.js",
-          "./dist/collection/types/form-rel.js",
-          "./dist/collection/types/input-text-type.js",
-          "./dist/collection/types/input-value-type.js",
-          "./dist/collection/types/loading.js",
-          "./dist/collection/types/typography.js",
-          "./dist/collection/types/variant.js"
+          "./dist/collection/type/autocomplete.js",
+          "./dist/collection/type/button.js",
+          "./dist/collection/type/floating-ui.js",
+          "./dist/collection/type/form-rel.js",
+          "./dist/collection/type/input-text-type.js",
+          "./dist/collection/type/input-value-type.js",
+          "./dist/collection/type/loading.js",
+          "./dist/collection/type/typography.js",
+          "./dist/collection/type/variant.js"
         ]
@@ -79,3 +79,3 @@ },
           "./dist/mds-stepper-bar-item/mds-stepper-bar-item.js",
-          "./dist/mds-stepper-bar-item/p-1c20a67c.entry.js",
+          "./dist/mds-stepper-bar-item/p-2c7bb5b0.entry.js",
           "./dist/mds-stepper-bar-item/p-50ea2036.system.js",
@@ -85,7 +85,7 @@ "./dist/mds-stepper-bar-item/p-521f2489.system.js",
           "./dist/mds-stepper-bar-item/p-60ab95ad.system.js",
-          "./dist/mds-stepper-bar-item/p-b9ea21d2.system.entry.js",
+          "./dist/mds-stepper-bar-item/p-b0eb0bb2.system.entry.js",
           "./www/build/index.esm.js",
           "./www/build/mds-stepper-bar-item.esm.js",
           "./www/build/mds-stepper-bar-item.js",
-          "./www/build/p-1c20a67c.entry.js",
+          "./www/build/p-2c7bb5b0.entry.js",
           "./www/build/p-50ea2036.system.js",
@@ -95,3 +95,3 @@ "./www/build/p-521f2489.system.js",
           "./www/build/p-60ab95ad.system.js",
-          "./www/build/p-b9ea21d2.system.entry.js"
+          "./www/build/p-b0eb0bb2.system.entry.js"
         ]
@@ -129,8 +129,8 @@ },
         ],
-        "bundleId": "p-1c20a67c",
-        "fileName": "p-1c20a67c.entry.js",
+        "bundleId": "p-2c7bb5b0",
+        "fileName": "p-2c7bb5b0.entry.js",
         "imports": [
           "p-5233da01.js"
         ],
-        "originalByteSize": 12388
+        "originalByteSize": 12380
       }
@@ -149,3 +149,3 @@ ],
         ],
-        "originalByteSize": 12392
+        "originalByteSize": 12384
       }
@@ -164,3 +164,3 @@ ],
         ],
-        "originalByteSize": 12392
+        "originalByteSize": 12384
       }
@@ -174,8 +174,8 @@ ],
         ],
-        "bundleId": "p-b9ea21d2.system",
-        "fileName": "p-b9ea21d2.system.entry.js",
+        "bundleId": "p-b0eb0bb2.system",
+        "fileName": "p-b0eb0bb2.system.entry.js",
         "imports": [
           "p-521f2489.system.js"
         ],
-        "originalByteSize": 13250
+        "originalByteSize": 13230
       }
@@ -194,3 +194,3 @@ ],
         ],
-        "originalByteSize": 12493
+        "originalByteSize": 12485
       }
@@ -219,4 +219,4 @@ ]
         {
-          "name": "currentEvent",
-          "method": "currentEvent",
+          "name": "mdsStepperBarItemSelect",
+          "method": "selectedEvent",
           "bubbles": true,
@@ -227,3 +227,3 @@ "cancelable": true,
             "tags": [],
-            "text": "Emits when the accordion is current"
+            "text": "Emits when the accordion is selected"
           },
@@ -347,5 +347,5 @@ "complexType": {
         {
-          "name": "checked",
+          "name": "selected",
           "type": "boolean",
-          "attribute": "checked",
+          "attribute": "selected",
           "reflect": true,
@@ -355,2 +355,3 @@ "mutable": false,
           "optional": true,
+          "defaultValue": "false",
           "complexType": {
@@ -375,2 +376,3 @@ "original": "boolean",
           "optional": true,
+          "defaultValue": "false",
           "complexType": {
@@ -416,3 +418,3 @@ "original": "boolean",
         {
-          "name": "isChecked"
+          "name": "isSelected"
         },
@@ -537,5 +539,5 @@ {
             {
-              "name": "checked",
+              "name": "selected",
               "type": "boolean",
-              "attribute": "checked",
+              "attribute": "selected",
               "reflect": true,
@@ -545,2 +547,3 @@ "mutable": false,
               "optional": true,
+              "defaultValue": "false",
               "complexType": {
@@ -565,2 +568,3 @@ "original": "boolean",
               "optional": true,
+              "defaultValue": "false",
               "complexType": {
@@ -606,3 +610,3 @@ "original": "boolean",
             {
-              "name": "isChecked"
+              "name": "isSelected"
             },
@@ -620,4 +624,4 @@ {
             {
-              "name": "currentEvent",
-              "method": "currentEvent",
+              "name": "mdsStepperBarItemSelect",
+              "method": "selectedEvent",
               "bubbles": true,
@@ -628,3 +632,3 @@ "cancelable": true,
                 "tags": [],
-                "text": "Emits when the accordion is current"
+                "text": "Emits when the accordion is selected"
               },
@@ -641,8 +645,8 @@ "complexType": {
             {
-              "propName": "checked",
-              "methodName": "checkChecked"
+              "propName": "selected",
+              "methodName": "selectedHandler"
             },
             {
               "propName": "current",
-              "methodName": "checkCurrent"
+              "methodName": "currentHandler"
             }
@@ -681,4 +685,4 @@ ],
             {
-              "name": "--mds-stepper-bar-item-icon-background-checked",
-              "docs": "Sets the background-color of the icon when the component is checked",
+              "name": "--mds-stepper-bar-item-icon-background-selected",
+              "docs": "Sets the background-color of the icon when the component is selected",
               "annotation": "prop"
@@ -697,4 +701,4 @@ },
             {
-              "name": "--mds-stepper-bar-item-icon-color-checked",
-              "docs": "Sets the color of the icon when the component is checked",
+              "name": "--mds-stepper-bar-item-icon-color-selected",
+              "docs": "Sets the color of the icon when the component is selected",
               "annotation": "prop"
@@ -850,13 +854,13 @@ },
     "./src/interface/input-value.ts": [],
-    "./src/types/autocomplete.ts": [],
-    "./src/types/button.ts": [],
-    "./src/types/floating-ui.ts": [],
-    "./src/types/form-rel.ts": [],
-    "./src/types/input-text-type.ts": [],
-    "./src/types/input-value-type.ts": [],
-    "./src/types/loading.ts": [],
-    "./src/types/typography.ts": [],
-    "./src/types/variant.ts": []
+    "./src/type/autocomplete.ts": [],
+    "./src/type/button.ts": [],
+    "./src/type/floating-ui.ts": [],
+    "./src/type/form-rel.ts": [],
+    "./src/type/input-text-type.ts": [],
+    "./src/type/input-value-type.ts": [],
+    "./src/type/loading.ts": [],
+    "./src/type/typography.ts": [],
+    "./src/type/variant.ts": []
   },
   "collections": []
 }

dist/types/components.d.ts

@@ -16,6 +16,2 @@ /* eslint-disable */
         /**
-          * Specifies if the component is checked or not
-         */
-        "checked"?: boolean;
-        /**
           * Specifies if the component is the current or not
@@ -33,2 +29,6 @@ */
         /**
+          * Specifies if the component is checked or not
+         */
+        "selected"?: boolean;
+        /**
           * Specifies if the step is displayed
@@ -69,6 +69,2 @@ */
         /**
-          * Specifies if the component is checked or not
-         */
-        "checked"?: boolean;
-        /**
           * Specifies if the component is the current or not
@@ -86,6 +82,10 @@ */
         /**
-          * Emits when the accordion is current
+          * Emits when the accordion is selected
          */
-        "onCurrentEvent"?: (event: MdsStepperBarItemCustomEvent<string>) => void;
+        "onMdsStepperBarItemSelect"?: (event: MdsStepperBarItemCustomEvent<string>) => void;
         /**
+          * Specifies if the component is checked or not
+         */
+        "selected"?: boolean;
+        /**
           * Specifies if the step is displayed
@@ -92,0 +92,0 @@ */

dist/types/components/mds-stepper-bar-item/mds-stepper-bar-item.d.ts

@@ -6,3 +6,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   private km;
-  isChecked: boolean;
+  isSelected: boolean;
   isCurrent: boolean;
@@ -33,3 +33,3 @@ index: number;
    */
-  readonly checked?: boolean;
+  readonly selected?: boolean;
   /**
@@ -46,11 +46,11 @@ * Specifies if the component is the current or not
   disconnectedCallback: () => void;
-  checkChecked(newValue: boolean): void;
-  checkCurrent(newValue: boolean): void;
+  selectedHandler(newValue: boolean): void;
+  currentHandler(newValue: boolean): void;
   private toggle;
   private showBadge;
   /**
-   * Emits when the accordion is current
+   * Emits when the accordion is selected
    */
-  currentEvent: EventEmitter<string>;
+  selectedEvent: EventEmitter<string>;
   render(): any;
 }

dist/types/components/mds-stepper-bar-item/test/mds-stepper-bar-item.stories.d.ts

 declare const _default: {
   title: string;
   argTypes: {
-    checked: {
+    selected: {
       type: {
@@ -48,3 +48,3 @@ name: string;
 export declare const Default: any;
-export declare const checked: any;
+export declare const selected: any;
 export declare const current: any;
@@ -51,0 +51,0 @@ export declare const iconChecked: any;

package.json

 {
   "name": "@maggioli-design-system/mds-stepper-bar-item",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "mds-stepper-bar-item is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
@@ -25,6 +25,6 @@ "main": "dist/index.cjs.js",
   "dependencies": {
-    "@maggioli-design-system/mds-badge": "^2.2.0",
-    "@maggioli-design-system/mds-text": "^3.1.0",
-    "@maggioli-design-system/styles": "^10.0.1",
-    "@stencil/core": "^2.22.1",
+    "@maggioli-design-system/mds-badge": "^2.3.0",
+    "@maggioli-design-system/mds-text": "^3.2.2",
+    "@maggioli-design-system/styles": "^11.2.1",
+    "@stencil/core": "^2.22.2",
     "clsx": "^1.2.1"
@@ -31,0 +31,0 @@ },

readme.md

@@ -13,6 +13,6 @@ # mds-stepper-bar-item
 | `badge`             | `badge`        | Specifies if the badge status is displayed                                            | `boolean`                                                                                                                                                 | `undefined` |
-| `checked`           | `checked`      | Specifies if the component is checked or not                                          | `boolean`                                                                                                                                                 | `undefined` |
-| `current`           | `current`      | Specifies if the component is the current or not                                      | `boolean`                                                                                                                                                 | `undefined` |
+| `current`           | `current`      | Specifies if the component is the current or not                                      | `boolean`                                                                                                                                                 | `false`     |
 | `icon` _(required)_ | `icon`         | Specifies the icon displayed of the component when is not checked or the current item | `string`                                                                                                                                                  | `undefined` |
 | `iconChecked`       | `icon-checked` | Specifies the icon displayed of the component when is checked                         | `string`                                                                                                                                                  | `this.icon` |
+| `selected`          | `selected`     | Specifies if the component is checked or not                                          | `boolean`                                                                                                                                                 | `false`     |
 | `step`              | `step`         | Specifies if the step is displayed                                                    | `boolean`                                                                                                                                                 | `undefined` |
@@ -25,5 +25,5 @@ | `text` _(required)_ | `text`         | Specifies a short description of the component                                        | `string`                                                                                                                                                  | `undefined` |
 
-| Event          | Description                         | Type                  |
-| -------------- | ----------------------------------- | --------------------- |
-| `currentEvent` | Emits when the accordion is current | `CustomEvent<string>` |
+| Event                     | Description                          | Type                  |
+| ------------------------- | ------------------------------------ | --------------------- |
+| `mdsStepperBarItemSelect` | Emits when the accordion is selected | `CustomEvent<string>` |
 
@@ -33,17 +33,17 @@
 
-| Name                                             | Description                                                         |
-| ------------------------------------------------ | ------------------------------------------------------------------- |
-| `--mds-stepper-bar-item-color`                   | Sets the color of the text                                          |
-| `--mds-stepper-bar-item-duaration`               | Sets the duration of the animation                                  |
-| `--mds-stepper-bar-item-icon-background`         | Sets the background-color of the icon                               |
-| `--mds-stepper-bar-item-icon-background-checked` | Sets the background-color of the icon when the component is checked |
-| `--mds-stepper-bar-item-icon-background-current` | Sets the background-color of the icon when the component is current |
-| `--mds-stepper-bar-item-icon-color`              | Sets the color of the icon                                          |
-| `--mds-stepper-bar-item-icon-color-checked`      | Sets the color of the icon when the component is checked            |
-| `--mds-stepper-bar-item-icon-color-current`      | Sets the color of the icon when the component is current            |
-| `--mds-stepper-bar-item-icon-ring-size`          | Sets the size of the icon circle when the component is current      |
-| `--mds-stepper-bar-item-min-width`               | Sets the minimum width of the component                             |
-| `--mds-stepper-bar-item-progress-background`     | Sets the background color of the progress bar                       |
-| `--mds-stepper-bar-item-progress-color`          | Sets the color of the progress bar                                  |
-| `--mds-stepper-bar-item-progress-thickness`      | Sets the thickness of the progress bar                              |
+| Name                                              | Description                                                          |
+| ------------------------------------------------- | -------------------------------------------------------------------- |
+| `--mds-stepper-bar-item-color`                    | Sets the color of the text                                           |
+| `--mds-stepper-bar-item-duaration`                | Sets the duration of the animation                                   |
+| `--mds-stepper-bar-item-icon-background`          | Sets the background-color of the icon                                |
+| `--mds-stepper-bar-item-icon-background-current`  | Sets the background-color of the icon when the component is current  |
+| `--mds-stepper-bar-item-icon-background-selected` | Sets the background-color of the icon when the component is selected |
+| `--mds-stepper-bar-item-icon-color`               | Sets the color of the icon                                           |
+| `--mds-stepper-bar-item-icon-color-current`       | Sets the color of the icon when the component is current             |
+| `--mds-stepper-bar-item-icon-color-selected`      | Sets the color of the icon when the component is selected            |
+| `--mds-stepper-bar-item-icon-ring-size`           | Sets the size of the icon circle when the component is current       |
+| `--mds-stepper-bar-item-min-width`                | Sets the minimum width of the component                              |
+| `--mds-stepper-bar-item-progress-background`      | Sets the background color of the progress bar                        |
+| `--mds-stepper-bar-item-progress-color`           | Sets the color of the progress bar                                   |
+| `--mds-stepper-bar-item-progress-thickness`       | Sets the thickness of the progress bar                               |
 
@@ -50,0 +50,0 @@

src/components.d.ts

@@ -16,6 +16,2 @@ /* eslint-disable */
         /**
-          * Specifies if the component is checked or not
-         */
-        "checked"?: boolean;
-        /**
           * Specifies if the component is the current or not
@@ -33,2 +29,6 @@ */
         /**
+          * Specifies if the component is checked or not
+         */
+        "selected"?: boolean;
+        /**
           * Specifies if the step is displayed
@@ -69,6 +69,2 @@ */
         /**
-          * Specifies if the component is checked or not
-         */
-        "checked"?: boolean;
-        /**
           * Specifies if the component is the current or not
@@ -86,6 +82,10 @@ */
         /**
-          * Emits when the accordion is current
+          * Emits when the accordion is selected
          */
-        "onCurrentEvent"?: (event: MdsStepperBarItemCustomEvent<string>) => void;
+        "onMdsStepperBarItemSelect"?: (event: MdsStepperBarItemCustomEvent<string>) => void;
         /**
+          * Specifies if the component is checked or not
+         */
+        "selected"?: boolean;
+        /**
           * Specifies if the step is displayed
@@ -92,0 +92,0 @@ */

src/components/mds-stepper-bar-item/readme.md

@@ -13,6 +13,6 @@ # mds-stepper-bar-item
 | `badge`             | `badge`        | Specifies if the badge status is displayed                                            | `boolean`                                                                                                                                                 | `undefined` |
-| `checked`           | `checked`      | Specifies if the component is checked or not                                          | `boolean`                                                                                                                                                 | `undefined` |
-| `current`           | `current`      | Specifies if the component is the current or not                                      | `boolean`                                                                                                                                                 | `undefined` |
+| `current`           | `current`      | Specifies if the component is the current or not                                      | `boolean`                                                                                                                                                 | `false`     |
 | `icon` _(required)_ | `icon`         | Specifies the icon displayed of the component when is not checked or the current item | `string`                                                                                                                                                  | `undefined` |
 | `iconChecked`       | `icon-checked` | Specifies the icon displayed of the component when is checked                         | `string`                                                                                                                                                  | `this.icon` |
+| `selected`          | `selected`     | Specifies if the component is checked or not                                          | `boolean`                                                                                                                                                 | `false`     |
 | `step`              | `step`         | Specifies if the step is displayed                                                    | `boolean`                                                                                                                                                 | `undefined` |
@@ -25,5 +25,5 @@ | `text` _(required)_ | `text`         | Specifies a short description of the component                                        | `string`                                                                                                                                                  | `undefined` |
 
-| Event          | Description                         | Type                  |
-| -------------- | ----------------------------------- | --------------------- |
-| `currentEvent` | Emits when the accordion is current | `CustomEvent<string>` |
+| Event                     | Description                          | Type                  |
+| ------------------------- | ------------------------------------ | --------------------- |
+| `mdsStepperBarItemSelect` | Emits when the accordion is selected | `CustomEvent<string>` |
 
@@ -33,17 +33,17 @@
 
-| Name                                             | Description                                                         |
-| ------------------------------------------------ | ------------------------------------------------------------------- |
-| `--mds-stepper-bar-item-color`                   | Sets the color of the text                                          |
-| `--mds-stepper-bar-item-duaration`               | Sets the duration of the animation                                  |
-| `--mds-stepper-bar-item-icon-background`         | Sets the background-color of the icon                               |
-| `--mds-stepper-bar-item-icon-background-checked` | Sets the background-color of the icon when the component is checked |
-| `--mds-stepper-bar-item-icon-background-current` | Sets the background-color of the icon when the component is current |
-| `--mds-stepper-bar-item-icon-color`              | Sets the color of the icon                                          |
-| `--mds-stepper-bar-item-icon-color-checked`      | Sets the color of the icon when the component is checked            |
-| `--mds-stepper-bar-item-icon-color-current`      | Sets the color of the icon when the component is current            |
-| `--mds-stepper-bar-item-icon-ring-size`          | Sets the size of the icon circle when the component is current      |
-| `--mds-stepper-bar-item-min-width`               | Sets the minimum width of the component                             |
-| `--mds-stepper-bar-item-progress-background`     | Sets the background color of the progress bar                       |
-| `--mds-stepper-bar-item-progress-color`          | Sets the color of the progress bar                                  |
-| `--mds-stepper-bar-item-progress-thickness`      | Sets the thickness of the progress bar                              |
+| Name                                              | Description                                                          |
+| ------------------------------------------------- | -------------------------------------------------------------------- |
+| `--mds-stepper-bar-item-color`                    | Sets the color of the text                                           |
+| `--mds-stepper-bar-item-duaration`                | Sets the duration of the animation                                   |
+| `--mds-stepper-bar-item-icon-background`          | Sets the background-color of the icon                                |
+| `--mds-stepper-bar-item-icon-background-current`  | Sets the background-color of the icon when the component is current  |
+| `--mds-stepper-bar-item-icon-background-selected` | Sets the background-color of the icon when the component is selected |
+| `--mds-stepper-bar-item-icon-color`               | Sets the color of the icon                                           |
+| `--mds-stepper-bar-item-icon-color-current`       | Sets the color of the icon when the component is current             |
+| `--mds-stepper-bar-item-icon-color-selected`      | Sets the color of the icon when the component is selected            |
+| `--mds-stepper-bar-item-icon-ring-size`           | Sets the size of the icon circle when the component is current       |
+| `--mds-stepper-bar-item-min-width`                | Sets the minimum width of the component                              |
+| `--mds-stepper-bar-item-progress-background`      | Sets the background color of the progress bar                        |
+| `--mds-stepper-bar-item-progress-color`           | Sets the color of the progress bar                                   |
+| `--mds-stepper-bar-item-progress-thickness`       | Sets the thickness of the progress bar                               |
 
@@ -50,0 +50,0 @@

www/build/mds-stepper-bar-item.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as c}from"./p-5233da01.js";export{s as setNonce}from"./p-5233da01.js";(()=>{const c=import.meta.url,r={};return""!==c&&(r.resourcesUrl=new URL(".",c).href),e(r)})().then((e=>c([["p-1c20a67c",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],checked:[516],current:[1540],typography:[1],isChecked:[32],isCurrent:[32],index:[32]}]]]],e)));
+import{p as e,b as t}from"./p-5233da01.js";export{s as setNonce}from"./p-5233da01.js";(()=>{const t=import.meta.url,r={};return""!==t&&(r.resourcesUrl=new URL(".",t).href),e(r)})().then((e=>t([["p-2c7bb5b0",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],selected:[516],current:[1540],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],e)));

www/build/p-60ab95ad.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-521f2489.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-b9ea21d2.system",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],checked:[516],current:[1540],typography:[1],isChecked:[32],isCurrent:[32],index:[32]}]]]],e)}))}}}));
+System.register(["./p-521f2489.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-b0eb0bb2.system",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],selected:[516],current:[1540],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],e)}))}}}));

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

843139

increased by0.07%

Worsened metrics

Lines of code

10604

decreased by-0.02%

Dependency changes

• + Added@maggioli-design-system/styles@11.7.0(transitive)

• - Removed@fontsource/karla@4.5.11(transitive)

• - Removed@fontsource/merriweather@4.5.14(transitive)

• - Removed@fontsource/roboto@4.5.8(transitive)

• - Removed@fontsource/roboto-mono@4.5.10(transitive)

• - Removed@maggioli-design-system/styles@10.0.1(transitive)

• Updated@maggioli-design-system/mds-badge@^2.3.0

• Updated@maggioli-design-system/mds-text@^3.2.2

• Updated@maggioli-design-system/styles@^11.2.1

• Updated@stencil/core@^2.22.2