@proximus/lavender 2.0.0-alpha.26 → 2.0.0-alpha.30

package/dist/lavender.es.js

@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _src, _internals, _template, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get;
+var _src, _internals, _template, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn;
 const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
 function getSupportedPropertyNames(htmlElementName) {
   const $element = document.createElement(htmlElementName);
@@ -486,6 +486,20 @@ class PxElement extends WithExtraAttributes {
   get $el() {
     return this.shadowRoot.querySelector(this.nativeName);
   }
+  _updateAttribute(name, value) {
+    if (value) {
+      this.setAttribute(name, value);
+    } else {
+      this.removeAttribute(name);
+    }
+  }
+  _updateBooleanAttribute(name, value) {
+    if (value) {
+      this.setAttribute(name, "");
+    } else {
+      this.removeAttribute(name);
+    }
+  }
 }
 const gridGapValues = ["", "default", "none", "l"];
 const flexboxAlignSelfValues = [
@@ -3749,7 +3763,7 @@ class Section extends HTMLElement {
 if (!customElements.get("px-section")) {
   customElements.define("px-section", Section);
 }
-const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{font-size:var(--px-text-size-label-m-mobile);align-items:center;align-self:flex-start;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-m);height:var(--px-size-icon-m);background-color:var(--px-color-background-container-secondary-default);border-radius:var(--px-radius-pill);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon:after{content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover .arrow-icon{background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single):not(.contained){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-s-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-s-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained{border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-none-default);background-color:var( --accordion-contained-background-color-default, var(--px-color-background-container-default-default) )}details:not(.single).contained summary{padding:var(--px-padding-m-mobile);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default)}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]) details:not(.single).contained{background-color:var( --accordion-contained-background-color-inverted, var(--px-color-background-container-default-inverted) );border-color:var(--px-color-border-none-inverted)}:host([inverted]) details:not(.single).contained summary{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}:host([inverted]) details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media only screen and (min-width: 48em){details summary{font-size:var(--px-text-size-label-m-tablet)}details:not(.single) slot[name=content]{padding:var(--px-padding-s-tablet)}details:not(.single) summary{padding:var(--px-padding-s-tablet);gap:var(--px-spacing-s-tablet)}details:not(.single).contained summary{padding:var(--px-padding-m-tablet);font-size:var(--px-text-size-label-l-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-tablet)}}@media only screen and (min-width: 64.0625em){details summary{font-size:var(--px-text-size-label-m-laptop)}details:not(.single) slot[name=content]{padding:var(--px-padding-s-laptop)}details:not(.single) summary{padding:var(--px-padding-s-laptop);gap:var(--px-spacing-s-laptop)}details:not(.single).contained summary{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-padding-m-laptop)}details.single summary{padding-block:var(--px-padding-2xs-laptop);gap:var(--px-spacing-xs-laptop)}details.single summary:hover{gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-laptop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-laptop)}}`;
+const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{font-size:var(--px-text-size-label-m-mobile);align-items:center;align-self:flex-start;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-m);height:var(--px-size-icon-m);background-color:var(--px-color-background-container-secondary-default);border-radius:var(--px-radius-pill);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon:after{content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover .arrow-icon{background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single):not(.contained){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-s-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-s-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained{border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-none-default);background-color:var( --accordion-contained-background-color-default, var(--px-color-background-container-default-default) )}details:not(.single).contained summary{padding:var(--px-padding-m-mobile);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained[no-content-padding] slot[name=content]{padding:0}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]) details:not(.single).contained{background-color:var( --accordion-contained-background-color-inverted, var(--px-color-background-container-default-inverted) );border-color:var(--px-color-border-none-inverted)}:host([inverted]) details:not(.single).contained summary{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}:host([inverted]) details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media only screen and (min-width: 48em){details summary{font-size:var(--px-text-size-label-m-tablet)}details:not(.single) slot[name=content]{padding:var(--px-padding-s-tablet)}details:not(.single) summary{padding:var(--px-padding-s-tablet);gap:var(--px-spacing-s-tablet)}details:not(.single).contained summary{padding:var(--px-padding-m-tablet);font-size:var(--px-text-size-label-l-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-tablet)}}@media only screen and (min-width: 64.0625em){details summary{font-size:var(--px-text-size-label-m-laptop)}details:not(.single) slot[name=content]{padding:var(--px-padding-s-laptop)}details:not(.single) summary{padding:var(--px-padding-s-laptop);gap:var(--px-spacing-s-laptop)}details:not(.single).contained summary{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-padding-m-laptop)}details.single summary{padding-block:var(--px-padding-2xs-laptop);gap:var(--px-spacing-xs-laptop)}details.single summary:hover{gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-laptop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-laptop)}}`;
 const accordionStyles = new CSSStyleSheet();
 accordionStyles.replaceSync(accordionCss);
 const accordionVariantValues = [
@@ -3777,7 +3791,8 @@ const _Accordion = class _Accordion extends PxElement {
       ...super.observedAttributes,
       "variant",
       "background-color",
-      "inverted"
+      "inverted",
+      "no-content-padding"
     ];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -3851,6 +3866,16 @@ const _Accordion = class _Accordion extends PxElement {
       this.removeAttribute("inverted");
     }
   }
+  get noContentPadding() {
+    return this.hasAttribute("no-content-padding");
+  }
+  set noContentPadding(value) {
+    if (value) {
+      this.setAttribute("no-content-padding", "");
+    } else {
+      this.removeAttribute("no-content-padding");
+    }
+  }
 };
 _Accordion.nativeName = "details";
 let Accordion = _Accordion;
@@ -13531,7 +13556,7 @@ let Status = _Status;
 if (!customElements.get("px-status")) {
   customElements.define("px-status", Status);
 }
-const styles$6 = ':host{display:block}:host *{box-sizing:border-box}.card{display:block;height:100%;position:relative;text-decoration:none;color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__container{height:100%}.card .card__content{position:relative;background-color:var(--card-background-color-default);flex-grow:1;z-index:2}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover .card__content{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}.media-position-top .card__container{display:flex;flex-direction:column}.media-position-left .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{background-size:cover;background-position:center center;width:var(--card-media-left-size);flex:0 0 auto}@media only screen and (max-width: 47.938em){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}.media-position-top--mobile .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--mobile) .card__container,.media-position-left--mobile .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--mobile,.media-position-left--mobile .card__container .card__media-left--mobile{background-size:cover;background-position:center center;width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,.media-position-background--mobile .card__content{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,.media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}.media-position-top--tablet .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--tablet) .card__container,.media-position-left--tablet .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--tablet,.media-position-left--tablet .card__container .card__media-left--tablet{background-size:cover;background-position:center center;width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,.media-position-background--tablet .card__content{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,.media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em){.card{outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-tablet)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}.card{outline-width:var(--px-focus-outline-laptop)}.card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-laptop)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}.media-position-top--laptop .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--laptop) .card__container,.media-position-left--laptop .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--laptop,.media-position-left--laptop .card__container .card__media-left--laptop{background-size:cover;background-position:center center;width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,.media-position-background--laptop .card__content{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,.media-position-background--laptop:hover .card__content{background-color:transparent}}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card .card__content{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover .card__content{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 47.938em){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,:host([inverted]) .media-position-background--mobile .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,:host([inverted]) .media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,:host([inverted]) .media-position-background--tablet .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,:host([inverted]) .media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 64.0625em){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,:host([inverted]) .media-position-background--laptop .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,:host([inverted]) .media-position-background--laptop:hover .card__content{background-color:transparent}}';
+const styles$6 = ':host{--card-background-color-default: var(--px-color-background-container-light-default);--card-media-left-size-s: 120px;--card-media-left-size-m: 250px;--card-media-left-size: var(--card-media-left-size-s);display:block}:host *{box-sizing:border-box}:host picture{display:none}:host([media-position="background"]) picture{display:none!important}:host(:not([media-position="background"])) picture:has(img[src]){display:block}.card{display:block;height:100%;position:relative;text-decoration:none;color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__content{position:relative;flex-grow:1;z-index:2}.card px-container{background-color:var(--card-background-color-default)}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover px-container{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host([media-left-size="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-left-size="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}@media only screen and (max-width: 48em){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}:host([media-left-size--mobile="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--mobile="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--mobile="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(1)[srcset]){display:block}:host([media-position="top"]) img,:host([media-position--mobile="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}:host([media-position="left"]:not([media-position--mobile="top"])) img,:host([media-position--mobile="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,.media-position-background--mobile px-container{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,.media-position-background--mobile:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}:host([media-left-size--tablet="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--tablet="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--tablet="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(2)[srcset]){display:block}:host([media-position="left"]:not([media-position--tablet="top"])) img,:host([media-position--tablet="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--tablet="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,.media-position-background--tablet px-container{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,.media-position-background--tablet:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em){.card{outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-tablet)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}:host([media-left-size--laptop="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--laptop="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--laptop="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(3)[srcset]){display:block}:host([media-position="left"]:not([media-position--laptop="top"])) img,:host([media-position--laptop="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--laptop="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.card{outline-width:var(--px-focus-outline-laptop)}.card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-laptop)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}img[src=null]{display:none}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,.media-position-background--laptop px-container{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,.media-position-background--laptop:hover px-container{background-color:transparent}}:host([inverted]){--card-background-color-inverted: var(--px-color-background-container-light-inverted)}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card px-container{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover px-container{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 47.938em){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,:host([inverted]) .media-position-background--mobile px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,:host([inverted]) .media-position-background--mobile:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,:host([inverted]) .media-position-background--tablet px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,:host([inverted]) .media-position-background--tablet:hover px-container{background-color:transparent}}@media only screen and (min-width: 64.0625em){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,:host([inverted]) .media-position-background--laptop px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,:host([inverted]) .media-position-background--laptop:hover px-container{background-color:transparent}}';
 const styleSheet$6 = new CSSStyleSheet();
 styleSheet$6.replaceSync(styles$6);
 const cardBackgroundColorValues = [
@@ -13541,34 +13566,10 @@ const cardBackgroundColorValues = [
 ];
 const cardPaddingValues = ["", "s", "m", "l"];
 const cardMediaLeftSizeValues = ["", "s", "m"];
-const cardMediaPositionValues = [
-  "",
-  "none",
-  "top",
-  "left",
-  "background"
-];
+const cardMediaPositionValues = ["", "top", "left", "background"];
 const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .card__content`;
 const paddingPrefix = "px-padding";
 const _Card = class _Card extends PxElement {
-  template() {
-    return `
-      <div class="contrast-helper"></div>
-      <px-container padding="none" background-color="none"  border-radius="none">
-        <div class="card__container">
-          <div class="card__content">
-            <px-vstack gap="default">
-              <px-vstack gap="s">
-                <slot name="title"></slot>
-                <slot name="content"></slot>
-              </px-vstack>
-              <slot></slot>
-            </px-vstack>
-          </div>
-        </card>
-      </px-container>
-    `;
-  }
   constructor() {
     super(
       styleSheet$6,
@@ -13580,10 +13581,34 @@ const _Card = class _Card extends PxElement {
         "--card__content-padding"
       )
     );
-    const $root = document.createElement(this.nativeName);
-    $root.classList.add("card");
-    $root.innerHTML = this.template();
-    this.shadowRoot.appendChild($root);
+    __privateAdd(this, _Card_instances);
+    this.shadowRoot.innerHTML = this.template();
+  }
+  template() {
+    return `
+      <a class="card">
+        <div class="contrast-helper"></div>
+        <px-container padding="none" background-color="none"  border-radius="none">
+          <px-stack direction="column" id="stack-container" gap="none">
+            <picture>
+              <source media="(max-width: 48em)" >
+              <source media="(max-width: 64em)" >
+              <source media="(min-width: 64em)" >
+              <img loading="lazy">
+            </picture>
+            <div class="card__content">
+              <px-vstack gap="default">
+                <px-vstack gap="s">
+                  <slot name="title"></slot>
+                  <slot name="content"></slot>
+                </px-vstack>
+                <slot></slot>
+              </px-vstack>
+            </div>
+          </px-stack>
+        </px-container>
+      </a>
+    `;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -13598,10 +13623,6 @@ const _Card = class _Card extends PxElement {
       "background-position",
       "contrast-helper-gradient",
       "contrast-helper-overlay",
-      "media-left-size",
-      "media-left-size--mobile",
-      "media-left-size--tablet",
-      "media-left-size--laptop",
       "media-position",
       "media-position--mobile",
       "media-position--tablet",
@@ -13629,56 +13650,38 @@ const _Card = class _Card extends PxElement {
           }
           break;
         case "background-color":
-          this.updateBackgroundColor(
-            attrName,
-            oldValue,
-            newValue,
-            cardBackgroundColorValues
-          );
+          __privateMethod(this, _Card_instances, updateBackgroundColor_fn).call(this, attrName, oldValue, newValue, cardBackgroundColorValues);
           break;
         case "background-size":
-          this.$container.backgroundSize = newValue;
+          this.$container.setAttribute("background-size", newValue);
           break;
         case "background-position":
-          this.$container.backgroundPosition = newValue;
+          this.$container.setAttribute("background-position", newValue);
           break;
         case "media-position":
+          __privateMethod(this, _Card_instances, updateMediaPosition_fn).call(this, newValue);
+          break;
         case "media-position--mobile":
+          __privateMethod(this, _Card_instances, updateMediaPosition_fn).call(this, newValue, "mobile");
+          break;
         case "media-position--tablet":
-        case "media-position--laptop":
-          this.updateMediaPosition(attrName, newValue, cardMediaPositionValues);
+          __privateMethod(this, _Card_instances, updateMediaPosition_fn).call(this, newValue, "tablet");
           break;
-        case "media-left-size":
-        case "media-left-size--mobile":
-        case "media-left-size--tablet":
-        case "media-left-size--laptop":
-          this.updateMediaLeftSize(
-            attrName,
-            oldValue,
-            newValue,
-            cardMediaLeftSizeValues
-          );
+        case "media-position--laptop":
+          __privateMethod(this, _Card_instances, updateMediaPosition_fn).call(this, newValue, "laptop");
           break;
         case "media-src":
+          __privateMethod(this, _Card_instances, updateMedia_fn).call(this, newValue);
+          break;
         case "media-src--mobile":
+          __privateMethod(this, _Card_instances, updateMedia_fn).call(this, newValue, "mobile");
+          break;
         case "media-src--tablet":
-        case "media-src--laptop": {
-          let breakpoint = "";
-          if (attrName.includes("--")) {
-            breakpoint = attrName.split("--")[1];
-          }
-          let positionAttr = "media-position";
-          if (breakpoint) {
-            positionAttr += `--${breakpoint}`;
-          }
-          const positionValue = this.getAttribute(positionAttr) || this.mediaPosition;
-          this.updateMediaPosition(
-            positionAttr,
-            positionValue,
-            cardMediaPositionValues
-          );
+          __privateMethod(this, _Card_instances, updateMedia_fn).call(this, newValue, "tablet");
+          break;
+        case "media-src--laptop":
+          __privateMethod(this, _Card_instances, updateMedia_fn).call(this, newValue, "laptop");
           break;
-        }
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
@@ -13686,15 +13689,9 @@ const _Card = class _Card extends PxElement {
     }
   }
   configureCard() {
-    if (!this.backgroundColor) {
-      this.backgroundColor = "container-light";
-    }
     if (!this.padding) {
       this.padding = "m";
     }
-    if (!this.mediaLeftSize) {
-      this.mediaLeftSize = "s";
-    }
     if (!this.mediaPosition) {
       this.mediaPosition = "top";
     }
@@ -13707,417 +13704,234 @@ const _Card = class _Card extends PxElement {
       }
     }
   }
-  updateMediaPosition(attrName, newValue, attrValue) {
-    if (!checkName(attrValue, newValue)) {
-      console.error(
-        `${newValue} is not an allowed ${attrName} value`,
-        this.$el
-      );
-      return;
-    }
-    const hasBreakpoint = attrName.includes("--");
-    const cssPropertyName = hasBreakpoint ? attrName.split("--")[0] : attrName;
-    if (!hasBreakpoint) {
-      if (!this.$el.classList.contains(`media-position-${newValue}`)) {
-        this.$el.classList.add(`media-position-${newValue}`);
-      }
-      if (newValue === "top") {
-        this.updateMediaPositionTop(cssPropertyName);
-      } else if (newValue === "left") {
-        this.updateMediaPositionLeft(cssPropertyName);
-      } else if (newValue === "background") {
-        this.updateMediaPositionBackground(cssPropertyName);
-      }
-    } else {
-      const breakpointName = attrName.split("--")[1];
-      if (!this.$el.classList.contains(
-        `media-position-${newValue}--${breakpointName}`
-      )) {
-        this.$el.classList.add(`media-position-${newValue}--${breakpointName}`);
-      }
-      if (newValue === "top") {
-        this.createImgTop(
-          breakpointName,
-          this.getAttribute(`media-src--${breakpointName}`)
-        );
-      }
-      if (newValue === "left") {
-        this.createDivLeft(
-          breakpointName,
-          this.getAttribute(`media-src--${breakpointName}`)
-        );
-      }
-      if (newValue === "background") {
-        this.$container.setAttribute(
-          `background-image--${breakpointName}`,
-          this.getAttribute(`media-src--${breakpointName}`) || ""
-        );
-      }
-    }
-  }
-  updateMediaPositionTop(cssPropertyName) {
-    if (this.mediaSrc) {
-      const img = document.createElement("img");
-      img.className = "card__media-top";
-      img.src = this.mediaSrc || "";
-      img.alt = "";
-      ["mobile", "tablet", "laptop"].forEach((device) => {
-        if (this.getAttribute(`${cssPropertyName}--${device}`) || !this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
-          img.classList.add(`hidden--${device}`);
-        }
-      });
-      if (this.$cardContainer.querySelector(".card__media-top")) {
-        this.$cardContainer.querySelector(".card__media-top").replaceWith(img);
-      } else {
-        this.$cardContainer.insertBefore(img, this.$cardContainer.firstChild);
-      }
-    }
-    ["laptop", "tablet", "mobile"].forEach((device) => {
-      if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
-        this.createImgTop(device, this.getAttribute(`media-src--${device}`));
-      }
-    });
-  }
-  updateMediaPositionLeft(cssPropertyName) {
-    if (this.mediaSrc) {
-      const div = document.createElement("div");
-      div.className = "card__media-left";
-      div.style.backgroundImage = `url(${this.mediaSrc || ""})`;
-      ["mobile", "tablet", "laptop"].forEach((device) => {
-        if (this.getAttribute(`${cssPropertyName}--${device}`) || !this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
-          div.classList.add(`hidden--${device}`);
-        }
-      });
-      if (this.$cardContainer.querySelector(".card__media-left")) {
-        this.$cardContainer.querySelector(".card__media-left").replaceWith(div);
-      } else {
-        this.$cardContainer.insertBefore(div, this.$cardContainer.firstChild);
-      }
-    }
-    ["laptop", "tablet", "mobile"].forEach((device) => {
-      if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
-        this.createDivLeft(device, this.getAttribute(`media-src--${device}`));
-      }
-    });
-  }
-  updateMediaPositionBackground(cssPropertyName) {
-    if (this.mediaSrc) {
-      this.$container.setAttribute(
-        "background-image--mobile",
-        this.mediaSrc || ""
-      );
-      this.$container.setAttribute(
-        "background-image--tablet",
-        this.mediaSrc || ""
-      );
-      this.$container.setAttribute(
-        "background-image--laptop",
-        this.mediaSrc || ""
-      );
-      ["mobile", "tablet", "laptop"].forEach((device) => {
-        const mediaSrcDevice = this.getAttribute(`media-src--${device}`);
-        const hasBreakpoint = this.getAttribute(
-          `${cssPropertyName}--${device}`
-        );
-        if (mediaSrcDevice && !hasBreakpoint) {
-          this.$container.setAttribute(
-            `background-image--${device}`,
-            mediaSrcDevice
-          );
-        } else if (hasBreakpoint) {
-          this.$container.removeAttribute(`background-image--${device}`);
-        }
-      });
-    } else {
-      ["mobile", "tablet", "laptop"].forEach((device) => {
-        if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
-          this.$container.setAttribute(
-            `background-image--${device}`,
-            this.getAttribute(`media-src--${device}`)
-          );
-        }
-      });
-    }
+  get $children() {
+    return this.querySelectorAll("px-card > *");
   }
-  createImgTop(device, src) {
-    const img = document.createElement("img");
-    img.className = `card__media-top--${device}`;
-    img.src = src || "";
-    img.classList.add(`shown--${device}`);
-    img.alt = "";
-    if (this.$cardContainer.querySelector(`.card__media-top--${device}`)) {
-      this.$cardContainer.querySelector(`.card__media-top--${device}`).replaceWith(img);
-    } else {
-      this.$cardContainer.insertBefore(img, this.$cardContainer.firstChild);
-    }
+  get $img() {
+    return this.shadowRoot.querySelector("picture > img");
   }
-  createDivLeft(device, src) {
-    const div = document.createElement("div");
-    div.className = `card__media-left--${device}`;
-    div.style.backgroundImage = `url(${src || ""})`;
-    div.classList.add(`shown--${device}`);
-    if (this.$cardContainer.querySelector(`.card__media-left--${device}`)) {
-      this.$cardContainer.querySelector(`.card__media-left--${device}`).replaceWith(div);
-    } else {
-      this.$cardContainer.insertBefore(div, this.$cardContainer.firstChild);
-    }
+  get $pictureSourceMobile() {
+    return this.shadowRoot.querySelector(
+      "picture > source:nth-child(1)"
+    );
   }
-  updateBackgroundColor(attrName, oldValue, newValue, attrValue) {
-    if (!checkName(attrValue, newValue)) {
-      console.error(
-        `${newValue} is not an allowed ${attrName} value`,
-        this.$el
-      );
-      return;
-    }
-    const updateBackgroundColorStyle = (value) => {
-      if (value !== null && value !== "" && value !== "default") {
-        this.$el.style.setProperty(
-          `--card-background-color-default`,
-          `var(--px-color-background-${value}-default)`
-        );
-        this.$el.style.setProperty(
-          `--card-background-color-inverted`,
-          `var(--px-color-background-${value}-inverted)`
-        );
-      }
-    };
-    updateBackgroundColorStyle(oldValue);
-    updateBackgroundColorStyle(newValue);
+  get $pictureSourceTablet() {
+    return this.shadowRoot.querySelector(
+      "picture > source:nth-child(2)"
+    );
   }
-  updateMediaLeftSize(attrName, oldValue, newValue, attrValue) {
-    if (!checkName(attrValue, newValue)) {
-      console.error(
-        `${newValue} is not an allowed ${attrName} value`,
-        this.$el
-      );
-      return;
-    }
-    const updateMediaLeftSizeStyle = (breakpoint, value) => {
-      if (value !== null && value !== "") {
-        let sizeValue = "";
-        if (value === "s") {
-          sizeValue = "120px";
-        }
-        if (value === "m") {
-          sizeValue = "240px";
-        }
-        this.$el.style.setProperty(
-          `--card-media-left-size${breakpoint ? `--${breakpoint}` : ""}`,
-          sizeValue
-        );
-      }
-    };
-    const hasBreakpoint = attrName.includes("--");
-    if (hasBreakpoint) {
-      const breakpoint = attrName.split("--")[1];
-      updateMediaLeftSizeStyle(breakpoint, oldValue);
-      updateMediaLeftSizeStyle(breakpoint, newValue);
-    } else {
-      updateMediaLeftSizeStyle("", oldValue);
-      updateMediaLeftSizeStyle("", newValue);
-    }
+  get $pictureSourceLaptop() {
+    return this.shadowRoot.querySelector(
+      "picture > source:nth-child(3)"
+    );
   }
-  get $children() {
-    return this.querySelectorAll("px-card > *");
+  get $stackContainer() {
+    return this.shadowRoot.querySelector("#stack-container");
   }
   get $container() {
     return this.shadowRoot.querySelector("px-container");
   }
-  get $cardContainer() {
-    return this.shadowRoot.querySelector(".card__container");
-  }
   get inverted() {
     return this.hasAttribute("inverted");
   }
   set inverted(value) {
-    if (value) {
-      this.setAttribute("inverted", "");
-    } else {
-      this.removeAttribute("inverted");
-    }
+    super._updateBooleanAttribute("inverted", value);
   }
   get backgroundColor() {
     return this.getAttribute("background-color");
   }
   set backgroundColor(value) {
-    if (value) {
-      this.setAttribute("background-color", value);
-    } else {
-      this.removeAttribute("background-color");
-    }
+    super._updateAttribute("background-color", value);
   }
   get backgroundSize() {
     return this.getAttribute("background-size");
   }
   set backgroundSize(value) {
-    if (value) {
-      this.setAttribute("background-size", value);
-    } else {
-      this.removeAttribute("background-size");
-    }
+    super._updateAttribute("background-size", value);
   }
   get backgroundPosition() {
     return this.getAttribute("background-position");
   }
   set backgroundPosition(value) {
-    if (value) {
-      this.setAttribute("background-position", value);
-    } else {
-      this.removeAttribute("background-position");
-    }
+    super._updateAttribute("background-position", value);
   }
   get padding() {
     return this.getAttribute("padding");
   }
   set padding(value) {
-    if (value) {
-      this.setAttribute("padding", value);
-    } else {
-      this.removeAttribute("padding");
-    }
+    super._updateAttribute("padding", value);
   }
   get gradientContrastHelper() {
     return this.hasAttribute("contrast-helper-gradient");
   }
   set gradientContrastHelper(value) {
-    if (value) {
-      this.setAttribute("contrast-helper-gradient", "");
-    } else {
-      this.removeAttribute("contrast-helper-gradient");
-    }
+    super._updateBooleanAttribute("contrast-helper-gradient", value);
   }
   get overlayContrastHelper() {
     return this.hasAttribute("contrast-helper-overlay");
   }
   set overlayContrastHelper(value) {
-    if (value) {
-      this.setAttribute("contrast-helper-overlay", "");
-    } else {
-      this.removeAttribute("contrast-helper-overlay");
-    }
+    super._updateBooleanAttribute("contrast-helper-overlay", value);
   }
   get mediaLeftSize() {
     return this.getAttribute("media-left-size");
   }
   set mediaLeftSize(value) {
-    if (value) {
-      this.setAttribute("media-left-size", value);
-    } else {
-      this.removeAttribute("media-left-size");
-    }
+    super._updateAttribute("media-left-size", value);
   }
   get mediaLeftSizeMobile() {
     return this.getAttribute("media-left-size--mobile");
   }
   set mediaLeftSizeMobile(value) {
-    if (value) {
-      this.setAttribute("media-left-size--mobile", value);
-    } else {
-      this.removeAttribute("media-left-size--mobile");
-    }
+    super._updateAttribute("media-left-size--mobile", value);
   }
   get mediaLeftSizeTablet() {
     return this.getAttribute("media-left-size--tablet");
   }
   set mediaLeftSizeTablet(value) {
-    if (value) {
-      this.setAttribute("media-left-size--tablet", value);
-    } else {
-      this.removeAttribute("media-left-size--tablet");
-    }
+    super._updateAttribute("media-left-size--tablet", value);
   }
   get mediaLeftSizeLaptop() {
     return this.getAttribute("media-left-size--laptop");
   }
   set mediaLeftSizeLaptop(value) {
-    if (value) {
-      this.setAttribute("media-left-size--laptop", value);
-    } else {
-      this.removeAttribute("media-left-size--laptop");
-    }
+    super._updateAttribute("media-left-size--laptop", value);
   }
   get mediaPosition() {
     return this.getAttribute("media-position");
   }
   set mediaPosition(value) {
-    if (value) {
-      this.setAttribute("media-position", value);
-    } else {
-      this.removeAttribute("media-position");
-    }
+    super._updateAttribute("media-position", value);
   }
   get mediaPositionMobile() {
     return this.getAttribute("media-position--mobile");
   }
   set mediaPositionMobile(value) {
-    if (value) {
-      this.setAttribute("media-position--mobile", value);
-    } else {
-      this.removeAttribute("media-position--mobile");
-    }
+    super._updateAttribute("media-position--mobile", value);
   }
   get mediaPositionTablet() {
     return this.getAttribute("media-position--tablet");
   }
   set mediaPositionTablet(value) {
-    if (value) {
-      this.setAttribute("media-position--tablet", value);
-    } else {
-      this.removeAttribute("media-position--tablet");
-    }
+    super._updateAttribute("media-position--tablet", value);
   }
   get mediaPositionLaptop() {
     return this.getAttribute("media-position--laptop");
   }
   set mediaPositionLaptop(value) {
-    if (value) {
-      this.setAttribute("media-position--laptop", value);
-    } else {
-      this.removeAttribute("media-position--laptop");
-    }
+    super._updateAttribute("media-position--laptop", value);
   }
   get mediaSrc() {
     return this.getAttribute("media-src");
   }
   set mediaSrc(value) {
-    if (value) {
-      this.setAttribute("media-src", value);
-    } else {
-      this.removeAttribute("media-src");
-    }
+    super._updateAttribute("media-src", value);
   }
   get mediaSrcMobile() {
     return this.getAttribute("media-src--mobile");
   }
   set mediaSrcMobile(value) {
-    if (value) {
-      this.setAttribute("media-src--mobile", value);
-    } else {
-      this.removeAttribute("media-src--mobile");
-    }
+    super._updateAttribute("media-src--mobile", value);
   }
   get mediaSrcTablet() {
     return this.getAttribute("media-src--tablet");
   }
   set mediaSrcTablet(value) {
-    if (value) {
-      this.setAttribute("media-src--tablet", value);
-    } else {
-      this.removeAttribute("media-src--tablet");
-    }
+    super._updateAttribute("media-src--tablet", value);
   }
   get mediaSrcLaptop() {
     return this.getAttribute("media-src--laptop");
   }
   set mediaSrcLaptop(value) {
-    if (value) {
-      this.setAttribute("media-src--laptop", value);
+    super._updateAttribute("media-src--laptop", value);
+  }
+};
+_Card_instances = new WeakSet();
+updateMediaPosition_fn = function(newValue, screenSize) {
+  const attributeName = screenSize ? `direction--${screenSize}` : "direction";
+  if (newValue === "left") {
+    this.$stackContainer.setAttribute(attributeName, "row");
+    if (screenSize === "laptop") {
+      this.$stackContainer.setAttribute("direction--desktop", "row");
+    } else {
+      this.$stackContainer.removeAttribute("direction--desktop");
+    }
+  } else if (newValue === "top" || newValue === "null") {
+    this.$stackContainer.setAttribute(attributeName, "column");
+    if (screenSize === "laptop") {
+      this.$stackContainer.setAttribute("direction--desktop", "column");
     } else {
-      this.removeAttribute("media-src--laptop");
+      this.$stackContainer.removeAttribute("direction--desktop");
     }
   }
 };
+updateMedia_fn = function(newValue, screenSize) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  switch (screenSize) {
+    case "mobile":
+      if (this.mediaPosition === "background" || this.mediaPositionMobile === "background") {
+        this.$container.setAttribute("background-image--mobile", newValue);
+      }
+      if (newValue) {
+        (_a = this.$pictureSourceMobile) == null ? void 0 : _a.setAttribute("srcset", newValue);
+      } else {
+        (_b = this.$pictureSourceMobile) == null ? void 0 : _b.removeAttribute("srcset");
+      }
+      break;
+    case "tablet":
+      if (this.mediaPosition === "background" || this.mediaPositionTablet === "background") {
+        this.$container.setAttribute("background-image--tablet", newValue);
+      }
+      if (newValue) {
+        (_c = this.$pictureSourceTablet) == null ? void 0 : _c.setAttribute("srcset", newValue);
+      } else {
+        (_d = this.$pictureSourceTablet) == null ? void 0 : _d.removeAttribute("srcset");
+      }
+      break;
+    case "laptop":
+      if (this.mediaPosition === "background" || this.mediaPositionLaptop === "background") {
+        this.$container.setAttribute("background-image--laptop", newValue);
+      }
+      if (newValue) {
+        (_e = this.$pictureSourceLaptop) == null ? void 0 : _e.setAttribute("srcset", newValue);
+      } else {
+        (_f = this.$pictureSourceLaptop) == null ? void 0 : _f.removeAttribute("srcset");
+      }
+      break;
+    default:
+      if (this.mediaPosition === "background") {
+        this.$container.setAttribute("background-image", newValue);
+      }
+      if (newValue) {
+        (_g = this.$img) == null ? void 0 : _g.setAttribute("src", newValue);
+      } else {
+        (_h = this.$img) == null ? void 0 : _h.removeAttribute("src");
+      }
+  }
+};
+updateBackgroundColor_fn = function(attrName, oldValue, newValue, attrValue) {
+  if (!checkName(attrValue, newValue)) {
+    console.error(
+      `${newValue} is not an allowed ${attrName} value`,
+      this.$el
+    );
+    return;
+  }
+  const updateBackgroundColorStyle = (value) => {
+    if (value !== null && value !== "" && value !== "default") {
+      this.$el.style.setProperty(
+        `--card-background-color-default`,
+        `var(--px-color-background-${value}-default)`
+      );
+      this.$el.style.setProperty(
+        `--card-background-color-inverted`,
+        `var(--px-color-background-${value}-inverted)`
+      );
+    }
+  };
+  updateBackgroundColorStyle(oldValue);
+  updateBackgroundColorStyle(newValue);
+};
 _Card.nativeName = "a";
 let Card = _Card;
 if (!customElements.get("px-card")) {