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

package/dist/index.js

@@ -519,7 +519,9 @@ _PressedController_capture = new WeakMap(), _PressedController_callback = new We
         }
     }
 }, _PressedController_handleKeyDown = function _PressedController_handleKeyDown(e) {
-    const target = e.target;
+    if (e.target !== e.currentTarget)
+        return;
+    const target = e.currentTarget;
     if (!__classPrivateFieldGet(this, _PressedController_pressedTargets, "f").has(target) && __classPrivateFieldGet(this, _PressedController_isPressedKey, "f")?.call(this, e.key)) {
         if (e.key === " ") {
             e.preventDefault();
@@ -982,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;
                 }
             }
         }
@@ -1116,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() {
@@ -1873,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.
@@ -1881,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.
@@ -1897,7 +1907,7 @@ function Labelled(base) {
             /** @private */
             this[_a] = (e) => {
                 if (!e.defaultPrevented) {
-                    this[_updateLabels]();
+                    this[updateLabels]();
                 }
             };
         }
@@ -1920,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}`
                         : "";
             }
@@ -2168,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) {
@@ -2230,7 +2244,7 @@ function ConstraintValidation(base) {
  */
 function EventAttribute(base, ...types) {
     class _EventAttribute extends base {
-        /** @inheritdoc */
+        /** @internal */
         dispatchEvent(event) {
             if (types.includes(event.type)) {
                 const eventAttribute = this.getAttribute(`on${event.type}`);
@@ -2321,7 +2335,9 @@ function FormSubmitter(base) {
             this.type = "button";
             /** @private */
             this[_a] = async (e) => {
-                if ((isDisabledMixin(this) && this.disabled) || (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
+                if (e.defaultPrevented ||
+                    (isDisabledMixin(this) && this.disabled) ||
+                    (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
                     return;
                 }
                 const form = this[internals].form;
@@ -2387,6 +2403,8 @@ function FormSubmitter(base) {
         }
     }
     _a = _clickHandler$1;
+    /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
+    _FormSubmitterMixin.formAssociated = true;
     __decorate([
         n$1()
     ], _FormSubmitterMixin.prototype, "name", null);
@@ -2501,7 +2519,10 @@ function KeyboardClick(base, allowEnter = true) {
         }
     }
     __KeyboardClickMixin_keyUpHandler = new WeakMap(), __KeyboardClickMixin_instances = new WeakSet(), __KeyboardClickMixin_handleKeyUp = function __KeyboardClickMixin_handleKeyUp(e) {
-        if ((isDisabledMixin(this) && this.disabled) || (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
+        if (e.defaultPrevented ||
+            e.target !== e.currentTarget ||
+            (isDisabledMixin(this) && this.disabled) ||
+            (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
             return;
         }
         if (e.key === " " || (allowEnter && e.key === "Enter")) {
@@ -4507,5 +4528,211 @@ M3eTextOverflowElement = __decorate([
     t$2("m3e-text-overflow")
 ], M3eTextOverflowElement);
 
-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, 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 };
+var _M3eTextHighlightElement_instances, _M3eTextHighlightElement_id, _M3eTextHighlightElement_ranges, _M3eTextHighlightElement_styles, _M3eTextHighlightElement_isTextNode, _M3eTextHighlightElement_findTextNodes, _M3eTextHighlightElement_highlight;
+var M3eTextHighlightElement_1;
+/**
+ * Highlights text which matches a given search term.
+ *
+ * @description
+ * Highlights all text ranges in slotted content that match a given search term using the CSS Custom Highlight API.
+ *
+ * @example
+ * The following example illustrates highlighting "Lor".
+ * ```html
+ * <m3e-text-highlight term="Lor">
+ *  <p>
+ *    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ *    ut labore et dolore magna aliqua.
+ *  </p>
+ * </m3e-text-highlight>
+ * ```
+ *
+ * @tag m3e-text-highlight
+ *
+ * @slot - Renders the content to highlight.
+ *
+ * @attr case-sensitive - A value indicating whether matching is case sensitive.
+ * @attr disabled - A value indicating whether text highlighting is disabled.
+ * @attr term - The term to highlight.
+ *
+ * @fires highlight - Emitted when content is highlighted.
+ *
+ * @cssprop --m3e-text-highlight-container-color - Background color applied to highlighted text ranges.
+ * @cssprop --m3e-text-highlight-color - Foreground color of highlighted text content.
+ * @cssprop --m3e-text-highlight-decoration - Optional text decoration (e.g., underline, line-through) for highlighted text.
+ * @cssprop --m3e-text-highlight-shadow - Optional text shadow for emphasis or contrast.
+ */
+let M3eTextHighlightElement = M3eTextHighlightElement_1 = class M3eTextHighlightElement extends LitElement {
+    constructor() {
+        super();
+        _M3eTextHighlightElement_instances.add(this);
+        /** @private */ _M3eTextHighlightElement_id.set(this, `m3e-text-highlight-${M3eTextHighlightElement_1.__nextId++}`);
+        /** @private */ _M3eTextHighlightElement_ranges.set(this, new Array());
+        /** @private */ _M3eTextHighlightElement_styles.set(this, null);
+        /**
+         * A value indicating whether text highlighting is disabled.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * The term to highlight.
+         * @default ""
+         */
+        this.term = "";
+        /**
+         * A value indicating whether matching is case sensitive.
+         * @default false
+         */
+        this.caseSensitive = false;
+        if (this.isSupported) {
+            __classPrivateFieldSet(this, _M3eTextHighlightElement_styles, new CSSStyleSheet(), "f");
+            __classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f").replaceSync(css `
+          ::highlight(${unsafeCSS(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"))}) {
+            background-color: var(--m3e-text-highlight-container-color, ${DesignToken.color.secondaryContainer});
+            color: var(--m3e-text-highlight-color, ${DesignToken.color.onSecondaryContainer});
+            text-decoration: var(--m3e-text-highlight-decoration);
+            text-shadow: var(--m3e-text-highlight-shadow);
+          }
+        `.toString());
+        }
+    }
+    /** A value indicating whether text highlighting is supported by the browser. */
+    get isSupported() {
+        return !isServer && CSS.highlights ? true : false;
+    }
+    /** The ranges that match the current term. */
+    get ranges() {
+        return __classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f");
+    }
+    /** @inheritdoc */
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        if (this.shadowRoot && __classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f") && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f"))) {
+            this.shadowRoot.adoptedStyleSheets.push(__classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f"));
+        }
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has("term") ||
+            _changedProperties.has("caseSensitive") ||
+            _changedProperties.has("disabled")) {
+            __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_highlight).call(this);
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_highlight)}"></slot>`;
+    }
+};
+_M3eTextHighlightElement_id = new WeakMap();
+_M3eTextHighlightElement_ranges = new WeakMap();
+_M3eTextHighlightElement_styles = new WeakMap();
+_M3eTextHighlightElement_instances = new WeakSet();
+_M3eTextHighlightElement_isTextNode = function _M3eTextHighlightElement_isTextNode(node) {
+    return /^(\\s|\\n)+$/gi.test(node.data) ? false : true;
+};
+_M3eTextHighlightElement_findTextNodes = function _M3eTextHighlightElement_findTextNodes(parent, nodes) {
+    if (parent instanceof HTMLSlotElement) {
+        parent.assignedElements({ flatten: true }).forEach((x) => {
+            switch (x.nodeType) {
+                case Node.TEXT_NODE:
+                    if (__classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_isTextNode).call(this, x)) {
+                        nodes.push(x);
+                    }
+                    break;
+                case Node.ELEMENT_NODE:
+                    __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_findTextNodes).call(this, x, nodes);
+                    break;
+            }
+        });
+    }
+    else {
+        parent.childNodes.forEach((x) => {
+            switch (x.nodeType) {
+                case Node.TEXT_NODE:
+                    if (__classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_isTextNode).call(this, x)) {
+                        nodes.push(x);
+                    }
+                    break;
+                case Node.ELEMENT_NODE:
+                    __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_findTextNodes).call(this, x, nodes);
+                    break;
+            }
+        });
+    }
+};
+_M3eTextHighlightElement_highlight = function _M3eTextHighlightElement_highlight() {
+    if (!this.isSupported || !this.isConnected)
+        return;
+    CSS.highlights.delete(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"));
+    __classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").length = 0;
+    if (this.disabled)
+        return;
+    if (!this.term) {
+        this.dispatchEvent(new CustomEvent("highlight", {
+            detail: [...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")],
+            bubbles: false,
+            composed: false,
+        }));
+        return;
+    }
+    const texts = new Array();
+    __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_findTextNodes).call(this, this, texts);
+    const term = !this.caseSensitive ? this.term.toLowerCase() : this.term;
+    __classPrivateFieldSet(this, _M3eTextHighlightElement_ranges, texts
+        .map((x) => {
+        return {
+            el: x,
+            text: (!this.caseSensitive ? x.textContent?.toLowerCase() : x.textContent) ?? "",
+        };
+    })
+        .map(({ el, text }) => {
+        const indices = new Array();
+        let startPos = 0;
+        while (startPos < text.length) {
+            const index = text.indexOf(term, startPos);
+            if (index === -1)
+                break;
+            indices.push(index);
+            startPos = index + term.length;
+        }
+        return indices.map((index) => {
+            const range = new Range();
+            range.setStart(el, index);
+            range.setEnd(el, index + term.length);
+            return range;
+        });
+    })
+        .flat(), "f");
+    if (__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").length > 0) {
+        CSS.highlights.set(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"), new Highlight(...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")));
+    }
+    this.dispatchEvent(new CustomEvent("highlight", {
+        detail: [...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")],
+        bubbles: false,
+        composed: false,
+    }));
+};
+/** The styles of the element. */
+M3eTextHighlightElement.styles = css `
+    :host {
+      display: contents;
+    }
+  `;
+/** @private */ M3eTextHighlightElement.__nextId = 0;
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eTextHighlightElement.prototype, "disabled", void 0);
+__decorate([
+    n$1()
+], M3eTextHighlightElement.prototype, "term", void 0);
+__decorate([
+    n$1({ attribute: "case-sensitive", type: Boolean })
+], M3eTextHighlightElement.prototype, "caseSensitive", void 0);
+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, updateLabels, validate };
 //# sourceMappingURL=index.js.map