@maggioli-design-system/mds-accordion-timer-item 3.10.0 → 3.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/cjs/mds-accordion-timer-item.cjs.entry.js +2 -2
  2. package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.css +6 -6
  3. package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.js +1 -1
  4. package/dist/components/mds-accordion-timer-item.js +2 -2
  5. package/dist/documentation.json +1 -1
  6. package/dist/esm/mds-accordion-timer-item.entry.js +2 -2
  7. package/dist/esm-es5/mds-accordion-timer-item.entry.js +1 -1
  8. package/dist/mds-accordion-timer-item/mds-accordion-timer-item.esm.js +1 -1
  9. package/dist/mds-accordion-timer-item/p-0ebb48b0.system.js +1 -1
  10. package/dist/mds-accordion-timer-item/p-883cd929.entry.js +1 -0
  11. package/dist/mds-accordion-timer-item/p-f2a0f7e2.system.entry.js +1 -0
  12. package/dist/stats.json +15 -15
  13. package/documentation.json +1 -1
  14. package/package.json +1 -1
  15. package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.css +6 -6
  16. package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.tsx +1 -1
  17. package/www/build/mds-accordion-timer-item.esm.js +1 -1
  18. package/www/build/p-0ebb48b0.system.js +1 -1
  19. package/www/build/p-883cd929.entry.js +1 -0
  20. package/www/build/p-f2a0f7e2.system.entry.js +1 -0
  21. package/dist/mds-accordion-timer-item/p-90968b6b.entry.js +0 -1
  22. package/dist/mds-accordion-timer-item/p-b9499805.system.entry.js +0 -1
  23. package/www/build/p-90968b6b.entry.js +0 -1
  24. package/www/build/p-b9499805.system.entry.js +0 -1
package/dist/cjs/mds-accordion-timer-item.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-e153727a.js');
6
6
 
7
7
  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>`;
8
8
 
9
- 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:host( [selected] ) .action {\n cursor: auto;\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] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .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";
9
+ 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";
10
10
  const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
11
11
 
12
12
  const MdsAccordionTimerItem = class {
@@ -45,7 +45,7 @@ const MdsAccordionTimerItem = class {
45
45
  }
46
46
  render() {
47
47
  var _a;
48
- return (index.h(index.Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, index.h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', 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: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, index.h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "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: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), index.h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, index.h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), index.h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, index.h("div", { key: '6ded043b63fca24db7cf974251858d7d794e7fd9', class: "content-expander", part: "content" }, index.h("slot", { key: 'f855b620cd8515fc619e5b4de6f9d683c4677f7e' })))))));
48
+ return (index.h(index.Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, index.h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', 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: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, index.h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "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: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), index.h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, index.h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), index.h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, index.h("div", { key: 'e6a1e64638bf9420ce8c0d59857e660ab9240f39', class: "content-expander", part: "content", role: "region" }, index.h("slot", { key: 'fea26587f0c4589f8b207dda75e616e806f9299f' })))))));
49
49
  }
50
50
  };
51
51
  MdsAccordionTimerItem.style = MdsAccordionTimerItemStyle0;
package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.css CHANGED
@@ -103,10 +103,6 @@
103
103
  text-align: left;
104
104
  }
105
105
 
106
- :host( [selected] ) .action {
107
- cursor: auto;
108
- }
109
-
110
106
  .content {
111
107
  gap: 1rem;
112
108
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
@@ -135,11 +131,15 @@
135
131
  transform: rotate(180deg);
136
132
  }
137
133
 
138
- :host( [selected] ) .icon {
134
+ :host( [selected]:not([selected="false"]) ) .action {
135
+ cursor: auto;
136
+ }
137
+
138
+ :host( [selected]:not([selected="false"]) ) .icon {
139
139
  transform: rotate(0deg);
140
140
  }
141
141
 
142
- :host( [selected] ) .content {
142
+ :host( [selected]:not([selected="false"]) ) .content {
143
143
  padding-top: 1rem;
144
144
  opacity: 1;
145
145
 
package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.js CHANGED
@@ -39,7 +39,7 @@ export class MdsAccordionTimerItem {
39
39
  }
40
40
  render() {
41
41
  var _a;
42
- return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "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: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: '6ded043b63fca24db7cf974251858d7d794e7fd9', class: "content-expander", part: "content" }, h("slot", { key: 'f855b620cd8515fc619e5b4de6f9d683c4677f7e' })))))));
42
+ return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "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: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: 'e6a1e64638bf9420ce8c0d59857e660ab9240f39', class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'fea26587f0c4589f8b207dda75e616e806f9299f' })))))));
43
43
  }
44
44
  static get is() { return "mds-accordion-timer-item"; }
45
45
  static get encapsulation() { return "shadow"; }
package/dist/components/mds-accordion-timer-item.js CHANGED
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
2
2
 
3
3
  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>`;
4
4
 
5
- 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:host( [selected] ) .action {\n cursor: auto;\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] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .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";
5
+ 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";
6
6
  const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
7
7
 
8
8
  const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionTimerItem extends HTMLElement {
@@ -43,7 +43,7 @@ const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccord
43
43
  }
44
44
  render() {
45
45
  var _a;
46
- return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "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: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: '6ded043b63fca24db7cf974251858d7d794e7fd9', class: "content-expander", part: "content" }, h("slot", { key: 'f855b620cd8515fc619e5b4de6f9d683c4677f7e' })))))));
46
+ return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "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: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: 'e6a1e64638bf9420ce8c0d59857e660ab9240f39', class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'fea26587f0c4589f8b207dda75e616e806f9299f' })))))));
47
47
  }
48
48
  static get style() { return MdsAccordionTimerItemStyle0; }
49
49
  }, [1, "mds-accordion-timer-item", {
package/dist/documentation.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-10-17T13:56:09",
2
+ "timestamp": "2024-10-17T17:45:59",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.21.0",
package/dist/esm/mds-accordion-timer-item.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-b
2
2
 
3
3
  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>`;
4
4
 
5
- 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:host( [selected] ) .action {\n cursor: auto;\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] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .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";
5
+ 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";
6
6
  const MdsAccordionTimerItemStyle0 = mdsAccordionTimerItemCss;
7
7
 
8
8
  const MdsAccordionTimerItem = class {
@@ -41,7 +41,7 @@ const MdsAccordionTimerItem = class {
41
41
  }
42
42
  render() {
43
43
  var _a;
44
- return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "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: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: '6ded043b63fca24db7cf974251858d7d794e7fd9', class: "content-expander", part: "content" }, h("slot", { key: 'f855b620cd8515fc619e5b4de6f9d683c4677f7e' })))))));
44
+ return (h(Host, { key: '3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '9666c1af6081ba157218583b0c5cd3c819fa9c0a', class: "row" }, h("mds-progress", { key: '8a2b2cd58d22206a02ba36c951238ba31eb1dca5', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: 'dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5', class: "accordion" }, h("button", { key: '608a961e3b15dc480a45f1c22ec3c83d83aa590b', "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: 'cc91fbab8fa96df59a39680edaf2c5742c5565ea', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '36b97232d257a40ae7f50039009766ccb4b34a81', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'b55e4706a60870e6b3d03b5f2d90c04d3e4580e1', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '4735a20ffc00844e027df1468fd0476b911b7e60', class: "content", id: "content" }, h("div", { key: 'e6a1e64638bf9420ce8c0d59857e660ab9240f39', class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'fea26587f0c4589f8b207dda75e616e806f9299f' })))))));
45
45
  }
46
46
  };
47
47
  MdsAccordionTimerItem.style = MdsAccordionTimerItemStyle0;
package/dist/esm-es5/mds-accordion-timer-item.entry.js CHANGED
@@ -1 +1 @@
1
- import{r as registerInstance,c as createEvent,h,H as Host}from"./index-b53929ab.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:host( [selected] ) .action {\n cursor: auto;\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] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .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.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.render=function(){var n;return h(Host,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},h("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},h("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),h("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},h("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","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:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),h("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},h("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:miBaselineKeyboardArrowDown}))),h("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},h("div",{key:"6ded043b63fca24db7cf974251858d7d794e7fd9",class:"content-expander",part:"content"},h("slot",{key:"f855b620cd8515fc619e5b4de6f9d683c4677f7e"}))))))};return n}();MdsAccordionTimerItem.style=MdsAccordionTimerItemStyle0;export{MdsAccordionTimerItem as mds_accordion_timer_item};
1
+ import{r as registerInstance,c as createEvent,h,H as Host}from"./index-b53929ab.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.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.render=function(){var n;return h(Host,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},h("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},h("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),h("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},h("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","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:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),h("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},h("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:miBaselineKeyboardArrowDown}))),h("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},h("div",{key:"e6a1e64638bf9420ce8c0d59857e660ab9240f39",class:"content-expander",part:"content",role:"region"},h("slot",{key:"fea26587f0c4589f8b207dda75e616e806f9299f"}))))))};return n}();MdsAccordionTimerItem.style=MdsAccordionTimerItemStyle0;export{MdsAccordionTimerItem as mds_accordion_timer_item};
package/dist/mds-accordion-timer-item/mds-accordion-timer-item.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as r,b as o}from"./p-0fba0302.js";export{s as setNonce}from"./p-0fba0302.js";import{g as t}from"./p-e1255160.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),r(o)})().then((async r=>(await t(),o([["p-90968b6b",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],r))));
1
+ import{p as r,b as o}from"./p-0fba0302.js";export{s as setNonce}from"./p-0fba0302.js";import{g as t}from"./p-e1255160.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),r(o)})().then((async r=>(await t(),o([["p-883cd929",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],r))));
package/dist/mds-accordion-timer-item/p-0ebb48b0.system.js CHANGED
@@ -1 +1 @@
1
- var __awaiter=this&&this.__awaiter||function(t,n,e,r){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,u){function o(t){try{a(r.next(t))}catch(t){u(t)}}function c(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?e(t.value):i(t.value).then(o,c)}a((r=r.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,o;return o={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function c(t){return function(n){return a([t,n])}}function a(c){if(r)throw new TypeError("Generator is already executing.");while(o&&(o=0,c[0]&&(e=0)),e)try{if(r=1,i&&(u=c[0]&2?i["return"]:c[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,c[1])).done)return u;if(i=0,u)c=[c[0]&2,u.value];switch(c[0]){case 0:case 1:u=c;break;case 4:e.label++;return{value:c[1],done:false};case 5:e.label++;i=c[1];c=[0];continue;case 7:c=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(c[0]===6||c[0]===2)){e=0;continue}if(c[0]===3&&(!u||c[1]>u[0]&&c[1]<u[3])){e.label=c[1];break}if(c[0]===6&&e.label<u[1]){e.label=u[1];u=c;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(c);break}if(u[2])e.ops.pop();e.trys.pop();continue}c=n.call(t,e)}catch(t){c=[6,t];i=0}finally{r=u=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./p-9974040b.system.js","./p-56ba5cbf.system.js"],(function(t,n){"use strict";var e,r,i;return{setters:[function(n){e=n.p;r=n.b;t("setNonce",n.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=n.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return e(r)};u().then((function(n){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-b9499805.system",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],n)]}}))}))}))}}}));
1
+ var __awaiter=this&&this.__awaiter||function(t,n,e,r){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,u){function o(t){try{a(r.next(t))}catch(t){u(t)}}function c(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?e(t.value):i(t.value).then(o,c)}a((r=r.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,o;return o={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function c(t){return function(n){return a([t,n])}}function a(c){if(r)throw new TypeError("Generator is already executing.");while(o&&(o=0,c[0]&&(e=0)),e)try{if(r=1,i&&(u=c[0]&2?i["return"]:c[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,c[1])).done)return u;if(i=0,u)c=[c[0]&2,u.value];switch(c[0]){case 0:case 1:u=c;break;case 4:e.label++;return{value:c[1],done:false};case 5:e.label++;i=c[1];c=[0];continue;case 7:c=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(c[0]===6||c[0]===2)){e=0;continue}if(c[0]===3&&(!u||c[1]>u[0]&&c[1]<u[3])){e.label=c[1];break}if(c[0]===6&&e.label<u[1]){e.label=u[1];u=c;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(c);break}if(u[2])e.ops.pop();e.trys.pop();continue}c=n.call(t,e)}catch(t){c=[6,t];i=0}finally{r=u=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./p-9974040b.system.js","./p-56ba5cbf.system.js"],(function(t,n){"use strict";var e,r,i;return{setters:[function(n){e=n.p;r=n.b;t("setNonce",n.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=n.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return e(r)};u().then((function(n){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-f2a0f7e2.system",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],n)]}}))}))}))}}}));
package/dist/mds-accordion-timer-item/p-883cd929.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as n,c as t,h as o,H as i}from"./p-0fba0302.js";const r=class{constructor(o){n(this,o),this.clickSelectEvent=t(this,"mdsAccordionTimerItemClickSelect",7),this.selectedMouseEnterEvent=t(this,"mdsAccordionTimerItemMouseEnterSelect",7),this.selectedMouseLeaveEvent=t(this,"mdsAccordionTimerItemMouseLeaveSelect",7),this.toggle=()=>{this.selected=!this.selected,this.progress=0,this.selected&&this.clickSelectEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseEnter=()=>{this.selected&&this.selectedMouseEnterEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseLeave=()=>{this.selected&&this.selectedMouseLeaveEvent.emit({selected:this.selected,uuid:this.uuid})},this.typography="h5",this.selected=!1,this.description=void 0,this.duration=void 0,this.progress=0,this.uuid=0}render(){var n;return o(i,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},o("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},o("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number(null===(n=this.progress)||void 0===n?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),o("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},o("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},o("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),o("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},o("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:'<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>'}))),o("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},o("div",{key:"e6a1e64638bf9420ce8c0d59857e660ab9240f39",class:"content-expander",part:"content",role:"region"},o("slot",{key:"fea26587f0c4589f8b207dda75e616e806f9299f"}))))))}};r.style='@-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';export{r as mds_accordion_timer_item}
package/dist/mds-accordion-timer-item/p-f2a0f7e2.system.entry.js ADDED
@@ -0,0 +1 @@
1
+ System.register(["./p-9974040b.system.js"],(function(n){"use strict";var t,o,r,i;return{setters:[function(n){t=n.r;o=n.c;r=n.h;i=n.H}],execute:function(){var e='<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 a='@-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 l=a;var c=n("mds_accordion_timer_item",function(){function n(n){var r=this;t(this,n);this.clickSelectEvent=o(this,"mdsAccordionTimerItemClickSelect",7);this.selectedMouseEnterEvent=o(this,"mdsAccordionTimerItemMouseEnterSelect",7);this.selectedMouseLeaveEvent=o(this,"mdsAccordionTimerItemMouseLeaveSelect",7);this.toggle=function(){r.selected=!r.selected;r.progress=0;if(r.selected){r.clickSelectEvent.emit({selected:r.selected,uuid:r.uuid})}};this.mouseEnter=function(){if(r.selected){r.selectedMouseEnterEvent.emit({selected:r.selected,uuid:r.uuid})}};this.mouseLeave=function(){if(r.selected){r.selectedMouseLeaveEvent.emit({selected:r.selected,uuid:r.uuid})}};this.typography="h5";this.selected=false;this.description=undefined;this.duration=undefined;this.progress=0;this.uuid=0}n.prototype.render=function(){var n;return r(i,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},r("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},r("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),r("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},r("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},r("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),r("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},r("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:e}))),r("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},r("div",{key:"e6a1e64638bf9420ce8c0d59857e660ab9240f39",class:"content-expander",part:"content",role:"region"},r("slot",{key:"fea26587f0c4589f8b207dda75e616e806f9299f"}))))))};return n}());c.style=l}}}));
package/dist/stats.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-10-17T13:56:09",
2
+ "timestamp": "2024-10-17T17:45:59",
3
3
  "compiler": {
4
4
  "name": "node",
5
5
  "version": "20.10.0"
@@ -103,10 +103,10 @@
103
103
  "./dist/mds-accordion-timer-item/p-0fba0302.js",
104
104
  "./dist/mds-accordion-timer-item/p-50ea2036.system.js",
105
105
  "./dist/mds-accordion-timer-item/p-56ba5cbf.system.js",
106
- "./dist/mds-accordion-timer-item/p-90968b6b.entry.js",
106
+ "./dist/mds-accordion-timer-item/p-883cd929.entry.js",
107
107
  "./dist/mds-accordion-timer-item/p-9974040b.system.js",
108
- "./dist/mds-accordion-timer-item/p-b9499805.system.entry.js",
109
108
  "./dist/mds-accordion-timer-item/p-e1255160.js",
109
+ "./dist/mds-accordion-timer-item/p-f2a0f7e2.system.entry.js",
110
110
  "./www/build/index.esm.js",
111
111
  "./www/build/mds-accordion-timer-item.esm.js",
112
112
  "./www/build/mds-accordion-timer-item.js",
@@ -114,10 +114,10 @@
114
114
  "./www/build/p-0fba0302.js",
115
115
  "./www/build/p-50ea2036.system.js",
116
116
  "./www/build/p-56ba5cbf.system.js",
117
- "./www/build/p-90968b6b.entry.js",
117
+ "./www/build/p-883cd929.entry.js",
118
118
  "./www/build/p-9974040b.system.js",
119
- "./www/build/p-b9499805.system.entry.js",
120
- "./www/build/p-e1255160.js"
119
+ "./www/build/p-e1255160.js",
120
+ "./www/build/p-f2a0f7e2.system.entry.js"
121
121
  ]
122
122
  },
123
123
  {
@@ -150,12 +150,12 @@
150
150
  "components": [
151
151
  "mds-accordion-timer-item"
152
152
  ],
153
- "bundleId": "p-90968b6b",
154
- "fileName": "p-90968b6b.entry.js",
153
+ "bundleId": "p-883cd929",
154
+ "fileName": "p-883cd929.entry.js",
155
155
  "imports": [
156
156
  "p-0fba0302.js"
157
157
  ],
158
- "originalByteSize": 14066
158
+ "originalByteSize": 14160
159
159
  }
160
160
  ],
161
161
  "esm": [
@@ -169,7 +169,7 @@
169
169
  "imports": [
170
170
  "index-b53929ab.js"
171
171
  ],
172
- "originalByteSize": 14070
172
+ "originalByteSize": 14164
173
173
  }
174
174
  ],
175
175
  "es5": [
@@ -183,7 +183,7 @@
183
183
  "imports": [
184
184
  "index-b53929ab.js"
185
185
  ],
186
- "originalByteSize": 14070
186
+ "originalByteSize": 14164
187
187
  }
188
188
  ],
189
189
  "system": [
@@ -192,12 +192,12 @@
192
192
  "components": [
193
193
  "mds-accordion-timer-item"
194
194
  ],
195
- "bundleId": "p-b9499805.system",
196
- "fileName": "p-b9499805.system.entry.js",
195
+ "bundleId": "p-f2a0f7e2.system",
196
+ "fileName": "p-f2a0f7e2.system.entry.js",
197
197
  "imports": [
198
198
  "p-9974040b.system.js"
199
199
  ],
200
- "originalByteSize": 14540
200
+ "originalByteSize": 14634
201
201
  }
202
202
  ],
203
203
  "commonjs": [
@@ -211,7 +211,7 @@
211
211
  "imports": [
212
212
  "index-e153727a.js"
213
213
  ],
214
- "originalByteSize": 14194
214
+ "originalByteSize": 14288
215
215
  }
216
216
  ]
217
217
  },
package/documentation.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-10-17T13:40:24",
2
+ "timestamp": "2024-10-17T17:33:37",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.21.0",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/mds-accordion-timer-item",
3
- "version": "3.10.0",
3
+ "version": "3.10.2",
4
4
  "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.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.css CHANGED
@@ -63,10 +63,6 @@
63
63
  text-align: left;
64
64
  }
65
65
 
66
- :host( [selected] ) .action {
67
- cursor: auto;
68
- }
69
-
70
66
  .content {
71
67
  @apply
72
68
  ease-in-out-expo
@@ -96,11 +92,15 @@
96
92
  transform: rotate(180deg);
97
93
  }
98
94
 
99
- :host( [selected] ) .icon {
95
+ :host( [selected]:not([selected="false"]) ) .action {
96
+ cursor: auto;
97
+ }
98
+
99
+ :host( [selected]:not([selected="false"]) ) .icon {
100
100
  transform: rotate(0deg);
101
101
  }
102
102
 
103
- :host( [selected] ) .content {
103
+ :host( [selected]:not([selected="false"]) ) .content {
104
104
  @apply
105
105
  opacity-100
106
106
  pt-400;
package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.tsx CHANGED
@@ -100,7 +100,7 @@ export class MdsAccordionTimerItem {
100
100
  </mds-text>
101
101
  </button>
102
102
  <div class="content" id="content">
103
- <div class="content-expander" part="content">
103
+ <div class="content-expander" part="content" role="region">
104
104
  <slot />
105
105
  </div>
106
106
  </div>
package/www/build/mds-accordion-timer-item.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as r,b as o}from"./p-0fba0302.js";export{s as setNonce}from"./p-0fba0302.js";import{g as t}from"./p-e1255160.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),r(o)})().then((async r=>(await t(),o([["p-90968b6b",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],r))));
1
+ import{p as r,b as o}from"./p-0fba0302.js";export{s as setNonce}from"./p-0fba0302.js";import{g as t}from"./p-e1255160.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),r(o)})().then((async r=>(await t(),o([["p-883cd929",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],r))));
package/www/build/p-0ebb48b0.system.js CHANGED
@@ -1 +1 @@
1
- var __awaiter=this&&this.__awaiter||function(t,n,e,r){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,u){function o(t){try{a(r.next(t))}catch(t){u(t)}}function c(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?e(t.value):i(t.value).then(o,c)}a((r=r.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,o;return o={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function c(t){return function(n){return a([t,n])}}function a(c){if(r)throw new TypeError("Generator is already executing.");while(o&&(o=0,c[0]&&(e=0)),e)try{if(r=1,i&&(u=c[0]&2?i["return"]:c[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,c[1])).done)return u;if(i=0,u)c=[c[0]&2,u.value];switch(c[0]){case 0:case 1:u=c;break;case 4:e.label++;return{value:c[1],done:false};case 5:e.label++;i=c[1];c=[0];continue;case 7:c=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(c[0]===6||c[0]===2)){e=0;continue}if(c[0]===3&&(!u||c[1]>u[0]&&c[1]<u[3])){e.label=c[1];break}if(c[0]===6&&e.label<u[1]){e.label=u[1];u=c;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(c);break}if(u[2])e.ops.pop();e.trys.pop();continue}c=n.call(t,e)}catch(t){c=[6,t];i=0}finally{r=u=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./p-9974040b.system.js","./p-56ba5cbf.system.js"],(function(t,n){"use strict";var e,r,i;return{setters:[function(n){e=n.p;r=n.b;t("setNonce",n.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=n.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return e(r)};u().then((function(n){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-b9499805.system",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],n)]}}))}))}))}}}));
1
+ var __awaiter=this&&this.__awaiter||function(t,n,e,r){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,u){function o(t){try{a(r.next(t))}catch(t){u(t)}}function c(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?e(t.value):i(t.value).then(o,c)}a((r=r.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,o;return o={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function c(t){return function(n){return a([t,n])}}function a(c){if(r)throw new TypeError("Generator is already executing.");while(o&&(o=0,c[0]&&(e=0)),e)try{if(r=1,i&&(u=c[0]&2?i["return"]:c[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,c[1])).done)return u;if(i=0,u)c=[c[0]&2,u.value];switch(c[0]){case 0:case 1:u=c;break;case 4:e.label++;return{value:c[1],done:false};case 5:e.label++;i=c[1];c=[0];continue;case 7:c=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(c[0]===6||c[0]===2)){e=0;continue}if(c[0]===3&&(!u||c[1]>u[0]&&c[1]<u[3])){e.label=c[1];break}if(c[0]===6&&e.label<u[1]){e.label=u[1];u=c;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(c);break}if(u[2])e.ops.pop();e.trys.pop();continue}c=n.call(t,e)}catch(t){c=[6,t];i=0}finally{r=u=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./p-9974040b.system.js","./p-56ba5cbf.system.js"],(function(t,n){"use strict";var e,r,i;return{setters:[function(n){e=n.p;r=n.b;t("setNonce",n.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=n.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return e(r)};u().then((function(n){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-f2a0f7e2.system",[[1,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]}]]]],n)]}}))}))}))}}}));
package/www/build/p-883cd929.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as n,c as t,h as o,H as i}from"./p-0fba0302.js";const r=class{constructor(o){n(this,o),this.clickSelectEvent=t(this,"mdsAccordionTimerItemClickSelect",7),this.selectedMouseEnterEvent=t(this,"mdsAccordionTimerItemMouseEnterSelect",7),this.selectedMouseLeaveEvent=t(this,"mdsAccordionTimerItemMouseLeaveSelect",7),this.toggle=()=>{this.selected=!this.selected,this.progress=0,this.selected&&this.clickSelectEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseEnter=()=>{this.selected&&this.selectedMouseEnterEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseLeave=()=>{this.selected&&this.selectedMouseLeaveEvent.emit({selected:this.selected,uuid:this.uuid})},this.typography="h5",this.selected=!1,this.description=void 0,this.duration=void 0,this.progress=0,this.uuid=0}render(){var n;return o(i,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},o("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},o("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number(null===(n=this.progress)||void 0===n?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),o("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},o("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},o("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),o("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},o("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:'<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>'}))),o("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},o("div",{key:"e6a1e64638bf9420ce8c0d59857e660ab9240f39",class:"content-expander",part:"content",role:"region"},o("slot",{key:"fea26587f0c4589f8b207dda75e616e806f9299f"}))))))}};r.style='@-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';export{r as mds_accordion_timer_item}
package/www/build/p-f2a0f7e2.system.entry.js ADDED
@@ -0,0 +1 @@
1
+ System.register(["./p-9974040b.system.js"],(function(n){"use strict";var t,o,r,i;return{setters:[function(n){t=n.r;o=n.c;r=n.h;i=n.H}],execute:function(){var e='<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 a='@-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 l=a;var c=n("mds_accordion_timer_item",function(){function n(n){var r=this;t(this,n);this.clickSelectEvent=o(this,"mdsAccordionTimerItemClickSelect",7);this.selectedMouseEnterEvent=o(this,"mdsAccordionTimerItemMouseEnterSelect",7);this.selectedMouseLeaveEvent=o(this,"mdsAccordionTimerItemMouseLeaveSelect",7);this.toggle=function(){r.selected=!r.selected;r.progress=0;if(r.selected){r.clickSelectEvent.emit({selected:r.selected,uuid:r.uuid})}};this.mouseEnter=function(){if(r.selected){r.selectedMouseEnterEvent.emit({selected:r.selected,uuid:r.uuid})}};this.mouseLeave=function(){if(r.selected){r.selectedMouseLeaveEvent.emit({selected:r.selected,uuid:r.uuid})}};this.typography="h5";this.selected=false;this.description=undefined;this.duration=undefined;this.progress=0;this.uuid=0}n.prototype.render=function(){var n;return r(i,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},r("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},r("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),r("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},r("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},r("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),r("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},r("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:e}))),r("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},r("div",{key:"e6a1e64638bf9420ce8c0d59857e660ab9240f39",class:"content-expander",part:"content",role:"region"},r("slot",{key:"fea26587f0c4589f8b207dda75e616e806f9299f"}))))))};return n}());c.style=l}}}));
package/dist/mds-accordion-timer-item/p-90968b6b.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as n,c as t,h as o,H as i}from"./p-0fba0302.js";const r=class{constructor(o){n(this,o),this.clickSelectEvent=t(this,"mdsAccordionTimerItemClickSelect",7),this.selectedMouseEnterEvent=t(this,"mdsAccordionTimerItemMouseEnterSelect",7),this.selectedMouseLeaveEvent=t(this,"mdsAccordionTimerItemMouseLeaveSelect",7),this.toggle=()=>{this.selected=!this.selected,this.progress=0,this.selected&&this.clickSelectEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseEnter=()=>{this.selected&&this.selectedMouseEnterEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseLeave=()=>{this.selected&&this.selectedMouseLeaveEvent.emit({selected:this.selected,uuid:this.uuid})},this.typography="h5",this.selected=!1,this.description=void 0,this.duration=void 0,this.progress=0,this.uuid=0}render(){var n;return o(i,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},o("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},o("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number(null===(n=this.progress)||void 0===n?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),o("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},o("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},o("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),o("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},o("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:'<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>'}))),o("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},o("div",{key:"6ded043b63fca24db7cf974251858d7d794e7fd9",class:"content-expander",part:"content"},o("slot",{key:"f855b620cd8515fc619e5b4de6f9d683c4677f7e"}))))))}};r.style="@-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:host( [selected] ) .action {\n cursor: auto;\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] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .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";export{r as mds_accordion_timer_item}
package/dist/mds-accordion-timer-item/p-b9499805.system.entry.js DELETED
@@ -1 +0,0 @@
1
- System.register(["./p-9974040b.system.js"],(function(n){"use strict";var t,o,r,i;return{setters:[function(n){t=n.r;o=n.c;r=n.h;i=n.H}],execute:function(){var a='<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 e="@-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:host( [selected] ) .action {\n cursor: auto;\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] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .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 l=e;var c=n("mds_accordion_timer_item",function(){function n(n){var r=this;t(this,n);this.clickSelectEvent=o(this,"mdsAccordionTimerItemClickSelect",7);this.selectedMouseEnterEvent=o(this,"mdsAccordionTimerItemMouseEnterSelect",7);this.selectedMouseLeaveEvent=o(this,"mdsAccordionTimerItemMouseLeaveSelect",7);this.toggle=function(){r.selected=!r.selected;r.progress=0;if(r.selected){r.clickSelectEvent.emit({selected:r.selected,uuid:r.uuid})}};this.mouseEnter=function(){if(r.selected){r.selectedMouseEnterEvent.emit({selected:r.selected,uuid:r.uuid})}};this.mouseLeave=function(){if(r.selected){r.selectedMouseLeaveEvent.emit({selected:r.selected,uuid:r.uuid})}};this.typography="h5";this.selected=false;this.description=undefined;this.duration=undefined;this.progress=0;this.uuid=0}n.prototype.render=function(){var n;return r(i,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},r("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},r("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),r("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},r("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},r("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),r("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},r("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:a}))),r("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},r("div",{key:"6ded043b63fca24db7cf974251858d7d794e7fd9",class:"content-expander",part:"content"},r("slot",{key:"f855b620cd8515fc619e5b4de6f9d683c4677f7e"}))))))};return n}());c.style=l}}}));
package/www/build/p-90968b6b.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as n,c as t,h as o,H as i}from"./p-0fba0302.js";const r=class{constructor(o){n(this,o),this.clickSelectEvent=t(this,"mdsAccordionTimerItemClickSelect",7),this.selectedMouseEnterEvent=t(this,"mdsAccordionTimerItemMouseEnterSelect",7),this.selectedMouseLeaveEvent=t(this,"mdsAccordionTimerItemMouseLeaveSelect",7),this.toggle=()=>{this.selected=!this.selected,this.progress=0,this.selected&&this.clickSelectEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseEnter=()=>{this.selected&&this.selectedMouseEnterEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseLeave=()=>{this.selected&&this.selectedMouseLeaveEvent.emit({selected:this.selected,uuid:this.uuid})},this.typography="h5",this.selected=!1,this.description=void 0,this.duration=void 0,this.progress=0,this.uuid=0}render(){var n;return o(i,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},o("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},o("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number(null===(n=this.progress)||void 0===n?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),o("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},o("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},o("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),o("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},o("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:'<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>'}))),o("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},o("div",{key:"6ded043b63fca24db7cf974251858d7d794e7fd9",class:"content-expander",part:"content"},o("slot",{key:"f855b620cd8515fc619e5b4de6f9d683c4677f7e"}))))))}};r.style="@-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:host( [selected] ) .action {\n cursor: auto;\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] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .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";export{r as mds_accordion_timer_item}
package/www/build/p-b9499805.system.entry.js DELETED
@@ -1 +0,0 @@
1
- System.register(["./p-9974040b.system.js"],(function(n){"use strict";var t,o,r,i;return{setters:[function(n){t=n.r;o=n.c;r=n.h;i=n.H}],execute:function(){var a='<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 e="@-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:host( [selected] ) .action {\n cursor: auto;\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] ) .icon {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n:host( [selected] ) .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 l=e;var c=n("mds_accordion_timer_item",function(){function n(n){var r=this;t(this,n);this.clickSelectEvent=o(this,"mdsAccordionTimerItemClickSelect",7);this.selectedMouseEnterEvent=o(this,"mdsAccordionTimerItemMouseEnterSelect",7);this.selectedMouseLeaveEvent=o(this,"mdsAccordionTimerItemMouseLeaveSelect",7);this.toggle=function(){r.selected=!r.selected;r.progress=0;if(r.selected){r.clickSelectEvent.emit({selected:r.selected,uuid:r.uuid})}};this.mouseEnter=function(){if(r.selected){r.selectedMouseEnterEvent.emit({selected:r.selected,uuid:r.uuid})}};this.mouseLeave=function(){if(r.selected){r.selectedMouseLeaveEvent.emit({selected:r.selected,uuid:r.uuid})}};this.typography="h5";this.selected=false;this.description=undefined;this.duration=undefined;this.progress=0;this.uuid=0}n.prototype.render=function(){var n;return r(i,{key:"3d16a68df5dd7ffbef52eeeb32d4d2ea6c6bda5e",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},r("div",{key:"9666c1af6081ba157218583b0c5cd3c819fa9c0a",class:"row"},r("mds-progress",{key:"8a2b2cd58d22206a02ba36c951238ba31eb1dca5",class:"progress-bar",progress:Number((n=this.progress)===null||n===void 0?void 0:n.toFixed(2)),direction:"vertical",part:"progress"}),r("div",{key:"dd629e5e7f5194412afd0dfc7d3ca7f7ac04a1b5",class:"accordion"},r("button",{key:"608a961e3b15dc480a45f1c22ec3c83d83aa590b","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action focus-bounce",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},r("mds-text",{key:"cc91fbab8fa96df59a39680edaf2c5742c5565ea",typography:this.typography,part:"label"},this.description),r("mds-text",{key:"36b97232d257a40ae7f50039009766ccb4b34a81","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},r("i",{key:"b55e4706a60870e6b3d03b5f2d90c04d3e4580e1",class:"svg icon",innerHTML:a}))),r("div",{key:"4735a20ffc00844e027df1468fd0476b911b7e60",class:"content",id:"content"},r("div",{key:"6ded043b63fca24db7cf974251858d7d794e7fd9",class:"content-expander",part:"content"},r("slot",{key:"f855b620cd8515fc619e5b4de6f9d683c4677f7e"}))))))};return n}());c.style=l}}}));