@proximus/lavender-selectablebox 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/SelectableBox.d.ts

@@ -3,7 +3,6 @@ import '@proximus/lavender-layout';
 export declare class SelectableBox extends WithExtraAttributes {
     protected template(): string;
     constructor();
-    connectedCallback(): void;
     static get observedAttributes(): string[];
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     get $el(): HTMLElement;

package/dist/SelectableBoxRadio.d.ts

@@ -1,7 +1,7 @@
 import { WithExtraAttributes } from '@proximus/lavender-common';
 import '@proximus/lavender-layout';
 import { SelectableBox } from './SelectableBox';
-import { type RadioBase } from '@proximus/lavender-radio-group';
+import { type Radio } from '@proximus/lavender-radio-group';
 export declare class SelectableBoxRadio extends WithExtraAttributes {
     protected internals: ElementInternals;
     protected template(): string;
@@ -23,7 +23,7 @@ export declare class SelectableBoxRadio extends WithExtraAttributes {
     formData(): FormData;
     get $el(): HTMLElement;
     get $selectableBox(): SelectableBox;
-    get $radio(): RadioBase;
+    get $radio(): Radio;
     get $slotFooter(): HTMLSlotElement;
     get $slottedFooter(): HTMLElement;
     get inverted(): boolean;

package/dist/index.es.js

@@ -1,14 +1,14 @@
-import { WithExtraAttributes as n, AttributeBreakpointHandlerDelegate as f, gapValues as v, checkName as m, backgroundColorValues as k } from "@proximus/lavender-common";
+import { WithExtraAttributes as n, AttributeBreakpointHandlerDelegate as v, gapValues as m, checkName as k, log as h, backgroundColorValues as y } from "@proximus/lavender-common";
 const A = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', b = new CSSStyleSheet();
 b.replaceSync(A);
-const y = [
+const w = [
   "",
   "default",
   "row",
   "row-reverse",
   "column",
   "column-reverse"
-], w = [
+], C = [
   "",
   "default",
   "stretch",
@@ -25,10 +25,10 @@ const y = [
   "space-between",
   "space-around",
   "space-evenly"
-], C = ["", "default", "nowrap", "wrap", "wrap-reverse"], S = ["", "visible", "hidden", "scroll", "auto"];
+], S = ["", "default", "nowrap", "wrap", "wrap-reverse"], _ = ["", "visible", "hidden", "scroll", "auto"];
 class c extends n {
   constructor() {
-    super(b), this.overflowXAttributeDelegate = new f(
+    super(b), this.overflowXAttributeDelegate = new v(
       this,
       "overflow-x",
       (t) => t,
@@ -82,7 +82,7 @@ class c extends n {
       case "gap--tablet":
       case "gap--laptop":
       case "gap--desktop":
-        this.updateFlexProperties(t, e, i, v);
+        this.updateFlexProperties(t, e, i, m);
         break;
       case "justify-content":
       case "justify-content--mobile":
@@ -101,28 +101,28 @@ class c extends n {
       case "align-items--tablet":
       case "align-items--laptop":
       case "align-items--desktop":
-        this.updateFlexProperties(t, e, i, w);
+        this.updateFlexProperties(t, e, i, C);
         break;
       case "wrap":
       case "wrap--mobile":
       case "wrap--tablet":
       case "wrap--laptop":
       case "wrap--desktop":
-        this.updateFlexProperties(t, e, i, C);
+        this.updateFlexProperties(t, e, i, S);
         break;
       case "direction":
       case "direction--mobile":
       case "direction--tablet":
       case "direction--laptop":
       case "direction--desktop":
-        this.updateFlexProperties(t, e, i, y);
+        this.updateFlexProperties(t, e, i, w);
         break;
       case "overflow-x":
       case "overflow-x--mobile":
       case "overflow-x--tablet":
       case "overflow-x--laptop":
       case "overflow-x--desktop":
-        this.updateOverflowX(t, e, i, S);
+        this.updateOverflowX(t, e, i, _);
         break;
       default:
         super.attributeChangedCallback(t, e, i);
@@ -130,8 +130,10 @@ class c extends n {
     }
   }
   updateOverflowX(t, e, i, o) {
-    if (!m(o, i)) {
-      console.error(`${i} is not an allowed ${t} value`);
+    if (!k(o, i)) {
+      h(
+        `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     this.overflowXAttributeDelegate.attributeChangedCallback(
@@ -141,7 +143,9 @@ class c extends n {
     );
   }
   updateFlexProperties(t, e, i, o) {
-    this.checkName(o, i) || console.error(`${i} is not a valid value for ${o}`);
+    this.checkName(o, i) || h(
+      `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    );
     const d = t.indexOf("--") > -1, s = d ? t.split("--")[0] : t, a = [];
     if (!d)
       this.getAttribute(s + "--mobile") || a.push("mobile"), this.getAttribute(s + "--tablet") || a.push("tablet"), this.getAttribute(s + "--laptop") || a.push("laptop"), this.getAttribute(s + "--desktop") || a.push("desktop"), a.forEach((l) => {
@@ -346,7 +350,7 @@ class c extends n {
   }
 }
 customElements.get("px-stack") || customElements.define("px-stack", c);
-class _ extends c {
+class E extends c {
   constructor() {
     super();
   }
@@ -354,8 +358,8 @@ class _ extends c {
     super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
   }
 }
-customElements.get("px-vstack") || customElements.define("px-vstack", _);
-class E extends c {
+customElements.get("px-vstack") || customElements.define("px-vstack", E);
+class z extends c {
   constructor() {
     super();
   }
@@ -363,19 +367,25 @@ class E extends c {
     super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
   }
 }
-customElements.get("px-hstack") || customElements.define("px-hstack", E);
+customElements.get("px-hstack") || customElements.define("px-hstack", z);
 class L extends HTMLElement {
   constructor() {
-    super();
+    super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
   }
   static get observedAttributes() {
-    return ["grow"];
+    return ["grow", "nogap"];
   }
   attributeChangedCallback(t, e, i) {
-    t === "grow" && (this.style.flexGrow = i);
+    t === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
   }
   connectedCallback() {
-    this.style.flexGrow = this.getAttribute("grow") || "1";
+    this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
+      this.handleSizeChange();
+    }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
   }
   get grow() {
     return this.getAttribute("grow");
@@ -383,13 +393,34 @@ class L extends HTMLElement {
   set grow(t) {
     this.setAttribute("grow", t);
   }
+  scheduleRecheck() {
+    this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
+      this.recheckHandle = void 0, this.recalculateVisibility();
+    });
+  }
+  recalculateVisibility() {
+    this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
+  }
+  handleSizeChange() {
+    const t = this.getBoundingClientRect(), e = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
+    this.isZeroSized !== e && (this.isZeroSized = e, this.updateParticipation());
+  }
+  updateParticipation() {
+    this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
+  }
+  get nogap() {
+    return this.hasAttribute("nogap");
+  }
+  set nogap(t) {
+    t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
+  }
 }
 customElements.get("px-spacer") || customElements.define("px-spacer", L);
-const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", h = new CSSStyleSheet();
-h.replaceSync(j);
-class D extends n {
+const D = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", p = new CSSStyleSheet();
+p.replaceSync(D);
+class j extends n {
   constructor() {
-    super(h), this.template = (t) => `
+    super(p), this.template = (t) => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -566,7 +597,7 @@ class D extends n {
         case "background-color":
           this.$bodyContainer.setAttribute(
             "background-color",
-            k.indexOf(i) > 0 ? i : "none"
+            y.indexOf(i) > 0 ? i : "none"
           );
           break;
         case "padding-vertical":
@@ -586,10 +617,10 @@ class D extends n {
     this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
   }
 }
-customElements.get("px-page") === void 0 && customElements.define("px-page", D);
-const z = ':host{display:block;font-family:var(--px-font-family);font-size:var(--px-font-size-base)}:host *{box-sizing:border-box}.selectable-box{display:flex;flex-direction:column;height:100%}::slotted([slot="media"]){width:100%;height:auto}.info{display:flex;flex-grow:1}.info .info__body{display:flex;flex-direction:column;flex-basis:80%;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-m-mobile);flex-grow:1}.info .info__body .header{display:flex;align-items:center;gap:var(--px-spacing-s-mobile);flex-grow:1}.info .info__body .header .titles{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);flex-grow:1}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-dimmed-default);flex-grow:1}.info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-default)}.info .info__footer{display:flex;align-items:center;padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}@media only screen and (min-width: 48em){.info{flex-direction:column}.info .info__body{flex-basis:auto;gap:var(--px-spacing-default-tablet);padding:var(--px-padding-m-tablet)}.info .info__body .header{gap:var(--px-spacing-s-tablet)}.info .info__body .header .titles{gap:var(--px-spacing-xs-tablet)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{justify-content:center;padding:var(--px-padding-s-tablet)}}@media only screen and (min-width: 64.0625em){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-m-laptop)}.info .info__body .header{gap:var(--px-spacing-s-laptop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-laptop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__footer{padding:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-m-desktop)}.info .info__body .header{gap:var(--px-spacing-s-desktop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-desktop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__footer{padding:var(--px-padding-s-desktop)}}:host([inverted]) .info .info__body .header .titles ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__body .header .titles ::slotted([slot="description"]){color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__footer{background:var(--px-color-background-container-default-inverted)}', p = new CSSStyleSheet();
-p.replaceSync(z);
-class R extends n {
+customElements.get("px-page") === void 0 && customElements.define("px-page", j);
+const R = ':host{display:block;font-family:var(--px-font-family);font-size:var(--px-font-size-base)}:host *{box-sizing:border-box}.selectable-box{display:flex;flex-direction:column;height:100%}::slotted([slot="media"]){width:100%;height:auto}.info{display:flex;flex-grow:1}.info .info__body{display:flex;flex-direction:column;flex-basis:80%;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-m-mobile);flex-grow:1}.info .info__body .header{display:flex;align-items:center;gap:var(--px-spacing-s-mobile)}.info .info__body .header .titles{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);flex-grow:1}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-dimmed-default);flex-grow:1}.info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-default)}.info .info__footer{display:flex;align-items:center;padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}@media only screen and (min-width: 48em){.info{flex-direction:column}.info .info__body{flex-basis:auto;gap:var(--px-spacing-default-tablet);padding:var(--px-padding-m-tablet)}.info .info__body .header{gap:var(--px-spacing-s-tablet)}.info .info__body .header .titles{gap:var(--px-spacing-xs-tablet)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{justify-content:center;padding:var(--px-padding-s-tablet)}}@media only screen and (min-width: 64.0625em){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-m-laptop)}.info .info__body .header{gap:var(--px-spacing-s-laptop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-laptop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__footer{padding:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-m-desktop)}.info .info__body .header{gap:var(--px-spacing-s-desktop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-desktop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__footer{padding:var(--px-padding-s-desktop)}}:host([inverted]) .info .info__body .header .titles ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__body .header .titles ::slotted([slot="description"]){color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__footer{background:var(--px-color-background-container-default-inverted)}', u = new CSSStyleSheet();
+u.replaceSync(R);
+class F extends n {
   template() {
     return `
       <div class="selectable-box">
@@ -615,9 +646,7 @@ class R extends n {
     `;
   }
   constructor() {
-    super(p), this.shadowRoot.innerHTML = this.template();
-  }
-  connectedCallback() {
+    super(u), this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "inverted", "hide-footer"];
@@ -646,19 +675,17 @@ class R extends n {
     t ? this.setAttribute("hide-footer", "") : this.removeAttribute("hide-footer");
   }
 }
-customElements.get("px-selectable-box") || customElements.define("px-selectable-box", R);
-const u = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:default;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-default )}:host(:not([disabled])):host(:focus-visible) .selectable-box-checkbox,:host(:not([disabled])):host(:focus-visible) .selectable-box-radio{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host([checked]) .selectable-box-checkbox,:host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-default)}:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio{cursor:default;pointer-events:none}:host([disabled]) .selectable-box-checkbox px-selectable-box,:host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) ::slotted([slot="title"]),:host([disabled]) ::slotted([slot="description"]),:host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-default)}@media only screen and (min-width: 48em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .selectable-box-checkbox px-selectable-box,:host([inverted]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-container-light-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([checked]) .selectable-box-checkbox,:host([inverted]):host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([disabled]) .selectable-box-checkbox px-selectable-box,:host([inverted]):host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]):host([disabled]) ::slotted([slot="title"]),:host([inverted]):host([disabled]) ::slotted([slot="description"]),:host([inverted]):host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-inverted)}', g = new CSSStyleSheet();
-g.replaceSync(u);
-class F extends n {
+customElements.get("px-selectable-box") || customElements.define("px-selectable-box", F);
+const g = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:pointer;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid var(--px-color-border-main-default);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-default )}:host(:not([disabled])):host(:focus-visible) .selectable-box-checkbox,:host(:not([disabled])):host(:focus-visible) .selectable-box-radio{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host([checked]) .selectable-box-checkbox,:host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-default)}:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio{cursor:default;pointer-events:none;border-color:transparent}:host([disabled]) .selectable-box-checkbox px-selectable-box,:host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) ::slotted([slot="title"]),:host([disabled]) ::slotted([slot="description"]),:host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-default)}@media only screen and (min-width: 48em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{border-color:var(--px-color-border-main-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .selectable-box-checkbox px-selectable-box,:host([inverted]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-container-light-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([checked]) .selectable-box-checkbox,:host([inverted]):host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([disabled]) .selectable-box-checkbox,:host([inverted]):host([disabled]) .selectable-box-radio{border-color:transparent}:host([inverted]):host([disabled]) .selectable-box-checkbox px-selectable-box,:host([inverted]):host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]):host([disabled]) ::slotted([slot="title"]),:host([inverted]):host([disabled]) ::slotted([slot="description"]),:host([inverted]):host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-inverted)}', f = new CSSStyleSheet();
+f.replaceSync(g);
+class H extends n {
   template() {
     return `
       <div class="selectable-box-checkbox">
         <px-selectable-box>
           <slot name="media" slot="media"></slot>
           <px-checkbox 
-            slot="action" aria-hidden="true" tabindex="-1" 
-            name="${this.name}"
-            value="${this.value}"
+            slot="action" inert 
           ></px-checkbox>
           <slot name="icon" slot="icon"></slot>
           <slot name="logo" slot="logo"></slot>
@@ -672,20 +699,13 @@ class F extends n {
   }
   constructor() {
     var t;
-    super(g), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
+    super(f), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
   }
   connectedCallback() {
-    this.toggleFooterVisibility(), this.$slotFooter.addEventListener("slotchange", () => {
-      this.toggleFooterVisibility();
-    }), this.addEventListener("mouseover", () => {
-      this.setHoverAttribute();
-    }), this.addEventListener("mouseout", () => {
-      this.removeHoverAttribute();
-    }), this.addEventListener("keypress", (t) => {
-      this.setKeypressEvent(t);
-    }), this.addEventListener("click", (t) => {
-      this.setClickEvent(t);
-    }), this.hasAttribute("checked") && (this.checked = !0);
+    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.tabIndex = 0, this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
+      "slotchange",
+      this.toggleFooterVisibility
+    ), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent), this.hasAttribute("checked") && (this.checked = !0);
   }
   static get observedAttributes() {
     return [
@@ -722,15 +742,7 @@ class F extends n {
     this.$slotFooter.removeEventListener(
       "slotchange",
       this.toggleFooterVisibility
-    ), this.removeEventListener("mouseover", () => {
-      this.setHoverAttribute();
-    }), this.removeEventListener("mouseout", () => {
-      this.removeHoverAttribute();
-    }), this.removeEventListener("keypress", (t) => {
-      this.setKeypressEvent(t);
-    }), this.removeEventListener("click", (t) => {
-      this.setClickEvent(t);
-    });
+    ), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent);
   }
   removeHoverAttribute() {
     this.$checkbox.removeAttribute("hover");
@@ -752,11 +764,11 @@ class F extends n {
     this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
   }
   handleDisabledAttributeChange(t) {
-    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$checkbox.removeAttribute("disabled"));
+    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$checkbox.removeAttribute("disabled"));
   }
   handleCheckedAttributeChange(t) {
     var e;
-    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
+    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
       new Event("change", {
         bubbles: !0,
         composed: !0
@@ -831,20 +843,18 @@ class F extends n {
     t ? this.setAttribute("value", t) : this.removeAttribute("value");
   }
 }
-customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", F);
+customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", H);
 const x = new CSSStyleSheet();
-x.replaceSync(u);
-class H extends n {
+x.replaceSync(g);
+class q extends n {
   template() {
     return `
       <div class="selectable-box-radio">
         <px-selectable-box>
           <slot name="media" slot="media"></slot>
-          <px-radio-base 
-            slot="action" aria-hidden="true" tabindex="-1" 
-            name="${this.name}"
-            value="${this.value}"
-          ></px-radio-base>
+          <px-radio 
+            slot="action" inert 
+          ></px-radio>
           <slot name="icon" slot="icon"></slot>
           <slot name="logo" slot="logo"></slot>
           <slot name="title" slot="title"></slot>
@@ -856,21 +866,15 @@ class H extends n {
     `;
   }
   constructor() {
-    var t, e;
-    super(x), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
+    var t;
+    super(x), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
   }
   connectedCallback() {
-    this.toggleFooterVisibility(), this.$slotFooter.addEventListener("slotchange", () => {
-      this.toggleFooterVisibility();
-    }), this.addEventListener("mouseover", () => {
-      this.setHoverAttribute();
-    }), this.addEventListener("mouseout", () => {
-      this.removeHoverAttribute();
-    }), this.addEventListener("keypress", (t) => {
-      this.setKeypressEvent(t);
-    }), this.addEventListener("click", (t) => {
-      this.setClickEvent(t);
-    }), this.hasAttribute("checked") && (this.checked = !0);
+    var t;
+    this.name && this.$radio.setAttribute("name", this.name), this.value && this.$radio.setAttribute("value", this.value), this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
+      "slotchange",
+      this.toggleFooterVisibility
+    ), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent), this.hasAttribute("checked") && (this.checked = !0);
   }
   static get observedAttributes() {
     return [
@@ -907,15 +911,7 @@ class H extends n {
     this.$slotFooter.removeEventListener(
       "slotchange",
       this.toggleFooterVisibility
-    ), this.removeEventListener("mouseover", () => {
-      this.setHoverAttribute();
-    }), this.removeEventListener("mouseout", () => {
-      this.removeHoverAttribute();
-    }), this.removeEventListener("keypress", (t) => {
-      this.setKeypressEvent(t);
-    }), this.removeEventListener("click", (t) => {
-      this.setClickEvent(t);
-    });
+    ), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent);
   }
   removeHoverAttribute() {
     this.$radio.removeAttribute("hover");
@@ -937,11 +933,11 @@ class H extends n {
     this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
   }
   handleDisabledAttributeChange(t) {
-    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$radio.removeAttribute("disabled"));
+    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$radio.removeAttribute("disabled"));
   }
   handleCheckedAttributeChange(t) {
     var e;
-    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.setAttribute("tabIndex", "-1"), this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("tabIndex", "0"), this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
+    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
       new Event("change", {
         bubbles: !0,
         composed: !0
@@ -975,7 +971,7 @@ class H extends n {
     return this.shadowRoot.querySelector("px-selectable-box");
   }
   get $radio() {
-    return this.shadowRoot.querySelector("px-radio-base");
+    return this.shadowRoot.querySelector("px-radio");
   }
   get $slotFooter() {
     return this.shadowRoot.querySelector(
@@ -1016,9 +1012,9 @@ class H extends n {
     t ? this.setAttribute("value", t) : this.removeAttribute("value");
   }
 }
-customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", H);
+customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", q);
 export {
-  R as SelectableBox,
-  F as SelectableBoxCheckbox,
-  H as SelectableBoxRadio
+  F as SelectableBox,
+  H as SelectableBoxCheckbox,
+  q as SelectableBoxRadio
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-selectablebox",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.21",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",