Merge remote-tracking branch 'origin/dev' into benelan/9255-add-icons…

…-to-monorepo

* origin/dev:
  chore: add license to npm package (#9852)
  build(deps): update dependency @types/eslint to v8.56.11 (#9895)
  build(deps): update dependency lerna to v8.1.7 (#9896)
  build(deps): update dependency @floating-ui/dom to v1.6.8 (#9859)
  build(deps): update dependency chromatic to v11.5.6 (#9837)
  build(deps): update storybook monorepo to v8.2.6 (#9838)
  build(deps): update dependency jsdom to v24.1.1 (#9843)
  build(deps): update dependency @cspell/eslint-plugin to v8.12.1 (#9844)
  build(deps): update angular-cli monorepo to v18.1.2 (#9874)
  chore: release next
  feat(shell-panel): deprecate float displayMode and add float-content and float-all (#9795)
  chore: release next
  fix(tooltip): allow focusing on a reference element and then clicking on a tooltip (#9878)
  chore: release next
  build(deps): update package-lock (#9884)
  build(deps): update github-script types (#9886)
  build(deps): bump node version pinned by volta (#9887)
  feat(combobox-item): apply heading color according to updated spec (#9883)
  fix(panel): correct footer padding and layout (#9868)
  feat(dialog): add padding to default slot (#9871)

package.json

@@ -32,33 +32,33 @@
     "util:sync-linked-package-versions": "tsx support/syncLinkedPackageVersions.ts"
   },
   "devDependencies": {
-    "@cspell/eslint-plugin": "8.9.1",
+    "@cspell/eslint-plugin": "8.12.1",
     "@esri/calcite-base": "1.2.0",
     "@esri/calcite-colors": "6.1.0",
     "@octokit/webhooks-types": "7.5.1",
     "@prettier/sync": "0.5.2",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-typescript": "11.1.6",
-    "@storybook/addon-a11y": "8.2.4",
-    "@storybook/addon-controls": "8.2.4",
-    "@storybook/addon-docs": "8.2.4",
-    "@storybook/addon-interactions": "8.2.4",
-    "@storybook/addon-mdx-gfm": "8.2.4",
-    "@storybook/addon-themes": "8.2.4",
+    "@storybook/addon-a11y": "8.2.6",
+    "@storybook/addon-controls": "8.2.6",
+    "@storybook/addon-docs": "8.2.6",
+    "@storybook/addon-interactions": "8.2.6",
+    "@storybook/addon-mdx-gfm": "8.2.6",
+    "@storybook/addon-themes": "8.2.6",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/blocks": "8.2.4",
-    "@storybook/html": "8.2.4",
-    "@storybook/html-webpack5": "8.2.4",
-    "@storybook/manager-api": "8.2.4",
-    "@storybook/preview-api": "8.2.4",
+    "@storybook/blocks": "8.2.6",
+    "@storybook/html": "8.2.6",
+    "@storybook/html-webpack5": "8.2.6",
+    "@storybook/manager-api": "8.2.6",
+    "@storybook/preview-api": "8.2.6",
     "@storybook/storybook-deployer": "2.8.16",
-    "@storybook/test": "8.2.4",
+    "@storybook/test": "8.2.6",
     "@tokens-studio/sd-transforms": "0.12.2",
     "@types/dedent": "0.7.2",
-    "@types/eslint": "8.56.10",
+    "@types/eslint": "8.56.11",
     "@types/estree": "1.0.5",
-    "@types/github-script": "github:actions/github-script#pull/482",
+    "@types/github-script": "github:actions/github-script",
     "@types/jest": "29.5.12",
     "@types/jest-axe": "3.5.9",
     "@types/jsdom": "21.1.7",
@@ -77,7 +77,7 @@
     "change-case": "4.1.2",
     "cheerio": "1.0.0-rc.12",
     "chokidar": "3.6.0",
-    "chromatic": "11.5.5",
+    "chromatic": "11.5.6",
     "concurrently": "8.2.2",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "cpy": "11.0.1",
@@ -96,7 +96,7 @@
     "jest": "29.7.0",
     "jest-axe": "9.0.0",
     "jest-cli": "29.7.0",
-    "lerna": "8.1.6",
+    "lerna": "8.1.7",
     "lint-staged": "15.2.7",
     "markdownlint-cli": "0.41.0",
     "postcss": "8.4.39",
@@ -109,7 +109,7 @@
     "rollup": "4.18.1",
     "semver": "7.6.3",
     "shell-quote": "1.8.1",
-    "storybook": "8.2.4",
+    "storybook": "8.2.6",
     "storybook-addon-rtl": "1.0.0",
     "style-dictionary": "3.9.2",
     "stylelint": "15.11.0",
@@ -129,7 +129,7 @@
   },
   "packageManager": "npm@10.2.3",
   "volta": {
-    "node": "20.12.1"
+    "node": "20.16.0"
   },
   "dependencies": {
     "patch-package": "8.0.0"

packages/calcite-components-angular/package.json

@@ -24,8 +24,8 @@
     "zone.js": "0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.1.1",
-    "@angular/cli": "18.1.1",
+    "@angular-devkit/build-angular": "18.1.2",
+    "@angular/cli": "18.1.2",
     "@angular/compiler-cli": "18.0.3",
     "ng-packagr": "18.0.0"
   },

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

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.28](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.27...@esri/calcite-components-angular@2.11.0-next.28) (2024-07-30)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.11.0-next.27](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.26...@esri/calcite-components-angular@2.11.0-next.27) (2024-07-29)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.11.0-next.26](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.25...@esri/calcite-components-angular@2.11.0-next.26) (2024-07-29)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.11.0-next.25](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.24...@esri/calcite-components-angular@2.11.0-next.25) (2024-07-26)
 
 **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.11.0-next.25",
+  "version": "2.11.0-next.28",
   "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.11.0-next.25",
+    "@esri/calcite-components": "^2.11.0-next.28",
     "tslib": "2.6.3"
   },
   "peerDependencies": {

packages/calcite-components-react/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.28](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.27...@esri/calcite-components-react@2.11.0-next.28) (2024-07-30)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.11.0-next.27](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.26...@esri/calcite-components-react@2.11.0-next.27) (2024-07-29)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.11.0-next.26](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.25...@esri/calcite-components-react@2.11.0-next.26) (2024-07-29)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.11.0-next.25](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.24...@esri/calcite-components-react@2.11.0-next.25) (2024-07-26)
 
 **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.11.0-next.25",
+  "version": "2.11.0-next.28",
   "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.11.0-next.25"
+    "@esri/calcite-components": "^2.11.0-next.28"
   },
   "peerDependencies": {
     "react": ">=16.7",

packages/calcite-components/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.28](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.27...@esri/calcite-components@2.11.0-next.28) (2024-07-30)
+
+### Features
+
+- **shell-panel:** deprecate float displayMode and add float-content and float-all ([#9795](https://github.com/Esri/calcite-design-system/issues/9795)) ([9beb6eb](https://github.com/Esri/calcite-design-system/commit/9beb6eba2971b3f06d9e4ee3c625c276561b9542)), closes [#7513](https://github.com/Esri/calcite-design-system/issues/7513)
+
+## [2.11.0-next.27](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.26...@esri/calcite-components@2.11.0-next.27) (2024-07-29)
+
+### Bug Fixes
+
+- **tooltip:** allow focusing on a reference element and then clicking on a tooltip ([#9878](https://github.com/Esri/calcite-design-system/issues/9878)) ([af467a1](https://github.com/Esri/calcite-design-system/commit/af467a16fd10788e103e96ab6c19cff3ee9af6b9)), closes [#9840](https://github.com/Esri/calcite-design-system/issues/9840)
+
+## [2.11.0-next.26](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.25...@esri/calcite-components@2.11.0-next.26) (2024-07-29)
+
+### Features
+
+- **combobox-item:** apply heading color according to updated spec ([#9883](https://github.com/Esri/calcite-design-system/issues/9883)) ([d8ddf57](https://github.com/Esri/calcite-design-system/commit/d8ddf57eec1b9aa009cbe1c18b3c8146fc54b1ca)), closes [#9881](https://github.com/Esri/calcite-design-system/issues/9881)
+- **dialog:** add padding to default slot ([#9871](https://github.com/Esri/calcite-design-system/issues/9871)) ([9f06123](https://github.com/Esri/calcite-design-system/commit/9f06123ac2f5b152ce2f27a2ca64f46e212c5a9b)), closes [#9869](https://github.com/Esri/calcite-design-system/issues/9869)
+
+### Bug Fixes
+
+- **panel:** correct footer padding and layout ([#9868](https://github.com/Esri/calcite-design-system/issues/9868)) ([b25a0ae](https://github.com/Esri/calcite-design-system/commit/b25a0ae7427613c9b75dd763327f622894ca1d22)), closes [#9858](https://github.com/Esri/calcite-design-system/issues/9858) [#9857](https://github.com/Esri/calcite-design-system/issues/9857)
+- **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](https://github.com/Esri/calcite-design-system/issues/9867)) ([2c62917](https://github.com/Esri/calcite-design-system/commit/2c629172c3f5f6facbe9d9424daaae9f5dbdf344)), closes [#9854](https://github.com/Esri/calcite-design-system/issues/9854)
+
 ## [2.11.0-next.25](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.24...@esri/calcite-components@2.11.0-next.25) (2024-07-26)
 
 ### Features

packages/calcite-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.11.0-next.25",
+  "version": "2.11.0-next.28",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@esri/calcite-ui-icons": "3.29.0",
-    "@floating-ui/dom": "1.6.7",
+    "@floating-ui/dom": "1.6.8",
     "@stencil/core": "4.19.2",
     "@types/color": "3.0.6",
     "@types/sortablejs": "1.15.7",
@@ -78,14 +78,14 @@
     "type-fest": "4.18.2"
   },
   "devDependencies": {
-    "@esri/calcite-design-tokens": "^2.2.1-next.1",
+    "@esri/calcite-design-tokens": "^2.2.1-next.2",
     "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3",
     "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.4",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.12",
-    "jsdom": "24.1.0"
+    "jsdom": "24.1.1"
   },
   "license": "SEE LICENSE.md",
   "volta": {

packages/calcite-components/src/components.d.ts

@@ -4518,12 +4518,12 @@ export namespace Components {
          */
         "detached": boolean;
         /**
-          * When `displayMode` is `float`, specifies the maximum height of the component.
+          * When `displayMode` is `float-content`, specifies the maximum height of the component.
           * @deprecated Use `heightScale` instead.
          */
         "detachedHeightScale": Scale;
         /**
-          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
+          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
          */
         "displayMode": DisplayMode1;
         /**
@@ -4547,7 +4547,7 @@ export namespace Components {
          */
         "position": Extract<"start" | "end", Position>;
         /**
-          * When `true` and `displayMode` is not `float`, the component's content area is resizable.
+          * When `true` and `displayMode` is not `float-content`, the component's content area is resizable.
          */
         "resizable": boolean;
         /**
@@ -12638,12 +12638,12 @@ declare namespace LocalJSX {
          */
         "detached"?: boolean;
         /**
-          * When `displayMode` is `float`, specifies the maximum height of the component.
+          * When `displayMode` is `float-content`, specifies the maximum height of the component.
           * @deprecated Use `heightScale` instead.
          */
         "detachedHeightScale"?: Scale;
         /**
-          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
+          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
          */
         "displayMode"?: DisplayMode1;
         /**
@@ -12669,7 +12669,7 @@ declare namespace LocalJSX {
          */
         "position"?: Extract<"start" | "end", Position>;
         /**
-          * When `true` and `displayMode` is not `float`, the component's content area is resizable.
+          * When `true` and `displayMode` is not `float-content`, the component's content area is resizable.
          */
         "resizable"?: boolean;
         /**

packages/calcite-components/src/components/combobox-item/combobox-item.scss

@@ -164,6 +164,10 @@ ul:focus {
   white-space: nowrap;
 }
 
+.title {
+  color: var(--calcite-color-text-1);
+}
+
 .title,
 .description,
 .short-text {

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

@@ -6,6 +6,7 @@
  * @prop --calcite-dialog-scrim-background-color: Specifies the background color of the component's scrim.
  * @prop --calcite-dialog-size-x: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement="cover"` is set.
  * @prop --calcite-dialog-size-y: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement="cover"` is set.
+ * @prop --calcite-dialog-content-space: Specifies the padding of the component's content.
  * @prop --calcite-dialog-footer-space: Specifies the padding of the component's footer.
  * @prop --calcite-dialog-border-color: Specifies the component's border color.
  */
@@ -75,20 +76,23 @@
 }
 
 :host([scale="s"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-sm);
   --calcite-internal-dialog-padding: theme("spacing.3");
   --calcite-internal-dialog-padding-large: theme("spacing.4");
   --calcite-internal-dialog-title-text: theme("fontSize.1h");
   --calcite-internal-dialog-content-text: theme("fontSize.n1");
 }
 
 :host([scale="m"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-md);
   --calcite-internal-dialog-padding: theme("spacing.4");
   --calcite-internal-dialog-padding-large: theme("spacing.5");
   --calcite-internal-dialog-title-text: theme("fontSize.2h");
   --calcite-internal-dialog-content-text: theme("fontSize.0");
 }
 
 :host([scale="l"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-lg);
   --calcite-internal-dialog-padding: theme("spacing.5");
   --calcite-internal-dialog-padding-large: theme("spacing.6");
   --calcite-internal-dialog-title-text: theme("fontSize.3h");
@@ -113,6 +117,10 @@ calcite-panel {
   --calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
 }
 
+.content {
+  padding: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
+}
+
 .dialog {
   @apply pointer-events-none
     float-none

packages/calcite-components/src/components/dialog/dialog.stories.ts

@@ -351,7 +351,8 @@ export const footerSlot = (): string => html`
 `;
 
 const themedStyle = html` --calcite-dialog-scrim-background-color: purple; --calcite-dialog-size-x: 400px;
---calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;`;
+--calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;
+--calcite-dialog-content-space: 50px;`;
 
 export const themed = (): string =>
   html`<calcite-dialog
@@ -363,6 +364,7 @@ export const themed = (): string =>
     scale="m"
     width-scale="s"
   >
-    <p>Slotted content!</p>
+    Slotted content!
     <div slot="footer">Footer!</div>
+    <calcite-fab slot="${SLOTS.fab}"></calcite-fab>
   </calcite-dialog>`;

packages/calcite-components/src/components/dialog/dialog.tsx

@@ -262,7 +262,9 @@ export class Dialog
                 <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
                 <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
                 <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
-                <slot />
+                <div class={CSS.content}>
+                  <slot />
+                </div>
               </calcite-panel>
             </slot>
           </div>

packages/calcite-components/src/components/dialog/resources.ts

@@ -7,6 +7,7 @@ export const CSS = {
   container: "container",
   containerOpen: "container--open",
   containerEmbedded: "container--embedded",
+  content: "content",
 
   // these classes help apply the animation in phases to only set transform on open/close
   // this helps avoid a positioning issue for any floating-ui-owning children

packages/calcite-components/src/components/flow-item/flow-item.stories.ts

@@ -249,7 +249,7 @@ export const footerStartEndAndContentBottom = (): string =>
     </calcite-flow-item>
   </div>`;
 
-export const footerSlotCoexistence = (): string =>
+export const footerSlot = (): string =>
   html`<div style="width: 300px;">
     <calcite-flow-item height-scale="s" style="--calcite-flow-item-footer-padding: 20px;">
       <div slot="header-content">Header!</div>