@inversestudio/design-tokens 1.0.18 → 1.0.19

package/dist/css/tokens.css

@@ -104,7 +104,9 @@
   --ids-border-action-secondary: 2px solid #2d2f35;
   --ids-border-action-disabled: 2px solid #adaeb3;
   --ids-border-action-tertiary: 2px solid #00000000;
+  --ids-border-action-item-selected: 2px solid #3a64b8;
   --ids-border-default: 1px solid #8e9099;
+  --ids-border-subtle: 1px solid #ebebef;
   --ids-border-disabled: 1px solid #adaeb3;
   --ids-border-focused: 2px solid #7eaaff;
   --ids-color-background-default: #fafafb;
@@ -145,16 +147,23 @@
   --ids-color-field-pressed: #e0e1e4;
   --ids-color-field-onfield: #2d2f35;
   --ids-color-field-onfieldmuted: #4d5057;
-  --ids-color-navigation-default: #00000000;
-  --ids-color-navigation-hover: #e6edfb;
-  --ids-color-navigation-pressed: #d1def8;
-  --ids-color-navigation-onnavigation: #2d2f35;
+  --ids-color-item-unselected-default: #00000000;
+  --ids-color-item-unselected-hover: #e6edfb;
+  --ids-color-item-unselected-pressed: #d1def8;
+  --ids-color-item-unselected-onnavigation: #2d2f35;
+  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
+  --ids-color-item-selected-default: #00000000;
+  --ids-color-item-selected-hover: #e6edfb;
+  --ids-color-item-selected-pressed: #d1def8;
+  --ids-color-item-selected-onnavigation: #3a64b8;
+  --ids-color-item-selected-onnavigationdisabled: #8e9099;
   --ids-color-border-transparent: #00000000;
   --ids-color-border-strong: #2d2f35;
   --ids-color-border-default: #8e9099;
   --ids-color-border-muted: #c5c6cb;
-  --ids-color-border-subtle: #F8F8FA;
+  --ids-color-border-subtle: #ebebef;
   --ids-color-border-disabled: #adaeb3;
+  --ids-color-border-selected: #3a64b8;
   --ids-color-border-focus: #7eaaff;
   --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
   --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);

package/dist/css/tokens.dark.css

@@ -104,7 +104,9 @@
   --ids-border-action-secondary: 2px solid #2d2f35;
   --ids-border-action-disabled: 2px solid #adaeb3;
   --ids-border-action-tertiary: 2px solid #00000000;
+  --ids-border-action-item-selected: 2px solid #3a64b8;
   --ids-border-default: 1px solid #8e9099;
+  --ids-border-subtle: 1px solid #ebebef;
   --ids-border-disabled: 1px solid #adaeb3;
   --ids-border-focused: 2px solid #7eaaff;
   --ids-color-background-default: #fafafb;
@@ -145,16 +147,23 @@
   --ids-color-field-pressed: #e0e1e4;
   --ids-color-field-onfield: #2d2f35;
   --ids-color-field-onfieldmuted: #4d5057;
-  --ids-color-navigation-default: #00000000;
-  --ids-color-navigation-hover: #e6edfb;
-  --ids-color-navigation-pressed: #d1def8;
-  --ids-color-navigation-onnavigation: #2d2f35;
+  --ids-color-item-unselected-default: #00000000;
+  --ids-color-item-unselected-hover: #e6edfb;
+  --ids-color-item-unselected-pressed: #d1def8;
+  --ids-color-item-unselected-onnavigation: #2d2f35;
+  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
+  --ids-color-item-selected-default: #00000000;
+  --ids-color-item-selected-hover: #e6edfb;
+  --ids-color-item-selected-pressed: #d1def8;
+  --ids-color-item-selected-onnavigation: #3a64b8;
+  --ids-color-item-selected-onnavigationdisabled: #8e9099;
   --ids-color-border-transparent: #00000000;
   --ids-color-border-strong: #2d2f35;
   --ids-color-border-default: #8e9099;
   --ids-color-border-muted: #c5c6cb;
-  --ids-color-border-subtle: #F8F8FA;
+  --ids-color-border-subtle: #ebebef;
   --ids-color-border-disabled: #adaeb3;
+  --ids-color-border-selected: #3a64b8;
   --ids-color-border-focus: #7eaaff;
   --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
   --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);

package/dist/css/tokens.light.css

@@ -104,7 +104,9 @@
   --ids-border-action-secondary: 2px solid #2d2f35;
   --ids-border-action-disabled: 2px solid #adaeb3;
   --ids-border-action-tertiary: 2px solid #00000000;
+  --ids-border-action-item-selected: 2px solid #3a64b8;
   --ids-border-default: 1px solid #8e9099;
+  --ids-border-subtle: 1px solid #ebebef;
   --ids-border-disabled: 1px solid #adaeb3;
   --ids-border-focused: 2px solid #7eaaff;
   --ids-color-background-default: #fafafb;
@@ -145,16 +147,23 @@
   --ids-color-field-pressed: #e0e1e4;
   --ids-color-field-onfield: #2d2f35;
   --ids-color-field-onfieldmuted: #4d5057;
-  --ids-color-navigation-default: #00000000;
-  --ids-color-navigation-hover: #e6edfb;
-  --ids-color-navigation-pressed: #d1def8;
-  --ids-color-navigation-onnavigation: #2d2f35;
+  --ids-color-item-unselected-default: #00000000;
+  --ids-color-item-unselected-hover: #e6edfb;
+  --ids-color-item-unselected-pressed: #d1def8;
+  --ids-color-item-unselected-onnavigation: #2d2f35;
+  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
+  --ids-color-item-selected-default: #00000000;
+  --ids-color-item-selected-hover: #e6edfb;
+  --ids-color-item-selected-pressed: #d1def8;
+  --ids-color-item-selected-onnavigation: #3a64b8;
+  --ids-color-item-selected-onnavigationdisabled: #8e9099;
   --ids-color-border-transparent: #00000000;
   --ids-color-border-strong: #2d2f35;
   --ids-color-border-default: #8e9099;
   --ids-color-border-muted: #c5c6cb;
-  --ids-color-border-subtle: #F8F8FA;
+  --ids-color-border-subtle: #ebebef;
   --ids-color-border-disabled: #adaeb3;
+  --ids-color-border-selected: #3a64b8;
   --ids-color-border-focus: #7eaaff;
   --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
   --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);

package/dist/esm/tokens.dark.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -157,35 +167,42 @@ export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background c
 export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
 export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
 export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
-export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: Disabled backgrounds of secondary and tertiary action components.
+export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
 export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
 export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/esm/tokens.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -176,16 +186,23 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/esm/tokens.light.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -176,16 +186,23 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/js/tokens.dark.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -157,35 +167,42 @@ export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background c
 export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
 export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
 export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
-export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: Disabled backgrounds of secondary and tertiary action components.
+export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
 export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
 export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/js/tokens.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -176,16 +186,23 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/js/tokens.light.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -176,16 +186,23 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/json/tokens.dark.json

@@ -120,11 +120,21 @@
     "width": "2px",
     "style": "solid"
   },
+  "idsBorderActionItemSelected": {
+    "color": "#3a64b8",
+    "width": "2px",
+    "style": "solid"
+  },
   "idsBorderDefault": {
     "color": "#8e9099",
     "width": "1px",
     "style": "solid"
   },
+  "idsBorderSubtle": {
+    "color": "#ebebef",
+    "width": "1px",
+    "style": "solid"
+  },
   "idsBorderDisabled": {
     "color": "#adaeb3",
     "width": "1px",
@@ -173,16 +183,23 @@
   "idsColorFieldPressed": "#e0e1e4",
   "idsColorFieldOnfield": "#2d2f35",
   "idsColorFieldOnfieldmuted": "#4d5057",
-  "idsColorNavigationDefault": "#00000000",
-  "idsColorNavigationHover": "#e6edfb",
-  "idsColorNavigationPressed": "#d1def8",
-  "idsColorNavigationOnnavigation": "#2d2f35",
+  "idsColorItemUnselectedDefault": "#00000000",
+  "idsColorItemUnselectedHover": "#e6edfb",
+  "idsColorItemUnselectedPressed": "#d1def8",
+  "idsColorItemUnselectedOnnavigation": "#2d2f35",
+  "idsColorItemUnselectedOnnavigationdisabled": "#8e9099",
+  "idsColorItemSelectedDefault": "#00000000",
+  "idsColorItemSelectedHover": "#e6edfb",
+  "idsColorItemSelectedPressed": "#d1def8",
+  "idsColorItemSelectedOnnavigation": "#3a64b8",
+  "idsColorItemSelectedOnnavigationdisabled": "#8e9099",
   "idsColorBorderTransparent": "#00000000",
   "idsColorBorderStrong": "#2d2f35",
   "idsColorBorderDefault": "#8e9099",
   "idsColorBorderMuted": "#c5c6cb",
-  "idsColorBorderSubtle": "#F8F8FA",
+  "idsColorBorderSubtle": "#ebebef",
   "idsColorBorderDisabled": "#adaeb3",
+  "idsColorBorderSelected": "#3a64b8",
   "idsColorBorderFocus": "#7eaaff",
   "idsColorBoxshadowAlpha16": "lch(5.0543 1.8805 272.92 / 0.16)",
   "idsColorBoxshadowAlpha24": "lch(5.0543 1.8805 272.92 / 0.24)",

package/dist/json/tokens.dark.nested.json

@@ -160,6 +160,13 @@
           "color": "#00000000",
           "width": "2px",
           "style": "solid"
+        },
+        "item": {
+          "selected": {
+            "color": "#3a64b8",
+            "width": "2px",
+            "style": "solid"
+          }
         }
       },
       "default": {
@@ -167,6 +174,11 @@
         "width": "1px",
         "style": "solid"
       },
+      "subtle": {
+        "color": "#ebebef",
+        "width": "1px",
+        "style": "solid"
+      },
       "disabled": {
         "color": "#adaeb3",
         "width": "1px",
@@ -245,19 +257,30 @@
         "onField": "#2d2f35",
         "onFieldMuted": "#4d5057"
       },
-      "navigation": {
-        "default": "#00000000",
-        "hover": "#e6edfb",
-        "pressed": "#d1def8",
-        "onNavigation": "#2d2f35"
+      "item": {
+        "unselected": {
+          "default": "#00000000",
+          "hover": "#e6edfb",
+          "pressed": "#d1def8",
+          "onNavigation": "#2d2f35",
+          "onNavigationDisabled": "#8e9099"
+        },
+        "selected": {
+          "default": "#00000000",
+          "hover": "#e6edfb",
+          "pressed": "#d1def8",
+          "onNavigation": "#3a64b8",
+          "onNavigationDisabled": "#8e9099"
+        }
       },
       "border": {
         "transparent": "#00000000",
         "strong": "#2d2f35",
         "default": "#8e9099",
         "muted": "#c5c6cb",
-        "subtle": "#F8F8FA",
+        "subtle": "#ebebef",
         "disabled": "#adaeb3",
+        "selected": "#3a64b8",
         "focus": "#7eaaff"
       },
       "boxShadow": {