diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 7e3b8dbd15e..02d0c9bdb39 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,7 +1,7 @@
{
- "packages/calcite-components": "2.1.0",
- "packages/calcite-components-react": "2.1.0",
- "packages/calcite-design-tokens": "2.1.0",
+ "packages/calcite-components": "2.3.0",
+ "packages/calcite-components-react": "2.3.0",
+ "packages/calcite-design-tokens": "2.1.1",
"packages/eslint-plugin-calcite-components": "1.0.0",
- "packages/calcite-components-angular/projects/component-library": "2.1.0"
+ "packages/calcite-components-angular/projects/component-library": "2.3.0"
}
diff --git a/package-lock.json b/package-lock.json
index 2e3f02568d0..001f5550696 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
],
"devDependencies": {
"@babel/preset-react": "7.23.3",
- "@cspell/eslint-plugin": "8.2.3",
+ "@cspell/eslint-plugin": "8.3.2",
"@esri/calcite-base": "1.2.0",
"@esri/calcite-colors": "6.1.0",
"@prettier/sync": "0.3.0",
@@ -50,12 +50,12 @@
"change-case": "4.1.2",
"cheerio": "1.0.0-rc.10",
"chokidar": "3.5.3",
- "chromatic": "6.24.1",
+ "chromatic": "10.3.1",
"concurrently": "7.6.0",
"conventional-changelog-conventionalcommits": "5.0.0",
- "cpy": "10.1.0",
+ "cpy": "11.0.0",
"cpy-cli": "5.0.0",
- "dedent": "0.7.0",
+ "dedent": "1.5.1",
"eslint": "8.56.0",
"eslint-config-prettier": "8.10.0",
"eslint-plugin-import": "2.29.1",
@@ -6044,17 +6044,17 @@
}
},
"node_modules/@cspell/cspell-bundled-dicts": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-8.2.3.tgz",
- "integrity": "sha512-AmKr/laSnmuTlECsIkf71N8FPd/ualJx13OdIJNIvUjIE741x/EACITIWLnTK9qFbsefOYp7bUeo9Xtbdw5JSA==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-8.3.2.tgz",
+ "integrity": "sha512-3ubOgz1/MDixJbq//0rQ2omB3cSdhVJDviERZeiREGz4HOq84aaK1Fqbw5SjNZHvhpoq+AYXm6kJbIAH8YhKgg==",
"dev": true,
"dependencies": {
"@cspell/dict-ada": "^4.0.2",
"@cspell/dict-aws": "^4.0.1",
"@cspell/dict-bash": "^4.1.3",
- "@cspell/dict-companies": "^3.0.28",
+ "@cspell/dict-companies": "^3.0.29",
"@cspell/dict-cpp": "^5.0.10",
- "@cspell/dict-cryptocurrencies": "^4.0.0",
+ "@cspell/dict-cryptocurrencies": "^5.0.0",
"@cspell/dict-csharp": "^4.0.2",
"@cspell/dict-css": "^4.0.12",
"@cspell/dict-dart": "^2.0.3",
@@ -6062,15 +6062,15 @@
"@cspell/dict-docker": "^1.1.7",
"@cspell/dict-dotnet": "^5.0.0",
"@cspell/dict-elixir": "^4.0.3",
- "@cspell/dict-en_us": "^4.3.12",
- "@cspell/dict-en-common-misspellings": "^1.0.2",
+ "@cspell/dict-en_us": "^4.3.13",
+ "@cspell/dict-en-common-misspellings": "^2.0.0",
"@cspell/dict-en-gb": "1.1.33",
"@cspell/dict-filetypes": "^3.0.3",
"@cspell/dict-fonts": "^4.0.0",
"@cspell/dict-fsharp": "^1.0.1",
"@cspell/dict-fullstack": "^3.1.5",
"@cspell/dict-gaming-terms": "^1.0.4",
- "@cspell/dict-git": "^2.0.0",
+ "@cspell/dict-git": "^3.0.0",
"@cspell/dict-golang": "^6.0.5",
"@cspell/dict-haskell": "^4.0.1",
"@cspell/dict-html": "^4.0.5",
@@ -6083,15 +6083,15 @@
"@cspell/dict-makefile": "^1.0.0",
"@cspell/dict-node": "^4.0.3",
"@cspell/dict-npm": "^5.0.14",
- "@cspell/dict-php": "^4.0.4",
+ "@cspell/dict-php": "^4.0.5",
"@cspell/dict-powershell": "^5.0.3",
"@cspell/dict-public-licenses": "^2.0.5",
- "@cspell/dict-python": "^4.1.10",
+ "@cspell/dict-python": "^4.1.11",
"@cspell/dict-r": "^2.0.1",
"@cspell/dict-ruby": "^5.0.2",
"@cspell/dict-rust": "^4.0.1",
"@cspell/dict-scala": "^5.0.0",
- "@cspell/dict-software-terms": "^3.3.14",
+ "@cspell/dict-software-terms": "^3.3.15",
"@cspell/dict-sql": "^2.1.3",
"@cspell/dict-svelte": "^1.0.2",
"@cspell/dict-swift": "^2.0.1",
@@ -6103,18 +6103,18 @@
}
},
"node_modules/@cspell/cspell-pipe": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/@cspell/cspell-pipe/-/cspell-pipe-8.2.3.tgz",
- "integrity": "sha512-ga39z+K2ZaSQczaRayNUTrz10z7umEdFiK7AdWOQpGmym5JTtTK0ntnKvKKsdSJ9F5I7TZVxgZH6r4CCEPlEEg==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/@cspell/cspell-pipe/-/cspell-pipe-8.3.2.tgz",
+ "integrity": "sha512-GZmDwvQGOjQi3IjD4k9xXeVTDANczksOsgVKb3v2QZk9mR4Qj8c6Uarjd4AgSiIhu/wBliJfzr5rWFJu4X2VfQ==",
"dev": true,
"engines": {
"node": ">=18"
}
},
"node_modules/@cspell/cspell-resolver": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/@cspell/cspell-resolver/-/cspell-resolver-8.2.3.tgz",
- "integrity": "sha512-H0855Lg0DxWDcT0FtJyqLvUqOJuE1qSg9X3ENs/ltZntQeaU8wZc+B34bXJrGpJVMuiiqHp4w6rcNN3lsOcshQ==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/@cspell/cspell-resolver/-/cspell-resolver-8.3.2.tgz",
+ "integrity": "sha512-w2Tmb95bzdEz9L4W5qvsP5raZbyEzKL7N2ksU/+yh8NEJcTuExmAl/nMnb3aIk7m2b+kPHnMOcJuwfUMLmyv4A==",
"dev": true,
"dependencies": {
"global-directory": "^4.0.1"
@@ -6124,18 +6124,18 @@
}
},
"node_modules/@cspell/cspell-service-bus": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/@cspell/cspell-service-bus/-/cspell-service-bus-8.2.3.tgz",
- "integrity": "sha512-hMLEzE2MkFir3kii046RecR1JAAfA6RQhLddjwQTq1c8YCWJ4lQEKUdM5x7nr/UpJtsMj8eYZ7CtbbnxQyn7Zg==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/@cspell/cspell-service-bus/-/cspell-service-bus-8.3.2.tgz",
+ "integrity": "sha512-skTHNyVi74//W/O+f4IauDhm6twA9S2whkylonsIzPxEl4Pn3y2ZEMXNki/MWUwZfDIzKKSxlcREH61g7zCvhg==",
"dev": true,
"engines": {
"node": ">=18"
}
},
"node_modules/@cspell/cspell-types": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/@cspell/cspell-types/-/cspell-types-8.2.3.tgz",
- "integrity": "sha512-AZIC1n7veQSylp9ZAcVDvIaY+oS/vpzFNJ77rzuhEy/B6X/9jzeI8wg/+vWkmhO59q4iF/ZlswWK3UXfeSnUFg==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/@cspell/cspell-types/-/cspell-types-8.3.2.tgz",
+ "integrity": "sha512-qS/gWd9ItOrN6ZX5pwC9lJjnBoyiAyhxYq0GUXuV892LQvwrBmECGk6KhsA1lPW7JJS7o57YTAS1jmXnmXMEpg==",
"dev": true,
"engines": {
"node": ">=18"
@@ -6166,15 +6166,15 @@
"dev": true
},
"node_modules/@cspell/dict-cpp": {
- "version": "5.0.10",
- "resolved": "https://registry.npmjs.org/@cspell/dict-cpp/-/dict-cpp-5.0.10.tgz",
- "integrity": "sha512-WCRuDrkFdpmeIR6uXQYKU9loMQKNFS4bUhtHdv5fu4qVyJSh3k/kgmtTm1h1BDTj8EwPRc/RGxS+9Z3b2mnabA==",
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/@cspell/dict-cpp/-/dict-cpp-5.1.1.tgz",
+ "integrity": "sha512-Qy9fNsR/5RcQ6G85gDKFjvzh0AdgAilLQeSXPtqY21Fx1kCjUqdVVJYMmHUREgcxH6ptAxtn5knTWU4PIhQtOw==",
"dev": true
},
"node_modules/@cspell/dict-cryptocurrencies": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/@cspell/dict-cryptocurrencies/-/dict-cryptocurrencies-4.0.0.tgz",
- "integrity": "sha512-EiZp91ATyRxTmauIQfOX9adLYCunKjHEh092rrM7o2eMXP9n7zpXAL9BK7LviL+LbB8VDOm21q+s83cKrrRrsg==",
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@cspell/dict-cryptocurrencies/-/dict-cryptocurrencies-5.0.0.tgz",
+ "integrity": "sha512-Z4ARIw5+bvmShL+4ZrhDzGhnc9znaAGHOEMaB/GURdS/jdoreEDY34wdN0NtdLHDO5KO7GduZnZyqGdRoiSmYA==",
"dev": true
},
"node_modules/@cspell/dict-csharp": {
@@ -6226,15 +6226,15 @@
"dev": true
},
"node_modules/@cspell/dict-en_us": {
- "version": "4.3.12",
- "resolved": "https://registry.npmjs.org/@cspell/dict-en_us/-/dict-en_us-4.3.12.tgz",
- "integrity": "sha512-1bsUxFjgxF30FTzcU5uvmCvH3lyqVKR9dbwsJhomBlUM97f0edrd6590SiYBXDm7ruE68m3lJd4vs0Ev2D6FtQ==",
+ "version": "4.3.13",
+ "resolved": "https://registry.npmjs.org/@cspell/dict-en_us/-/dict-en_us-4.3.13.tgz",
+ "integrity": "sha512-T6lHiGCjloGNE0d8CogF+efJZPCAP8zdzn+KnlI0Bmjaz5nvG2LTX7CXl1zkOl1nYYev0FuIk9WJ9YPVRjcFbQ==",
"dev": true
},
"node_modules/@cspell/dict-en-common-misspellings": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/@cspell/dict-en-common-misspellings/-/dict-en-common-misspellings-1.0.2.tgz",
- "integrity": "sha512-jg7ZQZpZH7+aAxNBlcAG4tGhYF6Ksy+QS5Df73Oo+XyckBjC9QS+PrRwLTeYoFIgXy5j3ICParK5r3MSSoL4gw==",
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/@cspell/dict-en-common-misspellings/-/dict-en-common-misspellings-2.0.0.tgz",
+ "integrity": "sha512-NOg8dlv37/YqLkCfBs5OXeJm/Wcfb/CzeOmOZJ2ZXRuxwsNuolb4TREUce0yAXRqMhawahY5TSDRJJBgKjBOdw==",
"dev": true
},
"node_modules/@cspell/dict-en-gb": {
@@ -6274,9 +6274,9 @@
"dev": true
},
"node_modules/@cspell/dict-git": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/@cspell/dict-git/-/dict-git-2.0.0.tgz",
- "integrity": "sha512-n1AxyX5Kgxij/sZFkxFJlzn3K9y/sCcgVPg/vz4WNJ4K9YeTsUmyGLA2OQI7d10GJeiuAo2AP1iZf2A8j9aj2w==",
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@cspell/dict-git/-/dict-git-3.0.0.tgz",
+ "integrity": "sha512-simGS/lIiXbEaqJu9E2VPoYW1OTC2xrwPPXNXFMa2uo/50av56qOuaxDrZ5eH1LidFXwoc8HROCHYeKoNrDLSw==",
"dev": true
},
"node_modules/@cspell/dict-golang": {
@@ -6403,9 +6403,9 @@
"dev": true
},
"node_modules/@cspell/dict-software-terms": {
- "version": "3.3.15",
- "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-3.3.15.tgz",
- "integrity": "sha512-1qqMGFi1TUNq9gQj4FTLPTlqVzQLXrj80MsKoXVpysr+823kMWesQAjqHiPg+MYsQ3DlTcpGWcjq/EbYonqueQ==",
+ "version": "3.3.16",
+ "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-3.3.16.tgz",
+ "integrity": "sha512-ixorEP80LGxAU+ODVSn/CYIDjV0XAlZ2VrBu7CT+PwUFJ7h8o3JX1ywKB4qnt0hHru3JjWFtBoBThmZdrXnREQ==",
"dev": true
},
"node_modules/@cspell/dict-sql": {
@@ -6439,9 +6439,9 @@
"dev": true
},
"node_modules/@cspell/dynamic-import": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/@cspell/dynamic-import/-/dynamic-import-8.2.3.tgz",
- "integrity": "sha512-udJF+88F4UMH2eVKe3Utsh4X1PyNwqPJclIeD3/MDMFWm16lLkFYMqqrdr51tNLKVi4cXceGrUEapmGwf87l/w==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/@cspell/dynamic-import/-/dynamic-import-8.3.2.tgz",
+ "integrity": "sha512-4t0xM5luA3yQhar2xWvYK4wQSDB2r0u8XkpzzJqd57MnJXd7uIAxI0awGUrDXukadRaCo0tDIlMUBemH48SNVg==",
"dev": true,
"dependencies": {
"import-meta-resolve": "^4.0.0"
@@ -6451,24 +6451,24 @@
}
},
"node_modules/@cspell/eslint-plugin": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/@cspell/eslint-plugin/-/eslint-plugin-8.2.3.tgz",
- "integrity": "sha512-8IlJ4jfLzRmSt5oBVqIadcL1W9JFyx/KGW5llag8bmtv9rk0SBeVQe7PkatUBkBERX1kG4J4agm/JamDy47tyw==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/@cspell/eslint-plugin/-/eslint-plugin-8.3.2.tgz",
+ "integrity": "sha512-FUUIUMW43KGTddj+SFf3TEgDC5Uv+QvRJqeT8RXdxQL7PLPU7ZQyEGmQZf1DhJCxLzscrVt5YCmA6ZYUjwh/zQ==",
"dev": true,
"dependencies": {
- "@cspell/cspell-types": "8.2.3",
- "cspell-lib": "8.2.3",
+ "@cspell/cspell-types": "8.3.2",
+ "cspell-lib": "8.3.2",
"estree-walker": "^3.0.3",
- "synckit": "^0.8.6"
+ "synckit": "^0.8.8"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@cspell/strong-weak-map": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/@cspell/strong-weak-map/-/strong-weak-map-8.2.3.tgz",
- "integrity": "sha512-/0gQZw87MqGX8f28E+LhFfrsWdRdQEL8EEQeMXrrzSoPnfSz+ItHMhhrwPF+bMePPjaaUNYoRXvX7hxiDsGm0w==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/@cspell/strong-weak-map/-/strong-weak-map-8.3.2.tgz",
+ "integrity": "sha512-Mte/2000ap278kRYOUhiGWI7MNr1+A7WSWJmlcdP4CAH5SO20sZI3/cyZLjJJEyapdhK5vaP1L5J9sUcVDHd3A==",
"dev": true,
"engines": {
"node": ">=18"
@@ -7302,9 +7302,9 @@
"link": true
},
"node_modules/@esri/calcite-ui-icons": {
- "version": "3.25.3",
- "resolved": "https://registry.npmjs.org/@esri/calcite-ui-icons/-/calcite-ui-icons-3.25.3.tgz",
- "integrity": "sha512-KhL/CiVpG8zzXwYQkF0L0irCS+r/9ClB+8Fl088UPX9L+iMEF8mmQYoeI5SAhNIlHr8Y+2QhcdAT0ddx2/14Dg==",
+ "version": "3.25.6",
+ "resolved": "https://registry.npmjs.org/@esri/calcite-ui-icons/-/calcite-ui-icons-3.25.6.tgz",
+ "integrity": "sha512-zWHrNykjVNHSMRNv7nV6QhDRQ89WWv+4cAJyUPjCxfNWCJvGUdFdqt+OQWOj4jpYMMponoWRleY9bkNCrh4i5w==",
"dev": true,
"bin": {
"spriter": "bin/spriter.js"
@@ -7324,26 +7324,26 @@
}
},
"node_modules/@floating-ui/core": {
- "version": "1.5.2",
- "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
- "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+ "version": "1.5.3",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
+ "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
"dependencies": {
- "@floating-ui/utils": "^0.1.3"
+ "@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/dom": {
- "version": "1.5.3",
- "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
- "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+ "version": "1.5.4",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
+ "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
"dependencies": {
- "@floating-ui/core": "^1.4.2",
- "@floating-ui/utils": "^0.1.3"
+ "@floating-ui/core": "^1.5.3",
+ "@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/utils": {
- "version": "0.1.6",
- "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
- "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+ "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"node_modules/@gar/promisify": {
"version": "1.1.3",
@@ -8616,6 +8616,12 @@
}
}
},
+ "node_modules/@lerna/create/node_modules/dedent": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+ "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+ "dev": true
+ },
"node_modules/@lerna/create/node_modules/execa": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
@@ -9893,19 +9899,11 @@
"node": ">=14"
}
},
- "node_modules/@pkgr/utils": {
- "version": "2.4.2",
- "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
- "integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
+ "node_modules/@pkgr/core": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.0.tgz",
+ "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==",
"dev": true,
- "dependencies": {
- "cross-spawn": "^7.0.3",
- "fast-glob": "^3.3.0",
- "is-glob": "^4.0.3",
- "open": "^9.1.0",
- "picocolors": "^1.0.0",
- "tslib": "^2.6.0"
- },
"engines": {
"node": "^12.20.0 || ^14.18.0 || >=16.0.0"
},
@@ -9913,36 +9911,6 @@
"url": "https://opencollective.com/unts"
}
},
- "node_modules/@pkgr/utils/node_modules/define-lazy-prop": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
- "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
- "dev": true,
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/@pkgr/utils/node_modules/open": {
- "version": "9.1.0",
- "resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
- "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
- "dev": true,
- "dependencies": {
- "default-browser": "^4.0.0",
- "define-lazy-prop": "^3.0.0",
- "is-inside-container": "^1.0.0",
- "is-wsl": "^2.2.0"
- },
- "engines": {
- "node": ">=14.16"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/@prettier/sync": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.3.0.tgz",
@@ -16314,6 +16282,7 @@
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
"integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
"dev": true,
+ "optional": true,
"engines": {
"node": ">=0.6"
}
@@ -17250,21 +17219,6 @@
"semver": "^7.0.0"
}
},
- "node_modules/bundle-name": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
- "integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
- "dev": true,
- "dependencies": {
- "run-applescript": "^5.0.0"
- },
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/byte-size": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/byte-size/-/byte-size-8.1.1.tgz",
@@ -17795,9 +17749,9 @@
}
},
"node_modules/chromatic": {
- "version": "6.24.1",
- "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.24.1.tgz",
- "integrity": "sha512-XbpdWWHvFpEHtcq1Km71UcuQ07effB+8q8L47E1Y7HJmJ4ZCoKCuPd8liNrbnvwEAxqfBZvTcONYU/3BPz2i5w==",
+ "version": "10.3.1",
+ "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-10.3.1.tgz",
+ "integrity": "sha512-IHczKH3K3vVeZGE3XyCy/T8EQH2mGUEyQ9QUuULrWlYCfo760cnzehdTjrpuIUetkHtv7noA5Hmn6joQlz3Ufw==",
"dev": true,
"bin": {
"chroma": "dist/bin.js",
@@ -19197,6 +19151,49 @@
"node": ">=0.10.0"
}
},
+ "node_modules/copy-file": {
+ "version": "11.0.0",
+ "resolved": "https://registry.npmjs.org/copy-file/-/copy-file-11.0.0.tgz",
+ "integrity": "sha512-mFsNh/DIANLqFt5VHZoGirdg7bK5+oTWlhnGu6tgRhzBlnEKWaPX2xrFaLltii/6rmhqFMJqffUgknuRdpYlHw==",
+ "dev": true,
+ "dependencies": {
+ "graceful-fs": "^4.2.11",
+ "p-event": "^6.0.0"
+ },
+ "engines": {
+ "node": ">=18"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/copy-file/node_modules/p-event": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/p-event/-/p-event-6.0.0.tgz",
+ "integrity": "sha512-Xbfxd0CfZmHLGKXH32k1JKjQYX6Rkv0UtQdaFJ8OyNcf+c0oWCeXHc1C4CX/IESZLmcvfPa5aFIO/vCr5gqtag==",
+ "dev": true,
+ "dependencies": {
+ "p-timeout": "^6.1.2"
+ },
+ "engines": {
+ "node": ">=16.17"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/copy-file/node_modules/p-timeout": {
+ "version": "6.1.2",
+ "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.2.tgz",
+ "integrity": "sha512-UbD77BuZ9Bc9aABo74gfXhNvzC9Tx7SxtHSh1fxvx3jTLLYvmVhiQZZrJzqqU0jKbN32kb5VOKiLEQI/3bIjgQ==",
+ "dev": true,
+ "engines": {
+ "node": ">=14.16"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/copy-to-clipboard": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
@@ -19283,22 +19280,20 @@
}
},
"node_modules/cpy": {
- "version": "10.1.0",
- "resolved": "https://registry.npmjs.org/cpy/-/cpy-10.1.0.tgz",
- "integrity": "sha512-VC2Gs20JcTyeQob6UViBLnyP0bYHkBh6EiKzot9vi2DmeGlFT9Wd7VG3NBrkNx/jYvFBeyDOMMHdHQhbtKLgHQ==",
+ "version": "11.0.0",
+ "resolved": "https://registry.npmjs.org/cpy/-/cpy-11.0.0.tgz",
+ "integrity": "sha512-vA71mFQyIxCrqvP/9JBLCj05UJV/+WpvAxZK2/EiK5ndD090cjuChfJ3ExVVuZXHoTJ/3HLedOPYDWyxnNHjrg==",
"dev": true,
"dependencies": {
- "arrify": "^3.0.0",
- "cp-file": "^10.0.0",
- "globby": "^13.1.4",
+ "copy-file": "^11.0.0",
+ "globby": "^13.2.2",
"junk": "^4.0.1",
"micromatch": "^4.0.5",
- "nested-error-stacks": "^2.1.1",
"p-filter": "^3.0.0",
"p-map": "^6.0.0"
},
"engines": {
- "node": ">=16"
+ "node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
@@ -19323,6 +19318,59 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/cpy-cli/node_modules/cpy": {
+ "version": "10.1.0",
+ "resolved": "https://registry.npmjs.org/cpy/-/cpy-10.1.0.tgz",
+ "integrity": "sha512-VC2Gs20JcTyeQob6UViBLnyP0bYHkBh6EiKzot9vi2DmeGlFT9Wd7VG3NBrkNx/jYvFBeyDOMMHdHQhbtKLgHQ==",
+ "dev": true,
+ "dependencies": {
+ "arrify": "^3.0.0",
+ "cp-file": "^10.0.0",
+ "globby": "^13.1.4",
+ "junk": "^4.0.1",
+ "micromatch": "^4.0.5",
+ "nested-error-stacks": "^2.1.1",
+ "p-filter": "^3.0.0",
+ "p-map": "^6.0.0"
+ },
+ "engines": {
+ "node": ">=16"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/cpy-cli/node_modules/globby": {
+ "version": "13.2.2",
+ "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+ "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
+ "dev": true,
+ "dependencies": {
+ "dir-glob": "^3.0.1",
+ "fast-glob": "^3.3.0",
+ "ignore": "^5.2.4",
+ "merge2": "^1.4.1",
+ "slash": "^4.0.0"
+ },
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/cpy-cli/node_modules/slash": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+ "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+ "dev": true,
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/cpy/node_modules/globby": {
"version": "13.2.2",
"resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
@@ -19741,12 +19789,12 @@
}
},
"node_modules/cspell-config-lib": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/cspell-config-lib/-/cspell-config-lib-8.2.3.tgz",
- "integrity": "sha512-ATbOR06GKBIFM5SPKMF4fgo5G2qmOfdV8TbpyzNtw1AGL7PoOgDNFiKSutEzO5EHyZuXE71ZFxH3rVr2gIV7Dw==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/cspell-config-lib/-/cspell-config-lib-8.3.2.tgz",
+ "integrity": "sha512-Wc98XhBNLwDxnxCzMtgRJALI9a69cu3C5Gf1rGjNTKSFo9JYiQmju0Ur3z25Pkx9Sa86f+2IjvNCf33rUDSoBQ==",
"dev": true,
"dependencies": {
- "@cspell/cspell-types": "8.2.3",
+ "@cspell/cspell-types": "8.3.2",
"comment-json": "^4.2.3",
"yaml": "^2.3.4"
},
@@ -19764,14 +19812,14 @@
}
},
"node_modules/cspell-dictionary": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/cspell-dictionary/-/cspell-dictionary-8.2.3.tgz",
- "integrity": "sha512-M/idc3TLjYMpT4+8PlIg7kzoeGkR7o6h6pTwRfy/ZkBkEaV+U/35ZtVLO4qjxnuX6wrmawYmHhYqgzyKLEJIhw==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/cspell-dictionary/-/cspell-dictionary-8.3.2.tgz",
+ "integrity": "sha512-xyK95hO2BMPFxIo8zBwGml8035qOxSBdga1BMhwW/p2wDrQP8S4Cdm/54//tCDmKn6uRkFQvyOfWGaX2l8WMEg==",
"dev": true,
"dependencies": {
- "@cspell/cspell-pipe": "8.2.3",
- "@cspell/cspell-types": "8.2.3",
- "cspell-trie-lib": "8.2.3",
+ "@cspell/cspell-pipe": "8.3.2",
+ "@cspell/cspell-types": "8.3.2",
+ "cspell-trie-lib": "8.3.2",
"fast-equals": "^5.0.1",
"gensequence": "^6.0.0"
},
@@ -19780,9 +19828,9 @@
}
},
"node_modules/cspell-glob": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/cspell-glob/-/cspell-glob-8.2.3.tgz",
- "integrity": "sha512-byP2kBblO5d9rZr73MPor+KfoFdry4uu/MQmwLiK5mxgmokZYv5GVDX2DrO16Ni4yJ6/2rBPWLfq+DfCXSWqyw==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/cspell-glob/-/cspell-glob-8.3.2.tgz",
+ "integrity": "sha512-KtIFxE+3l5dGEofND4/CdZffXP8XN1+XGQKxJ96lIzWsc01mkotfhxTkla6mgvfH039t7BsY/SWv0460KyGslQ==",
"dev": true,
"dependencies": {
"micromatch": "^4.0.5"
@@ -19792,13 +19840,13 @@
}
},
"node_modules/cspell-grammar": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/cspell-grammar/-/cspell-grammar-8.2.3.tgz",
- "integrity": "sha512-z57Qyu24BsHHp/nZ9ftN377cSCgSJg+6oywIglau7ws7vRpUgYKVoKxn+ZJfOrIZpXfZUqgph5IwAGFI+aRN6w==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/cspell-grammar/-/cspell-grammar-8.3.2.tgz",
+ "integrity": "sha512-tYCkOmRzJe1a6/R+8QGSwG7TwTgznLPqsHtepKzLmnS4YX54VXjKRI9zMARxXDzUVfyCSVdW5MyiY/0WTNoy+A==",
"dev": true,
"dependencies": {
- "@cspell/cspell-pipe": "8.2.3",
- "@cspell/cspell-types": "8.2.3"
+ "@cspell/cspell-pipe": "8.3.2",
+ "@cspell/cspell-types": "8.3.2"
},
"bin": {
"cspell-grammar": "bin.mjs"
@@ -19808,38 +19856,38 @@
}
},
"node_modules/cspell-io": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/cspell-io/-/cspell-io-8.2.3.tgz",
- "integrity": "sha512-mPbLXiIje9chncy/Xb9C6AxqjJm9AFHz/nmIIP5bc6gd4w/yaGlQNyO8jjHF1u2JBVbIxPQSMjFgEuqasPy4Sg==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/cspell-io/-/cspell-io-8.3.2.tgz",
+ "integrity": "sha512-WYpKsyBCQP0SY4gXnhW5fPuxcYchKYKG1PIXVV3ezFU4muSgW6GuLNbGuSfwv/8YNXRgFSN0e3hYH0rdBK2Aow==",
"dev": true,
"dependencies": {
- "@cspell/cspell-service-bus": "8.2.3"
+ "@cspell/cspell-service-bus": "8.3.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/cspell-lib": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/cspell-lib/-/cspell-lib-8.2.3.tgz",
- "integrity": "sha512-NA4FsGomGPNp15TWbXx13bfknLGU8B66j0QlU3i4oDrWBj/t5m7O1nmiQqcaDSKd9s5HtdTHfxLc83hdzmmizg==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/cspell-lib/-/cspell-lib-8.3.2.tgz",
+ "integrity": "sha512-wTvdaev/TyGB/ln6CVD1QbVs2D7/+QiajQ67S7yj1suLHM6YcNQQb/5sPAM8VPtj0E7PgwgPXf3bq18OtPvnFg==",
"dev": true,
"dependencies": {
- "@cspell/cspell-bundled-dicts": "8.2.3",
- "@cspell/cspell-pipe": "8.2.3",
- "@cspell/cspell-resolver": "8.2.3",
- "@cspell/cspell-types": "8.2.3",
- "@cspell/dynamic-import": "8.2.3",
- "@cspell/strong-weak-map": "8.2.3",
+ "@cspell/cspell-bundled-dicts": "8.3.2",
+ "@cspell/cspell-pipe": "8.3.2",
+ "@cspell/cspell-resolver": "8.3.2",
+ "@cspell/cspell-types": "8.3.2",
+ "@cspell/dynamic-import": "8.3.2",
+ "@cspell/strong-weak-map": "8.3.2",
"clear-module": "^4.1.2",
"comment-json": "^4.2.3",
"configstore": "^6.0.0",
- "cspell-config-lib": "8.2.3",
- "cspell-dictionary": "8.2.3",
- "cspell-glob": "8.2.3",
- "cspell-grammar": "8.2.3",
- "cspell-io": "8.2.3",
- "cspell-trie-lib": "8.2.3",
+ "cspell-config-lib": "8.3.2",
+ "cspell-dictionary": "8.3.2",
+ "cspell-glob": "8.3.2",
+ "cspell-grammar": "8.3.2",
+ "cspell-io": "8.3.2",
+ "cspell-trie-lib": "8.3.2",
"fast-equals": "^5.0.1",
"gensequence": "^6.0.0",
"import-fresh": "^3.3.0",
@@ -19852,13 +19900,13 @@
}
},
"node_modules/cspell-trie-lib": {
- "version": "8.2.3",
- "resolved": "https://registry.npmjs.org/cspell-trie-lib/-/cspell-trie-lib-8.2.3.tgz",
- "integrity": "sha512-yN2PwceN9ViCjXUhhi3MTWfi15Rpc9CsSFFPV3A6cOWoB0qBnuTXk8hBSx+427UGYjtlXPP6EZKY8w8OK6PweA==",
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/cspell-trie-lib/-/cspell-trie-lib-8.3.2.tgz",
+ "integrity": "sha512-8qh2FqzkLMwzlTlvO/5Z+89fhi30rrfekocpight/BmqKbE2XFJQD7wS2ml24e7q/rdHJLXVpJbY/V5mByucCA==",
"dev": true,
"dependencies": {
- "@cspell/cspell-pipe": "8.2.3",
- "@cspell/cspell-types": "8.2.3",
+ "@cspell/cspell-pipe": "8.3.2",
+ "@cspell/cspell-types": "8.3.2",
"gensequence": "^6.0.0"
},
"engines": {
@@ -20251,10 +20299,18 @@
}
},
"node_modules/dedent": {
- "version": "0.7.0",
- "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
- "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
- "dev": true
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz",
+ "integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
+ "dev": true,
+ "peerDependencies": {
+ "babel-plugin-macros": "^3.1.0"
+ },
+ "peerDependenciesMeta": {
+ "babel-plugin-macros": {
+ "optional": true
+ }
+ }
},
"node_modules/deep-equal": {
"version": "2.2.3",
@@ -20311,24 +20367,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/default-browser": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
- "integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
- "dev": true,
- "dependencies": {
- "bundle-name": "^3.0.0",
- "default-browser-id": "^3.0.0",
- "execa": "^7.1.1",
- "titleize": "^3.0.0"
- },
- "engines": {
- "node": ">=14.16"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/default-browser-id": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-1.0.4.tgz",
@@ -20620,153 +20658,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/default-browser/node_modules/bplist-parser": {
- "version": "0.2.0",
- "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
- "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
- "dev": true,
- "dependencies": {
- "big-integer": "^1.6.44"
- },
- "engines": {
- "node": ">= 5.10.0"
- }
- },
- "node_modules/default-browser/node_modules/default-browser-id": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
- "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
- "dev": true,
- "dependencies": {
- "bplist-parser": "^0.2.0",
- "untildify": "^4.0.0"
- },
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/default-browser/node_modules/execa": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
- "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
- "dev": true,
- "dependencies": {
- "cross-spawn": "^7.0.3",
- "get-stream": "^6.0.1",
- "human-signals": "^4.3.0",
- "is-stream": "^3.0.0",
- "merge-stream": "^2.0.0",
- "npm-run-path": "^5.1.0",
- "onetime": "^6.0.0",
- "signal-exit": "^3.0.7",
- "strip-final-newline": "^3.0.0"
- },
- "engines": {
- "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
- },
- "funding": {
- "url": "https://github.com/sindresorhus/execa?sponsor=1"
- }
- },
- "node_modules/default-browser/node_modules/human-signals": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
- "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
- "dev": true,
- "engines": {
- "node": ">=14.18.0"
- }
- },
- "node_modules/default-browser/node_modules/is-stream": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
- "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
- "dev": true,
- "engines": {
- "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/default-browser/node_modules/mimic-fn": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
- "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
- "dev": true,
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/default-browser/node_modules/npm-run-path": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
- "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
- "dev": true,
- "dependencies": {
- "path-key": "^4.0.0"
- },
- "engines": {
- "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/default-browser/node_modules/onetime": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
- "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
- "dev": true,
- "dependencies": {
- "mimic-fn": "^4.0.0"
- },
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/default-browser/node_modules/path-key": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
- "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
- "dev": true,
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/default-browser/node_modules/strip-final-newline": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
- "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
- "dev": true,
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/default-browser/node_modules/untildify": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
- "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
- "dev": true,
- "engines": {
- "node": ">=8"
- }
- },
"node_modules/default-gateway": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
@@ -23737,9 +23628,9 @@
}
},
"node_modules/follow-redirects": {
- "version": "1.15.3",
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
- "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+ "version": "1.15.4",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+ "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
"dev": true,
"funding": [
{
@@ -26702,39 +26593,6 @@
"url": "https://github.com/sponsors/wooorm"
}
},
- "node_modules/is-inside-container": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
- "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
- "dev": true,
- "dependencies": {
- "is-docker": "^3.0.0"
- },
- "bin": {
- "is-inside-container": "cli.js"
- },
- "engines": {
- "node": ">=14.16"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/is-inside-container/node_modules/is-docker": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
- "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
- "dev": true,
- "bin": {
- "is-docker": "cli.js"
- },
- "engines": {
- "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/is-installed-globally": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -27672,20 +27530,6 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
- "node_modules/jest-circus/node_modules/dedent": {
- "version": "1.5.1",
- "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz",
- "integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
- "dev": true,
- "peerDependencies": {
- "babel-plugin-macros": "^3.1.0"
- },
- "peerDependenciesMeta": {
- "babel-plugin-macros": {
- "optional": true
- }
- }
- },
"node_modules/jest-circus/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -30420,6 +30264,12 @@
}
}
},
+ "node_modules/lerna/node_modules/dedent": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+ "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+ "dev": true
+ },
"node_modules/lerna/node_modules/execa": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
@@ -39048,21 +38898,6 @@
"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
"dev": true
},
- "node_modules/run-applescript": {
- "version": "5.0.0",
- "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
- "integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
- "dev": true,
- "dependencies": {
- "execa": "^5.0.0"
- },
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/run-async": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -41930,12 +41765,12 @@
"dev": true
},
"node_modules/synckit": {
- "version": "0.8.6",
- "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.6.tgz",
- "integrity": "sha512-laHF2savN6sMeHCjLRkheIU4wo3Zg9Ln5YOjOo7sZ5dVQW8yF5pPE5SIw1dsPhq3TRp1jisKRCdPhfs/1WMqDA==",
+ "version": "0.8.8",
+ "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
+ "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
"dev": true,
"dependencies": {
- "@pkgr/utils": "^2.4.2",
+ "@pkgr/core": "^0.1.0",
"tslib": "^2.6.2"
},
"engines": {
@@ -42789,18 +42624,6 @@
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
"dev": true
},
- "node_modules/titleize": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
- "integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
- "dev": true,
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -47192,10 +47015,10 @@
},
"packages/calcite-components": {
"name": "@esri/calcite-components",
- "version": "2.2.0-next.17",
+ "version": "2.3.0",
"license": "SEE LICENSE.md",
"dependencies": {
- "@floating-ui/dom": "1.5.3",
+ "@floating-ui/dom": "1.5.4",
"@stencil/core": "4.9.0",
"@types/color": "3.0.6",
"color": "4.2.3",
@@ -47208,8 +47031,8 @@
"timezone-groups": "0.8.0"
},
"devDependencies": {
- "@esri/calcite-design-tokens": "^2.1.1-next.4",
- "@esri/calcite-ui-icons": "3.25.3",
+ "@esri/calcite-design-tokens": "^2.1.2-next.0",
+ "@esri/calcite-ui-icons": "3.25.6",
"@esri/eslint-plugin-calcite-components": "^1.0.1-next.2",
"@stencil-community/eslint-plugin": "0.7.1",
"@stencil-community/postcss": "2.2.0",
@@ -47243,10 +47066,10 @@
},
"packages/calcite-components-angular/projects/component-library": {
"name": "@esri/calcite-components-angular",
- "version": "2.2.0-next.17",
+ "version": "2.3.0",
"license": "SEE LICENSE.md",
"dependencies": {
- "@esri/calcite-components": "^2.2.0-next.17",
+ "@esri/calcite-components": "^2.3.0",
"tslib": "2.6.2"
},
"peerDependencies": {
@@ -47256,10 +47079,10 @@
},
"packages/calcite-components-react": {
"name": "@esri/calcite-components-react",
- "version": "2.2.0-next.17",
+ "version": "2.3.0",
"license": "SEE LICENSE.md",
"dependencies": {
- "@esri/calcite-components": "^2.2.0-next.17"
+ "@esri/calcite-components": "^2.3.0"
},
"peerDependencies": {
"react": ">=16.7",
@@ -47268,7 +47091,7 @@
},
"packages/calcite-design-tokens": {
"name": "@esri/calcite-design-tokens",
- "version": "2.1.1-next.4",
+ "version": "2.1.2-next.0",
"devDependencies": {
"ts-jest-resolver": "2.0.1",
"ts-node": "10.9.2"
diff --git a/package.json b/package.json
index 3433fd2b4d9..093370ad112 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
},
"devDependencies": {
"@babel/preset-react": "7.23.3",
- "@cspell/eslint-plugin": "8.2.3",
+ "@cspell/eslint-plugin": "8.3.2",
"@esri/calcite-base": "1.2.0",
"@esri/calcite-colors": "6.1.0",
"@prettier/sync": "0.3.0",
@@ -68,12 +68,12 @@
"change-case": "4.1.2",
"cheerio": "1.0.0-rc.10",
"chokidar": "3.5.3",
- "chromatic": "6.24.1",
+ "chromatic": "10.3.1",
"concurrently": "7.6.0",
"conventional-changelog-conventionalcommits": "5.0.0",
- "cpy": "10.1.0",
+ "cpy": "11.0.0",
"cpy-cli": "5.0.0",
- "dedent": "0.7.0",
+ "dedent": "1.5.1",
"eslint": "8.56.0",
"eslint-config-prettier": "8.10.0",
"eslint-plugin-import": "2.29.1",
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
index 64a75748bee..b9097612433 100644
--- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
+++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,77 +3,29 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-## [2.2.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.16...@esri/calcite-components-angular@2.2.0-next.17) (2024-01-11)
+## [2.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0...@esri/calcite-components-angular@2.3.0) (2024-01-24)
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.15...@esri/calcite-components-angular@2.2.0-next.16) (2024-01-10)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.14...@esri/calcite-components-angular@2.2.0-next.15) (2024-01-10)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.13...@esri/calcite-components-angular@2.2.0-next.14) (2024-01-09)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.12...@esri/calcite-components-angular@2.2.0-next.13) (2024-01-09)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.11...@esri/calcite-components-angular@2.2.0-next.12) (2024-01-09)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.10...@esri/calcite-components-angular@2.2.0-next.11) (2024-01-05)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.9...@esri/calcite-components-angular@2.2.0-next.10) (2024-01-02)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.8...@esri/calcite-components-angular@2.2.0-next.9) (2024-01-02)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.7...@esri/calcite-components-angular@2.2.0-next.8) (2023-12-28)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.6...@esri/calcite-components-angular@2.2.0-next.7) (2023-12-28)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.5...@esri/calcite-components-angular@2.2.0-next.6) (2023-12-27)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.4...@esri/calcite-components-angular@2.2.0-next.5) (2023-12-27)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
-
-## [2.2.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.3...@esri/calcite-components-angular@2.2.0-next.4) (2023-12-21)
-
-**Note:** Version bump only for package @esri/calcite-components-angular
+### Miscellaneous Chores
-## [2.2.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.2...@esri/calcite-components-angular@2.2.0-next.3) (2023-12-21)
+- **@esri/calcite-components-angular:** Synchronize undefined versions
-**Note:** Version bump only for package @esri/calcite-components-angular
+### Dependencies
-## [2.2.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.1...@esri/calcite-components-angular@2.2.0-next.2) (2023-12-20)
+- The following workspace dependencies were updated
+ - dependencies
+ - @esri/calcite-components bumped from ^2.3.0-next.1 to ^2.3.0
-**Note:** Version bump only for package @esri/calcite-components-angular
+## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.1.0...@esri/calcite-components-angular@2.2.0) (2024-01-17)
-## [2.2.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.0...@esri/calcite-components-angular@2.2.0-next.1) (2023-12-20)
+### Miscellaneous Chores
-**Note:** Version bump only for package @esri/calcite-components-angular
+- **@esri/calcite-components-angular:** Synchronize undefined versions
-## [2.2.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.1.0...@esri/calcite-components-angular@2.2.0-next.0) (2023-12-19)
+### Dependencies
-**Note:** Version bump only for package @esri/calcite-components-angular
+- The following workspace dependencies were updated
+ - dependencies
+ - @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0
## [2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.0.0...@esri/calcite-components-angular@2.1.0) (2023-12-19)
diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
index ddaaf7e18a9..9538e9909da 100644
--- a/packages/calcite-components-angular/projects/component-library/package.json
+++ b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
{
"name": "@esri/calcite-components-angular",
- "version": "2.2.0-next.17",
+ "version": "2.3.0",
"sideEffects": false,
"homepage": "https://developers.arcgis.com/calcite-design-system/",
"description": "A set of Angular components that wrap Esri's Calcite Components.",
@@ -20,7 +20,7 @@
"@angular/core": ">=16.0.0"
},
"dependencies": {
- "@esri/calcite-components": "^2.2.0-next.17",
+ "@esri/calcite-components": "^2.3.0",
"tslib": "2.6.2"
},
"lerna": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index c6436225f87..79ec329ecc4 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,77 +3,29 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-## [2.2.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.16...@esri/calcite-components-react@2.2.0-next.17) (2024-01-11)
+## [2.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0...@esri/calcite-components-react@2.3.0) (2024-01-24)
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.15...@esri/calcite-components-react@2.2.0-next.16) (2024-01-10)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.14...@esri/calcite-components-react@2.2.0-next.15) (2024-01-10)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.13...@esri/calcite-components-react@2.2.0-next.14) (2024-01-09)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.12...@esri/calcite-components-react@2.2.0-next.13) (2024-01-09)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.11...@esri/calcite-components-react@2.2.0-next.12) (2024-01-09)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.10...@esri/calcite-components-react@2.2.0-next.11) (2024-01-05)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.9...@esri/calcite-components-react@2.2.0-next.10) (2024-01-02)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.8...@esri/calcite-components-react@2.2.0-next.9) (2024-01-02)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.7...@esri/calcite-components-react@2.2.0-next.8) (2023-12-28)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.6...@esri/calcite-components-react@2.2.0-next.7) (2023-12-28)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.5...@esri/calcite-components-react@2.2.0-next.6) (2023-12-27)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.4...@esri/calcite-components-react@2.2.0-next.5) (2023-12-27)
-
-**Note:** Version bump only for package @esri/calcite-components-react
-
-## [2.2.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.3...@esri/calcite-components-react@2.2.0-next.4) (2023-12-21)
-
-**Note:** Version bump only for package @esri/calcite-components-react
+### Miscellaneous Chores
-## [2.2.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.2...@esri/calcite-components-react@2.2.0-next.3) (2023-12-21)
+- **@esri/calcite-components-react:** Synchronize undefined versions
-**Note:** Version bump only for package @esri/calcite-components-react
+### Dependencies
-## [2.2.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.1...@esri/calcite-components-react@2.2.0-next.2) (2023-12-20)
+- The following workspace dependencies were updated
+ - dependencies
+ - @esri/calcite-components bumped from ^2.3.0-next.1 to ^2.3.0
-**Note:** Version bump only for package @esri/calcite-components-react
+## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.1.0...@esri/calcite-components-react@2.2.0) (2024-01-17)
-## [2.2.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.0...@esri/calcite-components-react@2.2.0-next.1) (2023-12-20)
+### Miscellaneous Chores
-**Note:** Version bump only for package @esri/calcite-components-react
+- **@esri/calcite-components-react:** Synchronize undefined versions
-## [2.2.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.1.0...@esri/calcite-components-react@2.2.0-next.0) (2023-12-19)
+### Dependencies
-**Note:** Version bump only for package @esri/calcite-components-react
+- The following workspace dependencies were updated
+ - dependencies
+ - @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0
## [2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.0.0...@esri/calcite-components-react@2.1.0) (2023-12-19)
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index 38be8989eb5..a3822f3b05b 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
{
"name": "@esri/calcite-components-react",
"sideEffects": false,
- "version": "2.2.0-next.17",
+ "version": "2.3.0",
"homepage": "https://developers.arcgis.com/calcite-design-system/",
"description": "A set of React components that wrap calcite components",
"license": "SEE LICENSE.md",
@@ -23,7 +23,7 @@
"dist/"
],
"dependencies": {
- "@esri/calcite-components": "^2.2.0-next.17"
+ "@esri/calcite-components": "^2.3.0"
},
"peerDependencies": {
"react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index 21b6a91b997..c1728338c96 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,135 +3,71 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-## [2.2.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.16...@esri/calcite-components@2.2.0-next.17) (2024-01-11)
+## [2.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0...@esri/calcite-components@2.3.0) (2024-01-24)
### Features
-- reflect validationIcon property ([#8583](https://github.com/Esri/calcite-design-system/issues/8583)) ([b3d38b3](https://github.com/Esri/calcite-design-system/commit/b3d38b3dcb699c28e36ca32f600117274a36c56b)), closes [#8057](https://github.com/Esri/calcite-design-system/issues/8057) [/github.com/Esri/calcite-design-system/pull/8561#issuecomment-1884074225](https://github.com/Esri//github.com/Esri/calcite-design-system/pull/8561/issues/issuecomment-1884074225) [/github.com/Esri/calcite-design-system/pull/8561#issuecomment-1879355882](https://github.com/Esri//github.com/Esri/calcite-design-system/pull/8561/issues/issuecomment-1879355882)
-
-## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.15...@esri/calcite-components@2.2.0-next.16) (2024-01-10)
-
-### Features
-
-- **tabs:** emit selection-related events when selection is modified after closing the selected tab ([#8582](https://github.com/Esri/calcite-design-system/issues/8582)) ([b15c940](https://github.com/Esri/calcite-design-system/commit/b15c940777c6a3ae503a904377d65d80d9a8855b)), closes [#7221](https://github.com/Esri/calcite-design-system/issues/7221)
-
-## [2.2.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.14...@esri/calcite-components@2.2.0-next.15) (2024-01-10)
-
-### Features
-
-- **action-menu:** Close menu on blur instead of on tab key. ([#8577](https://github.com/Esri/calcite-design-system/issues/8577)) ([ccfbd0c](https://github.com/Esri/calcite-design-system/commit/ccfbd0c69f3f83149808f16dfaa389dc463c2442))
+- **action-bar, action-pad, block, flow-item, panel:** Add `overlayPositioning` prop for built-in menus ([#8633](https://github.com/Esri/calcite-design-system/issues/8633)) ([714b889](https://github.com/Esri/calcite-design-system/commit/714b88949cbb66c0acfd360a785e4af34ea54d3e))
+- **tab:** Add `--calcite-tab-content-block-padding` to override built-in block-padding ([#8629](https://github.com/Esri/calcite-design-system/issues/8629)) ([7dae525](https://github.com/Esri/calcite-design-system/commit/7dae525d45a429e7b5c2d1b285ff474525d3113b))
### Bug Fixes
-- **input, input-number:** support setting value property to Infinity ([#8547](https://github.com/Esri/calcite-design-system/issues/8547)) ([f6ac698](https://github.com/Esri/calcite-design-system/commit/f6ac698435fd0a28d22d8f410ab5a45c1c951c00)), closes [#7866](https://github.com/Esri/calcite-design-system/issues/7866)
+- **action-menu:** Clicking an action menu item should call click event. ([#8627](https://github.com/Esri/calcite-design-system/issues/8627)) ([b12ef6b](https://github.com/Esri/calcite-design-system/commit/b12ef6bf2cd8c9587c1f5b3aeab890d21336ffd4))
+- **list-item:** Always show hover and pointer styling ([#8622](https://github.com/Esri/calcite-design-system/issues/8622)) ([4a8a91a](https://github.com/Esri/calcite-design-system/commit/4a8a91ae7fed59203f856b005974d5bca4771cf1))
-## [2.2.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.13...@esri/calcite-components@2.2.0-next.14) (2024-01-09)
-
-### Bug Fixes
-
-- **color-picker:** emit color change when nudging color channels by using the shift key ([#8579](https://github.com/Esri/calcite-design-system/issues/8579)) ([4250598](https://github.com/Esri/calcite-design-system/commit/425059871e3ecb9a6b73e4592e3a2f695891336b)), closes [#7351](https://github.com/Esri/calcite-design-system/issues/7351)
-
-## [2.2.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.12...@esri/calcite-components@2.2.0-next.13) (2024-01-09)
+## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.1.0...@esri/calcite-components@2.2.0) (2024-01-17)
### Features
-- **checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select:** add required property ([#8517](https://github.com/Esri/calcite-design-system/issues/8517)) ([72a1ce4](https://github.com/Esri/calcite-design-system/commit/72a1ce4dd8d94ed092c4c24c37e7209eff67e544)), closes [#8057](https://github.com/Esri/calcite-design-system/issues/8057)
-- **list:** Add "filter-no-results" slot to display content when no filtered items are shown ([#8569](https://github.com/Esri/calcite-design-system/issues/8569)) ([f1fc7f6](https://github.com/Esri/calcite-design-system/commit/f1fc7f678e35927f1ef189e581c2713967367ff0)), closes [#8564](https://github.com/Esri/calcite-design-system/issues/8564)
-
-## [2.2.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.11...@esri/calcite-components@2.2.0-next.12) (2024-01-09)
-
-### Bug Fixes
-
-- **action:** update component tokens to support transparent ([#8532](https://github.com/Esri/calcite-design-system/issues/8532)) ([81cb5cc](https://github.com/Esri/calcite-design-system/commit/81cb5cc58d082c5d62d91a5dcaa5cfa8d993e626)), closes [#8519](https://github.com/Esri/calcite-design-system/issues/8519)
-- **input, input-number, input-text:** restore focus on input after browser validation error is displayed and user continues typing ([#8563](https://github.com/Esri/calcite-design-system/issues/8563)) ([5897965](https://github.com/Esri/calcite-design-system/commit/5897965a917dc0e329658de43670cc7fd020bd9c)), closes [#8072](https://github.com/Esri/calcite-design-system/issues/8072)
-
-## [2.2.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.10...@esri/calcite-components@2.2.0-next.11) (2024-01-05)
-
-### Bug Fixes
-
-- **button:** avoid needlessly overwriting title ([#8491](https://github.com/Esri/calcite-design-system/issues/8491)) ([350a983](https://github.com/Esri/calcite-design-system/commit/350a9836ec6b3ee541f0fbb10954589b65f14a13)), closes [#8417](https://github.com/Esri/calcite-design-system/issues/8417)
-- **input-date-picker:** ensure range icon toggles open corresponding date-picker ([#8554](https://github.com/Esri/calcite-design-system/issues/8554)) ([cfafd15](https://github.com/Esri/calcite-design-system/commit/cfafd158af72a7393793ec845ea457bdf2a14451)), closes [#7965](https://github.com/Esri/calcite-design-system/issues/7965)
-- **list, list-item, list-item-group:** honor hidden attribute on list-item and list-item-group ([#8541](https://github.com/Esri/calcite-design-system/issues/8541)) ([3851dc6](https://github.com/Esri/calcite-design-system/commit/3851dc63c60dd0ca44ca26406a9c4e5c5f552853)), closes [#8539](https://github.com/Esri/calcite-design-system/issues/8539)
-
-## [2.2.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.9...@esri/calcite-components@2.2.0-next.10) (2024-01-02)
-
-### Features
-
-- **list-item:** Add dragSelected property and calciteListItemDragHandleChange event ([#8524](https://github.com/Esri/calcite-design-system/issues/8524)) ([4db2eb7](https://github.com/Esri/calcite-design-system/commit/4db2eb7a33efb7ec8075596f1439760264ed75fb)), closes [#8523](https://github.com/Esri/calcite-design-system/issues/8523) [#8484](https://github.com/Esri/calcite-design-system/issues/8484)
-
-## [2.2.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.8...@esri/calcite-components@2.2.0-next.9) (2024-01-02)
-
-### Features
-
-- **handle:** add selected property and calciteHandleChange event. ([#8484](https://github.com/Esri/calcite-design-system/issues/8484)) ([d2e9880](https://github.com/Esri/calcite-design-system/commit/d2e9880e7d6949d16f6499151442e09986e7f8b0)), closes [#8522](https://github.com/Esri/calcite-design-system/issues/8522) [#8483](https://github.com/Esri/calcite-design-system/issues/8483)
-- **list:** Introduce clearer unselected state ([#8510](https://github.com/Esri/calcite-design-system/issues/8510)) ([f1e836c](https://github.com/Esri/calcite-design-system/commit/f1e836c46af1411853b81c681e41428211e0d900)), closes [#6700](https://github.com/Esri/calcite-design-system/issues/6700)
-
-### Bug Fixes
-
-- **input-date-picker:** hard to reproduce numbering-system caching issue ([#8518](https://github.com/Esri/calcite-design-system/issues/8518)) ([5f4fa3e](https://github.com/Esri/calcite-design-system/commit/5f4fa3ed0a7f92b463be475476145b201c68b372)), closes [#7958](https://github.com/Esri/calcite-design-system/issues/7958)
-
-## [2.2.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.7...@esri/calcite-components@2.2.0-next.8) (2023-12-28)
-
-### Bug Fixes
-
-- **table:** Fix double border on `bordered` Table Rows in `table-footer` ([#8509](https://github.com/Esri/calcite-design-system/issues/8509)) ([c16ea33](https://github.com/Esri/calcite-design-system/commit/c16ea335c1d3b8663e4a0f51012d071f93c1b476)), closes [#8508](https://github.com/Esri/calcite-design-system/issues/8508)
-
-## [2.2.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.6...@esri/calcite-components@2.2.0-next.7) (2023-12-28)
-
-### Features
-
-- **handle:** Add `blurUnselectDisabled` property to disable unselecting handle on blur. ([#8483](https://github.com/Esri/calcite-design-system/issues/8483)) ([4d665cc](https://github.com/Esri/calcite-design-system/commit/4d665cc2eff668bb0278c0a3a16a0a6bd4d98776)), closes [#8485](https://github.com/Esri/calcite-design-system/issues/8485)
-
-## [2.2.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.5...@esri/calcite-components@2.2.0-next.6) (2023-12-27)
-
-### Bug Fixes
-
-- **list-item:** store last focused cell from focusing on elements within a cell. ([#8494](https://github.com/Esri/calcite-design-system/issues/8494)) ([28f93b4](https://github.com/Esri/calcite-design-system/commit/28f93b43036affcdb29d07c12f0cb910329d4b8c)), closes [#8493](https://github.com/Esri/calcite-design-system/issues/8493)
-
-## [2.2.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.4...@esri/calcite-components@2.2.0-next.5) (2023-12-27)
-
-### Bug Fixes
-
-- **list:** correct selectedItems value when list is filtered ([#8481](https://github.com/Esri/calcite-design-system/issues/8481)) ([9de1922](https://github.com/Esri/calcite-design-system/commit/9de192221f3040a0c9e58bbace1794ac16515a71)), closes [#8468](https://github.com/Esri/calcite-design-system/issues/8468)
-
-## [2.2.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.3...@esri/calcite-components@2.2.0-next.4) (2023-12-21)
-
-### Bug Fixes
-
-- **list:** fix keyboard arrow navigation ([#8470](https://github.com/Esri/calcite-design-system/issues/8470)) ([57fdaa4](https://github.com/Esri/calcite-design-system/commit/57fdaa4392b29890be6e5af439168b621b3b5a9e)), closes [#8464](https://github.com/Esri/calcite-design-system/issues/8464)
-
-## [2.2.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.2...@esri/calcite-components@2.2.0-next.3) (2023-12-21)
-
-### Bug Fixes
-
-- **table:** Improve Table overflow behavior ([#8424](https://github.com/Esri/calcite-design-system/issues/8424)) ([79743e1](https://github.com/Esri/calcite-design-system/commit/79743e1710d88b99e31627a41a82524bdbcbc69f)), closes [#7677](https://github.com/Esri/calcite-design-system/issues/7677) [#7677](https://github.com/Esri/calcite-design-system/issues/7677) [#7677](https://github.com/Esri/calcite-design-system/issues/7677) [/github.com/Esri/calcite-design-system/issues/7677#issuecomment-1856176584](https://github.com/Esri//github.com/Esri/calcite-design-system/issues/7677/issues/issuecomment-1856176584)
+- **action-menu:** Close menu on blur instead of on tab key. ([#8577](https://github.com/Esri/calcite-design-system/issues/8577)) ([ccfbd0c](https://github.com/Esri/calcite-design-system/commit/ccfbd0c69f3f83149808f16dfaa389dc463c2442))
+- **checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select:** Add required property ([#8517](https://github.com/Esri/calcite-design-system/issues/8517)) ([72a1ce4](https://github.com/Esri/calcite-design-system/commit/72a1ce4dd8d94ed092c4c24c37e7209eff67e544))
+- **handle, block, list-item:** Improve drag handle tooltip to include item label ([#8584](https://github.com/Esri/calcite-design-system/issues/8584)) ([6e643e2](https://github.com/Esri/calcite-design-system/commit/6e643e2f5384174d6b56233230b92a3b7716abab))
+- **handle:** Add `blurUnselectDisabled` property to disable unselecting handle on blur. ([#8483](https://github.com/Esri/calcite-design-system/issues/8483)) ([4d665cc](https://github.com/Esri/calcite-design-system/commit/4d665cc2eff668bb0278c0a3a16a0a6bd4d98776))
+- **handle:** Add selected property and calciteHandleChange event. ([#8484](https://github.com/Esri/calcite-design-system/issues/8484)) ([d2e9880](https://github.com/Esri/calcite-design-system/commit/d2e9880e7d6949d16f6499151442e09986e7f8b0))
+- **list-item:** Add dragSelected property and calciteListItemDragHandleChange event ([#8524](https://github.com/Esri/calcite-design-system/issues/8524)) ([4db2eb7](https://github.com/Esri/calcite-design-system/commit/4db2eb7a33efb7ec8075596f1439760264ed75fb))
+- **list-item:** Add tooltip for expanding and collapsing ([#8612](https://github.com/Esri/calcite-design-system/issues/8612)) ([4964491](https://github.com/Esri/calcite-design-system/commit/49644913539edb5734f064b87a4dcd677474f626))
+- **list:** Add "filter-no-results" slot to display content when no filtered items are shown ([#8569](https://github.com/Esri/calcite-design-system/issues/8569)) ([f1fc7f6](https://github.com/Esri/calcite-design-system/commit/f1fc7f678e35927f1ef189e581c2713967367ff0))
+- **list:** Introduce clearer unselected state ([#8510](https://github.com/Esri/calcite-design-system/issues/8510)) ([f1e836c](https://github.com/Esri/calcite-design-system/commit/f1e836c46af1411853b81c681e41428211e0d900))
+- **radio-button-group, segmented control:** Add validationMessage, validationIcon, and status properties ([#8561](https://github.com/Esri/calcite-design-system/issues/8561)) ([d4c5efc](https://github.com/Esri/calcite-design-system/commit/d4c5efcb088a3fc8cb8c1474caf293bcc43f7602))
+- Reflect validationIcon property ([#8583](https://github.com/Esri/calcite-design-system/issues/8583)) ([b3d38b3](https://github.com/Esri/calcite-design-system/commit/b3d38b3dcb699c28e36ca32f600117274a36c56b))
+- **table-header:** Add style when within a `selected` Table Row ([#8449](https://github.com/Esri/calcite-design-system/issues/8449)) ([13cfe75](https://github.com/Esri/calcite-design-system/commit/13cfe75e0c39f6ab492f5a3eb312c5adc93d18e5))
+- **tabs:** Emit selection-related events when selection is modified after closing the selected tab ([#8582](https://github.com/Esri/calcite-design-system/issues/8582)) ([b15c940](https://github.com/Esri/calcite-design-system/commit/b15c940777c6a3ae503a904377d65d80d9a8855b))
+- **tile:** Add visual scales ([#8496](https://github.com/Esri/calcite-design-system/issues/8496)) ([7638ec4](https://github.com/Esri/calcite-design-system/commit/7638ec43caf4f443514ca89f678076f91c6d0730))
+- Use input-message to display validation messages for invalid fields after form submission ([#8574](https://github.com/Esri/calcite-design-system/issues/8574)) ([fd392fe](https://github.com/Esri/calcite-design-system/commit/fd392fe5658bf1b08c0bbcbdb74b4e3e47a1d360))
+
+### Bug Fixes
+
+- **action:** Update component tokens to support transparent ([#8532](https://github.com/Esri/calcite-design-system/issues/8532)) ([81cb5cc](https://github.com/Esri/calcite-design-system/commit/81cb5cc58d082c5d62d91a5dcaa5cfa8d993e626))
+- Allow users to control tabindex on interactive components ([#8166](https://github.com/Esri/calcite-design-system/issues/8166)) ([b15c052](https://github.com/Esri/calcite-design-system/commit/b15c052335b3c3bcba01cd3a0ec2dfe03588959c))
+- **button:** Avoid needlessly overwriting title ([#8491](https://github.com/Esri/calcite-design-system/issues/8491)) ([350a983](https://github.com/Esri/calcite-design-system/commit/350a9836ec6b3ee541f0fbb10954589b65f14a13))
+- **color-picker:** Emit color change when nudging color channels by using the shift key ([#8579](https://github.com/Esri/calcite-design-system/issues/8579)) ([4250598](https://github.com/Esri/calcite-design-system/commit/425059871e3ecb9a6b73e4592e3a2f695891336b))
+- **combobox:** Only allow deleting visible chips with the keyboard ([#8603](https://github.com/Esri/calcite-design-system/issues/8603)) ([2d38241](https://github.com/Esri/calcite-design-system/commit/2d382413b0e89736410e01f9c95ffe151c15506a))
+- **date-picker:** Prevent console error when selecting just an end date for input date picker ([#8444](https://github.com/Esri/calcite-design-system/issues/8444)) ([c0e51c3](https://github.com/Esri/calcite-design-system/commit/c0e51c393ef0bf52ca6164108df8bcac595bcebd))
+- **filter:** Prevent console warning from displaying to end users ([#8458](https://github.com/Esri/calcite-design-system/issues/8458)) ([0de7646](https://github.com/Esri/calcite-design-system/commit/0de7646aaf9c93923a7e55c02fc396448d2234f2))
+- **input-date-picker:** Ensure range icon toggles open corresponding date-picker ([#8554](https://github.com/Esri/calcite-design-system/issues/8554)) ([cfafd15](https://github.com/Esri/calcite-design-system/commit/cfafd158af72a7393793ec845ea457bdf2a14451))
+- **input-date-picker:** Resolve a hard to reproduce number formatter caching issue that occurred due to the countdown delay in queued Alerts. ([5f4fa3e](https://github.com/Esri/calcite-design-system/commit/5f4fa3ed0a7f92b463be475476145b201c68b372))
+- **input-message:** Add missing margin to scale="s", spacing CSS variable has effect ([#8592](https://github.com/Esri/calcite-design-system/issues/8592)) ([49b0a20](https://github.com/Esri/calcite-design-system/commit/49b0a206eadfa193fa581f8c874a0b957bfb2c88))
+- **input, input-number, input-text:** Restore focus on input after browser validation error is displayed and user continues typing ([#8563](https://github.com/Esri/calcite-design-system/issues/8563)) ([5897965](https://github.com/Esri/calcite-design-system/commit/5897965a917dc0e329658de43670cc7fd020bd9c))
+- **input, input-number:** Support setting value property to Infinity ([#8547](https://github.com/Esri/calcite-design-system/issues/8547)) ([f6ac698](https://github.com/Esri/calcite-design-system/commit/f6ac698435fd0a28d22d8f410ab5a45c1c951c00))
+- **list-item:** Store last focused cell from focusing on elements within a cell. ([#8494](https://github.com/Esri/calcite-design-system/issues/8494)) ([28f93b4](https://github.com/Esri/calcite-design-system/commit/28f93b43036affcdb29d07c12f0cb910329d4b8c))
+- **list, list-item, list-item-group:** Honor hidden attribute on list-item and list-item-group ([#8541](https://github.com/Esri/calcite-design-system/issues/8541)) ([3851dc6](https://github.com/Esri/calcite-design-system/commit/3851dc63c60dd0ca44ca26406a9c4e5c5f552853))
+- **list:** Correct selectedItems value when list is filtered ([#8481](https://github.com/Esri/calcite-design-system/issues/8481)) ([9de1922](https://github.com/Esri/calcite-design-system/commit/9de192221f3040a0c9e58bbace1794ac16515a71))
+- **list:** Fix event detail newIndex when down arrow pressed to sort ([#8462](https://github.com/Esri/calcite-design-system/issues/8462)) ([b3d5169](https://github.com/Esri/calcite-design-system/commit/b3d5169a1aa8cc517ef17b3c4675126925d13603))
+- **list:** Fix keyboard arrow navigation ([#8470](https://github.com/Esri/calcite-design-system/issues/8470)) ([57fdaa4](https://github.com/Esri/calcite-design-system/commit/57fdaa4392b29890be6e5af439168b621b3b5a9e))
+- **modal:** Ensure focus trapping in dynamically created, subsequently opened modals ([#8593](https://github.com/Esri/calcite-design-system/issues/8593)) ([4ec6b94](https://github.com/Esri/calcite-design-system/commit/4ec6b948d4d26a07b6acf92a0c760746fe853162))
+- **table:** Fix double border on `bordered` Table Rows in `table-footer` ([#8509](https://github.com/Esri/calcite-design-system/issues/8509)) ([c16ea33](https://github.com/Esri/calcite-design-system/commit/c16ea335c1d3b8663e4a0f51012d071f93c1b476))
+- **table:** Improve Table overflow behavior ([#8424](https://github.com/Esri/calcite-design-system/issues/8424)) ([79743e1](https://github.com/Esri/calcite-design-system/commit/79743e1710d88b99e31627a41a82524bdbcbc69f))
+- **text-area:** Prevent infinite render loop when `max-length` property is defined ([#8610](https://github.com/Esri/calcite-design-system/issues/8610)) ([f30d933](https://github.com/Esri/calcite-design-system/commit/f30d9330fe4ed071891b2d7b18013c056c5ebc0d))
### Reverts
-- chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper ([#8392](https://github.com/Esri/calcite-design-system/issues/8392)) ([#8471](https://github.com/Esri/calcite-design-system/issues/8471)) ([4bedf99](https://github.com/Esri/calcite-design-system/commit/4bedf99445e5eaeaa48596bee0c95f650db56260))
-
-## [2.2.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.1...@esri/calcite-components@2.2.0-next.2) (2023-12-20)
-
-### Bug Fixes
-
-- **filter:** prevent console warning from displaying to end users ([#8458](https://github.com/Esri/calcite-design-system/issues/8458)) ([0de7646](https://github.com/Esri/calcite-design-system/commit/0de7646aaf9c93923a7e55c02fc396448d2234f2)), closes [#8457](https://github.com/Esri/calcite-design-system/issues/8457)
-
-## [2.2.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.0...@esri/calcite-components@2.2.0-next.1) (2023-12-20)
-
-### Bug Fixes
-
-- allow users to control tabindex on interactive components ([#8166](https://github.com/Esri/calcite-design-system/issues/8166)) ([b15c052](https://github.com/Esri/calcite-design-system/commit/b15c052335b3c3bcba01cd3a0ec2dfe03588959c)), closes [#4970](https://github.com/Esri/calcite-design-system/issues/4970)
-- **list:** fix event detail newIndex when down arrow pressed to sort ([#8462](https://github.com/Esri/calcite-design-system/issues/8462)) ([b3d5169](https://github.com/Esri/calcite-design-system/commit/b3d5169a1aa8cc517ef17b3c4675126925d13603)), closes [#8464](https://github.com/Esri/calcite-design-system/issues/8464)
-
-## [2.2.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.1.0...@esri/calcite-components@2.2.0-next.0) (2023-12-19)
-
-### Features
-
-- **table-header:** Add style when within a `selected` Table Row ([#8449](https://github.com/Esri/calcite-design-system/issues/8449)) ([13cfe75](https://github.com/Esri/calcite-design-system/commit/13cfe75e0c39f6ab492f5a3eb312c5adc93d18e5)), closes [#8448](https://github.com/Esri/calcite-design-system/issues/8448)
+- Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper ([#8392](https://github.com/Esri/calcite-design-system/issues/8392)) ([#8471](https://github.com/Esri/calcite-design-system/issues/8471)) ([4bedf99](https://github.com/Esri/calcite-design-system/commit/4bedf99445e5eaeaa48596bee0c95f650db56260))
-### Bug Fixes
+### Dependencies
-- **date-picker:** prevent console error when selecting just an end date for input date picker ([#8444](https://github.com/Esri/calcite-design-system/issues/8444)) ([c0e51c3](https://github.com/Esri/calcite-design-system/commit/c0e51c393ef0bf52ca6164108df8bcac595bcebd)), closes [#8436](https://github.com/Esri/calcite-design-system/issues/8436)
+- The following workspace dependencies were updated
+ - devDependencies
+ - @esri/calcite-design-tokens bumped from ^2.1.1-next.4 to ^2.1.1
## [2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.0.0...@esri/calcite-components@2.1.0) (2023-12-19)
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index c966a57ae3c..ea35a15899a 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@esri/calcite-components",
- "version": "2.2.0-next.17",
+ "version": "2.3.0",
"homepage": "https://developers.arcgis.com/calcite-design-system/",
"description": "Web Components for Esri's Calcite Design System.",
"main": "dist/index.cjs.js",
@@ -62,7 +62,7 @@
"directory": "packages/calcite-components"
},
"dependencies": {
- "@floating-ui/dom": "1.5.3",
+ "@floating-ui/dom": "1.5.4",
"@stencil/core": "4.9.0",
"@types/color": "3.0.6",
"color": "4.2.3",
@@ -75,8 +75,8 @@
"timezone-groups": "0.8.0"
},
"devDependencies": {
- "@esri/calcite-design-tokens": "^2.1.1-next.4",
- "@esri/calcite-ui-icons": "3.25.3",
+ "@esri/calcite-design-tokens": "^2.1.2-next.0",
+ "@esri/calcite-ui-icons": "3.25.6",
"@esri/eslint-plugin-calcite-components": "^1.0.1-next.2",
"@stencil-community/eslint-plugin": "0.7.1",
"@stencil-community/postcss": "2.2.0",
diff --git a/packages/calcite-components/readme.md b/packages/calcite-components/readme.md
index 21027f7db32..b2ea0bf5d00 100644
--- a/packages/calcite-components/readme.md
+++ b/packages/calcite-components/readme.md
@@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho
```html
```
diff --git a/packages/calcite-components/src/assets/styles/_host.scss b/packages/calcite-components/src/assets/styles/_host.scss
index cde73f0c6ad..9072421d857 100644
--- a/packages/calcite-components/src/assets/styles/_host.scss
+++ b/packages/calcite-components/src/assets/styles/_host.scss
@@ -8,3 +8,11 @@
color: var(--calcite-color-text-2);
font-size: var(--calcite-font-size--1);
}
+
+@mixin base-host() {
+ /* Base ":host" styles for the component */
+ box-sizing: border-box;
+ * {
+ box-sizing: border-box;
+ }
+}
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 4032894b781..222c67ae839 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -41,12 +41,20 @@
// mixin for the container of validation messages displayed below form-associated components
@mixin form-validation-message() {
.validation-container {
- padding-block-start: 0.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
+
+ :host([scale="m"]) .validation-container,
+ :host([scale="l"]) .validation-container {
+ padding-block-start: 0.5rem;
+ }
+
+ :host([scale="s"]) .validation-container {
+ padding-block-start: 0.25rem;
+ }
}
// mixin to provide base disabled styles for interactive components
@@ -122,19 +130,7 @@
}
.x-button {
- @apply appearance-none
- bg-transparent
- border-2
- content-center
- cursor-pointer
- flex
- focus-base
- items-center
- justify-center
- m-0
- self-center
- text-color-3
- transition-default;
+ @apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3 transition-default;
border-radius: 50%;
border-color: transparent;
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 5327f8610ef..2ac3aa8b583 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -9,8 +9,8 @@ import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowP
import { RequestedItem } from "./components/accordion/interfaces";
import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
import { ActionMessages } from "./components/action/assets/action/t9n";
-import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
import { AlertDuration, Sync } from "./components/alert/interfaces";
@@ -95,8 +95,8 @@ export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowP
export { RequestedItem } from "./components/accordion/interfaces";
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
export { ActionMessages } from "./components/action/assets/action/t9n";
-export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
export { AlertDuration, Sync } from "./components/alert/interfaces";
@@ -344,6 +344,10 @@ export namespace Components {
* Disables automatically overflowing `calcite-action`s that won't fit into menus.
*/
"overflowActionsDisabled": boolean;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning": OverlayPositioning;
/**
* Arranges the component depending on the element's `dir` property.
*/
@@ -463,6 +467,10 @@ export namespace Components {
* Made into a prop for testing purposes only
*/
"messages": ActionPadMessages;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning": OverlayPositioning;
/**
* Arranges the component depending on the element's `dir` property.
*/
@@ -604,6 +612,10 @@ export namespace Components {
* When `true`, expands the component and its contents.
*/
"open": boolean;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning": OverlayPositioning;
/**
* Sets focus on the component's first tabbable element.
*/
@@ -1724,6 +1736,10 @@ export namespace Components {
* Made into a prop for testing purposes only
*/
"messages": FlowItemMessages;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning": OverlayPositioning;
/**
* Scrolls the component's content to a specified set of coordinates.
* @example myCalciteFlowItem.scrollContentTo({ left: 0, // Specifies the number of pixels along the X axis to scroll the window or element. top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
@@ -1905,11 +1921,6 @@ export namespace Components {
* When `true`, number values are displayed with a group separator corresponding to the language and country format.
*/
"groupSeparator": boolean;
- /**
- * When `true`, the component will not be visible.
- * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
- */
- "hidden": boolean;
/**
* When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
*/
@@ -2238,11 +2249,6 @@ export namespace Components {
* When `true`, number values are displayed with a group separator corresponding to the language and country format.
*/
"groupSeparator": boolean;
- /**
- * When `true`, the component will not be visible.
- * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
- */
- "hidden": boolean;
/**
* Specifies an icon to display.
* @futureBreaking Remove boolean type as it is not supported.
@@ -2404,11 +2410,6 @@ export namespace Components {
* The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.
*/
"form": string;
- /**
- * When `true`, the component will not be visible.
- * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
- */
- "hidden": boolean;
/**
* Specifies an icon to display.
* @futureBreaking Remove boolean type as it is not supported.
@@ -3448,6 +3449,10 @@ export namespace Components {
* Made into a prop for testing purposes only
*/
"messages": PanelMessages;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning": OverlayPositioning;
/**
* Scrolls the component's content to a specified set of coordinates.
* @example myCalciteFlowItem.scrollContentTo({ left: 0, // Specifies the number of pixels along the X axis to scroll the window or element. top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
@@ -3729,10 +3734,6 @@ export namespace Components {
* The `id` of the component. When omitted, a globally unique identifier is used.
*/
"guid": string;
- /**
- * When `true`, the component is not displayed and is not focusable or checkable.
- */
- "hidden": boolean;
/**
* The hovered state of the component.
*/
@@ -3767,10 +3768,6 @@ export namespace Components {
* When `true`, interaction is prevented and the component is displayed with lower opacity.
*/
"disabled": boolean;
- /**
- * When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable.
- */
- "hidden": boolean;
/**
* Defines the layout of the component.
*/
@@ -3796,6 +3793,18 @@ export namespace Components {
* Sets focus on the fist focusable `calcite-radio-button` element in the component.
*/
"setFocus": () => Promise;
+ /**
+ * Specifies the status of the validation message.
+ */
+ "status": Status;
+ /**
+ * Specifies the validation icon to display under the component.
+ */
+ "validationIcon": string | boolean;
+ /**
+ * Specifies the validation message to display under the component.
+ */
+ "validationMessage": string;
}
interface CalciteRating {
/**
@@ -3903,6 +3912,18 @@ export namespace Components {
* Sets focus on the component.
*/
"setFocus": () => Promise;
+ /**
+ * Specifies the status of the validation message.
+ */
+ "status": Status;
+ /**
+ * Specifies the validation icon to display under the component.
+ */
+ "validationIcon": string | boolean;
+ /**
+ * Specifies the validation message to display under the component.
+ */
+ "validationMessage": string;
/**
* The component's `selectedItem` value.
*/
@@ -4934,10 +4955,6 @@ export namespace Components {
* The component header text, which displays between the icon and description.
*/
"heading": string;
- /**
- * When `true`, the component is not displayed and is not focusable.
- */
- "hidden": boolean;
/**
* When embed is `"false"`, the URL for the component.
*/
@@ -4950,6 +4967,10 @@ export namespace Components {
* When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
*/
"iconFlipRtl": boolean;
+ /**
+ * Specifies the size of the component.
+ */
+ "scale": Scale;
}
interface CalciteTileSelect {
/**
@@ -4968,10 +4989,6 @@ export namespace Components {
* The component header text, which displays between the icon and description.
*/
"heading": string;
- /**
- * When `true`, the component is not displayed and is not focusable or checkable.
- */
- "hidden": boolean;
/**
* Specifies an icon to display.
*/
@@ -7570,6 +7587,10 @@ declare namespace LocalJSX {
* Disables automatically overflowing `calcite-action`s that won't fit into menus.
*/
"overflowActionsDisabled"?: boolean;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning"?: OverlayPositioning;
/**
* Arranges the component depending on the element's `dir` property.
*/
@@ -7685,6 +7706,10 @@ declare namespace LocalJSX {
* Fires when the `expanded` property is toggled.
*/
"onCalciteActionPadToggle"?: (event: CalciteActionPadCustomEvent) => void;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning"?: OverlayPositioning;
/**
* Arranges the component depending on the element's `dir` property.
*/
@@ -7863,6 +7888,10 @@ declare namespace LocalJSX {
* When `true`, expands the component and its contents.
*/
"open"?: boolean;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning"?: OverlayPositioning;
/**
* Displays a status-related indicator icon.
*/
@@ -9056,6 +9085,10 @@ declare namespace LocalJSX {
* Fires when the collapse button is clicked.
*/
"onCalciteFlowItemToggle"?: (event: CalciteFlowItemCustomEvent) => void;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning"?: OverlayPositioning;
/**
* When `true`, displays a back button in the component's header.
*/
@@ -9238,11 +9271,6 @@ declare namespace LocalJSX {
* When `true`, number values are displayed with a group separator corresponding to the language and country format.
*/
"groupSeparator"?: boolean;
- /**
- * When `true`, the component will not be visible.
- * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
- */
- "hidden"?: boolean;
/**
* When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
*/
@@ -9584,11 +9612,6 @@ declare namespace LocalJSX {
* When `true`, number values are displayed with a group separator corresponding to the language and country format.
*/
"groupSeparator"?: boolean;
- /**
- * When `true`, the component will not be visible.
- * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
- */
- "hidden"?: boolean;
/**
* Specifies an icon to display.
* @futureBreaking Remove boolean type as it is not supported.
@@ -9752,11 +9775,6 @@ declare namespace LocalJSX {
* The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.
*/
"form"?: string;
- /**
- * When `true`, the component will not be visible.
- * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
- */
- "hidden"?: boolean;
/**
* Specifies an icon to display.
* @futureBreaking Remove boolean type as it is not supported.
@@ -10881,6 +10899,10 @@ declare namespace LocalJSX {
* Fires when the collapse button is clicked.
*/
"onCalcitePanelToggle"?: (event: CalcitePanelCustomEvent) => void;
+ /**
+ * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ */
+ "overlayPositioning"?: OverlayPositioning;
}
/**
* @deprecated Use the `list` component instead.
@@ -11167,10 +11189,6 @@ declare namespace LocalJSX {
* The `id` of the component. When omitted, a globally unique identifier is used.
*/
"guid"?: string;
- /**
- * When `true`, the component is not displayed and is not focusable or checkable.
- */
- "hidden"?: boolean;
/**
* The hovered state of the component.
*/
@@ -11217,10 +11235,6 @@ declare namespace LocalJSX {
* When `true`, interaction is prevented and the component is displayed with lower opacity.
*/
"disabled"?: boolean;
- /**
- * When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable.
- */
- "hidden"?: boolean;
/**
* Defines the layout of the component.
*/
@@ -11246,6 +11260,18 @@ declare namespace LocalJSX {
* @readonly
*/
"selectedItem"?: HTMLCalciteRadioButtonElement;
+ /**
+ * Specifies the status of the validation message.
+ */
+ "status"?: Status;
+ /**
+ * Specifies the validation icon to display under the component.
+ */
+ "validationIcon"?: string | boolean;
+ /**
+ * Specifies the validation message to display under the component.
+ */
+ "validationMessage"?: string;
}
interface CalciteRating {
/**
@@ -11353,6 +11379,18 @@ declare namespace LocalJSX {
* @readonly
*/
"selectedItem"?: HTMLCalciteSegmentedControlItemElement;
+ /**
+ * Specifies the status of the validation message.
+ */
+ "status"?: Status;
+ /**
+ * Specifies the validation icon to display under the component.
+ */
+ "validationIcon"?: string | boolean;
+ /**
+ * Specifies the validation message to display under the component.
+ */
+ "validationMessage"?: string;
/**
* The component's `selectedItem` value.
*/
@@ -12409,10 +12447,6 @@ declare namespace LocalJSX {
* The component header text, which displays between the icon and description.
*/
"heading"?: string;
- /**
- * When `true`, the component is not displayed and is not focusable.
- */
- "hidden"?: boolean;
/**
* When embed is `"false"`, the URL for the component.
*/
@@ -12425,6 +12459,10 @@ declare namespace LocalJSX {
* When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
*/
"iconFlipRtl"?: boolean;
+ /**
+ * Specifies the size of the component.
+ */
+ "scale"?: Scale;
}
interface CalciteTileSelect {
/**
@@ -12443,10 +12481,6 @@ declare namespace LocalJSX {
* The component header text, which displays between the icon and description.
*/
"heading"?: string;
- /**
- * When `true`, the component is not displayed and is not focusable or checkable.
- */
- "hidden"?: boolean;
/**
* Specifies an icon to display.
*/
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
index 92f0111abfc..de42a48d915 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -1,6 +1,16 @@
import { newE2EPage } from "@stencil/core/testing";
import { html } from "../../../support/formatting";
-import { accessible, defaults, focusable, hidden, reflects, renders, slots, t9n } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ delegatesToFloatingUiOwningComponent,
+ focusable,
+ hidden,
+ reflects,
+ renders,
+ slots,
+ t9n,
+} from "../../tests/commonTests";
import { CSS, SLOTS } from "./resources";
import { overflowActionsDebounceInMs } from "./utils";
import { getFocusedElementProp } from "../../tests/utils";
@@ -32,6 +42,10 @@ describe("calcite-action-bar", () => {
propertyName: "layout",
defaultValue: "vertical",
},
+ {
+ propertyName: "overlayPositioning",
+ defaultValue: "absolute",
+ },
]);
});
@@ -45,9 +59,22 @@ describe("calcite-action-bar", () => {
propertyName: "expanded",
value: true,
},
+ {
+ propertyName: "overlayPositioning",
+ value: "fixed",
+ },
]);
});
+ describe("delegates to floating-ui-owner component", () => {
+ delegatesToFloatingUiOwningComponent(
+ html`
+
+ `,
+ "calcite-action-group",
+ );
+ });
+
describe("expand functionality", () => {
it("should not modify actions within an action-menu", async () => {
const page = await newE2EPage({
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index bf5bd559609..7f21b5afc71 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -48,6 +48,7 @@ import {
overflowActionsDebounceInMs,
queryActions,
} from "./utils";
+import { OverlayPositioning } from "../../utils/floating-ui";
/**
* @slot - A slot for adding `calcite-action`s that will appear at the top of the component.
@@ -123,6 +124,16 @@ export class ActionBar
this.overflowActions();
}
+ /**
+ * Determines the type of positioning to use for the overlaid content.
+ *
+ * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+ *
+ * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ *
+ */
+ @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
+
/**
* Arranges the component depending on the element's `dir` property.
*/
@@ -391,6 +402,7 @@ export class ActionBar
layout,
messages,
actionsEndGroupLabel,
+ overlayPositioning,
} = this;
const expandToggleNode = !expandDisabled ? (
@@ -414,6 +426,7 @@ export class ActionBar
hidden={this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions)}
label={actionsEndGroupLabel}
layout={layout}
+ overlayPositioning={overlayPositioning}
scale={scale}
>
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
index d03377f5fda..e31eb2dd2e6 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
+++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
@@ -1,6 +1,15 @@
import { newE2EPage } from "@stencil/core/testing";
import { html } from "../../../support/formatting";
-import { accessible, defaults, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ delegatesToFloatingUiOwningComponent,
+ focusable,
+ hidden,
+ reflects,
+ renders,
+ slots,
+} from "../../tests/commonTests";
import { TOOLTIP_OPEN_DELAY_MS } from "../tooltip/resources";
import { CSS, SLOTS, activeAttr } from "./resources";
@@ -84,6 +93,15 @@ describe("calcite-action-menu", () => {
]);
});
+ describe("delegates to floating-ui-owner component", () => {
+ delegatesToFloatingUiOwningComponent(
+ html`
+
+ `,
+ "calcite-popover",
+ );
+ });
+
it("should emit 'calciteActionMenuOpen' event", async () => {
const page = await newE2EPage({
html: `
@@ -402,13 +420,13 @@ describe("calcite-action-menu", () => {
expect(await trigger.getProperty("active")).toBe(false);
});
- it.skip("should close on blur", async () => {
+ it.skip("should handle TAB navigation", async () => {
const page = await newE2EPage({
html: html`
-
-
- `,
+
+
+
+ `,
});
await page.waitForChanges();
@@ -429,14 +447,14 @@ describe("calcite-action-menu", () => {
expect(actions[1].getAttribute(activeAttr)).toBe(null);
expect(actions[2].getAttribute(activeAttr)).toBe(null);
- const button = await page.find("button");
- await button.focus();
+ await page.keyboard.press("Tab");
+
await page.waitForChanges();
expect(await actionMenu.getProperty("open")).toBe(false);
});
- it("should click the active action and close the menu", async () => {
+ it("should click the active action on Enter key and close the menu", async () => {
const page = await newE2EPage({
html: html`
@@ -466,9 +484,44 @@ describe("calcite-action-menu", () => {
expect(actions[2].getAttribute(activeAttr)).toBe(null);
await page.keyboard.press("Enter");
+ await page.waitForChanges();
+
+ expect(await actionMenu.getProperty("open")).toBe(false);
+ expect(clickSpy).toHaveReceivedEventTimes(1);
+ });
+
+ it("should click the active action when clicked and close the menu", async () => {
+ const page = await newE2EPage({
+ html: html`
+
+
+
+ `,
+ });
+
+ await page.waitForChanges();
+
+ const actionMenu = await page.find("calcite-action-menu");
+ const actions = await page.findAll("calcite-action");
+
+ expect(await actionMenu.getProperty("open")).toBe(false);
+
+ await actionMenu.callMethod("setFocus");
+ await page.waitForChanges();
+ await page.keyboard.press("ArrowDown");
await page.waitForChanges();
+ const clickSpy = await actions[0].spyOnEvent("click");
+
+ expect(await actionMenu.getProperty("open")).toBe(true);
+ expect(actions[0].getAttribute(activeAttr)).toBe("");
+ expect(actions[1].getAttribute(activeAttr)).toBe(null);
+ expect(actions[2].getAttribute(activeAttr)).toBe(null);
+
+ // native click is used to close the open menu
+ await page.$eval("calcite-action", (el: HTMLCalciteActionElement) => el.click());
+
expect(await actionMenu.getProperty("open")).toBe(false);
expect(clickSpy).toHaveReceivedEventTimes(1);
});
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
index 39ed53d0237..4d57ddcfd30 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -224,7 +224,6 @@ export class ActionMenu implements LoadableComponent {
menuButtonEl.addEventListener("pointerdown", this.menuButtonClick);
menuButtonEl.addEventListener("keydown", this.menuButtonKeyDown);
- menuButtonEl.addEventListener("blur", this.menuButtonBlur);
};
disconnectMenuButtonEl = (): void => {
@@ -236,7 +235,6 @@ export class ActionMenu implements LoadableComponent {
menuButtonEl.removeEventListener("pointerdown", this.menuButtonClick);
menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
- menuButtonEl.removeEventListener("blur", this.menuButtonBlur);
};
setMenuButtonEl = (event: Event): void => {
@@ -419,10 +417,6 @@ export class ActionMenu implements LoadableComponent {
return !!supportedKeys.find((k) => k === key);
}
- private menuButtonBlur = (): void => {
- this.open = false;
- };
-
menuButtonKeyDown = (event: KeyboardEvent): void => {
const { key } = event;
const { actionElements, activeMenuItemIndex, open } = this;
@@ -443,6 +437,11 @@ export class ActionMenu implements LoadableComponent {
action ? action.click() : this.toggleOpen(false);
}
+ if (key === "Tab") {
+ this.open = false;
+ return;
+ }
+
if (key === "Escape") {
this.toggleOpen(false);
event.preventDefault();
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
index d84a646a24d..908c1d678d9 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
+++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
@@ -1,5 +1,15 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, reflects, renders, slots, t9n } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ delegatesToFloatingUiOwningComponent,
+ focusable,
+ hidden,
+ reflects,
+ renders,
+ slots,
+ t9n,
+} from "../../tests/commonTests";
import { CSS, SLOTS } from "./resources";
import { html } from "../../../support/formatting";
@@ -26,6 +36,10 @@ describe("calcite-action-pad", () => {
propertyName: "layout",
defaultValue: "vertical",
},
+ {
+ propertyName: "overlayPositioning",
+ defaultValue: "absolute",
+ },
{
propertyName: "scale",
defaultValue: undefined,
@@ -47,9 +61,22 @@ describe("calcite-action-pad", () => {
propertyName: "layout",
value: "horizontal",
},
+ {
+ propertyName: "overlayPositioning",
+ value: "fixed",
+ },
]);
});
+ describe("delegates to floating-ui-owner component", () => {
+ delegatesToFloatingUiOwningComponent(
+ html`
+
+ `,
+ "calcite-action-group",
+ );
+ });
+
describe("expand functionality", () => {
it("should be expandable by default", async () => {
const page = await newE2EPage();
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
index 66930dcef10..fc51f9e65be 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -36,6 +36,7 @@ import { Layout, Position, Scale } from "../interfaces";
import { ActionPadMessages } from "./assets/action-pad/t9n";
import { CSS, SLOTS } from "./resources";
import { createObserver } from "../../utils/observers";
+import { OverlayPositioning } from "../../utils/floating-ui";
/**
* @slot - A slot for adding `calcite-action`s to the component.
@@ -117,6 +118,16 @@ export class ActionPad
/* wired up by t9n util */
}
+ /**
+ * Determines the type of positioning to use for the overlaid content.
+ *
+ * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+ *
+ * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ *
+ */
+ @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
+
// --------------------------------------------------------------------------
//
// Events
@@ -265,6 +276,7 @@ export class ActionPad
scale,
layout,
actionsEndGroupLabel,
+ overlayPositioning,
} = this;
const expandToggleNode = !expandDisabled ? (
@@ -287,6 +299,7 @@ export class ActionPad
class={CSS.actionGroupEnd}
label={actionsEndGroupLabel}
layout={layout}
+ overlayPositioning={overlayPositioning}
scale={scale}
>
diff --git a/packages/calcite-components/src/components/block-section/readme.md b/packages/calcite-components/src/components/block-section/readme.md
index d422037325e..bc17697d914 100644
--- a/packages/calcite-components/src/components/block-section/readme.md
+++ b/packages/calcite-components/src/components/block-section/readme.md
@@ -6,13 +6,13 @@ The `calcite-block-section` component is a child element of `calcite-block`. Sec
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockSectionMessages` | `undefined` |
-| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` |
-| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` |
-| `text` | `text` | The component header text. | `string` | `undefined` |
-| `toggleDisplay` | `toggle-display` | Specifies how the component's toggle is displayed - `"button"` (selectable header), or `"switch"` (toggle switch). | `"button" \| "switch"` | `"button"` |
+| Property | Attribute | Description | Type | Default |
+| ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockSectionMessages` | `undefined` |
+| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` |
+| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` |
+| `text` | `text` | The component header text. | `string` | `undefined` |
+| `toggleDisplay` | `toggle-display` | Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a switch. | `"button" \| "switch"` | `"button"` |
## Events
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index ab1fa73bf4d..6901c478d41 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -1,6 +1,17 @@
import { newE2EPage } from "@stencil/core/testing";
import { CSS, SLOTS } from "./resources";
-import { accessible, defaults, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ delegatesToFloatingUiOwningComponent,
+ disabled,
+ focusable,
+ hidden,
+ reflects,
+ renders,
+ slots,
+ t9n,
+} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { openClose } from "../../tests/commonTests";
@@ -27,6 +38,31 @@ describe("calcite-block", () => {
propertyName: "open",
defaultValue: false,
},
+ {
+ propertyName: "overlayPositioning",
+ defaultValue: "absolute",
+ },
+ ]);
+ });
+
+ describe("reflects", () => {
+ reflects("calcite-block", [
+ {
+ propertyName: "collapsible",
+ value: true,
+ },
+ {
+ propertyName: "headingLevel",
+ value: 2,
+ },
+ {
+ propertyName: "open",
+ value: true,
+ },
+ {
+ propertyName: "overlayPositioning",
+ value: "fixed",
+ },
]);
});
@@ -87,6 +123,15 @@ describe("calcite-block", () => {
disabled(html``);
});
+ describe("delegates to floating-ui-owner component", () => {
+ delegatesToFloatingUiOwningComponent(
+ html`
+
+ `,
+ "calcite-action-menu",
+ );
+ });
+
it("has a loading state", async () => {
const page = await newE2EPage({
html: `
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index 99f3c907470..2ea2e319507 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -43,6 +43,7 @@ import {
setUpLoadableComponent,
} from "../../utils/loadable";
import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { OverlayPositioning } from "../../utils/floating-ui";
/**
* @slot - A slot for adding custom content.
@@ -140,6 +141,16 @@ export class Block
/* wired up by t9n util */
}
+ /**
+ * Determines the type of positioning to use for the overlaid content.
+ *
+ * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+ *
+ * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ *
+ */
+ @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
+
//--------------------------------------------------------------------------
//
// Public Methods
@@ -364,7 +375,10 @@ export class Block
) : null}
{hasMenuActions ? (
-
+
) : null}
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index f9581a39fd5..f9572f7603b 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -1,8 +1,71 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-button-background-color: Specifies the background color of the component.
+ * @prop --calcite-button-background-color-hover: Specifies the background color of the component when in hover state.
+ * @prop --calcite-button-background-color-focus: Specifies the background color of the component when in focus state.
+ * @prop --calcite-button-background-color-active: Specifies the background color of the component when in active state.
+ * @prop --calcite-button-text-color: Specifies the text color of the component.
+ * @prop --calcite-button-text-color-hover: Specifies the text color of the component when in hover state.
+ * @prop --calcite-button-text-color-focus: Specifies the text color of the component when in focus state.
+ * @prop --calcite-button-text-color-active: Specifies the text color of the component when in active state.
+ * @prop --calcite-button-icon-start-color: Specifies the color of the component's start position icon.
+ * @prop --calcite-button-icon-start-color-hover: Specifies the color of the component's start position icon when in hover state.
+ * @prop --calcite-button-icon-start-color-focus: Specifies the color of the component's start position icon when in focus state.
+ * @prop --calcite-button-icon-start-color-active: Specifies the color of the component's start position icon when in active state.
+ * @prop --calcite-button-icon-end-color: Specifies the color of the component's end position icon.
+ * @prop --calcite-button-icon-end-color-hover: Specifies the color of the component's end position icon when in hover state.
+ * @prop --calcite-button-icon-end-color-focus: Specifies the color of the component's end position icon when in focus state.
+ * @prop --calcite-button-icon-end-color-active: Specifies the color of the component's end position icon when in active state.
+ * @prop --calcite-button-box-shadow: Specifies the box shadow of the component.
+ * @prop --calcite-button-box-shadow-hover: Specifies the box shadow of the component when in hover state.
+ * @prop --calcite-button-box-shadow-focus: Specifies the box shadow of the component when in focus state.
+ * @prop --calcite-button-box-shadow-active: Specifies the box shadow of the component when in active state.
+ * @prop --calcite-button-border-color: Specifies border colors of the component.
+ * @prop --calcite-button-border-color-hover: Specifies border colors of the component when in hover state.
+ * @prop --calcite-button-border-color-focus: Specifies border colors of the component when in focus state.
+ * @prop --calcite-button-border-color-active: Specifies border colors of the component when in active state.
+ */
+
:host {
+ --calcite-button-background-color: var(--calcite-color-background);
+ --calcite-button-text-color: var(--calcite-color-text-inverse);
+ --calcite-button-box-shadow: var(--calcite-shadow-none);
+ --calcite-button-border-color: var(--calcite-color-transparent);
+ --calcite-button-corner-radius: var(--calcite-corner-radius-sharp);
+ --calcite-button-icon-start-color: var(--calcite-color-text-inverse);
+ --calcite-button-icon-end-color: var(--calcite-color-text-inverse);
+
+ /* hover */
+ --calcite-button-text-color-hover: var(--calcite-color-text-inverse-hover);
+ --calcite-button-background-color-hover: var(--calcite-color-background);
+ --calcite-button-border-color-hover: var(--calcite-color-transparent);
+ --calcite-button-box-shadow-hover: var(--calcite-shadow-none);
+ --calcite-button-icon-start-color-hover: var(--calcite-color-text-inverse-hover);
+ --calcite-button-icon-end-color-hover: var(--calcite-color-text-inverse-hover);
+
+ /* focus */
+ --calcite-button-text-color-focus: var(--calcite-color-text-inverse-hover);
+ --calcite-button-background-color-focus: var(--calcite-color-background);
+ --calcite-button-border-color-focus: var(--calcite-color-transparent);
+ --calcite-button-box-shadow-focus: var(--calcite-shadow-none);
+ --calcite-button-icon-start-color-focus: var(--calcite-color-text-inverse-focus);
+ --calcite-button-icon-end-color-focus: var(--calcite-color-text-inverse-focus);
+
+ /* active */
+ --calcite-button-text-color-active: var(--calcite-color-text-inverse-press);
+ --calcite-button-background-color-active: var(--calcite-color-background);
+ --calcite-button-border-color-active: var(--calcite-color-transparent);
+ --calcite-button-box-shadow-active: var(--calcite-shadow-none);
+ --calcite-button-icon-start-color-active: var(--calcite-color-text-inverse-active);
+ --calcite-button-icon-end-color-active: var(--calcite-color-text-inverse-active);
+
@apply inline-block w-auto align-middle;
}
-// fab variants
+/* fab variants */
:host([round]) {
border-radius: 50px;
& a,
@@ -11,7 +74,7 @@
}
}
-// focus styles
+/* focus styles */
:host button,
:host a {
@apply focus-base;
@@ -19,43 +82,6 @@
@apply focus-outset;
}
}
-// button base
-:host button,
-:host a {
- --calcite-button-content-margin-internal: theme("margin.2");
- --calcite-button-padding-x-internal: 7px;
- --calcite-button-padding-y-internal: 3px;
- padding-block: var(--calcite-button-padding-y-internal);
- padding-inline: var(--calcite-button-padding-x-internal);
- @apply font-inherit
- relative
- box-border
- flex
- h-full
- w-full
- cursor-pointer
- select-none
- appearance-none
- items-center
- justify-center
- rounded-none
- border-none
- text-center
- font-normal
- no-underline;
- // include transition from focus
- transition:
- color var(--calcite-animation-timing) ease-in-out,
- background-color var(--calcite-animation-timing) ease-in-out,
- box-shadow var(--calcite-animation-timing) ease-in-out,
- outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
- &:hover {
- @apply no-underline;
- }
- & span {
- @apply truncate;
- }
-}
.content {
margin-inline: var(--calcite-button-content-margin-internal);
@@ -85,7 +111,7 @@
}
}
-// button width
+/* button width */
:host([width="auto"]) {
@apply w-auto;
}
@@ -98,7 +124,7 @@
@apply w-full;
}
-// alignment
+/* alignment */
:host([alignment="center"]:not([width="auto"])) {
a,
button {
@@ -142,7 +168,7 @@
}
}
-// only two icons
+/* only two icons */
:host([alignment="center"]) {
a:not(.content--slotted),
button:not(.content--slotted) {
@@ -207,14 +233,14 @@
}
:host([loading]) {
- // center loading spinner when button has text
+ /* center loading spinner when button has text */
button.content--slotted,
a.content--slotted {
.calcite-button--loader calcite-loader {
margin-inline-end: var(--calcite-button-content-margin-internal);
}
}
- // hide icons when loading with no text
+ /* hide icons when loading with no text */
button:not(.content--slotted),
a:not(.content--slotted) {
.icon--start,
@@ -224,276 +250,352 @@
}
}
-// button styles
-:host([appearance]) {
- button,
- a {
- @apply border-color-transparent
- border
- border-solid;
+/* button base */
+:host button,
+:host a {
+ --calcite-button-content-margin-internal: theme("margin.2");
+ --calcite-button-padding-x-internal: 7px;
+ --calcite-button-padding-y-internal: 3px;
+ padding-block: var(--calcite-button-padding-y-internal);
+ padding-inline: var(--calcite-button-padding-x-internal);
+ @apply font-inherit
+ relative
+ box-border
+ flex
+ h-full
+ w-full
+ cursor-pointer
+ select-none
+ appearance-none
+ items-center
+ justify-center
+ rounded-none
+ border-none
+ text-center
+ font-normal
+ no-underline;
+ /* include transition from focus */
+ transition:
+ color var(--calcite-animation-timing) ease-in-out,
+ background-color var(--calcite-animation-timing) ease-in-out,
+ box-shadow var(--calcite-animation-timing) ease-in-out,
+ outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
+ &:hover {
+ @apply no-underline;
+ }
+ & span {
+ @apply truncate;
}
}
-:host([kind="brand"]) {
+/* assign component tokens as values to button properties */
+:host {
button,
a {
- @apply text-color-inverse bg-brand;
- &:hover,
- &:focus {
- @apply bg-brand-hover;
+ color: var(--calcite-button-text-color);
+ background-color: var(--calcite-button-background-color);
+ border: var(--calcite-border-width-sm) solid var(--calcite-button-border-color);
+ box-shadow: var(--calcite-button-box-shadow);
+
+ .icon--start {
+ color: var(--calcite-button-icon-start-color);
}
- &:active {
- @apply bg-brand-press;
+ .icon--end {
+ color: var(--calcite-button-icon-end-color);
}
- calcite-loader {
- @apply text-color-inverse;
+
+ &:hover {
+ color: var(--calcite-button-text-color-hover);
+ background-color: var(--calcite-button-background-color-hover);
+ border-color: var(--calcite-button-border-color-hover);
+ box-shadow: var(--calcite-button-box-shadow-hover);
+
+ .icon--start {
+ color: var(--calcite-button-icon-start-color-hover);
+ }
+ .icon--end {
+ color: var(--calcite-button-icon-end-color-hover);
+ }
}
- }
-}
-:host([kind="danger"]) {
- button,
- a {
- @apply text-color-inverse bg-danger;
- &:hover,
&:focus {
- @apply bg-danger-hover;
+ color: var(--calcite-button-text-color-focus);
+ background-color: var(--calcite-button-background-color-focus);
+ border-color: var(--calcite-button-border-color-focus);
+ box-shadow: var(--calcite-button-box-shadow-focus);
+
+ .icon--start {
+ color: var(--calcite-button-icon-start-color-focus);
+ }
+ .icon--end {
+ color: var(--calcite-button-icon-end-color-focus);
+ }
}
&:active {
- @apply bg-danger-press;
- }
- calcite-loader {
- @apply text-color-inverse;
+ color: var(--calcite-button-text-color-active);
+ background-color: var(--calcite-button-background-color-active);
+ border-color: var(--calcite-button-border-color-active);
+ box-shadow: var(--calcite-button-box-shadow-active);
+
+ .icon--start {
+ color: var(--calcite-button-icon-start-color-active);
+ }
+ .icon--end {
+ color: var(--calcite-button-icon-end-color-active);
+ }
}
}
}
-:host([kind="neutral"]) {
+
+/* button styles */
+/* solid */
+:host([kind="brand"]) {
button,
a {
- @apply text-color-1 bg-foreground-3;
- &:hover,
- &:focus {
- @apply bg-foreground-2;
- }
- &:active {
- @apply bg-foreground-1;
- }
- calcite-loader {
- @apply text-color-1;
- }
+ --calcite-button-text-color: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-hover: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-focus: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-active: var(--calcite-color-text-inverse);
+ --calcite-button-background-color: var(--calcite-color-brand);
+ --calcite-button-background-color-hover: var(--calcite-color-brand-hover);
+ --calcite-button-background-color-focus: var(--calcite-color-brand-hover);
+ --calcite-button-background-color-active: var(--calcite-color-brand-press);
+ --calcite-button-icon-start-color: var(--calcite-color-text-inverse);
+ --calcite-button-icon-end-color: var(--calcite-color-text-inverse);
}
-}
-:host([kind="inverse"]) {
- button,
- a {
- @apply text-color-inverse;
- background-color: var(--calcite-color-inverse);
- &:hover,
- &:focus {
- background-color: var(--calcite-color-inverse-hover);
- }
- &:active {
- background-color: var(--calcite-color-inverse-press);
- }
- calcite-loader {
- @apply text-color-inverse;
- }
+ calcite-loader {
+ --calcite-button-text-color: var(--calcite-color-text-inverse);
}
}
-// outline
-:host([appearance="outline-fill"]) {
+
+:host([kind="danger"]) {
button,
a {
- @apply bg-foreground-1 border border-solid;
- box-shadow: inset 0 0 0 1px transparent;
+ --calcite-button-text-color: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-hover: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-focus: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-active: var(--calcite-color-text-inverse);
+ --calcite-button-background-color: var(--calcite-color-status-danger);
+ --calcite-button-background-color-hover: var(--calcite-color-status-danger-hover);
+ --calcite-button-background-color-focus: var(--calcite-color-status-danger-hover);
+ --calcite-button-background-color-active: var(--calcite-color-status-danger-press);
+ --calcite-button-icon-start-color: var(--calcite-color-text-inverse);
+ --calcite-button-icon-end-color: var(--calcite-color-text-inverse);
}
-}
-:host([appearance="outline-fill"][kind="brand"]) {
- button,
- a {
- @apply border-color-brand bg-foreground-1;
- color: theme("colors.brand");
- &:hover {
- @apply border-color-brand-hover;
- color: theme("colors.brand-hover");
- box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
- }
- &:focus {
- @apply border-color-brand;
- color: theme("colors.brand");
- box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
- }
- &:active {
- @apply border-color-brand-press;
- color: theme("colors.brand-press");
- box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);
- }
- calcite-loader {
- color: theme("colors.brand");
- }
+ calcite-loader {
+ --calcite-button-text-color: var(--calcite-color-text-inverse);
}
}
-:host([appearance="outline-fill"][kind="danger"]) {
+
+:host([kind="neutral"]) {
button,
a {
- @apply border-color-danger bg-foreground-1;
- color: theme("colors.danger");
- &:hover {
- @apply border-color-danger-hover;
- color: theme("colors.danger-hover");
- box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
- }
- &:focus {
- @apply border-color-danger;
- color: theme("colors.danger");
- box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
- }
- &:active {
- @apply border-color-danger-press;
- color: theme("colors.danger-press");
- box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
- }
- calcite-loader {
- color: theme("colors.danger");
- }
+ --calcite-button-text-color: var(--calcite-color-text-1);
+ --calcite-button-text-color-hover: var(--calcite-color-text-1);
+ --calcite-button-text-color-focus: var(--calcite-color-text-1);
+ --calcite-button-text-color-active: var(--calcite-color-text-1);
+ --calcite-button-background-color: var(--calcite-color-foreground-3);
+ --calcite-button-background-color-hover: var(--calcite-color-foreground-2);
+ --calcite-button-background-color-focus: var(--calcite-color-foreground-2);
+ --calcite-button-background-color-active: var(--calcite-color-foreground-1);
+ --calcite-button-icon-start-color: var(--calcite-color-text-1);
+ --calcite-button-icon-end-color: var(--calcite-color-text-1);
+ }
+ calcite-loader {
+ --calcite-button-text-color: var(--calcite-color-text-1);
}
}
-:host([appearance="outline-fill"][kind="neutral"]) {
+
+:host([kind="inverse"]) {
button,
a {
- @apply text-color-1 bg-foreground-1;
- border-color: theme("borderColor.color.1");
- &:hover {
- box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);
- }
- &:focus {
- box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
- }
- &:active {
- box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
- }
- calcite-loader {
- @apply text-color-1;
- }
+ --calcite-button-text-color: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-hover: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-focus: var(--calcite-color-text-inverse);
+ --calcite-button-text-color-active: var(--calcite-color-text-inverse);
+ --calcite-button-background-color: var(--calcite-color-inverse);
+ --calcite-button-background-color-hover: var(--calcite-color-inverse-hover);
+ --calcite-button-background-color-focus: var(--calcite-color-inverse-hover);
+ --calcite-button-background-color-active: var(--calcite-color-inverse-press);
+ --calcite-button-icon-start-color: var(--calcite-color-text-inverse);
+ --calcite-button-icon-end-color: var(--calcite-color-text-inverse);
+ }
+ calcite-loader {
+ --calcite-button-text-color: var(--calcite-color-text-inverse);
}
}
-:host([appearance="outline-fill"][kind="inverse"]) {
+
+/* outline background */
+:host([appearance="outline"]) {
button,
a {
- @apply text-color-1 bg-foreground-1;
- border-color: var(--calcite-color-inverse);
- &:hover {
- border-color: var(--calcite-color-inverse-hover);
- box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);
- }
- &:focus {
- border-color: var(--calcite-color-inverse);
- box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);
- }
- &:active {
- border-color: var(--calcite-color-inverse-press);
- box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);
- }
- calcite-loader {
- @apply text-color-1;
- }
+ --calcite-button-background-color: var(--calcite-color-transparent);
+ --calcite-button-background-color-hover: var(--calcite-color-transparent);
+ --calcite-button-background-color-focus: var(--calcite-color-transparent);
+ --calcite-button-background-color-active: var(--calcite-color-transparent);
}
}
-:host([appearance="outline"]) {
+
+/* outline-fill background */
+:host([appearance="outline-fill"]) {
button,
a {
- @apply border border-solid bg-transparent;
- box-shadow: inset 0 0 0 1px transparent;
+ --calcite-button-background-color: var(--calcite-color-foreground-1);
+ --calcite-button-background-color-hover: var(--calcite-color-foreground-1);
+ --calcite-button-background-color-focus: var(--calcite-color-foreground-1);
+ --calcite-button-background-color-active: var(--calcite-color-foreground-1);
}
}
-:host([appearance="outline"][kind="brand"]) {
+
+/* outline and outline-fill text, border, icon, and box-shadow colors */
+:host([appearance="outline"][kind="brand"]),
+:host([appearance="outline-fill"][kind="brand"]) {
button,
a {
- @apply border-color-brand bg-transparent;
- color: theme("colors.brand");
- &:hover {
- @apply border-color-brand-hover;
- color: theme("colors.brand-hover");
- box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
- }
- &:focus {
- @apply border-color-brand;
- color: theme("colors.brand");
- box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
- }
- &:active {
- @apply border-color-brand-press;
- color: theme("colors.brand-press");
- box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);
- }
- calcite-loader {
- color: theme("colors.brand");
- }
+ /* text */
+ --calcite-button-text-color: var(--calcite-color-brand);
+ --calcite-button-text-color-hover: var(--calcite-color-brand-hover);
+ --calcite-button-text-color-focus: var(--calcite-color-brand);
+ --calcite-button-text-color-active: var(--calcite-color-brand-press);
+
+ /* border */
+ --calcite-button-border-color: var(--calcite-color-brand);
+ --calcite-button-border-color-hover: var(--calcite-color-brand-hover);
+ --calcite-button-border-color-focus: var(--calcite-color-brand-hover);
+ --calcite-button-border-color-active: var(--calcite-color-brand-press);
+
+ /* start icon */
+ --calcite-button-icon-start-color: var(--calcite-color-brand);
+ --calcite-button-icon-start-color-hover: var(--calcite-color-brand-hover);
+ --calcite-button-icon-start-color-focus: var(--calcite-color-brand-hover);
+ --calcite-button-icon-start-color-active: var(--calcite-color-brand-press);
+
+ /* end icon */
+ --calcite-button-icon-end-color: var(--calcite-color-brand);
+ --calcite-button-icon-end-color-hover: var(--calcite-color-brand-hover);
+ --calcite-button-icon-end-color-focus: var(--calcite-color-brand-hover);
+ --calcite-button-icon-end-color-active: var(--calcite-color-brand-press);
+
+ /* box shadow */
+ --calcite-button-box-shadow-hover: inset 0 0 0 1px var(--calcite-color-brand-hover);
+ --calcite-button-box-shadow-focus: inset 0 0 0 2px var(--calcite-color-brand);
+ --calcite-button-box-shadow-active: inset 0 0 0 2px var(--calcite-color-brand-press);
+ }
+ calcite-loader {
+ --calcite-button-text-color: var(--calcite-color-brand);
}
}
-:host([appearance="outline"][kind="danger"]) {
+
+:host([appearance="outline"][kind="danger"]),
+:host([appearance="outline-fill"][kind="danger"]) {
button,
a {
- @apply border-color-danger bg-transparent;
- color: theme("colors.danger");
- &:hover {
- @apply border-color-danger-hover;
- color: theme("colors.danger-hover");
- box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
- }
- &:focus {
- @apply border-color-danger;
- color: theme("colors.danger");
- box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
- }
- &:active {
- @apply border-color-danger-press;
- color: theme("colors.danger-press");
- box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
- }
- calcite-loader {
- color: theme("colors.danger");
- }
+ /* text */
+ --calcite-button-text-color: var(--calcite-color-status-danger);
+ --calcite-button-text-color-hover: var(--calcite-color-status-danger-hover);
+ --calcite-button-text-color-focus: var(--calcite-color-status-danger-hover);
+ --calcite-button-text-color-active: var(--calcite-color-status-danger-press);
+
+ /* border */
+ --calcite-button-border-color: var(--calcite-color-status-danger);
+ --calcite-button-border-color-hover: var(--calcite-color-status-danger-hover);
+ --calcite-button-border-color-focus: var(--calcite-color-status-danger-hover);
+ --calcite-button-border-color-active: var(--calcite-color-status-danger-press);
+
+ /* start icon */
+ --calcite-button-icon-start-color: var(--calcite-color-status-danger);
+ --calcite-button-icon-start-color-hover: var(--calcite-color-status-danger-hover);
+ --calcite-button-icon-start-color-focus: var(--calcite-color-status-danger-hover);
+ --calcite-button-icon-start-color-active: var(--calcite-color-status-danger-press);
+
+ /* end icon */
+ --calcite-button-icon-end-color: var(--calcite-color-status-danger);
+ --calcite-button-icon-end-color-hover: var(--calcite-color-status-danger-hover);
+ --calcite-button-icon-end-color-focus: var(--calcite-color-status-danger-hover);
+ --calcite-button-icon-end-color-active: var(--calcite-color-status-danger-press);
+
+ /* box shadow */
+ --calcite-button-box-shadow-hover: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
+ --calcite-button-box-shadow-focus: inset 0 0 0 2px var(--calcite-color-status-danger);
+ --calcite-button-box-shadow-active: inset 0 0 0 2px var(--calcite-color-status-danger-press);
+ }
+ calcite-loader {
+ --calcite-button-text-color: var(--calcite-color-status-danger);
}
}
-:host([appearance="outline"][kind="neutral"]) {
+
+:host([appearance="outline"][kind="neutral"]),
+:host([appearance="outline-fill"][kind="neutral"]) {
button,
a {
- @apply text-color-1 bg-transparent;
- border-color: theme("borderColor.color.1");
- &:hover {
- box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);
- }
- &:focus {
- box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
- }
- &:active {
- box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
- }
- calcite-loader {
- @apply text-color-1;
- }
+ /* text */
+ --calcite-button-text-color: var(--calcite-color-text-1);
+ --calcite-button-text-color-hover: var(--calcite-color-text-1);
+ --calcite-button-text-color-focus: var(--calcite-color-text-1);
+ --calcite-button-text-color-active: var(--calcite-color-text-1);
+
+ /* border */
+ --calcite-button-border-color: var(--calcite-color-border-1);
+ --calcite-button-border-color-hover: var(--calcite-color-border-1);
+ --calcite-button-border-color-focus: var(--calcite-color-border-1);
+ --calcite-button-border-color-active: var(--calcite-color-border-1);
+
+ /* start icon */
+ --calcite-button-icon-start-color: var(--calcite-color-text-1);
+ --calcite-button-icon-start-color-hover: var(--calcite-color-text-1);
+ --calcite-button-icon-start-color-focus: var(--calcite-color-text-1);
+ --calcite-button-icon-start-color-active: var(--calcite-color-text-1);
+
+ /* end icon */
+ --calcite-button-icon-end-color: var(--calcite-color-text-1);
+ --calcite-button-icon-end-color-hover: var(--calcite-color-text-1);
+ --calcite-button-icon-end-color-focus: var(--calcite-color-text-1);
+ --calcite-button-icon-end-color-active: var(--calcite-color-text-1);
+
+ /* box shadow */
+ --calcite-button-box-shadow-hover: inset 0 0 0 1px var(--calcite-color-foreground-3);
+ --calcite-button-box-shadow-focus: inset 0 0 0 2px var(--calcite-color-foreground-3);
+ --calcite-button-box-shadow-active: inset 0 0 0 2px var(--calcite-color-foreground-3);
+ }
+ calcite-loader {
+ --calcite-button-text-color: var(--calcite-color-text-1);
}
}
-:host([appearance="outline"][kind="inverse"]) {
+
+:host([appearance="outline"][kind="inverse"]),
+:host([appearance="outline-fill"][kind="inverse"]) {
button,
a {
- @apply text-color-1 bg-transparent;
- border-color: var(--calcite-color-inverse);
- &:hover {
- border-color: var(--calcite-color-inverse-hover);
- box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);
- }
- &:focus {
- border-color: var(--calcite-color-inverse);
- box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);
- }
- &:active {
- border-color: var(--calcite-color-inverse-press);
- box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);
- }
- calcite-loader {
- @apply text-color-1;
- }
+ /* text */
+ --calcite-button-text-color: var(--calcite-color-text-1);
+ --calcite-button-text-color-hover: var(--calcite-color-text-1);
+ --calcite-button-text-color-focus: var(--calcite-color-text-1);
+ --calcite-button-text-color-active: var(--calcite-color-text-1);
+
+ /* border */
+ --calcite-button-border-color: var(--calcite-color-inverse);
+ --calcite-button-border-color-hover: var(--calcite-color-inverse-hover);
+ --calcite-button-border-color-focus: var(--calcite-color-inverse-hover);
+ --calcite-button-border-color-active: var(--calcite-color-inverse-press);
+
+ /* start icon */
+ --calcite-button-icon-start-color: var(--calcite-color-text-1);
+ --calcite-button-icon-start-color-hover: var(--calcite-color-inverse-hover);
+ --calcite-button-icon-start-color-focus: var(--calcite-color-inverse-hover);
+ --calcite-button-icon-start-color-active: var(--calcite-color-inverse-press);
+
+ /* end icon */
+ --calcite-button-icon-end-color: var(--calcite-color-text-1);
+ --calcite-button-icon-end-color-hover: var(--calcite-color-inverse-hover);
+ --calcite-button-icon-end-color-focus: var(--calcite-color-inverse-hover);
+ --calcite-button-icon-end-color-active: var(--calcite-color-inverse-press);
+
+ /* box shadow */
+ --calcite-button-box-shadow-hover: inset 0 0 0 1px var(--calcite-color-inverse-hover);
+ --calcite-button-box-shadow-focus: inset 0 0 0 2px var(--calcite-color-inverse-hover);
+ --calcite-button-box-shadow-active: inset 0 0 0 2px var(--calcite-color-inverse-press);
+ }
+ calcite-loader {
+ --calcite-button-text-color: var(--calcite-color-text-1);
}
}
@@ -509,35 +611,40 @@
border-inline-end-width: theme("borderWidth.DEFAULT");
}
-// transparent
+/* transparent */
:host([appearance="transparent"]:not(.enable-editing-button)) {
button,
a {
- @apply bg-transparent;
- &:hover,
- &:focus {
- background-color: var(--calcite-color-transparent-hover);
- }
- &:active {
- background-color: var(--calcite-color-transparent-press);
- }
+ --calcite-button-background-color: var(--calcite-color-transparent);
+ --calcite-button-background-color-hover: var(--calcite-color-transparent-hover);
+ --calcite-button-background-color-focus: var(--calcite-color-transparent-hover);
+ --calcite-button-background-color-active: var(--calcite-color-transparent-press);
}
}
+
:host([appearance="transparent"][kind="brand"]) {
button,
a {
- color: theme("colors.brand");
- &:hover {
- color: theme("colors.brand-hover");
- }
- &:focus {
- color: theme("colors.brand");
- }
- &:active {
- color: theme("colors.brand-press");
- }
+ /* text */
+ --calcite-button-text-color: var(--calcite-color-brand);
+ --calcite-button-text-color-hover: var(--calcite-color-brand-hover);
+ --calcite-button-text-color-focus: var(--calcite-color-brand);
+ --calcite-button-text-color-active: var(--calcite-color-brand-press);
+
+ /* start icon */
+ --calcite-button-icon-start-color: var(--calcite-color-brand);
+ --calcite-button-icon-start-color-hover: var(--calcite-color-brand-hover);
+ --calcite-button-icon-start-color-focus: var(--calcite-color-brand-hover);
+ --calcite-button-icon-start-color-active: var(--calcite-color-brand-press);
+
+ /* end icon */
+ --calcite-button-icon-end-color: var(--calcite-color-brand);
+ --calcite-button-icon-end-color-hover: var(--calcite-color-brand-hover);
+ --calcite-button-icon-end-color-focus: var(--calcite-color-brand-hover);
+ --calcite-button-icon-end-color-active: var(--calcite-color-brand-press);
+
calcite-loader {
- color: theme("colors.brand");
+ --calcite-button-text-color: var(--calcite-color-brand);
}
}
}
@@ -545,18 +652,25 @@
:host([appearance="transparent"][kind="danger"]) {
button,
a {
- color: theme("colors.danger");
- &:hover {
- color: theme("colors.danger-hover");
- }
- &:focus {
- color: theme("colors.danger");
- }
- &:active {
- color: theme("colors.danger-press");
- }
+ /* text */
+ --calcite-button-text-color: var(--calcite-color-status-danger);
+ --calcite-button-text-color-hover: var(--calcite-color-status-danger-hover);
+ --calcite-button-text-color-focus: var(--calcite-color-status-danger);
+ --calcite-button-text-color-active: var(--calcite-color-status-danger-press);
+
+ /* start icon */
+ --calcite-button-icon-start-color: var(--calcite-color-status-danger);
+ --calcite-button-icon-start-color-hover: var(--calcite-color-status-danger-hover);
+ --calcite-button-icon-start-color-focus: var(--calcite-color-status-danger-hover);
+ --calcite-button-icon-start-color-active: var(--calcite-color-status-danger-press);
+
+ /* end icon */
+ --calcite-button-icon-end-color: var(--calcite-color-status-danger);
+ --calcite-button-icon-end-color-hover: var(--calcite-color-status-danger-hover);
+ --calcite-button-icon-end-color-focus: var(--calcite-color-status-danger-hover);
+ --calcite-button-icon-end-color-active: var(--calcite-color-status-danger-press);
calcite-loader {
- color: theme("colors.danger");
+ --calcite-button-text-color: var(--calcite-color-status-danger);
}
}
}
@@ -565,32 +679,30 @@
button,
a,
calcite-loader {
- @apply text-color-1;
+ --calcite-button-text-color: var(--calcite-color-text-1);
}
}
:host([appearance="transparent"][kind="neutral"].cancel-editing-button) {
button {
- @apply text-color-3
- border-t-color-input
- border-b-color-input
- border-t
- border-b;
+ @apply border-t-color-input
+ border-b-color-input
+ border-t
+ border-b;
border-block-style: solid;
+ --calcite-button-text-color: var(--calcite-color-text-3);
+ --calcite-button-text-color-hover: var(--calcite-color-text-1);
+
&:not(.content--slotted) {
--calcite-button-padding-y-internal: 0;
}
-
- &:hover {
- @apply text-color-1;
- }
}
}
:host([appearance="transparent"][kind="neutral"].enable-editing-button) {
button {
- @apply bg-transparent;
+ --calcite-button-background-color: var(--calcite-color-transparent);
}
}
@@ -599,7 +711,7 @@
:host(.enable-editing-button) {
button {
&:focus {
- outline-offset: -2px; // ensure focus outlines work in Safari
+ outline-offset: -2px; /* ensure focus outlines work in Safari */
}
}
}
@@ -608,17 +720,17 @@
button,
a,
calcite-loader {
- @apply text-color-inverse;
+ --calcite-button-text-color: var(--calcite-color-text-inverse);
}
}
-// generate button scales (scenario: text exists)
+/* generate button scales (scenario: text exists) */
:host([scale="s"]) button.content--slotted,
:host([scale="s"]) a.content--slotted {
@apply text-n2h;
}
-// accommodate for transparent buttons not having borders
+/* accommodate for transparent buttons not having borders */
:host([scale="s"][appearance="transparent"]) button.content--slotted,
:host([scale="s"][appearance="transparent"]) a.content--slotted {
--calcite-button-padding-x-internal: theme("padding.2");
@@ -639,7 +751,7 @@
:host([scale="m"]) a {
--calcite-button-padding-y-internal: 7px;
}
-// accommodate for transparent buttons not having borders
+/* accommodate for transparent buttons not having borders */
:host([scale="m"][appearance="transparent"]) button.content--slotted,
:host([scale="m"][appearance="transparent"]) a.content--slotted {
--calcite-button-padding-x-internal: theme("padding.3");
@@ -656,13 +768,13 @@
--calcite-button-padding-x-internal: theme("padding.4");
--calcite-button-padding-y-internal: 11px;
}
- //shrink the padding if an icon is present to preserve the height
+ /* shrink the padding if an icon is present to preserve the height */
.button-padding--shrunk {
--calcite-button-padding-y-internal: 9px;
}
}
-// generate fab scales (scenario: 1 icon, ie., should be square)
+/* generate fab scales (scenario: 1 icon, ie., should be square) */
:host([scale="s"]) button:not(.content--slotted),
:host([scale="s"]) a:not(.content--slotted) {
--calcite-button-padding-x-internal: theme("padding[0.5]");
@@ -685,19 +797,19 @@
@apply text-0h w-11;
min-block-size: theme("height.11");
}
-// accommodate for transparent buttons not having borders
+/* accommodate for transparent buttons not having borders */
:host([scale="l"][appearance="transparent"]) button:not(.content--slotted),
:host([scale="l"][appearance="transparent"]) a:not(.content--slotted) {
--calcite-button-padding-y-internal: theme("padding[2.5]");
}
-// generate fab scales (scenario: 2 icons, ie., should not be square)
+/* generate fab scales (scenario: 2 icons, ie., should not be square) */
:host([scale="s"][icon-start][icon-end]) button:not(.content--slotted),
:host([scale="s"][icon-start][icon-end]) a:not(.content--slotted) {
--calcite-button-padding-x-internal: 23px;
@apply text-0h h-6;
}
-// accommodate for transparent buttons not having borders
+/* accommodate for transparent buttons not having borders */
:host([scale="s"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="s"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
--calcite-button-padding-x-internal: theme("padding.6");
@@ -707,7 +819,7 @@
--calcite-button-padding-x-internal: theme("padding.8");
@apply text-0h h-8;
}
-// accommodate for transparent buttons not having borders
+/* accommodate for transparent buttons not having borders */
:host([scale="m"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="m"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
--calcite-button-padding-x-internal: 33px;
@@ -716,12 +828,12 @@
:host([scale="l"][icon-start][icon-end]) a:not(.content--slotted) {
--calcite-button-padding-x-internal: 43px;
@apply text-0h h-11;
- // add space between when only 2 icons
+ /* add space between when only 2 icons */
.icon--start + .icon--end {
margin-inline-start: theme("margin.4");
}
}
-// accommodate for transparent buttons not having borders
+/* accommodate for transparent buttons not having borders */
:host([scale="l"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="l"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
--calcite-button-padding-x-internal: theme("padding.11");
diff --git a/packages/calcite-components/src/components/button/readme.md b/packages/calcite-components/src/components/button/readme.md
index c58dc8e9474..cb9d92673d7 100644
--- a/packages/calcite-components/src/components/button/readme.md
+++ b/packages/calcite-components/src/components/button/readme.md
@@ -61,28 +61,28 @@ Any additional attributes set on `` are passed to the internal `
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
-| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` |
-| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
-| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` |
-| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` |
-| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` |
-| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` |
-| `kind` | `kind` | Specifies the kind of the component, which will apply to the border and background if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` |
-| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
-| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` |
-| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` |
-| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` |
-| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
-| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` |
-| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` |
-| `type` | `type` | Specifies the default behavior of the component. | `string` | `"button"` |
-| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` |
+| Property | Attribute | Description | Type | Default |
+| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
+| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` |
+| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` |
+| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
+| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
+| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` |
+| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` |
+| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` |
+| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` |
+| `kind` | `kind` | Specifies the kind of the component, which will apply to the border and background if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` |
+| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
+| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` |
+| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` |
+| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` |
+| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` |
+| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` |
+| `type` | `type` | Specifies the default behavior of the component. | `string` | `"button"` |
+| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` |
## Methods
diff --git a/packages/calcite-components/src/components/checkbox/readme.md b/packages/calcite-components/src/components/checkbox/readme.md
index cd19e3c93b4..88dcd586252 100644
--- a/packages/calcite-components/src/components/checkbox/readme.md
+++ b/packages/calcite-components/src/components/checkbox/readme.md
@@ -32,7 +32,7 @@
| --------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
+| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `guid` | `guid` | The `id` attribute of the component. When omitted, a globally unique identifier is used. | `string` | `undefined` |
| `indeterminate` | `indeterminate` | When `true`, the component is initially indeterminate, which is independent from its `checked` value. The state is visual only, and can look different across browsers. | `boolean` | `false` |
| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
diff --git a/packages/calcite-components/src/components/chip/readme.md b/packages/calcite-components/src/components/chip/readme.md
index 06744361cce..a545e662bc2 100644
--- a/packages/calcite-components/src/components/chip/readme.md
+++ b/packages/calcite-components/src/components/chip/readme.md
@@ -20,7 +20,7 @@
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
-| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "inverse" \| "neutral"` | `"neutral"` |
+| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background if applicable. | `"brand" \| "inverse" \| "neutral"` | `"neutral"` |
| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ChipMessages` | `undefined` |
| `scale` | `scale` | Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. | `"l" \| "m" \| "s"` | `"m"` |
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index 753d399af8e..2ecfb7b404c 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -888,7 +888,7 @@ describe("calcite-combobox", () => {
}
});
- describe("keyboard navigation", () => {
+ describe("keyboard navigation in all selection-display mode", () => {
let page: E2EPage;
const scrollablePageSizeInPx = 2400;
// PageUp/Down scroll test fails without the delay
@@ -898,10 +898,10 @@ describe("calcite-combobox", () => {
page = await newE2EPage();
await page.setContent(html`
-
-
-
-
+
+
+
+
`);
@@ -1121,16 +1121,98 @@ describe("calcite-combobox", () => {
expect(chips.length).toEqual(2);
});
- it("should delete last chip on Delete", async () => {
+ it("should delete last item on Delete", async () => {
+ expect((await element.getProperty("selectedItems")).length).toBe(3);
await element.click();
-
await element.press("Backspace");
- chips = await page.findAll("#myCombobox >>> calcite-chip");
- expect(chips.length).toEqual(2);
+ expect((await element.getProperty("selectedItems")).length).toBe(2);
});
});
});
+ describe("deleting items with the keyboard in single and fit selection-display modes", () => {
+ it("should not delete any items on Delete in single selection-display mode", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+
+
+
+
+
+
+ `);
+
+ const element = await page.find("#myCombobox");
+ await element.click();
+
+ const item1 = await page.find("calcite-combobox-item#one");
+ const item2 = await page.find("calcite-combobox-item#two");
+ const item3 = await page.find("calcite-combobox-item:last-child");
+ await item1.click();
+ await item2.click();
+ await item3.click();
+
+ await element.click();
+ await element.press("Backspace");
+ expect((await element.getProperty("selectedItems")).length).toBe(3);
+ });
+
+ it("should not delete any items on Delete in fit selection-display mode when there are overflowed chips", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+
+
+
+
+
+
+ `);
+
+ const element = await page.find("#myCombobox");
+ await element.click();
+
+ const item1 = await page.find("calcite-combobox-item#one");
+ const item2 = await page.find("calcite-combobox-item#two");
+ const item3 = await page.find("calcite-combobox-item:last-child");
+ await item1.click();
+ await item2.click();
+ await item3.click();
+
+ await element.click();
+ await element.press("Backspace");
+ expect((await element.getProperty("selectedItems")).length).toBe(3);
+ });
+
+ it("should delete last item on Delete in fit selection-display mode when there are no overflowed chips", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+
+
+
+
+
+
+ `);
+
+ const element = await page.find("#myCombobox");
+ await element.click();
+
+ const item1 = await page.find("calcite-combobox-item#one");
+ const item2 = await page.find("calcite-combobox-item#two");
+ const item3 = await page.find("calcite-combobox-item:last-child");
+ await item1.click();
+ await item2.click();
+ await item3.click();
+
+ await element.click();
+ await element.press("Backspace");
+ expect((await element.getProperty("selectedItems")).length).toBe(2);
+ });
+ });
+
describe("calciteComboboxChange", () => {
it("should have 1 selectedItem when single select", async () => {
const page = await newE2EPage();
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index fad92b77723..1c5af4c1871 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -742,6 +742,12 @@ export class Combobox
break;
case "Delete":
case "Backspace":
+ const notDeletable =
+ this.selectionDisplay === "single" ||
+ (this.selectionDisplay === "fit" && this.selectedHiddenChipsCount > 0);
+ if (notDeletable) {
+ return;
+ }
if (this.activeChipIndex > -1) {
event.preventDefault();
this.removeActiveChip();
diff --git a/packages/calcite-components/src/components/combobox/readme.md b/packages/calcite-components/src/components/combobox/readme.md
index e6a278e515c..1970f6893f7 100644
--- a/packages/calcite-components/src/components/combobox/readme.md
+++ b/packages/calcite-components/src/components/combobox/readme.md
@@ -72,32 +72,32 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------ |
-| `allowCustomValues` | `allow-custom-values` | When `true`, allows entry of custom values, which are not in the original set of items. | `boolean` | `undefined` |
-| `clearDisabled` | `clear-disabled` | When `true`, the value-clearing will be disabled. | `boolean` | `false` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `filteredItems` | -- | Specifies the component's filtered items. | `HTMLCalciteComboboxItemElement[]` | `[]` |
-| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `Placement[]` | `undefined` |
-| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
-| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` |
-| `maxItems` | `max-items` | Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. | `number` | `0` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ComboboxMessages` | `undefined` |
-| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` |
-| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` |
-| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` |
-| `placeholder` | `placeholder` | Specifies the placeholder text for the input. | `string` | `undefined` |
-| `placeholderIcon` | `placeholder-icon` | Specifies the placeholder icon for the input. | `string` | `undefined` |
-| `placeholderIconFlipRtl` | `placeholder-icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
-| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
-| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteComboboxItemElement[]` | `[]` |
-| `selectionDisplay` | `selection-display` | When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections). | `"all" \| "fit" \| "single"` | `"all"` |
-| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. | `"ancestors" \| "multiple" \| "single" \| "single-persist"` | `"multiple"` |
-| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` |
-| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` |
-| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` |
-| `value` | `value` | The component's value(s) from the selected `calcite-combobox-item`(s). | `string \| string[]` | `null` |
+| Property | Attribute | Description | Type | Default |
+| ------------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------ |
+| `allowCustomValues` | `allow-custom-values` | When `true`, allows entry of custom values, which are not in the original set of items. | `boolean` | `undefined` |
+| `clearDisabled` | `clear-disabled` | When `true`, the value-clearing will be disabled. | `boolean` | `false` |
+| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
+| `filteredItems` | -- | Specifies the component's filtered items. | `HTMLCalciteComboboxItemElement[]` | `[]` |
+| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `Placement[]` | `undefined` |
+| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
+| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` |
+| `maxItems` | `max-items` | Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. | `number` | `0` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ComboboxMessages` | `undefined` |
+| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` |
+| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` |
+| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` |
+| `placeholder` | `placeholder` | Specifies the placeholder text for the input. | `string` | `undefined` |
+| `placeholderIcon` | `placeholder-icon` | Specifies the placeholder icon for the input. | `string` | `undefined` |
+| `placeholderIconFlipRtl` | `placeholder-icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
+| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteComboboxItemElement[]` | `[]` |
+| `selectionDisplay` | `selection-display` | When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where: `"all"` displays all selections with individual `calcite-chip`s, `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and `"single"` displays one `calcite-chip` with the total number of selections. | `"all" \| "fit" \| "single"` | `"all"` |
+| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. | `"ancestors" \| "multiple" \| "single" \| "single-persist"` | `"multiple"` |
+| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` |
+| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` |
+| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` |
+| `value` | `value` | The component's value(s) from the selected `calcite-combobox-item`(s). | `string \| string[]` | `null` |
## Events
diff --git a/packages/calcite-components/src/components/fab/readme.md b/packages/calcite-components/src/components/fab/readme.md
index 99796cbe412..cd1a731e858 100644
--- a/packages/calcite-components/src/components/fab/readme.md
+++ b/packages/calcite-components/src/components/fab/readme.md
@@ -44,7 +44,7 @@ Renders a `calcite-fab` that displays text alongside an icon.
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `icon` | `icon` | Specifies an icon to display. | `string` | `ICONS.plus` |
| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
-| `kind` | `kind` | Specifies the kind of the component (will apply to border and background). | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` |
+| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` |
| `label` | `label` | Accessible name for the component. | `string` | `undefined` |
| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
index 36cd6c0fcb2..cd46dab1dd8 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
@@ -1,5 +1,16 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ delegatesToFloatingUiOwningComponent,
+ disabled,
+ focusable,
+ hidden,
+ reflects,
+ renders,
+ slots,
+ t9n,
+} from "../../tests/commonTests";
import { CSS, SLOTS } from "./resources";
import { html } from "../../../support/formatting";
@@ -46,6 +57,10 @@ describe("calcite-flow-item", () => {
propertyName: "menuOpen",
defaultValue: false,
},
+ {
+ propertyName: "overlayPositioning",
+ defaultValue: "absolute",
+ },
{
propertyName: "showBackButton",
defaultValue: false,
@@ -53,6 +68,43 @@ describe("calcite-flow-item", () => {
]);
});
+ describe("reflects", () => {
+ reflects("calcite-flow-item", [
+ {
+ propertyName: "closable",
+ value: true,
+ },
+ {
+ propertyName: "closed",
+ value: true,
+ },
+ {
+ propertyName: "collapsible",
+ value: true,
+ },
+ {
+ propertyName: "collapsed",
+ value: true,
+ },
+ {
+ propertyName: "disabled",
+ value: true,
+ },
+ {
+ propertyName: "loading",
+ value: true,
+ },
+ {
+ propertyName: "menuOpen",
+ value: true,
+ },
+ {
+ propertyName: "overlayPositioning",
+ value: "fixed",
+ },
+ ]);
+ });
+
describe("slots", () => {
slots("calcite-flow-item", SLOTS);
});
@@ -95,6 +147,15 @@ describe("calcite-flow-item", () => {
t9n("calcite-flow-item");
});
+ describe("delegates to floating-ui-owner component", () => {
+ delegatesToFloatingUiOwningComponent(
+ html`
+
+ `,
+ "calcite-panel",
+ );
+ });
+
it("showBackButton", async () => {
const page = await newE2EPage();
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index 8f7932f6a28..ed45b147df1 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -37,6 +37,7 @@ import { HeadingLevel } from "../functional/Heading";
import { SLOTS as PANEL_SLOTS } from "../panel/resources";
import { FlowItemMessages } from "./assets/flow-item/t9n";
import { CSS, ICONS, SLOTS } from "./resources";
+import { OverlayPositioning } from "../../utils/floating-ui";
/**
* @slot - A slot for adding custom content.
@@ -139,6 +140,16 @@ export class FlowItem
// eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
@Prop({ mutable: true }) messages: FlowItemMessages;
+ /**
+ * Determines the type of positioning to use for the overlaid content.
+ *
+ * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+ *
+ * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+ *
+ */
+ @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
+
/**
* When `true`, displays a back button in the component's header.
*
@@ -344,6 +355,7 @@ export class FlowItem
loading,
menuOpen,
messages,
+ overlayPositioning,
} = this;
return (
@@ -364,6 +376,7 @@ export class FlowItem
onCalcitePanelClose={this.handlePanelClose}
onCalcitePanelScroll={this.handlePanelScroll}
onCalcitePanelToggle={this.handlePanelToggle}
+ overlayPositioning={overlayPositioning}
// 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.setContainerRef}
>
diff --git a/packages/calcite-components/src/components/flow/flow.scss b/packages/calcite-components/src/components/flow/flow.scss
index f3442089803..6ec7479511a 100755
--- a/packages/calcite-components/src/components/flow/flow.scss
+++ b/packages/calcite-components/src/components/flow/flow.scss
@@ -1,61 +1,66 @@
:host {
- @extend %component-host;
- @apply relative
- flex
- w-full
- flex-auto
- items-stretch
- overflow-hidden
- bg-transparent;
+ @include base-host();
+ position: relative;
+ display: flex;
+ inline-size: 100%;
+ flex: 1 1 auto;
+ align-items: stretch;
+ overflow: hidden;
+
+ --calcite-internal-flow-animation-opacity-start: var(--calcite-opacity-50);
+ --calcite-internal-flow-animation-opacity-end: var(--calcite-opacity-100);
+ --calcite-internal-flow-animation-timing: var(--calcite-animation-timing);
+ --calcite-internal-flow-animation-advance: calcite-frame-advance var(--calcite-internal-flow-animation-timing);
+ --calcite-internal-flow-animation-retreat: calcite-frame-retreat var(--calcite-internal-flow-animation-timing);
.frame {
- @apply relative
- m-0
- flex
- w-full
- flex-auto
- flex-col
- items-stretch
- p-0;
+ position: relative;
+ display: flex;
+ margin: 0;
+ inline-size: 100%;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-items: stretch;
+ padding: 0;
}
::slotted(calcite-flow-item),
::slotted(calcite-panel) {
- @apply h-full;
+ block-size: 100%;
}
::slotted(.calcite-match-height:last-child) {
- @apply flex
- flex-auto
- overflow-hidden;
+ display: flex;
+ flex: 1 1 auto;
+ overflow: hidden;
}
.frame--advancing {
- animation: calcite-frame-advance var(--calcite-animation-timing);
+ animation: var(--calcite-internal-flow-animation-advance);
}
.frame--retreating {
- animation: calcite-frame-retreat var(--calcite-animation-timing);
+ animation: var(--calcite-internal-flow-animation-retreat);
}
@keyframes calcite-frame-advance {
0% {
- @apply bg-opacity-50;
+ opacity: var(--calcite-internal-flow-animation-opacity-start);
transform: translate3d(50px, 0, 0);
}
100% {
- @apply bg-opacity-100;
+ opacity: var(--calcite-internal-flow-animation-opacity-end);
transform: translate3d(0, 0, 0);
}
}
@keyframes calcite-frame-retreat {
0% {
- @apply bg-opacity-50;
+ opacity: var(--calcite-internal-flow-animation-opacity-start);
transform: translate3d(-50px, 0, 0);
}
100% {
- @apply bg-opacity-100;
+ opacity: var(--calcite-internal-flow-animation-opacity-end);
transform: translate3d(0, 0, 0);
}
}
diff --git a/packages/calcite-components/src/components/input-date-picker/readme.md b/packages/calcite-components/src/components/input-date-picker/readme.md
index 8c1418293bb..8eebce9e5f1 100644
--- a/packages/calcite-components/src/components/input-date-picker/readme.md
+++ b/packages/calcite-components/src/components/input-date-picker/readme.md
@@ -34,7 +34,7 @@ document.querySelector("calcite-input-date-picker").value = ["2023-10-01", "2023
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `Placement[]` | `undefined` |
| `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` |
-| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
+| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` |
| `max` | `max` | Specifies the latest allowed date ("yyyy-mm-dd"). | `string` | `undefined` |
@@ -64,7 +64,7 @@ document.querySelector("calcite-input-date-picker").value = ["2023-10-01", "2023
| ----------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- |
| `calciteInputDatePickerBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` |
| `calciteInputDatePickerBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` |
-| `calciteInputDatePickerChange` | Fires when the component's value changes. | `CustomEvent` |
+| `calciteInputDatePickerChange` | Fires when the component's `value` changes. | `CustomEvent` |
| `calciteInputDatePickerClose` | Fires when the component is closed and animation is complete. | `CustomEvent` |
| `calciteInputDatePickerOpen` | Fires when the component is open and animation is complete. | `CustomEvent` |
diff --git a/packages/calcite-components/src/components/input-message/input-message.scss b/packages/calcite-components/src/components/input-message/input-message.scss
index 55624f9b5ba..140d88f86ed 100644
--- a/packages/calcite-components/src/components/input-message/input-message.scss
+++ b/packages/calcite-components/src/components/input-message/input-message.scss
@@ -6,25 +6,14 @@
* @prop --calcite-input-message-spacing-value: The top margin spacing above the component.
*/
-:host([scale="m"]),
-:host([scale="l"]) {
- --calcite-input-message-spacing-value: theme("spacing.1");
-}
-
:host {
@apply text-color-1 transition-default box-border flex h-auto w-full items-center font-medium opacity-100;
-}
-
-:host([scale="m"]),
-:host([scale="l"]) {
+ --calcite-input-message-spacing-value: theme("spacing.1");
margin-block-start: var(--calcite-input-message-spacing-value);
}
.calcite-input-message-icon {
- @apply transition-default
- pointer-events-none
- inline-flex
- flex-shrink-0;
+ @apply transition-default pointer-events-none inline-flex flex-shrink-0;
margin-inline-end: theme("margin.2");
}
@@ -44,21 +33,16 @@
color: var(--calcite-color-brand);
}
-// Validation Text
-:host([status]) {
- @apply text-color-1;
-}
-
-:host([status][scale="s"]) {
+:host([scale="s"]) {
@apply text-n3h;
}
-:host([status][scale="m"]) {
- @apply text-n2h mt-1;
+:host([scale="m"]) {
+ @apply text-n2h;
}
-:host([status][scale="l"]) {
- @apply text-n1h mt-1;
+:host([scale="l"]) {
+ @apply text-n1h;
}
@include base-component();
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index c058ad08984..4e11ad71e05 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -134,13 +134,6 @@ export class InputNumber
*/
@Prop({ reflect: true }) groupSeparator = false;
- /**
- * When `true`, the component will not be visible.
- *
- * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
- */
- @Prop({ reflect: true }) hidden = false;
-
/**
* Specifies an icon to display.
*
@@ -804,13 +797,6 @@ export class InputNumber
}
};
- onFormReset(): void {
- this.setNumberValue({
- origin: "reset",
- value: this.defaultValue,
- });
- }
-
syncHiddenFormInput(input: HTMLInputElement): void {
input.type = "number";
input.min = this.min?.toString(10) ?? "";
diff --git a/packages/calcite-components/src/components/input-number/readme.md b/packages/calcite-components/src/components/input-number/readme.md
index 3e7b9654d6d..63b75d00bf0 100644
--- a/packages/calcite-components/src/components/input-number/readme.md
+++ b/packages/calcite-components/src/components/input-number/readme.md
@@ -31,7 +31,7 @@ Restrict the component to integer numbers only with `integer`, which will disabl
| `clearable` | `clearable` | When `true`, a clear button is displayed when the component has a value. | `boolean` | `false` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `enterKeyHint` | `enter-key-hint` | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. | `string` | `undefined` |
-| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
+| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` |
| `hidden` | `hidden` | When `true`, the component will not be visible. | `boolean` | `false` |
| `icon` | `icon` | Specifies an icon to display. | `boolean \| string` | `undefined` |
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index c9d8b28ff91..c711293efdf 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -110,13 +110,6 @@ export class InputText
@Prop({ reflect: true })
form: string;
- /**
- * When `true`, the component will not be visible.
- *
- * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
- */
- @Prop({ reflect: true }) hidden = false;
-
/**
* Specifies an icon to display.
*
@@ -500,13 +493,6 @@ export class InputText
}
};
- onFormReset(): void {
- this.setValue({
- origin: "reset",
- value: this.defaultValue,
- });
- }
-
syncHiddenFormInput(input: HTMLInputElement): void {
if (this.minLength != null) {
input.minLength = this.minLength;
diff --git a/packages/calcite-components/src/components/input-text/readme.md b/packages/calcite-components/src/components/input-text/readme.md
index f9fc27b0938..323608ab827 100644
--- a/packages/calcite-components/src/components/input-text/readme.md
+++ b/packages/calcite-components/src/components/input-text/readme.md
@@ -20,7 +20,7 @@
| `clearable` | `clearable` | When `true`, a clear button is displayed when the component has a value. | `boolean` | `false` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `enterKeyHint` | `enter-key-hint` | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. | `string` | `undefined` |
-| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
+| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `hidden` | `hidden` | When `true`, the component will not be visible. | `boolean` | `false` |
| `icon` | `icon` | Specifies an icon to display. | `boolean \| string` | `undefined` |
| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
diff --git a/packages/calcite-components/src/components/input-time-picker/readme.md b/packages/calcite-components/src/components/input-time-picker/readme.md
index 20fd74bdfc3..67175b07ea6 100644
--- a/packages/calcite-components/src/components/input-time-picker/readme.md
+++ b/packages/calcite-components/src/components/input-time-picker/readme.md
@@ -22,7 +22,7 @@
| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` |
-| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
+| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ [x: string]: any; }` | `undefined` |
| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` |
| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` |
@@ -44,7 +44,7 @@
| ----------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- |
| `calciteInputTimePickerBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` |
| `calciteInputTimePickerBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` |
-| `calciteInputTimePickerChange` | Fires when the time value is changed as a result of user input. | `CustomEvent` |
+| `calciteInputTimePickerChange` | Fires when the component's `value` is changes. | `CustomEvent` |
| `calciteInputTimePickerClose` | Fires when the component is closed and animation is complete. | `CustomEvent` |
| `calciteInputTimePickerOpen` | Fires when the component is open and animation is complete. | `CustomEvent` |
diff --git a/packages/calcite-components/src/components/input-time-zone/readme.md b/packages/calcite-components/src/components/input-time-zone/readme.md
index 5c44253c4fc..edd0d625a7d 100644
--- a/packages/calcite-components/src/components/input-time-zone/readme.md
+++ b/packages/calcite-components/src/components/input-time-zone/readme.md
@@ -25,14 +25,14 @@ Displays options to select a IANA time zone name.
| Property | Attribute | Description | Type | Default |
| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `form` | `form` | The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
+| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` |
| `maxItems` | `max-items` | Specifies the component's maximum number of options to display before displaying a scrollbar. | `number` | `0` |
| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `InputTimeZoneMessages` | `undefined` |
| `mode` | `mode` | This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. | `"name" \| "offset"` | `"offset"` |
| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` |
| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` |
| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` |
-| `referenceDate` | `reference-date` | This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) | `Date \| string` | `undefined` |
+| `referenceDate` | `reference-date` | This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`). | `Date \| string` | `undefined` |
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` |
| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` |
@@ -41,13 +41,13 @@ Displays options to select a IANA time zone name.
## Events
-| Event | Description | Type |
-| --------------------------------- | ----------- | ------------------- |
-| `calciteInputTimeZoneBeforeClose` | | `CustomEvent` |
-| `calciteInputTimeZoneBeforeOpen` | | `CustomEvent` |
-| `calciteInputTimeZoneChange` | | `CustomEvent` |
-| `calciteInputTimeZoneClose` | | `CustomEvent` |
-| `calciteInputTimeZoneOpen` | | `CustomEvent` |
+| Event | Description | Type |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- |
+| `calciteInputTimeZoneBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` |
+| `calciteInputTimeZoneBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` |
+| `calciteInputTimeZoneChange` | Fires when the component's `value` changes. | `CustomEvent` |
+| `calciteInputTimeZoneClose` | Fires after the component is closed and animation is complete. | `CustomEvent` |
+| `calciteInputTimeZoneOpen` | Fires after the component is opened and animation is complete. | `CustomEvent` |
## Methods
diff --git a/packages/calcite-components/src/components/input/common/tests.ts b/packages/calcite-components/src/components/input/common/tests.ts
index f1e15dc57a2..d0200d46f57 100644
--- a/packages/calcite-components/src/components/input/common/tests.ts
+++ b/packages/calcite-components/src/components/input/common/tests.ts
@@ -13,7 +13,7 @@ export function testPostValidationFocusing(
await page.setContent(html`