Update

core/bitrix/js/ui/system/chip/dist/chip.bundle.css

@@ -7,31 +7,34 @@
 /* size */
 .ui-chip {
 	--min-height: 32px;
-	--padding: 5px 12px;
+	--padding: 0 12px;
 	--font-size: var(--ui-font-size-md);
 	--line-height: var(--ui-font-line-height-sm);
 	--icon-size: 20px;
+	--background-icon-size: 14px;
 }
 
 .ui-chip.--m {
-	--padding: 4px 10px;
+	--padding: 0 10px;
 	--min-height: 28px;
 }
 
 .ui-chip.--s {
 	--min-height: 24px;
-	--padding: 3px 10px;
+	--padding: 0 10px;
 	--font-size: var(--ui-font-size-sm);
 	--line-height: var(--ui-font-line-height-2xs);
 	--icon-size: 18px;
+	--background-icon-size: 12px;
 }
 
 .ui-chip.--xs {
 	--min-height: 20px;
-	--padding: 2px 10px;
+	--padding: 0 10px;
 	--font-size: var(--ui-font-size-xs);
 	--line-height: var(--ui-font-line-height-3xs);
 	--icon-size: 16px;
+	--background-icon-size: 10px;
 }
 
 
@@ -51,6 +54,8 @@
 
 	--clear-color: var(--text-color);
 	--box-shadow: none;
+
+	--cursor: pointer;
 }
 
 .ui-chip.--filled {
@@ -95,6 +100,11 @@
 	--clear-color: var(--ui-color-base-4);
 }
 
+.ui-chip.--outline-copilot {
+	--text-color: var(--ui-color-copilot-accent-primary);
+	--border-color: var(--ui-color-copilot-bg-content-2);
+}
+
 .ui-chip.--shadow-no-accent {
 	--text-color: var(--ui-color-base-3);
 	--text-color-hover: var(--ui-color-base-1);
@@ -116,6 +126,12 @@
 	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 }
 
+.ui-chip.--shadow-disabled {
+	--text-color: var(--ui-color-base-5);
+	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+	--cursor: default;
+}
+
 .ui-chip.--lock {
 	--text-color: var(--ui-color-base-5);
 	--background: var(--ui-color-base-7);
@@ -139,7 +155,7 @@
 	background: var(--background);
 	border: var(--ui-border-width-thin) solid var(--border-color);
 	box-shadow: var(--box-shadow);
-	cursor: pointer;
+	cursor: var(--cursor);
 	transition: border-color var(--transition-duration);
 }
 
@@ -169,14 +185,25 @@
 .ui-chip-icon {
 	--ui-icon-set__icon-color: var(--icon-color);
 	--ui-icon-set__icon-size: var(--icon-size);
+	display: grid;
+	place-items: center;
 	margin: 0 var(--ui-space-inline-2xs) 0 var(--ui-space-stack-2xs2-neg);
 }
 
-.ui-chip.--no-text:not(.--with-clear) .ui-chip-icon {
+.ui-chip-icon.--with-background {
+	--icon-background: initial;
+	--ui-icon-set__icon-size: var(--background-icon-size);
+	width: var(--icon-size);
+	height: var(--icon-size);
+	border-radius: var(--ui-border-radius-pill);
+	background: var(--icon-background);
+}
+
+.ui-chip.--no-text:not(.--with-right-icon) .ui-chip-icon {
 	margin-right: var(--ui-space-stack-2xs2-neg);
 }
 
-.ui-chip.--no-text.--with-clear .ui-chip-icon {
+.ui-chip.--no-text.--with-right-icon .ui-chip-icon {
 	margin-right: var(--ui-space-inline-3xs);
 }
 
@@ -208,15 +235,15 @@
 }
 
 
-/* clear */
-.ui-chip-clear {
+/* right-icon */
+.ui-chip-right-icon {
 	--ui-icon-set__icon-color: var(--clear-color);
 	--ui-icon-set__icon-size: var(--icon-size);
 	margin-right: var(--ui-space-inline-2xs2-neg);
 	opacity: var(--ui-opacity-50);
 }
 
-.ui-chip-clear:hover {
+.ui-chip-right-icon:hover {
 	opacity: var(--ui-opacity-70);
 }
 

core/bitrix/js/ui/system/chip/dist/chip.bundle.js

@@ -13,9 +13,11 @@ this.BX.UI.System = this.BX.UI.System || {};
 	  OutlineWarning: 'outline-warning',
 	  Outline: 'outline',
 	  OutlineNoAccent: 'outline-no-accent',
+	  OutlineCopilot: 'outline-copilot',
 	  ShadowNoAccent: 'shadow-no-accent',
 	  Shadow: 'shadow',
-	  ShadowAccent: 'shadow-accent'
+	  ShadowAccent: 'shadow-accent',
+	  ShadowDisabled: 'shadow-disabled'
 	});
 	const ChipSize = Object.freeze({
 	  Lg: 'l',
@@ -41,7 +43,15 @@ this.BX.UI.System = this.BX.UI.System || {};
 	    },
 	    icon: {
 	      type: String,
-	      default: ''
+	      default: null
+	    },
+	    iconColor: {
+	      type: String,
+	      default: null
+	    },
+	    iconBackground: {
+	      type: String,
+	      default: null
 	    },
 	    image: {
 	      /** @type ChipImage */
@@ -60,6 +70,10 @@ this.BX.UI.System = this.BX.UI.System || {};
 	      type: Boolean,
 	      default: false
 	    },
+	    dropdown: {
+	      type: Boolean,
+	      default: false
+	    },
 	    lock: {
 	      type: Boolean,
 	      default: false
@@ -92,7 +106,7 @@ this.BX.UI.System = this.BX.UI.System || {};
 					'--rounded': rounded,
 					'--trimmable': trimmable,
 					'--lock': lock,
-					'--with-clear': withClear,
+					'--with-right-icon': withClear || dropdown,
 					'--no-text': text.length === 0,
 				},
 			]"
@@ -101,9 +115,17 @@ this.BX.UI.System = this.BX.UI.System || {};
 			@click="$emit('click')"
 		>
 			<img v-if="image" class="ui-chip-icon --image" :src="image.src" :alt="image.alt">
-			<BIcon v-if="icon" class="ui-chip-icon" :name="icon"/>
+			<div
+				v-if="icon"
+				class="ui-chip-icon"
+				:class="{ '--with-background': Boolean(iconBackground) }"
+				:style="{ '--icon-background': iconBackground }"
+			>
+				<BIcon :name="icon" :color="iconColor"/>
+			</div>
 			<div class="ui-chip-text">{{ text }}</div>
-			<BIcon v-if="withClear" class="ui-chip-clear" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>
+			<BIcon v-if="dropdown" class="ui-chip-right-icon" :name="Outline.CHEVRON_DOWN_M"/>
+			<BIcon v-if="withClear" class="ui-chip-right-icon" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>
 			<BIcon v-if="lock" class="ui-chip-lock" :name="Outline.LOCK_M"/>
 		</div>
 	`

core/bitrix/js/ui/system/chip/dist/chip.bundle.map.js

@@ -1 +1 @@
-{"version":3,"file":"chip.bundle.map.js","names":["this","BX","UI","System","exports","ui_iconSet_api_vue","ChipDesign","Object","freeze","Filled","OutlineAccent","OutlineSuccess","OutlineAlert","OutlineWarning","Outline","OutlineNoAccent","ShadowNoAccent","Shadow","ShadowAccent","ChipSize","Lg","Md","Sm","Xs","Chip","name","components","BIcon","props","size","type","String","default","design","icon","image","text","rounded","Boolean","withClear","lock","trimmable","emits","setup","methods","handleKeydown","event","key","ctrlKey","metaKey","$emit","template","vue","Vue","IconSet"],"sources":["chip.bundle.js"],"mappings":"AACAA,KAAKC,GAAKD,KAAKC,IAAM,CAAC,EACtBD,KAAKC,GAAGC,GAAKF,KAAKC,GAAGC,IAAM,CAAC,EAC5BF,KAAKC,GAAGC,GAAGC,OAASH,KAAKC,GAAGC,GAAGC,QAAU,CAAC,GACzC,SAAUC,EAAQC,GAClB,aAEA,MAAMC,EAAaC,OAAOC,OAAO,CAC/BC,OAAQ,SACRC,cAAe,iBACfC,eAAgB,kBAChBC,aAAc,gBACdC,eAAgB,kBAChBC,QAAS,UACTC,gBAAiB,oBACjBC,eAAgB,mBAChBC,OAAQ,SACRC,aAAc,kBAEhB,MAAMC,EAAWZ,OAAOC,OAAO,CAC7BY,GAAI,IACJC,GAAI,IACJC,GAAI,IACJC,GAAI,OAIN,MAAMC,EAAO,CACXC,KAAM,SACNC,WAAY,CACVC,MAAOtB,EAAmBsB,OAE5BC,MAAO,CACLC,KAAM,CACJC,KAAMC,OACNC,QAASb,EAASC,IAEpBa,OAAQ,CACNH,KAAMC,OACNC,QAAS1B,EAAWQ,SAEtBoB,KAAM,CACJJ,KAAMC,OACNC,QAAS,IAEXG,MAAO,CAELL,KAAMvB,OACNyB,QAAS,MAEXI,KAAM,CACJN,KAAMC,OACNC,QAAS,IAEXK,QAAS,CACPP,KAAMQ,QACNN,QAAS,OAEXO,UAAW,CACTT,KAAMQ,QACNN,QAAS,OAEXQ,KAAM,CACJV,KAAMQ,QACNN,QAAS,OAEXS,UAAW,CACTX,KAAMQ,QACNN,QAAS,QAGbU,MAAO,CAAC,QAAS,SACjB,KAAAC,GACE,MAAO,CACL7B,QAAST,EAAmBS,QAEhC,EACA8B,QAAS,CACP,aAAAC,CAAcC,GACZ,GAAIA,EAAMC,MAAQ,WAAaD,EAAME,SAAWF,EAAMG,SAAU,CAC9DjD,KAAKkD,MAAM,QACb,CACF,GAEFC,SAAU,8xBA2BZ,IAAIC,EAAmB7C,OAAOC,OAAO,CACpCF,WAAYA,EACZa,SAAUA,EACVK,KAAMA,IAGPpB,EAAQiD,IAAMD,EACdhD,EAAQE,WAAaA,EACrBF,EAAQe,SAAWA,CAEpB,EArHA,CAqHGnB,KAAKC,GAAGC,GAAGC,OAAOqB,KAAOxB,KAAKC,GAAGC,GAAGC,OAAOqB,MAAQ,CAAC,EAAGvB,GAAGC,GAAGoD","ignoreList":[]}
+{"version":3,"file":"chip.bundle.map.js","names":["this","BX","UI","System","exports","ui_iconSet_api_vue","ChipDesign","Object","freeze","Filled","OutlineAccent","OutlineSuccess","OutlineAlert","OutlineWarning","Outline","OutlineNoAccent","OutlineCopilot","ShadowNoAccent","Shadow","ShadowAccent","ShadowDisabled","ChipSize","Lg","Md","Sm","Xs","Chip","name","components","BIcon","props","size","type","String","default","design","icon","iconColor","iconBackground","image","text","rounded","Boolean","withClear","dropdown","lock","trimmable","emits","setup","methods","handleKeydown","event","key","ctrlKey","metaKey","$emit","template","vue","Vue","IconSet"],"sources":["chip.bundle.js"],"mappings":"AACAA,KAAKC,GAAKD,KAAKC,IAAM,CAAC,EACtBD,KAAKC,GAAGC,GAAKF,KAAKC,GAAGC,IAAM,CAAC,EAC5BF,KAAKC,GAAGC,GAAGC,OAASH,KAAKC,GAAGC,GAAGC,QAAU,CAAC,GACzC,SAAUC,EAAQC,GAClB,aAEA,MAAMC,EAAaC,OAAOC,OAAO,CAC/BC,OAAQ,SACRC,cAAe,iBACfC,eAAgB,kBAChBC,aAAc,gBACdC,eAAgB,kBAChBC,QAAS,UACTC,gBAAiB,oBACjBC,eAAgB,kBAChBC,eAAgB,mBAChBC,OAAQ,SACRC,aAAc,gBACdC,eAAgB,oBAElB,MAAMC,EAAWd,OAAOC,OAAO,CAC7Bc,GAAI,IACJC,GAAI,IACJC,GAAI,IACJC,GAAI,OAIN,MAAMC,EAAO,CACXC,KAAM,SACNC,WAAY,CACVC,MAAOxB,EAAmBwB,OAE5BC,MAAO,CACLC,KAAM,CACJC,KAAMC,OACNC,QAASb,EAASC,IAEpBa,OAAQ,CACNH,KAAMC,OACNC,QAAS5B,EAAWQ,SAEtBsB,KAAM,CACJJ,KAAMC,OACNC,QAAS,MAEXG,UAAW,CACTL,KAAMC,OACNC,QAAS,MAEXI,eAAgB,CACdN,KAAMC,OACNC,QAAS,MAEXK,MAAO,CAELP,KAAMzB,OACN2B,QAAS,MAEXM,KAAM,CACJR,KAAMC,OACNC,QAAS,IAEXO,QAAS,CACPT,KAAMU,QACNR,QAAS,OAEXS,UAAW,CACTX,KAAMU,QACNR,QAAS,OAEXU,SAAU,CACRZ,KAAMU,QACNR,QAAS,OAEXW,KAAM,CACJb,KAAMU,QACNR,QAAS,OAEXY,UAAW,CACTd,KAAMU,QACNR,QAAS,QAGba,MAAO,CAAC,QAAS,SACjB,KAAAC,GACE,MAAO,CACLlC,QAAST,EAAmBS,QAEhC,EACAmC,QAAS,CACP,aAAAC,CAAcC,GACZ,GAAIA,EAAMC,MAAQ,WAAaD,EAAME,SAAWF,EAAMG,SAAU,CAC9DtD,KAAKuD,MAAM,QACb,CACF,GAEFC,SAAU,qlCAmCZ,IAAIC,EAAmBlD,OAAOC,OAAO,CACpCF,WAAYA,EACZe,SAAUA,EACVK,KAAMA,IAGPtB,EAAQsD,IAAMD,EACdrD,EAAQE,WAAaA,EACrBF,EAAQiB,SAAWA,CAEpB,EA3IA,CA2IGrB,KAAKC,GAAGC,GAAGC,OAAOuB,KAAO1B,KAAKC,GAAGC,GAAGC,OAAOuB,MAAQ,CAAC,EAAGzB,GAAGC,GAAGyD","ignoreList":[]}

core/bitrix/js/ui/system/chip/dist/chip.bundle.min.js

@@ -1,2 +1,2 @@
-this.BX=this.BX||{};this.BX.UI=this.BX.UI||{};this.BX.UI.System=this.BX.UI.System||{};(function(t,e){"use strict";const n=Object.freeze({Filled:"filled",OutlineAccent:"outline-accent",OutlineSuccess:"outline-success",OutlineAlert:"outline-alert",OutlineWarning:"outline-warning",Outline:"outline",OutlineNoAccent:"outline-no-accent",ShadowNoAccent:"shadow-no-accent",Shadow:"shadow",ShadowAccent:"shadow-accent"});const i=Object.freeze({Lg:"l",Md:"m",Sm:"s",Xs:"xs"});const l={name:"UiChip",components:{BIcon:e.BIcon},props:{size:{type:String,default:i.Lg},design:{type:String,default:n.Outline},icon:{type:String,default:""},image:{type:Object,default:null},text:{type:String,default:""},rounded:{type:Boolean,default:false},withClear:{type:Boolean,default:false},lock:{type:Boolean,default:false},trimmable:{type:Boolean,default:false}},emits:["click","clear"],setup(){return{Outline:e.Outline}},methods:{handleKeydown(t){if(t.key==="Enter"&&!(t.ctrlKey||t.metaKey)){this.$emit("click")}}},template:`\n\t\t<div\n\t\t\tclass="ui-chip"\n\t\t\t:class="[\n\t\t\t\t'--' + design,\n\t\t\t\t'--' + size,\n\t\t\t\t{\n\t\t\t\t\t'--rounded': rounded,\n\t\t\t\t\t'--trimmable': trimmable,\n\t\t\t\t\t'--lock': lock,\n\t\t\t\t\t'--with-clear': withClear,\n\t\t\t\t\t'--no-text': text.length === 0,\n\t\t\t\t},\n\t\t\t]"\n\t\t\ttabindex="0"\n\t\t\t@keydown="handleKeydown"\n\t\t\t@click="$emit('click')"\n\t\t>\n\t\t\t<img v-if="image" class="ui-chip-icon --image" :src="image.src" :alt="image.alt">\n\t\t\t<BIcon v-if="icon" class="ui-chip-icon" :name="icon"/>\n\t\t\t<div class="ui-chip-text">{{ text }}</div>\n\t\t\t<BIcon v-if="withClear" class="ui-chip-clear" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>\n\t\t\t<BIcon v-if="lock" class="ui-chip-lock" :name="Outline.LOCK_M"/>\n\t\t</div>\n\t`};var c=Object.freeze({ChipDesign:n,ChipSize:i,Chip:l});t.Vue=c;t.ChipDesign=n;t.ChipSize=i})(this.BX.UI.System.Chip=this.BX.UI.System.Chip||{},BX.UI.IconSet);
+this.BX=this.BX||{};this.BX.UI=this.BX.UI||{};this.BX.UI.System=this.BX.UI.System||{};(function(t,e){"use strict";const n=Object.freeze({Filled:"filled",OutlineAccent:"outline-accent",OutlineSuccess:"outline-success",OutlineAlert:"outline-alert",OutlineWarning:"outline-warning",Outline:"outline",OutlineNoAccent:"outline-no-accent",OutlineCopilot:"outline-copilot",ShadowNoAccent:"shadow-no-accent",Shadow:"shadow",ShadowAccent:"shadow-accent",ShadowDisabled:"shadow-disabled"});const i=Object.freeze({Lg:"l",Md:"m",Sm:"s",Xs:"xs"});const l={name:"UiChip",components:{BIcon:e.BIcon},props:{size:{type:String,default:i.Lg},design:{type:String,default:n.Outline},icon:{type:String,default:null},iconColor:{type:String,default:null},iconBackground:{type:String,default:null},image:{type:Object,default:null},text:{type:String,default:""},rounded:{type:Boolean,default:false},withClear:{type:Boolean,default:false},dropdown:{type:Boolean,default:false},lock:{type:Boolean,default:false},trimmable:{type:Boolean,default:false}},emits:["click","clear"],setup(){return{Outline:e.Outline}},methods:{handleKeydown(t){if(t.key==="Enter"&&!(t.ctrlKey||t.metaKey)){this.$emit("click")}}},template:`\n\t\t<div\n\t\t\tclass="ui-chip"\n\t\t\t:class="[\n\t\t\t\t'--' + design,\n\t\t\t\t'--' + size,\n\t\t\t\t{\n\t\t\t\t\t'--rounded': rounded,\n\t\t\t\t\t'--trimmable': trimmable,\n\t\t\t\t\t'--lock': lock,\n\t\t\t\t\t'--with-right-icon': withClear || dropdown,\n\t\t\t\t\t'--no-text': text.length === 0,\n\t\t\t\t},\n\t\t\t]"\n\t\t\ttabindex="0"\n\t\t\t@keydown="handleKeydown"\n\t\t\t@click="$emit('click')"\n\t\t>\n\t\t\t<img v-if="image" class="ui-chip-icon --image" :src="image.src" :alt="image.alt">\n\t\t\t<div\n\t\t\t\tv-if="icon"\n\t\t\t\tclass="ui-chip-icon"\n\t\t\t\t:class="{ '--with-background': Boolean(iconBackground) }"\n\t\t\t\t:style="{ '--icon-background': iconBackground }"\n\t\t\t>\n\t\t\t\t<BIcon :name="icon" :color="iconColor"/>\n\t\t\t</div>\n\t\t\t<div class="ui-chip-text">{{ text }}</div>\n\t\t\t<BIcon v-if="dropdown" class="ui-chip-right-icon" :name="Outline.CHEVRON_DOWN_M"/>\n\t\t\t<BIcon v-if="withClear" class="ui-chip-right-icon" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>\n\t\t\t<BIcon v-if="lock" class="ui-chip-lock" :name="Outline.LOCK_M"/>\n\t\t</div>\n\t`};var c=Object.freeze({ChipDesign:n,ChipSize:i,Chip:l});t.Vue=c;t.ChipDesign=n;t.ChipSize=i})(this.BX.UI.System.Chip=this.BX.UI.System.Chip||{},BX.UI.IconSet);
 //# sourceMappingURL=chip.bundle.map.js

core/bitrix/js/ui/system/chip/src/chip.css

@@ -7,31 +7,34 @@
 /* size */
 .ui-chip {
 	--min-height: 32px;
-	--padding: 5px 12px;
+	--padding: 0 12px;
 	--font-size: var(--ui-font-size-md);
 	--line-height: var(--ui-font-line-height-sm);
 	--icon-size: 20px;
+	--background-icon-size: 14px;
 }
 
 .ui-chip.--m {
-	--padding: 4px 10px;
+	--padding: 0 10px;
 	--min-height: 28px;
 }
 
 .ui-chip.--s {
 	--min-height: 24px;
-	--padding: 3px 10px;
+	--padding: 0 10px;
 	--font-size: var(--ui-font-size-sm);
 	--line-height: var(--ui-font-line-height-2xs);
 	--icon-size: 18px;
+	--background-icon-size: 12px;
 }
 
 .ui-chip.--xs {
 	--min-height: 20px;
-	--padding: 2px 10px;
+	--padding: 0 10px;
 	--font-size: var(--ui-font-size-xs);
 	--line-height: var(--ui-font-line-height-3xs);
 	--icon-size: 16px;
+	--background-icon-size: 10px;
 }
 
 
@@ -51,6 +54,8 @@
 
 	--clear-color: var(--text-color);
 	--box-shadow: none;
+
+	--cursor: pointer;
 }
 
 .ui-chip.--filled {
@@ -95,6 +100,11 @@
 	--clear-color: var(--ui-color-base-4);
 }
 
+.ui-chip.--outline-copilot {
+	--text-color: var(--ui-color-copilot-accent-primary);
+	--border-color: var(--ui-color-copilot-bg-content-2);
+}
+
 .ui-chip.--shadow-no-accent {
 	--text-color: var(--ui-color-base-3);
 	--text-color-hover: var(--ui-color-base-1);
@@ -116,6 +126,12 @@
 	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 }
 
+.ui-chip.--shadow-disabled {
+	--text-color: var(--ui-color-base-5);
+	--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+	--cursor: default;
+}
+
 .ui-chip.--lock {
 	--text-color: var(--ui-color-base-5);
 	--background: var(--ui-color-base-7);
@@ -138,7 +154,7 @@
 	background: var(--background);
 	border: var(--ui-border-width-thin) solid var(--border-color);
 	box-shadow: var(--box-shadow);
-	cursor: pointer;
+	cursor: var(--cursor);
 	transition: border-color var(--transition-duration);
 }
 
@@ -168,14 +184,25 @@
 .ui-chip-icon {
 	--ui-icon-set__icon-color: var(--icon-color);
 	--ui-icon-set__icon-size: var(--icon-size);
+	display: grid;
+	place-items: center;
 	margin: 0 var(--ui-space-inline-2xs) 0 var(--ui-space-stack-2xs2-neg);
 }
 
-.ui-chip.--no-text:not(.--with-clear) .ui-chip-icon {
+.ui-chip-icon.--with-background {
+	--icon-background: initial;
+	--ui-icon-set__icon-size: var(--background-icon-size);
+	width: var(--icon-size);
+	height: var(--icon-size);
+	border-radius: var(--ui-border-radius-pill);
+	background: var(--icon-background);
+}
+
+.ui-chip.--no-text:not(.--with-right-icon) .ui-chip-icon {
 	margin-right: var(--ui-space-stack-2xs2-neg);
 }
 
-.ui-chip.--no-text.--with-clear .ui-chip-icon {
+.ui-chip.--no-text.--with-right-icon .ui-chip-icon {
 	margin-right: var(--ui-space-inline-3xs);
 }
 
@@ -207,15 +234,15 @@
 }
 
 
-/* clear */
-.ui-chip-clear {
+/* right-icon */
+.ui-chip-right-icon {
 	--ui-icon-set__icon-color: var(--clear-color);
 	--ui-icon-set__icon-size: var(--icon-size);
 	margin-right: var(--ui-space-inline-2xs2-neg);
 	opacity: var(--ui-opacity-50);
 }
 
-.ui-chip-clear:hover {
+.ui-chip-right-icon:hover {
 	opacity: var(--ui-opacity-70);
 }
 

core/bitrix/js/ui/system/chip/src/const.js

@@ -6,9 +6,11 @@ export const ChipDesign = Object.freeze({
 	OutlineWarning: 'outline-warning',
 	Outline: 'outline',
 	OutlineNoAccent: 'outline-no-accent',
+	OutlineCopilot: 'outline-copilot',
 	ShadowNoAccent: 'shadow-no-accent',
 	Shadow: 'shadow',
 	ShadowAccent: 'shadow-accent',
+	ShadowDisabled: 'shadow-disabled',
 });
 
 export const ChipSize = Object.freeze({

core/bitrix/js/ui/system/chip/src/vue.js

@@ -25,7 +25,15 @@ export const Chip = {
 		},
 		icon: {
 			type: String,
-			default: '',
+			default: null,
+		},
+		iconColor: {
+			type: String,
+			default: null,
+		},
+		iconBackground: {
+			type: String,
+			default: null,
 		},
 		image: {
 			/** @type ChipImage */
@@ -44,6 +52,10 @@ export const Chip = {
 			type: Boolean,
 			default: false,
 		},
+		dropdown: {
+			type: Boolean,
+			default: false,
+		},
 		lock: {
 			type: Boolean,
 			default: false,
@@ -79,7 +91,7 @@ export const Chip = {
 					'--rounded': rounded,
 					'--trimmable': trimmable,
 					'--lock': lock,
-					'--with-clear': withClear,
+					'--with-right-icon': withClear || dropdown,
 					'--no-text': text.length === 0,
 				},
 			]"
@@ -88,9 +100,17 @@ export const Chip = {
 			@click="$emit('click')"
 		>
 			<img v-if="image" class="ui-chip-icon --image" :src="image.src" :alt="image.alt">
-			<BIcon v-if="icon" class="ui-chip-icon" :name="icon"/>
+			<div
+				v-if="icon"
+				class="ui-chip-icon"
+				:class="{ '--with-background': Boolean(iconBackground) }"
+				:style="{ '--icon-background': iconBackground }"
+			>
+				<BIcon :name="icon" :color="iconColor"/>
+			</div>
 			<div class="ui-chip-text">{{ text }}</div>
-			<BIcon v-if="withClear" class="ui-chip-clear" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>
+			<BIcon v-if="dropdown" class="ui-chip-right-icon" :name="Outline.CHEVRON_DOWN_M"/>
+			<BIcon v-if="withClear" class="ui-chip-right-icon" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>
 			<BIcon v-if="lock" class="ui-chip-lock" :name="Outline.LOCK_M"/>
 		</div>
 	`,