@maggioli-design-system/mds-accordion-timer-item 2.2.0 → 3.0.1

package/dist/cjs/{index-fcad7907.js → index-6fcb2864.js}

@@ -133,6 +133,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -147,6 +155,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -462,6 +476,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -478,6 +507,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -669,7 +711,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -733,6 +776,18 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fcad7907.js');
+const index = require('./index-6fcb2864.js');
 
 /*
- Stencil Client Patch Esm v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mds-accordion-timer-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"active":[516],"description":[1],"progress":[2],"uuid":[2]}]]]], options);
+  return index.bootstrapLazy([["mds-accordion-timer-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"progress":[2],"uuid":[2]}]]]], options);
   });
 };
 

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

@@ -2,50 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fcad7907.js');
+const index = require('./index-6fcb2864.js');
 
-const mdsAccordionTimerItemCss = ".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{--progress-bar-color:rgb(var(--tone-neutral-03));--progress-bar-background:rgb(var(--tone-neutral-08));--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(--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;--color:var(--progress-bar-color);--background:var(--progress-bar-background);--thickness:var(--progress-bar-thickness)}.action{cursor:pointer;border-style:none;background-color:transparent;padding:0px;text-align:left}:host([active]) .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([active]) .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: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 MdsAccordionTimerItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.clickActive = index.createEvent(this, "clickActive", 7);
-    this.mouseEnterActive = index.createEvent(this, "mouseEnterActive", 7);
-    this.mouseLeaveActive = index.createEvent(this, "mouseLeaveActive", 7);
-    // componentWillLoad (): void {
-    //   this.isActive = this.active
-    // }
-    // componentDidLoad (): void {
-    //   this.element.shadowRoot.querySelector<HTMLMdsProgressElement>('mds-progress').setAttribute('direction', 'vertical')
-    // }
+    this.clickSelectEvent = index.createEvent(this, "mdsAccordionTimerItemClickSelect", 7);
+    this.selectedMouseEnterEvent = index.createEvent(this, "mdsAccordionTimerItemMouseEnterSelect", 7);
+    this.selectedMouseLeaveEvent = index.createEvent(this, "mdsAccordionTimerItemMouseLeaveSelect", 7);
+    /**
+     * Event throws only once the element is active,
+     * to fire it again it need to be a different item
+     */
     this.toggle = () => {
-      if (!this.active) {
-        // this.isActive = true
-        this.clickActive.emit(this.description);
+      if (!this.selected) {
+        this.clickSelectEvent.emit(this.description);
       }
     };
     this.mouseEnter = () => {
-      if (this.active) {
-        this.mouseEnterActive.emit(this.description);
+      if (this.selected) {
+        this.selectedMouseEnterEvent.emit(this.description);
       }
     };
     this.mouseLeave = () => {
-      if (this.active) {
-        this.mouseLeaveActive.emit(this.description);
+      if (this.selected) {
+        this.selectedMouseLeaveEvent.emit(this.description);
       }
     };
     this.typography = 'h5';
-    this.active = undefined;
+    this.selected = undefined;
     this.description = undefined;
     this.progress = 0;
     this.uuid = 0;
   }
-  // @Watch('active')
-  // activeChanged (newValue: boolean): void {
-  //   this.isActive = newValue
-  // }
   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.active ? 'true' : 'false', class: "action", 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))))));
+    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))))));
   }
 };
 MdsAccordionTimerItem.style = mdsAccordionTimerItemCss;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fcad7907.js');
+const index = require('./index-6fcb2864.js');
 
 /*
- Stencil Client Patch Browser v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.2 | 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));
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-accordion-timer-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"active":[516],"description":[1],"progress":[2],"uuid":[2]}]]]], options);
+  return index.bootstrapLazy([["mds-accordion-timer-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"selected":[516],"description":[1],"progress":[2],"uuid":[2]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

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

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

@@ -0,0 +1,40 @@
+export 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));
+      }
+    };
+  }
+}

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

@@ -1,36 +1,62 @@
-.fixed {
-  position: fixed;
+@tailwind components;
+
+.focus-off,
+  .focusable,
+  .focusable-light,
+  .focusable-light-off{
+
+    transition-duration: 200ms;
+
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+    outline-offset: var(--magma-outline-blur-offset);
+    outline: var(--magma-outline-blur);
+    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, 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{
 
-.absolute {
-  position: absolute;
+    position: absolute;
 }
+.contents{
 
-.contents {
-  display: contents;
+    display: contents;
 }
+.border{
 
-.border {
-  border-width: 1px;
+    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);
 
-.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);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 /**
-  * @prop --progress-bar-color: Sets the color of the progress bar when the item is selected
-  * @prop --progress-bar-background: Sets the background-color of the progress bar when the item is selected
-  * @prop --color: Sets the text color of the component
-  * @prop --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
   */
 
 :host {
-  --progress-bar-color: rgb(var(--tone-neutral-03));
-  --progress-bar-background: rgb(var(--tone-neutral-08));
-  --progress-bar-thickness: 0.25rem;
+
+  --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;
@@ -40,53 +66,78 @@
   transition-duration: 500ms;
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
-  color: var(--color, rgb(var(--tone-neutral-02)));
+  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));
 }
 
-.row {
-  display: flex;
-  gap: 1rem;
+.row{
+
+    display: flex;
+
+    gap: 1rem;
 }
 
-.accordion {
-  display: grid;
+.accordion{
+
+    display: grid;
 }
 
-.progress-bar {
-  flex-shrink: 0;
+.progress-bar{
+
+    flex-shrink: 0;
 
-  --color: var(--progress-bar-color);
-  --background: var(--progress-bar-background);
-  --thickness: var(--progress-bar-thickness);
+  --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-style: none;
-  background-color: transparent;
-  padding: 0px;
-  text-align: left;
+.action{
+
+    cursor: pointer;
+
+    border-radius: 0.75rem;
+
+    border-style: none;
+
+    background-color: transparent;
+
+    padding: 0px;
+
+    text-align: left;
 }
 
-:host ( [active] ) .action {
-  cursor: auto;
+:host ( [selected] ) .action{
+
+    cursor: auto;
 }
 
-.contents {
-  display: grid;
-  height: 0px;
-  gap: 1rem;
-  overflow: hidden;
-  padding-top: 0px;
-  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(0.25, 0.46, 0.45, 0.94);
+.contents{
+
+    display: grid;
+
+    height: 0px;
+
+    gap: 1rem;
+
+    overflow: hidden;
+
+    padding-top: 0px;
+
+    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(0.25, 0.46, 0.45, 0.94);
 }
 
-:host ( [active] ) .contents {
-  height: auto;
-  padding-top: 1rem;
-  opacity: 1;
+:host ( [selected] ) .contents{
+
+    height: auto;
+
+    padding-top: 1rem;
+
+    opacity: 1;
 }

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

@@ -1,41 +1,33 @@
 import { Host, h } from '@stencil/core';
-// import { DirectionType } from '../mds-progress/meta/types'
 export class MdsAccordionTimerItem {
   constructor() {
-    // componentWillLoad (): void {
-    //   this.isActive = this.active
-    // }
-    // componentDidLoad (): void {
-    //   this.element.shadowRoot.querySelector<HTMLMdsProgressElement>('mds-progress').setAttribute('direction', 'vertical')
-    // }
+    /**
+     * Event throws only once the element is active,
+     * to fire it again it need to be a different item
+     */
     this.toggle = () => {
-      if (!this.active) {
-        // this.isActive = true
-        this.clickActive.emit(this.description);
+      if (!this.selected) {
+        this.clickSelectEvent.emit(this.description);
       }
     };
     this.mouseEnter = () => {
-      if (this.active) {
-        this.mouseEnterActive.emit(this.description);
+      if (this.selected) {
+        this.selectedMouseEnterEvent.emit(this.description);
       }
     };
     this.mouseLeave = () => {
-      if (this.active) {
-        this.mouseLeaveActive.emit(this.description);
+      if (this.selected) {
+        this.selectedMouseLeaveEvent.emit(this.description);
       }
     };
     this.typography = 'h5';
-    this.active = undefined;
+    this.selected = undefined;
     this.description = undefined;
     this.progress = 0;
     this.uuid = 0;
   }
-  // @Watch('active')
-  // activeChanged (newValue: boolean): void {
-  //   this.isActive = newValue
-  // }
   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.active ? 'true' : 'false', class: "action", 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))))));
+    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))))));
   }
   static get is() { return "mds-accordion-timer-item"; }
   static get encapsulation() { return "shadow"; }
@@ -60,7 +52,7 @@ export class MdsAccordionTimerItem {
           "references": {
             "TypographyTitleType": {
               "location": "import",
-              "path": "../../types/typography"
+              "path": "@type/typography"
             }
           }
         },
@@ -74,7 +66,7 @@ export class MdsAccordionTimerItem {
         "reflect": false,
         "defaultValue": "'h5'"
       },
-      "active": {
+      "selected": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -88,7 +80,7 @@ export class MdsAccordionTimerItem {
           "tags": [],
           "text": "Specifies if the accordion item is opened or not"
         },
-        "attribute": "active",
+        "attribute": "selected",
         "reflect": true
       },
       "description": {
@@ -148,8 +140,8 @@ export class MdsAccordionTimerItem {
   }
   static get events() {
     return [{
-        "method": "clickActive",
-        "name": "clickActive",
+        "method": "clickSelectEvent",
+        "name": "mdsAccordionTimerItemClickSelect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -163,8 +155,8 @@ export class MdsAccordionTimerItem {
           "references": {}
         }
       }, {
-        "method": "mouseEnterActive",
-        "name": "mouseEnterActive",
+        "method": "selectedMouseEnterEvent",
+        "name": "mdsAccordionTimerItemMouseEnterSelect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -178,8 +170,8 @@ export class MdsAccordionTimerItem {
           "references": {}
         }
       }, {
-        "method": "mouseLeaveActive",
-        "name": "mouseLeaveActive",
+        "method": "selectedMouseLeaveEvent",
+        "name": "mdsAccordionTimerItemMouseLeaveSelect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

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

@@ -8,9 +8,9 @@ export default {
       type: { name: 'string' },
       description: 'Specifies the title shown when the accordion is closed or opened',
     },
-    active: {
+    selected: {
       type: { name: 'boolean' },
-      description: 'Specifies if the accordion item is opened or not',
+      description: 'Specifies if the accordion item is selected or not',
     },
     progress: {
       control: { type: 'range', step: 0.01, min: 0, max: 1 },
@@ -30,17 +30,17 @@ export const Default = Template.bind({});
 Default.args = {
   description: 'Blipbug',
 };
-export const Active = Template.bind({});
-Active.args = {
-  active: true,
+export const selected = Template.bind({});
+selected.args = {
+  selected: true,
   description: 'Blipbug',
 };
 export const Progress = Template.bind({});
 Progress.args = {
-  active: true,
+  selected: true,
   description: 'Blipbug',
   progress: 0.5,
 };
 Default.story = lokiDisabled;
-Active.story = lokiDisabled;
+selected.story = lokiDisabled;
 Progress.story = lokiDisabled;

package/dist/collection/dictionary/icon.js

@@ -1,3 +1,5 @@
 import jsonIconsDictionary from '../fixtures/icons.json';
+import jsonMggIconsDictionary from '../fixtures/iconsauce.json';
 const iconsDictionary = jsonIconsDictionary;
-export { iconsDictionary, };
+const mggIconsDictionary = jsonMggIconsDictionary;
+export { iconsDictionary, mggIconsDictionary, };

package/dist/collection/dictionary/typography.js

@@ -21,6 +21,10 @@ const typographyVariationsDictionary = [
   'read',
   'code',
 ];
+const typographyReadingVariationsDictionary = [
+  'info',
+  'read',
+];
 const typographyMonoDictionary = [
   'snippet',
   'hack',
@@ -56,4 +60,4 @@ const typographyTooltipDictionary = [
   'detail',
   'tip',
 ];
-export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyInfoDictionary, typographyReadingVariationsDictionary, typographyMonoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };