@carbon/charts 1.17.3 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts",
-	"version": "1.17.3",
+	"version": "1.19.0",
 	"description": "Carbon Charts component library",
 	"type": "module",
 	"module": "./dist/index.mjs",
@@ -80,7 +80,7 @@
 		"d3-cloud": "^1.2.7",
 		"d3-sankey": "^0.12.3",
 		"date-fns": "^3.6.0",
-		"dompurify": "^3.1.5",
+		"dompurify": "^3.1.6",
 		"html-to-image": "^1.11.11",
 		"lodash-es": "^4.17.21",
 		"topojson-client": "^3.1.0",
@@ -88,7 +88,7 @@
 	},
 	"devDependencies": {
 		"@carbon/layout": "^11.23.1",
-		"@carbon/styles": "^1.60.1",
+		"@carbon/styles": "^1.61.0",
 		"@carbon/themes": "^11.37.1",
 		"@playwright/test": "^1.45.1",
 		"@rollup/plugin-replace": "^5.0.7",
@@ -97,7 +97,7 @@
 		"@types/d3-sankey": "^0.12.4",
 		"@types/dompurify": "^3.0.5",
 		"@types/lodash-es": "^4.17.12",
-		"@types/node": "^20.14.9",
+		"@types/node": "^20.14.10",
 		"@types/topojson": "^3.2.6",
 		"concurrently": "^8.2.2",
 		"downlevel-dts": "^0.11.0",
@@ -106,11 +106,11 @@
 		"prettier": "^3.3.2",
 		"publint": "^0.2.8",
 		"resize-observer-polyfill": "^1.5.1",
-		"sass": "^1.77.6",
+		"sass": "^1.77.8",
 		"typescript": "^5.5.3",
 		"vite": "^5.3.3",
 		"vite-plugin-dts": "^3.9.1",
-		"vitest": "^1.6.0"
+		"vitest": "^2.0.2"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -159,5 +159,5 @@
 			"url": "https://github.com/theiliad"
 		}
 	],
-	"gitHead": "2b2ac7a4bcd8e00d7d423696e4235fc66fcbbccf"
+	"gitHead": "a558d646aaba41b31f8da885a78c8aadc1bc83a0"
 }

package/scss/components/toolbar/_buttons.scss

@@ -31,10 +31,6 @@
 			}
 
 			.#{globals.$prefix}--overflow-menu-options__option {
-				&:hover {
-					background-color: var(--#{globals.$prefix}-layer-hover);
-				}
-
 				box-sizing: border-box;
 				border: 0;
 				margin: 0;
@@ -49,12 +45,11 @@
 				inline-size: 100%;
 				transition: background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9);
 
-				.#{globals.$prefix}--overflow-menu-options__btn {
-					&:focus {
-						outline: 2px solid var(--cds-focus, #0f62fe);
-						outline-offset: -2px;
-					}
+				&:hover {
+					background-color: var(--#{globals.$prefix}-layer-hover);
+				}
 
+				.#{globals.$prefix}--overflow-menu-options__btn {
 					font-size: var(--#{globals.$prefix}-body-compact-01-font-size, 0.875rem);
 					font-weight: var(--#{globals.$prefix}-body-compact-01-font-weight, 400);
 					line-height: var(--#{globals.$prefix}-body-compact-01-line-height, 1.28572);
@@ -78,6 +73,10 @@
 						outline 0.11s cubic-bezier(0, 0, 0.38, 0.9),
 						background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9),
 						color 0.11s cubic-bezier(0, 0, 0.38, 0.9);
+					&:focus {
+						outline: 2px solid var(--cds-focus, #0f62fe);
+						outline-offset: -2px;
+					}
 				}
 
 				*,
@@ -108,23 +107,6 @@
 		.#{globals.$prefix}--overflow-menu__trigger {
 			width: 2rem;
 			height: 2rem;
-
-			&:hover {
-				background-color: var(--#{globals.$prefix}-layer-hover);
-			}
-
-			&:focus {
-				outline: 2px solid var(--cds-focus, #0f62fe);
-				outline-offset: -2px;
-			}
-
-			*,
-			::before,
-			::after {
-				box-sizing: inherit;
-			}
-
-			// align-items: center;
 			appearance: none;
 			background: none;
 			block-size: 2.5rem;
@@ -149,6 +131,21 @@
 				background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
 			vertical-align: baseline;
 
+			&:hover {
+				background-color: var(--#{globals.$prefix}-layer-hover);
+			}
+
+			&:focus {
+				outline: 2px solid var(--cds-focus, #0f62fe);
+				outline-offset: -2px;
+			}
+
+			*,
+			::before,
+			::after {
+				box-sizing: inherit;
+			}
+
 			> :first-child {
 				margin-block-start: 0;
 			}

package/scss/components/toolbar/_modal.scss

@@ -43,22 +43,6 @@
 		}
 
 		.#{globals.$prefix}--modal-container {
-			@media (min-width: 42rem) {
-				position: static;
-				width: 84%;
-				height: auto;
-				max-height: 90%;
-			}
-
-			@media (min-width: 66rem) {
-				width: 60%;
-				max-height: 84%;
-			}
-
-			@media (min-width: 82rem) {
-				width: 48%;
-			}
-
 			position: fixed;
 			top: 0;
 			display: grid;
@@ -75,6 +59,22 @@
 			transform-origin: top center;
 			transition: transform 0.24s cubic-bezier(0.4, 0.14, 1, 1);
 
+			@media (min-width: 42rem) {
+				position: static;
+				width: 84%;
+				height: auto;
+				max-height: 90%;
+			}
+
+			@media (min-width: 66rem) {
+				width: 60%;
+				max-height: 84%;
+			}
+
+			@media (min-width: 82rem) {
+				width: 48%;
+			}
+
 			.#{globals.$prefix}--modal-header {
 				padding-top: 1rem;
 				padding-right: 3rem;
@@ -127,15 +127,6 @@
 				}
 
 				.#{globals.$prefix}--modal-close {
-					&:hover {
-						background-color: var(--#{globals.$prefix}-layer-hover);
-					}
-
-					&:focus {
-						border-color: var(--cds-focus, #0f62fe);
-						outline: none;
-					}
-
 					position: absolute;
 					z-index: 2;
 					top: 0;
@@ -154,6 +145,15 @@
 					border-radius: 0;
 					font-family: inherit;
 
+					&:hover {
+						background-color: var(--#{globals.$prefix}-layer-hover);
+					}
+
+					&:focus {
+						border-color: var(--cds-focus, #0f62fe);
+						outline: none;
+					}
+
 					&__icon {
 						width: 1.25rem;
 						height: 1.25rem;
@@ -221,15 +221,15 @@
 						width: 100%;
 
 						tr {
-							&:hover {
-								background: var(--#{globals.$prefix}-layer-hover) !important;
-							}
-
 							transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
 							width: 100;
 							height: 3rem;
 							border: none;
 
+							&:hover {
+								background: var(--#{globals.$prefix}-layer-hover) !important;
+							}
+
 							td {
 								transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
 								padding-right: 1rem;
@@ -327,6 +327,12 @@
 				}
 
 				.#{globals.$prefix}--btn--primary {
+					border-width: 1px;
+					border-style: solid;
+					border-color: transparent;
+					background-color: var(--#{globals.$prefix}-button-primary, #0f62fe);
+					color: var(--#{globals.$prefix}-text-on-color, #ffffff);
+
 					&:hover {
 						color: var(--#{globals.$prefix}-text-on-color, #ffffff);
 						background-color: var(--#{globals.$prefix}-button-primary-hover, #0050e6);
@@ -338,12 +344,6 @@
 							inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)),
 							inset 0 0 0 2px var(--cds-background, #ffffff);
 					}
-
-					border-width: 1px;
-					border-style: solid;
-					border-color: transparent;
-					background-color: var(--#{globals.$prefix}-button-primary, #0f62fe);
-					color: var(--#{globals.$prefix}-text-on-color, #ffffff);
 				}
 			}
 		}