Merge remote-tracking branch 'origin/dev' into benelan/text-area-tokens

* origin/dev:
  fix(shell): fix z-index of slotted popover elements (#10325)
  fix(dialog): only prevent default on escape key when escapeDisabled is true (#10336)
  chore: release next
  feat(carousel): Improve support for high item counts (#10315)
  feat: add content inline right (#10338)
  fix: correct non-standard filled icon names (#10309)
  fix(panel): initially closed panel should be hidden (#10308)
  chore(linting): automate tracking of custom Sass functions for stylelint (#10313)
  chore: tidy up demo pages (#10314)

.husky/pre-commit

@@ -1,4 +1,4 @@
-#!/usr/bin/env sh
+#!/usr/bin/env bash
 
 ensure_types_are_up_to_date() {
   types_path="packages/calcite-components/src/components.d.ts"
@@ -9,6 +9,21 @@ ensure_types_are_up_to_date() {
   fi
 }
 
+update_stylelint_config_if_sass_file_edited() {
+  staged_files="$(git diff --cached --name-only --diff-filter=ACM)"
+
+  for file in $staged_files; do
+    if [[ "$file" == *.scss ]]; then
+      npm run util:update-stylelint-custom-sass-functions
+      break
+    fi
+  done
+
+  if [ -n "$(git diff --name-only -- "packages/calcite-components/.stylelintrc.json")" ]; then
+    git add "packages/calcite-components/.stylelintrc.json"
+  fi
+}
+
 check_ui_icon_name_consistency() {
   svg_icon_dir="packages/calcite-ui-icons/icons"
 
@@ -43,7 +58,8 @@ check_ui_icon_name_consistency() {
 }
 
 lint-staged
-ensure_types_are_up_to_date
 check_ui_icon_name_consistency
+ensure_types_are_up_to_date
+update_stylelint_config_if_sass_file_edited
 
 exit 0

package.json

@@ -29,6 +29,7 @@
     "util:is-next-deployable": "tsx support/isNextDeployable.ts",
     "util:push-tags": "git push origin HEAD --follow-tags",
     "util:upload-release-assets": "tsx support/uploadReleaseAssets.ts",
+    "util:update-stylelint-custom-sass-functions": "tsx support/updateStylelintCustomSassFunctions.ts",
     "util:remove-prerelease-changelog-entries": "tsx support/removePrereleaseChangelogEntries.ts",
     "util:sync-linked-package-versions": "tsx support/syncLinkedPackageVersions.ts"
   },

packages/calcite-components-angular/projects/component-library/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.13.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.13.0-next.14...@esri/calcite-components-angular@2.13.0-next.15) (2024-09-18)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.13.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.13.0-next.13...@esri/calcite-components-angular@2.13.0-next.14) (2024-09-13)
 
 **Note:** Version bump only for package @esri/calcite-components-angular

packages/calcite-components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.13.0-next.14",
+  "version": "2.13.0-next.15",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "bugs": {
@@ -17,7 +17,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@esri/calcite-components": "2.13.0-next.14",
+    "@esri/calcite-components": "2.13.0-next.15",
     "tslib": "2.6.3"
   },
   "peerDependencies": {

packages/calcite-components-react/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.13.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.13.0-next.14...@esri/calcite-components-react@2.13.0-next.15) (2024-09-18)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.13.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.13.0-next.13...@esri/calcite-components-react@2.13.0-next.14) (2024-09-13)
 
 **Note:** Version bump only for package @esri/calcite-components-react

packages/calcite-components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-react",
-  "version": "2.13.0-next.14",
+  "version": "2.13.0-next.15",
   "description": "A set of React components that wrap calcite components",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -28,7 +28,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@esri/calcite-components": "2.13.0-next.14"
+    "@esri/calcite-components": "2.13.0-next.15"
   },
   "peerDependencies": {
     "react": ">=16.7",

packages/calcite-components/.stylelintrc.cjs

@@ -1,5 +1,12 @@
 // @ts-check
 
+// ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
+const customFunctions = [
+  "get-trailing-text-input-padding",
+  "scale-duration"
+];
+// ⚠️ END OF AUTO-GENERATED CODE
+
 const scssPatternRules = [
   "scss/at-function-pattern",
   "scss/dollar-variable-pattern",
@@ -50,7 +57,7 @@ const rules = {
   "scss/function-no-unknown": [
     true,
     {
-      ignoreFunctions: ["get-trailing-text-input-padding", "scale-duration", "theme", "var"],
+      ignoreFunctions: [...customFunctions, "theme", "var"],
       severity: "error",
     },
   ],

packages/calcite-components/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.13.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.13.0-next.14...@esri/calcite-components@2.13.0-next.15) (2024-09-18)
+
+### Features
+
+- **carousel:** Improve support for high item counts ([#10315](https://github.com/Esri/calcite-design-system/issues/10315)) ([6ad2612](https://github.com/Esri/calcite-design-system/commit/6ad261276c2a1ece4ce8f23cc29234becd4869c1)), closes [#9121](https://github.com/Esri/calcite-design-system/issues/9121)
+
+### Bug Fixes
+
+- **panel:** initially closed panel should be hidden ([#10308](https://github.com/Esri/calcite-design-system/issues/10308)) ([46de96b](https://github.com/Esri/calcite-design-system/commit/46de96b24926415ea71cf77d23699269be83d258)), closes [#10320](https://github.com/Esri/calcite-design-system/issues/10320)
+
 ## [2.13.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.13.0-next.13...@esri/calcite-components@2.13.0-next.14) (2024-09-13)
 
 ### Features

packages/calcite-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.13.0-next.14",
+  "version": "2.13.0-next.15",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
@@ -60,7 +60,7 @@
     "directory": "packages/calcite-components"
   },
   "dependencies": {
-    "@esri/calcite-ui-icons": "3.32.0-next.4",
+    "@esri/calcite-ui-icons": "3.32.0-next.5",
     "@floating-ui/dom": "1.6.10",
     "@stencil/core": "4.20.0",
     "@types/color": "3.0.6",
@@ -77,7 +77,7 @@
   },
   "devDependencies": {
     "@esri/calcite-design-tokens": "2.2.1-next.4",
-    "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3",
+    "@esri/eslint-plugin-calcite-components": "1.2.1-next.4",
     "@stencil-community/eslint-plugin": "0.8.0",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.4",

packages/calcite-components/src/components/carousel/carousel.e2e.ts

@@ -1,7 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, hidden, renders, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
-import { CSS, DURATION } from "./resources";
+import { breakpoints } from "../../utils/responsive";
+import { CSS, DURATION, centerItemsByBreakpoint } from "./resources";
 
 const slideDurationWaitTimer = DURATION + 250;
 
@@ -1055,3 +1056,86 @@ describe("calcite-carousel", () => {
     expect(animationEndSpy).toHaveReceivedEventTimes(8);
   });
 });
+describe("renders the expected number of pagination items when overflowing", () => {
+  it("correctly limits the number of slide pagination items shown when overflowing xxsmall first selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:200px")">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["xxsmall"] + 2);
+  });
+
+  it("correctly limits the number of slide pagination items shown when overflowing xsmall first selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xxsmall"]}px">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["xsmall"] + 2);
+  });
+  it("correctly limits the number of slide pagination items shown when overflowing xsmall middle selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xsmall"]}px">
+        <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4" selected><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["small"] + 2);
+  });
+  it("correctly limits the number of slide pagination items shown when overflowing small last selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["small"]}px">
+        <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10" selected><p>tenth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["medium"] + 2);
+  });
+});

packages/calcite-components/src/components/carousel/carousel.scss

@@ -221,6 +221,25 @@ calcite-carousel-item:not([selected]) {
   }
 }
 
+.pagination-item--individual {
+  @apply w-0 p-0 opacity-0 pointer-events-none;
+  visibility: hidden;
+  transition:
+    var(--calcite-animation-timing) ease-in-out inline-size,
+    var(--calcite-animation-timing) ease-in-out padding,
+    var(--calcite-animation-timing) ease-in-out opacity;
+
+  &.pagination-item--visible {
+    @apply w-8 opacity-100 pointer-events-auto;
+    visibility: visible;
+  }
+}
+
+.pagination-item--range-edge calcite-icon {
+  scale: 0.75;
+  transition: var(--calcite-animation-timing) ease-in-out scale;
+}
+
 .container--overlaid .pagination-item {
   background-color: var(--calcite-internal-internal-carousel-item-background-color);
   &:hover {