@esri/solutions-components 0.7.1 → 0.7.2

package/dist/components/list-item.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$3 } from './handle.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container--border-selected{border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}:host([hidden]){display:none}[hidden]{display:none}";
+const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container:active{background-color:var(--calcite-ui-foreground-1)}.container--border-selected{border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-bottom{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const focusMap = new Map();
 const listSelector = "calcite-list";
@@ -49,6 +49,9 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
     this.handleContentEndSlotChange = (event) => {
       this.hasContentEnd = slotChangeHasAssignedElement(event);
     };
+    this.handleContentBottomSlotChange = (event) => {
+      this.hasContentBottom = slotChangeHasAssignedElement(event);
+    };
     this.handleDefaultSlotChange = (event) => {
       this.handleOpenableChange(event.target);
     };
@@ -175,6 +178,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
     this.hasCustomContent = false;
     this.hasContentStart = false;
     this.hasContentEnd = false;
+    this.hasContentBottom = false;
   }
   activeHandler(active) {
     if (!active) {
@@ -223,7 +227,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
     setComponentLoaded(this);
   }
   componentDidRender() {
-    updateHostInteraction(this, "managed");
+    updateHostInteraction(this);
   }
   disconnectedCallback() {
     disconnectInteractive(this);
@@ -274,7 +278,15 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = getElementDir(el);
-    return openable ? (h("td", { class: CSS.openContainer, key: "open-container", onClick: this.toggleOpen }, h("calcite-icon", { icon: open ? ICONS.open : dir === "rtl" ? ICONS.closedRTL : ICONS.closedLTR, scale: "s" }))) : (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS.openContainer, key: "open-container", onClick: this.itemClicked }, h("calcite-icon", { icon: ICONS.blank, scale: "s" }))) : null;
+    const icon = openable
+      ? open
+        ? ICONS.open
+        : dir === "rtl"
+          ? ICONS.closedRTL
+          : ICONS.closedLTR
+      : ICONS.blank;
+    const clickHandler = openable ? this.toggleOpen : this.itemClicked;
+    return openable || (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS.openContainer, key: "open-container", onClick: clickHandler }, h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
   }
   renderActionsStart() {
     const { label, hasActionsStart } = this;
@@ -300,6 +312,16 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
     const { hasContentEnd } = this;
     return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
   }
+  renderContentBottom() {
+    const { hasContentBottom, visualLevel } = this;
+    return (h("div", { class: CSS.contentBottom, hidden: !hasContentBottom, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("slot", { name: SLOTS.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
+  }
+  renderDefaultContainer() {
+    return (h("div", { class: {
+        [CSS.nestedContainer]: true,
+        [CSS.nestedContainerHidden]: this.openable && !this.open,
+      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) })));
+  }
   renderContentProperties() {
     const { label, description, hasCustomContent } = this;
     return !hasCustomContent && (!!label || !!description) ? (h("div", { class: CSS.content, key: "content" }, label ? (h("div", { class: CSS.label, key: "label" }, label)) : null, description ? (h("div", { class: CSS.description, key: "description" }, description)) : null)) : null;
@@ -322,7 +344,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
       ref: (el) => (this.contentEl = el) }, content));
   }
   render() {
-    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, } = this;
+    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, visualLevel, } = this;
     const showBorder = selectionMode !== "none" && selectionAppearance === "border";
     const borderSelected = showBorder && selected;
     const borderUnselected = showBorder && !selected;
@@ -330,12 +352,9 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         [CSS.container]: true,
         [CSS.containerBorderSelected]: borderSelected,
         [CSS.containerBorderUnselected]: borderUnselected,
-      }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
+      }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }, tabIndex: active ? 0 : -1,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
-        [CSS.nestedContainer]: true,
-        [CSS.nestedContainerHidden]: openable && !open,
-      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
+      ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom(), this.renderDefaultContainer()));
   }
   // --------------------------------------------------------------------------
   //
@@ -413,6 +432,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
     "hasCustomContent": [32],
     "hasContentStart": [32],
     "hasContentEnd": [32],
+    "hasContentBottom": [32],
     "setFocus": [64]
   }, [[0, "calciteInternalListItemGroupDefaultSlotChange", "handleCalciteInternalListDefaultSlotChanges"], [0, "calciteInternalListDefaultSlotChange", "handleCalciteInternalListDefaultSlotChanges"]], {
     "active": ["activeHandler"],

package/dist/components/list.js

@@ -22,7 +22,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   container: "container",
@@ -39,7 +39,7 @@ const SLOTS = {
   filterActionsEnd: "filter-actions-end",
 };
 
-const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item:last-child){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:first-of-type){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item[data-filter]){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const listItemSelector = "calcite-list-item";
 const listItemSelectorDirect = `:scope > calcite-list-item`;
@@ -91,6 +91,9 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
       const filteredItems = listItems.filter((item) => !filterText || values.includes(item.value)) || [];
       const visibleParents = new WeakSet();
       lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
+      if (filteredItems.length > 0) {
+        this.findAncestorOfFirstFilteredItem(filteredItems);
+      }
       this.filteredItems = filteredItems;
       if (emit) {
         this.calciteListFilter.emit();
@@ -206,6 +209,29 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         }
       }
     };
+    this.findAncestorOfFirstFilteredItem = (filteredItems) => {
+      var _a, _b;
+      (_a = this.ancestorOfFirstFilteredItem) === null || _a === void 0 ? void 0 : _a.removeAttribute("data-filter");
+      filteredItems.forEach((item) => {
+        item.removeAttribute("data-filter");
+      });
+      this.ancestorOfFirstFilteredItem = this.getTopLevelAncestorItemElement(filteredItems[0]);
+      filteredItems[0].setAttribute("data-filter", "0");
+      (_b = this.ancestorOfFirstFilteredItem) === null || _b === void 0 ? void 0 : _b.setAttribute("data-filter", "0");
+    };
+    this.getTopLevelAncestorItemElement = (el) => {
+      let closestParent = el.parentElement.closest("calcite-list-item");
+      while (closestParent) {
+        const closestListItemAncestor = closestParent.parentElement.closest("calcite-list-item");
+        if (closestListItemAncestor) {
+          closestParent = closestListItemAncestor;
+        }
+        else {
+          return closestParent;
+        }
+      }
+      return null;
+    };
     this.disabled = false;
     this.canPull = undefined;
     this.canPut = undefined;

package/dist/components/loadable.js

@@ -8,7 +8,7 @@ import { Build, forceUpdate } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const resolveMap = new WeakMap();
 const promiseMap = new WeakMap();

package/dist/components/locale2.js

@@ -10,7 +10,7 @@ import { c as createObserver } from './observers.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const unnecessaryDecimal = new RegExp(`\\${"."}(0+)?$`);
 const trailingZeros = new RegExp("0+$");
@@ -217,7 +217,7 @@ function addLocalizedTrailingDecimalZeros(localizedValue, value, formatter) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const defaultLocale = "en";
 const t9nLocales = [

package/dist/components/math.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);

package/dist/components/modal.js

@@ -5,13 +5,14 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { a as getSlotted, j as slotChangeHasAssignedElement, k as focusFirstTabbable, A as ensureId } from './dom.js';
+import { a as getSlotted, j as slotChangeHasAssignedElement, k as focusFirstTabbable, B as ensureId } from './dom.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
+import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
 import { d as defineCustomElement$1 } from './scrim.js';
@@ -19,7 +20,7 @@ import { d as defineCustomElement$1 } from './scrim.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   modal: "modal",
@@ -234,7 +235,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
   renderCloseButton() {
     return !this.closeButtonDisabled ? (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "button", onClick: this.handleCloseClick, title: this.messages.close,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: (el) => (this.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
+      ref: (el) => (this.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS.close, scale: getIconScale(this.scale) }))) : null;
   }
   renderStyle() {
     if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {

package/dist/components/notice.js

@@ -11,12 +11,13 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
 import { K as KindIcons } from './resources2.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
+import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const SLOTS = {
   title: "title",
@@ -106,11 +107,11 @@ const Notice = /*@__PURE__*/ proxyCustomElement(class Notice extends HTMLElement
     const { el } = this;
     const closeButton = (h("button", { "aria-label": this.messages.close, class: CSS.close, onClick: this.close,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+      ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
     const hasActionEnd = getSlotted(el, SLOTS.actionsEnd);
     return (h("div", { class: CSS.container,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setTransitionEl }, this.requestedIcon ? (h("div", { class: CSS.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: CSS.content }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), hasActionEnd ? (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd }))) : null, this.closable ? closeButton : null));
+      ref: this.setTransitionEl }, this.requestedIcon ? (h("div", { class: CSS.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }))) : null, h("div", { class: CSS.content }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), hasActionEnd ? (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd }))) : null, this.closable ? closeButton : null));
   }
   //--------------------------------------------------------------------------
   //

package/dist/components/observers.js

@@ -8,7 +8,7 @@ import { Build } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * This utility ensures observers are created only for browser contexts.

package/dist/components/openCloseComponent.js

@@ -8,7 +8,7 @@ import { readTask } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 function isOpen(component) {
   return "opened" in component ? component.opened : component.open;

package/dist/components/pagination.js

@@ -8,30 +8,51 @@ import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFoc
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { c as createObserver } from './observers.js';
-import { g as getBreakpoints } from './responsive.js';
+import { CoreBreakpointWidthDefaultMd, CoreBreakpointWidthDefaultSm, CoreBreakpointWidthDefaultXs, CoreBreakpointWidthDefaultXxs, CoreBreakpointWidthDefaultLg } from '@esri/calcite-design-tokens/dist/es6/calcite-headless';
+import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   page: "page",
-  selected: "is-selected",
-  previous: "previous",
-  next: "next",
-  disabled: "is-disabled",
+  selected: "selected",
+  chevron: "chevron",
+  disabled: "disabled",
   ellipsis: "ellipsis",
-  ellipsisStart: "ellipsis--start",
-  ellipsisEnd: "ellipsis--end",
 };
 const ICONS = {
-  next: "chevronRight",
-  previous: "chevronLeft",
+  next: "chevron-right",
+  previous: "chevron-left",
+  first: "chevron-start",
+  last: "chevron-end",
 };
 
-const paginationCss = ":host{display:flex;writing-mode:horizontal-tb}:host([scale=s]) .previous,:host([scale=s]) .next,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}:host([scale=m]) .previous,:host([scale=m]) .next,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}:host([scale=l]) .previous,:host([scale=l]) .next,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}:host([scale=l]) .previous,:host([scale=l]) .next{padding-inline:0.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:0.75rem}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.previous,.next,.page,.ellipsis{margin:0px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity:0;background-color:transparent;padding:0px;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3)}.previous,.next,.page{cursor:pointer;border-block:2px solid transparent}.previous:hover,.next:hover,.page:hover{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-ui-border-2)}.page.is-selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}.previous:hover,.next:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}.previous:active,.next:active{background-color:var(--calcite-ui-foreground-3)}.previous.is-disabled,.next.is-disabled{pointer-events:none;background-color:transparent}.previous.is-disabled>calcite-icon,.next.is-disabled>calcite-icon{opacity:var(--calcite-ui-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.0
+ */
+/**
+ * A breakpoints lookup object.
+ */
+const breakpoints = {
+  width: {
+    large: cssLengthToNumber(CoreBreakpointWidthDefaultLg),
+    medium: cssLengthToNumber(CoreBreakpointWidthDefaultMd),
+    small: cssLengthToNumber(CoreBreakpointWidthDefaultSm),
+    xsmall: cssLengthToNumber(CoreBreakpointWidthDefaultXs),
+    xxsmall: cssLengthToNumber(CoreBreakpointWidthDefaultXxs),
+  },
+};
+function cssLengthToNumber(length) {
+  return parseInt(length);
+}
+
+const paginationCss = ":host{display:flex;writing-mode:horizontal-tb}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:0.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:0.75rem}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.chevron,.page,.ellipsis{margin:0px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity:0;background-color:transparent;padding:0px;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3)}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-ui-border-2)}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}.chevron:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}.chevron:active{background-color:var(--calcite-ui-foreground-3)}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-ui-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const firstAndLastPageCount = 2;
 const ellipsisCount = 2;
@@ -40,6 +61,7 @@ const maxItemBreakpoints = {
   medium: 9,
   small: 7,
   xsmall: 5,
+  xxsmall: 1,
 };
 const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {
   constructor() {
@@ -49,6 +71,14 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 6);
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
     this.resizeHandler = ({ contentRect: { width } }) => this.setMaxItemsToBreakpoint(width);
+    this.firstClicked = () => {
+      this.startItem = 1;
+      this.emitUpdate();
+    };
+    this.lastClicked = () => {
+      this.startItem = this.lastStartItem;
+      this.emitUpdate();
+    };
     this.previousClicked = async () => {
       await this.previousPage();
       this.emitUpdate();
@@ -72,13 +102,18 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     this.totalItems = 0;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
-    this.maxItems = maxItemBreakpoints.xsmall;
+    this.maxItems = maxItemBreakpoints.xxsmall;
     this.totalPages = undefined;
+    this.lastStartItem = undefined;
+    this.isXXSmall = undefined;
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
   handleTotalPages() {
+    if (this.pageSize < 1) {
+      this.pageSize = 1;
+    }
     this.totalPages = this.totalItems / this.pageSize;
   }
   effectiveLocaleChange() {
@@ -91,6 +126,14 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
       useGrouping: this.groupSeparator,
     };
   }
+  handleLastStartItemChange() {
+    const { totalItems, pageSize, totalPages } = this;
+    this.lastStartItem =
+      (totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize) + 1;
+  }
+  handleIsXXSmall() {
+    this.isXXSmall = this.maxItems === maxItemBreakpoints.xxsmall;
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -103,10 +146,11 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
   }
   async componentWillLoad() {
-    const [, breakpoints] = await Promise.all([setUpMessages(this), getBreakpoints()]);
-    this.breakpoints = breakpoints;
+    await setUpMessages(this);
     setUpLoadableComponent(this);
     this.handleTotalPages();
+    this.handleLastStartItemChange();
+    this.handleIsXXSmall();
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -130,7 +174,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
   }
   /** Go to the next page of results. */
   async nextPage() {
-    this.startItem = Math.min(this.getLastStart(), this.startItem + this.pageSize);
+    this.startItem = Math.min(this.lastStartItem, this.startItem + this.pageSize);
   }
   /** Go to the previous page of results. */
   async previousPage() {
@@ -142,7 +186,6 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
   //
   // --------------------------------------------------------------------------
   setMaxItemsToBreakpoint(width) {
-    const { breakpoints } = this;
     if (!breakpoints || !width) {
       return;
     }
@@ -158,12 +201,11 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
       this.maxItems = maxItemBreakpoints.small;
       return;
     }
-    this.maxItems = maxItemBreakpoints.xsmall;
-  }
-  getLastStart() {
-    const { totalItems, pageSize, totalPages } = this;
-    const lastStart = totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize;
-    return lastStart + 1;
+    if (width >= breakpoints.width.xxsmall) {
+      this.maxItems = maxItemBreakpoints.xsmall;
+      return;
+    }
+    this.maxItems = maxItemBreakpoints.xxsmall;
   }
   showStartEllipsis() {
     return (this.totalPages > this.maxItems &&
@@ -184,19 +226,18 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
   //
   //--------------------------------------------------------------------------
   renderEllipsis(type) {
-    return (h("span", { class: {
-        [CSS.ellipsis]: true,
-        [CSS.ellipsisStart]: type === "start",
-        [CSS.ellipsisEnd]: type === "end",
-      }, key: type }, "\u2026"));
+    return (h("span", { class: CSS.ellipsis, "data-test-ellipsis": type, key: type }, "\u2026"));
   }
   renderItems() {
-    const { totalItems, pageSize, startItem, maxItems, totalPages } = this;
+    const { totalItems, pageSize, startItem, maxItems, totalPages, lastStartItem, isXXSmall } = this;
     const items = [];
+    if (isXXSmall) {
+      items.push(this.renderPage(startItem));
+      return items;
+    }
     const renderFirstPage = totalItems > pageSize;
     const renderStartEllipsis = this.showStartEllipsis();
     const renderEndEllipsis = this.showEndEllipsis();
-    const lastStart = this.getLastStart();
     if (renderFirstPage) {
       items.push(this.renderPage(1));
     }
@@ -212,7 +253,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     // if we don't need ellipses render the whole set
     if (totalPages - 1 <= remainingItems) {
       nextStart = 1 + pageSize;
-      end = lastStart - pageSize;
+      end = lastStartItem - pageSize;
     }
     else {
       // if we're within max pages of page 1
@@ -223,8 +264,8 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
       else {
         // if we're within max pages of last page
         if (startItem + remainingItems * pageSize >= totalItems) {
-          nextStart = lastStart - remainingItems * pageSize;
-          end = lastStart - pageSize;
+          nextStart = lastStartItem - remainingItems * pageSize;
+          end = lastStartItem - pageSize;
         }
         else {
           // if we're within the center pages
@@ -240,7 +281,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     if (renderEndEllipsis) {
       items.push(this.renderEllipsis("end"));
     }
-    items.push(this.renderPage(lastStart));
+    items.push(this.renderPage(lastStartItem));
     return items;
   }
   renderPage(start) {
@@ -258,27 +299,51 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         [CSS.selected]: selected,
       }, onClick: this.handlePageClick, value: start }, displayedPage));
   }
+  renderPreviousChevron() {
+    const { pageSize, startItem, messages } = this;
+    const disabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
+    return (h("button", { "aria-label": messages.previous, class: {
+        [CSS.chevron]: true,
+        [CSS.disabled]: disabled,
+      }, "data-test-chevron": "previous", disabled: disabled, key: "previous", onClick: this.previousClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.previous, scale: getIconScale(this.scale) })));
+  }
+  renderNextChevron() {
+    const { totalItems, pageSize, startItem, messages } = this;
+    const disabled = pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
+    return (h("button", { "aria-label": messages.next, class: {
+        [CSS.chevron]: true,
+        [CSS.disabled]: disabled,
+      }, "data-test-chevron": "next", disabled: disabled, key: "next-button", onClick: this.nextClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.next, scale: getIconScale(this.scale) })));
+  }
+  renderFirstChevron() {
+    const { messages, startItem, isXXSmall } = this;
+    const disabled = startItem === 1;
+    return isXXSmall ? (h("button", { "aria-label": messages.first, class: {
+        [CSS.chevron]: true,
+        [CSS.disabled]: disabled,
+      }, disabled: disabled, key: "first-button", onClick: this.firstClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.first, scale: getIconScale(this.scale) }))) : null;
+  }
+  renderLastChevron() {
+    const { messages, startItem, isXXSmall, lastStartItem } = this;
+    const disabled = startItem === lastStartItem;
+    return isXXSmall ? (h("button", { "aria-label": messages.last, class: {
+        [CSS.chevron]: true,
+        [CSS.disabled]: disabled,
+      }, disabled: disabled, key: "last-button", onClick: this.lastClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.last, scale: getIconScale(this.scale) }))) : null;
+  }
   render() {
-    const { totalItems, pageSize, startItem, messages, scale } = this;
-    const prevDisabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
-    const nextDisabled = pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
-    const iconScale = scale === "l" ? "m" : "s";
-    return (h(Fragment, null, h("button", { "aria-label": messages.previous, class: {
-        [CSS.previous]: true,
-        [CSS.disabled]: prevDisabled,
-      }, disabled: prevDisabled, onClick: this.previousClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.previous, scale: iconScale })), this.renderItems(), h("button", { "aria-label": messages.next, class: {
-        [CSS.next]: true,
-        [CSS.disabled]: nextDisabled,
-      }, disabled: nextDisabled, onClick: this.nextClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.next, scale: iconScale }))));
+    return (h(Fragment, null, this.renderFirstChevron(), this.renderPreviousChevron(), this.renderItems(), this.renderNextChevron(), this.renderLastChevron()));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
     "messageOverrides": ["onMessagesChange"],
-    "pageSize": ["handleTotalPages"],
-    "totalItems": ["handleTotalPages"],
-    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"]
+    "totalItems": ["handleTotalPages", "handleLastStartItemChange"],
+    "pageSize": ["handleTotalPages", "handleLastStartItemChange"],
+    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"],
+    "totalPages": ["handleLastStartItemChange"],
+    "maxItems": ["handleIsXXSmall"]
   }; }
   static get style() { return paginationCss; }
 }, [17, "calcite-pagination", {
@@ -286,7 +351,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     "messages": [1040],
     "messageOverrides": [1040],
     "numberingSystem": [1, "numbering-system"],
-    "pageSize": [514, "page-size"],
+    "pageSize": [1538, "page-size"],
     "scale": [513],
     "startItem": [1538, "start-item"],
     "totalItems": [514, "total-items"],
@@ -294,14 +359,18 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     "effectiveLocale": [32],
     "maxItems": [32],
     "totalPages": [32],
+    "lastStartItem": [32],
+    "isXXSmall": [32],
     "setFocus": [64],
     "nextPage": [64],
     "previousPage": [64]
   }, undefined, {
     "messageOverrides": ["onMessagesChange"],
-    "pageSize": ["handleTotalPages"],
-    "totalItems": ["handleTotalPages"],
-    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"]
+    "totalItems": ["handleTotalPages", "handleLastStartItemChange"],
+    "pageSize": ["handleTotalPages", "handleLastStartItemChange"],
+    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"],
+    "totalPages": ["handleLastStartItemChange"],
+    "maxItems": ["handleIsXXSmall"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {