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

Comparing version 3.1.0 to 4.0.0

dist/cjs/loader.cjs.js

@@ -5,6 +5,6 @@ 'use strict';
 
-const index = require('./index-949f7aa5.js');
+const index = require('./index-2df33c47.js');
 
 /*
- Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
@@ -18,3 +18,3 @@ const patchEsm = () => {
   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"],"selected":[516],"current":[1540],"value":[513],"typography":[1],"isSelected":[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"],"done":[516],"current":[1540],"value":[513],"typography":[1],"isDone":[32],"isCurrent":[32],"index":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

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

@@ -5,68 +5,14 @@ 'use strict';
 
-const index = require('./index-949f7aa5.js');
+const index = require('./index-2df33c47.js');
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-class KeyboardManager {
-  constructor() {
-    this.elements = [];
-    this.handleClickBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
-        event.target.click();
-      }
-    };
-    this.handleEscapeBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Escape' && this.escapeCallback) {
-        this.escapeCallback();
-      }
-    };
-    this.addElement = (el, name = 'element') => {
-      this.elements[name] = el;
-    };
-    this.attachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.detachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.attachEscapeBehavior = (callBack) => {
-      this.escapeCallback = callBack;
-      if (typeof window !== undefined) {
-        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-    this.detachEscapeBehavior = () => {
-      this.escapeCallback = null;
-      if (typeof window !== undefined) {
-        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-  }
-}
+const mdsStepperBarItemCss = "@tailwind components; .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-done: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-done: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([ done ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-done);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-done);-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([ done ])) .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%;-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;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))}";
-
 const MdsStepperBarItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.selectedEvent = index.createEvent(this, "mdsStepperBarItemSelect", 7);
-    this.km = new KeyboardManager();
-    this.componentDidLoad = () => {
-      const header = this.host.shadowRoot.querySelector('header');
-      this.km.addElement(header);
-      this.km.attachClickBehavior();
-    };
-    this.disconnectedCallback = () => {
-      this.km.detachClickBehavior();
-    };
-    this.toggle = () => {
-      this.isCurrent = true;
-      this.selectedEvent.emit({ value: this.value });
-    };
+    this.doneEvent = index.createEvent(this, "mdsStepperBarItemDone", 7);
     this.showBadge = () => {
-      if (this.isSelected) {
+      if (this.isDone) {
         return index.h("mds-badge", { class: "badge", variant: "success", tone: "weak", typography: "option" }, "Completato");
@@ -79,3 +25,3 @@ }
     };
-    this.isSelected = undefined;
+    this.isDone = undefined;
     this.isCurrent = undefined;
@@ -88,3 +34,3 @@ this.index = undefined;
     this.iconChecked = this.icon;
-    this.selected = false;
+    this.done = false;
     this.current = false;
@@ -96,7 +42,9 @@ this.value = undefined;
     this.isCurrent = this.current;
-    this.isSelected = this.selected;
-    this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
+    this.isDone = this.done;
+    const parent = this.host.parentElement;
+    if (parent)
+      this.index = [...Array.from(parent.childNodes)].indexOf(this.host);
   }
   selectedHandler(newValue) {
-    this.isSelected = newValue;
+    this.isDone = newValue;
   }
@@ -107,7 +55,7 @@ currentHandler(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.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()))));
+    return (index.h(index.Host, null, index.h("header", { class: "header", tabindex: "0" }, index.h("mds-icon", { class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { class: "progress", progress: this.isDone ? 1 : 0 })), index.h("div", { class: "infos" }, 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 {
-    "selected": ["selectedHandler"],
+    "done": ["selectedHandler"],
     "current": ["currentHandler"]
@@ -114,0 +62,0 @@ }; }

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

@@ -5,6 +5,6 @@ 'use strict';
 
-const index = require('./index-949f7aa5.js');
+const index = require('./index-2df33c47.js');
 
 /*
- Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
  */
@@ -21,5 +21,5 @@ const patchBrowser = () => {
 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"],"selected":[516],"current":[1540],"value":[513],"typography":[1],"isSelected":[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"],"done":[516],"current":[1540],"value":[513],"typography":[1],"isDone":[32],"isCurrent":[32],"index":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

dist/collection/collection-manifest.json

@@ -7,3 +7,3 @@ {
     "name": "@stencil/core",
-    "version": "2.22.2",
+    "version": "2.22.3",
     "typescriptVersion": "4.9.4"
@@ -10,0 +10,0 @@ },

dist/collection/common/aria.js

@@ -9,7 +9,9 @@ const hash = (s) => {
 const unslugName = (name) => {
-  return name.split('/').slice(-1).pop().replace(/-/g, ' ');
+  var _a, _b, _c;
+  return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
 };
 const setAttributeIfEmpty = (element, attribute, value) => {
+  var _a;
   if (element.hasAttribute(attribute)) {
-    return element.getAttribute(attribute);
+    return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
   }
@@ -16,0 +18,0 @@ element.setAttribute(attribute, value);

dist/collection/common/keyboard-manager.js

@@ -34,3 +34,3 @@ export class KeyboardManager {
     this.detachEscapeBehavior = () => {
-      this.escapeCallback = null;
+      this.escapeCallback = () => { return; };
       if (typeof window !== undefined) {
@@ -37,0 +37,0 @@ window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));

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

 import clsx from 'clsx';
 import { Host, h } from '@stencil/core';
-import { KeyboardManager } from '@common/keyboard-manager';
 export class MdsStepperBarItem {
   constructor() {
-    this.km = new KeyboardManager();
-    this.componentDidLoad = () => {
-      const header = this.host.shadowRoot.querySelector('header');
-      this.km.addElement(header);
-      this.km.attachClickBehavior();
-    };
-    this.disconnectedCallback = () => {
-      this.km.detachClickBehavior();
-    };
-    this.toggle = () => {
-      this.isCurrent = true;
-      this.selectedEvent.emit({ value: this.value });
-    };
     this.showBadge = () => {
-      if (this.isSelected) {
+      if (this.isDone) {
         return h("mds-badge", { class: "badge", variant: "success", tone: "weak", typography: "option" }, "Completato");
@@ -28,3 +14,3 @@ }
     };
-    this.isSelected = undefined;
+    this.isDone = undefined;
     this.isCurrent = undefined;
@@ -37,3 +23,3 @@ this.index = undefined;
     this.iconChecked = this.icon;
-    this.selected = false;
+    this.done = false;
     this.current = false;
@@ -45,7 +31,9 @@ this.value = undefined;
     this.isCurrent = this.current;
-    this.isSelected = this.selected;
-    this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
+    this.isDone = this.done;
+    const parent = this.host.parentElement;
+    if (parent)
+      this.index = [...Array.from(parent.childNodes)].indexOf(this.host);
   }
   selectedHandler(newValue) {
-    this.isSelected = newValue;
+    this.isDone = newValue;
   }
@@ -56,3 +44,3 @@ currentHandler(newValue) {
   render() {
-    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()))));
+    return (h(Host, null, h("header", { class: "header", tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { class: "infos" }, 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()))));
   }
@@ -145,4 +133,4 @@ static get is() { return "mds-stepper-bar-item"; }
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | undefined",
+          "resolved": "string | undefined",
           "references": {}
@@ -160,3 +148,3 @@ },
       },
-      "selected": {
+      "done": {
         "type": "boolean",
@@ -170,3 +158,3 @@ "mutable": false,
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
@@ -176,3 +164,3 @@ "tags": [],
         },
-        "attribute": "selected",
+        "attribute": "done",
         "reflect": true,
@@ -190,3 +178,3 @@ "defaultValue": "false"
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
@@ -205,3 +193,3 @@ "tags": [],
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
@@ -223,3 +211,3 @@ },
           "original": "TypographyType",
-          "resolved": "\"action\" | \"caption\" | \"detail\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"hack\" | \"label\" | \"option\" | \"paragraph\" | \"snippet\" | \"tip\"",
+          "resolved": "\"action\" | \"caption\" | \"detail\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"hack\" | \"label\" | \"option\" | \"paragraph\" | \"snippet\" | \"tip\" | undefined",
           "references": {
@@ -246,3 +234,3 @@ "TypographyType": {
     return {
-      "isSelected": {},
+      "isDone": {},
       "isCurrent": {},
@@ -254,4 +242,4 @@ "index": {}
     return [{
-        "method": "selectedEvent",
-        "name": "mdsStepperBarItemSelect",
+        "method": "doneEvent",
+        "name": "mdsStepperBarItemDone",
         "bubbles": true,
@@ -279,3 +267,3 @@ "cancelable": true,
     return [{
-        "propName": "selected",
+        "propName": "done",
         "methodName": "selectedHandler"
@@ -282,0 +270,0 @@ }, {

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

@@ -0,1 +1,2 @@
+import { iconsDictionary, mggIconsDictionary } from '@dictionary/icon';
 import { typographyInfoDictionary } from '@dictionary/typography';
@@ -6,3 +7,3 @@ import { h } from '@stencil/core';
   argTypes: {
-    selected: {
+    done: {
       type: { name: 'boolean' },
@@ -18,2 +19,4 @@ description: 'Specifies if the component is checked or not',
       description: 'Specifies the icon displayed of the component when is not checked or the current item',
+      options: mggIconsDictionary.concat(iconsDictionary),
+      control: { type: 'select' },
     },
@@ -23,2 +26,4 @@ 'icon-checked': {
       description: 'Specifies the icon displayed of the component when is checked',
+      options: mggIconsDictionary.concat(iconsDictionary),
+      control: { type: 'select' },
     },
@@ -37,4 +42,4 @@ text: {
 };
-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 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" }));
+const Template = args => h("mds-stepper-bar", { "items-done": 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 TemplateDone = args => h("mds-stepper-bar", { "items-done": 3 }, h("mds-stepper-bar-item", { done: true, icon: "mi/baseline/agriculture", "icon-checked": args['icon-checked'], text: "First" }), h("mds-stepper-bar-item", { done: 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
@@ -48,8 +53,8 @@ // mi_baseline_bluetooth
 Default.args = Object.assign({}, defaultArgs);
-export const selected = Template.bind({});
-selected.args = Object.assign(Object.assign({}, defaultArgs), { selected: true });
-export const current = Template.bind({});
+export const done = TemplateDone.bind({});
+done.args = Object.assign(Object.assign({}, defaultArgs), { done: true });
+export const current = TemplateDone.bind({});
 current.args = Object.assign(Object.assign({}, defaultArgs), { current: true });
-export const iconChecked = TemplateSelected.bind({});
-iconChecked.args = Object.assign(Object.assign({}, defaultArgs), { selected: true, 'icon-checked': 'mi/baseline/done' });
+export const iconChecked = TemplateDone.bind({});
+iconChecked.args = Object.assign(Object.assign({}, defaultArgs), { done: true, 'icon-checked': 'mi/baseline/done' });
 export const text = Template.bind({});
@@ -56,0 +61,0 @@ text.args = Object.assign(Object.assign({}, defaultArgs), { text: 'Item text' });

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

@@ -5,45 +5,4 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-class KeyboardManager {
-  constructor() {
-    this.elements = [];
-    this.handleClickBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
-        event.target.click();
-      }
-    };
-    this.handleEscapeBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Escape' && this.escapeCallback) {
-        this.escapeCallback();
-      }
-    };
-    this.addElement = (el, name = 'element') => {
-      this.elements[name] = el;
-    };
-    this.attachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.detachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.attachEscapeBehavior = (callBack) => {
-      this.escapeCallback = callBack;
-      if (typeof window !== undefined) {
-        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-    this.detachEscapeBehavior = () => {
-      this.escapeCallback = null;
-      if (typeof window !== undefined) {
-        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-  }
-}
+const mdsStepperBarItemCss = "@tailwind components; .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-done: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-done: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([ done ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-done);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-done);-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([ done ])) .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%;-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;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))}";
-
 const MdsStepperBarItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -54,18 +13,5 @@ constructor() {
     this.__attachShadow();
-    this.selectedEvent = createEvent(this, "mdsStepperBarItemSelect", 7);
-    this.km = new KeyboardManager();
-    this.componentDidLoad = () => {
-      const header = this.host.shadowRoot.querySelector('header');
-      this.km.addElement(header);
-      this.km.attachClickBehavior();
-    };
-    this.disconnectedCallback = () => {
-      this.km.detachClickBehavior();
-    };
-    this.toggle = () => {
-      this.isCurrent = true;
-      this.selectedEvent.emit({ value: this.value });
-    };
+    this.doneEvent = createEvent(this, "mdsStepperBarItemDone", 7);
     this.showBadge = () => {
-      if (this.isSelected) {
+      if (this.isDone) {
         return h("mds-badge", { class: "badge", variant: "success", tone: "weak", typography: "option" }, "Completato");
@@ -78,3 +24,3 @@ }
     };
-    this.isSelected = undefined;
+    this.isDone = undefined;
     this.isCurrent = undefined;
@@ -87,3 +33,3 @@ this.index = undefined;
     this.iconChecked = this.icon;
-    this.selected = false;
+    this.done = false;
     this.current = false;
@@ -95,7 +41,9 @@ this.value = undefined;
     this.isCurrent = this.current;
-    this.isSelected = this.selected;
-    this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
+    this.isDone = this.done;
+    const parent = this.host.parentElement;
+    if (parent)
+      this.index = [...Array.from(parent.childNodes)].indexOf(this.host);
   }
   selectedHandler(newValue) {
-    this.isSelected = newValue;
+    this.isDone = newValue;
   }
@@ -106,7 +54,7 @@ currentHandler(newValue) {
   render() {
-    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()))));
+    return (h(Host, null, h("header", { class: "header", tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { class: "infos" }, 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 {
-    "selected": ["selectedHandler"],
+    "done": ["selectedHandler"],
     "current": ["currentHandler"]
@@ -121,7 +69,7 @@ }; }
     "iconChecked": [1, "icon-checked"],
-    "selected": [516],
+    "done": [516],
     "current": [1540],
     "value": [513],
     "typography": [1],
-    "isSelected": [32],
+    "isDone": [32],
     "isCurrent": [32],
@@ -128,0 +76,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"],selected:[516],current:[1540],value:[513],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],t)}))};export{defineCustomElements};
+import{p as promiseResolve,b as bootstrapLazy}from"./index-2eb0845c.js";export{s as setNonce}from"./index-2eb0845c.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"],done:[516],current:[1540],value:[513],typography:[1],isDone:[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,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({value:r.value})};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.value=undefined;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};
+var __spreadArray=this&&this.__spreadArray||function(r,e,t){if(t||arguments.length===2)for(var i=0,o=e.length,s;i<o;i++){if(s||!(i in e)){if(!s)s=Array.prototype.slice.call(e,0,i);s[i]=e[i]}}return r.concat(s||Array.prototype.slice.call(e))};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-2eb0845c.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 mdsStepperBarItemCss="@tailwind components; .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-done: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-done: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([ done ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-done);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-done);-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([ done ])) .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%;-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;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 r(r){var e=this;registerInstance(this,r);this.doneEvent=createEvent(this,"mdsStepperBarItemDone",7);this.showBadge=function(){if(e.isDone){return h("mds-badge",{class:"badge",variant:"success",tone:"weak",typography:"option"},"Completato")}if(e.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.isDone=undefined;this.isCurrent=undefined;this.index=undefined;this.text=undefined;this.step=undefined;this.badge=undefined;this.icon=undefined;this.iconChecked=this.icon;this.done=false;this.current=false;this.value=undefined;this.typography="h6"}r.prototype.componentWillLoad=function(){this.isCurrent=this.current;this.isDone=this.done;var r=this.host.parentElement;if(r)this.index=__spreadArray([],Array.from(r.childNodes),true).indexOf(this.host)};r.prototype.selectedHandler=function(r){this.isDone=r};r.prototype.currentHandler=function(r){this.isCurrent=r};r.prototype.render=function(){return h(Host,null,h("header",{class:"header",tabindex:"0"},h("mds-icon",{class:"icon",name:clsx(this.isDone&&!this.isCurrent?this.iconChecked:this.icon)}),h("mds-progress",{class:"progress",progress:this.isDone?1:0})),h("div",{class:"infos"},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(r.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{done:["selectedHandler"],current:["currentHandler"]}},enumerable:false,configurable:true});return r}();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"],selected:[516],current:[1540],value:[513],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],e)}));
+import{p as promiseResolve,b as bootstrapLazy}from"./index-2eb0845c.js";export{s as setNonce}from"./index-2eb0845c.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"],done:[516],current:[1540],value:[513],typography:[1],isDone:[32],isCurrent:[32],index:[32]}]]]],e)}));

dist/esm/loader.js

@@ -1,6 +0,6 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-7e2acc7a.js';
-export { s as setNonce } from './index-7e2acc7a.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-2eb0845c.js';
+export { s as setNonce } from './index-2eb0845c.js';
 
 /*
- Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
@@ -14,3 +14,3 @@ const patchEsm = () => {
   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"],"selected":[516],"current":[1540],"value":[513],"typography":[1],"isSelected":[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"],"done":[516],"current":[1540],"value":[513],"typography":[1],"isDone":[32],"isCurrent":[32],"index":[32]}]]]], options);
   });
@@ -17,0 +17,0 @@ };

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

@@ -1,67 +0,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7e2acc7a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2eb0845c.js';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-class KeyboardManager {
-  constructor() {
-    this.elements = [];
-    this.handleClickBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
-        event.target.click();
-      }
-    };
-    this.handleEscapeBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Escape' && this.escapeCallback) {
-        this.escapeCallback();
-      }
-    };
-    this.addElement = (el, name = 'element') => {
-      this.elements[name] = el;
-    };
-    this.attachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.detachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.attachEscapeBehavior = (callBack) => {
-      this.escapeCallback = callBack;
-      if (typeof window !== undefined) {
-        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-    this.detachEscapeBehavior = () => {
-      this.escapeCallback = null;
-      if (typeof window !== undefined) {
-        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-  }
-}
+const mdsStepperBarItemCss = "@tailwind components; .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-done: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-done: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([ done ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-done);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-done);-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([ done ])) .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%;-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;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))}";
-
 const MdsStepperBarItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.selectedEvent = createEvent(this, "mdsStepperBarItemSelect", 7);
-    this.km = new KeyboardManager();
-    this.componentDidLoad = () => {
-      const header = this.host.shadowRoot.querySelector('header');
-      this.km.addElement(header);
-      this.km.attachClickBehavior();
-    };
-    this.disconnectedCallback = () => {
-      this.km.detachClickBehavior();
-    };
-    this.toggle = () => {
-      this.isCurrent = true;
-      this.selectedEvent.emit({ value: this.value });
-    };
+    this.doneEvent = createEvent(this, "mdsStepperBarItemDone", 7);
     this.showBadge = () => {
-      if (this.isSelected) {
+      if (this.isDone) {
         return h("mds-badge", { class: "badge", variant: "success", tone: "weak", typography: "option" }, "Completato");
@@ -74,3 +20,3 @@ }
     };
-    this.isSelected = undefined;
+    this.isDone = undefined;
     this.isCurrent = undefined;
@@ -83,3 +29,3 @@ this.index = undefined;
     this.iconChecked = this.icon;
-    this.selected = false;
+    this.done = false;
     this.current = false;
@@ -91,7 +37,9 @@ this.value = undefined;
     this.isCurrent = this.current;
-    this.isSelected = this.selected;
-    this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
+    this.isDone = this.done;
+    const parent = this.host.parentElement;
+    if (parent)
+      this.index = [...Array.from(parent.childNodes)].indexOf(this.host);
   }
   selectedHandler(newValue) {
-    this.isSelected = newValue;
+    this.isDone = newValue;
   }
@@ -102,7 +50,7 @@ currentHandler(newValue) {
   render() {
-    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()))));
+    return (h(Host, null, h("header", { class: "header", tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { class: "infos" }, 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 {
-    "selected": ["selectedHandler"],
+    "done": ["selectedHandler"],
     "current": ["currentHandler"]
@@ -109,0 +57,0 @@ }; }

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

@@ -1,6 +0,6 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-7e2acc7a.js';
-export { s as setNonce } from './index-7e2acc7a.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-2eb0845c.js';
+export { s as setNonce } from './index-2eb0845c.js';
 
 /*
- Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
  */
@@ -17,3 +17,3 @@ const patchBrowser = () => {
 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"],"selected":[516],"current":[1540],"value":[513],"typography":[1],"isSelected":[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"],"done":[516],"current":[1540],"value":[513],"typography":[1],"isDone":[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 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-7e43a054",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],selected:[516],current:[1540],value:[513],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],e)));
+import{p as e,b as r}from"./p-33280b60.js";export{s as setNonce}from"./p-33280b60.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((e=>r([["p-ca90f327",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],done:[516],current:[1540],value:[513],typography:[1],isDone:[32],isCurrent:[32],index:[32]}]]]],e)));

dist/stats.json

 {
-  "timestamp": "2023-03-14T14:59:23",
+  "timestamp": "2023-04-14T10:19:24",
   "compiler": {
@@ -59,3 +59,3 @@ "name": "node",
         "generatedFiles": [
-          "./dist/cjs/index-949f7aa5.js",
+          "./dist/cjs/index-2df33c47.js",
           "./dist/cjs/index.cjs.js",
@@ -65,3 +65,3 @@ "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-stepper-bar-item.cjs.js",
-          "./dist/esm-es5/index-7e2acc7a.js",
+          "./dist/esm-es5/index-2eb0845c.js",
           "./dist/esm-es5/index.js",
@@ -71,3 +71,3 @@ "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-stepper-bar-item.js",
-          "./dist/esm/index-7e2acc7a.js",
+          "./dist/esm/index-2eb0845c.js",
           "./dist/esm/index.js",
@@ -82,17 +82,17 @@ "./dist/esm/loader.js",
           "./dist/mds-stepper-bar-item/mds-stepper-bar-item.js",
-          "./dist/mds-stepper-bar-item/p-33655035.system.entry.js",
+          "./dist/mds-stepper-bar-item/p-2b6327ea.system.js",
+          "./dist/mds-stepper-bar-item/p-2f225952.system.entry.js",
+          "./dist/mds-stepper-bar-item/p-33280b60.js",
           "./dist/mds-stepper-bar-item/p-50ea2036.system.js",
-          "./dist/mds-stepper-bar-item/p-521f2489.system.js",
-          "./dist/mds-stepper-bar-item/p-5233da01.js",
-          "./dist/mds-stepper-bar-item/p-60ab95ad.system.js",
-          "./dist/mds-stepper-bar-item/p-7e43a054.entry.js",
+          "./dist/mds-stepper-bar-item/p-86c99705.system.js",
+          "./dist/mds-stepper-bar-item/p-ca90f327.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-33655035.system.entry.js",
+          "./www/build/p-2b6327ea.system.js",
+          "./www/build/p-2f225952.system.entry.js",
+          "./www/build/p-33280b60.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-521f2489.system.js",
-          "./www/build/p-5233da01.js",
-          "./www/build/p-60ab95ad.system.js",
-          "./www/build/p-7e43a054.entry.js"
+          "./www/build/p-86c99705.system.js",
+          "./www/build/p-ca90f327.entry.js"
         ]
@@ -130,8 +130,8 @@ },
         ],
-        "bundleId": "p-7e43a054",
-        "fileName": "p-7e43a054.entry.js",
+        "bundleId": "p-ca90f327",
+        "fileName": "p-ca90f327.entry.js",
         "imports": [
-          "p-5233da01.js"
+          "p-33280b60.js"
         ],
-        "originalByteSize": 12417
+        "originalByteSize": 9485
       }
@@ -148,5 +148,5 @@ ],
         "imports": [
-          "index-7e2acc7a.js"
+          "index-2eb0845c.js"
         ],
-        "originalByteSize": 12421
+        "originalByteSize": 9489
       }
@@ -163,5 +163,5 @@ ],
         "imports": [
-          "index-7e2acc7a.js"
+          "index-2eb0845c.js"
         ],
-        "originalByteSize": 12421
+        "originalByteSize": 9489
       }
@@ -175,8 +175,8 @@ ],
         ],
-        "bundleId": "p-33655035.system",
-        "fileName": "p-33655035.system.entry.js",
+        "bundleId": "p-2f225952.system",
+        "fileName": "p-2f225952.system.entry.js",
         "imports": [
-          "p-521f2489.system.js"
+          "p-2b6327ea.system.js"
         ],
-        "originalByteSize": 13273
+        "originalByteSize": 10035
       }
@@ -193,5 +193,5 @@ ],
         "imports": [
-          "index-949f7aa5.js"
+          "index-2df33c47.js"
         ],
-        "originalByteSize": 12522
+        "originalByteSize": 9590
       }
@@ -220,4 +220,4 @@ ]
         {
-          "name": "mdsStepperBarItemSelect",
-          "method": "selectedEvent",
+          "name": "mdsStepperBarItemDone",
+          "method": "doneEvent",
           "bubbles": true,
@@ -341,4 +341,4 @@ "cancelable": true,
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "string | undefined",
+            "resolved": "string | undefined",
             "references": {}
@@ -353,9 +353,9 @@ },
         {
-          "name": "selected",
+          "name": "done",
           "type": "boolean",
-          "attribute": "selected",
+          "attribute": "done",
           "reflect": true,
           "mutable": false,
           "required": false,
-          "optional": true,
+          "optional": false,
           "defaultValue": "false",
@@ -380,3 +380,3 @@ "complexType": {
           "required": false,
-          "optional": true,
+          "optional": false,
           "defaultValue": "false",
@@ -404,3 +404,3 @@ "complexType": {
             "original": "string",
-            "resolved": "string",
+            "resolved": "string | undefined",
             "references": {}
@@ -425,3 +425,3 @@ },
             "original": "TypographyType",
-            "resolved": "\"action\" | \"caption\" | \"detail\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"hack\" | \"label\" | \"option\" | \"paragraph\" | \"snippet\" | \"tip\"",
+            "resolved": "\"action\" | \"caption\" | \"detail\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"hack\" | \"label\" | \"option\" | \"paragraph\" | \"snippet\" | \"tip\" | undefined",
             "references": {
@@ -444,3 +444,3 @@ "TypographyType": {
         {
-          "name": "isSelected"
+          "name": "isDone"
         },
@@ -554,4 +554,4 @@ {
               "complexType": {
-                "original": "string",
-                "resolved": "string",
+                "original": "string | undefined",
+                "resolved": "string | undefined",
                 "references": {}
@@ -566,9 +566,9 @@ },
             {
-              "name": "selected",
+              "name": "done",
               "type": "boolean",
-              "attribute": "selected",
+              "attribute": "done",
               "reflect": true,
               "mutable": false,
               "required": false,
-              "optional": true,
+              "optional": false,
               "defaultValue": "false",
@@ -593,3 +593,3 @@ "complexType": {
               "required": false,
-              "optional": true,
+              "optional": false,
               "defaultValue": "false",
@@ -617,3 +617,3 @@ "complexType": {
                 "original": "string",
-                "resolved": "string",
+                "resolved": "string | undefined",
                 "references": {}
@@ -638,3 +638,3 @@ },
                 "original": "TypographyType",
-                "resolved": "\"action\" | \"caption\" | \"detail\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"hack\" | \"label\" | \"option\" | \"paragraph\" | \"snippet\" | \"tip\"",
+                "resolved": "\"action\" | \"caption\" | \"detail\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"hack\" | \"label\" | \"option\" | \"paragraph\" | \"snippet\" | \"tip\" | undefined",
                 "references": {
@@ -657,3 +657,3 @@ "TypographyType": {
             {
-              "name": "isSelected"
+              "name": "isDone"
             },
@@ -671,4 +671,4 @@ {
             {
-              "name": "mdsStepperBarItemSelect",
-              "method": "selectedEvent",
+              "name": "mdsStepperBarItemDone",
+              "method": "doneEvent",
               "bubbles": true,
@@ -696,3 +696,3 @@ "cancelable": true,
             {
-              "propName": "selected",
+              "propName": "done",
               "methodName": "selectedHandler"
@@ -736,4 +736,4 @@ },
             {
-              "name": "--mds-stepper-bar-item-icon-background-selected",
-              "docs": "Sets the background-color of the icon when the component is selected",
+              "name": "--mds-stepper-bar-item-icon-background-done",
+              "docs": "Sets the background-color of the icon when the component is done",
               "annotation": "prop"
@@ -752,4 +752,4 @@ },
             {
-              "name": "--mds-stepper-bar-item-icon-color-selected",
-              "docs": "Sets the color of the icon when the component is selected",
+              "name": "--mds-stepper-bar-item-icon-color-done",
+              "docs": "Sets the color of the icon when the component is done",
               "annotation": "prop"
@@ -838,3 +838,3 @@ },
           "hasVdomKey": false,
-          "hasVdomListener": true,
+          "hasVdomListener": false,
           "hasVdomPropOrAttr": true,
@@ -852,3 +852,2 @@ "hasVdomRef": false,
             "typography",
-            "onClick",
             "tabindex",
@@ -885,3 +884,3 @@ "name",
     "sc-mds-stepper-bar-item": [
-      "p-5233da01.js"
+      "p-33280b60.js"
     ]
@@ -888,0 +887,0 @@ },

dist/types/components.d.ts

@@ -19,4 +19,8 @@ /* eslint-disable */
          */
-        "current"?: boolean;
+        "current": boolean;
         /**
+          * Specifies if the component is checked or not
+         */
+        "done": boolean;
+        /**
           * Specifies the icon displayed of the component when is not checked or the current item
@@ -28,8 +32,4 @@ */
          */
-        "iconChecked"?: string;
+        "iconChecked"?: string | undefined;
         /**
-          * Specifies if the component is checked or not
-         */
-        "selected"?: boolean;
-        /**
           * Specifies if the step is displayed
@@ -78,2 +78,6 @@ */
         /**
+          * Specifies if the component is checked or not
+         */
+        "done"?: boolean;
+        /**
           * Specifies the icon displayed of the component when is not checked or the current item
@@ -85,12 +89,8 @@ */
          */
-        "iconChecked"?: string;
+        "iconChecked"?: string | undefined;
         /**
           * Emits when the accordion is selected
          */
-        "onMdsStepperBarItemSelect"?: (event: MdsStepperBarItemCustomEvent<MdsStepperBarItemEventDetail>) => void;
+        "onMdsStepperBarItemDone"?: (event: MdsStepperBarItemCustomEvent<MdsStepperBarItemEventDetail>) => void;
         /**
-          * Specifies if the component is checked or not
-         */
-        "selected"?: boolean;
-        /**
           * Specifies if the step is displayed
@@ -97,0 +97,0 @@ */

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

@@ -6,4 +6,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   private host;
-  private km;
-  isSelected: boolean;
+  isDone: boolean;
   isCurrent: boolean;
@@ -30,11 +29,11 @@ index: number;
    */
-  iconChecked?: string;
+  iconChecked?: string | undefined;
   /**
    * Specifies if the component is checked or not
    */
-  readonly selected?: boolean;
+  readonly done: boolean;
   /**
    * Specifies if the component is the current or not
    */
-  current?: boolean;
+  current: boolean;
   /**
@@ -49,7 +48,4 @@ * Specifies the value the component will return mdsStepperBarItemSelect event
   componentWillLoad(): void;
-  componentDidLoad: () => void;
-  disconnectedCallback: () => void;
   selectedHandler(newValue: boolean): void;
   currentHandler(newValue: boolean): void;
-  private toggle;
   private showBadge;
@@ -59,4 +55,4 @@ /**
    */
-  selectedEvent: EventEmitter<MdsStepperBarItemEventDetail>;
+  doneEvent: EventEmitter<MdsStepperBarItemEventDetail>;
   render(): any;
 }

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

 declare const _default: {
   title: string;
   argTypes: {
-    selected: {
+    done: {
       type: {
@@ -21,2 +21,6 @@ name: string;
       description: string;
+      options: string[];
+      control: {
+        type: string;
+      };
     };
@@ -28,2 +32,6 @@ 'icon-checked': {
       description: string;
+      options: string[];
+      control: {
+        type: string;
+      };
     };
@@ -50,3 +58,3 @@ text: {
 export declare const Default: any;
-export declare const selected: any;
+export declare const done: any;
 export declare const current: any;
@@ -53,0 +61,0 @@ export declare const iconChecked: any;

dist/types/interface/input-value.d.ts

@@ -1,4 +0,4 @@
-import { InputValueType } from '../types/input-value-type';
+import { InputValueType } from '@type/input-value-type';
 export interface InputValue {
   value: InputValueType;
 }

package.json

 {
   "name": "@maggioli-design-system/mds-stepper-bar-item",
-  "version": "3.1.0",
+  "version": "4.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.",
@@ -15,2 +15,3 @@ "main": "dist/index.cjs.js",
     "dist/",
+    "documentation.json",
     "loader/",
@@ -27,5 +28,5 @@ "readme.md",
     "@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",
+    "@maggioli-design-system/mds-text": "^3.3.0",
+    "@maggioli-design-system/styles": "^11.4.0",
+    "@stencil/core": "^2.22.3",
     "clsx": "^1.2.1"
@@ -46,7 +47,12 @@ },
     {
+      "name": "Nicola Tamburini",
+      "email": "[e-mail]",
+      "role": "Software Engineer"
+    },
+    {
       "name": "Vittorio Vittori",
       "email": "[e-mail]",
-      "role": "UX UI Designer"
+      "role": "Product Designer"
     }
   ]
 }

readme.md

@@ -10,13 +10,13 @@ # mds-stepper-bar-item
 
-| Property            | Attribute      | Description                                                                           | Type                                                                                                                                                      | Default     |
-| ------------------- | -------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `badge`             | `badge`        | Specifies if the badge status is displayed                                            | `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` |
-| `text` _(required)_ | `text`         | Specifies a short description of the component                                        | `string`                                                                                                                                                  | `undefined` |
-| `typography`        | `typography`   | Specifies the typography of the element                                               | `"action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip"` | `'h6'`      |
-| `value`             | `value`        | Specifies the value the component will return mdsStepperBarItemSelect event           | `string`                                                                                                                                                  | `undefined` |
+| Property            | Attribute      | Description                                                                           | Type                                                                                                                                                                   | Default     |
+| ------------------- | -------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `badge`             | `badge`        | Specifies if the badge status is displayed                                            | `boolean`                                                                                                                                                              | `undefined` |
+| `current`           | `current`      | Specifies if the component is the current or not                                      | `boolean`                                                                                                                                                              | `false`     |
+| `done`              | `done`         | Specifies if the component is checked 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 \| undefined`                                                                                                                                                  | `this.icon` |
+| `step`              | `step`         | Specifies if the step is displayed                                                    | `boolean`                                                                                                                                                              | `undefined` |
+| `text` _(required)_ | `text`         | Specifies a short description of the component                                        | `string`                                                                                                                                                               | `undefined` |
+| `typography`        | `typography`   | Specifies the typography of the element                                               | `"action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip" \| undefined` | `'h6'`      |
+| `value`             | `value`        | Specifies the value the component will return mdsStepperBarItemSelect event           | `string \| undefined`                                                                                                                                                  | `undefined` |
 
@@ -26,5 +26,5 @@
 
-| Event                     | Description                          | Type                                        |
-| ------------------------- | ------------------------------------ | ------------------------------------------- |
-| `mdsStepperBarItemSelect` | Emits when the accordion is selected | `CustomEvent<MdsStepperBarItemEventDetail>` |
+| Event                   | Description                          | Type                                        |
+| ----------------------- | ------------------------------------ | ------------------------------------------- |
+| `mdsStepperBarItemDone` | Emits when the accordion is selected | `CustomEvent<MdsStepperBarItemEventDetail>` |
 
@@ -34,17 +34,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-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                               |
+| 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-done`    | Sets the background-color of the icon when the component is done    |
+| `--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-done`         | Sets the color of the icon when the component is done               |
+| `--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                              |
 
@@ -51,0 +51,0 @@

src/common/aria.ts

@@ -10,3 +10,3 @@ const hash = (s: string): string => {
 const unslugName = (name: string): string => {
-  return name.split('/').slice(-1).pop().replace(/-/g, ' ')
+  return name.split('/')?.slice(-1).pop()?.replace(/-/g, ' ') ?? name
 }
@@ -16,3 +16,3 @@
   if (element.hasAttribute(attribute)) {
-    return element.getAttribute(attribute)
+    return element.getAttribute(attribute) ?? ''
   }
@@ -19,0 +19,0 @@ element.setAttribute(attribute, value)

src/common/keyboard-manager.ts

@@ -41,3 +41,3 @@ export class KeyboardManager {
   detachEscapeBehavior = (): void => {
-    this.escapeCallback = null
+    this.escapeCallback = () => {return}
     if (typeof window !== undefined) {
@@ -44,0 +44,0 @@ window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))

src/components.d.ts

@@ -19,4 +19,8 @@ /* eslint-disable */
          */
-        "current"?: boolean;
+        "current": boolean;
         /**
+          * Specifies if the component is checked or not
+         */
+        "done": boolean;
+        /**
           * Specifies the icon displayed of the component when is not checked or the current item
@@ -28,8 +32,4 @@ */
          */
-        "iconChecked"?: string;
+        "iconChecked"?: string | undefined;
         /**
-          * Specifies if the component is checked or not
-         */
-        "selected"?: boolean;
-        /**
           * Specifies if the step is displayed
@@ -78,2 +78,6 @@ */
         /**
+          * Specifies if the component is checked or not
+         */
+        "done"?: boolean;
+        /**
           * Specifies the icon displayed of the component when is not checked or the current item
@@ -85,12 +89,8 @@ */
          */
-        "iconChecked"?: string;
+        "iconChecked"?: string | undefined;
         /**
           * Emits when the accordion is selected
          */
-        "onMdsStepperBarItemSelect"?: (event: MdsStepperBarItemCustomEvent<MdsStepperBarItemEventDetail>) => void;
+        "onMdsStepperBarItemDone"?: (event: MdsStepperBarItemCustomEvent<MdsStepperBarItemEventDetail>) => void;
         /**
-          * Specifies if the component is checked or not
-         */
-        "selected"?: boolean;
-        /**
           * Specifies if the step is displayed
@@ -97,0 +97,0 @@ */

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

@@ -10,13 +10,13 @@ # mds-stepper-bar-item
 
-| Property            | Attribute      | Description                                                                           | Type                                                                                                                                                      | Default     |
-| ------------------- | -------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `badge`             | `badge`        | Specifies if the badge status is displayed                                            | `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` |
-| `text` _(required)_ | `text`         | Specifies a short description of the component                                        | `string`                                                                                                                                                  | `undefined` |
-| `typography`        | `typography`   | Specifies the typography of the element                                               | `"action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip"` | `'h6'`      |
-| `value`             | `value`        | Specifies the value the component will return mdsStepperBarItemSelect event           | `string`                                                                                                                                                  | `undefined` |
+| Property            | Attribute      | Description                                                                           | Type                                                                                                                                                                   | Default     |
+| ------------------- | -------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `badge`             | `badge`        | Specifies if the badge status is displayed                                            | `boolean`                                                                                                                                                              | `undefined` |
+| `current`           | `current`      | Specifies if the component is the current or not                                      | `boolean`                                                                                                                                                              | `false`     |
+| `done`              | `done`         | Specifies if the component is checked 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 \| undefined`                                                                                                                                                  | `this.icon` |
+| `step`              | `step`         | Specifies if the step is displayed                                                    | `boolean`                                                                                                                                                              | `undefined` |
+| `text` _(required)_ | `text`         | Specifies a short description of the component                                        | `string`                                                                                                                                                               | `undefined` |
+| `typography`        | `typography`   | Specifies the typography of the element                                               | `"action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip" \| undefined` | `'h6'`      |
+| `value`             | `value`        | Specifies the value the component will return mdsStepperBarItemSelect event           | `string \| undefined`                                                                                                                                                  | `undefined` |
 
@@ -26,5 +26,5 @@
 
-| Event                     | Description                          | Type                                        |
-| ------------------------- | ------------------------------------ | ------------------------------------------- |
-| `mdsStepperBarItemSelect` | Emits when the accordion is selected | `CustomEvent<MdsStepperBarItemEventDetail>` |
+| Event                   | Description                          | Type                                        |
+| ----------------------- | ------------------------------------ | ------------------------------------------- |
+| `mdsStepperBarItemDone` | Emits when the accordion is selected | `CustomEvent<MdsStepperBarItemEventDetail>` |
 
@@ -34,17 +34,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-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                               |
+| 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-done`    | Sets the background-color of the icon when the component is done    |
+| `--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-done`         | Sets the color of the icon when the component is done               |
+| `--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                              |
 
@@ -51,0 +51,0 @@

src/fixtures/icons.json

@@ -224,2 +224,3 @@ [
     "mi/baseline/person",
+    "mi/baseline/pets",
     "mi/baseline/radio-button-checked",
@@ -226,0 +227,0 @@ "mi/baseline/radio-button-unchecked",

src/interface/input-value.ts

@@ -1,2 +0,2 @@
-import { InputValueType } from '../types/input-value-type'
+import { InputValueType } from '@type/input-value-type'
 
@@ -3,0 +3,0 @@ export interface InputValue {

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

@@ -1,1 +0,1 @@
-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-7e43a054",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],selected:[516],current:[1540],value:[513],typography:[1],isSelected:[32],isCurrent:[32],index:[32]}]]]],e)));
+import{p as e,b as r}from"./p-33280b60.js";export{s as setNonce}from"./p-33280b60.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((e=>r([["p-ca90f327",[[1,"mds-stepper-bar-item",{text:[1],step:[4],badge:[1540],icon:[1],iconChecked:[1,"icon-checked"],done:[516],current:[1540],value:[513],typography:[1],isDone:[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

Number of package files

144

increased by2.13%

Lines of code

11238

increased by4.87%

Worsened metrics

Total package byte prevSize

843104

decreased by-0.58%

Dependency changes

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

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

• Updated@stencil/core@^2.22.3