@ionic/core 9.0.3-dev.11788449150.16022b1e → 9.0.3-dev.11790016799.1e269b7a

package/dist/collection/components/textarea/textarea.ionic.css

@@ -453,10 +453,6 @@
   overflow: hidden;
 }
 
-.textarea-outline {
-  box-sizing: border-box;
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -562,32 +558,6 @@
   --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
 }
 
-:host(.textarea-fill-outline) .textarea-wrapper {
-  background: initial;
-}
-
-:host(.textarea-fill-outline) .textarea-wrapper-inner {
-  /**
-   * The border should be relative to the inner wrapper
-   * so that it does not include the label.
-   */
-  position: relative;
-}
-
-:host(.textarea-fill-outline) .textarea-outline {
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: var(--border-radius);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--border-width) var(--border-style) var(--border-color);
-  background: var(--background);
-}
-
 /**
  * The bottom content should never have
  * a border with the outline style.
@@ -612,18 +582,6 @@
   --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
 }
 
-:host(.textarea-fill-solid) .textarea-wrapper {
-  border-bottom: none;
-  background: none;
-}
-
-:host(.textarea-fill-solid) .textarea-wrapper-inner {
-  border-radius: var(--border-radius);
-  position: relative;
-  border: var(--border-width) var(--border-style) var(--border-color);
-  background: var(--background);
-}
-
 :host(.textarea-fill-solid) .textarea-bottom {
   --border-width: var(--token-scale-0, 0px);
 }
@@ -674,21 +632,31 @@
   --highlight-color-focused: var(--ion-color-base);
 }
 
-:host(.textarea-size-small) .textarea-wrapper-inner {
+/**
+ * The size padding is scoped to the field cells rather than to the wrapper, so
+ * the label, which sits outside the field box, does not inherit it.
+ */
+:host(.textarea-size-small) .textarea-start,
+:host(.textarea-size-small) .native-wrapper,
+:host(.textarea-size-small) .textarea-end {
   --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
   --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
   --padding-start: var(--token-space-300, var(--token-scale-300, 12px));
 }
 
-:host(.textarea-size-medium) .textarea-wrapper-inner {
+:host(.textarea-size-medium) .textarea-start,
+:host(.textarea-size-medium) .native-wrapper,
+:host(.textarea-size-medium) .textarea-end {
   --padding-top: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
-:host(.textarea-size-large) .textarea-wrapper-inner {
+:host(.textarea-size-large) .textarea-start,
+:host(.textarea-size-large) .native-wrapper,
+:host(.textarea-size-large) .textarea-end {
   --padding-top: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
   --padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
@@ -714,63 +682,158 @@
   --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
 }
 
-:host([auto-grow]) .textarea-wrapper-inner {
-  height: auto;
-}
-
 :host([auto-grow]) .native-wrapper {
   min-height: inherit;
   max-height: inherit;
 }
 
+/**
+ * The label is nested in the control so that every theme renders the same
+ * tree. Laying the wrapper out as a grid and flattening the control lets the
+ * label sit outside the field box, which is drawn by `::before` over the cells
+ * the label does not occupy.
+ */
 .textarea-wrapper {
-  gap: var(--token-space-100, var(--token-scale-100, 4px));
+  display: grid;
+  /**
+   * Auto rows stretch to fill any extra height by default, which would pad the
+   * label row and pull the field box away from it.
+   */
+  align-content: start;
+  /**
+   * The wrapper spans the label too, so the background belongs on the field
+   * box rather than here.
+   */
+  background: transparent;
 }
 
-:host(.textarea-label-placement-start) .textarea-wrapper {
-  flex-direction: row;
+.textarea-control {
+  display: contents;
+}
+
+.textarea-wrapper::before {
+  border-radius: var(--border-radius, 0);
+  align-self: stretch;
+  box-sizing: border-box;
+  content: "";
+  pointer-events: none;
+  /**
+   * The wrapper takes its min-height from the host and the pseudo-element
+   * inherits it, so a min-height on the host still reaches the box.
+   */
+  min-height: inherit;
+  border: var(--border-width) var(--border-style) var(--border-color);
+  background: var(--background);
+}
+
+:host(.textarea-label-placement-start) .textarea-wrapper,
+:host(.textarea-label-placement-fixed) .textarea-wrapper {
+  grid-template-columns: [label] auto [field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end];
+  grid-template-rows: [label field] auto;
+}
+
+:host(.textarea-label-placement-start) .label-text-wrapper,
+:host(.textarea-label-placement-fixed) .label-text-wrapper {
+  -webkit-margin-end: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
+  grid-column: label;
 }
 
 :host(.textarea-label-placement-end) .textarea-wrapper {
-  flex-direction: row-reverse;
+  grid-template-columns: [field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end label] auto;
+  grid-template-rows: [label field] auto;
+}
+
+:host(.textarea-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-start: var(--token-space-100, var(--token-scale-100, 4px));
+  grid-column: label;
 }
 
 :host(.textarea-label-placement-stacked) .textarea-wrapper,
 :host(.textarea-label-placement-floating) .textarea-wrapper {
-  flex-direction: column;
-  align-items: start;
+  grid-template-columns: [field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end];
+  grid-template-rows: [label] auto [field] auto;
+}
+
+:host(.textarea-label-placement-stacked) .label-text-wrapper,
+:host(.textarea-label-placement-floating) .label-text-wrapper {
+  margin-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+  grid-column: field-start/field-end;
+}
+
+/**
+ * The templates above all name the same lines, so every placement shares these.
+ * A label with its own row lands on the label row. Otherwise that name resolves
+ * to the only row there is.
+ */
+.label-text-wrapper {
+  grid-row: label;
+}
+
+.textarea-start {
+  grid-row: field;
+  grid-column: slot-start;
 }
 
-.textarea-wrapper-inner {
+.native-wrapper {
+  grid-row: field;
+  grid-column: native;
+}
+
+.textarea-end {
+  grid-row: field;
+  grid-column: slot-end;
+}
+
+.textarea-wrapper::before {
+  grid-row: field;
+  grid-column: field-start/field-end;
+}
+
+/**
+ * The padding sits on the cells that the field box covers, so the label is not
+ * indented by it.
+ */
+.textarea-start {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
-  display: flex;
-  width: 100%;
-  min-height: inherit;
-  box-sizing: border-box;
 }
 
-:host([rows]:not([auto-grow])) .textarea-wrapper-inner {
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
+/**
+ * The native wrapper's own content sizes the field row, and it stretches to
+ * fill it. The shared stylesheet sets `height: 100%`, which would resolve
+ * against the row this element is itself sizing, so reset it here.
+ */
+.native-wrapper {
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  align-self: stretch;
+  height: auto;
+}
+
+.textarea-end {
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+}
+
+:host([rows]:not([auto-grow])) .native-wrapper {
   padding-top: 0;
   padding-bottom: 0;
 }
 
 /**
- * Top and bottom padding are applied to ensure that text remains visible 
- * as it scrolls past the container boundaries. This provides a "sneak peek" 
- * of the content transitioning off-screen, mirroring native textarea behavior 
- * where text isn't immediately clipped or "glued" to the border at the 
+ * Top and bottom padding are applied to ensure that text remains visible
+ * as it scrolls past the container boundaries. This provides a "sneak peek"
+ * of the content transitioning off-screen, mirroring native textarea behavior
+ * where text isn't immediately clipped or "glued" to the border at the
  * scroll limits.
  */
-:host([rows]:not([auto-grow])) .textarea-wrapper-inner .native-textarea {
+:host([rows]:not([auto-grow])) .native-wrapper .native-textarea {
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
 }
@@ -881,21 +944,6 @@ ion-icon {
   margin-top: var(--token-space-050, var(--token-scale-050, 2px));
 }
 
-:host([rows]:not([auto-grow])) .textarea-start,
-:host([rows]:not([auto-grow])) .textarea-end {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-}
-
-.textarea-control {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
 :host(.has-focus) {
   --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));

package/dist/collection/components/textarea/textarea.ios.css

@@ -455,10 +455,6 @@
   overflow: hidden;
 }
 
-.textarea-outline {
-  box-sizing: border-box;
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise

package/dist/collection/components/textarea/textarea.js

@@ -25,6 +25,9 @@ import { getCounterText } from "../input/input.utils";
  * @part error-text - Supporting text displayed beneath the textarea label when the textarea is invalid and touched.
  * @part counter - The character counter displayed when the counter property is set.
  * @part bottom - The container element for helper text, error text, and counter.
+ * @part start - The wrapper element for the content in the start slot.
+ * @part control - The wrapper element containing the label and the native textarea. The `"ionic"` theme flattens this wrapper, so it cannot be given a box of its own there.
+ * @part end - The wrapper element for the content in the end slot.
  */
 export class Textarea {
     constructor() {
@@ -519,7 +522,7 @@ export class Textarea {
      * Renders the outline border with a notch for the label.
      */
     renderOutlineContainer() {
-        return (h("div", { class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
+        return (h("div", { key: "outline", class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
                 'textarea-outline-notch': true,
                 'textarea-outline-notch-hidden': !this.hasLabel,
             } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "textarea-outline-end" })));
@@ -528,32 +531,24 @@ export class Textarea {
         const { inputId, disabled } = this;
         return (h("textarea", { class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, this.getValue()));
     }
-    /**
-     * The ionic theme keeps the label above a field box that wraps the slots and
-     * the textarea, so the label can size independently of the slotted content.
-     */
     renderStartContainer() {
-        return (h("div", { class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
+        return (h("div", { key: "start", class: "textarea-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
     }
     renderEndContainer() {
-        return (h("div", { class: "textarea-end" }, h("slot", { name: "end" })));
-    }
-    renderIonicField() {
-        return [
-            this.renderLabel(),
-            h("div", { class: "textarea-wrapper-inner" }, this.getFill() === 'outline' && h("div", { class: "textarea-outline" }), this.renderStartContainer(), h("div", { class: "textarea-control" }, h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, this.renderNativeTextarea())), this.renderEndContainer()),
-        ];
+        return (h("div", { key: "end", class: "textarea-end", part: "end" }, h("slot", { name: "end" })));
     }
     /**
-     * The ios and md themes nest the label alongside the textarea so a floating
-     * label can escape the control and clear the start and end slots.
+     * Every theme renders the same label and control structure, aside from the md
+     * outline container below. The label is nested alongside the textarea so the
+     * ios and md floating label can escape the control and clear the start and
+     * end slots. The ionic theme lifts it outside the field with grid instead.
      */
-    renderNativeField() {
+    renderField() {
         const hasOutlineFill = getIonTheme(this) === 'md' && this.getFill() === 'outline';
         return [
             hasOutlineFill && this.renderOutlineContainer(),
             this.renderStartContainer(),
-            h("div", { class: "textarea-control" }, this.renderLabel(), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, this.renderNativeTextarea())),
+            h("div", { key: "control", class: "textarea-control", part: "control" }, this.renderLabel(), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, this.renderNativeTextarea())),
             this.renderEndContainer(),
         ];
     }
@@ -616,7 +611,7 @@ export class Textarea {
          * the textarea has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '366c081a47e0e0b7600b2d0a8a3232cd7a1adf41', class: createColorClasses(this.color, {
+        return (h(Host, { key: '696d649f4d05739857823887be65ae9252ba77dc', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -628,7 +623,7 @@ export class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, h("label", { key: 'c7bd5d804ddb2cbc1545e36577a618f398034d5d', class: "textarea-wrapper", htmlFor: inputId, onMouseDown: this.onLabelPointerDown, onClick: this.onLabelClick, part: "wrapper" }, theme === 'ionic' ? this.renderIonicField() : this.renderNativeField(), shouldRenderHighlight && h("div", { key: 'e5dee73cfbe18f72d01d1761f8ecfcc2b21654fe', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '61e64a211779e73def2b5d55a19dfc2f76463968', class: "textarea-wrapper", htmlFor: inputId, onMouseDown: this.onLabelPointerDown, onClick: this.onLabelClick, part: "wrapper" }, this.renderField(), shouldRenderHighlight && h("div", { key: '4ada5405635e1155e6b750ed797fd1ab82e6b314', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.md.css

@@ -455,10 +455,6 @@
   overflow: hidden;
 }
 
-.textarea-outline {
-  box-sizing: border-box;
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise

package/dist/collection/components/toggle/toggle.js

@@ -1,8 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import checkRegular from "@phosphor-icons/core/assets/regular/check.svg";
-import minusRegular from "@phosphor-icons/core/assets/regular/minus.svg";
 import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { checkInvalidState, createItemMultipleInputsObserver } from "../../utils/forms/index";
 import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
@@ -249,22 +247,17 @@ export class Toggle {
     setFocus() {
         this.el.focus();
     }
+    /**
+     * Get the default icon to use for the checked icon based on the theme.
+     */
     get toggleDefaultCheckedIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: removeOutline,
-            ionic: checkRegular,
-            md: checkmarkOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the default icon
-        return defaultIcon;
+        return theme === 'ios' ? removeOutline : checkmarkOutline;
     }
     /**
      * Get the icon to use for the checked icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get toggleCheckedIcon() {
@@ -272,20 +265,13 @@ export class Toggle {
     }
     /**
      * Get the icon to use for the unchecked icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get toggleUncheckedIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: ellipseOutline,
-            ionic: minusRegular,
-            md: removeOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured toggle unchecked icon or the default icon
+        const defaultIcon = theme === 'ios' ? ellipseOutline : removeOutline;
         return config.get('toggleUncheckedIcon', defaultIcon);
     }
     renderOnOffSwitchLabels(checked) {
@@ -354,7 +340,7 @@ export class Toggle {
         // The attributes are matched too because the class needs the item to render.
         const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'f3252e2c92ba027748413620748d479b8c865805', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: '030fcdcc6074a283de193a04b4c52a9dda2a89b3', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': inItem,
                 // `ion-focusable` has to stay on because it is what makes the item focusable.
@@ -369,10 +355,10 @@ export class Toggle {
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
-            }) }, h("label", { key: '29c8cb1ad33e2e5d982fa19f2ebcfa7b328f3be7', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '8aefbd4f2be1d1cbe5350200aa0ff321370ff101', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: '4bbf765fed7eb016cbd560cf1bd8cd4e32a28f20', class: {
+            }) }, h("label", { key: '1d7d4f534661093ea5ea7c885ca7ba355983ff88', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '43de25ac1c815db634915c302c934d0827b32b4c', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: '9ed1fd6cd5b912b25628a2e2c29f0d758e0a7a24', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'fbfd9fef85b53219b52b0736a7aa510877d52c78' }), this.renderHintText()), h("div", { key: 'b84836acce007f477c2a9c6dfaace3856068b58e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '0b7834f1e125d8a9c0acc7577f344812ccaf52fe' }), this.renderHintText()), h("div", { key: '16bebe3d305cccbfcf4d85eb16ac3fe94ae2c59c', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/test/playwright/field-geometry.js

@@ -0,0 +1,34 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+/**
+ * These tracks are adjacent with no gap, so the edges are meant to be equal.
+ * Engines round fractional track origins differently, and a real ordering
+ * regression moves a cell by a whole track, so a pixel of slack is safe.
+ */
+const EDGE_TOLERANCE = 1;
+/**
+ * Asserts that a form field's start slot, control and end slot occupy one row,
+ * in inline order.
+ *
+ * The ionic theme lays these out as grid columns. An invalid column template is
+ * dropped silently, and the cells then auto-place into a row each, so checking
+ * that they share a row is what catches it.
+ *
+ * @param host The form field element.
+ * @param prefix The component's cell-class prefix: `input`, `select` or `textarea`.
+ */
+export const expectFieldCellsShareARow = async (host, prefix) => {
+    const start = await host.locator(`.${prefix}-start`).boundingBox();
+    const native = await host.locator('.native-wrapper').boundingBox();
+    const end = await host.locator(`.${prefix}-end`).boundingBox();
+    expect(native).not.toBeNull();
+    for (const cell of [start, end]) {
+        expect(cell).not.toBeNull();
+        expect(cell.y).toBeLessThan(native.y + native.height);
+        expect(native.y).toBeLessThan(cell.y + cell.height);
+    }
+    expect(native.x).toBeGreaterThan(start.x + start.width - EDGE_TOLERANCE);
+    expect(end.x).toBeGreaterThan(native.x + native.width - EDGE_TOLERANCE);
+};

package/dist/collection/utils/test/playwright/index.js

@@ -11,3 +11,4 @@ export * from './matchers';
 export * from './viewports';
 export * from './generator';
 export * from './detach-reattach';
+export * from './field-geometry';