@limetech/lime-elements 38.17.1 → 38.18.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [38.18.0](https://github.com/Lundalogik/lime-elements/compare/v38.17.1...v38.18.0) (2025-06-26)
+
+
+### Features
+
+
+* **color:** add autocomplete for defined colors ([7872ad8](https://github.com/Lundalogik/lime-elements/commit/7872ad870e0eeb122b0d4945d417f39f2101248e))
+
 ## [38.17.1](https://github.com/Lundalogik/lime-elements/compare/v38.17.0...v38.17.1) (2025-06-26)
 
 

package/dist/collection/components/chart/chart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.types.js","sourceRoot":"","sources":["../../../src/components/chart/chart.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Chart component props.\n * @beta\n */\nexport interface ChartItem<\n    T extends number | [number, number] = number | [number, number],\n> {\n    /**\n     * Label displayed for the item.\n     */\n    text: string;\n\n    /**\n     * Value of the item.\n     */\n    value: T;\n\n    /**\n     * Formatted value of the item\n     */\n    formattedValue?: string;\n\n    /**\n     * Color of the item in the chart. Defaults to a shade of grey.\n     * It is recommended to use distinct colors for each item,\n     * and make sure there is enough contrast between colors of adjacent items.\n     */\n    color?: string;\n\n    /**\n     * When set to `true`, the item will become clickable,\n     * which provides visual and accessible feedback when hovered, or focused,\n     * and also results in emitting an event when clicked.\n     */\n    clickable?: boolean;\n}\n"]}
+{"version":3,"file":"chart.types.js","sourceRoot":"","sources":["../../../src/components/chart/chart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Color } from '../../global/shared-types/color.types';\n\n/**\n * Chart component props.\n * @beta\n */\nexport interface ChartItem<\n    T extends number | [number, number] = number | [number, number],\n> {\n    /**\n     * Label displayed for the item.\n     */\n    text: string;\n\n    /**\n     * Value of the item.\n     */\n    value: T;\n\n    /**\n     * Formatted value of the item\n     */\n    formattedValue?: string;\n\n    /**\n     * Color of the item in the chart. Defaults to a shade of grey.\n     * It is recommended to use distinct colors for each item,\n     * and make sure there is enough contrast between colors of adjacent items.\n     */\n    color?: Color;\n\n    /**\n     * When set to `true`, the item will become clickable,\n     * which provides visual and accessible feedback when hovered, or focused,\n     * and also results in emitting an event when clicked.\n     */\n    clickable?: boolean;\n}\n"]}

package/dist/collection/components/chip-set/chip.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.types.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../list/list-item.types';\n\n/**\n * @public\n */\nexport interface Chip<T = any> {\n    /**\n     * ID of the chip. Must be unique.\n     */\n    id: number | string;\n\n    /**\n     * Text to display inside the chip.\n     */\n    text: string;\n\n    /**\n     * Name of the icon to use. Not valid for `filter`.\n     */\n    icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    image?: Image;\n\n    /**\n     * Color of the icon. Overrides `--icon-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconFillColor?: string;\n\n    /**\n     * `title` attribute of the icon\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    title: string,\n     * },\n     * ```\n     */\n    iconTitle?: string;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    backgroundColor: string,\n     * },\n     * ```\n     */\n    iconBackgroundColor?: string;\n\n    /**\n     * Whether the chip should be removable. Not valid for `choice`.\n     */\n    removable?: boolean;\n\n    /**\n     * Whether the chip is selected. Only valid for `choice` and `filter`.\n     */\n    selected?: boolean;\n\n    /**\n     * Value of the chip.\n     */\n    value?: T;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: number;\n\n    /**\n     * If supplied, the chip will render a link, using the supplied href.\n     */\n    href?: string;\n\n    /**\n     * List of the items to display as in a menu, on the chip.\n     */\n    menuItems?: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Set to `true` to put the chip in the `loading` state, and render an\n     * indeterminate progress indicator inside the chip.\n     */\n    loading?: boolean;\n}\n\n/**\n * This type is used to determine the visual style and behavior of a Chip component.\n *\n * @beta\n */\nexport type ChipType = 'default' | 'filter';\n"]}
+{"version":3,"file":"chip.types.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport { Color } from '../../global/shared-types/color.types';\n\n/**\n * @public\n */\nexport interface Chip<T = any> {\n    /**\n     * ID of the chip. Must be unique.\n     */\n    id: number | string;\n\n    /**\n     * Text to display inside the chip.\n     */\n    text: string;\n\n    /**\n     * Name of the icon to use. Not valid for `filter`.\n     */\n    icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    image?: Image;\n\n    /**\n     * Color of the icon. Overrides `--icon-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconFillColor?: Color;\n\n    /**\n     * `title` attribute of the icon\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    title: string,\n     * },\n     * ```\n     */\n    iconTitle?: string;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    backgroundColor: string,\n     * },\n     * ```\n     */\n    iconBackgroundColor?: Color;\n\n    /**\n     * Whether the chip should be removable. Not valid for `choice`.\n     */\n    removable?: boolean;\n\n    /**\n     * Whether the chip is selected. Only valid for `choice` and `filter`.\n     */\n    selected?: boolean;\n\n    /**\n     * Value of the chip.\n     */\n    value?: T;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: number;\n\n    /**\n     * If supplied, the chip will render a link, using the supplied href.\n     */\n    href?: string;\n\n    /**\n     * List of the items to display as in a menu, on the chip.\n     */\n    menuItems?: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Set to `true` to put the chip in the `loading` state, and render an\n     * indeterminate progress indicator inside the chip.\n     */\n    loading?: boolean;\n}\n\n/**\n * This type is used to determine the visual style and behavior of a Chip component.\n *\n * @beta\n */\nexport type ChipType = 'default' | 'filter';\n"]}

package/dist/collection/components/list/list-item.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.types.js","sourceRoot":"","sources":["../../../src/components/list/list-item.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListSeparator } from '../../global/shared-types/separator.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { Image } from '../../global/shared-types/image.types';\n\nexport { ListSeparator };\n\n/**\n * List item.\n * @public\n */\nexport interface ListItem<T = any> {\n    /**\n     * Text to display in the list item.\n     */\n    text: string;\n\n    /**\n     * Additional supporting text to display in the list item.\n     */\n    secondaryText?: string;\n\n    /**\n     * True if the list item should be disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n\n    /**\n     * True if the list item should be selected.\n     */\n    selected?: boolean;\n\n    /**\n     * Value of the list item.\n     */\n    value?: T;\n\n    /**\n     * List of actions to display as a menu at the end of the item.\n     */\n    actions?: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Component used to render the list item.\n     */\n    primaryComponent?: ListComponent;\n\n    /**\n     * A picture to show on the list item.\n     */\n    image?: Image;\n}\n\n/**\n * Component used to render a list item.\n * @public\n */\nexport interface ListComponent {\n    /**\n     * The name of the custom component.\n     */\n    name: string;\n\n    /**\n     * Properties to send to the custom component.\n     */\n    props?: Record<string, any>;\n}\n"]}
+{"version":3,"file":"list-item.types.js","sourceRoot":"","sources":["../../../src/components/list/list-item.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListSeparator } from '../../global/shared-types/separator.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Color } from '../../global/shared-types/color.types';\n\nexport { ListSeparator };\n\n/**\n * List item.\n * @public\n */\nexport interface ListItem<T = any> {\n    /**\n     * Text to display in the list item.\n     */\n    text: string;\n\n    /**\n     * Additional supporting text to display in the list item.\n     */\n    secondaryText?: string;\n\n    /**\n     * True if the list item should be disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: Color;\n\n    /**\n     * True if the list item should be selected.\n     */\n    selected?: boolean;\n\n    /**\n     * Value of the list item.\n     */\n    value?: T;\n\n    /**\n     * List of actions to display as a menu at the end of the item.\n     */\n    actions?: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Component used to render the list item.\n     */\n    primaryComponent?: ListComponent;\n\n    /**\n     * A picture to show on the list item.\n     */\n    image?: Image;\n}\n\n/**\n * Component used to render a list item.\n * @public\n */\nexport interface ListComponent {\n    /**\n     * The name of the custom component.\n     */\n    name: string;\n\n    /**\n     * Properties to send to the custom component.\n     */\n    props?: Record<string, any>;\n}\n"]}

package/dist/collection/components/menu/menu.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.types.js","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListSeparator } from '../../global/shared-types/separator.types';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * The direction in which the menu should open.\n * - `left-start`: Menu opens to the left, aligned with the start of the trigger.\n * - `left`: Menu opens to the left, aligned with the center of the trigger.\n * - `left-end`: Menu opens to the left, aligned with the end of the trigger.\n * - `right-start`: Menu opens to the right, aligned with the start of the trigger.\n * - `right`: Menu opens to the right, aligned with the center of the trigger.\n * - `right-end`: Menu opens to the right, aligned with the end of the trigger.\n * - `top-start`: Menu opens to the top, aligned with the start of the trigger.\n * - `top`: Menu opens to the top, aligned with the center of the trigger.\n * - `top-end`: Menu opens to the top, aligned with the end of the trigger.\n * - `bottom-start`: Menu opens to the bottom, aligned with the start of the trigger.\n * - `bottom`: Menu opens to the bottom, aligned with the center of the trigger.\n * - `bottom-end`: Menu opens to the bottom, aligned with the end of the trigger.\n * @public\n */\nexport type OpenDirection =\n    | 'left-start'\n    | 'left'\n    | 'left-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom'\n    | 'bottom-end';\n\n/**\n * Any element in the UI can be configured to open a menu.\n * By default width of menu's dropdown is based on the items in the dropdown.\n * However, size of the dropdown menu that opens can be controlled\n * based on design requirements.\n * - `inherit-from-items`: This is the default layout in which the widest item\n * in the menu list sets the width of the dropdown menu.\n * - `inherit-from-trigger`: Width of the dropdown menu will as wide as the\n * width of the element that triggers the menu.\n * - `inherit-from-menu`: Width of the dropdown menu will be as wide as the\n * width of the `limel-menu` element itself. Useful when a menu surface needs\n * to be opened programmatically, without a visible UI element.\n * @public\n */\nexport type SurfaceWidth =\n    | 'inherit-from-items'\n    | 'inherit-from-trigger'\n    | 'inherit-from-menu';\n\n/**\n * Menu item.\n * @public\n */\nexport interface MenuItem<T = any> {\n    /**\n     * The additional supporting text is used for shortcut commands and displayed in the menu item.\n     */\n    commandText?: string;\n\n    /**\n     * Text to display in the menu item.\n     */\n    text: string;\n\n    /**\n     * Additional supporting text to display in the menu item.\n     */\n    secondaryText?: string;\n\n    /**\n     * True if the menu item should be disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n\n    /**\n     * True if the menu item should be selected.\n     */\n    selected?: boolean;\n\n    /**\n     * If specified, will display a notification badge on the buttons in the dock.\n     */\n    badge?: number | string;\n\n    /**\n     * Value of the menu item.\n     */\n    value?: T;\n\n    /**\n     * A way of defining a sub-menu for an item.\n     *\n     * Either set it to an array of `MenuItem`:s or use lazy loading by setting\n     * it to a function of type `MenuLoader`.\n     * If `myMenuItem.items` is undefined or null, `myMenuItem` will be\n     * considered an item without a sub-menu.\n     */\n    items?: Array<MenuItem<T> | ListSeparator> | MenuLoader;\n\n    /**\n     * :::warning Internal Use Only\n     * This property is for internal use only. We need it for now, but want to\n     * find a better implementation of the functionality it currently enables.\n     * If and when we do so, this property will be removed without prior\n     * notice. If you use it, your code _will_ break in the future.\n     * :::\n     *\n     * @internal\n     */\n    parentItem?: MenuItem;\n}\n\n/**\n * A search function that takes a search-string as an argument, and returns\n * a promise that will eventually be resolved with an array of `MenuItem`:s.\n *\n * @param query - A search query. What the user has written\n * in the input field of a limel-menu.\n * @returns The search result.\n * @public\n */\nexport type MenuSearcher = (\n    query: string,\n) => Promise<Array<MenuItem | ListSeparator>>;\n\n/**\n * A loader function that takes a `MenuItem` as an argument, and returns\n * a promise that will eventually be resolved with an array of `MenuItem`:s,\n * that is the sub-menu of the given item.\n *\n * @param item - The parent item to load the sub-menu for.\n * @returns The sub-menu's items of the given item.\n * @public\n */\nexport type MenuLoader = (\n    item: MenuItem,\n) => Promise<Array<MenuItem | ListSeparator>>;\n"]}
+{"version":3,"file":"menu.types.js","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListSeparator } from '../../global/shared-types/separator.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Color } from '../../global/shared-types/color.types';\n\n/**\n * The direction in which the menu should open.\n * - `left-start`: Menu opens to the left, aligned with the start of the trigger.\n * - `left`: Menu opens to the left, aligned with the center of the trigger.\n * - `left-end`: Menu opens to the left, aligned with the end of the trigger.\n * - `right-start`: Menu opens to the right, aligned with the start of the trigger.\n * - `right`: Menu opens to the right, aligned with the center of the trigger.\n * - `right-end`: Menu opens to the right, aligned with the end of the trigger.\n * - `top-start`: Menu opens to the top, aligned with the start of the trigger.\n * - `top`: Menu opens to the top, aligned with the center of the trigger.\n * - `top-end`: Menu opens to the top, aligned with the end of the trigger.\n * - `bottom-start`: Menu opens to the bottom, aligned with the start of the trigger.\n * - `bottom`: Menu opens to the bottom, aligned with the center of the trigger.\n * - `bottom-end`: Menu opens to the bottom, aligned with the end of the trigger.\n * @public\n */\nexport type OpenDirection =\n    | 'left-start'\n    | 'left'\n    | 'left-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom'\n    | 'bottom-end';\n\n/**\n * Any element in the UI can be configured to open a menu.\n * By default width of menu's dropdown is based on the items in the dropdown.\n * However, size of the dropdown menu that opens can be controlled\n * based on design requirements.\n * - `inherit-from-items`: This is the default layout in which the widest item\n * in the menu list sets the width of the dropdown menu.\n * - `inherit-from-trigger`: Width of the dropdown menu will as wide as the\n * width of the element that triggers the menu.\n * - `inherit-from-menu`: Width of the dropdown menu will be as wide as the\n * width of the `limel-menu` element itself. Useful when a menu surface needs\n * to be opened programmatically, without a visible UI element.\n * @public\n */\nexport type SurfaceWidth =\n    | 'inherit-from-items'\n    | 'inherit-from-trigger'\n    | 'inherit-from-menu';\n\n/**\n * Menu item.\n * @public\n */\nexport interface MenuItem<T = any> {\n    /**\n     * The additional supporting text is used for shortcut commands and displayed in the menu item.\n     */\n    commandText?: string;\n\n    /**\n     * Text to display in the menu item.\n     */\n    text: string;\n\n    /**\n     * Additional supporting text to display in the menu item.\n     */\n    secondaryText?: string;\n\n    /**\n     * True if the menu item should be disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: Color;\n\n    /**\n     * True if the menu item should be selected.\n     */\n    selected?: boolean;\n\n    /**\n     * If specified, will display a notification badge on the buttons in the dock.\n     */\n    badge?: number | string;\n\n    /**\n     * Value of the menu item.\n     */\n    value?: T;\n\n    /**\n     * A way of defining a sub-menu for an item.\n     *\n     * Either set it to an array of `MenuItem`:s or use lazy loading by setting\n     * it to a function of type `MenuLoader`.\n     * If `myMenuItem.items` is undefined or null, `myMenuItem` will be\n     * considered an item without a sub-menu.\n     */\n    items?: Array<MenuItem<T> | ListSeparator> | MenuLoader;\n\n    /**\n     * :::warning Internal Use Only\n     * This property is for internal use only. We need it for now, but want to\n     * find a better implementation of the functionality it currently enables.\n     * If and when we do so, this property will be removed without prior\n     * notice. If you use it, your code _will_ break in the future.\n     * :::\n     *\n     * @internal\n     */\n    parentItem?: MenuItem;\n}\n\n/**\n * A search function that takes a search-string as an argument, and returns\n * a promise that will eventually be resolved with an array of `MenuItem`:s.\n *\n * @param query - A search query. What the user has written\n * in the input field of a limel-menu.\n * @returns The search result.\n * @public\n */\nexport type MenuSearcher = (\n    query: string,\n) => Promise<Array<MenuItem | ListSeparator>>;\n\n/**\n * A loader function that takes a `MenuItem` as an argument, and returns\n * a promise that will eventually be resolved with an array of `MenuItem`:s,\n * that is the sub-menu of the given item.\n *\n * @param item - The parent item to load the sub-menu for.\n * @returns The sub-menu's items of the given item.\n * @public\n */\nexport type MenuLoader = (\n    item: MenuItem,\n) => Promise<Array<MenuItem | ListSeparator>>;\n"]}

package/dist/collection/components/progress-flow/progress-flow.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-flow.types.js","sourceRoot":"","sources":["../../../src/components/progress-flow/progress-flow.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListItem } from '../list/list-item.types';\n\n/**\n * A step in a progress flow.\n * @public\n */\nexport interface FlowItem extends ListItem {\n    /**\n     * Determines whether a step should be a part of the flow,\n     * or should be an independent step visually located on the side.\n     */\n    isOffProgress?: boolean;\n\n    /**\n     * Background color of selected step.\n     */\n    selectedColor?: string;\n\n    /**\n     * Background color of the step, when it is passed.\n     */\n    passedColor?: string;\n\n    /**\n     * Fill color of the icon on the step,\n     * when it is neither selected nor passed.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n}\n"]}
+{"version":3,"file":"progress-flow.types.js","sourceRoot":"","sources":["../../../src/components/progress-flow/progress-flow.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Color } from '../../global/shared-types/color.types';\nimport { ListItem } from '../list/list-item.types';\n\n/**\n * A step in a progress flow.\n * @public\n */\nexport interface FlowItem extends ListItem {\n    /**\n     * Determines whether a step should be a part of the flow,\n     * or should be an independent step visually located on the side.\n     */\n    isOffProgress?: boolean;\n\n    /**\n     * Background color of selected step.\n     */\n    selectedColor?: Color;\n\n    /**\n     * Background color of the step, when it is passed.\n     */\n    passedColor?: Color;\n\n    /**\n     * Fill color of the icon on the step,\n     * when it is neither selected nor passed.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: Color;\n}\n"]}

package/dist/collection/components/select/option.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.types.js","sourceRoot":"","sources":["../../../src/components/select/option.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\n/**\n * Describes an option for limel-select.\n * @public\n */\nexport interface Option<T extends string = string> {\n    /**\n     * The name of the option as shown to the user.\n     */\n    text: string;\n\n    /**\n     * Additional supporting text to display in under the option text.\n     */\n    secondaryText?: string;\n\n    /**\n     * The unique value of the option. Should always be the same for any given\n     * option, regardless of localization. The type `T` defaults to `string`,\n     * but can be set to any type that extends `string` (using `Option<type>`),\n     * for example an enum of specific strings.\n     *\n     * Note the value of this property *must* be a string!\n     * If the value you wish to use is, for example, numeric, convert it to a\n     * string before sending it to limel-select. Using numeric values does work\n     * in many desktop browsers, but breaks the select completely on some\n     * iOS devices.\n     */\n    value: T;\n\n    /**\n     * Set to `true` to make this option disabled and not possible to select.\n     */\n    disabled?: boolean;\n\n    /**\n     * Displays an icon beside the name of the option.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Adds a color to the icon.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n}\n"]}
+{"version":3,"file":"option.types.js","sourceRoot":"","sources":["../../../src/components/select/option.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Color } from '../../global/shared-types/color.types';\nimport { Icon } from '../../global/shared-types/icon.types';\n/**\n * Describes an option for limel-select.\n * @public\n */\nexport interface Option<T extends string = string> {\n    /**\n     * The name of the option as shown to the user.\n     */\n    text: string;\n\n    /**\n     * Additional supporting text to display in under the option text.\n     */\n    secondaryText?: string;\n\n    /**\n     * The unique value of the option. Should always be the same for any given\n     * option, regardless of localization. The type `T` defaults to `string`,\n     * but can be set to any type that extends `string` (using `Option<type>`),\n     * for example an enum of specific strings.\n     *\n     * Note the value of this property *must* be a string!\n     * If the value you wish to use is, for example, numeric, convert it to a\n     * string before sending it to limel-select. Using numeric values does work\n     * in many desktop browsers, but breaks the select completely on some\n     * iOS devices.\n     */\n    value: T;\n\n    /**\n     * Set to `true` to make this option disabled and not possible to select.\n     */\n    disabled?: boolean;\n\n    /**\n     * Displays an icon beside the name of the option.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Adds a color to the icon.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: Color;\n}\n"]}

package/dist/collection/components/tab-bar/tab.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.types.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * Tab interface.\n * @public\n */\nexport interface Tab {\n    /**\n     * Id of the tab. Must be unique.\n     */\n    id: number | string;\n\n    /**\n     * Text to display inside the tab.\n     */\n    text?: string;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * True if the tab should be selected.\n     */\n    active?: boolean;\n\n    /**\n     * Color of the icon.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n\n    /**\n     * Shows a badge within the tab with a specified label\n     */\n    badge?: number | string;\n}\n"]}
+{"version":3,"file":"tab.types.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Color } from '../../global/shared-types/color.types';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * Tab interface.\n * @public\n */\nexport interface Tab {\n    /**\n     * Id of the tab. Must be unique.\n     */\n    id: number | string;\n\n    /**\n     * Text to display inside the tab.\n     */\n    text?: string;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * True if the tab should be selected.\n     */\n    active?: boolean;\n\n    /**\n     * Color of the icon.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: Color;\n\n    /**\n     * Shows a badge within the tab with a specified label\n     */\n    badge?: number | string;\n}\n"]}

package/dist/collection/global/shared-types/color.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color.types.js.map

package/dist/collection/global/shared-types/color.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../src/global/shared-types/color.types.ts"],"names":[],"mappings":"AAAA,qCAAqC","sourcesContent":["/* eslint-disable no-magic-numbers */\n\n/**\n * Defined colors and any color that can be used.\n *\n * Will auto-complete to any defined color from Lime Elements, while still\n * allowing any valid CSS color value to be used.\n *\n * @public\n */\nexport type Color =\n    | `rgb(var(${_Internal.HueColor | _Internal.BlackColor | _Internal.WhiteColor | _Internal.ContrastColor | _Internal.BrandColor}))`\n    // eslint-disable-next-line sonarjs/no-useless-intersection\n    | (string & {});\n\n/**\n * @internal\n */\nexport namespace _Internal {\n    /**\n     * @internal\n     */\n    export type Hue =\n        | 'red'\n        | 'pink'\n        | 'magenta'\n        | 'purple'\n        | 'violet'\n        | 'indigo'\n        | 'blue'\n        | 'cyan'\n        | 'teal'\n        | 'green'\n        | 'lime'\n        | 'yellow'\n        | 'amber'\n        | 'orange'\n        | 'coral'\n        | 'brown'\n        | 'grey'\n        | 'glaucous';\n\n    /**\n     * @internal\n     */\n    export type Brightness =\n        | 'lighter'\n        | 'light'\n        | 'default'\n        | 'dark'\n        | 'darker';\n\n    /**\n     * @internal\n     */\n    export type HueColor = `--color-${Hue}-${Brightness}`;\n\n    /**\n     * @internal\n     */\n    export type BlackColor = '--color-black';\n\n    /**\n     * @internal\n     */\n    export type WhiteColor = '--color-white';\n\n    /**\n     * @internal\n     */\n    export type ContrastValue =\n        | 100\n        | 200\n        | 300\n        | 400\n        | 500\n        | 600\n        | 700\n        | 800\n        | 900\n        | 1000\n        | 1100\n        | 1200\n        | 1300\n        | 1400\n        | 1500\n        | 1600\n        | 1700;\n\n    /**\n     * @internal\n     */\n    export type ContrastColor = `--contrast-${ContrastValue}`;\n\n    /**\n     * @internal\n     */\n    export type BrandHue =\n        | 'lime-green'\n        | 'ocean-teal'\n        | 'aqua'\n        | 'bubblegum'\n        | 'sunny-orange'\n        | 'cool-grey';\n\n    /**\n     * @internal\n     */\n    export type BrandColor = `--lime-brand-color-${BrandHue}`;\n}\n"]}

package/dist/collection/global/shared-types/file.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.types.js","sourceRoot":"","sources":["../../../src/global/shared-types/file.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * @public\n */\nexport interface FileInfo {\n    /**\n     * ID of the file. Must be unique.\n     */\n    id: number | string;\n\n    /**\n     * Name of file.\n     */\n    filename: string;\n\n    /**\n     * Extension of file.\n     */\n    extension?: string;\n\n    /**\n     * Content type of file.\n     */\n    contentType?: string;\n\n    /**\n     * Date of last modification.\n     */\n    lastModified?: Date;\n\n    /**\n     * Size of file.\n     */\n    size?: number;\n\n    /**\n     * the file content\n     */\n    fileContent?: File;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Icon color. Overrides `--icon-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```ts\n     * icon: {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```ts\n     * icon: {\n     *    name: string,\n     *    backgroundColor: string,\n     * },\n     * ```\n     */\n    iconBackgroundColor?: string;\n\n    /**\n     * URL where the file can be downloaded. Note that this is optional. If the\n     * file cannot be directly accessed via a unique url, this property should\n     * be left undefined or set to `null`.\n     */\n    href?: string;\n}\n"]}
+{"version":3,"file":"file.types.js","sourceRoot":"","sources":["../../../src/global/shared-types/file.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\nimport { Color } from './color.types';\n\n/**\n * @public\n */\nexport interface FileInfo {\n    /**\n     * ID of the file. Must be unique.\n     */\n    id: number | string;\n\n    /**\n     * Name of file.\n     */\n    filename: string;\n\n    /**\n     * Extension of file.\n     */\n    extension?: string;\n\n    /**\n     * Content type of file.\n     */\n    contentType?: string;\n\n    /**\n     * Date of last modification.\n     */\n    lastModified?: Date;\n\n    /**\n     * Size of file.\n     */\n    size?: number;\n\n    /**\n     * the file content\n     */\n    fileContent?: File;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Icon color. Overrides `--icon-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```ts\n     * icon: {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: Color;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     *\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```ts\n     * icon: {\n     *    name: string,\n     *    backgroundColor: string,\n     * },\n     * ```\n     */\n    iconBackgroundColor?: Color;\n\n    /**\n     * URL where the file can be downloaded. Note that this is optional. If the\n     * file cannot be directly accessed via a unique url, this property should\n     * be left undefined or set to `null`.\n     */\n    href?: string;\n}\n"]}

package/dist/collection/global/shared-types/icon.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.types.js","sourceRoot":"","sources":["../../../src/global/shared-types/icon.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * This interface is used to specify which icon to use in many components,\n * along with related properties, like color.\n * @public\n */\nexport interface Icon {\n    /**\n     * Name of the icon, refers to the icon's filename in lime-icons8 repository.\n     */\n    name: string;\n\n    /**\n     * Color of the icon.\n     */\n    color?: string;\n\n    /**\n     * Background color of the icon.\n     */\n    backgroundColor?: string;\n\n    /**\n     * Used primarily to improve accessibility for users who\n     * take advantage of assistive technologies; but also\n     * to clarify further what an icon tries to resemble\n     * for sighted users.\n     *\n     * Depending on the component which is using the `Icon` interface,\n     * the `title` might be used as a `title` attribute on the\n     * rendered icon element, as an `aria-label` attribute, or as a\n     * `label` in a tooltip associated with the icon. Documentations\n     * about the accessibility of the component should provide more\n     * information about how the `title` is used.\n     */\n    title?: string;\n}\n"]}
+{"version":3,"file":"icon.types.js","sourceRoot":"","sources":["../../../src/global/shared-types/icon.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Color } from './color.types';\n\n/**\n * This interface is used to specify which icon to use in many components,\n * along with related properties, like color.\n * @public\n */\nexport interface Icon {\n    /**\n     * Name of the icon, refers to the icon's filename in lime-icons8 repository.\n     */\n    name: string;\n\n    /**\n     * Color of the icon.\n     */\n    color?: Color;\n\n    /**\n     * Background color of the icon.\n     */\n    backgroundColor?: Color;\n\n    /**\n     * Used primarily to improve accessibility for users who\n     * take advantage of assistive technologies; but also\n     * to clarify further what an icon tries to resemble\n     * for sighted users.\n     *\n     * Depending on the component which is using the `Icon` interface,\n     * the `title` might be used as a `title` attribute on the\n     * rendered icon element, as an `aria-label` attribute, or as a\n     * `label` in a tooltip associated with the icon. Documentations\n     * about the accessibility of the component should provide more\n     * information about how the `title` is used.\n     */\n    title?: string;\n}\n"]}

package/dist/collection/interface.js

@@ -30,5 +30,6 @@ export * from './components/table/table.types';
 export * from './global/shared-types/separator.types';
 export * from './global/shared-types/icon.types';
 export * from './global/shared-types/image.types';
+export * from './global/shared-types/color.types';
 export * from './components/text-editor/text-editor.types';
 //# sourceMappingURL=interface.js.map

package/dist/collection/interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"interface.js","sourceRoot":"","sources":["../src/interface.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wDAAwD,CAAC;AACvE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kDAAkD,CAAC;AACjE,cAAc,4CAA4C,CAAC;AAC3D,OAAO,EAaH,cAAc,GAIjB,MAAM,8BAA8B,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAK3D,cAAc,wCAAwC,CAAC;AACvD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,4CAA4C,CAAC","sourcesContent":["export * from './components/action-bar/action-bar.types';\nexport * from './components/breadcrumbs/breadcrumbs.types';\nexport * from './components/button/button.types';\nexport * from './components/callout/callout.types';\nexport * from './components/chip-set/chip.types';\nexport * from './components/circular-progress/circular-progress.types';\nexport * from './components/code-editor/code-editor.types';\nexport * from './components/collapsible-section/action';\nexport * from './components/date-picker/date.types';\nexport * from './components/dialog/dialog.types';\nexport * from './components/dock/dock.types';\nexport * from './global/shared-types/file.types';\nexport * from './components/flex-container/flex-container.types';\nexport * from './global/shared-types/custom-element.types';\nexport {\n    EventEmitter,\n    ValidationStatus,\n    FormError,\n    ValidationError,\n    FormComponent,\n    FormInfo,\n    LimeSchemaOptions,\n    LimeLayoutOptions,\n    FormComponentOptions,\n    FormLayoutOptions,\n    GridLayoutOptions,\n    RowLayoutOptions,\n    FormLayoutType,\n    ReplaceObjectType,\n    FormSchemaArrayItem,\n    FormSubKeySchema,\n} from './components/form/form.types';\nexport * from './components/help/help.types';\nexport * from './components/icon/icon.types';\nexport * from './components/info-tile/info-tile.types';\nexport * from './components/input-field/input-field.types';\nexport {\n    ListComponent,\n    ListSeparator,\n} from './components/list/list-item.types';\nexport * from './components/dynamic-label/label.types';\nexport * from './components/list/list.types';\nexport * from './components/menu/menu.types';\nexport * from './components/picker/actions.types';\nexport * from './components/picker/searcher.types';\nexport * from './components/progress-flow/progress-flow.types';\nexport * from './components/select/option.types';\nexport * from './components/spinner/spinner.types';\nexport * from './components/tab-panel/tab-panel.types';\nexport * from './components/table/table.types';\nexport * from './global/shared-types/separator.types';\nexport * from './global/shared-types/icon.types';\nexport * from './global/shared-types/image.types';\nexport * from './components/text-editor/text-editor.types';\n"]}
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../src/interface.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wDAAwD,CAAC;AACvE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kDAAkD,CAAC;AACjE,cAAc,4CAA4C,CAAC;AAC3D,OAAO,EAaH,cAAc,GAIjB,MAAM,8BAA8B,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAK3D,cAAc,wCAAwC,CAAC;AACvD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,4CAA4C,CAAC","sourcesContent":["export * from './components/action-bar/action-bar.types';\nexport * from './components/breadcrumbs/breadcrumbs.types';\nexport * from './components/button/button.types';\nexport * from './components/callout/callout.types';\nexport * from './components/chip-set/chip.types';\nexport * from './components/circular-progress/circular-progress.types';\nexport * from './components/code-editor/code-editor.types';\nexport * from './components/collapsible-section/action';\nexport * from './components/date-picker/date.types';\nexport * from './components/dialog/dialog.types';\nexport * from './components/dock/dock.types';\nexport * from './global/shared-types/file.types';\nexport * from './components/flex-container/flex-container.types';\nexport * from './global/shared-types/custom-element.types';\nexport {\n    EventEmitter,\n    ValidationStatus,\n    FormError,\n    ValidationError,\n    FormComponent,\n    FormInfo,\n    LimeSchemaOptions,\n    LimeLayoutOptions,\n    FormComponentOptions,\n    FormLayoutOptions,\n    GridLayoutOptions,\n    RowLayoutOptions,\n    FormLayoutType,\n    ReplaceObjectType,\n    FormSchemaArrayItem,\n    FormSubKeySchema,\n} from './components/form/form.types';\nexport * from './components/help/help.types';\nexport * from './components/icon/icon.types';\nexport * from './components/info-tile/info-tile.types';\nexport * from './components/input-field/input-field.types';\nexport {\n    ListComponent,\n    ListSeparator,\n} from './components/list/list-item.types';\nexport * from './components/dynamic-label/label.types';\nexport * from './components/list/list.types';\nexport * from './components/menu/menu.types';\nexport * from './components/picker/actions.types';\nexport * from './components/picker/searcher.types';\nexport * from './components/progress-flow/progress-flow.types';\nexport * from './components/select/option.types';\nexport * from './components/spinner/spinner.types';\nexport * from './components/tab-panel/tab-panel.types';\nexport * from './components/table/table.types';\nexport * from './global/shared-types/separator.types';\nexport * from './global/shared-types/icon.types';\nexport * from './global/shared-types/image.types';\nexport * from './global/shared-types/color.types';\nexport * from './components/text-editor/text-editor.types';\n"]}

package/dist/types/components/chart/chart.types.d.ts

@@ -1,3 +1,4 @@
+import { Color } from '../../global/shared-types/color.types';
 /**
  * Chart component props.
  * @beta
@@ -20,7 +21,7 @@ export interface ChartItem<T extends number | [number, number] = number | [numbe
    * It is recommended to use distinct colors for each item,
    * and make sure there is enough contrast between colors of adjacent items.
    */
-  color?: string;
+  color?: Color;
   /**
    * When set to `true`, the item will become clickable,
    * which provides visual and accessible feedback when hovered, or focused,

package/dist/types/components/chip-set/chip.types.d.ts

@@ -2,6 +2,7 @@ import { Image } from '../../global/shared-types/image.types';
 import { Icon } from '../../global/shared-types/icon.types';
 import { MenuItem } from '../menu/menu.types';
 import { ListSeparator } from '../list/list-item.types';
+import { Color } from '../../global/shared-types/color.types';
 /**
  * @public
  */
@@ -35,7 +36,7 @@ export interface Chip<T = any> {
    * },
    * ```
    */
-  iconFillColor?: string;
+  iconFillColor?: Color;
   /**
    * `title` attribute of the icon
    *
@@ -63,7 +64,7 @@ export interface Chip<T = any> {
    * },
    * ```
    */
-  iconBackgroundColor?: string;
+  iconBackgroundColor?: Color;
   /**
    * Whether the chip should be removable. Not valid for `choice`.
    */

package/dist/types/components/list/list-item.types.d.ts

@@ -2,6 +2,7 @@ import { ListSeparator } from '../../global/shared-types/separator.types';
 import { Icon } from '../../global/shared-types/icon.types';
 import { MenuItem } from '../menu/menu.types';
 import { Image } from '../../global/shared-types/image.types';
+import { Color } from '../../global/shared-types/color.types';
 export { ListSeparator };
 /**
  * List item.
@@ -37,7 +38,7 @@ export interface ListItem<T = any> {
    * },
    * ```
    */
-  iconColor?: string;
+  iconColor?: Color;
   /**
    * True if the list item should be selected.
    */

package/dist/types/components/menu/menu.types.d.ts

@@ -1,5 +1,6 @@
 import { ListSeparator } from '../../global/shared-types/separator.types';
 import { Icon } from '../../global/shared-types/icon.types';
+import { Color } from '../../global/shared-types/color.types';
 /**
  * The direction in which the menu should open.
  * - `left-start`: Menu opens to the left, aligned with the start of the trigger.
@@ -70,7 +71,7 @@ export interface MenuItem<T = any> {
    * },
    * ```
    */
-  iconColor?: string;
+  iconColor?: Color;
   /**
    * True if the menu item should be selected.
    */

package/dist/types/components/progress-flow/progress-flow.types.d.ts

@@ -1,3 +1,4 @@
+import { Color } from '../../global/shared-types/color.types';
 import { ListItem } from '../list/list-item.types';
 /**
  * A step in a progress flow.
@@ -12,11 +13,11 @@ export interface FlowItem extends ListItem {
   /**
    * Background color of selected step.
    */
-  selectedColor?: string;
+  selectedColor?: Color;
   /**
    * Background color of the step, when it is passed.
    */
-  passedColor?: string;
+  passedColor?: Color;
   /**
    * Fill color of the icon on the step,
    * when it is neither selected nor passed.
@@ -31,6 +32,6 @@ export interface FlowItem extends ListItem {
    * },
    * ```
    */
-  iconColor?: string;
+  iconColor?: Color;
 }
 //# sourceMappingURL=progress-flow.types.d.ts.map

package/dist/types/components/select/option.types.d.ts

@@ -1,3 +1,4 @@
+import { Color } from '../../global/shared-types/color.types';
 import { Icon } from '../../global/shared-types/icon.types';
 /**
  * Describes an option for limel-select.
@@ -46,6 +47,6 @@ export interface Option<T extends string = string> {
    * },
    * ```
    */
-  iconColor?: string;
+  iconColor?: Color;
 }
 //# sourceMappingURL=option.types.d.ts.map

package/dist/types/components/tab-bar/tab.types.d.ts

@@ -1,3 +1,4 @@
+import { Color } from '../../global/shared-types/color.types';
 import { Icon } from '../../global/shared-types/icon.types';
 /**
  * Tab interface.
@@ -33,7 +34,7 @@ export interface Tab {
    * },
    * ```
    */
-  iconColor?: string;
+  iconColor?: Color;
   /**
    * Shows a badge within the tab with a specified label
    */

package/dist/types/global/shared-types/color.types.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Defined colors and any color that can be used.
+ *
+ * Will auto-complete to any defined color from Lime Elements, while still
+ * allowing any valid CSS color value to be used.
+ *
+ * @public
+ */
+export type Color = `rgb(var(${_Internal.HueColor | _Internal.BlackColor | _Internal.WhiteColor | _Internal.ContrastColor | _Internal.BrandColor}))` | (string & {});
+/**
+ * @internal
+ */
+export declare namespace _Internal {
+  /**
+   * @internal
+   */
+  type Hue = 'red' | 'pink' | 'magenta' | 'purple' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'coral' | 'brown' | 'grey' | 'glaucous';
+  /**
+   * @internal
+   */
+  type Brightness = 'lighter' | 'light' | 'default' | 'dark' | 'darker';
+  /**
+   * @internal
+   */
+  type HueColor = `--color-${Hue}-${Brightness}`;
+  /**
+   * @internal
+   */
+  type BlackColor = '--color-black';
+  /**
+   * @internal
+   */
+  type WhiteColor = '--color-white';
+  /**
+   * @internal
+   */
+  type ContrastValue = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100 | 1200 | 1300 | 1400 | 1500 | 1600 | 1700;
+  /**
+   * @internal
+   */
+  type ContrastColor = `--contrast-${ContrastValue}`;
+  /**
+   * @internal
+   */
+  type BrandHue = 'lime-green' | 'ocean-teal' | 'aqua' | 'bubblegum' | 'sunny-orange' | 'cool-grey';
+  /**
+   * @internal
+   */
+  type BrandColor = `--lime-brand-color-${BrandHue}`;
+}
+//# sourceMappingURL=color.types.d.ts.map

package/dist/types/global/shared-types/file.types.d.ts

@@ -1,4 +1,5 @@
 import { Icon } from '../../global/shared-types/icon.types';
+import { Color } from './color.types';
 /**
  * @public
  */
@@ -48,7 +49,7 @@ export interface FileInfo {
    * },
    * ```
    */
-  iconColor?: string;
+  iconColor?: Color;
   /**
    * Background color of the icon. Overrides `--icon-background-color`.
    *
@@ -62,7 +63,7 @@ export interface FileInfo {
    * },
    * ```
    */
-  iconBackgroundColor?: string;
+  iconBackgroundColor?: Color;
   /**
    * URL where the file can be downloaded. Note that this is optional. If the
    * file cannot be directly accessed via a unique url, this property should

package/dist/types/global/shared-types/icon.types.d.ts

@@ -1,3 +1,4 @@
+import { Color } from './color.types';
 /**
  * This interface is used to specify which icon to use in many components,
  * along with related properties, like color.
@@ -11,11 +12,11 @@ export interface Icon {
   /**
    * Color of the icon.
    */
-  color?: string;
+  color?: Color;
   /**
    * Background color of the icon.
    */
-  backgroundColor?: string;
+  backgroundColor?: Color;
   /**
    * Used primarily to improve accessibility for users who
    * take advantage of assistive technologies; but also

package/dist/types/interface.d.ts

@@ -31,5 +31,6 @@ export * from './components/table/table.types';
 export * from './global/shared-types/separator.types';
 export * from './global/shared-types/icon.types';
 export * from './global/shared-types/image.types';
+export * from './global/shared-types/color.types';
 export * from './components/text-editor/text-editor.types';
 //# sourceMappingURL=interface.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.17.1",
+  "version": "38.18.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",