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

Comparing version 2.1.1 to 2.2.0

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

@@ -9,4 +9,45 @@ 'use strict';
 
-const mdsStepperBarItemCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--color:rgb(var(--tone-neutral-03));--duaration:250ms;--icon-background-checked:rgb(var(--status-success-05));--icon-background-current:rgb(var(--brand-maggioli-04));--icon-background:var(--progress-background, rgb(var(--tone-neutral-08)));--icon-color-checked:rgb(var(--status-success-10));--icon-color-current:rgb(var(--tone-neutral));--icon-color:rgb(var(--tone-neutral-04));--icon-ring-color:var(--icon-background-current);--icon-ring-separator-color:rgb(var(--tone-neutral));--icon-ring-separator-size:0.375rem;--icon-ring-size:0.25rem;--min-width:180px;--progress-background:rgb(var(--tone-neutral-08));--progress-color:rgb(var(--status-success-04));--progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;cursor:pointer;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;min-width:var(--min-width);padding-left:calc(var(--icon-ring-size) + var(--icon-ring-separator-size));padding-top:calc(var(--icon-ring-size) + var(--icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--icon-background:var(--icon-background-checked);--icon-color:var(--icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--icon-background:var(--icon-background-current);--icon-color:var(--icon-color-current);-webkit-box-shadow:0 0 0 var(--icon-ring-size) var(--icon-ring-color), 0 0 0 var(--icon-ring-separator-size) var(--icon-ring-separator-color);box-shadow:0 0 0 var(--icon-ring-size) var(--icon-ring-color), 0 0 0 var(--icon-ring-separator-size) var(--icon-ring-separator-color);-webkit-transition-delay:calc(var(--duaration) / 2);transition-delay:calc(var(--duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--icon-ring-color:var(--icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--icon-background);-webkit-box-shadow:0 0 0 0 var(--icon-ring-color), 0 0 0 0 var(--icon-ring-separator-color);box-shadow:0 0 0 0 var(--icon-ring-color), 0 0 0 0 var(--icon-ring-separator-color);fill:var(--icon-color);-webkit-transition-duration:var(--duaration);transition-duration:var(--duaration)}.progress{--background:var(--progress-background);--color:var(--progress-color);--thickness:var(--progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--icon-ring-size) + var(--icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--color);-webkit-transition-duration:var(--duaration);transition-duration:var(--duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+class KeyboardManager {
+  constructor() {
+    this.elements = [];
+    this.handleClickBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+        event.target.click();
+      }
+    };
+    this.handleEscapeBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Escape' && this.escapeCallback) {
+        this.escapeCallback();
+      }
+    };
+    this.addElement = (el, name = 'element') => {
+      this.elements[name] = el;
+    };
+    this.attachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.detachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.attachEscapeBehavior = (callBack) => {
+      this.escapeCallback = callBack;
+      if (typeof window !== undefined) {
+        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+    this.detachEscapeBehavior = () => {
+      this.escapeCallback = null;
+      if (typeof window !== undefined) {
+        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+  }
+}
 
+const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-checked:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-checked:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-checked);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+
 const MdsStepperBarItem = class {
@@ -16,6 +57,15 @@ constructor(hostRef) {
     this.currentEvent = index.createEvent(this, "currentEvent", 7);
+    this.km = new KeyboardManager();
+    this.componentDidLoad = () => {
+      const header = this.host.shadowRoot.querySelector('header');
+      this.km.addElement(header);
+      this.km.attachClickBehavior();
+    };
+    this.disconnectedCallback = () => {
+      this.km.detachClickBehavior();
+    };
     this.toggle = () => {
       this.isCurrent = true;
       if (this.isCurrent) {
-        this.currentEvent.emit(this.element.id);
+        this.currentEvent.emit(this.host.id);
       }
@@ -47,3 +97,3 @@ };
     this.isChecked = this.checked;
-    this.index = [...Array.from(this.element.parentElement.childNodes)].indexOf(this.element);
+    this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
   }
@@ -57,5 +107,5 @@ checkChecked(newValue) {
   render() {
-    return (index.h(index.Host, { onClick: this.toggle }, index.h("header", { class: "header" }, index.h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), index.h("div", { class: "infos" }, this.step && index.h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && index.h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && index.h("div", null, this.showBadge()))));
+    return (index.h(index.Host, null, index.h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, index.h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), index.h("div", { class: "infos", onClick: this.toggle }, this.step && index.h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && index.h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && index.h("div", null, this.showBadge()))));
   }
-  get element() { return index.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
@@ -62,0 +112,0 @@ "checked": ["checkChecked"],

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

@@ -0,9 +1,19 @@
+import clsx from 'clsx';
 import { Host, h } from '@stencil/core';
-import clsx from 'clsx';
+import { KeyboardManager } from '@common/keyboard-manager';
 export class MdsStepperBarItem {
   constructor() {
+    this.km = new KeyboardManager();
+    this.componentDidLoad = () => {
+      const header = this.host.shadowRoot.querySelector('header');
+      this.km.addElement(header);
+      this.km.attachClickBehavior();
+    };
+    this.disconnectedCallback = () => {
+      this.km.detachClickBehavior();
+    };
     this.toggle = () => {
       this.isCurrent = true;
       if (this.isCurrent) {
-        this.currentEvent.emit(this.element.id);
+        this.currentEvent.emit(this.host.id);
       }
@@ -35,3 +45,3 @@ };
     this.isChecked = this.checked;
-    this.index = [...Array.from(this.element.parentElement.childNodes)].indexOf(this.element);
+    this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
   }
@@ -45,3 +55,3 @@ checkChecked(newValue) {
   render() {
-    return (h(Host, { onClick: this.toggle }, h("header", { class: "header" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos" }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
+    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
   }
@@ -191,3 +201,3 @@ static get is() { return "mds-stepper-bar-item"; }
               "location": "import",
-              "path": "../../types/typography"
+              "path": "@type/typography"
             }
@@ -233,3 +243,3 @@ }
   }
-  static get elementRef() { return "element"; }
+  static get elementRef() { return "host"; }
   static get watchers() {
@@ -236,0 +246,0 @@ return [{

dist/collection/dictionary/typography.js

@@ -24,2 +24,6 @@ const typographyDictionary = [
 ];
+const typographyReadingVariationsDictionary = [
+  'info',
+  'read',
+];
 const typographyMonoDictionary = [
@@ -60,2 +64,2 @@ 'snippet',
 ];
-export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyInfoDictionary, typographyReadingVariationsDictionary, typographyMonoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };

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

@@ -5,4 +5,45 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const mdsStepperBarItemCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--color:rgb(var(--tone-neutral-03));--duaration:250ms;--icon-background-checked:rgb(var(--status-success-05));--icon-background-current:rgb(var(--brand-maggioli-04));--icon-background:var(--progress-background, rgb(var(--tone-neutral-08)));--icon-color-checked:rgb(var(--status-success-10));--icon-color-current:rgb(var(--tone-neutral));--icon-color:rgb(var(--tone-neutral-04));--icon-ring-color:var(--icon-background-current);--icon-ring-separator-color:rgb(var(--tone-neutral));--icon-ring-separator-size:0.375rem;--icon-ring-size:0.25rem;--min-width:180px;--progress-background:rgb(var(--tone-neutral-08));--progress-color:rgb(var(--status-success-04));--progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;cursor:pointer;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;min-width:var(--min-width);padding-left:calc(var(--icon-ring-size) + var(--icon-ring-separator-size));padding-top:calc(var(--icon-ring-size) + var(--icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--icon-background:var(--icon-background-checked);--icon-color:var(--icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--icon-background:var(--icon-background-current);--icon-color:var(--icon-color-current);-webkit-box-shadow:0 0 0 var(--icon-ring-size) var(--icon-ring-color), 0 0 0 var(--icon-ring-separator-size) var(--icon-ring-separator-color);box-shadow:0 0 0 var(--icon-ring-size) var(--icon-ring-color), 0 0 0 var(--icon-ring-separator-size) var(--icon-ring-separator-color);-webkit-transition-delay:calc(var(--duaration) / 2);transition-delay:calc(var(--duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--icon-ring-color:var(--icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--icon-background);-webkit-box-shadow:0 0 0 0 var(--icon-ring-color), 0 0 0 0 var(--icon-ring-separator-color);box-shadow:0 0 0 0 var(--icon-ring-color), 0 0 0 0 var(--icon-ring-separator-color);fill:var(--icon-color);-webkit-transition-duration:var(--duaration);transition-duration:var(--duaration)}.progress{--background:var(--progress-background);--color:var(--progress-color);--thickness:var(--progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--icon-ring-size) + var(--icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--color);-webkit-transition-duration:var(--duaration);transition-duration:var(--duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+class KeyboardManager {
+  constructor() {
+    this.elements = [];
+    this.handleClickBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+        event.target.click();
+      }
+    };
+    this.handleEscapeBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Escape' && this.escapeCallback) {
+        this.escapeCallback();
+      }
+    };
+    this.addElement = (el, name = 'element') => {
+      this.elements[name] = el;
+    };
+    this.attachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.detachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.attachEscapeBehavior = (callBack) => {
+      this.escapeCallback = callBack;
+      if (typeof window !== undefined) {
+        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+    this.detachEscapeBehavior = () => {
+      this.escapeCallback = null;
+      if (typeof window !== undefined) {
+        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+  }
+}
 
+const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-checked:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-checked:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-checked);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+
 const MdsStepperBarItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -14,6 +55,15 @@ constructor() {
     this.currentEvent = createEvent(this, "currentEvent", 7);
+    this.km = new KeyboardManager();
+    this.componentDidLoad = () => {
+      const header = this.host.shadowRoot.querySelector('header');
+      this.km.addElement(header);
+      this.km.attachClickBehavior();
+    };
+    this.disconnectedCallback = () => {
+      this.km.detachClickBehavior();
+    };
     this.toggle = () => {
       this.isCurrent = true;
       if (this.isCurrent) {
-        this.currentEvent.emit(this.element.id);
+        this.currentEvent.emit(this.host.id);
       }
@@ -45,3 +95,3 @@ };
     this.isChecked = this.checked;
-    this.index = [...Array.from(this.element.parentElement.childNodes)].indexOf(this.element);
+    this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
   }
@@ -55,5 +105,5 @@ checkChecked(newValue) {
   render() {
-    return (h(Host, { onClick: this.toggle }, h("header", { class: "header" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos" }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
+    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
   }
-  get element() { return this; }
+  get host() { return this; }
   static get watchers() { return {
@@ -60,0 +110,0 @@ "checked": ["checkChecked"],

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

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

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

@@ -5,4 +5,45 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7e2acc7a.js';
 
-const mdsStepperBarItemCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--color:rgb(var(--tone-neutral-03));--duaration:250ms;--icon-background-checked:rgb(var(--status-success-05));--icon-background-current:rgb(var(--brand-maggioli-04));--icon-background:var(--progress-background, rgb(var(--tone-neutral-08)));--icon-color-checked:rgb(var(--status-success-10));--icon-color-current:rgb(var(--tone-neutral));--icon-color:rgb(var(--tone-neutral-04));--icon-ring-color:var(--icon-background-current);--icon-ring-separator-color:rgb(var(--tone-neutral));--icon-ring-separator-size:0.375rem;--icon-ring-size:0.25rem;--min-width:180px;--progress-background:rgb(var(--tone-neutral-08));--progress-color:rgb(var(--status-success-04));--progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;cursor:pointer;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;min-width:var(--min-width);padding-left:calc(var(--icon-ring-size) + var(--icon-ring-separator-size));padding-top:calc(var(--icon-ring-size) + var(--icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--icon-background:var(--icon-background-checked);--icon-color:var(--icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--icon-background:var(--icon-background-current);--icon-color:var(--icon-color-current);-webkit-box-shadow:0 0 0 var(--icon-ring-size) var(--icon-ring-color), 0 0 0 var(--icon-ring-separator-size) var(--icon-ring-separator-color);box-shadow:0 0 0 var(--icon-ring-size) var(--icon-ring-color), 0 0 0 var(--icon-ring-separator-size) var(--icon-ring-separator-color);-webkit-transition-delay:calc(var(--duaration) / 2);transition-delay:calc(var(--duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--icon-ring-color:var(--icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--icon-background);-webkit-box-shadow:0 0 0 0 var(--icon-ring-color), 0 0 0 0 var(--icon-ring-separator-color);box-shadow:0 0 0 0 var(--icon-ring-color), 0 0 0 0 var(--icon-ring-separator-color);fill:var(--icon-color);-webkit-transition-duration:var(--duaration);transition-duration:var(--duaration)}.progress{--background:var(--progress-background);--color:var(--progress-color);--thickness:var(--progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--icon-ring-size) + var(--icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--color);-webkit-transition-duration:var(--duaration);transition-duration:var(--duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+class KeyboardManager {
+  constructor() {
+    this.elements = [];
+    this.handleClickBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+        event.target.click();
+      }
+    };
+    this.handleEscapeBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Escape' && this.escapeCallback) {
+        this.escapeCallback();
+      }
+    };
+    this.addElement = (el, name = 'element') => {
+      this.elements[name] = el;
+    };
+    this.attachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.detachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.attachEscapeBehavior = (callBack) => {
+      this.escapeCallback = callBack;
+      if (typeof window !== undefined) {
+        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+    this.detachEscapeBehavior = () => {
+      this.escapeCallback = null;
+      if (typeof window !== undefined) {
+        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+  }
+}
 
+const mdsStepperBarItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03));--mds-stepper-bar-item-duaration:250ms;--mds-stepper-bar-item-icon-background-checked:rgb(var(--status-success-05));--mds-stepper-bar-item-icon-background-current:rgb(var(--brand-maggioli-04));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));--mds-stepper-bar-item-icon-color-checked:rgb(var(--status-success-10));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral));--mds-stepper-bar-item-icon-ring-separator-size:0.375rem;--mds-stepper-bar-item-icon-ring-size:0.25rem;--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04));--mds-stepper-bar-item-progress-thickness:0.5rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0px;flex-basis:0px;scroll-snap-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;gap:1rem;-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset;min-width:var(--mds-stepper-bar-item-min-width);padding-left:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));padding-top:calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size))}:host(:last-of-type){-ms-flex-preferred-size:0.25rem;flex-basis:0.25rem}:host(:last-of-type) .progress{display:none}:host([ checked ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-checked);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-checked);-webkit-transition-delay:0ms;transition-delay:0ms}:host([ current ]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current);--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current);-webkit-box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2);transition-delay:calc(var(--mds-stepper-bar-item-duaration) / 2)}:host(:not([ checked ])) .icon,:host(:not([ current ])) .icon{--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background)}.header{display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:0.375rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-transition-property:outline, outline-offset;transition-property:outline, outline-offset}.icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;border-radius:9999px;padding:0.5rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-stepper-bar-item-icon-background);-webkit-box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);box-shadow:0 0 0 0 var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-color);fill:var(--mds-stepper-bar-item-icon-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background);--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color);--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness);margin-left:-0.25rem;-ms-flex-positive:1;flex-grow:1;margin-right:calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem)}.infos{display:grid;cursor:pointer;gap:0.25rem;padding-left:0.25rem}.text{pointer-events:none;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;color:var(--mds-stepper-bar-item-color);-webkit-transition-duration:var(--mds-stepper-bar-item-duaration);transition-duration:var(--mds-stepper-bar-item-duaration)}.badge{pointer-events:none;border-radius:9999px}.step{pointer-events:none;border-radius:9999px;--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}";
+
 const MdsStepperBarItem = class {
@@ -12,6 +53,15 @@ constructor(hostRef) {
     this.currentEvent = createEvent(this, "currentEvent", 7);
+    this.km = new KeyboardManager();
+    this.componentDidLoad = () => {
+      const header = this.host.shadowRoot.querySelector('header');
+      this.km.addElement(header);
+      this.km.attachClickBehavior();
+    };
+    this.disconnectedCallback = () => {
+      this.km.detachClickBehavior();
+    };
     this.toggle = () => {
       this.isCurrent = true;
       if (this.isCurrent) {
-        this.currentEvent.emit(this.element.id);
+        this.currentEvent.emit(this.host.id);
       }
@@ -43,3 +93,3 @@ };
     this.isChecked = this.checked;
-    this.index = [...Array.from(this.element.parentElement.childNodes)].indexOf(this.element);
+    this.index = [...Array.from(this.host.parentElement.childNodes)].indexOf(this.host);
   }
@@ -53,5 +103,5 @@ checkChecked(newValue) {
   render() {
-    return (h(Host, { onClick: this.toggle }, h("header", { class: "header" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos" }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
+    return (h(Host, null, h("header", { class: "header focusable", onClick: this.toggle, tabindex: "0" }, h("mds-icon", { class: "icon", name: clsx(this.isChecked && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { class: "progress", progress: this.isChecked ? 1 : 0 })), h("div", { class: "infos", onClick: this.toggle }, this.step && h("mds-text", { class: "step", typography: "option" }, "step ", this.index + 1), this.text && h("mds-text", { class: "text", typography: this.typography }, this.text), this.badge && h("div", null, this.showBadge()))));
   }
-  get element() { return getElement(this); }
+  get host() { return getElement(this); }
   static get watchers() { return {
@@ -58,0 +108,0 @@ "checked": ["checkChecked"],

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

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

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

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

dist/stats.json

 {
-  "timestamp": "2023-02-20T10:28:02",
+  "timestamp": "2023-03-02T10:03:06",
   "compiler": {
@@ -12,9 +12,10 @@ "name": "node",
     "entries": 1,
-    "bundles": 64,
+    "bundles": 65,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 23,
+        "files": 24,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
+          "./dist/collection/common/keyboard-manager.js",
           "./dist/collection/components/mds-stepper-bar-item/mds-stepper-bar-item.js",
@@ -78,3 +79,3 @@ "./dist/collection/components/mds-stepper-bar-item/test/mds-stepper-bar-item.stories.js",
           "./dist/mds-stepper-bar-item/mds-stepper-bar-item.js",
-          "./dist/mds-stepper-bar-item/p-34c5ad5b.system.entry.js",
+          "./dist/mds-stepper-bar-item/p-1c20a67c.entry.js",
           "./dist/mds-stepper-bar-item/p-50ea2036.system.js",
@@ -84,7 +85,7 @@ "./dist/mds-stepper-bar-item/p-521f2489.system.js",
           "./dist/mds-stepper-bar-item/p-60ab95ad.system.js",
-          "./dist/mds-stepper-bar-item/p-daac067c.entry.js",
+          "./dist/mds-stepper-bar-item/p-b9ea21d2.system.entry.js",
           "./www/build/index.esm.js",
           "./www/build/mds-stepper-bar-item.esm.js",
           "./www/build/mds-stepper-bar-item.js",
-          "./www/build/p-34c5ad5b.system.entry.js",
+          "./www/build/p-1c20a67c.entry.js",
           "./www/build/p-50ea2036.system.js",
@@ -94,3 +95,3 @@ "./www/build/p-521f2489.system.js",
           "./www/build/p-60ab95ad.system.js",
-          "./www/build/p-daac067c.entry.js"
+          "./www/build/p-b9ea21d2.system.entry.js"
         ]
@@ -128,8 +129,8 @@ },
         ],
-        "bundleId": "p-daac067c",
-        "fileName": "p-daac067c.entry.js",
+        "bundleId": "p-1c20a67c",
+        "fileName": "p-1c20a67c.entry.js",
         "imports": [
           "p-5233da01.js"
         ],
-        "originalByteSize": 7910
+        "originalByteSize": 12388
       }
@@ -148,3 +149,3 @@ ],
         ],
-        "originalByteSize": 7914
+        "originalByteSize": 12392
       }
@@ -163,3 +164,3 @@ ],
         ],
-        "originalByteSize": 7914
+        "originalByteSize": 12392
       }
@@ -173,8 +174,8 @@ ],
         ],
-        "bundleId": "p-34c5ad5b.system",
-        "fileName": "p-34c5ad5b.system.entry.js",
+        "bundleId": "p-b9ea21d2.system",
+        "fileName": "p-b9ea21d2.system.entry.js",
         "imports": [
           "p-521f2489.system.js"
         ],
-        "originalByteSize": 8478
+        "originalByteSize": 13250
       }
@@ -193,3 +194,3 @@ ],
         ],
-        "originalByteSize": 8015
+        "originalByteSize": 12493
       }
@@ -203,3 +204,3 @@ ]
       "source": "./src/components/mds-stepper-bar-item/mds-stepper-bar-item.tsx",
-      "elementRef": "element",
+      "elementRef": "host",
       "componentClassName": "MdsStepperBarItem",
@@ -397,3 +398,3 @@ "assetsDirs": [],
                 "location": "import",
-                "path": "../../types/typography"
+                "path": "@type/typography"
               }
@@ -431,3 +432,3 @@ }
           "componentClassName": "MdsStepperBarItem",
-          "elementRef": "element",
+          "elementRef": "host",
           "encapsulation": "shadow",
@@ -585,3 +586,3 @@ "shadowDelegatesFocus": false,
                     "location": "import",
-                    "path": "../../types/typography"
+                    "path": "@type/typography"
                   }
@@ -661,3 +662,3 @@ }
             {
-              "name": "--color",
+              "name": "--mds-stepper-bar-item-color",
               "docs": "Sets the color of the text",
@@ -667,3 +668,3 @@ "annotation": "prop"
             {
-              "name": "--duaration",
+              "name": "--mds-stepper-bar-item-duaration",
               "docs": "Sets the duration of the animation",
@@ -673,3 +674,3 @@ "annotation": "prop"
             {
-              "name": "--icon-background-checked",
+              "name": "--mds-stepper-bar-item-icon-background-checked",
               "docs": "Sets the background-color of the icon when the component is checked",
@@ -679,3 +680,3 @@ "annotation": "prop"
             {
-              "name": "--icon-background-current",
+              "name": "--mds-stepper-bar-item-icon-background-current",
               "docs": "Sets the background-color of the icon when the component is current",
@@ -685,3 +686,3 @@ "annotation": "prop"
             {
-              "name": "--icon-background",
+              "name": "--mds-stepper-bar-item-icon-background",
               "docs": "Sets the background-color of the icon",
@@ -691,3 +692,3 @@ "annotation": "prop"
             {
-              "name": "--icon-color-checked",
+              "name": "--mds-stepper-bar-item-icon-color-checked",
               "docs": "Sets the color of the icon when the component is checked",
@@ -697,3 +698,3 @@ "annotation": "prop"
             {
-              "name": "--icon-color-current",
+              "name": "--mds-stepper-bar-item-icon-color-current",
               "docs": "Sets the color of the icon when the component is current",
@@ -703,3 +704,3 @@ "annotation": "prop"
             {
-              "name": "--icon-color",
+              "name": "--mds-stepper-bar-item-icon-color",
               "docs": "Sets the color of the icon",
@@ -709,3 +710,3 @@ "annotation": "prop"
             {
-              "name": "--icon-ring-size",
+              "name": "--mds-stepper-bar-item-icon-ring-size",
               "docs": "Sets the size of the icon circle when the component is current",
@@ -715,3 +716,3 @@ "annotation": "prop"
             {
-              "name": "--min-width",
+              "name": "--mds-stepper-bar-item-min-width",
               "docs": "Sets the minimum width of the component",
@@ -721,3 +722,3 @@ "annotation": "prop"
             {
-              "name": "--progress-background",
+              "name": "--mds-stepper-bar-item-progress-background",
               "docs": "Sets the background color of the progress bar",
@@ -727,3 +728,3 @@ "annotation": "prop"
             {
-              "name": "--progress-color",
+              "name": "--mds-stepper-bar-item-progress-color",
               "docs": "Sets the color of the progress bar",
@@ -733,3 +734,3 @@ "annotation": "prop"
             {
-              "name": "--progress-thickness",
+              "name": "--mds-stepper-bar-item-progress-thickness",
               "docs": "Sets the thickness of the progress bar",
@@ -798,2 +799,3 @@ "annotation": "prop"
             "onClick",
+            "tabindex",
             "name",
@@ -834,2 +836,3 @@ "progress"
     "./src/common/aria.ts": [],
+    "./src/common/keyboard-manager.ts": [],
     "./src/components/mds-stepper-bar-item/mds-stepper-bar-item.tsx": [],
@@ -836,0 +839,0 @@ "./src/components/mds-stepper-bar-item/test/mds-stepper-bar-item.stories.tsx": [],

dist/types/components.d.ts

@@ -8,3 +8,3 @@ /* eslint-disable */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { TypographyType } from "./types/typography";
+import { TypographyType } from "@type/typography";
 export namespace Components {
@@ -11,0 +11,0 @@ interface MdsStepperBarItem {

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

 import { EventEmitter } from '../../stencil-public-runtime';
-import { TypographyType } from '../../types/typography';
+import { TypographyType } from '@type/typography';
 export declare class MdsStepperBarItem {
-  private element;
+  private host;
+  private km;
   isChecked: boolean;
@@ -41,2 +42,4 @@ isCurrent: boolean;
   componentWillLoad(): void;
+  componentDidLoad: () => void;
+  disconnectedCallback: () => void;
   checkChecked(newValue: boolean): void;
@@ -43,0 +46,0 @@ checkCurrent(newValue: boolean): void;

dist/types/dictionary/typography.d.ts

 declare const typographyDictionary: string[];
 declare const typographyVariationsDictionary: string[];
+declare const typographyReadingVariationsDictionary: string[];
 declare const typographyMonoDictionary: string[];
@@ -9,2 +10,2 @@ declare const typographyTitleDictionary: string[];
 declare const typographyTooltipDictionary: string[];
-export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyInfoDictionary, typographyReadingVariationsDictionary, typographyMonoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };

dist/types/types/typography.d.ts

 export type TypographyType = 'action' | 'caption' | 'snippet' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
 export type TypographyVariants = 'title' | 'info' | 'read' | 'code';
+export type TypographyReadingVariants = 'info' | 'read';
 export type TypographyTitleType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -4,0 +5,0 @@ export type TypographyInfoType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';

package.json

 {
   "name": "@maggioli-design-system/mds-stepper-bar-item",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "mds-stepper-bar-item is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

readme.md

@@ -31,17 +31,17 @@ # mds-stepper-bar-item
 
-| Name                        | Description                                                         |
-| --------------------------- | ------------------------------------------------------------------- |
-| `--color`                   | Sets the color of the text                                          |
-| `--duaration`               | Sets the duration of the animation                                  |
-| `--icon-background`         | Sets the background-color of the icon                               |
-| `--icon-background-checked` | Sets the background-color of the icon when the component is checked |
-| `--icon-background-current` | Sets the background-color of the icon when the component is current |
-| `--icon-color`              | Sets the color of the icon                                          |
-| `--icon-color-checked`      | Sets the color of the icon when the component is checked            |
-| `--icon-color-current`      | Sets the color of the icon when the component is current            |
-| `--icon-ring-size`          | Sets the size of the icon circle when the component is current      |
-| `--min-width`               | Sets the minimum width of the component                             |
-| `--progress-background`     | Sets the background color of the progress bar                       |
-| `--progress-color`          | Sets the color of the progress bar                                  |
-| `--progress-thickness`      | Sets the thickness of the progress bar                              |
+| Name                                             | Description                                                         |
+| ------------------------------------------------ | ------------------------------------------------------------------- |
+| `--mds-stepper-bar-item-color`                   | Sets the color of the text                                          |
+| `--mds-stepper-bar-item-duaration`               | Sets the duration of the animation                                  |
+| `--mds-stepper-bar-item-icon-background`         | Sets the background-color of the icon                               |
+| `--mds-stepper-bar-item-icon-background-checked` | Sets the background-color of the icon when the component is checked |
+| `--mds-stepper-bar-item-icon-background-current` | Sets the background-color of the icon when the component is current |
+| `--mds-stepper-bar-item-icon-color`              | Sets the color of the icon                                          |
+| `--mds-stepper-bar-item-icon-color-checked`      | Sets the color of the icon when the component is checked            |
+| `--mds-stepper-bar-item-icon-color-current`      | Sets the color of the icon when the component is current            |
+| `--mds-stepper-bar-item-icon-ring-size`          | Sets the size of the icon circle when the component is current      |
+| `--mds-stepper-bar-item-min-width`               | Sets the minimum width of the component                             |
+| `--mds-stepper-bar-item-progress-background`     | Sets the background color of the progress bar                       |
+| `--mds-stepper-bar-item-progress-color`          | Sets the color of the progress bar                                  |
+| `--mds-stepper-bar-item-progress-thickness`      | Sets the thickness of the progress bar                              |
 
@@ -48,0 +48,0 @@

src/components.d.ts

@@ -8,3 +8,3 @@ /* eslint-disable */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { TypographyType } from "./types/typography";
+import { TypographyType } from "@type/typography";
 export namespace Components {
@@ -11,0 +11,0 @@ interface MdsStepperBarItem {

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

@@ -31,17 +31,17 @@ # mds-stepper-bar-item
 
-| Name                        | Description                                                         |
-| --------------------------- | ------------------------------------------------------------------- |
-| `--color`                   | Sets the color of the text                                          |
-| `--duaration`               | Sets the duration of the animation                                  |
-| `--icon-background`         | Sets the background-color of the icon                               |
-| `--icon-background-checked` | Sets the background-color of the icon when the component is checked |
-| `--icon-background-current` | Sets the background-color of the icon when the component is current |
-| `--icon-color`              | Sets the color of the icon                                          |
-| `--icon-color-checked`      | Sets the color of the icon when the component is checked            |
-| `--icon-color-current`      | Sets the color of the icon when the component is current            |
-| `--icon-ring-size`          | Sets the size of the icon circle when the component is current      |
-| `--min-width`               | Sets the minimum width of the component                             |
-| `--progress-background`     | Sets the background color of the progress bar                       |
-| `--progress-color`          | Sets the color of the progress bar                                  |
-| `--progress-thickness`      | Sets the thickness of the progress bar                              |
+| Name                                             | Description                                                         |
+| ------------------------------------------------ | ------------------------------------------------------------------- |
+| `--mds-stepper-bar-item-color`                   | Sets the color of the text                                          |
+| `--mds-stepper-bar-item-duaration`               | Sets the duration of the animation                                  |
+| `--mds-stepper-bar-item-icon-background`         | Sets the background-color of the icon                               |
+| `--mds-stepper-bar-item-icon-background-checked` | Sets the background-color of the icon when the component is checked |
+| `--mds-stepper-bar-item-icon-background-current` | Sets the background-color of the icon when the component is current |
+| `--mds-stepper-bar-item-icon-color`              | Sets the color of the icon                                          |
+| `--mds-stepper-bar-item-icon-color-checked`      | Sets the color of the icon when the component is checked            |
+| `--mds-stepper-bar-item-icon-color-current`      | Sets the color of the icon when the component is current            |
+| `--mds-stepper-bar-item-icon-ring-size`          | Sets the size of the icon circle when the component is current      |
+| `--mds-stepper-bar-item-min-width`               | Sets the minimum width of the component                             |
+| `--mds-stepper-bar-item-progress-background`     | Sets the background color of the progress bar                       |
+| `--mds-stepper-bar-item-progress-color`          | Sets the color of the progress bar                                  |
+| `--mds-stepper-bar-item-progress-thickness`      | Sets the thickness of the progress bar                              |
 
@@ -48,0 +48,0 @@

src/dictionary/typography.ts

@@ -26,2 +26,7 @@ const typographyDictionary = [
 
+const typographyReadingVariationsDictionary = [
+  'info',
+  'read',
+]
+
 const typographyMonoDictionary = [
@@ -70,9 +75,10 @@ 'snippet',
   typographyDictionary,
-  typographyVariationsDictionary,
+  typographyInfoDictionary,
+  typographyReadingVariationsDictionary,
   typographyMonoDictionary,
-  typographyTitleDictionary,
-  typographyInfoDictionary,
   typographyReadDictionary,
   typographySmallerDictionary,
+  typographyTitleDictionary,
   typographyTooltipDictionary,
+  typographyVariationsDictionary,
 }

src/fixtures/icons.json

@@ -205,2 +205,3 @@ [
     "mi/baseline/done",
+    "mi/baseline/downhill-skiing",
     "mi/baseline/eco",
@@ -207,0 +208,0 @@ "mi/baseline/email",

src/types/typography.ts

@@ -24,2 +24,6 @@ export type TypographyType =
 
+export type TypographyReadingVariants =
+  | 'info'
+  | 'read'
+
 export type TypographyTitleType =
@@ -26,0 +30,0 @@ | 'action'

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

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

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

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

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

842590

increased by5.38%

Number of package files

138

increased by2.22%

Lines of code

10606

increased by3.35%

No dependency changes