@gooddata/sdk-ui-ext 11.47.0-alpha.0 → 11.47.0-alpha.2

package/NOTICE

@@ -7,9 +7,9 @@
 
 The following 3rd-party software packages may be used by or distributed with gooddata-ui-sdk. Any information relevant to third-party vendors listed below are collected using common, reasonable means.
 
-Date generated: 2026-7-9
+Date generated: 2026-7-10
 
-Revision ID: fbb2b207aa6388a6070a52fba94dbfaee4ce7208
+Revision ID: 49e9a8adde3ee1f908b34090cae5065e788ef0dd
 
 ================================================================================
 ================================================================================
@@ -8770,7 +8770,7 @@ Package Title: json5 (2.2.3)
 
 Package Locator: npm+json5$2.2.3
 
-Package Depth: Direct
+Package Depth: Transitive
 --------------------------------------------------------------------------------
 
 * Declared Licenses *
@@ -13284,7 +13284,7 @@ Package Title: watchpack (2.5.2)
 
 Package Locator: npm+watchpack$2.5.2
 
-Package Depth: Direct
+Package Depth: Transitive
 --------------------------------------------------------------------------------
 
 * Declared Licenses *
@@ -29272,4 +29272,4 @@ POSSIBILITY OF SUCH DAMAGE.
 --------------------------------------------------------------------------------
 --------------------------------------------------------------------------------
 
-Report Generated by FOSSA on 2026-7-9
+Report Generated by FOSSA on 2026-7-10

package/esm/internal/assets/mekko/bucket-title-height.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 5H5v15h8V5Z" fill="#B0BECA" fill-opacity=".75"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 0h5v20h-5V0Z" fill="#B0BECA"/><path d="M3 13H0v7h3v-7Z" fill="#B0BECA" fill-opacity=".6"/></svg>

package/esm/internal/assets/mekko/bucket-title-stack.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 0h5v5h-5V0Z" fill="#B0BECA" fill-opacity=".45"/><path d="M13 4H5v4h8V4ZM3 9H0v4h3V9Z" fill="#B0BECA" fill-opacity=".45"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 6h5v6h-5V6Z" fill="#B0BECA"/><path d="M13 15H5V9h8v6ZM3 14H0v4h3v-4Z" fill="#B0BECA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 13h5v7h-5v-7Z" fill="#94A1AD"/><path d="M13 16H5v4h8v-4ZM3 19H0v1h3v-1Z" fill="#94A1AD"/></svg>

package/esm/internal/assets/mekko/bucket-title-view.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 0h5v18h-5V0Z" fill="#B0BECA" fill-opacity=".45"/><path d="M13 5H5v13h8V5ZM3 10H0v8h3v-8Z" fill="#B0BECA" fill-opacity=".45"/><path d="M20 18H0v2h20v-2Z" fill="#94A1AD"/></svg>

package/esm/internal/assets/mekko/bucket-title-width.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0h-8v20h8V0Z" fill="#B0BECA"/><path d="M3 0H0v20h3V0Z" fill="#B0BECA" fill-opacity=".6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 0h5v20H5V0Z" fill="#B0BECA" fill-opacity=".75"/></svg>

package/esm/internal/components/VisualizationCatalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualizationCatalog.d.ts","sourceRoot":"","sources":["../../../src/internal/components/VisualizationCatalog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAA2B,MAAM,qBAAqB,CAAC;AAEvF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AA+BzF;;;;;GAKG;AACH,MAAM,WAAW,qBAAqB;IAClC;;;;;;;OAOG;IACH,MAAM,CACF,GAAG,EAAE,MAAM,EACX,oBAAoB,CAAC,EAAE,OAAO,EAC9B,oBAAoB,CAAC,EAAE,OAAO,GAC/B,wBAAwB,CAAC;IAE5B;;;;;OAKG;IACH,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAE1C;;;;;;;OAOG;IACH,UAAU,CACN,OAAO,EAAE,kBAAkB,EAC3B,oBAAoB,CAAC,EAAE,OAAO,EAC9B,oBAAoB,CAAC,EAAE,OAAO,GAC/B,wBAAwB,CAAC;IAE5B;;;;;OAKG;IACH,uBAAuB,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC;CACjE;AAED,KAAK,kBAAkB,GAAG;IACtB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,qBAAa,wBAAyB,YAAW,qBAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,OAAO;IAApC,YAA6B,OAAO,EAAE,kBAAkB,EAAI;IAErD,MAAM,CACT,GAAG,EAAE,MAAM,EACX,oBAAoB,CAAC,EAAE,OAAO,EAC9B,oBAAoB,CAAC,EAAE,OAAO,GAC/B,wBAAwB,CAkB1B;IAEM,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAE/C;IAEM,UAAU,CACb,OAAO,EAAE,kBAAkB,EAC3B,oBAAoB,CAAC,EAAE,OAAO,EAC9B,oBAAoB,CAAC,EAAE,OAAO,GAC/B,wBAAwB,CAO1B;IAEM,uBAAuB,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAGnE;IAED,OAAO,CAAC,aAAa;CAKxB;AAsCD;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,EAAE,qBAEzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,qBAGrC,CAAC"}
+{"version":3,"file":"VisualizationCatalog.d.ts","sourceRoot":"","sources":["../../../src/internal/components/VisualizationCatalog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAA2B,MAAM,qBAAqB,CAAC;AAEvF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAgCzF;;;;;GAKG;AACH,MAAM,WAAW,qBAAqB;IAClC;;;;;;;OAOG;IACH,MAAM,CACF,GAAG,EAAE,MAAM,EACX,oBAAoB,CAAC,EAAE,OAAO,EAC9B,oBAAoB,CAAC,EAAE,OAAO,GAC/B,wBAAwB,CAAC;IAE5B;;;;;OAKG;IACH,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAE1C;;;;;;;OAOG;IACH,UAAU,CACN,OAAO,EAAE,kBAAkB,EAC3B,oBAAoB,CAAC,EAAE,OAAO,EAC9B,oBAAoB,CAAC,EAAE,OAAO,GAC/B,wBAAwB,CAAC;IAE5B;;;;;OAKG;IACH,uBAAuB,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC;CACjE;AAED,KAAK,kBAAkB,GAAG;IACtB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,qBAAa,wBAAyB,YAAW,qBAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,OAAO;IAApC,YAA6B,OAAO,EAAE,kBAAkB,EAAI;IAErD,MAAM,CACT,GAAG,EAAE,MAAM,EACX,oBAAoB,CAAC,EAAE,OAAO,EAC9B,oBAAoB,CAAC,EAAE,OAAO,GAC/B,wBAAwB,CAkB1B;IAEM,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAE/C;IAEM,UAAU,CACb,OAAO,EAAE,kBAAkB,EAC3B,oBAAoB,CAAC,EAAE,OAAO,EAC9B,oBAAoB,CAAC,EAAE,OAAO,GAC/B,wBAAwB,CAO1B;IAEM,uBAAuB,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAGnE;IAED,OAAO,CAAC,aAAa;CAKxB;AAuCD;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,EAAE,qBAEzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,qBAGrC,CAAC"}

package/esm/internal/components/VisualizationCatalog.js

@@ -16,6 +16,7 @@ import { GeoPushpinChartNextDescriptor } from "./pluggableVisualizations/geoChar
 import { HeadlineDescriptor } from "./pluggableVisualizations/headline/HeadlineDescriptor.js";
 import { HeatmapDescriptor } from "./pluggableVisualizations/heatMap/HeatmapDescriptor.js";
 import { LineChartDescriptor } from "./pluggableVisualizations/lineChart/LineChartDescriptor.js";
+import { MekkoDescriptor } from "./pluggableVisualizations/mekko/MekkoDescriptor.js";
 import { PieChartDescriptor } from "./pluggableVisualizations/pieChart/PieChartDescriptor.js";
 import { PivotTableDescriptor } from "./pluggableVisualizations/pivotTable/PivotTableDescriptor.js";
 import { PivotTableNextDescriptor } from "./pluggableVisualizations/pivotTableNext/PivotTableNextDescriptor.js";
@@ -104,6 +105,7 @@ const DefaultVisualizations = {
     tablenext: PivotTableNextDescriptor,
     pushpinnext: GeoPushpinChartNextDescriptor,
     choropleth: GeoAreaChartDescriptor,
+    mekko: MekkoDescriptor,
 };
 /**
  * Default pluggable visualization catalog. This is implemented using static lookup table between vis type

package/esm/internal/components/configurationControls/colors/ColorsSection.d.ts

@@ -15,7 +15,8 @@ export interface IColorsSectionProps {
     isChartFillDisabled?: boolean;
     /** Optional controls rendered above the fill dropdown, inside the section. */
     additionalControls?: ReactNode;
+    supportsLineStyles?: boolean;
 }
 export declare const COLOR_MAPPING_CHANGED = "COLOR_MAPPING_CHANGED";
-export declare function ColorsSection({ controlsDisabled, properties, propertiesMeta, pushData, hasMeasures, colors, isLoading, supportsChartFill, chartFillIgnoredMeasures, isChartFillDisabled, additionalControls }: IColorsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorsSection({ controlsDisabled, properties, propertiesMeta, pushData, hasMeasures, colors, isLoading, supportsChartFill, chartFillIgnoredMeasures, isChartFillDisabled, additionalControls, supportsLineStyles }: IColorsSectionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ColorsSection.d.ts.map

package/esm/internal/components/configurationControls/colors/ColorsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorsSection.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/colors/ColorsSection.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,OAAO,EAAE,KAAK,mBAAmB,EAAqB,MAAM,+BAA+B,CAAC;AAC5F,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAQvG,MAAM,WAAW,mBAAmB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAE7D,wBAAgB,aAAa,CAAC,EAC1B,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,iBAAiB,EACjB,wBAA6B,EAC7B,mBAAmB,EACnB,kBAAkB,EACrB,EAAE,mBAAmB,2CAqIrB"}
+{"version":3,"file":"ColorsSection.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/colors/ColorsSection.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,OAAO,EAAE,KAAK,mBAAmB,EAAqB,MAAM,+BAA+B,CAAC;AAC5F,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAQvG,MAAM,WAAW,mBAAmB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAE7D,wBAAgB,aAAa,CAAC,EAC1B,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,iBAAiB,EACjB,wBAA6B,EAC7B,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACrB,EAAE,mBAAmB,2CAyKrB"}

package/esm/internal/components/configurationControls/colors/ColorsSection.js

@@ -2,16 +2,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import cx from "classnames";
 import { cloneDeep, set } from "lodash-es";
 import { useIntl } from "react-intl";
+import { isMeasureDescriptor } from "@gooddata/sdk-model";
 import { Button } from "@gooddata/sdk-ui-kit";
 import { messages } from "../../../../locales.js";
 import { fillDropdownItems } from "../../../constants/dropdowns.js";
-import { getColoredInputItems, getProperties } from "../../../utils/colors.js";
+import { getColoredInputItems, getLineStyleProperties, getProperties } from "../../../utils/colors.js";
 import { getTranslatedDropdownItems, getTranslation } from "../../../utils/translations.js";
 import { ConfigSection } from "../../configurationControls/ConfigSection.js";
 import { DropdownControl } from "../DropdownControl.js";
 import { ColoredItemsList } from "./coloredItemsList/ColoredItemsList.js";
 export const COLOR_MAPPING_CHANGED = "COLOR_MAPPING_CHANGED";
-export function ColorsSection({ controlsDisabled, properties, propertiesMeta, pushData, hasMeasures, colors, isLoading, supportsChartFill, chartFillIgnoredMeasures = [], isChartFillDisabled, additionalControls, }) {
+export function ColorsSection({ controlsDisabled, properties, propertiesMeta, pushData, hasMeasures, colors, isLoading, supportsChartFill, chartFillIgnoredMeasures = [], isChartFillDisabled, additionalControls, supportsLineStyles, }) {
     const intl = useIntl();
     const onSelect = (selectedColorItem, color) => {
         const { mappingHeader } = selectedColorItem;
@@ -22,39 +23,53 @@ export function ColorsSection({ controlsDisabled, properties, propertiesMeta, pu
         };
         pushData?.(message);
     };
+    const onLineStyleOrWidthChange = (item, lineStyle, lineWidth) => {
+        const { mappingHeader } = item;
+        if (!mappingHeader || !properties || !isMeasureDescriptor(mappingHeader)) {
+            return;
+        }
+        const localId = mappingHeader.measureHeaderItem.localIdentifier;
+        if (!localId) {
+            return;
+        }
+        const newProperties = getLineStyleProperties(properties, localId, lineStyle, lineWidth);
+        pushData?.({ messageId: COLOR_MAPPING_CHANGED, properties: newProperties });
+    };
+    const onLineStyleChange = (item, lineStyle) => onLineStyleOrWidthChange(item, lineStyle, item.lineWidth);
+    const onLineWidthChange = (item, lineWidth) => onLineStyleOrWidthChange(item, item.lineStyle, lineWidth);
     const isColoredListVisible = () => {
         return isLoading || (!controlsDisabled && colors?.colorPalette && hasMeasures);
     };
     const isDefaultColorMapping = () => {
         const colorMapping = properties?.controls?.["colorMapping"] ?? [];
-        return !colorMapping || colorMapping.length === 0;
+        const lineStyleMapping = supportsLineStyles ? (properties?.controls?.["lineStyleMapping"] ?? []) : [];
+        return ((!colorMapping || colorMapping.length === 0) &&
+            (!lineStyleMapping || lineStyleMapping.length === 0));
     };
     const onResetColors = () => {
         if (isDefaultColorMapping()) {
             return;
         }
-        const propertiesWithoutColorMapping = set(cloneDeep(properties), "controls.colorMapping", undefined);
-        const message = {
-            messageId: COLOR_MAPPING_CHANGED,
-            properties: propertiesWithoutColorMapping,
-            references: {},
-        };
-        pushData?.(message);
+        let updatedProperties = set(cloneDeep(properties), "controls.colorMapping", undefined);
+        if (supportsLineStyles) {
+            updatedProperties = set(updatedProperties, "controls.lineStyleMapping", undefined);
+        }
+        pushData?.({ messageId: COLOR_MAPPING_CHANGED, properties: updatedProperties, references: {} });
     };
     const renderResetButton = () => {
         const isDisabled = controlsDisabled || isDefaultColorMapping();
         const classes = cx("gd-color-reset-colors-section", {
             disabled: isDisabled,
         });
-        return (_jsx("div", { className: classes, children: _jsx(Button, { value: getTranslation(messages["resetColors"].id, intl), className: "gd-button-link s-reset-colors-button", onClick: onResetColors, disabled: isDisabled }) }));
+        return (_jsx("div", { className: classes, children: _jsx(Button, { value: getTranslation(supportsLineStyles ? messages["resetColorsAndStyles"].id : messages["resetColors"].id, intl), className: "gd-button-link s-reset-colors-button", onClick: onResetColors, disabled: isDisabled }) }));
     };
     const renderFillDropdown = () => {
         if (!supportsChartFill) {
             return null;
         }
+        // when all colors are used for disabled measures, chart fill is not available
         const isDisabled = controlsDisabled ||
             isChartFillDisabled ||
-            // when all colors are used for disabled measures, chart fill is not available
             chartFillIgnoredMeasures.length === colors?.colorAssignments.length;
         const currentChartFillValue = isChartFillDisabled
             ? "solid"
@@ -62,11 +77,14 @@ export function ColorsSection({ controlsDisabled, properties, propertiesMeta, pu
         return (_jsx("div", { className: "gd-chart-fill-section", children: _jsx(DropdownControl, { value: currentChartFillValue, valuePath: "chartFill.type", labelText: messages["fill"].id, disabled: isDisabled, properties: properties, pushData: pushData, items: getTranslatedDropdownItems(fillDropdownItems, intl), showDisabledMessage: isDisabled }) }));
     };
     const renderColoredList = () => {
-        const inputItems = getColoredInputItems(colors);
+        const lineStyleMapping = supportsLineStyles
+            ? (properties?.controls?.["lineStyleMapping"] ?? [])
+            : undefined;
+        const inputItems = getColoredInputItems(colors, lineStyleMapping);
         const colorPalette = colors?.colorPalette ? colors.colorPalette : [];
         const chartFill = isChartFillDisabled ? undefined : properties?.controls?.["chartFill"];
         return (_jsxs(_Fragment, { children: [
-                _jsx(ColoredItemsList, { colorPalette: colorPalette, inputItems: inputItems, onSelect: onSelect, disabled: controlsDisabled, isLoading: isLoading, chartFill: chartFill, chartFillIgnoredMeasures: chartFillIgnoredMeasures }), renderResetButton(), additionalControls, renderFillDropdown()] }));
+                _jsx(ColoredItemsList, { colorPalette: colorPalette, inputItems: inputItems, onSelect: onSelect, disabled: controlsDisabled, isLoading: isLoading, chartFill: chartFill, chartFillIgnoredMeasures: chartFillIgnoredMeasures, supportsLineStyles: supportsLineStyles, onLineStyleChange: supportsLineStyles ? onLineStyleChange : undefined, onLineWidthChange: supportsLineStyles ? onLineWidthChange : undefined }), renderResetButton(), additionalControls, renderFillDropdown()] }));
     };
     const renderUnsupportedColoredList = () => {
         return (_jsx("div", { className: "gd-color-unsupported", children: getTranslation(messages["unsupportedColors"].id, intl) }));
@@ -74,8 +92,10 @@ export function ColorsSection({ controlsDisabled, properties, propertiesMeta, pu
     const renderSectionContents = () => {
         return isColoredListVisible() ? renderColoredList() : renderUnsupportedColoredList();
     };
-    const sectionTitleTranslationId = supportsChartFill
-        ? messages["colorsAndFills"].id
-        : messages["colors"].id;
+    const sectionTitleTranslationId = supportsLineStyles
+        ? messages["colorsAndStyles"].id
+        : supportsChartFill
+            ? messages["colorsAndFills"].id
+            : messages["colors"].id;
     return (_jsx(ConfigSection, { title: sectionTitleTranslationId, pushData: pushData, propertiesMeta: propertiesMeta, id: "colors_section", className: "adi-color-configuration", children: renderSectionContents() }));
 }

package/esm/internal/components/configurationControls/colors/coloredItemsList/ColoredItem.d.ts

@@ -1,5 +1,6 @@
 import { type IColor, type IColorPalette } from "@gooddata/sdk-model";
-import { type IChartFillConfig, type PatternFillName } from "@gooddata/sdk-ui-vis-commons";
+import { type IChartFillConfig } from "@gooddata/sdk-ui-charts";
+import { type PatternFillName } from "@gooddata/sdk-ui-vis-commons";
 import { type IColoredItem } from "../../../../interfaces/Colors.js";
 export interface IColoredItemProps {
     colorPalette: IColorPalette;

package/esm/internal/components/configurationControls/colors/coloredItemsList/ColoredItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColoredItem.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/configurationControls/colors/coloredItemsList/ColoredItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE3F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAOrE,MAAM,WAAW,iBAAiB;IAC9B,YAAY,EAAE,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,yDAgDtB,CAAC"}
+{"version":3,"file":"ColoredItem.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/configurationControls/colors/coloredItemsList/ColoredItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAOrE,MAAM,WAAW,iBAAiB;IAC9B,YAAY,EAAE,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,yDAiDtB,CAAC"}

package/esm/internal/components/configurationControls/colors/coloredItemsList/ColoredItem.js

@@ -9,7 +9,7 @@ import { ColorDropdown } from "../colorDropdown/ColorDropdown.js";
 import { ColoredItemContent } from "./ColoredItemContent.js";
 export const ColoredItem = memo(function ColoredItem(props) {
     const intl = useIntl();
-    const { item, colorPalette, onSelect, chartFill, patternFillIndex } = props;
+    const { item, colorPalette, onSelect, chartFill, patternFillIndex, disabled } = props;
     const renderLoadingItem = () => {
         return _jsx("div", { className: "gd-list-item gd-list-item-not-loaded" });
     };
@@ -31,5 +31,5 @@ export const ColoredItem = memo(function ColoredItem(props) {
     }
     const headerItem = coloredItem.mappingHeader;
     const headerText = getText(headerItem);
-    return (_jsx(ColorDropdown, { selectedColorItem: coloredItem.colorItem, colorPalette: colorPalette, onColorSelected: onColorSelected, chartFill: chartFill, patternFillIndex: patternFillIndex, children: _jsx(ColoredItemContent, { text: headerText, color: coloredItem.color, chartFill: chartFill?.type, patternFillIndex: patternFillIndex }) }));
+    return (_jsx(ColorDropdown, { selectedColorItem: coloredItem.colorItem, colorPalette: colorPalette, onColorSelected: onColorSelected, chartFill: chartFill, patternFillIndex: patternFillIndex, disabled: disabled, children: _jsx(ColoredItemContent, { text: headerText, color: coloredItem.color, chartFill: chartFill?.type, patternFillIndex: patternFillIndex }) }));
 });

package/esm/internal/components/configurationControls/colors/coloredItemsList/ColoredItemsList.d.ts

@@ -1,5 +1,5 @@
 import { type IColor, type IColorPalette } from "@gooddata/sdk-model";
-import { type IChartFillConfig } from "@gooddata/sdk-ui-charts";
+import { type IChartFillConfig, type LineStyle } from "@gooddata/sdk-ui-charts";
 import { type IColoredItem } from "../../../../interfaces/Colors.js";
 export interface IColoredItemsListProps {
     colorPalette: IColorPalette;
@@ -9,6 +9,9 @@ export interface IColoredItemsListProps {
     isLoading?: boolean;
     chartFill?: IChartFillConfig;
     chartFillIgnoredMeasures: string[];
+    supportsLineStyles?: boolean;
+    onLineStyleChange?: (item: IColoredItem, lineStyle: LineStyle) => void;
+    onLineWidthChange?: (item: IColoredItem, lineWidth: 1 | 2 | 3 | 4) => void;
 }
 export declare const ColoredItemsList: import("react").NamedExoticComponent<IColoredItemsListProps>;
 //# sourceMappingURL=ColoredItemsList.d.ts.map

package/esm/internal/components/configurationControls/colors/coloredItemsList/ColoredItemsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColoredItemsList.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/configurationControls/colors/coloredItemsList/ColoredItemsList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAuB,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AASrE,MAAM,WAAW,sBAAsB;IACnC,YAAY,EAAE,aAAa,CAAC;IAC5B,UAAU,EAAE,YAAY,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,iBAAiB,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,wBAAwB,EAAE,MAAM,EAAE,CAAC;CACtC;AASD,eAAO,MAAM,gBAAgB,8DAoF3B,CAAC"}
+{"version":3,"file":"ColoredItemsList.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/configurationControls/colors/coloredItemsList/ColoredItemsList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAuB,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGhF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAUrE,MAAM,WAAW,sBAAsB;IACnC,YAAY,EAAE,aAAa,CAAC;IAC5B,UAAU,EAAE,YAAY,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,iBAAiB,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9E;AASD,eAAO,MAAM,gBAAgB,8DAqG3B,CAAC"}

package/esm/internal/components/configurationControls/colors/coloredItemsList/ColoredItemsList.js

@@ -5,6 +5,7 @@ import { isMeasureDescriptor } from "@gooddata/sdk-model";
 import { DropdownList, GOODSTRAP_SCROLLED_EVENT } from "@gooddata/sdk-ui-kit";
 import { getSearchedItems } from "../../../../utils/colors.js";
 import { ColoredItem } from "./ColoredItem.js";
+import { LineStyleColoredItem } from "./LineStyleColoredItem.js";
 const DROPDOWN_MAX_HEIGHT = 150;
 const SEARCH_FIELD_VISIBILITY_THRESHOLD = 7;
 const DROPDOWN_BODY_WIDTH = 218;
@@ -13,7 +14,7 @@ function isChartFillIgnoredMeasure(item, chartFillIgnoredMeasures) {
         chartFillIgnoredMeasures.includes(item.mappingHeader.measureHeaderItem.localIdentifier));
 }
 export const ColoredItemsList = memo(function ColoredItemsList(props) {
-    const { colorPalette, inputItems, onSelect: onSelectProp, disabled = false, isLoading = false, chartFill, chartFillIgnoredMeasures, } = props;
+    const { colorPalette, inputItems, onSelect: onSelectProp, disabled = false, isLoading = false, chartFill, chartFillIgnoredMeasures, supportsLineStyles, onLineStyleChange, onLineWidthChange, } = props;
     const [searchString, setSearchString] = useState("");
     const listRef = useRef(null);
     const onScroll = () => {
@@ -53,6 +54,9 @@ export const ColoredItemsList = memo(function ColoredItemsList(props) {
                 const appliedChartFill = isChartFillIgnoredMeasure(item, chartFillIgnoredMeasures)
                     ? undefined
                     : chartFill;
+                if (supportsLineStyles && isMeasureDescriptor(item.mappingHeader)) {
+                    return (_jsx(LineStyleColoredItem, { colorPalette: colorPalette, onSelect: onSelect, disabled: disabled, item: item, chartFill: appliedChartFill, patternFillIndex: itemPatternFillIndexes[rowIndex], onLineStyleChange: onLineStyleChange, onLineWidthChange: onLineWidthChange }));
+                }
                 return (_jsx(ColoredItem, { colorPalette: colorPalette, onSelect: onSelect, disabled: disabled, item: item, chartFill: appliedChartFill, patternFillIndex: itemPatternFillIndexes[rowIndex] }));
             } }) }));
 });

package/esm/internal/components/configurationControls/colors/coloredItemsList/LineStyleColoredItem.d.ts

@@ -0,0 +1,16 @@
+import { type IColor, type IColorPalette } from "@gooddata/sdk-model";
+import { type IChartFillConfig, type LineStyle } from "@gooddata/sdk-ui-charts";
+import { type PatternFillName } from "@gooddata/sdk-ui-vis-commons";
+import { type IColoredItem } from "../../../../interfaces/Colors.js";
+export interface ILineStyleColoredItemProps {
+    colorPalette: IColorPalette;
+    item: IColoredItem;
+    onSelect?: (source: IColoredItem, color: IColor) => void;
+    disabled?: boolean;
+    chartFill?: IChartFillConfig;
+    patternFillIndex?: number | PatternFillName;
+    onLineStyleChange?: (item: IColoredItem, lineStyle: LineStyle) => void;
+    onLineWidthChange?: (item: IColoredItem, lineWidth: 1 | 2 | 3 | 4) => void;
+}
+export declare const LineStyleColoredItem: import("react").NamedExoticComponent<ILineStyleColoredItemProps>;
+//# sourceMappingURL=LineStyleColoredItem.d.ts.map

package/esm/internal/components/configurationControls/colors/coloredItemsList/LineStyleColoredItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineStyleColoredItem.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/configurationControls/colors/coloredItemsList/LineStyleColoredItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAGpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAOrE,MAAM,WAAW,0BAA0B;IACvC,YAAY,EAAE,aAAa,CAAC;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC;IAC5C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9E;AAED,eAAO,MAAM,oBAAoB,kEAgE/B,CAAC"}

package/esm/internal/components/configurationControls/colors/coloredItemsList/LineStyleColoredItem.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { memo, useRef, useState } from "react";
+import { useIntl } from "react-intl";
+import { getMappingHeaderFormattedName } from "@gooddata/sdk-ui";
+import { messages } from "../../../../../locales.js";
+import { getTranslation } from "../../../../utils/translations.js";
+import { IconPosition } from "../colorDropdown/ColorDropdown.js";
+import { ColoredItemContent } from "./ColoredItemContent.js";
+import { LineStyleDialog } from "./LineStyleDialog.js";
+export const LineStyleColoredItem = memo(function LineStyleColoredItem(props) {
+    const intl = useIntl();
+    const { item, colorPalette, onSelect, chartFill, patternFillIndex, disabled, onLineStyleChange, onLineWidthChange, } = props;
+    const anchorRef = useRef(null);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const headerText = getMappingHeaderFormattedName(item.mappingHeader) || `(${getTranslation("empty_value", intl)})`;
+    const onColorSelected = (color) => onSelect?.(item, color);
+    return (_jsxs(_Fragment, { children: [
+            _jsx("button", { ref: anchorRef, type: "button", className: "gd-line-style-item-trigger", "aria-haspopup": "dialog", "aria-expanded": dialogOpen, "aria-label": getTranslation(messages.lineStyleTriggerAriaLabel.id, intl, {
+                    name: headerText,
+                }), onClick: () => setDialogOpen((v) => !v), disabled: disabled, children: _jsx(ColoredItemContent, { text: headerText, color: item.color, chartFill: chartFill?.type, patternFillIndex: patternFillIndex, isSelected: dialogOpen, position: IconPosition.Down }) }), dialogOpen ? (_jsx(LineStyleDialog, { alignTo: anchorRef.current, ignoreClicksOn: anchorRef.current ? [anchorRef.current] : undefined, color: item.color, colorItem: item.colorItem, colorPalette: colorPalette, lineStyle: item.lineStyle, lineWidth: item.lineWidth, disabled: disabled, chartFill: chartFill, patternFillIndex: patternFillIndex, onColorSelected: onColorSelected, onLineStyleChange: (lineStyle) => onLineStyleChange?.(item, lineStyle), onLineWidthChange: (lineWidth) => onLineWidthChange?.(item, lineWidth), onClose: () => setDialogOpen(false) })) : null] }));
+});

package/esm/internal/components/configurationControls/colors/coloredItemsList/LineStyleDialog.d.ts

@@ -0,0 +1,21 @@
+import { type IColor, type IColorPalette, type IRgbColorValue } from "@gooddata/sdk-model";
+import { type LineStyle } from "@gooddata/sdk-ui-charts";
+import { type IChartFillConfig, type PatternFillName } from "@gooddata/sdk-ui-vis-commons";
+export interface ILineStyleDialogProps {
+    alignTo: HTMLElement | null;
+    ignoreClicksOn?: HTMLElement[];
+    color: IRgbColorValue;
+    colorItem?: IColor;
+    colorPalette: IColorPalette;
+    lineStyle?: LineStyle;
+    lineWidth?: 1 | 2 | 3 | 4;
+    disabled?: boolean;
+    chartFill?: IChartFillConfig;
+    patternFillIndex?: number | PatternFillName;
+    onColorSelected: (color: IColor) => void;
+    onLineStyleChange: (lineStyle: LineStyle) => void;
+    onLineWidthChange: (lineWidth: 1 | 2 | 3 | 4) => void;
+    onClose: () => void;
+}
+export declare const LineStyleDialog: import("react").NamedExoticComponent<ILineStyleDialogProps>;
+//# sourceMappingURL=LineStyleDialog.d.ts.map

package/esm/internal/components/configurationControls/colors/coloredItemsList/LineStyleDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineStyleDialog.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/configurationControls/colors/coloredItemsList/LineStyleDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AASzD,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAsD3F,MAAM,WAAW,qBAAqB;IAClC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAC/B,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC;IAC5C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,iBAAiB,EAAE,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACtD,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,6DA8J1B,CAAC"}

package/esm/internal/components/configurationControls/colors/coloredItemsList/LineStyleDialog.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { memo } from "react";
+import cx from "classnames";
+import { useIntl } from "react-intl";
+import { Dropdown, DropdownList, Overlay, SingleSelectListItem, } from "@gooddata/sdk-ui-kit";
+import { useTheme } from "@gooddata/sdk-ui-theme-provider";
+import { messages } from "../../../../../locales.js";
+import { ColorDropdown } from "../colorDropdown/ColorDropdown.js";
+import { getIconStyle } from "../colorDropdown/ColorPaletteItem.js";
+import { OptionalPatternFill } from "../colorDropdown/OptionalPatternFill.js";
+const TOOLBAR_ALIGN_POINTS = [
+    { align: "bl tl", offset: { x: 0, y: 4 } },
+    { align: "tl bl", offset: { x: 0, y: -4 } },
+];
+const DROPDOWN_ALIGN_POINTS = [
+    { align: "bl tl", offset: { x: 0, y: -2 } },
+    { align: "tl bl", offset: { x: 0, y: 2 } },
+];
+const STYLE_DROPDOWN_WIDTH = 120;
+const WEIGHT_DROPDOWN_WIDTH = 110;
+function StrokeStyleIcon({ style, size = 20 }) {
+    const strokeDasharray = style === "dashed" ? "5,2" : style === "dotted" ? "0.5,3" : undefined;
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("line", { x1: "2", y1: "10", x2: "18", y2: "10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: strokeDasharray }) }));
+}
+function StrokeWeightIcon({ weight, size = 14 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 14 14", "aria-hidden": "true", children: _jsx("line", { x1: "1", y1: "7", x2: "13", y2: "7", stroke: "currentColor", strokeWidth: weight, strokeLinecap: "round" }) }));
+}
+export const LineStyleDialog = memo(function LineStyleDialog({ alignTo, ignoreClicksOn, color, colorItem, colorPalette, lineStyle = "solid", lineWidth = 3, disabled, chartFill, patternFillIndex, onColorSelected, onLineStyleChange, onLineWidthChange, onClose, }) {
+    const intl = useIntl();
+    const theme = useTheme();
+    if (!alignTo) {
+        return null;
+    }
+    const { r, g, b } = color;
+    const colorSwatchStyle = getIconStyle(chartFill?.type ?? "solid", `rgb(${r},${g},${b})`, theme);
+    const lineStyleOptions = [
+        { id: "solid", title: intl.formatMessage({ id: messages.lineStyleSolid.id }) },
+        { id: "dashed", title: intl.formatMessage({ id: messages.lineStyleDashed.id }) },
+        { id: "dotted", title: intl.formatMessage({ id: messages.lineStyleDotted.id }) },
+    ];
+    const lineWidthOptions = [
+        { id: 1, title: intl.formatMessage({ id: messages.lineWidth1.id }) },
+        { id: 2, title: intl.formatMessage({ id: messages.lineWidth2.id }) },
+        { id: 3, title: intl.formatMessage({ id: messages.lineWidth3.id }) },
+        { id: 4, title: intl.formatMessage({ id: messages.lineWidth4.id }) },
+    ];
+    return (_jsx(Overlay, { alignTo: alignTo, alignPoints: TOOLBAR_ALIGN_POINTS, closeOnParentScroll: true, closeOnOutsideClick: true, ignoreClicksOn: ignoreClicksOn, onClose: onClose, children: _jsxs("div", { className: cx("gd-line-style-toolbar", { "is-disabled": disabled }), children: [
+                _jsx(ColorDropdown, { selectedColorItem: colorItem, colorPalette: colorPalette, onColorSelected: onColorSelected, disabled: disabled, chartFill: chartFill, patternFillIndex: patternFillIndex, children: _jsxs("div", { className: cx("gd-line-style-toolbar__btn", `s-color-${r}-${g}-${b}`, {
+                            "is-disabled": disabled,
+                        }), "aria-label": intl.formatMessage({ id: messages.colors.id }), children: [
+                            _jsx("div", { className: "gd-line-style-toolbar__color-swatch", style: colorSwatchStyle, children: _jsx(OptionalPatternFill, { chartFill: chartFill?.type ?? "solid", patternFillIndex: patternFillIndex ?? 0 }) }), _jsx("i", { className: "gd-icon-navigatedown", "aria-hidden": "true" })
+                        ] }) }), _jsx("div", { className: "gd-line-style-toolbar__divider", "aria-hidden": "true" }), _jsx(Dropdown, { alignPoints: DROPDOWN_ALIGN_POINTS, closeOnParentScroll: true, renderButton: ({ isOpen, toggleDropdown }) => (_jsxs("button", { type: "button", className: cx("gd-line-style-toolbar__btn", { "is-open": isOpen }), onClick: toggleDropdown, disabled: disabled, "aria-label": intl.formatMessage({ id: messages.lineStyleLabel.id }), "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [
+                            _jsx(StrokeStyleIcon, { style: lineStyle }), _jsx("i", { className: "gd-icon-navigatedown", "aria-hidden": "true" })
+                        ] })), renderBody: ({ closeDropdown }) => (_jsx(DropdownList, { width: STYLE_DROPDOWN_WIDTH, items: lineStyleOptions, renderItem: ({ item }) => (_jsx(SingleSelectListItem, { title: item.title, icon: _jsx(StrokeStyleIcon, { style: item.id, size: 14 }), isSelected: item.id === lineStyle, onClick: () => {
+                                onLineStyleChange(item.id);
+                                closeDropdown();
+                            } })) })) }), _jsx("div", { className: "gd-line-style-toolbar__divider", "aria-hidden": "true" }), _jsx(Dropdown, { alignPoints: DROPDOWN_ALIGN_POINTS, closeOnParentScroll: true, renderButton: ({ isOpen, toggleDropdown }) => (_jsxs("button", { type: "button", className: cx("gd-line-style-toolbar__btn", { "is-open": isOpen }), onClick: toggleDropdown, disabled: disabled, "aria-label": intl.formatMessage({ id: messages.lineWidthLabel.id }), "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [
+                            _jsxs("span", { className: "gd-line-style-toolbar__weight-text", children: [lineWidth, "px"] }), _jsx("i", { className: "gd-icon-navigatedown", "aria-hidden": "true" })
+                        ] })), renderBody: ({ closeDropdown }) => (_jsx(DropdownList, { width: WEIGHT_DROPDOWN_WIDTH, items: lineWidthOptions, renderItem: ({ item }) => (_jsx(SingleSelectListItem, { title: item.title, icon: _jsx(StrokeWeightIcon, { weight: item.id }), isSelected: item.id === lineWidth, onClick: () => {
+                                onLineWidthChange(item.id);
+                                closeDropdown();
+                            } })) })) })] }) }));
+});

package/esm/internal/components/configurationPanels/LineChartBasedConfigurationPanel.d.ts

@@ -5,6 +5,7 @@ export interface ILineChartBasedConfigurationPanel extends IConfigurationPanelCo
     dataLabelDefaultValue?: string | boolean;
 }
 export declare class LineChartBasedConfigurationPanel extends BaseChartConfigurationPanel<ILineChartBasedConfigurationPanel> {
+    protected renderColorSection(): ReactNode;
     protected renderConfigurationPanel(): ReactNode;
 }
 //# sourceMappingURL=LineChartBasedConfigurationPanel.d.ts.map

package/esm/internal/components/configurationPanels/LineChartBasedConfigurationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChartBasedConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/configurationPanels/LineChartBasedConfigurationPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,KAAK,+BAA+B,EAAE,MAAM,gCAAgC,CAAC;AAEtF,MAAM,WAAW,iCAAkC,SAAQ,+BAA+B;IACtF,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5C;AAED,qBAAa,gCAAiC,SAAQ,2BAA2B,CAAC,iCAAiC,CAAC;IAChH,UAAmB,wBAAwB,IAAI,SAAS,CA0FvD;CACJ"}
+{"version":3,"file":"LineChartBasedConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/configurationPanels/LineChartBasedConfigurationPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,KAAK,+BAA+B,EAAE,MAAM,gCAAgC,CAAC;AAEtF,MAAM,WAAW,iCAAkC,SAAQ,+BAA+B;IACtF,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5C;AAED,qBAAa,gCAAiC,SAAQ,2BAA2B,CAAC,iCAAiC,CAAC;IAChH,UAAmB,kBAAkB,IAAI,SAAS,CAiCjD;IAED,UAAmB,wBAAwB,IAAI,SAAS,CA0FvD;CACJ"}

package/esm/internal/components/configurationPanels/LineChartBasedConfigurationPanel.js

@@ -3,7 +3,10 @@ import { FormattedMessage } from "react-intl";
 import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
 import { messages } from "../../../locales.js";
 import { BUBBLE_ARROW_OFFSET_X, BUBBLE_ARROW_OFFSET_Y, HIDE_DELAY_DEFAULT, SHOW_DELAY_DEFAULT, } from "../../constants/bubble.js";
+import { isLineChartStylingEnabled } from "../../constants/featureFlags.js";
+import { getChartFillIgnoredMeasureIdsFromMdObject, getMeasuresFromMdObject, } from "../../utils/bucketHelper.js";
 import { CheckboxControl } from "../configurationControls/CheckboxControl.js";
+import { ColorsSection } from "../configurationControls/colors/ColorsSection.js";
 import { ConfigSection } from "../configurationControls/ConfigSection.js";
 import { ContinuousLineControl } from "../configurationControls/ContinuousLineControl.js";
 import { DataLabelsControl } from "../configurationControls/DataLabelsControl.js";
@@ -11,6 +14,13 @@ import { DataPointsControl } from "../configurationControls/DataPointsControl.js
 import { DistinctPointShapesControl } from "../configurationControls/DistintcPointShapesControl.js";
 import { BaseChartConfigurationPanel } from "./BaseChartConfigurationPanel.js";
 export class LineChartBasedConfigurationPanel extends BaseChartConfigurationPanel {
+    renderColorSection() {
+        const { properties, propertiesMeta, pushData, colors, references, insight, isLoading, panelConfig, featureFlags, } = this.props;
+        const controlsDisabled = this.isControlDisabled();
+        const hasMeasures = getMeasuresFromMdObject(insight).length > 0;
+        const chartFillIgnoredMeasures = getChartFillIgnoredMeasureIdsFromMdObject(insight, properties);
+        return (_jsx(ColorsSection, { properties: properties, propertiesMeta: propertiesMeta, references: references, colors: colors, controlsDisabled: controlsDisabled, pushData: pushData, hasMeasures: hasMeasures, isLoading: isLoading, supportsChartFill: panelConfig?.supportsChartFill, chartFillIgnoredMeasures: chartFillIgnoredMeasures, isChartFillDisabled: panelConfig?.isChartFillDisabled, supportsLineStyles: isLineChartStylingEnabled(featureFlags) }));
+    }
     renderConfigurationPanel() {
         const { gridEnabled, axes } = this.getControlProperties();
         const { properties, propertiesMeta, pushData, panelConfig, dataLabelDefaultValue = false, } = this.props;

package/esm/internal/components/pluggableVisualizations/mekko/MekkoDescriptor.d.ts

@@ -0,0 +1,8 @@
+import { type IVisualizationMeta, type PluggableVisualizationFactory } from "../../../interfaces/VisualizationDescriptor.js";
+import { BigChartDescriptor } from "../BigChartDescriptor.js";
+export declare class MekkoDescriptor extends BigChartDescriptor {
+    getFactory(): PluggableVisualizationFactory;
+    getEmbeddingCode: (insight: import("@gooddata/sdk-model").IInsightDefinition, config?: import("../../../interfaces/VisualizationDescriptor.js").IEmbeddingCodeConfig | undefined) => string;
+    getMeta(): IVisualizationMeta;
+}
+//# sourceMappingURL=MekkoDescriptor.d.ts.map

package/esm/internal/components/pluggableVisualizations/mekko/MekkoDescriptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MekkoDescriptor.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/pluggableVisualizations/mekko/MekkoDescriptor.ts"],"names":[],"mappings":"AAKA,OAAO,EACH,KAAK,kBAAkB,EACvB,KAAK,6BAA6B,EACrC,MAAM,gDAAgD,CAAC;AAWxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK9D,qBAAa,eAAgB,SAAQ,kBAAkB;IAC5C,UAAU,IAAI,6BAA6B,CAEjD;IAEM,gBAAgB,4KAkBpB;IAEI,OAAO,IAAI,kBAAkB,CAKnC;CACJ"}

package/esm/internal/components/pluggableVisualizations/mekko/MekkoDescriptor.js

@@ -0,0 +1,38 @@
+// (C) 2026 GoodData Corporation
+import { BucketNames } from "@gooddata/sdk-ui";
+import { getReactEmbeddingCodeGenerator } from "../../../utils/embeddingCodeGenerator/getReactEmbeddingCodeGenerator.js";
+import { executionConfigInsightConversion, filtersInsightConversion, localeInsightConversion, singleAttributeBucketConversion, singleMeasureBucketConversion, sortsInsightConversion, } from "../../../utils/embeddingCodeGenerator/insightToPropsConverter/convenience.js";
+import { getInsightToPropsConverter } from "../../../utils/embeddingCodeGenerator/insightToPropsConverter/convertor.js";
+import { BigChartDescriptor } from "../BigChartDescriptor.js";
+import { chartAdditionalFactories, chartConfigInsightConversion } from "../chartCodeGenUtils.js";
+import { PluggableMekko } from "./PluggableMekko.js";
+export class MekkoDescriptor extends BigChartDescriptor {
+    getFactory() {
+        return (params) => new PluggableMekko(params);
+    }
+    getEmbeddingCode = getReactEmbeddingCodeGenerator({
+        component: {
+            importType: "named",
+            name: "Mekko",
+            package: "@gooddata/sdk-ui-charts",
+        },
+        insightToProps: getInsightToPropsConverter({
+            widthMeasure: singleMeasureBucketConversion("widthMeasure", BucketNames.MEASURES),
+            heightMeasure: singleMeasureBucketConversion("heightMeasure", BucketNames.SECONDARY_MEASURES),
+            viewBy: singleAttributeBucketConversion("viewBy", BucketNames.VIEW),
+            stackBy: singleAttributeBucketConversion("stackBy", BucketNames.STACK),
+            filters: filtersInsightConversion("filters"),
+            sortBy: sortsInsightConversion("sortBy"),
+            config: chartConfigInsightConversion("config"),
+            locale: localeInsightConversion("locale"),
+            execConfig: executionConfigInsightConversion("execConfig"),
+        }),
+        additionalFactories: chartAdditionalFactories(),
+    });
+    getMeta() {
+        return {
+            supportsExport: true,
+            supportsZooming: false,
+        };
+    }
+}

package/esm/internal/components/pluggableVisualizations/mekko/PluggableMekko.d.ts

@@ -0,0 +1,34 @@
+import { type ISortConfig } from "../../../interfaces/SortConfig.js";
+import { type IExtendedReferencePoint, type IReferencePoint, type IVisConstruct } from "../../../interfaces/Visualization.js";
+import { PluggableBaseChart } from "../baseChart/PluggableBaseChart.js";
+/**
+ * PluggableMekko
+ *
+ * ## Buckets
+ *
+ * | Name             | Id                 | Accepts             |
+ * |------------------|--------------------|---------------------|
+ * | Metric (Width)   | measures           | measures only       |
+ * | Metric (Height)  | secondary_measures | measures only       |
+ * | ViewBy           | view               | attributes or dates |
+ * | StackBy          | stack              | attributes or dates |
+ *
+ * ### Bucket axioms
+ *
+ * - |Width|  ≤ 1
+ * - |Height| ≤ 1
+ * - |ViewBy| ≤ 1
+ * - |StackBy| ≤ 1
+ *
+ * ## Dimensions
+ *
+ * The PluggableMekko always creates a two dimensional execution:
+ *
+ * - [[StackBy], [ViewBy, MeasureGroupIdentifier]]
+ */
+export declare class PluggableMekko extends PluggableBaseChart {
+    constructor(props: IVisConstruct);
+    getExtendedReferencePoint(referencePoint: IReferencePoint): Promise<IExtendedReferencePoint>;
+    getSortConfig(referencePoint: IReferencePoint): Promise<ISortConfig>;
+}
+//# sourceMappingURL=PluggableMekko.d.ts.map

package/esm/internal/components/pluggableVisualizations/mekko/PluggableMekko.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluggableMekko.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/pluggableVisualizations/mekko/PluggableMekko.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,WAAW,EAA0B,MAAM,mCAAmC,CAAC;AAC7F,OAAO,EACH,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,aAAa,EACrB,MAAM,sCAAsC,CAAC;AAU9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAIxE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,cAAe,SAAQ,kBAAkB;IAClD,YAAY,KAAK,EAAE,aAAa,EAK/B;IAEe,yBAAyB,CACrC,cAAc,EAAE,eAAe,GAChC,OAAO,CAAC,uBAAuB,CAAC,CAwBlC;IAEe,aAAa,CAAC,cAAc,EAAE,eAAe,GAAG,OAAO,CAAC,WAAW,CAAC,CA6CnF;CACJ"}