@luzmo/analytics-components-kit 1.0.1-alpha.98 → 1.0.1-alpha.99

package/custom-elements.json

@@ -385,6 +385,46 @@
               "description": "When true, disables the entire component (sets opacity to 60% and prevents all interactions)",
               "attribute": "disabled",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "singleLine",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, starts in compact single-line mode and auto-expands as needed",
+              "attribute": "single-line"
+            },
+            {
+              "kind": "field",
+              "name": "hideDatasetButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, hides the \"+ Add dataset\" button",
+              "attribute": "hide-dataset-button"
+            },
+            {
+              "kind": "field",
+              "name": "isGenerating",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, shows a spinning loader icon instead of the submit arrow",
+              "attribute": "is-generating"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the textarea (controlled from parent)",
+              "attribute": "value"
             }
           ],
           "events": [
@@ -406,6 +446,42 @@
               "default": "false",
               "fieldName": "disabled"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "When true, starts in compact single-line mode and auto-expands as needed",
+              "name": "single-line",
+              "default": "false",
+              "fieldName": "singleLine"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "When true, hides the \"+ Add dataset\" button",
+              "name": "hide-dataset-button",
+              "default": "false",
+              "fieldName": "hideDatasetButton"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "When true, shows a spinning loader icon instead of the submit arrow",
+              "name": "is-generating",
+              "default": "false",
+              "fieldName": "isGenerating"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the textarea (controlled from parent)",
+              "name": "value",
+              "default": "''",
+              "fieldName": "value"
+            },
             {
               "name": "placeholder",
               "type": {
@@ -492,484 +568,598 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dataset-icon/dataset-icon.ts",
+      "path": "src/components/data-items-select/data-items-select.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "publicConnectors",
-          "type": {
-            "text": "[\n  'amazonathena',\n  'asana',\n  'bigquery',\n  'citybikes',\n  'clickhouse',\n  'demodataplugin',\n  'elasticsearch',\n  'exact',\n  'exactonline',\n  'exactonlinenl',\n  'google',\n  'googleanalytics',\n  'googleanalyticsv4',\n  'googledrive',\n  'hubspot',\n  'mailchimp',\n  'mariadb',\n  'mongodb',\n  'mysql',\n  'oracle',\n  'panoply',\n  'pipedrive',\n  'pipelinedb',\n  'postgresql',\n  'presto',\n  'redshift',\n  'salesforce',\n  'saphana',\n  'snowflake',\n  'sqlserver',\n  'stardog',\n  'synapse',\n  'teamleader',\n  'trino',\n  'typeform',\n  'zendesk'\n]"
-          },
-          "default": "[ 'amazonathena', 'asana', 'bigquery', 'citybikes', 'clickhouse', 'demodataplugin', 'elasticsearch', 'exact', 'exactonline', 'exactonlinenl', 'google', 'googleanalytics', 'googleanalyticsv4', 'googledrive', 'hubspot', 'mailchimp', 'mariadb', 'mongodb', 'mysql', 'oracle', 'panoply', 'pipedrive', 'pipelinedb', 'postgresql', 'presto', 'redshift', 'salesforce', 'saphana', 'snowflake', 'sqlserver', 'stardog', 'synapse', 'teamleader', 'trino', 'typeform', 'zendesk' ]",
-          "description": "Public connectors list - these are well-known connectors that may have CSS-based icons\nThis list should match the one from"
-        },
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoDatasetIcon",
+          "name": "LuzmoDataItemsSelect",
           "members": [
             {
               "kind": "field",
-              "name": "tagName",
+              "name": "language",
               "type": {
                 "text": "string"
               },
-              "static": true,
-              "default": "'luzmo-dataset-icon'"
+              "default": "'en'",
+              "description": "The language of the settings interface",
+              "attribute": "language",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "datasetInfo",
+              "name": "contentLanguage",
               "type": {
-                "text": "DatasetIcon | undefined"
+                "text": "string"
               },
-              "description": "The dataset information containing subtype and thumbnail data",
-              "attribute": "dataset"
+              "default": "'en'",
+              "description": "The language to use for locale-aware formatting and labels",
+              "attribute": "content-language",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "label",
               "type": {
-                "text": "'16px' | '24px' | '32px' | '48px' | '64px'"
+                "text": "string | undefined"
               },
-              "default": "'32px'",
-              "description": "The size of the icon",
-              "attribute": "size",
+              "description": "The accessible label for the select (used for aria-label)",
+              "attribute": "label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "appUrl",
+              "name": "icons",
               "type": {
-                "text": "string"
+                "text": "'none' | 'menu-only' | 'all' | undefined"
               },
-              "default": "''",
-              "description": "The base URL for the application (used for thumbnail URLs)",
-              "attribute": "app-url"
-            }
-          ],
-          "attributes": [
+              "default": "'menu-only'",
+              "description": "Where to show icons",
+              "attribute": "icons",
+              "reflects": true
+            },
             {
-              "name": "dataset",
+              "kind": "field",
+              "name": "allowEmpty",
               "type": {
-                "text": "DatasetIcon | undefined"
+                "text": "boolean"
               },
-              "description": "The dataset information containing subtype and thumbnail data",
-              "fieldName": "datasetInfo"
+              "default": "false",
+              "description": "Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item.",
+              "attribute": "allow-empty",
+              "reflects": true
             },
             {
-              "name": "size",
-              "type": {
-                "text": "'16px' | '24px' | '32px' | '48px' | '64px'"
-              },
-              "default": "'32px'",
-              "description": "The size of the icon",
-              "fieldName": "size"
+              "kind": "field",
+              "name": "placeholder",
+              "description": "The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label.",
+              "attribute": "placeholder",
+              "reflects": true
             },
             {
-              "name": "app-url",
+              "kind": "field",
+              "name": "selects",
               "type": {
-                "text": "string"
+                "text": "'single' | 'multiple'"
               },
-              "default": "''",
-              "description": "The base URL for the application (used for thumbnail URLs)",
-              "fieldName": "appUrl"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "luzmo-dataset-icon",
-          "customElement": true,
-          "summary": "Displays an icon for a dataset based on its type, thumbnails, and connector"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "publicConnectors",
-          "declaration": {
-            "name": "publicConnectors",
-            "module": "src/components/dataset-icon/dataset-icon.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "LuzmoDatasetIcon",
-          "declaration": {
-            "name": "LuzmoDatasetIcon",
-            "module": "src/components/dataset-icon/dataset-icon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/dataset-selector-list/dataset-selector-list.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LuzmoDatasetSelectorList",
-          "cssProperties": [
-            {
-              "description": "Background color of the list",
-              "name": "--dataset-selector-list-background"
+              "default": "'single'",
+              "description": "Whether the picker allows single or multiple selections.",
+              "attribute": "selects",
+              "reflects": true
             },
             {
-              "description": "Padding of the list",
-              "name": "--dataset-selector-list-padding"
+              "kind": "field",
+              "name": "dataItemIds",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The dataItemIds to display in the picker. If not provided, the first item will be displayed (when allowEmpty is false).",
+              "attribute": "data-item-ids",
+              "reflects": true
             },
             {
-              "description": "Gap between elements",
-              "name": "--dataset-selector-list-gap"
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the picker is in loading state",
+              "attribute": "loading",
+              "reflects": true
             },
             {
-              "description": "Border radius of the list",
-              "name": "--dataset-selector-list-border-radius"
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the picker is invalid - eg. the dataItemId is not found in the datasetsDataItems or query failed to fetch data",
+              "attribute": "invalid",
+              "reflects": true
             },
             {
-              "description": "Background color of the search input",
-              "name": "--dataset-selector-list-input-background"
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the picker is clearable",
+              "attribute": "clearable",
+              "reflects": true
             },
             {
-              "description": "Border color of the search input",
-              "name": "--dataset-selector-list-input-border-color"
+              "kind": "field",
+              "name": "pending",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the picker is in pending state",
+              "attribute": "pending",
+              "reflects": true
             },
             {
-              "description": "Text color of the search input",
-              "name": "--dataset-selector-list-input-color"
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the picker is disabled",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "description": "Padding of the search input",
-              "name": "--dataset-selector-list-input-padding"
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'bottom-start'",
+              "description": "The placement of the dropdown menu",
+              "attribute": "placement",
+              "reflects": true
             },
             {
-              "description": "Padding of dataset items",
-              "name": "--dataset-selector-list-item-padding"
+              "kind": "field",
+              "name": "datasetsDataItems",
+              "type": {
+                "text": "{\n    id: string;\n    name: { [key: string]: string };\n    columns: DataItemExtended[];\n    formulas: DataItemExtended[];\n  }[]"
+              },
+              "default": "[]",
+              "description": "The datasets and their dataItems to display",
+              "attribute": "datasetsDataItems"
             },
             {
-              "description": "Gap between item elements",
-              "name": "--dataset-selector-list-item-gap"
-            },
-            {
-              "description": "Hover background color of dataset items",
-              "name": "--dataset-selector-list-item-hover-background"
-            },
-            {
-              "description": "Width of the scrollbar",
-              "name": "--dataset-selector-list-scrollbar-width"
-            },
-            {
-              "description": "Background of scrollbar track",
-              "name": "--dataset-selector-list-scrollbar-track-background"
-            },
-            {
-              "description": "Background of scrollbar thumb",
-              "name": "--dataset-selector-list-scrollbar-thumb-background"
-            },
-            {
-              "description": "Hover background of scrollbar thumb",
-              "name": "--dataset-selector-list-scrollbar-thumb-hover-background"
+              "kind": "method",
+              "name": "setDataItem",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
             }
           ],
-          "members": [
+          "events": [
             {
-              "kind": "field",
-              "name": "selectedDatasets",
-              "description": "Set of dataset IDs that are already selected and should be filtered out",
+              "name": "data-items-selected",
               "type": {
-                "text": "Set<string>"
-              }
-            },
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when data items are selected. Event detail contains `{ dataItems: DataItemSelected[] }`"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "showSearch",
+              "name": "language",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "true",
-              "description": "Whether to show the search input field",
-              "attribute": "show-search"
+              "default": "'en'",
+              "description": "The language of the settings interface",
+              "fieldName": "language"
             },
             {
-              "kind": "field",
-              "name": "searchPlaceholder",
+              "name": "content-language",
               "type": {
                 "text": "string"
               },
-              "default": "'Search datasets...'",
-              "description": "Placeholder text for the search input",
-              "attribute": "search-placeholder"
+              "default": "'en'",
+              "description": "The language to use for locale-aware formatting and labels",
+              "fieldName": "contentLanguage"
             },
             {
-              "kind": "field",
-              "name": "noDatasetsMessage",
+              "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'No datasets found'",
-              "description": "Message to show when no datasets are found",
-              "attribute": "no-datasets-message"
+              "description": "The accessible label for the select (used for aria-label)",
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "authKey",
+              "name": "icons",
               "type": {
-                "text": "string"
+                "text": "'none' | 'menu-only' | 'all' | undefined"
               },
-              "default": "''",
-              "description": "Auth key for DataBroker authentication",
-              "attribute": "auth-key"
+              "default": "'menu-only'",
+              "description": "Where to show icons",
+              "fieldName": "icons"
             },
             {
-              "kind": "field",
-              "name": "authToken",
+              "name": "allow-empty",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Auth token for DataBroker authentication",
-              "attribute": "auth-token"
+              "default": "false",
+              "description": "Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item.",
+              "fieldName": "allowEmpty"
             },
             {
-              "kind": "field",
-              "name": "apiUrl",
+              "name": "placeholder",
+              "description": "The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "selects",
               "type": {
-                "text": "string"
+                "text": "'single' | 'multiple'"
               },
-              "default": "'https://api.luzmo.com'",
-              "description": "API URL for DataBroker",
-              "attribute": "api-url"
+              "default": "'single'",
+              "description": "Whether the picker allows single or multiple selections.",
+              "fieldName": "selects"
             },
             {
-              "kind": "field",
-              "name": "appServer",
+              "name": "data-item-ids",
               "type": {
-                "text": "string"
+                "text": "string[]"
               },
-              "default": "'https://app.luzmo.com'",
-              "description": "The URL of the app server for thumbnails and assets",
-              "attribute": "app-server"
+              "default": "[]",
+              "description": "The dataItemIds to display in the picker. If not provided, the first item will be displayed (when allowEmpty is false).",
+              "fieldName": "dataItemIds"
             },
             {
-              "kind": "field",
-              "name": "flagOpendata",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, restricts results to public datasets (opendata parity)",
-              "attribute": "flag-opendata"
-            }
-          ],
-          "events": [
+              "description": "Whether the picker is in loading state",
+              "fieldName": "loading"
+            },
             {
-              "name": "dataset-selected",
+              "name": "invalid",
               "type": {
-                "text": "CustomEvent"
+                "text": "boolean"
               },
-              "description": "Fired when a dataset is selected"
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Whether the picker is invalid - eg. the dataItemId is not found in the datasetsDataItems or query failed to fetch data",
+              "fieldName": "invalid"
+            },
             {
-              "name": "show-search",
+              "name": "clearable",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Whether to show the search input field",
-              "fieldName": "showSearch"
+              "default": "false",
+              "description": "Whether the picker is clearable",
+              "fieldName": "clearable"
             },
             {
-              "name": "search-placeholder",
+              "name": "pending",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'Search datasets...'",
-              "description": "Placeholder text for the search input",
-              "fieldName": "searchPlaceholder"
+              "default": "false",
+              "description": "Whether the picker is in pending state",
+              "fieldName": "pending"
             },
             {
-              "name": "no-datasets-message",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'No datasets found'",
-              "description": "Message to show when no datasets are found",
-              "fieldName": "noDatasetsMessage"
+              "default": "false",
+              "description": "Whether the picker is disabled",
+              "fieldName": "disabled"
             },
             {
-              "name": "auth-key",
+              "name": "placement",
               "type": {
-                "text": "string"
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
               },
-              "default": "''",
-              "description": "Auth key for DataBroker authentication",
-              "fieldName": "authKey"
+              "default": "'bottom-start'",
+              "description": "The placement of the dropdown menu",
+              "fieldName": "placement"
             },
             {
-              "name": "auth-token",
+              "name": "datasetsDataItems",
               "type": {
-                "text": "string"
+                "text": "{\n    id: string;\n    name: { [key: string]: string };\n    columns: DataItemExtended[];\n    formulas: DataItemExtended[];\n  }[]"
               },
-              "default": "''",
-              "description": "Auth token for DataBroker authentication",
-              "fieldName": "authToken"
+              "default": "[]",
+              "description": "The datasets and their dataItems to display",
+              "fieldName": "datasetsDataItems"
             },
             {
-              "name": "api-url",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'s' | 'm' | 'l' | 'xl'"
               },
-              "default": "'https://api.luzmo.com'",
-              "description": "API URL for DataBroker",
-              "fieldName": "apiUrl"
+              "default": "m",
+              "description": "The size of the element",
+              "fieldName": "size"
             },
             {
-              "name": "app-server",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'https://app.luzmo.com'",
-              "description": "The URL of the app server for thumbnails and assets",
-              "fieldName": "appServer"
+              "default": "false",
+              "description": "Disable this control. It will not receive focus or events",
+              "fieldName": "disabled"
             },
             {
-              "name": "flag-opendata",
+              "name": "autofocus",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, restricts results to public datasets (opendata parity)",
-              "fieldName": "flagOpendata"
+              "description": "When this control is rendered, focus it automatically",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
+              "fieldName": "tabIndex"
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "luzmo-dataset-selector-list",
-          "customElement": true,
-          "summary": "A list component for selecting datasets with search and infinite scroll"
+          "tagName": "luzmo-data-items-select",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoDatasetSelectorList",
+          "name": "LuzmoDataItemsSelect",
           "declaration": {
-            "name": "LuzmoDatasetSelectorList",
-            "module": "src/components/dataset-selector-list/dataset-selector-list.ts"
+            "name": "LuzmoDataItemsSelect",
+            "module": "src/components/data-items-select/data-items-select.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dataset-selector-row/dataset-selector-row.ts",
+      "path": "src/components/dataset-icon/dataset-icon.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "publicConnectors",
+          "type": {
+            "text": "[\n  'amazonathena',\n  'asana',\n  'bigquery',\n  'citybikes',\n  'clickhouse',\n  'demodataplugin',\n  'elasticsearch',\n  'exact',\n  'exactonline',\n  'exactonlinenl',\n  'google',\n  'googleanalytics',\n  'googleanalyticsv4',\n  'googledrive',\n  'hubspot',\n  'mailchimp',\n  'mariadb',\n  'mongodb',\n  'mysql',\n  'oracle',\n  'panoply',\n  'pipedrive',\n  'pipelinedb',\n  'postgresql',\n  'presto',\n  'redshift',\n  'salesforce',\n  'saphana',\n  'snowflake',\n  'sqlserver',\n  'stardog',\n  'synapse',\n  'teamleader',\n  'trino',\n  'typeform',\n  'zendesk'\n]"
+          },
+          "default": "[ 'amazonathena', 'asana', 'bigquery', 'citybikes', 'clickhouse', 'demodataplugin', 'elasticsearch', 'exact', 'exactonline', 'exactonlinenl', 'google', 'googleanalytics', 'googleanalyticsv4', 'googledrive', 'hubspot', 'mailchimp', 'mariadb', 'mongodb', 'mysql', 'oracle', 'panoply', 'pipedrive', 'pipelinedb', 'postgresql', 'presto', 'redshift', 'salesforce', 'saphana', 'snowflake', 'sqlserver', 'stardog', 'synapse', 'teamleader', 'trino', 'typeform', 'zendesk' ]",
+          "description": "Public connectors list - these are well-known connectors that may have CSS-based icons\nThis list should match the one from"
+        },
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoDatasetSelectorRow",
-          "cssProperties": [
+          "name": "LuzmoDatasetIcon",
+          "members": [
             {
-              "description": "Gap between elements",
-              "name": "--dataset-selector-row-gap"
+              "kind": "field",
+              "name": "tagName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'luzmo-dataset-icon'"
             },
             {
-              "description": "Minimum height of the row",
-              "name": "--dataset-selector-row-min-height"
+              "kind": "field",
+              "name": "datasetInfo",
+              "type": {
+                "text": "DatasetIcon | undefined"
+              },
+              "description": "The dataset information containing subtype and thumbnail data",
+              "attribute": "dataset"
             },
             {
-              "description": "Font size of the row",
-              "name": "--dataset-selector-row-font-size"
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'16px' | '24px' | '32px' | '48px' | '64px'"
+              },
+              "default": "'32px'",
+              "description": "The size of the icon",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "description": "Text color of the row",
-              "name": "--dataset-selector-row-color"
+              "kind": "field",
+              "name": "appUrl",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The base URL for the application (used for thumbnail URLs)",
+              "attribute": "app-url"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "dataset",
+              "type": {
+                "text": "DatasetIcon | undefined"
+              },
+              "description": "The dataset information containing subtype and thumbnail data",
+              "fieldName": "datasetInfo"
             },
             {
-              "description": "Background color of the add button",
-              "name": "--dataset-selector-row-button-background"
+              "name": "size",
+              "type": {
+                "text": "'16px' | '24px' | '32px' | '48px' | '64px'"
+              },
+              "default": "'32px'",
+              "description": "The size of the icon",
+              "fieldName": "size"
             },
             {
-              "description": "Border color of the add button",
-              "name": "--dataset-selector-row-button-border-color"
+              "name": "app-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The base URL for the application (used for thumbnail URLs)",
+              "fieldName": "appUrl"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "luzmo-dataset-icon",
+          "customElement": true,
+          "summary": "Displays an icon for a dataset based on its type, thumbnails, and connector"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "publicConnectors",
+          "declaration": {
+            "name": "publicConnectors",
+            "module": "src/components/dataset-icon/dataset-icon.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LuzmoDatasetIcon",
+          "declaration": {
+            "name": "LuzmoDatasetIcon",
+            "module": "src/components/dataset-icon/dataset-icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/dataset-selector-list/dataset-selector-list.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LuzmoDatasetSelectorList",
+          "cssProperties": [
+            {
+              "description": "Background color of the list",
+              "name": "--dataset-selector-list-background"
             },
             {
-              "description": "Text color of the add button",
-              "name": "--dataset-selector-row-button-color"
+              "description": "Padding of the list",
+              "name": "--dataset-selector-list-padding"
             },
             {
-              "description": "Padding of the add button",
-              "name": "--dataset-selector-row-button-padding"
+              "description": "Gap between elements",
+              "name": "--dataset-selector-list-gap"
             },
             {
-              "description": "Border radius of the add button",
-              "name": "--dataset-selector-row-button-border-radius"
+              "description": "Border radius of the list",
+              "name": "--dataset-selector-list-border-radius"
             },
             {
-              "description": "Background color of dataset pills",
-              "name": "--dataset-selector-row-pill-background"
+              "description": "Background color of the search input",
+              "name": "--dataset-selector-list-input-background"
             },
             {
-              "description": "Border color of dataset pills",
-              "name": "--dataset-selector-row-pill-border-color"
+              "description": "Border color of the search input",
+              "name": "--dataset-selector-list-input-border-color"
             },
             {
-              "description": "Padding of dataset pills",
-              "name": "--dataset-selector-row-pill-padding"
+              "description": "Text color of the search input",
+              "name": "--dataset-selector-list-input-color"
             },
             {
-              "description": "Border radius of dataset pills",
-              "name": "--dataset-selector-row-pill-border-radius"
+              "description": "Padding of the search input",
+              "name": "--dataset-selector-list-input-padding"
             },
             {
-              "description": "Maximum width of dataset pills",
-              "name": "--dataset-selector-row-pill-max-width"
+              "description": "Padding of dataset items",
+              "name": "--dataset-selector-list-item-padding"
             },
             {
-              "description": "Gap between pill elements",
-              "name": "--dataset-selector-row-pill-gap"
+              "description": "Gap between item elements",
+              "name": "--dataset-selector-list-item-gap"
             },
             {
-              "description": "Color of the close icon in pills",
-              "name": "--dataset-selector-row-pill-close-color"
+              "description": "Hover background color of dataset items",
+              "name": "--dataset-selector-list-item-hover-background"
+            },
+            {
+              "description": "Width of the scrollbar",
+              "name": "--dataset-selector-list-scrollbar-width"
+            },
+            {
+              "description": "Background of scrollbar track",
+              "name": "--dataset-selector-list-scrollbar-track-background"
+            },
+            {
+              "description": "Background of scrollbar thumb",
+              "name": "--dataset-selector-list-scrollbar-thumb-background"
+            },
+            {
+              "description": "Hover background of scrollbar thumb",
+              "name": "--dataset-selector-list-scrollbar-thumb-hover-background"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "tagName",
+              "name": "selectedDatasets",
+              "description": "Set of dataset IDs that are already selected and should be filtered out",
               "type": {
-                "text": "string"
+                "text": "Set<string>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showSearch",
+              "type": {
+                "text": "boolean"
               },
-              "static": true,
-              "default": "'luzmo-dataset-selector-row'"
+              "default": "true",
+              "description": "Whether to show the search input field",
+              "attribute": "show-search"
             },
             {
               "kind": "field",
-              "name": "selectedDatasets",
+              "name": "searchPlaceholder",
               "type": {
-                "text": "Dataset[]"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Array of selected datasets",
-              "attribute": "selectedDatasets"
+              "default": "'Search datasets...'",
+              "description": "Placeholder text for the search input",
+              "attribute": "search-placeholder"
             },
             {
               "kind": "field",
-              "name": "buttonLabel",
+              "name": "noDatasetsMessage",
               "type": {
                 "text": "string"
               },
-              "default": "'Add dataset'",
-              "description": "Label for the add dataset button",
-              "attribute": "button-label"
+              "default": "'No datasets found'",
+              "description": "Message to show when no datasets are found",
+              "attribute": "no-datasets-message"
             },
             {
               "kind": "field",
@@ -1020,17 +1210,6 @@
               "default": "false",
               "description": "When true, restricts results to public datasets (opendata parity)",
               "attribute": "flag-opendata"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, disables all interactions with the component",
-              "attribute": "disabled",
-              "reflects": true
             }
           ],
           "events": [
@@ -1040,42 +1219,35 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when a dataset is selected"
-            },
-            {
-              "name": "dataset-removed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired when a dataset is removed"
             }
           ],
           "attributes": [
             {
+              "name": "show-search",
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, disables all interactions with the component",
-              "name": "disabled",
-              "default": "false",
-              "fieldName": "disabled"
+              "default": "true",
+              "description": "Whether to show the search input field",
+              "fieldName": "showSearch"
             },
             {
-              "name": "selectedDatasets",
+              "name": "search-placeholder",
               "type": {
-                "text": "Dataset[]"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Array of selected datasets",
-              "fieldName": "selectedDatasets"
+              "default": "'Search datasets...'",
+              "description": "Placeholder text for the search input",
+              "fieldName": "searchPlaceholder"
             },
             {
-              "name": "button-label",
+              "name": "no-datasets-message",
               "type": {
                 "text": "string"
               },
-              "default": "'Add dataset'",
-              "description": "Label for the add dataset button",
-              "fieldName": "buttonLabel"
+              "default": "'No datasets found'",
+              "description": "Message to show when no datasets are found",
+              "fieldName": "noDatasetsMessage"
             },
             {
               "name": "auth-key",
@@ -1127,253 +1299,529 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "luzmo-dataset-selector-row",
+          "tagName": "luzmo-dataset-selector-list",
           "customElement": true,
-          "summary": "A row component for selecting and managing datasets with pills and overlay"
+          "summary": "A list component for selecting datasets with search and infinite scroll"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoDatasetSelectorRow",
+          "name": "LuzmoDatasetSelectorList",
           "declaration": {
-            "name": "LuzmoDatasetSelectorRow",
-            "module": "src/components/dataset-selector-row/dataset-selector-row.ts"
+            "name": "LuzmoDatasetSelectorList",
+            "module": "src/components/dataset-selector-list/dataset-selector-list.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/display-settings/display-settings.ts",
+      "path": "src/components/dataset-selector-row/dataset-selector-row.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoDisplaySettings",
-          "members": [
+          "name": "LuzmoDatasetSelectorRow",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "language",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en'",
-              "description": "The language of the settings interface",
-              "attribute": "language"
+              "description": "Gap between elements",
+              "name": "--dataset-selector-row-gap"
             },
             {
-              "kind": "field",
-              "name": "contentLanguage",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en'",
-              "description": "The language to use for locale-aware formatting and labels",
-              "attribute": "content-language"
+              "description": "Minimum height of the row",
+              "name": "--dataset-selector-row-min-height"
             },
             {
-              "kind": "field",
-              "name": "hideDisplaySettings",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Whether or not to show the displaySettings. Is used to hide display Settings in cases where there are multiple columns",
-              "attribute": "hide-display-settings"
+              "description": "Font size of the row",
+              "name": "--dataset-selector-row-font-size"
             },
             {
-              "kind": "field",
-              "name": "isBinningDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Whether or not to show the binning in numeric",
-              "attribute": "isBinningDisabled"
+              "description": "Text color of the row",
+              "name": "--dataset-selector-row-color"
+            },
+            {
+              "description": "Background color of the add button",
+              "name": "--dataset-selector-row-button-background"
+            },
+            {
+              "description": "Border color of the add button",
+              "name": "--dataset-selector-row-button-border-color"
+            },
+            {
+              "description": "Text color of the add button",
+              "name": "--dataset-selector-row-button-color"
+            },
+            {
+              "description": "Padding of the add button",
+              "name": "--dataset-selector-row-button-padding"
+            },
+            {
+              "description": "Border radius of the add button",
+              "name": "--dataset-selector-row-button-border-radius"
+            },
+            {
+              "description": "Background color of dataset pills",
+              "name": "--dataset-selector-row-pill-background"
+            },
+            {
+              "description": "Border color of dataset pills",
+              "name": "--dataset-selector-row-pill-border-color"
+            },
+            {
+              "description": "Padding of dataset pills",
+              "name": "--dataset-selector-row-pill-padding"
+            },
+            {
+              "description": "Border radius of dataset pills",
+              "name": "--dataset-selector-row-pill-border-radius"
+            },
+            {
+              "description": "Maximum width of dataset pills",
+              "name": "--dataset-selector-row-pill-max-width"
             },
+            {
+              "description": "Gap between pill elements",
+              "name": "--dataset-selector-row-pill-gap"
+            },
+            {
+              "description": "Color of the close icon in pills",
+              "name": "--dataset-selector-row-pill-close-color"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "areDatetimeOptionsEnabled",
+              "name": "tagName",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the datetime options",
-              "attribute": "areDatetimeOptionsEnabled"
+              "static": true,
+              "default": "'luzmo-dataset-selector-row'"
             },
             {
               "kind": "field",
-              "name": "areGrandTotalsEnabled",
+              "name": "selectedDatasets",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Dataset[]"
               },
-              "description": "Whether or not to show the grand totals",
-              "attribute": "areGrandTotalsEnabled"
+              "default": "[]",
+              "description": "Array of selected datasets",
+              "attribute": "selectedDatasets"
             },
             {
               "kind": "field",
-              "name": "isAggregationDisabled",
+              "name": "buttonLabel",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the aggregation options",
-              "attribute": "isAggregationDisabled"
+              "default": "'Add dataset'",
+              "description": "Label for the add dataset button",
+              "attribute": "button-label"
             },
             {
               "kind": "field",
-              "name": "isCumulativeSumEnabled",
+              "name": "authKey",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the cumulative sum options",
-              "attribute": "isCumulativeSumEnabled"
+              "default": "''",
+              "description": "Auth key for DataBroker authentication",
+              "attribute": "auth-key"
             },
             {
               "kind": "field",
-              "name": "periodOverPeriodUiType",
+              "name": "authToken",
               "type": {
-                "text": "PeriodOverPeriodCondition | null | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the period-over-period in numeric",
-              "attribute": "periodOverPeriodUiType"
+              "default": "''",
+              "description": "Auth token for DataBroker authentication",
+              "attribute": "auth-token"
             },
             {
               "kind": "field",
-              "name": "showRemoveButton",
+              "name": "apiUrl",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the trash button next to the label",
-              "attribute": "show-remove-button"
+              "default": "'https://api.luzmo.com'",
+              "description": "API URL for DataBroker",
+              "attribute": "api-url"
             },
             {
               "kind": "field",
-              "name": "slotType",
+              "name": "appServer",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'numeric'",
-              "description": "The slot type",
-              "attribute": "slot-type"
+              "default": "'https://app.luzmo.com'",
+              "description": "The URL of the app server for thumbnails and assets",
+              "attribute": "app-server"
             },
             {
               "kind": "field",
-              "name": "slotContent",
+              "name": "flagOpendata",
               "type": {
-                "text": "GenericSlotContent"
+                "text": "boolean"
               },
-              "default": "{}",
-              "attribute": "slotContent"
+              "default": "false",
+              "description": "When true, restricts results to public datasets (opendata parity)",
+              "attribute": "flag-opendata"
             },
             {
               "kind": "field",
-              "name": "measureColumns",
+              "name": "disabled",
               "type": {
-                "text": "MeasureColumnsItem[]"
+                "text": "boolean"
               },
-              "default": "[]",
-              "description": "The list of columns that can be used for the rate aggregation",
-              "attribute": "measureColumns"
+              "default": "false",
+              "description": "When true, disables all interactions with the component",
+              "attribute": "disabled",
+              "reflects": true
             }
           ],
           "events": [
             {
-              "name": "slot-content-changed",
+              "name": "dataset-selected",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Event that is fired when the slot content is changed"
+              "description": "Fired when a dataset is selected"
             },
             {
-              "name": "remove-slot-content",
+              "name": "dataset-removed",
               "type": {
                 "text": "CustomEvent"
-              }
+              },
+              "description": "Fired when a dataset is removed"
             }
           ],
           "attributes": [
             {
-              "name": "language",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en'",
-              "description": "The language of the settings interface",
-              "fieldName": "language"
-            },
-            {
-              "name": "content-language",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en'",
-              "description": "The language to use for locale-aware formatting and labels",
-              "fieldName": "contentLanguage"
-            },
-            {
-              "name": "hide-display-settings",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Whether or not to show the displaySettings. Is used to hide display Settings in cases where there are multiple columns",
-              "fieldName": "hideDisplaySettings"
+              "description": "When true, disables all interactions with the component",
+              "name": "disabled",
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
-              "name": "isBinningDisabled",
+              "name": "selectedDatasets",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Dataset[]"
               },
-              "description": "Whether or not to show the binning in numeric",
-              "fieldName": "isBinningDisabled"
+              "default": "[]",
+              "description": "Array of selected datasets",
+              "fieldName": "selectedDatasets"
             },
             {
-              "name": "areDatetimeOptionsEnabled",
+              "name": "button-label",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the datetime options",
-              "fieldName": "areDatetimeOptionsEnabled"
+              "default": "'Add dataset'",
+              "description": "Label for the add dataset button",
+              "fieldName": "buttonLabel"
             },
             {
-              "name": "areGrandTotalsEnabled",
+              "name": "auth-key",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the grand totals",
-              "fieldName": "areGrandTotalsEnabled"
+              "default": "''",
+              "description": "Auth key for DataBroker authentication",
+              "fieldName": "authKey"
             },
             {
-              "name": "isAggregationDisabled",
+              "name": "auth-token",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the aggregation options",
-              "fieldName": "isAggregationDisabled"
+              "default": "''",
+              "description": "Auth token for DataBroker authentication",
+              "fieldName": "authToken"
             },
             {
-              "name": "isCumulativeSumEnabled",
+              "name": "api-url",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the cumulative sum options",
-              "fieldName": "isCumulativeSumEnabled"
+              "default": "'https://api.luzmo.com'",
+              "description": "API URL for DataBroker",
+              "fieldName": "apiUrl"
             },
             {
-              "name": "periodOverPeriodUiType",
+              "name": "app-server",
               "type": {
-                "text": "PeriodOverPeriodCondition | null | undefined"
+                "text": "string"
               },
-              "description": "Whether or not to show the period-over-period in numeric",
-              "fieldName": "periodOverPeriodUiType"
+              "default": "'https://app.luzmo.com'",
+              "description": "The URL of the app server for thumbnails and assets",
+              "fieldName": "appServer"
             },
             {
-              "name": "show-remove-button",
+              "name": "flag-opendata",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Whether or not to show the trash button next to the label",
-              "fieldName": "showRemoveButton"
-            },
-            {
-              "name": "slot-type",
+              "default": "false",
+              "description": "When true, restricts results to public datasets (opendata parity)",
+              "fieldName": "flagOpendata"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "luzmo-dataset-selector-row",
+          "customElement": true,
+          "summary": "A row component for selecting and managing datasets with pills and overlay"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LuzmoDatasetSelectorRow",
+          "declaration": {
+            "name": "LuzmoDatasetSelectorRow",
+            "module": "src/components/dataset-selector-row/dataset-selector-row.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/display-settings/display-settings.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LuzmoDisplaySettings",
+          "members": [
+            {
+              "kind": "field",
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language of the settings interface",
+              "attribute": "language"
+            },
+            {
+              "kind": "field",
+              "name": "contentLanguage",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language to use for locale-aware formatting and labels",
+              "attribute": "content-language"
+            },
+            {
+              "kind": "field",
+              "name": "hideDisplaySettings",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the displaySettings. Is used to hide display Settings in cases where there are multiple columns",
+              "attribute": "hide-display-settings"
+            },
+            {
+              "kind": "field",
+              "name": "isBinningDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the binning in numeric",
+              "attribute": "isBinningDisabled"
+            },
+            {
+              "kind": "field",
+              "name": "areDatetimeOptionsEnabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the datetime options",
+              "attribute": "areDatetimeOptionsEnabled"
+            },
+            {
+              "kind": "field",
+              "name": "areGrandTotalsEnabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the grand totals",
+              "attribute": "areGrandTotalsEnabled"
+            },
+            {
+              "kind": "field",
+              "name": "isAggregationDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the aggregation options",
+              "attribute": "isAggregationDisabled"
+            },
+            {
+              "kind": "field",
+              "name": "isCumulativeSumEnabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the cumulative sum options",
+              "attribute": "isCumulativeSumEnabled"
+            },
+            {
+              "kind": "field",
+              "name": "periodOverPeriodUiType",
+              "type": {
+                "text": "PeriodOverPeriodCondition | null | undefined"
+              },
+              "description": "Whether or not to show the period-over-period in numeric",
+              "attribute": "periodOverPeriodUiType"
+            },
+            {
+              "kind": "field",
+              "name": "showRemoveButton",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the trash button next to the label",
+              "attribute": "show-remove-button"
+            },
+            {
+              "kind": "field",
+              "name": "slotType",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'numeric'",
+              "description": "The slot type",
+              "attribute": "slot-type"
+            },
+            {
+              "kind": "field",
+              "name": "slotContent",
+              "type": {
+                "text": "GenericSlotContent"
+              },
+              "default": "{}",
+              "attribute": "slotContent"
+            },
+            {
+              "kind": "field",
+              "name": "measureColumns",
+              "type": {
+                "text": "MeasureColumnsItem[]"
+              },
+              "default": "[]",
+              "description": "The list of columns that can be used for the rate aggregation",
+              "attribute": "measureColumns"
+            }
+          ],
+          "events": [
+            {
+              "name": "slot-content-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Event that is fired when the slot content is changed"
+            },
+            {
+              "name": "remove-slot-content",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language of the settings interface",
+              "fieldName": "language"
+            },
+            {
+              "name": "content-language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language to use for locale-aware formatting and labels",
+              "fieldName": "contentLanguage"
+            },
+            {
+              "name": "hide-display-settings",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the displaySettings. Is used to hide display Settings in cases where there are multiple columns",
+              "fieldName": "hideDisplaySettings"
+            },
+            {
+              "name": "isBinningDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the binning in numeric",
+              "fieldName": "isBinningDisabled"
+            },
+            {
+              "name": "areDatetimeOptionsEnabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the datetime options",
+              "fieldName": "areDatetimeOptionsEnabled"
+            },
+            {
+              "name": "areGrandTotalsEnabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the grand totals",
+              "fieldName": "areGrandTotalsEnabled"
+            },
+            {
+              "name": "isAggregationDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the aggregation options",
+              "fieldName": "isAggregationDisabled"
+            },
+            {
+              "name": "isCumulativeSumEnabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the cumulative sum options",
+              "fieldName": "isCumulativeSumEnabled"
+            },
+            {
+              "name": "periodOverPeriodUiType",
+              "type": {
+                "text": "PeriodOverPeriodCondition | null | undefined"
+              },
+              "description": "Whether or not to show the period-over-period in numeric",
+              "fieldName": "periodOverPeriodUiType"
+            },
+            {
+              "name": "show-remove-button",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether or not to show the trash button next to the label",
+              "fieldName": "showRemoveButton"
+            },
+            {
+              "name": "slot-type",
               "type": {
                 "text": "string | undefined"
               },
@@ -2861,6 +3309,252 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/edit-filters/edit-filters.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LuzmoEditFilters",
+          "members": [
+            {
+              "kind": "field",
+              "name": "apiUrl",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'https://api.luzmo.com'",
+              "description": "The API URL of the databroker",
+              "attribute": "api-url",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "authKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The auth key of the databroker",
+              "attribute": "auth-key",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "authToken",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The auth token of the databroker",
+              "attribute": "auth-token",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cacheTime",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The cache time of the databroker",
+              "attribute": "cache-time",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language of the settings interface",
+              "attribute": "language",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "contentLanguage",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language to use for locale-aware formatting and labels",
+              "attribute": "content-language",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "timeZone",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The time zone to use for the date picker",
+              "attribute": "time-zone",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "datasetIds",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "description": "The dataset ids to fetch columns & formulas",
+              "attribute": "dataset-ids",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "filters",
+              "type": {
+                "text": "FilterGroup | null"
+              },
+              "default": "null",
+              "description": "The filter group structure to display",
+              "attribute": "filters"
+            }
+          ],
+          "events": [
+            {
+              "name": "filters-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Announces that the filters have changed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "api-url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'https://api.luzmo.com'",
+              "description": "The API URL of the databroker",
+              "fieldName": "apiUrl"
+            },
+            {
+              "name": "auth-key",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The auth key of the databroker",
+              "fieldName": "authKey"
+            },
+            {
+              "name": "auth-token",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The auth token of the databroker",
+              "fieldName": "authToken"
+            },
+            {
+              "name": "cache-time",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The cache time of the databroker",
+              "fieldName": "cacheTime"
+            },
+            {
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language of the settings interface",
+              "fieldName": "language"
+            },
+            {
+              "name": "content-language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language to use for locale-aware formatting and labels",
+              "fieldName": "contentLanguage"
+            },
+            {
+              "name": "time-zone",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The time zone to use for the date picker",
+              "fieldName": "timeZone"
+            },
+            {
+              "name": "dataset-ids",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "description": "The dataset ids to fetch columns & formulas",
+              "fieldName": "datasetIds"
+            },
+            {
+              "name": "filters",
+              "type": {
+                "text": "FilterGroup | null"
+              },
+              "default": "null",
+              "description": "The filter group structure to display",
+              "fieldName": "filters"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'s' | 'm' | 'l' | 'xl'"
+              },
+              "default": "m",
+              "description": "The size of the element",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disable this control. It will not receive focus or events",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this control is rendered, focus it automatically",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
+              "fieldName": "tabIndex"
+            }
+          ],
+          "tagName": "luzmo-edit-filters",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LuzmoEditFilters",
+          "declaration": {
+            "name": "LuzmoEditFilters",
+            "module": "src/components/edit-filters/edit-filters.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/edit-filters/types.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/edit-item/edit-item.ts",
@@ -3767,453 +4461,114 @@
       ]
     },
     {
-      "kind": "javascript-module",
-      "path": "src/components/edit-option/helpers/control-templates/slider-template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "sliderMarkup",
-          "parameters": [
-            {
-              "name": "args",
-              "type": {
-                "text": "ControlMarkupArgs"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "sliderMarkup",
-          "declaration": {
-            "name": "sliderMarkup",
-            "module": "src/components/edit-option/helpers/control-templates/slider-template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/edit-option/helpers/control-templates/switch-template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "switchMarkup",
-          "parameters": [
-            {
-              "name": "args",
-              "type": {
-                "text": "ControlMarkupArgs"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "switchMarkup",
-          "declaration": {
-            "name": "switchMarkup",
-            "module": "src/components/edit-option/helpers/control-templates/switch-template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/edit-option/helpers/control-templates/text-field-template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "textFieldMarkup",
-          "parameters": [
-            {
-              "name": "args",
-              "type": {
-                "text": "ControlMarkupArgs"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "textFieldMarkup",
-          "declaration": {
-            "name": "textFieldMarkup",
-            "module": "src/components/edit-option/helpers/control-templates/text-field-template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/edit-option-action-button-group/edit-option-action-button-group.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LuzmoEditOptionActionButtonGroup",
-          "members": [],
-          "events": [
-            {
-              "name": "option-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "values",
-              "type": {
-                "text": "Record<string, ButtonContent>"
-              },
-              "default": "{}",
-              "fieldName": "values"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "selects",
-              "type": {
-                "text": "'single' | 'multiple' | undefined"
-              },
-              "fieldName": "selects"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "[string] | undefined"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "default",
-              "type": {
-                "text": "[string] | undefined"
-              },
-              "fieldName": "default"
-            }
-          ],
-          "superclass": {
-            "name": "LuzmoEditOptionBase",
-            "module": "/src/components/edit-option-base/edit-option-base"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LuzmoEditOptionActionButtonGroup",
-          "declaration": {
-            "name": "LuzmoEditOptionActionButtonGroup",
-            "module": "src/components/edit-option-action-button-group/edit-option-action-button-group.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/edit-option-color-palette-picker/edit-option-color-palette-picker.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LuzmoEditOptionColorPalettePicker",
-          "members": [],
-          "events": [
-            {
-              "name": "option-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The selected color palette key of the picker",
-              "fieldName": "value"
-            },
-            {
-              "name": "default",
-              "type": {
-                "text": "string"
-              },
-              "default": "'OrRd'",
-              "description": "The default color palette key of the picker",
-              "fieldName": "default"
-            },
-            {
-              "name": "values",
-              "type": {
-                "text": "string[]"
-              },
-              "default": "[]",
-              "description": "The color palette keys of the picker",
-              "fieldName": "values"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the picker is disabled",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "horizontal",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the picker is horizontal",
-              "fieldName": "horizontal"
-            },
-            {
-              "name": "parseValue",
-              "type": {
-                "text": "(value: any) => string | undefined"
-              },
-              "description": "The function to parse the value",
-              "fieldName": "parseValue"
-            },
-            {
-              "name": "toValue",
-              "type": {
-                "text": "(value: string) => any | undefined"
-              },
-              "description": "The function to convert the value to a string",
-              "fieldName": "toValue"
-            },
-            {
-              "name": "number-of-colors",
-              "type": {
-                "text": "number"
-              },
-              "default": "5",
-              "description": "The number of colors to display",
-              "fieldName": "numberOfColors"
-            }
-          ],
-          "superclass": {
-            "name": "LuzmoEditOptionBase",
-            "module": "/src/components/edit-option-base/edit-option-base"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LuzmoEditOptionColorPalettePicker",
-          "declaration": {
-            "name": "LuzmoEditOptionColorPalettePicker",
-            "module": "src/components/edit-option-color-palette-picker/edit-option-color-palette-picker.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/edit-option-color-picker/edit-option-color-picker.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LuzmoEditOptionColorPicker",
-          "members": [
-            {
-              "kind": "field",
-              "name": "swatches",
-              "type": {
-                "text": "string[]"
-              },
-              "default": "[]",
-              "attribute": "swatches",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "rounding",
-              "type": {
-                "text": "'full' | 'light' | 'none'"
-              },
-              "default": "'full'",
-              "attribute": "rounding",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'rectangle'"
-              },
-              "default": "'circle'",
-              "attribute": "shape",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "debounce",
-              "type": {
-                "text": "number"
-              },
-              "default": "50",
-              "attribute": "debounce",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "debounceTimeout",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "option-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when the color is changed."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "placement",
-              "type": {
-                "text": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\""
-              },
-              "default": "'left-start'",
-              "fieldName": "placement",
-              "attribute": "placement"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "'transparent'",
-              "fieldName": "value"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "noAlphaChannel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "noAlphaChannel"
-            },
-            {
-              "name": "swatches",
-              "type": {
-                "text": "string[]"
-              },
-              "default": "[]",
-              "fieldName": "swatches"
-            },
+      "kind": "javascript-module",
+      "path": "src/components/edit-option/helpers/control-templates/slider-template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "sliderMarkup",
+          "parameters": [
             {
-              "name": "rounding",
+              "name": "args",
               "type": {
-                "text": "'full' | 'light' | 'none'"
-              },
-              "default": "'full'",
-              "fieldName": "rounding"
-            },
+                "text": "ControlMarkupArgs"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "sliderMarkup",
+          "declaration": {
+            "name": "sliderMarkup",
+            "module": "src/components/edit-option/helpers/control-templates/slider-template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/edit-option/helpers/control-templates/switch-template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "switchMarkup",
+          "parameters": [
             {
-              "name": "shape",
+              "name": "args",
               "type": {
-                "text": "'circle' | 'rectangle'"
-              },
-              "default": "'circle'",
-              "fieldName": "shape"
-            },
+                "text": "ControlMarkupArgs"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "switchMarkup",
+          "declaration": {
+            "name": "switchMarkup",
+            "module": "src/components/edit-option/helpers/control-templates/switch-template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/edit-option/helpers/control-templates/text-field-template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "textFieldMarkup",
+          "parameters": [
             {
-              "name": "debounce",
+              "name": "args",
               "type": {
-                "text": "number"
-              },
-              "default": "50",
-              "fieldName": "debounce"
+                "text": "ControlMarkupArgs"
+              }
             }
-          ],
-          "superclass": {
-            "name": "LuzmoEditOptionBase",
-            "module": "/src/components/edit-option-base/edit-option-base"
-          },
-          "tagName": "luzmo-edit-option-color-picker",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionColorPicker",
+          "name": "textFieldMarkup",
           "declaration": {
-            "name": "LuzmoEditOptionColorPicker",
-            "module": "src/components/edit-option-color-picker/edit-option-color-picker.ts"
+            "name": "textFieldMarkup",
+            "module": "src/components/edit-option/helpers/control-templates/text-field-template.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-color-range/edit-option-color-range.ts",
+      "path": "src/components/edit-option-action-button-group/edit-option-action-button-group.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionColorRange",
+          "name": "LuzmoEditOptionActionButtonGroup",
           "members": [],
           "events": [
             {
               "name": "option-changed",
               "type": {
                 "text": "CustomEvent"
-              },
-              "description": "Emitted when the color range is changed."
+              }
             }
           ],
           "attributes": [
             {
-              "name": "value",
-              "type": {
-                "text": "{ color: string; value?: number }[] | undefined"
-              },
-              "description": "The color range",
-              "fieldName": "value"
-            },
-            {
-              "name": "default",
+              "name": "values",
               "type": {
-                "text": "{ color: string; value?: number }[] | undefined"
+                "text": "Record<string, ButtonContent>"
               },
-              "description": "The default color range",
-              "fieldName": "default"
+              "default": "{}",
+              "fieldName": "values"
             },
             {
               "name": "disabled",
@@ -4221,143 +4576,56 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the color-range is disabled",
               "fieldName": "disabled"
             },
             {
-              "name": "percentage",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Range with percentage values",
-              "fieldName": "percentage"
-            },
-            {
-              "name": "no-alpha-channel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Range colors can have alpha values",
-              "fieldName": "noAlphaChannel"
-            },
-            {
-              "name": "edit-range-size",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The number of values in the range can be changed",
-              "fieldName": "editRangeSize"
-            },
-            {
-              "name": "no-values",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The values in the range can be changed by the user in the input field",
-              "fieldName": "noValues"
-            },
-            {
-              "name": "minimum-range-size",
-              "type": {
-                "text": "number"
-              },
-              "default": "2",
-              "description": "The minimum range size",
-              "fieldName": "minimumRangeSize"
-            },
-            {
-              "name": "negative-infinity-value",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether there is a first range value that sets color from negative infinity to the next range value. That first range value has a color, but the value is disregarded",
-              "fieldName": "negativeInfinityValue"
-            },
-            {
-              "name": "read-only-color-picker",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The color pickers can be read-only",
-              "fieldName": "readOnlyColorPicker"
-            },
-            {
-              "name": "reverse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the colors are reversed",
-              "fieldName": "reverse"
-            },
-            {
-              "name": "debounce",
+              "name": "selects",
               "type": {
-                "text": "number"
+                "text": "'single' | 'multiple' | undefined"
               },
-              "default": "100",
-              "description": "The debounce time in milliseconds",
-              "fieldName": "debounce"
+              "fieldName": "selects"
             },
             {
-              "name": "parseValue",
+              "name": "value",
               "type": {
-                "text": "(value: any) => { color: string; value?: number }[] | undefined"
+                "text": "[string] | undefined"
               },
-              "description": "The function to parse the value",
-              "fieldName": "parseValue"
+              "fieldName": "value"
             },
             {
-              "name": "toValue",
+              "name": "default",
               "type": {
-                "text": "(value: any) => any | undefined"
+                "text": "[string] | undefined"
               },
-              "description": "The function to convert the value",
-              "fieldName": "toValue"
+              "fieldName": "default"
             }
           ],
           "superclass": {
             "name": "LuzmoEditOptionBase",
             "module": "/src/components/edit-option-base/edit-option-base"
-          },
-          "tagName": "luzmo-edit-option-color-range",
-          "customElement": true
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionColorRange",
+          "name": "LuzmoEditOptionActionButtonGroup",
           "declaration": {
-            "name": "LuzmoEditOptionColorRange",
-            "module": "src/components/edit-option-color-range/edit-option-color-range.ts"
+            "name": "LuzmoEditOptionActionButtonGroup",
+            "module": "src/components/edit-option-action-button-group/edit-option-action-button-group.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-multi-language-field/edit-option-multi-language-field.ts",
+      "path": "src/components/edit-option-color-palette-picker/edit-option-color-palette-picker.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionMultiLangField",
-          "members": [
-            {
-              "kind": "field",
-              "name": "debounceTimeout",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
+          "name": "LuzmoEditOptionColorPalettePicker",
+          "members": [],
           "events": [
             {
               "name": "option-changed",
@@ -4370,63 +4638,71 @@
             {
               "name": "value",
               "type": {
-                "text": "Record<string, string>"
+                "text": "string | undefined"
               },
-              "default": "{}",
+              "description": "The selected color palette key of the picker",
               "fieldName": "value"
             },
             {
-              "name": "invalid",
+              "name": "default",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "invalid"
+              "default": "'OrRd'",
+              "description": "The default color palette key of the picker",
+              "fieldName": "default"
             },
             {
-              "name": "readonly",
+              "name": "values",
               "type": {
-                "text": "boolean"
+                "text": "string[]"
               },
-              "default": "false",
-              "fieldName": "readonly"
+              "default": "[]",
+              "description": "The color palette keys of the picker",
+              "fieldName": "values"
             },
             {
-              "name": "language",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "default": "'en'",
-              "fieldName": "language"
+              "default": "false",
+              "description": "Whether the picker is disabled",
+              "fieldName": "disabled"
             },
             {
-              "name": "placeholder",
+              "name": "horizontal",
               "type": {
-                "text": "Record<string, string> | undefined"
+                "text": "boolean"
               },
-              "fieldName": "placeholder"
+              "default": "false",
+              "description": "Whether the picker is horizontal",
+              "fieldName": "horizontal"
             },
             {
               "name": "parseValue",
               "type": {
-                "text": "(value: any, language: string) => any | undefined"
+                "text": "(value: any) => string | undefined"
               },
+              "description": "The function to parse the value",
               "fieldName": "parseValue"
             },
             {
               "name": "toValue",
               "type": {
-                "text": "(value: any, language: string) => any | undefined"
+                "text": "(value: string) => any | undefined"
               },
+              "description": "The function to convert the value to a string",
               "fieldName": "toValue"
             },
             {
-              "name": "debounce",
+              "name": "number-of-colors",
               "type": {
                 "text": "number"
               },
-              "default": "200",
-              "fieldName": "debounce"
+              "default": "5",
+              "description": "The number of colors to display",
+              "fieldName": "numberOfColors"
             }
           ],
           "superclass": {
@@ -4438,30 +4714,60 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionMultiLangField",
+          "name": "LuzmoEditOptionColorPalettePicker",
           "declaration": {
-            "name": "LuzmoEditOptionMultiLangField",
-            "module": "src/components/edit-option-multi-language-field/edit-option-multi-language-field.ts"
+            "name": "LuzmoEditOptionColorPalettePicker",
+            "module": "src/components/edit-option-color-palette-picker/edit-option-color-palette-picker.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-number-field/edit-option-number-field.ts",
+      "path": "src/components/edit-option-color-picker/edit-option-color-picker.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionNumberField",
+          "name": "LuzmoEditOptionColorPicker",
           "members": [
+            {
+              "kind": "field",
+              "name": "swatches",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "attribute": "swatches",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rounding",
+              "type": {
+                "text": "'full' | 'light' | 'none'"
+              },
+              "default": "'full'",
+              "attribute": "rounding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'rectangle'"
+              },
+              "default": "'circle'",
+              "attribute": "shape",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "debounce",
               "type": {
                 "text": "number"
               },
-              "default": "200",
+              "default": "50",
               "attribute": "debounce",
               "reflects": true
             },
@@ -4478,214 +4784,274 @@
               "name": "option-changed",
               "type": {
                 "text": "CustomEvent"
-              }
+              },
+              "description": "Emitted when the color is changed."
             }
           ],
           "attributes": [
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "min",
-              "type": {
-                "text": "number | undefined"
-              },
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
+              "name": "placement",
               "type": {
-                "text": "number | undefined"
+                "text": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\""
               },
-              "fieldName": "max"
+              "default": "'left-start'",
+              "fieldName": "placement",
+              "attribute": "placement"
             },
             {
-              "name": "default",
+              "name": "value",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "fieldName": "default"
+              "default": "'transparent'",
+              "fieldName": "value"
             },
             {
-              "name": "value",
+              "name": "disabled",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "fieldName": "value"
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
-              "name": "placeholder",
+              "name": "noAlphaChannel",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "fieldName": "placeholder"
+              "default": "false",
+              "fieldName": "noAlphaChannel"
             },
             {
-              "name": "min-width-input-field",
+              "name": "swatches",
               "type": {
-                "text": "string | undefined"
+                "text": "string[]"
               },
-              "fieldName": "minWidthInputField"
+              "default": "[]",
+              "fieldName": "swatches"
             },
             {
-              "name": "step",
+              "name": "rounding",
               "type": {
-                "text": "number"
+                "text": "'full' | 'light' | 'none'"
               },
-              "default": "1",
-              "fieldName": "step"
+              "default": "'full'",
+              "fieldName": "rounding"
             },
             {
-              "name": "unit",
+              "name": "shape",
               "type": {
-                "text": "boolean"
+                "text": "'circle' | 'rectangle'"
               },
-              "default": "false",
-              "fieldName": "unit"
+              "default": "'circle'",
+              "fieldName": "shape"
             },
             {
               "name": "debounce",
               "type": {
                 "text": "number"
               },
-              "default": "200",
+              "default": "50",
               "fieldName": "debounce"
-            },
-            {
-              "name": "parseValue",
-              "type": {
-                "text": "(value?: string | number) => number | undefined"
-              },
-              "fieldName": "parseValue"
-            },
-            {
-              "name": "toValue",
-              "type": {
-                "text": "(value?: number) => string | number | any | undefined"
-              },
-              "fieldName": "toValue"
             }
           ],
           "superclass": {
             "name": "LuzmoEditOptionBase",
             "module": "/src/components/edit-option-base/edit-option-base"
-          }
+          },
+          "tagName": "luzmo-edit-option-color-picker",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionNumberField",
+          "name": "LuzmoEditOptionColorPicker",
           "declaration": {
-            "name": "LuzmoEditOptionNumberField",
-            "module": "src/components/edit-option-number-field/edit-option-number-field.ts"
+            "name": "LuzmoEditOptionColorPicker",
+            "module": "src/components/edit-option-color-picker/edit-option-color-picker.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-picker/edit-option-picker.ts",
+      "path": "src/components/edit-option-color-range/edit-option-color-range.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionPicker",
+          "name": "LuzmoEditOptionColorRange",
           "members": [],
           "events": [
             {
               "name": "option-changed",
               "type": {
                 "text": "CustomEvent"
-              }
+              },
+              "description": "Emitted when the color range is changed."
             }
           ],
           "attributes": [
             {
-              "name": "placement",
+              "name": "value",
               "type": {
-                "text": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\""
+                "text": "{ color: string; value?: number }[] | undefined"
               },
-              "default": "'bottom-end'",
-              "fieldName": "placement",
-              "attribute": "placement"
+              "description": "The color range",
+              "fieldName": "value"
+            },
+            {
+              "name": "default",
+              "type": {
+                "text": "{ color: string; value?: number }[] | undefined"
+              },
+              "description": "The default color range",
+              "fieldName": "default"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the color-range is disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "percentage",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Range with percentage values",
+              "fieldName": "percentage"
+            },
+            {
+              "name": "no-alpha-channel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Range colors can have alpha values",
+              "fieldName": "noAlphaChannel"
+            },
+            {
+              "name": "edit-range-size",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The number of values in the range can be changed",
+              "fieldName": "editRangeSize"
+            },
+            {
+              "name": "no-values",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The values in the range can be changed by the user in the input field",
+              "fieldName": "noValues"
+            },
+            {
+              "name": "minimum-range-size",
+              "type": {
+                "text": "number"
+              },
+              "default": "2",
+              "description": "The minimum range size",
+              "fieldName": "minimumRangeSize"
+            },
+            {
+              "name": "negative-infinity-value",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether there is a first range value that sets color from negative infinity to the next range value. That first range value has a color, but the value is disregarded",
+              "fieldName": "negativeInfinityValue"
             },
             {
-              "name": "values",
+              "name": "read-only-color-picker",
               "type": {
-                "text": "Record<string, string>"
+                "text": "boolean"
               },
-              "default": "{}",
-              "fieldName": "values"
+              "default": "false",
+              "description": "The color pickers can be read-only",
+              "fieldName": "readOnlyColorPicker"
             },
             {
-              "name": "disabled",
+              "name": "reverse",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "description": "Whether the colors are reversed",
+              "fieldName": "reverse"
             },
             {
-              "name": "value",
+              "name": "debounce",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "fieldName": "value"
+              "default": "100",
+              "description": "The debounce time in milliseconds",
+              "fieldName": "debounce"
             },
             {
               "name": "parseValue",
               "type": {
-                "text": "(value: string | number | any) => string | undefined"
+                "text": "(value: any) => { color: string; value?: number }[] | undefined"
               },
+              "description": "The function to parse the value",
               "fieldName": "parseValue"
             },
             {
               "name": "toValue",
               "type": {
-                "text": "(value: string) => string | number | any | undefined"
+                "text": "(value: any) => any | undefined"
               },
+              "description": "The function to convert the value",
               "fieldName": "toValue"
-            },
-            {
-              "name": "default",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "default"
             }
           ],
           "superclass": {
             "name": "LuzmoEditOptionBase",
             "module": "/src/components/edit-option-base/edit-option-base"
-          }
+          },
+          "tagName": "luzmo-edit-option-color-range",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionPicker",
+          "name": "LuzmoEditOptionColorRange",
           "declaration": {
-            "name": "LuzmoEditOptionPicker",
-            "module": "src/components/edit-option-picker/edit-option-picker.ts"
+            "name": "LuzmoEditOptionColorRange",
+            "module": "src/components/edit-option-color-range/edit-option-color-range.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-position-picker/edit-option-position-picker.ts",
+      "path": "src/components/edit-option-multi-language-field/edit-option-multi-language-field.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionPositionPicker",
-          "members": [],
+          "name": "LuzmoEditOptionMultiLangField",
+          "members": [
+            {
+              "kind": "field",
+              "name": "debounceTimeout",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
           "events": [
             {
               "name": "option-changed",
@@ -4698,25 +5064,18 @@
             {
               "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "Record<string, string>"
               },
+              "default": "{}",
               "fieldName": "value"
             },
             {
-              "name": "default-position",
-              "type": {
-                "text": "string"
-              },
-              "default": "'topRight'",
-              "fieldName": "default"
-            },
-            {
-              "name": "positions",
+              "name": "invalid",
               "type": {
-                "text": "string[] | undefined"
+                "text": "boolean"
               },
-              "default": "defaults",
-              "fieldName": "positions"
+              "default": "false",
+              "fieldName": "invalid"
             },
             {
               "name": "readonly",
@@ -4725,6 +5084,43 @@
               },
               "default": "false",
               "fieldName": "readonly"
+            },
+            {
+              "name": "language",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'en'",
+              "fieldName": "language"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "Record<string, string> | undefined"
+              },
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "parseValue",
+              "type": {
+                "text": "(value: any, language: string) => any | undefined"
+              },
+              "fieldName": "parseValue"
+            },
+            {
+              "name": "toValue",
+              "type": {
+                "text": "(value: any, language: string) => any | undefined"
+              },
+              "fieldName": "toValue"
+            },
+            {
+              "name": "debounce",
+              "type": {
+                "text": "number"
+              },
+              "default": "200",
+              "fieldName": "debounce"
             }
           ],
           "superclass": {
@@ -4736,29 +5132,32 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionPositionPicker",
+          "name": "LuzmoEditOptionMultiLangField",
           "declaration": {
-            "name": "LuzmoEditOptionPositionPicker",
-            "module": "src/components/edit-option-position-picker/edit-option-position-picker.ts"
+            "name": "LuzmoEditOptionMultiLangField",
+            "module": "src/components/edit-option-multi-language-field/edit-option-multi-language-field.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-positions-number-field/edit-option-positions-number-field.ts",
+      "path": "src/components/edit-option-number-field/edit-option-number-field.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionPositionsNumberField",
+          "name": "LuzmoEditOptionNumberField",
           "members": [
             {
               "kind": "field",
-              "name": "syncedValue",
+              "name": "debounce",
               "type": {
-                "text": "number | undefined"
-              }
+                "text": "number"
+              },
+              "default": "200",
+              "attribute": "debounce",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -4766,18 +5165,6 @@
               "type": {
                 "text": "any"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_positions",
-              "type": {
-                "text": "Position[][]"
-              },
-              "default": "[ ['top-left', 'top', 'top-right'], ['left', 'center', 'right'], ['bottom-left', 'bottom', 'bottom-right'] ]"
-            },
-            {
-              "kind": "method",
-              "name": "toggleSync"
             }
           ],
           "events": [
@@ -4790,49 +5177,70 @@
           ],
           "attributes": [
             {
-              "name": "positions",
+              "name": "disabled",
               "type": {
-                "text": "Position[] | undefined"
+                "text": "boolean"
               },
-              "fieldName": "positions"
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
-              "name": "values",
+              "name": "min",
               "type": {
-                "text": "Record<Position, number | undefined> | undefined"
+                "text": "number | undefined"
               },
-              "fieldName": "values"
+              "fieldName": "min"
             },
             {
-              "name": "can-sync",
+              "name": "max",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number | undefined"
               },
-              "default": "true",
-              "fieldName": "canSync"
+              "fieldName": "max"
             },
             {
-              "name": "positionConfiguration",
+              "name": "default",
               "type": {
-                "text": "Record<\n    Position,\n    { min?: number; max?: number; step?: number; default?: number }\n  > | undefined"
+                "text": "number | undefined"
               },
-              "fieldName": "positionConfiguration"
+              "fieldName": "default"
             },
             {
-              "name": "invalid",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "fieldName": "invalid"
+              "fieldName": "value"
             },
             {
-              "name": "readonly",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "min-width-input-field",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "minWidthInputField"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "step"
+            },
+            {
+              "name": "unit",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "readonly"
+              "fieldName": "unit"
             },
             {
               "name": "debounce",
@@ -4843,11 +5251,18 @@
               "fieldName": "debounce"
             },
             {
-              "name": "sync",
+              "name": "parseValue",
               "type": {
-                "text": "boolean | undefined"
+                "text": "(value?: string | number) => number | undefined"
               },
-              "fieldName": "sync"
+              "fieldName": "parseValue"
+            },
+            {
+              "name": "toValue",
+              "type": {
+                "text": "(value?: number) => string | number | any | undefined"
+              },
+              "fieldName": "toValue"
             }
           ],
           "superclass": {
@@ -4859,31 +5274,23 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionPositionsNumberField",
+          "name": "LuzmoEditOptionNumberField",
           "declaration": {
-            "name": "LuzmoEditOptionPositionsNumberField",
-            "module": "src/components/edit-option-positions-number-field/edit-option-positions-number-field.ts"
+            "name": "LuzmoEditOptionNumberField",
+            "module": "src/components/edit-option-number-field/edit-option-number-field.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-radio-button-group/edit-option-radio-button-group.ts",
+      "path": "src/components/edit-option-picker/edit-option-picker.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionRadioButtonGroup",
-          "members": [
-            {
-              "kind": "field",
-              "name": "debounceTimeout",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
+          "name": "LuzmoEditOptionPicker",
+          "members": [],
           "events": [
             {
               "name": "option-changed",
@@ -4893,6 +5300,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "placement",
+              "type": {
+                "text": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\""
+              },
+              "default": "'bottom-end'",
+              "fieldName": "placement",
+              "attribute": "placement"
+            },
             {
               "name": "values",
               "type": {
@@ -4912,30 +5328,30 @@
             {
               "name": "value",
               "type": {
-                "text": "string"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "default",
-              "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "fieldName": "default"
+              "fieldName": "value"
             },
             {
               "name": "parseValue",
               "type": {
-                "text": "(value?: string | number | any) => string | undefined"
+                "text": "(value: string | number | any) => string | undefined"
               },
               "fieldName": "parseValue"
             },
             {
               "name": "toValue",
               "type": {
-                "text": "(value?: string) => string | number | any | undefined"
+                "text": "(value: string) => string | number | any | undefined"
               },
               "fieldName": "toValue"
+            },
+            {
+              "name": "default",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "default"
             }
           ],
           "superclass": {
@@ -4947,84 +5363,23 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionRadioButtonGroup",
+          "name": "LuzmoEditOptionPicker",
           "declaration": {
-            "name": "LuzmoEditOptionRadioButtonGroup",
-            "module": "src/components/edit-option-radio-button-group/edit-option-radio-button-group.ts"
+            "name": "LuzmoEditOptionPicker",
+            "module": "src/components/edit-option-picker/edit-option-picker.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-slider/edit-option-slider.ts",
+      "path": "src/components/edit-option-position-picker/edit-option-position-picker.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionSlider",
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "default",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "attribute": "default",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "attribute": "min",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "attribute": "max",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "attribute": "step",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "debounce",
-              "type": {
-                "text": "number"
-              },
-              "default": "200",
-              "attribute": "debounce",
-              "reflects": true
-            }
-          ],
+          "name": "LuzmoEditOptionPositionPicker",
+          "members": [],
           "events": [
             {
               "name": "option-changed",
@@ -5037,64 +5392,33 @@
             {
               "name": "value",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "0",
               "fieldName": "value"
             },
             {
-              "name": "default",
+              "name": "default-position",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
+              "default": "'topRight'",
               "fieldName": "default"
             },
             {
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "fieldName": "max"
-            },
-            {
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "fieldName": "step"
-            },
-            {
-              "name": "debounce",
-              "type": {
-                "text": "number"
-              },
-              "default": "200",
-              "fieldName": "debounce"
-            },
-            {
-              "name": "parseValue",
+              "name": "positions",
               "type": {
-                "text": "(value?: string | number | any) => number | undefined"
+                "text": "string[] | undefined"
               },
-              "fieldName": "parseValue"
+              "default": "defaults",
+              "fieldName": "positions"
             },
             {
-              "name": "toValue",
+              "name": "readonly",
               "type": {
-                "text": "(value?: number) => string | number | any | undefined"
+                "text": "boolean"
               },
-              "fieldName": "toValue"
+              "default": "false",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -5106,38 +5430,48 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionSlider",
+          "name": "LuzmoEditOptionPositionPicker",
           "declaration": {
-            "name": "LuzmoEditOptionSlider",
-            "module": "src/components/edit-option-slider/edit-option-slider.ts"
+            "name": "LuzmoEditOptionPositionPicker",
+            "module": "src/components/edit-option-position-picker/edit-option-position-picker.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-switch/edit-option-switch.ts",
+      "path": "src/components/edit-option-positions-number-field/edit-option-positions-number-field.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionSwitch",
+          "name": "LuzmoEditOptionPositionsNumberField",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "syncedValue",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "attribute": "value"
+                "text": "number | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "default",
+              "name": "debounceTimeout",
               "type": {
-                "text": "boolean | undefined"
+                "text": "any"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_positions",
+              "type": {
+                "text": "Position[][]"
               },
-              "attribute": "default"
+              "default": "[ ['top-left', 'top', 'top-right'], ['left', 'center', 'right'], ['bottom-left', 'bottom', 'bottom-right'] ]"
+            },
+            {
+              "kind": "method",
+              "name": "toggleSync"
             }
           ],
           "events": [
@@ -5150,32 +5484,64 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "positions",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Position[] | undefined"
               },
-              "fieldName": "value"
+              "fieldName": "positions"
             },
             {
-              "name": "default",
+              "name": "values",
+              "type": {
+                "text": "Record<Position, number | undefined> | undefined"
+              },
+              "fieldName": "values"
+            },
+            {
+              "name": "can-sync",
               "type": {
                 "text": "boolean | undefined"
               },
-              "fieldName": "default"
+              "default": "true",
+              "fieldName": "canSync"
             },
             {
-              "name": "parseValue",
+              "name": "positionConfiguration",
               "type": {
-                "text": "(value?: string | number | any) => boolean | undefined"
+                "text": "Record<\n    Position,\n    { min?: number; max?: number; step?: number; default?: number }\n  > | undefined"
               },
-              "fieldName": "parseValue"
+              "fieldName": "positionConfiguration"
             },
             {
-              "name": "toValue",
+              "name": "invalid",
               "type": {
-                "text": "(value?: boolean) => string | number | any | undefined"
+                "text": "boolean"
               },
-              "fieldName": "toValue"
+              "default": "false",
+              "fieldName": "invalid"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "debounce",
+              "type": {
+                "text": "number"
+              },
+              "default": "200",
+              "fieldName": "debounce"
+            },
+            {
+              "name": "sync",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "sync"
             }
           ],
           "superclass": {
@@ -5187,22 +5553,22 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionSwitch",
+          "name": "LuzmoEditOptionPositionsNumberField",
           "declaration": {
-            "name": "LuzmoEditOptionSwitch",
-            "module": "src/components/edit-option-switch/edit-option-switch.ts"
+            "name": "LuzmoEditOptionPositionsNumberField",
+            "module": "src/components/edit-option-positions-number-field/edit-option-positions-number-field.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/edit-option-text-field/edit-option-text-field.ts",
+      "path": "src/components/edit-option-radio-button-group/edit-option-radio-button-group.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoEditOptionTextField",
+          "name": "LuzmoEditOptionRadioButtonGroup",
           "members": [
             {
               "kind": "field",
@@ -5210,14 +5576,6 @@
               "type": {
                 "text": "any"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_previousValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
             }
           ],
           "events": [
@@ -5230,42 +5588,48 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "values",
               "type": {
-                "text": "string | undefined"
+                "text": "Record<string, string>"
               },
-              "fieldName": "value"
+              "default": "{}",
+              "fieldName": "values"
             },
             {
-              "name": "invalid",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "invalid"
+              "fieldName": "disabled"
             },
             {
-              "name": "readonly",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "readonly"
+              "fieldName": "value"
             },
             {
-              "name": "placeholder",
+              "name": "default",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "fieldName": "placeholder"
+              "fieldName": "default"
             },
             {
-              "name": "debounce",
+              "name": "parseValue",
               "type": {
-                "text": "number"
+                "text": "(value?: string | number | any) => string | undefined"
               },
-              "default": "200",
-              "fieldName": "debounce"
+              "fieldName": "parseValue"
+            },
+            {
+              "name": "toValue",
+              "type": {
+                "text": "(value?: string) => string | number | any | undefined"
+              },
+              "fieldName": "toValue"
             }
           ],
           "superclass": {
@@ -5277,244 +5641,294 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoEditOptionTextField",
+          "name": "LuzmoEditOptionRadioButtonGroup",
           "declaration": {
-            "name": "LuzmoEditOptionTextField",
-            "module": "src/components/edit-option-text-field/edit-option-text-field.ts"
+            "name": "LuzmoEditOptionRadioButtonGroup",
+            "module": "src/components/edit-option-radio-button-group/edit-option-radio-button-group.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/filter-data-item-picker/filter-data-item-picker.ts",
+      "path": "src/components/edit-option-slider/edit-option-slider.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LuzmoFilterDataItemPicker",
+          "name": "LuzmoEditOptionSlider",
           "members": [
             {
               "kind": "field",
-              "name": "language",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'en'",
-              "description": "The language of the settings interface",
-              "attribute": "language",
+              "default": "0",
+              "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "contentLanguage",
+              "name": "default",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'en'",
-              "description": "The language to use for locale-aware formatting and labels",
-              "attribute": "content-language",
+              "default": "0",
+              "attribute": "default",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasLabel",
+              "name": "min",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Whether the picker has a label",
-              "attribute": "has-label",
+              "default": "0",
+              "attribute": "min",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "max",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "The label for the picker, if hasLabel is true",
-              "attribute": "label",
+              "default": "100",
+              "attribute": "max",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "icons",
+              "name": "step",
               "type": {
-                "text": "'none' | 'only-menu' | 'all' | undefined"
+                "text": "number"
               },
-              "default": "'only-menu'",
-              "description": "Where to show icons",
-              "attribute": "icons",
+              "default": "100",
+              "attribute": "step",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "allowEmpty",
+              "name": "debounce",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item.",
-              "attribute": "allow-empty",
+              "default": "200",
+              "attribute": "debounce",
               "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "option-changed",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "placeholder",
+              "name": "default",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label.",
-              "attribute": "placeholder",
-              "reflects": true
+              "default": "0",
+              "fieldName": "default"
             },
             {
-              "kind": "field",
-              "name": "dataItemId",
+              "name": "min",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The dataItemId to display in the picker. If not provided, the first item will be displayed.",
-              "attribute": "data-item-id",
-              "reflects": true
+              "default": "0",
+              "fieldName": "min"
             },
             {
-              "kind": "field",
-              "name": "loading",
+              "name": "max",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Whether the picker is in loading state",
-              "attribute": "loading",
-              "reflects": true
+              "default": "100",
+              "fieldName": "max"
             },
             {
-              "kind": "field",
-              "name": "invalid",
+              "name": "step",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Whether the picker is invalid - eg. the dataItemId is not found in the datasetsDataItems or query failed to fetch data",
-              "attribute": "invalid",
-              "reflects": true
+              "default": "100",
+              "fieldName": "step"
             },
             {
-              "kind": "field",
-              "name": "datasetsDataItems",
+              "name": "debounce",
               "type": {
-                "text": "{\n    id: string;\n    name: { [key: string]: string };\n    columns: DataItem[];\n    formulas: DataItem[];\n  }[]"
+                "text": "number"
               },
-              "default": "[]",
-              "description": "The datasets and their dataItems to display",
-              "attribute": "datasetsDataItems"
+              "default": "200",
+              "fieldName": "debounce"
             },
             {
-              "kind": "method",
-              "name": "setDataItem",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
+              "name": "parseValue",
+              "type": {
+                "text": "(value?: string | number | any) => number | undefined"
+              },
+              "fieldName": "parseValue"
+            },
             {
-              "name": "data-item-selected",
+              "name": "toValue",
               "type": {
-                "text": "CustomEvent"
+                "text": "(value?: number) => string | number | any | undefined"
               },
-              "description": "Emitted when a data item is selected"
+              "fieldName": "toValue"
             }
           ],
-          "attributes": [
+          "superclass": {
+            "name": "LuzmoEditOptionBase",
+            "module": "/src/components/edit-option-base/edit-option-base"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LuzmoEditOptionSlider",
+          "declaration": {
+            "name": "LuzmoEditOptionSlider",
+            "module": "src/components/edit-option-slider/edit-option-slider.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/edit-option-switch/edit-option-switch.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LuzmoEditOptionSwitch",
+          "members": [
             {
-              "name": "language",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "'en'",
-              "description": "The language of the settings interface",
-              "fieldName": "language"
+              "attribute": "value"
             },
             {
-              "name": "content-language",
+              "kind": "field",
+              "name": "default",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "'en'",
-              "description": "The language to use for locale-aware formatting and labels",
-              "fieldName": "contentLanguage"
-            },
+              "attribute": "default"
+            }
+          ],
+          "events": [
             {
-              "name": "has-label",
+              "name": "option-changed",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the picker has a label",
-              "fieldName": "hasLabel"
-            },
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "name": "label",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The label for the picker, if hasLabel is true",
-              "fieldName": "label"
+              "fieldName": "value"
             },
             {
-              "name": "icons",
+              "name": "default",
               "type": {
-                "text": "'none' | 'only-menu' | 'all' | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "'only-menu'",
-              "description": "Where to show icons",
-              "fieldName": "icons"
+              "fieldName": "default"
             },
             {
-              "name": "allow-empty",
+              "name": "parseValue",
               "type": {
-                "text": "boolean"
+                "text": "(value?: string | number | any) => boolean | undefined"
               },
-              "default": "false",
-              "description": "Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item.",
-              "fieldName": "allowEmpty"
+              "fieldName": "parseValue"
             },
             {
-              "name": "placeholder",
+              "name": "toValue",
               "type": {
-                "text": "string"
+                "text": "(value?: boolean) => string | number | any | undefined"
               },
-              "default": "''",
-              "description": "The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label.",
-              "fieldName": "placeholder"
+              "fieldName": "toValue"
+            }
+          ],
+          "superclass": {
+            "name": "LuzmoEditOptionBase",
+            "module": "/src/components/edit-option-base/edit-option-base"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LuzmoEditOptionSwitch",
+          "declaration": {
+            "name": "LuzmoEditOptionSwitch",
+            "module": "src/components/edit-option-switch/edit-option-switch.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/edit-option-text-field/edit-option-text-field.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LuzmoEditOptionTextField",
+          "members": [
+            {
+              "kind": "field",
+              "name": "debounceTimeout",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "name": "data-item-id",
+              "kind": "field",
+              "name": "_previousValue",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The dataItemId to display in the picker. If not provided, the first item will be displayed.",
-              "fieldName": "dataItemId"
-            },
+              "default": "''"
+            }
+          ],
+          "events": [
             {
-              "name": "loading",
+              "name": "option-changed",
               "type": {
-                "text": "boolean"
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the picker is in loading state",
-              "fieldName": "loading"
+              "fieldName": "value"
             },
             {
               "name": "invalid",
@@ -5522,65 +5936,45 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the picker is invalid - eg. the dataItemId is not found in the datasetsDataItems or query failed to fetch data",
               "fieldName": "invalid"
             },
             {
-              "name": "datasetsDataItems",
-              "type": {
-                "text": "{\n    id: string;\n    name: { [key: string]: string };\n    columns: DataItem[];\n    formulas: DataItem[];\n  }[]"
-              },
-              "default": "[]",
-              "description": "The datasets and their dataItems to display",
-              "fieldName": "datasetsDataItems"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'s' | 'm' | 'l' | 'xl'"
-              },
-              "default": "m",
-              "description": "The size of the element",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
+              "fieldName": "readonly"
             },
             {
-              "name": "autofocus",
+              "name": "placeholder",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
+              "fieldName": "placeholder"
             },
             {
-              "name": "tabIndex",
+              "name": "debounce",
               "type": {
                 "text": "number"
               },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
+              "default": "200",
+              "fieldName": "debounce"
             }
           ],
-          "tagName": "luzmo-filter-data-item-picker",
-          "customElement": true
+          "superclass": {
+            "name": "LuzmoEditOptionBase",
+            "module": "/src/components/edit-option-base/edit-option-base"
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LuzmoFilterDataItemPicker",
+          "name": "LuzmoEditOptionTextField",
           "declaration": {
-            "name": "LuzmoFilterDataItemPicker",
-            "module": "src/components/filter-data-item-picker/filter-data-item-picker.ts"
+            "name": "LuzmoEditOptionTextField",
+            "module": "src/components/edit-option-text-field/edit-option-text-field.ts"
           }
         }
       ]
@@ -5879,127 +6273,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/filter-group/filter-group.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LuzmoFilterGroup",
-          "members": [
-            {
-              "kind": "field",
-              "name": "language",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en'",
-              "description": "The language of the settings interface",
-              "attribute": "language",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "contentLanguage",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en'",
-              "description": "The language to use for locale-aware formatting and labels",
-              "attribute": "content-language",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "filters",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "description": "The filters to display in the group",
-              "attribute": "filters"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "language",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en'",
-              "description": "The language of the settings interface",
-              "fieldName": "language"
-            },
-            {
-              "name": "content-language",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en'",
-              "description": "The language to use for locale-aware formatting and labels",
-              "fieldName": "contentLanguage"
-            },
-            {
-              "name": "filters",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "description": "The filters to display in the group",
-              "fieldName": "filters"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'s' | 'm' | 'l' | 'xl'"
-              },
-              "default": "m",
-              "description": "The size of the element",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
-            }
-          ],
-          "tagName": "luzmo-filter-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LuzmoFilterGroup",
-          "declaration": {
-            "name": "LuzmoFilterGroup",
-            "module": "src/components/filter-group/filter-group.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/filter-item/filter-item.ts",
@@ -6960,6 +7233,16 @@
           ],
           "tagName": "luzmo-filter-value-picker-hierarchy",
           "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "abortController",
+          "default": "new AbortController()"
+        },
+        {
+          "kind": "variable",
+          "name": "promise",
+          "default": "new Promise((resolve, reject) => { const fetchDataPromise = dataBroker.fetchData(query); fetchDataPromise.then(resolve).catch(reject); abortController.signal.addEventListener('abort', () => { console.warn('Request aborted'); reject({ status: 'aborted' }); }); })"
         }
       ],
       "exports": [
@@ -7163,6 +7446,16 @@
           ],
           "tagName": "luzmo-filter-value-picker-numeric",
           "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "abortController",
+          "default": "new AbortController()"
+        },
+        {
+          "kind": "variable",
+          "name": "promise",
+          "default": "new Promise((resolve, reject) => { const fetchDataPromise = dataBroker.fetchData(query); fetchDataPromise.then(resolve).catch(reject); abortController.signal.addEventListener('abort', () => { console.warn('Request aborted'); reject({ status: 'aborted' }); }); })"
         }
       ],
       "exports": [
@@ -7678,7 +7971,7 @@
               "kind": "field",
               "name": "itemType",
               "type": {
-                "text": "string | undefined"
+                "text": "VizItemType | undefined"
               },
               "description": "The type of the item",
               "attribute": "item-type",
@@ -7688,7 +7981,7 @@
               "kind": "field",
               "name": "slotName",
               "type": {
-                "text": "string | undefined"
+                "text": "SlotName | undefined"
               },
               "description": "The name of the slot",
               "attribute": "slot-name",
@@ -7775,7 +8068,7 @@
                 "text": "'single' | 'multiple'"
               },
               "default": "'multiple'",
-              "description": "Whether the picker allows multiple selections. Only relevant if the slot configuration allows multiple data items.",
+              "description": "Whether the picker allows single or multiple selections. Only relevant if the slot configuration allows multiple data items.",
               "attribute": "selects",
               "reflects": true
             },
@@ -7783,9 +8076,9 @@
               "kind": "field",
               "name": "icons",
               "type": {
-                "text": "'none' | 'only-menu' | 'all' | undefined"
+                "text": "'none' | 'menu-only' | 'all' | undefined"
               },
-              "default": "'only-menu'",
+              "default": "'menu-only'",
               "description": "Where to show icons",
               "attribute": "icons",
               "reflects": true
@@ -7828,6 +8121,7 @@
                 "text": "boolean"
               },
               "default": "true",
+              "description": "Whether to hide the delete button",
               "attribute": "hide-delete",
               "reflects": true
             },
@@ -7837,17 +8131,20 @@
               "type": {
                 "text": "boolean | undefined"
               },
+              "description": "Whether to hide the configuration button",
+              "default": "false",
               "attribute": "hide-configuration",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "stretch",
+              "name": "hideClear",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "stretch",
+              "description": "Whether to hide the clear button op a select",
+              "attribute": "hide-clear",
               "reflects": true
             }
           ],
@@ -7858,10 +8155,20 @@
             }
           ],
           "attributes": [
+            {
+              "name": "search",
+              "type": {
+                "text": "'on' | 'off' | 'auto' | undefined"
+              },
+              "default": "'auto'",
+              "fieldName": "search",
+              "description": "Whether the search input is visible.",
+              "attribute": "search"
+            },
             {
               "name": "item-type",
               "type": {
-                "text": "string | undefined"
+                "text": "VizItemType | undefined"
               },
               "description": "The type of the item",
               "fieldName": "itemType"
@@ -7869,7 +8176,7 @@
             {
               "name": "slot-name",
               "type": {
-                "text": "string | undefined"
+                "text": "SlotName | undefined"
               },
               "description": "The name of the slot",
               "fieldName": "slotName"
@@ -7942,15 +8249,15 @@
                 "text": "'single' | 'multiple'"
               },
               "default": "'multiple'",
-              "description": "Whether the picker allows multiple selections. Only relevant if the slot configuration allows multiple data items.",
+              "description": "Whether the picker allows single or multiple selections. Only relevant if the slot configuration allows multiple data items.",
               "fieldName": "selects"
             },
             {
               "name": "icons",
               "type": {
-                "text": "'none' | 'only-menu' | 'all' | undefined"
+                "text": "'none' | 'menu-only' | 'all' | undefined"
               },
-              "default": "'only-menu'",
+              "default": "'menu-only'",
               "description": "Where to show icons",
               "fieldName": "icons"
             },
@@ -7986,6 +8293,7 @@
                 "text": "boolean"
               },
               "default": "true",
+              "description": "Whether to hide the delete button",
               "fieldName": "hideDelete"
             },
             {
@@ -7993,15 +8301,18 @@
               "type": {
                 "text": "boolean | undefined"
               },
+              "description": "Whether to hide the configuration button",
+              "default": "false",
               "fieldName": "hideConfiguration"
             },
             {
-              "name": "stretch",
+              "name": "hide-clear",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "stretch"
+              "description": "Whether to hide the clear button op a select",
+              "fieldName": "hideClear"
             },
             {
               "name": "size",