@esri/calcite-components 1.9.0-next.0 → 1.9.0-next.2

package/hydrate/index.js

@@ -1,7 +1,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-next.0
+ * v1.9.0-next.2
  */
 'use strict';
 
@@ -8019,6 +8019,7 @@ const actionCss = "/*!@:host*/.sc-calcite-action-h{box-sizing:border-box;backgro
 
 /**
  * @slot - A slot for adding a `calcite-icon`.
+ * @slot tooltip - A slot for adding a `calcite-tooltip`.
  */
 class Action {
   constructor(hostRef) {
@@ -9449,7 +9450,7 @@ const SLOTS$x = {
   menuActions: "menu-actions",
   menuTooltip: "menu-tooltip",
 };
-const ICONS$j = {
+const ICONS$k = {
   menu: "ellipsis",
 };
 const CSS$1a = {
@@ -9464,7 +9465,7 @@ const SLOTS$w = {
   tooltip: "tooltip",
   trigger: "trigger",
 };
-const ICONS$i = {
+const ICONS$j = {
   menu: "ellipsis",
 };
 
@@ -9518,7 +9519,7 @@ const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
   });
 };
 
-const ICONS$h = {
+const ICONS$i = {
   chevronsLeft: "chevrons-left",
   chevronsRight: "chevrons-right",
 };
@@ -9543,7 +9544,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref, }) => {
 const ExpandToggle = ({ expanded, expandText, collapseText, toggle, el, position, tooltip, ref, scale, }) => {
   const rtl = getElementDir(el) === "rtl";
   const text = expanded ? collapseText : expandText;
-  const icons = [ICONS$h.chevronsLeft, ICONS$h.chevronsRight];
+  const icons = [ICONS$i.chevronsLeft, ICONS$i.chevronsRight];
   if (rtl) {
     icons.reverse();
   }
@@ -9884,7 +9885,7 @@ class ActionGroup {
   // --------------------------------------------------------------------------
   renderMenu() {
     const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } = this;
-    return (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$j.menu, scale: scale, slot: SLOTS$w.trigger, text: messages.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$x.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), hAsync("slot", { name: SLOTS$x.menuTooltip, slot: SLOTS$w.tooltip })));
+    return (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$k.menu, scale: scale, slot: SLOTS$w.trigger, text: messages.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$x.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), hAsync("slot", { name: SLOTS$x.menuTooltip, slot: SLOTS$w.tooltip })));
   }
   render() {
     return (hAsync("div", { "aria-label": this.label, class: CSS$1a.container, role: "group" }, hAsync("slot", null), this.renderMenu()));
@@ -10171,7 +10172,7 @@ class ActionMenu {
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;
-    const menuButtonSlot = (hAsync("slot", { name: SLOTS$w.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$19.defaultTrigger, icon: ICONS$i.menu, scale: scale, text: label, textEnabled: expanded,
+    const menuButtonSlot = (hAsync("slot", { name: SLOTS$w.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$19.defaultTrigger, icon: ICONS$j.menu, scale: scale, text: label, textEnabled: expanded,
       // 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.setDefaultMenuButtonEl })));
     return menuButtonSlot;
@@ -11136,7 +11137,7 @@ const SLOTS$s = {
   control: "control",
   headerMenuActions: "header-menu-actions",
 };
-const ICONS$g = {
+const ICONS$h = {
   opened: "chevron-up",
   closed: "chevron-down",
   valid: "check-circle",
@@ -11241,7 +11242,7 @@ class Block {
         [CSS$15.statusIcon]: true,
         [CSS$15.valid]: status == "valid",
         [CSS$15.invalid]: status == "invalid",
-      }, icon: ICONS$g[status], scale: "s" }))) : hasSlottedIcon ? (hAsync("div", { class: CSS$15.icon, key: "icon-slot" }, hAsync("slot", { key: "icon-slot", name: SLOTS$s.icon }))) : null;
+      }, icon: ICONS$h[status], scale: "s" }))) : hasSlottedIcon ? (hAsync("div", { class: CSS$15.icon, key: "icon-slot" }, hAsync("slot", { key: "icon-slot", name: SLOTS$s.icon }))) : null;
   }
   renderTitle() {
     const { heading, headingLevel, description } = this;
@@ -11253,7 +11254,7 @@ class Block {
     const headerContent = (hAsync("header", { class: CSS$15.header, id: IDS$1.header }, this.renderIcon(), this.renderTitle()));
     const hasControl = !!getSlotted(el, SLOTS$s.control);
     const hasMenuActions = !!getSlotted(el, SLOTS$s.headerMenuActions);
-    const collapseIcon = open ? ICONS$g.opened : ICONS$g.closed;
+    const collapseIcon = open ? ICONS$h.opened : ICONS$h.closed;
     const headerNode = (hAsync("div", { class: CSS$15.headerContainer }, this.dragHandle ? hAsync("calcite-handle", null) : null, collapsible ? (hAsync("button", { "aria-controls": IDS$1.content, "aria-describedby": IDS$1.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS$15.toggle, id: IDS$1.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (hAsync("calcite-icon", { "aria-hidden": "true", class: CSS$15.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), hasControl ? (hAsync("div", { class: CSS$15.controlContainer }, hAsync("slot", { name: SLOTS$s.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: messages.options }, hAsync("slot", { name: SLOTS$s.headerMenuActions }))) : null));
     return (hAsync(Host, null, hAsync("article", { "aria-busy": toAriaBoolean(loading), class: {
         [CSS$15.container]: true,
@@ -11309,7 +11310,7 @@ const CSS$14 = {
   toggleSwitchText: "toggle--switch__text",
   valid: "valid",
 };
-const ICONS$f = {
+const ICONS$g = {
   menuOpen: "chevron-down",
   menuClosedLeft: "chevron-left",
   menuClosedRight: "chevron-right",
@@ -11397,7 +11398,7 @@ class BlockSection {
   // --------------------------------------------------------------------------
   renderStatusIcon() {
     const { status } = this;
-    const statusIcon = ICONS$f[status] ?? false;
+    const statusIcon = ICONS$g[status] ?? false;
     const statusIconClasses = {
       [CSS$14.statusIcon]: true,
       [CSS$14.valid]: status == "valid",
@@ -11409,10 +11410,10 @@ class BlockSection {
     const { el, messages, open, text, toggleDisplay } = this;
     const dir = getElementDir(el);
     const arrowIcon = open
-      ? ICONS$f.menuOpen
+      ? ICONS$g.menuOpen
       : dir === "rtl"
-        ? ICONS$f.menuClosedLeft
-        : ICONS$f.menuClosedRight;
+        ? ICONS$g.menuClosedLeft
+        : ICONS$g.menuClosedRight;
     const toggleLabel = open ? messages.collapse : messages.expand;
     const headerNode = toggleDisplay === "switch" ? (hAsync("div", { class: {
         [CSS$14.toggleSwitchContainer]: true,
@@ -12620,7 +12621,7 @@ const SLOTS$r = {
   navSecondary: "navigation-secondary",
   navTertiary: "navigation-tertiary",
 };
-const ICONS$e = {
+const ICONS$f = {
   hamburger: "hamburger",
 };
 
@@ -12735,7 +12736,7 @@ class CalciteNavigation {
   //
   //--------------------------------------------------------------------------
   renderMenuAction() {
-    return (hAsync("slot", { name: SLOTS$r.navigationAction, onSlotchange: this.handleMenuActionSlotChange }, this.navigationAction && (hAsync("calcite-action", { icon: ICONS$e.hamburger, onClick: this.actionClickHandler, text: this.label,
+    return (hAsync("slot", { name: SLOTS$r.navigationAction, onSlotchange: this.handleMenuActionSlotChange }, this.navigationAction && (hAsync("calcite-action", { icon: ICONS$f.hamburger, onClick: this.actionClickHandler, text: this.label,
       // 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.navigationActionEl = el) }))));
   }
@@ -13226,7 +13227,7 @@ const CSS$Z = {
 const SLOTS$p = {
   image: "image",
 };
-const ICONS$d = {
+const ICONS$e = {
   close: "x",
   unchecked: "circle",
   checkedSingle: "circle-f",
@@ -13380,11 +13381,11 @@ class Chip {
   }
   renderSelectionIcon() {
     const icon = this.selectionMode === "multiple" && this.selected
-      ? ICONS$d.checked
+      ? ICONS$e.checked
       : this.selectionMode === "multiple"
-        ? ICONS$d.unchecked
+        ? ICONS$e.unchecked
         : this.selected
-          ? ICONS$d.checkedSingle
+          ? ICONS$e.checkedSingle
           : undefined;
     return (hAsync("div", { class: {
         [CSS$Z.selectIcon]: true,
@@ -13394,7 +13395,7 @@ class Chip {
   renderCloseButton() {
     return (hAsync("button", { "aria-label": this.messages.dismissLabel, class: CSS$Z.close, onClick: this.close, onKeyDown: this.closeButtonKeyDownHandler, tabIndex: this.disabled ? -1 : 0,
       // 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) }, hAsync("calcite-icon", { icon: ICONS$d.close, scale: this.scale === "l" ? "m" : "s" })));
+      ref: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$e.close, scale: this.scale === "l" ? "m" : "s" })));
   }
   renderIcon() {
     return (hAsync("calcite-icon", { class: CSS$Z.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: this.scale === "l" ? "m" : "s" }));
@@ -21473,8 +21474,7 @@ class Dropdown {
       connectFloatingUI(this, this.referenceEl, this.floatingEl);
     };
     this.keyDownHandler = (event) => {
-      const target = event.target;
-      if (target !== this.referenceEl) {
+      if (!event.composedPath().includes(this.referenceEl)) {
         return;
       }
       const { defaultPrevented, key } = event;
@@ -22074,7 +22074,7 @@ class DropdownItem {
 const CSS$P = {
   button: "button",
 };
-const ICONS$c = {
+const ICONS$d = {
   plus: "plus",
 };
 
@@ -22086,7 +22086,7 @@ class Fab {
     this.appearance = "solid";
     this.kind = "brand";
     this.disabled = false;
-    this.icon = ICONS$c.plus;
+    this.icon = ICONS$d.plus;
     this.iconFlipRtl = false;
     this.label = undefined;
     this.loading = false;
@@ -22166,7 +22166,7 @@ const CSS$O = {
   container: "container",
   searchIcon: "search-icon",
 };
-const ICONS$b = {
+const ICONS$c = {
   search: "search",
   close: "x",
 };
@@ -22291,7 +22291,7 @@ class Filter {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, scale } = this;
-    return (hAsync(Fragment, null, hAsync("div", { class: CSS$O.container }, hAsync("label", null, hAsync("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS$b.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
+    return (hAsync(Fragment, null, hAsync("div", { class: CSS$O.container }, hAsync("label", null, hAsync("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS$c.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
       // 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.textInput = el;
@@ -22495,7 +22495,7 @@ const CSS$M = {
   fabContainer: "fab-container",
   footer: "footer",
 };
-const ICONS$a = {
+const ICONS$b = {
   close: "x",
   menu: "ellipsis",
   backLeft: "chevron-left",
@@ -22515,7 +22515,7 @@ const SLOTS$n = {
 const CSS$L = {
   backButton: "back-button",
 };
-const ICONS$9 = {
+const ICONS$a = {
   backLeft: "chevron-left",
   backRight: "chevron-right",
 };
@@ -22659,7 +22659,7 @@ class FlowItem {
     const rtl = getElementDir(el) === "rtl";
     const { showBackButton, backButtonClick, messages } = this;
     const label = messages.back;
-    const icon = rtl ? ICONS$9.backRight : ICONS$9.backLeft;
+    const icon = rtl ? ICONS$a.backRight : ICONS$a.backLeft;
     return showBackButton ? (hAsync("calcite-action", { "aria-label": label, class: CSS$L.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, scale: "s", slot: "header-actions-start", text: label, title: label,
       // 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.setBackRef })) : null;
@@ -22928,7 +22928,7 @@ const CSS$K = {
   handle: "handle",
   handleActivated: "handle--activated",
 };
-const ICONS$8 = {
+const ICONS$9 = {
   drag: "drag",
 };
 
@@ -23051,7 +23051,7 @@ class Handle {
       // 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.handleButton = el;
-      } }, hAsync("calcite-icon", { icon: ICONS$8.drag, scale: "s" })));
+      } }, hAsync("calcite-icon", { icon: ICONS$9.drag, scale: "s" })));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -29319,7 +29319,7 @@ const SLOTS$i = {
 };
 // Set to zero to extend until the end of the table section.
 const MAX_COLUMNS = 0;
-const ICONS$7 = {
+const ICONS$8 = {
   selectedMultiple: "check-circle-f",
   selectedSingle: "circle-f",
   unselected: "blank",
@@ -33212,9 +33212,9 @@ class ListItem {
     }
     return (hAsync("td", { class: CSS$B.selectionContainer, key: "selection-container", onClick: this.itemClicked }, hAsync("calcite-icon", { icon: selected
         ? selectionMode === "multiple"
-          ? ICONS$7.selectedMultiple
-          : ICONS$7.selectedSingle
-        : ICONS$7.unselected, scale: "s" })));
+          ? ICONS$8.selectedMultiple
+          : ICONS$8.selectedSingle
+        : ICONS$8.unselected, scale: "s" })));
   }
   renderDragHandle() {
     return this.dragHandle ? (hAsync("td", { class: CSS$B.dragContainer, key: "drag-handle-container" }, hAsync("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
@@ -33222,7 +33222,7 @@ class ListItem {
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = getElementDir(el);
-    return openable ? (hAsync("td", { class: CSS$B.openContainer, key: "open-container", onClick: this.toggleOpen }, hAsync("calcite-icon", { icon: open ? ICONS$7.open : dir === "rtl" ? ICONS$7.closedRTL : ICONS$7.closedLTR, scale: "s" }))) : parentListEl?.openable ? (hAsync("td", { class: CSS$B.openContainer, key: "open-container", onClick: this.itemClicked }, hAsync("calcite-icon", { icon: ICONS$7.blank, scale: "s" }))) : null;
+    return openable ? (hAsync("td", { class: CSS$B.openContainer, key: "open-container", onClick: this.toggleOpen }, hAsync("calcite-icon", { icon: open ? ICONS$8.open : dir === "rtl" ? ICONS$8.closedRTL : ICONS$8.closedLTR, scale: "s" }))) : parentListEl?.openable ? (hAsync("td", { class: CSS$B.openContainer, key: "open-container", onClick: this.itemClicked }, hAsync("calcite-icon", { icon: ICONS$8.blank, scale: "s" }))) : null;
   }
   renderActionsStart() {
     const { label, hasActionsStart } = this;
@@ -33234,7 +33234,7 @@ class ListItem {
     const { label, hasActionsEnd, closable, messages } = this;
     return (hAsync("td", { "aria-label": label, class: CSS$B.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
       // 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.actionsEndEl = el) }, hAsync("slot", { name: SLOTS$i.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (hAsync("calcite-action", { appearance: "transparent", icon: ICONS$7.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
+      ref: (el) => (this.actionsEndEl = el) }, hAsync("slot", { name: SLOTS$i.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (hAsync("calcite-action", { appearance: "transparent", icon: ICONS$8.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
   }
   renderContentStart() {
     const { hasContentStart } = this;
@@ -33888,7 +33888,7 @@ const CSS$v = {
   closingIdle: "modal--closing-idle",
   closingActive: "modal--closing-active",
 };
-const ICONS$6 = {
+const ICONS$7 = {
   close: "x",
 };
 const SLOTS$f = {
@@ -34080,7 +34080,7 @@ class Modal {
   renderCloseButton() {
     return !this.closeButtonDisabled ? (hAsync("button", { "aria-label": this.messages.close, class: CSS$v.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) }, hAsync("calcite-icon", { icon: ICONS$6.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
+      ref: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$7.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {
@@ -34541,36 +34541,90 @@ const CSS$t = {
   ellipsisStart: "ellipsis--start",
   ellipsisEnd: "ellipsis--end",
 };
+const ICONS$6 = {
+  next: "chevronRight",
+  previous: "chevronLeft",
+};
+
+let getBreakpointsPromise;
+function breakpointTokenToNumericalValue(style, tokenName) {
+  return parseInt(style.getPropertyValue(tokenName));
+}
+/**
+ * This util will return a breakpoints lookup object.
+ *
+ * Note that the breakpoints will be evaluated at the root and cached for reuse.
+ *
+ * @returns {Promise<Breakpoints>} The Breakpoints object.
+ */
+async function getBreakpoints() {
+  if (getBreakpointsPromise) {
+    return getBreakpointsPromise;
+  }
+  getBreakpointsPromise = new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      const rootStyles = getComputedStyle(document.body);
+      resolve({
+        width: {
+          large: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-lg"),
+          medium: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-md"),
+          small: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-sm"),
+          xsmall: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-xs"),
+        },
+      });
+    });
+  });
+  return getBreakpointsPromise;
+}
 
-const paginationCss = "/*!@:host([scale=s])*/[scale=s].sc-calcite-pagination-h{--calcite-pagination-spacing-internal:0.25rem 0.5rem}/*!@:host([scale=s]) .previous, :host([scale=s]) .next, :host([scale=s]) .page*/[scale=s].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .page.sc-calcite-pagination{block-size:1.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=s]) .previous,\n:host([scale=s]) .next*/[scale=s].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .next.sc-calcite-pagination{padding-inline:0.25rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-pagination-h{--calcite-pagination-spacing-internal:0.5rem 0.75rem}/*!@:host([scale=m]) .previous, :host([scale=m]) .next, :host([scale=m]) .page*/[scale=m].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .page.sc-calcite-pagination{block-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=m]) .previous,\n:host([scale=m]) .next*/[scale=m].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .next.sc-calcite-pagination{padding-inline:0.5rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-pagination-h{--calcite-pagination-spacing-internal:0.75rem 1rem}/*!@:host([scale=l]) .previous, :host([scale=l]) .next, :host([scale=l]) .page*/[scale=l].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .page.sc-calcite-pagination{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l]) .previous,\n:host([scale=l]) .next*/[scale=l].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .next.sc-calcite-pagination{padding-inline:1rem}/*!@:host*/.sc-calcite-pagination-h{display:flex;writing-mode:horizontal-tb}/*!@:host button*/.sc-calcite-pagination-h button.sc-calcite-pagination{outline-color:transparent}/*!@:host button:focus*/.sc-calcite-pagination-h button.sc-calcite-pagination: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,\n.next,\n.page*/.previous.sc-calcite-pagination,.next.sc-calcite-pagination,.page.sc-calcite-pagination{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;border-style:none;--tw-border-opacity:0;background-color:transparent;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3);border-block:2px solid transparent}/*!@.previous:hover,\n.next:hover,\n.page:hover*/.previous.sc-calcite-pagination:hover,.next.sc-calcite-pagination:hover,.page.sc-calcite-pagination:hover{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}/*!@.page:hover*/.page.sc-calcite-pagination:hover{border-block-end-color:var(--calcite-ui-border-2)}/*!@.page.is-selected*/.page.is-selected.sc-calcite-pagination{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}/*!@.previous:hover,\n.next:hover*/.previous.sc-calcite-pagination:hover,.next.sc-calcite-pagination:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}/*!@.previous:active,\n.next:active*/.previous.sc-calcite-pagination:active,.next.sc-calcite-pagination:active{background-color:var(--calcite-ui-foreground-3)}/*!@.previous.is-disabled,\n.next.is-disabled*/.previous.is-disabled.sc-calcite-pagination,.next.is-disabled.sc-calcite-pagination{pointer-events:none;background-color:transparent}/*!@.previous.is-disabled > calcite-icon,\n.next.is-disabled > calcite-icon*/.previous.is-disabled.sc-calcite-pagination>calcite-icon.sc-calcite-pagination,.next.is-disabled.sc-calcite-pagination>calcite-icon.sc-calcite-pagination{opacity:var(--calcite-ui-opacity-disabled)}/*!@.next*/.next.sc-calcite-pagination{margin-inline-end:0px}/*!@.page,\n.ellipsis*/.page.sc-calcite-pagination,.ellipsis.sc-calcite-pagination{padding:var(--calcite-pagination-spacing-internal)}/*!@.ellipsis*/.ellipsis.sc-calcite-pagination{display:flex;align-items:flex-end;color:var(--calcite-ui-text-3)}/*!@:host([hidden])*/[hidden].sc-calcite-pagination-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-pagination{display:none}";
+const paginationCss = "/*!@:host*/.sc-calcite-pagination-h{display:flex;writing-mode:horizontal-tb}/*!@:host([scale=s]) .previous, :host([scale=s]) .next, :host([scale=s]) .page, :host([scale=s]) .ellipsis*/[scale=s].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .page.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .ellipsis.sc-calcite-pagination{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*/[scale=m].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .page.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .ellipsis.sc-calcite-pagination{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*/[scale=l].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .page.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .ellipsis.sc-calcite-pagination{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*/[scale=l].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .next.sc-calcite-pagination{padding-inline:0.625rem}/*!@:host([scale=l]) .page, :host([scale=l]) .ellipsis*/[scale=l].sc-calcite-pagination-h .page.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .ellipsis.sc-calcite-pagination{padding-inline:0.75rem}/*!@:host button*/.sc-calcite-pagination-h button.sc-calcite-pagination{outline-color:transparent}/*!@:host button:focus*/.sc-calcite-pagination-h button.sc-calcite-pagination: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,\n.next,\n.page,\n.ellipsis*/.previous.sc-calcite-pagination,.next.sc-calcite-pagination,.page.sc-calcite-pagination,.ellipsis.sc-calcite-pagination{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,\n.next,\n.page*/.previous.sc-calcite-pagination,.next.sc-calcite-pagination,.page.sc-calcite-pagination{cursor:pointer;border-block:2px solid transparent}/*!@.previous:hover,\n.next:hover,\n.page:hover*/.previous.sc-calcite-pagination:hover,.next.sc-calcite-pagination:hover,.page.sc-calcite-pagination:hover{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}/*!@.page:hover*/.page.sc-calcite-pagination:hover{border-block-end-color:var(--calcite-ui-border-2)}/*!@.page.is-selected*/.page.is-selected.sc-calcite-pagination{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}/*!@.previous:hover,\n.next:hover*/.previous.sc-calcite-pagination:hover,.next.sc-calcite-pagination:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}/*!@.previous:active,\n.next:active*/.previous.sc-calcite-pagination:active,.next.sc-calcite-pagination:active{background-color:var(--calcite-ui-foreground-3)}/*!@.previous.is-disabled,\n.next.is-disabled*/.previous.is-disabled.sc-calcite-pagination,.next.is-disabled.sc-calcite-pagination{pointer-events:none;background-color:transparent}/*!@.previous.is-disabled > calcite-icon,\n.next.is-disabled > calcite-icon*/.previous.is-disabled.sc-calcite-pagination>calcite-icon.sc-calcite-pagination,.next.is-disabled.sc-calcite-pagination>calcite-icon.sc-calcite-pagination{opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([hidden])*/[hidden].sc-calcite-pagination-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-pagination{display:none}";
 
-const maxPagesDisplayed = 5;
+const firstAndLastPageCount = 2;
+const ellipsisCount = 2;
+const maxItemBreakpoints = {
+  large: 11,
+  medium: 9,
+  small: 7,
+  xsmall: 5,
+};
 class Pagination {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 6);
-    this.previousClicked = () => {
-      this.previousPage().then();
+    this.resizeObserver = createObserver();
+    this.resizeHandler = ({ contentRect: { width } }) => this.setMaxItemsToBreakpoint(width);
+    this.previousClicked = async () => {
+      await this.previousPage();
       this.emitUpdate();
     };
-    this.nextClicked = () => {
-      this.nextPage();
+    this.nextClicked = async () => {
+      await this.nextPage();
+      this.emitUpdate();
+    };
+    this.handlePageClick = (event) => {
+      const target = event.target;
+      this.startItem = parseInt(target.value, 10);
       this.emitUpdate();
     };
     this.groupSeparator = false;
+    this.messages = undefined;
     this.messageOverrides = undefined;
-    this.pageSize = 20;
     this.numberingSystem = undefined;
+    this.pageSize = 20;
+    this.scale = "m";
     this.startItem = 1;
     this.totalItems = 0;
-    this.scale = "m";
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
-    this.messages = undefined;
+    this.maxItems = maxItemBreakpoints.xsmall;
+    this.totalPages = undefined;
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleTotalPages() {
+    this.totalPages = this.totalItems / this.pageSize;
+  }
   effectiveLocaleChange() {
     updateMessages(this);
   }
@@ -34589,17 +34643,22 @@ class Pagination {
   connectedCallback() {
     connectLocalized(this);
     connectMessages(this);
+    this.resizeObserver?.observe(this.el);
   }
   async componentWillLoad() {
-    await setUpMessages(this);
+    const [, breakpoints] = await Promise.all([setUpMessages(this), getBreakpoints()]);
+    this.breakpoints = breakpoints;
     setUpLoadableComponent(this);
+    this.handleTotalPages();
   }
   componentDidLoad() {
     setComponentLoaded(this);
+    this.setMaxItemsToBreakpoint(this.el.clientWidth);
   }
   disconnectedCallback() {
     disconnectLocalized(this);
     disconnectMessages(this);
+    this.resizeObserver?.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -34624,18 +34683,39 @@ class Pagination {
   //  Private Methods
   //
   // --------------------------------------------------------------------------
+  setMaxItemsToBreakpoint(width) {
+    const { breakpoints } = this;
+    if (!breakpoints || !width) {
+      return;
+    }
+    if (width >= breakpoints.width.medium) {
+      this.maxItems = maxItemBreakpoints.large;
+      return;
+    }
+    if (width >= breakpoints.width.small) {
+      this.maxItems = maxItemBreakpoints.medium;
+      return;
+    }
+    if (width >= breakpoints.width.xsmall) {
+      this.maxItems = maxItemBreakpoints.small;
+      return;
+    }
+    this.maxItems = maxItemBreakpoints.xsmall;
+  }
   getLastStart() {
-    const { totalItems, pageSize } = this;
-    const lastStart = totalItems % pageSize === 0
-      ? totalItems - pageSize
-      : Math.floor(totalItems / pageSize) * pageSize;
+    const { totalItems, pageSize, totalPages } = this;
+    const lastStart = totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize;
     return lastStart + 1;
   }
-  showLeftEllipsis() {
-    return Math.floor(this.startItem / this.pageSize) > 3;
+  showStartEllipsis() {
+    return (this.totalPages > this.maxItems &&
+      Math.floor(this.startItem / this.pageSize) >
+        this.maxItems - firstAndLastPageCount - ellipsisCount);
   }
-  showRightEllipsis() {
-    return (this.totalItems - this.startItem) / this.pageSize > 3;
+  showEndEllipsis() {
+    return (this.totalPages > this.maxItems &&
+      (this.totalItems - this.startItem) / this.pageSize >
+        this.maxItems - firstAndLastPageCount - (ellipsisCount - 1));
   }
   emitUpdate() {
     this.calcitePaginationChange.emit();
@@ -34645,42 +34725,69 @@ class Pagination {
   //  Render Methods
   //
   //--------------------------------------------------------------------------
-  renderPages() {
+  renderEllipsis(type) {
+    return (hAsync("span", { class: {
+        [CSS$t.ellipsis]: true,
+        [CSS$t.ellipsisStart]: type === "start",
+        [CSS$t.ellipsisEnd]: type === "end",
+      }, key: type }, "\u2026"));
+  }
+  renderItems() {
+    const { totalItems, pageSize, startItem, maxItems, totalPages } = this;
+    const items = [];
+    const renderFirstPage = totalItems > pageSize;
+    const renderStartEllipsis = this.showStartEllipsis();
+    const renderEndEllipsis = this.showEndEllipsis();
     const lastStart = this.getLastStart();
+    if (renderFirstPage) {
+      items.push(this.renderPage(1));
+    }
+    if (renderStartEllipsis) {
+      items.push(this.renderEllipsis("start"));
+    }
+    const remainingItems = maxItems -
+      firstAndLastPageCount -
+      (renderEndEllipsis ? 1 : 0) -
+      (renderStartEllipsis ? 1 : 0);
     let end;
     let nextStart;
     // if we don't need ellipses render the whole set
-    if (this.totalItems / this.pageSize <= maxPagesDisplayed) {
-      nextStart = 1 + this.pageSize;
-      end = lastStart - this.pageSize;
+    if (totalPages - 1 <= remainingItems) {
+      nextStart = 1 + pageSize;
+      end = lastStart - pageSize;
     }
     else {
       // if we're within max pages of page 1
-      if (this.startItem / this.pageSize < maxPagesDisplayed - 1) {
-        nextStart = 1 + this.pageSize;
-        end = 1 + 4 * this.pageSize;
+      if (startItem / pageSize < remainingItems) {
+        nextStart = 1 + pageSize;
+        end = 1 + remainingItems * pageSize;
       }
       else {
         // if we're within max pages of last page
-        if (this.startItem + 3 * this.pageSize >= this.totalItems) {
-          nextStart = lastStart - 4 * this.pageSize;
-          end = lastStart - this.pageSize;
+        if (startItem + remainingItems * pageSize >= totalItems) {
+          nextStart = lastStart - remainingItems * pageSize;
+          end = lastStart - pageSize;
         }
         else {
-          nextStart = this.startItem - this.pageSize;
-          end = this.startItem + this.pageSize;
+          // if we're within the center pages
+          nextStart = startItem - pageSize * ((remainingItems - 1) / 2);
+          end = startItem + pageSize * ((remainingItems - 1) / 2);
         }
       }
     }
-    const pages = [];
-    while (nextStart <= end) {
-      pages.push(nextStart);
-      nextStart = nextStart + this.pageSize;
+    for (let i = 0; i < remainingItems && nextStart <= end; i++) {
+      items.push(this.renderPage(nextStart));
+      nextStart = nextStart + pageSize;
     }
-    return pages.map((page) => this.renderPage(page));
+    if (renderEndEllipsis) {
+      items.push(this.renderEllipsis("end"));
+    }
+    items.push(this.renderPage(lastStart));
+    return items;
   }
   renderPage(start) {
-    const page = Math.floor(start / this.pageSize) + (this.pageSize === 1 ? 0 : 1);
+    const { pageSize } = this;
+    const page = Math.floor(start / pageSize) + (pageSize === 1 ? 0 : 1);
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
       numberingSystem: this.numberingSystem,
@@ -34691,38 +34798,28 @@ class Pagination {
     return (hAsync("button", { "aria-current": selected ? "page" : "false", class: {
         [CSS$t.page]: true,
         [CSS$t.selected]: selected,
-      }, onClick: () => {
-        this.startItem = start;
-        this.emitUpdate();
-      } }, displayedPage));
-  }
-  renderLeftEllipsis() {
-    if (this.totalItems / this.pageSize > maxPagesDisplayed && this.showLeftEllipsis()) {
-      return hAsync("span", { class: `${CSS$t.ellipsis} ${CSS$t.ellipsisStart}` }, "\u2026");
-    }
-  }
-  renderRightEllipsis() {
-    if (this.totalItems / this.pageSize > maxPagesDisplayed && this.showRightEllipsis()) {
-      return hAsync("span", { class: `${CSS$t.ellipsis} ${CSS$t.ellipsisEnd}` }, "\u2026");
-    }
+      }, onClick: this.handlePageClick, value: start }, displayedPage));
   }
   render() {
-    const { totalItems, pageSize, startItem } = this;
+    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;
-    return (hAsync(Fragment, null, hAsync("button", { "aria-label": this.messages.previous, class: {
+    const iconScale = scale === "l" ? "m" : "s";
+    return (hAsync(Fragment, null, hAsync("button", { "aria-label": messages.previous, class: {
         [CSS$t.previous]: true,
         [CSS$t.disabled]: prevDisabled,
-      }, disabled: prevDisabled, onClick: this.previousClicked }, hAsync("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: this.scale === "l" ? "m" : "s" })), totalItems > pageSize ? this.renderPage(1) : null, this.renderLeftEllipsis(), this.renderPages(), this.renderRightEllipsis(), this.renderPage(this.getLastStart()), hAsync("button", { "aria-label": this.messages.next, class: {
+      }, disabled: prevDisabled, onClick: this.previousClicked }, hAsync("calcite-icon", { flipRtl: true, icon: ICONS$6.previous, scale: iconScale })), this.renderItems(), hAsync("button", { "aria-label": messages.next, class: {
         [CSS$t.next]: true,
         [CSS$t.disabled]: nextDisabled,
-      }, disabled: nextDisabled, onClick: this.nextClicked }, hAsync("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: this.scale === "l" ? "m" : "s" }))));
+      }, disabled: nextDisabled, onClick: this.nextClicked }, hAsync("calcite-icon", { flipRtl: true, icon: ICONS$6.next, scale: iconScale }))));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
     "messageOverrides": ["onMessagesChange"],
+    "pageSize": ["handleTotalPages"],
+    "totalItems": ["handleTotalPages"],
     "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"]
   }; }
   static get style() { return paginationCss; }
@@ -34731,22 +34828,24 @@ class Pagination {
     "$tagName$": "calcite-pagination",
     "$members$": {
       "groupSeparator": [516, "group-separator"],
+      "messages": [1040],
       "messageOverrides": [1040],
-      "pageSize": [514, "page-size"],
       "numberingSystem": [1, "numbering-system"],
+      "pageSize": [514, "page-size"],
+      "scale": [513],
       "startItem": [1538, "start-item"],
       "totalItems": [514, "total-items"],
-      "scale": [513],
-      "messages": [1040],
       "defaultMessages": [32],
       "effectiveLocale": [32],
+      "maxItems": [32],
+      "totalPages": [32],
       "setFocus": [64],
       "nextPage": [64],
       "previousPage": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["groupSeparator", "group-separator"], ["pageSize", "page-size"], ["startItem", "start-item"], ["totalItems", "total-items"], ["scale", "scale"]]
+    "$attrsToReflect$": [["groupSeparator", "group-separator"], ["pageSize", "page-size"], ["scale", "scale"], ["startItem", "start-item"], ["totalItems", "total-items"]]
   }; }
 }
 
@@ -34946,7 +35045,7 @@ class Panel {
   renderHeaderActionsEnd() {
     const { close, hasEndActions, messages, closable, hasMenuItems } = this;
     const text = messages.close;
-    const closableNode = closable ? (hAsync("calcite-action", { "aria-label": text, "data-test": "close", icon: ICONS$a.close, onClick: close, text: text, title: text,
+    const closableNode = closable ? (hAsync("calcite-action", { "aria-label": text, "data-test": "close", icon: ICONS$b.close, onClick: close, text: text, title: text,
       // 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.setCloseRef })) : null;
     const slotNode = (hAsync("slot", { name: SLOTS$n.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
@@ -34955,7 +35054,7 @@ class Panel {
   }
   renderMenu() {
     const { hasMenuItems, messages, menuOpen } = this;
-    return (hAsync("calcite-action-menu", { flipPlacements: ["top", "bottom"], hidden: !hasMenuItems, key: "menu", label: messages.options, open: menuOpen, placement: "bottom-end" }, hAsync("calcite-action", { icon: ICONS$a.menu, slot: SLOTS$w.trigger, text: messages.options }), hAsync("slot", { name: SLOTS$n.headerMenuActions, onSlotchange: this.handleHeaderMenuActionsSlotChange })));
+    return (hAsync("calcite-action-menu", { flipPlacements: ["top", "bottom"], hidden: !hasMenuItems, key: "menu", label: messages.options, open: menuOpen, placement: "bottom-end" }, hAsync("calcite-action", { icon: ICONS$b.menu, slot: SLOTS$w.trigger, text: messages.options }), hAsync("slot", { name: SLOTS$n.headerMenuActions, onSlotchange: this.handleHeaderMenuActionsSlotChange })));
   }
   renderHeaderNode() {
     const { hasHeaderContent, hasStartActions, hasEndActions, closable, hasMenuItems, hasActionBar, } = this;