@esri/calcite-components 5.2.0-next.4 → 5.2.0-next.6

package/dist/components/calcite-combobox/customElement.js

@@ -40,6 +40,7 @@ class Combobox extends LitElement {
     })(this);
     this.selectAllComboboxItemRef = createRef();
     this.allSelectedIndicatorChipRef = createRef();
+    this.data = [];
     this.cancelable = useCancelable()(this);
     this.filterItems = (() => {
       const find = (item, filteredData) => item && filteredData.some(({ el }) => item === el);
@@ -63,7 +64,7 @@ class Combobox extends LitElement {
           }
         });
         this.noMatchesFound = this.filteredItems.length === 0 && !!this.filterText;
-        this.filterTextMatchPattern = this.filterText && new RegExp(`(${escapeRegExp(this.filterText)})`, "i");
+        this.filterTextMatchPattern = this.filterText ? new RegExp(`(${escapeRegExp(this.filterText)})`, "i") : void 0;
         this.keyboardNavItems.forEach((item) => {
           item.filterTextMatchPattern = this.filterTextMatchPattern;
         });
@@ -83,6 +84,7 @@ class Combobox extends LitElement {
       }
       return this.allItems.filter((item) => item.selected && (this.selectionMode !== "ancestors" || !hasActiveChildren(item)));
     };
+    this.groupData = [];
     this.groupItems = [];
     this.guid = guid();
     this.ignoreSelectedEventsFlag = false;
@@ -113,7 +115,7 @@ class Combobox extends LitElement {
     this.clearButtonRef = createRef();
     this._selectedItems = [];
     this.textInputRef = createRef();
-    this._value = null;
+    this._value = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.customChipAddHandler = () => {
@@ -133,6 +135,7 @@ class Combobox extends LitElement {
     this.fitUsingCompactCountLabel = false;
     this.allItems = [];
     this.items = [];
+    this.noMatchesFound = false;
     this.clearDisabled = false;
     this.disabled = false;
     this.maxItems = 0;
@@ -434,7 +437,7 @@ class Combobox extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
   }
   getValue() {
     const items = this.getOrderedSelectedValues(this.selectedItems.map((item) => item.value?.toString()));
@@ -494,7 +497,7 @@ class Combobox extends LitElement {
         }
         break;
       case "ArrowLeft":
-        if (this.activeChipIndex !== -1 || this.textInputRef.value.selectionStart === 0) {
+        if (this.activeChipIndex !== -1 || this.textInputRef.value?.selectionStart === 0) {
           this.previousChip();
           event.preventDefault();
         }
@@ -534,7 +537,7 @@ class Combobox extends LitElement {
         }
         break;
       case " ":
-        if (!this.textInputRef.value.value && !event.defaultPrevented) {
+        if (!this.textInputRef.value?.value && !event.defaultPrevented) {
           if (!this.open && this.keyboardNavItems.length) {
             this.open = true;
             this.ensureRecentSelectedItemIsActive();
@@ -571,7 +574,7 @@ class Combobox extends LitElement {
           break;
         }
         if (!this.clearDisabled) {
-          if (this.textInputRef.value?.value.length > 0) {
+          if (this.textInputRef.value.value.length > 0) {
             this.resetText();
             event.preventDefault();
           } else if (this.selectedItems.length > 0 && this.selectionMode !== "single-persist") {
@@ -635,7 +638,7 @@ class Combobox extends LitElement {
   }
   async setMaxScrollerHeight() {
     const { listContainerEl, open, referenceEl } = this;
-    if (!listContainerEl || !open) {
+    if (!listContainerEl || !open || !referenceEl) {
       return;
     }
     const maxScrollerHeight = this.getMaxScrollerHeight();
@@ -660,7 +663,8 @@ class Combobox extends LitElement {
       event.preventDefault();
       return;
     }
-    if (composedPath.includes(this.clearButtonRef.value)) {
+    const clearButton = this.clearButtonRef.value;
+    if (clearButton && composedPath.includes(clearButton)) {
       this.clearValue();
       event.preventDefault();
       return;
@@ -727,11 +731,11 @@ class Combobox extends LitElement {
       this.refreshingSelectionDisplay = false;
       return;
     }
-    if (!this.textInputRef.value || !this.chipContainerEl) {
+    const { allSelectedIndicatorChipRef, chipContainerEl, selectionDisplay, placeholder, selectedIndicatorChipRef, textInputRef } = this;
+    if (!textInputRef.value || !chipContainerEl) {
       this.refreshingSelectionDisplay = false;
       return;
     }
-    const { allSelectedIndicatorChipRef, chipContainerEl, selectionDisplay, placeholder, selectedIndicatorChipRef, textInputRef } = this;
     const chipContainerElGap = parseInt(getComputedStyle(chipContainerEl).gap);
     const chipContainerElWidth = getElementWidth(chipContainerEl);
     const { fontSize, fontFamily, minInlineSize } = getComputedStyle(textInputRef.value);
@@ -752,7 +756,7 @@ class Combobox extends LitElement {
     });
     if (selectionDisplay !== "fit" && this.allSelected && this.selectAllEnabled) {
       this.selectedItems.forEach((item) => {
-        const chipEl = this.referenceEl.querySelector(`#${IDS.chip(item.guid)}`);
+        const chipEl = this.referenceEl?.querySelector(`#${IDS.chip(item.guid)}`);
         if (chipEl) {
           this.hideChip(chipEl);
         }
@@ -760,14 +764,14 @@ class Combobox extends LitElement {
     }
     if (this.indeterminate) {
       this.selectedItems.forEach((item) => {
-        const chipEl = this.referenceEl.querySelector(`#${IDS.chip(item.guid)}`);
+        const chipEl = this.referenceEl?.querySelector(`#${IDS.chip(item.guid)}`);
         if (chipEl) {
           this.showChip(chipEl);
         }
       });
     }
     if (selectionDisplay === "fit") {
-      const chipEls = Array.from(this.el.shadowRoot.querySelectorAll("calcite-chip")).filter((chipEl) => {
+      const chipEls = Array.from(this.renderRoot.querySelectorAll("calcite-chip")).filter((chipEl) => {
         const chipValue = chipEl.value;
         const hasValue = chipValue != null && `${chipValue}` !== "";
         return chipEl.disabled || hasValue;
@@ -792,7 +796,7 @@ class Combobox extends LitElement {
       const didHiddenCountChange = previousHiddenChipsCount !== this.selectedHiddenChipsCount;
       if (didHiddenCountChange && followUpRefresh) {
         this.fitFollowUpRefreshPromise = this.updateComplete.then(() => this.refreshSelectionDisplay(false)).then(() => {
-          this.fitFollowUpRefreshPromise = null;
+          this.fitFollowUpRefreshPromise = void 0;
         });
       }
     }
@@ -1078,7 +1082,7 @@ class Combobox extends LitElement {
   }
   focusChip() {
     const guid2 = this.selectedItems[this.activeChipIndex]?.guid;
-    const chip = guid2 ? this.referenceEl.querySelector(`#${IDS.chip(guid2)}`) : null;
+    const chip = guid2 ? this.referenceEl?.querySelector(`#${IDS.chip(guid2)}`) : void 0;
     chip?.setFocus();
   }
   scrollToActiveOrSelectedItem(scrollToSelected = false) {
@@ -1104,7 +1108,7 @@ class Combobox extends LitElement {
   }
   updateActiveItemIndex(index) {
     this.activeItemIndex = index;
-    let activeDescendant = null;
+    let activeDescendant = "";
     this.keyboardNavItems.forEach((el, i) => {
       if (i === index) {
         el.active = true;
@@ -1126,7 +1130,7 @@ class Combobox extends LitElement {
       return;
     }
     this.activeChipIndex = -1;
-    this.textInputRef.value.focus();
+    this.textInputRef.value?.focus();
     if (this.open && this.selectionDisplay === "fit" && this.isMulti()) {
       void this.refreshSelectionDisplay();
     }
@@ -1141,7 +1145,7 @@ class Combobox extends LitElement {
   }
   getDescriptionMessage() {
     const value = Array.isArray(this.value) ? this.value.join(", ") : this.value;
-    return this.readOnly ? this.messages.nonEditable?.replace("{value}", `${value}`) : value;
+    return this.readOnly ? this.messages.nonEditable?.replace("{value}", `${value}`) ?? `${value}` : value;
   }
   getChipLabel(item, isAncestors) {
     if (!isAncestors) {
@@ -1155,7 +1159,7 @@ class Combobox extends LitElement {
     return keyed(item.guid || item.value || label, html`<calcite-chip .appearance=${readOnly ? "outline" : "solid"} class=${safeClassMap({
       [CSS.chip]: true,
       [CSS.disabled]: disabled
-    })} .closable=${!disabled && !readOnly} data-testid=${`${disabled ? "disabled-chip" : "chip"}-${index}`} .disabled=${disabled} .icon=${item.icon} .iconFlipRtl=${item.iconFlipRtl} id=${(!disabled && item.guid ? `${IDS.chip(item.guid)}` : null) ?? nothing} .label=${label} .messageOverrides=${!disabled ? { dismissLabel: messages.removeTag } : null} @calciteChipClose=${!disabled ? () => this.calciteChipCloseHandler(item) : null} @focusin=${!disabled ? () => this.activeChipIndex = index : null} .scale=${scale} .selected=${item.selected} .tabIndex=${!disabled && activeChipIndex === index ? 0 : -1} title=${label ?? nothing} .value=${item.value}>${label}</calcite-chip>`);
+    })} .closable=${!disabled && !readOnly} data-testid=${`${disabled ? "disabled-chip" : "chip"}-${index}`} .disabled=${disabled} .icon=${item.icon} .iconFlipRtl=${item.iconFlipRtl} id=${(!disabled && item.guid ? `${IDS.chip(item.guid)}` : void 0) ?? nothing} .label=${label} .messageOverrides=${!disabled ? { dismissLabel: messages.removeTag } : void 0} @calciteChipClose=${!disabled ? () => this.calciteChipCloseHandler(item) : void 0} @focusin=${!disabled ? () => this.activeChipIndex = index : void 0} .scale=${scale} .selected=${item.selected} .tabIndex=${!disabled && activeChipIndex === index ? 0 : -1} title=${label ?? nothing} .value=${item.value}>${label}</calcite-chip>`);
   }
   renderChipCount(count, scale) {
     const label = this.fitUsingCompactCountLabel ? `${count}` : this.messages.disabledSelectedCount?.replace("{count}", `${count}`) ?? `+${count}`;
@@ -1256,7 +1260,7 @@ class Combobox extends LitElement {
   }
   renderSelectedIndicatorChip() {
     const { compactSelectionDisplay, selectionDisplay, scale, selectedIndicatorChipRef } = this;
-    let chipInvisible;
+    let chipInvisible = false;
     let label;
     const selectedItemsCount = this.getSelectedItems().length;
     if (compactSelectionDisplay) {
@@ -1280,7 +1284,7 @@ class Combobox extends LitElement {
   }
   renderSelectedIndicatorChipCompact() {
     const { compactSelectionDisplay, selectionDisplay, scale } = this;
-    let chipInvisible;
+    let chipInvisible = false;
     let label;
     const selectedItemsCount = this.getSelectedItems().length;
     if (compactSelectionDisplay) {

package/dist/components/calcite-combobox-item/customElement.d.ts

@@ -26,9 +26,9 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-  accessor ancestors: ComboboxChildElement[];
+  accessor ancestors: ComboboxChildElement[] | undefined;
   /** Specifies a description for the component. Displays below the `heading`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
    *
@@ -50,7 +50,7 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor heading: string;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -60,7 +60,7 @@ export abstract class ComboboxItem extends LitElement {
   /** Specifies an accessible label for the component. */
   accessor label: any;
   /** Specifies additional metadata to the component for use in filtering. */
-  accessor metadata: Record<string, unknown>;
+  accessor metadata: Record<string, unknown> | undefined;
   /**
    * When `true`, the component is selected.
    *
@@ -74,7 +74,7 @@ export abstract class ComboboxItem extends LitElement {
    *
    * It is recommended to use 5 characters or fewer.
    */
-  accessor shortHeading: string;
+  accessor shortHeading: string | undefined;
   /** The component's value. Falls back to `heading` if not provided. */
   accessor value: any;
   /** Fires whenever the component is selected or unselected. */

package/dist/components/calcite-combobox-item/customElement.js

@@ -45,6 +45,7 @@ class ComboboxItem extends LitElement {
     this.hasContent = false;
     this.active = false;
     this.disabled = false;
+    this.filterDisabled = false;
     this.guid = guid();
     this.iconFlipRtl = false;
     this.scale = "m";

package/dist/components/calcite-combobox-item-group/customElement.d.ts

@@ -9,7 +9,7 @@ import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
  */
 export abstract class ComboboxItemGroup extends LitElement {
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-  accessor ancestors: ComboboxChildElement[];
+  accessor ancestors: ComboboxChildElement[] | undefined;
   /**
    * Specifies an accessible label for the component.
    *

package/dist/components/calcite-dropdown/customElement.d.ts

@@ -7,6 +7,7 @@ import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
 /**
  * @cssproperty [--calcite-dropdown-width] - Specifies the width of the component's wrapper.
  * @cssproperty [--calcite-dropdown-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-dropdown-max-height] - Specifies the maximum height of the component's wrapper.
  * @slot  - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
  * @slot [trigger] - [deprecated] in v5.1.0, removal target v7.0.0 - Use the `referenceElement` property instead. A slot for the element that triggers the component.
  */

package/dist/components/calcite-dropdown/customElement.js

@@ -22,7 +22,7 @@ const CSS = {
   wrapper: "wrapper",
   triggerContainer: "trigger-container"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}.wrapper{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.wrapper{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.wrapper[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.wrapper:popover-open{display:block}.wrapper .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.wrapper .calcite-floating-ui-anim{box-shadow:var(--calcite-shadow-md)}.content{max-height:45vh;width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1))}.trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media(forced-colors:active){:host([open]) .wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}.wrapper{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.wrapper{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.wrapper[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.wrapper:popover-open{display:block}.wrapper .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.wrapper .calcite-floating-ui-anim{box-shadow:var(--calcite-shadow-md)}.content{width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1));max-block-size:var(--calcite-dropdown-max-height, 45vh)}.trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media(forced-colors:active){:host([open]) .wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 const manager = referenceElementManager({ click: true, hover: true });
 class Dropdown extends LitElement {
   constructor() {

package/dist/components/calcite-graph/customElement.d.ts

@@ -8,16 +8,16 @@ export abstract class Graph extends LitElement {
    * Array of values describing a single color stop ([offset, color, opacity])
    * These color stops should be sorted by offset value.
    */
-  accessor colorStops: ColorStop[];
+  accessor colorStops: ColorStop[] | undefined;
   /**
    * Array of tuples describing a single data point ([x, y])
    * These data points should be sorted by x-axis value.
    */
   accessor data: DataSeries;
   /** End of highlight color if highlighting range. */
-  accessor highlightMax: number;
+  accessor highlightMax: number | undefined;
   /** Start of highlight color if highlighting range. */
-  accessor highlightMin: number;
+  accessor highlightMin: number | undefined;
   /**
    * Highest point of the range.
    *

package/dist/components/calcite-graph/customElement.js

@@ -9,8 +9,8 @@ function slope(p0, p1, p2) {
   const dx1 = p2[0] - p1[0];
   const dy = p1[1] - p0[1];
   const dy1 = p2[1] - p1[1];
-  const m = dy / (dx || dx1 < 0 && 0);
-  const m1 = dy1 / (dx1 || dx < 0 && 0);
+  const m = dy / Number(dx || dx1 < 0 && 0);
+  const m1 = dy1 / Number(dx1 || dx < 0 && 0);
   const p = (m * dx1 + m1 * dx) / (dx + dx1);
   return (Math.sign(m) + Math.sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;
 }
@@ -125,36 +125,32 @@ class Graph extends LitElement {
       currentMax = [max, rangeMax[1]];
     }
     const t = translate({ min: currentMin, max: currentMax, width, height });
-    const [hMinX] = t([highlightMin, currentMax[1]]);
-    const [hMaxX] = t([highlightMax, currentMax[1]]);
     const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
     const fill = colorStops ? `url(#${IDS.linearGradient(id)})` : void 0;
-    return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}${highlightMin !== void 0 ? [
-      svg`<mask height=100% id=${IDS.mask(id, 1) ?? nothing} width=100% x=0% y=0%><path d=${`
+    if (highlightMin !== void 0 && highlightMax !== void 0) {
+      const [hMinX] = t([highlightMin, currentMax[1]]);
+      const [hMaxX] = t([highlightMax, currentMax[1]]);
+      return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${svg`${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}<mask height=100% id=${IDS.mask(id, 1) ?? nothing} width=100% x=0% y=0%><path d=${`
             M 0,0
             L ${hMinX - 1},0
             L ${hMinX - 1},${height}
             L 0,${height}
             Z
-          `} fill=white /></mask>`,
-      svg`<mask height=100% id=${IDS.mask(id, 2) ?? nothing} width=100% x=0% y=0%><path d=${`
+          `} fill=white /></mask><mask height=100% id=${IDS.mask(id, 2) ?? nothing} width=100% x=0% y=0%><path d=${`
             M ${hMinX + 1},0
             L ${hMaxX - 1},0
             L ${hMaxX - 1},${height}
             L ${hMinX + 1}, ${height}
             Z
-          `} fill=white /></mask>`,
-      svg`<mask height=100% id=${IDS.mask(id, 3) ?? nothing} width=100% x=0% y=0%><path d=${`
+          `} fill=white /></mask><mask height=100% id=${IDS.mask(id, 3) ?? nothing} width=100% x=0% y=0%><path d=${`
                 M ${hMaxX + 1},0
                 L ${width},0
                 L ${width},${height}
                 L ${hMaxX + 1}, ${height}
                 Z
-              `} fill=white /></mask>`,
-      svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 1)})`} />`,
-      svg`<path class=${safeClassMap(CSS.graphPathHighlight)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 2)})`} />`,
-      svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 3)})`} />`
-    ] : svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} />`}</svg>`;
+              `} fill=white /></mask><path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 1)})`} /><path class=${safeClassMap(CSS.graphPathHighlight)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 2)})`} /><path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 3)})`} />`}</svg>`;
+    }
+    return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${svg`${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} />`}</svg>`;
   }
 }
 customElement("calcite-graph", Graph);

package/dist/components/calcite-pagination/customElement.js

@@ -191,7 +191,7 @@ class Pagination extends LitElement {
     this.emitUpdate();
   }
   renderEllipsis(type) {
-    return keyed(type, html`<span class=${safeClassMap(CSS.ellipsis)}>&hellip;</span>`);
+    return html`<li aria-hidden=true role=presentation>${keyed(type, html`<span class=${safeClassMap(CSS.ellipsis)}>&hellip;</span>`)}</li>`;
   }
   renderItems() {
     const { totalItems, pageSize, startItem, maxItems, totalPages, lastStartItem, isXXSmall } = this;