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

Comparing version 4.0.0 to 5.0.0

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-80eb419c.js');
+const index = require('./index-e15f40e4.js');
 
@@ -8,0 +8,0 @@ /*

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

@@ -5,5 +5,5 @@ 'use strict';
 
-const index = require('./index-80eb419c.js');
+const index = require('./index-e15f40e4.js');
 
-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}";
+const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.contents{display:contents}.hidden{display:none}.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}.contents{display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-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}:host([hydrated]) .contents{opacity:1}";
 
@@ -15,2 +15,3 @@ const MdsStepperBar = class {
     this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
+    this.queryContentItems = () => this.element.querySelectorAll('[slot=content]');
     // private queryContents = (): NodeListOf<HTMLElement> =>
@@ -42,8 +43,8 @@ //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
     this.setCurrentContent = () => {
-      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.contentItems.forEach((item, index) => {
+        item.classList.add('hidden');
+        if (index === this.currentItem) {
+          item.classList.remove('hidden');
+        }
+      });
     };
@@ -79,5 +80,4 @@ this.scrollItems = () => {
   componentDidLoad() {
-    setTimeout(() => {
-      this.setCurrent(this.itemsDone);
-    }, 10);
+    this.contentItems = this.queryContentItems();
+    this.setCurrent(this.itemsDone);
   }
@@ -98,3 +98,3 @@ itemDone(newValue) {
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "items" }, index.h("slot", null)), index.h("div", { class: "content" })));
+    return (index.h(index.Host, null, index.h("div", { class: "items" }, index.h("slot", null)), index.h("div", { class: "contents", part: "contents" }, index.h("slot", { name: "content" }))));
   }
@@ -101,0 +101,0 @@ get element() { return index.getElement(this); }

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

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-80eb419c.js');
+const index = require('./index-e15f40e4.js');
 
@@ -8,0 +8,0 @@ /*

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

@@ -5,2 +5,3 @@ import { Host, h } from '@stencil/core';
     this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
+    this.queryContentItems = () => this.element.querySelectorAll('[slot=content]');
     // private queryContents = (): NodeListOf<HTMLElement> =>
@@ -32,8 +33,8 @@ //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
     this.setCurrentContent = () => {
-      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.contentItems.forEach((item, index) => {
+        item.classList.add('hidden');
+        if (index === this.currentItem) {
+          item.classList.remove('hidden');
+        }
+      });
     };
@@ -69,5 +70,4 @@ this.scrollItems = () => {
   componentDidLoad() {
-    setTimeout(() => {
-      this.setCurrent(this.itemsDone);
-    }, 10);
+    this.contentItems = this.queryContentItems();
+    this.setCurrent(this.itemsDone);
   }
@@ -88,3 +88,3 @@ itemDone(newValue) {
   render() {
-    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "content" })));
+    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "contents", part: "contents" }, h("slot", { name: "content" }))));
   }
@@ -91,0 +91,0 @@ static get is() { return "mds-stepper-bar"; }

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

@@ -11,3 +11,3 @@ import { h } from '@stencil/core';
 };
-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"))));
+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", label: "Nuovo account" }), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/badge", label: "Dati personali" }), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/round/email", label: "Impostazioni newsletter" }), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/lock-open", label: "Attivazione account" }), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/login", label: "Accedi" }), h("mds-stepper-bar-item", { badge: true, step: true, "icon-checked": "mi/baseline/done", icon: "mi/baseline/done", label: "Finito" }), 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, "Finito")));
 export const Default = Template.bind({});
@@ -14,0 +14,0 @@ export const Select = Template.bind({});

dist/collection/dictionary/button.js

@@ -16,2 +16,6 @@ const buttonVariantDictionary = [
 ];
+const buttonTargetDictionary = [
+  'blank',
+  'self',
+];
 const buttonSizeDictionary = [
@@ -27,2 +31,2 @@ 'sm',
 ];
-export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };
+export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };

dist/collection/dictionary/variant.js

@@ -56,2 +56,10 @@ const themeVariantDictionary = [
 ];
+const toneActionVariantDictionary = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'strong',
+  'weak',
+  'quiet',
+];
 const toneSimpleVariantDictionary = [
@@ -66,2 +74,2 @@ 'strong',
 ];
-export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };

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}.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}";
+const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.contents{display:contents}.hidden{display:none}.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}.contents{display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-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}:host([hydrated]) .contents{opacity:1}";
 
@@ -12,2 +12,3 @@ const MdsStepperBar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
+    this.queryContentItems = () => this.element.querySelectorAll('[slot=content]');
     // private queryContents = (): NodeListOf<HTMLElement> =>
@@ -39,8 +40,8 @@ //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
     this.setCurrentContent = () => {
-      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.contentItems.forEach((item, index) => {
+        item.classList.add('hidden');
+        if (index === this.currentItem) {
+          item.classList.remove('hidden');
+        }
+      });
     };
@@ -76,5 +77,4 @@ this.scrollItems = () => {
   componentDidLoad() {
-    setTimeout(() => {
-      this.setCurrent(this.itemsDone);
-    }, 10);
+    this.contentItems = this.queryContentItems();
+    this.setCurrent(this.itemsDone);
   }
@@ -95,3 +95,3 @@ itemDone(newValue) {
   render() {
-    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "content" })));
+    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "contents", part: "contents" }, h("slot", { name: "content" }))));
   }
@@ -98,0 +98,0 @@ get element() { return this; }

dist/documentation.json

 {
-  "timestamp": "2023-04-14T10:19:25",
+  "timestamp": "2023-07-05T10:32:43",
   "compiler": {
@@ -56,3 +56,8 @@ "name": "@stencil/core",
       "slots": [],
-      "parts": [],
+      "parts": [
+        {
+          "name": "contents",
+          "docs": ""
+        }
+      ],
       "dependents": [],
@@ -59,0 +64,0 @@ "dependencies": [],

dist/esm-es5/loader.js

@@ -1,1 +0,1 @@
-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};
+import{p as promiseResolve,b as bootstrapLazy}from"./index-24edcbb7.js";export{s as setNonce}from"./index-24edcbb7.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-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};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-24edcbb7.js";var mdsStepperBarCss='.fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.contents{display:contents}.hidden{display:none}.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}.contents{display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-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}:host([hydrated]) .contents{opacity:1}';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.queryContentItems=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){e.items=e.queryItems();e.currentItem=t-1;var r=new Array;e.items.forEach((function(t,o){t.done=false;if(o<e.currentItem){t.done=true;if(t.value){r.push(t.value)}}t.current=false;if(o===e.currentItem){t.current=true;e.currentItem=o}}));e.changedEvent.emit({value:r.toString(),step:e.currentItem});e.scrollItems();e.setCurrentContent()};this.setCurrentContent=function(){e.contentItems.forEach((function(t,r){t.classList.add("hidden");if(r===e.currentItem){t.classList.remove("hidden")}}))};this.scrollItems=function(){var t;var r=(t=e.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".items");var o=e.queryItems();var a=e.minmax(e.currentItem,0,e.items.length-1);if(!r)throw Error("No mds-stepper-bar-items found");if(a<=0){r.scrollLeft=0;return}if(a>=o.length){var n=o[o.length-1];r.scrollLeft=n.offsetLeft-r.offsetLeft;return}var s=o[a];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(){this.contentItems=this.queryContentItems();this.setCurrent(this.itemsDone)};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,o){r.done=false;if("mds-stepper-bar-item-".concat(o)===t.detail){r.current=true;e.currentItem=o}}))};t.prototype.render=function(){return h(Host,null,h("div",{class:"items"},h("slot",null)),h("div",{class:"contents",part:"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{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-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)}));
+import{p as promiseResolve,b as bootstrapLazy}from"./index-24edcbb7.js";export{s as setNonce}from"./index-24edcbb7.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,3 +0,3 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-04d46155.js';
-export { s as setNonce } from './index-04d46155.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-24edcbb7.js';
+export { s as setNonce } from './index-24edcbb7.js';
 
@@ -4,0 +4,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-04d46155.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-24edcbb7.js';
 
-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}";
+const mdsStepperBarCss = ".fixed{position:fixed}.absolute{position:absolute}.flex{display:-ms-flexbox;display:flex}.contents{display:contents}.hidden{display:none}.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}.contents{display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-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}:host([hydrated]) .contents{opacity:1}";
 
@@ -10,2 +10,3 @@ const MdsStepperBar = class {
     this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
+    this.queryContentItems = () => this.element.querySelectorAll('[slot=content]');
     // private queryContents = (): NodeListOf<HTMLElement> =>
@@ -37,8 +38,8 @@ //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
     this.setCurrentContent = () => {
-      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.contentItems.forEach((item, index) => {
+        item.classList.add('hidden');
+        if (index === this.currentItem) {
+          item.classList.remove('hidden');
+        }
+      });
     };
@@ -74,5 +75,4 @@ this.scrollItems = () => {
   componentDidLoad() {
-    setTimeout(() => {
-      this.setCurrent(this.itemsDone);
-    }, 10);
+    this.contentItems = this.queryContentItems();
+    this.setCurrent(this.itemsDone);
   }
@@ -93,3 +93,3 @@ itemDone(newValue) {
   render() {
-    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "content" })));
+    return (h(Host, null, h("div", { class: "items" }, h("slot", null)), h("div", { class: "contents", part: "contents" }, h("slot", { name: "content" }))));
   }
@@ -96,0 +96,0 @@ get element() { return getElement(this); }

dist/esm/mds-stepper-bar.js

@@ -1,3 +0,3 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-04d46155.js';
-export { s as setNonce } from './index-04d46155.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-24edcbb7.js';
+export { s as setNonce } from './index-24edcbb7.js';
 
@@ -4,0 +4,0 @@ /*

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

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

dist/stats.json

 {
-  "timestamp": "2023-04-14T10:19:25",
+  "timestamp": "2023-07-05T10:32:43",
   "compiler": {
     "name": "node",
-    "version": "18.3.0"
+    "version": "18.12.1"
   },
@@ -12,10 +12,11 @@ "app": {
     "entries": 1,
-    "bundles": 66,
+    "bundles": 67,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 25,
+        "files": 26,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
           "./dist/collection/common/keyboard-manager.js",
+          "./dist/collection/common/unit.js",
           "./dist/collection/components/mds-stepper-bar/mds-stepper-bar.js",
@@ -60,3 +61,3 @@ "./dist/collection/components/mds-stepper-bar/meta/event-detail.js",
         "generatedFiles": [
-          "./dist/cjs/index-80eb419c.js",
+          "./dist/cjs/index-e15f40e4.js",
           "./dist/cjs/index.cjs.js",
@@ -66,3 +67,3 @@ "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-stepper-bar.cjs.js",
-          "./dist/esm-es5/index-04d46155.js",
+          "./dist/esm-es5/index-24edcbb7.js",
           "./dist/esm-es5/index.js",
@@ -72,3 +73,3 @@ "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-stepper-bar.js",
-          "./dist/esm/index-04d46155.js",
+          "./dist/esm/index-24edcbb7.js",
           "./dist/esm/index.js",
@@ -83,17 +84,17 @@ "./dist/esm/loader.js",
           "./dist/mds-stepper-bar/mds-stepper-bar.js",
+          "./dist/mds-stepper-bar/p-01f1a9e1.js",
+          "./dist/mds-stepper-bar/p-1ce2707d.entry.js",
+          "./dist/mds-stepper-bar/p-2ee926ce.system.js",
           "./dist/mds-stepper-bar/p-50ea2036.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",
+          "./dist/mds-stepper-bar/p-cfbdef1c.system.js",
+          "./dist/mds-stepper-bar/p-ec831353.system.entry.js",
           "./www/build/index.esm.js",
           "./www/build/mds-stepper-bar.esm.js",
           "./www/build/mds-stepper-bar.js",
+          "./www/build/p-01f1a9e1.js",
+          "./www/build/p-1ce2707d.entry.js",
+          "./www/build/p-2ee926ce.system.js",
           "./www/build/p-50ea2036.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"
+          "./www/build/p-cfbdef1c.system.js",
+          "./www/build/p-ec831353.system.entry.js"
         ]
@@ -131,8 +132,8 @@ },
         ],
-        "bundleId": "p-802088a7",
-        "fileName": "p-802088a7.entry.js",
+        "bundleId": "p-1ce2707d",
+        "fileName": "p-1ce2707d.entry.js",
         "imports": [
-          "p-a70d7a69.js"
+          "p-01f1a9e1.js"
         ],
-        "originalByteSize": 5970
+        "originalByteSize": 6420
       }
@@ -149,5 +150,5 @@ ],
         "imports": [
-          "index-04d46155.js"
+          "index-24edcbb7.js"
         ],
-        "originalByteSize": 5974
+        "originalByteSize": 6424
       }
@@ -164,5 +165,5 @@ ],
         "imports": [
-          "index-04d46155.js"
+          "index-24edcbb7.js"
         ],
-        "originalByteSize": 5974
+        "originalByteSize": 6424
       }
@@ -176,8 +177,8 @@ ],
         ],
-        "bundleId": "p-9699d83b.system",
-        "fileName": "p-9699d83b.system.entry.js",
+        "bundleId": "p-ec831353.system",
+        "fileName": "p-ec831353.system.entry.js",
         "imports": [
-          "p-bfe1b795.system.js"
+          "p-2ee926ce.system.js"
         ],
-        "originalByteSize": 6782
+        "originalByteSize": 7232
       }
@@ -194,5 +195,5 @@ ],
         "imports": [
-          "index-80eb419c.js"
+          "index-e15f40e4.js"
         ],
-        "originalByteSize": 6033
+        "originalByteSize": 6489
       }
@@ -430,3 +431,3 @@ ]
           "hasVdomListener": false,
-          "hasVdomPropOrAttr": false,
+          "hasVdomPropOrAttr": true,
           "hasVdomRef": false,
@@ -439,3 +440,5 @@ "hasVdomRender": true,
           "htmlAttrNames": [
-            "class"
+            "class",
+            "part",
+            "name"
           ],
@@ -446,3 +449,5 @@ "htmlTagNames": [
           ],
-          "htmlParts": [],
+          "htmlParts": [
+            "contents"
+          ],
           "isUpdateable": true,
@@ -461,3 +466,3 @@ "potentialCmpRefs": [],
     "sc-mds-stepper-bar": [
-      "p-a70d7a69.js"
+      "p-01f1a9e1.js"
     ]
@@ -468,2 +473,3 @@ },
     "./src/common/keyboard-manager.ts": [],
+    "./src/common/unit.ts": [],
     "./src/components/mds-stepper-bar/mds-stepper-bar.tsx": [],
@@ -470,0 +476,0 @@ "./src/components/mds-stepper-bar/meta/event-detail.ts": [],

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

@@ -5,2 +5,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   private items;
+  private contentItems;
   currentItem: number;
@@ -13,2 +14,3 @@ private element;
   private queryItems;
+  private queryContentItems;
   private minmax;
@@ -15,0 +17,0 @@ private setCurrent;

dist/types/dictionary/button.d.ts

 declare const buttonVariantDictionary: string[];
 declare const buttonToneVariantDictionary: string[];
+declare const buttonTargetDictionary: string[];
 declare const buttonSizeDictionary: string[];
 declare const buttonIconPositionDictionary: string[];
-export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };
+export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };

dist/types/dictionary/variant.d.ts

@@ -7,4 +7,5 @@ declare const themeVariantDictionary: string[];
 declare const toneVariantDictionary: string[];
+declare const toneActionVariantDictionary: string[];
 declare const toneSimpleVariantDictionary: string[];
 declare const toneMinimalVariantDictionary: string[];
-export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };

dist/types/type/button.d.ts

 export type ButtonType = 'a' | 'button' | 'reset' | 'submit';
+export type ButtonTargetType = 'self' | 'blank';
 export type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonIconPositionType = 'left' | 'right';
 export type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';

dist/types/type/variant.d.ts

@@ -8,4 +8,5 @@ export type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
 export type StateVariantType = 'disabled' | 'focused' | 'readonly';
+export type ToneActionVariantType = 'primary' | 'secondary' | 'tertiary' | 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet';
 export type ToneMinimalVariantType = 'strong' | 'weak';

documentation.json

 {
-  "timestamp": "2023-04-14T09:57:39",
+  "timestamp": "2023-07-05T10:28:58",
   "compiler": {
@@ -57,3 +57,8 @@ "name": "@stencil/core",
       "slots": [],
-      "parts": [],
+      "parts": [
+        {
+          "name": "contents",
+          "docs": ""
+        }
+      ],
       "dependents": [],
@@ -60,0 +65,0 @@ "dependencies": [],

package.json

 {
   "name": "@maggioli-design-system/mds-stepper-bar",
-  "version": "4.0.0",
+  "version": "5.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.",
@@ -27,4 +27,4 @@ "main": "dist/index.cjs.js",
     "@maggioli-design-system/mds-progress": "^2.4.0",
-    "@maggioli-design-system/mds-stepper-bar-item": "^4.0.0",
-    "@maggioli-design-system/styles": "^11.4.0",
+    "@maggioli-design-system/mds-stepper-bar-item": "^5.0.0",
+    "@maggioli-design-system/styles": "^11.6.0",
     "@stencil/core": "^2.22.3"
@@ -31,0 +31,0 @@ },

readme.md

@@ -22,4 +22,11 @@ # mds-stepper-bar
 
+## Shadow Parts
+
+| Part         | Description |
+| ------------ | ----------- |
+| `"contents"` |             |
+
+
 ----------------------------------------------
 
 Built with love @ **Maggioli Informatica / R&D Department**

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

@@ -22,4 +22,11 @@ # mds-stepper-bar
 
+## Shadow Parts
+
+| Part         | Description |
+| ------------ | ----------- |
+| `"contents"` |             |
+
+
 ----------------------------------------------
 
 Built with love @ **Maggioli Informatica / R&D Department**

src/dictionary/button.ts

@@ -18,2 +18,7 @@ const buttonVariantDictionary = [
 
+const buttonTargetDictionary = [
+  'blank',
+  'self',
+]
+
 const buttonSizeDictionary = [
@@ -32,6 +37,7 @@ 'sm',
 export {
+  buttonIconPositionDictionary,
   buttonSizeDictionary,
+  buttonTargetDictionary,
   buttonToneVariantDictionary,
   buttonVariantDictionary,
-  buttonIconPositionDictionary,
 }

src/dictionary/variant.ts

@@ -62,2 +62,11 @@ const themeVariantDictionary = [
 
+const toneActionVariantDictionary = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'strong',
+  'weak',
+  'quiet',
+]
+
 const toneSimpleVariantDictionary = [
@@ -80,2 +89,3 @@ 'strong',
   themeVariantDictionary,
+  toneActionVariantDictionary,
   toneMinimalVariantDictionary,
@@ -82,0 +92,0 @@ toneSimpleVariantDictionary,

src/fixtures/icons.json

@@ -31,2 +31,3 @@ [
     "mgg/area-weather",
+    "mgg/bill",
     "mgg/box-multiple",
@@ -37,2 +38,3 @@ "mgg/breadcrumb",
     "mgg/calendar-schedule",
+    "mgg/cancelled-sheet",
     "mgg/car-license",
@@ -44,3 +46,5 @@ "mgg/card-stamping",
     "mgg/city-bin",
+    "mgg/classic-permission",
     "mgg/copy-paste",
+    "mgg/d-instrumental-buildings",
     "mgg/data-analytics-alt",
@@ -56,2 +60,3 @@ "mgg/data-analytics-search",
     "mgg/dataset",
+    "mgg/delivered-to-the-recipient",
     "mgg/document-magic",
@@ -85,5 +90,9 @@ "mgg/document-rename",
     "mgg/fit-vertical",
+    "mgg/forwarded-with-a-single-sending",
     "mgg/fullscreen-on-alt",
     "mgg/google-check-small",
     "mgg/google-place-item",
+    "mgg/group-assigned-automatically-system",
+    "mgg/group-ceased",
+    "mgg/group-inherited",
     "mgg/heart",
@@ -99,2 +108,3 @@ "mgg/heart-outline",
     "mgg/input-calendar-time",
+    "mgg/instrumental-buildings",
     "mgg/isbn",
@@ -121,2 +131,4 @@ "mgg/judge-hammer",
     "mgg/national-document-off",
+    "mgg/not-instrumental-d-buildings",
+    "mgg/not-sent-yet",
     "mgg/order-return-down-left-to-right",
@@ -140,4 +152,6 @@ "mgg/order-return-down-left-to-up",
     "mgg/other-properties-off",
+    "mgg/other-residential-buildings",
     "mgg/partial-wall",
     "mgg/payment-settings",
+    "mgg/pec-sent-to-the-not-pec-recipient",
     "mgg/places-green",
@@ -156,2 +170,3 @@ "mgg/places-green-doc",
     "mgg/residency-permit",
+    "mgg/roles-permission",
     "mgg/rubber-stamp",
@@ -161,2 +176,3 @@ "mgg/rurale",
     "mgg/send-progress",
+    "mgg/sending-error",
     "mgg/settings-attachment",
@@ -171,2 +187,3 @@ "mgg/sign-shop",
     "mgg/stuck-codes",
+    "mgg/subtractive-permission",
     "mgg/tea-light",
@@ -188,2 +205,3 @@ "mgg/terminal",
     "mgg/trending-down",
+    "mgg/tribute",
     "mgg/tributes",
@@ -195,2 +213,3 @@ "mgg/urban-city",
     "mgg/user-location-off",
+    "mgg/user-signed-out",
     "mgg/view-chart-gantt",
@@ -197,0 +216,0 @@ "mgg/view-side-by-side",

src/fixtures/iconsauce.json

@@ -20,2 +20,3 @@ [
     "mgg/area-weather",
+    "mgg/bill",
     "mgg/box-multiple",
@@ -26,2 +27,3 @@ "mgg/breadcrumb",
     "mgg/calendar-schedule",
+    "mgg/cancelled-sheet",
     "mgg/car-license",
@@ -33,3 +35,5 @@ "mgg/card-stamping",
     "mgg/city-bin",
+    "mgg/classic-permission",
     "mgg/copy-paste",
+    "mgg/d-instrumental-buildings",
     "mgg/data-analytics-alt",
@@ -45,2 +49,3 @@ "mgg/data-analytics-search",
     "mgg/dataset",
+    "mgg/delivered-to-the-recipient",
     "mgg/document-magic",
@@ -74,5 +79,9 @@ "mgg/document-rename",
     "mgg/fit-vertical",
+    "mgg/forwarded-with-a-single-sending",
     "mgg/fullscreen-on-alt",
     "mgg/google-check-small",
     "mgg/google-place-item",
+    "mgg/group-assigned-automatically-system",
+    "mgg/group-ceased",
+    "mgg/group-inherited",
     "mgg/heart-outline",
@@ -88,2 +97,3 @@ "mgg/heart",
     "mgg/input-calendar-time",
+    "mgg/instrumental-buildings",
     "mgg/isbn",
@@ -110,2 +120,4 @@ "mgg/judge-hammer",
     "mgg/national-document",
+    "mgg/not-instrumental-d-buildings",
+    "mgg/not-sent-yet",
     "mgg/order-return-down-left-to-right",
@@ -129,4 +141,6 @@ "mgg/order-return-down-left-to-up",
     "mgg/other-properties",
+    "mgg/other-residential-buildings",
     "mgg/partial-wall",
     "mgg/payment-settings",
+    "mgg/pec-sent-to-the-not-pec-recipient",
     "mgg/places-green-doc",
@@ -145,2 +159,3 @@ "mgg/places-green-history",
     "mgg/residency-permit",
+    "mgg/roles-permission",
     "mgg/rubber-stamp",
@@ -150,2 +165,3 @@ "mgg/rurale",
     "mgg/send-progress",
+    "mgg/sending-error",
     "mgg/settings-attachment",
@@ -160,2 +176,3 @@ "mgg/sign-shop",
     "mgg/stuck-codes",
+    "mgg/subtractive-permission",
     "mgg/tea-light",
@@ -177,2 +194,3 @@ "mgg/terminal",
     "mgg/trending-down",
+    "mgg/tribute",
     "mgg/tributes",
@@ -184,2 +202,3 @@ "mgg/urban-city",
     "mgg/user-location",
+    "mgg/user-signed-out",
     "mgg/view-chart-gantt",
@@ -186,0 +205,0 @@ "mgg/view-side-by-side",

src/type/button.ts

@@ -7,2 +7,6 @@ export type ButtonType =
 
+export type ButtonTargetType =
+  |'self'
+  |'blank'
+
 export type ButtonSizeType =
@@ -9,0 +13,0 @@ | 'sm'

src/type/variant.ts

@@ -60,2 +60,11 @@ export type ThemeStatusVariantType =
 
+export type ToneActionVariantType =
+  | 'primary' // background strong
+  | 'secondary' // background weak
+  | 'tertiary' // no background, no border
+  | 'strong' // background strong
+  | 'weak' // background weak
+  | 'ghost' // bordered
+  | 'quiet' // no background, no border
+
 export type ToneVariantType =
@@ -62,0 +71,0 @@ | 'strong' // background strong

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

@@ -1,1 +0,1 @@
-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)));
+import{p as e,b as r}from"./p-01f1a9e1.js";export{s as setNonce}from"./p-01f1a9e1.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((e=>r([["p-1ce2707d",[[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

Total package byte prevSize

764391

increased by1.79%

Number of package files

147

increased by2.08%

Lines of code

10072

increased by2.45%

Number of lines in readme file

32

increased by28%

Dependency changes

• + Added@maggioli-design-system/mds-badge@3.1.0(transitive)

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

• + Added@maggioli-design-system/mds-text@4.4.3(transitive)

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

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

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

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

• - Removed@maggioli-design-system/design-tokens@12.0.1(transitive)

• - Removed@maggioli-design-system/mds-badge@2.9.4(transitive)

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

• - Removed@maggioli-design-system/mds-text@3.7.04.3.6(transitive)

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

• - Removed@stencil/core@4.10.04.9.1(transitive)

• - Removedclsx@1.2.1(transitive)

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

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