@schukai/monster 4.148.9 → 4.149.0

package/source/components/form/field-set.mjs

@@ -70,6 +70,12 @@ const toggleSwitchElementSymbol = Symbol("toggleSwitchElement");
  */
 const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
 
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_CHOICE_LABEL = "data-monster-field-set-choice-label";
+
 /**
  * A field set control that can be used to group form elements.
  *
@@ -99,6 +105,7 @@ class FieldSet extends CustomControl {
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 		updateExtendedFields.call(this);
+		updateChoiceLabels.call(this);
 		updateColumns.call(this);
 		return this;
 	}
@@ -333,6 +340,23 @@ function updateExtendedFields() {
 	}
 }
 
+/**
+ * Keep native checkbox and radio labels visually grouped without changing the
+ * established split layout for ordinary field labels.
+ *
+ * @private
+ */
+function updateChoiceLabels() {
+	const labels = getSlottedElements.call(this, "label");
+	for (const label of labels) {
+		const isChoiceLabel =
+			label.querySelector(
+				':scope > input:is([type="checkbox"], [type="radio"])',
+			) instanceof HTMLInputElement;
+		label.toggleAttribute(ATTRIBUTE_CHOICE_LABEL, isChoiceLabel);
+	}
+}
+
 /**
  * @private
  */
@@ -351,6 +375,12 @@ function updateColumns() {
  * @fires monster-field-set-clicked
  */
 function initEventHandler() {
+	for (const slot of this.shadowRoot.querySelectorAll("slot")) {
+		slot.addEventListener("slotchange", () => {
+			updateChoiceLabels.call(this);
+		});
+	}
+
 	this[toggleSwitchElementSymbol].setOption(
 		"labels.toggleSwitchOn",
 		this.getOption("labels.toggleSwitchOn"),

package/source/components/form/login.mjs

@@ -1918,19 +1918,21 @@ function getTemplate() {
 						collapse:field-set-login-collapse"
                         part="login-field-set">
                     <slot name="login-header"></slot>
-                    <label part="login-label" data-monster-replace="path:labels.username"></label>
-                    <input part="login-username"
+                    <label for="monster-login-username" part="login-label" data-monster-replace="path:labels.username"></label>
+                    <input id="monster-login-username" part="login-username"
 						   data-monster-attributes="placeholder path:placeholder.username, autocomplete path:autocomplete.username"
 						   type="text" name="username" autofocus>
-                    <div data-monster-attributes="class path:classes.usernameInvalid"></div>
+                    <div style="grid-column: 1 / -1"
+                         data-monster-attributes="class path:classes.usernameInvalid"></div>
                     <label part="login-password-label" data-monster-replace="path:labels.password"></label>
                     <monster-password
-						data-monster-attributes="data-monster-option-placeholder path:placeholder.password, data-monster-option-autocomplete path:autocomplete.password"
+						data-monster-attributes="data-monster-option-placeholder path:placeholder.password, data-monster-option-autocomplete path:autocomplete.password, data-monster-option-labels-input path:labels.password"
 						exportparts="input-group:input-group-password,
 						control:input-group-password-control,
 						input:input-group-password-input" part="login-password"
 						data-monster-bind="path:password"></monster-password>
-                    <div data-monster-attributes="class path:classes.passwordInvalid"></div>
+                    <div style="grid-column: 1 / -1"
+                         data-monster-attributes="class path:classes.passwordInvalid"></div>
                     <monster-message-state-button id="loginButton"
                                                   part="login-button"
 												  data-monster-attributes="data-monster-option-classes-button path:classes.button"
@@ -1965,14 +1967,15 @@ function getTemplate() {
 									content:field-set-forgot-password-content,
 									collapse:field-set-forgot-password-collapse">
                     <slot name="forgot-password-header"></slot>
-                    <label part="forgot-password-label" data-monster-replace="path:labels.mailAddress"></label>
-                    <input type="email" name="email"
+                    <label for="monster-login-email" part="forgot-password-label" data-monster-replace="path:labels.mailAddress"></label>
+                    <input id="monster-login-email" type="email" name="email"
 						   part="field-set-forgot-password-email"
                            data-monster-attributes="accesskey path:accessKeys.username,
                                                     placeholder path:placeholder.email,
                                                     autocomplete path:autocomplete.email"
                            >
-                    <div data-monster-attributes="class path:classes.emailInvalid"></div>
+                    <div style="grid-column: 1 / -1"
+                         data-monster-attributes="class path:classes.emailInvalid"></div>
                     <monster-message-state-button id="requestLinkButton"
                                                   part="request-link-button"
 												  data-monster-attributes="data-monster-option-classes-button path:classes.button"
@@ -2011,7 +2014,7 @@ function getTemplate() {
                     <slot name="second-factor-header"></slot>
                     <label part="second-factor-label" data-monster-replace="path:labels.secondFactor"></label>
                     <div>
-                        <monster-digits data-monster-attributes="data-monster-option-digits path:digits"
+                        <monster-digits data-monster-attributes="data-monster-option-digits path:digits, data-monster-option-labels-group path:labels.secondFactor"
 										part="second-factor-digits-control"
                                         id="secondFactorControl"></monster-digits>
                     </div>
@@ -2053,7 +2056,7 @@ function getTemplate() {
                     <label part="digits-label" data-monster-replace="path:labels.digits"></label>
                     <div>
                         <monster-digits part="digits-control" 
-							data-monster-attributes="data-monster-option-digits path:digits"
+							data-monster-attributes="data-monster-option-digits path:digits, data-monster-option-labels-group path:labels.digits"
                                         id="digitsControl"></monster-digits>
                     </div>
                     <monster-message-state-button id="digitsButton"

package/source/components/form/password.mjs

@@ -115,6 +115,8 @@ class Password extends CustomControl {
 	 * @property {string} autocomplete="off" The autocomplete state of the input field
 	 * @property {string} inputmode="text" The inputmode state of the input field
 	 * @property {Object} aria Aria attributes
+	 * @property {Object} labels Accessible labels
+	 * @property {string} labels.input="Password" Label for the native password input
 	 * @property {boolean} aria.required=false The required state of the input field
 	 * @property {string} aria.placeholder="" The placeholder of the input field
 	 * @property {boolean} disabled=false Disabled state
@@ -142,6 +144,9 @@ class Password extends CustomControl {
 				required: false,
 				placeholder: "",
 			},
+			labels: {
+				input: "Password",
+			},
 			disabled: false,
 			value: null,
 
@@ -261,6 +266,7 @@ function getTemplate() {
 			    required path:required,
 			    autocomplete path:autocomplete,
 			    inputmode path:inputmode,
+			    aria-label path:labels.input,
 			    aria-required path:aria.required,
 			    aria-placeholder path:aria.placeholder">
                 <svg viewBox="0 0 16 16" data-monster-role="visible-icon" class="hidden">

package/source/components/form/popper-button.mjs

@@ -463,7 +463,7 @@ function updatePopper() {
 
 	positionPopper.call(
 		this,
-		this[controlElementSymbol],
+		this[buttonElementSymbol],
 		this[popperElementSymbol],
 		this.getOption("popper", {}),
 	);

package/source/components/form/quantity.mjs

@@ -103,6 +103,10 @@ class Quantity extends CustomControl {
 	 * @property {string} templateMapping.plus Icon (SVG-Path) Plus
 	 * @property {string} templateMapping.minus Icon (SVG-Path) Minus
 	 * @property {Object} classes CSS classes
+	 * @property {Object} labels Accessible labels
+	 * @property {string} labels.input="Quantity" Label for the numeric input
+	 * @property {string} labels.decrement="Decrease quantity" Label for the decrement button
+	 * @property {string} labels.increment="Increase quantity" Label for the increment button
 	 * @property {string} classes.button Button class (e.g. monster-button-outline-primary)
 	 * @property {string} classes.input Additional class for input
 	 * @property {Object} features Feature toggles
@@ -125,12 +129,17 @@ class Quantity extends CustomControl {
 				plus: `
           <path d="M8 1a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2H9v5a1 1 0 1 1-2 0V9H2a1 1 0 1 1 0-2h5V2a1 1 0 0 1 1-1z"/>`,
 				minus: `
-          <path d="M2 7.5a1 1 0 0 0 0 1H14a1 1 0 1 0 0-2H2a1 1 0 0 0 0 1z"/>`,
+          <path d="M2 7h12v2H2z"/>`,
 			},
 			classes: {
 				button: "monster-button-outline-primary",
 				input: "",
 			},
+			labels: {
+				input: "Quantity",
+				decrement: "Decrease quantity",
+				increment: "Increase quantity",
+			},
 			features: {
 				editable: true,
 				hold: true,
@@ -341,9 +350,8 @@ function getTemplate() {
       <monster-input-group part="input-group">
         <button type="button"
                 part="decrement-button"
-                data-monster-attributes="class path:classes.button"
                 data-monster-role="decrement"
-                aria-label="decrement">
+                data-monster-attributes="class path:classes.button, aria-label path:labels.decrement">
           <svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"
                         >\${minus}</svg>
         </button>
@@ -353,14 +361,14 @@ function getTemplate() {
                data-monster-attributes="
                   class path:classes.input,
                   placeholder path:placeholder,
-                  inputmode path:inputmode"
+                  inputmode path:inputmode,
+                  aria-label path:labels.input"
                autocomplete="off" />
 
         <button type="button"
                 part="increment-button"
-                data-monster-attributes="class path:classes.button"
                 data-monster-role="increment"
-                aria-label="increment">
+                data-monster-attributes="class path:classes.button, aria-label path:labels.increment">
           <svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor">\${plus}</svg>
         </button>
       </monster-input-group>

package/source/components/form/register-wizard.mjs

@@ -250,6 +250,7 @@ class RegisterWizard extends CustomElement {
 	}
 
 	[assembleMethodSymbol]() {
+		ensureLabels.call(this);
 		super[assembleMethodSymbol]();
 		this[currentStepSymbol] = 0;
 		this[completedSymbol] = false;
@@ -265,12 +266,14 @@ class RegisterWizard extends CustomElement {
 		applyPasswordConfirmVisibility.call(this);
 		applyProfileFeatureVisibility.call(this);
 		applyAddressLayout.call(this);
-		ensureLabels.call(this);
 		applyFieldLabels.call(this);
 		updateWizardLabels.call(this);
 		updateStepVisibility.call(this);
 		loadConsentTopics.call(this);
 		goToStep.call(this, 0, true);
+		setTimeout(() => {
+			applyFieldLabels.call(this);
+		}, 0);
 		return this;
 	}
 
@@ -1247,8 +1250,11 @@ function ensureLabels() {
 		this.setOption("labels", fallback);
 		return;
 	}
-	const merged = Object.assign({}, fallback, current);
-	this.setOption("labels", merged);
+	for (const [key, value] of Object.entries(fallback)) {
+		if (current[key] === undefined) {
+			this.setOption(`labels.${key}`, value);
+		}
+	}
 }
 
 function applyFieldLabels() {
@@ -1297,66 +1303,81 @@ function applyFieldLabels() {
 		'[data-monster-role~="country-label"]',
 		labels.country,
 	);
+	setLabelText.call(
+		this,
+		'[data-monster-role="consents-title"]',
+		labels.consentsTitle,
+	);
 
 	setInputMeta.call(
 		this,
 		this[emailInputSymbol],
 		labels.emailPlaceholder,
 		labels.emailAria,
+		this.getOption("autocomplete.email"),
 	);
 	setInputMeta.call(
 		this,
 		this[passwordConfirmInputSymbol],
 		labels.passwordConfirmPlaceholder,
 		labels.passwordConfirmAria,
+		this.getOption("autocomplete.passwordConfirm"),
 	);
 	setInputMeta.call(
 		this,
 		this[profileInputsSymbol]?.firstName,
 		labels.firstNamePlaceholder,
 		labels.firstNameAria,
+		this.getOption("autocomplete.firstName"),
 	);
 	setInputMeta.call(
 		this,
 		this[profileInputsSymbol]?.lastName,
 		labels.lastNamePlaceholder,
 		labels.lastNameAria,
+		this.getOption("autocomplete.lastName"),
 	);
 	setInputMeta.call(
 		this,
 		this[profileInputsSymbol]?.birthDate,
 		null,
 		labels.birthDateAria,
+		this.getOption("autocomplete.birthDate"),
 	);
 	setInputMeta.call(
 		this,
 		this[profileInputsSymbol]?.nationality,
 		labels.nationalityPlaceholder,
 		labels.nationalityAria,
+		this.getOption("autocomplete.nationality"),
 	);
 	setInputMeta.call(
 		this,
 		this[addressInputsSymbol]?.street,
 		labels.streetPlaceholder,
 		labels.streetAria,
+		this.getOption("autocomplete.street"),
 	);
 	setInputMeta.call(
 		this,
 		this[addressInputsSymbol]?.zip,
 		labels.zipPlaceholder,
 		labels.zipAria,
+		this.getOption("autocomplete.zip"),
 	);
 	setInputMeta.call(
 		this,
 		this[addressInputsSymbol]?.city,
 		labels.cityPlaceholder,
 		labels.cityAria,
+		this.getOption("autocomplete.city"),
 	);
 	setInputMeta.call(
 		this,
 		this[addressInputsSymbol]?.country,
 		labels.countryPlaceholder,
 		labels.countryAria,
+		this.getOption("autocomplete.country"),
 	);
 }
 
@@ -1376,7 +1397,7 @@ function setLabelText(selector, text) {
 	element.textContent = text || "";
 }
 
-function setInputMeta(element, placeholder, aria) {
+function setInputMeta(element, placeholder, aria, autocomplete) {
 	if (!element) {
 		return;
 	}
@@ -1386,6 +1407,9 @@ function setInputMeta(element, placeholder, aria) {
 	if (aria) {
 		element.setAttribute("aria-label", aria);
 	}
+	if (autocomplete) {
+		element.setAttribute("autocomplete", autocomplete);
+	}
 }
 
 async function loadConsentTopics() {
@@ -1799,8 +1823,8 @@ function getTemplate() {
                 <div data-monster-role="content" part="content">
                     <section data-monster-role="panel" data-step="email" part="panel panel-email">
                         <monster-field-set data-monster-role="field-set-email" part="field-set field-set-email">
-                            <label data-monster-role="field-label email-label" part="field-label email-label"
-                                   data-monster-replace="path:labels.email"></label>
+                            <label data-monster-role="field-label email-label"
+                                   part="field-label email-label"></label>
                             <input data-monster-role="email-input" part="input input-email"
                                    type="text" name="email"
                                    data-monster-attributes="placeholder path:labels.emailPlaceholder, autocomplete path:autocomplete.email, aria-label path:labels.emailAria" />
@@ -1817,14 +1841,14 @@ function getTemplate() {
 
                     <section data-monster-role="panel" data-step="password" part="panel panel-password">
                         <monster-field-set data-monster-role="field-set-password" part="field-set field-set-password">
-                            <label data-monster-role="field-label password-label" part="field-label password-label"
-                                   data-monster-replace="path:labels.password"></label>
+                            <label data-monster-role="field-label password-label"
+                                   part="field-label password-label"></label>
                             <monster-password data-monster-role="password-input" part="input input-password"
-                                              data-monster-attributes="data-monster-option-autocomplete path:autocomplete.password, aria-label path:labels.passwordAria"></monster-password>
+                                              data-monster-attributes="data-monster-option-autocomplete path:autocomplete.password, data-monster-option-labels-input path:labels.passwordAria"></monster-password>
                             <label data-monster-role="field-label password-confirm-label"
                                    part="field-label password-confirm-label"
                                    data-monster-attributes="class path:features.confirmPassword | ?::hidden"
-                                   data-monster-replace="path:labels.passwordConfirm"></label>
+                            ></label>
                             <input data-monster-role="password-confirm-input" part="input input-password-confirm"
                                    type="password" name="passwordConfirm"
                                    data-monster-attributes="class path:features.confirmPassword | ?::hidden, placeholder path:labels.passwordConfirmPlaceholder, autocomplete path:autocomplete.passwordConfirm, aria-label path:labels.passwordConfirmAria" />
@@ -1842,25 +1866,25 @@ function getTemplate() {
 
                     <section data-monster-role="panel" data-step="profile" part="panel panel-profile">
                         <monster-field-set data-monster-role="field-set-profile" part="field-set field-set-profile">
-                            <label data-monster-role="field-label first-name-label" part="field-label first-name-label"
-                                   data-monster-replace="path:labels.firstName"></label>
+                            <label data-monster-role="field-label first-name-label"
+                                   part="field-label first-name-label"></label>
                             <input data-monster-role="first-name-input" part="input input-first-name"
                                    type="text" name="firstName"
                                    data-monster-attributes="placeholder path:labels.firstNamePlaceholder, autocomplete path:autocomplete.firstName, aria-label path:labels.firstNameAria" />
-                            <label data-monster-role="field-label last-name-label" part="field-label last-name-label"
-                                   data-monster-replace="path:labels.lastName"></label>
+                            <label data-monster-role="field-label last-name-label"
+                                   part="field-label last-name-label"></label>
                             <input data-monster-role="last-name-input" part="input input-last-name"
                                    type="text" name="lastName"
                                    data-monster-attributes="placeholder path:labels.lastNamePlaceholder, autocomplete path:autocomplete.lastName, aria-label path:labels.lastNameAria" />
                             <label data-monster-role="field-label birth-date-label" part="field-label birth-date-label"
                                    data-monster-attributes="class path:features.showBirthDate | ?::hidden"
-                                   data-monster-replace="path:labels.birthDate"></label>
+                            ></label>
                             <input data-monster-role="birth-date-input" part="input input-birth-date"
                                    type="text" name="birthDate"
                                    data-monster-attributes="class path:features.showBirthDate | ?::hidden, autocomplete path:autocomplete.birthDate, aria-label path:labels.birthDateAria" />
                             <label data-monster-role="field-label nationality-label" part="field-label nationality-label"
                                    data-monster-attributes="class path:features.showNationality | ?::hidden"
-                                   data-monster-replace="path:labels.nationality"></label>
+                            ></label>
                             <input data-monster-role="nationality-input" part="input input-nationality"
                                    type="text" name="nationality"
                                    data-monster-attributes="class path:features.showNationality | ?::hidden, placeholder path:labels.nationalityPlaceholder, autocomplete path:autocomplete.nationality, aria-label path:labels.nationalityAria" />
@@ -1879,29 +1903,25 @@ function getTemplate() {
                     <section data-monster-role="panel" data-step="address" part="panel panel-address">
                         <monster-field-set data-monster-role="field-set-address" part="field-set field-set-address">
                             <label data-monster-role="field-label street-label" part="field-label street-label"
-                                   class="grid-start-1"
-                                   data-monster-replace="path:labels.street"></label>
+                                   class="grid-start-1"></label>
                             <input data-monster-role="street-input" part="input input-street"
                                    class="grid-start-2 grid-span-full"
                                    type="text" name="street"
                                    data-monster-attributes="placeholder path:labels.streetPlaceholder, autocomplete path:autocomplete.street, aria-label path:labels.streetAria" />
                             <label data-monster-role="field-label zip-label" part="field-label zip-label"
-                                   class="grid-start-1"
-                                   data-monster-replace="path:labels.zip"></label>
+                                   class="grid-start-1"></label>
                             <input data-monster-role="zip-input" part="input input-zip"
                                    class="grid-start-2"
                                    type="text" name="zip"
                                    data-monster-attributes="placeholder path:labels.zipPlaceholder, autocomplete path:autocomplete.zip, aria-label path:labels.zipAria" />
                             <label data-monster-role="field-label city-label" part="field-label city-label"
-                                   class="grid-start-3"
-                                   data-monster-replace="path:labels.city"></label>
+                                   class="grid-start-3"></label>
                             <input data-monster-role="city-input" part="input input-city"
                                    class="grid-start-4"
                                    type="text" name="city"
                                    data-monster-attributes="placeholder path:labels.cityPlaceholder, autocomplete path:autocomplete.city, aria-label path:labels.cityAria" />
                             <label data-monster-role="field-label country-label" part="field-label country-label"
-                                   class="grid-start-1"
-                                   data-monster-replace="path:labels.country"></label>
+                                   class="grid-start-1"></label>
                             <input data-monster-role="country-input" part="input input-country"
                                    class="grid-start-2 grid-span-full"
                                    type="text" name="country"
@@ -1920,8 +1940,8 @@ function getTemplate() {
 
                     <section data-monster-role="panel" data-step="consents" part="panel panel-consents">
                         <monster-field-set data-monster-role="field-set-consents" part="field-set field-set-consents">
-                            <div data-monster-role="consents-title" part="consents-title"
-                                 data-monster-replace="path:labels.consentsTitle"></div>
+                            <div data-monster-role="consents-title"
+                                 part="consents-title"></div>
                             <div data-monster-role="consents-list" part="consents-list"></div>
                             <slot name="consents-fields"></slot>
                         </monster-field-set>

package/source/components/form/select.mjs

@@ -962,7 +962,7 @@ class Select extends CustomControl {
 
 		new Processing(() => {
 			gatherState.call(this);
-			focusFilter.call(this);
+			focusFilter.call(this, { preventScroll: true });
 		})
 			.run()
 			.catch((e) => {
@@ -3793,6 +3793,10 @@ function getSelectPopperPositionOptions() {
 		popperOptions.placement = getDefaultSelectPopperPositionProfile().placement;
 	}
 
+	if (!isString(popperOptions.strategy)) {
+		popperOptions.strategy = getDefaultSelectPopperPositionProfile().strategy;
+	}
+
 	popperOptions.adaptiveSize = false;
 	popperOptions.hideWhenReferenceHidden = true;
 
@@ -3820,6 +3824,7 @@ function getSelectPopperPositionOptions() {
 function getDefaultSelectPopperPositionProfile() {
 	return {
 		placement: "bottom-start",
+		strategy: "fixed",
 		middleware: ["flip", "offset:4", "shift:crossAxis", "size"],
 	};
 }
@@ -3903,7 +3908,7 @@ function activateCurrentOption(direction) {
 				}
 			}
 			if (found === false) {
-				focusFilter.call(this);
+				focusFilter.call(this, { preventScroll: true });
 			}
 		}
 	}
@@ -5130,7 +5135,7 @@ function show() {
 
 	setTotalText.call(this);
 
-	focusFilter.call(this);
+	focusFilter.call(this, { preventScroll: true });
 
 	if (shouldLazyLoadOptions.call(this)) {
 		if (this[lazyLoadRequestSymbol] instanceof Promise) {
@@ -5277,7 +5282,7 @@ function show() {
 		} else {
 			initTotal.call(self);
 		}
-		focusFilter.call(this);
+		focusFilter.call(this, { preventScroll: true });
 		return performSelectLayoutCycle
 			.call(this, SELECT_LAYOUT_REASON_ALL)
 			.then(() => {
@@ -6026,12 +6031,14 @@ function getTemplate() {
                 <div part="options" data-monster-role="options" data-monster-insert="options path:options"
                      tabindex="-1"></div>
             </div>
-            <monster-pagination data-monster-role="pagination" part="pagination"
-                                data-monster-option-layout-mode="compact"></monster-pagination>
-            <div part="remote-info"
-                 data-monster-role="remote-info"
-                 data-monster-attributes="class path:classes.remoteInfo"
-                 data-monster-replace="path:messages.total"></div>
+            <div part="pagination-footer" data-monster-role="pagination-footer">
+                <div part="remote-info"
+                     data-monster-role="remote-info"
+                     data-monster-attributes="class path:classes.remoteInfo"
+                     data-monster-replace="path:messages.total"></div>
+                <monster-pagination data-monster-role="pagination" part="pagination"
+                                    data-monster-option-layout-mode="compact"></monster-pagination>
+            </div>
             <div part="no-options" data-monster-role="no-options"
                  data-monster-attributes="class path:classes.noOptions"
                  data-monster-replace="path:messages.emptyOptions"></div>

package/source/components/form/sheet.mjs

@@ -80,7 +80,12 @@ class Sheet extends CustomControl {
 	get defaults() {
 		return Object.assign({}, super.defaults, {
 			templates: { main: getTemplate() },
-			labels: getTranslations(),
+			labels: Object.assign(
+				{
+					cell: "Column {column}, row {row}",
+				},
+				getTranslations(),
+			),
 			classes: {
 				button: "monster-button-outline-primary",
 			},
@@ -636,6 +641,12 @@ function buildCell(row, column, cells, isLastColumn) {
 	input.autocomplete = "off";
 	input.inputMode = "text";
 	input.placeholder = this.getOption("cell.placeholder", "");
+	input.setAttribute(
+		"aria-label",
+		String(this.getOption("labels.cell", "Column {column}, row {row}"))
+			.replaceAll("{column}", String(column.label ?? column.id))
+			.replaceAll("{row}", String(row.label ?? row.id)),
+	);
 	const value =
 		typeof cells === "function"
 			? cells(row.id, column.id)
@@ -1790,7 +1801,7 @@ function showContextMenu(clientX, clientY) {
 	const wrapper = this[gridWrapperSymbol];
 	if (!menu || !wrapper) return;
 	menu.hidden = false;
-	menu.style.display = "block";
+	menu.style.display = "flex";
 	const wrapperRect = wrapper.getBoundingClientRect();
 	const offsetX = clientX - wrapperRect.left + wrapper.scrollLeft;
 	const offsetY = clientY - wrapperRect.top + wrapper.scrollTop;