@globalpayments/vega 2.98.0 → 2.100.0

package/dist/cjs/vega-dropdown_5.cjs.entry.js

@@ -8,15 +8,16 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const ui = require('./ui-c91c37a7.js');
-const typeGuard = require('./type-guard-a57ef3ac.js');
-const accessibility = require('./accessibility-88f8af84.js');
+const typeGuard = require('./type-guard-00b8efc0.js');
+const accessibility = require('./accessibility-6ca2a237.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const vegaEventId = require('./vega-event-id-58afed7a.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-7043a106.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-0a4e556d.js');
+const overlayEscapeCoordination = require('./overlay-escape-coordination-901d8942.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-597e9e48.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-f7ba5d9a.js');
 const ariaDialogFocusableTrapSlimmer = require('./aria-dialog-focusable-trap-slimmer-62147489.js');
-const index$1 = require('./index-592b4052.js');
+const index$1 = require('./index-5d1adcd1.js');
 const array = require('./array-249289f2.js');
 const constants = require('./constants-907d7d89.js');
 const subStateNotifySlimmer = require('./sub-state-notify-slimmer-e264a120.js');
@@ -27,22 +28,22 @@ const eventEmitSlimmer = require('./event-emit-slimmer-34aa195e.js');
 const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-7ae2a78f.js');
 const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
-const translationSlimmer = require('./translation-slimmer-77c7f37d.js');
+const translationSlimmer = require('./translation-slimmer-31cd5a57.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e0ac8467.js');
-const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-93c5fb50.js');
+const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-ba588eb4.js');
 const subStateObserverSlimmer = require('./sub-state-observer-slimmer-6033b824.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-1dac2df8.js');
+require('./internal-translation-controller-27bfc8c7.js');
 require('./observer-f49483e8.js');
-require('./keyboard-manager-c56033b1.js');
+require('./keyboard-manager-16e96b62.js');
 require('./internal-vega-z-index-manager-f03ddb37.js');
 require('./number-4816603d.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./try-get-document-c0ebd39a.js');
-require('./responsive-format-facade-493d1763.js');
+require('./responsive-format-facade-c6d7f0a1.js');
 require('./pixel-98f2a10c.js');
 require('./feature-flag-controller-c19d0b58.js');
 require('./index-3ca118c4.js');
@@ -136,6 +137,11 @@ class VegaDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer {
   }
   /* istanbul ignore next */
   getAllItems() {
+    if (!this.renderModeController.isSourceRenderMode()) {
+      // VD-9605: In template mode, appendItemsToContentBox() moves the [slot='items'] div
+      // into dropdownContentBoxRef's light DOM. Items are NOT inside dropdownRef.
+      return Array.from(this.dropdownContentBoxRef.querySelectorAll('vega-dropdown-item'));
+    }
     const virtualScroll = this.dropdownRef.querySelector('vega-virtual-scroll');
     const itemContainer = virtualScroll
       ? virtualScroll.shadowRoot
@@ -144,6 +150,18 @@ class VegaDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer {
   }
   /* istanbul ignore next */
   getCurrentActiveItem() {
+    var _a, _b, _c, _d;
+    if (!this.renderModeController.isSourceRenderMode()) {
+      // VD-9605: In template mode, items live in dropdownContentBoxRef's light DOM.
+      // getActiveElement() traversal stops at shadow boundaries; instead find the focused
+      // item by checking which item's shadow root reports an active element (focused <li>).
+      const items = Array.from(this.dropdownContentBoxRef.querySelectorAll('vega-dropdown-item'));
+      // VD-9605: Use the item's own root node so focus is detected correctly even when
+      // vega-dropdown is nested inside another Shadow DOM. getRootNode() returns the
+      // nearest Document or ShadowRoot, which owns the activeElement for that tree.
+      const docActive = (_c = (_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.getRootNode()) === null || _b === void 0 ? void 0 : _b.activeElement) !== null && _c !== void 0 ? _c : null;
+      return ((_d = items.find((item) => { var _a; return ((_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) != null || item === docActive; })) !== null && _d !== void 0 ? _d : null);
+    }
     return ui.findParent(component.getActiveElement(this.dropdownContentBoxRef.shadowRoot), 'vega-dropdown-item');
   }
   /* istanbul ignore next */
@@ -604,6 +622,9 @@ class VegaDropdownKeyboardController extends keyboardManagerSlimmer.KeyboardMana
     super((target) => {
       const dropdownRef = this.renderer.getDropdownRef();
       const virtualContainerRef = this.renderer.getVirtualContainerRef();
+      // VD-9605: In template mode, items are slotted into dropdownContentBoxRef (not
+      // virtualContainerRef), so include it in scope so Arrow/Escape listeners fire correctly.
+      const dropdownContentBoxRef = this.renderer.getDropdownContentBoxRef();
       return [
         {
           keyCode: 'Tab',
@@ -612,19 +633,69 @@ class VegaDropdownKeyboardController extends keyboardManagerSlimmer.KeyboardMana
         },
         {
           keyCode: 'Escape',
-          activeElementInScope: [target.host, dropdownRef, virtualContainerRef],
+          activeElementInScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
           // eslint-disable-next-line jsdoc/require-jsdoc
           callback: /* istanbul ignore next */ () => target.appenderController.hide(),
         },
+        {
+          // Additional `keydown` listener so Escape can close the dropdown when
+          // screen readers (e.g. VoiceOver) intercept the `keyup` event or move
+          // focus elsewhere after activating the trigger (e.g. into a rich-text
+          // editor's editable content). When the dropdown is shown, Escape
+          // should always close it regardless of where focus currently is.
+          //
+          // Registered in the capture phase so ancestor focus-trap containers
+          // (e.g. a Bootstrap modal's own keydown handler attached to the modal
+          // element) do not also react to the same Escape press and close
+          // themselves before the dropdown handles it. The callback calls
+          // `stopPropagation` to prevent the event from reaching descendant
+          // listeners, and tags the event with a marker that vega-modal's
+          // Escape handler checks so the modal does not also close on the
+          // same key press — Escape should close only the innermost overlay.
+          // We deliberately do NOT use `stopImmediatePropagation` because
+          // other document listeners on the same target (e.g. focus-restore
+          // observers in toolbar slimmers) still need to observe the key.
+          keyCode: 'Escape',
+          eventName: 'keydown',
+          capture: true,
+          preventDefault: true,
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ (event) => {
+            if (target.isDropdownShow) {
+              event.stopPropagation();
+              overlayEscapeCoordination.markOverlayHandledEscape(event);
+              target.appenderController.hide();
+            }
+          },
+        },
         {
           keyCode: ['ArrowUp', 'ArrowDown'],
-          activeElementInScope: [target.host, dropdownRef],
+          activeElementInScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
+          // VD-9605: listen on keydown and preventDefault so arrow keys move the
+          // dropdown selection instead of scroll-chaining the underlying page.
+          eventName: 'keydown',
+          preventDefault: true,
           // eslint-disable-next-line jsdoc/require-jsdoc
           callback: /* istanbul ignore next */ (event) => target.controlDirectionByKeyboard(event.code),
         },
         {
           keyCode: 'Tab',
-          activeElementOutScope: [target.host, dropdownRef, virtualContainerRef],
+          activeElementOutScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
           // eslint-disable-next-line jsdoc/require-jsdoc
           callback: /* istanbul ignore next */ () => target.isDropdownShow && target.appenderController.hide(),
         },
@@ -646,8 +717,17 @@ class VegaDropdownKeyboardController extends keyboardManagerSlimmer.KeyboardMana
      * @param {string} code - current keyboard code.
      */
     this.controlDirectionByKeyboard = (code) => {
-      var _a;
-      (_a = this.renderer.getNextActiveItem(code)) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('li').focus();
+      var _a, _b;
+      const nextItem = this.renderer.getNextActiveItem(code);
+      if (!nextItem) {
+        return;
+      }
+      // VD-9605: focus without letting the browser scroll the page, then scroll the
+      // dropdown list so the newly-focused item stays inside the visible viewport.
+      // Fall back to the host element if the inner <li> is absent (e.g. template mode).
+      const focusTarget = (_b = (_a = nextItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) !== null && _b !== void 0 ? _b : nextItem;
+      focusTarget.focus({ preventScroll: true });
+      nextItem.scrollIntoView({ block: 'nearest' });
     };
   }
 }
@@ -1727,7 +1807,7 @@ class VegaDropdownScrollableController extends globalSlimmerRegistry.VegaSlimmer
   async scrollToSelectedIndex() {
     this.renderModeController.isSourceRenderMode()
       ? await this.scrollToVirtualIndex()
-      : this.scrollToTemplateIndex();
+      : await this.scrollToTemplateIndex();
   }
   /**
    * The function scrollToVirtualIndex asynchronously scrolls to a specific index in a virtual list based
@@ -1746,7 +1826,10 @@ class VegaDropdownScrollableController extends globalSlimmerRegistry.VegaSlimmer
   /**
    * The function scrollToTemplateIndex scrolls the dropdown content box to the selected item key.
    */
-  scrollToTemplateIndex() {
+  async scrollToTemplateIndex() {
+    if (!this.getSelectedKey())
+      return;
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
     const scrolledKey = this.getSelectedKey();
     if (scrolledKey) {
       const dropdownContent = this.renderer.getDropdownContentBoxRef();
@@ -2720,13 +2803,14 @@ var __decorate$b = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaDropdownGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
   render() {
-    return (index.h("li", { role: "group", "aria-label": this.label, class: "vega-dropdown-group" },
-      this.renderLabel(),
+    const plainTextLabel = index$1.htmlSanitizer.sanitize(this.label, index$1.plainTextSanitizeStrategy);
+    return (index.h("li", { role: "group", "aria-label": plainTextLabel, class: "vega-dropdown-group" },
+      this.renderLabel(plainTextLabel),
       this.renderChildren(),
       this.renderDivide()));
   }
-  renderLabel() {
-    return (this.label && (index.h("div", { class: "vega-dropdown-group-label", "aria-hidden": "true" }, this.label)));
+  renderLabel(plainTextLabel) {
+    return (this.label && (index.h("div", { class: "vega-dropdown-group-label", "aria-hidden": "true" }, plainTextLabel)));
   }
   renderChildren() {
     return (index.h("ul", { role: "none", class: "vega-dropdown-group-items" },
@@ -2802,14 +2886,15 @@ class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
     };
   }
   render() {
-    return (index.h("li", { key: this.label, role: "menuitem", "aria-label": this.count > 0 ? `${this.label}, ${this.count}` : this.label, "aria-disabled": `${this.disabled}`, class: {
+    const plainTextLabel = this.getPlainTextLabel();
+    return (index.h("li", { key: this.label, role: "menuitem", "aria-label": this.count > 0 ? `${plainTextLabel}, ${this.count}` : plainTextLabel, "aria-disabled": `${this.disabled}`, class: {
         'vega-dropdown-item-selected': this.selected,
         'vega-dropdown-item-disabled': this.disabled,
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
         'danger': this.danger && this.selectType === 'none',
       }, tabIndex: this.disabled ? -1 : 0, 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick({ preventDefault: true }), style: this.height > 0 && {
+      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: accessibility.createActivationKeyHandlerToTriggerClick({ preventDefault: true }), style: this.height > 0 && {
         height: `${this.height}px`,
         boxSizing: 'border-box',
         overflow: 'hidden',
@@ -2857,6 +2942,13 @@ class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
   onSelect(e) {
     this.vegaDropdownItemClickController.handleClick(e);
   }
+  getPlainTextLabel() {
+    const slotText = this.host.textContent.trim();
+    if (slotText) {
+      return slotText;
+    }
+    return index$1.htmlSanitizer.sanitize(this.label, index$1.plainTextSanitizeStrategy);
+  }
   renderLabelWithTooltip() {
     var _a, _b, _c;
     if (!this.label) {
@@ -3098,7 +3190,7 @@ __decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemClickController.prototype, "clickEventEmitter", void 0);
 
-const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;cursor:pointer;display:flex;align-items:center;gap:8px}:host li,:host li a{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host li:not(.vega-dropdown-item-disabled):hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li:not(.vega-dropdown-item-disabled):focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));outline:0}:host li.vega-dropdown-item-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:default}:host li.vega-dropdown-item-disabled .item-prefix,:host li.vega-dropdown-item-disabled .selected-prefix{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host li.danger .item-prefix,:host li.danger .vega-dropdown-item-label{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host li .item-prefix{display:flex;width:16px;height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:1}:host li .selected-prefix{color:rgba(var(--v-text-link, 19, 98, 226, 1));width:16px;height:16px;display:flex;align-items:center;min-width:16px}:host li .item-counter{width:20px;height:20px}:host .vega-dropdown-item-label{flex-grow:1}:host .vega-dropdown-item-display-newline .vega-dropdown-item-label{overflow-wrap:break-word}:host .vega-dropdown-item-display-ellipsis .vega-dropdown-item-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .vega-dropdown-item-display-ellipsis vega-tooltip{flex-grow:1;display:block;overflow:hidden}:host .v-hidden{display:none}";
+const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;cursor:pointer;display:flex;align-items:center;gap:8px}:host li,:host li a{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host li:not(.vega-dropdown-item-disabled):hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li:not(.vega-dropdown-item-disabled):focus,:host(:focus) li:not(.vega-dropdown-item-disabled){background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));outline:0}:host li.vega-dropdown-item-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:default}:host li.vega-dropdown-item-disabled .item-prefix,:host li.vega-dropdown-item-disabled .selected-prefix{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host li.danger .item-prefix,:host li.danger .vega-dropdown-item-label{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host li .item-prefix{display:flex;width:16px;height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:1}:host li .selected-prefix{color:rgba(var(--v-text-link, 19, 98, 226, 1));width:16px;height:16px;display:flex;align-items:center;min-width:16px}:host li .item-counter{width:20px;height:20px}:host .vega-dropdown-item-label{flex-grow:1}:host .vega-dropdown-item-display-newline .vega-dropdown-item-label{overflow-wrap:break-word}:host .vega-dropdown-item-display-ellipsis .vega-dropdown-item-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .vega-dropdown-item-display-ellipsis vega-tooltip{flex-grow:1;display:block;overflow:hidden}:host .v-hidden{display:none}";
 
 var __decorate$6 = (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/vega-env-manager-23b8b23c.js

@@ -11,9 +11,9 @@ exports.FrameworkEnum = void 0;
 /** The VegaEnvManager class manages vega environment parameters. */
 class VegaEnvManager {
   constructor() {
-    // The `2.98.0` will be replaced to a version string when running publish script.
+    // The `2.100.0` will be replaced to a version string when running publish script.
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.98.0';
+    this.vegaVersion = '2.100.0';
     this.framework = exports.FrameworkEnum.VanillaJs;
   }
   /**

package/dist/cjs/vega-field-label.cjs.entry.js

@@ -8,8 +8,8 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-34aa195e.js');
 const vegaEventId = require('./vega-event-id-58afed7a.js');
-const accessibility = require('./accessibility-88f8af84.js');
-const translationSlimmer = require('./translation-slimmer-77c7f37d.js');
+const accessibility = require('./accessibility-6ca2a237.js');
+const translationSlimmer = require('./translation-slimmer-31cd5a57.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./change-manager-a297e4d2.js');
 require('./dom-node-subject-observer-factory-c82df135.js');
@@ -17,7 +17,7 @@ require('./observer-f49483e8.js');
 require('./ui-c91c37a7.js');
 require('./internal-vega-event-manager-7003c84a.js');
 require('./try-get-document-c0ebd39a.js');
-require('./internal-translation-controller-1dac2df8.js');
+require('./internal-translation-controller-27bfc8c7.js');
 require('./static-subject-title-70c73b16.js');
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -84,49 +84,41 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /*
- * Screen-reader-only announcement.
+ * Builds the visually-hidden state suffix appended to the field label for AT.
  *
- * VoiceOver cannot reliably derive the full field state from the
- * visible label alone because:
- *   - "Required" is represented visually by a decorative "*" — AT
- *     users would hear the raw asterisk character, not a meaningful word.
+ * Screen-reader users cannot derive the full field state from the visible
+ * label alone because:
+ *   - "Required" is represented visually by a decorative "*" — AT users
+ *     would otherwise hear the raw asterisk character.
  *   - "Disabled" has no visible text marker at all.
  *
- * This span provides a single, predictable AT announcement that
- * concatenates the label text with the plain-English states
- * (e.g. "Email, Required, Disabled"), ensuring VoiceOver reads
- * exactly what the user needs to know.
- *
- * The visible <label> below is hidden from AT (`aria-hidden="true"`)
- * to prevent duplicate announcements and to stop VoiceOver from
- * vocalising the decorative "*" as part of the label text.
+ * The suffix (e.g. ", Required, Disabled") is rendered as a real, visually
+ * hidden text node INSIDE the visible label span (not as an `aria-label`).
+ * A real text node reads consistently across Safari/Chrome/Firefox and,
+ * unlike an `aria-label` on a container with hidden children, does not make
+ * Chrome/Firefox announce an "empty group".
  */
 class VegaFieldLabelLabelAnnouncementRenderer extends globalSlimmerRegistry.VegaSlimmer {
   /**
-   * Render a label announcement.
-   *
-   * @returns {Nullable<HTMLElement>}
-   */
-  render() {
-    return this.label && index.h("span", { class: "aria-announcement" }, this.generateAnnouncement());
-  }
-  /**
-   * Generate a screen-reader-friendly announcement string that concatenates the label text with the field's required/optional and disabled states.
+   * Build the visually-hidden state suffix (the part after the label text).
    *
-   * @returns {string} The generated announcement string.
+   * @returns {string} e.g. ", Required, Disabled", or '' when there is no state to announce.
    */
-  generateAnnouncement() {
-    let announcement = this.label;
+  getStateSuffix() {
+    if (!this.label) {
+      return '';
+    }
+    let suffix = '';
     if (this.isFieldRequired) {
-      announcement += `, ${this.translationSlimmer.t('Required')}`;
+      suffix += `, ${this.translationSlimmer.t('Required')}`;
     }
     else if (this.optional) {
-      announcement += `, ${this.translationSlimmer.t('Optional')}`;
+      suffix += `, ${this.translationSlimmer.t('Optional')}`;
     }
     if (this.disabled) {
-      announcement += `, ${this.translationSlimmer.t('Disabled')}`;
+      suffix += `, ${this.translationSlimmer.t('Disabled')}`;
     }
-    return announcement;
+    return suffix;
   }
 }
 __decorate$1([
@@ -145,7 +137,7 @@ __decorate$1([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaFieldLabelLabelAnnouncementRenderer.prototype, "translationSlimmer", void 0);
 
-const vegaFieldLabelCss = ":host{display:inline-block}:host(.center-align){display:inline-flex;align-items:center}:host(.disabled){pointer-events:none}:host(.hidden){display:none}label:first-of-type{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;word-break:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){label:first-of-type{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){label:first-of-type{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){label:first-of-type{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host(.center-align) label:first-of-type{display:inline-flex;align-items:center}:host(.disabled)>label>span.vega-field-label{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.center-align) .vega-field-label{min-width:0}.vega-field-label-required{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px}.vega-field-label-required.hidden{display:none}.label-suffix-button{display:inline-block;margin-left:4px;vertical-align:top}:host(.center-align) .label-suffix-button{display:inline-flex;align-items:center;vertical-align:baseline}.optional{margin-left:4px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.optional{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.optional{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.optional{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.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}";
+const vegaFieldLabelCss = ":host{display:inline-block;position:relative}:host(.center-align){display:inline-flex;align-items:center}:host(.disabled){pointer-events:none}:host(.hidden){display:none}label:first-of-type{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;word-break:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){label:first-of-type{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){label:first-of-type{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){label:first-of-type{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host(.center-align) label:first-of-type{display:inline-flex;align-items:center}:host(.disabled)>label>span.vega-field-label{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.center-align) .vega-field-label{min-width:0}.vega-field-label-required{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px}.vega-field-label-required.hidden{display:none}.label-suffix-button{display:inline-block;margin-left:4px;vertical-align:top}:host(.center-align) .label-suffix-button{display:inline-flex;align-items:center;vertical-align:baseline}.optional{margin-left:4px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.optional{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.optional{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.optional{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.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}";
 
 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;
@@ -242,11 +234,12 @@ const VegaFieldLabel = class {
   render() {
     var _a;
     const shouldCenterAlign = !!((_a = this.suffixButtonConfig) === null || _a === void 0 ? void 0 : _a.centerAlign);
+    const stateSuffix = this.labelAnnouncementRenderer.getStateSuffix();
     return component.sanitizeVegaComponent(index.h(index.Host, { class: {
         'hidden': this.label === '',
         'disabled': this.disabled,
         'center-align': shouldCenterAlign,
-      }, onClick: this.handleClick }, this.labelAnnouncementRenderer.render(), index.h("label", { "aria-hidden": "true", part: "container" }, index.h("span", { class: "vega-field-label", part: "label" }, this.label), !this.isFieldRequired && this.optional && (index.h("span", { class: "optional" }, "(", this.translationSlimmer.t('Optional'), ")")), index.h("span", { class: {
+      }, onClick: this.handleClick }, index.h("label", { part: "container" }, index.h("span", { class: "vega-field-label", part: "label", role: "text" }, this.label, stateSuffix && index.h("span", { class: "aria-announcement" }, stateSuffix)), !this.isFieldRequired && this.optional && (index.h("span", { class: "optional", "aria-hidden": "true" }, "(", this.translationSlimmer.t('Optional'), ")")), index.h("span", { "aria-hidden": "true", class: {
         'vega-field-label-required': true,
         'hidden': !this.isFieldRequired,
       } }, "*")), this.suffixElementRenderer.render()), this.host);

package/dist/cjs/vega-file-uploader.cjs.entry.js

@@ -10,15 +10,15 @@ const internalIconManager = require('./internal-icon-manager-40bcac72.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const vegaEventId = require('./vega-event-id-58afed7a.js');
 const misc = require('./misc-3d30df91.js');
-const accessibility = require('./accessibility-88f8af84.js');
+const accessibility = require('./accessibility-6ca2a237.js');
 const trashCan = require('./trash-can-46a5e19a.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-34aa195e.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-a743be34.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-fbaddc91.js');
 const fileUploaderRequiredRule = require('./file-uploader-required-rule-5520bbec.js');
 const dropFileAcceptFilterSlimmer = require('./drop-file-accept-filter-slimmer-cd619cc7.js');
-const translationSlimmer = require('./translation-slimmer-77c7f37d.js');
+const translationSlimmer = require('./translation-slimmer-31cd5a57.js');
 require('./icon-manager-be358b32.js');
 require('./create-public-api-runtime-metrics-slimmer-91b0cbfb.js');
 require('./dynamic-slimmer-f31fdfd7.js');
@@ -28,8 +28,8 @@ require('./internal-vega-event-manager-7003c84a.js');
 require('./try-get-document-c0ebd39a.js');
 require('./string-39438062.js');
 require('./vega-internal-event-id-f4d33037.js');
-require('./internal-translation-controller-1dac2df8.js');
-require('./index-592b4052.js');
+require('./internal-translation-controller-27bfc8c7.js');
+require('./index-5d1adcd1.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./ui-32120990.js');

package/dist/cjs/vega-flag-icon.cjs.entry.js

@@ -8,26 +8,26 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const internalIconManager = require('./internal-icon-manager-40bcac72.js');
 const iconManager = require('./icon-manager-be358b32.js');
-const designToken = require('./design-token-74674ee7.js');
+const designToken = require('./design-token-9d762da0.js');
 const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const observer = require('./observer-f49483e8.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 require('./create-public-api-runtime-metrics-slimmer-91b0cbfb.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./misc-3d30df91.js');
-require('./type-guard-a57ef3ac.js');
+require('./type-guard-00b8efc0.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-1dac2df8.js');
-require('./responsive-format-facade-493d1763.js');
+require('./internal-translation-controller-27bfc8c7.js');
+require('./responsive-format-facade-c6d7f0a1.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./feature-flag-controller-c19d0b58.js');
 require('./index-3ca118c4.js');
-require('./state-border-formatter-711c7aaa.js');
+require('./state-border-formatter-dda9109a.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;

package/dist/cjs/vega-flex.cjs.entry.js

@@ -5,26 +5,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-58ea899e.js');
 const featureFlagController = require('./feature-flag-controller-c19d0b58.js');
 const component = require('./component-1e352960.js');
-const designToken = require('./design-token-74674ee7.js');
+const designToken = require('./design-token-9d762da0.js');
 const ui = require('./ui-c91c37a7.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const styleFormatter = require('./style-formatter-8f711cb0.js');
+const styleFormatter = require('./style-formatter-d21a9784.js');
 require('./index-3ca118c4.js');
-require('./type-guard-a57ef3ac.js');
+require('./type-guard-00b8efc0.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-1dac2df8.js');
+require('./internal-translation-controller-27bfc8c7.js');
 require('./change-manager-a297e4d2.js');
 require('./static-subject-title-70c73b16.js');
-require('./responsive-format-facade-493d1763.js');
+require('./responsive-format-facade-c6d7f0a1.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
-require('./state-border-formatter-711c7aaa.js');
+require('./state-border-formatter-dda9109a.js');
 require('./try-get-document-c0ebd39a.js');
 
 const VegaFlexRuntimeMetricsPayloadDefinition = [

package/dist/cjs/vega-font.cjs.entry.js

@@ -10,22 +10,22 @@ const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
 const componentLoadRequired = require('./component-load-required-6cc74719.js');
-const responsiveFormatFacade = require('./responsive-format-facade-493d1763.js');
+const responsiveFormatFacade = require('./responsive-format-facade-c6d7f0a1.js');
 const ui = require('./ui-c91c37a7.js');
-const designToken = require('./design-token-74674ee7.js');
+const designToken = require('./design-token-9d762da0.js');
 const featureFlagController = require('./feature-flag-controller-c19d0b58.js');
 require('./try-get-document-c0ebd39a.js');
 require('./ui-32120990.js');
 require('./breakpoints-ebde4837.js');
-require('./type-guard-a57ef3ac.js');
+require('./type-guard-00b8efc0.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-1dac2df8.js');
+require('./internal-translation-controller-27bfc8c7.js');
 require('./change-manager-a297e4d2.js');
 require('./static-subject-title-70c73b16.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
-require('./state-border-formatter-711c7aaa.js');
+require('./state-border-formatter-dda9109a.js');
 require('./index-3ca118c4.js');
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/cjs/vega-form.cjs.entry.js

@@ -20,7 +20,7 @@ const vegaInternalEventId = require('./vega-internal-event-id-f4d33037.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const observer = require('./observer-f49483e8.js');
 const ui = require('./ui-c91c37a7.js');
-const typeGuard = require('./type-guard-a57ef3ac.js');
+const typeGuard = require('./type-guard-00b8efc0.js');
 const immutableMap = require('./immutable-map-d711339d.js');
 const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-7ae2a78f.js');
 const array = require('./array-249289f2.js');
@@ -32,7 +32,7 @@ require('./index-3ca118c4.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-1dac2df8.js');
+require('./internal-translation-controller-27bfc8c7.js');
 require('./number-4816603d.js');
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {