@maggioli-design-system/mds-accordion-timer-item 1.0.0 → 1.0.1

package/dist/cjs/{index-2ee34dd7.js → index-12f10871.js}

@@ -76,7 +76,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     let scopeId = getScopeId(cmpMeta);
-    let style = styles.get(scopeId);
+    const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
     styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -156,7 +156,7 @@ const h = (nodeName, vnodeData, ...children) => {
     let child = null;
     let simple = false;
     let lastSimple = false;
-    let vNodeChildren = [];
+    const vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -279,7 +279,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
                 try {
                     if (!elm.tagName.includes('-')) {
-                        let n = newValue == null ? '' : newValue;
+                        const n = newValue == null ? '' : newValue;
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
@@ -336,7 +336,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
 };
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     // tslint:disable-next-line: prefer-const
-    let newVNode = newParentVNode.$children$[childIndex];
+    const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
     let elm;
     let childNode;
@@ -711,6 +711,29 @@ const then = (promise, thenFn) => {
 };
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
@@ -744,7 +767,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
@@ -1117,7 +1143,9 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
+    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+    /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2ee34dd7.js');
+const index = require('./index-12f10871.js');
 
 /*
- Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2ee34dd7.js');
+const index = require('./index-12f10871.js');
 
 function toVal(mix) {
 	var k, y, str='';
@@ -45,9 +45,9 @@ function clsx () {
 	return str;
 }
 
-const mdsAccordionTimerItemCss = ".contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-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(--adjust-tone-02)))}:host(:hover:not(.active)) .progress-bar{--background-active:rgb(var(--adjust-tone-07))}.row{display:-ms-flexbox;display:flex;gap:1rem}.accordion{display:grid}.progress-bar{-ms-flex-negative:0;flex-shrink:0;--thickness:0.25rem}.header{cursor:pointer}:host(.active) .header{cursor:auto}.contents{display:grid;height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-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)}.contents--opened{height:auto;padding-top:1rem;opacity:1}";
+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{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(--adjust-tone-02)))}:host(:hover:not(.active)) .progress-bar{--background-active:rgb(var(--adjust-tone-07))}.row{display:-ms-flexbox;display:flex;gap:1rem}.accordion{display:grid}.progress-bar{-ms-flex-negative:0;flex-shrink:0;--thickness:0.25rem}.header{cursor:pointer}:host(.active) .header{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)}.contents--opened{height:auto;padding-top:1rem;opacity:1}";
 
-let MdsAccordionTimerItem = class {
+const MdsAccordionTimerItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.clickActive = index.createEvent(this, "clickActive", 7);

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-2ee34dd7.js');
+const index = require('./index-12f10871.js');
 
 /*
- Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.16.1 | 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,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
-    "typescriptVersion": "4.3.5"
+    "version": "2.16.1",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": []

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

@@ -1,3 +1,13 @@
+.fixed {
+
+  position: fixed;
+}
+
+.absolute {
+
+  position: absolute;
+}
+
 .contents {
 
   display: contents;
@@ -10,7 +20,9 @@
 
 .shadow {
 
-  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --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);
 }
@@ -31,9 +43,9 @@
 
   padding-bottom: 1rem;
 
-  transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
 
-  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   transition-duration: 500ms;
 
@@ -90,9 +102,9 @@
 
   opacity: 0;
 
-  transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
 
-  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   transition-duration: 300ms;
 

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

@@ -1,49 +1,48 @@
-import React from 'react'
-import MdsAccordionTimerItem from '@component/mds-accordion-timer-item/mds-accordion-timer-item'
-import { typographyPrimaryDictionary } from '@dictionary/typography'
-import faker from 'faker'
-
+import { typographyPrimaryDictionary } from '@dictionary/typography';
+import { h } from '@stencil/core';
+import { lokiDisabled } from '@test/loki-disabled';
 export default {
   title: 'UI / Accordion Timer / Accordion Timer Item',
-  component: MdsAccordionTimerItem,
   argTypes: {
     description: {
-      type: { name: 'string', required: true },
+      type: { name: 'string' },
       description: 'Specifies the title shown when the accordion is closed or opened',
     },
     active: {
-      type: { name: 'boolean', required: false },
+      type: { name: 'boolean' },
       description: 'Specifies if the accordion item is opened or not',
     },
     progress: {
       control: { type: 'range', step: 0.01, min: 0, max: 1 },
-      type: { name: 'number', required: false },
+      type: { name: 'number' },
       description: 'A value between 0 and 100 that rapresents the status progress',
     },
     typography: {
-      type: { name: 'string', required: false },
+      type: { name: 'string' },
       description: 'Specifies the typography of the element',
       options: typographyPrimaryDictionary,
       control: { type: 'select' },
     },
   },
-}
-
-const Template = args =>
-  <div>
-    <mds-accordion-timer-item {...args}>
-      <mds-text typography="paragraph" class="text-adjust-tone-08">{ faker.lorem.paragraphs(2) }</mds-text>
-    </mds-accordion-timer-item>
-  </div>
-
-export const Default = Template.bind({})
+};
+const Template = args => h("div", null,
+  h("mds-accordion-timer-item", Object.assign({}, args),
+    h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")));
+export const Default = Template.bind({});
 Default.args = {
-  progress: 0.15,
-  description: 'Come funziona il monitoraggio del sonno?',
-}
-
-export const active = Template.bind({})
-active.args = {
+  description: 'Blipbug',
+};
+export const Active = Template.bind({});
+Active.args = {
   active: true,
-  description: 'Come funziona il monitoraggio del sonno?',
-}
+  description: 'Blipbug',
+};
+export const Progress = Template.bind({});
+Progress.args = {
+  active: true,
+  description: 'Blipbug',
+  progress: 0.5,
+};
+Default.story = lokiDisabled;
+Active.story = lokiDisabled;
+Progress.story = lokiDisabled;

package/dist/collection/dictionary/floating-ui.js

@@ -0,0 +1,19 @@
+const floatingUIPlacementDictionary = [
+  'bottom',
+  'bottom-end',
+  'bottom-start',
+  'left',
+  'left-end',
+  'left-start',
+  'right',
+  'right-end',
+  'right-start',
+  'top',
+  'top-end',
+  'top-start',
+];
+const floatingUIStrategyDictionary = [
+  'absolute',
+  'fixed',
+];
+export { floatingUIPlacementDictionary, floatingUIStrategyDictionary, };

package/dist/collection/dictionary/icon.js

@@ -1,3 +1,3 @@
-import mggIconsDictionary from '@maggioli-design-system/icons/original/dictionary.json';
-const iconsDictionary = Object.keys(mggIconsDictionary).sort();
+import jsonIconsDictionary from '../fixtures/icons.json';
+const iconsDictionary = jsonIconsDictionary;
 export { iconsDictionary, };

package/dist/collection/dictionary/typography.js

@@ -13,6 +13,7 @@ const typographyDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ];
 const typographyMonoDictionary = [
   'code',
@@ -33,5 +34,10 @@ const typographySecondaryDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ];
-export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, };
+const typographySmallerDictionary = [
+  'option',
+  'tip',
+];
+export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, };

package/dist/collection/dictionary/variant.js

@@ -3,6 +3,7 @@ const themeVariantDictionary = [
   'error',
   'info',
   'light',
+  'primary',
   'success',
   'warning',
 ];

package/dist/collection/types/floating-ui.js

@@ -0,0 +1 @@
+export {};

package/dist/{custom-elements → components}/index.d.ts

@@ -1,25 +1,7 @@
-/* MdsAccordionTimerItem custom elements bundle */
+/* MdsAccordionTimerItem custom elements */
 
 import type { Components, JSX } from "../types/components";
 
-interface MdsAccordionTimerItem extends Components.MdsAccordionTimerItem, HTMLElement {}
-export const MdsAccordionTimerItem: {
-  prototype: MdsAccordionTimerItem;
-  new (): MdsAccordionTimerItem;
-};
-
-/**
- * Utility to define all custom elements within this package using the tag name provided in the component's source. 
- * When defining each custom element, it will also check it's safe to define by:
- *
- * 1. Ensuring the "customElements" registry is available in the global context (window).
- * 2. The component tag name is not already defined.
- *
- * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
- * method instead to define custom elements individually, or to provide a different tag name.
- */
-export declare const defineCustomElements: (opts?: any) => void;
-
 /**
  * Used to manually set the base path where assets can be found.
  * If the script is used as "module", it's recommended to use "import.meta.url",
@@ -27,7 +9,7 @@ export declare const defineCustomElements: (opts?: any) => void;
  * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
  * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
  */
 export declare const setAssetPath: (path: string) => void;
@@ -36,7 +18,6 @@ export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-  ce?: (eventName: string, opts?: any) => CustomEvent;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
 

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/mds-accordion-timer-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MdsAccordionTimerItem extends Components.MdsAccordionTimerItem, HTMLElement {}
+export const MdsAccordionTimerItem: {
+  prototype: MdsAccordionTimerItem;
+  new (): MdsAccordionTimerItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,121 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
+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{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(--adjust-tone-02)))}:host(:hover:not(.active)) .progress-bar{--background-active:rgb(var(--adjust-tone-07))}.row{display:-ms-flexbox;display:flex;gap:1rem}.accordion{display:grid}.progress-bar{-ms-flex-negative:0;flex-shrink:0;--thickness:0.25rem}.header{cursor:pointer}:host(.active) .header{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)}.contents--opened{height:auto;padding-top:1rem;opacity:1}";
+
+const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.clickActive = createEvent(this, "clickActive", 7);
+    this.mouseEnterActive = createEvent(this, "mouseEnterActive", 7);
+    this.mouseLeaveActive = createEvent(this, "mouseLeaveActive", 7);
+    /**
+     * Specifies the typography of the element
+     */
+    this.typography = 'h5';
+    /**
+     * A value between 0 and 100 that rapresents the status progress
+     */
+    this.progress = 0;
+    /**
+     * Used automatically by MdsAccordionTimer wrapper to handle it's siblings
+     */
+    this.uuid = 0;
+    this.toggle = () => {
+      if (!this.isActive) {
+        this.isActive = true;
+        this.clickActive.emit(this.description);
+      }
+    };
+    this.mouseEnter = () => {
+      if (this.isActive) {
+        this.mouseEnterActive.emit(this.description);
+      }
+    };
+    this.mouseLeave = () => {
+      if (this.isActive) {
+        this.mouseLeaveActive.emit(this.description);
+      }
+    };
+  }
+  componentWillLoad() {
+    this.isActive = this.active;
+  }
+  validateOpened(newValue) {
+    this.isActive = newValue;
+  }
+  render() {
+    return (h(Host, { class: clsx(this.isActive && 'active'), onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { class: "row" }, h("mds-progress", { class: "progress-bar", progress: this.progress, direction: "vertical" }), h("div", { class: "accordion" }, h("div", { class: "header", onClick: this.toggle }, h("mds-text", { typography: this.typography }, this.description)), h("div", { class: clsx('contents', this.isActive && 'contents--opened') }, h("slot", null))))));
+  }
+  static get watchers() { return {
+    "active": ["validateOpened"]
+  }; }
+  static get style() { return mdsAccordionTimerItemCss; }
+}, [1, "mds-accordion-timer-item", {
+    "typography": [1],
+    "active": [516],
+    "description": [1],
+    "progress": [2],
+    "uuid": [2],
+    "isActive": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mds-accordion-timer-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mds-accordion-timer-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MdsAccordionTimerItem$1);
+      }
+      break;
+  } });
+}
+
+const MdsAccordionTimerItem = MdsAccordionTimerItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MdsAccordionTimerItem, defineCustomElement };

package/dist/esm/{index-4339770f.js → index-e1bd79fc.js}

@@ -54,7 +54,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     let scopeId = getScopeId(cmpMeta);
-    let style = styles.get(scopeId);
+    const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
     styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -134,7 +134,7 @@ const h = (nodeName, vnodeData, ...children) => {
     let child = null;
     let simple = false;
     let lastSimple = false;
-    let vNodeChildren = [];
+    const vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -257,7 +257,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
                 try {
                     if (!elm.tagName.includes('-')) {
-                        let n = newValue == null ? '' : newValue;
+                        const n = newValue == null ? '' : newValue;
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
@@ -314,7 +314,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
 };
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     // tslint:disable-next-line: prefer-const
-    let newVNode = newParentVNode.$children$[childIndex];
+    const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
     let elm;
     let childNode;
@@ -689,6 +689,29 @@ const then = (promise, thenFn) => {
 };
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
@@ -722,7 +745,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
@@ -1095,7 +1121,9 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
+    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
     return import(
+    /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-4339770f.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-e1bd79fc.js';
 
 /*
- Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();