@proximus/lavender 2.0.0-alpha.2 → 2.0.0-alpha.6

package/dist/lavender.es.js

@@ -434,6 +434,12 @@ class WithExtraAttributes extends HTMLElement {
   }
 }
 class PxElement extends WithExtraAttributes {
+  constructor(...adoptedStylesheets) {
+    super(...adoptedStylesheets);
+    this.accessorExclusions = [];
+    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
+    this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
+  }
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
@@ -448,14 +454,10 @@ class PxElement extends WithExtraAttributes {
       this.$el.setAttribute(name, newValue);
     }
   }
-  constructor(...adoptedStylesheets) {
-    super(...adoptedStylesheets);
-    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
-  }
   connectedCallback() {
     var _a;
     for (const name of getSupportedPropertyNames(this.nativeName)) {
-      if (name === "constructor") {
+      if (name === "constructor" || this.accessorExclusions.includes(name)) {
         continue;
       }
       try {
@@ -2353,6 +2355,7 @@ if (!customElements.get("px-icon-set")) {
 }
 const iconColorValues = [
   "Brand",
+  "Accent",
   "Neutral",
   "Dimmed",
   "PurposeSuccess",
@@ -2367,7 +2370,7 @@ const iconColorValues = [
 const iconColorValuesKC = ["Inherit", ...iconColorValues].map(
   (value) => value.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
 );
-const styles$E = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}";
+const styles$E = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}";
 const styleSheet$x = new CSSStyleSheet();
 styleSheet$x.replaceSync(styles$E);
 const observedAttributes = [
@@ -2583,10 +2586,10 @@ const _Container = class _Container extends PxElement {
       )
     );
     this.template = () => `<div class="container">
-    <slot name="anchor-left"></slot>
-    <slot name="anchor-right"></slot>
-    <slot name="anchor-full"></slot>
-    <slot></slot>
+      <slot></slot>
+      <slot name="anchor-left"></slot>
+      <slot name="anchor-right"></slot>
+      <slot name="anchor-full"></slot>
     </div>`;
     this._bgObserver = null;
     this._isInViewport = false;
@@ -3849,7 +3852,7 @@ const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
 const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
 const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
 const heightPrefix = "px-image";
-class AbstractImage extends PxElement {
+const _AbstractImage = class _AbstractImage extends PxElement {
   constructor() {
     super(
       styleSheet$v,
@@ -4122,7 +4125,9 @@ class AbstractImage extends PxElement {
       this.removeAttribute("cover");
     }
   }
-}
+};
+_AbstractImage.accessorExclusions = ["height", "width"];
+let AbstractImage = _AbstractImage;
 const _Image = class _Image extends AbstractImage {
   constructor() {
     super();
@@ -8190,11 +8195,12 @@ const _RadioBase = class _RadioBase extends PxElement {
   }
 };
 _RadioBase.nativeName = "input";
+_RadioBase.accessorExclusions = ["checked"];
 let RadioBase = _RadioBase;
 if (!customElements.get("px-radio-base")) {
   customElements.define("px-radio-base", RadioBase);
 }
-const _Radio = class _Radio extends RadioBase {
+class Radio extends RadioBase {
   constructor() {
     var _a, _b;
     super();
@@ -8209,6 +8215,7 @@ const _Radio = class _Radio extends RadioBase {
     return [...super.observedAttributes, "state", "variant", "inverted"];
   }
   connectedCallback() {
+    super.connectedCallback();
     this.addEventListener("keypress", (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -8226,9 +8233,6 @@ const _Radio = class _Radio extends RadioBase {
       e.preventDefault();
     });
     this.setupForId();
-    if (this.hasAttribute("checked")) {
-      this.checked = true;
-    }
     if (this.$iconSlot) {
       this.$iconSlot.setAttribute("size", "xs");
       this.$iconSlot.setAttribute("color", "inherit");
@@ -8303,10 +8307,8 @@ const _Radio = class _Radio extends RadioBase {
       if (this.internals) {
         this.internals.ariaChecked = "true";
       }
-      this.setAttribute("checked", "");
     } else {
       this.tabIndex = -1;
-      this.removeAttribute("checked");
       if (this.internals) {
         this.internals.ariaChecked = "false";
       }
@@ -8386,9 +8388,7 @@ const _Radio = class _Radio extends RadioBase {
   get $iconSlot() {
     return this.querySelector('px-icon[slot="before"]');
   }
-};
-_Radio.nativeName = "input";
-let Radio = _Radio;
+}
 if (!customElements.get("px-radio")) {
   customElements.define("px-radio", Radio);
 }
@@ -8428,7 +8428,7 @@ class Radiogroup extends WithExtraAttributes {
     };
     this.handleRadioChange = (event) => {
       const target = event.target;
-      if (target.localName === "px-tile-radio" || target.localName === "px-radio" || target.localName === "px-cell-radio") {
+      if (target.localName === "px-tile-radio" || target.localName === "px-radio" || target.localName === "px-cell-radio" || target.localName === "px-selectable-box-radio") {
         this.currentCheckedRadio = target;
         const name = target.getAttribute("name");
         if (name && this.currentCheckedRadio.checked) {
@@ -8531,10 +8531,10 @@ class Radiogroup extends WithExtraAttributes {
   }
   uncheckOtherRadios(name) {
     const radios = this.querySelectorAll(
-      `px-radio[name="${name}"], px-tile-radio[name="${name}"], px-cell-radio[name="${name}"]`
+      `px-radio[name="${name}"], px-tile-radio[name="${name}"], px-cell-radio[name="${name}"], px-selectable-box-radio[name="${name}"]`
     );
     radios.forEach((radio) => {
-      if (radio !== this.currentCheckedRadio) {
+      if (radio !== this.currentCheckedRadio && radio.shadowRoot) {
         radio.checked = false;
       }
     });
@@ -8617,7 +8617,7 @@ class Radiogroup extends WithExtraAttributes {
   }
   get $radioList() {
     return this.querySelectorAll(
-      "px-radio, px-tile-radio, px-cell-radio"
+      "px-radio, px-tile-radio, px-cell-radio, px-selectable-box-radio"
     );
   }
   get gap() {
@@ -10499,7 +10499,7 @@ class StickyContainer extends HTMLElement {
 if (!customElements.get("px-sticky-container")) {
   customElements.define("px-sticky-container", StickyContainer);
 }
-const styles$m = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);box-sizing:border-box}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:80vh;overflow:auto}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}}@media only screen and (max-width: 67.563em){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{max-height:2.813em}}@keyframes dialog-fade-in-right{0%{margin-right:-67.5em}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-67.5em}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-12.5em}to{margin-bottom:0}}';
+const styles$m = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);box-sizing:border-box}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{overflow:auto}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}#content{max-height:calc(100dvh - 22.625em)}}@media only screen and (max-width: 67.563em){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{min-height:2.813em;max-height:50dvh}}@keyframes dialog-fade-in-right{0%{margin-right:-67.5em}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-67.5em}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-12.5em}to{margin-bottom:0}}';
 const styleSheet$f = new CSSStyleSheet();
 styleSheet$f.replaceSync(styles$m);
 const HIDE_EVENT = "px.lavender.drawer.hide";
@@ -10564,6 +10564,9 @@ class Drawer extends HTMLElement {
     this.$closeButton.addEventListener("click", () => {
       this.hide();
     });
+    if (this.$buttons.length === 0) {
+      this.$separator.remove();
+    }
   }
   static get observedAttributes() {
     return ["open", "aria-label-close-button"];
@@ -10611,6 +10614,12 @@ class Drawer extends HTMLElement {
   get open() {
     return this.hasAttribute("open");
   }
+  get $buttons() {
+    return this.querySelectorAll('[slot="footer"]');
+  }
+  get $separator() {
+    return this.shadowRoot.querySelector("px-separator");
+  }
   set open(value) {
     if (value) {
       this.setAttribute("open", "");
@@ -11505,10 +11514,13 @@ class AbstractInputElement extends PxElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    ["change", "input"].forEach((event) => {
+    ["change"].forEach((event) => {
       this.$el.addEventListener(event, () => {
         var _a;
         (_a = this.internals) == null ? void 0 : _a.setFormValue(this.formData());
+        this.dispatchEvent(
+          new CustomEvent(event, { bubbles: true, composed: true })
+        );
       });
     });
     this.setupForId();
@@ -11705,11 +11717,11 @@ const _Select = class _Select extends AbstractInputElement {
       $options.forEach(($option) => {
         this.$el.appendChild($option);
       });
-      this.observer = new MutationObserver(() => {
-        this.$el.innerHTML = this.innerHTML;
-      });
-      this.observer.observe(this, { childList: true });
     }
+    this.observer = new MutationObserver(() => {
+      this.$el.innerHTML = this.innerHTML;
+    });
+    this.observer.observe(this, { childList: true });
   }
   disconnectedCallback() {
     this.observer.disconnect();
@@ -12456,8 +12468,8 @@ const anchorAlignmentValues = [
   "bottom-left",
   "bottom-right"
 ];
-function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-left", computedStyle) {
-  if ("anchorName" in document.documentElement.style) {
+function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-left", computedStyle, usePolyfill = false) {
+  if ("anchorName" in document.documentElement.style && usePolyfill === false) {
     return;
   }
   $popoverElement.addEventListener("toggle", () => {
@@ -12565,7 +12577,12 @@ class Dropdown extends WithExtraAttributes {
     }`;
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "id", "anchoralignment"];
+    return [
+      ...super.observedAttributes,
+      "id",
+      "anchoralignment",
+      "use-polyfill"
+    ];
   }
   connectedCallback() {
     if (!this.getAttribute("id")) {
@@ -12581,19 +12598,29 @@ class Dropdown extends WithExtraAttributes {
       this.$trigger,
       this.$popoverElement,
       this.anchorAlignment,
-      getComputedStyle(this)
+      getComputedStyle(this),
+      this.usePolyfill
     );
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "id":
-        if (oldValue !== newValue) {
+    if (oldValue !== newValue) {
+      switch (name) {
+        case "id":
           this.initPopover();
-        }
-        break;
-      default:
-        super.attributeChangedCallback(name, oldValue, newValue);
-        break;
+          break;
+        case "use-polyfill":
+          anchorPolyfill(
+            this.$trigger,
+            this.$popoverElement,
+            this.anchorAlignment,
+            getComputedStyle(this),
+            this.usePolyfill
+          );
+          break;
+        default:
+          super.attributeChangedCallback(name, oldValue, newValue);
+          break;
+      }
     }
   }
   initPopover() {
@@ -12636,6 +12663,16 @@ class Dropdown extends WithExtraAttributes {
       this.setAttribute("anchoralignment", defaultAnchorAlignment);
     }
   }
+  get usePolyfill() {
+    return this.hasAttribute("use-polyfill");
+  }
+  set usePolyfill(value) {
+    if (value) {
+      this.setAttribute("use-polyfill", "");
+    } else {
+      this.removeAttribute("use-polyfill");
+    }
+  }
 }
 _Dropdown_instances = new WeakSet();
 resetManualPopoverDisplay_fn = function() {
@@ -12803,9 +12840,8 @@ class MegaDropDown extends HTMLElement {
             <px-button-icon
               size="small"
               variant="secondary"
-              aria-label="${this.closeButtonAriaLabel || "Close"}"
             >
-              <px-icon name="cross" from="lavender"></px-icon>
+              <px-icon name="cross" from="lavender" aria-label="${this.closeButtonAriaLabel || "Close"}" title="${this.closeButtonAriaLabel || "Close"}"></px-icon>
             </px-button-icon>
           </px-hstack>
           <px-p
@@ -12818,9 +12854,8 @@ class MegaDropDown extends HTMLElement {
           <px-button-icon
             size="small"
             variant="secondary"
-            aria-label="${this.closeButtonAriaLabel || "Close"}"
           >
-            <px-icon name="cross" from="lavender"></px-icon>
+            <px-icon name="cross" from="lavender" aria-label="${this.closeButtonAriaLabel || "Close"}" title="${this.closeButtonAriaLabel || "Close"}"></px-icon>
           </px-button-icon>
           <px-stack
             direction--mobile="column"
@@ -13238,19 +13273,12 @@ const _Status = class _Status extends PxElement {
       "icon-aria-label"
     ];
   }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.state) {
-      this.setRole("info");
-    }
-  }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "state":
           this.updateState(newValue);
           this.$el.classList.toggle(`${newValue}`);
-          this.setRole(newValue);
           break;
         case "icon-aria-label":
           this.$statusIcon.setAttribute("aria-label", newValue);
@@ -13303,12 +13331,6 @@ const _Status = class _Status extends PxElement {
     this.$statusIcon.name = name;
     this.$statusIcon.color = color;
   }
-  setRole(statusValue) {
-    this.$el.setAttribute(
-      "role",
-      !statusValue || statusValue === "info" ? "status" : statusValue
-    );
-  }
   updateIconOnly(breakpoint) {
     var _a;
     const iconOnlyBreakpoint = breakpoint ? `--${breakpoint}` : "";