@heartlandone/vega 2.77.0 → 2.77.1

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -1135,6 +1135,18 @@
   place-items: center;
 }
 
+.calendar .aria-announcement {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .calendar .container__days {
   text-align: center;
   place-items: center;

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-appender-controller.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, methodPlaceholder } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
+import { getDeepActiveElementInShadow } from '../../../../utils/ui';
 /**
  * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
  * behavior of a dropdown component.
@@ -17,6 +18,7 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    */
   constructor() {
     super(() => this.generateShowConfigFactory(), () => this.trigger);
+    this.lastFocusedElement = null;
   }
   /**
    * Component lifecycle - [componentDidLoad]{@link VegaPopover.connectedCallback}
@@ -37,10 +39,12 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
   async watchIsDropdownShow() {
     if (this.isDropdownShow) {
       this.showEventEmitter.emit();
+      this.updateLastFocusedElement();
     }
     else {
       this.searchRenderer.clear();
       this.hideEventEmitter.emit();
+      this.focusTriggerForAria();
     }
   }
   /**
@@ -60,6 +64,27 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
       this.hide();
     }
   }
+  /**
+   * Restores focus to the dropdown trigger element.
+   * Should be called after programmatic hide actions (item selection, Escape, reset)
+   * to maintain proper screen reader context per WAI-ARIA menu button pattern.
+   */
+  focusTriggerForAria() {
+    const activeEl = getDeepActiveElementInShadow();
+    if ((activeEl === null || activeEl === void 0 ? void 0 : activeEl.matches) && activeEl.matches(':focus-visible')) {
+      const triggerEl = this.lastFocusedElement;
+      if (triggerEl && typeof triggerEl.focus === 'function') {
+        triggerEl.focus();
+        this.lastFocusedElement = null;
+      }
+    }
+  }
+  /**
+   * Updates the last focused element by getting the currently active element in the shadow DOM.
+   */
+  updateLastFocusedElement() {
+    this.lastFocusedElement = getDeepActiveElementInShadow();
+  }
   /**
    * Generate the show configuration for the dropdown.
    *

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-render-mode-controller.js

@@ -10,7 +10,6 @@ export class VegaInputRenderModeController extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.hasItemsSlot = false;
-    this.hasDropdownSource = false;
   }
   /** Sets the render mode based on the presence of the items slot. */
   connectedCallback() {
@@ -22,7 +21,7 @@ export class VegaInputRenderModeController extends VegaSlimmer {
    * @returns {boolean} True if in source render mode, false otherwise.
    */
   isSource() {
-    return this.hasDropdownSource;
+    return Array.isArray(this.suggestionsDropdownSource);
   }
   /**
    * Checks if the render mode is template mode.
@@ -37,7 +36,6 @@ export class VegaInputRenderModeController extends VegaSlimmer {
    */
   setRenderMode() {
     this.hasItemsSlot = !!this.host.querySelector('[slot=items]');
-    this.hasDropdownSource = Array.isArray(this.suggestionsDropdownSource);
   }
 }
 __decorate([

package/dist/collection/components/vega-input/slimmers/renderers/vega-input-input-container-renderer.js

@@ -49,11 +49,7 @@ export class VegaInputInputContainerRenderer extends VegaSlimmer {
         [`vega-input-size-${this.size}`]: true,
         'vega-input-disabled': this.disabled,
         'compact-input-width': this.isCompactInputWidth,
-      }, onClick: this.onContainerClick, "aria-disabled": `${this.disabled}`, 
-      // tabIndex={-1} allows programmatic focus (e.g. after clearing input) without adding the container to the tab order.
-      // The linter flags this because it's a non-interactive element, but programmatic focus is intentional here.
-      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-      tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      }, onClick: this.onContainerClick, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       this.prefixSlotRenderer.render(),
       this.renderPrefixText(),
       this.inputRenderer.render(),

package/dist/collection/components/vega-input/slimmers/renderers/vega-input-input-renderer.js

@@ -72,7 +72,7 @@ export class VegaInputInputRenderer extends VegaSlimmer {
   }
   render() {
     return (h("div", { class: "vega-input-input" },
-      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label || 'No label defined', minLength: this.minLength, maxLength: this.maxLength, 
+      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, minLength: this.minLength, maxLength: this.maxLength, 
         /* eslint-disable-next-line react/jsx-no-bind */
         onBlur: (e) => this.handleInputBlur(e), 
         /* eslint-disable-next-line react/jsx-no-bind */
@@ -128,9 +128,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputInputRenderer.prototype, "type", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputInputRenderer.prototype, "label", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputInputRenderer.prototype, "name", void 0);

package/dist/collection/components/vega-input/slimmers/renderers/vega-input-input-suggestions-renderer.js

@@ -97,12 +97,15 @@ export class VegaInputInputSuggestionsRenderer extends VegaSlimmer {
     return null;
   }
   async showSuggestions() {
-    if (this.renderModeController.isSource() || this.renderModeController.isTemplate()) {
+    if (this.dropdownRef &&
+      (this.renderModeController.isSource() || this.renderModeController.isTemplate())) {
       await this.dropdownRef.show();
     }
   }
   async searchSuggestions() {
-    if (this.renderModeController.isSource() && this.suggestionsDropdownSource.length > 0) {
+    if (this.dropdownRef &&
+      this.renderModeController.isSource() &&
+      this.suggestionsDropdownSource.length > 0) {
       await this.dropdownRef.search(this.value);
     }
   }

package/dist/collection/components/vega-input/vega-input.js

@@ -32,12 +32,29 @@ import { VegaInputRenderer } from './slimmers/renderers/vega-input-renderer';
 import { VegaInputValueController } from './slimmers/controllers/vega-input-value-controller';
 import { VegaInputInputSuggestionsRenderer } from './slimmers/renderers/vega-input-input-suggestions-renderer';
 import { VegaInputRenderModeController } from './slimmers/controllers/vega-input-render-mode-controller';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
+import { DataTabIndexValueMapper } from '../../helpers/slimmers/mutation-observer/data-tab-index-value-mapper';
 /**
  * @vegaVersion 1.0.5
  */
 export class VegaInput {
   constructor() {
     this.globalSlimmers = {};
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
+      return this.host.shadowRoot.querySelector('input');
+    }, {
+      'aria-label': {
+        dependency: ['data-aria-label', 'label'],
+        defaultValue: 'No label defined',
+      },
+      'aria-hidden': {
+        dependency: ['data-aria-hidden'],
+        defaultValue: null,
+      },
+    });
+    this.dataTabIndexValueMapper = new DataTabIndexValueMapper(() => {
+      return this.host.shadowRoot.querySelector('input');
+    });
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -376,7 +393,7 @@ export class VegaInput {
         "text": "Specifies the label or title for the input field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input field."
       },
       "attribute": "label",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "labelSuffixButtonProps": {
@@ -1375,6 +1392,12 @@ export class VegaInput {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaInput.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "ariaAttributesValueMapper", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "dataTabIndexValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "formFieldController", void 0);

package/dist/collection/components/vega-input-passcode/slimmers/controllers/vega-input-passcode-keyboard-controller.js

@@ -26,6 +26,7 @@ export class VegaInputPasscodeKeyboardController extends KeyboardManagerSlimmer
       {
         keyCode: ['ArrowLeft', 'ArrowRight'],
         activeElementInScope: [this.inputPasscodeRenderer.getInputPasscodeContainerRef()],
+        eventName: 'keydown',
         callback: 
         /* istanbul ignore next */
         /* eslint-disable jsdoc/require-jsdoc */
@@ -72,6 +73,7 @@ export class VegaInputPasscodeKeyboardController extends KeyboardManagerSlimmer
    * @param {KeyboardEvent} event - the keyboard event of ArrowLeft and ArrowRight
    */
   controlDirectionByKeyboard(event) {
+    event.preventDefault();
     const currentIndex = this.inputPasscodeRenderer.getCurrentIndex();
     const vegaInputRefs = this.inputPasscodeRenderer.getVegaInputRefs();
     if (event.key === 'ArrowLeft' && currentIndex > 0) {

package/dist/collection/components/vega-input-passcode/slimmers/renderers/vega-input-passcode-renderer.js

@@ -94,7 +94,7 @@ export class VegaInputPasscodeRenderer extends VegaSlimmer {
     return this.inputPasscodeContainerRef;
   }
   render() {
-    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, tabIndex: index !== 0 ? -1 : null, showClearIcon: false, disabled: this.disabled, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
+    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, "data-tabindex": index !== 0 ? -1 : 0, showClearIcon: false, disabled: this.disabled, "data-aria-hidden": String(!this.isInputAccessibleForScreenReader(index)), "data-aria-label": `Passcode input ${index + 1} of ${this.length}`, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
         this.vegaInputRefs[index] = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, this.handleVegaFocus(index));
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, this.handleVegaBlur(index));
@@ -106,12 +106,40 @@ export class VegaInputPasscodeRenderer extends VegaSlimmer {
       } })));
     return (h(Host, null,
       this.label && this.renderLabel(),
-      h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", ref: (dom) => (this.inputPasscodeContainerRef = dom) }, vegaInputBoxes),
+      h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", role: "group", "aria-label": this.label || 'One-time password input', ref: (dom) => (this.inputPasscodeContainerRef = dom) }, vegaInputBoxes),
       this.hint && h("vega-hint", null, this.hint)));
   }
   renderLabel() {
     return (h("vega-field-label", { onClick: this.focusInputPasscode, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
   }
+  /**
+   * Find the index of the first empty input box for rendering purposes. If all boxes are filled, return -1.
+   *
+   * @param {number} inputLength - the input length of the passcode, which is also the number of input boxes to render
+   * @returns {number} - the index of the first empty input box, or -1 if all boxes are filled
+   */
+  getFirstEmptyIndexForRender(inputLength) {
+    for (let index = 0; index < inputLength; index++) {
+      const currentValue = this.vegaInputValues.get(index);
+      if (!currentValue) {
+        return index;
+      }
+    }
+    return -1;
+  }
+  /**
+   * Determine whether the input box at the given index should be accessible to screen readers. Only the boxes up to and including the first empty box should be accessible, as screen readers will read out all accessible boxes and we don't want them to read out empty boxes that come before filled boxes.
+   *
+   * @param {number} index - the index of the input box to check
+   * @returns {boolean} - true if the input box should be accessible to screen readers, false otherwise
+   */
+  isInputAccessibleForScreenReader(index) {
+    const firstEmptyIndexForRender = this.getFirstEmptyIndexForRender(this.length);
+    if (firstEmptyIndexForRender === -1) {
+      return true;
+    }
+    return index <= firstEmptyIndexForRender;
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-passcode-on-input-value-input}

package/dist/collection/components/vega-nav/vega-left-nav-link/slimmers/renderers/vega-left-nav-link-renderer.js

@@ -28,7 +28,6 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
     };
   }
   render() {
-    var _a;
     const url = this.url || 'javascript:void(0);';
     const classList = this.selected === true ? 'selected' : '';
     return (h(Host, { class: classList, "data-key": this.itemKey },
@@ -38,8 +37,8 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
             h("vega-icon", { icon: this.icon, size: "size-16" })))),
         h("span", { class: "vega-links-name" },
           h("slot", null)),
-        h("div", { class: "vega-counter-badge" },
-          h("vega-counter-badge", { count: this.deprecatedPropertySlimmer.getValue(), color: (_a = this.counterBadge) === null || _a === void 0 ? void 0 : _a.color })))));
+        !!this.deprecatedPropertySlimmer.getValue() && (h("div", { class: "vega-counter-badge" },
+          h("vega-counter-badge", { count: this.deprecatedPropertySlimmer.getValue(), color: this.counterBadge.color }))))));
   }
   notifyVegaLeftNav() {
     const vegaLeftNav = findParent(this.host, 'vega-left-nav');

package/dist/collection/components/vega-popover/vega-popover-content-box/vega-popover-content-box.css

@@ -2559,6 +2559,11 @@
   border-bottom-color: transparent;
 }
 
+:host(.vega-no-suitable-placement) .vega-arrow,
+:host(.vega-no-suitable-alignment) .vega-arrow {
+  display: none;
+}
+
 :host(.vega-placement-left) .vega-arrow {
   transform: rotate(144deg);
   right: -9px;

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/image-node-renderer.js

@@ -57,7 +57,13 @@ class RTEImageNodeRenderer extends RTENodeRenderer {
   renderImage(imageAnnotation, node, renderContext) {
     var _a;
     return (h("img", Object.assign({}, (_a = node.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render({ filterAttributes: ['width', 'height'] }), { class: this.getClassesForImageNode(node, renderContext.editable), style: renderContext.editable
-        ? Object.assign(Object.assign({}, node.getStyles()), { width: '100%' }) : Object.assign(Object.assign({}, node.getStyles()), imageAnnotation.renderStyle({ standalone: true })), alt: imageAnnotation.alt, "data-size": imageAnnotation.size, src: node.url, ref: (ref) => super.registerRef(ref, node) })));
+        ? Object.assign(Object.assign({}, node.getStyles()), { width: '100%' }) : Object.assign(Object.assign({}, node.getStyles()), imageAnnotation.renderStyle({ standalone: true })), alt: imageAnnotation.alt, "data-size": imageAnnotation.size, src: node.url, ref: (ref) => super.registerRef(ref, node), 
+      // eslint-disable-next-line react/jsx-no-bind
+      onError: (e) => {
+        const img = e.target;
+        img.style.width = '16px';
+        img.style.height = '16px';
+      } })));
   }
   /**
    * Get the custom class string of the current RTEImageNode.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/insert-image-controller.js

@@ -20,10 +20,13 @@ export class InsertImageController extends VegaSlimmer {
    * Insert a image to current state
    *
    * @param {string} imageUrl The image url
+   * @param {RTEBlock[]} selectedBlocks The current selected blocks, if not provided, will get from selectionController
+   * @param {RTENode[]} selectedNodes The current selected nodes, if not provided, will get from selectionController
+   * @param {RTERange} currentRange The current selected range, if not provided, will get from selectionController
    * @returns {RTEImageNode} RTEImageNode
    */
-  insertImageToCaretPosition(imageUrl) {
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
+  insertImageToCaretPosition(imageUrl, selectedBlocks, selectedNodes, currentRange) {
+    selectedBlocks || (selectedBlocks = this.selectionController.getSelectedBlocks());
     const imageBlock = new RTEImageBlock(generateUUID());
     const newImageNode = new RTEImageNode(generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new ImageAnnotationAction('md', ''));
@@ -33,8 +36,8 @@ export class InsertImageController extends VegaSlimmer {
       void this.valueController.flushChanges(this.value);
     }
     else {
-      const { startOffset } = this.selectionController.getCurrentRange();
-      const selectedNodes = this.selectionController.getSelectedNodes();
+      const { startOffset } = currentRange || this.selectionController.getCurrentRange();
+      selectedNodes || (selectedNodes = this.selectionController.getSelectedNodes());
       selectedBlocks[0].apply(new InsertImageToBlockAction(selectedNodes[0], startOffset, imageBlock));
     }
     this.updateCaretPosition(newImageNode);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/image-toolbar-button-slimmer.js

@@ -6,20 +6,46 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import image from '../../../assets/image';
-import { h } from '@stencil/core';
+import { Fragment, h } from '@stencil/core';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { ImageUpdateUrlAction } from '../../../dto/actions/image-update-url-action';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick, VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
 export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'image',
       tooltip: { text: 'Image' },
     });
-    this.onClick = () => {
-      this.inputElementRef.click();
+    this.insertURLImage = async () => {
+      const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
+      this.applyImageNode(url, 'url');
+      await this.insertURLModalRef.modal('hide');
+    };
+    this.handleDropdownItemClick = async (payload) => {
+      const safeDocument = tryGetDocument();
+      switch (payload.detail) {
+        case 'upload':
+          this.uploadInputRef.click();
+          break;
+        case 'url':
+          this.currentRange = this.selectionController.getCurrentRange();
+          this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+          this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
+          safeDocument && safeDocument.body.append(this.insertURLModalRef);
+          this.insertURLInputRef.value = '';
+          await this.insertURLModalRef.modal('show');
+          await this.insertURLInputRef.doFocus();
+          break;
+        /* istanbul ignore next */
+        default:
+          break;
+      }
+      await this.dropdownRef.hide();
     };
     /**
      * The below method is e2e-test covered in
@@ -32,13 +58,7 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       if (!input.files.length) {
         return;
       }
-      const node = this.insertImageController.insertImageToCaretPosition(URL.createObjectURL(input.files[0]));
-      if (!this.updateNodeURLMap) {
-        this.updateNodeURLMap = new Map();
-      }
-      this.updateNodeURLMap.set(node, (url) => {
-        node.apply(new ImageUpdateUrlAction(url));
-      });
+      const node = this.applyImageNode(URL.createObjectURL(input.files[0]), 'upload');
       const payload = {
         file: input.files[0],
         sendBackUploadedURLCallback: this.updateNodeURLMap.get(node),
@@ -49,8 +69,14 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   }
   renderBtnWrapper(renderBtn) {
     return (h("vega-box", null,
-      renderBtn({ showArrowIcon: false }),
-      h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.inputElementRef = node), accept: "image/*", onChange: this.fileInputChange })));
+      h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+          this.dropdownRef = ref;
+          this.addDropdownObserver(ref);
+        } },
+        renderBtn({ showArrowIcon: true }),
+        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())),
+      this.renderUploadInput(),
+      this.renderInsertURLModal()));
   }
   isSelected() {
     return false;
@@ -62,10 +88,85 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)) ||
       this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
+  renderDropdownContent() {
+    return (h(Fragment, null, ImageToolbarButtonSlimmer.items.map((item) => {
+      return (h("vega-dropdown-item", { key: item.key, itemKey: item.key }, this.translationSlimmer.t(item.label)));
+    })));
+  }
+  renderUploadInput() {
+    return (h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.uploadInputRef = node), accept: "image/*", onChange: this.fileInputChange }));
+  }
+  renderInsertURLModal() {
+    return (h("vega-modal", { size: 500, backdropColor: "semi", ref: (node) => (this.insertURLModalRef = node) },
+      h("div", { slot: "modal-title" }, this.translationSlimmer.t('Image via URL')),
+      h("div", { slot: "modal-content" },
+        h("vega-input", { placeholder: this.translationSlimmer.t('URL'), ref: (ref) => (this.insertURLInputRef = ref), 
+          /* istanbul ignore next */
+          // eslint-disable-next-line react/jsx-no-bind
+          onKeyDown: async (event) => {
+            event.key === 'Enter' && (await this.insertURLImage());
+          } })),
+      h("vega-flex", { slot: "modal-footer", gap: "size-8", alignItems: "center", justifyContent: "end" },
+        h("vega-button", { label: this.translationSlimmer.t('Cancel'), variant: "secondary", ref: (ref) => {
+            this.addModalCancelObserver(ref);
+          } }),
+        h("vega-button", { label: this.translationSlimmer.t('Insert'), ref: (ref) => {
+            this.addModalInsertObserver(ref);
+          } }))));
+  }
+  addDropdownObserver(dropdownRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);
+  }
+  addModalCancelObserver(buttonRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, async () => {
+      await this.insertURLModalRef.modal('hide');
+    });
+  }
+  addModalInsertObserver(buttonRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, this.insertURLImage);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:should-update-url-properly-when-upload-images}
+   */
+  /* istanbul ignore next */
+  applyImageNode(url, type) {
+    const node = type === 'url'
+      ? this.insertImageController.insertImageToCaretPosition(url, this.currentSelectedBlocks, this.currentSelectedNodes, this.currentRange)
+      : this.insertImageController.insertImageToCaretPosition(url);
+    if (!this.updateNodeURLMap) {
+      this.updateNodeURLMap = new Map();
+    }
+    this.updateNodeURLMap.set(node, (url) => {
+      node.apply(new ImageUpdateUrlAction(url));
+    });
+    return node;
+  }
+  normalizeSafeImageUrl(url) {
+    try {
+      const parsedUrl = new URL(url);
+      if (parsedUrl.protocol === 'javascript:') {
+        return '';
+      }
+      // eslint-disable-next-line no-empty
+    }
+    catch (_error) { }
+    return url;
+  }
 }
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
+ImageToolbarButtonSlimmer.items = [
+  {
+    key: 'upload',
+    label: 'Upload from computer',
+  },
+  {
+    key: 'url',
+    label: 'Insert via URL',
+  },
+];
 __decorate([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-image-editor/slimmers/renderers/vega-rich-text-image-editor-renderer.js

@@ -27,7 +27,7 @@ export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
           this.selected = true;

package/dist/collection/components/vega-tooltip/vega-tooltip-content-box/vega-tooltip-content-box.css

@@ -66,6 +66,11 @@
   }
 }
 
+:host(.vega-no-suitable-placement) .vega-tooltip-content::after,
+:host(.vega-no-suitable-alignment) .vega-tooltip-content::after {
+  display: none;
+}
+
 .vega-tooltip-content::after {
   content: "";
   position: absolute;

package/dist/collection/helpers/calendar/test/utils.test.js

@@ -1,4 +1,5 @@
-import { getWeekdays } from '../utils';
+import { getWeekdays, buildDatePickerAnnouncement, getSystemTimezone } from '../utils';
+import { CalendarDate } from '../calendar-date';
 describe('utils', () => {
   it('should return weekdays as expected by default', () => {
     expect(getWeekdays()).toEqual([0, 1, 2, 3, 4, 5, 6]);
@@ -6,4 +7,56 @@ describe('utils', () => {
   it('should return weekdays as expected when change the firstWeekDay', () => {
     expect(getWeekdays(1)).toEqual([1, 2, 3, 4, 5, 6, 0]);
   });
+  it('should return a non-empty string for getSystemTimezone', () => {
+    expect(typeof getSystemTimezone()).toBe('string');
+    expect(getSystemTimezone().length).toBeGreaterThan(0);
+  });
+  describe('buildDatePickerAnnouncement', () => {
+    it('should return empty string when both startDate and endDate are null', () => {
+      expect(buildDatePickerAnnouncement({ mode: 'single', startDate: null })).toBe('');
+      expect(buildDatePickerAnnouncement({ mode: 'range', startDate: null, endDate: null })).toBe('');
+    });
+    it('should return single mode announcement with startDate', () => {
+      const startDate = new CalendarDate(2025, 3, 15);
+      const result = buildDatePickerAnnouncement({ mode: 'single', startDate });
+      expect(result).toContain('Selected result');
+      expect(result).toContain('March');
+      expect(result).toContain('15');
+      expect(result).toContain('2025');
+    });
+    it('should return empty string for single mode without startDate', () => {
+      expect(buildDatePickerAnnouncement({ mode: 'single', startDate: null })).toBe('');
+    });
+    it('should return range mode announcement with both startDate and endDate', () => {
+      const startDate = new CalendarDate(2025, 3, 10);
+      const endDate = new CalendarDate(2025, 3, 20);
+      const result = buildDatePickerAnnouncement({ mode: 'range', startDate, endDate });
+      expect(result).toContain('Selected result');
+      expect(result).toContain('Start Date');
+      expect(result).toContain('End Date');
+      expect(result).toContain('March');
+      expect(result).toContain('10');
+      expect(result).toContain('20');
+    });
+    it('should return range mode announcement with only startDate', () => {
+      const startDate = new CalendarDate(2025, 6, 1);
+      const result = buildDatePickerAnnouncement({ mode: 'range', startDate, endDate: null });
+      expect(result).toContain('Selected result');
+      expect(result).toContain('Start Date');
+      expect(result).toContain('June');
+      expect(result).toContain('1');
+      expect(result).not.toContain('End Date');
+    });
+    it('should return empty string for range mode without any dates', () => {
+      expect(buildDatePickerAnnouncement({ mode: 'range', startDate: null, endDate: null })).toBe('');
+    });
+    it('should return empty string for range mode with only endDate', () => {
+      const endDate = new CalendarDate(2025, 3, 20);
+      expect(buildDatePickerAnnouncement({ mode: 'range', startDate: null, endDate })).toBe('');
+    });
+    it('should return empty string for single mode with only endDate', () => {
+      const endDate = new CalendarDate(2025, 3, 20);
+      expect(buildDatePickerAnnouncement({ mode: 'single', startDate: null, endDate })).toBe('');
+    });
+  });
 });

package/dist/collection/helpers/calendar/utils.js

@@ -1,3 +1,4 @@
+import { VegaInternalTranslation } from '../translation/internal-translation-controller';
 /**
  * Get a week days array
  *
@@ -26,3 +27,37 @@ export var WeekdayLongNames;
 export const getSystemTimezone = () => {
   return Intl.DateTimeFormat().resolvedOptions().timeZone;
 };
+/**
+ * Build an aria announcement string for date picker selection.
+ * TODO: consider to implement i18n for aria announcement .
+ *
+ * @param {object} options - The options for building the announcement.
+ * @param {'single' | 'range'} options.mode - The date picker selection mode.
+ * @param {Nullable<CalendarDate>} options.startDate - The start date.
+ * @param {Nullable<CalendarDate>} [options.endDate] - The end date (used in range mode).
+ * @returns {string} - The aria announcement string.
+ */
+export const buildDatePickerAnnouncement = (options) => {
+  const mode = options.mode;
+  const startDate = options.startDate;
+  const endDate = options.endDate;
+  if (!startDate && !endDate) {
+    return '';
+  }
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const formatDate = (d) => `${d.getMonthName()} ${d.date} ${d.year}`;
+  if (mode === 'single' && startDate) {
+    return `${VegaInternalTranslation.t('Selected result')}: ${formatDate(startDate)}`;
+  }
+  if (mode === 'range') {
+    const startDateLabel = VegaInternalTranslation.t('Start Date');
+    const endDateLabel = VegaInternalTranslation.t('End Date');
+    if (startDate && endDate) {
+      return `${VegaInternalTranslation.t('Selected result')} ${startDateLabel}: ${formatDate(startDate)}. ${endDateLabel}: ${formatDate(endDate)}.`;
+    }
+    if (startDate) {
+      return `${VegaInternalTranslation.t('Selected result')} ${startDateLabel}: ${formatDate(startDate)}.`;
+    }
+  }
+  return '';
+};