@heartlandone/vega 2.75.1 → 2.77.0

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

@@ -333,17 +333,21 @@
     line-height: 16px;
   }
 }
-:host(.small) .calendar .container__days .day-item .is-start-date,
-:host(.small) .calendar .container__days .day-item .is-end-date {
+:host(.small) .calendar .container__days .day-item .day-content {
+  width: 18px;
+  height: 18px;
+}
+:host(.small) .calendar .container__days .day-item.is-today .day-content {
   font-family: "Inter", sans-serif;
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
   letter-spacing: 0px;
+  width: 18px;
+  height: 18px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host(.small) .calendar .container__days .day-item .is-start-date,
-  :host(.small) .calendar .container__days .day-item .is-end-date {
+  :host(.small) .calendar .container__days .day-item.is-today .day-content {
     font-family: "Inter", sans-serif;
     font-size: 12px;
     font-weight: 700;
@@ -352,8 +356,7 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host(.small) .calendar .container__days .day-item .is-start-date,
-  :host(.small) .calendar .container__days .day-item .is-end-date {
+  :host(.small) .calendar .container__days .day-item.is-today .day-content {
     font-family: "Inter", sans-serif;
     font-size: 12px;
     font-weight: 700;
@@ -362,8 +365,7 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host(.small) .calendar .container__days .day-item .is-start-date,
-  :host(.small) .calendar .container__days .day-item .is-end-date {
+  :host(.small) .calendar .container__days .day-item.is-today .day-content {
     font-family: "Inter", sans-serif;
     font-size: 12px;
     font-weight: 700;
@@ -371,6 +373,18 @@
     letter-spacing: 0px;
   }
 }
+:host(.small) .calendar .container__days .day-item:focus-visible .day-content {
+  width: 16px;
+}
+:host(.small) .calendar .container__days .day-item:focus-visible .day-content {
+  width: 16px;
+}
+:host(.small) .calendar .container__days vega-tooltip .day-item .day-content:after {
+  width: 4px;
+  height: 4px;
+  bottom: -3px;
+  left: calc(50% - 2px);
+}
 
 :host(.small.range) .calendar .container__main {
   width: 100%;
@@ -639,6 +653,46 @@
     line-height: 18px;
   }
 }
+:host(.regular) .calendar .container__days .day-item .day-content {
+  width: 24px;
+  height: 24px;
+}
+:host(.regular) .calendar .container__days .day-item.is-today .day-content {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+:host(.regular) .calendar .container__days vega-tooltip .day-item .day-content:after {
+  width: 4px;
+  height: 4px;
+  bottom: -3px;
+  left: calc(50% - 2px);
+}
 
 :host(.regular.range) .calendar .container__main {
   width: 100%;
@@ -968,6 +1022,61 @@
     letter-spacing: 0px;
   }
 }
+:host(.large) .calendar .container__days .day-item .day-content {
+  width: 36px;
+  height: 36px;
+}
+:host(.large) .calendar .container__days .day-item.is-today .day-content {
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host(.large) .calendar .container__days vega-tooltip .day-item .day-content:after {
+  width: 6px;
+  height: 6px;
+  bottom: -4px;
+  left: calc(50% - 3px);
+}
+
+:host(.regular) .container__days .day-item.is-today .day-content,
+:host(.large) .container__days .day-item.is-today .day-content {
+  border: 1px solid rgba(var(--v-text-primary, 32, 54, 69, 1));
+}
+:host(.regular) .container__days .day-item.is-today.is-start-date .day-content, :host(.regular) .container__days .day-item.is-today.is-end-date .day-content, :host(.regular) .container__days .day-item.is-today:active:not(.is-locked):not(.is-disabled) .day-content,
+:host(.large) .container__days .day-item.is-today.is-start-date .day-content,
+:host(.large) .container__days .day-item.is-today.is-end-date .day-content,
+:host(.large) .container__days .day-item.is-today:active:not(.is-locked):not(.is-disabled) .day-content {
+  border-color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
+}
 
 :host(.large.range) .calendar .container__main {
   width: 100%;
@@ -1042,6 +1151,7 @@
 
 .calendar .container__months .month-item-weekdays-row > div,
 .calendar .container__days > div,
+.calendar .container__days > vega-tooltip > div,
 .calendar .container__days > a {
   padding: 4px;
   display: flex;
@@ -1055,144 +1165,70 @@
 
 .calendar .container__days .day-item {
   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;
   text-align: center;
   border-radius: 9999px;
   cursor: default;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .calendar .container__days .day-item {
-    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) {
-  .calendar .container__days .day-item {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
+.calendar .container__days .day-item .day-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  box-sizing: border-box;
 }
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .calendar .container__days .day-item {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
+.calendar .container__days .day-item:hover {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
 }
-
-.calendar .container__days .day-item:not(.is-locked):not(.is-disabled):active {
+.calendar .container__days .day-item:active {
   background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
-  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+  color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
   border-width: 0px;
+  outline: none;
 }
-
-.calendar .day-item.is-start-date.is-end-date.is-locked:active {
-  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-}
-
-.calendar .container__days .day-item:hover:before {
-  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
-  border-radius: 9999px;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  content: " ";
-  z-index: -1;
-}
-
-.calendar .container__days .day-item.is-locked:hover:before,
-html.dark .calendar .container__days .day-item.is-locked:hover:before {
-  border-style: none;
+.calendar .container__days .day-item:focus-visible {
+  border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
+  outline: none;
 }
-
-.calendar .container__days .day-item.is-disabled:hover:before {
-  border-style: none;
-}
-
 .calendar .container__days .day-item.is-locked, .calendar .container__days .day-item.is-disabled {
+  color: rgba(var(--v-text-input-disabled, 107, 116, 125, 1));
   -webkit-tap-highlight-color: transparent;
+  cursor: not-allowed;
 }
-
-.calendar .container__days .day-item:hover {
-  position: relative;
+.calendar .container__days .day-item.is-locked:hover, .calendar .container__days .day-item.is-disabled:hover {
+  border-width: 0px;
 }
-
-.calendar .container__days .day-item.is-today {
-  color: rgba(var(--v-text-link, 19, 98, 226, 1));
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 18px;
+.calendar .container__days .day-item.is-locked:active, .calendar .container__days .day-item.is-disabled:active {
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
+  border-width: 0px;
+  outline: none;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .calendar .container__days .day-item.is-today {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
+.calendar .container__days .day-item.is-disabled {
+  text-decoration: line-through;
 }
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .calendar .container__days .day-item.is-today {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
+.calendar .container__days .day-item.is-start-date, .calendar .container__days .day-item.is-end-date {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+  color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
+  position: relative;
+  border-width: 0px;
 }
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .calendar .container__days .day-item.is-today {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
+.calendar .container__days .day-item.is-start-date:hover, .calendar .container__days .day-item.is-end-date:hover {
+  background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
 }
-
-.calendar .container__days .day-item.is-in-range {
-  border-radius: 0px;
-  position: relative;
-  z-index: 2;
-  background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
+.calendar .container__days .day-item.is-start-date:active, .calendar .container__days .day-item.is-end-date:active {
+  background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
 }
-
-.calendar .container__days .day-item:not(.is-locked):not(.is-disabled).is-in-range:hover:before {
-  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
-  border-radius: 9999px;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  content: " ";
-  z-index: -1;
+.calendar .container__days .day-item.is-start-date:focus-visible, .calendar .container__days .day-item.is-end-date:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  background-color: rgba(var(--v-bg-action-focus, 19, 98, 226, 1));
 }
-
-.calendar .container__days .day-item.is-start-date {
-  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-  border-radius: 9999px;
-  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
-  position: relative;
+.calendar .container__days .day-item.is-start-date.is-disabled, .calendar .container__days .day-item.is-start-date.is-locked, .calendar .container__days .day-item.is-end-date.is-disabled, .calendar .container__days .day-item.is-end-date.is-locked {
+  background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
+  color: rgba(var(--v-text-on-disabled, 252, 252, 252, 1));
 }
-
-.calendar .container__days .day-item.is-start-date:hover:before {
-  z-index: 2;
+.calendar .container__days .day-item.is-start-date.is-end-date:after {
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
 }
-
 .calendar .container__days .day-item.is-start-date:after {
   position: absolute;
   top: 0px;
@@ -1207,37 +1243,6 @@ html.dark .calendar .container__days .day-item.is-locked:hover:before {
   z-index: -1;
   background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
 }
-
-.calendar .container__days .day-item.is-start-date.is-flipped {
-  border-radius: 9999px;
-  position: relative;
-}
-
-.calendar .container__days .day-item.is-start-date.is-flipped:after {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-top-right-radius: 9999px;
-  border-bottom-right-radius: 9999px;
-  content: " ";
-  z-index: -1;
-}
-
-.calendar .container__days .day-item.is-end-date {
-  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-  border-radius: 9999px;
-  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
-  position: relative;
-}
-
-.calendar .container__days .day-item.is-end-date:hover:before {
-  z-index: 2;
-}
-
 .calendar .container__days .day-item.is-end-date:after {
   position: absolute;
   top: 0px;
@@ -1252,42 +1257,44 @@ html.dark .calendar .container__days .day-item.is-locked:hover:before {
   z-index: -1;
   background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
 }
-
-.calendar .container__days .day-item.is-end-date.is-flipped {
-  border-radius: 9999px;
+.calendar .container__days .day-item.is-in-range {
+  border-radius: 0px;
+  background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
+  border-width: 0px;
+}
+.calendar .container__days .day-item.is-in-range:hover {
   position: relative;
 }
-
-.calendar .container__days .day-item.is-end-date.is-flipped:after {
+.calendar .container__days .day-item.is-in-range:hover:before {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+  border-radius: 9999px;
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-top-left-radius: 9999px;
-  border-bottom-left-radius: 9999px;
   content: " ";
-  z-index: -1;
 }
-
-.calendar .container__days .day-item.is-start-date.is-end-date {
-  border-radius: 9999px;
+.calendar .container__days .day-item.is-in-range:focus-visible {
+  border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
+  outline: none;
 }
 
-.calendar .container__days .day-item.is-start-date.is-end-date:after,
-html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after {
-  background: none;
+.calendar .container__days vega-tooltip {
+  width: 100%;
 }
 
-.calendar .container__tooltip {
-  display: none;
+.calendar .container__days vega-tooltip .day-item .day-content {
+  position: relative;
 }
-
-.calendar .container__days .day-item.is-locked {
-  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
-  cursor: not-allowed;
+.calendar .container__days vega-tooltip .day-item .day-content:after {
+  position: absolute;
+  border-radius: 9999px;
+  content: " ";
+  background-color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+}
+.calendar .container__days vega-tooltip .day-item.is-start-date .day-content:after, .calendar .container__days vega-tooltip .day-item.is-end-date .day-content:after, .calendar .container__days vega-tooltip .day-item:active:not(.is-locked):not(.is-disabled) .day-content:after {
+  background-color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
 }
 
 .calendar.mobilefriendly[data-plugins*=mobilefriendly] .container__days > div {
@@ -1351,36 +1358,6 @@ html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after {
   height: 16px;
 }
 
-.calendar .container__days .day-item.is-disabled {
-  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
-  cursor: not-allowed;
-  text-decoration: line-through;
-}
-
 .calendar .container__days > div:not(.day-item) {
   -webkit-tap-highlight-color: transparent;
-}
-
-.calendar .month-item-header > div.dropdown-section {
-  display: flex;
-  gap: 12px;
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value {
-  position: relative;
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  cursor: pointer;
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active {
-  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:active {
-  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:hover {
-  color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:focus-visible {
-  color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }

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

@@ -109,6 +109,14 @@ export class VegaDatePickerCalendar {
      * @vegaVersion 2.72.0
      */
     this.isDateDisabled = () => false;
+    /**
+     * Specifies a function that returns the properties for the date indicator tooltip for a given date in the date picker.
+     *
+     * The function is called for each date cell before rendering.
+     *
+     * @vegaVersion 2.77.0
+     */
+    this.dateIndicator = () => null;
   }
   watchCurrentPeriod() {
     methodPlaceholder();
@@ -445,6 +453,30 @@ export class VegaDatePickerCalendar {
         "text": "Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).\n\nThe function is called for each date cell before rendering.\n\nReturn `true` to disable the cell, or false to keep it selectable.\nDefault behavior: always returns `false` (no cells are disabled)."
       },
       "defaultValue": "() => false"
+    },
+    "dateIndicator": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DatePickerCalendarIndicator",
+        "resolved": "(date: Date) => Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\">>",
+        "references": {
+          "DatePickerCalendarIndicator": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.77.0"
+          }],
+        "text": "Specifies a function that returns the properties for the date indicator tooltip for a given date in the date picker.\n\nThe function is called for each date cell before rendering."
+      },
+      "defaultValue": "() => null"
     }
   }; }
   static get states() { return {

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);
     }
   }