@m3e/core 1.0.0-rc.3 → 1.0.0-rc.4

package/dist/index.js

@@ -984,10 +984,17 @@ function Selected(base) {
                 if (this.role === "button") {
                     this.ariaPressed = `${this.selected}`;
                     this.ariaSelected = null;
+                    this.ariaChecked = null;
+                }
+                else if (this.role === "radio") {
+                    this.ariaChecked = `${this.selected}`;
+                    this.ariaSelected = null;
+                    this.ariaPressed = null;
                 }
                 else if (this.role && this.role !== "none" && this.role !== "presentation") {
                     this.ariaSelected = `${this.selected}`;
                     this.ariaPressed = null;
+                    this.ariaChecked = null;
                 }
             }
         }
@@ -1118,12 +1125,12 @@ function Touched(base) {
         connectedCallback() {
             this.markAsUntouched();
             super.connectedCallback();
-            this.addEventListener("focusout", this[_eventHandler$1]);
+            this.addEventListener("focusout", this[_eventHandler$1], { capture: true });
         }
         /** @inheritdoc */
         disconnectedCallback() {
             super.disconnectedCallback();
-            this.removeEventListener("focusout", this[_eventHandler$1]);
+            this.removeEventListener("focusout", this[_eventHandler$1], { capture: true });
         }
         /** Marks the element as touched. */
         markAsTouched() {
@@ -1875,6 +1882,8 @@ function DisabledInteractive(base) {
     return _DisabledInteractiveMixin;
 }
 
+/** A symbol through which to update labels to reflect a control's current state. */
+const updateLabels = Symbol("updateLabels");
 /**
  * Determines whether a value is a `LabelledMixin`.
  * @param {unknown} value The value to test.
@@ -1883,7 +1892,6 @@ function DisabledInteractive(base) {
 function isLabelledMixin(value) {
     return hasKeys(value, "labels") && isAttachInternalsMixin(value);
 }
-const _updateLabels = Symbol("_updateLabels");
 const _eventHandler = Symbol("_eventHandler");
 /**
  * Mixin to augment an element with support for labelling.
@@ -1899,7 +1907,7 @@ function Labelled(base) {
             /** @private */
             this[_a] = (e) => {
                 if (!e.defaultPrevented) {
-                    this[_updateLabels]();
+                    this[updateLabels]();
                 }
             };
         }
@@ -1922,18 +1930,19 @@ function Labelled(base) {
         /** @inheritdoc */
         update(changedProperties) {
             super.update(changedProperties);
-            this[_updateLabels]();
+            this[updateLabels]();
         }
-        /** @private */
-        [(_a = _eventHandler, _updateLabels)]() {
+        /** @internal */
+        [(_a = _eventHandler, updateLabels)]() {
             const focusable = this.hasAttribute("tabindex");
             const disabled = (isDisabledMixin(this) && this.disabled) || (isDisabledInteractiveMixin(this) && this.disabledInteractive);
-            for (const label of this.labels) {
+            const invalid = isTouchedMixin(this) && this.touched && (this.ariaInvalid || this.classList.contains("-invalid"));
+            for (const label of this.labels ?? []) {
                 label.style.userSelect = focusable ? "none" : "";
-                label.style.cursor = !disabled ? "pointer" : "";
+                label.style.cursor = !disabled && focusable ? "pointer" : "";
                 label.style.color = disabled
                     ? `color-mix(in srgb, ${DesignToken.color.onSurface} 38%, transparent)`
-                    : isTouchedMixin(this) && this.touched && this.ariaInvalid
+                    : invalid
                         ? `${DesignToken.color.error}`
                         : "";
             }
@@ -2170,6 +2179,9 @@ function ConstraintValidation(base) {
             this[internals].setValidity(validity, validityMessage);
             this.ariaInvalid = invalid ? "true" : null;
             this.classList.toggle("-invalid", invalid === true);
+            if (isLabelledMixin(this)) {
+                this[updateLabels]?.();
+            }
         }
     }
     __ConstraintValidation_getNativeMessage = function __ConstraintValidation_getNativeMessage(flags) {
@@ -4722,5 +4734,5 @@ M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([
     t$2("m3e-text-highlight")
 ], M3eTextHighlightElement);
 
-export { AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlide, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, Selected, Touched, Vertical, checkOrSelect, debounce, defaultValue, formValue, getTextContent, guid, hasAssignedNodes, hasKeys, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, safeStyleMap, scrollIntoViewIfNeeded, validate };
+export { AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlide, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, Selected, Touched, Vertical, checkOrSelect, debounce, defaultValue, formValue, getTextContent, guid, hasAssignedNodes, hasKeys, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, safeStyleMap, scrollIntoViewIfNeeded, updateLabels, validate };
 //# sourceMappingURL=index.js.map