@emuanalytics/flow-rdf-ui 4.1.0-preview.20 → 4.1.0-preview.21

package/dist/custom-elements.json

@@ -853,6 +853,129 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb/breadcrumb.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowUiBreadcrumb",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more breadcrumb items to display.",
+              "name": ""
+            },
+            {
+              "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "separatorDir",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "separatorSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "FlowRdfElement",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "tagName": "flow-ui-breadcrumb",
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "dependencies": [
+            "flow-ui-icon"
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb/breadcrumb.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/base-control/base-control.component.js",
@@ -1314,129 +1437,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowUiBreadcrumb",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more breadcrumb items to display.",
-              "name": ""
-            },
-            {
-              "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
-              "name": "separator"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "separatorSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "tagName": "flow-ui-breadcrumb",
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "dependencies": [
-            "flow-ui-icon"
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.component.js",
@@ -5023,816 +5023,497 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/color-mapper/color-mapper.component.js",
+      "path": "components/color-picker/color-picker.component.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FlowUiColorMapper",
-          "members": [
+          "name": "FlowUiColorPicker",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "currentField",
-              "type": {
-                "text": "string | undefined"
+              "description": "The width of the color grid.",
+              "name": "--grid-width"
+            },
+            {
+              "description": "The height of the color grid.",
+              "name": "--grid-height"
+            },
+            {
+              "description": "The size of the color grid's handle.",
+              "name": "--grid-handle-size"
+            },
+            {
+              "description": "The height of the hue and alpha sliders.",
+              "name": "--slider-height"
+            },
+            {
+              "description": "The diameter of the slider's handle.",
+              "name": "--slider-handle-size"
+            },
+            {
+              "description": "The size of each predefined color swatch.",
+              "name": "--swatch-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The color picker's dropdown trigger.",
+              "name": "trigger"
+            },
+            {
+              "description": "The container that holds the swatches.",
+              "name": "swatches"
+            },
+            {
+              "description": "Each individual swatch.",
+              "name": "swatch"
+            },
+            {
+              "description": "The color grid.",
+              "name": "grid"
+            },
+            {
+              "description": "The color grid's handle.",
+              "name": "grid-handle"
+            },
+            {
+              "description": "Hue and opacity sliders.",
+              "name": "slider"
+            },
+            {
+              "description": "Hue and opacity slider handles.",
+              "name": "slider-handle"
+            },
+            {
+              "description": "The hue slider.",
+              "name": "hue-slider"
+            },
+            {
+              "description": "The hue slider's handle.",
+              "name": "hue-slider-handle"
+            },
+            {
+              "description": "The opacity slider.",
+              "name": "opacity-slider"
+            },
+            {
+              "description": "The opacity slider's handle.",
+              "name": "opacity-slider-handle"
+            },
+            {
+              "description": "The preview color.",
+              "name": "preview"
+            },
+            {
+              "description": "The text input.",
+              "name": "input"
+            },
+            {
+              "description": "The eye dropper button.",
+              "name": "eye-dropper-button"
+            },
+            {
+              "description": "The eye dropper button's exported `button` part.",
+              "name": "eye-dropper-button__base"
+            },
+            {
+              "description": "The eye dropper button's exported `prefix` part.",
+              "name": "eye-dropper-button__prefix"
+            },
+            {
+              "description": "The eye dropper button's exported `label` part.",
+              "name": "eye-dropper-button__label"
+            },
+            {
+              "description": "The eye dropper button's exported `suffix` part.",
+              "name": "eye-dropper-button__suffix"
+            },
+            {
+              "description": "The eye dropper button's exported `caret` part.",
+              "name": "eye-dropper-button__caret"
+            },
+            {
+              "description": "The format button.",
+              "name": "format-button"
+            },
+            {
+              "description": "The format button's exported `button` part.",
+              "name": "format-button__base"
+            },
+            {
+              "description": "The format button's exported `prefix` part.",
+              "name": "format-button__prefix"
+            },
+            {
+              "description": "The format button's exported `label` part.",
+              "name": "format-button__label"
+            },
+            {
+              "description": "The format button's exported `suffix` part.",
+              "name": "format-button__suffix"
+            },
+            {
+              "description": "The format button's exported `caret` part.",
+              "name": "format-button__caret"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "isSafeValue",
+              "type": {
+                "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
+              "name": "localize",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'info')"
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "modeRadioGroup",
+              "name": "base",
               "type": {
-                "text": "FlowRadioGroup"
+                "text": "HTMLElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "fixedColorPicker",
+              "name": "input",
               "type": {
-                "text": "FlowColorPicker"
+                "text": "FlowInput"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "fieldSelect",
+              "name": "dropdown",
               "type": {
-                "text": "FlowSelect"
+                "text": "FlowDropdown"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "infoDialog",
+              "name": "previewButton",
               "type": {
-                "text": "FlowDialog"
+                "text": "HTMLButtonElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "options",
+              "name": "trigger",
               "type": {
-                "text": "ColorMapperOptions"
+                "text": "HTMLButtonElement"
               },
-              "description": "The color mapper configuration specifying available fields.",
-              "attribute": "options"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "hasFocus",
               "type": {
-                "text": "ColorMapperValue"
+                "text": "boolean"
               },
-              "default": "{\n    mode: 'fixed',\n    field: undefined,\n    defaultColor: 'gray',\n    colorStops: []\n  }",
-              "description": "The current value of the color mapper.",
-              "attribute": "value"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isDraggingGridHandle",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "boolean"
               },
-              "default": "'small'",
-              "description": "The size of the color mapper component.",
-              "attribute": "size"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "swatches",
+              "name": "isEmpty",
               "type": {
-                "text": "string | string[]"
+                "text": "boolean"
               },
-              "default": "[\n    '#d7191c',\n    '#ffa500',\n    '#ffe909',\n    '#a6d96a',\n    '#1a9641',\n    '#3c58fd',\n    'white',\n    'black'\n  ]",
-              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
-              "attribute": "swatches"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "handleFixedPickerClick",
+              "kind": "field",
+              "name": "inputValue",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "default": "''"
             },
             {
-              "kind": "method",
-              "name": "handleChange",
+              "kind": "field",
+              "name": "hue",
+              "type": {
+                "text": "number"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "FlowChangeEvent"
-                  }
-                }
-              ]
+              "default": "0"
             },
             {
-              "kind": "method",
-              "name": "emitChange",
-              "privacy": "private"
+              "kind": "field",
+              "name": "saturation",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "100"
             },
             {
-              "kind": "method",
-              "name": "handleColorStopRemove",
+              "kind": "field",
+              "name": "brightness",
+              "type": {
+                "text": "number"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "FlowRemoveEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "getAllColorStops",
-              "privacy": "private"
+              "default": "100"
             },
             {
-              "kind": "method",
-              "name": "getColorStopPlaceholder",
-              "privacy": "private"
+              "kind": "field",
+              "name": "alpha",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "100"
             },
             {
-              "kind": "method",
-              "name": "fixedColorTemplate",
-              "privacy": "private"
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
+              "attribute": "value"
             },
             {
-              "kind": "method",
-              "name": "dataDrivenColorTemplate",
-              "privacy": "private"
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
-              "kind": "method",
-              "name": "colorStopsTemplate",
-              "privacy": "private"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
+              "attribute": "label"
             },
             {
-              "kind": "method",
-              "name": "infoDialogTemplate",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Fired when the color mapper's value changes.",
-              "name": "flow-ui-change",
-              "reactName": "onFlowUiChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "options",
+              "kind": "field",
+              "name": "format",
               "type": {
-                "text": "ColorMapperOptions"
+                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
               },
-              "description": "The color mapper configuration specifying available fields.",
-              "fieldName": "options"
+              "default": "'hex'",
+              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
+              "attribute": "format"
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "inline",
               "type": {
-                "text": "ColorMapperValue"
+                "text": "boolean"
               },
-              "default": "{\n    mode: 'fixed',\n    field: undefined,\n    defaultColor: 'gray',\n    colorStops: []\n  }",
-              "description": "The current value of the color mapper.",
-              "fieldName": "value"
+              "default": "false",
+              "description": "Renders the color picker inline rather than in a dropdown.",
+              "attribute": "inline",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
-              "default": "'small'",
-              "description": "The size of the color mapper component.",
-              "fieldName": "size"
+              "default": "'medium'",
+              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "swatches",
+              "kind": "field",
+              "name": "noFormatToggle",
               "type": {
-                "text": "string | string[]"
+                "text": "boolean"
               },
-              "default": "[\n    '#d7191c',\n    '#ffa500',\n    '#ffe909',\n    '#a6d96a',\n    '#1a9641',\n    '#3c58fd',\n    'white',\n    'black'\n  ]",
-              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
-              "fieldName": "swatches"
-            }
-          ],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "tagName": "flow-ui-color-mapper",
-          "summary": "A component for defining mappings between data values and colors.",
-          "dependencies": [
-            "flow-ui-color-picker",
-            "flow-ui-color-stop",
-            "flow-ui-dialog",
-            "flow-ui-button",
-            "flow-ui-radio-group",
-            "flow-ui-radio",
-            "flow-ui-select",
-            "flow-ui-option",
-            "flow-ui-icon-button"
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiColorMapper",
-            "module": "components/color-mapper/color-mapper.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/color-mapper/color-mapper.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiColorMapper",
-            "module": "components/color-mapper/color-mapper.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/color-mapper/helpers.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "colorMapperValueToMaplibreExpression",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "value",
-              "type": {
-                "text": "ColorMapperValue"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "escapeMaplibreString",
-          "parameters": [
+              "default": "false",
+              "description": "Removes the button that lets users toggle between format.",
+              "attribute": "no-format-toggle"
+            },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "name",
               "type": {
                 "text": "string"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "colorMapperValueToMaplibreExpression",
-          "declaration": {
-            "name": "colorMapperValueToMaplibreExpression",
-            "module": "components/color-mapper/helpers.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "escapeMaplibreString",
-          "declaration": {
-            "name": "escapeMaplibreString",
-            "module": "components/color-mapper/helpers.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/color-mapper/types.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/color-picker/color-picker.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowUiColorPicker",
-          "cssProperties": [
-            {
-              "description": "The width of the color grid.",
-              "name": "--grid-width"
+              },
+              "default": "''",
+              "description": "The name of the form control, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
-              "description": "The height of the color grid.",
-              "name": "--grid-height"
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the color picker.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "description": "The size of the color grid's handle.",
-              "name": "--grid-handle-size"
-            },
-            {
-              "description": "The height of the hue and alpha sliders.",
-              "name": "--slider-height"
-            },
-            {
-              "description": "The diameter of the slider's handle.",
-              "name": "--slider-handle-size"
-            },
-            {
-              "description": "The size of each predefined color swatch.",
-              "name": "--swatch-size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The color picker's dropdown trigger.",
-              "name": "trigger"
-            },
-            {
-              "description": "The container that holds the swatches.",
-              "name": "swatches"
-            },
-            {
-              "description": "Each individual swatch.",
-              "name": "swatch"
-            },
-            {
-              "description": "The color grid.",
-              "name": "grid"
-            },
-            {
-              "description": "The color grid's handle.",
-              "name": "grid-handle"
-            },
-            {
-              "description": "Hue and opacity sliders.",
-              "name": "slider"
-            },
-            {
-              "description": "Hue and opacity slider handles.",
-              "name": "slider-handle"
-            },
-            {
-              "description": "The hue slider.",
-              "name": "hue-slider"
-            },
-            {
-              "description": "The hue slider's handle.",
-              "name": "hue-slider-handle"
-            },
-            {
-              "description": "The opacity slider.",
-              "name": "opacity-slider"
-            },
-            {
-              "description": "The opacity slider's handle.",
-              "name": "opacity-slider-handle"
-            },
-            {
-              "description": "The preview color.",
-              "name": "preview"
-            },
-            {
-              "description": "The text input.",
-              "name": "input"
-            },
-            {
-              "description": "The eye dropper button.",
-              "name": "eye-dropper-button"
-            },
-            {
-              "description": "The eye dropper button's exported `button` part.",
-              "name": "eye-dropper-button__base"
-            },
-            {
-              "description": "The eye dropper button's exported `prefix` part.",
-              "name": "eye-dropper-button__prefix"
-            },
-            {
-              "description": "The eye dropper button's exported `label` part.",
-              "name": "eye-dropper-button__label"
-            },
-            {
-              "description": "The eye dropper button's exported `suffix` part.",
-              "name": "eye-dropper-button__suffix"
-            },
-            {
-              "description": "The eye dropper button's exported `caret` part.",
-              "name": "eye-dropper-button__caret"
-            },
-            {
-              "description": "The format button.",
-              "name": "format-button"
-            },
-            {
-              "description": "The format button's exported `button` part.",
-              "name": "format-button__base"
-            },
-            {
-              "description": "The format button's exported `prefix` part.",
-              "name": "format-button__prefix"
-            },
-            {
-              "description": "The format button's exported `label` part.",
-              "name": "format-button__label"
-            },
-            {
-              "description": "The format button's exported `suffix` part.",
-              "name": "format-button__suffix"
-            },
-            {
-              "description": "The format button's exported `caret` part.",
-              "name": "format-button__caret"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this)"
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'bottom-start'",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isSafeValue",
+              "name": "distance",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "attribute": "distance"
             },
             {
               "kind": "field",
-              "name": "base",
+              "name": "skidding",
               "type": {
-                "text": "HTMLElement"
+                "text": "number"
               },
-              "privacy": "private"
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "attribute": "skidding"
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "hoist",
               "type": {
-                "text": "FlowInput"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist"
             },
             {
               "kind": "field",
-              "name": "dropdown",
+              "name": "opacity",
               "type": {
-                "text": "FlowDropdown"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "attribute": "opacity"
             },
             {
               "kind": "field",
-              "name": "previewButton",
+              "name": "uppercase",
               "type": {
-                "text": "HTMLButtonElement"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+              "attribute": "uppercase"
             },
             {
               "kind": "field",
-              "name": "trigger",
+              "name": "swatches",
               "type": {
-                "text": "HTMLButtonElement"
+                "text": "string | string[]"
               },
-              "privacy": "private"
+              "default": "''",
+              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
+              "attribute": "swatches"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "form",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isDraggingGridHandle",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Makes the color picker a required field.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isEmpty",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "inputValue",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "hue",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
+              "kind": "method",
+              "name": "handleCopy",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "saturation",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "100"
+              "kind": "method",
+              "name": "handleFocusIn",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "brightness",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "100"
-            },
-            {
-              "kind": "field",
-              "name": "alpha",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "100"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "defaultValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "format",
-              "type": {
-                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
-              },
-              "default": "'hex'",
-              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
-              "attribute": "format"
-            },
-            {
-              "kind": "field",
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Renders the color picker inline rather than in a dropdown.",
-              "attribute": "inline",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "noFormatToggle",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Removes the button that lets users toggle between format.",
-              "attribute": "no-format-toggle"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the form control, submitted as a name/value pair with form data.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the color picker.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
-              },
-              "default": "'bottom-start'",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "distance",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "attribute": "distance"
-            },
-            {
-              "kind": "field",
-              "name": "skidding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "attribute": "skidding"
-            },
-            {
-              "kind": "field",
-              "name": "hoist",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "attribute": "hoist"
-            },
-            {
-              "kind": "field",
-              "name": "opacity",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
-              "attribute": "opacity"
-            },
-            {
-              "kind": "field",
-              "name": "uppercase",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
-              "attribute": "uppercase"
-            },
-            {
-              "kind": "field",
-              "name": "swatches",
-              "type": {
-                "text": "string | string[]"
-              },
-              "default": "''",
-              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
-              "attribute": "swatches"
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the color picker a required field.",
-              "attribute": "required",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleCopy",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocusIn",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocusOut",
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleFocusOut",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -6206,153 +5887,413 @@
               "fieldName": "label"
             },
             {
-              "name": "format",
-              "type": {
-                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
-              },
-              "default": "'hex'",
-              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
-              "fieldName": "format"
+              "name": "format",
+              "type": {
+                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
+              },
+              "default": "'hex'",
+              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
+              "fieldName": "format"
+            },
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders the color picker inline rather than in a dropdown.",
+              "fieldName": "inline"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+              "fieldName": "size"
+            },
+            {
+              "name": "no-format-toggle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the button that lets users toggle between format.",
+              "fieldName": "noFormatToggle"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the form control, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the color picker.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'bottom-start'",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "fieldName": "distance"
+            },
+            {
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "fieldName": "skidding"
+            },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
+            },
+            {
+              "name": "opacity",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "fieldName": "opacity"
+            },
+            {
+              "name": "uppercase",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+              "fieldName": "uppercase"
+            },
+            {
+              "name": "swatches",
+              "type": {
+                "text": "string | string[]"
+              },
+              "default": "''",
+              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
+              "fieldName": "swatches"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the color picker a required field.",
+              "fieldName": "required"
+            }
+          ],
+          "superclass": {
+            "name": "FlowRdfFormControl",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "tagName": "flow-ui-color-picker",
+          "summary": "Color pickers allow the user to select a color.",
+          "dependencies": [
+            "flow-ui-button",
+            "flow-ui-button-group",
+            "flow-ui-dropdown",
+            "flow-ui-input",
+            "flow-ui-visually-hidden"
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiColorPicker",
+            "module": "components/color-picker/color-picker.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/color-picker/color-picker.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiColorPicker",
+            "module": "components/color-picker/color-picker.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/color-mapper/color-mapper.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowUiColorMapper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "currentField",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'info')"
+            },
+            {
+              "kind": "field",
+              "name": "modeRadioGroup",
+              "type": {
+                "text": "FlowRadioGroup"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "fixedColorPicker",
+              "type": {
+                "text": "FlowColorPicker"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "fieldSelect",
+              "type": {
+                "text": "FlowSelect"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "infoDialog",
+              "type": {
+                "text": "FlowDialog"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "ColorMapperOptions"
+              },
+              "description": "The color mapper configuration specifying available fields.",
+              "attribute": "options"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "ColorMapperValue"
+              },
+              "default": "{\n    mode: 'fixed',\n    field: undefined,\n    defaultColor: 'gray',\n    colorStops: []\n  }",
+              "description": "The current value of the color mapper.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'small'",
+              "description": "The size of the color mapper component.",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "swatches",
+              "type": {
+                "text": "string | string[]"
+              },
+              "default": "[\n    '#d7191c',\n    '#ffa500',\n    '#ffe909',\n    '#a6d96a',\n    '#1a9641',\n    '#3c58fd',\n    'white',\n    'black'\n  ]",
+              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
+              "attribute": "swatches"
+            },
+            {
+              "kind": "method",
+              "name": "handleFixedPickerClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FlowChangeEvent"
+                  }
+                }
+              ]
             },
             {
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Renders the color picker inline rather than in a dropdown.",
-              "fieldName": "inline"
+              "kind": "method",
+              "name": "emitChange",
+              "privacy": "private"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
-              "fieldName": "size"
+              "kind": "method",
+              "name": "handleColorStopRemove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FlowRemoveEvent"
+                  }
+                }
+              ]
             },
             {
-              "name": "no-format-toggle",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Removes the button that lets users toggle between format.",
-              "fieldName": "noFormatToggle"
+              "kind": "method",
+              "name": "getAllColorStops",
+              "privacy": "private"
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the form control, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "kind": "method",
+              "name": "getColorStopPlaceholder",
+              "privacy": "private"
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the color picker.",
-              "fieldName": "disabled"
+              "kind": "method",
+              "name": "fixedColorTemplate",
+              "privacy": "private"
             },
             {
-              "name": "placement",
-              "type": {
-                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
-              },
-              "default": "'bottom-start'",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "fieldName": "placement"
+              "kind": "method",
+              "name": "dataDrivenColorTemplate",
+              "privacy": "private"
             },
             {
-              "name": "distance",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "fieldName": "distance"
+              "kind": "method",
+              "name": "colorStopsTemplate",
+              "privacy": "private"
             },
             {
-              "name": "skidding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "fieldName": "skidding"
-            },
+              "kind": "method",
+              "name": "infoDialogTemplate",
+              "privacy": "private"
+            }
+          ],
+          "events": [
             {
-              "name": "hoist",
+              "description": "Fired when the color mapper's value changes.",
+              "name": "flow-ui-change",
+              "reactName": "onFlowUiChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "options",
               "type": {
-                "text": "boolean"
+                "text": "ColorMapperOptions"
               },
-              "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
+              "description": "The color mapper configuration specifying available fields.",
+              "fieldName": "options"
             },
             {
-              "name": "opacity",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "ColorMapperValue"
               },
-              "default": "false",
-              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
-              "fieldName": "opacity"
+              "default": "{\n    mode: 'fixed',\n    field: undefined,\n    defaultColor: 'gray',\n    colorStops: []\n  }",
+              "description": "The current value of the color mapper.",
+              "fieldName": "value"
             },
             {
-              "name": "uppercase",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "false",
-              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
-              "fieldName": "uppercase"
+              "default": "'small'",
+              "description": "The size of the color mapper component.",
+              "fieldName": "size"
             },
             {
               "name": "swatches",
               "type": {
                 "text": "string | string[]"
               },
-              "default": "''",
+              "default": "[\n    '#d7191c',\n    '#ffa500',\n    '#ffe909',\n    '#a6d96a',\n    '#1a9641',\n    '#3c58fd',\n    'white',\n    'black'\n  ]",
               "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
               "fieldName": "swatches"
-            },
-            {
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the color picker a required field.",
-              "fieldName": "required"
             }
           ],
           "superclass": {
-            "name": "FlowRdfFormControl",
+            "name": "FlowRdfElement",
             "module": "/src/internal/flow-ui-rdf-element"
           },
-          "tagName": "flow-ui-color-picker",
-          "summary": "Color pickers allow the user to select a color.",
+          "tagName": "flow-ui-color-mapper",
+          "summary": "A component for defining mappings between data values and colors.",
           "dependencies": [
+            "flow-ui-color-picker",
+            "flow-ui-color-stop",
+            "flow-ui-dialog",
             "flow-ui-button",
-            "flow-ui-button-group",
-            "flow-ui-dropdown",
-            "flow-ui-input",
-            "flow-ui-visually-hidden"
+            "flow-ui-radio-group",
+            "flow-ui-radio",
+            "flow-ui-select",
+            "flow-ui-option",
+            "flow-ui-icon-button"
           ],
           "customElement": true
         }
@@ -6362,27 +6303,86 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowUiColorPicker",
-            "module": "components/color-picker/color-picker.component.js"
+            "name": "FlowUiColorMapper",
+            "module": "components/color-mapper/color-mapper.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/color-picker/color-picker.js",
+      "path": "components/color-mapper/color-mapper.js",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowUiColorPicker",
-            "module": "components/color-picker/color-picker.js"
+            "name": "FlowUiColorMapper",
+            "module": "components/color-mapper/color-mapper.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/color-mapper/helpers.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "colorMapperValueToMaplibreExpression",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "ColorMapperValue"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "escapeMaplibreString",
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "colorMapperValueToMaplibreExpression",
+          "declaration": {
+            "name": "colorMapperValueToMaplibreExpression",
+            "module": "components/color-mapper/helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "escapeMaplibreString",
+          "declaration": {
+            "name": "escapeMaplibreString",
+            "module": "components/color-mapper/helpers.js"
           }
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/color-mapper/types.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "components/color-stop/color-stop.component.js",