@heartlandone/vega 2.76.0 → 2.77.1

package/dist/cjs/{app-globals-12b7d808.js → app-globals-1021e33e.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-const featureFlagController = require('./feature-flag-controller-04cb1e69.js');
-const tokenExtension = require('./token-extension-07cac85d.js');
+const featureFlagController = require('./feature-flag-controller-9129ef52.js');
+const tokenExtension = require('./token-extension-5a1c473e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const vegaDialogController = require('./vega-dialog-controller-03ef4d9a.js');
 const typography = require('./typography-4560e7f1.js');
 const iconManager = require('./icon-manager-c12c6ea9.js');
-const internalTranslationController = require('./internal-translation-controller-053eb0f1.js');
-const validCreditCardNumberRule = require('./valid-credit-card-number-rule-41a8b51b.js');
+const internalTranslationController = require('./internal-translation-controller-1f84ab0a.js');
+const validCreditCardNumberRule = require('./valid-credit-card-number-rule-3f8dc897.js');
 const vegaEnvManager = require('./vega-env-manager-23b8b23c.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const observer = require('./observer-f49483e8.js');
 const index = require('./index-58ea899e.js');
-const dtoRendererManager = require('./dto-renderer-manager-809c947b.js');
+const dtoRendererManager = require('./dto-renderer-manager-e2823eb8.js');
 const vegaNonceManager = require('./vega-nonce-manager-df69d3ed.js');
-const codeBlock = require('./code-block-f1480ec3.js');
+const codeBlock = require('./code-block-f9b86a25.js');
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -396,7 +396,7 @@ function injectVegaRichTextEditorClassIntoGlobal() {
  * Inject VegaPublicValidationRules to global as a public api
  */
 function injectVegaPublicValidationRules() {
-  void Promise.resolve().then(function () { return require('./public-rules-922849f3.js'); }).then((module) => {
+  void Promise.resolve().then(function () { return require('./public-rules-5bd1624d.js'); }).then((module) => {
     Object.entries(module).forEach(([name, value]) => {
       globalThis[name] = value;
     });

package/dist/cjs/aria-attributes-value-mapper-9a41b9cf.js

@@ -0,0 +1,143 @@
+'use strict';
+
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js');
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Maps component attributes/properties to aria-XXX attributes on an inner native element.
+ * Observes attribute changes on host and updates the target element accordingly.
+ */
+class AriaAttributesValueMapper extends mutationObserverSlimmer.MutationObserverSlimmer {
+  /**
+   * The constructor initializes a class instance with a targetGetter function and an ariaMap.
+   *
+   * @param {() => HTMLElement} targetGetter - a function that returns the target element to set aria attributes on
+   * @param {AriaAttributesMap} ariaMap - a map where the key is the aria attribute to set on the target element, and the value is an object that defines the dependencies (attributes/properties on host to check for value) and an optional default value
+   */
+  constructor(targetGetter, ariaMap) {
+    // Build attributeFilter from dependencies
+    const attrs = Array.from(new Set(Object.values(ariaMap).reduce((acc, cur) => acc.concat(cur.dependency), [])));
+    // create entry for MutationObserverSlimmer to observe host attributes (omit target so host is observed)
+    super({
+      options: { attributes: true, attributeFilter: attrs },
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: (mutations) => {
+        this.handleMutations(mutations);
+      },
+    });
+    this.targetGetter = targetGetter;
+    this.ariaMap = ariaMap;
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+    this.performMapping();
+    super.componentDidLoad && super.componentDidLoad();
+  }
+  /**
+   * Run mapping after each component render to ensure refs assigned and
+   * attributes/properties are up-to-date. This guarantees the mapper runs
+   * even when attribute changes are observed before the inner target ref
+   * is available.
+   */
+  componentDidRender() {
+    this.performMapping();
+  }
+  /**
+   * The `handleMutations` function processes an array of `MutationRecord` objects to determine which attributes have changed and then calls the `performMapping` function to update the corresponding aria attributes on the target element. It collects the names of the changed attributes into a set and passes it to the `performMapping` function, which uses this information to decide which aria attributes need to be updated based on their defined dependencies.
+   *
+   * @param {MutationRecord[]} mutations - an array of MutationRecord objects that represent the changes observed by the MutationObserver. Each MutationRecord contains information about the type of mutation, the target element that was mutated, and any relevant attribute names if the mutation was an attribute change.
+   */
+  handleMutations(mutations) {
+    const changedAttrs = new Set();
+    if (mutations && mutations.length) {
+      for (const m of mutations) {
+        if (m.attributeName)
+          changedAttrs.add(m.attributeName);
+      }
+    }
+    this.performMapping(changedAttrs.size ? changedAttrs : undefined);
+  }
+  /**
+   * The `performMapping` function updates the aria attributes on the target element based on the defined dependencies in the `ariaMap`. It checks which attributes have changed (if provided) and only updates the aria attributes that depend on those changed attributes. For each aria attribute defined in the `ariaMap`, it looks for the first non-empty value among its dependencies (checking both attributes and properties on the host element) and sets that as the value of the aria attribute on the target element. If all dependencies are empty or undefined, it uses the default value specified in the `ariaMap`. The function also includes error handling when setting attributes on the target element.
+   *
+   * @param {Set<string>} changedAttrs - a set of attribute names that have changed on the host element
+   */
+  performMapping(changedAttrs) {
+    const target = this.targetGetter ? this.targetGetter() : null;
+    if (!target)
+      return;
+    const host = this.host;
+    Object.keys(this.ariaMap).forEach((ariaAttr) => {
+      const { dependency, defaultValue } = this.ariaMap[ariaAttr];
+      // If no relevant dependency changed, skip updating this ariaAttr
+      if (changedAttrs && !dependency.some((item) => changedAttrs.has(item))) {
+        return;
+      }
+      let finalValue = null;
+      for (const item of dependency) {
+        // Try attribute first
+        let val = host.getAttribute(item);
+        if (val === null || val === undefined || val === '') {
+          // Try property on host if attribute not present or empty
+          // support dashed-name -> camelCase property (e.g. data-aria-label -> dataAriaLabel)
+          const camel = item.replace(/-([a-z])/g, (_m, p1) => p1.toUpperCase());
+          const p1 = host[item];
+          const p2 = host[camel];
+          if (p1 !== undefined && p1 !== null) {
+            val = String(p1);
+          }
+          else if (p2 !== undefined && p2 !== null) {
+            val = String(p2);
+          }
+        }
+        if (val !== null && val !== undefined && String(val).trim() !== '') {
+          finalValue = val;
+          break;
+        }
+      }
+      if (finalValue === null || finalValue === undefined || String(finalValue).trim() === '') {
+        finalValue = defaultValue;
+      }
+      try {
+        if (String(finalValue).trim() === '') {
+          target.removeAttribute(ariaAttr);
+          return;
+        }
+        const existing = target.getAttribute(ariaAttr);
+        if (finalValue === null || finalValue === undefined) {
+          if (existing !== null) {
+            target.removeAttribute(ariaAttr);
+          }
+          return;
+        }
+        const stringValue = String(finalValue);
+        if (existing !== stringValue) {
+          target.setAttribute(ariaAttr, stringValue);
+        }
+      }
+      catch (e) {
+        globalSlimmerRegistry.LogUtility.warn('Errors occurred when setting aria attribute:', {
+          ariaAttr,
+          finalValue,
+          error: e,
+        });
+      }
+    });
+  }
+}
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], AriaAttributesValueMapper.prototype, "componentDidLoad", null);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
+], AriaAttributesValueMapper.prototype, "componentDidRender", null);
+
+exports.AriaAttributesValueMapper = AriaAttributesValueMapper;

package/dist/cjs/{child-nodes-event-prevent-slimmer-84435957.js → child-nodes-event-prevent-slimmer-cc6d2919.js}

@@ -3,7 +3,7 @@
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const internalVegaEventManager = require('./internal-vega-event-manager-f7ecf3d4.js');
 const vegaEnvManager = require('./vega-env-manager-23b8b23c.js');
-const featureFlagController = require('./feature-flag-controller-04cb1e69.js');
+const featureFlagController = require('./feature-flag-controller-9129ef52.js');
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/{code-block-f1480ec3.js → code-block-f9b86a25.js}

@@ -5,7 +5,7 @@ const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-facto
 const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
 const string = require('./string-39438062.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const typeGuard = require('./type-guard-407ba0b8.js');
+const typeGuard = require('./type-guard-cd0376d4.js');
 const misc = require('./misc-3d30df91.js');
 const darkModeStyleController = require('./dark-mode-style-controller-3a04af3d.js');
 const object = require('./object-e2e28e3d.js');

package/dist/cjs/{component-value-history-controller-slimmer.abstract-a9264cc8.js → component-value-history-controller-slimmer.abstract-6bcff70b.js}

@@ -1,17 +1,17 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const codeBlock = require('./code-block-f1480ec3.js');
+const codeBlock = require('./code-block-f9b86a25.js');
 const timer = require('./timer-5f33058b.js');
 const component = require('./component-1e352960.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
 const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
 const observer = require('./observer-f49483e8.js');
-const range = require('./range-8aa49b08.js');
+const range = require('./range-7a038973.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
 const ui = require('./ui-234ea151.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-0cc0c1c7.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-5b8fa209.js');
 
 let processing = false;
 /**

package/dist/cjs/{date-required-rule-912469e0.js → date-required-rule-d3c2d088.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const typeGuard = require('./type-guard-407ba0b8.js');
+const typeGuard = require('./type-guard-cd0376d4.js');
 const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 
 /**

package/dist/cjs/{design-token-41baf118.js → design-token-b21879b6.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const typeGuard = require('./type-guard-407ba0b8.js');
+const typeGuard = require('./type-guard-cd0376d4.js');
 const breakpoints = require('./breakpoints-ebde4837.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const responsiveFormatFacade = require('./responsive-format-facade-ea59bdcd.js');
+const responsiveFormatFacade = require('./responsive-format-facade-0b65ce4a.js');
 const typography = require('./typography-4560e7f1.js');
 const ui = require('./ui-32e69595.js');
 

package/dist/cjs/{dto-renderer-manager-809c947b.js → dto-renderer-manager-e2823eb8.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const codeBlock = require('./code-block-f1480ec3.js');
+const codeBlock = require('./code-block-f9b86a25.js');
 const misc = require('./misc-3d30df91.js');
-const typeGuard = require('./type-guard-407ba0b8.js');
+const typeGuard = require('./type-guard-cd0376d4.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
 const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');

package/dist/cjs/{element-appender-slimmer-34e4eb56.js → element-appender-slimmer-40d39bba.js}

@@ -6,10 +6,10 @@ const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03dd
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-7f065ee1.js');
 const ui$1 = require('./ui-32e69595.js');
-const typeGuard = require('./type-guard-407ba0b8.js');
-const responsiveFormatFacade = require('./responsive-format-facade-ea59bdcd.js');
+const typeGuard = require('./type-guard-cd0376d4.js');
+const responsiveFormatFacade = require('./responsive-format-facade-0b65ce4a.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
-const featureFlagController = require('./feature-flag-controller-04cb1e69.js');
+const featureFlagController = require('./feature-flag-controller-9129ef52.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const observer = require('./observer-f49483e8.js');
@@ -292,19 +292,24 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
    * returns an ElementPositionBox.
    */
   getPositionBox(placement, alignment) {
-    const placements = placement || this.getPlacements();
-    const alignments = alignment || this.getAlignments();
+    const placements = placement && placement.length > 0 ? placement : this.getPlacements();
+    const alignments = alignment && alignment.length > 0 ? alignment : this.getAlignments();
     const targetBox = this.getTargetBoundBox();
     const elementBox = this.getElementBoundBox();
     const containerBox = this.getElementScrollDimension();
     const suitablePlacement = this.getSuitablePlacement(containerBox, elementBox, targetBox, placements);
-    const suitableAlignment = this.getSuitableAlignment(containerBox, elementBox, targetBox, suitablePlacement, alignments);
-    const positionBox = this.calculatePosition(elementBox, targetBox, suitablePlacement, suitableAlignment);
-    const translocationBox = this.getTranslocationBox(suitablePlacement);
+    const activePlacement = suitablePlacement || placements[0];
+    const suitableAlignment = this.getSuitableAlignment(containerBox, elementBox, targetBox, activePlacement, alignments);
+    const activeAlignment = suitableAlignment || alignments[0];
+    const positionBox = this.calculatePosition(elementBox, targetBox, activePlacement, activeAlignment);
+    const translocationBox = this.getTranslocationBox(activePlacement);
     positionBox.placement = suitablePlacement;
     positionBox.alignment = suitableAlignment;
     positionBox.left += translocationBox.X;
     positionBox.top += translocationBox.Y;
+    if (!this.showConfig.positionRelativeTo) {
+      this.adjustPositionForViewport(positionBox, elementBox, targetBox, activePlacement);
+    }
     return positionBox;
   }
   /**
@@ -443,7 +448,7 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
    * @param {ElementBoundBox} elementBox - The box of the element to be placed.
    * @param {ElementBoundBox} targetBox - The box of the target element.
    * @param {PlacementType[]} placements - The placements that we want to try.
-   * @returns {PlacementType} A function that takes in a containerBox, elementBox, targetBox, placements, and element.
+   * @returns {Nullable<PlacementType>} A function that takes in a containerBox, elementBox, targetBox, placements, and element.
    */
   getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
     const defaultPlacement = placements[0];
@@ -456,7 +461,7 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
                 No enough space found for placing element and we will keep using the defined placement:
                 ${defaultPlacement}
             `);
-      return defaultPlacement;
+      return null;
     }
   }
   /**
@@ -522,6 +527,115 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
       left: this.calculateLeft(elementBox, targetBox, placement, alignment),
     };
   }
+  /**
+   * Keeps the vertical position within the visible viewport
+   *
+   * @param {number} top - The calculated top position.
+   * @param {number} elementHeight - The height of the element.
+   * @returns {number} The top position constrained to the viewport.
+   */
+  keepVerticallyInView(top, elementHeight) {
+    return Math.max(0, Math.min(top, window.innerHeight - elementHeight));
+  }
+  /**
+   * Keeps the horizontal position within the visible viewport
+   *
+   * @param {number} left - The calculated left position.
+   * @param {number} elementWidth - The width of the element.
+   * @returns {number} The left position constrained to the viewport.
+   */
+  keepHorizontallyInView(left, elementWidth) {
+    return Math.max(0, Math.min(left, window.innerWidth - elementWidth));
+  }
+  /**
+   * Checks if the target element is visible in the viewport
+   *
+   * @param {ElementBoundBox} targetBox - The bounding box of the target element.
+   * @returns {boolean} True if target is visible in viewport.
+   */
+  isTargetInView(targetBox) {
+    const innerHeight = window.innerHeight;
+    const innerWidth = window.innerWidth;
+    const targetBottom = targetBox.top + targetBox.height;
+    const targetRight = targetBox.left + targetBox.width;
+    return (targetBox.top <= innerHeight &&
+      targetBottom >= 0 &&
+      targetBox.left <= innerWidth &&
+      targetRight >= 0);
+  }
+  /**
+   * Corrects `positionBox` so the element stays within the viewport after translocation.
+   * Only runs when the target is visible; skips correction entirely if the target has
+   * scrolled out of view so the element simply follows it.
+   *
+   * @param {ElementPositionBox} positionBox - The final position box to adjust (mutated in place).
+   * @param {ElementBoundBox} elementBox - Dimensions of the positioned element.
+   * @param {ElementBoundBox} targetBox - Bounding box of the target element.
+   * @param {PlacementType} placement - Active placement used to select the correction axis.
+   */
+  adjustPositionForViewport(positionBox, elementBox, targetBox, placement) {
+    if (!this.isTargetInView(targetBox)) {
+      return;
+    }
+    if (placement === 'top' || placement === 'bottom') {
+      positionBox.top = this.adjustForVerticalOverflow(positionBox.top, elementBox.height, targetBox.height);
+    }
+    else if (placement === 'left' || placement === 'right') {
+      positionBox.left = this.adjustForHorizontalOverflow(positionBox.left, elementBox.width, targetBox.width);
+    }
+    positionBox.top = this.keepVerticallyInView(positionBox.top, elementBox.height);
+    positionBox.left = this.keepHorizontallyInView(positionBox.left, elementBox.width);
+  }
+  /**
+   * Nudges `top` so the element stays within the viewport vertically.
+   * Only corrects when the overflow is less than `targetHeight` to keep the element
+   * visually anchored to its target; larger overflows are handled by `keepVerticallyInView`.
+   *
+   * @param {number} top - The calculated top position.
+   * @param {number} elementHeight - Height of the positioned element.
+   * @param {number} targetHeight - Height of the target, used as the max correctable overflow.
+   * @returns {number} The adjusted top position.
+   */
+  adjustForVerticalOverflow(top, elementHeight, targetHeight) {
+    // Pixels the element bleeds past the bottom of the viewport (positive = overflow).
+    const overflowBottom = top + elementHeight - window.innerHeight;
+    // Pixels the element bleeds past the top of the viewport (positive = overflow).
+    const overflowTop = -top;
+    // Only nudge when overflow is smaller than targetHeight; larger overflows are left to
+    // keepVerticallyInView to hard-clamp, since nudging that far would detach from the target.
+    if (overflowBottom > 0 && overflowBottom < targetHeight) {
+      return top - overflowBottom; // shift up until bottom edge is flush with viewport bottom
+    }
+    if (overflowTop > 0 && overflowTop < targetHeight) {
+      return top + overflowTop; // shift down until top edge is flush with viewport top
+    }
+    return top;
+  }
+  /**
+   * Nudges `left` so the element stays within the viewport horizontally.
+   * Only corrects when the overflow is less than `targetWidth` to keep the element
+   * visually anchored to its target; larger overflows are handled by `keepHorizontallyInView`.
+   *
+   * @param {number} left - The calculated left position.
+   * @param {number} elementWidth - Width of the positioned element.
+   * @param {number} targetWidth - Width of the target, used as the max correctable overflow.
+   * @returns {number} The adjusted left position.
+   */
+  adjustForHorizontalOverflow(left, elementWidth, targetWidth) {
+    // Pixels the element bleeds past the right edge of the viewport (positive = overflow).
+    const overflowRight = left + elementWidth - window.innerWidth;
+    // Pixels the element bleeds past the left edge of the viewport (positive = overflow).
+    const overflowLeft = -left;
+    // Only nudge when overflow is smaller than targetWidth; larger overflows are left to
+    // keepHorizontallyInView to hard-clamp, since nudging that far would detach from the target.
+    if (overflowRight > 0 && overflowRight < targetWidth) {
+      return left - overflowRight; // shift left until right edge is flush with viewport right
+    }
+    if (overflowLeft > 0 && overflowLeft < targetWidth) {
+      return left + overflowLeft; // shift right until left edge is flush with viewport left
+    }
+    return left;
+  }
   /**
    * It returns the translocation of the element relative to the target element
    *
@@ -566,7 +680,7 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
    * @param {ElementBoundBox} targetBox - The box of the element that the element to be positioned is aligned to.
    * @param {PlacementType} placement - The placement of the element relative to the target.
    * @param {PositionAlignmentType[]} alignments - An array of alignments to try.
-   * @returns {PositionAlignmentType} the alignment that is suitable for the element.
+   * @returns {Nullable<PositionAlignmentType>} the alignment that is suitable for the element.
    */
   getSuitableAlignment(containerBox, elementBox, targetBox, placement, alignments) {
     const defaultAlignment = alignments[0];
@@ -579,7 +693,7 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
                 No enough space found for placing element and we will keep using the defined alignment:
                 ${defaultAlignment}
             `);
-      return defaultAlignment;
+      return null;
     }
   }
   /**
@@ -828,9 +942,17 @@ class ScreenPositionCalculationStrategy extends BasePositionCalculationStrategy
    */
   getPosition(usePreviousPlacement) {
     const stayPlacement = usePreviousPlacement ? this.usePreviousPlacement : false;
-    const positionBox = stayPlacement
-      ? this.getPositionBox([this.previousPositionBox.placement], [this.previousPositionBox.alignment])
-      : this.getPositionBox();
+    let positionBox;
+    if (stayPlacement) {
+      positionBox = this.getPositionBox([this.previousPositionBox.placement].filter(typeGuard.isNonNullable), [this.previousPositionBox.alignment].filter(typeGuard.isNonNullable));
+      if (!featureFlagController.FeatureFlag.isEnabled('VEGA_ELEMENT_APPENDER.AUTO_PLACEMENT')) {
+        positionBox.placement = this.previousPositionBox.placement;
+        positionBox.alignment = this.previousPositionBox.alignment;
+      }
+    }
+    else {
+      positionBox = this.getPositionBox();
+    }
     this.previousPositionBox = positionBox;
     return positionBox;
   }
@@ -889,7 +1011,7 @@ class ScreenPositionCalculationStrategy extends BasePositionCalculationStrategy
    * @param {ElementBoundBox} elementBox - The box of the element to place.
    * @param {ElementBoundBox} targetBox - The box of the target element.
    * @param {PlacementType[]} placements - Ordered list of placements to try.
-   * @returns {PlacementType} The chosen placement.
+   * @returns {Nullable<PlacementType>} The chosen placement.
    */
   getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
     const alignments = this.getAlignments();
@@ -965,10 +1087,20 @@ class PositionCalculationController extends globalSlimmerRegistry.VegaSlimmer {
     }
     appendableElement.style.left = `${positionBox.left}px`;
     appendableElement.style.top = `${positionBox.top}px`;
-    appendableElement.classList.remove('vega-placement-left', 'vega-placement-right', 'vega-placement-top', 'vega-placement-bottom');
-    appendableElement.classList.remove('vega-alignment-start', 'vega-alignment-center', 'vega-alignment-end');
-    appendableElement.classList.add(`vega-placement-${positionBox.placement}`);
-    appendableElement.classList.add(`vega-alignment-${positionBox.alignment}`);
+    appendableElement.classList.remove('vega-placement-left', 'vega-placement-right', 'vega-placement-top', 'vega-placement-bottom', 'vega-no-suitable-placement');
+    appendableElement.classList.remove('vega-alignment-start', 'vega-alignment-center', 'vega-alignment-end', 'vega-no-suitable-alignment');
+    if (positionBox.placement) {
+      appendableElement.classList.add(`vega-placement-${positionBox.placement}`);
+    }
+    else {
+      appendableElement.classList.add(`vega-no-suitable-placement`);
+    }
+    if (positionBox.alignment) {
+      appendableElement.classList.add(`vega-alignment-${positionBox.alignment}`);
+    }
+    else {
+      appendableElement.classList.add(`vega-no-suitable-alignment`);
+    }
   }
   /**
    * It sets the width of the appendable element to the width of the target element if the
@@ -1706,6 +1838,7 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
   show() {
     this.elementAppender && this.elementAppender.show();
     this[this.isDropdownShowName] = true;
+    this.setAriaOwns();
   }
   hide() {
     this.elementAppender && this.elementAppender.hide();
@@ -1715,6 +1848,7 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
     });
   }
   destroy() {
+    this.removeAriaOwns();
     this.destroyElementAppender();
     this[this.isDropdownShowName] = false;
   }
@@ -1797,6 +1931,31 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
       return new NoneTriggerStrategy();
     }
   }
+  /**
+   * Sets `ariaOwnsElements` on the target element to reference the appendable element directly.
+   * Uses the Element Reflection API which works across shadow DOM boundaries by using
+   * direct element references instead of IDREF strings.
+   * This ensures screen readers (e.g. VoiceOver) can navigate to the portal-appended
+   * content immediately after the trigger, rather than at the end of the document.
+   */
+  setAriaOwns() {
+    if (this.showConfig) {
+      const target = this.showConfig.target;
+      const appendableElement = this.showConfig.appendableElement;
+      if (target && appendableElement) {
+        target.ariaOwnsElements = [appendableElement];
+      }
+    }
+  }
+  /**
+   * Removes `ariaOwnsElements` from the target element when the popup is hidden or destroyed.
+   */
+  removeAriaOwns() {
+    var _a;
+    if ((_a = this.showConfig) === null || _a === void 0 ? void 0 : _a.target) {
+      this.showConfig.target.ariaOwnsElements = [];
+    }
+  }
 }
 ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
 __decorate([

package/dist/cjs/{form-field-controller-slimmer-102f37c7.js → form-field-controller-slimmer-1b3a1388.js}

@@ -10,7 +10,7 @@ const misc = require('./misc-3d30df91.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
 const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
-const internalTranslationController = require('./internal-translation-controller-053eb0f1.js');
+const internalTranslationController = require('./internal-translation-controller-1f84ab0a.js');
 const index = require('./index-592b4052.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-7f065ee1.js');
 const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');

package/dist/cjs/{image-annotation-action-8d9fa20c.js → image-annotation-action-b83283d4.js}

@@ -3,11 +3,11 @@
 const index = require('./index-58ea899e.js');
 const internalIconManager = require('./internal-icon-manager-c989189a.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const codeBlock = require('./code-block-f1480ec3.js');
+const codeBlock = require('./code-block-f9b86a25.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
 const vegaEventId = require('./vega-event-id-ee01d8dd.js');
 const darkModeStyleController = require('./dark-mode-style-controller-3a04af3d.js');
-const dtoRendererManager = require('./dto-renderer-manager-809c947b.js');
+const dtoRendererManager = require('./dto-renderer-manager-e2823eb8.js');
 
 const text = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M64 96v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V80C0 53.5 21.5 32 48 32H224 400c26.5 0 48 21.5 48 48v48c0 17.7-14.3 32-32 32s-32-14.3-32-32V96H256l0 320h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H144c-17.7 0-32-14.3-32-32s14.3-32 32-32h48l0-320H64z"/></svg>`,

package/dist/cjs/index.cjs.js

@@ -4,36 +4,36 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const breakpoints = require('./breakpoints-751d433a.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const designToken = require('./design-token-41baf118.js');
+const designToken = require('./design-token-b21879b6.js');
 const string = require('./string-39438062.js');
-const typeGuard = require('./type-guard-407ba0b8.js');
+const typeGuard = require('./type-guard-cd0376d4.js');
 const breakpoints$1 = require('./breakpoints-ebde4837.js');
 const icons = require('./icons-dbc3eb9c.js');
 const typography = require('./typography-4560e7f1.js');
 const ui = require('./ui-32e69595.js');
 const vegaEnvManager = require('./vega-env-manager-23b8b23c.js');
-const tokenExtension = require('./token-extension-07cac85d.js');
-const featureFlagController = require('./feature-flag-controller-04cb1e69.js');
+const tokenExtension = require('./token-extension-5a1c473e.js');
+const featureFlagController = require('./feature-flag-controller-9129ef52.js');
 const vegaDialogController = require('./vega-dialog-controller-03ef4d9a.js');
 const internalVegaEventManager = require('./internal-vega-event-manager-f7ecf3d4.js');
 const iconManager = require('./icon-manager-c12c6ea9.js');
-const validCreditCardNumberRule = require('./valid-credit-card-number-rule-41a8b51b.js');
+const validCreditCardNumberRule = require('./valid-credit-card-number-rule-3f8dc897.js');
 require('./ui-234ea151.js');
-const internalTranslationController = require('./internal-translation-controller-053eb0f1.js');
+const internalTranslationController = require('./internal-translation-controller-1f84ab0a.js');
 const vegaNonceManager = require('./vega-nonce-manager-df69d3ed.js');
-const codeBlock = require('./code-block-f1480ec3.js');
-const dtoRendererManager = require('./dto-renderer-manager-809c947b.js');
-const responsiveFormatFacade = require('./responsive-format-facade-ea59bdcd.js');
+const codeBlock = require('./code-block-f9b86a25.js');
+const dtoRendererManager = require('./dto-renderer-manager-e2823eb8.js');
+const responsiveFormatFacade = require('./responsive-format-facade-0b65ce4a.js');
 const checkBoxRequiredRule = require('./check-box-required-rule-1ee54b9a.js');
-const dateRequiredRule = require('./date-required-rule-912469e0.js');
+const dateRequiredRule = require('./date-required-rule-d3c2d088.js');
 const inputPhoneNumberRequiredRule = require('./input-phone-number-required-rule-2668fdf1.js');
 const inputRangeRequiredRule = require('./input-range-required-rule-5b9c2a95.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
-const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-22225840.js');
-const timeRequiredRule = require('./time-required-rule-d6fa7aa8.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-d984c0b6.js');
+const timeRequiredRule = require('./time-required-rule-50784b9f.js');
 const toggleSwitchRequiredRule = require('./toggle-switch-required-rule-88a51b36.js');
 const fileUploaderRequiredRule = require('./file-uploader-required-rule-313ec9e3.js');
-const range = require('./range-8aa49b08.js');
+const range = require('./range-7a038973.js');
 require('./misc-3d30df91.js');
 require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
 require('./dynamic-slimmer-f31fdfd7.js');

package/dist/cjs/{inject-keyboard-manager-0f5bd568.js → inject-keyboard-manager-ea5c598e.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const keyboardManager = require('./keyboard-manager-055e9f67.js');
+const keyboardManager = require('./keyboard-manager-16494c34.js');
 
 /**
  * It takes a function that returns an array of keyboard event listeners, and returns a decorator