Merge branch 'dev' into dit13711/10327-automate-archiving-issues-in-d…

…esign-projects

.husky/pre-commit

@@ -6,10 +6,10 @@ check_ui_icon_name_consistency() {
   valid_pattern="^[a-z0-9-]+-(16|24|32)(-f)?\\.svg$"
 
   # this pattern will check for invalid use of "-f-" anywhere except right before the size
-  invalid_pattern="-[a-z0-9]+-f-"
+  invalid_pattern="\-[a-z0-9]+-f-"
 
   staged_files="$(
-    git diff --cached --name-only --diff-filter=ACM -- packages/calcite-ui-icons/icons/*.svg
+    git diff --cached --name-only --diff-filter=ACM | grep -E "packages/calcite-ui-icons/icons/.*\.svg" || true
   )"
 
   if [ -n "$staged_files" ]; then

package.json

@@ -35,9 +35,9 @@
   },
   "devDependencies": {
     "@arcgis/lumina-compiler": "^4.32.0-next.75",
-    "@cspell/dict-gis": "1.0.0",
-    "@cspell/dict-pokemon": "1.0.0",
-    "@cspell/dict-scientific-terms-us": "3.0.5",
+    "@cspell/dict-gis": "1.0.1",
+    "@cspell/dict-pokemon": "1.0.1",
+    "@cspell/dict-scientific-terms-us": "3.0.6",
     "@cspell/eslint-plugin": "8.17.1",
     "@eslint/js": "9.17.0",
     "@esri/calcite-base": "1.2.0",
@@ -80,7 +80,7 @@
     "change-case": "5.4.4",
     "cheerio": "1.0.0",
     "chokidar": "4.0.3",
-    "chromatic": "11.22.0",
+    "chromatic": "11.22.2",
     "concurrently": "9.1.2",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "cpy": "11.1.0",
@@ -106,7 +106,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "rollup": "4.29.1",
+    "rollup": "4.30.1",
     "semver": "7.6.3",
     "shell-quote": "1.8.2",
     "storybook": "8.4.7",
@@ -133,8 +133,8 @@
     "patch-package": "8.0.0"
   },
   "optionalDependencies": {
-    "@nx/nx-darwin-arm64": "20.3.0",
-    "@nx/nx-linux-x64-gnu": "20.3.0",
-    "@nx/nx-win32-x64-msvc": "20.3.0"
+    "@nx/nx-darwin-arm64": "20.3.1",
+    "@nx/nx-linux-x64-gnu": "20.3.1",
+    "@nx/nx-win32-x64-msvc": "20.3.1"
   }
 }

packages/calcite-components-react/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-next.100](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-14)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [3.0.0-next.99](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-14)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [3.0.0-next.98](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-14)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [3.0.0-next.97](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-14)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [3.0.0-next.96](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-11)
 
 **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": "3.0.0-next.96",
+  "version": "3.0.0-next.100",
   "description": "A set of React components that wrap calcite components",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -26,8 +26,8 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@esri/calcite-components": "3.0.0-next.96",
-    "@lit/react": "1.0.6"
+    "@esri/calcite-components": "3.0.0-next.100",
+    "@lit/react": "1.0.7"
   },
   "peerDependencies": {
     "react": ">=18.3",

packages/calcite-components/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-next.100](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-14)
+
+**Note:** Version bump only for package @esri/calcite-components
+
+## [3.0.0-next.99](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-14)
+
+### Bug Fixes
+
+- **list-item:** fix selection indicator placement in RTL ([#11288](https://github.com/Esri/calcite-design-system/issues/11288)) ([5bed510](https://github.com/Esri/calcite-design-system/commit/5bed51027d6a7d9e5107303f5cd7604b973eb3af)), closes [#10731](https://github.com/Esri/calcite-design-system/issues/10731)
+
+## [3.0.0-next.98](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-14)
+
+### Bug Fixes
+
+- **action:** reflect the icon property ([#11282](https://github.com/Esri/calcite-design-system/issues/11282)) ([42a4808](https://github.com/Esri/calcite-design-system/commit/42a4808fb267251a9d5c8ae64cf682e2503a9b5d)), closes [#11092](https://github.com/Esri/calcite-design-system/issues/11092)
+- **sort-handle:** Fix dragging in Firefox ([#11279](https://github.com/Esri/calcite-design-system/issues/11279)) ([d4c47d8](https://github.com/Esri/calcite-design-system/commit/d4c47d8c1fb50f006d1a4a7966161a2bda54b5d5)), closes [#11220](https://github.com/Esri/calcite-design-system/issues/11220)
+
+## [3.0.0-next.97](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-14)
+
+### Features
+
+- **pagination:** add component tokens ([#11157](https://github.com/Esri/calcite-design-system/issues/11157)) ([f3973c8](https://github.com/Esri/calcite-design-system/commit/f3973c84751a308cca184fce3b353118073d4684)), closes [#7180](https://github.com/Esri/calcite-design-system/issues/7180)
+
+### Bug Fixes
+
+- **tile:** allow percentage inline-size on slotted content to be based on host ([#11283](https://github.com/Esri/calcite-design-system/issues/11283)) ([94ab2a5](https://github.com/Esri/calcite-design-system/commit/94ab2a59c6312e68323ee9cee5514c6b009a7108)), closes [#11199](https://github.com/Esri/calcite-design-system/issues/11199) [/github.com/Esri/calcite-design-system/issues/11199#issuecomment-2587924216](https://github.com/Esri//github.com/Esri/calcite-design-system/issues/11199/issues/issuecomment-2587924216)
+
+### Performance Improvements
+
+- **combobox:** fix initialization performance regression ([#11265](https://github.com/Esri/calcite-design-system/issues/11265)) ([a255c5a](https://github.com/Esri/calcite-design-system/commit/a255c5ad87b9fae9f0d9db463121ab5a0516a1a6)), closes [#10731](https://github.com/Esri/calcite-design-system/issues/10731)
+
 ## [3.0.0-next.96](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-01-11)
 
 ### Features

packages/calcite-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "3.0.0-next.96",
+  "version": "3.0.0-next.100",
   "description": "Web Components for Esri's Calcite Design System.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -52,10 +52,10 @@
     "screenshot-tests": "npm run build-storybook",
     "screenshot-tests:preview": "npm run util:prep-build-reqs && NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_SCREENSHOT_LOCAL_BUILD=true storybook dev",
     "screenshot-tests:publish": "npm run screenshot-tests && storybook-to-ghpages --existing-output-dir=docs",
-    "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev\"",
+    "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"trap 'npm run util:clean-js-files' INT TERM EXIT >/dev/null 2>&1 || true && tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev\"",
     "test": "vitest run",
     "test:watch": "vitest",
-    "util:clean-js-files": "rimraf --glob -- *.js {src,.storybook,support}/**.js",
+    "util:clean-js-files": "rimraf --glob -- *.js {src,.storybook,support}/**/*.js",
     "util:clean-readmes": "git restore src/components/*/readme.md",
     "util:clean-tested-build": "npm ci && npm test && npm run build",
     "util:copy-legacy-vscode-data": "cpy \"./dist/docs/vscode.html-custom-data.json\" \"./dist/extras/\" --rename=vscode-data.json --flat",
@@ -72,7 +72,7 @@
     "@arcgis/components-controllers": "^4.32.0-next.75",
     "@arcgis/components-utils": "^4.32.0-next.75",
     "@arcgis/lumina": "^4.32.0-next.75",
-    "@esri/calcite-ui-icons": "4.0.0-next.7",
+    "@esri/calcite-ui-icons": "4.0.0-next.8",
     "@floating-ui/dom": "^1.6.12",
     "@floating-ui/utils": "^0.2.8",
     "@types/color": "^4.2.0",
@@ -88,8 +88,8 @@
     "type-fest": "^4.30.1"
   },
   "devDependencies": {
-    "@esri/calcite-design-tokens": "3.0.0-next.6",
-    "@esri/eslint-plugin-calcite-components": "2.0.0-next.4"
+    "@esri/calcite-design-tokens": "3.0.0-next.7",
+    "@esri/eslint-plugin-calcite-components": "2.0.0-next.5"
   },
   "volta": {
     "extends": "../../package.json"

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

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, disabled, hidden, renders, slots, t9n, defaults, themed } from "../../tests/commonTests";
+import { accessible, disabled, hidden, renders, slots, t9n, defaults, themed, reflects } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
@@ -42,6 +42,55 @@ describe("calcite-action", () => {
     ]);
   });
 
+  describe("reflects", () => {
+    reflects("calcite-action", [
+      {
+        propertyName: "active",
+        value: true,
+      },
+      {
+        propertyName: "alignment",
+        value: "end",
+      },
+      {
+        propertyName: "appearance",
+        value: "solid",
+      },
+      {
+        propertyName: "compact",
+        value: true,
+      },
+      {
+        propertyName: "disabled",
+        value: true,
+      },
+      {
+        propertyName: "icon",
+        value: "hamburger",
+      },
+      {
+        propertyName: "iconFlipRtl",
+        value: true,
+      },
+      {
+        propertyName: "indicator",
+        value: true,
+      },
+      {
+        propertyName: "loading",
+        value: true,
+      },
+      {
+        propertyName: "scale",
+        value: "m",
+      },
+      {
+        propertyName: "textEnabled",
+        value: true,
+      },
+    ]);
+  });
+
   describe("renders", () => {
     renders("calcite-action", { display: "flex" });
   });

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

@@ -21,10 +21,17 @@
 :host {
   @extend %component-host;
   @apply flex bg-transparent cursor-pointer;
+  --calcite-internal-action-text-color: var(--calcite-color-text-3);
+}
+
+:host([drag-handle]) {
+  @apply cursor-move;
+  --calcite-internal-action-text-color: var(--calcite-color-border-input);
+  --calcite-internal-action-padding-inline: var(--calcite-spacing-xxs);
 }
 
 :host,
-button {
+.button {
   border-radius: var(
     --calcite-action-corner-radius,
     var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius))
@@ -62,7 +69,7 @@ button {
     font-sans;
 
   background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));
-  color: var(--calcite-action-text-color, var(--calcite-color-text-3));
+  color: var(--calcite-action-text-color, var(--calcite-internal-action-text-color));
   text-align: unset;
   flex: 1 0 auto;
   cursor: inherit;

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

@@ -1,6 +1,6 @@
 // @ts-strict-ignore
 import { createRef } from "lit-html/directives/ref.js";
-import { LitElement, property, h, method, JsxNode } from "@arcgis/lumina";
+import { LitElement, property, h, method, JsxNode, Fragment } from "@arcgis/lumina";
 import { guid } from "../../utils/guid";
 import {
   InteractiveComponent,
@@ -75,8 +75,15 @@ export class Action extends LitElement implements InteractiveComponent, Loadable
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   @property({ reflect: true }) disabled = false;
 
+  /**
+   * When `true`, the component is draggable.
+   *
+   * @private
+   */
+  @property({ reflect: true }) dragHandle = false;
+
   /** Specifies an icon to display. */
-  @property() icon: IconNameOrString;
+  @property({ reflect: true }) icon: IconNameOrString;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @property({ reflect: true }) iconFlipRtl = false;
@@ -236,7 +243,7 @@ export class Action extends LitElement implements InteractiveComponent, Loadable
     ) : null;
   }
 
-  override render(): JsxNode {
+  private renderButton(): JsxNode {
     const {
       active,
       compact,
@@ -263,22 +270,54 @@ export class Action extends LitElement implements InteractiveComponent, Loadable
       [CSS.buttonCompact]: compact,
     };
 
-    return (
-      <InteractiveContainer disabled={disabled}>
-        <button
+    const buttonContent = (
+      <>
+        {this.renderIconContainer()}
+        {this.renderTextContainer()}
+        {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key="indicator-no-icon" />}
+      </>
+    );
+
+    if (this.dragHandle) {
+      return (
+        // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486 & https://bugzilla.mozilla.org/show_bug.cgi?id=568313
+        <span
           aria-controls={indicator ? indicatorId : null}
           ariaBusy={loading}
+          ariaDisabled={this.disabled ? this.disabled : null}
           ariaLabel={ariaLabel}
           ariaPressed={active}
           class={buttonClasses}
-          disabled={disabled}
           id={buttonId}
           ref={this.buttonEl}
+          role="button"
+          tabIndex={this.disabled ? null : 0}
         >
-          {this.renderIconContainer()}
-          {this.renderTextContainer()}
-          {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key="indicator-no-icon" />}
-        </button>
+          {buttonContent}
+        </span>
+      );
+    }
+
+    return (
+      <button
+        aria-controls={indicator ? indicatorId : null}
+        ariaBusy={loading}
+        ariaLabel={ariaLabel}
+        ariaPressed={active}
+        class={buttonClasses}
+        disabled={disabled}
+        id={buttonId}
+        ref={this.buttonEl}
+      >
+        {buttonContent}
+      </button>
+    );
+  }
+
+  override render(): JsxNode {
+    return (
+      <InteractiveContainer disabled={this.disabled}>
+        {this.renderButton()}
         <slot name={SLOTS.tooltip} onSlotChange={this.handleTooltipSlotChange} />
         {this.renderIndicatorText()}
       </InteractiveContainer>

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

@@ -168,7 +168,9 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
     if (
       (changes.has("disabled") && this.hasUpdated) ||
       (changes.has("selected") && this.hasUpdated) ||
-      (changes.has("textLabel") && this.hasUpdated)
+      (changes.has("textLabel") && this.hasUpdated) ||
+      (changes.has("heading") && this.hasUpdated) ||
+      (changes.has("label") && this.hasUpdated)
     ) {
       this.calciteInternalComboboxItemChange.emit();
     }