@heartlandone/vega 2.80.0 → 2.81.0

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

@@ -24,11 +24,13 @@ export class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
       var _a;
       // If source view is closed while blurring, it means the user switch back to normal mode, so we can skip emitting the change event.
       if (this.sourceView) {
+        const filterInlineStyles = Boolean(this.sourceEditConfig.filterInlineStyles);
         const sourceCode = this.getSourceCode();
         const newValue = VegaRTEContent.fromHtml(sourceCode, {
           autoMatchFormat: (_a = this.sourceEditConfig.autoMatchFormat) !== null && _a !== void 0 ? _a : true,
+          filterInlineStyles,
         });
-        const newSourceCode = newValue.toHtml();
+        const newSourceCode = newValue.toHtml({ filterInlineStyles });
         if (newSourceCode !== this.prevRecord) {
           this.sourceCodeChangeEventEmitter.emit(newSourceCode);
           this.prevRecord = newSourceCode;
@@ -62,7 +64,7 @@ export class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
   render() {
     if (!this.allowSourceEdit)
       return;
-    const sourceCode = this.value.toHtml();
+    const sourceCode = this.getSourceTemplate();
     const sourceViewValue = this.sourceView ? CodeFormatter.format(sourceCode) : '';
     // Record the source view value when rendering, which will be used to compare with the current source view value when blurring the code block to determine whether to emit the source code change event.
     this.prevRecord = sourceCode;
@@ -75,6 +77,14 @@ export class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalCodeBlockBlur, this.handleCodeBlockBlur);
         }, disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
   }
+  /**
+   * Get the source view template string based on the current value of the rich text editor.
+   *
+   * @returns {string} The HTML template string
+   */
+  getSourceTemplate() {
+    return this.value.toHtml({ filterInlineStyles: this.sourceEditConfig.filterInlineStyles });
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -447,7 +447,7 @@ export class VegaRichTextEditor {
       "mutable": false,
       "complexType": {
         "original": "VegaRTESourceEditConfig",
-        "resolved": "{ autoMatchFormat?: boolean; }",
+        "resolved": "{ autoMatchFormat?: boolean; filterInlineStyles?: boolean; }",
         "references": {
           "VegaRTESourceEditConfig": {
             "location": "import",

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

@@ -8,7 +8,7 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class VegaSectionTitleRenderer extends VegaSlimmer {
   render() {
-    return (h("vega-flex", { "align-items": "start", "justify-content": "start", gap: "size-8" },
+    return (h("vega-flex", { "align-items": "start", "justify-content": "start", gap: "size-8", class: this.size === 'small' ? 'section-title-small' : undefined },
       this.renderPrefixIcon(),
       this.renderText()));
   }
@@ -34,7 +34,7 @@ export class VegaSectionTitleRenderer extends VegaSlimmer {
       this.iconAlign === 'right' && h("div", { class: "right-icon-container" }, this.renderIcon()));
   }
   renderIcon() {
-    return (h("vega-icon", { icon: this.icon, color: "text-primary", size: "size-20", class: "vega-flex-shrink-0" }));
+    return (h("vega-icon", { icon: this.icon, color: this.iconColor, size: this.size === 'small' ? 'size-16' : 'size-20', class: "vega-flex-shrink-0" }));
   }
 }
 __decorate([
@@ -52,3 +52,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSectionTitleRenderer.prototype, "iconAlign", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSectionTitleRenderer.prototype, "iconColor", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSectionTitleRenderer.prototype, "size", void 0);

package/dist/collection/components/vega-section-title/vega-section-title.css

@@ -88,4 +88,39 @@
   margin-left: 8px;
   margin-top: 4px;
   vertical-align: middle;
+}
+
+.section-title-small .section-title-text {
+  font-family: "Inter", sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 25px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .section-title-small .section-title-text {
+    font-family: "Inter", sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 25px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .section-title-small .section-title-text {
+    font-family: "Inter", sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 25px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .section-title-small .section-title-text {
+    font-family: "Inter", sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 25px;
+    letter-spacing: 0px;
+  }
 }

package/dist/collection/components/vega-section-title/vega-section-title.js

@@ -31,6 +31,18 @@ export class VegaSectionTitle {
      * @vegaVersion 2.1.0
      */
     this.iconAlign = 'left';
+    /**
+     * Specifies the color of the icon displayed
+     *    within the section title.
+     * @vegaVersion 2.81.0
+     */
+    this.iconColor = 'text-primary';
+    /**
+     * Specifies the size of the section title.
+     *
+     * @vegaVersion 2.81.0
+     */
+    this.size = 'default';
   }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
@@ -130,6 +142,58 @@ export class VegaSectionTitle {
       "attribute": "icon-align",
       "reflect": false,
       "defaultValue": "'left'"
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TextColorsTokenType",
+        "resolved": "\"text-primary\" | \"text-secondary\" | \"text-inverted-primary\" | \"text-inverted-secondary\" | \"text-black\" | \"text-white\" | \"text-brand\" | \"text-danger-link\" | \"text-danger-link-hover\" | \"text-danger-link-active\" | \"text-danger-link-focus\" | \"text-danger-link-visited\" | \"text-disabled\" | \"text-error\" | \"text-input-disabled\" | \"text-input-placeholder\" | \"text-link\" | \"text-link-hover\" | \"text-link-active\" | \"text-link-focus\" | \"text-link-visited\" | \"text-on-action\" | \"text-on-danger\" | \"text-on-disabled\" | \"text-sidebar-link\" | \"text-sidebar-link-hover\" | \"text-sidebar-link-selected\" | \"text-site-footer-link\" | \"text-site-footer-link-hover\" | \"text-site-footer-link-active\" | \"text-success\" | \"text-inverted-success\" | \"text-accent1-primary\" | \"text-accent2-primary\" | \"text-accent3-primary\" | \"text-accent4-primary\" | \"text-accent5-primary\" | \"text-accent6-primary\" | \"text-accent7-primary\" | \"text-accent8-primary\" | \"text-accent9-primary\" | \"text-accent10-primary\"",
+        "references": {
+          "TextColorsTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": "Specifies the color of the icon displayed\n   within the section title."
+      },
+      "attribute": "icon-color",
+      "reflect": false,
+      "defaultValue": "'text-primary'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaSectionTitleSizeType",
+        "resolved": "\"default\" | \"small\"",
+        "references": {
+          "VegaSectionTitleSizeType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": "Specifies the size of the section title."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'default'"
     }
   }; }
   static get elementRef() { return "host"; }

package/dist/collection/components/vega-stepper/vega-stepper.css

@@ -50,6 +50,9 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
+}
+
+:host > label + div {
   margin-top: 8px;
 }
 

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-margin-formatter.js

@@ -1,4 +1,4 @@
-import { isSpacingTokenType, isDirectionalSpacingType, isBreakpointsForPrefixType, } from '../../../types/type-guard';
+import { isDirectionalMarginType, isBreakpointsForPrefixType, isMarginValueType, } from '../../../types/type-guard';
 import { LogUtility } from '../../../utils/log';
 import { Spacing } from '../../../constants/tokens/spacing';
 import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
@@ -26,10 +26,10 @@ class ResponsiveMarginFormatter extends ResponsiveClassStringFormatter {
    */
   formatToken(input, breakpoint) {
     const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
-    if (isSpacingTokenType(input)) {
+    if (isMarginValueType(input)) {
       return `${prefix}v-m-${input}`;
     }
-    else if (isDirectionalSpacingType(input)) {
+    else if (isDirectionalMarginType(input)) {
       return Object.keys(input)
         .map((direction) => {
         return `${prefix}v-${MARGIN_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;

package/dist/collection/helpers/slimmers/aria-dialog-focusable-trap-slimmer.js

@@ -5,26 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { checkIsVoiceOverClick, getDeepActiveElementInShadow } from '../../utils/ui';
+import { checkIsVoiceOverClick, getDeepActiveElementInShadow, getFirstFocusableElement, } from '../../utils/ui';
 import { SynchronizeTaskQueue } from '../queue/synchronize-task-queue';
 import { Observer } from '../change-manager/observer/observer';
 import ChangeManager from '../change-manager/change-manager';
 import { VegaInternalDialogContentReady } from '../event-manager/event-id/vega-internal-event-id';
 import domNodeSubjectFactory from '../change-manager/subject/dom-node-subject/dom-node-subject-factory';
-const focusableSelector = [
-  'a[href]',
-  'area[href]',
-  'button',
-  'input',
-  'select',
-  'textarea',
-  'iframe',
-  'object',
-  'embed',
-  '[contenteditable="true"]',
-  '[contenteditable=""]',
-  '[tabindex]',
-].join(',');
 /**
  * The `AriaDialogFocusableTrapSlimmer` class is designed to manage focus behavior for dialog elements appended to the DOM, particularly in scenarios where screen readers like VoiceOver are used.
  * It detects when a click event is likely triggered by VoiceOver and ensures that focus is appropriately set to the first focusable element
@@ -46,6 +32,7 @@ export class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
     this.eventListenerHandler = () => {
       const target = this.entry.triggerEl() || window;
       target.addEventListener('click', this.handleClickEvent, { capture: true });
+      target.addEventListener('contextmenu', this.handleContextMenuEvent, { capture: true });
     };
     /**
      * Removes the event listener for click events from the trigger element or the window.
@@ -54,6 +41,7 @@ export class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
       const target = this.entry.triggerEl();
       target && target.removeEventListener('click', this.handleClickEvent, { capture: true });
       window.removeEventListener('click', this.handleClickEvent, { capture: true });
+      target && target.removeEventListener('contextmenu', this.handleContextMenuEvent, { capture: true });
     };
     /**
      * Handles the click event and determines if it is likely triggered by VoiceOver.
@@ -69,62 +57,17 @@ export class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
       }
     };
     /**
-     * Recursively searches for the first focusable element within the given container, including its shadow DOM descendants.
-     * 	If the container itself is focusable, it will be returned.
+     * Handles the context menu event to prevent the default context menu from appearing when a VoiceOver click is detected.
+     * This is important because VoiceOver users may trigger a context menu with a specific gesture, and preventing the default behavior can help ensure that the focus management works as intended without interference from the context menu.
      *
-     * @param {HTMLElement | ShadowRoot} container - The container to search within.
-     * @returns {Nullable<HTMLElement>} The first focusable element found, or null if none exists.
+     * @param {MouseEvent} e - The context menu event object that is passed to the event handler.
      */
-    this.getFirstFocusableElement = (container) => {
-      /**
-       * Recursively search for the first focusable element within the given node and its shadow DOM descendants.
-       *
-       * @param {ParentNode} node - The node to search within.
-       * @returns {Nullable<HTMLElement>} The first focusable element found, or null if none exists.
-       */
-      const findFirst = (node) => {
-        if (node instanceof HTMLElement && this.isFocusableElement(node)) {
-          return node;
-        }
-        const elements = Array.from(node.querySelectorAll('*'));
-        for (const element of elements) {
-          if (this.isFocusableElement(element)) {
-            return element;
-          }
-          if (element.shadowRoot) {
-            const found = findFirst(element.shadowRoot);
-            if (found)
-              return found;
-          }
-        }
-        return null;
-      };
-      if (container instanceof HTMLElement && container.shadowRoot) {
-        if (this.isFocusableElement(container))
-          return container;
-        return findFirst(container) || findFirst(container.shadowRoot);
-      }
-      else {
-        return findFirst(container);
+    this.handleContextMenuEvent = (e) => {
+      if (this.isVoiceOverClick) {
+        e.preventDefault();
+        e.stopPropagation();
       }
     };
-    /**
-     * It returns the first focusable element in the modal container, or the modal container itself if it is focusable.
-     *
-     * @param {HTMLElement} element - The element to check for focusable and to search within if it is not focusable.
-     * @returns {boolean} True if the element is focusable, false otherwise.
-     */
-    this.isFocusableElement = (element) => {
-      if (!element.matches(focusableSelector))
-        return false;
-      if (element.hasAttribute('disabled') || element.hasAttribute('inert'))
-        return false;
-      if (element.getAttribute('aria-hidden') === 'true')
-        return false;
-      if (element instanceof HTMLInputElement && element.type === 'hidden')
-        return false;
-      return element.tabIndex >= 0;
-    };
     /**
      * Focuses on the first focusable element within the dialog when the dialog content is ready and the last interaction was detected as a VoiceOver click. This method is called in response to the dialog content ready notification, ensuring that focus is set appropriately when the dialog is shown after being triggered by VoiceOver.
      * It retrieves the currently active element, stores it as the trigger element, and then focuses on the first focusable element within the dialog content.
@@ -133,7 +76,7 @@ export class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
     this.focusOnFirstFocusableElement = () => {
       if (!this.isChildFocused) {
         const dialogElement = this.entry.dialogEl();
-        const focusableElement = this.getFirstFocusableElement(dialogElement);
+        const focusableElement = getFirstFocusableElement(dialogElement);
         if (focusableElement) {
           this.isChildFocused = true;
           focusableElement.focus();
@@ -193,6 +136,7 @@ export class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
    * @returns {Promise<void>} A promise that resolves when the focus action is complete.
    */
   async show() {
+    this.entry.dialogEl().removeAttribute('inert');
     // eslint-disable-next-line no-restricted-globals
     const activeEl = getDeepActiveElementInShadow(document, true);
     if (activeEl) {
@@ -216,6 +160,7 @@ export class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
    */
   async hide() {
     if (this.focusTriggerElement) {
+      this.entry.dialogEl().setAttribute('inert', '');
       await this.focusDialogTaskQueue.enqueue({
         // eslint-disable-next-line jsdoc/require-jsdoc
         run: async () => {

package/dist/collection/types/type-guard.js

@@ -415,3 +415,24 @@ export const isEATriggerStrategy = (instance) => {
     typeof instance.evaluate === 'function' &&
     typeof instance.canEvaluate === 'function');
 };
+/**
+ * Validates if the input is of type MarginValueType, which can be either a SpacingTokenType or the string 'auto'.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is type of {@link MarginValueType}
+ */
+export const isMarginValueType = (input) => {
+  return isSpacingTokenType(input) || input === 'auto';
+};
+/**
+ * Validates if the input is of type DirectionalMarginType.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is type of {@link DirectionalMarginType}
+ */
+export const isDirectionalMarginType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    Object.keys(input).every(isSpacingDirection) &&
+    Object.values(input).every(isMarginValueType));
+};

package/dist/collection/utils/ui.js

@@ -259,6 +259,8 @@ export function checkIsVoiceOverClick(clickEvent) {
   if (clickEvent.detail === 0)
     return true;
   const targetElementRect = clickEvent.composedPath()[0].getBoundingClientRect();
+  if (targetElementRect.width === 0 && targetElementRect.height === 0)
+    return false;
   const targetElementMiddleX = Math.floor(targetElementRect.x + targetElementRect.width / 2);
   const targetElementMiddleY = Math.floor(targetElementRect.y + targetElementRect.height / 2);
   const clickPositionX = clickEvent.clientX;
@@ -267,3 +269,69 @@ export function checkIsVoiceOverClick(clickEvent) {
     Math.abs(targetElementMiddleX - clickPositionX) <= 1 &&
     Math.abs(targetElementMiddleY - clickPositionY) <= 1);
 }
+const focusableSelector = [
+  'a[href]',
+  'area[href]',
+  'button',
+  'input',
+  'select',
+  'textarea',
+  'iframe',
+  'object',
+  'embed',
+  '[contenteditable="true"]',
+  '[contenteditable=""]',
+  '[tabindex]',
+].join(',');
+/**
+ * Checks if the given element is focusable based on its tag, attributes, and tabIndex.
+ *
+ * @param {HTMLElement} element - The element to check.
+ * @returns {boolean} True if the element is focusable, false otherwise.
+ */
+export function isFocusableElement(element) {
+  if (!element.matches(focusableSelector))
+    return false;
+  if (element.hasAttribute('disabled') || element.hasAttribute('inert'))
+    return false;
+  if (element.getAttribute('aria-hidden') === 'true')
+    return false;
+  if (element instanceof HTMLInputElement && element.type === 'hidden')
+    return false;
+  return element.tabIndex >= 0;
+}
+/**
+ * Recursively searches for the first focusable element within the given container, including its shadow DOM descendants.
+ *
+ * @param {HTMLElement | ShadowRoot} container - The container to search within.
+ * @returns {Nullable<HTMLElement>} The first focusable element found, or null if none exists.
+ */
+export function getFirstFocusableElement(container) {
+  /**
+   * @param {ParentNode} node - The node to search within for a focusable element.
+   * @returns {Nullable<HTMLElement>} The first focusable element found, or null.
+   */
+  const findFirst = (node) => {
+    if (node instanceof HTMLElement && isFocusableElement(node)) {
+      return node;
+    }
+    const elements = Array.from(node.querySelectorAll('*'));
+    for (const element of elements) {
+      if (isFocusableElement(element)) {
+        return element;
+      }
+      if (element.shadowRoot) {
+        const found = findFirst(element.shadowRoot);
+        if (found)
+          return found;
+      }
+    }
+    return null;
+  };
+  if (container instanceof HTMLElement && container.shadowRoot) {
+    if (isFocusableElement(container))
+      return container;
+    return findFirst(container) || findFirst(container.shadowRoot);
+  }
+  return findFirst(container);
+}

package/dist/esm/{app-globals-e77015e3.js → app-globals-80a7d395.js}

@@ -1,20 +1,20 @@
 import { F as FeatureFlag } from './feature-flag-controller-30f7b625.js';
-import { V as VegaLoader, a as VegaNotify, b as VegaEventManager, c as VegaZIndexManager, w as waitForVega, d as VegaSkeletonLoader, e as VegaTranslation, f as VegaRTETokenExtension, g as VegaRTELanguageExtension, h as VegaRTEFunctionExtension, i as VegaRTETableExtension } from './token-extension-600b1c88.js';
-import { V as VegaThemeManager } from './split-cell-operation-9445e642.js';
+import { V as VegaLoader, a as VegaNotify, b as VegaEventManager, c as VegaZIndexManager, w as waitForVega, d as VegaSkeletonLoader, e as VegaTranslation, f as VegaRTETokenExtension, g as VegaRTELanguageExtension, h as VegaRTEFunctionExtension, i as VegaRTETableExtension } from './token-extension-5ee7a3f1.js';
+import { V as VegaThemeManager } from './split-cell-operation-548ea374.js';
 import { M as MapToComponentMethod, V as VegaSlimmer, s as setVegaLogLevel, G as GlobalSlimmersRegistry } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaDialog } from './vega-dialog-controller-bbb2fc52.js';
 import { T as TypographyUrls } from './typography-396de03f.js';
 import { V as VegaIconManager } from './icon-manager-539d7cf7.js';
 import { V as VegaInternalTranslation, s as staticTranslations } from './internal-translation-controller-b08aa9ab.js';
-import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-60abddac.js';
+import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-3bf19ad6.js';
 import { v as vegaEnvManager } from './vega-env-manager-8f8dc473.js';
 import { U as UPDATE_TRANSLATION } from './static-subject-title-52f93124.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { f as forceUpdate } from './index-090d31ca.js';
-import { V as VegaRTEContent } from './content-state-084cd705.js';
+import { V as VegaRTEContent } from './content-state-89f8eecb.js';
 import { v as vegaNonceManager, s as setVegaNonce } from './vega-nonce-manager-497e5eb5.js';
-import { V as VegaRTEPresetToolbarItems } from './code-block-7d6f231b.js';
+import { V as VegaRTEPresetToolbarItems } from './code-block-cd913077.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 import('./public-rules-fe2c7934.js').then((module) => {
+  void import('./public-rules-e42bce9d.js').then((module) => {
     Object.entries(module).forEach(([name, value]) => {
       globalThis[name] = value;
     });

package/dist/esm/{aria-dialog-focusable-trap-slimmer-5a2f92be.js → aria-dialog-focusable-trap-slimmer-cc6a8c3e.js}

@@ -1,10 +1,10 @@
 import { M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { l as checkIsVoiceOverClick, e as getDeepActiveElementInShadow } from './ui-ba5a4758.js';
+import { l as checkIsVoiceOverClick, m as getFirstFocusableElement, e as getDeepActiveElementInShadow } from './ui-b7600a48.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { C as VegaInternalDialogContentReady } from './vega-internal-event-id-70bd893d.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-cea9248d.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-aca0116e.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;
@@ -12,20 +12,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
   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;
 };
-const focusableSelector = [
-  'a[href]',
-  'area[href]',
-  'button',
-  'input',
-  'select',
-  'textarea',
-  'iframe',
-  'object',
-  'embed',
-  '[contenteditable="true"]',
-  '[contenteditable=""]',
-  '[tabindex]',
-].join(',');
 /**
  * The `AriaDialogFocusableTrapSlimmer` class is designed to manage focus behavior for dialog elements appended to the DOM, particularly in scenarios where screen readers like VoiceOver are used.
  * It detects when a click event is likely triggered by VoiceOver and ensures that focus is appropriately set to the first focusable element
@@ -47,6 +33,7 @@ class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
     this.eventListenerHandler = () => {
       const target = this.entry.triggerEl() || window;
       target.addEventListener('click', this.handleClickEvent, { capture: true });
+      target.addEventListener('contextmenu', this.handleContextMenuEvent, { capture: true });
     };
     /**
      * Removes the event listener for click events from the trigger element or the window.
@@ -55,6 +42,7 @@ class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
       const target = this.entry.triggerEl();
       target && target.removeEventListener('click', this.handleClickEvent, { capture: true });
       window.removeEventListener('click', this.handleClickEvent, { capture: true });
+      target && target.removeEventListener('contextmenu', this.handleContextMenuEvent, { capture: true });
     };
     /**
      * Handles the click event and determines if it is likely triggered by VoiceOver.
@@ -70,62 +58,17 @@ class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
       }
     };
     /**
-     * Recursively searches for the first focusable element within the given container, including its shadow DOM descendants.
-     * 	If the container itself is focusable, it will be returned.
+     * Handles the context menu event to prevent the default context menu from appearing when a VoiceOver click is detected.
+     * This is important because VoiceOver users may trigger a context menu with a specific gesture, and preventing the default behavior can help ensure that the focus management works as intended without interference from the context menu.
      *
-     * @param {HTMLElement | ShadowRoot} container - The container to search within.
-     * @returns {Nullable<HTMLElement>} The first focusable element found, or null if none exists.
+     * @param {MouseEvent} e - The context menu event object that is passed to the event handler.
      */
-    this.getFirstFocusableElement = (container) => {
-      /**
-       * Recursively search for the first focusable element within the given node and its shadow DOM descendants.
-       *
-       * @param {ParentNode} node - The node to search within.
-       * @returns {Nullable<HTMLElement>} The first focusable element found, or null if none exists.
-       */
-      const findFirst = (node) => {
-        if (node instanceof HTMLElement && this.isFocusableElement(node)) {
-          return node;
-        }
-        const elements = Array.from(node.querySelectorAll('*'));
-        for (const element of elements) {
-          if (this.isFocusableElement(element)) {
-            return element;
-          }
-          if (element.shadowRoot) {
-            const found = findFirst(element.shadowRoot);
-            if (found)
-              return found;
-          }
-        }
-        return null;
-      };
-      if (container instanceof HTMLElement && container.shadowRoot) {
-        if (this.isFocusableElement(container))
-          return container;
-        return findFirst(container) || findFirst(container.shadowRoot);
-      }
-      else {
-        return findFirst(container);
+    this.handleContextMenuEvent = (e) => {
+      if (this.isVoiceOverClick) {
+        e.preventDefault();
+        e.stopPropagation();
       }
     };
-    /**
-     * It returns the first focusable element in the modal container, or the modal container itself if it is focusable.
-     *
-     * @param {HTMLElement} element - The element to check for focusable and to search within if it is not focusable.
-     * @returns {boolean} True if the element is focusable, false otherwise.
-     */
-    this.isFocusableElement = (element) => {
-      if (!element.matches(focusableSelector))
-        return false;
-      if (element.hasAttribute('disabled') || element.hasAttribute('inert'))
-        return false;
-      if (element.getAttribute('aria-hidden') === 'true')
-        return false;
-      if (element instanceof HTMLInputElement && element.type === 'hidden')
-        return false;
-      return element.tabIndex >= 0;
-    };
     /**
      * Focuses on the first focusable element within the dialog when the dialog content is ready and the last interaction was detected as a VoiceOver click. This method is called in response to the dialog content ready notification, ensuring that focus is set appropriately when the dialog is shown after being triggered by VoiceOver.
      * It retrieves the currently active element, stores it as the trigger element, and then focuses on the first focusable element within the dialog content.
@@ -134,7 +77,7 @@ class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
     this.focusOnFirstFocusableElement = () => {
       if (!this.isChildFocused) {
         const dialogElement = this.entry.dialogEl();
-        const focusableElement = this.getFirstFocusableElement(dialogElement);
+        const focusableElement = getFirstFocusableElement(dialogElement);
         if (focusableElement) {
           this.isChildFocused = true;
           focusableElement.focus();
@@ -194,6 +137,7 @@ class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
    * @returns {Promise<void>} A promise that resolves when the focus action is complete.
    */
   async show() {
+    this.entry.dialogEl().removeAttribute('inert');
     // eslint-disable-next-line no-restricted-globals
     const activeEl = getDeepActiveElementInShadow(document, true);
     if (activeEl) {
@@ -217,6 +161,7 @@ class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
    */
   async hide() {
     if (this.focusTriggerElement) {
+      this.entry.dialogEl().setAttribute('inert', '');
       await this.focusDialogTaskQueue.enqueue({
         // eslint-disable-next-line jsdoc/require-jsdoc
         run: async () => {

package/dist/esm/{child-nodes-notify-observer-slimmer-b7f0e419.js → child-nodes-notify-observer-slimmer-a8cb19cf.js}

@@ -1,7 +1,7 @@
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { b as isParent } from './ui-ba5a4758.js';
+import { b as isParent } from './ui-b7600a48.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;