@maggioli-design-system/mds-stepper-bar - 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-6c4df756.js');
+const index = require('./index-80eb419c.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.cjs",[[1,"mds-stepper-bar",{"linear":[4],"select":[2],"currentItem":[32]},[[0,"mdsStepperBarItemSelect","changeEventHandler"]]]]]], options);
+  return index.bootstrapLazy([["mds-stepper-bar.cjs",[[1,"mds-stepper-bar",{"itemsDone":[2,"items-done"],"currentItem":[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]]]]]], options);
   });
@@ -21,0 +21,0 @@ };

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

@@ -5,5 +5,5 @@ 'use strict';
 
-const index = require('./index-6c4df756.js');
+const index = require('./index-80eb419c.js');
 
-const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.contents{display:contents}.min-h-80{min-height:20rem}.items-center{-ms-flex-align:center;align-items:center}.justify-center{-ms-flex-pack:center;justify-content:center}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-10), var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-10), var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgba(var(--label-green-10), var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-10), var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-10), var(--tw-bg-opacity))}.bg-label-sky-10{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-10), var(--tw-bg-opacity))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgba(var(--label-amaranth-04), var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgba(var(--label-blue-04), var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgba(var(--label-green-04), var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgba(var(--label-orange-04), var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgba(var(--label-violet-04), var(--tw-text-opacity))}.text-label-sky-04{--tw-text-opacity:1;color:rgba(var(--label-sky-04), var(--tw-text-opacity))}.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{position:relative;display:grid;gap:1.5rem}.items{position:relative;z-index:10;display:-ms-flexbox;display:flex;width:100%;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x var(--tw-scroll-snap-strictness);-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness);gap:0px;overflow:auto;scroll-behavior:smooth}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}";
+const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.min-h-80{min-height:20rem}.items-center{-ms-flex-align:center;align-items:center}.justify-center{-ms-flex-pack:center;justify-content:center}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-10), var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-10), var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgba(var(--label-green-10), var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-10), var(--tw-bg-opacity))}.bg-label-sky-10{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-10), var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-10), var(--tw-bg-opacity))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgba(var(--label-amaranth-04), var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgba(var(--label-blue-04), var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgba(var(--label-green-04), var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgba(var(--label-orange-04), var(--tw-text-opacity))}.text-label-sky-04{--tw-text-opacity:1;color:rgba(var(--label-sky-04), var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgba(var(--label-violet-04), var(--tw-text-opacity))}.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{position:relative;display:grid;gap:1.5rem}.items{position:relative;z-index:10;display:-ms-flexbox;display:flex;width:100%;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x var(--tw-scroll-snap-strictness);-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness);gap:0px;overflow:auto;scroll-behavior:smooth}:host([linear=\"true\"]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=\"false\"]) ::slotted(mds-stepper-bar-item){pointer-events:auto}";
 
@@ -15,16 +15,15 @@ const MdsStepperBar = class {
     this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
-    this.queryContents = () => this.element.querySelectorAll('[slot="content"]');
+    // private queryContents = (): NodeListOf<HTMLElement> =>
+    //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
     this.minmax = (value, min, max) => Math.min(Math.max(value, min), max);
-    this.setCurrent = (index = 1) => {
+    this.setCurrent = (index) => {
       this.items = this.queryItems();
       this.currentItem = index - 1;
-      const values = [];
+      const values = new Array();
       this.items.forEach((item, key) => {
-        if (this.linear) {
-          item.selected = false;
-          if (key < this.currentItem) {
-            item.selected = true;
-            if (item.value) {
-              values.push(item.value);
-            }
+        item.done = false;
+        if (key < this.currentItem) {
+          item.done = true;
+          if (item.value) {
+            values.push(item.value);
           }
@@ -43,14 +42,16 @@ }
     this.setCurrentContent = () => {
-      const contents = this.queryContents();
-      contents.forEach((item, key) => {
-        item.style.display = 'none';
-        if (key === this.currentItem) {
-          item.removeAttribute('style');
-        }
-      });
+      var _a;
+      const item = this.element.querySelector(`#mds-stepper-bar-item-${this.currentItem}`);
+      const content = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.content');
+      content.innerHTML = '';
+      if (item && item.innerHTML)
+        content.innerHTML = item.innerHTML;
     };
     this.scrollItems = () => {
-      const itemsElement = this.element.shadowRoot.querySelector('.items');
+      var _a;
+      const itemsElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items');
       const pagesItems = this.queryItems();
       const elementIndex = this.minmax(this.currentItem, 0, this.items.length - 1);
+      if (!itemsElement)
+        throw Error('No mds-stepper-bar-items found');
       if (elementIndex <= 0) {
@@ -69,17 +70,16 @@ itemsElement.scrollLeft = 0;
     this.currentItem = 0;
-    this.linear = true;
-    this.select = 1;
+    this.itemsDone = 1;
   }
   componentWillLoad() {
     this.items = this.queryItems();
-    this.items.forEach((item, key) => item.id = `item-${key}`);
-    const contents = this.queryContents();
-    contents.forEach(item => item.style.display = 'none');
+    this.items.forEach((item, key) => {
+      item.id = `mds-stepper-bar-item-${key}`;
+    });
   }
   componentDidLoad() {
     setTimeout(() => {
-      this.setCurrent(this.select);
+      this.setCurrent(this.itemsDone);
     }, 10);
   }
-  itemSelected(newValue) {
+  itemDone(newValue) {
     this.setCurrent(newValue);
@@ -90,4 +90,4 @@ }
     this.items.forEach((item, key) => {
-      item.selected = false;
-      if (`item-${key}` === event.detail) {
+      item.done = false;
+      if (`mds-stepper-bar-item-${key}` === event.detail) {
         item.current = true;
@@ -99,7 +99,7 @@ this.currentItem = key;
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "items" }, index.h("slot", null)), index.h("div", { class: "contents" }, index.h("slot", { name: "content" }))));
+    return (index.h(index.Host, null, index.h("div", { class: "items" }, index.h("slot", null)), index.h("div", { class: "content" })));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
-    "select": ["itemSelected"]
+    "itemsDone": ["itemDone"]
   }; }
@@ -106,0 +106,0 @@ };

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

@@ -5,6 +5,6 @@ 'use strict';
 
-const index = require('./index-6c4df756.js');
+const index = require('./index-80eb419c.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.cjs",[[1,"mds-stepper-bar",{"linear":[4],"select":[2],"currentItem":[32]},[[0,"mdsStepperBarItemSelect","changeEventHandler"]]]]]], options);
+  return index.bootstrapLazy([["mds-stepper-bar.cjs",[[1,"mds-stepper-bar",{"itemsDone":[2,"items-done"],"currentItem":[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]]]]]], 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/mds-stepper-bar.js

@@ -5,16 +5,15 @@ import { Host, h } from '@stencil/core';
     this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
-    this.queryContents = () => this.element.querySelectorAll('[slot="content"]');
+    // private queryContents = (): NodeListOf<HTMLElement> =>
+    //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
     this.minmax = (value, min, max) => Math.min(Math.max(value, min), max);
-    this.setCurrent = (index = 1) => {
+    this.setCurrent = (index) => {
       this.items = this.queryItems();
       this.currentItem = index - 1;
-      const values = [];
+      const values = new Array();
       this.items.forEach((item, key) => {
-        if (this.linear) {
-          item.selected = false;
-          if (key < this.currentItem) {
-            item.selected = true;
-            if (item.value) {
-              values.push(item.value);
-            }
+        item.done = false;
+        if (key < this.currentItem) {
+          item.done = true;
+          if (item.value) {
+            values.push(item.value);
           }
@@ -33,14 +32,16 @@ }
     this.setCurrentContent = () => {
-      const contents = this.queryContents();
-      contents.forEach((item, key) => {
-        item.style.display = 'none';
-        if (key === this.currentItem) {
-          item.removeAttribute('style');
-        }
-      });
+      var _a;
+      const item = this.element.querySelector(`#mds-stepper-bar-item-${this.currentItem}`);
+      const content = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.content');
+      content.innerHTML = '';
+      if (item && item.innerHTML)
+        content.innerHTML = item.innerHTML;
     };
     this.scrollItems = () => {
-      const itemsElement = this.element.shadowRoot.querySelector('.items');
+      var _a;
+      const itemsElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items');
       const pagesItems = this.queryItems();
       const elementIndex = this.minmax(this.currentItem, 0, this.items.length - 1);
+      if (!itemsElement)
+        throw Error('No mds-stepper-bar-items found');
       if (elementIndex <= 0) {
@@ -59,17 +60,16 @@ itemsElement.scrollLeft = 0;
     this.currentItem = 0;
-    this.linear = true;
-    this.select = 1;
+    this.itemsDone = 1;
   }
   componentWillLoad() {
     this.items = this.queryItems();
-    this.items.forEach((item, key) => item.id = `item-${key}`);
-    const contents = this.queryContents();
-    contents.forEach(item => item.style.display = 'none');
+    this.items.forEach((item, key) => {
+      item.id = `mds-stepper-bar-item-${key}`;
+    });
   }
   componentDidLoad() {
     setTimeout(() => {
-      this.setCurrent(this.select);
+      this.setCurrent(this.itemsDone);
     }, 10);
   }
-  itemSelected(newValue) {
+  itemDone(newValue) {
     this.setCurrent(newValue);
@@ -80,4 +80,4 @@ }
     this.items.forEach((item, key) => {
-      item.selected = false;
-      if (`item-${key}` === event.detail) {
+      item.done = false;
+      if (`mds-stepper-bar-item-${key}` === event.detail) {
         item.current = true;
@@ -89,3 +89,3 @@ this.currentItem = key;
   render() {
-    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "contents" }, h("slot", { name: "content" }))));
+    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "content" })));
   }
@@ -106,21 +106,3 @@ static get is() { return "mds-stepper-bar"; }
     return {
-      "linear": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "true",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets if the component should handle checked elements from the first to the last child or not"
-        },
-        "attribute": "linear",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "select": {
+      "itemsDone": {
         "type": "number",
@@ -137,5 +119,5 @@ "mutable": false,
           "tags": [],
-          "text": "Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked"
+          "text": "Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done"
         },
-        "attribute": "select",
+        "attribute": "items-done",
         "reflect": false,
@@ -177,4 +159,4 @@ "defaultValue": "1"
     return [{
-        "propName": "select",
-        "methodName": "itemSelected"
+        "propName": "itemsDone",
+        "methodName": "itemDone"
       }];
@@ -184,3 +166,3 @@ }
     return [{
-        "name": "mdsStepperBarItemSelect",
+        "name": "mdsStepperBarItemDone",
         "method": "changeEventHandler",
@@ -187,0 +169,0 @@ "target": undefined,

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

@@ -5,7 +5,3 @@ import { h } from '@stencil/core';
   argTypes: {
-    linear: {
-      type: { name: 'boolean' },
-      description: 'Sets if the component should handle checked elements from the first to the last child or not',
-    },
-    select: {
+    'items-done': {
       type: { name: 'number' },
@@ -16,11 +12,7 @@ description: 'Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked',
 };
-const Template = args => h("mds-stepper-bar", Object.assign({}, args), h("mds-stepper-bar-item", { badge: true, step: true, checked: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/person", text: "Nuovo account" }), h("mds-stepper-bar-item", { badge: true, step: true, checked: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/badge", text: "Dati personali" }), h("mds-stepper-bar-item", { badge: true, step: true, checked: true, "icon-checked": "mi/baseline/done", icon: "mi/round/email", text: "Impostazioni newsletter" }), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/lock-open", text: "Attivazione account" }), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/login", text: "Accedi" }), h("div", { slot: "content", class: "min-h-80 flex rounded-lg items-center justify-center bg-label-amaranth-10 text-label-amaranth-04" }, h("mds-text", null, "Nuovo account")), h("div", { slot: "content", class: "min-h-80 flex rounded-lg items-center justify-center bg-label-blue-10 text-label-blue-04" }, h("mds-text", null, "Dati personali")), h("div", { slot: "content", class: "min-h-80 flex rounded-lg items-center justify-center bg-label-green-10 text-label-green-04" }, h("mds-text", null, "Impostazioni newsletter")), h("div", { slot: "content", class: "min-h-80 flex rounded-lg items-center justify-center bg-label-orange-10 text-label-orange-04" }, h("mds-text", null, "Attivazione account")), h("div", { slot: "content", class: "min-h-80 flex rounded-lg items-center justify-center bg-label-violet-10 text-label-violet-04" }, h("mds-text", null, "Accedi")), h("div", { slot: "content", class: "min-h-80 flex rounded-lg items-center justify-center bg-label-sky-10 text-label-sky-04" }, h("mds-text", null, "Finished")));
+const Template = args => h("mds-stepper-bar", Object.assign({}, args), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/person", text: "Nuovo account" }, h("div", { class: "min-h-80 flex rounded-lg items-center justify-center bg-label-amaranth-10 text-label-amaranth-04" }, h("mds-text", null, "Nuovo account"))), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/badge", text: "Dati personali" }, h("div", { class: "min-h-80 flex rounded-lg items-center justify-center bg-label-blue-10 text-label-blue-04" }, h("mds-text", null, "Dati personali"))), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/round/email", text: "Impostazioni newsletter" }, h("div", { class: "min-h-80 flex rounded-lg items-center justify-center bg-label-green-10 text-label-green-04" }, h("mds-text", null, "Impostazioni newsletter"))), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/lock-open", text: "Attivazione account" }, h("div", { class: "min-h-80 flex rounded-lg items-center justify-center bg-label-orange-10 text-label-orange-04" }, h("mds-text", null, "Attivazione account"))), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/login", text: "Accedi" }, h("div", { class: "min-h-80 flex rounded-lg items-center justify-center bg-label-violet-10 text-label-violet-04" }, h("mds-text", null, "Accedi"))), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/done", text: "Finito" }, h("div", { class: "min-h-80 flex rounded-lg items-center justify-center bg-label-sky-10 text-label-sky-04" }, h("mds-text", null, "Finito"))));
 export const Default = Template.bind({});
 export const Select = Template.bind({});
 Select.args = {
-  select: 2,
+  'items-done': 2,
 };
-export const Linear = Template.bind({});
-Linear.args = {
-  linear: false,
-};

dist/components/mds-stepper-bar.js

 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.contents{display:contents}.min-h-80{min-height:20rem}.items-center{-ms-flex-align:center;align-items:center}.justify-center{-ms-flex-pack:center;justify-content:center}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-10), var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-10), var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgba(var(--label-green-10), var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-10), var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-10), var(--tw-bg-opacity))}.bg-label-sky-10{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-10), var(--tw-bg-opacity))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgba(var(--label-amaranth-04), var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgba(var(--label-blue-04), var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgba(var(--label-green-04), var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgba(var(--label-orange-04), var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgba(var(--label-violet-04), var(--tw-text-opacity))}.text-label-sky-04{--tw-text-opacity:1;color:rgba(var(--label-sky-04), var(--tw-text-opacity))}.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{position:relative;display:grid;gap:1.5rem}.items{position:relative;z-index:10;display:-ms-flexbox;display:flex;width:100%;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x var(--tw-scroll-snap-strictness);-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness);gap:0px;overflow:auto;scroll-behavior:smooth}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}";
+const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.min-h-80{min-height:20rem}.items-center{-ms-flex-align:center;align-items:center}.justify-center{-ms-flex-pack:center;justify-content:center}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-10), var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-10), var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgba(var(--label-green-10), var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-10), var(--tw-bg-opacity))}.bg-label-sky-10{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-10), var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-10), var(--tw-bg-opacity))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgba(var(--label-amaranth-04), var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgba(var(--label-blue-04), var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgba(var(--label-green-04), var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgba(var(--label-orange-04), var(--tw-text-opacity))}.text-label-sky-04{--tw-text-opacity:1;color:rgba(var(--label-sky-04), var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgba(var(--label-violet-04), var(--tw-text-opacity))}.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{position:relative;display:grid;gap:1.5rem}.items{position:relative;z-index:10;display:-ms-flexbox;display:flex;width:100%;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x var(--tw-scroll-snap-strictness);-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness);gap:0px;overflow:auto;scroll-behavior:smooth}:host([linear=\"true\"]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=\"false\"]) ::slotted(mds-stepper-bar-item){pointer-events:auto}";
 
@@ -12,16 +12,15 @@ const MdsStepperBar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
-    this.queryContents = () => this.element.querySelectorAll('[slot="content"]');
+    // private queryContents = (): NodeListOf<HTMLElement> =>
+    //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
     this.minmax = (value, min, max) => Math.min(Math.max(value, min), max);
-    this.setCurrent = (index = 1) => {
+    this.setCurrent = (index) => {
       this.items = this.queryItems();
       this.currentItem = index - 1;
-      const values = [];
+      const values = new Array();
       this.items.forEach((item, key) => {
-        if (this.linear) {
-          item.selected = false;
-          if (key < this.currentItem) {
-            item.selected = true;
-            if (item.value) {
-              values.push(item.value);
-            }
+        item.done = false;
+        if (key < this.currentItem) {
+          item.done = true;
+          if (item.value) {
+            values.push(item.value);
           }
@@ -40,14 +39,16 @@ }
     this.setCurrentContent = () => {
-      const contents = this.queryContents();
-      contents.forEach((item, key) => {
-        item.style.display = 'none';
-        if (key === this.currentItem) {
-          item.removeAttribute('style');
-        }
-      });
+      var _a;
+      const item = this.element.querySelector(`#mds-stepper-bar-item-${this.currentItem}`);
+      const content = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.content');
+      content.innerHTML = '';
+      if (item && item.innerHTML)
+        content.innerHTML = item.innerHTML;
     };
     this.scrollItems = () => {
-      const itemsElement = this.element.shadowRoot.querySelector('.items');
+      var _a;
+      const itemsElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items');
       const pagesItems = this.queryItems();
       const elementIndex = this.minmax(this.currentItem, 0, this.items.length - 1);
+      if (!itemsElement)
+        throw Error('No mds-stepper-bar-items found');
       if (elementIndex <= 0) {
@@ -66,17 +67,16 @@ itemsElement.scrollLeft = 0;
     this.currentItem = 0;
-    this.linear = true;
-    this.select = 1;
+    this.itemsDone = 1;
   }
   componentWillLoad() {
     this.items = this.queryItems();
-    this.items.forEach((item, key) => item.id = `item-${key}`);
-    const contents = this.queryContents();
-    contents.forEach(item => item.style.display = 'none');
+    this.items.forEach((item, key) => {
+      item.id = `mds-stepper-bar-item-${key}`;
+    });
   }
   componentDidLoad() {
     setTimeout(() => {
-      this.setCurrent(this.select);
+      this.setCurrent(this.itemsDone);
     }, 10);
   }
-  itemSelected(newValue) {
+  itemDone(newValue) {
     this.setCurrent(newValue);
@@ -87,4 +87,4 @@ }
     this.items.forEach((item, key) => {
-      item.selected = false;
-      if (`item-${key}` === event.detail) {
+      item.done = false;
+      if (`mds-stepper-bar-item-${key}` === event.detail) {
         item.current = true;
@@ -96,14 +96,13 @@ this.currentItem = key;
   render() {
-    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "contents" }, h("slot", { name: "content" }))));
+    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "content" })));
   }
   get element() { return this; }
   static get watchers() { return {
-    "select": ["itemSelected"]
+    "itemsDone": ["itemDone"]
   }; }
   static get style() { return mdsStepperBarCss; }
 }, [1, "mds-stepper-bar", {
-    "linear": [4],
-    "select": [2],
+    "itemsDone": [2, "items-done"],
     "currentItem": [32]
-  }, [[0, "mdsStepperBarItemSelect", "changeEventHandler"]]]);
+  }, [[0, "mdsStepperBarItemDone", "changeEventHandler"]]]);
 function defineCustomElement$1() {
@@ -110,0 +109,0 @@ if (typeof customElements === "undefined") {

dist/esm-es5/loader.js

@@ -1,1 +0,1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-eed49b8e.js";export{s as setNonce}from"./index-eed49b8e.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",[[1,"mds-stepper-bar",{linear:[4],select:[2],currentItem:[32]},[[0,"mdsStepperBarItemSelect","changeEventHandler"]]]]]],t)}))};export{defineCustomElements};
+import{p as promiseResolve,b as bootstrapLazy}from"./index-04d46155.js";export{s as setNonce}from"./index-04d46155.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",[[1,"mds-stepper-bar",{itemsDone:[2,"items-done"],currentItem:[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]]]]]],t)}))};export{defineCustomElements};

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

@@ -1,1 +0,1 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-eed49b8e.js";var mdsStepperBarCss=".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.contents{display:contents}.min-h-80{min-height:20rem}.items-center{-ms-flex-align:center;align-items:center}.justify-center{-ms-flex-pack:center;justify-content:center}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-10), var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-10), var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgba(var(--label-green-10), var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-10), var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-10), var(--tw-bg-opacity))}.bg-label-sky-10{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-10), var(--tw-bg-opacity))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgba(var(--label-amaranth-04), var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgba(var(--label-blue-04), var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgba(var(--label-green-04), var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgba(var(--label-orange-04), var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgba(var(--label-violet-04), var(--tw-text-opacity))}.text-label-sky-04{--tw-text-opacity:1;color:rgba(var(--label-sky-04), var(--tw-text-opacity))}.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{position:relative;display:grid;gap:1.5rem}.items{position:relative;z-index:10;display:-ms-flexbox;display:flex;width:100%;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x var(--tw-scroll-snap-strictness);-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness);gap:0px;overflow:auto;scroll-behavior:smooth}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}";var MdsStepperBar=function(){function t(t){var e=this;registerInstance(this,t);this.changedEvent=createEvent(this,"mdsStepperBarChange",7);this.queryItems=function(){return e.element.querySelectorAll("mds-stepper-bar-item")};this.queryContents=function(){return e.element.querySelectorAll('[slot="content"]')};this.minmax=function(t,e,r){return Math.min(Math.max(t,e),r)};this.setCurrent=function(t){if(t===void 0){t=1}e.items=e.queryItems();e.currentItem=t-1;var r=[];e.items.forEach((function(t,a){if(e.linear){t.selected=false;if(a<e.currentItem){t.selected=true;if(t.value){r.push(t.value)}}}t.current=false;if(a===e.currentItem){t.current=true;e.currentItem=a}}));e.changedEvent.emit({value:r.toString(),step:e.currentItem});e.scrollItems();e.setCurrentContent()};this.setCurrentContent=function(){var t=e.queryContents();t.forEach((function(t,r){t.style.display="none";if(r===e.currentItem){t.removeAttribute("style")}}))};this.scrollItems=function(){var t=e.element.shadowRoot.querySelector(".items");var r=e.queryItems();var a=e.minmax(e.currentItem,0,e.items.length-1);if(a<=0){t.scrollLeft=0;return}if(a>=r.length){var o=r[r.length-1];t.scrollLeft=o.offsetLeft-t.offsetLeft;return}var s=r[a];t.scrollLeft=s.offsetLeft-t.offsetLeft-t.offsetWidth/2+s.offsetWidth/2};this.currentItem=0;this.linear=true;this.select=1}t.prototype.componentWillLoad=function(){this.items=this.queryItems();this.items.forEach((function(t,e){return t.id="item-".concat(e)}));var t=this.queryContents();t.forEach((function(t){return t.style.display="none"}))};t.prototype.componentDidLoad=function(){var t=this;setTimeout((function(){t.setCurrent(t.select)}),10)};t.prototype.itemSelected=function(t){this.setCurrent(t)};t.prototype.changeEventHandler=function(t){var e=this;this.items=this.queryItems();this.items.forEach((function(r,a){r.selected=false;if("item-".concat(a)===t.detail){r.current=true;e.currentItem=a}}))};t.prototype.render=function(){return h(Host,null,h("div",{class:"items"},h("slot",null)),h("div",{class:"contents"},h("slot",{name:"content"})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{select:["itemSelected"]}},enumerable:false,configurable:true});return t}();MdsStepperBar.style=mdsStepperBarCss;export{MdsStepperBar as mds_stepper_bar};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-04d46155.js";var mdsStepperBarCss='.fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.min-h-80{min-height:20rem}.items-center{-ms-flex-align:center;align-items:center}.justify-center{-ms-flex-pack:center;justify-content:center}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-10), var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-10), var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgba(var(--label-green-10), var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-10), var(--tw-bg-opacity))}.bg-label-sky-10{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-10), var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-10), var(--tw-bg-opacity))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgba(var(--label-amaranth-04), var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgba(var(--label-blue-04), var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgba(var(--label-green-04), var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgba(var(--label-orange-04), var(--tw-text-opacity))}.text-label-sky-04{--tw-text-opacity:1;color:rgba(var(--label-sky-04), var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgba(var(--label-violet-04), var(--tw-text-opacity))}.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{position:relative;display:grid;gap:1.5rem}.items{position:relative;z-index:10;display:-ms-flexbox;display:flex;width:100%;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x var(--tw-scroll-snap-strictness);-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness);gap:0px;overflow:auto;scroll-behavior:smooth}:host([linear="true"]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear="false"]) ::slotted(mds-stepper-bar-item){pointer-events:auto}';var MdsStepperBar=function(){function t(t){var e=this;registerInstance(this,t);this.changedEvent=createEvent(this,"mdsStepperBarChange",7);this.queryItems=function(){return e.element.querySelectorAll("mds-stepper-bar-item")};this.minmax=function(t,e,r){return Math.min(Math.max(t,e),r)};this.setCurrent=function(t){e.items=e.queryItems();e.currentItem=t-1;var r=new Array;e.items.forEach((function(t,a){t.done=false;if(a<e.currentItem){t.done=true;if(t.value){r.push(t.value)}}t.current=false;if(a===e.currentItem){t.current=true;e.currentItem=a}}));e.changedEvent.emit({value:r.toString(),step:e.currentItem});e.scrollItems();e.setCurrentContent()};this.setCurrentContent=function(){var t;var r=e.element.querySelector("#mds-stepper-bar-item-".concat(e.currentItem));var a=(t=e.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".content");a.innerHTML="";if(r&&r.innerHTML)a.innerHTML=r.innerHTML};this.scrollItems=function(){var t;var r=(t=e.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".items");var a=e.queryItems();var o=e.minmax(e.currentItem,0,e.items.length-1);if(!r)throw Error("No mds-stepper-bar-items found");if(o<=0){r.scrollLeft=0;return}if(o>=a.length){var n=a[a.length-1];r.scrollLeft=n.offsetLeft-r.offsetLeft;return}var s=a[o];r.scrollLeft=s.offsetLeft-r.offsetLeft-r.offsetWidth/2+s.offsetWidth/2};this.currentItem=0;this.itemsDone=1}t.prototype.componentWillLoad=function(){this.items=this.queryItems();this.items.forEach((function(t,e){t.id="mds-stepper-bar-item-".concat(e)}))};t.prototype.componentDidLoad=function(){var t=this;setTimeout((function(){t.setCurrent(t.itemsDone)}),10)};t.prototype.itemDone=function(t){this.setCurrent(t)};t.prototype.changeEventHandler=function(t){var e=this;this.items=this.queryItems();this.items.forEach((function(r,a){r.done=false;if("mds-stepper-bar-item-".concat(a)===t.detail){r.current=true;e.currentItem=a}}))};t.prototype.render=function(){return h(Host,null,h("div",{class:"items"},h("slot",null)),h("div",{class:"content"}))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{itemsDone:["itemDone"]}},enumerable:false,configurable:true});return t}();MdsStepperBar.style=mdsStepperBarCss;export{MdsStepperBar as mds_stepper_bar};

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

@@ -1,1 +0,1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-eed49b8e.js";export{s as setNonce}from"./index-eed49b8e.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",[[1,"mds-stepper-bar",{linear:[4],select:[2],currentItem:[32]},[[0,"mdsStepperBarItemSelect","changeEventHandler"]]]]]],e)}));
+import{p as promiseResolve,b as bootstrapLazy}from"./index-04d46155.js";export{s as setNonce}from"./index-04d46155.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",[[1,"mds-stepper-bar",{itemsDone:[2,"items-done"],currentItem:[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]]]]]],e)}));

dist/esm/loader.js

@@ -1,6 +0,6 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-eed49b8e.js';
-export { s as setNonce } from './index-eed49b8e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-04d46155.js';
+export { s as setNonce } from './index-04d46155.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",[[1,"mds-stepper-bar",{"linear":[4],"select":[2],"currentItem":[32]},[[0,"mdsStepperBarItemSelect","changeEventHandler"]]]]]], options);
+  return bootstrapLazy([["mds-stepper-bar",[[1,"mds-stepper-bar",{"itemsDone":[2,"items-done"],"currentItem":[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]]]]]], options);
   });
@@ -17,0 +17,0 @@ };

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

@@ -1,4 +0,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eed49b8e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-04d46155.js';
 
-const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.contents{display:contents}.min-h-80{min-height:20rem}.items-center{-ms-flex-align:center;align-items:center}.justify-center{-ms-flex-pack:center;justify-content:center}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-10), var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-10), var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgba(var(--label-green-10), var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-10), var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-10), var(--tw-bg-opacity))}.bg-label-sky-10{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-10), var(--tw-bg-opacity))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgba(var(--label-amaranth-04), var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgba(var(--label-blue-04), var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgba(var(--label-green-04), var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgba(var(--label-orange-04), var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgba(var(--label-violet-04), var(--tw-text-opacity))}.text-label-sky-04{--tw-text-opacity:1;color:rgba(var(--label-sky-04), var(--tw-text-opacity))}.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{position:relative;display:grid;gap:1.5rem}.items{position:relative;z-index:10;display:-ms-flexbox;display:flex;width:100%;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x var(--tw-scroll-snap-strictness);-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness);gap:0px;overflow:auto;scroll-behavior:smooth}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}";
+const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.min-h-80{min-height:20rem}.items-center{-ms-flex-align:center;align-items:center}.justify-center{-ms-flex-pack:center;justify-content:center}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-10), var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-10), var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgba(var(--label-green-10), var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-10), var(--tw-bg-opacity))}.bg-label-sky-10{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-10), var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-10), var(--tw-bg-opacity))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgba(var(--label-amaranth-04), var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgba(var(--label-blue-04), var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgba(var(--label-green-04), var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgba(var(--label-orange-04), var(--tw-text-opacity))}.text-label-sky-04{--tw-text-opacity:1;color:rgba(var(--label-sky-04), var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgba(var(--label-violet-04), var(--tw-text-opacity))}.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{position:relative;display:grid;gap:1.5rem}.items{position:relative;z-index:10;display:-ms-flexbox;display:flex;width:100%;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x var(--tw-scroll-snap-strictness);-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness);gap:0px;overflow:auto;scroll-behavior:smooth}:host([linear=\"true\"]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=\"false\"]) ::slotted(mds-stepper-bar-item){pointer-events:auto}";
 
@@ -10,16 +10,15 @@ const MdsStepperBar = class {
     this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
-    this.queryContents = () => this.element.querySelectorAll('[slot="content"]');
+    // private queryContents = (): NodeListOf<HTMLElement> =>
+    //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
     this.minmax = (value, min, max) => Math.min(Math.max(value, min), max);
-    this.setCurrent = (index = 1) => {
+    this.setCurrent = (index) => {
       this.items = this.queryItems();
       this.currentItem = index - 1;
-      const values = [];
+      const values = new Array();
       this.items.forEach((item, key) => {
-        if (this.linear) {
-          item.selected = false;
-          if (key < this.currentItem) {
-            item.selected = true;
-            if (item.value) {
-              values.push(item.value);
-            }
+        item.done = false;
+        if (key < this.currentItem) {
+          item.done = true;
+          if (item.value) {
+            values.push(item.value);
           }
@@ -38,14 +37,16 @@ }
     this.setCurrentContent = () => {
-      const contents = this.queryContents();
-      contents.forEach((item, key) => {
-        item.style.display = 'none';
-        if (key === this.currentItem) {
-          item.removeAttribute('style');
-        }
-      });
+      var _a;
+      const item = this.element.querySelector(`#mds-stepper-bar-item-${this.currentItem}`);
+      const content = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.content');
+      content.innerHTML = '';
+      if (item && item.innerHTML)
+        content.innerHTML = item.innerHTML;
     };
     this.scrollItems = () => {
-      const itemsElement = this.element.shadowRoot.querySelector('.items');
+      var _a;
+      const itemsElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items');
       const pagesItems = this.queryItems();
       const elementIndex = this.minmax(this.currentItem, 0, this.items.length - 1);
+      if (!itemsElement)
+        throw Error('No mds-stepper-bar-items found');
       if (elementIndex <= 0) {
@@ -64,17 +65,16 @@ itemsElement.scrollLeft = 0;
     this.currentItem = 0;
-    this.linear = true;
-    this.select = 1;
+    this.itemsDone = 1;
   }
   componentWillLoad() {
     this.items = this.queryItems();
-    this.items.forEach((item, key) => item.id = `item-${key}`);
-    const contents = this.queryContents();
-    contents.forEach(item => item.style.display = 'none');
+    this.items.forEach((item, key) => {
+      item.id = `mds-stepper-bar-item-${key}`;
+    });
   }
   componentDidLoad() {
     setTimeout(() => {
-      this.setCurrent(this.select);
+      this.setCurrent(this.itemsDone);
     }, 10);
   }
-  itemSelected(newValue) {
+  itemDone(newValue) {
     this.setCurrent(newValue);
@@ -85,4 +85,4 @@ }
     this.items.forEach((item, key) => {
-      item.selected = false;
-      if (`item-${key}` === event.detail) {
+      item.done = false;
+      if (`mds-stepper-bar-item-${key}` === event.detail) {
         item.current = true;
@@ -94,7 +94,7 @@ this.currentItem = key;
   render() {
-    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "contents" }, h("slot", { name: "content" }))));
+    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "content" })));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "select": ["itemSelected"]
+    "itemsDone": ["itemDone"]
   }; }
@@ -101,0 +101,0 @@ };

dist/esm/mds-stepper-bar.js

@@ -1,6 +0,6 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-eed49b8e.js';
-export { s as setNonce } from './index-eed49b8e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-04d46155.js';
+export { s as setNonce } from './index-04d46155.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",[[1,"mds-stepper-bar",{"linear":[4],"select":[2],"currentItem":[32]},[[0,"mdsStepperBarItemSelect","changeEventHandler"]]]]]], options);
+  return bootstrapLazy([["mds-stepper-bar",[[1,"mds-stepper-bar",{"itemsDone":[2,"items-done"],"currentItem":[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]]]]]], options);
 });

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

@@ -1,1 +0,1 @@
-import{p as e,b as r}from"./p-6490ede4.js";export{s as setNonce}from"./p-6490ede4.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((e=>r([["p-45ce8010",[[1,"mds-stepper-bar",{linear:[4],select:[2],currentItem:[32]},[[0,"mdsStepperBarItemSelect","changeEventHandler"]]]]]],e)));
+import{p as e,b as r}from"./p-a70d7a69.js";export{s as setNonce}from"./p-a70d7a69.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((e=>r([["p-802088a7",[[1,"mds-stepper-bar",{itemsDone:[2,"items-done"],currentItem:[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]]]]]],e)));

dist/stats.json

 {
-  "timestamp": "2023-03-14T15:11:52",
+  "timestamp": "2023-04-14T10:19:25",
   "compiler": {
@@ -59,3 +59,3 @@ "name": "node",
         "generatedFiles": [
-          "./dist/cjs/index-6c4df756.js",
+          "./dist/cjs/index-80eb419c.js",
           "./dist/cjs/index.cjs.js",
@@ -65,3 +65,3 @@ "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-stepper-bar.cjs.js",
-          "./dist/esm-es5/index-eed49b8e.js",
+          "./dist/esm-es5/index-04d46155.js",
           "./dist/esm-es5/index.js",
@@ -71,3 +71,3 @@ "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-stepper-bar.js",
-          "./dist/esm/index-eed49b8e.js",
+          "./dist/esm/index-04d46155.js",
           "./dist/esm/index.js",
@@ -82,17 +82,17 @@ "./dist/esm/loader.js",
           "./dist/mds-stepper-bar/mds-stepper-bar.js",
-          "./dist/mds-stepper-bar/p-45ce8010.entry.js",
           "./dist/mds-stepper-bar/p-50ea2036.system.js",
-          "./dist/mds-stepper-bar/p-5f595f34.system.entry.js",
-          "./dist/mds-stepper-bar/p-6490ede4.js",
-          "./dist/mds-stepper-bar/p-6d7ff3a7.system.js",
-          "./dist/mds-stepper-bar/p-728e9e96.system.js",
+          "./dist/mds-stepper-bar/p-802088a7.entry.js",
+          "./dist/mds-stepper-bar/p-9699d83b.system.entry.js",
+          "./dist/mds-stepper-bar/p-997966f3.system.js",
+          "./dist/mds-stepper-bar/p-a70d7a69.js",
+          "./dist/mds-stepper-bar/p-bfe1b795.system.js",
           "./www/build/index.esm.js",
           "./www/build/mds-stepper-bar.esm.js",
           "./www/build/mds-stepper-bar.js",
-          "./www/build/p-45ce8010.entry.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-5f595f34.system.entry.js",
-          "./www/build/p-6490ede4.js",
-          "./www/build/p-6d7ff3a7.system.js",
-          "./www/build/p-728e9e96.system.js"
+          "./www/build/p-802088a7.entry.js",
+          "./www/build/p-9699d83b.system.entry.js",
+          "./www/build/p-997966f3.system.js",
+          "./www/build/p-a70d7a69.js",
+          "./www/build/p-bfe1b795.system.js"
         ]
@@ -130,8 +130,8 @@ },
         ],
-        "bundleId": "p-45ce8010",
-        "fileName": "p-45ce8010.entry.js",
+        "bundleId": "p-802088a7",
+        "fileName": "p-802088a7.entry.js",
         "imports": [
-          "p-6490ede4.js"
+          "p-a70d7a69.js"
         ],
-        "originalByteSize": 5854
+        "originalByteSize": 5970
       }
@@ -148,5 +148,5 @@ ],
         "imports": [
-          "index-eed49b8e.js"
+          "index-04d46155.js"
         ],
-        "originalByteSize": 5858
+        "originalByteSize": 5974
       }
@@ -163,5 +163,5 @@ ],
         "imports": [
-          "index-eed49b8e.js"
+          "index-04d46155.js"
         ],
-        "originalByteSize": 5858
+        "originalByteSize": 5974
       }
@@ -175,8 +175,8 @@ ],
         ],
-        "bundleId": "p-5f595f34.system",
-        "fileName": "p-5f595f34.system.entry.js",
+        "bundleId": "p-9699d83b.system",
+        "fileName": "p-9699d83b.system.entry.js",
         "imports": [
-          "p-728e9e96.system.js"
+          "p-bfe1b795.system.js"
         ],
-        "originalByteSize": 6666
+        "originalByteSize": 6782
       }
@@ -193,5 +193,5 @@ ],
         "imports": [
-          "index-6c4df756.js"
+          "index-80eb419c.js"
         ],
-        "originalByteSize": 5923
+        "originalByteSize": 6033
       }
@@ -247,3 +247,3 @@ ]
         {
-          "name": "mdsStepperBarItemSelect",
+          "name": "mdsStepperBarItemDone",
           "method": "changeEventHandler",
@@ -258,25 +258,5 @@ "capture": false,
         {
-          "name": "linear",
-          "type": "boolean",
-          "attribute": "linear",
-          "reflect": false,
-          "mutable": false,
-          "required": false,
-          "optional": false,
-          "defaultValue": "true",
-          "complexType": {
-            "original": "true",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "docs": {
-            "tags": [],
-            "text": "Sets if the component should handle checked elements from the first to the last child or not"
-          },
-          "internal": false
-        },
-        {
-          "name": "select",
+          "name": "itemsDone",
           "type": "number",
-          "attribute": "select",
+          "attribute": "items-done",
           "reflect": false,
@@ -294,3 +274,3 @@ "mutable": false,
             "tags": [],
-            "text": "Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked"
+            "text": "Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done"
           },
@@ -321,25 +301,5 @@ "internal": false
             {
-              "name": "linear",
-              "type": "boolean",
-              "attribute": "linear",
-              "reflect": false,
-              "mutable": false,
-              "required": false,
-              "optional": false,
-              "defaultValue": "true",
-              "complexType": {
-                "original": "true",
-                "resolved": "boolean",
-                "references": {}
-              },
-              "docs": {
-                "tags": [],
-                "text": "Sets if the component should handle checked elements from the first to the last child or not"
-              },
-              "internal": false
-            },
-            {
-              "name": "select",
+              "name": "itemsDone",
               "type": "number",
-              "attribute": "select",
+              "attribute": "items-done",
               "reflect": false,
@@ -357,3 +317,3 @@ "mutable": false,
                 "tags": [],
-                "text": "Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked"
+                "text": "Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done"
               },
@@ -372,3 +332,3 @@ "internal": false
             {
-              "name": "mdsStepperBarItemSelect",
+              "name": "mdsStepperBarItemDone",
               "method": "changeEventHandler",
@@ -405,4 +365,4 @@ "capture": false,
             {
-              "propName": "select",
-              "methodName": "itemSelected"
+              "propName": "itemsDone",
+              "methodName": "itemDone"
             }
@@ -463,3 +423,3 @@ ],
           "hasPropNumber": true,
-          "hasPropBoolean": true,
+          "hasPropBoolean": false,
           "hasPropString": false,
@@ -477,3 +437,3 @@ "hasPropMutable": false,
           "hasVdomListener": false,
-          "hasVdomPropOrAttr": true,
+          "hasVdomPropOrAttr": false,
           "hasVdomRef": false,
@@ -486,4 +446,3 @@ "hasVdomRender": true,
           "htmlAttrNames": [
-            "class",
-            "name"
+            "class"
           ],
@@ -508,3 +467,3 @@ "htmlTagNames": [
     "sc-mds-stepper-bar": [
-      "p-6490ede4.js"
+      "p-a70d7a69.js"
     ]
@@ -511,0 +470,0 @@ },

dist/types/components.d.ts

@@ -12,9 +12,5 @@ /* eslint-disable */
         /**
-          * Sets if the component should handle checked elements from the first to the last child or not
+          * Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done
          */
-        "linear": true;
-        /**
-          * Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked
-         */
-        "select": number;
+        "itemsDone": number;
     }
@@ -40,5 +36,5 @@ }
         /**
-          * Sets if the component should handle checked elements from the first to the last child or not
+          * Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done
          */
-        "linear"?: true;
+        "itemsDone"?: number;
         /**
@@ -48,6 +44,2 @@ * Emits when a step is changed
         "onMdsStepperBarChange"?: (event: MdsStepperBarCustomEvent<MdsStepperBarEventDetail>) => void;
-        /**
-          * Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked
-         */
-        "select"?: number;
     }
@@ -54,0 +46,0 @@ interface IntrinsicElements {

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

@@ -8,11 +8,6 @@ import { EventEmitter } from '../../stencil-public-runtime';
   /**
-   * Sets if the component should handle checked elements from the first to the last child or not
+   * Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done
    */
-  readonly linear = true;
-  /**
-   * Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked
-   */
-  readonly select: number;
+  readonly itemsDone: number;
   private queryItems;
-  private queryContents;
   private minmax;
@@ -28,5 +23,5 @@ private setCurrent;
   componentDidLoad(): void;
-  itemSelected(newValue: number): void;
+  itemDone(newValue: number): void;
   changeEventHandler(event: CustomEvent<string>): void;
   render(): any;
 }

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

 declare const _default: {
   title: string;
   argTypes: {
-    linear: {
+    'items-done': {
       type: {
@@ -10,8 +10,2 @@ name: string;
     };
-    select: {
-      type: {
-        name: string;
-      };
-      description: string;
-    };
   };
@@ -22,2 +16,1 @@ };
 export declare const Select: any;
-export declare const Linear: 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",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "mds-stepper-bar 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-progress": "^2.4.0",
-    "@maggioli-design-system/mds-stepper-bar-item": "^3.1.0",
-    "@maggioli-design-system/styles": "^11.2.1",
-    "@stencil/core": "^2.22.2"
+    "@maggioli-design-system/mds-stepper-bar-item": "^4.0.0",
+    "@maggioli-design-system/styles": "^11.4.0",
+    "@stencil/core": "^2.22.3"
   },
@@ -45,7 +46,12 @@ "license": "MIT",
     {
+      "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,6 +10,5 @@ # mds-stepper-bar
 
-| Property | Attribute | Description                                                                                                                      | Type      | Default |
-| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
-| `linear` | `linear`  | Sets if the component should handle checked elements from the first to the last child or not                                     | `boolean` | `true`  |
-| `select` | `select`  | Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked | `number`  | `1`     |
+| Property    | Attribute    | Description                                                                                                           | Type     | Default |
+| ----------- | ------------ | --------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
+| `itemsDone` | `items-done` | Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done | `number` | `1`     |
 
@@ -16,0 +15,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

@@ -12,9 +12,5 @@ /* eslint-disable */
         /**
-          * Sets if the component should handle checked elements from the first to the last child or not
+          * Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done
          */
-        "linear": true;
-        /**
-          * Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked
-         */
-        "select": number;
+        "itemsDone": number;
     }
@@ -40,5 +36,5 @@ }
         /**
-          * Sets if the component should handle checked elements from the first to the last child or not
+          * Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done
          */
-        "linear"?: true;
+        "itemsDone"?: number;
         /**
@@ -48,6 +44,2 @@ * Emits when a step is changed
         "onMdsStepperBarChange"?: (event: MdsStepperBarCustomEvent<MdsStepperBarEventDetail>) => void;
-        /**
-          * Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked
-         */
-        "select"?: number;
     }
@@ -54,0 +46,0 @@ interface IntrinsicElements {

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

@@ -10,6 +10,5 @@ # mds-stepper-bar
 
-| Property | Attribute | Description                                                                                                                      | Type      | Default |
-| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
-| `linear` | `linear`  | Sets if the component should handle checked elements from the first to the last child or not                                     | `boolean` | `true`  |
-| `select` | `select`  | Sets the current item to the given index: 0 is none selected, 1 is the first item selected, last number + 1 is all items checked | `number`  | `1`     |
+| Property    | Attribute    | Description                                                                                                           | Type     | Default |
+| ----------- | ------------ | --------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
+| `itemsDone` | `items-done` | Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done | `number` | `1`     |
 
@@ -16,0 +15,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.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as r}from"./p-6490ede4.js";export{s as setNonce}from"./p-6490ede4.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((e=>r([["p-45ce8010",[[1,"mds-stepper-bar",{linear:[4],select:[2],currentItem:[32]},[[0,"mdsStepperBarItemSelect","changeEventHandler"]]]]]],e)));
+import{p as e,b as r}from"./p-a70d7a69.js";export{s as setNonce}from"./p-a70d7a69.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((e=>r([["p-802088a7",[[1,"mds-stepper-bar",{itemsDone:[2,"items-done"],currentItem:[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]]]]]],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

9831

increased by0.82%

Worsened metrics

Total package byte prevSize

750984

decreased by-0.33%

Number of downloads

26

decreased by-58.06%

Number of lines in readme file

25

decreased by-3.85%

Dependency changes

• + Added@maggioli-design-system/mds-stepper-bar-item@4.0.0(transitive)

• - Removed@maggioli-design-system/mds-stepper-bar-item@3.1.0(transitive)

• Updated@maggioli-design-system/mds-stepper-bar-item@^4.0.0

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

• Updated@stencil/core@^2.22.3