@maggioli-design-system/magma 1.10.1 → 1.10.2

package/dist/cjs/mds-banner_3.cjs.entry.js

@@ -122,7 +122,7 @@ const localeIt = {
 	deleteLabel: deleteLabel
 };
 
-const mdsChipCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-chip-background:rgb(var(--tone-neutral));--mds-chip-border:transparent;--mds-chip-color:rgb(var(--tone-neutral-03));--mds-chip-icon-background:rgb(var(--variant-primary-06));--mds-chip-icon-color:rgb(var(--tone-neutral));--mds-chip-opacity-disabled:var(--opacity-disabled, 0.5);--mds-chip-shadow:0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);height:2.25rem;gap:0.375rem;border-radius:9999px;padding-top:0.375rem;padding-bottom:0.375rem;padding-left:0.25rem;padding-right:0.25rem;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-chip-background);border:2px solid var(--mds-chip-border);-webkit-box-shadow:var(--mds-chip-shadow);box-shadow:var(--mds-chip-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--mds-chip-color);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;justify-self:start;max-width:-moz-min-content;max-width:-webkit-min-content;max-width:min-content;min-width:200px;-webkit-transition-property:background-color, border-color, color, opacity, -webkit-box-shadow;transition-property:background-color, border-color, color, opacity, -webkit-box-shadow;transition-property:background-color, border-color, box-shadow, color, opacity;transition-property:background-color, border-color, box-shadow, color, opacity, -webkit-box-shadow;width:100%}:host([disabled]:not([disabled=\"false\"])){opacity:var(--mds-chip-opacity-disabled);pointer-events:none}.label{border-radius:9999px;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-positive:1;flex-grow:1;-webkit-text-decoration-color:transparent;text-decoration-color:transparent;-webkit-transition-property:color, outline, outline-offset, -webkit-text-decoration-color;transition-property:color, outline, outline-offset, -webkit-text-decoration-color;transition-property:color, text-decoration-color, outline, outline-offset;transition-property:color, text-decoration-color, outline, outline-offset, -webkit-text-decoration-color}:host([clickable]:not([clickable=\"false\"])) .label{cursor:pointer;text-decoration:underline}:host([clickable]:not([clickable=\"false\"])) .label:hover{-webkit-text-decoration-color:unset;text-decoration-color:unset}.label:first-child{padding-left:0.5rem}.label:last-child{padding-right:0.5rem}.label--interactive{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.label--interactive:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running;z-index:10}.icon-area{height:1.5rem;width:1.5rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;-ms-flex-align:center;align-items:center;background-color:var(--mds-chip-icon-background);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:inherit;transition-duration:inherit;-webkit-transition-timing-function:inherit;transition-timing-function:inherit}.icon{height:1rem;width:1rem;-webkit-transition-duration:200ms;transition-duration:200ms;fill:var(--mds-chip-icon-color);-webkit-transition:fill;transition:fill}.button-delete{border-radius:100px;height:auto;padding:0}:host{--mds-chip-background:rgb(var(--tone-neutral));--mds-chip-border:transparent;--mds-chip-color:rgb(var(--tone-neutral-04));--mds-chip-shadow:0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)}:host([variant=\"primary\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--variant-primary-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"primary\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--variant-primary-09));--mds-chip-icon-color:rgb(var(--variant-primary-04))}:host([variant=\"primary\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--variant-primary-04))}:host([variant=\"primary\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--variant-primary-06))}:host([variant=\"secondary\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--variant-secondary-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"secondary\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--variant-secondary-09));--mds-chip-icon-color:rgb(var(--variant-secondary-04))}:host([variant=\"secondary\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--variant-secondary-04))}:host([variant=\"secondary\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--variant-secondary-06))}:host([variant=\"ai\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--variant-ai-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"ai\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--variant-ai-09));--mds-chip-icon-color:rgb(var(--variant-ai-04))}:host([variant=\"ai\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--variant-ai-04))}:host([variant=\"ai\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--variant-ai-06))}:host([variant=\"success\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--status-success-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"success\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--status-success-09));--mds-chip-icon-color:rgb(var(--status-success-04))}:host([variant=\"success\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--status-success-04))}:host([variant=\"success\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--status-success-06))}:host([variant=\"warning\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--status-warning-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"warning\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--status-warning-09));--mds-chip-icon-color:rgb(var(--status-warning-04))}:host([variant=\"warning\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--status-warning-04))}:host([variant=\"warning\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--status-warning-06))}:host([variant=\"error\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--status-error-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"error\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--status-error-09));--mds-chip-icon-color:rgb(var(--status-error-04))}:host([variant=\"error\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--status-error-04))}:host([variant=\"error\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--status-error-06))}:host([variant=\"info\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--status-info-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"info\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--status-info-09));--mds-chip-icon-color:rgb(var(--status-info-04))}:host([variant=\"info\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--status-info-04))}:host([variant=\"info\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--status-info-06))}:host([variant=\"amaranth\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-amaranth-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"amaranth\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-amaranth-09));--mds-chip-icon-color:rgb(var(--label-amaranth-04))}:host([variant=\"amaranth\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-amaranth-04))}:host([variant=\"amaranth\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-amaranth-06))}:host([variant=\"aqua\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-aqua-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"aqua\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-aqua-09));--mds-chip-icon-color:rgb(var(--label-aqua-04))}:host([variant=\"aqua\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-aqua-04))}:host([variant=\"aqua\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-aqua-06))}:host([variant=\"blue\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-blue-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"blue\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-blue-09));--mds-chip-icon-color:rgb(var(--label-blue-04))}:host([variant=\"blue\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-blue-04))}:host([variant=\"blue\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-blue-06))}:host([variant=\"green\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-green-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"green\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-green-09));--mds-chip-icon-color:rgb(var(--label-green-04))}:host([variant=\"green\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-green-04))}:host([variant=\"green\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-green-06))}:host([variant=\"lime\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-lime-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"lime\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-lime-09));--mds-chip-icon-color:rgb(var(--label-lime-04))}:host([variant=\"lime\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-lime-04))}:host([variant=\"lime\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-lime-06))}:host([variant=\"orange\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-orange-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"orange\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-orange-09));--mds-chip-icon-color:rgb(var(--label-orange-04))}:host([variant=\"orange\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-orange-04))}:host([variant=\"orange\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-orange-06))}:host([variant=\"orchid\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-orchid-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"orchid\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-orchid-09));--mds-chip-icon-color:rgb(var(--label-orchid-04))}:host([variant=\"orchid\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-orchid-04))}:host([variant=\"orchid\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-orchid-06))}:host([variant=\"sky\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-sky-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"sky\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-sky-09));--mds-chip-icon-color:rgb(var(--label-sky-04))}:host([variant=\"sky\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-sky-04))}:host([variant=\"sky\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-sky-06))}:host([variant=\"violet\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-violet-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"violet\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-violet-09));--mds-chip-icon-color:rgb(var(--label-violet-04))}:host([variant=\"violet\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-violet-04))}:host([variant=\"violet\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-violet-06))}:host([variant=\"yellow\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-yellow-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"yellow\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-yellow-09));--mds-chip-icon-color:rgb(var(--label-yellow-04))}:host([variant=\"yellow\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-yellow-04))}:host([variant=\"yellow\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-yellow-06))}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .label,:host-context(.pref-animation-reduce) .icon{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system),:host-context(.pref-animation-system) .label,:host-context(.pref-animation-system) .icon{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-chip-background:rgb(var(--tone-neutral-08));-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-chip-background:rgb(var(--tone-neutral-08));-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}}:host-context(.pref-contrast-more){--mds-chip-background:rgb(var(--tone-neutral));--mds-chip-color:rgb(var(--tone-neutral-02));--mds-chip-icon-background-selected:rgb(var(--variant-primary-03));--mds-chip-icon-color:rgb(var(--tone-neutral));--mds-chip-opacity-disabled:var(--opacity-disabled, 0.6);--mds-chip-backgroud-selected:rgb(var(--tone-neutral-09));--mds-chip-color-selected:rgb(var(--tone-neutral-01));--mds-chip-icon-color-selected:rgb(var(--tone-neutral));-webkit-box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-chip-background:rgb(var(--tone-neutral));--mds-chip-color:rgb(var(--tone-neutral-02));--mds-chip-icon-background-selected:rgb(var(--variant-primary-03));--mds-chip-icon-color:rgb(var(--tone-neutral));--mds-chip-opacity-disabled:var(--opacity-disabled, 0.6);--mds-chip-backgroud-selected:rgb(var(--tone-neutral-09));--mds-chip-color-selected:rgb(var(--tone-neutral-01));--mds-chip-icon-color-selected:rgb(var(--tone-neutral));-webkit-box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
+const mdsChipCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-chip-background:rgb(var(--tone-neutral));--mds-chip-border:transparent;--mds-chip-color:rgb(var(--tone-neutral-03));--mds-chip-icon-background:rgb(var(--variant-primary-06));--mds-chip-icon-color:rgb(var(--tone-neutral));--mds-chip-opacity-disabled:var(--opacity-disabled, 0.5);--mds-chip-shadow:0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);height:2.25rem;gap:0.375rem;border-radius:9999px;padding-top:0.375rem;padding-bottom:0.375rem;padding-left:0.25rem;padding-right:0.25rem;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-chip-background);border:2px solid var(--mds-chip-border);-webkit-box-shadow:var(--mds-chip-shadow);box-shadow:var(--mds-chip-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--mds-chip-color);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;justify-self:start;max-width:-moz-min-content;max-width:-webkit-min-content;max-width:min-content;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content;-webkit-transition-property:background-color, border-color, color, opacity, -webkit-box-shadow;transition-property:background-color, border-color, color, opacity, -webkit-box-shadow;transition-property:background-color, border-color, box-shadow, color, opacity;transition-property:background-color, border-color, box-shadow, color, opacity, -webkit-box-shadow;width:100%}:host([disabled]:not([disabled=\"false\"])){opacity:var(--mds-chip-opacity-disabled);pointer-events:none}.label{border-radius:9999px;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-positive:1;flex-grow:1;-webkit-text-decoration-color:transparent;text-decoration-color:transparent;-webkit-transition-property:color, outline, outline-offset, -webkit-text-decoration-color;transition-property:color, outline, outline-offset, -webkit-text-decoration-color;transition-property:color, text-decoration-color, outline, outline-offset;transition-property:color, text-decoration-color, outline, outline-offset, -webkit-text-decoration-color}:host([clickable]:not([clickable=\"false\"])) .label{cursor:pointer;text-decoration:underline}:host([clickable]:not([clickable=\"false\"])) .label:hover{-webkit-text-decoration-color:unset;text-decoration-color:unset}.label:first-child{padding-left:0.5rem}.label:last-child{padding-right:0.5rem}.label--interactive{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.label--interactive:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running;z-index:10}.icon-area{height:1.5rem;width:1.5rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;-ms-flex-align:center;align-items:center;background-color:var(--mds-chip-icon-background);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:inherit;transition-duration:inherit;-webkit-transition-timing-function:inherit;transition-timing-function:inherit}.icon{height:1rem;width:1rem;-webkit-transition-duration:200ms;transition-duration:200ms;fill:var(--mds-chip-icon-color);-webkit-transition:fill;transition:fill}.button-delete{border-radius:100px;height:auto;padding:0}.button-delete--hidden{display:none}:host{--mds-chip-background:rgb(var(--tone-neutral));--mds-chip-border:transparent;--mds-chip-color:rgb(var(--tone-neutral-04));--mds-chip-shadow:0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)}:host([variant=\"primary\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--variant-primary-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"primary\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--variant-primary-09));--mds-chip-icon-color:rgb(var(--variant-primary-04))}:host([variant=\"primary\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--variant-primary-04))}:host([variant=\"primary\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--variant-primary-06))}:host([variant=\"secondary\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--variant-secondary-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"secondary\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--variant-secondary-09));--mds-chip-icon-color:rgb(var(--variant-secondary-04))}:host([variant=\"secondary\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--variant-secondary-04))}:host([variant=\"secondary\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--variant-secondary-06))}:host([variant=\"ai\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--variant-ai-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"ai\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--variant-ai-09));--mds-chip-icon-color:rgb(var(--variant-ai-04))}:host([variant=\"ai\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--variant-ai-04))}:host([variant=\"ai\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--variant-ai-06))}:host([variant=\"success\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--status-success-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"success\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--status-success-09));--mds-chip-icon-color:rgb(var(--status-success-04))}:host([variant=\"success\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--status-success-04))}:host([variant=\"success\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--status-success-06))}:host([variant=\"warning\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--status-warning-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"warning\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--status-warning-09));--mds-chip-icon-color:rgb(var(--status-warning-04))}:host([variant=\"warning\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--status-warning-04))}:host([variant=\"warning\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--status-warning-06))}:host([variant=\"error\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--status-error-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"error\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--status-error-09));--mds-chip-icon-color:rgb(var(--status-error-04))}:host([variant=\"error\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--status-error-04))}:host([variant=\"error\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--status-error-06))}:host([variant=\"info\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--status-info-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"info\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--status-info-09));--mds-chip-icon-color:rgb(var(--status-info-04))}:host([variant=\"info\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--status-info-04))}:host([variant=\"info\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--status-info-06))}:host([variant=\"amaranth\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-amaranth-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"amaranth\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-amaranth-09));--mds-chip-icon-color:rgb(var(--label-amaranth-04))}:host([variant=\"amaranth\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-amaranth-04))}:host([variant=\"amaranth\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-amaranth-06))}:host([variant=\"aqua\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-aqua-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"aqua\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-aqua-09));--mds-chip-icon-color:rgb(var(--label-aqua-04))}:host([variant=\"aqua\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-aqua-04))}:host([variant=\"aqua\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-aqua-06))}:host([variant=\"blue\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-blue-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"blue\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-blue-09));--mds-chip-icon-color:rgb(var(--label-blue-04))}:host([variant=\"blue\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-blue-04))}:host([variant=\"blue\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-blue-06))}:host([variant=\"green\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-green-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"green\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-green-09));--mds-chip-icon-color:rgb(var(--label-green-04))}:host([variant=\"green\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-green-04))}:host([variant=\"green\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-green-06))}:host([variant=\"lime\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-lime-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"lime\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-lime-09));--mds-chip-icon-color:rgb(var(--label-lime-04))}:host([variant=\"lime\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-lime-04))}:host([variant=\"lime\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-lime-06))}:host([variant=\"orange\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-orange-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"orange\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-orange-09));--mds-chip-icon-color:rgb(var(--label-orange-04))}:host([variant=\"orange\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-orange-04))}:host([variant=\"orange\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-orange-06))}:host([variant=\"orchid\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-orchid-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"orchid\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-orchid-09));--mds-chip-icon-color:rgb(var(--label-orchid-04))}:host([variant=\"orchid\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-orchid-04))}:host([variant=\"orchid\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-orchid-06))}:host([variant=\"sky\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-sky-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"sky\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-sky-09));--mds-chip-icon-color:rgb(var(--label-sky-04))}:host([variant=\"sky\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-sky-04))}:host([variant=\"sky\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-sky-06))}:host([variant=\"violet\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-violet-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"violet\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-violet-09));--mds-chip-icon-color:rgb(var(--label-violet-04))}:host([variant=\"violet\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-violet-04))}:host([variant=\"violet\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-violet-06))}:host([variant=\"yellow\"][tone=\"strong\"]){--mds-chip-icon-background:rgb(var(--label-yellow-05));--mds-chip-icon-color:rgb(var(--tone-neutral))}:host([variant=\"yellow\"][tone=\"weak\"]){--mds-chip-icon-background:rgb(var(--label-yellow-09));--mds-chip-icon-color:rgb(var(--label-yellow-04))}:host([variant=\"yellow\"][tone=\"strong\"][selected]){--mds-chip-border:rgb(var(--label-yellow-04))}:host([variant=\"yellow\"][tone=\"weak\"][selected]){--mds-chip-border:rgb(var(--label-yellow-06))}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .label,:host-context(.pref-animation-reduce) .icon{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system),:host-context(.pref-animation-system) .label,:host-context(.pref-animation-system) .icon{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-chip-background:rgb(var(--tone-neutral-08));-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-chip-background:rgb(var(--tone-neutral-08));-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}}:host-context(.pref-contrast-more){--mds-chip-background:rgb(var(--tone-neutral));--mds-chip-color:rgb(var(--tone-neutral-02));--mds-chip-icon-background-selected:rgb(var(--variant-primary-03));--mds-chip-icon-color:rgb(var(--tone-neutral));--mds-chip-opacity-disabled:var(--opacity-disabled, 0.6);--mds-chip-backgroud-selected:rgb(var(--tone-neutral-09));--mds-chip-color-selected:rgb(var(--tone-neutral-01));--mds-chip-icon-color-selected:rgb(var(--tone-neutral));-webkit-box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-chip-background:rgb(var(--tone-neutral));--mds-chip-color:rgb(var(--tone-neutral-02));--mds-chip-icon-background-selected:rgb(var(--variant-primary-03));--mds-chip-icon-color:rgb(var(--tone-neutral));--mds-chip-opacity-disabled:var(--opacity-disabled, 0.6);--mds-chip-backgroud-selected:rgb(var(--tone-neutral-09));--mds-chip-color-selected:rgb(var(--tone-neutral-01));--mds-chip-icon-color-selected:rgb(var(--tone-neutral));-webkit-box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsChipStyle0 = mdsChipCss;
 
 const MdsChip = class {
@@ -130,6 +130,7 @@ const MdsChip = class {
         index.registerInstance(this, hostRef);
         this.clickLabelEvent = index.createEvent(this, "mdsChipClickLabel", 7);
         this.deleteEvent = index.createEvent(this, "mdsChipDelete", 7);
+        this.selectEvent = index.createEvent(this, "mdsChipSelect", 7);
         this.km = new keyboardManager.KeyboardManager();
         this.t = new locale.Locale({
             el: localeEl,
@@ -223,10 +224,15 @@ const MdsChip = class {
         }
     }
     onClickLabelHandler(event) {
-        this.clickLabelEvent.emit({ event, element: this.host });
         if (this.selectable) {
             this.selected = !this.selected;
+            if (this.selected === false) {
+                this.selected = undefined;
+            }
+            this.selectEvent.emit({ event, element: this.host, selected: this.selected });
+            return;
         }
+        this.clickLabelEvent.emit({ event, element: this.host });
     }
     onDeleteHandler(event) {
         this.deleteEvent.emit({ event, element: this.host });
@@ -249,10 +255,10 @@ const MdsChip = class {
         this.km.detachClickBehavior('delete');
     }
     render() {
-        return (index.h(index.Host, { key: '1fd68fe6768324adc1fdc94a83e21b540c02e3aa', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
-            index.h("div", { key: '970432deda3880f256adc1724d6c7e16b23f0ca9', "aria-hidden": "true", class: "icon-area" }, index.h("mds-icon", { key: '62937d3e14206cca3b66eeb24cc0bb995c933318', class: "icon", name: this.icon })), this.clickable
+        return (index.h(index.Host, { key: '17468677d828388fa41e38f7b74be27e1e35553a', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
+            index.h("div", { key: 'b86852c1e15e990fadc462cb371467bb70d42907', "aria-hidden": "true", class: "icon-area" }, index.h("mds-icon", { key: '8281aebce5646136442ca70d2c7d12a1746b1edc', class: "icon", name: this.icon })), this.clickable
             ? index.h("mds-text", { class: "label label--interactive", tabindex: "0", typography: "caption", truncate: "word" }, this.label)
-            : index.h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && index.h("mds-button", { key: '0fcf99ae3e741190c8138154c33e06b2f27a6a1f', class: "button-delete", icon: cancel$4.miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
+            : index.h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && index.h("mds-button", { key: 'af570ba680b51ae21a3a517e22cda03ef06f0203', class: "button-delete", icon: cancel$4.miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-policy-ai.cjs.entry.js

@@ -13,16 +13,16 @@ const mggAiChatbot = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24
 
 const miOutlinePolicy = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5l-9-4zm7 10c0 1.85-.51 3.65-1.38 5.21l-1.45-1.45a4.994 4.994 0 0 0-.64-6.29a5.003 5.003 0 0 0-7.07 0a5.003 5.003 0 0 0 0 7.07a5.006 5.006 0 0 0 6.29.64l1.72 1.72c-1.19 1.42-2.73 2.51-4.47 3.04c-4.02-1.25-7-5.42-7-9.94V6.3l7-3.11l7 3.11V11zm-7 4c-1.66 0-3-1.34-3-3s1.34-3 3-3s3 1.34 3 3s-1.34 3-3 3z"/></svg>`;
 
-const bannerDescription$3 = "Αυτό το περιεχόμενο δημιουργήθηκε αυτόματα μέσω τεχνητής νοημοσύνης και ενδέχεται να περιέχει ανακρίβειες. Σας προτείνουμε να επαληθεύσετε την ακρίβειά του και να συμβουλευτείτε επίσημες πηγές για οριστικές πληροφορίες.";
-const bannerTitle$3 = "Περιεχόμενο που δημιουργήθηκε με τεχνητή νοημοσύνη";
-const cardDescription$3 = "Αυτό το περιεχόμενο δημιουργήθηκε αυτόματα μέσω τεχνητής νοημοσύνης και ενδέχεται να περιέχει ανακρίβειες.";
-const cardTitle$3 = "Περιεχόμενο που δημιουργήθηκε με ΤΝ";
-const chipLabel$3 = "Δημιουργήθηκε με ΤΝ";
-const iconTooltip$3 = "Αυτό το περιεχόμενο δημιουργήθηκε αυτόματα μέσω τεχνητής νοημοσύνης και ενδέχεται να περιέχει ανακρίβειες.";
+const bannerDescription$3 = "Αυτό το περιεχόμενο δημιουργήθηκε αυτόματα από την τεχνητή μας νοημοσύνη MIA και ενδέχεται να περιέχει ανακρίβειες. Σας συνιστούμε να επαληθεύσετε την ακρίβειά του και να συμβουλευτείτε επίσημες πηγές για οριστικές πληροφορίες.";
+const bannerTitle$3 = "Περιεχόμενο που δημιουργήθηκε με την MIA";
+const cardDescription$3 = "Αυτό το περιεχόμενο δημιουργήθηκε αυτόματα από την τεχνητή μας νοημοσύνη MIA και ενδέχεται να περιέχει ανακρίβειες.";
+const cardTitle$3 = "Περιεχόμενο που δημιουργήθηκε με την MIA";
+const chipLabel$3 = "Δημιουργήθηκε με MIA";
+const iconTooltip$3 = "Αυτό το περιεχόμενο δημιουργήθηκε αυτόματα από την τεχνητή μας νοημοσύνη MIA και ενδέχεται να περιέχει ανακρίβειες.";
 const iconLinkLabel$3 = "Κάντε κλικ για να διαβάσετε τις πολιτικές μας για την τεχνητή νοημοσύνη";
-const linkLabel$3 = "Πολιτική τεχνητής νοημοσύνης";
-const linkLabelShort$3 = "Πολιτική ΤΝ";
-const linkLabelTitle$3 = "Διαβάστε τις πολιτικές μας για την τεχνητή νοημοσύνη και τη δημιουργία αυτόματου περιεχομένου";
+const linkLabel$3 = "Πολιτική τεχνητής νοημοσύνης MIA";
+const linkLabelShort$3 = "Πολιτική MIA";
+const linkLabelTitle$3 = "Διαβάστε τις πολιτικές μας για τη χρήση της MIA, της τεχνητής μας νοημοσύνης, και τη δημιουργία αυτόματου περιεχομένου";
 const localeEl = {
 	bannerDescription: bannerDescription$3,
 	bannerTitle: bannerTitle$3,
@@ -36,16 +36,16 @@ const localeEl = {
 	linkLabelTitle: linkLabelTitle$3
 };
 
-const bannerDescription$2 = "This content was automatically generated using artificial intelligence and may contain inaccuracies. Please verify its accuracy and refer to official sources for definitive information.";
-const bannerTitle$2 = "AI-generated content";
-const cardDescription$2 = "This content was automatically generated using artificial intelligence and may contain inaccuracies.";
-const cardTitle$2 = "AI-generated content";
-const chipLabel$2 = "AI-generated";
-const iconTooltip$2 = "This content was automatically generated using artificial intelligence and may contain inaccuracies.";
+const bannerDescription$2 = "This content was automatically generated by our artificial intelligence MIA and may contain inaccuracies. Please verify its accuracy and consult official sources for definitive information.";
+const bannerTitle$2 = "Content generated with MIA";
+const cardDescription$2 = "This content was automatically generated by our artificial intelligence MIA and may contain inaccuracies.";
+const cardTitle$2 = "Content generated with MIA";
+const chipLabel$2 = "Generated with MIA";
+const iconTooltip$2 = "This content was automatically generated by our artificial intelligence MIA and may contain inaccuracies.";
 const iconLinkLabel$2 = "Click to read our artificial intelligence policies";
-const linkLabel$2 = "Artificial Intelligence Policy";
-const linkLabelShort$2 = "AI Policy";
-const linkLabelTitle$2 = "Read our policies on artificial intelligence and automated content generation";
+const linkLabel$2 = "MIA Artificial Intelligence Policy";
+const linkLabelShort$2 = "MIA Policy";
+const linkLabelTitle$2 = "Read our policies on the use of MIA, our artificial intelligence, and the automatic generation of content";
 const localeEn = {
 	bannerDescription: bannerDescription$2,
 	bannerTitle: bannerTitle$2,
@@ -59,16 +59,16 @@ const localeEn = {
 	linkLabelTitle: linkLabelTitle$2
 };
 
-const bannerDescription$1 = "Este contenido fue generado automáticamente mediante inteligencia artificial y puede contener inexactitudes. Te recomendamos verificar su precisión y consultar fuentes oficiales para obtener información definitiva.";
-const bannerTitle$1 = "Contenido generado con inteligencia artificial";
-const cardDescription$1 = "Este contenido fue generado automáticamente mediante inteligencia artificial y puede contener inexactitudes.";
-const cardTitle$1 = "Contenido generado con IA";
-const chipLabel$1 = "Generado con IA";
-const iconTooltip$1 = "Este contenido fue generado automáticamente mediante inteligencia artificial y puede contener inexactitudes.";
+const bannerDescription$1 = "Este contenido fue generado automáticamente por nuestra inteligencia artificial MIA y puede contener inexactitudes. Te recomendamos verificar su precisión y consultar fuentes oficiales para obtener información definitiva.";
+const bannerTitle$1 = "Contenido generado con MIA";
+const cardDescription$1 = "Este contenido fue generado automáticamente por nuestra inteligencia artificial MIA y puede contener inexactitudes.";
+const cardTitle$1 = "Contenido generado con MIA";
+const chipLabel$1 = "Generado con MIA";
+const iconTooltip$1 = "Este contenido fue generado automáticamente por nuestra inteligencia artificial MIA y puede contener inexactitudes.";
 const iconLinkLabel$1 = "Haz clic para leer nuestras políticas sobre inteligencia artificial";
-const linkLabel$1 = "Política de inteligencia artificial";
-const linkLabelShort$1 = "Política IA";
-const linkLabelTitle$1 = "Lee nuestras políticas sobre inteligencia artificial y generación automatizada de contenido";
+const linkLabel$1 = "Política de inteligencia artificial de MIA";
+const linkLabelShort$1 = "Política MIA";
+const linkLabelTitle$1 = "Lee nuestras políticas sobre el uso de MIA, nuestra inteligencia artificial, y la generación automática de contenidos";
 const localeEs = {
 	bannerDescription: bannerDescription$1,
 	bannerTitle: bannerTitle$1,
@@ -82,16 +82,16 @@ const localeEs = {
 	linkLabelTitle: linkLabelTitle$1
 };
 
-const bannerDescription = "Questo contenuto è stato generato automaticamente tramite intelligenza artificiale e potrebbe contenere inesattezze, ti invitiamo a verificarne l'accuratezza e a consultare fonti ufficiali per informazioni definitive.";
-const bannerTitle = "Contenuto generato con intelligenza artificiale";
-const cardDescription = "Questo contenuto è stato generato automaticamente tramite intelligenza artificiale e potrebbe contenere inesattezze.";
-const cardTitle = "Contenuto generato con IA";
-const chipLabel = "Generato con IA";
-const iconTooltip = "Questo contenuto è stato generato automaticamente tramite intelligenza artificiale e potrebbe contenere inesattezze.";
+const bannerDescription = "Questo contenuto è stato generato automaticamente tramite la nostra intelligenza artificiale MIA e potrebbe contenere inesattezze, ti invitiamo a verificarne l'accuratezza e a consultare fonti ufficiali per informazioni definitive.";
+const bannerTitle = "Contenuto generato con MIA";
+const cardDescription = "Questo contenuto è stato generato automaticamente tramite la nostra intelligenza artificiale MIA e potrebbe contenere inesattezze.";
+const cardTitle = "Contenuto generato con MIA";
+const chipLabel = "Generato con MIA";
+const iconTooltip = "Questo contenuto è stato generato automaticamente dalla nostra intelligenza artificiale MIA e potrebbe contenere inesattezze.";
 const iconLinkLabel = "Clicca per leggere le nostre policy sulla intelligenza artificiale";
-const linkLabel = "Policy intelligenza artificiale";
-const linkLabelShort = "Policy IA";
-const linkLabelTitle = "Leggi le nostre policy sulla intelligenza artificiale e la generazione automatica dei contenuti";
+const linkLabel = "Policy MIA intelligenza artificiale";
+const linkLabelShort = "Policy MIA";
+const linkLabelTitle = "Leggi le nostre policy sull'utilizzo di MIA, la nostra intelligenza artificiale e la generazione automatica dei contenuti";
 const localeIt = {
 	bannerDescription: bannerDescription,
 	bannerTitle: bannerTitle,
@@ -105,7 +105,7 @@ const localeIt = {
 	linkLabelTitle: linkLabelTitle
 };
 
-const mdsPolicyAiCss = ":host {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n:host(:not([variant=\"icon\"])) {\n  container-name: mds-policy-ai;\n  container-type: inline-size;\n  width: 100%;\n}\n\nmds-button {\n  justify-self: start;\n}\n\n.banner {\n  --mds-banner-cockade-background: rgb(var(--variant-ai-05));\n  --mds-banner-icon-color: rgb(var(--variant-ai-10));\n}\n\n.mini-card {\n  grid-template-columns: repeat(1, minmax(1px, 100%));\n\n  background-color: rgb(var(--tone-neutral));\n  border-radius: 0.5rem;\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  gap: 0.75rem;\n  padding: 1rem;\n}\n\n.mini-card-icon {\n  margin-top: -1rem;\n  border-radius: 1rem;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  padding: 0.25rem;\n  padding-top: 1rem;\n\n  background-color: rgb(var(--variant-ai-05));\n  fill: rgb(var(--variant-ai-10));\n  height: 1.5rem;\n  width: 1.5rem;\n}\n\n.link-label-short {\n  display: none;\n}\n\n.mini-card-content {\n  grid-template-columns: repeat(1, minmax(1px, 100%));\n\n  display: grid;\n  gap: 0.75rem;\n}\n\n.mini-card-button {\n  max-width: -moz-min-content;\n  max-width: -webkit-min-content;\n  max-width: min-content;\n  min-width: 0;\n  width: 100%;\n}\n\n@container mds-policy-ai (max-width: 260px) {\n  .mini-card {\n    display: grid;\n  }\n\n  .mini-card-icon {\n    margin-top: -1rem;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n    padding-top: 0.5rem;\n  }\n\n  .mini-card-button {\n    max-width: none;\n  }\n\n  .link-label-long {\n    display: none;\n  }\n\n  .link-label-short {\n    display: inline;\n  }\n}\n\n.chip {\n  cursor: help;\n}\n\n.chip-dropdown {\n  max-width: 18rem;\n  padding: 0.75rem 1rem;\n}\n\n.icon-help {\n  background-color: rgb(var(--variant-ai-06));\n  border: 1px solid rgb(var(--tone-neutral));\n  border-radius: 1.5rem;\n  cursor: pointer;\n  fill: rgb(var(--variant-ai-10));\n  height: -moz-min-content;\n  height: -webkit-min-content;\n  height: min-content;\n  width: -moz-min-content;\n  width: -webkit-min-content;\n  width: min-content;\n}\n\n.icon-tip-content {\n  display: grid;\n  gap: 0.5rem;\n}\n\n.icon-help::part(icon) {\n  height: 1.5rem;\n  padding: 0.25rem;\n  width: 1.5rem;\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
+const mdsPolicyAiCss = ":host {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n:host(:not([variant=\"icon\"])) {\n  container-name: mds-policy-ai;\n  container-type: inline-size;\n  width: 100%;\n}\n\nmds-button {\n  justify-self: start;\n}\n\n.banner {\n  --mds-banner-cockade-background: rgb(var(--variant-ai-05));\n  --mds-banner-icon-color: rgb(var(--variant-ai-10));\n}\n\n.mini-card {\n  grid-template-columns: repeat(1, minmax(1px, 100%));\n\n  background-color: rgb(var(--tone-neutral));\n  border-radius: 0.5rem;\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  gap: 0.75rem;\n  padding: 1rem;\n}\n\n.mini-card-icon {\n  margin-top: -1rem;\n  border-radius: 1rem;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  padding: 0.25rem;\n  padding-top: 1rem;\n\n  background-color: rgb(var(--variant-ai-05));\n  fill: rgb(var(--variant-ai-10));\n  height: 1.5rem;\n  width: 1.5rem;\n}\n\n.link-label-short {\n  display: none;\n}\n\n.mini-card-content {\n  grid-template-columns: repeat(1, minmax(1px, 100%));\n\n  display: grid;\n  gap: 0.75rem;\n}\n\n.mini-card-button {\n  max-width: -moz-min-content;\n  max-width: -webkit-min-content;\n  max-width: min-content;\n  min-width: 0;\n  width: 100%;\n}\n\n@container mds-policy-ai (max-width: 260px) {\n  .mini-card {\n    display: grid;\n  }\n\n  .mini-card-icon {\n    margin-top: -1rem;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n    padding-top: 0.5rem;\n  }\n\n  .mini-card-button {\n    max-width: none;\n  }\n\n  .link-label-long {\n    display: none;\n  }\n\n  .link-label-short {\n    display: inline;\n  }\n}\n\n.chip {\n  cursor: help;\n}\n\n.chip-dropdown {\n  max-width: 18rem;\n  padding: 0.75rem 1rem;\n}\n\n.icon-help {\n  background-color: rgb(var(--variant-ai-05));\n  border: 1px solid rgb(var(--tone-neutral));\n  border-radius: 1.5rem;\n  cursor: pointer;\n  fill: rgb(var(--variant-ai-10));\n  height: -moz-min-content;\n  height: -webkit-min-content;\n  height: min-content;\n  width: -moz-min-content;\n  width: -webkit-min-content;\n  width: min-content;\n}\n\n.icon-tip-content {\n  display: grid;\n  gap: 0.5rem;\n}\n\n.icon-help::part(icon) {\n  height: 1.5rem;\n  padding: 0.25rem;\n  width: 1.5rem;\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
 const MdsPolicyAiStyle0 = mdsPolicyAiCss;
 
 const MdsPolicyAi = class {

package/dist/collection/components/mds-accordion/test/mds-accordion.stories.js

@@ -12,20 +12,27 @@ export default {
         },
     },
 };
-const Template = args => h("mds-accordion", Object.assign({}, args), h("mds-accordion-item", { label: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-item", { label: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-item", { label: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-item", { label: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-item", { label: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati.")));
-const TemplateMultiple = args => h("mds-accordion", Object.assign({}, args), h("mds-accordion-item", { selected: true, label: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-item", { selected: true, label: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-item", { selected: true, label: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-item", { label: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-item", { label: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati.")));
-const AddedElementTemplate = args => h("mds-accordion", Object.assign({}, args), h("mds-accordion-item", { label: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), args.added &&
-    h("mds-accordion-item", { label: "New element", selected: true }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati.")), h("mds-accordion-item", { label: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-item", { label: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-item", { label: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-item", { label: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati.")));
-export const Default = Template.bind({});
-export const ItemNotClosable = Template.bind({});
-ItemNotClosable.args = {
-    closable: false,
+const Template = args => (h("mds-accordion", Object.assign({}, args), h("mds-accordion-item", { label: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-item", { label: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-item", { label: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-item", { label: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-item", { label: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati."))));
+const TemplateMultiple = args => (h("mds-accordion", Object.assign({}, args), h("mds-accordion-item", { selected: true, label: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), h("mds-accordion-item", { selected: true, label: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-item", { selected: true, label: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-item", { label: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-item", { label: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati."))));
+const AddedElementTemplate = args => (h("mds-accordion", Object.assign({}, args), h("mds-accordion-item", { label: "Blipbug" }, h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")), args.added && (h("mds-accordion-item", { label: "New element", selected: true }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati."))), h("mds-accordion-item", { label: "Drednaw" }, h("mds-text", null, "Drednaw \u00E8 un Pok\u00E9mon quadrupede simile ad una tartaruga alligatore. Il corpo \u00E8 principalmente di colore turchese cos\u00EC come le zampe cilindriche e tozze, le quali terminano con tre unghie allungate e bianche. Sulle zampe anteriori, circa sulla loro met\u00E0, spuntanto delle protuberanze simili a scaglie di roccia color marroncino, ricorrenti anche nel resto del corpo: ad esempio, sul muso c'\u00E8 una protuberanza a zig-zag che ospita le sue narici; sulla coda sono alternate delle scaglie e attorno al guscio c'\u00E8 una cornice dello stesso colore; anche le placche superiori sembrano essere fatte di roccia, ma sono di un colore marrone scuro, invece che chiaro. Queste parti rocciose sembrano essere frastagliate, per niente levigate. Il suo volto presenta occhi bassi e imbronciati, con delle guance arancioni e sporgenti ed una bocca a zig-zag, la cui parte inferiore \u00E8 simile al beige, colore presente anche nelle placche del guscio inferiori, che stavolta fanno vedere la pelle a volte grinzosa del Pok\u00E9mon (in particolare attorno al collo e sulle zampe). Le sue scaglie di roccia sono spesso rivolte verso di dietro, dando l'idea di una roccia grezza e non liscia e lavorata.")), h("mds-accordion-item", { label: "Orbeetle" }, h("mds-text", null, "Orbeetle presenta aspetti comuni ad una coccinella ormai matura. Il suo corpo si sviluppa attorno al guscio che \u00E8 di forma semisferica ed \u00E8 metallizzato in grigio (lo si pu\u00F2 vedere in particolare dalla parte inferiore di esso): la sua scocca \u00E8 rossa, con dei pois denim sopra di essa; \u00E8 bisezionata per permettere di aprirsi e attaccare con degli strani poteri. All'estremit\u00E0 del taglio intermedio \u00E8 incastonato il volto di Orbeetle, il quale presenta delle guance bianche con occhi imbronciati celesti, aventi sclere concentriche; sopra di essi ci sono due lunghe sopracciglia dorate a forma di \"V\" e ad incorniciare la faccia del Pok\u00E9mon \u00E8 una cornice grigia, che finisce, con delle striature, sul naso dello stesso. La bocca, assieme alle ginocchia e alla pancia, \u00E8 rossa. Il suo corpo \u00E8 piccolo ed \u00E8 costituito da una vita stretta con una bacino largo, da dove si sviluppano due cosce secche ed esili per poi finire con appuntiti gambali dorati; le sue braccia sono magre e biforcute, come se avessero artigli.")), h("mds-accordion-item", { label: "Dottler" }, h("mds-text", null, "Dottler pu\u00F2 essere considerato la \"crisalide\" della linea evolutiva di Blipbug, vista la sua forma e il suo comportamento. Presenta un guscio di forma poligonale (molto simile a quella di un radar Doppler o di un radome) di color giallo sabbia, con dei pois blu scuro sugli spigoli; leggermente in basso \u00E8 presente la sua faccia di color arancione chiaro, sulla quale ci sono degli occhi celesti attorniati da un contorno arancione, da linee sottili e nere e da delle appendici blu simili a quelle dei Blipbug. Il Pok\u00E9mon non sembra essere dedito a muoversi se non fosse per le quattro zampette blu scuro su cui cammina.")), h("mds-accordion-item", { label: "Centiskorch" }, h("mds-text", null, "Con l'evoluzione Sizzlipede diventa pi\u00F9 aggressivo, soprattutto grazie alla sua stazza pi\u00F9 grande e al suo enorme potenziale. Il corpo diventa pi\u00F9 lungo e si \"seziona\" in dodici parti, anche qui un'estremit\u00E0 \u00E8 la \"coda\" e l'altra \u00E8 la testa, queste due parti, assieme all'intera parte inferiore del corpo sono del rosso mattone presente nella sua pre-evo, mentre le \"parti\" comprese tra la coda e la testa restano marroni/bordeaux; questa volte, dello stesso colore della \"schiena\" sono le zampe, le quali son diventate pi\u00F9 minacciose e uncinate, questa volta sono dieci per ogni lato; marrone/bordeaux sono anche delle tenaglie. presenti in paia, sulla coda e sulla testa; su queste estremit\u00E0 son presenti quattro sbuffi o \"baffi\" di fuoco. Sulla testa \u00E8 presente un simbolo arancione chiaro a forma di punto esclamativo; stessa gamma cromatica \u00E8 presente nei segni circolari situati nella zona inferiore del corpo, i quali son formati, per\u00F2, anche da un anello e da un cerchio, pi\u00F9 interno, di colore giallo sabbia; non sono altro che i punti che Sizzlipede riscalda per attaccare e scottare le prede. I suoi occhi sono giallo elettrico con pupille triangolari color marrone e rovesciati."))));
+export const Default = {
+    render: Template,
 };
-export const Multiple = TemplateMultiple.bind({});
-Multiple.args = {
-    multiple: true,
+export const ItemNotClosable = {
+    render: Template,
+    args: {
+        closable: false,
+    },
+};
+export const Multiple = {
+    render: TemplateMultiple,
+    args: {
+        multiple: true,
+    },
 };
-export const DynamicAddedElement = AddedElementTemplate.bind({});
-DynamicAddedElement.args = {
-    added: true,
+export const DynamicAddedElement = {
+    render: AddedElementTemplate,
+    args: {
+        added: true,
+    },
 };

package/dist/collection/components/mds-accordion-item/test/mds-accordion-item.stories.js

@@ -19,13 +19,17 @@ export default {
         },
     },
 };
-const Template = args => h("mds-accordion-item", Object.assign({}, args), h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa."));
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Blipbug',
+const Template = args => (h("mds-accordion-item", Object.assign({}, args), h("mds-text", null, "Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed \u00E8 formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste \u00E8 suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di \"V\" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo \"collare\", anch'esso color denim, presenta delle \"setole\" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo \u00E8 bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la \"coda\", \u00E8 color denim e finisce con un'appendice a \"V\" un po' pi\u00FA grossa.")));
+export const Default = {
+    render: Template,
+    args: {
+        label: 'Blipbug',
+    },
 };
-export const Selected = Template.bind({});
-Selected.args = {
-    selected: true,
-    label: 'Blipbug',
+export const Selected = {
+    render: Template,
+    args: {
+        selected: true,
+        label: 'Blipbug',
+    },
 };