@maggioli-design-system/mds-accordion-timer-item - npm Package Compare versions

Comparing version 3.10.3 to 4.0.0

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-0f3ba599.js');
+const index = require('./index-2df02342.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
@@ -8,0 +8,0 @@

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

@@ -5,7 +5,7 @@ 'use strict';
 
-const index = require('./index-0f3ba599.js');
+const index = require('./index-2df02342.js');
 
 const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
 
-const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.focus-bounce--focused,\n  .focus-bounce:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.svg {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.svg svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 150ms;\n  transition-duration: 150ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n";
+const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.icon {\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n";
 const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
@@ -56,3 +56,3 @@
         var _a;
-        return (index.h(index.Host, { key: 'f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { key: '606bb44e9fa98419f8fd9f9420dd62e3064fcc5a', class: "row" }, index.h("mds-progress", { key: '3e363d027812a2eb9cff973d3ea81f326314035d', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), index.h("div", { key: '4ae292499722ce850948fa3949f40e172fd92a14', class: "accordion" }, index.h("button", { key: '4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { key: 'bf254974e6152d598d0226ccca0a428287a9d5ab', typography: this.typography, part: "label" }, this.description), index.h("mds-text", { key: 'd37052b637bcba6a12ced512aa7b88f17563abe2', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, index.h("i", { key: '15be1fe70aac8dfe600beca7ab22b6aeac45d7bf', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), index.h("div", { key: '3cd4cbe8f3148a751b6eb05efa6f450ed93f30c3', class: "content", id: "content" }, index.h("div", { key: '09f3a4f2248f23a33c36633405f9424df5f1c081', class: "content-expander", part: "content", role: "region" }, index.h("slot", { key: 'cd89c775566559a3ba66204faa9dfb382e21db7f' })))))));
+        return (index.h(index.Host, { key: 'f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { key: '606bb44e9fa98419f8fd9f9420dd62e3064fcc5a', class: "row" }, index.h("mds-progress", { key: '3e363d027812a2eb9cff973d3ea81f326314035d', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), index.h("div", { key: '4ae292499722ce850948fa3949f40e172fd92a14', class: "accordion" }, index.h("button", { key: '4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { key: 'bf254974e6152d598d0226ccca0a428287a9d5ab', typography: this.typography, part: "label" }, this.description), index.h("mds-text", { key: 'd37052b637bcba6a12ced512aa7b88f17563abe2', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, index.h("i", { key: '25586b3ab2f8e58a5af331f89ae536b2368b9ce4', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), index.h("div", { key: '5bd724442b895e7e11955efd03aaa976222f2f41', class: "content", id: "content" }, index.h("div", { key: '2bd7ec9dec71e2d53db9feb14bcace4431eade59', class: "content-expander", part: "content", role: "region" }, index.h("slot", { key: '8ce73094b72304c98807f4c1c1f9109652925444' })))))));
     }
@@ -59,0 +59,0 @@ static get watchers() { return {

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

@@ -5,7 +5,7 @@ 'use strict';
 
-const index = require('./index-0f3ba599.js');
+const index = require('./index-2df02342.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com
  */
@@ -12,0 +12,0 @@ var patchBrowser = () => {

dist/collection/collection-manifest.json

@@ -7,4 +7,4 @@ {
     "name": "@stencil/core",
-    "version": "4.21.0",
-    "typescriptVersion": "5.5.3"
+    "version": "4.22.2",
+    "typescriptVersion": "5.5.4"
   },
@@ -11,0 +11,0 @@ "collections": [],

dist/collection/common/locale.js

@@ -1,2 +0,2 @@
-import Handlebars from "handlebars";
+import { render } from "mustache";
 export class Locale {
@@ -8,4 +8,5 @@ constructor(configData) {
         };
-        this.lang = (element) => {
-            this.closestElement = element.closest('[lang]');
+        this.lang = (el) => {
+            this.element = el;
+            this.closestElement = this.element.closest('[lang]');
             if (this.closestElement) {
@@ -20,2 +21,14 @@ if (this.closestElement.lang) {
         };
+        this.update = (doc) => {
+            const context = doc !== null && doc !== void 0 ? doc : this.element.shadowRoot;
+            context && context.querySelectorAll('*').forEach(el => {
+                if (el.tagName.toLowerCase().startsWith('mds-')) {
+                    // eslint-disable-next-line no-restricted-syntax
+                    if (el && 'updateLang' in el) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        el.updateLang();
+                    }
+                }
+            });
+        };
         this.pluralize = (tag, context) => {
@@ -43,4 +56,3 @@ const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
             }
-            const template = Handlebars.compile(translatePhrase);
-            return template(context);
+            return render(translatePhrase, context);
         };
@@ -47,0 +59,0 @@ this.get = (tag, context) => {

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

@@ -48,3 +48,3 @@ import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
         var _a;
-        return (h(Host, { key: 'f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '606bb44e9fa98419f8fd9f9420dd62e3064fcc5a', class: "row" }, h("mds-progress", { key: '3e363d027812a2eb9cff973d3ea81f326314035d', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: '4ae292499722ce850948fa3949f40e172fd92a14', class: "accordion" }, h("button", { key: '4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'bf254974e6152d598d0226ccca0a428287a9d5ab', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: 'd37052b637bcba6a12ced512aa7b88f17563abe2', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '15be1fe70aac8dfe600beca7ab22b6aeac45d7bf', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '3cd4cbe8f3148a751b6eb05efa6f450ed93f30c3', class: "content", id: "content" }, h("div", { key: '09f3a4f2248f23a33c36633405f9424df5f1c081', class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'cd89c775566559a3ba66204faa9dfb382e21db7f' })))))));
+        return (h(Host, { key: 'f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '606bb44e9fa98419f8fd9f9420dd62e3064fcc5a', class: "row" }, h("mds-progress", { key: '3e363d027812a2eb9cff973d3ea81f326314035d', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: '4ae292499722ce850948fa3949f40e172fd92a14', class: "accordion" }, h("button", { key: '4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'bf254974e6152d598d0226ccca0a428287a9d5ab', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: 'd37052b637bcba6a12ced512aa7b88f17563abe2', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '25586b3ab2f8e58a5af331f89ae536b2368b9ce4', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '5bd724442b895e7e11955efd03aaa976222f2f41', class: "content", id: "content" }, h("div", { key: '2bd7ec9dec71e2d53db9feb14bcace4431eade59', class: "content-expander", part: "content", role: "region" }, h("slot", { key: '8ce73094b72304c98807f4c1c1f9109652925444' })))))));
     }
@@ -51,0 +51,0 @@ static get is() { return "mds-accordion-timer-item"; }

dist/collection/dictionary/button.js

@@ -7,2 +7,3 @@ const buttonVariantDictionary = [
     'primary',
+    'secondary',
     'success',
@@ -9,0 +10,0 @@ 'warning',

dist/collection/dictionary/variant.js

@@ -73,2 +73,11 @@ const themeVariantDictionary = [
 ];
+const themeVariantChipDictionary = [
+    'primary',
+    'secondary',
+    'dark',
+    'error',
+    'info',
+    'success',
+    'warning',
+];
 const toneActionVariantDictionary = [
@@ -96,2 +105,2 @@ 'primary',
 ];
-export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, themeVariantChipDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };

dist/collection/type/variant-file-format.js

@@ -18,101 +18,67 @@ import baselineFolderZip from "@icon/mi/baseline/folder-zip.svg";
     archive: {
-        color: 'fill-label-amaranth-04 text-label-amaranth-04',
         icon: baselineFolderZip,
-        iconBackground: 'bg-label-amaranth-10',
         variant: 'amaranth',
     },
     attachment: {
-        color: 'fill-tone-neutral-04 text-tone-neutral-04',
         icon: baselineAttachFile,
-        iconBackground: 'bg-tone-neutral-10',
         variant: 'dark',
     },
     audio: {
-        color: 'fill-label-violet-04 text-label-violet-04',
         icon: baselineAudiotrack,
-        iconBackground: 'bg-label-violet-10',
         variant: 'violet',
     },
     code: {
-        color: 'fill-label-yellow-04 text-label-yellow-04',
         icon: baselineTerminal,
-        iconBackground: 'bg-label-yellow-10',
         variant: 'yellow',
     },
     data: {
-        color: 'fill-label-yellow-04 text-label-yellow-04',
         icon: mdiHardDisk,
-        iconBackground: 'bg-label-yellow-10',
         variant: 'yellow',
     },
     document: {
-        color: 'fill-label-orange-04 text-label-orange-04',
         icon: baselineInsertDriveFile,
-        iconBackground: 'bg-label-orange-10',
         variant: 'orange',
     },
     email: {
-        color: 'fill-label-blue-04 text-label-blue-04',
         icon: baselineEmail,
-        iconBackground: 'bg-label-blue-10',
         variant: 'blue',
     },
     executable: {
-        color: 'fill-label-amaranth-04 text-label-amaranth-04',
         icon: baselineWysiwyg,
-        iconBackground: 'bg-label-amaranth-10',
         variant: 'amaranth',
     },
     image: {
-        color: 'fill-label-green-04 text-label-green-04',
         icon: baselinePanorama,
-        iconBackground: 'bg-label-green-10',
         variant: 'green',
     },
     imageRaster: {
-        color: 'fill-label-green-04 text-label-green-04',
         icon: baselinePanorama,
-        iconBackground: 'bg-label-green-10',
         variant: 'green',
     },
     markup: {
-        color: 'fill-label-yellow-04 text-label-yellow-04',
         icon: baselineWeb,
-        iconBackground: 'bg-label-yellow-10',
         variant: 'yellow',
     },
     slide: {
-        color: 'fill-label-orchid-04 text-label-orchid-04',
         icon: baselineTV,
-        iconBackground: 'bg-label-orchid-10',
         variant: 'orchid',
     },
     spreadsheet: {
-        color: 'fill-label-lime-04 text-label-lime-04',
         icon: baselineBorderAll,
-        iconBackground: 'bg-label-lime-10',
         variant: 'lime',
     },
     text: {
-        color: 'fill-label-blue-04 text-label-blue-04',
         icon: baselineDescription,
-        iconBackground: 'bg-label-blue-10',
         variant: 'blue',
     },
     vectorImage: {
-        color: 'fill-label-aqua-04 text-label-aqua-04',
         icon: mdiVectorCurve,
-        iconBackground: 'bg-label-aqua-10',
         variant: 'aqua',
     },
     vector: {
-        color: 'fill-label-aqua-04 text-label-aqua-04',
         icon: mdiVectorCurve,
-        iconBackground: 'bg-label-aqua-10',
         variant: 'aqua',
     },
     video: {
-        color: 'fill-label-violet-04 text-label-violet-04',
         icon: baselineVideocam,
-        iconBackground: 'bg-label-violet-10',
         variant: 'violet',
@@ -119,0 +85,0 @@ },

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

@@ -5,3 +5,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.focus-bounce--focused,\n  .focus-bounce:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.svg {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.svg svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 150ms;\n  transition-duration: 150ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n";
+const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.icon {\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n";
 const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
@@ -54,3 +54,3 @@
         var _a;
-        return (h(Host, { key: 'f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '606bb44e9fa98419f8fd9f9420dd62e3064fcc5a', class: "row" }, h("mds-progress", { key: '3e363d027812a2eb9cff973d3ea81f326314035d', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: '4ae292499722ce850948fa3949f40e172fd92a14', class: "accordion" }, h("button", { key: '4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'bf254974e6152d598d0226ccca0a428287a9d5ab', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: 'd37052b637bcba6a12ced512aa7b88f17563abe2', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '15be1fe70aac8dfe600beca7ab22b6aeac45d7bf', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '3cd4cbe8f3148a751b6eb05efa6f450ed93f30c3', class: "content", id: "content" }, h("div", { key: '09f3a4f2248f23a33c36633405f9424df5f1c081', class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'cd89c775566559a3ba66204faa9dfb382e21db7f' })))))));
+        return (h(Host, { key: 'f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '606bb44e9fa98419f8fd9f9420dd62e3064fcc5a', class: "row" }, h("mds-progress", { key: '3e363d027812a2eb9cff973d3ea81f326314035d', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: '4ae292499722ce850948fa3949f40e172fd92a14', class: "accordion" }, h("button", { key: '4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'bf254974e6152d598d0226ccca0a428287a9d5ab', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: 'd37052b637bcba6a12ced512aa7b88f17563abe2', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '25586b3ab2f8e58a5af331f89ae536b2368b9ce4', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '5bd724442b895e7e11955efd03aaa976222f2f41', class: "content", id: "content" }, h("div", { key: '2bd7ec9dec71e2d53db9feb14bcace4431eade59', class: "content-expander", part: "content", role: "region" }, h("slot", { key: '8ce73094b72304c98807f4c1c1f9109652925444' })))))));
     }
@@ -57,0 +57,0 @@ static get watchers() { return {

dist/documentation.json

 {
-  "timestamp": "2024-10-18T15:59:48",
+  "timestamp": "2024-11-25T17:13:33",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.21.0",
-    "typescriptVersion": "5.5.3"
+    "version": "4.22.2",
+    "typescriptVersion": "5.5.4"
   },
@@ -8,0 +8,0 @@ "components": [

dist/esm-es5/loader.js

@@ -1,1 +0,1 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{u(r.next(e))}catch(e){o(e)}}function c(e){try{u(r["throw"](e))}catch(e){o(e)}}function u(e){e.done?n(e.value):i(e.value).then(a,c)}u((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(e){return function(t){return u([e,t])}}function u(c){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(r=1,i&&(o=c[0]&2?i["return"]:c[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,c[1])).done)return o;if(i=0,o)c=[c[0]&2,o.value];switch(c[0]){case 0:case 1:o=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;i=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!o||c[1]>o[0]&&c[1]<o[3])){n.label=c[1];break}if(c[0]===6&&n.label<o[1]){n.label=o[1];o=c;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(c);break}if(o[2])n.ops.pop();n.trys.pop();continue}c=t.call(e,n)}catch(e){c=[6,e];i=0}finally{r=o=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-340223f3.js";export{s as setNonce}from"./index-340223f3.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(e,t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:e.sent();return[2,bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},null,{selected:["handleSelected"]}]]]],t)]}}))}))};export{defineCustomElements};
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{u(r.next(e))}catch(e){o(e)}}function c(e){try{u(r["throw"](e))}catch(e){o(e)}}function u(e){e.done?n(e.value):i(e.value).then(a,c)}u((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(e){return function(t){return u([e,t])}}function u(c){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(r=1,i&&(o=c[0]&2?i["return"]:c[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,c[1])).done)return o;if(i=0,o)c=[c[0]&2,o.value];switch(c[0]){case 0:case 1:o=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;i=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!o||c[1]>o[0]&&c[1]<o[3])){n.label=c[1];break}if(c[0]===6&&n.label<o[1]){n.label=o[1];o=c;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(c);break}if(o[2])n.ops.pop();n.trys.pop();continue}c=t.call(e,n)}catch(e){c=[6,e];i=0}finally{r=o=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-6fd47b7f.js";export{s as setNonce}from"./index-6fd47b7f.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(e,t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:e.sent();return[2,bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},null,{selected:["handleSelected"]}]]]],t)]}}))}))};export{defineCustomElements};

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

@@ -1,1 +0,1 @@
-import{r as registerInstance,c as createEvent,h,H as Host}from"./index-340223f3.js";var miBaselineKeyboardArrowDown='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>';var mdsAccordionTimerItemCss='@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.focus-bounce--focused,\n  .focus-bounce:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.svg {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.svg svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 150ms;\n  transition-duration: 150ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n}\n\n:host( [selected]:not([selected="false"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected="false"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected="false"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n';var MdsAccordionTimerItemStyle0=mdsAccordionTimerItemCss;var MdsAccordionTimerItem=function(){function n(n){var t=this;registerInstance(this,n);this.clickSelectEvent=createEvent(this,"mdsAccordionTimerItemClickSelect",7);this.selectEvent=createEvent(this,"mdsAccordionTimerItemSelect",7);this.selectedMouseEnterEvent=createEvent(this,"mdsAccordionTimerItemMouseEnterSelect",7);this.selectedMouseLeaveEvent=createEvent(this,"mdsAccordionTimerItemMouseLeaveSelect",7);this.toggle=function(){t.selected=!t.selected;t.progress=0;if(t.selected){t.clickSelectEvent.emit({selected:t.selected,uuid:t.uuid})}};this.mouseEnter=function(){if(t.selected){t.selectedMouseEnterEvent.emit({selected:t.selected,uuid:t.uuid})}};this.mouseLeave=function(){if(t.selected){t.selectedMouseLeaveEvent.emit({selected:t.selected,uuid:t.uuid})}};this.typography="h5";this.selected=false;this.description=undefined;this.duration=undefined;this.progress=0;this.uuid=0}n.prototype.handleSelected=function(n){this.progress=0;if(n){this.selectEvent.emit({selected:this.selected,uuid:this.uuid})}};n.prototype.render=function(){var n;return h(Host,{key:"f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},h("div",{key:"606bb44e9fa98419f8fd9f9420dd62e3064fcc5a",class:"row"},h("mds-progress",{key:"3e363d027812a2eb9cff973d3ea81f326314035d",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),h("div",{key:"4ae292499722ce850948fa3949f40e172fd92a14",class:"accordion"},h("button",{key:"4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},h("mds-text",{key:"bf254974e6152d598d0226ccca0a428287a9d5ab",typography:this.typography,part:"label"},this.description),h("mds-text",{key:"d37052b637bcba6a12ced512aa7b88f17563abe2","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},h("i",{key:"15be1fe70aac8dfe600beca7ab22b6aeac45d7bf",class:"svg icon",innerHTML:miBaselineKeyboardArrowDown}))),h("div",{key:"3cd4cbe8f3148a751b6eb05efa6f450ed93f30c3",class:"content",id:"content"},h("div",{key:"09f3a4f2248f23a33c36633405f9424df5f1c081",class:"content-expander",part:"content",role:"region"},h("slot",{key:"cd89c775566559a3ba66204faa9dfb382e21db7f"}))))))};Object.defineProperty(n,"watchers",{get:function(){return{selected:["handleSelected"]}},enumerable:false,configurable:true});return n}();MdsAccordionTimerItem.style=MdsAccordionTimerItemStyle0;export{MdsAccordionTimerItem as mds_accordion_timer_item};
+import{r as registerInstance,c as createEvent,h,H as Host}from"./index-6fd47b7f.js";var miBaselineKeyboardArrowDown='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>';var mdsAccordionTimerItemCss='@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.icon {\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host( [selected]:not([selected="false"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected="false"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected="false"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n';var MdsAccordionTimerItemStyle0=mdsAccordionTimerItemCss;var MdsAccordionTimerItem=function(){function n(n){var e=this;registerInstance(this,n);this.clickSelectEvent=createEvent(this,"mdsAccordionTimerItemClickSelect",7);this.selectEvent=createEvent(this,"mdsAccordionTimerItemSelect",7);this.selectedMouseEnterEvent=createEvent(this,"mdsAccordionTimerItemMouseEnterSelect",7);this.selectedMouseLeaveEvent=createEvent(this,"mdsAccordionTimerItemMouseLeaveSelect",7);this.toggle=function(){e.selected=!e.selected;e.progress=0;if(e.selected){e.clickSelectEvent.emit({selected:e.selected,uuid:e.uuid})}};this.mouseEnter=function(){if(e.selected){e.selectedMouseEnterEvent.emit({selected:e.selected,uuid:e.uuid})}};this.mouseLeave=function(){if(e.selected){e.selectedMouseLeaveEvent.emit({selected:e.selected,uuid:e.uuid})}};this.typography="h5";this.selected=false;this.description=undefined;this.duration=undefined;this.progress=0;this.uuid=0}n.prototype.handleSelected=function(n){this.progress=0;if(n){this.selectEvent.emit({selected:this.selected,uuid:this.uuid})}};n.prototype.render=function(){var n;return h(Host,{key:"f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},h("div",{key:"606bb44e9fa98419f8fd9f9420dd62e3064fcc5a",class:"row"},h("mds-progress",{key:"3e363d027812a2eb9cff973d3ea81f326314035d",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),h("div",{key:"4ae292499722ce850948fa3949f40e172fd92a14",class:"accordion"},h("button",{key:"4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},h("mds-text",{key:"bf254974e6152d598d0226ccca0a428287a9d5ab",typography:this.typography,part:"label"},this.description),h("mds-text",{key:"d37052b637bcba6a12ced512aa7b88f17563abe2","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},h("i",{key:"25586b3ab2f8e58a5af331f89ae536b2368b9ce4",class:"icon",innerHTML:miBaselineKeyboardArrowDown}))),h("div",{key:"5bd724442b895e7e11955efd03aaa976222f2f41",class:"content",id:"content"},h("div",{key:"2bd7ec9dec71e2d53db9feb14bcace4431eade59",class:"content-expander",part:"content",role:"region"},h("slot",{key:"8ce73094b72304c98807f4c1c1f9109652925444"}))))))};Object.defineProperty(n,"watchers",{get:function(){return{selected:["handleSelected"]}},enumerable:false,configurable:true});return n}();MdsAccordionTimerItem.style=MdsAccordionTimerItemStyle0;export{MdsAccordionTimerItem as mds_accordion_timer_item};

dist/esm-es5/mds-accordion-timer-item.js

@@ -1,1 +0,1 @@
-var __awaiter=this&&this.__awaiter||function(t,e,r,n){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,o){function a(t){try{s(n.next(t))}catch(t){o(t)}}function c(t){try{s(n["throw"](t))}catch(t){o(t)}}function s(t){t.done?r(t.value):i(t.value).then(a,c)}s((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(e){return s([t,e])}}function s(c){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(r=0)),r)try{if(n=1,i&&(o=c[0]&2?i["return"]:c[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,c[1])).done)return o;if(i=0,o)c=[c[0]&2,o.value];switch(c[0]){case 0:case 1:o=c;break;case 4:r.label++;return{value:c[1],done:false};case 5:r.label++;i=c[1];c=[0];continue;case 7:c=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(c[0]===6||c[0]===2)){r=0;continue}if(c[0]===3&&(!o||c[1]>o[0]&&c[1]<o[3])){r.label=c[1];break}if(c[0]===6&&r.label<o[1]){r.label=o[1];o=c;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(c);break}if(o[2])r.ops.pop();r.trys.pop();continue}c=e.call(t,r)}catch(t){c=[6,t];i=0}finally{n=o=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{p as promiseResolve,b as bootstrapLazy}from"./index-340223f3.js";export{s as setNonce}from"./index-340223f3.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var patchBrowser=function(){var t=import.meta.url;var e={};if(t!==""){e.resourcesUrl=new URL(".",t).href}return promiseResolve(e)};patchBrowser().then((function(t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,globalScripts()];case 1:e.sent();return[2,bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},null,{selected:["handleSelected"]}]]]],t)]}}))}))}));
+var __awaiter=this&&this.__awaiter||function(t,e,r,n){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,o){function a(t){try{s(n.next(t))}catch(t){o(t)}}function c(t){try{s(n["throw"](t))}catch(t){o(t)}}function s(t){t.done?r(t.value):i(t.value).then(a,c)}s((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(e){return s([t,e])}}function s(c){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(r=0)),r)try{if(n=1,i&&(o=c[0]&2?i["return"]:c[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,c[1])).done)return o;if(i=0,o)c=[c[0]&2,o.value];switch(c[0]){case 0:case 1:o=c;break;case 4:r.label++;return{value:c[1],done:false};case 5:r.label++;i=c[1];c=[0];continue;case 7:c=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(c[0]===6||c[0]===2)){r=0;continue}if(c[0]===3&&(!o||c[1]>o[0]&&c[1]<o[3])){r.label=c[1];break}if(c[0]===6&&r.label<o[1]){r.label=o[1];o=c;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(c);break}if(o[2])r.ops.pop();r.trys.pop();continue}c=e.call(t,r)}catch(t){c=[6,t];i=0}finally{n=o=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{p as promiseResolve,b as bootstrapLazy}from"./index-6fd47b7f.js";export{s as setNonce}from"./index-6fd47b7f.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var patchBrowser=function(){var t=import.meta.url;var e={};if(t!==""){e.resourcesUrl=new URL(".",t).href}return promiseResolve(e)};patchBrowser().then((function(t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,globalScripts()];case 1:e.sent();return[2,bootstrapLazy([["mds-accordion-timer-item",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},null,{selected:["handleSelected"]}]]]],t)]}}))}))}));

dist/esm/loader.js

@@ -1,3 +0,3 @@
-import { b as bootstrapLazy } from './index-340223f3.js';
-export { s as setNonce } from './index-340223f3.js';
+import { b as bootstrapLazy } from './index-6fd47b7f.js';
+export { s as setNonce } from './index-6fd47b7f.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
@@ -4,0 +4,0 @@

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

@@ -1,6 +0,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-340223f3.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6fd47b7f.js';
 
 const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
 
-const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n.focus-bounce {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.focus-bounce--focused,\n  .focus-bounce:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.svg {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.svg svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 150ms;\n  transition-duration: 150ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n";
+const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.icon {\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n";
 const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
@@ -51,3 +51,3 @@
         var _a;
-        return (h(Host, { key: 'f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '606bb44e9fa98419f8fd9f9420dd62e3064fcc5a', class: "row" }, h("mds-progress", { key: '3e363d027812a2eb9cff973d3ea81f326314035d', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: '4ae292499722ce850948fa3949f40e172fd92a14', class: "accordion" }, h("button", { key: '4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'bf254974e6152d598d0226ccca0a428287a9d5ab', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: 'd37052b637bcba6a12ced512aa7b88f17563abe2', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '15be1fe70aac8dfe600beca7ab22b6aeac45d7bf', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '3cd4cbe8f3148a751b6eb05efa6f450ed93f30c3', class: "content", id: "content" }, h("div", { key: '09f3a4f2248f23a33c36633405f9424df5f1c081', class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'cd89c775566559a3ba66204faa9dfb382e21db7f' })))))));
+        return (h(Host, { key: 'f363f2d7c13c1d90e95dd8c5a14c5fa8c63980bc', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '606bb44e9fa98419f8fd9f9420dd62e3064fcc5a', class: "row" }, h("mds-progress", { key: '3e363d027812a2eb9cff973d3ea81f326314035d', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: '4ae292499722ce850948fa3949f40e172fd92a14', class: "accordion" }, h("button", { key: '4a1ab0cf5bd58fc2c70a17e9ba6d99c09d2009f1', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'bf254974e6152d598d0226ccca0a428287a9d5ab', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: 'd37052b637bcba6a12ced512aa7b88f17563abe2', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '25586b3ab2f8e58a5af331f89ae536b2368b9ce4', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '5bd724442b895e7e11955efd03aaa976222f2f41', class: "content", id: "content" }, h("div", { key: '2bd7ec9dec71e2d53db9feb14bcace4431eade59', class: "content-expander", part: "content", role: "region" }, h("slot", { key: '8ce73094b72304c98807f4c1c1f9109652925444' })))))));
     }
@@ -54,0 +54,0 @@ static get watchers() { return {

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

@@ -1,7 +0,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-340223f3.js';
-export { s as setNonce } from './index-340223f3.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-6fd47b7f.js';
+export { s as setNonce } from './index-6fd47b7f.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
- Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com
  */
@@ -8,0 +8,0 @@ var patchBrowser = () => {

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

@@ -1,1 +0,1 @@
-import{p as e,b as t}from"./p-ed2f0efc.js";export{s as setNonce}from"./p-ed2f0efc.js";import{g as r}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await r(),t([["p-5090f932",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},null,{selected:["handleSelected"]}]]]],e))));
+import{p as e,b as t}from"./p-6869ca6c.js";export{s as setNonce}from"./p-6869ca6c.js";import{g as r}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await r(),t([["p-aee471c0",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},null,{selected:["handleSelected"]}]]]],e))));

dist/stats.json

 {
-  "timestamp": "2024-10-18T15:59:49",
+  "timestamp": "2024-11-25T17:13:33",
   "compiler": {
     "name": "node",
-    "version": "20.10.0"
+    "version": "22.11.0"
   },
@@ -12,7 +12,7 @@ "app": {
     "entries": 1,
-    "bundles": 93,
+    "bundles": 92,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 45,
+        "files": 44,
         "generatedFiles": [
@@ -49,3 +49,2 @@ "./dist/collection/common/aria.js",
           "./dist/collection/fixtures/filenames.js",
-          "./dist/collection/interface/input-value.js",
           "./dist/collection/type/autocomplete.js",
@@ -57,4 +56,4 @@ "./dist/collection/type/button.js",
           "./dist/collection/type/form-rel.js",
+          "./dist/collection/type/header-bar.js",
           "./dist/collection/type/input.js",
-          "./dist/collection/type/language.js",
           "./dist/collection/type/loading.js",
@@ -83,3 +82,3 @@ "./dist/collection/type/preference.js",
           "./dist/cjs/app-globals-3a1e7e63.js",
-          "./dist/cjs/index-0f3ba599.js",
+          "./dist/cjs/index-2df02342.js",
           "./dist/cjs/index.cjs.js",
@@ -90,3 +89,3 @@ "./dist/cjs/loader.cjs.js",
           "./dist/esm-es5/app-globals-0f993ce5.js",
-          "./dist/esm-es5/index-340223f3.js",
+          "./dist/esm-es5/index-6fd47b7f.js",
           "./dist/esm-es5/index.js",
@@ -97,3 +96,3 @@ "./dist/esm-es5/loader.js",
           "./dist/esm/app-globals-0f993ce5.js",
-          "./dist/esm/index-340223f3.js",
+          "./dist/esm/index-6fd47b7f.js",
           "./dist/esm/index.js",
@@ -108,21 +107,21 @@ "./dist/esm/loader.js",
           "./dist/mds-accordion-timer-item/mds-accordion-timer-item.js",
-          "./dist/mds-accordion-timer-item/p-22452181.system.js",
-          "./dist/mds-accordion-timer-item/p-5090f932.entry.js",
           "./dist/mds-accordion-timer-item/p-50ea2036.system.js",
           "./dist/mds-accordion-timer-item/p-56ba5cbf.system.js",
-          "./dist/mds-accordion-timer-item/p-afb2112c.system.js",
-          "./dist/mds-accordion-timer-item/p-c385a7ef.system.entry.js",
+          "./dist/mds-accordion-timer-item/p-6869ca6c.js",
+          "./dist/mds-accordion-timer-item/p-adf2d0be.system.js",
+          "./dist/mds-accordion-timer-item/p-aee471c0.entry.js",
+          "./dist/mds-accordion-timer-item/p-bb605e2f.system.entry.js",
+          "./dist/mds-accordion-timer-item/p-cc3b4ba1.system.js",
           "./dist/mds-accordion-timer-item/p-e1255160.js",
-          "./dist/mds-accordion-timer-item/p-ed2f0efc.js",
           "./www/build/index.esm.js",
           "./www/build/mds-accordion-timer-item.esm.js",
           "./www/build/mds-accordion-timer-item.js",
-          "./www/build/p-22452181.system.js",
-          "./www/build/p-5090f932.entry.js",
           "./www/build/p-50ea2036.system.js",
           "./www/build/p-56ba5cbf.system.js",
-          "./www/build/p-afb2112c.system.js",
-          "./www/build/p-c385a7ef.system.entry.js",
-          "./www/build/p-e1255160.js",
-          "./www/build/p-ed2f0efc.js"
+          "./www/build/p-6869ca6c.js",
+          "./www/build/p-adf2d0be.system.js",
+          "./www/build/p-aee471c0.entry.js",
+          "./www/build/p-bb605e2f.system.entry.js",
+          "./www/build/p-cc3b4ba1.system.js",
+          "./www/build/p-e1255160.js"
         ]
@@ -160,8 +159,8 @@ },
         ],
-        "bundleId": "p-5090f932",
-        "fileName": "p-5090f932.entry.js",
+        "bundleId": "p-aee471c0",
+        "fileName": "p-aee471c0.entry.js",
         "imports": [
-          "p-ed2f0efc.js"
+          "p-6869ca6c.js"
         ],
-        "originalByteSize": 14504
+        "originalByteSize": 8356
       }
@@ -178,5 +177,5 @@ ],
         "imports": [
-          "index-340223f3.js"
+          "index-6fd47b7f.js"
         ],
-        "originalByteSize": 14508
+        "originalByteSize": 8360
       }
@@ -193,5 +192,5 @@ ],
         "imports": [
-          "index-340223f3.js"
+          "index-6fd47b7f.js"
         ],
-        "originalByteSize": 14508
+        "originalByteSize": 8360
       }
@@ -205,8 +204,8 @@ ],
         ],
-        "bundleId": "p-c385a7ef.system",
-        "fileName": "p-c385a7ef.system.entry.js",
+        "bundleId": "p-bb605e2f.system",
+        "fileName": "p-bb605e2f.system.entry.js",
         "imports": [
-          "p-22452181.system.js"
+          "p-adf2d0be.system.js"
         ],
-        "originalByteSize": 15038
+        "originalByteSize": 8890
       }
@@ -223,5 +222,5 @@ ],
         "imports": [
-          "index-0f3ba599.js"
+          "index-2df02342.js"
         ],
-        "originalByteSize": 14638
+        "originalByteSize": 8490
       }
@@ -914,3 +913,3 @@ ]
     "sc-mds-accordion-timer-item": [
-      "p-ed2f0efc.js"
+      "p-6869ca6c.js"
     ]
@@ -961,3 +960,2 @@ },
     "./src/fixtures/filenames.ts": [],
-    "./src/interface/input-value.ts": [],
     "./src/type/autocomplete.ts": [],
@@ -969,4 +967,4 @@ "./src/type/button.ts": [],
     "./src/type/form-rel.ts": [],
+    "./src/type/header-bar.ts": [],
     "./src/type/input.ts": [],
-    "./src/type/language.ts": [],
     "./src/type/loading.ts": [],
@@ -973,0 +971,0 @@ "./src/type/preference.ts": [],

dist/types/common/date.d.ts

@@ -1,4 +0,4 @@
-import { ISO8601Date } from '@type/date';
+import { ISO8601Date } from "../type/date";
 declare const isISO8601Date: (dateString: string) => boolean;
 declare const sanitizeISO8601Date: (dateString: string) => ISO8601Date;
 export { sanitizeISO8601Date, isISO8601Date, };

dist/types/common/file.d.ts

@@ -1,7 +0,6 @@
-import { ExtensionInfo } from '@dictionary/file-extensions';
+import { ExtensionInfo } from "../dictionary/file-extensions";
+import { ThemeFullVariantType } from "../type/variant";
 interface FileFormatsVariants {
-    color: string;
     icon: string;
-    iconBackground: string;
-    variant: string;
+    variant: ThemeFullVariantType;
 }
@@ -8,0 +7,0 @@ declare const getName: (rawFilename: string) => string;

dist/types/common/locale.d.ts

@@ -12,5 +12,7 @@ type LocaleConfig = {
     closestElement: HTMLElement;
+    element: HTMLElement;
     constructor(configData?: LocaleConfig);
     set: (configData: LocaleConfig) => void;
-    lang: (element: HTMLElement) => string;
+    lang: (el: HTMLElement) => string;
+    update: (doc?: Document | ShadowRoot) => void;
     private pluralize;
@@ -17,0 +19,0 @@ get: (tag: string | string[], context?: Record<string, string | number>) => string;

dist/types/components.d.ts

@@ -8,5 +8,5 @@ /* eslint-disable */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { TypographyTitleType } from "@type/typography";
+import { TypographyTitleType } from "./type/typography";
 import { MdsAccordionTimerItemEventDetail } from "./components/mds-accordion-timer-item/meta/event-detail";
-export { TypographyTitleType } from "@type/typography";
+export { TypographyTitleType } from "./type/typography";
 export { MdsAccordionTimerItemEventDetail } from "./components/mds-accordion-timer-item/meta/event-detail";
@@ -13,0 +13,0 @@ export namespace Components {

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

 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsAccordionTimerItemEventDetail } from './meta/event-detail';
-import { TypographyTitleType } from '@type/typography';
+import { TypographyTitleType } from "../../type/typography";
 /**
@@ -5,0 +5,0 @@ * @slot default - Add content like `text string`, `HTML elements` or `components` to this slot

dist/types/dictionary/file-extensions.d.ts

@@ -0,1 +1,2 @@
+import { FileFormat } from "../type/variant-file-format";
 interface FileExtenstion {
@@ -6,3 +7,3 @@ [key: string]: ExtensionInfo;
     preview?: boolean;
-    format: string;
+    format: FileFormat;
     description: string;
@@ -9,0 +10,0 @@ }

dist/types/dictionary/variant.d.ts

@@ -8,2 +8,3 @@ declare const themeVariantDictionary: string[];
 declare const toneVariantDictionary: string[];
+declare const themeVariantChipDictionary: string[];
 declare const toneActionVariantDictionary: string[];
@@ -13,2 +14,2 @@ declare const toneSimpleVariantDictionary: string[];
 declare const toneMinimalVariantDictionary: string[];
-export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, themeVariantChipDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };

dist/types/type/autocomplete.d.ts

@@ -1,2 +0,2 @@
-export type AutocompleteType = 'additional-name' | 'address' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
+export type AutocompleteType = 'additional-name' | 'address' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
 export type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

dist/types/type/button.d.ts

@@ -5,2 +5,2 @@ export type ButtonType = 'a' | 'button' | 'reset' | 'submit';
 export type ButtonIconPositionType = 'left' | 'right';
-export type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';
+export type ButtonVariantType = 'primary' | 'secondary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';

dist/types/type/input.d.ts

@@ -5,1 +5,4 @@ export type InputControlsLayoutType = 'horizontal' | 'vertical';
 export type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
+export interface MdsInputEventDetail {
+    value?: File | string | FormData | null;
+}

dist/types/type/variant-file-format.d.ts

@@ -0,6 +1,6 @@
+import { ThemeFullVariantType } from "./variant";
+type FileFormat = 'archive' | 'attachment' | 'audio' | 'code' | 'data' | 'document' | 'email' | 'executable' | 'image' | 'markup' | 'slide' | 'spreadsheet' | 'text' | 'vector' | 'video';
 interface FileFormatVariant {
-    color: string;
     icon: string;
-    iconBackground: string;
-    variant: string;
+    variant: ThemeFullVariantType;
 }
@@ -11,2 +11,2 @@ interface FileFormatVariants {
 declare const fileFormatsVariant: FileFormatVariants;
-export { fileFormatsVariant, FileFormatVariant, FileFormatVariants, };
+export { fileFormatsVariant, FileFormat, FileFormatVariant, FileFormatVariants, };

dist/types/type/variant.d.ts

@@ -8,6 +8,7 @@ export type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
 export type ActionVariantType = 'primary' | 'dark' | 'light';
+export type ChipVariantType = 'primary' | 'secondary' | 'dark' | 'error' | 'info' | 'success' | 'warning';
 export type StateVariantType = 'disabled' | 'focused' | 'readonly';
-export type ToneActionVariantType = 'primary' | 'secondary' | 'tertiary' | 'strong' | 'weak' | 'ghost' | 'quiet';
+export type ToneActionVariantType = 'primary' | 'secondary' | 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneSimpleVariantType = 'quiet' | 'strong' | 'weak';
 export type ToneMinimalVariantType = 'strong' | 'weak';

documentation.json

 {
-  "timestamp": "2024-10-18T15:47:21",
+  "timestamp": "2024-11-25T16:00:58",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.21.0",
-    "typescriptVersion": "5.5.3"
+    "version": "4.22.2",
+    "typescriptVersion": "5.5.4"
   },
@@ -13,4 +13,4 @@ "components": [
       "tag": "mds-accordion-timer-item",
-      "readme": "# mds-accordion-timer-item\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.\n",
-      "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+      "readme": "# mds-accordion-timer-item\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
+      "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
       "docsTags": [
@@ -460,3 +460,3 @@ {
     "src/type/button.ts::ButtonVariantType": {
-      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
       "docstring": "",
@@ -475,2 +475,7 @@ "path": "src/type/button.ts"
     },
+    "src/type/variant.ts::ChipVariantType": {
+      "declaration": "export type ChipVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "docstring": "",
+      "path": "src/type/variant.ts"
+    },
     "src/components/mds-chip/meta/interface.ts::MdsChipEvent": {
@@ -517,3 +522,3 @@ "declaration": "interface MdsChipEvent {\n  event: Event\n  element: HTMLMdsChipElement\n}",
     "src/components/mds-file-preview/meta/event-detail.ts::MdsFilePreviewEventDetail": {
-      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFileElement\n}",
+      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFilePreviewElement\n}",
       "docstring": "",
@@ -532,7 +537,12 @@ "path": "src/components/mds-file-preview/meta/event-detail.ts"
     },
-    "src/components/mds-header-bar/meta/types.ts::MenuType": {
-      "declaration": "export type MenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
+    "src/type/header-bar.ts::HeaderBarMenuType": {
+      "declaration": "export type HeaderBarMenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
       "docstring": "",
-      "path": "src/components/mds-header-bar/meta/types.ts"
+      "path": "src/type/header-bar.ts"
     },
+    "src/type/header-bar.ts::HeaderBarNavType": {
+      "declaration": "export type HeaderBarNavType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
+      "docstring": "",
+      "path": "src/type/header-bar.ts"
+    },
     "src/components/mds-header/meta/event-detail.ts::MdsHeaderEventDetail": {
@@ -574,3 +584,3 @@ "declaration": "export interface MdsHeaderEventDetail {\n  bar: HTMLMdsHeaderBarElement\n}",
     "src/type/autocomplete.ts::AutocompleteType": {
-      "declaration": "export type AutocompleteType =\n  | 'additional-name'\n  | 'address'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization'\n  | 'organization-title'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'",
+      "declaration": "export type AutocompleteType =\n  | 'additional-name'\n  | 'address'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization'\n  | 'organization-title'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'",
       "docstring": "",
@@ -604,6 +614,6 @@ "path": "src/type/autocomplete.ts"
     },
-    "src/components/mds-input/meta/event-detail.ts::MdsInputEventDetail": {
-      "declaration": "export interface MdsInputEventDetail {\n  value?: string\n}",
+    "src/type/input.ts::MdsInputEventDetail": {
+      "declaration": "export interface MdsInputEventDetail {\n  value?: File | string | FormData | null\n}",
       "docstring": "",
-      "path": "src/components/mds-input/meta/event-detail.ts"
+      "path": "src/type/input.ts"
     },
@@ -625,7 +635,2 @@ "src/components/mds-input-field/meta/types.ts::InputFieldType": {
     },
-    "src/interface/input-value.ts::InputValue": {
-      "declaration": "export interface InputValue {\n  value: InputValueType\n}",
-      "docstring": "",
-      "path": "src/interface/input-value.ts"
-    },
     "src/components/mds-input-switch/meta/types.ts::InputSwitchSizeType": {
@@ -677,6 +682,11 @@ "declaration": "export type InputSwitchSizeType =\n  | 'sm'\n  | 'md'\n  | 'lg'",
     "src/components/mds-modal/meta/types.ts::ModalPositionType": {
-      "declaration": "export type ModalPositionType =\n  | 'bottom'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top'",
+      "declaration": "export type ModalPositionType =\n  | 'bottom'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'top-left'\n  | 'top-right'",
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
+    "src/components/mds-modal/meta/types.ts::ModalAnimationStateType": {
+      "declaration": "export type ModalAnimationStateType =\n  | 'intro'\n  | 'none'\n  | 'outro'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
     "src/type/variant.ts::LabelVariantType": {
@@ -717,17 +727,7 @@ "declaration": "export type LabelVariantType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'green'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'sky'\n  | 'violet'\n  | 'yellow'",
     },
-    "src/type/language.ts::PrefLanguageType": {
-      "declaration": "export type PrefLanguageType =\n  | 'auto'\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
-      "docstring": "",
-      "path": "src/type/language.ts"
-    },
     "src/event-detail/language.ts::MdsPrefLanguageEventDetail": {
-      "declaration": "export interface MdsPrefLanguageEventDetail {\n  language?: LanguageType\n}",
+      "declaration": "export interface MdsPrefLanguageEventDetail {\n  /* A string representing the language version as defined in {@link https://datatracker.ietf.org/doc/html/rfc5646 RFC 5646: Tags for Identifying Languages (also known as BCP 47)}.\n   *\n   * `Examples of valid language codes include \"en\", \"en-US\", \"fr\", \"fr-FR\", \"es-ES\", etc.`\n   */\n  language?: string\n}",
       "docstring": "",
       "path": "src/event-detail/language.ts"
     },
-    "src/type/language.ts::LanguageType": {
-      "declaration": "export type LanguageType =\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
-      "docstring": "",
-      "path": "src/type/language.ts"
-    },
     "src/components/mds-pref-theme/meta/types.ts::ThemeModeType": {
@@ -734,0 +734,0 @@ "declaration": "export type ThemeModeType =\n  | 'light'\n  | 'dark'\n  | 'system'",

package.json

 {
   "name": "@maggioli-design-system/mds-accordion-timer-item",
-  "version": "3.10.3",
-  "description": "mds-accordion-timer-item is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+  "version": "4.0.0",
+  "description": "mds-accordion-timer-item is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
@@ -27,6 +27,6 @@ "module": "dist/index.js",
   "dependencies": {
-    "@maggioli-design-system/mds-progress": "2.10.3",
-    "@maggioli-design-system/mds-text": "4.4.3",
-    "@maggioli-design-system/styles": "15.3.2",
-    "@stencil/core": "4.21.0"
+    "@maggioli-design-system/mds-progress": "3.0.0",
+    "@maggioli-design-system/mds-text": "4.5.1",
+    "@maggioli-design-system/styles": "15.5.0",
+    "@stencil/core": "4.22.2"
   },
@@ -33,0 +33,0 @@ "license": "MIT",

readme.md

@@ -5,3 +5,3 @@ # mds-accordion-timer-item
 
-This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
+This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
 
@@ -50,2 +50,13 @@ <!-- Auto Generated Below -->
 
+## CSS Custom Properties
+
+| Name                                                 | Description                                                             |
+| ---------------------------------------------------- | ----------------------------------------------------------------------- |
+| `--mds-accordion-timer-item-color`                   | Sets the text color of the component                                    |
+| `--mds-accordion-timer-item-duration`                | Sets the transition duration of open/close animation                    |
+| `--mds-accordion-timer-item-progress-bar-background` | Sets the background-color of the progress bar when the item is selected |
+| `--mds-accordion-timer-item-progress-bar-color`      | Sets the color of the progress bar when the item is selected            |
+| `--mds-accordion-timer-item-progress-bar-thickness`  | Sets thickness of the progress bar                                      |
+
+
 ## Dependencies
@@ -52,0 +63,0 @@

src/common/file.ts

 import { fileExtensionsDictionary, ExtensionInfo } from '@dictionary/file-extensions'
 import { fileFormatsVariant } from '@type/variant-file-format'
+import { ThemeFullVariantType } from '@type/variant'
 
 interface FileFormatsVariants {
-  color: string
   icon: string
-  iconBackground: string
-  variant: string
+  variant: ThemeFullVariantType
 }
@@ -10,0 +9,0 @@

src/common/locale.ts

@@ -1,2 +0,2 @@
-import Handlebars from 'handlebars'
+import { render } from 'mustache'
 
@@ -15,2 +15,3 @@ type LocaleConfig = {
   closestElement:HTMLElement
+  element: HTMLElement
 
@@ -27,4 +28,5 @@ constructor (configData?: LocaleConfig) {
 
-  lang = (element: HTMLElement): string => {
-    this.closestElement = element.closest('[lang]') as HTMLElement
+  lang = (el: HTMLElement): string => {
+    this.element = el
+    this.closestElement = this.element.closest('[lang]') as HTMLElement
 
@@ -42,2 +44,15 @@ if (this.closestElement) {
 
+  update = (doc?: Document | ShadowRoot): void => {
+    const context = doc ?? this.element.shadowRoot
+    context && context.querySelectorAll('*').forEach(el => {
+      if (el.tagName.toLowerCase().startsWith('mds-')) {
+        // eslint-disable-next-line no-restricted-syntax
+        if (el && 'updateLang' in el) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (el as any).updateLang()
+        }
+      }
+    })
+  }
+
   private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
@@ -47,3 +62,3 @@
     const phrases: string[] = []
-    
+
     if (Array.isArray(languagePhrase)) {
@@ -70,4 +85,3 @@ phrases.push(languagePhrase[0])
 
-    const template = Handlebars.compile(translatePhrase)
-    return template(context)
+    return render(translatePhrase, context)
   }
@@ -74,0 +88,0 @@

src/common/unit.ts

@@ -26,3 +26,3 @@ const cssDurationToMilliseconds = (duration: string, defaultValue = 1000): number => {
   }
-  
+
   return defaultValue
@@ -29,0 +29,0 @@ }

src/components.d.ts

@@ -8,5 +8,5 @@ /* eslint-disable */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { TypographyTitleType } from "@type/typography";
+import { TypographyTitleType } from "./type/typography";
 import { MdsAccordionTimerItemEventDetail } from "./components/mds-accordion-timer-item/meta/event-detail";
-export { TypographyTitleType } from "@type/typography";
+export { TypographyTitleType } from "./type/typography";
 export { MdsAccordionTimerItemEventDetail } from "./components/mds-accordion-timer-item/meta/event-detail";
@@ -13,0 +13,0 @@ export namespace Components {

src/dictionary/button.ts

@@ -7,2 +7,3 @@ const buttonVariantDictionary = [
   'primary',
+  'secondary',
   'success',
@@ -9,0 +10,0 @@ 'warning',

src/dictionary/file-extensions.ts

@@ -0,1 +1,3 @@
+import { FileFormat } from '@type/variant-file-format'
+
 interface FileExtenstion {
@@ -7,3 +9,3 @@ [key: string]: ExtensionInfo
   preview?: boolean
-  format: string
+  format: FileFormat
   description: string
@@ -10,0 +12,0 @@ }

src/dictionary/variant.ts

@@ -80,2 +80,12 @@ const themeVariantDictionary = [
 
+const themeVariantChipDictionary = [
+  'primary',
+  'secondary',
+  'dark',
+  'error',
+  'info',
+  'success',
+  'warning',
+]
+
 const toneActionVariantDictionary = [
@@ -114,2 +124,3 @@ 'primary',
   themeVariantDictionary,
+  themeVariantChipDictionary,
   toneActionVariantDictionary,
@@ -116,0 +127,0 @@ toneMinimalVariantDictionary,

src/fixtures/icons.json

@@ -45,2 +45,3 @@ [
     "mgg/alerts-pagopa",
+    "mgg/anpr",
     "mgg/ansc",
@@ -302,2 +303,3 @@ "mgg/area-edificabile",
     "mgg/view-side-by-side",
+    "mgg/vote",
     "mgg/warning-superscript",
@@ -333,2 +335,4 @@ "mgg/web-app-ansc",
     "mi/baseline/description",
+    "mi/baseline/directions-run",
+    "mi/baseline/directions-walk",
     "mi/baseline/done",
@@ -342,3 +346,2 @@ "mi/baseline/downhill-skiing",
     "mi/baseline/folder-zip",
-    "mi/baseline/groups",
     "mi/baseline/horizontal-rule",
@@ -365,2 +368,5 @@ "mi/baseline/indeterminate-check-box",
     "mi/baseline/settings",
+    "mi/baseline/sports",
+    "mi/baseline/sports-soccer",
+    "mi/baseline/stadium",
     "mi/baseline/terminal",
@@ -384,3 +390,2 @@ "mi/baseline/timer",
     "mi/round/email",
-    "mi/round/groups",
     "mi/round/menu",
@@ -387,0 +392,0 @@ "mi/round/more-vert",

src/fixtures/iconsauce.json

@@ -33,2 +33,3 @@ [
     "mgg/alerts-pagopa",
+    "mgg/anpr",
     "mgg/ansc",
@@ -290,2 +291,3 @@ "mgg/area-edificabile",
     "mgg/view-side-by-side",
+    "mgg/vote",
     "mgg/warning-superscript",
@@ -292,0 +294,0 @@ "mgg/web-app-ansc",

src/type/autocomplete.ts

@@ -21,3 +21,2 @@ export type AutocompleteType =
   | 'cc-family-name'
-  | 'cc-family-name'
   | 'cc-given-name'
@@ -24,0 +23,0 @@ | 'cc-name'

src/type/button.ts

@@ -23,2 +23,3 @@ export type ButtonType =
   | 'primary'
+  | 'secondary'
   | 'dark'
@@ -25,0 +26,0 @@ | 'light'

src/type/input.ts

@@ -26,1 +26,5 @@ export type InputControlsLayoutType =
   | 'url'
+
+export interface MdsInputEventDetail {
+  value?: File | string | FormData | null
+}

src/type/variant-file-format.ts

@@ -16,8 +16,24 @@ import baselineFolderZip from '@icon/mi/baseline/folder-zip.svg'
 import baselineVideocam from '@icon/mi/baseline/videocam.svg'
+import { ThemeFullVariantType } from '@type/variant'
 
+type FileFormat =
+  | 'archive'
+  | 'attachment'
+  | 'audio'
+  | 'code'
+  | 'data'
+  | 'document'
+  | 'email'
+  | 'executable'
+  | 'image'
+  | 'markup'
+  | 'slide'
+  | 'spreadsheet'
+  | 'text'
+  | 'vector'
+  | 'video'
+
 interface FileFormatVariant {
-  color: string
   icon: string
-  iconBackground: string
-  variant: string
+  variant: ThemeFullVariantType
 }
@@ -31,101 +47,67 @@
   archive: {
-    color: 'fill-label-amaranth-04 text-label-amaranth-04',
     icon: baselineFolderZip,
-    iconBackground: 'bg-label-amaranth-10',
     variant: 'amaranth',
   },
   attachment: {
-    color: 'fill-tone-neutral-04 text-tone-neutral-04',
     icon: baselineAttachFile,
-    iconBackground: 'bg-tone-neutral-10',
     variant: 'dark',
   },
   audio: {
-    color: 'fill-label-violet-04 text-label-violet-04',
     icon: baselineAudiotrack,
-    iconBackground: 'bg-label-violet-10',
     variant: 'violet',
   },
   code: {
-    color: 'fill-label-yellow-04 text-label-yellow-04',
     icon: baselineTerminal,
-    iconBackground: 'bg-label-yellow-10',
     variant: 'yellow',
   },
   data: {
-    color: 'fill-label-yellow-04 text-label-yellow-04',
     icon: mdiHardDisk,
-    iconBackground: 'bg-label-yellow-10',
     variant: 'yellow',
   },
   document: {
-    color: 'fill-label-orange-04 text-label-orange-04',
     icon: baselineInsertDriveFile,
-    iconBackground: 'bg-label-orange-10',
     variant: 'orange',
   },
   email: {
-    color: 'fill-label-blue-04 text-label-blue-04',
     icon: baselineEmail,
-    iconBackground: 'bg-label-blue-10',
     variant: 'blue',
   },
   executable: {
-    color: 'fill-label-amaranth-04 text-label-amaranth-04',
     icon: baselineWysiwyg,
-    iconBackground: 'bg-label-amaranth-10',
     variant: 'amaranth',
   },
   image: {
-    color: 'fill-label-green-04 text-label-green-04',
     icon: baselinePanorama,
-    iconBackground: 'bg-label-green-10',
     variant: 'green',
   },
   imageRaster: {
-    color: 'fill-label-green-04 text-label-green-04',
     icon: baselinePanorama,
-    iconBackground: 'bg-label-green-10',
     variant: 'green',
   },
   markup: {
-    color: 'fill-label-yellow-04 text-label-yellow-04',
     icon: baselineWeb,
-    iconBackground: 'bg-label-yellow-10',
     variant: 'yellow',
   },
   slide: {
-    color: 'fill-label-orchid-04 text-label-orchid-04',
     icon: baselineTV,
-    iconBackground: 'bg-label-orchid-10',
     variant: 'orchid',
   },
   spreadsheet: {
-    color: 'fill-label-lime-04 text-label-lime-04',
     icon: baselineBorderAll,
-    iconBackground: 'bg-label-lime-10',
     variant: 'lime',
   },
   text: {
-    color: 'fill-label-blue-04 text-label-blue-04',
     icon: baselineDescription,
-    iconBackground: 'bg-label-blue-10',
     variant: 'blue',
   },
   vectorImage: {
-    color: 'fill-label-aqua-04 text-label-aqua-04',
     icon: mdiVectorCurve,
-    iconBackground: 'bg-label-aqua-10',
     variant: 'aqua',
   },
   vector: {
-    color: 'fill-label-aqua-04 text-label-aqua-04',
     icon: mdiVectorCurve,
-    iconBackground: 'bg-label-aqua-10',
     variant: 'aqua',
   },
   video: {
-    color: 'fill-label-violet-04 text-label-violet-04',
     icon: baselineVideocam,
-    iconBackground: 'bg-label-violet-10',
     variant: 'violet',
@@ -137,4 +119,5 @@ },
   fileFormatsVariant,
+  FileFormat,
   FileFormatVariant,
   FileFormatVariants,
 }

src/type/variant.ts

@@ -72,2 +72,11 @@ export type ThemeStatusVariantType =
 
+export type ChipVariantType =
+  | 'primary'
+  | 'secondary'
+  | 'dark'
+  | 'error'
+  | 'info'
+  | 'success'
+  | 'warning'
+
 export type StateVariantType =
@@ -81,3 +90,2 @@ | 'disabled'
   | 'secondary' // background weak
-  | 'tertiary' // no background, no border
   | 'strong' // background strong
@@ -84,0 +92,0 @@ | 'weak' // background weak

www/build/mds-accordion-timer-item.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as t}from"./p-ed2f0efc.js";export{s as setNonce}from"./p-ed2f0efc.js";import{g as r}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await r(),t([["p-5090f932",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},null,{selected:["handleSelected"]}]]]],e))));
+import{p as e,b as t}from"./p-6869ca6c.js";export{s as setNonce}from"./p-6869ca6c.js";import{g as r}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await r(),t([["p-aee471c0",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},null,{selected:["handleSelected"]}]]]],e))));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

78

increased by16.42%

Worsened metrics

Total package byte prevSize

931027

decreased by-5.23%

Number of package files

209

decreased by-1.42%

Lines of code

13547

decreased by-1.26%

Dependency changes

• + Added@fontsource/karla@5.1.0(transitive)

• + Added@fontsource/merriweather@5.1.0(transitive)

• + Added@fontsource/roboto@5.1.0(transitive)

• + Added@fontsource/roboto-mono@5.1.0(transitive)

• + Added@maggioli-design-system/design-tokens@13.5.0(transitive)

• + Added@maggioli-design-system/mds-progress@3.0.0(transitive)

• + Added@maggioli-design-system/mds-text@4.5.1(transitive)

• + Added@maggioli-design-system/styles@15.5.0(transitive)

• + Added@stencil/core@4.22.2(transitive)

• - Removed@fontsource/karla@5.0.19(transitive)

• - Removed@fontsource/merriweather@5.0.12(transitive)

• - Removed@fontsource/roboto@5.0.12(transitive)

• - Removed@fontsource/roboto-mono@5.0.17(transitive)

• - Removed@maggioli-design-system/design-tokens@13.2.0(transitive)

• - Removed@maggioli-design-system/mds-progress@2.10.3(transitive)

• - Removed@maggioli-design-system/mds-text@4.4.3(transitive)

• - Removed@maggioli-design-system/styles@15.3.2(transitive)

• - Removed@stencil/core@4.21.0(transitive)

• Updated@maggioli-design-system/mds-progress@3.0.0

• Updated@maggioli-design-system/mds-text@4.5.1

• Updated@maggioli-design-system/styles@15.5.0

• Updated@stencil/core@4.22.2