@heartlandone/vega 2.75.1 → 2.76.0

package/dist/collection/components/vega-app-header-button/vega-app-header-button.js

@@ -19,6 +19,7 @@ import { VegaClick, VegaDropdownClick, VegaReset } from '../../helpers/event-man
 import { VegaMenuArrowIconRenderer } from './slimmers/renderers/vega-menu-arrow-icon-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaAppHeaderButtonDropdownRenderer } from './slimmers/renderers/vega-app-header-button-dropdown-renderer';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
  * @vegaVersion 1.11.0
  */
@@ -41,6 +42,17 @@ export class VegaAppHeaderButton {
     this.vegaMenuArrowIconRenderer = new VegaMenuArrowIconRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.dropdownRenderer = new VegaAppHeaderButtonDropdownRenderer();
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
+      // the target element which we will apply the aria label to this button
+      return this.host.shadowRoot.querySelector('button');
+    }, {
+      'aria-label': {
+        // meaning if data-aria-label is defined, we will use it as the value of aria-label, otherwise we will use label as the value of aria-label
+        dependency: ['data-aria-label', 'label'],
+        // meaning if the all the values in the above array are all empty or undefined, the default value will be used as the final value of aria-label
+        defaultValue: 'No label defined',
+      },
+    });
     /**
      * Used to determine whether the avatar image is loaded or not.
      */
@@ -108,7 +120,7 @@ export class VegaAppHeaderButton {
     this.selected = false;
     this.renderButton = (arrowDownIconVisible, labelVisible) => {
       const isIconBtnType = !this.avatar.src && !this.avatar.fallbackText;
-      return (h("button", { type: "button", "aria-label": this.label || 'No label defined', class: arrayToClassString([
+      return (h("button", { type: "button", class: arrayToClassString([
           'vega-app-header-button-container',
           isIconBtnType && 'icon',
           this.showBorder && 'with-border',
@@ -298,7 +310,7 @@ export class VegaAppHeaderButton {
         "text": "Specifies the label or text content of the app header button."
       },
       "attribute": "label",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "showLabel": {
@@ -586,3 +598,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "dropdownRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaAppHeaderButton.prototype, "ariaAttributesValueMapper", void 0);

package/dist/collection/components/vega-box/slimmers/controllers/vega-box-responsive-style-controller.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
 import { vegaNonceManager } from '../../../../helpers/csp/vega-nonce-manager';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../../../utils/sanitize';
 /**
  * Generate the responsive style for the component.
  */
@@ -64,7 +65,7 @@ export class VegaBoxResponsiveStyleController extends VegaSlimmer {
         }
         container.appendChild(this[elementKey]);
       }
-      this[elementKey].innerHTML = cssText;
+      this[elementKey].innerHTML = htmlSanitizer.sanitize(cssText, styleSanitizeStrategy);
     }
   }
 }

package/dist/collection/components/vega-box/slimmers/controllers/vega-box-state-styles-controller.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { formatAndValidStateToken } from '../../../../utils/design-token';
 import { vegaNonceManager } from '../../../../helpers/csp/vega-nonce-manager';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../../../utils/sanitize';
 /**
  * VegaBoxStateStylesController
  */
@@ -64,7 +65,7 @@ export class VegaBoxStateStylesController extends VegaSlimmer {
       if (vegaNonceManager.nonce) {
         styleElement.setAttribute('nonce', vegaNonceManager.nonce);
       }
-      styleElement.innerHTML = formatAndValidStateToken(token, flag);
+      styleElement.innerHTML = htmlSanitizer.sanitize(formatAndValidStateToken(token, flag), styleSanitizeStrategy);
       this.host.shadowRoot.append(styleElement);
     }
   }

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

@@ -20,6 +20,7 @@ import responsiveFormatFacade from '../../helpers/formatter/responsive-map-forma
 import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { findParent } from '../../utils/ui';
 import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
+import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
 /**
  * @vegaVersion 1.0.0
  */
@@ -126,7 +127,7 @@ export class VegaButton {
     if (!this.label) {
       this.label = this.host.textContent;
     }
-    this.host.innerHTML = '';
+    this.host.innerHTML = htmlSanitizer.sanitize('', emptySanitizeStrategy);
   }
   render() {
     return sanitizeVegaComponent(h(Host, { class: { 'vega-button-block': this.isBlockStyleButton() } },

package/dist/collection/components/vega-button-circle/vega-button-circle.js

@@ -17,6 +17,7 @@ import { VegaButtonCircleRuntimeMetricsPayloadDefinition } from '../../constants
 import { findParent } from '../../utils/ui';
 import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
+import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
 /**
  * @vegaVersion 1.0.2
  */
@@ -107,7 +108,7 @@ export class VegaButtonCircle {
     };
   }
   componentWillLoad() {
-    this.host.innerHTML = '';
+    this.host.innerHTML = htmlSanitizer.sanitize('', emptySanitizeStrategy);
   }
   render() {
     var _a;

package/dist/collection/components/vega-button-link/vega-button-link.css

@@ -305,7 +305,7 @@ a.vega-button-link-size-large .vega-button-link-label {
 :host(.vega-button-link-disabled) a {
   color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
   text-decoration: none;
-  background-color: rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
 }
 
 :host(.vega-button-link-disabled) a.vega-button-link .vega-button-link-button-container {

package/dist/collection/components/vega-button-link/vega-button-link.js

@@ -12,6 +12,7 @@ import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaButtonLinkRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-link/runtime-metrics-payload-definition';
+import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
 /**
  * @vegaVersion 1.0.2
  */
@@ -111,7 +112,7 @@ export class VegaButtonLink {
     if (!this.label) {
       this.label = this.host.textContent;
     }
-    this.host.innerHTML = '';
+    this.host.innerHTML = htmlSanitizer.sanitize('', emptySanitizeStrategy);
   }
   render() {
     const isButton = this.isButton();

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/base-repeat-pattern.js

@@ -1,4 +1,4 @@
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 /** The above code defines an abstract class `CalendarEventBaseRepeatPattern` in TypeScript that represents a repeat pattern for calendar events. Here is a summary of what the code is doing: */
 export class CalendarEventBaseRepeatPattern {
   /**

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-daily-repeat-pattern.js

@@ -1,5 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventDailyRepeatPattern` class in TypeScript represents a daily repeating pattern for calendar events. */
 export class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPattern {

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-monthly-repeat-pattern.js

@@ -1,5 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventMonthlyRepeatPattern` class in TypeScript represents a monthly repeat pattern for calendar events. */
 export class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPattern {

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-weekly-repeat-pattern.js

@@ -1,6 +1,6 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
 import { WeekdayLongNames } from '../../../../../../helpers/calendar/utils';
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { flatNestedArray } from '../../../../../../utils/array';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventWeeklyRepeatPattern` class in TypeScript represents a weekly repeat pattern for calendar events, allowing for matching dates based on specific weekdays and generating future dates with optional constraints. */

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-yearly-repeat-pattern.js

@@ -1,5 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventYearlyRepeatPattern` class defines a yearly repeat pattern for calendar events, checking for matches and generating future dates based on specified criteria. */
 export class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPattern {

package/dist/collection/components/vega-code-block/slimmers/controllers/prism-code-highlight-parse-controller.js

@@ -1,16 +1,7 @@
-import Prism from 'prismjs';
-// The language plugins.
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-jsx';
-import 'prismjs/components/prism-tsx';
+import { tokenize, getLanguageGrammar } from '../../../../polyfill/prism';
 import { CodeHighlightParser } from './code-highlight-parser.abstract';
 /**
- * Use the plugin Prism to highlight the code content.
+ * Use the local syntax highlight tokenizer to highlight the code content.
  */
 export class PrismCodeHighlightParseController extends CodeHighlightParser {
   /**
@@ -23,15 +14,15 @@ export class PrismCodeHighlightParseController extends CodeHighlightParser {
     return code && language && this.isHighlightLanguage(language);
   }
   /**
-   * Use plugin to parse the string code into an array of nodes with different keywords.
+   * Use tokenizer to parse the string code into an array of nodes with different keywords.
    *
    * @returns {CodeNodeType[]} - The object contains content and highlight type.
    */
   parse() {
     const { code, language } = this.value;
     let result = [];
-    const parseLanguage = Prism.languages[language];
-    const tokens = Prism.tokenize(code, parseLanguage);
+    const parseLanguage = getLanguageGrammar(language);
+    const tokens = tokenize(code, parseLanguage);
     result = this.getHighlightNodes(tokens);
     return this.markLineNumberNodes(result);
   }

package/dist/collection/components/vega-combo-box/slimmers/renderers/vega-combo-box-dropdown-renderer.js

@@ -10,7 +10,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClose, VegaCreate, VegaDropdownClick, VegaDropdownHide, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { sanitizeHtmlLabel } from '../../../../utils/sanitize';
+import { htmlSanitizer, labelSanitizeStrategy } from '../../../../utils/sanitize';
 export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -126,7 +126,7 @@ export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
   renderSelectedChip(item) {
     return (h("vega-chip", { 
       //TODO: the key property test will add in https://gethired.atlassian.net/browse/VD-883
-      key: item.key, text: sanitizeHtmlLabel(item.label), variant: "outlined", showCloseIcon: !this.disabled, size: "small", ref: (ref) => {
+      key: item.key, text: htmlSanitizer.sanitize(item.label, labelSanitizeStrategy), variant: "outlined", showCloseIcon: !this.disabled, size: "small", ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClose, async () => {
           await this.onChipClose(item.key);
         });

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-calendar-open-state-controller.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
-import { FeatureFlag } from '../../../../helpers/public-api';
+import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
 import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
 /** The date picker element appender controller slimmer */

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { h } from '@stencil/core';
-import { FeatureFlag } from '../../../../helpers/public-api';
+import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClear, VegaClose, VegaOpen, VegaMonthYearChange, VegaSelectionChange, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { tryGetDocument } from '../../../../utils/try-get-document';

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { sanitizeHtmlLabel } from '../../../../utils/sanitize';
+import { htmlSanitizer, labelSanitizeStrategy } from '../../../../utils/sanitize';
 /**
  * The `VegaDropdownSearchController` class is a TypeScript class that provides methods for searching
  * and filtering dropdown items based on a search string.
@@ -51,7 +51,7 @@ export class VegaDropdownSearchController extends VegaSlimmer {
     if (searchResult)
       return searchResult;
     source.forEach((item) => {
-      item.label = sanitizeHtmlLabel(item.label);
+      item.label = htmlSanitizer.sanitize(item.label, labelSanitizeStrategy);
       if (item['children']) {
         const filtered = this.searchSource(item['children'], []);
         if (filtered.length > 0) {

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

@@ -49,7 +49,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
         } }, this.searchString
         ? this.translationSlimmer.t(this.searchNoResultsText)
         : this.translationSlimmer.t('No options')),
-      h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+      h("ul", { role: "menu", class: {
           'v-hidden': this.isLoading || this.sourceForRender.length === 0,
         } },
         h("vega-virtual-scroll", { source: this.sourceForRender, 
@@ -61,7 +61,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
           }, viewportMaxHeight: this.defaultMaxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading, virtualizationThreshold: this.virtualizationThreshold }))));
   }
   renderDropdownListBySlot() {
-    return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+    return (h("ul", { role: "menu", class: {
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
         ['v-hidden']: this.isLoading,
       }, ref: (ref) => (this.templateContainerRef = ref), onScroll: this.scrollableController.onScroll },

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

@@ -8,16 +8,16 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class VegaDropdownGroupRenderer extends VegaSlimmer {
   render() {
-    return (h("li", { class: "vega-dropdown-group" },
+    return (h("li", { role: "group", "aria-label": this.label, class: "vega-dropdown-group" },
       this.renderLabel(),
       this.renderChildren(),
       this.renderDivide()));
   }
   renderLabel() {
-    return this.label && h("div", { class: "vega-dropdown-group-label" }, this.label);
+    return (this.label && (h("div", { class: "vega-dropdown-group-label", "aria-hidden": "true" }, this.label)));
   }
   renderChildren() {
-    return (h("ul", { class: "vega-dropdown-group-items" },
+    return (h("ul", { role: "none", class: "vega-dropdown-group-items" },
       h("slot", null)));
   }
   renderDivide() {

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
-import { sanitizeHtmlLabel } from '../../../../../utils/sanitize';
+import { htmlSanitizer, labelSanitizeStrategy } from '../../../../../utils/sanitize';
 export class VegaDropdownItemRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -18,7 +18,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.label, class: {
+    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.count > 0 ? `${this.label}, ${this.count}` : this.label, "aria-disabled": `${this.disabled}`, class: {
         'vega-dropdown-item-selected': this.selected,
         'vega-dropdown-item-disabled': this.disabled,
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
@@ -61,7 +61,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     }
     else {
       return (h(Fragment, null,
-        h("span", { class: "vega-dropdown-item-label", innerHTML: sanitizeHtmlLabel(this.label), ref: this.setLabelRef }),
+        h("span", { class: "vega-dropdown-item-label", innerHTML: htmlSanitizer.sanitize(this.label, labelSanitizeStrategy), ref: this.setLabelRef }),
         h("span", { class: "v-hidden" },
           h("slot", null))));
     }
@@ -81,7 +81,9 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
         if (ref) {
           this.tooltipRef = ref;
         }
-      }, text: sanitizeHtmlLabel(this.label).replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
+      }, text: htmlSanitizer
+        .sanitize(this.label, labelSanitizeStrategy)
+        .replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
       /* eslint-disable-next-line react/jsx-no-bind */
       onMouseEnter: () => {
         const isTextTruncated = this.labelRef.scrollWidth > this.labelRef.clientWidth;

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

@@ -15,6 +15,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { LogUtility } from '../../utils/log';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { tryGetDocument } from '../../utils/try-get-document';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../utils/sanitize';
 /**
  * @vegaVersion 1.0.4
  */
@@ -143,7 +144,7 @@ export class VegaIcon {
     if (iconStyles && tryGetDocument()) {
       const styleElement = (_a = this.host.shadowRoot.querySelector('#fa-icon-styles')) !== null && _a !== void 0 ? _a : tryGetDocument().createElement('style');
       styleElement.id = 'fa-icon-styles';
-      styleElement.innerHTML = iconStyles;
+      styleElement.innerHTML = htmlSanitizer.sanitize(iconStyles, styleSanitizeStrategy);
       this.host.shadowRoot.appendChild(styleElement);
     }
   }

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

@@ -39,13 +39,21 @@ export class VegaInputInputContainerRenderer extends VegaSlimmer {
     return this.inputContainerRef;
   }
   render() {
-    return (h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: {
+    return (
+    // This container uses onClick to delegate focus to the inner <input> when clicking anywhere in the input area.
+    // It is a layout wrapper, not an interactive widget, so adding a role would be semantically incorrect.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: {
         'vega-input-container': true,
         'with-value': !!this.value,
         [`vega-input-size-${this.size}`]: true,
         'vega-input-disabled': this.disabled,
         'compact-input-width': this.isCompactInputWidth,
-      }, onClick: this.onContainerClick, "aria-label": "input container", "aria-disabled": `${this.disabled}`, role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      }, onClick: this.onContainerClick, "aria-disabled": `${this.disabled}`, 
+      // tabIndex={-1} allows programmatic focus (e.g. after clearing input) without adding the container to the tab order.
+      // The linter flags this because it's a non-interactive element, but programmatic focus is intentional here.
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+      tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       this.prefixSlotRenderer.render(),
       this.renderPrefixText(),
       this.inputRenderer.render(),

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/country-select-renderer.js

@@ -14,7 +14,7 @@ import { COUNTRIES } from '../../assets/countries';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { VegaDropdownRenderItemInternalOverridden, VegaInputSelectRenderPrefixIconInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { FeatureFlag } from '../../../../helpers/public-api';
+import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 export class CountrySelectRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);

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

@@ -10,7 +10,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import chevronUp from '../../../../global/icons/chevron-up';
 import chevronDown from '../../../../global/icons/chevron-down';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
-import { sanitizeHtmlLabel } from '../../../../utils/sanitize';
+import { htmlSanitizer, labelSanitizeStrategy } from '../../../../utils/sanitize';
 /** The `VegaInputSelectDropdownRenderer` class is a TypeScript React component that renders a dropdown select input with various customization options. */
 export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
@@ -61,7 +61,7 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       var _a, _b;
       const selectedSourceItemItem = this.selectedItem;
       if (selectedSourceItemItem === null || selectedSourceItemItem === void 0 ? void 0 : selectedSourceItemItem.displayName) {
-        selectedSourceItemItem.displayName = sanitizeHtmlLabel(selectedSourceItemItem.displayName);
+        selectedSourceItemItem.displayName = htmlSanitizer.sanitize(selectedSourceItemItem.displayName, labelSanitizeStrategy);
       }
       const selectedLabelStr = (_b = (_a = this.selectedLabel).single) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, selectedSourceItemItem);
       if ((typeof this.selectedLabel == 'function' && this.selectedItem) ||

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

@@ -21,7 +21,7 @@ import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaPaginationPageSizeObserverController } from './slimmers/controllers/vega-pagination-page-size-observer-controller';
 import { VegaPaginationCurrentPageObserverController } from './slimmers/controllers/vega-pagination-current-page-observer-controller';
-import { FeatureFlag } from '../../helpers/public-api';
+import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
 import { VegaPaginationLayoutController } from './slimmers/controllers/vega-pagination-layout-controller';
 /**
  * @vegaVersion 1.3.0

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/dto/internal-progress-tracker-step.js

@@ -13,23 +13,29 @@ export class InternalProgressTrackerStep {
    * @param {string} title - The title of the step.
    * @param {ProgressStepStatus} progressStatus - The progress status of the step.
    * @param {boolean} isCurrent - Indicates if this step is the current step.
+   * @param {boolean} clickable - Indicates if this step is clickable.
    */
-  constructor(stepKey, title, progressStatus, isCurrent) {
+  constructor(stepKey, title, progressStatus, isCurrent, clickable) {
     this.stepKey = stepKey;
     this.title = title;
     this.progressStatus = progressStatus;
     this.isCurrent = isCurrent;
+    this.clickable = clickable;
   }
   /**
    * Create InternalProgressTrackerStep array from steps property
    *
-   * @param {string[]} steps - An array of step keys.
+   * @param {HTMLElement} host - The host element.
+   * @param {string[] | VegaProgressTrackerStepItem[]} steps - An array of step keys.
    * @param {number} current - The current step index.
    * @param {string[]} completedSteps - An array of completed step keys.
    * @returns {InternalProgressTrackerStep[]} An array of InternalProgressTrackerStep instances.
    */
-  static fromSteps(steps, current, completedSteps) {
-    return steps.map((step, index) => new InternalProgressTrackerStep(step, step, this.getStepStatus(step, index, current, completedSteps), index === current));
+  static fromSteps(host, steps, current, completedSteps) {
+    return steps.map((step, index) => {
+      const stepKey = typeof step === 'string' ? step : step.title;
+      return new InternalProgressTrackerStep(stepKey, stepKey, this.getStepStatus(stepKey, index, current, completedSteps), index === current, this.getIsStepClickable(host, step));
+    });
   }
   /**
    * Create InternalProgressTrackerStep array from host slot elements
@@ -41,9 +47,27 @@ export class InternalProgressTrackerStep {
    */
   static fromHostSlot(host, current, completedSteps) {
     return Array.from(host.querySelectorAll('vega-progress-tracker-step')).map((step, index) => {
-      return new InternalProgressTrackerStep(step.stepKey, '', this.getStepStatus(step.stepKey, index, current, completedSteps), index === current);
+      const stepKey = step.stepKey;
+      return new InternalProgressTrackerStep(stepKey, '', this.getStepStatus(stepKey, index, current, completedSteps), index === current, this.getIsStepClickable(host, step));
     });
   }
+  /**
+   * Gets the clickable mode of the step.
+   *
+   * @param {HTMLElement} host - The host element.
+   * @param {string | VegaProgressTrackerStepItem} step - The step element.
+   * @returns { boolean } The clickable mode of the step.
+   */
+  static getIsStepClickable(host, step) {
+    //For the legacy string type steps, the clickable mode is determined by the canClickStep property on the host
+    if (typeof step === 'string')
+      return host.canClickStep;
+    //If host has disabled click step, return false regardless of individual step setting
+    if (!host.canClickStep)
+      return false;
+    //Return default VegaProgressTrackerStepItem clickable value
+    return typeof step.clickable === 'boolean' ? step.clickable : host.canClickStep;
+  }
   /**
    * Checks if the step is completed.
    *
@@ -59,7 +83,7 @@ export class InternalProgressTrackerStep {
  * @param {string} stepKey - The unique key for the step.
  * @param {number} stepIndex - The index of the step.
  * @param {number} current - The current step index.
- * @param {string[]} completedSteps - An array of completed step keys.
+ * @param {string[]} completedSteps - An array of completed step keys. TODO: In the future, this will be derived from the step's own status rather than relying on an external array.
  * @returns {ProgressStepStatus} The progress status of the step.
  */
 InternalProgressTrackerStep.getStepStatus = (stepKey, stepIndex, current, completedSteps) => {

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/vega-progress-tracker-current-steps-controller.js

@@ -64,7 +64,7 @@ export class VegaProgressTrackerCurrentStepsController extends VegaSlimmer {
    */
   syncUpCurrentSteps() {
     this.currentSteps = this.renderModeController.isSourceRenderMode()
-      ? InternalProgressTrackerStep.fromSteps(this.steps, this.current, this.deprecatedPropertySlimmer.getValue())
+      ? InternalProgressTrackerStep.fromSteps(this.host, this.steps, this.current, this.deprecatedPropertySlimmer.getValue())
       : InternalProgressTrackerStep.fromHostSlot(this.host, this.current, this.deprecatedPropertySlimmer.getValue());
   }
   /**

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

@@ -22,7 +22,14 @@ export class VegaProgressTrackerRenderer extends VegaSlimmer {
     };
     this.renderStep = (step, stepIndex) => {
       var _a;
-      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${step.progressStatus} ${step.isCurrent ? 'current' : ''}`, "data-index": stepIndex, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": step.title },
+      return (h("div", { role: !step.clickable ? null : 'button', class: [
+          'vega-progress-step',
+          step.progressStatus,
+          step.isCurrent ? 'current' : '',
+          !step.clickable ? 'disabled' : '',
+        ]
+          .filter(Boolean)
+          .join(' '), "data-index": stepIndex, tabIndex: !step.clickable ? null : 0, onClick: !step.clickable ? null : this.onStepIconClick, onKeyDown: !step.clickable ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": step.title },
         h("div", { class: "vega-progress-step-icon-divider" },
           h("div", { class: `vega-progress-step__divider left ${((_a = this.currentSteps[stepIndex - 1]) === null || _a === void 0 ? void 0 : _a.isCompleted()) ? 'background' : ''}` }),
           this.renderStepIcon(step, stepIndex),

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker-step/vega-progress-tracker-step.js

@@ -26,6 +26,12 @@ export class VegaProgressTrackerStep {
      * @vegaVersion 2.73.0
      */
     this.stepKey = '';
+    /**
+     * If step is clickable.
+     *
+     * @vegaVersion 2.76.0
+     */
+    this.clickable = true;
   }
   render() {
     return sanitizeVegaComponent(h(Host, null,
@@ -65,6 +71,27 @@ export class VegaProgressTrackerStep {
       "attribute": "step-key",
       "reflect": true,
       "defaultValue": "''"
+    },
+    "clickable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.76.0"
+          }],
+        "text": "If step is clickable."
+      },
+      "attribute": "clickable",
+      "reflect": true,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -61,6 +61,18 @@
 :host(:not(.click-step-disabled)) .vega-progress-step.complete.current:hover .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
 }
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled {
+  cursor: initial;
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.default:hover .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.default:active .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.inProgress:hover .vega-progress-step__icon, :host(:not(.click-step-disabled)) .vega-progress-step.disabled.current:hover .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}
 
 :host .vega-progress-step:focus-visible {
   outline-width: 0px;