@m3e/web 2.0.5 → 2.1.1

package/dist/core.js

@@ -1034,7 +1034,7 @@ _LongPressController_callback = new WeakMap(), _LongPressController_threshold =
   }
 };
 
-var _MutationController_host, _MutationController_callback, _MutationController_skipInitial, _MutationController_config, _MutationController_observer, _MutationController_unobservedUpdate;
+var _MutationController_callback, _MutationController_skipInitial, _MutationController_config, _MutationController_observer, _MutationController_unobservedUpdate;
 /**
  * A `ReactiveController` that integrates a `MutationObserver` with an element's reactive update lifecycle
  * to detect arbitrary changes to DOM, including nodes being added or removed and attributes changing.
@@ -1048,8 +1048,6 @@ class MutationController extends MonitorControllerBase {
   constructor(host, options) {
     super(host, options);
     /** @private */
-    _MutationController_host.set(this, void 0);
-    /** @private */
     _MutationController_callback.set(this, void 0);
     /** @private */
     _MutationController_skipInitial.set(this, false);
@@ -1059,7 +1057,6 @@ class MutationController extends MonitorControllerBase {
     _MutationController_observer.set(this, void 0);
     /** @private */
     _MutationController_unobservedUpdate.set(this, true);
-    __classPrivateFieldSet(this, _MutationController_host, host, "f");
     __classPrivateFieldSet(this, _MutationController_callback, options.callback, "f");
     __classPrivateFieldSet(this, _MutationController_skipInitial, options.skipInitial ?? false, "f");
     __classPrivateFieldSet(this, _MutationController_config, options.config, "f");
@@ -1068,10 +1065,7 @@ class MutationController extends MonitorControllerBase {
       console.warn("MutationController error: the browser does not support MutationObserver.");
       return;
     }
-    __classPrivateFieldSet(this, _MutationController_observer, new MutationObserver((records, observer) => {
-      __classPrivateFieldGet(this, _MutationController_callback, "f").call(this, records, observer);
-      __classPrivateFieldGet(this, _MutationController_host, "f").requestUpdate();
-    }), "f");
+    __classPrivateFieldSet(this, _MutationController_observer, new MutationObserver((records, observer) => __classPrivateFieldGet(this, _MutationController_callback, "f").call(this, records, observer)), "f");
   }
   /** @inheritdoc */
   async hostUpdated() {
@@ -1092,7 +1086,6 @@ class MutationController extends MonitorControllerBase {
   _observe(target) {
     __classPrivateFieldGet(this, _MutationController_observer, "f")?.observe(target, __classPrivateFieldGet(this, _MutationController_config, "f"));
     __classPrivateFieldSet(this, _MutationController_unobservedUpdate, true, "f");
-    __classPrivateFieldGet(this, _MutationController_host, "f").requestUpdate();
   }
   /** @inheritdoc */
   _unobserve() {
@@ -1102,7 +1095,7 @@ class MutationController extends MonitorControllerBase {
     }
   }
 }
-_MutationController_host = new WeakMap(), _MutationController_callback = new WeakMap(), _MutationController_skipInitial = new WeakMap(), _MutationController_config = new WeakMap(), _MutationController_observer = new WeakMap(), _MutationController_unobservedUpdate = new WeakMap();
+_MutationController_callback = new WeakMap(), _MutationController_skipInitial = new WeakMap(), _MutationController_config = new WeakMap(), _MutationController_observer = new WeakMap(), _MutationController_unobservedUpdate = new WeakMap();
 
 var _PressedController_instances, _PressedController_capture, _PressedController_callback, _PressedController_isPressedKey, _PressedController_pressedTargets, _PressedController_minPressedDuration, _PressedController_pointerDownHandler, _PressedController_pointerUpHandler, _PressedController_touchEndHandler, _PressedController_keyDownHandler, _PressedController_keyUpHandler, _PressedController_handlePointerDown, _PressedController_handlePointerUp, _PressedController_handleTouchEnd, _PressedController_handleKeyDown, _PressedController_handleKeyUp, _PressedController_clearPressedTargets;
 /** A `ReactiveController` used to monitor the pressed state of one or more elements. */
@@ -1279,7 +1272,7 @@ _PressedController_capture = new WeakMap(), _PressedController_callback = new We
   }
 };
 
-var _ResizeController_host, _ResizeController_callback, _ResizeController_skipInitial, _ResizeController_config, _ResizeController_observer, _ResizeController_unobservedUpdate;
+var _ResizeController_callback, _ResizeController_skipInitial, _ResizeController_config, _ResizeController_observer, _ResizeController_unobservedUpdate;
 /** A `ReactiveController` used to monitor when an element is resized. */
 class ResizeController extends MonitorControllerBase {
   /**
@@ -1290,8 +1283,6 @@ class ResizeController extends MonitorControllerBase {
   constructor(host, options) {
     super(host, options);
     /** @private */
-    _ResizeController_host.set(this, void 0);
-    /** @private */
     _ResizeController_callback.set(this, void 0);
     /** @private */
     _ResizeController_skipInitial.set(this, void 0);
@@ -1301,7 +1292,6 @@ class ResizeController extends MonitorControllerBase {
     _ResizeController_observer.set(this, void 0);
     /** @private */
     _ResizeController_unobservedUpdate.set(this, true);
-    __classPrivateFieldSet(this, _ResizeController_host, host, "f");
     __classPrivateFieldSet(this, _ResizeController_callback, options.callback, "f");
     __classPrivateFieldSet(this, _ResizeController_skipInitial, options.skipInitial ?? false, "f");
     __classPrivateFieldSet(this, _ResizeController_config, options.config, "f");
@@ -1310,10 +1300,7 @@ class ResizeController extends MonitorControllerBase {
       console.warn("ResizeController error: the browser does not support ResizeObserver.");
       return;
     }
-    __classPrivateFieldSet(this, _ResizeController_observer, new ResizeObserver((entries, observer) => {
-      __classPrivateFieldGet(this, _ResizeController_callback, "f").call(this, entries, observer);
-      __classPrivateFieldGet(this, _ResizeController_host, "f").requestUpdate();
-    }), "f");
+    __classPrivateFieldSet(this, _ResizeController_observer, new ResizeObserver((entries, observer) => __classPrivateFieldGet(this, _ResizeController_callback, "f").call(this, entries, observer)), "f");
   }
   /** @inheritdoc */
   async hostUpdated() {
@@ -1329,7 +1316,6 @@ class ResizeController extends MonitorControllerBase {
   _observe(target) {
     __classPrivateFieldGet(this, _ResizeController_observer, "f")?.observe(target, __classPrivateFieldGet(this, _ResizeController_config, "f"));
     __classPrivateFieldSet(this, _ResizeController_unobservedUpdate, true, "f");
-    __classPrivateFieldGet(this, _ResizeController_host, "f").requestUpdate();
   }
   /**
    * Stops observing the specified element.
@@ -1339,7 +1325,7 @@ class ResizeController extends MonitorControllerBase {
     __classPrivateFieldGet(this, _ResizeController_observer, "f")?.unobserve(target);
   }
 }
-_ResizeController_host = new WeakMap(), _ResizeController_callback = new WeakMap(), _ResizeController_skipInitial = new WeakMap(), _ResizeController_config = new WeakMap(), _ResizeController_observer = new WeakMap(), _ResizeController_unobservedUpdate = new WeakMap();
+_ResizeController_callback = new WeakMap(), _ResizeController_skipInitial = new WeakMap(), _ResizeController_config = new WeakMap(), _ResizeController_observer = new WeakMap(), _ResizeController_unobservedUpdate = new WeakMap();
 
 /**
  * Class decorator factory that defines the decorated class as a custom element.
@@ -1630,6 +1616,9 @@ function isAttachInternalsMixin(value) {
   return hasKeys(value, internals);
 }
 const _internals = Symbol("_internals");
+// Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+// a copy of custom state is retained locally so components can correctly read after write.
+const _customState = Symbol("_customState");
 /**
  * Mixin to augment an element with behavior that attaches to `ElementInternals`.
  * @template T The type of the base class.
@@ -1638,9 +1627,17 @@ const _internals = Symbol("_internals");
  * @returns {Constructor<AttachInternalsMixin> & T} A constructor that implements `AttachInternalsMixin`.
  */
 function AttachInternals(base, formAssociated) {
+  var _a;
   class _AttachInternals extends base {
+    constructor() {
+      super(...arguments);
+      // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+      // a copy of custom state is retained locally so components can correctly read after write.
+      /** @private */
+      this[_a] = new Set();
+    }
     /** @internal */
-    get [internals]() {
+    get [(_a = _customState, internals)]() {
       return this[_internals] ?? (this[_internals] = this.attachInternals());
     }
   }
@@ -1655,7 +1652,14 @@ function AttachInternals(base, formAssociated) {
  * @returns {boolean} Whether `element` has `state`.
  */
 function hasCustomState(element, state) {
-  return isServer ? false : element[internals].states.has(state);
+  // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+  // a copy of custom state is retained locally so components can correctly read after write.
+  if (_customState in element) {
+    return element[_customState].has(state);
+  }
+  // This should never get called due to needing a local copy of custom state
+  // since reading after write to flush doesn't work in Safari (affecting all iOS browsers).
+  return element[internals].states.has(state);
 }
 /**
  * Convenience function used to add custom state to an element.
@@ -1663,9 +1667,13 @@ function hasCustomState(element, state) {
  * @param {string} state The custom state to add.
  */
 function addCustomState(element, state) {
-  if (!isServer) {
-    element[internals]?.states.add(state);
+  // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+  // a copy of custom state is retained locally so components can correctly read after write.
+  if (_customState in element) {
+    element[_customState].add(state);
   }
+  element[internals]?.states.add(state);
+  element[internals]?.states.has(state); // flush (even though this doesn't work in Safari)
 }
 /**
  * Convenience function used to delete custom state from an element.
@@ -1674,7 +1682,16 @@ function addCustomState(element, state) {
  * @returns {boolean} Whether `state` was removed from `element`.
  */
 function deleteCustomState(element, state) {
-  return !isServer && element[internals]?.states.delete(state);
+  // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
+  // a copy of custom state is retained locally so components can correctly read after write.
+  if (_customState in element) {
+    element[_customState].delete(state);
+  }
+  if (element[internals]?.states.delete(state)) {
+    element[internals]?.states.has(state); // flush (even though this doesn't work in Safari)
+    return true;
+  }
+  return false;
 }
 /**
  * Convenience function used to add or delete custom state for an element.
@@ -4757,41 +4774,6 @@ __decorate([property({
 })], M3eStateLayerElement.prototype, "disableHover", void 0);
 M3eStateLayerElement = __decorate([customElement("m3e-state-layer")], M3eStateLayerElement);
 
-/**
- * An inline container which presents an ellipsis when content overflows.
- *
- * @description
- * The `m3e-text-overflow` component truncates inline content with an ellipsis when it
- * exceeds the available width. It's intended for use inside flex or otherwise
- * constrained containers to preserve layout while providing predictable, single-line
- * truncation behavior for long text.
- *
- * @example
- * A typical usage inside a flex container where the heading and trailing actions are
- * constrained, allowing the center text to truncate with an ellipsis.
- *
- * ```html
- * <div style="display:flex;align-items:center;gap:12px;">
- *   <m3e-icon name="menu"></m3e-icon>
- *   <m3e-text-overflow>Very long title or breadcrumb that should truncate gracefully</m3e-text-overflow>
- *   <m3e-icon name="more_vert"></m3e-icon>
- * </div>
- * ```
- *
- * @tag m3e-text-overflow
- *
- * @slot - Renders the content to truncate with an ellipsis.
- */
-let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
-  /** @inheritdoc */
-  render() {
-    return html`<span class="base"><slot></slot></span>`;
-  }
-};
-/** The styles of the element. */
-M3eTextOverflowElement.styles = css`:host { flex: 1 1 auto; display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .base { flex: 1 1 auto; display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
-M3eTextOverflowElement = __decorate([customElement("m3e-text-overflow")], M3eTextOverflowElement);
-
 var _M3eTextHighlightElement_instances, _M3eTextHighlightElement_id, _M3eTextHighlightElement_ranges, _M3eTextHighlightElement_styles, _M3eTextHighlightElement_isTextNode, _M3eTextHighlightElement_findTextNodes, _M3eTextHighlightElement_highlight;
 var M3eTextHighlightElement_1;
 /**
@@ -4815,8 +4797,9 @@ var M3eTextHighlightElement_1;
  *
  * @slot - Renders the content to highlight.
  *
- * @attr case-sensitive - A value indicating whether matching is case sensitive.
+ * @attr case-sensitive - Whether matching is case sensitive.
  * @attr disabled - A value indicating whether text highlighting is disabled.
+ * @attr mode - The mode in which to highlight text.
  * @attr term - The term to highlight.
  *
  * @fires highlight - Emitted when content is highlighted.
@@ -4847,10 +4830,15 @@ let M3eTextHighlightElement = M3eTextHighlightElement_1 = class M3eTextHighlight
      */
     this.term = "";
     /**
-     * A value indicating whether matching is case sensitive.
+     * Whether matching is case sensitive.
      * @default false
      */
     this.caseSensitive = false;
+    /**
+     * The mode in which to highlight text.
+     * @default "contains"
+     */
+    this.mode = "contains";
     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());
@@ -4888,11 +4876,11 @@ _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;
+  return !/^\s*$/.test(node.data);
 };
 _M3eTextHighlightElement_findTextNodes = function _M3eTextHighlightElement_findTextNodes(parent, nodes) {
   if (parent instanceof HTMLSlotElement) {
-    parent.assignedElements({
+    parent.assignedNodes({
       flatten: true
     }).forEach(x => {
       switch (x.nodeType) {
@@ -4936,33 +4924,65 @@ _M3eTextHighlightElement_highlight = function _M3eTextHighlightElement_highlight
   }
   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")));
+  if (texts.length > 0) {
+    const term = !this.caseSensitive ? this.term.toLowerCase() : this.term;
+    switch (this.mode) {
+      case "starts-with":
+        {
+          const first = texts[0];
+          const text = (this.caseSensitive ? first.textContent : first.textContent?.toLowerCase()) ?? "";
+          if (text.startsWith(term)) {
+            const range = new Range();
+            range.setStart(first, 0);
+            range.setEnd(first, term.length);
+            __classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").push(range);
+          }
+        }
+        break;
+      case "ends-with":
+        {
+          const last = texts[texts.length - 1];
+          const text = (this.caseSensitive ? last.textContent : last.textContent?.toLowerCase()) ?? "";
+          if (text.endsWith(term)) {
+            const start = text.length - term.length;
+            const end = start + term.length;
+            const range = new Range();
+            range.setStart(last, start);
+            range.setEnd(last, end);
+            __classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").push(range);
+          }
+        }
+        break;
+      case "contains":
+        __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");
+        break;
+    }
+    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")],
@@ -4983,7 +5003,43 @@ __decorate([property({
   attribute: "case-sensitive",
   type: Boolean
 })], M3eTextHighlightElement.prototype, "caseSensitive", void 0);
+__decorate([property()], M3eTextHighlightElement.prototype, "mode", void 0);
 M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([customElement("m3e-text-highlight")], M3eTextHighlightElement);
 
+/**
+ * An inline container which presents an ellipsis when content overflows.
+ *
+ * @description
+ * The `m3e-text-overflow` component truncates inline content with an ellipsis when it
+ * exceeds the available width. It's intended for use inside flex or otherwise
+ * constrained containers to preserve layout while providing predictable, single-line
+ * truncation behavior for long text.
+ *
+ * @example
+ * A typical usage inside a flex container where the heading and trailing actions are
+ * constrained, allowing the center text to truncate with an ellipsis.
+ *
+ * ```html
+ * <div style="display:flex;align-items:center;gap:12px;">
+ *   <m3e-icon name="menu"></m3e-icon>
+ *   <m3e-text-overflow>Very long title or breadcrumb that should truncate gracefully</m3e-text-overflow>
+ *   <m3e-icon name="more_vert"></m3e-icon>
+ * </div>
+ * ```
+ *
+ * @tag m3e-text-overflow
+ *
+ * @slot - Renders the content to truncate with an ellipsis.
+ */
+let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
+  /** @inheritdoc */
+  render() {
+    return html`<span class="base"><slot></slot></span>`;
+  }
+};
+/** The styles of the element. */
+M3eTextOverflowElement.styles = css`:host { flex: 1 1 auto; display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .base { flex: 1 1 auto; display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
+M3eTextOverflowElement = __decorate([customElement("m3e-text-overflow")], M3eTextOverflowElement);
+
 export { ActionElementBase, AnimationLoopController, 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, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, debounce, defaultValue, deleteCustomState, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate };
 //# sourceMappingURL=core.js.map