@proximus/lavender-light 2.0.0-alpha.1 → 2.0.0-alpha.13

package/dist/lavender-light.es.js

@@ -6247,7 +6247,7 @@ class CellRadio extends WithExtraAttributes {
     return `
     <div class="cell-radio">
       <px-cell hoverable>
-        <px-radio-base slot="prefix" aria-hidden="true" tabindex="-1"></px-radio-base>
+        <px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -6256,17 +6256,18 @@ class CellRadio extends WithExtraAttributes {
     `;
   }
   constructor() {
-    var _a, _b;
+    var _a;
     super(commonStyleSheet);
     this.shadowRoot.innerHTML = this.template();
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-    this.tabIndex = ((_b = this.parentElement) == null ? void 0 : _b.firstElementChild) === this ? 0 : -1;
     if (this.internals) {
       this.internals.role = "radio";
       this.internals.ariaChecked = `${this.checked}`;
     }
   }
   connectedCallback() {
+    var _a;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
     if (this.$slotVisual) {
       const slotVisualImg = this.querySelector('px-img[slot="visual"]');
       if (slotVisualImg) {
@@ -6411,7 +6412,7 @@ class CellRadio extends WithExtraAttributes {
       if (this.internals) {
         this.internals.ariaChecked = "false";
       }
-      this.setAttribute("tabIndex", "-1");
+      this.tabIndex = -1;
       this.checked = false;
       if (this.$radio) {
         this.$radio.removeAttribute("checked");
@@ -6420,7 +6421,7 @@ class CellRadio extends WithExtraAttributes {
       if (this.internals) {
         this.internals.ariaChecked = "true";
       }
-      this.setAttribute("tabIndex", "0");
+      this.tabIndex = 0;
       this.checked = true;
       if (this.$radio) {
         this.$radio.setAttribute("checked", "");
@@ -6479,7 +6480,7 @@ class CellRadio extends WithExtraAttributes {
     return this.shadowRoot.querySelector(".cell-radio");
   }
   get $radio() {
-    return this.shadowRoot.querySelector("px-radio-base");
+    return this.shadowRoot.querySelector("px-radio");
   }
   get $slotVisual() {
     return this.querySelector('[slot="visual"]');
@@ -6647,7 +6648,7 @@ class CellRadio extends WithExtraAttributes {
 if (!customElements.get("px-cell-radio")) {
   customElements.define("px-cell-radio", CellRadio);
 }
-const styles$2 = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
+const styles$2 = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:calc(2em - 2px)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
 const stylesheet$3 = new CSSStyleSheet();
 stylesheet$3.replaceSync(styles$2);
 class HeaderItem extends WithExtraAttributes {
@@ -7249,8 +7250,9 @@ class Header extends WithExtraAttributes {
         <slot name="skip"></slot>
         <px-section id="navigation-container" padding-block--mobile="s" padding-block="none"
                     background-color="none">
-          <px-hstack id="dropdown-zone--desktop" justify-content="space-between" align-items="center">
+          <px-hstack id="dropdown-zone--desktop" align-items="center">
             <slot name="target-group"></slot>
+            <px-spacer></px-spacer>
             <slot name="user-language"></slot>
           </px-hstack>
           <px-hstack gap="default" wrap="wrap" align-items="center">