@maggioli-design-system/mds-accordion-timer-item 3.3.0 → 3.3.2

package/dist/cjs/{index-2bd6b4fb.js → index-e23d5ad6.js}

@@ -994,6 +994,10 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
  */
 const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
+        /**
+         * minification optimization: `allRenderFn` is `true` if all components have a `render`
+         * method, so we can call the method immediately. If not, check before calling it.
+         */
         instance = instance.render() ;
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -1102,6 +1106,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    var _a;
     if (cmpMeta.$members$) {
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
@@ -1126,7 +1131,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+            prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -1174,26 +1179,65 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
+                    else if (propName == null) {
+                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
+                        // on a vanilla web component
+                        const hostRef = getHostRef(this);
+                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
+                        // We only want to trigger the callback(s) if:
+                        // 1. The instance is ready
+                        // 2. The watchers are ready
+                        // 3. The value has changed
+                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
+                            newValue !== oldValue) {
+                            const instance = hostRef.$lazyInstance$ ;
+                            const entry = cmpMeta.$watchers$[attrName];
+                            entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
+                                if (instance[callbackName] != null) {
+                                    instance[callbackName].call(instance, newValue, oldValue, attrName);
+                                }
+                            });
+                        }
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
-                }
-                return attrName;
-            });
+            // Create an array of attributes to observe
+            // This list in comprised of all strings used within a `@Watch()` decorator
+            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
+            // As such, there is no way to guarantee type-safety here that a user hasn't entered
+            // an invalid attribute.
+            Cstr.observedAttributes = Array.from(new Set([
+                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
+                ...members
+                    .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
+                    .map(([propName, m]) => {
+                    const attrName = m[1] || propName;
+                    attrNameToPropName.set(attrName, propName);
+                    if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
+                        cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                    }
+                    return attrName;
+                }),
+            ]));
         }
     }
     return Cstr;
 };
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+/**
+ * Initialize a Stencil component given a reference to its host element, its
+ * runtime bookkeeping data structure, runtime metadata about the component,
+ * and (optionally) an HMR version ID.
+ *
+ * @param elm a host element
+ * @param hostRef the element's runtime bookkeeping object
+ * @param cmpMeta runtime metadata for the Stencil component
+ * @param hmrVersionId an (optional) HMR version ID
+ */
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+    let Cstr;
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
@@ -1428,22 +1472,49 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
  * @returns void
  */
 const setNonce = (nonce) => (plt.$nonce$ = nonce);
+/**
+ * A WeakMap mapping runtime component references to their corresponding host reference
+ * instances.
+ */
 const hostRefs = /*@__PURE__*/ new WeakMap();
+/**
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+ *
+ * @param ref the runtime ref of interest
+ * @returns the Host reference (if found) or undefined
+ */
 const getHostRef = (ref) => hostRefs.get(ref);
+/**
+ * Register a lazy instance with the {@link hostRefs} object so it's
+ * corresponding {@link d.HostRef} can be retrieved later.
+ *
+ * @param lazyInstance the lazy instance of interest
+ * @param hostRef that instances `HostRef` object
+ * @returns a reference to the host ref WeakMap
+ */
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
-const registerHost = (elm, cmpMeta) => {
+/**
+ * Register a host element for a Stencil component, setting up various metadata
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
+ * metadata.
+ *
+ * @param hostElement the host element to register
+ * @param cmpMeta runtime metadata for that component
+ * @returns a reference to the host ref WeakMap
+ */
+const registerHost = (hostElement, cmpMeta) => {
     const hostRef = {
         $flags$: 0,
-        $hostElement$: elm,
+        $hostElement$: hostElement,
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
-        elm['s-p'] = [];
-        elm['s-rc'] = [];
+        hostElement['s-p'] = [];
+        hostElement['s-rc'] = [];
     }
-    return hostRefs.set(elm, hostRef);
+    return hostRefs.set(hostElement, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);
@@ -1456,7 +1527,20 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
-    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+    
+    if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+      const processMod = importedModule => {
+        cmpModules.set(bundleId, importedModule);
+        return importedModule[exportName];
+      }
+      switch(bundleId) {
+        
+        case 'mds-accordion-timer-item.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './mds-accordion-timer-item.cjs.entry.js')); }).then(processMod, consoleError);
+      }
+    }
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2bd6b4fb.js');
+const index = require('./index-e23d5ad6.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2bd6b4fb.js');
+const index = require('./index-e23d5ad6.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: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 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);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)));display:grid;position:relative}.row{gap:1rem;display:-ms-flexbox;display:flex}.accordion{display:grid}.progress-bar{--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);-ms-flex-negative:0;flex-shrink:0}.action{border-radius:0.75rem;background-color:transparent;border:0;cursor:pointer;padding:0;text-align:left}:host([selected]) .action{cursor:auto}.contents{gap:1rem;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);display:grid;grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-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) {

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2bd6b4fb.js');
+const index = require('./index-e23d5ad6.js');
 
 /*
- Stencil Client Patch Browser v4.2.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.5.0 | 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": "4.2.1",
-    "typescriptVersion": "5.1.6"
+    "version": "4.5.0",
+    "typescriptVersion": "5.2.2"
   },
   "collections": [],
   "bundles": []

package/dist/collection/common/aria.js

@@ -5,6 +5,7 @@ const hash = (s) => {
   }
   return h.toString();
 };
+const randomInt = (max) => Math.floor(Math.random() * max);
 const unslugName = (name) => {
   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;
@@ -18,4 +19,11 @@ const setAttributeIfEmpty = (element, attribute, value) => {
   return value;
 };
 const hashValue = (value) => `${value}-${hash(value)}`;
-export { unslugName, setAttributeIfEmpty, hashValue, };
+const hashRandomValue = (value) => {
+  const randomValue = randomInt(1000000);
+  if (value) {
+    return `${value}-${hash(randomValue.toString())}`;
+  }
+  return hash(randomValue.toString());
+};
+export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };

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

@@ -26,13 +26,13 @@ export class KeyboardManager {
     };
     this.attachEscapeBehavior = (callBack) => {
       this.escapeCallback = callBack;
-      if (typeof window !== undefined) {
+      if (window !== undefined) {
         window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
       }
     };
     this.detachEscapeBehavior = () => {
       this.escapeCallback = () => { return; };
-      if (typeof window !== undefined) {
+      if (window !== undefined) {
         window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
       }
     };

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

@@ -60,8 +60,6 @@
   --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;
   transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
@@ -70,66 +68,57 @@
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
   color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));
+  display: grid;
+  position: relative;
 }
 
 .row{
 
-    display: flex;
-
     gap: 1rem;
-}
 
-.accordion{
-
-    display: grid;
+  display: flex;
 }
 
-.progress-bar{
+.accordion {
+  display: grid;
+}
 
-    flex-shrink: 0;
+.progress-bar {
 
   --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);
+
+  flex-shrink: 0;
 }
 
 .action{
 
-    cursor: pointer;
-
     border-radius: 0.75rem;
 
-    border-style: none;
-
-    background-color: transparent;
-
-    padding: 0px;
-
-    text-align: left;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
 }
 
-:host( [selected] ) .action{
-
-    cursor: auto;
+:host( [selected] ) .action {
+  cursor: auto;
 }
 
 .contents{
 
-    display: grid;
-
-    min-height: 0px;
-
     gap: 1rem;
 
-    overflow: hidden;
-
-    padding-top: 0px;
-
-    opacity: 0;
-
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 
+  display: grid;
   grid-template-rows: 0fr;
+  min-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding-top: 0;
   transition-duration: var(--mds-accordion-timer-item-duration);
   transition-property: grid-template-rows opacity padding;
 }

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: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 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);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)));display:grid;position:relative}.row{gap:1rem;display:-ms-flexbox;display:flex}.accordion{display:grid}.progress-bar{--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);-ms-flex-negative:0;flex-shrink:0}.action{border-radius:0.75rem;background-color:transparent;border:0;cursor:pointer;padding:0;text-align:left}:host([selected]) .action{cursor:auto}.contents{gap:1rem;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);display:grid;grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-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 MdsAccordionTimerItem extends HTMLElement {
   constructor() {

package/dist/documentation.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2023-09-18T09:10:06",
+  "timestamp": "2023-10-19T09:48:37",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.2.1",
-    "typescriptVersion": "5.1.6"
+    "version": "4.5.0",
+    "typescriptVersion": "5.2.2"
   },
   "components": [
     {

package/dist/esm/{index-a4aa99a4.js → index-6704f580.js}

@@ -972,6 +972,10 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
  */
 const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
+        /**
+         * minification optimization: `allRenderFn` is `true` if all components have a `render`
+         * method, so we can call the method immediately. If not, check before calling it.
+         */
         instance = instance.render() ;
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -1080,6 +1084,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    var _a;
     if (cmpMeta.$members$) {
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
@@ -1104,7 +1109,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+            prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -1152,26 +1157,65 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
+                    else if (propName == null) {
+                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
+                        // on a vanilla web component
+                        const hostRef = getHostRef(this);
+                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
+                        // We only want to trigger the callback(s) if:
+                        // 1. The instance is ready
+                        // 2. The watchers are ready
+                        // 3. The value has changed
+                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
+                            newValue !== oldValue) {
+                            const instance = hostRef.$lazyInstance$ ;
+                            const entry = cmpMeta.$watchers$[attrName];
+                            entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
+                                if (instance[callbackName] != null) {
+                                    instance[callbackName].call(instance, newValue, oldValue, attrName);
+                                }
+                            });
+                        }
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
-                }
-                return attrName;
-            });
+            // Create an array of attributes to observe
+            // This list in comprised of all strings used within a `@Watch()` decorator
+            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
+            // As such, there is no way to guarantee type-safety here that a user hasn't entered
+            // an invalid attribute.
+            Cstr.observedAttributes = Array.from(new Set([
+                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
+                ...members
+                    .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
+                    .map(([propName, m]) => {
+                    const attrName = m[1] || propName;
+                    attrNameToPropName.set(attrName, propName);
+                    if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
+                        cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                    }
+                    return attrName;
+                }),
+            ]));
         }
     }
     return Cstr;
 };
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+/**
+ * Initialize a Stencil component given a reference to its host element, its
+ * runtime bookkeeping data structure, runtime metadata about the component,
+ * and (optionally) an HMR version ID.
+ *
+ * @param elm a host element
+ * @param hostRef the element's runtime bookkeeping object
+ * @param cmpMeta runtime metadata for the Stencil component
+ * @param hmrVersionId an (optional) HMR version ID
+ */
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+    let Cstr;
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
@@ -1406,22 +1450,49 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
  * @returns void
  */
 const setNonce = (nonce) => (plt.$nonce$ = nonce);
+/**
+ * A WeakMap mapping runtime component references to their corresponding host reference
+ * instances.
+ */
 const hostRefs = /*@__PURE__*/ new WeakMap();
+/**
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+ *
+ * @param ref the runtime ref of interest
+ * @returns the Host reference (if found) or undefined
+ */
 const getHostRef = (ref) => hostRefs.get(ref);
+/**
+ * Register a lazy instance with the {@link hostRefs} object so it's
+ * corresponding {@link d.HostRef} can be retrieved later.
+ *
+ * @param lazyInstance the lazy instance of interest
+ * @param hostRef that instances `HostRef` object
+ * @returns a reference to the host ref WeakMap
+ */
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
-const registerHost = (elm, cmpMeta) => {
+/**
+ * Register a host element for a Stencil component, setting up various metadata
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
+ * metadata.
+ *
+ * @param hostElement the host element to register
+ * @param cmpMeta runtime metadata for that component
+ * @returns a reference to the host ref WeakMap
+ */
+const registerHost = (hostElement, cmpMeta) => {
     const hostRef = {
         $flags$: 0,
-        $hostElement$: elm,
+        $hostElement$: hostElement,
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
-        elm['s-p'] = [];
-        elm['s-rc'] = [];
+        hostElement['s-p'] = [];
+        hostElement['s-rc'] = [];
     }
-    return hostRefs.set(elm, hostRef);
+    return hostRefs.set(hostElement, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);
@@ -1434,7 +1505,20 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
-    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+    
+    if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+      const processMod = importedModule => {
+        cmpModules.set(bundleId, importedModule);
+        return importedModule[exportName];
+      }
+      switch(bundleId) {
+        
+        case 'mds-accordion-timer-item':
+          return import(
+            /* webpackMode: "lazy" */
+            './mds-accordion-timer-item.entry.js').then(processMod, consoleError);
+      }
+    }
     return import(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-a4aa99a4.js';
-export { s as setNonce } from './index-a4aa99a4.js';
+import { b as bootstrapLazy } from './index-6704f580.js';
+export { s as setNonce } from './index-6704f580.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-a4aa99a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6704f580.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: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 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);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)));display:grid;position:relative}.row{gap:1rem;display:-ms-flexbox;display:flex}.accordion{display:grid}.progress-bar{--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);-ms-flex-negative:0;flex-shrink:0}.action{border-radius:0.75rem;background-color:transparent;border:0;cursor:pointer;padding:0;text-align:left}:host([selected]) .action{cursor:auto}.contents{gap:1rem;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);display:grid;grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-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) {