@proximus/lavender-cell 2.0.0-alpha.1 → 2.0.0-alpha.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,16 @@
1
1
  import { PxElement } from '@proximus/lavender-common';
2
2
  import '@proximus/lavender-layout';
3
3
  import { Cell } from '@proximus/lavender-cell';
4
+ /**
5
+ * @summary A cell component that acts as a button.
6
+ * @attr {string} name - The name of the button, submitted as a pair with the button's value as part of the form data.
7
+ * @attr {string} value - The value associated with the button's name when it's submitted with a form.
8
+ * @attr {string} type - The default behavior of the button. Possible values are 'submit', 'reset', and 'button'.
9
+ * @attr {boolean} disabled - Whether the button is disabled.
10
+ */
4
11
  export declare class CellButton extends PxElement<HTMLButtonElement> {
5
12
  static nativeName: string;
13
+ static accessorExclusions: string[];
6
14
  private template;
7
15
  constructor();
8
16
  connectedCallback(): void;
@@ -1,6 +1,6 @@
1
1
  import { WithExtraAttributes } from '@proximus/lavender-common';
2
2
  import { Cell } from '@proximus/lavender-cell';
3
- import { type IRadio, type RadioBase } from '@proximus/lavender-radio-group';
3
+ import { type IRadio, type Radio } from '@proximus/lavender-radio-group';
4
4
  export declare const cellRadioPosition: string[];
5
5
  export declare class CellRadio extends WithExtraAttributes implements IRadio {
6
6
  protected internals: ElementInternals;
@@ -18,7 +18,7 @@ export declare class CellRadio extends WithExtraAttributes implements IRadio {
18
18
  formData(): FormData;
19
19
  get $cell(): Cell;
20
20
  get $el(): HTMLElement;
21
- get $radio(): RadioBase;
21
+ get $radio(): Radio;
22
22
  get $slotVisual(): HTMLSlotElement;
23
23
  get $children(): NodeListOf<Element>;
24
24
  get inverted(): boolean;
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { checkName as h, PxElement as g, WithExtraAttributes as f } from "@proximus/lavender-common";
1
+ import { checkName as p, log as l, PxElement as m, WithExtraAttributes as A } from "@proximus/lavender-common";
2
2
  import "@proximus/lavender-layout";
3
3
  import { checkboxStateValues as q } from "@proximus/lavender-checkbox";
4
4
  import { stateValues as M } from "@proximus/lavender-radio-group";
@@ -7,20 +7,20 @@ const R = ["", "default", "naked", "contained"], z = [
7
7
  "container-light",
8
8
  "container-default"
9
9
  ];
10
- function l(r) {
10
+ function c(r) {
11
11
  r.hasAttribute("width") || r.setAttribute("width", "s"), r.setAttribute("border-radius", "pill");
12
12
  }
13
- function c(r) {
13
+ function d(r) {
14
14
  r.getAttribute("variant") === "contained" && !r.getAttribute("background-color") && r.setAttribute("background-color", "container-light");
15
15
  }
16
16
  function P(r, t, e) {
17
- if (!h(R, e)) {
18
- console.error(`${e} is not an allowed variant value.`);
17
+ if (!p(R, e)) {
18
+ l(`${e} is not an allowed variant value.`);
19
19
  return;
20
20
  }
21
21
  t !== null && t !== "" && t !== "default" && r.classList.toggle(t), e !== null && e !== "" && e !== "default" && r.classList.toggle(e);
22
22
  }
23
- function d(r, t, e, s = []) {
23
+ function u(r, t, e, s = []) {
24
24
  e ? (r.setAttribute("inverted", ""), s.forEach((i) => i.setAttribute("inverted", "")), t.forEach((i) => {
25
25
  i.hasAttribute("inverted") || i.setAttribute("inverted", "");
26
26
  })) : (r.removeAttribute("inverted"), s.forEach((i) => i.removeAttribute("inverted")), t.forEach((i) => {
@@ -28,8 +28,10 @@ function d(r, t, e, s = []) {
28
28
  }));
29
29
  }
30
30
  function B(r, t, e, s, i) {
31
- if (!h(i, s)) {
32
- console.error(`${s} is not an allowed ${t} value`);
31
+ if (!p(i, s)) {
32
+ l(
33
+ `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
34
+ );
33
35
  return;
34
36
  }
35
37
  const a = (o) => {
@@ -50,10 +52,10 @@ function $(r, t, e, s = [], i = {}) {
50
52
  a.hasAttribute("disabled") && a.removeAttribute("disabled");
51
53
  }), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
52
54
  }
53
- 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(), y = new CSSStyleSheet();
55
+ 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 screen and (min-width: 48rem){: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 screen and (min-width: 64.0625rem){: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 screen and (max-width: 47.938rem){: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 screen and (min-width: 48rem){: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 screen and (min-width: 48rem) and (max-width: 64rem){: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 screen and (min-width: 64.0625rem){: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 screen and (min-width: 64.0625rem) and (max-width: 90rem){: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 screen and (min-width: 90.0625rem){: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();
54
56
  S.replaceSync(n);
55
- y.replaceSync(H);
56
- const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class k extends g {
57
+ C.replaceSync(H);
58
+ const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class x extends m {
57
59
  template() {
58
60
  return `
59
61
  <px-hstack gap="s" justify-content="space-between" align-items="center">
@@ -75,14 +77,14 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
75
77
  `;
76
78
  }
77
79
  constructor() {
78
- super(y, S);
79
- const t = document.createElement(this.nativeName);
80
+ super(C, S);
81
+ const t = document.createElement("div");
80
82
  t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
81
83
  }
82
84
  connectedCallback() {
83
- if (super.connectedCallback(), this.$slotVisual) {
85
+ if (this.$slotVisual) {
84
86
  const t = this.querySelector('px-img[slot="visual"]');
85
- t && l(t);
87
+ t && c(t);
86
88
  }
87
89
  if (this.$slotSuffix) {
88
90
  const t = this.querySelectorAll(
@@ -92,7 +94,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
92
94
  this.configureSlotSuffixButtonIcon(i);
93
95
  }), s && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
94
96
  }
95
- c(this);
97
+ d(this);
96
98
  }
97
99
  static get observedAttributes() {
98
100
  return [
@@ -129,7 +131,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
129
131
  case "radius--tablet":
130
132
  case "radius--laptop":
131
133
  case "radius--desktop":
132
- this.updateRadius(t, e, s, F);
134
+ this.updateRadius(t, e, s, _);
133
135
  break;
134
136
  case "background-color":
135
137
  B(
@@ -146,29 +148,27 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
146
148
  }
147
149
  }
148
150
  configureSlotSuffixButtonIcon(t) {
149
- t.hasAttribute("variant") ? h(
150
- x,
151
+ t.hasAttribute("variant") && p(
152
+ F,
151
153
  t.getAttribute("variant")
152
- ) || (console.error(
153
- `Wrong button-icon variant value for suffix. Allowed values are: ${x.join(
154
- ", "
155
- )}.`
156
- ), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
154
+ ) || t.setAttribute("variant", "secondary");
157
155
  }
158
156
  updateRadius(t, e, s, i) {
159
- if (!h(i, s)) {
160
- console.error(`${s} is not a valid ${t} value`);
157
+ if (!p(i, s)) {
158
+ l(
159
+ `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
160
+ );
161
161
  return;
162
162
  }
163
163
  const a = t.includes("--"), o = [];
164
164
  if (!a)
165
165
  this.separatorMobile || o.push("mobile"), this.separatorTablet || o.push("tablet"), this.separatorLaptop || o.push("laptop"), this.separatorDesktop || o.push("desktop");
166
166
  else {
167
- const u = t.split("--")[1];
168
- o.push(u);
167
+ const b = t.split("--")[1];
168
+ o.push(b);
169
169
  }
170
- o.forEach((u) => {
171
- e !== null && e !== "" && e !== "default" && this.updateStyle(u, e), s !== null && s !== "" && s !== "default" && this.updateStyle(u, s);
170
+ o.forEach((b) => {
171
+ e !== null && e !== "" && e !== "default" && this.updateStyle(b, e), s !== null && s !== "" && s !== "default" && this.updateStyle(b, s);
172
172
  });
173
173
  }
174
174
  updateStyle(t, e) {
@@ -283,14 +283,14 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
283
283
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
284
284
  }
285
285
  };
286
- k.nativeName = "div";
287
- let b = k;
288
- customElements.get("px-cell") || customElements.define("px-cell", b);
289
- 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)}', C = new CSSStyleSheet();
290
- C.replaceSync(n);
286
+ x.nativeName = "div";
287
+ let g = x;
288
+ customElements.get("px-cell") || customElements.define("px-cell", g);
289
+ 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();
290
+ y.replaceSync(n);
291
291
  const w = new CSSStyleSheet();
292
- w.replaceSync(_);
293
- const m = class m extends g {
292
+ w.replaceSync(O);
293
+ const f = class f extends m {
294
294
  template() {
295
295
  return `
296
296
  <px-cell hoverable>
@@ -309,19 +309,19 @@ const m = class m extends g {
309
309
  `;
310
310
  }
311
311
  constructor() {
312
- super(w, C);
313
- const t = document.createElement(this.nativeName);
312
+ super(w, y);
313
+ const t = document.createElement(f.nativeName);
314
314
  t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
315
315
  }
316
316
  connectedCallback() {
317
- if (super.connectedCallback(), this.$slotVisual) {
317
+ if (this.$slotVisual) {
318
318
  const e = this.querySelector('px-img[slot="visual"]');
319
- e && l(e);
319
+ e && c(e);
320
320
  }
321
321
  this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
322
322
  "aria-label",
323
323
  this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
324
- )), c(this);
324
+ )), d(this);
325
325
  }
326
326
  static get observedAttributes() {
327
327
  return [
@@ -352,7 +352,7 @@ const m = class m extends g {
352
352
  this.$cell.variant = this.variant;
353
353
  break;
354
354
  case "inverted":
355
- d(this.$cell, this.$children, this.inverted, [
355
+ u(this.$cell, this.$children, this.inverted, [
356
356
  this.$pxIcon
357
357
  ]);
358
358
  break;
@@ -497,14 +497,14 @@ const m = class m extends g {
497
497
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
498
498
  }
499
499
  };
500
- m.nativeName = "a";
501
- let p = m;
502
- customElements.get("px-cell-link") || customElements.define("px-cell-link", p);
500
+ f.nativeName = "a";
501
+ let v = f;
502
+ customElements.get("px-cell-link") || customElements.define("px-cell-link", v);
503
503
  const j = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}", E = new CSSStyleSheet();
504
504
  E.replaceSync(n);
505
505
  const D = new CSSStyleSheet();
506
506
  D.replaceSync(j);
507
- const A = class A extends g {
507
+ const h = class h extends m {
508
508
  template() {
509
509
  return `
510
510
  <px-cell hoverable>
@@ -517,15 +517,15 @@ const A = class A extends g {
517
517
  }
518
518
  constructor() {
519
519
  super(D, E);
520
- const t = document.createElement(this.nativeName);
520
+ const t = document.createElement(h.nativeName);
521
521
  t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
522
522
  }
523
523
  connectedCallback() {
524
- if (super.connectedCallback(), this.$slotVisual) {
524
+ if (this.$slotVisual) {
525
525
  const t = this.querySelector('px-img[slot="visual"]');
526
- t && l(t);
526
+ t && c(t);
527
527
  }
528
- c(this);
528
+ d(this);
529
529
  }
530
530
  static get observedAttributes() {
531
531
  return [
@@ -554,7 +554,7 @@ const A = class A extends g {
554
554
  this.$cell.variant = this.variant;
555
555
  break;
556
556
  case "inverted":
557
- d(this.$cell, this.$children, this.inverted);
557
+ u(this.$cell, this.$children, this.inverted);
558
558
  break;
559
559
  case "disabled":
560
560
  $(this.$cell, this.$children, this.disabled, [], {
@@ -682,18 +682,18 @@ const A = class A extends g {
682
682
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
683
683
  }
684
684
  };
685
- A.nativeName = "button";
686
- let v = A;
687
- customElements.get("px-cell-button") || customElements.define("px-cell-button", v);
685
+ h.nativeName = "button", h.accessorExclusions = ["disabled"];
686
+ let k = h;
687
+ customElements.get("px-cell-button") || customElements.define("px-cell-button", k);
688
688
  const L = new CSSStyleSheet();
689
689
  L.replaceSync(n);
690
- const O = ["", "left", "right"];
691
- class W extends f {
690
+ const W = ["", "left", "right"];
691
+ class G extends A {
692
692
  template() {
693
693
  return `
694
694
  <div class="cell-checkbox">
695
695
  <px-cell hoverable>
696
- <px-checkbox slot="prefix" aria-hidden="true" tabindex="-1" ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
696
+ <px-checkbox slot="prefix" inert></px-checkbox>
697
697
  <slot name="visual" slot="visual"></slot>
698
698
  <slot name="label" slot="label"></slot>
699
699
  <slot name="description" slot="description"></slot>
@@ -703,12 +703,12 @@ class W extends f {
703
703
  }
704
704
  constructor() {
705
705
  var t;
706
- super(L), 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}`);
706
+ super(L), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
707
707
  }
708
708
  connectedCallback() {
709
- if (this.$slotVisual) {
709
+ 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) {
710
710
  const t = this.querySelector('px-img[slot="visual"]');
711
- t && l(t);
711
+ t && c(t);
712
712
  }
713
713
  this.addEventListener("mouseover", () => {
714
714
  this.$checkbox.setAttribute("hover", "");
@@ -722,7 +722,7 @@ class W extends f {
722
722
  }
723
723
  }), this.addEventListener("click", (t) => {
724
724
  this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
725
- }), this.hasAttribute("checked") && (this.checked = !0), c(this);
725
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
726
726
  }
727
727
  static get observedAttributes() {
728
728
  return [
@@ -755,7 +755,7 @@ class W extends f {
755
755
  this.$cell.variant = this.variant;
756
756
  break;
757
757
  case "inverted":
758
- d(this.$cell, this.$children, this.inverted, [
758
+ u(this.$cell, this.$children, this.inverted, [
759
759
  this.$checkbox
760
760
  ]);
761
761
  break;
@@ -785,7 +785,9 @@ class W extends f {
785
785
  if (this.checkName(q, s))
786
786
  this.$checkbox.setAttribute("state", s);
787
787
  else {
788
- console.error(`${s} is not a valid state value`);
788
+ l(
789
+ `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
790
+ );
789
791
  return;
790
792
  }
791
793
  break;
@@ -798,15 +800,15 @@ class W extends f {
798
800
  }
799
801
  }
800
802
  handleDisabledAttributeChange(t) {
801
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$checkbox.setAttribute("disabled", ""), this.$children.forEach((e) => {
803
+ t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$checkbox.setAttribute("disabled", ""), this.$children.forEach((e) => {
802
804
  e.hasAttribute("disabled") || e.setAttribute("disabled", "");
803
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$checkbox.removeAttribute("disabled"), this.$children.forEach((e) => {
805
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$checkbox.removeAttribute("disabled"), this.$children.forEach((e) => {
804
806
  e.hasAttribute("disabled") && e.removeAttribute("disabled");
805
807
  }));
806
808
  }
807
809
  handleCheckedAttributeChange(t) {
808
810
  var e;
809
- (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(
811
+ (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(
810
812
  new Event("change", {
811
813
  bubbles: !0,
812
814
  composed: !0
@@ -815,8 +817,10 @@ class W extends f {
815
817
  ));
816
818
  }
817
819
  handleCheckboxPositionChange(t) {
818
- if (!this.checkName(O, t)) {
819
- console.error(`${t} is not a valid position value`);
820
+ if (!this.checkName(W, t)) {
821
+ l(
822
+ `${t} is not an allowed position value for ${this.tagName.toLowerCase()}`
823
+ );
820
824
  return;
821
825
  }
822
826
  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 f {
974
978
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
975
979
  }
976
980
  }
977
- customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", W);
981
+ customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", G);
978
982
  const I = new CSSStyleSheet();
979
983
  I.replaceSync(n);
980
- class G extends f {
984
+ class J extends A {
981
985
  template() {
982
986
  return `
983
987
  <div class="cell-switch">
984
988
  <px-cell hoverable>
985
- <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
989
+ <px-switch slot="action-indicator" inert></px-switch>
986
990
  <slot name="visual" slot="visual"></slot>
987
991
  <slot name="label" slot="label"></slot>
988
992
  <slot name="description" slot="description"></slot>
@@ -992,12 +996,12 @@ class G extends f {
992
996
  }
993
997
  constructor() {
994
998
  var t;
995
- super(I), 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}`);
999
+ super(I), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
996
1000
  }
997
1001
  connectedCallback() {
998
- if (this.$slotVisual) {
1002
+ if (this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
999
1003
  const t = this.querySelector('px-img[slot="visual"]');
1000
- t && l(t);
1004
+ t && c(t);
1001
1005
  }
1002
1006
  this.addEventListener("mouseover", () => {
1003
1007
  this.$switch.setAttribute("hover", "");
@@ -1011,7 +1015,7 @@ class G extends f {
1011
1015
  }
1012
1016
  }), this.addEventListener("click", (t) => {
1013
1017
  this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
1014
- }), this.hasAttribute("checked") && (this.checked = !0), c(this);
1018
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
1015
1019
  }
1016
1020
  static get observedAttributes() {
1017
1021
  return [
@@ -1042,7 +1046,7 @@ class G extends f {
1042
1046
  this.$cell.variant = this.variant;
1043
1047
  break;
1044
1048
  case "inverted":
1045
- d(this.$cell, this.$children, this.inverted, [
1049
+ u(this.$cell, this.$children, this.inverted, [
1046
1050
  this.$switch
1047
1051
  ]);
1048
1052
  break;
@@ -1073,15 +1077,15 @@ class G extends f {
1073
1077
  }
1074
1078
  }
1075
1079
  handleDisabledAttributeChange(t) {
1076
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$switch.setAttribute("disabled", ""), this.$children.forEach((e) => {
1080
+ t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$switch.setAttribute("disabled", ""), this.$children.forEach((e) => {
1077
1081
  e.hasAttribute("disabled") || e.setAttribute("disabled", "");
1078
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$switch.removeAttribute("disabled"), this.$children.forEach((e) => {
1082
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$switch.removeAttribute("disabled"), this.$children.forEach((e) => {
1079
1083
  e.hasAttribute("disabled") && e.removeAttribute("disabled");
1080
1084
  }));
1081
1085
  }
1082
1086
  handleCheckedAttributeChange(t) {
1083
1087
  var e;
1084
- (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
1088
+ (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
1085
1089
  new Event("change", {
1086
1090
  bubbles: !0,
1087
1091
  composed: !0
@@ -1236,16 +1240,16 @@ class G extends f {
1236
1240
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
1237
1241
  }
1238
1242
  }
1239
- customElements.get("px-cell-switch") || customElements.define("px-cell-switch", G);
1243
+ customElements.get("px-cell-switch") || customElements.define("px-cell-switch", J);
1240
1244
  const T = new CSSStyleSheet();
1241
1245
  T.replaceSync(n);
1242
- const J = ["", "left", "right"];
1243
- class K extends f {
1246
+ const K = ["", "left", "right"];
1247
+ class Q extends A {
1244
1248
  template() {
1245
1249
  return `
1246
1250
  <div class="cell-radio">
1247
1251
  <px-cell hoverable>
1248
- <px-radio-base slot="prefix" aria-hidden="true" tabindex="-1"></px-radio-base>
1252
+ <px-radio slot="prefix" inert></px-radio>
1249
1253
  <slot name="visual" slot="visual"></slot>
1250
1254
  <slot name="label" slot="label"></slot>
1251
1255
  <slot name="description" slot="description"></slot>
@@ -1254,27 +1258,28 @@ class K extends f {
1254
1258
  `;
1255
1259
  }
1256
1260
  constructor() {
1257
- var t, e;
1258
- super(T), 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}`);
1261
+ var t;
1262
+ super(T), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
1259
1263
  }
1260
1264
  connectedCallback() {
1261
- if (this.$slotVisual) {
1262
- const t = this.querySelector('px-img[slot="visual"]');
1263
- t && l(t);
1265
+ var t;
1266
+ 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) {
1267
+ const e = this.querySelector('px-img[slot="visual"]');
1268
+ e && c(e);
1264
1269
  }
1265
1270
  this.addEventListener("mouseover", () => {
1266
1271
  this.$radio.setAttribute("hover", "");
1267
1272
  }), this.addEventListener("mouseout", () => {
1268
1273
  this.$radio.removeAttribute("hover");
1269
- }), this.addEventListener("keypress", (t) => {
1270
- switch (t.stopPropagation(), t.preventDefault(), t.code) {
1274
+ }), this.addEventListener("keypress", (e) => {
1275
+ switch (e.stopPropagation(), e.preventDefault(), e.code) {
1271
1276
  case "Space":
1272
1277
  this.click();
1273
1278
  break;
1274
1279
  }
1275
- }), this.addEventListener("click", (t) => {
1276
- this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
1277
- }), this.hasAttribute("checked") && (this.checked = !0), c(this);
1280
+ }), this.addEventListener("click", (e) => {
1281
+ this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
1282
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
1278
1283
  }
1279
1284
  static get observedAttributes() {
1280
1285
  return [
@@ -1307,7 +1312,7 @@ class K extends f {
1307
1312
  this.$cell.variant = this.variant;
1308
1313
  break;
1309
1314
  case "inverted":
1310
- d(this.$cell, this.$children, this.inverted, [
1315
+ u(this.$cell, this.$children, this.inverted, [
1311
1316
  this.$radio
1312
1317
  ]);
1313
1318
  break;
@@ -1337,7 +1342,9 @@ class K extends f {
1337
1342
  if (this.checkName(M, s))
1338
1343
  this.$radio.setAttribute("state", s);
1339
1344
  else {
1340
- console.error(`${s} is not a valid state value`);
1345
+ l(
1346
+ `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1347
+ );
1341
1348
  return;
1342
1349
  }
1343
1350
  break;
@@ -1350,15 +1357,15 @@ class K extends f {
1350
1357
  }
1351
1358
  }
1352
1359
  handleDisabledAttributeChange(t) {
1353
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$radio.setAttribute("disabled", ""), this.$children.forEach((e) => {
1360
+ t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$radio.setAttribute("disabled", ""), this.$children.forEach((e) => {
1354
1361
  e.hasAttribute("disabled") || e.setAttribute("disabled", "");
1355
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$radio.removeAttribute("disabled"), this.$children.forEach((e) => {
1362
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$radio.removeAttribute("disabled"), this.$children.forEach((e) => {
1356
1363
  e.hasAttribute("disabled") && e.removeAttribute("disabled");
1357
1364
  }));
1358
1365
  }
1359
1366
  handleCheckedAttributeChange(t) {
1360
1367
  var e;
1361
- (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(
1368
+ (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(
1362
1369
  new Event("change", {
1363
1370
  bubbles: !0,
1364
1371
  composed: !0
@@ -1367,8 +1374,10 @@ class K extends f {
1367
1374
  ));
1368
1375
  }
1369
1376
  handleRadioPositionChange(t) {
1370
- if (!this.checkName(J, t)) {
1371
- console.error(`${t} is not a valid position value`);
1377
+ if (!this.checkName(K, t)) {
1378
+ l(
1379
+ `${t} is not an allowed position value for ${this.tagName.toLowerCase()}`
1380
+ );
1372
1381
  return;
1373
1382
  }
1374
1383
  this.$radio && (t === "" || t === "left" ? this.$radio.setAttribute("slot", "prefix") : t === "right" && this.$radio.setAttribute("slot", "action-indicator"));
@@ -1397,7 +1406,7 @@ class K extends f {
1397
1406
  return this.shadowRoot.querySelector(".cell-radio");
1398
1407
  }
1399
1408
  get $radio() {
1400
- return this.shadowRoot.querySelector("px-radio-base");
1409
+ return this.shadowRoot.querySelector("px-radio");
1401
1410
  }
1402
1411
  get $slotVisual() {
1403
1412
  return this.querySelector('[slot="visual"]');
@@ -1526,16 +1535,16 @@ class K extends f {
1526
1535
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
1527
1536
  }
1528
1537
  }
1529
- customElements.get("px-cell-radio") || customElements.define("px-cell-radio", K);
1538
+ customElements.get("px-cell-radio") || customElements.define("px-cell-radio", Q);
1530
1539
  export {
1531
- b as Cell,
1532
- v as CellButton,
1533
- W as CellCheckbox,
1534
- p as CellLink,
1535
- K as CellRadio,
1536
- G as CellSwitch,
1537
- O as cellCheckboxPosition,
1538
- J as cellRadioPosition,
1539
- F as radiusValues,
1540
- x as suffixButtonIconVariantValues
1540
+ g as Cell,
1541
+ k as CellButton,
1542
+ G as CellCheckbox,
1543
+ v as CellLink,
1544
+ Q as CellRadio,
1545
+ J as CellSwitch,
1546
+ W as cellCheckboxPosition,
1547
+ K as cellRadioPosition,
1548
+ _ as radiusValues,
1549
+ F as suffixButtonIconVariantValues
1541
1550
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-cell",
3
- "version": "2.0.0-alpha.1",
3
+ "version": "2.0.0-alpha.100",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
13
13
  "clean": "rm -rf dist",
14
14
  "build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
15
15
  "test": "vitest run --coverage",
16
- "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
16
+ "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
17
17
  },
18
18
  "publishConfig": {
19
19
  "access": "public"