@maggioli-design-system/mds-accordion-timer-item 3.1.0 → 3.2.0

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6fcb2864.js');
 
 /*
- Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

package/dist/cjs/mds-accordion-timer-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6fcb2864.js');
 
-const mdsAccordionTimerItemCss = "@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}.contents{display:contents}.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-accordion-timer-item-progress-bar-color:rgb(var(--tone-neutral-03));--mds-accordion-timer-item-progress-bar-background:rgb(var(--tone-neutral-08));--mds-accordion-timer-item-progress-bar-thickness:0.25rem;position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-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:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)))}.row{display:-ms-flexbox;display:flex;gap:1rem}.accordion{display:grid}.progress-bar{-ms-flex-negative:0;flex-shrink:0;--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color);--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background);--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness)}.action{cursor:pointer;border-radius:0.75rem;border-style:none;background-color:transparent;padding:0px;text-align:left}:host([selected]) .action{cursor:auto}.contents{display:grid;height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-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:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)}:host([selected]) .contents{height:auto;padding-top:1rem;opacity:1}";
+const mdsAccordionTimerItemCss = "@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}.contents{display:contents}.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-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 500ms);position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-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:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)))}.row{display:-ms-flexbox;display:flex;gap:1rem}.accordion{display:grid}.progress-bar{-ms-flex-negative:0;flex-shrink:0;--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color);--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background);--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness)}.action{cursor:pointer;border-radius:0.75rem;border-style:none;background-color:transparent;padding:0px;text-align:left}:host([selected]) .action{cursor:auto}.contents{display:grid;min-height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);grid-template-rows:0fr;-webkit-transition-duration:var(--mds-accordion-timer-item-duration);transition-duration:var(--mds-accordion-timer-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}";
 
 const MdsAccordionTimerItem = class {
   constructor(hostRef) {
@@ -17,28 +17,31 @@ const MdsAccordionTimerItem = class {
      * to fire it again it need to be a different item
      */
     this.toggle = () => {
-      if (!this.selected) {
-        this.clickSelectEvent.emit({ selected: this.selected });
+      this.selected = !this.selected;
+      this.progress = 0;
+      if (this.selected) {
+        this.clickSelectEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.mouseEnter = () => {
       if (this.selected) {
-        this.selectedMouseEnterEvent.emit({ selected: this.selected });
+        this.selectedMouseEnterEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.mouseLeave = () => {
       if (this.selected) {
-        this.selectedMouseLeaveEvent.emit({ selected: this.selected });
+        this.selectedMouseLeaveEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.typography = 'h5';
-    this.selected = undefined;
+    this.selected = false;
     this.description = undefined;
     this.progress = 0;
     this.uuid = 0;
   }
   render() {
-    return (index.h(index.Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { class: "row" }, index.h("mds-progress", { class: "progress-bar", progress: Number(this.progress.toFixed(2)), direction: "vertical" }), index.h("div", { class: "accordion" }, index.h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { typography: this.typography }, this.description)), index.h("div", { class: "contents", id: "contents" }, index.h("slot", null))))));
+    var _a;
+    return (index.h(index.Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { class: "row" }, index.h("mds-progress", { class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical" }), index.h("div", { class: "accordion" }, index.h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { typography: this.typography }, this.description)), index.h("div", { class: "contents", id: "contents" }, index.h("div", { class: "contents-expander" }, index.h("slot", null)))))));
   }
 };
 MdsAccordionTimerItem.style = mdsAccordionTimerItemCss;

package/dist/cjs/mds-accordion-timer-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6fcb2864.js');
 
 /*
- Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-accordion-timer-item.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.2",
+    "version": "2.22.3",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

package/dist/collection/common/aria.js

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

package/dist/collection/common/keyboard-manager.js

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

package/dist/collection/common/unit.js

@@ -0,0 +1,10 @@
+const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
+  if (duration.includes('s')) {
+    return Number(duration.replace('s', '')) * 1000;
+  }
+  if (duration.includes('ms')) {
+    return Number(duration.replace('s', ''));
+  }
+  return defaultValue;
+};
+export { cssDurationToMilliseconds, };

package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.css

@@ -17,6 +17,7 @@
 .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);
   }
@@ -46,17 +47,19 @@
 }
 
 /**
-  * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected
-  * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected
-  * @prop --mds-accordion-timer-item-color: Sets the text color of the component
-  * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar
-  */
+* @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected
+* @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected
+* @prop --mds-accordion-timer-item-color: Sets the text color of the component
+* @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar
+* @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation
+*/
 
 :host {
 
-  --mds-accordion-timer-item-progress-bar-color: rgb(var(--tone-neutral-03));
-  --mds-accordion-timer-item-progress-bar-background: rgb(var(--tone-neutral-08));
-  --mds-accordion-timer-item-progress-bar-thickness: 0.25rem;
+  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));
+  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));
+  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);
+  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);
   position: relative;
   display: grid;
   padding-top: 1rem;
@@ -105,7 +108,7 @@
     text-align: left;
 }
 
-:host ( [selected] ) .action{
+:host( [selected] ) .action{
 
     cursor: auto;
 }
@@ -114,7 +117,7 @@
 
     display: grid;
 
-    height: 0px;
+    min-height: 0px;
 
     gap: 1rem;
 
@@ -124,20 +127,22 @@
 
     opacity: 0;
 
-    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
 
-    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  grid-template-rows: 0fr;
+  transition-duration: var(--mds-accordion-timer-item-duration);
+  transition-property: grid-template-rows opacity padding;
 }
 
-:host ( [selected] ) .contents{
+.contents-expander {
+  min-height: 0;
+}
 
-    height: auto;
+:host( [selected] ) .contents{
 
     padding-top: 1rem;
 
     opacity: 1;
+
+  grid-template-rows: 1fr;
 }

package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.js

@@ -6,28 +6,31 @@ export class MdsAccordionTimerItem {
      * to fire it again it need to be a different item
      */
     this.toggle = () => {
-      if (!this.selected) {
-        this.clickSelectEvent.emit({ selected: this.selected });
+      this.selected = !this.selected;
+      this.progress = 0;
+      if (this.selected) {
+        this.clickSelectEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.mouseEnter = () => {
       if (this.selected) {
-        this.selectedMouseEnterEvent.emit({ selected: this.selected });
+        this.selectedMouseEnterEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.mouseLeave = () => {
       if (this.selected) {
-        this.selectedMouseLeaveEvent.emit({ selected: this.selected });
+        this.selectedMouseLeaveEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.typography = 'h5';
-    this.selected = undefined;
+    this.selected = false;
     this.description = undefined;
     this.progress = 0;
     this.uuid = 0;
   }
   render() {
-    return (h(Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { class: "row" }, h("mds-progress", { class: "progress-bar", progress: Number(this.progress.toFixed(2)), direction: "vertical" }), h("div", { class: "accordion" }, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description)), h("div", { class: "contents", id: "contents" }, h("slot", null))))));
+    var _a;
+    return (h(Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { class: "row" }, h("mds-progress", { class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical" }), h("div", { class: "accordion" }, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description)), h("div", { class: "contents", id: "contents" }, h("div", { class: "contents-expander" }, h("slot", null)))))));
   }
   static get is() { return "mds-accordion-timer-item"; }
   static get encapsulation() { return "shadow"; }
@@ -57,7 +60,7 @@ export class MdsAccordionTimerItem {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the typography of the element"
@@ -75,13 +78,14 @@ export class MdsAccordionTimerItem {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies if the accordion item is opened or not"
         },
         "attribute": "selected",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       },
       "description": {
         "type": "string",
@@ -109,7 +113,7 @@ export class MdsAccordionTimerItem {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "A value between 0 and 100 that rapresents the status progress"
@@ -127,7 +131,7 @@ export class MdsAccordionTimerItem {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Used automatically by MdsAccordionTimer wrapper to handle it's siblings"

package/dist/collection/dictionary/button.js

@@ -13,6 +13,10 @@ const buttonToneVariantDictionary = [
   'ghost',
   'quiet',
 ];
+const buttonTargetDictionary = [
+  'blank',
+  'self',
+];
 const buttonSizeDictionary = [
   'sm',
   'md',
@@ -23,4 +27,4 @@ const buttonIconPositionDictionary = [
   'left',
   'right',
 ];
-export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };
+export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };

package/dist/collection/dictionary/variant.js

@@ -53,6 +53,14 @@ const toneVariantDictionary = [
   'ghost',
   'quiet',
 ];
+const toneActionVariantDictionary = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'strong',
+  'weak',
+  'quiet',
+];
 const toneSimpleVariantDictionary = [
   'strong',
   'weak',
@@ -62,4 +70,4 @@ const toneMinimalVariantDictionary = [
   'strong',
   'weak',
 ];
-export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };

package/dist/components/mds-accordion-timer-item.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const mdsAccordionTimerItemCss = "@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}.contents{display:contents}.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-accordion-timer-item-progress-bar-color:rgb(var(--tone-neutral-03));--mds-accordion-timer-item-progress-bar-background:rgb(var(--tone-neutral-08));--mds-accordion-timer-item-progress-bar-thickness:0.25rem;position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-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:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)))}.row{display:-ms-flexbox;display:flex;gap:1rem}.accordion{display:grid}.progress-bar{-ms-flex-negative:0;flex-shrink:0;--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color);--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background);--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness)}.action{cursor:pointer;border-radius:0.75rem;border-style:none;background-color:transparent;padding:0px;text-align:left}:host([selected]) .action{cursor:auto}.contents{display:grid;height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-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:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)}:host([selected]) .contents{height:auto;padding-top:1rem;opacity:1}";
+const mdsAccordionTimerItemCss = "@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}.contents{display:contents}.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-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 500ms);position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-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:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)))}.row{display:-ms-flexbox;display:flex;gap:1rem}.accordion{display:grid}.progress-bar{-ms-flex-negative:0;flex-shrink:0;--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color);--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background);--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness)}.action{cursor:pointer;border-radius:0.75rem;border-style:none;background-color:transparent;padding:0px;text-align:left}:host([selected]) .action{cursor:auto}.contents{display:grid;min-height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);grid-template-rows:0fr;-webkit-transition-duration:var(--mds-accordion-timer-item-duration);transition-duration:var(--mds-accordion-timer-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}";
 
 const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -15,28 +15,31 @@ const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class extends H
      * to fire it again it need to be a different item
      */
     this.toggle = () => {
-      if (!this.selected) {
-        this.clickSelectEvent.emit({ selected: this.selected });
+      this.selected = !this.selected;
+      this.progress = 0;
+      if (this.selected) {
+        this.clickSelectEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.mouseEnter = () => {
       if (this.selected) {
-        this.selectedMouseEnterEvent.emit({ selected: this.selected });
+        this.selectedMouseEnterEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.mouseLeave = () => {
       if (this.selected) {
-        this.selectedMouseLeaveEvent.emit({ selected: this.selected });
+        this.selectedMouseLeaveEvent.emit({ selected: this.selected, uuid: this.uuid });
       }
     };
     this.typography = 'h5';
-    this.selected = undefined;
+    this.selected = false;
     this.description = undefined;
     this.progress = 0;
     this.uuid = 0;
   }
   render() {
-    return (h(Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { class: "row" }, h("mds-progress", { class: "progress-bar", progress: Number(this.progress.toFixed(2)), direction: "vertical" }), h("div", { class: "accordion" }, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description)), h("div", { class: "contents", id: "contents" }, h("slot", null))))));
+    var _a;
+    return (h(Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { class: "row" }, h("mds-progress", { class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical" }), h("div", { class: "accordion" }, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description)), h("div", { class: "contents", id: "contents" }, h("div", { class: "contents-expander" }, h("slot", null)))))));
   }
   static get style() { return mdsAccordionTimerItemCss; }
 }, [1, "mds-accordion-timer-item", {

package/dist/documentation.d.ts

@@ -0,0 +1,148 @@
+
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * DO NOT MODIFY IT MANUALLY
+ */
+export interface JsonDocs {
+    components: JsonDocsComponent[];
+    timestamp: string;
+    compiler: {
+        name: string;
+        version: string;
+        typescriptVersion: string;
+    };
+}
+export interface JsonDocsComponent {
+    dirPath?: string;
+    fileName?: string;
+    filePath?: string;
+    readmePath?: string;
+    usagesDir?: string;
+    encapsulation: 'shadow' | 'scoped' | 'none';
+    tag: string;
+    readme: string;
+    docs: string;
+    docsTags: JsonDocsTag[];
+    /**
+     * The text from the class-level JSDoc for a Stencil component, if present.
+     */
+    overview?: string;
+    usage: JsonDocsUsage;
+    props: JsonDocsProp[];
+    methods: JsonDocsMethod[];
+    events: JsonDocsEvent[];
+    listeners: JsonDocsListener[];
+    styles: JsonDocsStyle[];
+    slots: JsonDocsSlot[];
+    parts: JsonDocsPart[];
+    dependents: string[];
+    dependencies: string[];
+    dependencyGraph: JsonDocsDependencyGraph;
+    deprecation?: string;
+}
+export interface JsonDocsDependencyGraph {
+    [tagName: string]: string[];
+}
+export interface JsonDocsTag {
+    name: string;
+    text?: string;
+}
+export interface JsonDocsValue {
+    value?: string;
+    type: string;
+}
+/**
+ * A mapping of file names to their contents.
+ *
+ * This type is meant to be used when reading one or more usage markdown files associated with a component. For the
+ * given directory structure:
+ * ```
+ * src/components/my-component
+ * ├── my-component.tsx
+ * └── usage
+ *     ├── bar.md
+ *     └── foo.md
+ * ```
+ * an instance of this type would include the name of the markdown file, mapped to its contents:
+ * ```ts
+ * {
+ *   'bar': STRING_CONTENTS_OF_BAR.MD
+ *   'foo': STRING_CONTENTS_OF_FOO.MD
+ * }
+ * ```
+ */
+export interface JsonDocsUsage {
+    [key: string]: string;
+}
+export interface JsonDocsProp {
+    name: string;
+    type: string;
+    mutable: boolean;
+    /**
+     * The name of the attribute that is exposed to configure a compiled web component
+     */
+    attr?: string;
+    reflectToAttr: boolean;
+    docs: string;
+    docsTags: JsonDocsTag[];
+    default: string;
+    deprecation?: string;
+    values: JsonDocsValue[];
+    optional: boolean;
+    required: boolean;
+}
+export interface JsonDocsMethod {
+    name: string;
+    docs: string;
+    docsTags: JsonDocsTag[];
+    deprecation?: string;
+    signature: string;
+    returns: JsonDocsMethodReturn;
+    parameters: JsonDocMethodParameter[];
+}
+export interface JsonDocsMethodReturn {
+    type: string;
+    docs: string;
+}
+export interface JsonDocMethodParameter {
+    name: string;
+    type: string;
+    docs: string;
+}
+export interface JsonDocsEvent {
+    event: string;
+    bubbles: boolean;
+    cancelable: boolean;
+    composed: boolean;
+    docs: string;
+    docsTags: JsonDocsTag[];
+    deprecation?: string;
+    detail: string;
+}
+export interface JsonDocsStyle {
+    name: string;
+    docs: string;
+    annotation: string;
+}
+export interface JsonDocsListener {
+    event: string;
+    target?: string;
+    capture: boolean;
+    passive: boolean;
+}
+export interface JsonDocsSlot {
+    name: string;
+    docs: string;
+}
+export interface JsonDocsPart {
+    name: string;
+    docs: string;
+}
+export interface StyleDoc {
+    name: string;
+    docs: string;
+    annotation: 'prop';
+}
+
+declare const _default: JsonDocs;
+export default _default;