@proximus/lavender-cell 1.4.1 → 1.4.2

package/dist/CellButton.d.ts

@@ -3,6 +3,7 @@ import '@proximus/lavender-layout';
 import { Cell } from '@proximus/lavender-cell';
 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 b, PxElement as k, WithExtraAttributes as m } 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";
@@ -14,13 +14,13 @@ function c(r) {
   r.getAttribute("variant") === "contained" && !r.getAttribute("background-color") && r.setAttribute("background-color", "container-light");
 }
 function P(r, t, e) {
-  if (!u(R, e)) {
+  if (!b(R, e)) {
     console.error(`${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 h(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,7 +28,7 @@ function d(r, t, e, s = []) {
   }));
 }
 function B(r, t, e, s, i) {
-  if (!u(i, s)) {
+  if (!b(i, s)) {
     console.error(`${s} is not an allowed ${t} value`);
     return;
   }
@@ -53,7 +53,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 x = ["secondary"], F = ["", "default", "top", "bottom", "none"], A = class A extends k {
   template() {
     return `
       <px-hstack gap="s" justify-content="space-between" align-items="center">
@@ -76,11 +76,11 @@ 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);
     }
@@ -146,7 +146,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
       }
   }
   configureSlotSuffixButtonIcon(t) {
-    t.hasAttribute("variant") ? u(
+    t.hasAttribute("variant") ? b(
       x,
       t.getAttribute("variant")
     ) || (console.error(
@@ -156,7 +156,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
     ), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
   }
   updateRadius(t, e, s, i) {
-    if (!u(i, s)) {
+    if (!b(i, s)) {
       console.error(`${s} is not a valid ${t} value`);
       return;
     }
@@ -164,11 +164,11 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
     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 u = t.split("--")[1];
+      o.push(u);
     }
-    o.forEach((h) => {
-      e !== null && e !== "" && e !== "default" && this.updateStyle(h, e), s !== null && s !== "" && s !== "default" && this.updateStyle(h, s);
+    o.forEach((u) => {
+      e !== null && e !== "" && e !== "default" && this.updateStyle(u, e), s !== null && s !== "" && s !== "default" && this.updateStyle(u, 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);
+A.nativeName = "div";
+let f = A;
+customElements.get("px-cell") || customElements.define("px-cell", f);
 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();
 y.replaceSync(n);
 const w = new CSSStyleSheet();
 w.replaceSync(_);
-const m = class m extends v {
+const p = class p extends k {
   template() {
     return `
       <px-cell hoverable>
@@ -310,11 +310,11 @@ const m = class m extends v {
   }
   constructor() {
     super(w, y);
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(p.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);
     }
@@ -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, [
+          h(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);
+p.nativeName = "a";
+let v = p;
+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 d = class d extends k {
   template() {
     return `
       <px-cell hoverable>
@@ -517,11 +517,11 @@ const A = class A extends v {
   }
   constructor() {
     super(D, E);
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(d.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);
     }
@@ -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);
+          h(this.$cell, this.$children, this.inverted);
           break;
         case "disabled":
           $(this.$cell, this.$children, this.disabled, [], {
@@ -682,13 +682,13 @@ 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);
+d.nativeName = "button", d.accessorExclusions = ["disabled"];
+let g = d;
+customElements.get("px-cell-button") || customElements.define("px-cell-button", g);
 const L = new CSSStyleSheet();
 L.replaceSync(n);
 const O = ["", "left", "right"];
-class W extends g {
+class W extends m {
   template() {
     return `
     <div class="cell-checkbox">
@@ -755,7 +755,7 @@ class W extends g {
           this.$cell.variant = this.variant;
           break;
         case "inverted":
-          d(this.$cell, this.$children, this.inverted, [
+          h(this.$cell, this.$children, this.inverted, [
             this.$checkbox
           ]);
           break;
@@ -977,7 +977,7 @@ class W extends g {
 customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", W);
 const I = new CSSStyleSheet();
 I.replaceSync(n);
-class G extends g {
+class G extends m {
   template() {
     return `
     <div class="cell-switch">
@@ -1042,7 +1042,7 @@ class G extends g {
           this.$cell.variant = this.variant;
           break;
         case "inverted":
-          d(this.$cell, this.$children, this.inverted, [
+          h(this.$cell, this.$children, this.inverted, [
             this.$switch
           ]);
           break;
@@ -1240,7 +1240,7 @@ customElements.get("px-cell-switch") || customElements.define("px-cell-switch",
 const T = new CSSStyleSheet();
 T.replaceSync(n);
 const J = ["", "left", "right"];
-class K extends g {
+class K extends m {
   template() {
     return `
     <div class="cell-radio">
@@ -1308,7 +1308,7 @@ class K extends g {
           this.$cell.variant = this.variant;
           break;
         case "inverted":
-          d(this.$cell, this.$children, this.inverted, [
+          h(this.$cell, this.$children, this.inverted, [
             this.$radio
           ]);
           break;
@@ -1529,10 +1529,10 @@ class K extends g {
 }
 customElements.get("px-cell-radio") || customElements.define("px-cell-radio", K);
 export {
-  b as Cell,
-  f as CellButton,
+  f as Cell,
+  g as CellButton,
   W as CellCheckbox,
-  p as CellLink,
+  v as CellLink,
   K as CellRadio,
   G as CellSwitch,
   O as cellCheckboxPosition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-cell",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",