@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/esm-es5/mds-button_3.entry.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(n,t,r,o){function a(n){return n instanceof r?n:new r((function(t){t(n)}))}return new(r||(r=Promise))((function(r,s){function e(n){try{u(o.next(n))}catch(n){s(n)}}function i(n){try{u(o["throw"](n))}catch(n){s(n)}}function u(n){n.done?r(n.value):a(n.value).then(e,i)}u((o=o.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var r={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},o,a,s,e;return e={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(e[Symbol.iterator]=function(){return this}),e;function i(n){return function(t){return u([n,t])}}function u(i){if(o)throw new TypeError("Generator is already executing.");while(e&&(e=0,i[0]&&(r=0)),r)try{if(o=1,a&&(s=i[0]&2?a["return"]:i[0]?a["throw"]||((s=a["return"])&&s.call(a),0):a.next)&&!(s=s.call(a,i[1])).done)return s;if(a=0,s)i=[i[0]&2,s.value];switch(i[0]){case 0:case 1:s=i;break;case 4:r.label++;return{value:i[1],done:false};case 5:r.label++;a=i[1];i=[0];continue;case 7:i=r.ops.pop();r.trys.pop();continue;default:if(!(s=r.trys,s=s.length>0&&s[s.length-1])&&(i[0]===6||i[0]===2)){r=0;continue}if(i[0]===3&&(!s||i[1]>s[0]&&i[1]<s[3])){r.label=i[1];break}if(i[0]===6&&r.label<s[1]){r.label=s[1];s=i;break}if(s&&r.label<s[2]){r.label=s[2];r.ops.push(i);break}if(s[2])r.ops.pop();r.trys.pop();continue}i=t.call(n,r)}catch(n){i=[6,n];a=0}finally{o=s=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{c as clsx}from"./clsx-297c1ffe.js";import{K as KeyboardManager}from"./keyboard-manager-f3d273fc.js";import{u as unslugName,s as setAttributeIfEmpty}from"./aria-0e390d9c.js";var buttonSizeTypographyVariant={sm:"action",md:"action",lg:"h6",xl:"h4"};var BASE64_SVG_ICON="data:image/svg+xml;base64,";var MARKUP_SVG_ICON="<svg ";var isIconFormatIsBase64=function(n){if(!n){return false}return n.startsWith(BASE64_SVG_ICON)};var isIconFormatIsSVG=function(n){if(!n){return false}return n.startsWith(MARKUP_SVG_ICON)};var mdsButtonCss='@-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\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\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-button-await-duration: Sets the duration of the rotation of the spinner await component\n * @prop --mds-button-background: Sets the background-color of the component\n * @prop --mds-button-border-color: Sets the border-color of the component\n * @prop --mds-button-color: Sets the text color of the component\n * @prop --mds-button-gap: Sets the distance betwen element inside the components, use it instead of setting gap property directly.\n * @prop --mds-button-radius: Sets the border-radius of the component\n */\n\n:host {\n\n  --mds-button-await-duration: 0.725s;\n  --mds-button-background: rgb(var(--brand-maggioli-02));\n  --mds-button-border-color: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-gap: 0.5rem;\n  --mds-button-radius: 0.5rem;\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:host: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:host {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-button-background);\n  border-color: var(--mds-button-border-color);\n  border-radius: var(--mds-button-radius);\n  border-style: solid;\n  border-width: 2px;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--mds-button-color);\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: currentcolor;\n  gap: var(--mds-button-gap);\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-transition-property: background-color, border-color, color, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, transform, outline, outline-offset;\n  transition-property: background-color, border-color, box-shadow, color, transform, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n}\n\n:host(: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    z-index: 10;\n  }\n\n.text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  min-width: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n.text::first-letter {\n  text-transform: uppercase;\n}\n\n.icon {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\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\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: inherit;\n  -ms-flex-pack: center;\n  justify-content: center;\n  pointer-events: none;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  opacity: 0.5;\n\n  pointer-events: none;\n}\n\n.await {\n  height: 1.5rem;\n  width: 1.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\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\n  margin-right: calc(calc(-1 * var(--mds-button-gap)) - 1.5rem);\n  -webkit-transition-property: margin-right;\n  transition-property: margin-right;\n}\n\n.spinner {\n  height: 1.5rem;\n  width: 1.5rem;\n\n  --mds-spinner-duration: var(--mds-button-await-duration);\n\n  color: currentcolor;\n}\n\n:host(:not([await])) .spinner,\n:host([await="false"]) .spinner {\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([await]:not([await="false"])) .await {\n  margin-right: 0rem;\n}\n\n:host([await]:not([await="false"])) {\n  pointer-events: none;\n}\n\n@tailwind utilities;\n\n:host( [variant="primary"] ),\n:host( [variant="primary"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="primary"]:hover ),\n:host( [variant="primary"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-04));\n}\n\n:host( [variant="primary"][active] ),\n:host( [variant="primary"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-02));\n}\n\n:host( [variant="primary"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-09));\n  --mds-button-color: rgb(var(--brand-maggioli-03));\n\n  fill: rgb(var(--brand-maggioli-03));\n}\n\n:host( [variant="primary"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-08));\n\n}\n\n:host( [variant="primary"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-08));\n  --mds-button-color: rgb(var(--brand-maggioli-02));\n\n  fill: rgb(var(--brand-maggioli-02));\n}\n\n:host( [variant="primary"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-04));\n  --mds-button-color: rgb(var(--brand-maggioli-03));\n}\n\n:host( [variant="primary"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-04));\n  --mds-button-color: rgb(var(--brand-maggioli-02));\n}\n\n:host( [variant="primary"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-05));\n  --mds-button-color: rgb(var(--brand-maggioli-03));\n}\n\n:host( [variant="primary"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-02));\n}\n\n:host( [variant="primary"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( [variant="primary"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="primary"] ),\n  :host( [variant="primary"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="primary"]:hover ),\n  :host( [variant="primary"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant="primary"][active] ),\n  :host( [variant="primary"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant="primary"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-09));\n    --mds-button-color: rgb(var(--brand-maggioli-02));\n\n    fill: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant="primary"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-08));\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n\n    fill: rgb(var(--brand-maggioli-01));\n  }\n\n  :host( [variant="primary"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-08));\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n\n    fill: rgb(var(--brand-maggioli-01));\n  }\n\n  :host( [variant="primary"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-03));\n    --mds-button-color: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant="primary"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-03));\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n  }\n\n  :host( [variant="primary"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-04));\n    --mds-button-color: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant="primary"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n  }\n\n  :host( [variant="primary"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-03));\n  }\n\n  :host( [variant="primary"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="primary"] ),\n    :host( [variant="primary"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="primary"]:hover ),\n    :host( [variant="primary"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant="primary"][active] ),\n    :host( [variant="primary"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant="primary"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-09));\n      --mds-button-color: rgb(var(--brand-maggioli-02));\n  \n      fill: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant="primary"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--brand-maggioli-08));\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n  \n      fill: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant="primary"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--brand-maggioli-08));\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n  \n      fill: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant="primary"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-03));\n      --mds-button-color: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant="primary"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-03));\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant="primary"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-04));\n      --mds-button-color: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant="primary"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant="primary"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-03));\n    }\n\n    :host( [variant="primary"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant="secondary"] ),\n:host( [variant="secondary"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="secondary"]:hover ),\n:host( [variant="secondary"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-04));\n}\n\n:host( [variant="secondary"][active] ),\n:host( [variant="secondary"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-02));\n}\n\n:host( [variant="secondary"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-09));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n\n  fill: rgb(var(--brand-maggioli-editore-03));\n}\n\n:host( [variant="secondary"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n\n}\n\n:host( [variant="secondary"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n\n  fill: rgb(var(--brand-maggioli-editore-02));\n}\n\n:host( [variant="secondary"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-editore-04));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n}\n\n:host( [variant="secondary"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-editore-04));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n}\n\n:host( [variant="secondary"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-editore-05));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n}\n\n:host( [variant="secondary"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n}\n\n:host( [variant="secondary"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-editore-04));\n}\n\n:host( [variant="secondary"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="secondary"] ),\n  :host( [variant="secondary"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="secondary"]:hover ),\n  :host( [variant="secondary"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant="secondary"][active] ),\n  :host( [variant="secondary"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant="secondary"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-09));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n\n    fill: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant="secondary"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n\n    fill: rgb(var(--brand-maggioli-editore-01));\n  }\n\n  :host( [variant="secondary"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n\n    fill: rgb(var(--brand-maggioli-editore-01));\n  }\n\n  :host( [variant="secondary"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-editore-03));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant="secondary"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-editore-03));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n  }\n\n  :host( [variant="secondary"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-editore-04));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant="secondary"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n  }\n\n  :host( [variant="secondary"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n  }\n\n  :host( [variant="secondary"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="secondary"] ),\n    :host( [variant="secondary"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="secondary"]:hover ),\n    :host( [variant="secondary"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant="secondary"][active] ),\n    :host( [variant="secondary"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-02));\n    }\n\n    :host( [variant="secondary"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-09));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n\n      fill: rgb(var(--brand-maggioli-editore-02));\n    }\n\n    :host( [variant="secondary"][tone="weak"]:hover ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n\n      fill: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant="secondary"][tone="weak"][active] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n\n      fill: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant="secondary"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-editore-03));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n    }\n\n    :host( [variant="secondary"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-editore-03));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant="secondary"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-editore-04));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n    }\n\n    :host( [variant="secondary"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant="secondary"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n    }\n\n    :host( [variant="secondary"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n    }\n  }\n}\n\n:host( [variant="dark"] ),\n:host( [variant="dark"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-04));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="dark"]:hover ),\n:host( [variant="dark"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant="dark"][active] ),\n:host( [variant="dark"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="dark"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="dark"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-06));\n}\n\n:host( [variant="dark"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="dark"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-03));\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="dark"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-04));\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="dark"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-02));\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="dark"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="dark"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="dark"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n@tailwind utilities;\n\n:host( [variant="light"] ),\n:host( [variant="light"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="light"]:hover ),\n:host( [variant="light"][tone="strong"]:hover ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="light"][active] ),\n:host( [variant="light"][tone="strong"][active] ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="light"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant="light"][tone="weak"]:hover ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="light"][tone="weak"][active] ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="light"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n@tailwind utilities;\n\n:host( [variant="error"] ),\n:host( [variant="error"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--status-error-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-error-04));\n}\n\n:host( [variant="error"][active] ),\n:host( [variant="error"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--status-error-06));\n}\n\n:host( [variant="error"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--status-error-09));\n  --mds-button-color: rgb(var(--status-error-03));\n\n  fill: rgb(var(--status-error-03));\n}\n\n:host( [variant="error"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-error-08));\n\n}\n\n:host( [variant="error"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--status-error-08));\n  --mds-button-color: rgb(var(--status-error-02));\n\n  fill: rgb(var(--status-error-02));\n}\n\n:host( [variant="error"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-04));\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host( [variant="error"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-04));\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host( [variant="error"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-05));\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host( [variant="error"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host( [variant="error"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-04));\n}\n\n:host( [variant="error"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="error"] ),\n  :host( [variant="error"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="error"]:hover ),\n  :host( [variant="error"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][active] ),\n  :host( [variant="error"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--status-error-04));\n  }\n\n  :host( [variant="error"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--status-error-09));\n    --mds-button-color: rgb(var(--status-error-02));\n\n    fill: rgb(var(--status-error-02));\n  }\n\n  :host( [variant="error"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-error-08));\n    --mds-button-color: rgb(var(--status-error-01));\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--status-error-08));\n    --mds-button-color: rgb(var(--status-error-01));\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host( [variant="error"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-04));\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host( [variant="error"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-03));\n  }\n\n  :host( [variant="error"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="error"] ),\n    :host( [variant="error"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="error"]:hover ),\n    :host( [variant="error"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][active] ),\n    :host( [variant="error"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--status-error-04));\n    }\n\n    :host( [variant="error"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--status-error-09));\n      --mds-button-color: rgb(var(--status-error-02));\n  \n      fill: rgb(var(--status-error-02));\n    }\n\n    :host( [variant="error"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-error-08));\n      --mds-button-color: rgb(var(--status-error-01));\n  \n      fill: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-error-08));\n      --mds-button-color: rgb(var(--status-error-01));\n  \n      fill: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--status-error-02));\n    }\n\n    :host( [variant="error"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-04));\n      --mds-button-color: rgb(var(--status-error-02));\n    }\n\n    :host( [variant="error"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-03));\n    }\n\n    :host( [variant="error"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant="warning"] ),\n:host( [variant="warning"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--status-warning-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-warning-04));\n}\n\n:host( [variant="warning"][active] ),\n:host( [variant="warning"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--status-warning-06));\n}\n\n:host( [variant="warning"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--status-warning-09));\n  --mds-button-color: rgb(var(--status-warning-03));\n\n  fill: rgb(var(--status-warning-03));\n}\n\n:host( [variant="warning"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-warning-08));\n\n}\n\n:host( [variant="warning"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--status-warning-08));\n  --mds-button-color: rgb(var(--status-warning-02));\n\n  fill: rgb(var(--status-warning-02));\n}\n\n:host( [variant="warning"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-04));\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant="warning"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-04));\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant="warning"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-05));\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant="warning"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant="warning"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-04));\n}\n\n:host( [variant="warning"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="warning"] ),\n  :host( [variant="warning"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="warning"]:hover ),\n  :host( [variant="warning"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][active] ),\n  :host( [variant="warning"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--status-warning-04));\n  }\n\n  :host( [variant="warning"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--status-warning-09));\n    --mds-button-color: rgb(var(--status-warning-02));\n\n    fill: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant="warning"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-warning-08));\n    --mds-button-color: rgb(var(--status-warning-01));\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--status-warning-08));\n    --mds-button-color: rgb(var(--status-warning-01));\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant="warning"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-04));\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant="warning"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-03));\n  }\n\n  :host( [variant="warning"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="warning"] ),\n    :host( [variant="warning"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="warning"]:hover ),\n    :host( [variant="warning"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][active] ),\n    :host( [variant="warning"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--status-warning-04));\n    }\n\n    :host( [variant="warning"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--status-warning-09));\n      --mds-button-color: rgb(var(--status-warning-02));\n  \n      fill: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant="warning"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-warning-08));\n      --mds-button-color: rgb(var(--status-warning-01));\n  \n      fill: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-warning-08));\n      --mds-button-color: rgb(var(--status-warning-01));\n  \n      fill: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant="warning"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-04));\n      --mds-button-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant="warning"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-03));\n    }\n\n    :host( [variant="warning"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant="info"] ),\n:host( [variant="info"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--status-info-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-info-04));\n}\n\n:host( [variant="info"][active] ),\n:host( [variant="info"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--status-info-06));\n}\n\n:host( [variant="info"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--status-info-09));\n  --mds-button-color: rgb(var(--status-info-03));\n\n  fill: rgb(var(--status-info-03));\n}\n\n:host( [variant="info"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-info-08));\n\n}\n\n:host( [variant="info"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--status-info-08));\n  --mds-button-color: rgb(var(--status-info-02));\n\n  fill: rgb(var(--status-info-02));\n}\n\n:host( [variant="info"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-04));\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host( [variant="info"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-04));\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host( [variant="info"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-05));\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host( [variant="info"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host( [variant="info"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-04));\n}\n\n:host( [variant="info"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="info"] ),\n  :host( [variant="info"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="info"]:hover ),\n  :host( [variant="info"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][active] ),\n  :host( [variant="info"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--status-info-04));\n  }\n\n  :host( [variant="info"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--status-info-09));\n    --mds-button-color: rgb(var(--status-info-02));\n\n    fill: rgb(var(--status-info-02));\n  }\n\n  :host( [variant="info"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-info-08));\n    --mds-button-color: rgb(var(--status-info-01));\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--status-info-08));\n    --mds-button-color: rgb(var(--status-info-01));\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant="info"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-04));\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant="info"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-03));\n  }\n\n  :host( [variant="info"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="info"] ),\n    :host( [variant="info"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="info"]:hover ),\n    :host( [variant="info"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][active] ),\n    :host( [variant="info"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--status-info-04));\n    }\n\n    :host( [variant="info"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--status-info-09));\n      --mds-button-color: rgb(var(--status-info-02));\n  \n      fill: rgb(var(--status-info-02));\n    }\n\n    :host( [variant="info"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-info-08));\n      --mds-button-color: rgb(var(--status-info-01));\n  \n      fill: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-info-08));\n      --mds-button-color: rgb(var(--status-info-01));\n  \n      fill: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant="info"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-04));\n      --mds-button-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant="info"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-03));\n    }\n\n    :host( [variant="info"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant="success"] ),\n:host( [variant="success"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--status-success-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-success-04));\n}\n\n:host( [variant="success"][active] ),\n:host( [variant="success"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--status-success-06));\n}\n\n:host( [variant="success"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--status-success-09));\n  --mds-button-color: rgb(var(--status-success-03));\n\n  fill: rgb(var(--status-success-03));\n}\n\n:host( [variant="success"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-success-08));\n\n}\n\n:host( [variant="success"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--status-success-08));\n  --mds-button-color: rgb(var(--status-success-02));\n\n  fill: rgb(var(--status-success-02));\n}\n\n:host( [variant="success"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-04));\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host( [variant="success"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-04));\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host( [variant="success"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-05));\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host( [variant="success"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host( [variant="success"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-04));\n}\n\n:host( [variant="success"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="success"] ),\n  :host( [variant="success"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="success"]:hover ),\n  :host( [variant="success"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][active] ),\n  :host( [variant="success"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--status-success-04));\n  }\n\n  :host( [variant="success"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--status-success-09));\n    --mds-button-color: rgb(var(--status-success-02));\n\n    fill: rgb(var(--status-success-02));\n  }\n\n  :host( [variant="success"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-success-08));\n    --mds-button-color: rgb(var(--status-success-01));\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--status-success-08));\n    --mds-button-color: rgb(var(--status-success-01));\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant="success"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-04));\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant="success"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-03));\n  }\n\n  :host( [variant="success"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="success"] ),\n    :host( [variant="success"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="success"]:hover ),\n    :host( [variant="success"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][active] ),\n    :host( [variant="success"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--status-success-04));\n    }\n\n    :host( [variant="success"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--status-success-09));\n      --mds-button-color: rgb(var(--status-success-02));\n  \n      fill: rgb(var(--status-success-02));\n    }\n\n    :host( [variant="success"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-success-08));\n      --mds-button-color: rgb(var(--status-success-01));\n  \n      fill: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-success-08));\n      --mds-button-color: rgb(var(--status-success-01));\n  \n      fill: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant="success"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-04));\n      --mds-button-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant="success"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-03));\n    }\n\n    :host( [variant="success"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n  }\n}\n\n:host( [size="sm"] ) {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0rem;\n  padding-bottom: 0rem;\n\n  --mds-button-radius: 0.375rem;\n\n  min-height: 1.75rem;\n  min-width: 1.75rem;\n}\n\n:host( .no-text[size="sm"] ) {\n  padding: 0rem;\n}\n\n:host( [size="sm"] ) .text {\n  font-weight: 500;\n}\n\n:host( [size="sm"][await]:not([await="false"]) ) .await {\n  -webkit-transform: scale(.75);\n  transform: scale(.75);\n}\n\n:host( [size="md"] ) {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\n:host( .no-text[size="md"] ) {\n  padding: 0.25rem;\n}\n\n:host( [size="lg"] ) {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  min-height: 2.75rem;\n  min-width: 2.75rem;\n}\n\n:host( .no-text[size="lg"] ) {\n  padding: 0.5rem;\n}\n\n:host( [size="xl"] ) {\n  padding-left: 2rem;\n  padding-right: 2rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  min-height: 3.25rem;\n  min-width: 3.25rem;\n}\n\n:host( .no-text[size="xl"] ) {\n  padding: 0.5rem;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .await,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .await,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n  }\n  }\n}\n\n\n';var MdsButtonStyle0=mdsButtonCss;var MdsButton=function(){function n(n){var t=this;registerInstance(this,n);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.km=new KeyboardManager;this.handleRequestSubmitForm=function(n){var r;n.preventDefault();(r=t.internals.form)===null||r===void 0?void 0:r.requestSubmit()};this.handleReset=function(n){var r;n.preventDefault();(r=t.internals.form)===null||r===void 0?void 0:r.reset()};this.mouseDown=function(){t.active=true};this.mouseUp=function(){t.active=false};this.redirectBlank=function(){var n;var r=document.createElement("a");r.target="_blank";r.href=(n=t.href)!==null&&n!==void 0?n:"";r.click()};this.autoFocus=undefined;this.icon=undefined;this.iconPosition="left";this.type="submit";this.variant="primary";this.tone="strong";this.size="md";this.active=undefined;this.disabled=undefined;this.await=undefined;this.href=undefined;this.target="self"}n.prototype.disabledChanged=function(n){if(n){this.km.attachClickBehavior();return}this.km.detachClickBehavior()};n.prototype.awaitChanged=function(n){this.host.setAttribute("aria-busy",n.toString());if(n){this.km.attachClickBehavior();return}this.km.detachClickBehavior()};n.prototype.handleTypeChange=function(n){if(!this.internals.form)return;if(n==="submit"){this.host.removeEventListener("click",this.handleReset);this.host.addEventListener("click",this.handleRequestSubmitForm)}else if(n==="reset"){this.host.removeEventListener("click",this.handleRequestSubmitForm);this.host.addEventListener("click",this.handleReset)}else{this.host.removeEventListener("click",this.handleRequestSubmitForm);this.host.removeEventListener("click",this.handleReset)}};n.prototype.componentWillLoad=function(){var n=this;this.hasNotification=this.host.querySelector('[slot="notification"]')!==null;this.hasText=this.host.innerHTML!=="";if(this.href){this.host.addEventListener("click",(function(t){var r;t.preventDefault();if(n.target==="blank"){n.redirectBlank();return}window.location.href=(r=n.href)!==null&&r!==void 0?r:""}))}else if(this.internals.form){if(this.type==="submit"){this.host.addEventListener("click",this.handleRequestSubmitForm)}else if(this.type==="reset"){this.host.addEventListener("click",this.handleReset)}}};n.prototype.componentDidLoad=function(){this.km.addElement(this.host);if(!this.await){this.km.attachClickBehavior()}this.host.setAttribute("aria-busy",this.await?"true":"false");if(this.autoFocus){this.host.focus()}if(isIconFormatIsBase64(this.icon)){return}if(isIconFormatIsSVG(this.icon)){return}if(!this.hasText&&this.icon){var n=unslugName(this.icon);if(!this.host.hasAttribute("aria-label")){setAttributeIfEmpty(this.host,"title",n)}setAttributeIfEmpty(this.host,"aria-label",n)}};n.prototype.disconnectedCallback=function(){this.km.detachClickBehavior()};n.prototype.render=function(){this.typography=buttonSizeTypographyVariant[this.size];return h(Host,{key:"d484503460bcc94a05fcafbb8a22f6393b36053f",class:clsx(!this.hasText&&"no-text"),onMouseDown:this.mouseDown,onMouseUp:this.mouseUp,onMouseOut:this.mouseUp,tabindex:"0",role:"button"},h("div",{key:"968066eb3846d4a6a81af768ff87752b9921c456",class:"await"},h("mds-spinner",{key:"50e70b9e20862083e6857dfee1433ff17c192745",class:"spinner",running:this.await})),this.icon&&this.iconPosition==="left"&&h("mds-icon",{key:"46b3d379ae0b62f1c79f858bdcd8301a413cac98","aria-hidden":"true",class:"icon",name:this.icon,part:"icon"}),this.hasText&&h("mds-text",{key:"087af63ba9f7348c9c0adf986cc37a2b93c4b070",class:"text",part:"label",typography:this.typography},h("slot",{key:"1e9d5239c4348e622d9130beb2d53bc3d2bb7782"})),this.hasNotification&&h("slot",{key:"1095e39f0ec8f679e8e535f7bce3cfc56251233f",name:"notification"}),this.icon&&this.iconPosition==="right"&&h("mds-icon",{key:"173c8dc5df2c87733a2ec219d7c112dad6d1a3c9","aria-hidden":"true",class:"icon",name:this.icon,part:"icon"}))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{disabled:["disabledChanged"],await:["awaitChanged"],type:["handleTypeChange"]}},enumerable:false,configurable:true});return n}();MdsButton.style=MdsButtonStyle0;function promisifyRequest(n){return new Promise((function(t,r){n.oncomplete=n.onsuccess=function(){return t(n.result)};n.onabort=n.onerror=function(){return r(n.error)}}))}function createStore(n,t){var r=indexedDB.open(n);r.onupgradeneeded=function(){return r.result.createObjectStore(t)};var o=promisifyRequest(r);return function(n,r){return o.then((function(o){return r(o.transaction(t,n).objectStore(t))}))}}var defaultGetStoreFunc;function defaultGetStore(){if(!defaultGetStoreFunc){defaultGetStoreFunc=createStore("keyval-store","keyval")}return defaultGetStoreFunc}function get(n){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:defaultGetStore();return t("readonly",(function(t){return promisifyRequest(t.get(n))}))}function set(n,t){var r=arguments.length>2&&arguments[2]!==undefined?arguments[2]:defaultGetStore();return r("readwrite",(function(r){r.put(t,n);return promisifyRequest(r.transaction)}))}function del(n){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:defaultGetStore();return t("readwrite",(function(t){t.delete(n);return promisifyRequest(t.transaction)}))}var MdsIconSet=function(){function n(n,t,r){this.name=n;this.path=t;this._resolveIconName=r}n.prototype.resolveIconName=function(n){return this._resolveIconName(n,this.name,this.path)};Object.defineProperty(n.prototype,"resolver",{get:function(){return this._resolveIconName},enumerable:false,configurable:true});return n}();var IconsSetController=function(){function n(){var n=this;this._iconsSets=new Map;this._svgPathKey="mdsIconSvgPath";this._svgPathUpdate="mdsIconSvgPathUpdate";this.cacheExp=60*60*1e3*24;this.memoryCache={};this.listeners=[];this.isCacheAvailable=function(t){return __awaiter(n,void 0,void 0,(function(){var n,r,o;return __generator(this,(function(a){switch(a.label){case 0:a.trys.push([0,2,,3]);return[4,get("loader_".concat(t))];case 1:n=a.sent();if(!n){return[2,false]}r=JSON.parse(n);if(Date.now()<r.expiry){return[2,r.data]}del("loader_".concat(t));return[2,false];case 2:o=a.sent();console.error("isCacheAvailable error",o);return[2,false];case 3:return[2]}}))}))};this.setCache=function(t,r){return __awaiter(n,void 0,void 0,(function(){var n;return __generator(this,(function(o){switch(o.label){case 0:o.trys.push([0,2,,3]);return[4,set("loader_".concat(t),JSON.stringify({data:r,expiry:Date.now()+this.cacheExp}))];case 1:o.sent();return[3,3];case 2:n=o.sent();console.error("setCache error",n);return[3,3];case 3:return[2]}}))}))};this.setUpListener()}n.prototype.addIconSet=function(n,t,r){var o=r;var a=this._iconsSets.get(n);if(!o&&a&&typeof a.resolver==="function"){o=a.resolver}else if(o&&typeof o!=="function"){console.error("MdsIconSvg: the third input of addIconSet should be a function that parses and returns the icons's filename.");return false}else if(!o){console.error("MdsIconSvg: the set ".concat(n," needs a resolve function for the icon names."));return false}this._iconsSets.set(n,new MdsIconSet(n,t,o));return true};n.prototype.getIconSet=function(n){if(!n)return{set:null};return{set:this._iconsSets.get(n.split("/")[0])}};n.prototype.setSvgPath=function(n){this._svgPath=n;window.dispatchEvent(new Event(this._svgPathUpdate))};n.prototype.getSvgPath=function(){return this._svgPath};n.prototype.registerListener=function(n){this.listeners.push(n)};n.prototype.setUpListener=function(){var n=this;window.addEventListener(this._svgPathUpdate,(function(){for(var t=0,r=n.listeners;t<r.length;t++){var o=r[t];o()}}))};n.prototype.fetchSvg=function(n){return __awaiter(this,void 0,void 0,(function(){var t,r,o,a,s;return __generator(this,(function(e){switch(e.label){case 0:e.trys.push([0,4,,5]);return[4,this.isCacheAvailable(n)];case 1:t=e.sent();if(this.memoryCache[n]||t){return[2,this.memoryCache[n]||t]}return[4,fetch(n)];case 2:r=e.sent();if(!r.ok){throw Error("Request for '".concat(n,"' returned ").concat(r.status," (").concat(r.statusText,")"))}return[4,r.text()];case 3:o=e.sent();a=o.toLowerCase().trim();if(!(a.startsWith("<svg")||a.startsWith("<?xml"))){throw Error("Resource '".concat(n,"' returned an invalid SVG file"))}this.setCache(n,o);this.memoryCache[n]=o;return[2,o];case 4:s=e.sent();console.error("fetchSvg error",s);return[2,""];case 5:return[2]}}))}))};return n}();var IconsSetService=new IconsSetController;var mdsIconCss=":host{aspect-ratio:1/1;width:1.5rem;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center}.icon{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;font-style:normal;-ms-flex-pack:center;justify-content:center;width:100%}.icon svg{height:auto;width:100%}";var MdsIconStyle0=mdsIconCss;var MdsIcon=function(){function n(n){var t=this;registerInstance(this,n);this.convertBase64ToSvg=function(){var n=t.name.replace(BASE64_SVG_ICON,"").replace(/\=/i,"");return atob(n)};this.svgHTML=undefined;this.name=undefined;this._iconHref=undefined}n.prototype.componentWillLoad=function(){var n=this;this.updateIcon();IconsSetService.registerListener((function(){return n.updateIcon()}))};n.setSvgPathStatic=function(n){IconsSetService.setSvgPath(n)};n.prototype.setSvgPath=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){IconsSetService.setSvgPath(n);return[2]}))}))};n.prototype.updateIcon=function(){return __awaiter(this,void 0,void 0,(function(){var n,t;return __generator(this,(function(r){switch(r.label){case 0:if(!this.name)return[2,Promise.resolve()];if(isIconFormatIsBase64(this.name)){this.svgHTML=this.convertBase64ToSvg();return[2,Promise.resolve()]}if(isIconFormatIsSVG(this.name)){this.svgHTML=this.name;return[2,Promise.resolve()]}n=IconsSetService.getSvgPath()||window.sessionStorage.getItem(IconsSetService._svgPathKey);this._iconHref=n&&!this.name.startsWith("http")?window.location.origin.concat(n.concat(this.name).concat(".svg")):this.name;t=this;return[4,IconsSetService.fetchSvg(this._iconHref)];case 1:t.svgHTML=r.sent();return[2]}}))}))};n.prototype.render=function(){return h(Host,{key:"cd5223c17789fa8499b014ab11d28f29d11a6d5e"},this.svgHTML&&h("i",{key:"b176ca6f11eb463e4a449da470a80b1a2ca42505","aria-hidden":"true",class:"icon",part:"svg",innerHTML:this.svgHTML}))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{name:["updateIcon"]}},enumerable:false,configurable:true});return n}();MdsIcon.style=MdsIconStyle0;var awaitIcon='<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.25" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="4"/>\n  <path opacity="0.75" d="M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>\n</svg>\n';var mdsSpinnerCss='@tailwind utilities;\n\n/**\n * @prop --mds-spinner-duration: Sets the duration of the icon animation\n */\n\n:host {\n\n  --mds-spinner-duration: 0.725s;\n\n  height: 3rem;\n\n  width: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: rgb(var(--brand-maggioli-03));\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transform: scale(0);\n  transform: scale(0);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host([running]:not([running="false"])){\n\n  -webkit-transition-duration: 700ms;\n\n  transition-duration: 700ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -webkit-transform: scale(1);\n\n  transform: scale(1);\n}\n\n.await-icon{\n\n  aspect-ratio: 1/1;\n\n  width: 100%;\n}\n\n@-webkit-keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n.await-icon{\n\n  -webkit-animation: spin 1s linear infinite;\n\n  animation: spin 1s linear infinite;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -webkit-animation-duration: var(--mds-spinner-duration);\n\n  animation-duration: var(--mds-spinner-duration);\n  -webkit-animation-play-state: paused;\n  animation-play-state: paused;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  stroke: currentcolor;\n  -webkit-transition-property: stroke;\n  transition-property: stroke;\n}\n\n:host([running]:not([running="false"])) .await-icon {\n  -webkit-animation-play-state: running;\n  animation-play-state: running;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-spinner-duration: 4s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-spinner-duration: 4s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--brand-maggioli-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--brand-maggioli-01));\n    }\n  }\n}\n\n';var MdsSpinnerStyle0=mdsSpinnerCss;var MdsSpinner=function(){function n(n){registerInstance(this,n);this.running=false}n.prototype.render=function(){return h(Host,{key:"910389c00098833f8ed30cc5cfc5e84cb8c12b1b"},h("i",{key:"25f79ee1462cfab7b0c700b31966bf6f3cdb3bc5",class:"await-icon",innerHTML:awaitIcon}))};return n}();MdsSpinner.style=MdsSpinnerStyle0;export{MdsButton as mds_button,MdsIcon as mds_icon,MdsSpinner as mds_spinner};
+var __awaiter=this&&this.__awaiter||function(n,t,r,a){function o(n){return n instanceof r?n:new r((function(t){t(n)}))}return new(r||(r=Promise))((function(r,s){function e(n){try{u(a.next(n))}catch(n){s(n)}}function i(n){try{u(a["throw"](n))}catch(n){s(n)}}function u(n){n.done?r(n.value):o(n.value).then(e,i)}u((a=a.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var r={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},a,o,s,e;return e={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(e[Symbol.iterator]=function(){return this}),e;function i(n){return function(t){return u([n,t])}}function u(i){if(a)throw new TypeError("Generator is already executing.");while(e&&(e=0,i[0]&&(r=0)),r)try{if(a=1,o&&(s=i[0]&2?o["return"]:i[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,i[1])).done)return s;if(o=0,s)i=[i[0]&2,s.value];switch(i[0]){case 0:case 1:s=i;break;case 4:r.label++;return{value:i[1],done:false};case 5:r.label++;o=i[1];i=[0];continue;case 7:i=r.ops.pop();r.trys.pop();continue;default:if(!(s=r.trys,s=s.length>0&&s[s.length-1])&&(i[0]===6||i[0]===2)){r=0;continue}if(i[0]===3&&(!s||i[1]>s[0]&&i[1]<s[3])){r.label=i[1];break}if(i[0]===6&&r.label<s[1]){r.label=s[1];s=i;break}if(s&&r.label<s[2]){r.label=s[2];r.ops.push(i);break}if(s[2])r.ops.pop();r.trys.pop();continue}i=t.call(n,r)}catch(n){i=[6,n];o=0}finally{a=s=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{c as clsx}from"./clsx-297c1ffe.js";import{K as KeyboardManager}from"./keyboard-manager-9f287ab7.js";import{u as unslugName,s as setAttributeIfEmpty}from"./aria-ed9d415d.js";var buttonSizeTypographyVariant={sm:"action",md:"action",lg:"h6",xl:"h4"};var BASE64_SVG_ICON="data:image/svg+xml;base64,";var MARKUP_SVG_ICON="<svg ";var isIconFormatIsBase64=function(n){if(!n){return false}return n.startsWith(BASE64_SVG_ICON)};var isIconFormatIsSVG=function(n){if(!n){return false}return n.startsWith(MARKUP_SVG_ICON)};var mdsButtonCss='@-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\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\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-button-await-duration: Sets the duration of the rotation of the spinner await component\n * @prop --mds-button-background: Sets the background-color of the component\n * @prop --mds-button-border-color: Sets the border-color of the component\n * @prop --mds-button-color: Sets the text color of the component\n * @prop --mds-button-gap: Sets the distance betwen element inside the components, use it instead of setting gap property directly.\n * @prop --mds-button-radius: Sets the border-radius of the component\n */\n\n:host {\n\n  --mds-button-await-duration: 0.725s;\n  --mds-button-background: rgb(var(--variant-primary-02));\n  --mds-button-border-color: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-gap: 0.5rem;\n  --mds-button-radius: 0.5rem;\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:host: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:host {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-button-background);\n  border-color: var(--mds-button-border-color);\n  border-radius: var(--mds-button-radius);\n  border-style: solid;\n  border-width: 2px;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--mds-button-color);\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: currentcolor;\n  gap: var(--mds-button-gap);\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-transition-property: background-color, border-color, color, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, transform, outline, outline-offset;\n  transition-property: background-color, border-color, box-shadow, color, transform, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n}\n\n:host(: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    z-index: 10;\n  }\n\n.text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  min-width: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n.text::first-letter {\n  text-transform: uppercase;\n}\n\n.icon {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\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\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: inherit;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  pointer-events: none;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  opacity: 0.5;\n\n  pointer-events: none;\n}\n\n.await {\n  height: 1.5rem;\n  width: 1.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\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\n  display: none;\n  margin-right: calc(calc(-1 * var(--mds-button-gap)) - 1.5rem);\n  -webkit-transform: scale(0);\n  transform: scale(0);\n  transition-behavior: allow-discrete;\n  -webkit-transition-property: display, margin-right, opacity, width, -webkit-transform;\n  transition-property: display, margin-right, opacity, width, -webkit-transform;\n  transition-property: display, margin-right, opacity, transform, width;\n  transition-property: display, margin-right, opacity, transform, width, -webkit-transform;\n}\n\n.spinner {\n  height: 1.5rem;\n  width: 1.5rem;\n\n  --mds-spinner-duration: var(--mds-button-await-duration);\n\n  color: currentcolor;\n}\n\n:host(:not([await])) .spinner,\n:host([await="false"]) .spinner {\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([await]:not([await="false"])) .await {\n  margin-right: 0rem;\n  opacity: 1;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -webkit-transform: scale(1);\n  transform: scale(1);\n\n  @starting-style {\n    margin-right: calc(calc(-1 * var(--mds-button-gap)) - 1.5rem);\n    opacity: 0;\n    -webkit-transform: scale(0);\n    transform: scale(0);\n  }\n}\n\n:host([await]:not([await="false"])) {\n  pointer-events: none;\n}\n\n@tailwind utilities;\n\n:host( [variant="primary"] ),\n:host( [variant="primary"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--variant-primary-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="primary"]:hover ),\n:host( [variant="primary"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--variant-primary-04));\n}\n\n:host( [variant="primary"][active] ),\n:host( [variant="primary"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--variant-primary-02));\n}\n\n:host( [variant="primary"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--variant-primary-09));\n  --mds-button-color: rgb(var(--variant-primary-03));\n\n  fill: rgb(var(--variant-primary-03));\n}\n\n:host( [variant="primary"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--variant-primary-08));\n\n}\n\n:host( [variant="primary"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--variant-primary-08));\n  --mds-button-color: rgb(var(--variant-primary-02));\n\n  fill: rgb(var(--variant-primary-02));\n}\n\n:host( [variant="primary"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-primary-04));\n  --mds-button-color: rgb(var(--variant-primary-03));\n}\n\n:host( [variant="primary"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-primary-04));\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host( [variant="primary"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-primary-05));\n  --mds-button-color: rgb(var(--variant-primary-03));\n}\n\n:host( [variant="primary"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host( [variant="primary"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-primary-04));\n}\n\n:host( [variant="primary"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="primary"] ),\n  :host( [variant="primary"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--variant-primary-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="primary"]:hover ),\n  :host( [variant="primary"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant="primary"][active] ),\n  :host( [variant="primary"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant="primary"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--variant-primary-09));\n    --mds-button-color: rgb(var(--variant-primary-02));\n\n    fill: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant="primary"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--variant-primary-08));\n    --mds-button-color: rgb(var(--variant-primary-01));\n\n    fill: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant="primary"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--variant-primary-08));\n    --mds-button-color: rgb(var(--variant-primary-01));\n\n    fill: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant="primary"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-primary-03));\n    --mds-button-color: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant="primary"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-primary-03));\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant="primary"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-primary-04));\n    --mds-button-color: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant="primary"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant="primary"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-primary-03));\n  }\n\n  :host( [variant="primary"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="primary"] ),\n    :host( [variant="primary"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--variant-primary-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="primary"]:hover ),\n    :host( [variant="primary"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant="primary"][active] ),\n    :host( [variant="primary"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--variant-primary-02));\n    }\n\n    :host( [variant="primary"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--variant-primary-09));\n      --mds-button-color: rgb(var(--variant-primary-02));\n\n      fill: rgb(var(--variant-primary-02));\n    }\n\n    :host( [variant="primary"][tone="weak"]:hover ) {\n\n      --mds-button-background: rgb(var(--variant-primary-08));\n      --mds-button-color: rgb(var(--variant-primary-01));\n\n      fill: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant="primary"][tone="weak"][active] ) {\n\n      --mds-button-background: rgb(var(--variant-primary-08));\n      --mds-button-color: rgb(var(--variant-primary-01));\n\n      fill: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant="primary"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-primary-03));\n      --mds-button-color: rgb(var(--variant-primary-02));\n    }\n\n    :host( [variant="primary"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-primary-03));\n      --mds-button-color: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant="primary"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-primary-04));\n      --mds-button-color: rgb(var(--variant-primary-02));\n    }\n\n    :host( [variant="primary"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant="primary"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-primary-03));\n    }\n\n    :host( [variant="primary"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-primary-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant="secondary"] ),\n:host( [variant="secondary"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="secondary"]:hover ),\n:host( [variant="secondary"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-04));\n}\n\n:host( [variant="secondary"][active] ),\n:host( [variant="secondary"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-02));\n}\n\n:host( [variant="secondary"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-09));\n  --mds-button-color: rgb(var(--variant-secondary-03));\n\n  fill: rgb(var(--variant-secondary-03));\n}\n\n:host( [variant="secondary"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-08));\n\n}\n\n:host( [variant="secondary"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-08));\n  --mds-button-color: rgb(var(--variant-secondary-02));\n\n  fill: rgb(var(--variant-secondary-02));\n}\n\n:host( [variant="secondary"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-secondary-04));\n  --mds-button-color: rgb(var(--variant-secondary-03));\n}\n\n:host( [variant="secondary"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-secondary-04));\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host( [variant="secondary"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-secondary-05));\n  --mds-button-color: rgb(var(--variant-secondary-03));\n}\n\n:host( [variant="secondary"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host( [variant="secondary"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-secondary-04));\n}\n\n:host( [variant="secondary"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="secondary"] ),\n  :host( [variant="secondary"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="secondary"]:hover ),\n  :host( [variant="secondary"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant="secondary"][active] ),\n  :host( [variant="secondary"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant="secondary"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-09));\n    --mds-button-color: rgb(var(--variant-secondary-02));\n\n    fill: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant="secondary"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-08));\n    --mds-button-color: rgb(var(--variant-secondary-01));\n\n    fill: rgb(var(--variant-secondary-01));\n  }\n\n  :host( [variant="secondary"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-08));\n    --mds-button-color: rgb(var(--variant-secondary-01));\n\n    fill: rgb(var(--variant-secondary-01));\n  }\n\n  :host( [variant="secondary"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-secondary-03));\n    --mds-button-color: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant="secondary"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-secondary-03));\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n\n  :host( [variant="secondary"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-secondary-04));\n    --mds-button-color: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant="secondary"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n\n  :host( [variant="secondary"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-secondary-03));\n  }\n\n  :host( [variant="secondary"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="secondary"] ),\n    :host( [variant="secondary"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="secondary"]:hover ),\n    :host( [variant="secondary"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant="secondary"][active] ),\n    :host( [variant="secondary"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-02));\n    }\n\n    :host( [variant="secondary"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-09));\n      --mds-button-color: rgb(var(--variant-secondary-02));\n\n      fill: rgb(var(--variant-secondary-02));\n    }\n\n    :host( [variant="secondary"][tone="weak"]:hover ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-08));\n      --mds-button-color: rgb(var(--variant-secondary-01));\n\n      fill: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant="secondary"][tone="weak"][active] ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-08));\n      --mds-button-color: rgb(var(--variant-secondary-01));\n\n      fill: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant="secondary"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-secondary-03));\n      --mds-button-color: rgb(var(--variant-secondary-02));\n    }\n\n    :host( [variant="secondary"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-secondary-03));\n      --mds-button-color: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant="secondary"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-secondary-04));\n      --mds-button-color: rgb(var(--variant-secondary-02));\n    }\n\n    :host( [variant="secondary"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant="secondary"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-secondary-03));\n    }\n\n    :host( [variant="secondary"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-secondary-01));\n    }\n  }\n}\n\n:host( [variant="dark"] ),\n:host( [variant="dark"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-04));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="dark"]:hover ),\n:host( [variant="dark"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant="dark"][active] ),\n:host( [variant="dark"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="dark"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-08));\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="dark"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-07));\n}\n\n:host( [variant="dark"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-06));\n}\n\n:host( [variant="dark"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-03));\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="dark"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-04));\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="dark"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-02));\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="dark"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="dark"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="dark"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n@tailwind utilities;\n\n:host( [variant="light"] ),\n:host( [variant="light"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="light"]:hover ),\n:host( [variant="light"][tone="strong"]:hover ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="light"][active] ),\n:host( [variant="light"][tone="strong"][active] ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="light"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant="light"][tone="weak"]:hover ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant="light"][tone="weak"][active] ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="light"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="light"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n@tailwind utilities;\n\n:host( [variant="error"] ),\n:host( [variant="error"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--status-error-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-error-04));\n}\n\n:host( [variant="error"][active] ),\n:host( [variant="error"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--status-error-06));\n}\n\n:host( [variant="error"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--status-error-09));\n  --mds-button-color: rgb(var(--status-error-03));\n\n  fill: rgb(var(--status-error-03));\n}\n\n:host( [variant="error"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-error-08));\n\n}\n\n:host( [variant="error"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--status-error-08));\n  --mds-button-color: rgb(var(--status-error-02));\n\n  fill: rgb(var(--status-error-02));\n}\n\n:host( [variant="error"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-04));\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host( [variant="error"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-04));\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host( [variant="error"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-05));\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host( [variant="error"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host( [variant="error"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-04));\n}\n\n:host( [variant="error"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="error"] ),\n  :host( [variant="error"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="error"]:hover ),\n  :host( [variant="error"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][active] ),\n  :host( [variant="error"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--status-error-04));\n  }\n\n  :host( [variant="error"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--status-error-09));\n    --mds-button-color: rgb(var(--status-error-02));\n\n    fill: rgb(var(--status-error-02));\n  }\n\n  :host( [variant="error"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-error-08));\n    --mds-button-color: rgb(var(--status-error-01));\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--status-error-08));\n    --mds-button-color: rgb(var(--status-error-01));\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host( [variant="error"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-04));\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host( [variant="error"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host( [variant="error"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-03));\n  }\n\n  :host( [variant="error"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="error"] ),\n    :host( [variant="error"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="error"]:hover ),\n    :host( [variant="error"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][active] ),\n    :host( [variant="error"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--status-error-04));\n    }\n\n    :host( [variant="error"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--status-error-09));\n      --mds-button-color: rgb(var(--status-error-02));\n  \n      fill: rgb(var(--status-error-02));\n    }\n\n    :host( [variant="error"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-error-08));\n      --mds-button-color: rgb(var(--status-error-01));\n  \n      fill: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-error-08));\n      --mds-button-color: rgb(var(--status-error-01));\n  \n      fill: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--status-error-02));\n    }\n\n    :host( [variant="error"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-04));\n      --mds-button-color: rgb(var(--status-error-02));\n    }\n\n    :host( [variant="error"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n\n    :host( [variant="error"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-03));\n    }\n\n    :host( [variant="error"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant="warning"] ),\n:host( [variant="warning"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--status-warning-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-warning-04));\n}\n\n:host( [variant="warning"][active] ),\n:host( [variant="warning"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--status-warning-06));\n}\n\n:host( [variant="warning"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--status-warning-09));\n  --mds-button-color: rgb(var(--status-warning-03));\n\n  fill: rgb(var(--status-warning-03));\n}\n\n:host( [variant="warning"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-warning-08));\n\n}\n\n:host( [variant="warning"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--status-warning-08));\n  --mds-button-color: rgb(var(--status-warning-02));\n\n  fill: rgb(var(--status-warning-02));\n}\n\n:host( [variant="warning"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-04));\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant="warning"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-04));\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant="warning"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-05));\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant="warning"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant="warning"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-04));\n}\n\n:host( [variant="warning"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="warning"] ),\n  :host( [variant="warning"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="warning"]:hover ),\n  :host( [variant="warning"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][active] ),\n  :host( [variant="warning"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--status-warning-04));\n  }\n\n  :host( [variant="warning"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--status-warning-09));\n    --mds-button-color: rgb(var(--status-warning-02));\n\n    fill: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant="warning"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-warning-08));\n    --mds-button-color: rgb(var(--status-warning-01));\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--status-warning-08));\n    --mds-button-color: rgb(var(--status-warning-01));\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant="warning"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-04));\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant="warning"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="warning"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-03));\n  }\n\n  :host( [variant="warning"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="warning"] ),\n    :host( [variant="warning"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="warning"]:hover ),\n    :host( [variant="warning"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][active] ),\n    :host( [variant="warning"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--status-warning-04));\n    }\n\n    :host( [variant="warning"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--status-warning-09));\n      --mds-button-color: rgb(var(--status-warning-02));\n  \n      fill: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant="warning"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-warning-08));\n      --mds-button-color: rgb(var(--status-warning-01));\n  \n      fill: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-warning-08));\n      --mds-button-color: rgb(var(--status-warning-01));\n  \n      fill: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant="warning"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-04));\n      --mds-button-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant="warning"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="warning"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-03));\n    }\n\n    :host( [variant="warning"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant="info"] ),\n:host( [variant="info"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--status-info-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-info-04));\n}\n\n:host( [variant="info"][active] ),\n:host( [variant="info"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--status-info-06));\n}\n\n:host( [variant="info"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--status-info-09));\n  --mds-button-color: rgb(var(--status-info-03));\n\n  fill: rgb(var(--status-info-03));\n}\n\n:host( [variant="info"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-info-08));\n\n}\n\n:host( [variant="info"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--status-info-08));\n  --mds-button-color: rgb(var(--status-info-02));\n\n  fill: rgb(var(--status-info-02));\n}\n\n:host( [variant="info"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-04));\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host( [variant="info"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-04));\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host( [variant="info"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-05));\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host( [variant="info"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host( [variant="info"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-04));\n}\n\n:host( [variant="info"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="info"] ),\n  :host( [variant="info"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="info"]:hover ),\n  :host( [variant="info"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][active] ),\n  :host( [variant="info"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--status-info-04));\n  }\n\n  :host( [variant="info"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--status-info-09));\n    --mds-button-color: rgb(var(--status-info-02));\n\n    fill: rgb(var(--status-info-02));\n  }\n\n  :host( [variant="info"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-info-08));\n    --mds-button-color: rgb(var(--status-info-01));\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--status-info-08));\n    --mds-button-color: rgb(var(--status-info-01));\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant="info"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-04));\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant="info"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="info"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-03));\n  }\n\n  :host( [variant="info"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="info"] ),\n    :host( [variant="info"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="info"]:hover ),\n    :host( [variant="info"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][active] ),\n    :host( [variant="info"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--status-info-04));\n    }\n\n    :host( [variant="info"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--status-info-09));\n      --mds-button-color: rgb(var(--status-info-02));\n  \n      fill: rgb(var(--status-info-02));\n    }\n\n    :host( [variant="info"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-info-08));\n      --mds-button-color: rgb(var(--status-info-01));\n  \n      fill: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-info-08));\n      --mds-button-color: rgb(var(--status-info-01));\n  \n      fill: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant="info"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-04));\n      --mds-button-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant="info"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="info"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-03));\n    }\n\n    :host( [variant="info"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant="success"] ),\n:host( [variant="success"][tone="strong"] ) {\n\n  --mds-button-background: rgb(var(--status-success-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"][tone="strong"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-success-04));\n}\n\n:host( [variant="success"][active] ),\n:host( [variant="success"][tone="strong"][active] ) {\n\n  --mds-button-background: rgb(var(--status-success-06));\n}\n\n:host( [variant="success"][tone="weak"] ) {\n\n  --mds-button-background: rgb(var(--status-success-09));\n  --mds-button-color: rgb(var(--status-success-03));\n\n  fill: rgb(var(--status-success-03));\n}\n\n:host( [variant="success"][tone="weak"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-success-08));\n\n}\n\n:host( [variant="success"][tone="weak"][active] ) {\n\n  --mds-button-background: rgb(var(--status-success-08));\n  --mds-button-color: rgb(var(--status-success-02));\n\n  fill: rgb(var(--status-success-02));\n}\n\n:host( [variant="success"][tone="ghost"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-04));\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host( [variant="success"][tone="ghost"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-04));\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host( [variant="success"][tone="ghost"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-05));\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host( [variant="success"][tone="quiet"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host( [variant="success"][tone="quiet"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-04));\n}\n\n:host( [variant="success"][tone="quiet"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="success"] ),\n  :host( [variant="success"][tone="strong"] ) {\n\n    --mds-button-background: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant="success"]:hover ),\n  :host( [variant="success"][tone="strong"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][active] ),\n  :host( [variant="success"][tone="strong"][active] ) {\n\n    --mds-button-background: rgb(var(--status-success-04));\n  }\n\n  :host( [variant="success"][tone="weak"] ) {\n\n    --mds-button-background: rgb(var(--status-success-09));\n    --mds-button-color: rgb(var(--status-success-02));\n\n    fill: rgb(var(--status-success-02));\n  }\n\n  :host( [variant="success"][tone="weak"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-success-08));\n    --mds-button-color: rgb(var(--status-success-01));\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][tone="weak"][active] ) {\n\n    --mds-button-background: rgb(var(--status-success-08));\n    --mds-button-color: rgb(var(--status-success-01));\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][tone="ghost"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant="success"][tone="ghost"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][tone="ghost"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-04));\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant="success"][tone="quiet"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="success"][tone="quiet"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-03));\n  }\n\n  :host( [variant="success"][tone="quiet"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="success"] ),\n    :host( [variant="success"][tone="strong"] ) {\n\n      --mds-button-background: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant="success"]:hover ),\n    :host( [variant="success"][tone="strong"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][active] ),\n    :host( [variant="success"][tone="strong"][active] ) {\n\n      --mds-button-background: rgb(var(--status-success-04));\n    }\n\n    :host( [variant="success"][tone="weak"] ) {\n\n      --mds-button-background: rgb(var(--status-success-09));\n      --mds-button-color: rgb(var(--status-success-02));\n  \n      fill: rgb(var(--status-success-02));\n    }\n\n    :host( [variant="success"][tone="weak"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-success-08));\n      --mds-button-color: rgb(var(--status-success-01));\n  \n      fill: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][tone="weak"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-success-08));\n      --mds-button-color: rgb(var(--status-success-01));\n  \n      fill: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][tone="ghost"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant="success"][tone="ghost"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][tone="ghost"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-04));\n      --mds-button-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant="success"][tone="quiet"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="success"][tone="quiet"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-03));\n    }\n\n    :host( [variant="success"][tone="quiet"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n  }\n}\n\n:host( [size="sm"] ) {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0rem;\n  padding-bottom: 0rem;\n\n  --mds-button-radius: 0.375rem;\n\n  min-height: 1.75rem;\n  min-width: 1.75rem;\n}\n\n:host( .no-text[size="sm"] ) {\n  padding: 0rem;\n}\n\n:host( [size="sm"] ) .text {\n  font-weight: 500;\n}\n\n:host( [size="sm"][await]:not([await="false"]) ) .await {\n  -webkit-transform: scale(.75);\n  transform: scale(.75);\n}\n\n:host( [size="md"] ) {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\n:host( .no-text[size="md"] ) {\n  padding: 0.25rem;\n}\n\n:host( [size="lg"] ) {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  min-height: 2.75rem;\n  min-width: 2.75rem;\n}\n\n:host( .no-text[size="lg"] ) {\n  padding: 0.5rem;\n}\n\n:host( [size="xl"] ) {\n  padding-left: 2rem;\n  padding-right: 2rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  min-height: 3.25rem;\n  min-width: 3.25rem;\n}\n\n:host( .no-text[size="xl"] ) {\n  padding: 0.5rem;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .await,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .await,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n  }\n  }\n}\n\n\n';var MdsButtonStyle0=mdsButtonCss;var MdsButton=function(){function n(n){var t=this;registerInstance(this,n);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.km=new KeyboardManager;this.handleRequestSubmitForm=function(n){var r;n.preventDefault();(r=t.internals.form)===null||r===void 0?void 0:r.requestSubmit()};this.handleReset=function(n){var r;n.preventDefault();(r=t.internals.form)===null||r===void 0?void 0:r.reset()};this.mouseDown=function(){t.active=true};this.mouseUp=function(){t.active=false};this.redirectBlank=function(){var n;var r=document.createElement("a");r.target="_blank";r.href=(n=t.href)!==null&&n!==void 0?n:"";r.click()};this.autoFocus=undefined;this.icon=undefined;this.iconPosition="left";this.type="submit";this.variant="primary";this.tone="strong";this.size="md";this.active=undefined;this.disabled=undefined;this.await=undefined;this.href=undefined;this.target="self"}n.prototype.disabledChanged=function(n){if(n){this.km.attachClickBehavior();return}this.km.detachClickBehavior()};n.prototype.awaitChanged=function(n){this.host.setAttribute("aria-busy",n.toString());if(n){this.km.attachClickBehavior();return}this.km.detachClickBehavior()};n.prototype.handleTypeChange=function(n){if(!this.internals.form)return;if(n==="submit"){this.host.removeEventListener("click",this.handleReset);this.host.addEventListener("click",this.handleRequestSubmitForm)}else if(n==="reset"){this.host.removeEventListener("click",this.handleRequestSubmitForm);this.host.addEventListener("click",this.handleReset)}else{this.host.removeEventListener("click",this.handleRequestSubmitForm);this.host.removeEventListener("click",this.handleReset)}};n.prototype.componentWillLoad=function(){var n=this;this.hasNotification=this.host.querySelector('[slot="notification"]')!==null;this.hasText=this.host.innerHTML!=="";if(this.href){this.host.addEventListener("click",(function(t){var r;t.preventDefault();if(n.target==="blank"){n.redirectBlank();return}if(typeof window!=="undefined"){window.location.href=(r=n.href)!==null&&r!==void 0?r:""}}))}else if(this.internals.form){if(this.type==="submit"){this.host.addEventListener("click",this.handleRequestSubmitForm)}else if(this.type==="reset"){this.host.addEventListener("click",this.handleReset)}}};n.prototype.componentDidLoad=function(){this.km.addElement(this.host);if(!this.await){this.km.attachClickBehavior()}this.host.setAttribute("aria-busy",this.await?"true":"false");if(this.autoFocus){this.host.focus()}if(isIconFormatIsBase64(this.icon)){return}if(isIconFormatIsSVG(this.icon)){return}if(!this.hasText&&this.icon){var n=unslugName(this.icon);if(!this.host.hasAttribute("aria-label")){setAttributeIfEmpty(this.host,"title",n)}setAttributeIfEmpty(this.host,"aria-label",n)}};n.prototype.disconnectedCallback=function(){this.km.detachClickBehavior()};n.prototype.render=function(){this.typography=buttonSizeTypographyVariant[this.size];return h(Host,{key:"649b7825ea9191bc59e101a134971f6ab3f812a4",class:clsx(!this.hasText&&"no-text"),onMouseDown:this.mouseDown,onMouseUp:this.mouseUp,onMouseOut:this.mouseUp,tabindex:"0",role:"button"},h("div",{key:"dc8611656e599dadcd72a987cd02d366308b668e",class:"await"},h("mds-spinner",{key:"2cf418c1d46fd3434491641b73ef996499e4a9fe",class:"spinner",running:this.await})),this.icon&&this.iconPosition==="left"&&h("mds-icon",{key:"0b14c60e5e56118befb1cdab8e5f7e439a8e407f","aria-hidden":"true",class:"icon",name:this.icon,part:"icon"}),this.hasText&&h("mds-text",{key:"36be920f94596da917901f921914c11b4b713819",class:"text",part:"label",typography:this.typography},h("slot",{key:"0f637c83733088951a9f5b0cc8969325cc099198"})),this.hasNotification&&h("slot",{key:"8b0f56322131126cd861c2b76e2d0b7bd40435ae",name:"notification"}),this.icon&&this.iconPosition==="right"&&h("mds-icon",{key:"8c2d58ff81373d1217aa1579b6d09f421b9754d4","aria-hidden":"true",class:"icon",name:this.icon,part:"icon"}))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{disabled:["disabledChanged"],await:["awaitChanged"],type:["handleTypeChange"]}},enumerable:false,configurable:true});return n}();MdsButton.style=MdsButtonStyle0;function promisifyRequest(n){return new Promise((function(t,r){n.oncomplete=n.onsuccess=function(){return t(n.result)};n.onabort=n.onerror=function(){return r(n.error)}}))}function createStore(n,t){var r=indexedDB.open(n);r.onupgradeneeded=function(){return r.result.createObjectStore(t)};var a=promisifyRequest(r);return function(n,r){return a.then((function(a){return r(a.transaction(t,n).objectStore(t))}))}}var defaultGetStoreFunc;function defaultGetStore(){if(!defaultGetStoreFunc){defaultGetStoreFunc=createStore("keyval-store","keyval")}return defaultGetStoreFunc}function get(n){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:defaultGetStore();return t("readonly",(function(t){return promisifyRequest(t.get(n))}))}function set(n,t){var r=arguments.length>2&&arguments[2]!==undefined?arguments[2]:defaultGetStore();return r("readwrite",(function(r){r.put(t,n);return promisifyRequest(r.transaction)}))}function del(n){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:defaultGetStore();return t("readwrite",(function(t){t.delete(n);return promisifyRequest(t.transaction)}))}var MdsIconSet=function(){function n(n,t,r){this.name=n;this.path=t;this._resolveIconName=r}n.prototype.resolveIconName=function(n){return this._resolveIconName(n,this.name,this.path)};Object.defineProperty(n.prototype,"resolver",{get:function(){return this._resolveIconName},enumerable:false,configurable:true});return n}();var IconsSetController=function(){function n(){var n=this;this._svgPathKey="mdsIconSvgPath";this._iconsSets=new Map;this._svgPathUpdate="mdsIconSvgPathUpdate";this.cacheExp=60*60*1e3*24;this.listeners=[];this.memoryCache={};this.isCacheAvailable=function(t){return __awaiter(n,void 0,void 0,(function(){var n,r,a;return __generator(this,(function(o){switch(o.label){case 0:o.trys.push([0,2,,3]);return[4,get("loader_".concat(t))];case 1:n=o.sent();if(!n){return[2,false]}r=JSON.parse(n);if(Date.now()<r.expiry){return[2,r.data]}del("loader_".concat(t));return[2,false];case 2:a=o.sent();console.error("isCacheAvailable error",a);return[2,false];case 3:return[2]}}))}))};this.setCache=function(t,r){return __awaiter(n,void 0,void 0,(function(){var n;return __generator(this,(function(a){switch(a.label){case 0:a.trys.push([0,2,,3]);return[4,set("loader_".concat(t),JSON.stringify({data:r,expiry:Date.now()+this.cacheExp}))];case 1:a.sent();return[3,3];case 2:n=a.sent();console.error("setCache error",n);return[3,3];case 3:return[2]}}))}))};this.setUpListener()}n.prototype.addIconSet=function(n,t,r){var a=r;var o=this._iconsSets.get(n);if(!a&&o&&typeof o.resolver==="function"){a=o.resolver}else if(a&&typeof a!=="function"){console.error("MdsIconSvg: the third input of addIconSet should be a function that parses and returns the icons's filename.");return false}else if(!a){console.error("MdsIconSvg: the set ".concat(n," needs a resolve function for the icon names."));return false}this._iconsSets.set(n,new MdsIconSet(n,t,a));return true};n.prototype.getIconSet=function(n){if(!n)return{set:null};return{set:this._iconsSets.get(n.split("/")[0])}};n.prototype.setSvgPath=function(n){var t=/^(((https?:\/\/)?[.\w]+(:\d+)?)|\/)([\w/-]+)*/;var r=t.exec(n);if(!r){throw Error("Svg path not recognize ".concat(n,", ensure is a absolute path starting with '/' or a url"))}if(typeof window!=="undefined"){this._svgPath=r[1]?r[0]:window.location.origin.concat(r[0]);window.dispatchEvent(new Event(this._svgPathUpdate))}};n.prototype.getSvgPath=function(){return this._svgPath};n.prototype.registerListener=function(n){this.listeners.push(n)};n.prototype.setUpListener=function(){var n=this;if(typeof window!=="undefined"){window.addEventListener(this._svgPathUpdate,(function(){for(var t=0,r=n.listeners;t<r.length;t++){var a=r[t];a()}}))}};n.prototype.fetchSvg=function(n){return __awaiter(this,void 0,void 0,(function(){var t,r,a,o,s,e,i;return __generator(this,(function(u){switch(u.label){case 0:u.trys.push([0,4,,5]);if(!this._svgPath&&typeof window==="undefined"){throw Error("Cant find svgPath, ensure you set it")}if(!this._svgPath){this.setSvgPath((t=window.sessionStorage.getItem(IconsSetService._svgPathKey))!==null&&t!==void 0?t:"")}r=this._svgPath&&!n.startsWith("http")?this._svgPath.concat(n,".svg"):n;return[4,this.isCacheAvailable(r)];case 1:a=u.sent();if(this.memoryCache[r]||a){return[2,this.memoryCache[r]||a]}return[4,fetch(r)];case 2:o=u.sent();if(!o.ok){throw Error("Request for '".concat(r,"' returned ").concat(o.status," (").concat(o.statusText,")"))}return[4,o.text()];case 3:s=u.sent();e=s.toLowerCase().trim();if(!(e.startsWith("<svg")||e.startsWith("<?xml"))){throw Error("Resource '".concat(r,"' returned an invalid SVG file"))}this.setCache(r,s);this.memoryCache[r]=s;return[2,s];case 4:i=u.sent();console.error("fetchSvg error",i);return[2,""];case 5:return[2]}}))}))};return n}();var IconsSetService=new IconsSetController;var mdsIconCss=":host{aspect-ratio:1/1;width:1.5rem;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center}.icon{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;font-style:normal;-ms-flex-pack:center;justify-content:center;width:100%}.icon svg{height:auto;width:100%}";var MdsIconStyle0=mdsIconCss;var MdsIcon=function(){function n(n){var t=this;registerInstance(this,n);this.convertBase64ToSvg=function(){var n=t.name.replace(BASE64_SVG_ICON,"").replace(/\=/i,"");return atob(n)};this.svgHTML=undefined;this.name=undefined;this._iconHref=undefined}n.prototype.componentWillLoad=function(){var n=this;this.updateIcon();IconsSetService.registerListener((function(){return n.updateIcon()}))};n.setSvgPathStatic=function(n){IconsSetService.setSvgPath(n)};n.prototype.setSvgPath=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){IconsSetService.setSvgPath(n);return[2]}))}))};n.prototype.updateIcon=function(){return __awaiter(this,void 0,void 0,(function(){var n;return __generator(this,(function(t){switch(t.label){case 0:if(!this.name)return[2,Promise.resolve()];if(isIconFormatIsBase64(this.name)){this.svgHTML=this.convertBase64ToSvg();return[2,Promise.resolve()]}if(isIconFormatIsSVG(this.name)){this.svgHTML=this.name;return[2,Promise.resolve()]}n=this;return[4,IconsSetService.fetchSvg(this.name)];case 1:n.svgHTML=t.sent();return[2]}}))}))};n.prototype.render=function(){return h(Host,{key:"0776044452ef994b9671eaad6d0f1299bd3f7add"},this.svgHTML&&h("i",{key:"0091505aeb5563e9a1327d174d19ac0e4fe1ffd6","aria-hidden":"true",class:"icon",part:"svg",innerHTML:this.svgHTML}))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{name:["updateIcon"]}},enumerable:false,configurable:true});return n}();MdsIcon.style=MdsIconStyle0;var awaitIcon='<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.25" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="4"/>\n  <path opacity="0.75" d="M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>\n</svg>\n';var mdsSpinnerCss='@tailwind utilities;\n\n/**\n * @prop --mds-spinner-duration: Sets the duration of the icon animation\n */\n\n:host {\n\n  --mds-spinner-duration: 0.725s;\n\n  height: 3rem;\n\n  width: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: rgb(var(--variant-primary-03));\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transform: scale(0);\n  transform: scale(0);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host([running]:not([running="false"])){\n\n  -webkit-transition-duration: 700ms;\n\n  transition-duration: 700ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -webkit-transform: scale(1);\n\n  transform: scale(1);\n}\n\n.await-icon{\n\n  aspect-ratio: 1/1;\n\n  width: 100%;\n}\n\n@-webkit-keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n.await-icon{\n\n  -webkit-animation: spin 1s linear infinite;\n\n  animation: spin 1s linear infinite;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -webkit-animation-duration: var(--mds-spinner-duration);\n\n  animation-duration: var(--mds-spinner-duration);\n  -webkit-animation-play-state: paused;\n  animation-play-state: paused;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  stroke: currentcolor;\n  -webkit-transition-property: stroke;\n  transition-property: stroke;\n}\n\n:host([running]:not([running="false"])) .await-icon {\n  -webkit-animation-play-state: running;\n  animation-play-state: running;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-spinner-duration: 4s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-spinner-duration: 4s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--variant-primary-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--variant-primary-01));\n    }\n  }\n}\n\n';var MdsSpinnerStyle0=mdsSpinnerCss;var MdsSpinner=function(){function n(n){registerInstance(this,n);this.running=false}n.prototype.render=function(){return h(Host,{key:"910389c00098833f8ed30cc5cfc5e84cb8c12b1b"},h("i",{key:"25f79ee1462cfab7b0c700b31966bf6f3cdb3bc5",class:"await-icon",innerHTML:awaitIcon}))};return n}();MdsSpinner.style=MdsSpinnerStyle0;export{MdsButton as mds_button,MdsIcon as mds_icon,MdsSpinner as mds_spinner};

package/dist/esm-es5/mds-card-content.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host}from"./index-f08bac5f.js";var mdsCardContentCss=":host{gap:1rem;padding:1rem;display:grid;grid-template-columns:minmax(1fr, 100%)}";var MdsCardContentStyle0=mdsCardContentCss;var MdsCardContent=function(){function t(t){registerInstance(this,t)}t.prototype.render=function(){return h(Host,{key:"70bdb9e30591eb51d1bf009c38b9f2a58d9818af",slot:"content"},h("slot",{key:"84492f05472d505d00c4b82dabb70c535e656366"}))};return t}();MdsCardContent.style=MdsCardContentStyle0;export{MdsCardContent as mds_card_content};
+import{r as registerInstance,h,H as Host}from"./index-44fd80a1.js";var mdsCardContentCss=":host{gap:1rem;padding:1rem;display:grid;grid-template-columns:minmax(1fr, 100%)}";var MdsCardContentStyle0=mdsCardContentCss;var MdsCardContent=function(){function t(t){registerInstance(this,t)}t.prototype.render=function(){return h(Host,{key:"70bdb9e30591eb51d1bf009c38b9f2a58d9818af",slot:"content"},h("slot",{key:"84492f05472d505d00c4b82dabb70c535e656366"}))};return t}();MdsCardContent.style=MdsCardContentStyle0;export{MdsCardContent as mds_card_content};

package/dist/esm-es5/mds-card-footer.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host}from"./index-f08bac5f.js";var mdsCardFooterCss=":host{gap:1rem;padding:1rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}";var MdsCardFooterStyle0=mdsCardFooterCss;var MdsCardFooter=function(){function e(e){registerInstance(this,e)}e.prototype.render=function(){return h(Host,{key:"82210fbde598faafaad3214af5d4d13cc3d3d310",slot:"footer"},h("slot",{key:"71af6a136827d40b4cd35528730eb8c37b002d73"}))};return e}();MdsCardFooter.style=MdsCardFooterStyle0;export{MdsCardFooter as mds_card_footer};
+import{r as registerInstance,h,H as Host}from"./index-44fd80a1.js";var mdsCardFooterCss=":host{gap:1rem;padding:1rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}";var MdsCardFooterStyle0=mdsCardFooterCss;var MdsCardFooter=function(){function e(e){registerInstance(this,e)}e.prototype.render=function(){return h(Host,{key:"82210fbde598faafaad3214af5d4d13cc3d3d310",slot:"footer"},h("slot",{key:"71af6a136827d40b4cd35528730eb8c37b002d73"}))};return e}();MdsCardFooter.style=MdsCardFooterStyle0;export{MdsCardFooter as mds_card_footer};

package/dist/esm-es5/mds-card-header.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";var mdsCardHeaderCss=":host{gap:1rem;padding:1rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between}";var MdsCardHeaderStyle0=mdsCardHeaderCss;var MdsCardHeader=function(){function e(e){registerInstance(this,e)}e.prototype.componentWillLoad=function(){this.actions=this.hostElement.querySelector('[slot="action"]')!==null};e.prototype.render=function(){return h(Host,{key:"7589cac2382eccf8dd59114dc86f2945218548e5",slot:"header"},h("slot",{key:"65516ff06a9b972414a1903175e216302b16da74"}),this.actions&&h("div",{key:"2d191d112450087d1486c38eeed8d34d3fd560bb",class:"actions"},h("slot",{key:"dd08f65d6de11b5328aecde1a39ed95f669cea46",name:"action"})))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();MdsCardHeader.style=MdsCardHeaderStyle0;export{MdsCardHeader as mds_card_header};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";var mdsCardHeaderCss=":host{gap:1rem;padding:1rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between}";var MdsCardHeaderStyle0=mdsCardHeaderCss;var MdsCardHeader=function(){function e(e){registerInstance(this,e)}e.prototype.componentWillLoad=function(){this.actions=this.hostElement.querySelector('[slot="action"]')!==null};e.prototype.render=function(){return h(Host,{key:"7589cac2382eccf8dd59114dc86f2945218548e5",slot:"header"},h("slot",{key:"65516ff06a9b972414a1903175e216302b16da74"}),this.actions&&h("div",{key:"2d191d112450087d1486c38eeed8d34d3fd560bb",class:"actions"},h("slot",{key:"dd08f65d6de11b5328aecde1a39ed95f669cea46",name:"action"})))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();MdsCardHeader.style=MdsCardHeaderStyle0;export{MdsCardHeader as mds_card_header};

package/dist/esm-es5/mds-card-media.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host}from"./index-f08bac5f.js";var mdsCardMediaCss=":host{background-color:rgb(var(--tone-neutral-09));display:grid;position:relative}.content{gap:0.5rem;padding:1rem;-ms-flex-align:end;align-items:flex-end;display:-ms-flexbox;display:flex;inset:0;-ms-flex-pack:center;justify-content:center;position:absolute}.img{-o-object-fit:contain;object-fit:contain}";var MdsCardMediaStyle0=mdsCardMediaCss;var MdsCardMedia=function(){function e(e){registerInstance(this,e)}e.prototype.render=function(){return h(Host,{key:"00ce75ada7929a0fe14ce5b4a178d0911b361946",slot:"media"},h("div",{key:"7cec535d78017daf6b6798032aa2e6376563be35",class:"content",part:"content"},h("slot",{key:"de6cd97eec4efda9666c8c5f6a71cd39bc2d4d36",name:"content"})),h("slot",{key:"edbf8cd89d55d47d54ea96ed6fd515641b362338"}))};return e}();MdsCardMedia.style=MdsCardMediaStyle0;export{MdsCardMedia as mds_card_media};
+import{r as registerInstance,h,H as Host}from"./index-44fd80a1.js";var mdsCardMediaCss=":host{background-color:rgb(var(--tone-neutral-09));display:grid;position:relative}.content{gap:0.5rem;padding:1rem;-ms-flex-align:end;align-items:flex-end;display:-ms-flexbox;display:flex;inset:0;-ms-flex-pack:center;justify-content:center;position:absolute}.img{-o-object-fit:contain;object-fit:contain}";var MdsCardMediaStyle0=mdsCardMediaCss;var MdsCardMedia=function(){function e(e){registerInstance(this,e)}e.prototype.render=function(){return h(Host,{key:"00ce75ada7929a0fe14ce5b4a178d0911b361946",slot:"media"},h("div",{key:"7cec535d78017daf6b6798032aa2e6376563be35",class:"content",part:"content"},h("slot",{key:"de6cd97eec4efda9666c8c5f6a71cd39bc2d4d36",name:"content"})),h("slot",{key:"edbf8cd89d55d47d54ea96ed6fd515641b362338"}))};return e}();MdsCardMedia.style=MdsCardMediaStyle0;export{MdsCardMedia as mds_card_media};

package/dist/esm-es5/mds-card.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{c as clsx}from"./clsx-297c1ffe.js";var mdsCardCss='@tailwind utilities;\n\n/**\n * @prop --mds-card-gap: Sets the spacing between card elements\n * @prop --mds-card-padding: Sets the spacing around card elements\n */\n\n:host {\n\n  --mds-card-gap: 0;\n  --mds-card-padding: 0;\n  border-radius: 1rem;\n\n  background-color: rgb(var(--tone-neutral));\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  container-name: mds-card;\n  container-type: inline-size;\n  display: grid;\n  min-height: 1rem;\n  overflow: hidden;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot="media"]) {\n  grid-area: media;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot="header"]) {\n  grid-area: header;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot="content"]) {\n  grid-area: content;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot="footer"]) {\n  grid-area: footer;\n}\n\n.layout{\n\n  padding: 1rem;\n\n  display: grid;\n  gap: var(--mds-card-gap);\n  grid-template-columns: minmax(0, 100%);\n  padding: var(--mds-card-padding);\n}\n\n.layout--cfhm:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "media"\n    "content"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--chm:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "media"\n    "content";\n  grid-template-rows:\n    -webkit-min-content\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    min-content\n    1fr;\n}\n\n.layout--cfm:not(.layout--disabled) {\n  grid-template-areas:\n    "media"\n    "content"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--fhm:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "media"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--cfh:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "content"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--hm:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "media";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--fm:not(.layout--disabled) {\n  grid-template-areas:\n    "media"\n    "footer";\n  grid-template-rows:\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    1fr\n    min-content;\n}\n\n.layout--cm:not(.layout--disabled) {\n  grid-template-areas:\n    "media"\n    "content";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--fh:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--ch:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "content";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--cf:not(.layout--disabled) {\n  grid-template-areas:\n    "content"\n    "footer";\n  grid-template-rows:\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    1fr\n    min-content;\n}\n\n.layout--h:not(.layout--disabled) {\n  grid-template-areas: "header";\n  grid-template-rows: 1fr;\n}\n\n.layout--m:not(.layout--disabled) {\n  grid-template-areas: "media";\n  grid-template-rows: 1fr;\n}\n\n.layout--c:not(.layout--disabled) {\n  grid-template-areas: "content";\n  grid-template-rows: 1fr;\n}\n\n.layout--f:not(.layout--disabled) {\n  grid-template-areas: "footer";\n  grid-template-rows: 1fr;\n}\n\n@container mds-card (width > 30em) {\n  .layout--cfhm:not(.layout--disabled) {\n    grid-template-areas:\n      "media header"\n      "media content"\n      "media footer";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      min-content\n      1fr\n      min-content;\n  }\n\n  .layout--chm:not(.layout--disabled) {\n    grid-template-areas:\n      "media header"\n      "media content"\n      "media content";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr\n      1fr;\n    grid-template-rows:\n      min-content\n      1fr\n      1fr;\n  }\n\n  .layout--fhm:not(.layout--disabled) {\n    grid-template-areas:\n      "media header"\n      "media footer";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr;\n    grid-template-rows:\n      min-content\n      1fr;\n  }\n\n  .layout--cfm:not(.layout--disabled) {\n    grid-template-areas:\n      "media content"\n      "media footer";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      1fr\n      min-content;\n  }\n\n  .layout--cm:not(.layout--disabled) {\n    grid-template-areas:\n      "media content";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      1fr\n      min-content;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    }\n  }\n}\n\n\n';var MdsCardStyle0=mdsCardCss;var MdsCard=function(){function n(n){registerInstance(this,n);this.layout=undefined;this.autoGrid=true}n.prototype.componentWillLoad=function(){this.layout=Array.from(this.host.children).map((function(n){var t;return((t=n.getAttribute("slot"))!==null&&t!==void 0?t:n.tagName.startsWith("MDS-CARD-"))?n.tagName.toLocaleLowerCase().replace("mds-card-",""):""})).sort().reduce((function(n,t){return n+t.charAt(0)}),"")};n.prototype.render=function(){return h(Host,{key:"0bb4e3e8a5c41028092849b878f1eb7f4fb6ca69"},h("div",{key:"fd3caac153406fb4e283d1966403d2b32c86343a",class:clsx("layout",this.layout&&"layout--".concat(this.layout),!this.autoGrid?"layout--disabled":""),part:"container"},h("slot",{key:"581983da53bb535659af36770a3d69bb73dec92a",name:"media"}),h("slot",{key:"c856bb9b9f5b49df851c23ef66dbbd415e1d5e64",name:"header"}),h("slot",{key:"668022431de991925b3be0e838c391b9aec7e6a9",name:"content"}),h("slot",{key:"1189b0b978b70c425a6eb3b7daab8b112beca40a",name:"footer"})))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsCard.style=MdsCardStyle0;export{MdsCard as mds_card};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{c as clsx}from"./clsx-297c1ffe.js";var mdsCardCss='@tailwind utilities;\n\n/**\n * @prop --mds-card-gap: Sets the spacing between card elements\n * @prop --mds-card-padding: Sets the spacing around card elements\n */\n\n:host {\n\n  --mds-card-gap: 0;\n  --mds-card-padding: 0;\n  border-radius: 1rem;\n\n  background-color: rgb(var(--tone-neutral));\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  container-name: mds-card;\n  container-type: inline-size;\n  display: grid;\n  min-height: 1rem;\n  overflow: hidden;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot="media"]) {\n  grid-area: media;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot="header"]) {\n  grid-area: header;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot="content"]) {\n  grid-area: content;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot="footer"]) {\n  grid-area: footer;\n}\n\n.layout{\n\n  padding: 1rem;\n\n  display: grid;\n  gap: var(--mds-card-gap);\n  grid-template-columns: minmax(0, 100%);\n  padding: var(--mds-card-padding);\n}\n\n.layout--cfhm:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "media"\n    "content"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--chm:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "media"\n    "content";\n  grid-template-rows:\n    -webkit-min-content\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    min-content\n    1fr;\n}\n\n.layout--cfm:not(.layout--disabled) {\n  grid-template-areas:\n    "media"\n    "content"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--fhm:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "media"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--cfh:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "content"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--hm:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "media";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--fm:not(.layout--disabled) {\n  grid-template-areas:\n    "media"\n    "footer";\n  grid-template-rows:\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    1fr\n    min-content;\n}\n\n.layout--cm:not(.layout--disabled) {\n  grid-template-areas:\n    "media"\n    "content";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--fh:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "footer";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--ch:not(.layout--disabled) {\n  grid-template-areas:\n    "header"\n    "content";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--cf:not(.layout--disabled) {\n  grid-template-areas:\n    "content"\n    "footer";\n  grid-template-rows:\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    1fr\n    min-content;\n}\n\n.layout--h:not(.layout--disabled) {\n  grid-template-areas: "header";\n  grid-template-rows: 1fr;\n}\n\n.layout--m:not(.layout--disabled) {\n  grid-template-areas: "media";\n  grid-template-rows: 1fr;\n}\n\n.layout--c:not(.layout--disabled) {\n  grid-template-areas: "content";\n  grid-template-rows: 1fr;\n}\n\n.layout--f:not(.layout--disabled) {\n  grid-template-areas: "footer";\n  grid-template-rows: 1fr;\n}\n\n@container mds-card (width > 30em) {\n  .layout--cfhm:not(.layout--disabled) {\n    grid-template-areas:\n      "media header"\n      "media content"\n      "media footer";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      min-content\n      1fr\n      min-content;\n  }\n\n  .layout--chm:not(.layout--disabled) {\n    grid-template-areas:\n      "media header"\n      "media content"\n      "media content";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr\n      1fr;\n    grid-template-rows:\n      min-content\n      1fr\n      1fr;\n  }\n\n  .layout--fhm:not(.layout--disabled) {\n    grid-template-areas:\n      "media header"\n      "media footer";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr;\n    grid-template-rows:\n      min-content\n      1fr;\n  }\n\n  .layout--cfm:not(.layout--disabled) {\n    grid-template-areas:\n      "media content"\n      "media footer";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      1fr\n      min-content;\n  }\n\n  .layout--cm:not(.layout--disabled) {\n    grid-template-areas:\n      "media content";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      1fr\n      min-content;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    }\n  }\n}\n\n\n';var MdsCardStyle0=mdsCardCss;var MdsCard=function(){function n(n){registerInstance(this,n);this.layout=undefined;this.autoGrid=true}n.prototype.componentWillLoad=function(){this.layout=Array.from(this.host.children).map((function(n){var t;return((t=n.getAttribute("slot"))!==null&&t!==void 0?t:n.tagName.startsWith("MDS-CARD-"))?n.tagName.toLocaleLowerCase().replace("mds-card-",""):""})).sort().reduce((function(n,t){return n+t.charAt(0)}),"")};n.prototype.render=function(){return h(Host,{key:"0bb4e3e8a5c41028092849b878f1eb7f4fb6ca69"},h("div",{key:"fd3caac153406fb4e283d1966403d2b32c86343a",class:clsx("layout",this.layout&&"layout--".concat(this.layout),!this.autoGrid?"layout--disabled":""),part:"container"},h("slot",{key:"581983da53bb535659af36770a3d69bb73dec92a",name:"media"}),h("slot",{key:"c856bb9b9f5b49df851c23ef66dbbd415e1d5e64",name:"header"}),h("slot",{key:"668022431de991925b3be0e838c391b9aec7e6a9",name:"content"}),h("slot",{key:"1189b0b978b70c425a6eb3b7daab8b112beca40a",name:"footer"})))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsCard.style=MdsCardStyle0;export{MdsCard as mds_card};

package/dist/esm-es5/mds-chip.entry.js

@@ -1 +1 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{m as miBaselineCancel}from"./cancel-8698c6fc.js";import{s as setAttributeIfEmpty}from"./aria-0e390d9c.js";import{K as KeyboardManager}from"./keyboard-manager-f3d273fc.js";var mdsChipCss='@tailwind utilities;\n\n/**\n * @prop --mds-chip-background: Sets the `background-color` of the component\n * @prop --mds-chip-color: Sets the `color` of the component\n * @prop --mds-chip-icon-background: Sets the `background-color` of the icon\n * @prop --mds-chip-icon-background-selected: Sets the `background-color` color of the icon when the component is selected\n * @prop --mds-chip-icon-color: Sets the `fill` color of the icon of the component\n * @prop --mds-chip-opacity-disabled: Sets the `opacity` of the component when it\'s disabled\n * @prop --mds-chip-backgroud-selected: Sets the `background-color` of the component when it\'s selected\n * @prop --mds-chip-color-selected: Sets the `color` of the component when it\'s selected\n * @prop --mds-chip-icon-color-selected: Sets the `fill` color of the icon of the component when it\'s selected\n */\n\n:host {\n\n  --mds-chip-background: rgb(var(--tone-neutral-09));\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--brand-maggioli-06));\n  --mds-chip-icon-background-selected: rgb(var(--brand-maggioli-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-opacity-disabled: var(--opacity-disabled, 0.5);\n  --mds-chip-backgroud-selected: rgb(var(--tone-neutral-08));\n  --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n  --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n  height: 2.25rem;\n  gap: 0.375rem;\n  border-radius: 9999px;\n  padding: 0.375rem;\n  -webkit-transition-duration: 150ms;\n  transition-duration: 150ms;\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\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-chip-background);\n  color: var(--mds-chip-color);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: background-color, border-color, color, opacity, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, opacity, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, opacity;\n  transition-property: background-color, border-color, box-shadow, color, opacity, -webkit-box-shadow;\n}\n\n\n:host( [disabled]:not([disabled="false"]) ) {\n  opacity: var(--mds-chip-opacity-disabled);\n  pointer-events: none;\n}\n\n:host( [selected]:not([selected="false"]) ) {\n\n  --mds-chip-color: var(--mds-chip-color-selected);\n  --mds-chip-background: var(--mds-chip-backgroud-selected);\n  --mds-chip-icon-color: var(--mds-chip-icon-color-selected);\n  --mds-chip-icon-background: var(--mds-chip-icon-background-selected);\n}\n\n.label{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  -webkit-text-decoration-color: transparent;\n  text-decoration-color: transparent;\n  -webkit-transition-property: color, outline, outline-offset, -webkit-text-decoration-color;\n  transition-property: color, outline, outline-offset, -webkit-text-decoration-color;\n  transition-property: color, text-decoration-color, outline, outline-offset;\n  transition-property: color, text-decoration-color, outline, outline-offset, -webkit-text-decoration-color;\n}\n\n:host( [clickable]:not([clickable="false"]) ) .label {\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:host( [clickable]:not([clickable="false"]) ) .label:hover {\n  -webkit-text-decoration-color: unset;\n  text-decoration-color: unset;\n}\n\n.label:first-child{\n\n  padding-left: 0.5rem;\n}\n\n.label:last-child{\n\n  padding-right: 0.5rem;\n}\n\n.icon-area{\n\n  height: 1.5rem;\n\n  width: 1.5rem;\n\n  -ms-flex-pack: center;\n\n  justify-content: center;\n\n  border-radius: 9999px;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-chip-icon-background);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -webkit-transition-duration: inherit;\n  transition-duration: inherit;\n  -webkit-transition-timing-function: inherit;\n  transition-timing-function: inherit;\n}\n\n.icon{\n\n  height: 1rem;\n\n  width: 1rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  fill: var(--mds-chip-icon-color);\n  -webkit-transition: fill;\n  transition: fill;\n}\n\n.button-delete {\n  border-radius: 100px;\n  height: auto;\n  padding: 0;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .label,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .label,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-chip-background: rgb(var(--tone-neutral));\n    --mds-chip-color: rgb(var(--tone-neutral-02));\n    --mds-chip-icon-background-selected: rgb(var(--brand-maggioli-03));\n    --mds-chip-icon-color: rgb(var(--tone-neutral));\n    --mds-chip-opacity-disabled: var(--opacity-disabled, 0.6);\n    --mds-chip-backgroud-selected: rgb(var(--tone-neutral-09));\n    --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n    --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-chip-background: rgb(var(--tone-neutral));\n      --mds-chip-color: rgb(var(--tone-neutral-02));\n      --mds-chip-icon-background-selected: rgb(var(--brand-maggioli-03));\n      --mds-chip-icon-color: rgb(var(--tone-neutral));\n      --mds-chip-opacity-disabled: var(--opacity-disabled, 0.6);\n      --mds-chip-backgroud-selected: rgb(var(--tone-neutral-09));\n      --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n      --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n';var MdsChipStyle0=mdsChipCss;var MdsChip=function(){function n(n){var e=this;registerInstance(this,n);this.clickLabelEvent=createEvent(this,"mdsChipClickLabel",7);this.deleteEvent=createEvent(this,"mdsChipDelete",7);this.km=new KeyboardManager;this.handleClickableKeyboard=function(){var n;if(e.clickable){var t=(n=e.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".label");e.km.addElement(t,"label");e.km.attachClickBehavior("label");return}e.km.detachClickBehavior("label")};this.handleDeletableKeyboard=function(){var n;if(e.deletable){var t=(n=e.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".button-delete");e.km.addElement(t,"delete");e.km.attachClickBehavior("delete");return}e.km.detachClickBehavior("delete")};this.handleClickableElement=function(){var n;var t=(n=e.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".label");if(!t){return}if(e.clickable){setAttributeIfEmpty(t,"role","button");t.addEventListener("click",e.onClickLabelHandler.bind(e));return}t.removeAttribute("role");t.removeEventListener("click",e.onClickLabelHandler.bind(e))};this.handleDeletableElement=function(){var n;var t=(n=e.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".button-delete");if(!t){return}if(e.deletable){setAttributeIfEmpty(t,"aria-hidden","true");t.addEventListener("click",e.onDeleteHandler.bind(e));return}t.removeAttribute("aria-hidden");t.removeEventListener("click",e.onDeleteHandler.bind(e))};this.clickable=undefined;this.deletable=undefined;this.deleteLabel="Rimuovi";this.disabled=false;this.icon=undefined;this.label=undefined;this.selected=false}n.prototype.onClickLabelHandler=function(n){this.clickLabelEvent.emit({event:n,element:this.host})};n.prototype.onDeleteHandler=function(n){this.deleteEvent.emit({event:n,element:this.host})};n.prototype.componentDidLoad=function(){this.handleClickableElement();this.handleClickableKeyboard();this.handleDeletableElement();this.handleDeletableKeyboard()};n.prototype.componentDidUpdate=function(){this.handleClickableElement();this.handleClickableKeyboard();this.handleDeletableElement();this.handleDeletableKeyboard()};n.prototype.disconnectedCallback=function(){this.km.detachClickBehavior("label");this.km.detachClickBehavior("delete")};n.prototype.render=function(){return h(Host,{key:"22f2fbd25b4d673e396568e4edb3e1449e8fcc43","aria-disabled":this.disabled?"true":"false"},this.icon&&h("div",{key:"283e098da89df91f6d1296cc2f90b2a5861de6f4","aria-hidden":"true",class:"icon-area"},h("mds-icon",{key:"4bb9e7e7abe4d14d1c897d5b27e5114a912388d9",class:"icon",name:this.icon})),this.clickable?h("mds-text",{class:"label focus-bounce",tabindex:"0",typography:"caption",truncate:"word"},this.label):h("mds-text",{class:"label",typography:"caption",truncate:"word"},this.label),this.deletable&&h("mds-button",{key:"9e56e6e92ef10da0eb5d777ec7031a47bb4888af",class:"button-delete",icon:miBaselineCancel,onClick:this.onDeleteHandler.bind(this),title:"".concat(this.deleteLabel," ").concat(this.label),variant:"dark",tone:"quiet",size:"sm"}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsChip.style=MdsChipStyle0;export{MdsChip as mds_chip};
+var __awaiter=this&&this.__awaiter||function(n,e,t,r){function o(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,i){function a(n){try{c(r.next(n))}catch(n){i(n)}}function s(n){try{c(r["throw"](n))}catch(n){i(n)}}function c(n){n.done?t(n.value):o(n.value).then(a,s)}c((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(n){return function(e){return c([n,e])}}function c(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(t=0)),t)try{if(r=1,o&&(i=s[0]&2?o["return"]:s[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,s[1])).done)return i;if(o=0,i)s=[s[0]&2,i.value];switch(s[0]){case 0:case 1:i=s;break;case 4:t.label++;return{value:s[1],done:false};case 5:t.label++;o=s[1];s=[0];continue;case 7:s=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(s[0]===6||s[0]===2)){t=0;continue}if(s[0]===3&&(!i||s[1]>i[0]&&s[1]<i[3])){t.label=s[1];break}if(s[0]===6&&t.label<i[1]){t.label=i[1];i=s;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(s);break}if(i[2])t.ops.pop();t.trys.pop();continue}s=e.call(n,t)}catch(n){s=[6,n];o=0}finally{r=i=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{m as miBaselineCancel}from"./cancel-8698c6fc.js";import{s as setAttributeIfEmpty}from"./aria-ed9d415d.js";import{K as KeyboardManager}from"./keyboard-manager-9f287ab7.js";import{L as Locale}from"./locale-149207d6.js";import"./_commonjsHelpers-bdec4bbd.js";var deleteLabel$3="Αφαίρεση";var localeEl={deleteLabel:deleteLabel$3};var deleteLabel$2="Remove";var localeEn={deleteLabel:deleteLabel$2};var deleteLabel$1="Eliminar";var localeEs={deleteLabel:deleteLabel$1};var deleteLabel="Rimuovi";var localeIt={deleteLabel:deleteLabel};var mdsChipCss='@-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\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\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-chip-background: Sets the `background-color` of the component\n * @prop --mds-chip-color: Sets the `color` of the component\n * @prop --mds-chip-icon-background: Sets the `background-color` of the icon\n * @prop --mds-chip-icon-background-selected: Sets the `background-color` color of the icon when the component is selected\n * @prop --mds-chip-icon-color: Sets the `fill` color of the icon of the component\n * @prop --mds-chip-opacity-disabled: Sets the `opacity` of the component when it\'s disabled\n * @prop --mds-chip-backgroud-selected: Sets the `background-color` of the component when it\'s selected\n * @prop --mds-chip-color-selected: Sets the `color` of the component when it\'s selected\n * @prop --mds-chip-icon-color-selected: Sets the `fill` color of the icon of the component when it\'s selected\n */\n\n:host {\n\n  /* --mds-chip-backgroud-selected: theme(\'colors.tone-neutral-08\');\n  --mds-chip-border-selected: theme(\'colors.variant-primary-04\');\n  --mds-chip-color-selected: theme(\'colors.tone-neutral-01\');\n  --mds-chip-icon-background-selected: theme(\'colors.variant-primary-04\');\n  --mds-chip-icon-color-selected: theme(\'colors.tone-neutral\'); */\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-primary-06));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-opacity-disabled: var(--opacity-disabled, 0.5);\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  height: 2.25rem;\n  gap: 0.375rem;\n  border-radius: 9999px;\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n  -webkit-transition-duration: 150ms;\n  transition-duration: 150ms;\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\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-chip-background);\n  border: 2px solid var(--mds-chip-border);\n  -webkit-box-shadow: var(--mds-chip-shadow);\n  box-shadow: var(--mds-chip-shadow);\n  color: var(--mds-chip-color);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: background-color, border-color, color, opacity, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, opacity, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, opacity;\n  transition-property: background-color, border-color, box-shadow, color, opacity, -webkit-box-shadow;\n}\n\n\n:host( [disabled]:not([disabled="false"]) ) {\n  opacity: var(--mds-chip-opacity-disabled);\n  pointer-events: none;\n}\n\n.label {\n  border-radius: 9999px;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  -webkit-text-decoration-color: transparent;\n  text-decoration-color: transparent;\n  -webkit-transition-property: color, outline, outline-offset, -webkit-text-decoration-color;\n  transition-property: color, outline, outline-offset, -webkit-text-decoration-color;\n  transition-property: color, text-decoration-color, outline, outline-offset;\n  transition-property: color, text-decoration-color, outline, outline-offset, -webkit-text-decoration-color;\n}\n\n:host( [clickable]:not([clickable="false"]) ) .label {\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:host( [clickable]:not([clickable="false"]) ) .label:hover {\n  -webkit-text-decoration-color: unset;\n  text-decoration-color: unset;\n}\n\n.label:first-child {\n  padding-left: 0.5rem;\n}\n\n.label:last-child {\n  padding-right: 0.5rem;\n}\n\n.label--interactive {\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.label--interactive: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    z-index: 10;\n  }\n\n.icon-area {\n  height: 1.5rem;\n  width: 1.5rem;\n  -ms-flex-pack: center;\n  justify-content: center;\n  border-radius: 9999px;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-chip-icon-background);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -webkit-transition-duration: inherit;\n  transition-duration: inherit;\n  -webkit-transition-timing-function: inherit;\n  transition-timing-function: inherit;\n}\n\n.icon {\n  height: 1rem;\n  width: 1rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n\n  fill: var(--mds-chip-icon-color);\n  -webkit-transition: fill;\n  transition: fill;\n}\n\n.button-delete {\n  border-radius: 100px;\n  height: auto;\n  padding: 0;\n}\n\n:host([variant="primary"][tone="strong"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-primary-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant="secondary"][tone="strong"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-secondary-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant="dark"][tone="strong"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral-04));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--tone-neutral-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant="info"][tone="strong"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-info-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant="success"][tone="strong"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-success-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant="warning"][tone="strong"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-warning-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant="error"][tone="strong"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-error-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n\n:host([variant="primary"][tone="weak"]) {\n\n  --mds-chip-background: rgb(var(--variant-primary-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-primary-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant="secondary"][tone="weak"]) {\n\n  --mds-chip-background: rgb(var(--variant-secondary-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-secondary-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant="dark"][tone="weak"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral-08));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant="info"][tone="weak"]) {\n\n  --mds-chip-background: rgb(var(--status-info-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-info-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant="success"][tone="weak"]) {\n\n  --mds-chip-background: rgb(var(--status-success-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-success-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant="warning"][tone="weak"]) {\n\n  --mds-chip-background: rgb(var(--status-warning-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-warning-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant="error"][tone="weak"]) {\n\n  --mds-chip-background: rgb(var(--status-error-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-error-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant="primary"][selected]:not([selected="false"])) {\n\n  --mds-chip-border: rgb(var(--variant-primary-04));\n}\n\n:host([variant="secondary"][selected]:not([selected="false"])) {\n\n  --mds-chip-border: rgb(var(--variant-secondary-04));\n}\n\n:host([variant="dark"][selected]:not([selected="false"])) {\n\n  --mds-chip-border: rgb(var(--tone-neutral-05));\n}\n\n:host([variant="info"][selected]:not([selected="false"])) {\n\n  --mds-chip-border: rgb(var(--status-info-04));\n}\n\n:host([variant="success"][selected]:not([selected="false"])) {\n\n  --mds-chip-border: rgb(var(--status-success-04));\n}\n\n:host([variant="warning"][selected]:not([selected="false"])) {\n\n  --mds-chip-border: rgb(var(--status-warning-04));\n}\n\n:host([variant="error"][selected]:not([selected="false"])) {\n\n  --mds-chip-border: rgb(var(--status-error-04));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .label,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .label,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-chip-background: rgb(var(--tone-neutral));\n    --mds-chip-color: rgb(var(--tone-neutral-02));\n    --mds-chip-icon-background-selected: rgb(var(--variant-primary-03));\n    --mds-chip-icon-color: rgb(var(--tone-neutral));\n    --mds-chip-opacity-disabled: var(--opacity-disabled, 0.6);\n    --mds-chip-backgroud-selected: rgb(var(--tone-neutral-09));\n    --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n    --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-chip-background: rgb(var(--tone-neutral));\n      --mds-chip-color: rgb(var(--tone-neutral-02));\n      --mds-chip-icon-background-selected: rgb(var(--variant-primary-03));\n      --mds-chip-icon-color: rgb(var(--tone-neutral));\n      --mds-chip-opacity-disabled: var(--opacity-disabled, 0.6);\n      --mds-chip-backgroud-selected: rgb(var(--tone-neutral-09));\n      --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n      --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n';var MdsChipStyle0=mdsChipCss;var MdsChip=function(){function n(n){var e=this;registerInstance(this,n);this.clickLabelEvent=createEvent(this,"mdsChipClickLabel",7);this.deleteEvent=createEvent(this,"mdsChipDelete",7);this.km=new KeyboardManager;this.t=new Locale({el:localeEl,en:localeEn,es:localeEs,it:localeIt});this.handleClickableKeyboard=function(n){var t;if(n){var r=(t=e.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".label");e.km.addElement(r,"label");e.km.attachClickBehavior("label");return}e.km.detachClickBehavior("label")};this.handleDeletableKeyboard=function(n){var t;if(n){var r=(t=e.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".button-delete");e.km.addElement(r,"delete");e.km.attachClickBehavior("delete");return}e.km.detachClickBehavior("delete")};this.handleClickableElement=function(n){var t;var r=(t=e.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".label");if(!r){return}if(n){setAttributeIfEmpty(r,"role","button");r.addEventListener("click",e.onClickLabelHandler.bind(e));return}r.removeAttribute("role");r.removeEventListener("click",e.onClickLabelHandler.bind(e))};this.handleDeletableElement=function(n){var t;var r=(t=e.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".button-delete");if(!r){return}if(n){r.addEventListener("click",e.onDeleteHandler.bind(e));return}r.removeAttribute("aria-hidden");r.removeEventListener("click",e.onDeleteHandler.bind(e))};this.language=undefined;this.clickable=undefined;this.deletable=undefined;this.disabled=false;this.icon=undefined;this.label=undefined;this.selected=false;this.selectable=false;this.variant="primary";this.tone="strong"}n.prototype.updateLang=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.language=this.t.lang(this.host);return[2]}))}))};n.prototype.handleSelectableProp=function(n){if(n){this.clickable=true}};n.prototype.handleClickableProp=function(n){this.handleClickableElement(n);this.handleClickableKeyboard(n)};n.prototype.handleDeletableProp=function(n){this.handleDeletableElement(n);this.handleDeletableKeyboard(n)};n.prototype.onClickLabelHandler=function(n){this.clickLabelEvent.emit({event:n,element:this.host});if(this.selectable){this.selected=!this.selected}};n.prototype.onDeleteHandler=function(n){this.deleteEvent.emit({event:n,element:this.host})};n.prototype.componentWillLoad=function(){this.t.lang(this.host)};n.prototype.componentDidLoad=function(){if(this.clickable){this.handleClickableElement(true);this.handleClickableKeyboard(true)}if(this.deletable){this.handleDeletableElement(true);this.handleDeletableKeyboard(true)}};n.prototype.disconnectedCallback=function(){this.km.detachClickBehavior("label");this.km.detachClickBehavior("delete")};n.prototype.render=function(){return h(Host,{key:"67d05d7b187efe97dd8127ff49c32356553500d2","aria-disabled":this.disabled?"true":"false"},this.icon&&h("div",{key:"10583c909ef3d3f346a65904c763cbc5582c1666","aria-hidden":"true",class:"icon-area"},h("mds-icon",{key:"5d6c3afd28d26951be06eaeee5a0b5414629b70f",class:"icon",name:this.icon})),this.clickable?h("mds-text",{class:"label label--interactive",tabindex:"0",typography:"caption",truncate:"word"},this.label):h("mds-text",{class:"label",typography:"caption",truncate:"word"},this.label),this.deletable&&h("mds-button",{key:"9a865e47188bd6433019e5ac0ca43c67d6495cec",class:"button-delete",icon:miBaselineCancel,onClick:this.onDeleteHandler.bind(this),title:"".concat(this.t.get("deleteLabel")," ").concat(this.label),variant:"dark",tone:"quiet",size:"sm"}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{selectable:["handleSelectableProp"],clickable:["handleClickableProp"],deletable:["handleDeletableProp"]}},enumerable:false,configurable:true});return n}();MdsChip.style=MdsChipStyle0;export{MdsChip as mds_chip};

package/dist/esm-es5/mds-details.entry.js

@@ -1 +1 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{c as clsx}from"./clsx-297c1ffe.js";import{m as miBaselineArrowDown}from"./keyboard-arrow-down-fa82970e.js";import{K as KeyboardManager}from"./keyboard-manager-f3d273fc.js";var mdsDetailsCss="@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-details-icon-color: Sets the icon color the component\n * @prop --mds-details-helper-icon-color: Sets icon color of the helper icon of the component\n */\n\n:host {\n\n  --mds-details-duration: 300ms;\n  --mds-details-icon-color: rgb(var(--brand-maggioli-04));\n  --mds-details-helper-icon-color: rgb(var(--tone-neutral-03));\n  gap: 0.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.content {\n  display: grid;\n}\n\n.details {\n  gap: 1rem;\n  padding-top: 0rem;\n  opacity: 0;\n\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-details-duration);\n  transition-duration: var(--mds-details-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  gap: 1rem;\n\n  display: grid;\n  min-height: 0;\n}\n\n.details.opened {\n  padding-top: 1rem;\n\n  grid-template-rows: 1fr;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.header {\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n.icon {\n  cursor: pointer;\n  fill: var(--mds-details-icon-color);\n}\n\n.title {\n  cursor: pointer;\n}\n\n.helper-icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.helper-icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.helper-icon {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  cursor: pointer;\n  fill: var(--mds-details-helper-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  rotate: 0deg;\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n.helper-icon.opened {\n  rotate: 180deg;\n}\n\n.actions {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-details-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-details-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-details-icon-color: rgb(var(--brand-maggioli-03));\n    --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-details-icon-color: rgb(var(--brand-maggioli-03));\n      --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));\n    }\n  }\n}\n\n\n";var MdsDetailsStyle0=mdsDetailsCss;var MdsDetails=function(){function n(n){var e=this;registerInstance(this,n);this.changedEvent=createEvent(this,"mdsDetailsChange",7);this.km=new KeyboardManager;this.toggle=function(){e.isOpened=!e.isOpened;e.changedEvent.emit(e.isOpened)};this.isOpened=undefined;this.opened=false}n.prototype.validateOpened=function(n){this.isOpened=n};n.prototype.componentWillLoad=function(){this.isOpened=this.opened};n.prototype.componentDidLoad=function(){var n;var e=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".header");this.km.addElement(e);this.km.attachClickBehavior()};n.prototype.disconnectedCallback=function(){this.km.detachClickBehavior()};n.prototype.render=function(){return h(Host,{key:"c8f6750b33c5d786b77e1d9bcce705257baf2791"},h("div",{key:"38b924ac2e866d9df4a63014fb0f55a475cf1ed9",class:"icon",onClick:this.toggle},h("slot",{key:"9fa95af9334e045d4eab9d76bbc897e3bc8e07f1",name:"icon"})),h("div",{key:"35d16f3dc812bdfe00e93b245ecc93ffcb7658b0",class:"content"},h("div",{key:"e6ec5d27945659db44fb94aba666081dd4347c67"},h("header",{key:"d926117aa4d02c7687905c5f1e6a2e0f4b54ae16",class:"header focus-bounce",tabindex:"0",onClick:this.toggle},h("div",{key:"b024a33ebaf85795fb0a17c63b331ff1261af16e",class:"title"},h("slot",{key:"f1098063d1755758584cd70ab8630cb04d4a4a8a",name:"title"})),h("i",{key:"6a67c8e51b9e93fcf085e5c4194d329a416d926d",class:clsx("helper-icon",this.isOpened&&"opened"),innerHTML:miBaselineArrowDown}))),h("div",{key:"e0cc43de0d0a9928135b51a3d8f6658060a83c73",class:clsx("details",this.isOpened&&"opened")},h("div",{key:"a46acca93147806affe56226ba09f2b6edca73a9",class:"content-expander",part:"content"},h("slot",{key:"c4b9d83df0da5f34afd261339a016b10927b2196"}),h("div",{key:"7f4ea3f5b91faa7d29b0317032e3ea9ee39f26f6",class:"actions"},h("slot",{key:"e8437e8ff7bddacf3f3d17cedf77101cdb17da44",name:"action"}))))))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{opened:["validateOpened"]}},enumerable:false,configurable:true});return n}();MdsDetails.style=MdsDetailsStyle0;export{MdsDetails as mds_details};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{c as clsx}from"./clsx-297c1ffe.js";import{m as miBaselineArrowDown}from"./keyboard-arrow-down-fa82970e.js";import{K as KeyboardManager}from"./keyboard-manager-9f287ab7.js";var mdsDetailsCss="@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-details-icon-color: Sets the icon color the component\n * @prop --mds-details-helper-icon-color: Sets icon color of the helper icon of the component\n */\n\n:host {\n\n  --mds-details-duration: 300ms;\n  --mds-details-icon-color: rgb(var(--variant-primary-04));\n  --mds-details-helper-icon-color: rgb(var(--tone-neutral-03));\n  gap: 0.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.content {\n  display: grid;\n}\n\n.details {\n  gap: 1rem;\n  padding-top: 0rem;\n  opacity: 0;\n\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-details-duration);\n  transition-duration: var(--mds-details-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  gap: 1rem;\n\n  display: grid;\n  min-height: 0;\n}\n\n.details.opened {\n  padding-top: 1rem;\n\n  grid-template-rows: 1fr;\n  opacity: 1;\n  overflow: visible;\n  pointer-events: auto;\n}\n\n.header {\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n.icon {\n  cursor: pointer;\n  fill: var(--mds-details-icon-color);\n}\n\n.title {\n  cursor: pointer;\n}\n\n.helper-icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.helper-icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.helper-icon {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  cursor: pointer;\n  fill: var(--mds-details-helper-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  rotate: 0deg;\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n.helper-icon.opened {\n  rotate: 180deg;\n}\n\n.actions {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-details-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-details-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-details-icon-color: rgb(var(--variant-primary-03));\n    --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-details-icon-color: rgb(var(--variant-primary-03));\n      --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));\n    }\n  }\n}\n\n\n";var MdsDetailsStyle0=mdsDetailsCss;var MdsDetails=function(){function n(n){var e=this;registerInstance(this,n);this.changedEvent=createEvent(this,"mdsDetailsChange",7);this.km=new KeyboardManager;this.toggle=function(){e.isOpened=!e.isOpened;e.changedEvent.emit(e.isOpened)};this.isOpened=undefined;this.opened=false}n.prototype.validateOpened=function(n){this.isOpened=n};n.prototype.componentWillLoad=function(){this.isOpened=this.opened};n.prototype.componentDidLoad=function(){var n;var e=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".header");this.km.addElement(e);this.km.attachClickBehavior()};n.prototype.disconnectedCallback=function(){this.km.detachClickBehavior()};n.prototype.render=function(){return h(Host,{key:"c8f6750b33c5d786b77e1d9bcce705257baf2791"},h("div",{key:"38b924ac2e866d9df4a63014fb0f55a475cf1ed9",class:"icon",onClick:this.toggle},h("slot",{key:"9fa95af9334e045d4eab9d76bbc897e3bc8e07f1",name:"icon"})),h("div",{key:"35d16f3dc812bdfe00e93b245ecc93ffcb7658b0",class:"content"},h("div",{key:"e6ec5d27945659db44fb94aba666081dd4347c67"},h("header",{key:"d926117aa4d02c7687905c5f1e6a2e0f4b54ae16",class:"header focus-bounce",tabindex:"0",onClick:this.toggle},h("div",{key:"b024a33ebaf85795fb0a17c63b331ff1261af16e",class:"title"},h("slot",{key:"f1098063d1755758584cd70ab8630cb04d4a4a8a",name:"title"})),h("i",{key:"6a67c8e51b9e93fcf085e5c4194d329a416d926d",class:clsx("helper-icon",this.isOpened&&"opened"),innerHTML:miBaselineArrowDown}))),h("div",{key:"e0cc43de0d0a9928135b51a3d8f6658060a83c73",class:clsx("details",this.isOpened&&"opened")},h("div",{key:"a46acca93147806affe56226ba09f2b6edca73a9",class:"content-expander",part:"content"},h("slot",{key:"c4b9d83df0da5f34afd261339a016b10927b2196"}),h("div",{key:"7f4ea3f5b91faa7d29b0317032e3ea9ee39f26f6",class:"actions"},h("slot",{key:"e8437e8ff7bddacf3f3d17cedf77101cdb17da44",name:"action"}))))))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{opened:["validateOpened"]}},enumerable:false,configurable:true});return n}();MdsDetails.style=MdsDetailsStyle0;export{MdsDetails as mds_details};