@carbon/charts 1.13.15 → 1.13.18

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts",
-	"version": "1.13.15",
+	"version": "1.13.18",
 	"description": "Carbon Charts component library",
 	"type": "module",
 	"module": "./dist/index.mjs",
@@ -76,7 +76,7 @@
 	"repository": {
 		"type": "git",
 		"url": "git@github.com:carbon-design-system/carbon-charts.git",
-		"homepage": "https://carbon-design-system.github.io/carbon-charts/"
+		"homepage": "https://charts.carbondesignsystem.com/"
 	},
 	"dependencies": {
 		"@carbon/colors": "^11.20.1",
@@ -87,6 +87,7 @@
 		"d3-cloud": "^1.2.7",
 		"d3-sankey": "^0.12.3",
 		"date-fns": "^3.0.6",
+		"dompurify": "^3.0.6",
 		"html-to-image": "^1.11.11",
 		"lodash-es": "^4.17.21",
 		"topojson-client": "^3.1.0",
@@ -115,19 +116,20 @@
 		"@types/d3": "^7.4.3",
 		"@types/d3-cloud": "^1.2.9",
 		"@types/d3-sankey": "^0.12.4",
+		"@types/dompurify": "^3.0.5",
 		"@types/lodash-es": "^4.17.12",
 		"@types/topojson": "^3.2.6",
 		"concurrently": "^8.2.2",
 		"downlevel-dts": "^0.11.0",
 		"jsdom": "^23.0.1",
 		"resize-observer-polyfill": "^1.5.1",
-		"sass": "^1.69.5",
-		"storybook": "~7.6.6",
-		"typedoc": "^0.25.4",
+		"sass": "^1.69.7",
+		"storybook": "~7.6.7",
+		"typedoc": "^0.25.6",
 		"typescript": "^5.3.3",
 		"vite": "^5.0.10",
-		"vite-plugin-dts": "^3.6.4",
-		"vitest": "^1.1.0"
+		"vite-plugin-dts": "^3.7.0",
+		"vitest": "^1.1.1"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -176,5 +178,5 @@
 			"url": "https://github.com/theiliad"
 		}
 	],
-	"gitHead": "3e24b920093adbc60bd41ae893bd56a8f81efed2"
+	"gitHead": "bc5da5e95247793f1e70459161ca713c5aebc1d6"
 }

package/scss/_chart-wrapper.scss

@@ -3,4 +3,4 @@
 .#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
 	overflow: visible;
 	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
-}
+}

package/scss/_color-palette.scss

@@ -332,7 +332,7 @@ $dark-monochrome-quantize-colors: (
 		'8': getColorValue(purple, 30),
 		'9': getColorValue(purple, 20),
 		'10': getColorValue(purple, 10),
-		'11': #ffffff,
+		'11': #ffffff
 	),
 	'mono-2': (
 		'1': getColorValue(blue, 100),
@@ -345,7 +345,7 @@ $dark-monochrome-quantize-colors: (
 		'8': getColorValue(blue, 30),
 		'9': getColorValue(blue, 20),
 		'10': getColorValue(blue, 10),
-		'11': #ffffff,
+		'11': #ffffff
 	),
 	'mono-3': (
 		'1': getColorValue(cyan, 100),
@@ -358,7 +358,7 @@ $dark-monochrome-quantize-colors: (
 		'8': getColorValue(cyan, 30),
 		'9': getColorValue(cyan, 20),
 		'10': getColorValue(cyan, 10),
-		'11': #ffffff,
+		'11': #ffffff
 	),
 	'mono-4': (
 		'1': getColorValue(teal, 100),
@@ -371,8 +371,8 @@ $dark-monochrome-quantize-colors: (
 		'8': getColorValue(teal, 30),
 		'9': getColorValue(teal, 20),
 		'10': getColorValue(teal, 10),
-		'11': #ffffff,
-	),
+		'11': #ffffff
+	)
 );
 
 $divergent-quantize-colors: (
@@ -434,7 +434,7 @@ $dark-divergent-quantize-colors: (
 		'14': getColorValue(cyan, 40),
 		'15': getColorValue(cyan, 30),
 		'16': getColorValue(cyan, 20),
-		'17': getColorValue(cyan, 10),
+		'17': getColorValue(cyan, 10)
 	),
 	'diverge-2': (
 		'1': getColorValue(purple, 10),
@@ -453,6 +453,6 @@ $dark-divergent-quantize-colors: (
 		'14': getColorValue(teal, 40),
 		'15': getColorValue(teal, 30),
 		'16': getColorValue(teal, 20),
-		'17': getColorValue(teal, 10),
-	),
+		'17': getColorValue(teal, 10)
+	)
 );

package/scss/components/_title.scss

@@ -21,4 +21,4 @@
 		height: unset !important;
 		overflow: hidden;
 	}
-}
+}

package/scss/components/_tooltip.scss

@@ -14,12 +14,16 @@
 	word-wrap: break-word;
 	z-index: 1059;
 	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
-	transition: visibility 0s linear 0.1s, opacity 0.1s;
+	transition:
+		visibility 0s linear 0.1s,
+		opacity 0.1s;
 
 	&.hidden {
 		opacity: 0;
 		visibility: hidden;
-		transition: visibility 0s linear 0s, opacity 0.1s;
+		transition:
+			visibility 0s linear 0s,
+			opacity 0.1s;
 		@include motion.motion(standard, expressive);
 	}
 

package/scss/components/toolbar/_buttons.scss

@@ -1,162 +1,163 @@
 @use '../../globals';
 
 .#{globals.$prefix}--chart-holder {
-
-  .#{globals.$prefix}--#{globals.$charts-prefix}--toolbar {
-
-    display: flex;
-
-    .#{globals.$prefix}--overflow-menu-options {
-      box-sizing: border-box;
-      padding: 0;
-      border: 0;
-      margin: 0;
-      font-family: inherit;
-      font-size: 100%;
-      vertical-align: baseline;
-      box-shadow: 0 2px 6px var(--#{globals.$prefix}-shadow, rgba(0, 0, 0, .3));
-      position: absolute;
-      z-index: 6000;
-      display: none;
-      background-color: var(--#{globals.$prefix}-layer);
-      width: 10rem;
-      flex-direction: column;
-      align-items: flex-start;
-      top: 32px;
-      inset-inline-start: 0;
-      list-style: none;
-
-      *, 
-      ::before, 
-      ::after {
-        box-sizing: inherit;
-      }
-
-      .#{globals.$prefix}--overflow-menu-options__option {
-        &:hover {
-          background-color: var(--#{globals.$prefix}-layer-hover);
-        }
-
-        box-sizing: border-box;
-        border: 0;
-        margin: 0;
-        font-family: inherit;
-        font-size: 100%;
-        vertical-align: baseline;
-        display: flex;
-        align-items: center;
-        padding: 0;
-        background-color: transparent;
-        block-size: 2.5rem;
-        inline-size: 100%;
-        transition: background-color .11s cubic-bezier(0,0,.38,.9);
-
-        .#{globals.$prefix}--overflow-menu-options__btn {
-          &:focus {
-            outline: 2px solid var(--cds-focus,#0f62fe);
-            outline-offset: -2px;
-          }
-
-          font-size: var(--#{globals.$prefix}-body-compact-01-font-size, .875rem);
-          font-weight: var(--#{globals.$prefix}-body-compact-01-font-weight, 400);
-          line-height: var(--#{globals.$prefix}-body-compact-01-line-height, 1.28572);
-          letter-spacing: var(--#{globals.$prefix}-body-compact-01-letter-spacing, .16px);
-          outline: 2px solid transparent;
-          outline-offset: -2px;
-          display: inline-flex;
-          align-items: center;
-          padding: 0 1rem;
-          border: none;
-          background-color: transparent;
-          block-size: 100%;
-          color: var(--#{globals.$prefix}-text-secondary, #525252);
-          cursor: pointer;
-          font-family: inherit;
-          font-weight: 400;
-          inline-size: 100%;
-          max-inline-size: 11.25rem;
-          text-align: start;
-          transition: outline .11s cubic-bezier(0,0,.38,.9),background-color .11s cubic-bezier(0,0,.38,.9),color .11s cubic-bezier(0,0,.38,.9);
-        }
-
-        *, 
-        ::before, 
-        ::after {
-          box-sizing: inherit;
-        }
-      }
-    }
-
-    .#{globals.$prefix}--overflow-menu--flip {
-      right: 0;
-      left: unset;
-      // left: -140px;
-
-      &.is-open {
-        display: table;
-      }
-
-      ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-    }
-
-    .#{globals.$prefix}--overflow-menu, .#{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;
-      border: 0;
-      box-sizing: border-box;
-      cursor: pointer;
-      display: flex;
-      font-family: inherit;
-      font-size: 100%;
-      inline-size: 2.5rem;
-      align-items: center;
-      justify-content: center;
-      margin: 0;
-      min-height: 2.5rem;
-      outline: 2px solid transparent;
-      outline-offset: -2px;
-      padding: 0;
-      position: relative;
-      text-align: start;
-      transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
-      vertical-align: baseline;
-
-      > :first-child {
-        margin-block-start: 0;
-      }
-
-      .#{globals.$prefix}--overflow-menu__icon {
-        block-size: 1rem;
-        fill: var(--cds-icon-primary, #161616);
-        inline-size: 1rem;
-      }
-
-    }
-
-  }
-}
+	.#{globals.$prefix}--#{globals.$charts-prefix}--toolbar {
+		display: flex;
+
+		.#{globals.$prefix}--overflow-menu-options {
+			box-sizing: border-box;
+			padding: 0;
+			border: 0;
+			margin: 0;
+			font-family: inherit;
+			font-size: 100%;
+			vertical-align: baseline;
+			box-shadow: 0 2px 6px var(--#{globals.$prefix}-shadow, rgba(0, 0, 0, 0.3));
+			position: absolute;
+			z-index: 6000;
+			display: none;
+			background-color: var(--#{globals.$prefix}-layer);
+			width: 10rem;
+			flex-direction: column;
+			align-items: flex-start;
+			top: 32px;
+			inset-inline-start: 0;
+			list-style: none;
+
+			*,
+			::before,
+			::after {
+				box-sizing: inherit;
+			}
+
+			.#{globals.$prefix}--overflow-menu-options__option {
+				&:hover {
+					background-color: var(--#{globals.$prefix}-layer-hover);
+				}
+
+				box-sizing: border-box;
+				border: 0;
+				margin: 0;
+				font-family: inherit;
+				font-size: 100%;
+				vertical-align: baseline;
+				display: flex;
+				align-items: center;
+				padding: 0;
+				background-color: transparent;
+				block-size: 2.5rem;
+				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;
+					}
+
+					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);
+					letter-spacing: var(--#{globals.$prefix}-body-compact-01-letter-spacing, 0.16px);
+					outline: 2px solid transparent;
+					outline-offset: -2px;
+					display: inline-flex;
+					align-items: center;
+					padding: 0 1rem;
+					border: none;
+					background-color: transparent;
+					block-size: 100%;
+					color: var(--#{globals.$prefix}-text-secondary, #525252);
+					cursor: pointer;
+					font-family: inherit;
+					font-weight: 400;
+					inline-size: 100%;
+					max-inline-size: 11.25rem;
+					text-align: start;
+					transition:
+						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);
+				}
+
+				*,
+				::before,
+				::after {
+					box-sizing: inherit;
+				}
+			}
+		}
+
+		.#{globals.$prefix}--overflow-menu--flip {
+			right: 0;
+			left: unset;
+			// left: -140px;
+
+			&.is-open {
+				display: table;
+			}
+
+			ul {
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+		}
+
+		.#{globals.$prefix}--overflow-menu,
+		.#{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;
+			border: 0;
+			box-sizing: border-box;
+			cursor: pointer;
+			display: flex;
+			font-family: inherit;
+			font-size: 100%;
+			inline-size: 2.5rem;
+			align-items: center;
+			justify-content: center;
+			margin: 0;
+			min-height: 2.5rem;
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+			padding: 0;
+			position: relative;
+			text-align: start;
+			transition:
+				outline 110ms cubic-bezier(0, 0, 0.38, 0.9),
+				background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
+			vertical-align: baseline;
+
+			> :first-child {
+				margin-block-start: 0;
+			}
+
+			.#{globals.$prefix}--overflow-menu__icon {
+				block-size: 1rem;
+				fill: var(--cds-icon-primary, #161616);
+				inline-size: 1rem;
+			}
+		}
+	}
+}