@maggioli-design-system/magma 2.0.0-alpha.1 → 2.0.0-beta.2

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

@@ -1,63 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as miBaselineKeyboardArrowRight } from './keyboard-arrow-right.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsAccordionItemCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-accordion-item-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-item-border-width:2px;--mds-accordion-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-item-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-item-duration:.3s;--mds-accordion-item-padding-selected:1rem 0 2rem 0;--mds-accordion-item-padding-unselected:1rem 0 1rem 0;--tw-font-weight:initial}}}@layer reset,vendor,theme,base,components,utilities;@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-item-border-width{syntax:\"<length>\";inherits:false;initial-value:2px}@property --mds-accordion-item-duration{syntax:\"<time>\";inherits:false;initial-value:.3s}@property --mds-accordion-item-padding-selected{syntax:\"<length>+\";inherits:false;initial-value:1rem 0 2rem 0}@property --mds-accordion-item-padding-unselected{syntax:\"<length>+\";inherits:false;initial-value:1rem 0 1rem 0}:host{--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-08,107 107 107)));--mds-accordion-item-border-width:var(--mds-accordion-border-width,2px);--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-accordion-item-description-color:var(--mds-accordion-description-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-accordion-item-duration:var(--mds-accordion-duration,.3s);--mds-accordion-item-padding-selected:var(--mds-accordion-padding-selected,calc(var(--spacing,.0025rem)*400)0 calc(var(--spacing,.0025rem)*800)0);--mds-accordion-item-padding-unselected:var(--mds-accordion-padding-unselected,calc(var(--spacing,.0025rem)*400)0 calc(var(--spacing,.0025rem)*400)0);border-bottom:solid var(--mds-accordion-item-border-width,2px)transparent;border-top:solid var(--mds-accordion-item-border-width,2px)transparent;color:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));display:grid;fill:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));margin-top:calc(var(--mds-accordion-item-border-width,2px)*-1);padding:var(--mds-accordion-item-padding-unselected,1rem 0 1rem 0);position:relative;-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:background-color,border-color,color,fill,margin,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}:host(:first-child){margin-top:0}.action{animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;border:0;border-radius:var(--radius-md,12px);color:var(--mds-accordion-item-description-color,rgb(var(--tone-neutral-02,244 244 244)));cursor:pointer;display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;grid-template-columns:auto 24px;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding:0;text-align:left;transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out}.action:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.icon-button{--tw-font-weight:var(--font-weight-normal,400);display:block;font-weight:var(--font-weight-normal,400)}.content{display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-item-duration,.3s);transition-duration:var(--mds-accordion-item-duration,.3s);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.content-expander{display:grid;grid-template-columns:minmax(0,100%);min-height:0;-webkit-transition-duration:var(--mds-accordion-item-duration,.3s);transition-duration:var(--mds-accordion-item-duration,.3s);transition-property:opacity,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon{display:flex;fill:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));transform:rotate(0);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon svg{aspect-ratio:1;aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([selected]:not([selected=false])){border-bottom:solid var(--mds-accordion-item-border-width,2px)var(--mds-accordion-item-border-color,rgb(var(--tone-neutral-08,107 107 107)));border-top:solid var(--mds-accordion-item-border-width,2px)var(--mds-accordion-item-border-color,rgb(var(--tone-neutral-08,107 107 107)));padding:var(--mds-accordion-item-padding-selected,1rem 0 2rem 0)}:host([selected]:not([selected=false]):first-child){border-top-color:#0000;margin-top:0}:host([selected]:not([selected=false]):last-child){border-bottom-color:#0000;margin-bottom:0}:host([selected]:not([selected=false])) .content{grid-template-rows:1fr;opacity:1;padding-top:calc(var(--spacing,.0025rem)*400)}:host([selected]:not([selected=false])) .icon{transform:rotate(90deg)}:host-context(:root.pref-animation-reduce){--mds-accordion-item-duration:var(--mds-accordion-duration,0s);transition-duration:0s}:host-context(:root.pref-animation-reduce) .icon{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-06,158 158 158)))}:host-context(:root.pref-contrast-more){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-01,255 255 255)));--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-01,255 255 255)))}@property --tw-font-weight{syntax:\"*\";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-duration:var(--mds-accordion-duration,0s);transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .icon{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-06,158 158 158)))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-01,255 255 255)));--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-01,255 255 255)))}}";
-
-const MdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionItem extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.selectedEvent = createEvent(this, "mdsAccordionItemSelect", 7);
-        this.unselectedEvent = createEvent(this, "mdsAccordionItemUnselect", 7);
-        this.changedEvent = createEvent(this, "mdsAccordionItemChange", 7);
-        /**
-         * Specifies the typography of the element
-         */
-        this.typography = 'h5';
-        this.toggle = () => {
-            this.selected = !this.selected;
-            this.changedEvent.emit({ id: this.element.id, selected: this.selected });
-            if (this.selected) {
-                this.selectedEvent.emit({ id: this.element.id, selected: this.selected });
-                return;
-            }
-            this.unselectedEvent.emit({ id: this.element.id, selected: this.selected });
-        };
-    }
-    render() {
-        return (h(Host, { key: 'bbbd0e2fb054337847f318e13bff5a9d5f836f12' }, h("button", { key: 'e32a97a11a080c26c9783e7f9653c7df5bd46c98', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'd66dc3923030828e734bd0b31021980dc2de5a97', typography: this.typography, part: "label" }, this.label), h("mds-text", { key: 'fb7b0ca39023ddf53bad7edf68464d62f6f0caa7', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'df38dae6c7d8f27ca4e000bc8bc18a9f8575f76c', class: "icon", innerHTML: miBaselineKeyboardArrowRight }))), h("div", { key: '8a932338cd7b4c87dca040d3730edbddfd1770d9', class: "content", id: "content" }, h("div", { key: '7314748049721c8c9c243e3135545e5265f9493e', "aria-labelledby": "action", class: "content-expander", part: "content", role: "region" }, h("slot", { key: '512b542a030897e6611612ae100e6b5f200f1e4a' })))));
-    }
-    get element() { return this; }
-    static get style() { return mdsAccordionItemCss; }
-}, [257, "mds-accordion-item", {
-        "typography": [1],
-        "selected": [1540],
-        "label": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-accordion-item", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-accordion-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsAccordionItem$1);
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsAccordionItem = MdsAccordionItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsAccordionItem, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as o,createEvent as r,h as e,Host as i,transformTag as a}from"@stencil/core/internal/client";import{m as n}from"./keyboard-arrow-right.js";import{d}from"./mds-text2.js";const c=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.selectedEvent=r(this,"mdsAccordionItemSelect",7),this.unselectedEvent=r(this,"mdsAccordionItemUnselect",7),this.changedEvent=r(this,"mdsAccordionItemChange",7),this.typography="h5",this.toggle=()=>{this.selected=!this.selected,this.changedEvent.emit({id:this.element.id,selected:this.selected}),this.selected?this.selectedEvent.emit({id:this.element.id,selected:this.selected}):this.unselectedEvent.emit({id:this.element.id,selected:this.selected})}}render(){return e(i,{key:"70cbd276fd2552fa643a9297ca91479835a3669a"},e("button",{key:"80f2fe79c0c3516330949615ab76e30d76c553c8","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},e("mds-text",{key:"1709a57f269dc53e3530d17e37984d3a90991ec3",typography:this.typography,part:"label"},this.label),e("mds-text",{key:"d9c01a62a36a9a8930b228cc748e7527d8c927bd","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},e("i",{key:"80ecf7c41a6c8ee7a7d7793836466496e6c35149",class:"icon",innerHTML:n}))),e("div",{key:"43617c689361b7748b588af64e4e209f43788f8e",class:"content",id:"content"},e("div",{key:"ee082641d530d31c12e5f0e52464fb64c38ad572","aria-labelledby":"action",class:"content-expander",part:"content",role:"region"},e("slot",{key:"9499ce48fce9fa821ba339c08226c74eea72b63f"}))))}get element(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-accordion-item-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-item-border-width:2px;--mds-accordion-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-item-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-item-duration:.3s;--mds-accordion-item-padding-selected:1rem 0 2rem 0;--mds-accordion-item-padding-unselected:1rem 0 1rem 0;--tw-font-weight:initial}}}@layer reset,vendor,theme,base,components,utilities;@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-item-border-width{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-accordion-item-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-accordion-item-padding-selected{syntax:"<length>+";inherits:false;initial-value:1rem 0 2rem 0}@property --mds-accordion-item-padding-unselected{syntax:"<length>+";inherits:false;initial-value:1rem 0 1rem 0}:host{--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-08,107 107 107)));--mds-accordion-item-border-width:var(--mds-accordion-border-width,2px);--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-accordion-item-description-color:var(--mds-accordion-description-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-accordion-item-duration:var(--mds-accordion-duration,.3s);--mds-accordion-item-padding-selected:var(--mds-accordion-padding-selected,calc(var(--spacing,.0025rem)*400) 0 calc(var(--spacing,.0025rem)*800) 0);--mds-accordion-item-padding-unselected:var(--mds-accordion-padding-unselected,calc(var(--spacing,.0025rem)*400) 0 calc(var(--spacing,.0025rem)*400) 0);border-bottom:var(--mds-accordion-item-border-width,2px) solid transparent;border-top:var(--mds-accordion-item-border-width,2px) solid transparent;color:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));display:grid;fill:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));margin-top:calc(var(--mds-accordion-item-border-width,2px)*-1);padding:var(--mds-accordion-item-padding-unselected,1rem 0 1rem 0);position:relative;-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:background-color,border-color,color,fill,margin,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}:host(:first-child){margin-top:0}.action{animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;border:0;border-radius:var(--radius-md,12px);color:var(--mds-accordion-item-description-color,rgb(var(--tone-neutral-02,244 244 244)));cursor:pointer;display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;grid-template-columns:auto 24px;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding:0;text-align:left;transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out}.action:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.icon-button{--tw-font-weight:var(--font-weight-normal,400);display:block;font-weight:var(--font-weight-normal,400)}.content{display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-item-duration,.3s);transition-duration:var(--mds-accordion-item-duration,.3s);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.content-expander{display:grid;grid-template-columns:minmax(0,100%);min-height:0;-webkit-transition-duration:var(--mds-accordion-item-duration,.3s);transition-duration:var(--mds-accordion-item-duration,.3s);transition-property:opacity,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon{display:flex;fill:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));transform:rotate(0);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([selected]:not([selected=false])){border-bottom:var(--mds-accordion-item-border-width,2px) solid var(--mds-accordion-item-border-color,rgb(var(--tone-neutral-08,107 107 107)));border-top:var(--mds-accordion-item-border-width,2px) solid var(--mds-accordion-item-border-color,rgb(var(--tone-neutral-08,107 107 107)));padding:var(--mds-accordion-item-padding-selected,1rem 0 2rem 0)}:host([selected]:not([selected=false]):first-child){border-top-color:#0000;margin-top:0}:host([selected]:not([selected=false]):last-child){border-bottom-color:#0000;margin-bottom:0}:host([selected]:not([selected=false])) .content{grid-template-rows:1fr;opacity:1;padding-top:calc(var(--spacing,.0025rem)*400)}:host([selected]:not([selected=false])) .icon{transform:rotate(90deg)}:host-context(:root.pref-animation-reduce){--mds-accordion-item-duration:var(--mds-accordion-duration,0s);transition-duration:0s}:host-context(:root.pref-animation-reduce) .icon{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-06,158 158 158)))}:host-context(:root.pref-contrast-more){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-01,255 255 255)));--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-01,255 255 255)))}@property --tw-font-weight{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-duration:var(--mds-accordion-duration,0s);transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .icon{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-06,158 158 158)))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-01,255 255 255)));--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-01,255 255 255)))}}'}},[257,"mds-accordion-item",{typography:[1],selected:[1540],label:[1]}]),s=c,m=function(){"undefined"!=typeof customElements&&["mds-accordion-item","mds-text"].forEach((t=>{switch(t){case"mds-accordion-item":customElements.get(a(t))||customElements.define(a(t),c);break;case"mds-text":customElements.get(a(t))||d()}}))};export{s as MdsAccordionItem,m as defineCustomElement}

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

@@ -1,120 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as miBaselineKeyboardArrowRight } from './keyboard-arrow-right.js';
-import { d as defineCustomElement$5 } from './mds-icon2.js';
-import { d as defineCustomElement$4 } from './mds-progress2.js';
-import { d as defineCustomElement$3 } from './mds-radial-progress2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsAccordionTimerItemCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-accordion-timer-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-timer-item-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-item-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-item-progress-bar-thickness:calc(var(--spacing,.0025rem)*100);--mds-accordion-timer-item-duration:.5s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-timer-item-duration{syntax:\"<time>\";inherits:false;initial-value:.5s}:host{--mds-accordion-timer-item-color:var(--mds-accordion-timer-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness,calc(var(--spacing,.0025rem)*100));--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,.5s);color:var(--mds-accordion-timer-item-color,rgb(var(--tone-neutral-02,244 244 244)));display:grid;padding-bottom:calc(var(--spacing,.0025rem)*400);padding-top:calc(var(--spacing,.0025rem)*400);position:relative;-webkit-transition-duration:var(--mds-accordion-timer-item-duration,.5s);transition-duration:var(--mds-accordion-timer-item-duration,.5s);transition-property:color;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.row{display:flex;gap:calc(var(--spacing,.0025rem)*400)}.accordion{display:grid}.progress-bar{--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness,calc(var(--spacing,.0025rem)*100));flex-shrink:0}.action{background-color:#0000;border:0;border-radius:var(--radius-xs,8px);color:inherit;cursor:pointer;display:flex;justify-content:space-between;padding:0;text-align:left}.action,.content{gap:calc(var(--spacing,.0025rem)*400)}.content{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-timer-item-duration,.5s);transition-duration:var(--mds-accordion-timer-item-duration,.5s);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.content,.content-expander{min-height:0}.icon{display:flex;fill:currentColor;transform:rotate(0);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon svg{aspect-ratio:1;aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([selected]:not([selected=false])) .action{cursor:auto}:host([selected]:not([selected=false])) .icon{transform:rotate(90deg)}:host([selected]:not([selected=false])) .content{grid-template-rows:1fr;opacity:1;padding-top:calc(var(--spacing,.0025rem)*400)}:host-context(:root.pref-animation-reduce){--mds-accordion-timer-item-duration:0s}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-timer-item-duration:0s}}";
-
-const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionTimerItem extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.clickSelectEvent = createEvent(this, "mdsAccordionTimerItemClickSelect", 7);
-        this.selectEvent = createEvent(this, "mdsAccordionTimerItemSelect", 7);
-        this.selectedMouseEnterEvent = createEvent(this, "mdsAccordionTimerItemMouseEnterSelect", 7);
-        this.selectedMouseLeaveEvent = createEvent(this, "mdsAccordionTimerItemMouseLeaveSelect", 7);
-        /**
-         * Specifies the typography of the element
-         */
-        this.typography = 'h5';
-        /**
-         * Specifies if the accordion item is opened or not
-         */
-        this.selected = false;
-        /**
-         * A value between 0 and 100 that rapresents the status progress
-         */
-        this.progress = 0;
-        /**
-         * Used automatically by MdsAccordionTimer wrapper to handle it's siblings
-         */
-        this.uuid = 0;
-        /**
-         * Event throws only once the element is active,
-         * to fire it again it need to be a different item
-         */
-        this.toggle = () => {
-            this.selected = !this.selected;
-            this.progress = 0;
-            if (this.selected) {
-                this.clickSelectEvent.emit({ selected: this.selected, uuid: this.uuid });
-            }
-        };
-        this.mouseEnter = () => {
-            if (this.selected) {
-                this.selectedMouseEnterEvent.emit({ selected: this.selected, uuid: this.uuid });
-            }
-        };
-        this.mouseLeave = () => {
-            if (this.selected) {
-                this.selectedMouseLeaveEvent.emit({ selected: this.selected, uuid: this.uuid });
-            }
-        };
-    }
-    handleSelected(newValue) {
-        this.progress = 0;
-        if (newValue) {
-            this.selectEvent.emit({ selected: this.selected, uuid: this.uuid });
-        }
-    }
-    render() {
-        var _a;
-        return (h(Host, { key: 'e60d0ab86bb47b64dc7b21bdae10c8ed11e902b5', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: 'fc6012667a251010fc868b9dd1c8b0603a4f5ce0', class: "row" }, h("mds-progress", { key: 'a2b5695c093e6c9068f6ef5daba855066336e27a', "aria-hidden": "true", class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", size: "sm", part: "progress" }), h("div", { key: 'ef96dd04f956cb2337d19b745c2d4126afdcfbd0', class: "accordion" }, h("button", { key: '513aeb07bbbfdc9731d4ee9c859f9dc6286d000c', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: '29b009883c56c52530331593da726840774c5453', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '98d4ddd516f761e279c6844023dfd133f43c3f70', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '99c14644569f3a0900322b898224aaf15eeb33b7', class: "icon", innerHTML: miBaselineKeyboardArrowRight }))), h("div", { key: '964bb74ed0704a92d5a493d733ead61789e4e8f3', class: "content", id: "content" }, h("div", { key: 'd0023fb03a93a3e12a5e1c1e4e1d7af5d378e5cd', "aria-label": this.description, class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'ce44bbbbbcef87d2d634d60d060f86b51dcfeb92' })))))));
-    }
-    static get watchers() { return {
-        "selected": ["handleSelected"]
-    }; }
-    static get style() { return mdsAccordionTimerItemCss; }
-}, [257, "mds-accordion-timer-item", {
-        "typography": [1],
-        "selected": [516],
-        "description": [1],
-        "duration": [514],
-        "progress": [2],
-        "uuid": [2]
-    }, undefined, {
-        "selected": ["handleSelected"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-accordion-timer-item", "mds-icon", "mds-progress", "mds-radial-progress", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-accordion-timer-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsAccordionTimerItem$1);
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mds-progress":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-radial-progress":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsAccordionTimerItem = MdsAccordionTimerItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsAccordionTimerItem, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as i,Host as o,transformTag as s}from"@stencil/core/internal/client";import{m as a}from"./keyboard-arrow-right.js";import{d as n}from"./mds-icon2.js";import{d as c}from"./mds-progress2.js";import{d}from"./mds-radial-progress2.js";import{d as m}from"./mds-text2.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.clickSelectEvent=r(this,"mdsAccordionTimerItemClickSelect",7),this.selectEvent=r(this,"mdsAccordionTimerItemSelect",7),this.selectedMouseEnterEvent=r(this,"mdsAccordionTimerItemMouseEnterSelect",7),this.selectedMouseLeaveEvent=r(this,"mdsAccordionTimerItemMouseLeaveSelect",7),this.typography="h5",this.selected=!1,this.progress=0,this.uuid=0,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})}}handleSelected(e){this.progress=0,e&&this.selectEvent.emit({selected:this.selected,uuid:this.uuid})}render(){var e;return i(o,{key:"2a267905abe7323573c9ba374f876877a4d7d708",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},i("div",{key:"96fcad4d326cc0cdee6003e874b267b05302d535",class:"row"},i("mds-progress",{key:"ac8f0ef04501960d4a90e2249cd72cfaecc4178d","aria-hidden":"true",class:"progress-bar",progress:Number(null===(e=this.progress)||void 0===e?void 0:e.toFixed(2)),direction:"vertical",size:"sm",part:"progress"}),i("div",{key:"7550b2107ad942448f6da6e3116174ad2067b257",class:"accordion"},i("button",{key:"084c9f9bd12d5aca2422a64bcea440c248cf1a00","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},i("mds-text",{key:"d5b1d6961ab7b27ef837fd0180bb253885a58aba",typography:this.typography,part:"label"},this.description),i("mds-text",{key:"baac8e278b04ebabc01a434451a367df848cd692","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},i("i",{key:"835a41cd2c377aeff1c489aedad1a2b84651fcfe",class:"icon",innerHTML:a}))),i("div",{key:"e48c87aeb25bb8d7fc33335978ff17ffd07f1577",class:"content",id:"content"},i("div",{key:"4d3b60411f38078738cdc9b6cb4d5b14316391d3","aria-label":this.description,class:"content-expander",part:"content",role:"region"},i("slot",{key:"e474417107b3705901dfe539ce8860d66f4c19b6"}))))))}static get watchers(){return{selected:[{handleSelected:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-accordion-timer-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-timer-item-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-item-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-item-progress-bar-thickness:calc(var(--spacing,.0025rem)*100);--mds-accordion-timer-item-duration:.5s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-timer-item-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-accordion-timer-item-color:var(--mds-accordion-timer-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness,calc(var(--spacing,.0025rem)*100));--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,.5s);color:var(--mds-accordion-timer-item-color,rgb(var(--tone-neutral-02,244 244 244)));display:grid;padding-bottom:calc(var(--spacing,.0025rem)*400);padding-top:calc(var(--spacing,.0025rem)*400);position:relative;-webkit-transition-duration:var(--mds-accordion-timer-item-duration,.5s);transition-duration:var(--mds-accordion-timer-item-duration,.5s);transition-property:color;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.row{display:flex;gap:calc(var(--spacing,.0025rem)*400)}.accordion{display:grid}.progress-bar{--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness,calc(var(--spacing,.0025rem)*100));flex-shrink:0}.action{background-color:#0000;border:0;border-radius:var(--radius-xs,8px);color:inherit;cursor:pointer;display:flex;justify-content:space-between;padding:0;text-align:left}.action,.content{gap:calc(var(--spacing,.0025rem)*400)}.content{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-timer-item-duration,.5s);transition-duration:var(--mds-accordion-timer-item-duration,.5s);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.content,.content-expander{min-height:0}.icon{display:flex;fill:currentColor;transform:rotate(0);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([selected]:not([selected=false])) .action{cursor:auto}:host([selected]:not([selected=false])) .icon{transform:rotate(90deg)}:host([selected]:not([selected=false])) .content{grid-template-rows:1fr;opacity:1;padding-top:calc(var(--spacing,.0025rem)*400)}:host-context(:root.pref-animation-reduce){--mds-accordion-timer-item-duration:0s}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-timer-item-duration:0s}}'}},[257,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},void 0,{selected:[{handleSelected:0}]}]),p=l,u=function(){"undefined"!=typeof customElements&&["mds-accordion-timer-item","mds-icon","mds-progress","mds-radial-progress","mds-text"].forEach((e=>{switch(e){case"mds-accordion-timer-item":customElements.get(s(e))||customElements.define(s(e),l);break;case"mds-icon":customElements.get(s(e))||n();break;case"mds-progress":customElements.get(s(e))||c();break;case"mds-radial-progress":customElements.get(s(e))||d();break;case"mds-text":customElements.get(s(e))||m()}}))};export{p as MdsAccordionTimerItem,u as defineCustomElement}

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

@@ -1,179 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const mdsAccordionTimerCss = "@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-progress-bar-thickness:1px;--mds-accordion-timer-duration:.5s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-accordion-timer-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-timer-progress-bar-thickness{syntax:\"<length>\";inherits:false;initial-value:1px}@property --mds-accordion-timer-duration{syntax:\"<time>\";inherits:false;initial-value:.5s}:host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-progress-bar-thickness:calc(var(--spacing,.0025rem)*100);--mds-accordion-timer-duration:.5s;display:block}:host-context(:root.pref-animation-reduce){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,0s)}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,0s)}}";
-
-const MdsAccordionTimer$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionTimer extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.changeEvent = createEvent(this, "mdsAccordionTimerChange", 7);
-        this.currentDuration = 0;
-        this.time = 0;
-        /**
-         * Sets the duration of the single accordion item
-         */
-        this.duration = 10000;
-        this.clearIntervals = () => {
-            if (typeof window !== 'undefined') {
-                window.clearInterval(this.timeChecker);
-            }
-            this.timeChecker = 0;
-        };
-        this.remainingTime = () => {
-            const remainingTime = this.selectedItemRemainingTime - (new Date().getTime() - this.timeStarted);
-            return remainingTime >= 0 ? remainingTime : 0;
-        };
-        this.progress = () => {
-            return Math.abs(this.remainingTime() / this.currentDuration - 1);
-        };
-        this.addTimeListener = () => {
-            if (typeof window !== 'undefined') {
-                this.timeChecker = window.setInterval(() => {
-                    const progress = this.progress();
-                    if (this.selectedItem !== undefined) {
-                        this.selectedItem.progress = progress;
-                    }
-                    if (progress === 1) {
-                        this.selectedItem.progress = 0;
-                        this.startNext();
-                    }
-                }, 100);
-            }
-        };
-        this.beginningTime = () => {
-            this.timeStarted = new Date().getTime();
-            return this.timeStarted;
-        };
-        this.setSelectedItem = (uuid) => {
-            this.children.forEach((item, key) => {
-                var _a;
-                if (key === uuid) {
-                    item.selected = true;
-                    this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
-                    this.selectedItem = item;
-                    this.changeEvent.emit({ index: key });
-                }
-                else {
-                    item.selected = false;
-                }
-            });
-        };
-        this.startNext = () => {
-            const nextUuid = this.selectedItem.uuid + 1 > this.children.length - 1 ? 0 : this.selectedItem.uuid + 1;
-            this.setSelectedItem(nextUuid);
-            this.startTimer();
-        };
-        this.startTimer = () => {
-            this.clearIntervals();
-            this.time = this.beginningTime();
-            this.selectedItemRemainingTime = this.currentDuration;
-            this.addTimeListener();
-        };
-        this.playTimer = () => {
-            this.beginningTime();
-            this.addTimeListener();
-        };
-        this.pauseTimer = () => {
-            this.clearIntervals();
-            this.selectedItemRemainingTime = this.remainingTime();
-        };
-        this.stopTimer = () => {
-            this.clearIntervals();
-        };
-    }
-    componentDidLoad() {
-        this.children = this.element.querySelectorAll('mds-accordion-timer-item');
-        this.children.forEach((item, key) => {
-            var _a;
-            item.uuid = key;
-            if (item.selected) {
-                this.currentDuration = (_a = item.duration) !== null && _a !== void 0 ? _a : this.duration;
-                this.selectedItem = item;
-            }
-        });
-        if (this.selectedItem !== undefined) {
-            this.startTimer();
-        }
-        if (this.paused) {
-            this.pauseTimer();
-        }
-    }
-    disconnectedCallback() {
-        this.stopTimer();
-        this.clearIntervals();
-    }
-    onClickSelect(event) {
-        this.clearIntervals();
-        if (this.selectedItem) {
-            this.selectedItem.progress = 0;
-        }
-        this.setSelectedItem(event.detail.uuid);
-        this.startTimer();
-        this.pauseTimer();
-    }
-    onSelect(event) {
-        this.clearIntervals();
-        this.paused = false;
-        if (this.selectedItem) {
-            this.selectedItem.progress = 0;
-        }
-        this.setSelectedItem(event.detail.uuid);
-        this.startTimer();
-    }
-    onMouseEnterSelect() {
-        if (this.paused) {
-            return;
-        }
-        this.pauseTimer();
-    }
-    onMouseLeaveSelect() {
-        if (this.paused) {
-            return;
-        }
-        if (this.timeChecker === 0) {
-            this.playTimer();
-        }
-    }
-    handlePaused(newValue) {
-        if (newValue) {
-            this.pauseTimer();
-            return;
-        }
-        this.playTimer();
-    }
-    render() {
-        return (h(Host, { key: '83fbaf714fd50567fb7c035fb6344bea5fc55935' }, h("slot", { key: '3106401fa285586903177765544a76b976b5fd8e' })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "paused": ["handlePaused"]
-    }; }
-    static get style() { return mdsAccordionTimerCss; }
-}, [257, "mds-accordion-timer", {
-        "duration": [514],
-        "paused": [516],
-        "time": [32]
-    }, [[0, "mdsAccordionTimerItemClickSelect", "onClickSelect"], [0, "mdsAccordionTimerItemSelect", "onSelect"], [0, "mdsAccordionTimerItemMouseEnterSelect", "onMouseEnterSelect"], [0, "mdsAccordionTimerItemMouseLeaveSelect", "onMouseLeaveSelect"]], {
-        "paused": ["handlePaused"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-accordion-timer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-accordion-timer":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsAccordionTimer$1);
-            }
-            break;
-    } });
-}
-
-const MdsAccordionTimer = MdsAccordionTimer$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsAccordionTimer, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as o,transformTag as r}from"@stencil/core/internal/client";const n=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.changeEvent=e(this,"mdsAccordionTimerChange",7),this.currentDuration=0,this.time=0,this.duration=1e4,this.clearIntervals=()=>{"undefined"!=typeof window&&window.clearInterval(this.timeChecker),this.timeChecker=0},this.remainingTime=()=>{const t=this.selectedItemRemainingTime-((new Date).getTime()-this.timeStarted);return t>=0?t:0},this.progress=()=>Math.abs(this.remainingTime()/this.currentDuration-1),this.addTimeListener=()=>{"undefined"!=typeof window&&(this.timeChecker=window.setInterval((()=>{const t=this.progress();void 0!==this.selectedItem&&(this.selectedItem.progress=t),1===t&&(this.selectedItem.progress=0,this.startNext())}),100))},this.beginningTime=()=>(this.timeStarted=(new Date).getTime(),this.timeStarted),this.setSelectedItem=t=>{this.children.forEach(((i,e)=>{var s;e===t?(i.selected=!0,this.currentDuration=null!==(s=i.duration)&&void 0!==s?s:this.duration,this.selectedItem=i,this.changeEvent.emit({index:e})):i.selected=!1}))},this.startNext=()=>{this.setSelectedItem(this.selectedItem.uuid+1>this.children.length-1?0:this.selectedItem.uuid+1),this.startTimer()},this.startTimer=()=>{this.clearIntervals(),this.time=this.beginningTime(),this.selectedItemRemainingTime=this.currentDuration,this.addTimeListener()},this.playTimer=()=>{this.beginningTime(),this.addTimeListener()},this.pauseTimer=()=>{this.clearIntervals(),this.selectedItemRemainingTime=this.remainingTime()},this.stopTimer=()=>{this.clearIntervals()}}componentDidLoad(){this.children=this.element.querySelectorAll("mds-accordion-timer-item"),this.children.forEach(((t,i)=>{var e;t.uuid=i,t.selected&&(this.currentDuration=null!==(e=t.duration)&&void 0!==e?e:this.duration,this.selectedItem=t)})),void 0!==this.selectedItem&&this.startTimer(),this.paused&&this.pauseTimer()}disconnectedCallback(){this.stopTimer(),this.clearIntervals()}onClickSelect(t){this.clearIntervals(),null!=this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(t.detail.uuid),this.startTimer(),this.pauseTimer()}onSelect(t){this.clearIntervals(),this.paused=!1,null!=this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(t.detail.uuid),this.startTimer()}onMouseEnterSelect(){this.paused||this.pauseTimer()}onMouseLeaveSelect(){this.paused||0===this.timeChecker&&this.playTimer()}handlePaused(t){t?this.pauseTimer():this.playTimer()}render(){return s(o,{key:"6801e67ac8d8235b3c8610787fcddc6223123284"},s("slot",{key:"d9c3bebad4f570777a2d64a4ccfad242b22fd1e0"}))}get element(){return this}static get watchers(){return{paused:[{handlePaused:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-progress-bar-thickness:1px;--mds-accordion-timer-duration:.5s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-accordion-timer-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-timer-progress-bar-thickness{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-accordion-timer-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-progress-bar-thickness:calc(var(--spacing,.0025rem)*100);--mds-accordion-timer-duration:.5s;display:block}:host-context(:root.pref-animation-reduce){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,0s)}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,0s)}}'}},[257,"mds-accordion-timer",{duration:[514],paused:[516],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickSelect"],[0,"mdsAccordionTimerItemSelect","onSelect"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]],{paused:[{handlePaused:0}]}]),d=n,a=function(){"undefined"!=typeof customElements&&["mds-accordion-timer"].forEach((t=>{"mds-accordion-timer"===t&&(customElements.get(r(t))||customElements.define(r(t),n))}))};export{d as MdsAccordionTimer,a as defineCustomElement}

package/dist/components/mds-accordion.js

@@ -1,83 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const mdsAccordionCss = "@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-accordion-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-border-width:2px;--mds-accordion-duration:.3s;--mds-accordion-padding-selected:1rem 0 2rem 0;--mds-accordion-padding-unselected:1rem 0}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-border-width{syntax:\"<length>\";inherits:false;initial-value:2px}@property --mds-accordion-duration{syntax:\"<time>\";inherits:false;initial-value:.3s}@property --mds-accordion-padding-selected{syntax:\"<length>+\";inherits:false;initial-value:1rem 0 2rem 0}@property --mds-accordion-padding-unselected{syntax:\"<length>+\";inherits:false;initial-value:1rem 0}:host{--mds-accordion-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-border-width:2px;--mds-accordion-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-duration:.3s;--mds-accordion-padding-selected:calc(var(--spacing,.0025rem)*400)0 calc(var(--spacing,.0025rem)*800)0;--mds-accordion-padding-unselected:calc(var(--spacing,.0025rem)*400)0;display:grid}:host-context(:root.pref-animation-reduce){--mds-accordion-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-accordion-border-color:rgb(var(--tone-neutral-06,158 158 158))}:host-context(:root.pref-contrast-more){--mds-accordion-border-color:rgb(var(--tone-neutral-01,255 255 255));--mds-accordion-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-accordion-border-color:rgb(var(--tone-neutral-06,158 158 158))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-border-color:rgb(var(--tone-neutral-01,255 255 255));--mds-accordion-color:rgb(var(--tone-neutral-01,255 255 255))}}";
-
-const MdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordion extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.changedEvent = createEvent(this, "mdsAccordionChange", 7);
-        /**
-         * Choose if multiple siblings can be selected simultaneously
-         */
-        this.multiple = false;
-        /**
-         * Specifies if an item can be closed by user
-         */
-        this.closable = true;
-        this.queryItems = () => this.element.querySelectorAll('mds-accordion-item');
-        this.selectMultipleItems = () => {
-            const items = this.queryItems();
-            const selectedItem = [];
-            items.forEach((item, key) => {
-                if (item.selected) {
-                    selectedItem.push(key);
-                }
-            });
-            this.changedEvent.emit({ children: items, selected: selectedItem.toString() });
-        };
-        this.changedChildrenHandler = (event) => {
-            const items = this.queryItems();
-            if (this.multiple) {
-                this.selectMultipleItems();
-                return;
-            }
-            items.forEach((item, key) => {
-                item.selected =
-                    `item-${key}` === event.detail.id && (event.detail.selected || !this.closable);
-                if (item.selected) {
-                    this.changedEvent.emit({ children: items, selected: key.toString() });
-                }
-            });
-        };
-    }
-    componentWillLoad() {
-        const items = this.queryItems();
-        items.forEach((item, key) => (item.id = `item-${key}`));
-    }
-    selectedEventHandler(event) {
-        this.changedChildrenHandler(event);
-    }
-    unselectedEventHandler(event) {
-        this.changedChildrenHandler(event);
-    }
-    render() {
-        return (h(Host, { key: 'b0bb67801baf50bffd334901368ec18aceb9c677' }, h("slot", { key: 'babdb382cf841a21db5099025ddfb293265a5503' })));
-    }
-    get element() { return this; }
-    static get style() { return mdsAccordionCss; }
-}, [257, "mds-accordion", {
-        "multiple": [4],
-        "closable": [4]
-    }, [[0, "mdsAccordionItemSelect", "selectedEventHandler"], [0, "mdsAccordionItemUnselect", "unselectedEventHandler"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-accordion"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-accordion":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsAccordion$1);
-            }
-            break;
-    } });
-}
-
-const MdsAccordion = MdsAccordion$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsAccordion, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as o,createEvent as t,h as r,Host as n,transformTag as s}from"@stencil/core/internal/client";const i=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.changedEvent=t(this,"mdsAccordionChange",7),this.multiple=!1,this.closable=!0,this.queryItems=()=>this.element.querySelectorAll("mds-accordion-item"),this.selectMultipleItems=()=>{const e=this.queryItems(),o=[];e.forEach(((e,t)=>{e.selected&&o.push(t)})),this.changedEvent.emit({children:e,selected:""+o})},this.changedChildrenHandler=e=>{const o=this.queryItems();this.multiple?this.selectMultipleItems():o.forEach(((t,r)=>{t.selected="item-"+r===e.detail.id&&(e.detail.selected||!this.closable),t.selected&&this.changedEvent.emit({children:o,selected:""+r})}))}}componentWillLoad(){this.queryItems().forEach(((e,o)=>e.id="item-"+o))}selectedEventHandler(e){this.changedChildrenHandler(e)}unselectedEventHandler(e){this.changedChildrenHandler(e)}render(){return r(n,{key:"c3abd999f46ae45f2ba929c1719a04b2f6e57e62"},r("slot",{key:"368b026625a477dfc337b5d9b56ee6e01eef15ce"}))}get element(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-accordion-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-border-width:2px;--mds-accordion-duration:.3s;--mds-accordion-padding-selected:1rem 0 2rem 0;--mds-accordion-padding-unselected:1rem 0}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-border-width{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-accordion-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-accordion-padding-selected{syntax:"<length>+";inherits:false;initial-value:1rem 0 2rem 0}@property --mds-accordion-padding-unselected{syntax:"<length>+";inherits:false;initial-value:1rem 0}:host{--mds-accordion-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-border-width:2px;--mds-accordion-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-duration:.3s;--mds-accordion-padding-selected:calc(var(--spacing,.0025rem)*400) 0 calc(var(--spacing,.0025rem)*800) 0;--mds-accordion-padding-unselected:calc(var(--spacing,.0025rem)*400) 0;display:grid}:host-context(:root.pref-animation-reduce){--mds-accordion-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-accordion-border-color:rgb(var(--tone-neutral-06,158 158 158))}:host-context(:root.pref-contrast-more){--mds-accordion-border-color:rgb(var(--tone-neutral-01,255 255 255));--mds-accordion-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-accordion-border-color:rgb(var(--tone-neutral-06,158 158 158))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-border-color:rgb(var(--tone-neutral-01,255 255 255));--mds-accordion-color:rgb(var(--tone-neutral-01,255 255 255))}}'}},[257,"mds-accordion",{multiple:[4],closable:[4]},[[0,"mdsAccordionItemSelect","selectedEventHandler"],[0,"mdsAccordionItemUnselect","unselectedEventHandler"]]]),d=i,a=function(){"undefined"!=typeof customElements&&["mds-accordion"].forEach((e=>{"mds-accordion"===e&&(customElements.get(s(e))||customElements.define(s(e),i))}))};export{d as MdsAccordion,a as defineCustomElement}

package/dist/components/mds-author.js

@@ -1,39 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const mdsAuthorCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-avatar:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{align-items:center;container:mds-author/inline-size;display:flex;gap:calc(var(--spacing,.0025rem)*400);width:100%}.avatar{display:flex;flex-shrink:0;-webkit-user-select:none;user-select:none}.info{display:grid;flex-grow:1;min-width:0}@container (max-width:200px){:host-context(:not(.safari)){flex-direction:column;justify-content:center;text-align:center}}";
-
-const MdsAuthor$1 = /*@__PURE__*/ proxyCustomElement(class MdsAuthor extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    componentWillLoad() {
-        this.hasAvatar = this.hostElement.querySelector(':scope > [slot="avatar"]') !== null;
-    }
-    render() {
-        return (h(Host, { key: '5c5f497c1206c82632d9f1d43e654dcff7182078' }, this.hasAvatar && (h("div", { key: '96373e67f2d0bf1b8b95fccb0d769160314d2329', class: "avatar" }, h("slot", { key: '9c688c746f9f9e29ca9b5b87924d2e470190ab04', name: "avatar" }))), h("div", { key: 'e4b9ad107b06481bdefe107b088c28eeeffaf9c2', class: "info" }, h("slot", { key: 'cf278792b4d32d854ef522476cd3e93a4a2182df' }))));
-    }
-    get hostElement() { return this; }
-    static get style() { return mdsAuthorCss; }
-}, [257, "mds-author"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-author"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-author":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsAuthor$1);
-            }
-            break;
-    } });
-}
-
-const MdsAuthor = MdsAuthor$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsAuthor, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as s,transformTag as n}from"@stencil/core/internal/client";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}componentWillLoad(){this.hasAvatar=null!==this.hostElement.querySelector(':scope > [slot="avatar"]')}render(){return a(s,{key:"2b0e6730cb3fb2d7881f527430d2b04a0705fd1b"},this.hasAvatar&&a("div",{key:"ee84a202caf229318c122be05abd703a0a7a7719",class:"avatar"},a("slot",{key:"d9b69db0285af31444ca333d948eecf36445539b",name:"avatar"})),a("div",{key:"6a51cca8c63a1967e79a464b846f09d9966055bd",class:"info"},a("slot",{key:"65e3f059c8d4e5e432b0990ffaa41197fd8186ff"})))}get hostElement(){return this}static get style(){return"@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-avatar:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{align-items:center;container:mds-author/inline-size;display:flex;gap:calc(var(--spacing,.0025rem)*400);width:100%}.avatar{display:flex;flex-shrink:0;-webkit-user-select:none;user-select:none}.info{display:grid;flex-grow:1;min-width:0}@container (max-width:200px){:host-context(:not(.safari)){flex-direction:column;justify-content:center;text-align:center}}"}},[257,"mds-author"]),o=i,r=function(){"undefined"!=typeof customElements&&["mds-author"].forEach((e=>{"mds-author"===e&&(customElements.get(n(e))||customElements.define(n(e),i))}))};export{o as MdsAuthor,r as defineCustomElement}

package/dist/components/mds-avatar-stack-item.js

@@ -1,6 +1 @@
-import { M as MdsAvatarStackItem$1, d as defineCustomElement$1 } from './mds-avatar-stack-item2.js';
-
-const MdsAvatarStackItem = MdsAvatarStackItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsAvatarStackItem, defineCustomElement };
+import{M as a,d as s}from"./mds-avatar-stack-item2.js";const t=a,m=s;export{t as MdsAvatarStackItem,m as defineCustomElement}