@maggioli-design-system/magma 1.10.1 → 1.10.3

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-de0ace0a.js');
 
-const mdsHeaderCss = "/**\n * @prop --mds-header-backdrop-background-image: Sets the background-image of the backdrop element visibile when the component attribute `appearance` is set to `inline`, by default is shown when mds-pref-consumtion is set to `medium`\n * @prop --mds-header-backdrop-filter: Sets the backdrop-filter of the backdrop element visibile when the component attribute `appearance` is set to `inline`, by default is shown when mds-pref-consumtion is set to `high`\n * @prop --mds-header-backdrop-height: Sets the height of the backdrop element visibile when the component attribute `appearance` is set to `inline`\n * @prop --mds-header-backdrop-show: Sets if the backdrop element is visible or not, only visible when the component attribute `appearance` is set to `inline`\n * @prop --mds-header-color: Sets the text color of the header and the mobile toggler icon\n * @prop --mds-header-hidden-bar-translate-inline: Sets translateY value for the appearance inline `mds-header-bar` element\n * @prop --mds-header-hidden-bar-translate-stripe: Sets translateY value for the appearance stripe `mds-header-bar` element\n * @prop --mds-header-icon-color: Sets the color of the icon toggler\n * @prop --mds-header-inline-margin-mobile: Sets inline margin on mobile viewport of `the mds-header-bar` when attribute `appearance` is set to `inline`\n * @prop --mds-header-inline-margin: Sets inline margin of `the mds-header-bar` when attribute `appearance` is set to `inline`\n * @prop --mds-header-z-index: Sets the z-index of the modal\n */\n\n:host {\n  --mds-header-color: rgb(var(--tone-neutral-02));\n  --mds-header-hidden-bar-translate-inline: translateY(-150%);\n  --mds-header-hidden-bar-translate-stripe: translateY(-110%);\n  --mds-header-icon-color: var(--mds-header-color, rgb(var(--tone-neutral-02)));\n  --mds-header-modal-icon-color: rgb(var(--tone-neutral));\n  --mds-header-backdrop-filter: blur(10px);\n  --mds-header-backdrop-background-image: linear-gradient(to top, rgb(0 0 0 / 0), rgb(0 0 0 / 0.15));\n  --mds-header-backdrop-height: 4rem;\n  --mds-header-backdrop-show: true;\n  --mds-header-z-index: var(--magma-header-z-index, 1000);\n  --mds-header-inline-margin-mobile: 1rem;\n  --mds-header-inline-margin: 1.5rem;\n\n  color: var(--mds-header-color);\n  fill: var(--mds-header-icon-color);\n  position: relative;\n  z-index: var(--mds-header-z-index);\n}\n\n.modal {\n  --mds-modal-close-icon-color: var(--mds-header-modal-icon-color);\n\n  z-index: var(--mds-header-z-index);\n}\n\n:host([appearance=\"inline\"]) ::slotted(mds-header-bar) {\n  --mds-header-inline-margin-current: var(--mds-header-inline-margin);\n  max-width: 1280px;\n  border-radius: 0.5rem;\n\n  margin-bottom: var(--mds-header-inline-margin-current);\n  margin-top: var(--mds-header-inline-margin-current);\n  width: calc(100% - calc(var(--mds-header-inline-margin-current) * 2));\n}\n\n@media (width <= 767px) {\n  :host([appearance=\"inline\"]) ::slotted(mds-header-bar) {\n    --mds-header-inline-margin-current: var(--mds-header-inline-margin-mobile);\n  }\n}\n\n@media (max-width: 1023px) {\n\n  :host([menu=\"desktop\"]) .menu {\n    display: none;\n  }\n}\n\n@media (min-width: 1024px) {\n\n  :host([menu=\"mobile\"]) .menu {\n    display: none;\n  }\n}\n\n:host([menu=\"none\"]) .menu {\n  display: none;\n}\n\n:host([visibility=\"hidden\"][appearance=\"stripe\"]) ::slotted(mds-header-bar) {\n  -webkit-transform: var(--mds-header-hidden-bar-translate-stripe);\n  transform: var(--mds-header-hidden-bar-translate-stripe);\n}\n\n:host([visibility=\"hidden\"][appearance=\"inline\"]) ::slotted(mds-header-bar) {\n  -webkit-transform: var(--mds-header-hidden-bar-translate-inline);\n  transform: var(--mds-header-hidden-bar-translate-inline);\n}\n\n.backdrop {\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-backdrop-filter: var(--mds-header-backdrop-filter);\n          backdrop-filter: var(--mds-header-backdrop-filter);\n  background-image: var(--mds-header-backdrop-background-image);\n  content: '';\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-header-backdrop-height);\n  inset: 0;\n  opacity: 1;\n  position: fixed;\n  -webkit-transform: translate(0, 0);\n  transform: translate(0, 0);\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: opacity, transform;\n  transition-property: opacity, transform, -webkit-transform;\n  width: 100%;\n\n\n  /* should blurs the blur effect but not blurring */\n\n  /* mask-image: linear-gradient(rgb(0 0 0 / 1), transparent); */\n}\n\n:host([appearance=\"inline\"]) .backdrop {\n  opacity: 1;\n  -webkit-transform: translate(0, 0);\n  transform: translate(0, 0);\n}\n\n:host([visibility=\"hidden\"]) .backdrop,\n:host([appearance=\"stripe\"]) .backdrop {\n  opacity: 0;\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@container style(--mds-header-backdrop-show: false) {\n  :host-context(:not(.safari)) .backdrop {\n    display: none;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-header-modal-icon-color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-header-modal-icon-color: rgb(var(--tone-neutral-01));\n  }\n}\n\n:host-context(.pref-consumption-high) .backdrop {\n  --mds-header-backdrop-background-image: none;\n}\n\n:host-context(.pref-consumption-medium) .backdrop {\n  --mds-header-backdrop-filter: none;\n}\n\n:host-context(.pref-consumption-low) .backdrop {\n  display: none;\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 mdsHeaderCss = "/**\n * @prop --mds-header-backdrop-background-image: Sets the background-image of the backdrop element visibile when the component attribute `appearance` is set to `inline`, by default is shown when mds-pref-consumtion is set to `medium`\n * @prop --mds-header-backdrop-filter: Sets the backdrop-filter of the backdrop element visibile when the component attribute `appearance` is set to `inline`, by default is shown when mds-pref-consumtion is set to `high`\n * @prop --mds-header-backdrop-height: Sets the height of the backdrop element visibile when the component attribute `appearance` is set to `inline`\n * @prop --mds-header-backdrop-show: Sets if the backdrop element is visible or not, only visible when the component attribute `appearance` is set to `inline`\n * @prop --mds-header-color: Sets the text color of the header and the mobile toggler icon\n * @prop --mds-header-hidden-bar-translate-inline: Sets translateY value for the appearance inline `mds-header-bar` element\n * @prop --mds-header-hidden-bar-translate-stripe: Sets translateY value for the appearance stripe `mds-header-bar` element\n * @prop --mds-header-icon-color: Sets the color of the icon toggler\n * @prop --mds-header-inline-margin-mobile: Sets inline margin on mobile viewport of `the mds-header-bar` when attribute `appearance` is set to `inline`\n * @prop --mds-header-inline-margin: Sets inline margin of `the mds-header-bar` when attribute `appearance` is set to `inline`\n * @prop --mds-header-z-index: Sets the z-index of the modal\n */\n\n:host {\n  --mds-header-color: rgb(var(--tone-neutral-02));\n  --mds-header-hidden-bar-translate-inline: translateY(-150%);\n  --mds-header-hidden-bar-translate-stripe: translateY(-110%);\n  --mds-header-icon-color: var(--mds-header-color, rgb(var(--tone-neutral-02)));\n  --mds-header-modal-icon-color: rgb(var(--tone-neutral));\n  --mds-header-backdrop-filter: blur(10px);\n  --mds-header-backdrop-background-image: linear-gradient(to top, rgb(0 0 0 / 0), rgb(0 0 0 / 0.15));\n  --mds-header-backdrop-height: 4rem;\n  --mds-header-backdrop-show: true;\n  --mds-header-z-index: var(--magma-header-z-index, 1000);\n  --mds-header-inline-margin-mobile: 1rem;\n  --mds-header-inline-margin: 1.5rem;\n\n  color: var(--mds-header-color);\n  fill: var(--mds-header-icon-color);\n  position: relative;\n  z-index: var(--mds-header-z-index);\n}\n\n.modal {\n  --mds-modal-close-icon-color: var(--mds-header-modal-icon-color);\n\n  z-index: var(--mds-header-z-index);\n}\n\n:host([appearance=\"inline\"]) ::slotted(mds-header-bar) {\n  --mds-header-inline-margin-current: var(--mds-header-inline-margin);\n  max-width: 1280px;\n  border-radius: 0.5rem;\n\n  margin-bottom: var(--mds-header-inline-margin-current);\n  margin-top: var(--mds-header-inline-margin-current);\n  width: calc(100% - calc(var(--mds-header-inline-margin-current) * 2));\n}\n\n@media (width <= 767px) {\n  :host([appearance=\"inline\"]) ::slotted(mds-header-bar) {\n    --mds-header-inline-margin-current: var(--mds-header-inline-margin-mobile);\n  }\n}\n\n@media (max-width: 1023px) {\n\n  :host([menu=\"desktop\"]) .menu {\n    display: none;\n  }\n}\n\n@media (min-width: 1024px) {\n\n  :host([menu=\"mobile\"]) .menu {\n    display: none;\n  }\n}\n\n:host([menu=\"none\"]) .menu {\n  display: none;\n}\n\n:host([visibility=\"hidden\"][appearance=\"stripe\"]) ::slotted(mds-header-bar) {\n  -webkit-transform: var(--mds-header-hidden-bar-translate-stripe);\n  transform: var(--mds-header-hidden-bar-translate-stripe);\n}\n\n:host([visibility=\"hidden\"][appearance=\"inline\"]) ::slotted(mds-header-bar) {\n  -webkit-transform: var(--mds-header-hidden-bar-translate-inline);\n  transform: var(--mds-header-hidden-bar-translate-inline);\n}\n\n.backdrop {\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-backdrop-filter: var(--mds-header-backdrop-filter);\n  backdrop-filter: var(--mds-header-backdrop-filter);\n  background-image: var(--mds-header-backdrop-background-image);\n  content: '';\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-header-backdrop-height);\n  inset: 0;\n  opacity: 1;\n  position: fixed;\n  -webkit-transform: translate(0, 0);\n  transform: translate(0, 0);\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: opacity, transform;\n  transition-property: opacity, transform, -webkit-transform;\n  width: 100%;\n\n\n  /* should blurs the blur effect but not blurring */\n\n  /* mask-image: linear-gradient(rgb(0 0 0 / 1), transparent); */\n}\n\n:host([appearance=\"inline\"]) .backdrop {\n  opacity: 1;\n  -webkit-transform: translate(0, 0);\n  transform: translate(0, 0);\n}\n\n:host([visibility=\"hidden\"]) .backdrop,\n:host([appearance=\"stripe\"]) .backdrop {\n  opacity: 0;\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@container style(--mds-header-backdrop-show: false) {\n  :host-context(:not(.safari)) .backdrop {\n    display: none;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-header-modal-icon-color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-header-modal-icon-color: rgb(var(--tone-neutral-01));\n  }\n}\n\n:host-context(.pref-consumption-high) .backdrop {\n  --mds-header-backdrop-background-image: none;\n}\n\n:host-context(.pref-consumption-medium) .backdrop {\n  --mds-header-backdrop-filter: none;\n}\n\n:host-context(.pref-consumption-low) .backdrop {\n  display: none;\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 MdsHeaderStyle0 = mdsHeaderCss;
 
 const MdsHeader = class {

package/dist/cjs/mds-input-date-range-preselection.cjs.entry.js

@@ -21,7 +21,7 @@ const MdsInputDateRangePreselection = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'b2c69bd35a04e2039351d7ab89e46d43423d33f6', slot: "calendar-preselection" }, index.h("mds-button", { key: 'b3774fb81eb780c2303144cd33b2db493ede9c63', onClick: this.onClick, class: "action", variant: "primary", tone: "strong" }, index.h("slot", { key: 'aeaefe2cc021173222dc68c8ab9110c4aa96bac4' }))));
+        return (index.h(index.Host, { key: '312780cd0f679e10e34c6aa5d9c15fd5d29835fb', slot: "calendar-preselection" }, index.h("mds-button", { key: '7d0085b9cc58a162ff47fca25daf104cef64bcb1', onClick: this.onClick, class: "action", variant: "primary", tone: "strong" }, index.h("slot", { key: 'cd15d275d8259f651e3fc9a04fb15c70981f2a67' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/mds-input-date.cjs.entry.js

@@ -8,7 +8,7 @@ const luxon = require('./luxon-75bef749.js');
 const locale = require('./locale-ff33b626.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 
-const mdsInputDateCss = "@tailwind utilities; :host{--mds-input-date-background:rgb(var(--tone-neutral));--mds-input-date-field-background-empty:rgb(var(--status-error-10));--mds-input-date-field-color-empty:rgb(var(--status-error-06));--mds-input-date-icon-color:var(--mds-input-date-variant-color);--mds-input-date-ring:0 0 0 1px rgb(var(--mds-input-date-variant-color) / 0.1);--mds-input-date-shadow:0 1px 3px 0 rgb(var(--mds-input-date-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-variant-color) / 0.06);--mds-input-date-variant-color:0 0 0;min-height:1.5rem;font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;gap:0.5rem;color:rgb(var(--tone-neutral-02));container-type:inline-size;display:-ms-flexbox;display:flex;overflow:visible;position:relative}.input::-webkit-calendar-picker-indicator{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;display:none}.input{min-height:1.25rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:0.875rem;line-height:1.25rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:transparent;border:0;border-radius:0.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;overflow:hidden;text-overflow:ellipsis;-webkit-transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;width:-moz-min-content;width:-webkit-min-content;width:min-content}:host([empty]) .input{background-color:var(--mds-input-date-field-background-empty);color:var(--mds-input-date-field-color-empty)}:host([slot]){color:inherit;display:contents}:host([slot]) .input{cursor:text;text-align:center}:host(:not([slot])) .input{border-radius:0.5rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:3rem;background-color:var(--mds-input-date-background);-webkit-box-shadow:var(--mds-input-date-ring), var(--mds-input-date-shadow);box-shadow:var(--mds-input-date-ring), var(--mds-input-date-shadow);min-height:3rem;width:100%}:host(:focus-within) .input{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-date-ring:0 0 0 3px rgb(var(--mds-input-date-variant-color) / 1);--mds-input-date-shadow:0 4px 6px 3px rgb(var(--mds-input-date-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-date-variant-color) / 0.06)}.input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-date-ring:0 0 0 3px rgb(var(--mds-input-date-variant-color) / 1);--mds-input-date-shadow:0 4px 6px 3px rgb(var(--mds-input-date-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-date-variant-color) / 0.06)}.input::-moz-placeholder{color:rgb(var(--tone-neutral-04))}.input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-04))}.input:-ms-input-placeholder{color:rgb(var(--tone-neutral-04))}.input::-ms-input-placeholder{color:rgb(var(--tone-neutral-04))}.input::placeholder{color:rgb(var(--tone-neutral-04))}.input::-webkit-outer-spin-button,.input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}.input:disabled{background-color:rgb(var(--tone-neutral-10))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-webkit-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled:-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05))}.action-open-calendar{--mds-button-color:rgb(var(--mds-input-date-icon-color));aspect-ratio:1;bottom:0;position:absolute;right:0;top:0}mds-calendar{min-width:-moz-max-content;min-width:-webkit-max-content;min-width:max-content}mds-dropdown{padding:0}: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}:host-context(.pref-animation-reduce) .input{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system) .input{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-date-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-date-background:rgb(var(--tone-neutral-09));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-dark) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-date-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-date-background:rgb(var(--tone-neutral-09));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-system) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}}:host-context(.pref-contrast-more){--mds-input-date-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-date-background:rgb(var(--tone-neutral-09));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-input-date-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-date-background:rgb(var(--tone-neutral-09));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}}@supports (-moz-appearance: none){.action-open-calendar{display:none}:host(:not([slot])) .input{padding-right:1rem}}:host{--mds-input-date-icon-color:var(--variant-primary-03);--mds-input-date-variant-color:0 0 0}:host(:focus-within){--mds-input-date-variant-color:var(--variant-primary-04)}:host([variant=\"info\"]){--mds-input-date-icon-color:var(--status-info-05);--mds-input-date-tip-background:var(--status-info-05);--mds-input-date-variant-color:0 0 0}:host([variant=\"info\"]:focus-within){--mds-input-date-icon-color:var(--status-info-04);--mds-input-date-variant-color:var(--status-info-05)}:host([variant=\"success\"]){--mds-input-date-icon-color:var(--status-success-05);--mds-input-date-tip-background:var(--status-success-05);--mds-input-date-variant-color:0 0 0}:host([variant=\"success\"]:focus-within){--mds-input-date-icon-color:var(--status-success-04);--mds-input-date-variant-color:var(--status-success-05)}:host([variant=\"warning\"]){--mds-input-date-icon-color:var(--status-warning-05);--mds-input-date-tip-background:var(--status-warning-05);--mds-input-date-variant-color:0 0 0}:host([variant=\"warning\"]:focus-within){--mds-input-date-icon-color:var(--status-warning-04);--mds-input-date-variant-color:var(--status-warning-05)}:host([variant=\"error\"]){--mds-input-date-icon-color:var(--status-error-05);--mds-input-date-tip-background:var(--status-error-05);--mds-input-date-variant-color:0 0 0}:host([variant=\"error\"]:focus-within){--mds-input-date-icon-color:var(--status-error-04);--mds-input-date-variant-color:var(--status-error-05)}";
+const mdsInputDateCss = "@tailwind utilities; :host{--mds-input-date-background:rgb(var(--tone-neutral));--mds-input-date-field-background-empty:rgb(var(--status-error-10));--mds-input-date-field-color-empty:rgb(var(--status-error-06));--mds-input-date-icon-color:var(--mds-input-date-variant-color);--mds-input-date-ring:0 0 0 1px rgb(var(--mds-input-date-variant-color) / 0.1);--mds-input-date-shadow:0 1px 3px 0 rgb(var(--mds-input-date-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-variant-color) / 0.06);--mds-input-date-variant-color:0 0 0;min-height:1.5rem;font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;gap:0.5rem;color:rgb(var(--tone-neutral-02));container-type:inline-size;display:-ms-flexbox;display:flex;overflow:visible;position:relative}.input::-webkit-calendar-picker-indicator{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;display:none}.input{min-height:1.25rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:0.875rem;line-height:1.25rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:transparent;border:0;border-radius:0.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;overflow:hidden;text-overflow:ellipsis;-webkit-transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;width:-moz-min-content;width:-webkit-min-content;width:min-content}:host([empty]) .input{background-color:var(--mds-input-date-field-background-empty);color:var(--mds-input-date-field-color-empty)}:host([slot]){color:inherit;display:contents}:host([slot]) .input{cursor:text;text-align:center}:host(:not([slot])) .input{border-radius:0.5rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:3rem;background-color:var(--mds-input-date-background);-webkit-box-shadow:var(--mds-input-date-ring), var(--mds-input-date-shadow);box-shadow:var(--mds-input-date-ring), var(--mds-input-date-shadow);min-height:3rem;width:100%}:host(:focus-within) .input{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-date-ring:0 0 0 3px rgb(var(--mds-input-date-variant-color) / 1);--mds-input-date-shadow:0 4px 6px 3px rgb(var(--mds-input-date-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-date-variant-color) / 0.06)}.input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-date-ring:0 0 0 3px rgb(var(--mds-input-date-variant-color) / 1);--mds-input-date-shadow:0 4px 6px 3px rgb(var(--mds-input-date-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-date-variant-color) / 0.06)}.input::-moz-placeholder{color:rgb(var(--tone-neutral-04))}.input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-04))}.input:-ms-input-placeholder{color:rgb(var(--tone-neutral-04))}.input::-ms-input-placeholder{color:rgb(var(--tone-neutral-04))}.input::placeholder{color:rgb(var(--tone-neutral-04))}.input::-webkit-outer-spin-button,.input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}.input:disabled{background-color:rgb(var(--tone-neutral-10))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-webkit-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled:-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05))}.action-open-calendar{--mds-button-color:rgb(var(--mds-input-date-icon-color));aspect-ratio:1;bottom:0;position:absolute;right:0;top:0}:host([disabled]:not([disabled=\"false\"])) .action-open-calendar{-webkit-transform:translate(0.625rem, 0.5rem);transform:translate(0.625rem, 0.5rem)}mds-calendar{min-width:-moz-max-content;min-width:-webkit-max-content;min-width:max-content}mds-dropdown{padding:0}: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}:host-context(.pref-animation-reduce) .input{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system) .input{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-date-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-date-background:rgb(var(--tone-neutral-09));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-dark) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-date-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-date-background:rgb(var(--tone-neutral-09));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-system) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}}:host-context(.pref-contrast-more){--mds-input-date-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-date-background:rgb(var(--tone-neutral-09));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-input-date-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-date-background:rgb(var(--tone-neutral-09));--mds-input-date-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}}@supports (-moz-appearance: none){.action-open-calendar{display:none}:host(:not([slot])) .input{padding-right:1rem}}:host{--mds-input-date-icon-color:var(--variant-primary-03);--mds-input-date-variant-color:0 0 0}:host(:focus-within){--mds-input-date-variant-color:var(--variant-primary-04)}:host([variant=\"info\"]){--mds-input-date-icon-color:var(--status-info-05);--mds-input-date-tip-background:var(--status-info-05);--mds-input-date-variant-color:0 0 0}:host([variant=\"info\"]:focus-within){--mds-input-date-icon-color:var(--status-info-04);--mds-input-date-variant-color:var(--status-info-05)}:host([variant=\"success\"]){--mds-input-date-icon-color:var(--status-success-05);--mds-input-date-tip-background:var(--status-success-05);--mds-input-date-variant-color:0 0 0}:host([variant=\"success\"]:focus-within){--mds-input-date-icon-color:var(--status-success-04);--mds-input-date-variant-color:var(--status-success-05)}:host([variant=\"warning\"]){--mds-input-date-icon-color:var(--status-warning-05);--mds-input-date-tip-background:var(--status-warning-05);--mds-input-date-variant-color:0 0 0}:host([variant=\"warning\"]:focus-within){--mds-input-date-icon-color:var(--status-warning-04);--mds-input-date-variant-color:var(--status-warning-05)}:host([variant=\"error\"]){--mds-input-date-icon-color:var(--status-error-05);--mds-input-date-tip-background:var(--status-error-05);--mds-input-date-variant-color:0 0 0}:host([variant=\"error\"]:focus-within){--mds-input-date-icon-color:var(--status-error-04);--mds-input-date-variant-color:var(--status-error-05)}";
 const MdsInputDateStyle0 = mdsInputDateCss;
 
 const MdsInputDate = class {
@@ -28,6 +28,10 @@ const MdsInputDate = class {
          * @description It's in ISO format (YYYY-MM-DD).
          */
         this.value = '';
+        /**
+         * Sets the variant of the input field
+         */
+        this.variant = 'primary';
         /**
          * Specifies the min date of the range, user cannot set dates before this date
          * @description It's in ISO format (YYYY-MM-DD).
@@ -43,33 +47,55 @@ const MdsInputDate = class {
          * @description Default is 500
          */
         this.delay = 500;
-        this.empty = undefined;
-        this.internalValue = '';
+        /**
+         * If true, the element is displayed as disabled
+         */
+        this.disabled = false;
+        /**
+         * Specifies that the element is read-only
+         */
+        this.readonly = false;
+        /**
+         * Specifies that the element must be filled out before submitting the form
+         */
+        this.required = false;
         this.calendarKey = 0;
+        this.hasFocus = false;
+        this.onBlur = (ev) => {
+            const input = ev.target;
+            this.hasFocus = false;
+            this.value = input.value;
+        };
+        this.onFocus = (ev) => {
+            const input = ev.target;
+            this.hasFocus = true;
+            if (this.readonly) {
+                // setTimeout to avoid Safari 14.1.2
+                // to unselect text when mouse is clicked slowly
+                setTimeout(() => {
+                    input.select();
+                }, 10);
+            }
+        };
     }
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
-    handleValue(newValue) {
-        this.internalValue = newValue;
-        this.validateValue(newValue);
+    handleValue() {
+        this.valueChange.emit(this.value);
+        this.validateValue();
     }
-    validateValue(value) {
-        const date = luxon.DateTime_1.fromISO(value);
-        if (!this.touched) {
-            this.empty = undefined;
+    validateValue() {
+        const date = luxon.DateTime_1.fromISO(this.value);
+        this.isValid = false;
+        this.variant = 'error';
+        if (date.invalid && this.required)
             return;
-        }
-        if (value === '') {
-            this.empty = undefined;
+        if ((this.max && luxon.DateTime_1.fromISO(this.max) < date) ||
+            (this.min && luxon.DateTime_1.fromISO(this.min) > date))
             return;
-        }
-        if (!date.isValid) {
-            this.empty = true;
-        }
-        else {
-            this.empty = undefined;
-        }
+        this.isValid = true;
+        this.variant = 'primary';
     }
     async focusInput() {
         var _a;
@@ -77,13 +103,13 @@ const MdsInputDate = class {
         input.focus();
     }
     async setValue(value) {
-        this.internalValue = value;
-        this.validateValue(value);
+        this.value = value;
+        this.validateValue();
         return Promise.resolve();
     }
     componentWillLoad() {
         this.isSlotted = !!this.host.getAttribute('slot');
-        this.internalValue = this.value || '';
+        this.value = this.value || '';
         this.language = this.t.lang(this.host);
         // Se max è precedente a min, imposto max uguale a min
         if (this.min && this.max) {
@@ -93,43 +119,20 @@ const MdsInputDate = class {
                 this.max = this.min;
             }
         }
-    }
-    handleInput(event) {
-        const input = event.target;
-        this.touched = true;
-        this.internalValue = input.value;
-        this.validateValue(this.internalValue);
+        this.validateValue();
     }
     handleChange(event) {
         const input = event.target;
         this.touched = true;
-        this.internalValue = input.value;
-        this.validateValue(this.internalValue);
-    }
-    manageValue(ev) {
-        const input = ev.target;
-        this.internalValue = input.value;
-        if (!input.validity.badInput && input.value === '') {
-            this.empty = undefined;
-        }
-        else {
-            this.empty = true;
-        }
-        this.valueChange.emit(this.internalValue);
+        this.value = input.value;
+        this.validateValue();
     }
     render() {
-        return (index.h(index.Host, { key: 'df929f81b6ae0022f54547b091e74ed53a8eb5df', empty: this.empty }, index.h("input", { key: '42821c4eccf20353b1f3f6b010fa33adc5c3a3b9', value: this.internalValue, id: "dateInput", class: "input", part: "input-date", type: "date", onInput: event => this.handleInput(event), onChange: event => this.handleChange(event), onFocusout: event => this.manageValue(event) }), !this.isSlotted && index.h("mds-button", { key: 'ff01a3a923b207d56600cbbe57684aacf828017c', id: "calendar-dropdown", class: "action-open-calendar", variant: "dark", tone: "quiet", icon: calendarToday.miBaselineCalendarToday, onClick: () => {
+        return (index.h(index.Host, { key: '65bead50746f2ac93e77e3b0d2959d44d6bc6ee3' }, index.h("input", { key: '1c0b86d98f32e82378dea84a2f48acffb87d596b', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && index.h("mds-button", { key: 'ed2874e84dc8febec33dfee7a8e1c0ea44b33c61', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: calendarToday.miBaselineCalendarToday, onClick: () => {
                 this.calendarKey += 1;
-            } }), !this.isSlotted && index.h("mds-dropdown", { key: '1726c2eb55ed43dd61510cda589a4e85e45e3d33', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, index.h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
-                this.internalValue = ev.detail.startDate;
-                const date = luxon.DateTime_1.fromISO(this.internalValue);
-                if (!date.isValid) {
-                    this.empty = true;
-                }
-                else {
-                    this.empty = undefined;
-                }
-                this.valueChange.emit(this.internalValue);
+            } }), index.h("mds-input-tip", { key: '0c1de4cfda03e12cf04a236a99f735f09ab96d33', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'd3a2124d567dafe7ac6845ddd8ff4d640406eb13', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'df71711af47d3a4146d362b9a1dffe410f2db222', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: '006715ae91e970a8305ff6c11ede212c8aa847fc', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && index.h("mds-dropdown", { key: '48bf82eda13f4f7a69fc252ed4ece511cdf6e7c9', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, index.h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
+                this.value = ev.detail.startDate;
                 if (this.delay === 0)
                     return;
                 const { dropdownRef } = this;
@@ -138,7 +141,7 @@ const MdsInputDate = class {
                         dropdownRef.visible = false;
                     }, this.delay);
                 }
-            }, startDate: this.internalValue }, this.min ? { min: this.min } : {}, this.max ? { max: this.max } : {})))));
+            }, startDate: this.value }, this.min ? { min: this.min } : {}, this.max ? { max: this.max } : {})))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-input-field.cjs.entry.js

@@ -38,7 +38,7 @@ const MdsInputField = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'c2025f0f747a18de36fedb5f9c17254004cde6b4' }, index.h("mds-text", { key: '95febdd1880977f8e31ed1bb677eb6e5d957955d', class: "label", typography: "label" }, this.label), index.h("div", { key: 'e6eed910d8df452ce74bbfc488513c12c4e5b323', class: "message-window" }, index.h("div", { key: 'd365ff8949246e8fd4efab77474732f8fde491c6', class: "content", part: "content" }, index.h("slot", { key: '9af41f329e00c32c045be4c60314c499c95e3ce5', ref: i => this.slotInput = i })), index.h("div", { key: 'f1583475ed470a4f753fcc0acb076b6214e81021', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => index.h("mds-text", { typography: "caption", key: i }, m))))));
+        return (index.h(index.Host, { key: 'ce722d7738fa6c03318ae0e15ce00b6c6bb2cb2c' }, index.h("mds-text", { key: 'c954639cf415c9c50ccb09b748ea3fd01f9016aa', class: "label", typography: "label" }, this.label), index.h("div", { key: '1e6f4c4209b77f8cea1934db650afda2e4779569', class: "message-window" }, index.h("div", { key: '59ee9b986484b2f72b423b3887ad79c87bb40bdd', class: "content", part: "content" }, index.h("slot", { key: '532f7f929c13a0002141989f03e0fdd3025026c1', ref: i => this.slotInput = i })), index.h("div", { key: '3d44c1ebc7c741ec9d4efb89640872018b6da2b3', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => index.h("mds-text", { typography: "caption", key: i }, m))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

package/dist/cjs/mds-input-otp.cjs.entry.js

@@ -91,7 +91,7 @@ const MdsInputOtp = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '43073cfddac2e4ef914187a64de80cf5575cf4c8' }, Array.from({ length: this.length }).map(() => (index.h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
+        return (index.h(index.Host, { key: '12a644ed6f15af0ec2e288353bbe5969ba3ffb06' }, Array.from({ length: this.length }).map(() => (index.h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

package/dist/cjs/mds-input-range.cjs.entry.js

@@ -101,7 +101,7 @@ const MdsInputRange = class {
         this.calculateProgress();
     }
     render() {
-        return (index.h(index.Host, { key: '00a2ccedbfc55530151b1e3f1b2474b3b7dcb200' }, index.h("header", { key: '049f23ef6dc9f8497fbe0995d92d320325766f82', class: "header", part: "header" }, index.h("mds-text", { key: 'b28dfb984faf6f7765a641c5f690fdc2482d6901', class: "label", typography: "label" }, index.h("slot", { key: 'be03c5df8c6d768733a621cf3ecc8a233eca1549' })), index.h("mds-text", { key: 'af4c39bdcc0e365359bc5432e3a4b4f5ccfe67a5', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: '02e45b0a101196342dccdec934d8206983c42fb6', class: "range" }, index.h("div", { key: 'f3ea19b214837250ddc422aeca138a8f5c6671f5', class: "track" }, index.h("div", { key: '6808fcd5269d76b452383444e0a84ff86bc9542e', class: "contrast-area" }), index.h("div", { key: '2b4b3fff237311c751f3b38c7d0cc1d3a59d01f0', class: "track-total" }, index.h("div", { key: '31835084146ab6635def9908a4df460f97bf8cdb', class: "track-progress", style: { width: `${this.progress}%` } }))), index.h("input", { key: '4288abeec5606ddcace352ef4aae95850fff1fd7', ref: el => this.inputElement = el, class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (index.h(index.Host, { key: '4ac73411f2a163e20bb68a46bc97f39664f13b81' }, index.h("header", { key: '2025dc18061e028fea660711d04985fac10be4a1', class: "header", part: "header" }, index.h("mds-text", { key: '7c9a106655dd8a8764cfd026e6ae903a6e5b7979', class: "label", typography: "label" }, index.h("slot", { key: '9ed95e29e20f2dde0194a954ec2a74550b1b3ea5' })), index.h("mds-text", { key: 'ad4426cb6066ea8acb91ad5a5e332d89c2829484', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: 'a816782c847643515071745a448f1fd59972d861', class: "range" }, index.h("div", { key: 'f51e949cdb467c946282de60f01e20e93215abd9', class: "track" }, index.h("div", { key: '865c0bed59ee8705ae733a7b5b305c53cac8f5ed', class: "contrast-area" }), index.h("div", { key: 'e42af7daed9c0dce15cf04c747241cd816ca77b9', class: "track-total" }, index.h("div", { key: '41c0ec5ee9b202ede52532665e48e28a2c9565da', class: "track-progress", style: { width: `${this.progress}%` } }))), index.h("input", { key: '072ec18380f0b978c7ad1d8ecd39c116829e0a88', ref: el => this.inputElement = el, class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

package/dist/cjs/mds-input-select.cjs.entry.js

@@ -129,8 +129,8 @@ const MdsInputSelect = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a4f8f29a6be109811a6ce945273ed2116d3edcd6' }, index.h("select", { key: '4f8735e5ec493e8eddde0a6edc89d414875b89c9', class: clsx.clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && index.h("option", { key: 'de6f4bad5c296af57503a5d8039e7d9aceaa6fd1', value: "", disabled: true, selected: true }, this.placeholder)), index.h("div", { key: 'd652531504aec39a995683df7309c9ca718987a8', class: "icon-container" }, index.h("i", { key: '1faf0151901769f51eaeea55c9058418ca379515', class: "icon", innerHTML: keyboardArrowDown.miBaselineKeyboardArrowDown })), index.h("div", { key: '7d38f040f6c938e5db5e9e8bd6ffc4ad8cbae702', class: "option-container" }, index.h("slot", { key: 'f49389d1149014039db99c8a90792628264244a5', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: 'a54a9a371dff7f1ca56ce7ca35c4c13171e6ed10', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '1db8c0aef4d2707dcd788bc612d7683684fc36e5', expanded: true, variant: "disabled" }), this.required &&
-            index.h("mds-input-tip-item", { key: '9231d353acb6d996084c4e63de35e3779e44c7dc', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (index.h(index.Host, { key: '555b4b93fbc778d4293540a8c837adb8741ce617' }, index.h("select", { key: '939e1d4139f6181e25a9eb0a9bb4846cdb32f38d', class: clsx.clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && index.h("option", { key: 'e4411312a224a3104258242844022e5540338da1', value: "", disabled: true, selected: true }, this.placeholder)), index.h("div", { key: '2f220d52db731d2437c529d8b4f7d50fa5298740', class: "icon-container" }, index.h("i", { key: '3b2f32a581248ab723c8c47ed7f0457285736277', class: "icon", innerHTML: keyboardArrowDown.miBaselineKeyboardArrowDown })), index.h("div", { key: '2306b4c0e7b21afe70c9967be224ea45792b8dde', class: "option-container" }, index.h("slot", { key: 'f0b4a86adb23f3097c4660042c73c60fc33f1fca', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: '1b507e32c4c1f9d11ed38bb999836ab927b5bc6a', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'cd7b15f50a18dee24e7dd73a0940c5e1c93a13dc', expanded: true, variant: "disabled" }), this.required &&
+            index.h("mds-input-tip-item", { key: 'd68e1aa258ad927a7cdcf10dd9ae22b12ba0cf61', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

package/dist/cjs/mds-input-switch_2.cjs.entry.js

@@ -210,11 +210,11 @@ const MdsInputSwitch = class {
         var _a;
         const { iconChecked, iconUnchecked, iconIndeterminate } = inputSwitchIconVariant[this.type];
         const iconCheckedUser = this.icon !== '' ? this.icon : iconChecked;
-        return (index.h(index.Host, { key: '061d25c0e5a3a3769dd25e047b876a738f95289c', onClick: this.handleDirty }, index.h("input", { key: 'a4f1f695eeea8364855fcfdf42c8982446eb5da8', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: event => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch'
+        return (index.h(index.Host, { key: '7f23da179de8195c1d4f3b29a7fdc70ef038ea3d', onClick: this.handleDirty }, index.h("input", { key: '584d64ee6b6476783cc61fde4643707204d31f0e', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: event => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch'
             ?
                 index.h("label", { htmlFor: "field", class: clsx.clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, index.h("div", { class: "switch" }, index.h("div", { class: "switch-toggle" }, this.explicit && index.h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : remove.miBaselineRemove }))))
             :
-                index.h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, index.h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, index.h("mds-icon", { class: "icon-unchecked", name: clsx.clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), index.h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, index.h("mds-icon", { class: "icon-checked", name: clsx.clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))), index.h("label", { key: '5721756e321d4605927db564ade3f0ff2d823b92', htmlFor: "field", class: clsx.clsx('label-text', !this.hasText && 'label-text--empty') }, index.h("mds-text", { key: '9c8e3ec296316433b883baa8f08a614ea9a814e6', typography: this.typography, variant: this.variant }, index.h("slot", { key: 'a7bb2fd56769d8e0c6e9584a78109389d85dc529' })))));
+                index.h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, index.h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, index.h("mds-icon", { class: "icon-unchecked", name: clsx.clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), index.h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, index.h("mds-icon", { class: "icon-checked", name: clsx.clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))), index.h("label", { key: 'f3303a33fd8a2f60e67ed443687ce8dedc0d3b0b', htmlFor: "field", class: clsx.clsx('label-text', !this.hasText && 'label-text--empty') }, index.h("mds-text", { key: '334c449310e68258109da6983deb0e7aae5fc15b', typography: this.typography, variant: this.variant }, index.h("slot", { key: 'ffe72183468fc62aa9160bfbaa5f24cf60337a2f' })))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -237,7 +237,7 @@ const MdsTableCell = class {
         aria.setAttributeIfEmpty(this.host, 'role', 'cell');
     }
     render() {
-        return (index.h(index.Host, { key: 'c1a0ee7e35d477a5fc1bd0338f3b5d877178e5b9' }, index.h("slot", { key: 'a47da6082e95dd20e9d104aceb8f6c5f8798ea91' })));
+        return (index.h(index.Host, { key: 'e55a206ea01d0ffd28063339b2590b860e373800' }, index.h("slot", { key: 'd7d15eb91ee8e0d0045a658b05c9963de4b7bd72' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/mds-input-tip_2.cjs.entry.js

@@ -23,7 +23,7 @@ const MdsInputTip = class {
         this.position = 'top';
     }
     render() {
-        return (index.h(index.Host, { key: '2e81e72a43d5f0db9bb33a60d626bfb76f5747e7' }, index.h("slot", { key: '4232169da062d30c90a1e96cef6e46b77ebd01a9' })));
+        return (index.h(index.Host, { key: '4a6b8bc471afe276bb7461d9b57bcbeaed32b998' }, index.h("slot", { key: '5e007f21d21f94972f0214d40973ffb89a7489c3' })));
     }
 };
 MdsInputTip.style = MdsInputTipStyle0;
@@ -93,13 +93,13 @@ const MdsInputTipItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '74edc4bf34eaebe0a6b489639f30fb9bc2b7f2d3' }, index.h("div", { key: '051c623f0f6bc7adc8e58e8bb75a266c70040483', class: "content" }, this.variant === 'text' &&
-            index.h("mds-text", { key: '5be01d8bce2b5eae9ec062836f15f77e70599faa', typography: "option", truncate: "word" }, index.h("span", { key: '3fd907d49c6b0b66b4d16c135c9d6702ef4ce260', class: "text" }, index.h("slot", { key: '0fcbb034b9bdf6f30d67fac6d7ceeac01269914b' }))), this.variant === 'readonly' &&
-            index.h("mds-text", { key: '86592965943f63c7798e29798b51221a9ed6ae77', typography: "option", truncate: "word" }, index.h("span", { key: '1263bb5a20525ff70683a25d8086a7f6729983ec', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'disabled' &&
-            index.h("mds-text", { key: 'eb71a80bca4709b3e1767bce0fc299b2c7d3f1eb', typography: "option", truncate: "word" }, index.h("span", { key: 'ab5fb8dfefe5c83fe191cf461bb1e97b378db8d6', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required' &&
-            index.h("mds-text", { key: '194dcd24dd03ec85cfafaf11566d7e2359f4c8e9', typography: "option", truncate: "word" }, index.h("span", { key: '5470811b2c456c167643e1d102bc27484d778aa2', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required-success' &&
-            index.h("span", { key: 'd828b720652d6cfbe40bec8e4718611a11837204', class: "icon", innerHTML: done.miBaselineDone }), (this.variant === 'count-almost' || this.variant === 'count-almost-full' || this.variant === 'count-empty' || this.variant === 'count-full' || this.variant === 'count-incomplete') &&
-            index.h("mds-text", { key: 'e18eec6f3e0b7a99271d07e8ed7a13d34b35470c', typography: "option", truncate: "word" }, index.h("span", { key: '8e5441256e6f9902667064e8fa01de4781df398b', class: "text" }, index.h("slot", { key: '89e4049e90c94500b36130adfb13abe41a0f183e' }))))));
+        return (index.h(index.Host, { key: '823c231cad86a73c8a20e7aaff446c82a6a03bcd' }, index.h("div", { key: '5c2c1232212f8bd8bc70e20526f781924a29da17', class: "content" }, this.variant === 'text' &&
+            index.h("mds-text", { key: 'fa33b630d58217037c796ddaa8be4aa2a5887989', typography: "option", truncate: "word" }, index.h("span", { key: 'd5e2bd02bbd925d7e36cbfc4119ac47ead58be54', class: "text" }, index.h("slot", { key: '9b5a9677bff367e3993b3aeedc59a987ea7712d4' }))), this.variant === 'readonly' &&
+            index.h("mds-text", { key: 'ce05c8dde6b7d948f4fba6aea93ead1651720f03', typography: "option", truncate: "word" }, index.h("span", { key: '0ea70472bf7685ace98f3dba8feead14294d1174', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'disabled' &&
+            index.h("mds-text", { key: '9346da4a9e2b028eb8123700ea57ee231c138944', typography: "option", truncate: "word" }, index.h("span", { key: 'a3605874f82bb15ace895c5f5c1a85c5225a5ac7', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required' &&
+            index.h("mds-text", { key: '6bdf4e66624cd0b28b2320da92c6e09ac4162628', typography: "option", truncate: "word" }, index.h("span", { key: 'bd4ec56e8c649999b54853047589fea69eae1dae', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required-success' &&
+            index.h("span", { key: '8eded74f87d6f797f20a4e417824f9fa6b1a43a2', class: "icon", innerHTML: done.miBaselineDone }), (this.variant === 'count-almost' || this.variant === 'count-almost-full' || this.variant === 'count-empty' || this.variant === 'count-full' || this.variant === 'count-incomplete') &&
+            index.h("mds-text", { key: '3d57e1ad0073fdb4b5bbff888b1d4028dbae6afa', typography: "option", truncate: "word" }, index.h("span", { key: 'c61e4c4bf3b9cc7b87d14d795de4a8c8729c9b12', class: "text" }, index.h("slot", { key: 'b80cf78fdc612bbb88538a1f0f4ac918f9325f8e' }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-input-upload.cjs.entry.js

@@ -418,7 +418,7 @@ const MdsInputUpload = class {
         this.language = this.t.lang(this.host);
     }
     formResetCallback() {
-        this.internals.setFormValue('');
+        this.onReset();
     }
     componentWillLoad() {
         var _a;
@@ -450,6 +450,13 @@ const MdsInputUpload = class {
             this.actionTitle = this.t.get('clickOrDrag', { maxFiles: newValue });
         }
     }
+    /**
+     * Reset component's files
+     */
+    reset() {
+        this.onReset();
+        return Promise.resolve();
+    }
     /**
      * Prepare file to be submitted.
      * Limit number of file to maxFiles
@@ -594,12 +601,12 @@ const MdsInputUpload = class {
         return !!this.sort && this.files.length > 1;
     }
     render() {
-        return (index.h(index.Host, { key: '58cbbc849fe2bb88b480ad95e14061510e25ae17' }, index.h("div", { key: 'fc4687570b8bb50fe21dd0217881eefdd217459a', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, index.h("div", { key: 'e41420057c0f1f486c252345ceda9935fd8783a4', class: "main-action" }, index.h("div", { key: 'b515e78c7a53103b5cda974166809906ef460ca7', class: "main-action-icon" }, index.h("i", { key: 'dcc6d55e0c5a8c37e7ccc70a939ae5e5c3111623', class: "icon", innerHTML: miBaselineAddCircle })), index.h("mds-text", { key: '30f60abdb67cfe4228f8b6b8dbbbc601bd372339', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), index.h("div", { key: '5dc259b27fa8005bab6631f7ae6f6a6b6bf69a8a', class: "main-actions" }, index.h("mds-button", { key: '95139412610ed02ad41c6bd7e29a92a92fae1b75', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && index.h("mds-button", { key: '0ee5c0930bbdb707e430d74a1b395f46ac98e631', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), index.h("div", { key: '7b9620e7eb1a51234f0df0a6a150c6b08b84163f', class: "main-infos" }, index.h("mds-progress", { key: '6cc5dbe5129be2e876fe578f3ab15fd17dc733c1', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1
+        return (index.h(index.Host, { key: 'ff873e7089019666024b2fced3cc1c8c3702a8be' }, index.h("div", { key: '26c2a15d18d6eed7c328b2a3615884c95f9cd03b', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, index.h("div", { key: '10dae83654f3b68b9e7599537560b1eaf4f97f37', class: "main-action" }, index.h("div", { key: '551eaeed9e6155edc2a5a2ff5d735d0b4d370fa3', class: "main-action-icon" }, index.h("i", { key: '1ffeb5b74bf5bee22dccbde66a977c5a1d6c681e', class: "icon", innerHTML: miBaselineAddCircle })), index.h("mds-text", { key: '3d3236eb1c8a67ffa276704c0cf07170b862c7f2', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), index.h("div", { key: '828a16fdeee416c4583caf940264c74e24e8e3a0', class: "main-actions" }, index.h("mds-button", { key: 'e5aa06e83c0fb3464c54c8d5540c45b7aefd6073', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && index.h("mds-button", { key: 'e965a2408ae50694d227836764c6cd341aca6818', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), index.h("div", { key: 'ac205a0a5af79566de4ae866cd55826b00f4c3a7', class: "main-infos" }, index.h("mds-progress", { key: '7111db2c452769fad12e56467f63e904c5e304b9', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1
             ? index.h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))
             : index.h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
                 ? this.t.get('currentFilesWithMax', { currentFiles: this.files.length, maxFiles: this.maxFiles })
-                : this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), index.h("input", { key: '96fe5b72b4e18933f8695db4e38d976f4c6e4c5a', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), index.h("div", { key: 'e903711034c3402f98dd584283bd8d69c37b52b5', class: "additional-infos" }, index.h("div", { key: '57ff65678fd0e171c09e36a3744932111169cabc', class: clsx.clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, index.h("mds-text", { key: '7611bf84ebbfaa792d18ee4cb1206a6022054c92', variant: "info", typography: "caption" }, this.extensions ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), index.h("mds-text", { key: '891bdddc5a7b30db596508b21527d84f8e3df8f8', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() &&
-            index.h("mds-tab", { key: '5d19a61cb35b3b5575986944f7776ae6d8e05465', class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, index.h("mds-tab-item", { key: 'edc46ea9124109c81c6dcd63248bfb4eda20e7b3', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), index.h("mds-tab-item", { key: '5109df3852c73f570cd0fac15a17d28b5a457e1e', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))), index.h("div", { key: '5428a408c74798c2e68541c49b5bd342a0cbf93d', class: clsx.clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
+                : this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), index.h("input", { key: '5dd0883901bbbfd1d239cb9811a13237b3ea712c', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), index.h("div", { key: 'b07d914c29fc30cf08e393e9e830ebefcabfbe78', class: "additional-infos" }, index.h("div", { key: 'd5c664a1fa9407a4e061123b12f312cfa5442c3a', class: clsx.clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, index.h("mds-text", { key: '6d35cae9c629aad6b9e9c3000f22b73ce6079bd5', variant: "info", typography: "caption" }, this.extensions ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), index.h("mds-text", { key: '62b5515e1737f643fe1691709eeb8d955c6523b1', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() &&
+            index.h("mds-tab", { key: '3eaddf7b201ab0e3f443998d8786d3e36e397828', class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, index.h("mds-tab-item", { key: 'bcd80494ab8bfcfb2e2b5cd2d9e1b595942b76a3', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), index.h("mds-tab-item", { key: 'b18d310ecb45a30e97bdfc7118e0510594b083dd', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))), index.h("div", { key: 'f636fdabf71388ae85c5435fd2a0923a4e7ca6dd', class: clsx.clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
             switch (file.status) {
                 case Status.ERROR:
                     return (index.h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));

package/dist/cjs/mds-keyboard-key.cjs.entry.js

@@ -291,9 +291,9 @@ const MdsKeyboardKey = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '9f46e80c65cb19f5566b13005ca6845a1fc8ea42', title: this.getTitle() }, index.h("div", { key: '553e5d31ebdfdcdb860a6e4aa8eb36063c1e06b8', class: "physical-key" }, this.name && icons.has(this.name)
+        return (index.h(index.Host, { key: '802f1f4633d3a756c8bcda46212981ea24e1e61f', title: this.getTitle() }, index.h("div", { key: '907ac88ddc6321b9a61cdaf9a4e7880b745e53dd', class: "physical-key" }, this.name && icons.has(this.name)
             ? index.h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : brokenImage.miBaselineBrokenImage, class: "shortcut-icon" })
-            : index.h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && index.h("b", null, this.keyboardKeys[this.name].alias)), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && index.h("mds-text", { key: '7e5bb5e2b8abb472fdc0a0557371542cec04ec0e', typography: "label" }, ((_c = this.keyboardKeys[this.name].keyboardPosition) === null || _c === void 0 ? void 0 : _c.left) && 'l', ((_d = this.keyboardKeys[this.name].keyboardPosition) === null || _d === void 0 ? void 0 : _d.right) && 'r'))));
+            : index.h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && index.h("b", null, this.keyboardKeys[this.name].alias)), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && index.h("mds-text", { key: 'd3f68d86fd848f9909c1056a6cbbb19f591dbbff', typography: "label" }, ((_c = this.keyboardKeys[this.name].keyboardPosition) === null || _c === void 0 ? void 0 : _c.left) && 'l', ((_d = this.keyboardKeys[this.name].keyboardPosition) === null || _d === void 0 ? void 0 : _d.right) && 'r'))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -193,7 +193,7 @@ const MdsKeyboard = class {
         this.stopKeyboardShortcutTest();
     }
     render() {
-        return (index.h(index.Host, { key: 'bb817e3f67ce65dc90947c8c298bb1c3b1adea5f' }, index.h("div", { key: '9cc59ebe7ded2f9115f1898c5ae2f6ac4dc00155', class: "shortcuts" }, index.h("slot", { key: '3a97bf3d8ec84797bf73a29871ab984a2ee6b061' })), this.try && index.h("mds-button", { key: '4fce4f6ad9e5085a33a5bcd2e698716fc10e9236', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "quiet", onClick: this.startKeyboardShortcutTest.bind(this) }), this.try && index.h("mds-tooltip", { key: '000555215520f2432b7bf3ecd6d4edb9bc9b6eb8', target: '.combination-checker' }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && index.h("div", { key: '8bb6dc0e1ed2e92bffadde67059dd484ba2d9518', class: "errors" }, [...this.errors].map(error => (index.h("mds-text", { typography: 'tip' }, this.t.get(error))))))));
+        return (index.h(index.Host, { key: 'f4a019bb8abbb5d2786623eae83d64cfe61182bd' }, index.h("div", { key: 'c33ccc56d9ff86191abb53a7f922f8ff5197e5cc', class: "shortcuts" }, index.h("slot", { key: '302a19180e1cfcc46ae7b556e5cf1f02762fae54' })), this.try && index.h("mds-button", { key: '8111e2709ffe3e11e96b4e436e39b50f0e168b24', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "quiet", onClick: this.startKeyboardShortcutTest.bind(this) }), this.try && index.h("mds-tooltip", { key: 'ed46df3dc7a6a2ec16742e8865e9576b3f944dc9', target: '.combination-checker' }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && index.h("div", { key: '14be9e7a889ae3918aff50727f97663794d94a8c', class: "errors" }, [...this.errors].map(error => (index.h("mds-text", { typography: 'tip' }, this.t.get(error))))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-kpi-item.cjs.entry.js

@@ -32,8 +32,8 @@ const MdsKpiItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8ad40011600e1570582dc414869ac295dd756f49', "aria-label": `${this.label}: ${this.description}`, role: "listitem" }, this.icon &&
-            index.h("div", { key: 'e61cdfb35407b45c5b3dc6d62ee2dae4bf66ff8d', class: "icon-container", part: "icon-container" }, index.h("mds-icon", { key: '2494447a51e7ead1aedb4b55c8ab706bd6351d21', class: "icon", name: this.icon, part: "icon" })), index.h("div", { key: 'f84b09602a46e962cb568fcdc579537fbaf08823', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && index.h("mds-text", { key: '6881c55c05c721780c6dd881aed9290a7991df31', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" }), this.label && this.threshold === 0 && index.h("mds-text", { key: '04fbff9a16a3467956181e51ccd29454c8559b8c', class: "value", typography: "h2" }, this.label), this.description && this.threshold !== 0 && index.h("mds-text", { key: '3ec6b32dc332837d3c305cf3b9c0187ccc0caa5d', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" }), this.description && this.threshold === 0 && index.h("mds-text", { key: 'e755d349aa9dff370c5042f5dc0f2c23df4d9eca', class: "description", typography: "label" }, this.description))));
+        return (index.h(index.Host, { key: 'a548c1197f941df9a27001c04c7b1973e118cf62', "aria-label": `${this.label}: ${this.description}`, role: "listitem" }, this.icon &&
+            index.h("div", { key: '45b4e16c656b8396f937686f94f96e19e5179e83', class: "icon-container", part: "icon-container" }, index.h("mds-icon", { key: '80b25ccdeb97adabf15777ff0aeb5729d0a6e851', class: "icon", name: this.icon, part: "icon" })), index.h("div", { key: 'e8e2e47c10677f452366cba17f68fd67ee709bcc', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && index.h("mds-text", { key: 'f34e784df8edad19785738a4c71ea4f22827b264', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" }), this.label && this.threshold === 0 && index.h("mds-text", { key: '4286792ac9bb8f13518d704816a552c566510e10', class: "value", typography: "h2" }, this.label), this.description && this.threshold !== 0 && index.h("mds-text", { key: '6ff1ee311b55e983d24dc6969c7dd40f0dc99289', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" }), this.description && this.threshold === 0 && index.h("mds-text", { key: '990e39c96111524372155bdf3486fda699a33ae0', class: "description", typography: "label" }, this.description))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -12,7 +12,7 @@ const MdsKpi = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'dd4fdc884709887fe3ca17f9895de6ccbd746c95', role: "list" }, index.h("slot", { key: '8a53e1bf3d904d0ed3e5b8538a3de3e955141c76' })));
+        return (index.h(index.Host, { key: '4399ae89280bb996ebeb8e7ef5971ec00ee69751', role: "list" }, index.h("slot", { key: '59c73a18547bb1f9f9053c722d6d508894c87f80' })));
     }
 };
 MdsKpi.style = MdsKpiStyle0;

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

@@ -87,7 +87,7 @@ const MdsLabel = class {
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: 'e4fe178443dcfc526aec277e117f4bed62661f0e' }, index.h("mds-text", { key: '1833cc2140d8052f720575b3e871c6be411eacfc', class: "text", truncate: this.truncate, typography: this.typography }, index.h("slot", { key: '43a44aa9d8ccebccf4c14774cc9af290b3eefc4d' })), this.deletable && index.h("mds-button", { key: 'e0fbbbc60e42f1c5503f2b4e70f6c7351a4938b3', class: "button-close", icon: cancel.miBaselineCancel, onClick: this.onClickDelete.bind(this), title: this.t.get('remove') })));
+        return (index.h(index.Host, { key: '8e07b2f4db4c8cd94461d92d0f7092b14da2ca14' }, index.h("mds-text", { key: 'a4d0fc6386c315ffea2eb8a49839981ab2e2f1a2', class: "text", truncate: this.truncate, typography: this.typography }, index.h("slot", { key: '738206f293b5220116934edfdbd0ed14cf38d8c9' })), this.deletable && index.h("mds-button", { key: '17c807ebeb0757d692d408ea64ac8cdb011dbc6a', class: "button-close", icon: cancel.miBaselineCancel, onClick: this.onClickDelete.bind(this), title: this.t.get('remove') })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/mds-list-item.cjs.entry.js

@@ -26,7 +26,7 @@ const MdsListItem = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'f0e35e5a955f4cf0bf1c7a80de16f5de8cbc807b', role: "listitem" }, index.h("mds-icon", { key: 'cdb502661d07ca362acb86418156f2503267900d', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), index.h("mds-text", { key: 'efc3133aeb5022981c2cd0da2b9419d44cf7e524', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, index.h("slot", { key: '7d22a207b50682e31ece3dd80a99c1a4a881a714' }))));
+        return (index.h(index.Host, { key: '689404d1e24ccca3f7b6dae14c9de758a9958433', role: "listitem" }, index.h("mds-icon", { key: '55e226db64ac816f361d6de838a5d7a12a249bdc', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), index.h("mds-text", { key: '9ea43df05abfe834015a0b1f48b4676d068c4999', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, index.h("slot", { key: '5767deb4dc3f9d831be9110f09754f3f7044406d' }))));
     }
 };
 MdsListItem.style = MdsListItemStyle0;

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

@@ -12,7 +12,7 @@ const MdsList = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '8092c9a0ff02484900fbcdf0a546ffa1a653d0dd', role: "list" }, index.h("slot", { key: 'f0e4fb4d174a582366ae5709b802c1370c9bd4fc' })));
+        return (index.h(index.Host, { key: '6b535d21db95eae01155c73f48e3eb43740d37ed', role: "list" }, index.h("slot", { key: '022a37299f62bd315ee414ad6ec6cb598e44b0aa' })));
     }
 };
 MdsList.style = MdsListStyle0;

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

@@ -24,7 +24,7 @@ const MdsMention = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8c65c978d96843790ef566debb70002fbeb5a33d' }, index.h("mds-icon", { key: '1e9dbb129b4d1494c8a4df5f27fe4674dad907bc', name: this.icon ? this.icon : miBaselineAlternateEmail }), index.h("mds-text", { key: '56698676ed40154763bb3dc2c1446423d7fc46a0', typography: this.sizeTypography[(_a = this.size) !== null && _a !== void 0 ? _a : 'md'] }, this.size === 'lg'
+        return (index.h(index.Host, { key: 'df0bfe4704b4e21795b4eadfeb53eef140ceaabc' }, index.h("mds-icon", { key: 'ba77f6b3c8eb89a9387ca2bb89ef423e52f42da4', name: this.icon ? this.icon : miBaselineAlternateEmail }), index.h("mds-text", { key: 'd8cee91020acc06427aff06492ae2ce0a9022c48', typography: this.sizeTypography[(_a = this.size) !== null && _a !== void 0 ? _a : 'md'] }, this.size === 'lg'
             ? this.label
             : index.h("b", null, this.label))));
     }