@proximus/lavender-cell 2.0.0-alpha.6 → 2.0.0-alpha.60

package/dist/CellButton.d.ts

@@ -1,8 +1,16 @@
 import { PxElement } from '@proximus/lavender-common';
 import '@proximus/lavender-layout';
 import { Cell } from '@proximus/lavender-cell';
+/**
+ * @summary A cell component that acts as a button.
+ * @attr {string} name - The name of the button, submitted as a pair with the button's value as part of the form data.
+ * @attr {string} value - The value associated with the button's name when it's submitted with a form.
+ * @attr {string} type - The default behavior of the button. Possible values are 'submit', 'reset', and 'button'.
+ * @attr {boolean} disabled - Whether the button is disabled.
+ */
 export declare class CellButton extends PxElement<HTMLButtonElement> {
     static nativeName: string;
+    static accessorExclusions: string[];
     private template;
     constructor();
     connectedCallback(): void;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { checkName as u, PxElement as v, WithExtraAttributes as g } from "@proximus/lavender-common";
+import { checkName as p, log as l, PxElement as m, WithExtraAttributes as A } from "@proximus/lavender-common";
 import "@proximus/lavender-layout";
 import { checkboxStateValues as q } from "@proximus/lavender-checkbox";
 import { stateValues as M } from "@proximus/lavender-radio-group";
@@ -7,20 +7,20 @@ const R = ["", "default", "naked", "contained"], z = [
   "container-light",
   "container-default"
 ];
-function l(r) {
+function c(r) {
   r.hasAttribute("width") || r.setAttribute("width", "s"), r.setAttribute("border-radius", "pill");
 }
-function c(r) {
+function d(r) {
   r.getAttribute("variant") === "contained" && !r.getAttribute("background-color") && r.setAttribute("background-color", "container-light");
 }
 function P(r, t, e) {
-  if (!u(R, e)) {
-    console.error(`${e} is not an allowed variant value.`);
+  if (!p(R, e)) {
+    l(`${e} is not an allowed variant value.`);
     return;
   }
   t !== null && t !== "" && t !== "default" && r.classList.toggle(t), e !== null && e !== "" && e !== "default" && r.classList.toggle(e);
 }
-function d(r, t, e, s = []) {
+function u(r, t, e, s = []) {
   e ? (r.setAttribute("inverted", ""), s.forEach((i) => i.setAttribute("inverted", "")), t.forEach((i) => {
     i.hasAttribute("inverted") || i.setAttribute("inverted", "");
   })) : (r.removeAttribute("inverted"), s.forEach((i) => i.removeAttribute("inverted")), t.forEach((i) => {
@@ -28,8 +28,10 @@ function d(r, t, e, s = []) {
   }));
 }
 function B(r, t, e, s, i) {
-  if (!u(i, s)) {
-    console.error(`${s} is not an allowed ${t} value`);
+  if (!p(i, s)) {
+    l(
+      `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    );
     return;
   }
   const a = (o) => {
@@ -53,7 +55,7 @@ function $(r, t, e, s = [], i = {}) {
 const n = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", H = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right;font-weight:var(--px-font-weight-title)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-container-light-default) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}', S = new CSSStyleSheet(), C = new CSSStyleSheet();
 S.replaceSync(n);
 C.replaceSync(H);
-const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class k extends v {
+const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class x extends m {
   template() {
     return `
       <px-hstack gap="s" justify-content="space-between" align-items="center">
@@ -76,13 +78,13 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
   }
   constructor() {
     super(C, S);
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement("div");
     t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
   connectedCallback() {
-    if (super.connectedCallback(), this.$slotVisual) {
+    if (this.$slotVisual) {
       const t = this.querySelector('px-img[slot="visual"]');
-      t && l(t);
+      t && c(t);
     }
     if (this.$slotSuffix) {
       const t = this.querySelectorAll(
@@ -92,7 +94,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
         this.configureSlotSuffixButtonIcon(i);
       }), s && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
     }
-    c(this);
+    d(this);
   }
   static get observedAttributes() {
     return [
@@ -129,7 +131,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
         case "radius--tablet":
         case "radius--laptop":
         case "radius--desktop":
-          this.updateRadius(t, e, s, F);
+          this.updateRadius(t, e, s, _);
           break;
         case "background-color":
           B(
@@ -146,29 +148,27 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
       }
   }
   configureSlotSuffixButtonIcon(t) {
-    t.hasAttribute("variant") ? u(
-      x,
+    t.hasAttribute("variant") && p(
+      F,
       t.getAttribute("variant")
-    ) || (console.error(
-      `Wrong button-icon variant value for suffix. Allowed values are: ${x.join(
-        ", "
-      )}.`
-    ), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
+    ) || t.setAttribute("variant", "secondary");
   }
   updateRadius(t, e, s, i) {
-    if (!u(i, s)) {
-      console.error(`${s} is not a valid ${t} value`);
+    if (!p(i, s)) {
+      l(
+        `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const a = t.includes("--"), o = [];
     if (!a)
       this.separatorMobile || o.push("mobile"), this.separatorTablet || o.push("tablet"), this.separatorLaptop || o.push("laptop"), this.separatorDesktop || o.push("desktop");
     else {
-      const h = t.split("--")[1];
-      o.push(h);
+      const b = t.split("--")[1];
+      o.push(b);
     }
-    o.forEach((h) => {
-      e !== null && e !== "" && e !== "default" && this.updateStyle(h, e), s !== null && s !== "" && s !== "default" && this.updateStyle(h, s);
+    o.forEach((b) => {
+      e !== null && e !== "" && e !== "default" && this.updateStyle(b, e), s !== null && s !== "" && s !== "default" && this.updateStyle(b, s);
     });
   }
   updateStyle(t, e) {
@@ -283,14 +283,14 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
     t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
   }
 };
-k.nativeName = "div";
-let b = k;
-customElements.get("px-cell") || customElements.define("px-cell", b);
-const _ = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}', y = new CSSStyleSheet();
+x.nativeName = "div";
+let g = x;
+customElements.get("px-cell") || customElements.define("px-cell", g);
+const O = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}', y = new CSSStyleSheet();
 y.replaceSync(n);
 const w = new CSSStyleSheet();
-w.replaceSync(_);
-const m = class m extends v {
+w.replaceSync(O);
+const f = class f extends m {
   template() {
     return `
       <px-cell hoverable>
@@ -310,18 +310,18 @@ const m = class m extends v {
   }
   constructor() {
     super(w, y);
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(f.nativeName);
     t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
   connectedCallback() {
-    if (super.connectedCallback(), this.$slotVisual) {
+    if (this.$slotVisual) {
       const e = this.querySelector('px-img[slot="visual"]');
-      e && l(e);
+      e && c(e);
     }
     this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
       "aria-label",
       this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
-    )), c(this);
+    )), d(this);
   }
   static get observedAttributes() {
     return [
@@ -352,7 +352,7 @@ const m = class m extends v {
           this.$cell.variant = this.variant;
           break;
         case "inverted":
-          d(this.$cell, this.$children, this.inverted, [
+          u(this.$cell, this.$children, this.inverted, [
             this.$pxIcon
           ]);
           break;
@@ -497,14 +497,14 @@ const m = class m extends v {
     t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
   }
 };
-m.nativeName = "a";
-let p = m;
-customElements.get("px-cell-link") || customElements.define("px-cell-link", p);
+f.nativeName = "a";
+let v = f;
+customElements.get("px-cell-link") || customElements.define("px-cell-link", v);
 const j = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}", E = new CSSStyleSheet();
 E.replaceSync(n);
 const D = new CSSStyleSheet();
 D.replaceSync(j);
-const A = class A extends v {
+const h = class h extends m {
   template() {
     return `
       <px-cell hoverable>
@@ -517,15 +517,15 @@ const A = class A extends v {
   }
   constructor() {
     super(D, E);
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(h.nativeName);
     t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
   connectedCallback() {
-    if (super.connectedCallback(), this.$slotVisual) {
+    if (this.$slotVisual) {
       const t = this.querySelector('px-img[slot="visual"]');
-      t && l(t);
+      t && c(t);
     }
-    c(this);
+    d(this);
   }
   static get observedAttributes() {
     return [
@@ -554,7 +554,7 @@ const A = class A extends v {
           this.$cell.variant = this.variant;
           break;
         case "inverted":
-          d(this.$cell, this.$children, this.inverted);
+          u(this.$cell, this.$children, this.inverted);
           break;
         case "disabled":
           $(this.$cell, this.$children, this.disabled, [], {
@@ -682,18 +682,18 @@ const A = class A extends v {
     t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
   }
 };
-A.nativeName = "button";
-let f = A;
-customElements.get("px-cell-button") || customElements.define("px-cell-button", f);
+h.nativeName = "button", h.accessorExclusions = ["disabled"];
+let k = h;
+customElements.get("px-cell-button") || customElements.define("px-cell-button", k);
 const L = new CSSStyleSheet();
 L.replaceSync(n);
-const O = ["", "left", "right"];
-class W extends g {
+const W = ["", "left", "right"];
+class G extends A {
   template() {
     return `
     <div class="cell-checkbox">
       <px-cell hoverable>
-        <px-checkbox slot="prefix" aria-hidden="true" tabindex="-1" ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
+        <px-checkbox slot="prefix" inert></px-checkbox>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -703,12 +703,12 @@ class W extends g {
   }
   constructor() {
     var t;
-    super(L), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
+    super(L), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
   }
   connectedCallback() {
-    if (this.$slotVisual) {
+    if (this.name && this.$checkbox.setAttribute("name", this.name), this.value && this.$checkbox.setAttribute("value", this.value), this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
       const t = this.querySelector('px-img[slot="visual"]');
-      t && l(t);
+      t && c(t);
     }
     this.addEventListener("mouseover", () => {
       this.$checkbox.setAttribute("hover", "");
@@ -722,7 +722,7 @@ class W extends g {
       }
     }), this.addEventListener("click", (t) => {
       this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
-    }), this.hasAttribute("checked") && (this.checked = !0), c(this);
+    }), this.hasAttribute("checked") && (this.checked = !0), d(this);
   }
   static get observedAttributes() {
     return [
@@ -755,7 +755,7 @@ class W extends g {
           this.$cell.variant = this.variant;
           break;
         case "inverted":
-          d(this.$cell, this.$children, this.inverted, [
+          u(this.$cell, this.$children, this.inverted, [
             this.$checkbox
           ]);
           break;
@@ -785,7 +785,9 @@ class W extends g {
             if (this.checkName(q, s))
               this.$checkbox.setAttribute("state", s);
             else {
-              console.error(`${s} is not a valid state value`);
+              l(
+                `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+              );
               return;
             }
           break;
@@ -815,8 +817,10 @@ class W extends g {
     ));
   }
   handleCheckboxPositionChange(t) {
-    if (!this.checkName(O, t)) {
-      console.error(`${t} is not a valid position value`);
+    if (!this.checkName(W, t)) {
+      l(
+        `${t} is not an allowed position value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     this.$checkbox && (t === "" || t === "left" ? this.$checkbox.setAttribute("slot", "prefix") : t === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
@@ -974,15 +978,15 @@ class W extends g {
     t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
   }
 }
-customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", W);
+customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", G);
 const I = new CSSStyleSheet();
 I.replaceSync(n);
-class G extends g {
+class J extends A {
   template() {
     return `
     <div class="cell-switch">
       <px-cell hoverable>
-        <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
+        <px-switch slot="action-indicator" inert></px-switch>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -992,12 +996,12 @@ class G extends g {
   }
   constructor() {
     var t;
-    super(I), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
+    super(I), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
   }
   connectedCallback() {
-    if (this.$slotVisual) {
+    if (this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
       const t = this.querySelector('px-img[slot="visual"]');
-      t && l(t);
+      t && c(t);
     }
     this.addEventListener("mouseover", () => {
       this.$switch.setAttribute("hover", "");
@@ -1011,7 +1015,7 @@ class G extends g {
       }
     }), this.addEventListener("click", (t) => {
       this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
-    }), this.hasAttribute("checked") && (this.checked = !0), c(this);
+    }), this.hasAttribute("checked") && (this.checked = !0), d(this);
   }
   static get observedAttributes() {
     return [
@@ -1042,7 +1046,7 @@ class G extends g {
           this.$cell.variant = this.variant;
           break;
         case "inverted":
-          d(this.$cell, this.$children, this.inverted, [
+          u(this.$cell, this.$children, this.inverted, [
             this.$switch
           ]);
           break;
@@ -1236,16 +1240,16 @@ class G extends g {
     t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
   }
 }
-customElements.get("px-cell-switch") || customElements.define("px-cell-switch", G);
+customElements.get("px-cell-switch") || customElements.define("px-cell-switch", J);
 const T = new CSSStyleSheet();
 T.replaceSync(n);
-const J = ["", "left", "right"];
-class K extends g {
+const K = ["", "left", "right"];
+class Q extends A {
   template() {
     return `
     <div class="cell-radio">
       <px-cell hoverable>
-        <px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
+        <px-radio slot="prefix" inert></px-radio>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -1255,13 +1259,13 @@ class K extends g {
   }
   constructor() {
     var t;
-    super(T), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
+    super(T), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
   }
   connectedCallback() {
     var t;
-    if (this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.$slotVisual) {
+    if (this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.querySelector("px-cell-radio")) === this ? 0 : -1, this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
       const e = this.querySelector('px-img[slot="visual"]');
-      e && l(e);
+      e && c(e);
     }
     this.addEventListener("mouseover", () => {
       this.$radio.setAttribute("hover", "");
@@ -1275,7 +1279,7 @@ class K extends g {
       }
     }), this.addEventListener("click", (e) => {
       this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
-    }), this.hasAttribute("checked") && (this.checked = !0), c(this);
+    }), this.hasAttribute("checked") && (this.checked = !0), d(this);
   }
   static get observedAttributes() {
     return [
@@ -1308,7 +1312,7 @@ class K extends g {
           this.$cell.variant = this.variant;
           break;
         case "inverted":
-          d(this.$cell, this.$children, this.inverted, [
+          u(this.$cell, this.$children, this.inverted, [
             this.$radio
           ]);
           break;
@@ -1338,7 +1342,9 @@ class K extends g {
             if (this.checkName(M, s))
               this.$radio.setAttribute("state", s);
             else {
-              console.error(`${s} is not a valid state value`);
+              l(
+                `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+              );
               return;
             }
           break;
@@ -1368,8 +1374,10 @@ class K extends g {
     ));
   }
   handleRadioPositionChange(t) {
-    if (!this.checkName(J, t)) {
-      console.error(`${t} is not a valid position value`);
+    if (!this.checkName(K, t)) {
+      l(
+        `${t} is not an allowed position value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     this.$radio && (t === "" || t === "left" ? this.$radio.setAttribute("slot", "prefix") : t === "right" && this.$radio.setAttribute("slot", "action-indicator"));
@@ -1527,16 +1535,16 @@ class K extends g {
     t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
   }
 }
-customElements.get("px-cell-radio") || customElements.define("px-cell-radio", K);
+customElements.get("px-cell-radio") || customElements.define("px-cell-radio", Q);
 export {
-  b as Cell,
-  f as CellButton,
-  W as CellCheckbox,
-  p as CellLink,
-  K as CellRadio,
-  G as CellSwitch,
-  O as cellCheckboxPosition,
-  J as cellRadioPosition,
-  F as radiusValues,
-  x as suffixButtonIconVariantValues
+  g as Cell,
+  k as CellButton,
+  G as CellCheckbox,
+  v as CellLink,
+  Q as CellRadio,
+  J as CellSwitch,
+  W as cellCheckboxPosition,
+  K as cellRadioPosition,
+  _ as radiusValues,
+  F as suffixButtonIconVariantValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-cell",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.60",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
     "test": "vitest run --coverage",
-    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
   },
   "publishConfig": {
     "access": "public"